Added optional authentication

app/Console/Commands/AuthenticationCommand.php

@@ -0,0 +1,59 @@
+<?php
+
+namespace App\Console\Commands;
+
+use App\Helpers\SettingsHelper;
+use Illuminate\Console\Command;
+
+class AuthenticationCommand extends Command
+{
+    /**
+     * The name and signature of the console command.
+     *
+     * @var string
+     */
+    protected $signature = 'speedtest:auth {--enable} {--disable}';
+
+    /**
+     * The console command description.
+     *
+     * @var string
+     */
+    protected $description = 'Toggle authentication for the app';
+
+    /**
+     * Create a new command instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        parent::__construct();
+    }
+
+    /**
+     * Execute the console command.
+     *
+     * @return int
+     */
+    public function handle()
+    {
+        $opts = $this->options();
+
+        if($opts['enable'] === true && $opts['disable'] === true) {
+            $this->warn('Please specify only ONE of --enable and --disable');
+        } else if($opts['enable'] === false && $opts['disable'] === false) {
+            $this->warn('You need to specify either --enable OR --disable');
+        } else {
+            if($opts['enable'] === true) {
+                $this->info('Enabling authentication');
+                SettingsHelper::set('auth', true);
+            }
+
+            if($opts['disable'] === true) {
+                $this->info('Disabling authentication');
+                SettingsHelper::set('auth', false);
+            }
+        }
+    }
+}

app/Console/Commands/ClearOldSessionsCommand.php

@@ -0,0 +1,48 @@
+<?php
+
+namespace App\Console\Commands;
+
+use App\Auth\LoginSession;
+use Carbon\Carbon;
+use Illuminate\Console\Command;
+use Log;
+
+class ClearOldSessionsCommand extends Command
+{
+    /**
+     * The name and signature of the console command.
+     *
+     * @var string
+     */
+    protected $signature = 'speedtest:clear-sessions';
+
+    /**
+     * The console command description.
+     *
+     * @var string
+     */
+    protected $description = 'Clear expired sessions from database';
+
+    /**
+     * Create a new command instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        parent::__construct();
+    }
+
+    /**
+     * Execute the console command.
+     *
+     * @return int
+     */
+    public function handle()
+    {
+        $now = Carbon::now()->timestamp;
+        $sessions = LoginSession::where('expires', '<=', $now)
+                    ->delete();
+        $this->info('Invalidated expired sessions');
+    }
+}

app/Console/Kernel.php

@@ -30,6 +30,7 @@ class Kernel extends ConsoleKernel
     {
         $schedule->job(new SpeedtestJob(true, config('integrations')))->cron(SettingsHelper::get('schedule')['value']);
         $schedule->command('speedtest:overview')->cron('0 ' . SettingsHelper::get('speedtest_overview_time')->value . ' * * *');
+        $schedule->command('speedtest:clear-sessions')->everyMinute();
     }
 
     /**

app/Helpers/SettingsHelper.php

@@ -145,7 +145,8 @@ class SettingsHelper {
                 'slack_webhook' => SettingsHelper::settingIsEditable('slack_webhook'),
                 'telegram_bot_token' => SettingsHelper::settingIsEditable('telegram_bot_token'),
                 'telegram_chat_id' => SettingsHelper::settingIsEditable('telegram_chat_id'),
-            ]
+            ],
+            'auth' => (bool)SettingsHelper::get('auth')->value
         ];
     }
 

app/Helpers/SpeedtestHelper.php

@@ -227,7 +227,7 @@ class SpeedtestHelper {
             $range = [
                 Carbon::today()
             ];
-            for($i = 0; $i < $days; $i++) {
+            for($i = 0; $i < ($days - 1); $i++) {
                 $prev = end($range);
                 $new = $prev->copy()->subDays(1);
                 array_push($range, $new);

app/Http/Controllers/AuthController.php

@@ -8,11 +8,14 @@ use App\Helpers\EmailVerificationHelper;
 use Illuminate\Support\Facades\Auth;
 use App\Http\Controllers\Controller;
 use App\LoginSession;
+use App\Rules\CurrentPasswordMatches;
 use App\User;
 use DateTime;
+use Hash;
 use Illuminate\Support\Facades\Request as RequestFacade;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Validator;
+use Log;
 use Ramsey\Uuid\Uuid;
 
 class AuthController extends Controller
@@ -164,6 +167,10 @@ class AuthController extends Controller
             [ 'expires', '>', time() ]
         ])->get();
 
+        $sessions = $sessions->map(function ($item) {
+            return collect($item)->forget(['token']);
+        });
+
         return response()->json([
             'method' => 'get auth sessions',
             'response' => $sessions
@@ -211,4 +218,36 @@ class AuthController extends Controller
             'success' => true,
         ], 200);
     }
+
+    public function changePassword(Request $request)
+    {
+        $rules = [
+            'currentPassword' => [ 'string', 'required', new CurrentPasswordMatches() ],
+            'newPassword' => [ 'required', 'string', 'confirmed', 'min:8' ],
+            'logoutDevices' => [ 'required', 'bool' ]
+        ];
+
+        $validator = Validator::make($request->all(), $rules);
+        if($validator->fails()) {
+            return response()->json([
+                'method' => 'reset password',
+                'success' => false,
+                'error' => $validator->errors()
+            ], 403);
+        }
+
+        $user = Auth::user();
+
+        $user->password = $request->newPassword;
+        $user->save();
+
+        if($request->logoutDevices == true) {
+            AuthLoginSession::where('user_id', $user->id)->update([ 'active' => false ]);
+        }
+
+        return response()->json([
+            'method' => 'reset password',
+            'success' => true
+        ], 200);
+    }
 }

app/Http/Controllers/BackupController.php

@@ -3,6 +3,7 @@
 namespace App\Http\Controllers;
 
 use App\Helpers\BackupHelper;
+use App\Helpers\SettingsHelper;
 use DateTime;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Storage;
@@ -12,6 +13,13 @@ use Illuminate\Http\JsonResponse;
 class BackupController extends Controller
 {
 
+    public function __construct()
+    {
+        if((bool)SettingsHelper::get('auth')->value === true) {
+            $this->middleware('auth:api');
+        }
+    }
+
     /**
      * Get backup of speedtests
      *

app/Http/Controllers/IntegrationsController.php

@@ -13,6 +13,13 @@ use Ramsey\Uuid\Exception\InvalidUuidStringException;
 
 class IntegrationsController extends Controller
 {
+    public function __construct()
+    {
+        if((bool)SettingsHelper::get('auth')->value === true) {
+            $this->middleware('auth:api');
+        }
+    }
+
     /**
      * Test the healthchecks config
      *

app/Http/Controllers/SettingsController.php

@@ -13,6 +13,13 @@ use Illuminate\Support\Collection;
 
 class SettingsController extends Controller
 {
+    public function __construct()
+    {
+        if((bool)SettingsHelper::get('auth')->value === true) {
+            $this->middleware('auth:api')
+                 ->except([ 'config' ]);
+        }
+    }
 
     /**
      * Return all settings

app/Http/Controllers/SpeedtestController.php

@@ -2,6 +2,7 @@
 
 namespace App\Http\Controllers;
 
+use App\Helpers\SettingsHelper;
 use App\Helpers\SpeedtestHelper;
 use App\Jobs\SpeedtestJob;
 use App\Speedtest;
@@ -15,6 +16,13 @@ use Illuminate\Http\JsonResponse;
 
 class SpeedtestController extends Controller
 {
+    public function __construct()
+    {
+        if((bool)SettingsHelper::get('auth')->value === true) {
+            $this->middleware('auth:api')
+                 ->only([ 'run', 'delete', 'deleteAll' ]);
+        }
+    }
 
     /**
      * Returns paginated list of speedtests

app/Http/Controllers/UpdateController.php

@@ -2,6 +2,7 @@
 
 namespace App\Http\Controllers;
 
+use App\Helpers\SettingsHelper;
 use Exception;
 use Updater;
 use Illuminate\Http\Request;
@@ -9,6 +10,12 @@ use Illuminate\Http\JsonResponse;
 
 class UpdateController extends Controller
 {
+    public function __construct()
+    {
+        if((bool)SettingsHelper::get('auth')->value === true) {
+            $this->middleware('auth:api');
+        }
+    }
 
     /**
      * Check for new update

app/Rules/CurrentPasswordMatches.php

@@ -0,0 +1,41 @@
+<?php
+
+namespace App\Rules;
+
+use Hash;
+use Illuminate\Contracts\Validation\Rule;
+
+class CurrentPasswordMatches implements Rule
+{
+    /**
+     * Create a new rule instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Determine if the validation rule passes.
+     *
+     * @param  string  $attribute
+     * @param  mixed  $value
+     * @return bool
+     */
+    public function passes($attribute, $value)
+    {
+        return Hash::check($value, auth()->user()->password);
+    }
+
+    /**
+     * Get the validation error message.
+     *
+     * @return string
+     */
+    public function message()
+    {
+        return 'The current password doesn\'t match.';
+    }
+}

database/migrations/2020_08_21_133343_add_authentication_settings.php

@@ -0,0 +1,38 @@
+<?php
+
+use App\Helpers\SettingsHelper;
+use App\Setting;
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class AddAuthenticationSettings extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        if(!SettingsHelper::get('auth')) {
+            Setting::create([
+                'name' => 'auth',
+                'value' => false,
+                'description' => 'Enable authentication.'
+            ]);
+        }
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Setting::whereIn('name', [
+            'auth',
+        ])->delete();
+    }
+}

package-lock.json

@@ -6156,6 +6156,11 @@
             "integrity": "sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg==",
             "dev": true
         },
+        "js-cookie": {
+            "version": "2.2.1",
+            "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
+            "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
+        },
         "js-tokens": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",

package.json

@@ -28,6 +28,7 @@
         "@babel/plugin-proposal-class-properties": "^7.10.4",
         "chart.js": "^2.9.3",
         "csv-file-validator": "^1.8.0",
+        "js-cookie": "^2.2.1",
         "react-bootstrap": "^1.3.0",
         "react-chartjs-2": "^2.10.0",
         "react-router": "^5.2.0",

resources/js/components/Authentication/Authentication.js

@@ -0,0 +1,86 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { Container, Row, Col, Collapse, Button, Modal } from 'react-bootstrap';
+import SessionsTable from './SessionsTable';
+import ResetPassword from './ResetPassword';
+
+export default class Authentication extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            showCollapse: false,
+            showModal: false
+        }
+    }
+
+    toggleCollapse = () => {
+        if(this.state.show) {
+            this.setState({
+                showCollapse: false
+            });
+        } else {
+            this.setState({
+                showCollapse: true
+            });
+        }
+    }
+
+    toggleModal = () => {
+        if(this.state.show) {
+            this.setState({
+                showModal: false
+            });
+        } else {
+            this.setState({
+                showModal: true
+            });
+        }
+    }
+
+    render() {
+        var showCollapse = this.state.showCollapse;
+        var showModal = this.state.showModal;
+
+        if( (window.config.auth == true && window.authenticated == true)) {
+            return (
+                <Container className="mb-4">
+                    <Row>
+                        <Col sm={{ span: 12 }} className="mb-3 text-center">
+                            <div className="mouse"  aria-controls="testsTable" onClick={this.toggleCollapse} aria-expanded={showCollapse}>
+                                <h4 className="d-inline mr-2">Authentication</h4>
+                                {(showCollapse) ?
+                                    <span className="ti-angle-up"></span>
+                                :
+                                    <span className="ti-angle-down"></span>
+                                }
+                            </div>
+                        </Col>
+                    </Row>
+                    <Collapse in={showCollapse}>
+                        <div>
+                            <Row>
+                                <Col sm={{ span: 12 }} className="text-center">
+                                    <ResetPassword />
+                                </Col>
+                            </Row>
+                            <Row>
+                                <Col sm={{ span: 12 }} className="text-center">
+                                    <SessionsTable />
+                                </Col>
+                            </Row>
+                        </div>
+                    </Collapse>
+                </Container>
+            );
+        } else {
+            return (
+                <></>
+            );
+        }
+    }
+}
+
+if (document.getElementById('Authentication')) {
+    ReactDOM.render(<Authentication />, document.getElementById('Authentication'));
+}

resources/js/components/Authentication/ResetPassword.js

@@ -0,0 +1,108 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { Container, Row, Col, Collapse, Button, Modal, Form } from 'react-bootstrap';
+import SessionsTable from './SessionsTable';
+import Axios from 'axios';
+import { toast } from 'react-toastify';
+
+export default class ResetPassword extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            showModal: false,
+            currentPassword: '',
+            newPassword: '',
+            newPasswordConfirmation: '',
+            logoutDevices: false
+        }
+    }
+
+    toggleModal = () => {
+        if(this.state.showModal) {
+            this.setState({
+                showModal: false
+            });
+        } else {
+            this.setState({
+                showModal: true
+            });
+        }
+    }
+
+    updateTextField = (e) => {
+        this.setState({
+            [e.target.id]: e.target.value
+        })
+    }
+
+    updateCheckbox = (e) => {
+        this.setState({
+            [e.target.id]: e.target.checked
+        });
+    }
+
+    changePassword = (e) => {
+        e.preventDefault();
+
+        var data = {
+            currentPassword: this.state.currentPassword,
+            newPassword: this.state.newPassword,
+            newPassword_confirmation: this.state.newPasswordConfirmation,
+            logoutDevices: this.state.logoutDevices
+        }
+
+        var url = 'api/auth/change-password?token=' + window.token;
+        Axios.post(url, data)
+        .then((resp) => {
+            toast.success('Password updated');
+            this.toggleModal();
+        })
+        .catch((err) => {
+            if(err.response) {
+                for(var key in err.response.data.error) {
+                    toast.error(err.response.data.error[key][0]);
+                }
+            }
+        })
+    }
+
+    render() {
+        var showModal = this.state.showModal;
+
+        return (
+            <div>
+                <Button variant="primary" onClick={this.toggleModal} className="mb-3">Change password</Button>
+                <Modal show={showModal} onHide={this.toggleModal}>
+                    <Modal.Header closeButton>
+                        <Modal.Title>Change password</Modal.Title>
+                    </Modal.Header>
+                    <Modal.Body>
+                        <Form onSubmit={this.changePassword}>
+                            <Form.Group controlId="currentPassword">
+                                <Form.Label>Current password</Form.Label>
+                                <Form.Control type="password" onInput={this.updateTextField} required />
+                            </Form.Group>
+                            <Form.Group controlId="newPassword">
+                                <Form.Label>New Password</Form.Label>
+                                <Form.Control type="password" onInput={this.updateTextField} required />
+                            </Form.Group>
+                            <Form.Group controlId="newPasswordConfirmation">
+                                <Form.Label>Confirm New Password</Form.Label>
+                                <Form.Control type="password" onInput={this.updateTextField} required />
+                            </Form.Group>
+                            <Button variant="primary" type="submit" className="d-inline-block">Change password</Button>
+                            <Form.Group controlId="logoutDevices" className="d-inline-block ml-2">
+                                <Form.Check type="checkbox" label="Log everywhere out" onInput={this.updateCheckbox} />
+                            </Form.Group>
+                        </Form>
+                    </Modal.Body>
+                </Modal>
+            </div>
+        );
+    }
+}
+
+if (document.getElementById('ResetPassword')) {
+    ReactDOM.render(<ResetPassword />, document.getElementById('ResetPassword'));
+}

resources/js/components/Authentication/SessionsTable.js

@@ -0,0 +1,67 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { Container, Row, Col, Table } from 'react-bootstrap';
+import Axios from 'axios';
+
+export default class SessionsTable extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            sessions: []
+        }
+    }
+
+    componentDidMount() {
+        this.getSessions();
+    }
+
+    getSessions = () => {
+        var url = 'api/auth/sessions?token=' + window.token;
+
+        Axios.get(url)
+        .then((resp) => {
+            this.setState({
+                sessions: resp.data.response
+            })
+        })
+    }
+
+    render() {
+        var sessions = this.state.sessions;
+
+        return (
+            <Container className="mb-4">
+                <Row>
+                    <Col sm={{ span: 12 }} className="mb-3 text-center">
+                        <h5>Login Sessions</h5>
+                        <Table responsive>
+                            <thead>
+                                <tr>
+                                    <th>IP</th>
+                                    <th>Expires</th>
+                                    <th>Created at</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {sessions.map((e,i) => {
+                                    return(
+                                        <tr key={i}>
+                                            <td>{e.ip}</td>
+                                            <td>{new Date(e.expires * 1000).toLocaleDateString() + ' ' + new Date(e.expires * 1000).toLocaleTimeString()}</td>
+                                            <td>{e.created_at}</td>
+                                        </tr>
+                                    )
+                                })}
+                            </tbody>
+                        </Table>
+                    </Col>
+                </Row>
+            </Container>
+        );
+    }
+}
+
+if (document.getElementById('SessionsTable')) {
+    ReactDOM.render(<SessionsTable />, document.getElementById('SessionsTable'));
+}

resources/js/components/Data/Backup.js

@@ -6,7 +6,7 @@ import Axios from 'axios';
 
 export default class Backup extends Component {
     backup = (format) => {
-        var url = 'api/backup?format=' + format;
+        var url = 'api/backup?format=' + format + '&token=' + window.token;
 
         toast.info('Your backup has started downloading...');
 

resources/js/components/Data/Changelog.js

@@ -16,11 +16,13 @@ export default class Changelog extends Component {
     }
 
     componentDidMount = () => {
-        this.getChangelog();
+        if( (window.config.auth == true && window.authenticated == true) || window.config.auth == false) {
+            this.getChangelog();
+        }
     }
 
     getChangelog = () => {
-        Axios.get('api/update/changelog')
+        Axios.get('api/update/changelog?token=' + window.token)
         .then((resp) => {
             this.setState({
                 changelog: resp.data.data,

resources/js/components/Data/DataRow.js

@@ -8,21 +8,27 @@ import Restore from './Restore';
 
 export default class DataRow extends Component {
     render() {
-        return (
+        if( (window.config.auth == true && window.authenticated == true) || window.config.auth == false) {
-            <Container className="mb-4">
+            return (
-                <Row>
+                <Container className="mb-4">
-                    <Col sm={{ span: 12 }} className="text-center">
+                    <Row>
-                        <p>Use these buttons to backup/restore your data</p>
+                        <Col sm={{ span: 12 }} className="text-center">
-                    </Col>
+                            <p>Use these buttons to backup/restore your data</p>
-                </Row>
+                        </Col>
-                <Row>
+                    </Row>
-                    <Col sm={{ span: 12 }} className="text-center">
+                    <Row>
-                        <Backup />
+                        <Col sm={{ span: 12 }} className="text-center">
-                        <Restore />
+                            <Backup />
-                    </Col>
+                            <Restore />
-                </Row>
+                        </Col>
-            </Container>
+                    </Row>
-        );
+                </Container>
+            );
+        } else {
+            return (
+                <></>
+            )
+        }
     }
 }
 

resources/js/components/Data/Restore.js

@@ -148,7 +148,7 @@ export default class Restore extends Component {
 
     uploadFile = () => {
         var data = { data: this.state.data, format: this.state.format };
-        var url = 'api/restore';
+        var url = 'api/restore?token=' + window.token;
 
         Axios.post(url, data)
         .then((resp) => {

resources/js/components/Graphics/LatestResults.js

@@ -45,7 +45,7 @@ export default class LatestResults extends Component {
     }
 
     newScan = () => {
-        var url = 'api/speedtest/run';
+        var url = 'api/speedtest/run?token=' + window.token;
 
         Axios.get(url)
         .then((resp) => {
@@ -78,25 +78,47 @@ export default class LatestResults extends Component {
                 </Container>
             );
         } else if(data === false) {
-            return (
+            if( (window.config.auth == true && window.authenticated == true) || window.config.auth == false) {
-                <Container fluid>
+                return (
-                    <Row>
+                    <Container fluid>
-                        <Col sm={{ span: 12 }} className="text-center">
+                        <Row>
-                            <div>
+                            <Col sm={{ span: 12 }} className="text-center">
-                                <Button variant="primary" onClick={this.newScan}>Start your first test!</Button>
+                                <div>
-                            </div>
+                                    <Button variant="primary" onClick={this.newScan}>Start your first test!</Button>
-                        </Col>
+                                </div>
-                    </Row>
+                            </Col>
-                </Container>
+                        </Row>
-            );
+                    </Container>
+                );
+            } else if(window.config.auth == true && window.authenticated == false) {
+                return (
+                    <Container fluid>
+                        <Row>
+                            <Col sm={{ span: 12 }} className="text-center">
+                                <div>
+                                    <p>Please login to run the first test</p>
+                                </div>
+                            </Col>
+                        </Row>
+                    </Container>
+                );
+            }
         } else {
             return (
                 <Container fluid>
                     <Row>
                         <Col sm={{ span: 12 }} className="text-center mb-2">
                             <div>
-                                <Button className="d-inline-block mx-3 mb-2" variant="primary" onClick={this.newScan}>Test again</Button>
+                                {(window.config.auth == true && window.authenticated == true) || window.config.auth == false ?
-                                <p className="text-muted mb-0 d-inline-block">Last test performed at: {new Date(data.data.created_at).toLocaleString()}</p>
+                                    <div>
+                                        <Button className="d-inline-block mx-3 mb-2" variant="primary" onClick={this.newScan}>Test again</Button>
+                                        <p className="text-muted mb-0 d-inline-block">Last test performed at: {new Date(data.data.created_at).toLocaleString()}</p>
+                                    </div>
+                                :
+                                    <div>
+                                        <p className="text-muted mb-0 d-inline-block">Last test performed at: {new Date(data.data.created_at).toLocaleString()}</p>
+                                    </div>
+                                }
                             </div>
                         </Col>
                     </Row>

resources/js/components/Home/HomePage.js

@@ -6,6 +6,8 @@ import Footer from './Footer';
 import DataRow from '../Data/DataRow';
 import TestsTable from '../Graphics/TestsTable';
 import Settings from '../Settings/Settings';
+import Login from '../Login';
+import Authentication from '../Authentication/Authentication';
 
 export default class HomePage extends Component {
 
@@ -13,10 +15,14 @@ export default class HomePage extends Component {
         return (
             <div>
                 <div className="my-4">
+                    {(window.config.auth == true && window.authenticated == false) &&
+                        <Login />
+                    }
                     <LatestResults />
                     <HistoryGraph />
                     <TestsTable />
                     <Settings />
+                    <Authentication />
                     <DataRow />
                 </div>
                 <Footer />

resources/js/components/Login.js

@@ -1,10 +1,11 @@
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
-import { Container, Row, Form, Toast } from 'react-bootstrap';
+import { Container, Row, Form, Toast, Modal } from 'react-bootstrap';
 import { Col } from 'react-bootstrap';
 import { Button } from 'react-bootstrap';
 import Axios from 'axios';
 import { toast } from 'react-toastify';
+import Cookies from 'js-cookie';
 
 export default class Login extends Component {
     constructor(props) {
@@ -12,59 +13,75 @@ export default class Login extends Component {
 
         this.state = {
             loginEmailInput: '',
-            loginPasswordInput: '',
+            loginPasswordInput: ''
-            toast: null,
         }
     }
 
+    updateTextField = (e) => {
+        this.setState({
+            [e.target.id]: e.target.value
+        })
+    }
+
     login = (e) => {
         e.preventDefault();
 
         var data = {
             email: this.state.loginEmailInput,
             password: this.state.loginPasswordInput
-        };
+        }
-        var url = 'api/auth/login';
 
+        var url = 'api/auth/login';
         Axios.post(url, data)
         .then((resp) => {
-            var token = resp.data;
+            var token = resp.data.access_token;
-            this.props.setToken(token);
+            var expires = (resp.data.expires_in / 60) / 24;
+            Cookies.set('auth', token, { expires: expires })
+            window.location.reload(true);
         })
-        .catch((err) => {
-            toast.error('Something went wrong. Please try again.')
-        });
     }
 
-    updateTextField = (e) => {
+    toggleShow = () => {
-        this.setState({
+        if(this.state.show) {
-            [e.target.id]: e.target.value
+            this.setState({
-        });
+                show: false
+            })
+        } else {
+            this.setState({
+                show: true
+            })
+        }
     }
 
     render() {
-        var error = this.state.error;
+        var show = this.state.show;
 
         return (
             <Container>
-                <Row className="fullscreen align-items-center">
+                <Row>
                     <Col
-                        lg={{ span: 4, offset: 4 }}
-                        md={{ span: 6, offset: 3 }}
-                        sm={{ span: 10, offset: 1 }}
                         xs={{ span: 12 }}
+                        className="pb-2 text-center"
                     >
-                        <Form onSubmit={this.login}>
+                        <Button variant="primary" onClick={this.toggleShow}>Login</Button>
-                            <Form.Group controlId="loginEmailInput">
+                        <Modal show={show} onHide={this.toggleShow}>
-                                <Form.Label>Email address</Form.Label>
+                            <Modal.Header closeButton>
-                                <Form.Control type="email" placeholder="admin@admin.com" onInput={this.updateTextField} required />
+                                <Modal.Title>Login</Modal.Title>
-                            </Form.Group>
+                            </Modal.Header>
-                            <Form.Group controlId="loginPasswordInput">
+                            <Modal.Body>
-                                <Form.Label>Password</Form.Label>
+                                <Form onSubmit={this.login}>
-                                <Form.Control type="password" onInput={this.updateTextField} required />
+                                    <Form.Group controlId="loginEmailInput">
-                            </Form.Group>
+                                        <Form.Label>Email address</Form.Label>
-                            <Button variant="primary" type="submit">Login</Button>
+                                        <Form.Control type="email" placeholder="admin@admin.com" onInput={this.updateTextField} required />
-                        </Form>
+                                    </Form.Group>
+                                    <Form.Group controlId="loginPasswordInput">
+                                        <Form.Label>Password</Form.Label>
+                                        <Form.Control type="password" onInput={this.updateTextField} required />
+                                    </Form.Group>
+                                    <Button variant="primary" type="submit">Login</Button>
+                                </Form>
+                            </Modal.Body>
+                        </Modal>
                     </Col>
                 </Row>
             </Container>

resources/js/components/Settings/Settings.js

@@ -19,7 +19,9 @@ export default class Settings extends Component {
     }
 
     componentDidMount = () => {
-        this.getData();
+        if( (window.config.auth == true && window.authenticated == true) || window.config.auth == false) {
+            this.getData();
+        }
     }
 
     toggleShow = () => {
@@ -35,7 +37,7 @@ export default class Settings extends Component {
     }
 
     getData = () => {
-        var url = 'api/settings/';
+        var url = 'api/settings/?token=' + window.token;
 
         Axios.get(url)
         .then((resp) => {
@@ -53,6 +55,7 @@ export default class Settings extends Component {
 
     buildSettingsCards = () => {
         var e = this.state.data;
+
         return (
             <Row>
                 <Col lg={{ span: 4 }} md={{ span: 6 }} sm={{ span: 12 }}>
@@ -215,39 +218,44 @@ export default class Settings extends Component {
         if(!loading) {
             var cards = this.buildSettingsCards();
         }
-
+        if( (window.config.auth == true && window.authenticated == true) || window.config.auth == false) {
-        return (
+            return (
-            <div>
+                <div>
-                <Container className="my-4">
+                    <Container className="my-4">
-                    <Row>
+                        <Row>
-                        <Col sm={{ span: 12 }} className="mb-3 text-center">
+                            <Col sm={{ span: 12 }} className="mb-3 text-center">
-                            <div className="mouse" onClick={this.toggleShow}>
+                                <div className="mouse" onClick={this.toggleShow}>
-                                <h4 className="mb-0 mr-2 d-inline">Settings</h4>
+                                    <h4 className="mb-0 mr-2 d-inline">Settings</h4>
-                                {(show) ?
+                                    {(show) ?
-                                    <span className="ti-angle-up"></span>
+                                        <span className="ti-angle-up"></span>
-                                :
-                                    <span className="ti-angle-down"></span>
-                                }
-                            </div>
-                        </Col>
-                    </Row>
-                    <Collapse in={show}>
-                        <div>
-                            <Row>
-                                <Col sm={{ span: 12 }}>
-                                    {loading ?
-                                        <Loader small />
                                     :
-                                        cards
+                                        <span className="ti-angle-down"></span>
                                     }
-                                </Col>
+                                </div>
-                            </Row>
+                            </Col>
-                        </div>
+                        </Row>
-                    </Collapse>
+                        <Collapse in={show}>
-                </Container>
+                            <div>
+                                <Row>
+                                    <Col sm={{ span: 12 }}>
+                                        {loading ?
+                                            <Loader small />
+                                        :
+                                            cards
+                                        }
+                                    </Col>
+                                </Row>
+                            </div>
+                        </Collapse>
+                    </Container>
 
-            </div>
+                </div>
-        );
+            );
+        } else {
+            return(
+                <></>
+            )
+        }
     }
 }
 

resources/js/index.js

@@ -4,10 +4,10 @@ import { BrowserRouter, Switch, Route, Redirect, useHistory } from 'react-router
 import Axios from 'axios';
 import ErrorPage from './components/ErrorPage';
 import Loader from './components/Loader';
-import Login from './components/Login';
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import HomePage from './components/Home/HomePage';
+import Cookies from 'js-cookie';
 
 export default class Index extends Component {
     constructor(props) {
@@ -15,7 +15,7 @@ export default class Index extends Component {
 
         this.state = {
             loading: true,
-            redirect: false
+            redirect: false,
         }
     }
 
@@ -29,10 +29,38 @@ export default class Index extends Component {
         Axios.get(url)
         .then((resp) => {
             window.config = resp.data;
-            this.setState({
+            if(window.config.auth === true) {
-                loading: false,
+                var authCookie = Cookies.get('auth');
-                redirect: true,
+                if(authCookie == undefined) {
-            });
+                    window.authenticated = false;
+                    this.setState({
+                        loading: false,
+                        redirect: true,
+                    });
+                } else {
+                    var url = 'api/auth/me?token=' + authCookie;
+                    Axios.get(url)
+                    .then((resp) => {
+                        window.authenticated = true;
+                        window.token = authCookie;
+                    })
+                    .catch((err) => {
+                        Cookies.remove('auth');
+                        window.authenticated = false;
+                    })
+                    .finally(() => {
+                        this.setState({
+                            loading: false,
+                            redirect: true,
+                        });
+                    })
+                }
+            } else {
+                this.setState({
+                    loading: false,
+                    redirect: true,
+                });
+            }
         })
     }
 

routes/api.php

@@ -2,6 +2,7 @@
 
 use App\Helpers\SpeedtestHelper;
 use App\Http\Controllers\SpeedtestController;
+use App\Speedtest;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Route;
 
@@ -83,3 +84,29 @@ Route::group([
     Route::post('/bulk', 'SettingsController@bulkStore')
          ->name('settings.bulk.update');
 });
+
+Route::group(
+    [
+        'middleware' => 'api',
+        'prefix' => 'auth'
+    ],
+    function ($router) {
+        Route::post('register', 'AuthController@register')->name('auth.register');
+        Route::post('login', 'AuthController@login')->middleware('throttle:60,1')->name('auth.login');
+        Route::get('logout', 'AuthController@logout')->name('auth.logout');
+        Route::get('refresh', 'AuthController@refresh')->middleware('throttle:60,1')->name('auth.refresh');
+        Route::get('me', 'AuthController@me')->middleware('session_active')->name('auth.me');
+        Route::post('change-password', 'AuthController@changePassword')->middleware('session_active')->name('auth.change_password');
+
+        Route::group(
+            [
+                'middleware' => ['api', 'session_active'],
+                'prefix' => 'sessions'
+            ],
+            function($router) {
+                Route::get('/', 'AuthController@getSessions')->name('auth.sessions.all');
+                Route::delete('/{id}', 'AuthController@deleteSession')->name('auth.sessions.delete');
+            }
+        );
+    }
+);