Upgrade to GitHub-native Dependabot

Bump react-bootstrap from 1.4.0 to 1.5.1

.github/dependabot.yml

@@ -0,0 +1,79 @@
+version: 2
+updates:
+- package-ecosystem: composer
+  directory: "/"
+  schedule:
+    interval: daily
+  open-pull-requests-limit: 10
+  target-branch: dev
+  ignore:
+  - dependency-name: laravel/framework
+    versions:
+    - 7.30.3
+    - 8.36.2
+    - 8.37.0
+    - 8.38.0
+  - dependency-name: doctrine/dbal
+    versions:
+    - 2.13.0
+    - 3.0.0
+  - dependency-name: phpunit/phpunit
+    versions:
+    - 9.5.1
+    - 9.5.3
+  - dependency-name: facade/ignition
+    versions:
+    - 2.5.10
+    - 2.5.11
+    - 2.5.12
+    - 2.5.13
+    - 2.5.9
+  - dependency-name: laravel/tinker
+    versions:
+    - 2.6.0
+  - dependency-name: nunomaduro/collision
+    versions:
+    - 5.3.0
+  - dependency-name: nunomaduro/larastan
+    versions:
+    - 0.6.13
+- package-ecosystem: npm
+  directory: "/"
+  schedule:
+    interval: daily
+  open-pull-requests-limit: 10
+  target-branch: dev
+  ignore:
+  - dependency-name: chart.js
+    versions:
+    - 3.1.0
+    - 3.1.1
+  - dependency-name: laravel-mix
+    versions:
+    - 6.0.16
+  - dependency-name: y18n
+    versions:
+    - 4.0.1
+    - 4.0.2
+  - dependency-name: react-dom
+    versions:
+    - 17.0.2
+  - dependency-name: react
+    versions:
+    - 17.0.2
+  - dependency-name: react-bootstrap
+    versions:
+    - 1.4.3
+    - 1.5.0
+  - dependency-name: sass
+    versions:
+    - 1.32.5
+    - 1.32.6
+    - 1.32.7
+  - dependency-name: "@babel/plugin-proposal-class-properties"
+    versions:
+    - 7.12.13
+  - dependency-name: react-toastify
+    versions:
+    - 7.0.1
+    - 7.0.2

.github/workflows/laravel-dev.yml

@@ -10,6 +10,9 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
+    - uses: shivammathur/setup-php@b7d1d9c9a92d8d8463ce36d7f60da34d461724f8
+      with:
+        php-version: '7.4'
     - uses: actions/checkout@v2
     - name: Copy .env
       run: php -r "file_exists('.env') || copy('.env.example', '.env');"

.github/workflows/laravel-pr.yml

@@ -10,6 +10,9 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
+    - uses: shivammathur/setup-php@b7d1d9c9a92d8d8463ce36d7f60da34d461724f8
+      with:
+        php-version: '7.4'
     - uses: actions/checkout@v2
     - name: Copy .env
       run: php -r "file_exists('.env') || copy('.env.example', '.env');"

.github/workflows/laravel-stable.yml

@@ -10,6 +10,9 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
+    - uses: shivammathur/setup-php@b7d1d9c9a92d8d8463ce36d7f60da34d461724f8
+      with:
+        php-version: '7.4'
     - uses: actions/checkout@v2
     - name: Copy .env
       run: php -r "file_exists('.env') || copy('.env.example', '.env');"

README.md

@@ -1,6 +1,6 @@
 # Speedtest Tracker
 
-[![Docker pulls](https://img.shields.io/docker/pulls/henrywhitaker3/speedtest-tracker?style=flat-square)](https://hub.docker.com/r/henrywhitaker3/speedtest-tracker) [![GitHub Workflow Status](https://img.shields.io/github/workflow/status/henrywhitaker3/Speedtest-Tracker/Stable?label=master&logo=github&style=flat-square)](https://github.com/henrywhitaker3/Speedtest-Tracker/actions) [![GitHub Workflow Status](https://img.shields.io/github/workflow/status/henrywhitaker3/Speedtest-Tracker/Dev?label=dev&logo=github&style=flat-square)](https://github.com/henrywhitaker3/Speedtest-Tracker/actions) [![last_commit](https://img.shields.io/github/last-commit/henrywhitaker3/Speedtest-Tracker?style=flat-square)](https://github.com/henrywhitaker3/Speedtest-Tracker/commits) [![issues](https://img.shields.io/github/issues/henrywhitaker3/Speedtest-Tracker?style=flat-square)](https://github.com/henrywhitaker3/Speedtest-Tracker/issues) [![commit_freq](https://img.shields.io/github/commit-activity/m/henrywhitaker3/Speedtest-Tracker?style=flat-square)](https://github.com/henrywhitaker3/Speedtest-Tracker/commits) ![version](https://img.shields.io/badge/version-v1.10.0-success?style=flat-square) [![license](https://img.shields.io/github/license/henrywhitaker3/Speedtest-Tracker?style=flat-square)](https://github.com/henrywhitaker3/Speedtest-Tracker/blob/master/LICENSE)
+[![Docker pulls](https://img.shields.io/docker/pulls/henrywhitaker3/speedtest-tracker?style=flat-square)](https://hub.docker.com/r/henrywhitaker3/speedtest-tracker) [![GitHub Workflow Status](https://img.shields.io/github/workflow/status/henrywhitaker3/Speedtest-Tracker/Stable?label=master&logo=github&style=flat-square)](https://github.com/henrywhitaker3/Speedtest-Tracker/actions) [![GitHub Workflow Status](https://img.shields.io/github/workflow/status/henrywhitaker3/Speedtest-Tracker/Dev?label=dev&logo=github&style=flat-square)](https://github.com/henrywhitaker3/Speedtest-Tracker/actions) [![last_commit](https://img.shields.io/github/last-commit/henrywhitaker3/Speedtest-Tracker?style=flat-square)](https://github.com/henrywhitaker3/Speedtest-Tracker/commits) [![issues](https://img.shields.io/github/issues/henrywhitaker3/Speedtest-Tracker?style=flat-square)](https://github.com/henrywhitaker3/Speedtest-Tracker/issues) [![commit_freq](https://img.shields.io/github/commit-activity/m/henrywhitaker3/Speedtest-Tracker?style=flat-square)](https://github.com/henrywhitaker3/Speedtest-Tracker/commits) ![version](https://img.shields.io/badge/version-v1.10.4-success?style=flat-square) [![license](https://img.shields.io/github/license/henrywhitaker3/Speedtest-Tracker?style=flat-square)](https://github.com/henrywhitaker3/Speedtest-Tracker/blob/master/LICENSE)
 
 This program runs a speedtest check every hour and graphs the results. The back-end is written in [Laravel](https://laravel.com/) and the front-end uses [React](https://reactjs.org/). It uses the [Ookla's speedtest cli](https://www.speedtest.net/apps/cli) package to get the data and uses [Chart.js](https://www.chartjs.org/) to plot the results.
 
@@ -100,4 +100,4 @@ After enabling, you should change the password through the web UI.
     
 ### Manual Install
 
-For manual installtions, please follow the instrucitons [here](https://github.com/henrywhitaker3/Speedtest-Tracker/wiki/Manual-Installation).
+For manual installations, please follow the instructions [here](https://github.com/henrywhitaker3/Speedtest-Tracker/wiki/Manual-Installation).

app/Console/Kernel.php

@@ -28,7 +28,9 @@ class Kernel extends ConsoleKernel
      */
     protected function schedule(Schedule $schedule)
     {
-        $schedule->job(new SpeedtestJob(true, config('integrations')))->cron(SettingsHelper::get('schedule')['value']);
+        if ((bool)SettingsHelper::get('schedule_enabled')->value) {
+            $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();
     }
@@ -40,7 +42,7 @@ class Kernel extends ConsoleKernel
      */
     protected function commands()
     {
-        $this->load(__DIR__.'/Commands');
+        $this->load(__DIR__ . '/Commands');
 
         require base_path('routes/console.php');
     }

app/Helpers/SettingsHelper.php

@@ -91,6 +91,11 @@ class SettingsHelper
      */
     public static function settingIsEditable(string $key)
     {
+        // Manual override for app_name
+        if ($key === 'app_name') {
+            return true;
+        }
+
         $results = [];
 
         // Try exact key
@@ -139,6 +144,7 @@ class SettingsHelper
     {
         return [
             'base' => SettingsHelper::getBase(),
+            'name' => SettingsHelper::get('app_name')->value,
             'widgets' => [
                 'show_average' => (bool)SettingsHelper::get('show_average')->value,
                 'show_max' => (bool)SettingsHelper::get('show_max')->value,

app/Http/Controllers/SettingsController.php

@@ -15,9 +15,9 @@ class SettingsController extends Controller
 {
     public function __construct()
     {
-        if((bool)SettingsHelper::get('auth')->value === true) {
+        if ((bool)SettingsHelper::get('auth')->value === true) {
             $this->middleware('auth:api')
-                 ->except([ 'config' ]);
+                ->except(['config']);
         }
     }
 
@@ -51,21 +51,21 @@ class SettingsController extends Controller
     public function store(Request $request)
     {
         $rule = [
-            'name' => [ 'required', 'string', 'min:1' ],
+            'name' => ['required', 'string', 'min:1'],
         ];
-        if($request->name == 'schedule') {
-            $rule['value'] = [ 'required', new Cron ];
+        if ($request->name == 'schedule') {
+            $rule['value'] = ['required', new Cron];
         }
 
         $validator = Validator::make($request->all(), $rule);
-        if($validator->fails()) {
+        if ($validator->fails()) {
             return response()->json([
                 'method' => 'Store a setting',
                 'error' => $validator->errors()
             ], 422);
         }
 
-        if(!isset($request->value)) {
+        if (!isset($request->value)) {
             $request->value = '';
         }
 
@@ -86,12 +86,12 @@ class SettingsController extends Controller
     public function bulkStore(Request $request)
     {
         $rule = [
-            'data' => [ 'array', 'required' ],
-            'data.*.name' => [ 'string', 'required' ],
+            'data' => ['array', 'required'],
+            'data.*.name' => ['string', 'required'],
         ];
 
         $validator = Validator::make($request->all(), $rule);
-        if($validator->fails()) {
+        if ($validator->fails()) {
             return response()->json([
                 'method' => 'Bulk store a setting',
                 'error' => $validator->errors()
@@ -99,14 +99,14 @@ class SettingsController extends Controller
         }
 
         $settings = [];
-        foreach($request->data as $d) {
-            if(!isset($d['value']) || $d['value'] == null) {
-                    $d['value'] = '';
+        foreach ($request->data as $d) {
+            if (!isset($d['value']) || $d['value'] == null) {
+                $d['value'] = '';
             }
 
-            if($d['name'] == 'speedtest_overview_time') {
-                $ok = [ '00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23' ];
-                if(!in_array($d['value'], $ok)) {
+            if ($d['name'] == 'speedtest_overview_time') {
+                $ok = ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'];
+                if (!in_array($d['value'], $ok)) {
                     return response()->json([
                         'method' => 'Bulk store a setting',
                         'error' => 'Invalid speedtest_overview_time value'
@@ -116,9 +116,9 @@ class SettingsController extends Controller
 
             $setting = SettingsHelper::get($d['name']);
 
-            if($setting == false) {
+            if ($setting == false) {
                 $setting = SettingsHelper::set($d['name'], $d['value']);
-            } else if(SettingsHelper::settingIsEditable($setting->name)) {
+            } else if (SettingsHelper::settingIsEditable($setting->name)) {
                 $setting = SettingsHelper::set($d['name'], $d['value']);
             } else {
                 continue;

app/Jobs/SpeedtestJob.php

@@ -52,19 +52,19 @@ class SpeedtestJob implements ShouldQueue
      */
     public function handle()
     {
-        if($this->config['healthchecks_enabled'] === true) {
+        if ($this->config['healthchecks_enabled'] === true) {
             $this->healthcheck('start');
         }
         $output = SpeedtestHelper::output();
         $speedtest = SpeedtestHelper::runSpeedtest($output, $this->scheduled);
-        if($speedtest == false) {
-            if($this->config['healthchecks_enabled'] === true) {
+        if ($speedtest == false) {
+            if ($this->config['healthchecks_enabled'] === true) {
                 $this->healthcheck('fail');
             }
 
             event(new SpeedtestFailedEvent());
         } else {
-            if($this->config['healthchecks_enabled'] === true) {
+            if ($this->config['healthchecks_enabled'] === true) {
                 $this->healthcheck('success');
             }
 
@@ -82,19 +82,19 @@ class SpeedtestJob implements ShouldQueue
     private function healthcheck(String $method)
     {
         try {
-            $hc = new Healthchecks(SettingsHelper::get('healthchecks_uuid')->value);
-            if($method === 'start') {
+            $hc = new Healthchecks(SettingsHelper::get('healthchecks_uuid')->value, SettingsHelper::get('healthchecks_server_url')->value);
+            if ($method === 'start') {
                 $hc->start();
             }
 
-            if($method === 'success') {
+            if ($method === 'success') {
                 $hc->success();
             }
 
-            if($method === 'fail') {
+            if ($method === 'fail') {
                 $hc->fail();
             }
-        } catch(Exception $e) {
+        } catch (Exception $e) {
             Log::error($e->getMessage());
         }
     }

app/Providers/IntegrationsServiceProvider.php

@@ -35,18 +35,20 @@ class IntegrationsServiceProvider extends ServiceProvider
      */
     public function boot()
     {
-        if(File::exists(env('DB_DATABASE'))) {
-            if(Schema::hasTable('settings')) {
+        if (File::exists(env('DB_DATABASE'))) {
+            if (Schema::hasTable('settings')) {
                 $setting = SettingsHelper::get('healthchecks_uuid');
 
-                if($setting !== false) {
+                if ($setting !== false) {
                     try {
-                        App::bind('healthcheck', function() use ($setting) {
-                            return new Healthchecks($setting->value);
+                        SettingsHelper::loadIntegrationConfig();
+
+                        App::bind('healthcheck', function () use ($setting) {
+                            return new Healthchecks($setting->value, SettingsHelper::get('healthchecks_server_url')->value);
                         });
-                    } catch(InvalidUuidStringException $e) {
+                    } catch (InvalidUuidStringException $e) {
                         Log::error('Invalid healthchecks UUID');
-                    } catch(Exception $e) {
+                    } catch (Exception $e) {
                         Log::error($e->getMessage());
                     }
                 }

changelog.json

@@ -1,4 +1,28 @@
 {
+    "1.10.4": [
+        {
+            "description": "Updated dependencies.",
+            "link": ""
+        }
+    ],
+    "1.10.3": [
+        {
+            "description": "Moved stuff into pages.",
+            "link": ""
+        }
+    ],
+    "1.10.2": [
+        {
+            "description": "Added option to disable scheduled tests.",
+            "link": ""
+        }
+    ],
+    "1.10.1": [
+        {
+            "description": "Fixed integrations config being empty causing healthchecks to not run on scheduled tests.",
+            "link": ""
+        }
+    ],
     "1.10.0": [
         {
             "description": "Added automated build for ARM.",

composer.json

@@ -27,9 +27,9 @@
         "facade/ignition": "^2.0",
         "fzaninotto/faker": "^1.9.1",
         "mockery/mockery": "^1.3.1",
-        "nunomaduro/collision": "^4.1",
-        "nunomaduro/larastan": "^0.6.2",
-        "phpunit/phpunit": "^8.5"
+        "phpunit/phpunit": "^9.5",
+        "nunomaduro/larastan": "^0.7.0",
+        "nunomaduro/collision": "^5.3"
     },
     "config": {
         "optimize-autoloader": true,

config/speedtest.php

@@ -7,7 +7,7 @@ return [
     |--------------------------------------------------------------------------
     */
 
-    'version' => '1.10.0',
+    'version' => '1.10.4',
 
     /*
     |--------------------------------------------------------------------------

database/migrations/2020_12_19_211232_add_schedule_enabled_setting.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 AddScheduleEnabledSetting extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        if (!SettingsHelper::get('schedule_enabled')) {
+            Setting::create([
+                'name' => 'schedule_enabled',
+                'value' => true,
+                'description' => 'Enable/disable the schedule worker'
+            ]);
+        }
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Setting::whereIn('name', [
+            'schedule_enabled',
+        ])->delete();
+    }
+}

database/migrations/2020_12_19_234248_add_app_name_setting.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 AddAppNameSetting extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        if (!SettingsHelper::get('app_name')) {
+            Setting::create([
+                'name' => 'app_name',
+                'value' => 'Speedtest Tracker',
+                'description' => 'Set a custom app name'
+            ]);
+        }
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Setting::whereIn('name', [
+            'app_name',
+        ])->delete();
+    }
+}

database/migrations/2020_12_20_001345_add_custom_healthchecks_setting.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 AddCustomHealthchecksSetting extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        if (!SettingsHelper::get('healthchecks_server_url')) {
+            Setting::create([
+                'name' => 'healthchecks_server_url',
+                'value' => 'https://hc-ping.com/',
+                'description' => 'The URL of the healthchecks.io server. Change this to use a self-hosted server.'
+            ]);
+        }
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Setting::whereIn('name', [
+            'healthchecks_server_url',
+        ])->delete();
+    }
+}

package-lock.json

@@ -6,6 +6,7 @@
             "version": "7.10.4",
             "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
             "integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==",
+            "dev": true,
             "requires": {
                 "@babel/highlight": "^7.10.4"
             }
@@ -70,49 +71,6 @@
                 "@babel/types": "^7.10.4"
             }
         },
-        "@babel/helper-builder-react-jsx": {
-            "version": "7.10.4",
-            "resolved": "https://registry.npmjs.org/@babel/helper-builder-react-jsx/-/helper-builder-react-jsx-7.10.4.tgz",
-            "integrity": "sha512-5nPcIZ7+KKDxT1427oBivl9V9YTal7qk0diccnh7RrcgrT/pGFOjgGw1dgryyx1GvHEpXVfoDF6Ak3rTiWh8Rg==",
-            "dev": true,
-            "requires": {
-                "@babel/helper-annotate-as-pure": "^7.10.4",
-                "@babel/types": "^7.10.4"
-            }
-        },
-        "@babel/helper-builder-react-jsx-experimental": {
-            "version": "7.12.10",
-            "resolved": "https://registry.npmjs.org/@babel/helper-builder-react-jsx-experimental/-/helper-builder-react-jsx-experimental-7.12.10.tgz",
-            "integrity": "sha512-3Kcr2LGpL7CTRDTTYm1bzeor9qZbxbvU2AxsLA6mUG9gYarSfIKMK0UlU+azLWI+s0+BH768bwyaziWB2NOJlQ==",
-            "dev": true,
-            "requires": {
-                "@babel/helper-annotate-as-pure": "^7.12.10",
-                "@babel/helper-module-imports": "^7.12.5",
-                "@babel/types": "^7.12.10"
-            },
-            "dependencies": {
-                "@babel/helper-annotate-as-pure": {
-                    "version": "7.12.10",
-                    "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.12.10.tgz",
-                    "integrity": "sha512-XplmVbC1n+KY6jL8/fgLVXXUauDIB+lD5+GsQEh6F6GBF1dq1qy4DP4yXWzDKcoqXB3X58t61e85Fitoww4JVQ==",
-                    "dev": true,
-                    "requires": {
-                        "@babel/types": "^7.12.10"
-                    }
-                },
-                "@babel/types": {
-                    "version": "7.12.10",
-                    "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.10.tgz",
-                    "integrity": "sha512-sf6wboJV5mGyip2hIpDSKsr80RszPinEFjsHTalMxZAZkoQ2/2yQzxlcFN52SJqsyPfLtPmenL4g2KB3KJXPDw==",
-                    "dev": true,
-                    "requires": {
-                        "@babel/helper-validator-identifier": "^7.10.4",
-                        "lodash": "^4.17.19",
-                        "to-fast-properties": "^2.0.0"
-                    }
-                }
-            }
-        },
         "@babel/helper-compilation-targets": {
             "version": "7.12.5",
             "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.12.5.tgz",
@@ -125,6 +83,147 @@
                 "semver": "^5.5.0"
             }
         },
+        "@babel/helper-create-class-features-plugin": {
+            "version": "7.13.0",
+            "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.13.0.tgz",
+            "integrity": "sha512-twwzhthM4/+6o9766AW2ZBHpIHPSGrPGk1+WfHiu13u/lBnggXGNYCpeAyVfNwGDKfkhEDp+WOD/xafoJ2iLjA==",
+            "requires": {
+                "@babel/helper-function-name": "^7.12.13",
+                "@babel/helper-member-expression-to-functions": "^7.13.0",
+                "@babel/helper-optimise-call-expression": "^7.12.13",
+                "@babel/helper-replace-supers": "^7.13.0",
+                "@babel/helper-split-export-declaration": "^7.12.13"
+            },
+            "dependencies": {
+                "@babel/code-frame": {
+                    "version": "7.12.13",
+                    "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz",
+                    "integrity": "sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==",
+                    "requires": {
+                        "@babel/highlight": "^7.12.13"
+                    }
+                },
+                "@babel/generator": {
+                    "version": "7.13.0",
+                    "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.13.0.tgz",
+                    "integrity": "sha512-zBZfgvBB/ywjx0Rgc2+BwoH/3H+lDtlgD4hBOpEv5LxRnYsm/753iRuLepqnYlynpjC3AdQxtxsoeHJoEEwOAw==",
+                    "requires": {
+                        "@babel/types": "^7.13.0",
+                        "jsesc": "^2.5.1",
+                        "source-map": "^0.5.0"
+                    }
+                },
+                "@babel/helper-function-name": {
+                    "version": "7.12.13",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.12.13.tgz",
+                    "integrity": "sha512-TZvmPn0UOqmvi5G4vvw0qZTpVptGkB1GL61R6lKvrSdIxGm5Pky7Q3fpKiIkQCAtRCBUwB0PaThlx9vebCDSwA==",
+                    "requires": {
+                        "@babel/helper-get-function-arity": "^7.12.13",
+                        "@babel/template": "^7.12.13",
+                        "@babel/types": "^7.12.13"
+                    }
+                },
+                "@babel/helper-get-function-arity": {
+                    "version": "7.12.13",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.13.tgz",
+                    "integrity": "sha512-DjEVzQNz5LICkzN0REdpD5prGoidvbdYk1BVgRUOINaWJP2t6avB27X1guXK1kXNrX0WMfsrm1A/ZBthYuIMQg==",
+                    "requires": {
+                        "@babel/types": "^7.12.13"
+                    }
+                },
+                "@babel/helper-member-expression-to-functions": {
+                    "version": "7.13.0",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.13.0.tgz",
+                    "integrity": "sha512-yvRf8Ivk62JwisqV1rFRMxiSMDGnN6KH1/mDMmIrij4jztpQNRoHqqMG3U6apYbGRPJpgPalhva9Yd06HlUxJQ==",
+                    "requires": {
+                        "@babel/types": "^7.13.0"
+                    }
+                },
+                "@babel/helper-optimise-call-expression": {
+                    "version": "7.12.13",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.12.13.tgz",
+                    "integrity": "sha512-BdWQhoVJkp6nVjB7nkFWcn43dkprYauqtk++Py2eaf/GRDFm5BxRqEIZCiHlZUGAVmtwKcsVL1dC68WmzeFmiA==",
+                    "requires": {
+                        "@babel/types": "^7.12.13"
+                    }
+                },
+                "@babel/helper-replace-supers": {
+                    "version": "7.13.0",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.13.0.tgz",
+                    "integrity": "sha512-Segd5me1+Pz+rmN/NFBOplMbZG3SqRJOBlY+mA0SxAv6rjj7zJqr1AVr3SfzUVTLCv7ZLU5FycOM/SBGuLPbZw==",
+                    "requires": {
+                        "@babel/helper-member-expression-to-functions": "^7.13.0",
+                        "@babel/helper-optimise-call-expression": "^7.12.13",
+                        "@babel/traverse": "^7.13.0",
+                        "@babel/types": "^7.13.0"
+                    }
+                },
+                "@babel/helper-split-export-declaration": {
+                    "version": "7.12.13",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.13.tgz",
+                    "integrity": "sha512-tCJDltF83htUtXx5NLcaDqRmknv652ZWCHyoTETf1CXYJdPC7nohZohjUgieXhv0hTJdRf2FjDueFehdNucpzg==",
+                    "requires": {
+                        "@babel/types": "^7.12.13"
+                    }
+                },
+                "@babel/helper-validator-identifier": {
+                    "version": "7.12.11",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
+                    "integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw=="
+                },
+                "@babel/highlight": {
+                    "version": "7.12.13",
+                    "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.12.13.tgz",
+                    "integrity": "sha512-kocDQvIbgMKlWxXe9fof3TQ+gkIPOUSEYhJjqUjvKMez3krV7vbzYCDq39Oj11UAVK7JqPVGQPlgE85dPNlQww==",
+                    "requires": {
+                        "@babel/helper-validator-identifier": "^7.12.11",
+                        "chalk": "^2.0.0",
+                        "js-tokens": "^4.0.0"
+                    }
+                },
+                "@babel/parser": {
+                    "version": "7.13.0",
+                    "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.13.0.tgz",
+                    "integrity": "sha512-w80kxEMFhE3wjMOQkfdTvv0CSdRSJZptIlLhU4eU/coNJeWjduspUFz+IRnBbAq6m5XYBFMoT1TNkk9K9yf10g=="
+                },
+                "@babel/template": {
+                    "version": "7.12.13",
+                    "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.12.13.tgz",
+                    "integrity": "sha512-/7xxiGA57xMo/P2GVvdEumr8ONhFOhfgq2ihK3h1e6THqzTAkHbkXgB0xI9yeTfIUoH3+oAeHhqm/I43OTbbjA==",
+                    "requires": {
+                        "@babel/code-frame": "^7.12.13",
+                        "@babel/parser": "^7.12.13",
+                        "@babel/types": "^7.12.13"
+                    }
+                },
+                "@babel/traverse": {
+                    "version": "7.13.0",
+                    "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.13.0.tgz",
+                    "integrity": "sha512-xys5xi5JEhzC3RzEmSGrs/b3pJW/o87SypZ+G/PhaE7uqVQNv/jlmVIBXuoh5atqQ434LfXV+sf23Oxj0bchJQ==",
+                    "requires": {
+                        "@babel/code-frame": "^7.12.13",
+                        "@babel/generator": "^7.13.0",
+                        "@babel/helper-function-name": "^7.12.13",
+                        "@babel/helper-split-export-declaration": "^7.12.13",
+                        "@babel/parser": "^7.13.0",
+                        "@babel/types": "^7.13.0",
+                        "debug": "^4.1.0",
+                        "globals": "^11.1.0",
+                        "lodash": "^4.17.19"
+                    }
+                },
+                "@babel/types": {
+                    "version": "7.13.0",
+                    "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.13.0.tgz",
+                    "integrity": "sha512-hE+HE8rnG1Z6Wzo+MhaKE5lM5eMx71T4EHJgku2E3xIfaULhDcxiiRxUYgwX8qwP1BBSlag+TdGOt6JAidIZTA==",
+                    "requires": {
+                        "@babel/helper-validator-identifier": "^7.12.11",
+                        "lodash": "^4.17.19",
+                        "to-fast-properties": "^2.0.0"
+                    }
+                }
+            }
+        },
         "@babel/helper-create-regexp-features-plugin": {
             "version": "7.12.1",
             "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.12.1.tgz",
@@ -160,6 +259,7 @@
             "version": "7.10.4",
             "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.10.4.tgz",
             "integrity": "sha512-YdaSyz1n8gY44EmN7x44zBn9zQ1Ry2Y+3GTA+3vH6Mizke1Vw0aWDM66FOYEPw8//qKkmqOckrGgTYa+6sceqQ==",
+            "dev": true,
             "requires": {
                 "@babel/helper-get-function-arity": "^7.10.4",
                 "@babel/template": "^7.10.4",
@@ -170,6 +270,7 @@
             "version": "7.10.4",
             "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.4.tgz",
             "integrity": "sha512-EkN3YDB+SRDgiIUnNgcmiD361ti+AVbL3f3Henf6dqqUyr5dMsorno0lJWJuLhDhkI5sYEpgj6y9kB8AOU1I2A==",
+            "dev": true,
             "requires": {
                 "@babel/types": "^7.10.4"
             }
@@ -222,6 +323,7 @@
             "version": "7.10.4",
             "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.10.4.tgz",
             "integrity": "sha512-n3UGKY4VXwXThEiKrgRAoVPBMqeoPgHVqiHZOanAJCG9nQUL2pLRQirUzl0ioKclHGpGqRgIOkgcIJaIWLpygg==",
+            "dev": true,
             "requires": {
                 "@babel/types": "^7.10.4"
             }
@@ -229,7 +331,8 @@
         "@babel/helper-plugin-utils": {
             "version": "7.10.4",
             "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz",
-            "integrity": "sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg=="
+            "integrity": "sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==",
+            "dev": true
         },
         "@babel/helper-regex": {
             "version": "7.10.5",
@@ -285,6 +388,7 @@
             "version": "7.11.0",
             "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.11.0.tgz",
             "integrity": "sha512-74Vejvp6mHkGE+m+k5vHY93FX2cAtrw1zXrZXRlG4l410Nm9PxfEiVTn1PjDPV5SnmieiueY4AFg2xqhNFuuZg==",
+            "dev": true,
             "requires": {
                 "@babel/types": "^7.11.0"
             }
@@ -292,7 +396,8 @@
         "@babel/helper-validator-identifier": {
             "version": "7.10.4",
             "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz",
-            "integrity": "sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw=="
+            "integrity": "sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==",
+            "dev": true
         },
         "@babel/helper-validator-option": {
             "version": "7.12.1",
@@ -327,6 +432,7 @@
             "version": "7.10.4",
             "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.4.tgz",
             "integrity": "sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==",
+            "dev": true,
             "requires": {
                 "@babel/helper-validator-identifier": "^7.10.4",
                 "chalk": "^2.0.0",
@@ -336,7 +442,8 @@
         "@babel/parser": {
             "version": "7.12.5",
             "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.5.tgz",
-            "integrity": "sha512-FVM6RZQ0mn2KCf1VUED7KepYeUWoVShczewOCfm3nzoBybaih51h+sYVVGthW9M6lPByEPTQf+xm27PBdlpwmQ=="
+            "integrity": "sha512-FVM6RZQ0mn2KCf1VUED7KepYeUWoVShczewOCfm3nzoBybaih51h+sYVVGthW9M6lPByEPTQf+xm27PBdlpwmQ==",
+            "dev": true
         },
         "@babel/plugin-proposal-async-generator-functions": {
             "version": "7.12.1",
@@ -350,98 +457,18 @@
             }
         },
         "@babel/plugin-proposal-class-properties": {
-            "version": "7.12.1",
-            "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.12.1.tgz",
-            "integrity": "sha512-cKp3dlQsFsEs5CWKnN7BnSHOd0EOW8EKpEjkoz1pO2E5KzIDNV9Ros1b0CnmbVgAGXJubOYVBOGCT1OmJwOI7w==",
+            "version": "7.13.0",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.13.0.tgz",
+            "integrity": "sha512-KnTDjFNC1g+45ka0myZNvSBFLhNCLN+GeGYLDEA8Oq7MZ6yMgfLoIRh86GRT0FjtJhZw8JyUskP9uvj5pHM9Zg==",
             "requires": {
-                "@babel/helper-create-class-features-plugin": "^7.12.1",
-                "@babel/helper-plugin-utils": "^7.10.4"
+                "@babel/helper-create-class-features-plugin": "^7.13.0",
+                "@babel/helper-plugin-utils": "^7.13.0"
             },
             "dependencies": {
-                "@babel/generator": {
-                    "version": "7.12.5",
-                    "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.12.5.tgz",
-                    "integrity": "sha512-m16TQQJ8hPt7E+OS/XVQg/7U184MLXtvuGbCdA7na61vha+ImkyyNM/9DDA0unYCVZn3ZOhng+qz48/KBOT96A==",
-                    "requires": {
-                        "@babel/types": "^7.12.5",
-                        "jsesc": "^2.5.1",
-                        "source-map": "^0.5.0"
-                    }
-                },
-                "@babel/helper-create-class-features-plugin": {
-                    "version": "7.12.1",
-                    "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.12.1.tgz",
-                    "integrity": "sha512-hkL++rWeta/OVOBTRJc9a5Azh5mt5WgZUGAKMD8JM141YsE08K//bp1unBBieO6rUKkIPyUE0USQ30jAy3Sk1w==",
-                    "requires": {
-                        "@babel/helper-function-name": "^7.10.4",
-                        "@babel/helper-member-expression-to-functions": "^7.12.1",
-                        "@babel/helper-optimise-call-expression": "^7.10.4",
-                        "@babel/helper-replace-supers": "^7.12.1",
-                        "@babel/helper-split-export-declaration": "^7.10.4"
-                    }
-                },
-                "@babel/helper-member-expression-to-functions": {
-                    "version": "7.12.1",
-                    "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.12.1.tgz",
-                    "integrity": "sha512-k0CIe3tXUKTRSoEx1LQEPFU9vRQfqHtl+kf8eNnDqb4AUJEy5pz6aIiog+YWtVm2jpggjS1laH68bPsR+KWWPQ==",
-                    "requires": {
-                        "@babel/types": "^7.12.1"
-                    }
-                },
-                "@babel/helper-replace-supers": {
-                    "version": "7.12.5",
-                    "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.12.5.tgz",
-                    "integrity": "sha512-5YILoed0ZyIpF4gKcpZitEnXEJ9UoDRki1Ey6xz46rxOzfNMAhVIJMoune1hmPVxh40LRv1+oafz7UsWX+vyWA==",
-                    "requires": {
-                        "@babel/helper-member-expression-to-functions": "^7.12.1",
-                        "@babel/helper-optimise-call-expression": "^7.10.4",
-                        "@babel/traverse": "^7.12.5",
-                        "@babel/types": "^7.12.5"
-                    }
-                },
-                "@babel/parser": {
-                    "version": "7.12.5",
-                    "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.5.tgz",
-                    "integrity": "sha512-FVM6RZQ0mn2KCf1VUED7KepYeUWoVShczewOCfm3nzoBybaih51h+sYVVGthW9M6lPByEPTQf+xm27PBdlpwmQ=="
-                },
-                "@babel/traverse": {
-                    "version": "7.12.5",
-                    "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.12.5.tgz",
-                    "integrity": "sha512-xa15FbQnias7z9a62LwYAA5SZZPkHIXpd42C6uW68o8uTuua96FHZy1y61Va5P/i83FAAcMpW8+A/QayntzuqA==",
-                    "requires": {
-                        "@babel/code-frame": "^7.10.4",
-                        "@babel/generator": "^7.12.5",
-                        "@babel/helper-function-name": "^7.10.4",
-                        "@babel/helper-split-export-declaration": "^7.11.0",
-                        "@babel/parser": "^7.12.5",
-                        "@babel/types": "^7.12.5",
-                        "debug": "^4.1.0",
-                        "globals": "^11.1.0",
-                        "lodash": "^4.17.19"
-                    }
-                },
-                "@babel/types": {
-                    "version": "7.12.6",
-                    "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.6.tgz",
-                    "integrity": "sha512-hwyjw6GvjBLiyy3W0YQf0Z5Zf4NpYejUnKFcfcUhZCSffoBBp30w6wP2Wn6pk31jMYZvcOrB/1b7cGXvEoKogA==",
-                    "requires": {
-                        "@babel/helper-validator-identifier": "^7.10.4",
-                        "lodash": "^4.17.19",
-                        "to-fast-properties": "^2.0.0"
-                    }
-                },
-                "debug": {
-                    "version": "4.2.0",
-                    "resolved": "https://registry.npmjs.org/debug/-/debug-4.2.0.tgz",
-                    "integrity": "sha512-IX2ncY78vDTjZMFUdmsvIRFY2Cf4FnD0wRs+nQwJU8Lu99/tPFdb0VybiiMTPe3I6rQmwsqQqRBvxU+bZ/I8sg==",
-                    "requires": {
-                        "ms": "2.1.2"
-                    }
-                },
-                "ms": {
-                    "version": "2.1.2",
-                    "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-                    "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+                "@babel/helper-plugin-utils": {
+                    "version": "7.13.0",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.13.0.tgz",
+                    "integrity": "sha512-ZPafIPSwzUlAoWT8DKs1W2VyF2gOWthGd5NGFMsBcMMol+ZhK+EQY/e6V96poa6PA/Bh+C9plWN0hXO1uB8AfQ=="
                 }
             }
         },
@@ -618,12 +645,20 @@
             }
         },
         "@babel/plugin-syntax-jsx": {
-            "version": "7.12.1",
-            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.12.1.tgz",
-            "integrity": "sha512-1yRi7yAtB0ETgxdY9ti/p2TivUxJkTdhu/ZbF9MshVGqOx1TdB3b7xCXs49Fupgg50N45KcAsRP/ZqWjs9SRjg==",
+            "version": "7.12.13",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.12.13.tgz",
+            "integrity": "sha512-d4HM23Q1K7oq/SLNmG6mRt85l2csmQ0cHRaxRXjKW0YFdEXqlZ5kzFQKH5Uc3rDJECgu+yCRgPkG04Mm98R/1g==",
             "dev": true,
             "requires": {
-                "@babel/helper-plugin-utils": "^7.10.4"
+                "@babel/helper-plugin-utils": "^7.12.13"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.12.13",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.12.13.tgz",
+                    "integrity": "sha512-C+10MXCXJLiR6IeG9+Wiejt9jmtFpxUc3MQqCmPY8hfCjyUGl9kT+B2okzEZrtykiwrc4dbCPdDoz0A/HQbDaA==",
+                    "dev": true
+                }
             }
         },
         "@babel/plugin-syntax-logical-assignment-operators": {
@@ -920,35 +955,85 @@
             }
         },
         "@babel/plugin-transform-react-display-name": {
-            "version": "7.12.1",
-            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.12.1.tgz",
-            "integrity": "sha512-cAzB+UzBIrekfYxyLlFqf/OagTvHLcVBb5vpouzkYkBclRPraiygVnafvAoipErZLI8ANv8Ecn6E/m5qPXD26w==",
+            "version": "7.12.13",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.12.13.tgz",
+            "integrity": "sha512-MprESJzI9O5VnJZrL7gg1MpdqmiFcUv41Jc7SahxYsNP2kDkFqClxxTZq+1Qv4AFCamm+GXMRDQINNn+qrxmiA==",
             "dev": true,
             "requires": {
-                "@babel/helper-plugin-utils": "^7.10.4"
+                "@babel/helper-plugin-utils": "^7.12.13"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.12.13",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.12.13.tgz",
+                    "integrity": "sha512-C+10MXCXJLiR6IeG9+Wiejt9jmtFpxUc3MQqCmPY8hfCjyUGl9kT+B2okzEZrtykiwrc4dbCPdDoz0A/HQbDaA==",
+                    "dev": true
+                }
             }
         },
         "@babel/plugin-transform-react-jsx": {
-            "version": "7.12.10",
-            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.12.10.tgz",
-            "integrity": "sha512-MM7/BC8QdHXM7Qc1wdnuk73R4gbuOpfrSUgfV/nODGc86sPY1tgmY2M9E9uAnf2e4DOIp8aKGWqgZfQxnTNGuw==",
+            "version": "7.12.13",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.12.13.tgz",
+            "integrity": "sha512-hhXZMYR8t9RvduN2uW4sjl6MRtUhzNE726JvoJhpjhxKgRUVkZqTsA0xc49ALZxQM7H26pZ/lLvB2Yrea9dllA==",
             "dev": true,
             "requires": {
-                "@babel/helper-builder-react-jsx": "^7.10.4",
-                "@babel/helper-builder-react-jsx-experimental": "^7.12.10",
-                "@babel/helper-plugin-utils": "^7.10.4",
-                "@babel/plugin-syntax-jsx": "^7.12.1"
+                "@babel/helper-annotate-as-pure": "^7.12.13",
+                "@babel/helper-module-imports": "^7.12.13",
+                "@babel/helper-plugin-utils": "^7.12.13",
+                "@babel/plugin-syntax-jsx": "^7.12.13",
+                "@babel/types": "^7.12.13"
+            },
+            "dependencies": {
+                "@babel/helper-annotate-as-pure": {
+                    "version": "7.12.13",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.12.13.tgz",
+                    "integrity": "sha512-7YXfX5wQ5aYM/BOlbSccHDbuXXFPxeoUmfWtz8le2yTkTZc+BxsiEnENFoi2SlmA8ewDkG2LgIMIVzzn2h8kfw==",
+                    "dev": true,
+                    "requires": {
+                        "@babel/types": "^7.12.13"
+                    }
+                },
+                "@babel/helper-module-imports": {
+                    "version": "7.12.13",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.12.13.tgz",
+                    "integrity": "sha512-NGmfvRp9Rqxy0uHSSVP+SRIW1q31a7Ji10cLBcqSDUngGentY4FRiHOFZFE1CLU5eiL0oE8reH7Tg1y99TDM/g==",
+                    "dev": true,
+                    "requires": {
+                        "@babel/types": "^7.12.13"
+                    }
+                },
+                "@babel/helper-plugin-utils": {
+                    "version": "7.12.13",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.12.13.tgz",
+                    "integrity": "sha512-C+10MXCXJLiR6IeG9+Wiejt9jmtFpxUc3MQqCmPY8hfCjyUGl9kT+B2okzEZrtykiwrc4dbCPdDoz0A/HQbDaA==",
+                    "dev": true
+                },
+                "@babel/helper-validator-identifier": {
+                    "version": "7.12.11",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
+                    "integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw==",
+                    "dev": true
+                },
+                "@babel/types": {
+                    "version": "7.12.13",
+                    "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.13.tgz",
+                    "integrity": "sha512-oKrdZTld2im1z8bDwTOQvUbxKwE+854zc16qWZQlcTqMN00pWxHQ4ZeOq0yDMnisOpRykH2/5Qqcrk/OlbAjiQ==",
+                    "dev": true,
+                    "requires": {
+                        "@babel/helper-validator-identifier": "^7.12.11",
+                        "lodash": "^4.17.19",
+                        "to-fast-properties": "^2.0.0"
+                    }
+                }
             }
         },
         "@babel/plugin-transform-react-jsx-development": {
-            "version": "7.12.7",
-            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.12.7.tgz",
-            "integrity": "sha512-Rs3ETtMtR3VLXFeYRChle5SsP/P9Jp/6dsewBQfokDSzKJThlsuFcnzLTDRALiUmTC48ej19YD9uN1mupEeEDg==",
+            "version": "7.12.12",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.12.12.tgz",
+            "integrity": "sha512-i1AxnKxHeMxUaWVXQOSIco4tvVvvCxMSfeBMnMM06mpaJt3g+MpxYQQrDfojUQldP1xxraPSJYSMEljoWM/dCg==",
             "dev": true,
             "requires": {
-                "@babel/helper-builder-react-jsx-experimental": "^7.12.4",
-                "@babel/helper-plugin-utils": "^7.10.4",
-                "@babel/plugin-syntax-jsx": "^7.12.1"
+                "@babel/plugin-transform-react-jsx": "^7.12.12"
             }
         },
         "@babel/plugin-transform-react-pure-annotations": {
@@ -1170,16 +1255,24 @@
             }
         },
         "@babel/preset-react": {
-            "version": "7.12.10",
-            "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.12.10.tgz",
-            "integrity": "sha512-vtQNjaHRl4DUpp+t+g4wvTHsLQuye+n0H/wsXIZRn69oz/fvNC7gQ4IK73zGJBaxvHoxElDvnYCthMcT7uzFoQ==",
+            "version": "7.12.13",
+            "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.12.13.tgz",
+            "integrity": "sha512-TYM0V9z6Abb6dj1K7i5NrEhA13oS5ujUYQYDfqIBXYHOc2c2VkFgc+q9kyssIyUfy4/hEwqrgSlJ/Qgv8zJLsA==",
             "dev": true,
             "requires": {
-                "@babel/helper-plugin-utils": "^7.10.4",
-                "@babel/plugin-transform-react-display-name": "^7.12.1",
-                "@babel/plugin-transform-react-jsx": "^7.12.10",
-                "@babel/plugin-transform-react-jsx-development": "^7.12.7",
+                "@babel/helper-plugin-utils": "^7.12.13",
+                "@babel/plugin-transform-react-display-name": "^7.12.13",
+                "@babel/plugin-transform-react-jsx": "^7.12.13",
+                "@babel/plugin-transform-react-jsx-development": "^7.12.12",
                 "@babel/plugin-transform-react-pure-annotations": "^7.12.1"
+            },
+            "dependencies": {
+                "@babel/helper-plugin-utils": {
+                    "version": "7.12.13",
+                    "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.12.13.tgz",
+                    "integrity": "sha512-C+10MXCXJLiR6IeG9+Wiejt9jmtFpxUc3MQqCmPY8hfCjyUGl9kT+B2okzEZrtykiwrc4dbCPdDoz0A/HQbDaA==",
+                    "dev": true
+                }
             }
         },
         "@babel/runtime": {
@@ -1194,6 +1287,7 @@
             "version": "7.10.4",
             "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.4.tgz",
             "integrity": "sha512-ZCjD27cGJFUB6nmCB1Enki3r+L5kJveX9pq1SvAUKoICy6CZ9yD8xO086YXdYhvNjBdnekm4ZnaP5yC8Cs/1tA==",
+            "dev": true,
             "requires": {
                 "@babel/code-frame": "^7.10.4",
                 "@babel/parser": "^7.10.4",
@@ -1221,6 +1315,7 @@
             "version": "7.12.6",
             "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.6.tgz",
             "integrity": "sha512-hwyjw6GvjBLiyy3W0YQf0Z5Zf4NpYejUnKFcfcUhZCSffoBBp30w6wP2Wn6pk31jMYZvcOrB/1b7cGXvEoKogA==",
+            "dev": true,
             "requires": {
                 "@babel/helper-validator-identifier": "^7.10.4",
                 "lodash": "^4.17.19",
@@ -1244,9 +1339,9 @@
             "dev": true
         },
         "@popperjs/core": {
-            "version": "2.5.4",
-            "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.5.4.tgz",
-            "integrity": "sha512-ZpKr+WTb8zsajqgDkvCEWgp6d5eJT6Q63Ng2neTbzBO76Lbe91vX/iVIW9dikq+Fs3yEo+ls4cxeXABD2LtcbQ=="
+            "version": "2.9.0",
+            "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.0.tgz",
+            "integrity": "sha512-wjtKehFAIARq2OxK8j3JrggNlEslJfNuSm2ArteIbKyRMts2g0a7KzTxfRVNUM+O0gnBJ2hNV8nWPOYBgI1sew=="
         },
         "@restart/context": {
             "version": "2.1.4",
@@ -1254,12 +1349,12 @@
             "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q=="
         },
         "@restart/hooks": {
-            "version": "0.3.25",
-            "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.25.tgz",
-            "integrity": "sha512-m2v3N5pxTsIiSH74/sb1yW8D9RxkJidGW+5Mfwn/lHb2QzhZNlaU1su7abSyT9EGf0xS/0waLjrf7/XxQHUk7w==",
+            "version": "0.3.26",
+            "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.26.tgz",
+            "integrity": "sha512-7Hwk2ZMYm+JLWcb7R9qIXk1OoUg1Z+saKWqZXlrvFwT3w6UArVNWgxYOzf+PJoK9zZejp8okPAKTctthhXLt5g==",
             "requires": {
-                "lodash": "^4.17.15",
-                "lodash-es": "^4.17.15"
+                "lodash": "^4.17.20",
+                "lodash-es": "^4.17.20"
             }
         },
         "@types/classnames": {
@@ -1312,25 +1407,25 @@
             "dev": true
         },
         "@types/react": {
-            "version": "16.9.56",
-            "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.56.tgz",
-            "integrity": "sha512-gIkl4J44G/qxbuC6r2Xh+D3CGZpJ+NdWTItAPmZbR5mUS+JQ8Zvzpl0ea5qT/ZT3ZNTUcDKUVqV3xBE8wv/DyQ==",
+            "version": "17.0.2",
+            "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.2.tgz",
+            "integrity": "sha512-Xt40xQsrkdvjn1EyWe1Bc0dJLcil/9x2vAuW7ya+PuQip4UYUaXyhzWmAbwRsdMgwOFHpfp7/FFZebDU6Y8VHA==",
             "requires": {
                 "@types/prop-types": "*",
                 "csstype": "^3.0.2"
             },
             "dependencies": {
                 "csstype": {
-                    "version": "3.0.4",
-                    "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.4.tgz",
-                    "integrity": "sha512-xc8DUsCLmjvCfoD7LTGE0ou2MIWLx0K9RCZwSHMOdynqRsP4MtUcLeqh1HcQ2dInwDTqn+3CE0/FZh1et+p4jA=="
+                    "version": "3.0.7",
+                    "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.7.tgz",
+                    "integrity": "sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g=="
                 }
             }
         },
         "@types/react-transition-group": {
-            "version": "4.4.0",
-            "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.0.tgz",
-            "integrity": "sha512-/QfLHGpu+2fQOqQaXh8MG9q03bFENooTb/it4jr5kKaZlDQfWvjqWZg48AwzPVMBHlRuTRAY7hRHCEOXz5kV6w==",
+            "version": "4.4.1",
+            "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.1.tgz",
+            "integrity": "sha512-vIo69qKKcYoJ8wKCJjwSgCTM+z3chw3g18dkrDfVX665tMH7tmbDxEAnPdey4gTlwZz5QuHGzd+hul0OVZDqqQ==",
             "requires": {
                 "@types/react": "*"
             }
@@ -1868,9 +1963,9 @@
             }
         },
         "axios": {
-            "version": "0.21.0",
-            "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.0.tgz",
-            "integrity": "sha512-fmkJBknJKoZwem3/IKSSLpkdNXZeBu5Q7GA/aRsr2btgrptmSCxi2oFjZHqGdK9DoTil9PIHlPIZw2EcRJXRvw==",
+            "version": "0.21.1",
+            "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
+            "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
             "dev": true,
             "requires": {
                 "follow-redirects": "^1.10.0"
@@ -2116,9 +2211,9 @@
             "dev": true
         },
         "bootstrap": {
-            "version": "4.5.3",
-            "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.3.tgz",
-            "integrity": "sha512-o9ppKQioXGqhw8Z7mah6KdTYpNQY//tipnkxppWhPbiSWdD+1raYsnhwEZjkTHYbGee4cVQ0Rx65EhOY/HNLcQ==",
+            "version": "4.6.0",
+            "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
+            "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw==",
             "dev": true
         },
         "brace-expansion": {
@@ -3243,20 +3338,13 @@
             "integrity": "sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w=="
         },
         "csv-file-validator": {
-            "version": "1.8.0",
-            "resolved": "https://registry.npmjs.org/csv-file-validator/-/csv-file-validator-1.8.0.tgz",
-            "integrity": "sha512-+/wdJxbe9zk1KJv7GC5aCVOVrg10W7xWIypILuQsJ3ocegF/YueTarb8Dqg1snEfkPmh2aCjbhVXnu1gM3RRIA==",
+            "version": "1.10.1",
+            "resolved": "https://registry.npmjs.org/csv-file-validator/-/csv-file-validator-1.10.1.tgz",
+            "integrity": "sha512-jYFl3a/ptlJIEzLM28BlApn+JthmCz/3f/WLdt2fdCmMGb+eiP9QkulFhmepzFFrMi2Iel6m4OPXrHWpOFCHqg==",
             "requires": {
-                "famulus": "2.1.2",
-                "lodash": "4.17.15",
-                "papaparse": "^5.2.0"
-            },
-            "dependencies": {
-                "lodash": {
-                    "version": "4.17.15",
-                    "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
-                    "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
-                }
+                "famulus": "^2.2.0",
+                "lodash": "^4.17.20",
+                "papaparse": "^5.3.0"
             }
         },
         "cyclist": {
@@ -3279,7 +3367,6 @@
             "version": "4.2.0",
             "resolved": "https://registry.npmjs.org/debug/-/debug-4.2.0.tgz",
             "integrity": "sha512-IX2ncY78vDTjZMFUdmsvIRFY2Cf4FnD0wRs+nQwJU8Lu99/tPFdb0VybiiMTPe3I6rQmwsqQqRBvxU+bZ/I8sg==",
-            "dev": true,
             "requires": {
                 "ms": "2.1.2"
             },
@@ -3287,8 +3374,7 @@
                 "ms": {
                     "version": "2.1.2",
                     "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-                    "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-                    "dev": true
+                    "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
                 }
             }
         },
@@ -4184,11 +4270,11 @@
             }
         },
         "famulus": {
-            "version": "2.1.2",
-            "resolved": "https://registry.npmjs.org/famulus/-/famulus-2.1.2.tgz",
-            "integrity": "sha512-UjfF9lOEP6IFLC/DTwUe5KbCYINbuYYJS+mivlnWyK8yqt/9WYHrJ4RihZ0pa9HVxQObu8IWroJOyyt8dXCVkw==",
+            "version": "2.2.2",
+            "resolved": "https://registry.npmjs.org/famulus/-/famulus-2.2.2.tgz",
+            "integrity": "sha512-tobqs8uC0OomrMN/cX7aUUj3OSJn5y2GCfcTleCrtIfjxUkl6kJFLovnyEWfD6M+cQ1ZXhE5BaTJzMoDibbodA==",
             "requires": {
-                "lodash": "^4.17.15"
+                "lodash": "^4.17.20"
             }
         },
         "fast-deep-equal": {
@@ -6250,14 +6336,14 @@
             }
         },
         "lodash": {
-            "version": "4.17.20",
-            "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
-            "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
+            "version": "4.17.21",
+            "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+            "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
         },
         "lodash-es": {
-            "version": "4.17.15",
-            "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.15.tgz",
-            "integrity": "sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ=="
+            "version": "4.17.21",
+            "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+            "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
         },
         "lodash.memoize": {
             "version": "4.1.2",
@@ -7078,9 +7164,9 @@
             "dev": true
         },
         "papaparse": {
-            "version": "5.2.0",
-            "resolved": "https://registry.npmjs.org/papaparse/-/papaparse-5.2.0.tgz",
-            "integrity": "sha512-ylq1wgUSnagU+MKQtNeVqrPhZuMYBvOSL00DHycFTCxownF95gpLAk1HiHdUW77N8yxRq1qHXLdlIPyBSG9NSA=="
+            "version": "5.3.0",
+            "resolved": "https://registry.npmjs.org/papaparse/-/papaparse-5.3.0.tgz",
+            "integrity": "sha512-Lb7jN/4bTpiuGPrYy4tkKoUS8sTki8zacB5ke1p5zolhcSE4TlWgrlsxjrDTbG/dFVh07ck7X36hUf/b5V68pg=="
         },
         "parallel-transform": {
             "version": "1.2.0",
@@ -8166,20 +8252,19 @@
             }
         },
         "react": {
-            "version": "16.14.0",
-            "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
-            "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
+            "version": "17.0.1",
+            "resolved": "https://registry.npmjs.org/react/-/react-17.0.1.tgz",
+            "integrity": "sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w==",
             "dev": true,
             "requires": {
                 "loose-envify": "^1.1.0",
-                "object-assign": "^4.1.1",
-                "prop-types": "^15.6.2"
+                "object-assign": "^4.1.1"
             }
         },
         "react-bootstrap": {
-            "version": "1.4.0",
-            "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.4.0.tgz",
-            "integrity": "sha512-0BMzgeUAxH126v7VYDzIXbHxQVHSnniPVKpz9fblumdQpWaiElMnnzk+u8h8DoELX0nCXwPlcUzgXqmpncdc2Q==",
+            "version": "1.5.1",
+            "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.5.1.tgz",
+            "integrity": "sha512-jbJNGx9n4JvKgxlvT8DLKSeF3VcqnPJXS9LFdzoZusiZCCGoYecZ9qSCBH5n2A+kjmuura9JkvxI9l7HD+bIdQ==",
             "requires": {
                 "@babel/runtime": "^7.4.2",
                 "@restart/context": "^2.1.4",
@@ -8187,7 +8272,7 @@
                 "@types/classnames": "^2.2.10",
                 "@types/invariant": "^2.2.33",
                 "@types/prop-types": "^15.7.3",
-                "@types/react": "^16.9.35",
+                "@types/react": ">=16.9.35",
                 "@types/react-transition-group": "^4.4.0",
                 "@types/warning": "^3.0.0",
                 "classnames": "^2.2.6",
@@ -8195,7 +8280,7 @@
                 "invariant": "^2.2.4",
                 "prop-types": "^15.7.2",
                 "prop-types-extra": "^1.1.0",
-                "react-overlays": "^4.1.0",
+                "react-overlays": "^5.0.0",
                 "react-transition-group": "^4.4.1",
                 "uncontrollable": "^7.0.0",
                 "warning": "^4.0.3"
@@ -8211,15 +8296,14 @@
             }
         },
         "react-dom": {
-            "version": "16.14.0",
-            "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz",
-            "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==",
+            "version": "17.0.1",
+            "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.1.tgz",
+            "integrity": "sha512-6eV150oJZ9U2t9svnsspTMrWNyHc6chX0KzDeAOXftRa8bNeOKTTfCJ7KorIwenkHd2xqVTBTCZd79yk/lx/Ug==",
             "dev": true,
             "requires": {
                 "loose-envify": "^1.1.0",
                 "object-assign": "^4.1.1",
-                "prop-types": "^15.6.2",
-                "scheduler": "^0.19.1"
+                "scheduler": "^0.20.1"
             }
         },
         "react-is": {
@@ -8233,9 +8317,9 @@
             "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
         },
         "react-overlays": {
-            "version": "4.1.1",
-            "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-4.1.1.tgz",
-            "integrity": "sha512-WtJifh081e6M24KnvTQoNjQEpz7HoLxqt8TwZM7LOYIkYJ8i/Ly1Xi7RVte87ZVnmqQ4PFaFiNHZhSINPSpdBQ==",
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-5.0.0.tgz",
+            "integrity": "sha512-TKbqfAv23TFtCJ2lzISdx76p97G/DP8Rp4TOFdqM9n8GTruVYgE3jX7Zgb8+w7YJ18slTVcDTQ1/tFzdCqjVhA==",
             "requires": {
                 "@babel/runtime": "^7.12.1",
                 "@popperjs/core": "^2.5.3",
@@ -8248,17 +8332,17 @@
             },
             "dependencies": {
                 "@babel/runtime": {
-                    "version": "7.12.5",
-                    "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.5.tgz",
-                    "integrity": "sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==",
+                    "version": "7.13.9",
+                    "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.13.9.tgz",
+                    "integrity": "sha512-aY2kU+xgJ3dJ1eU6FMB9EH8dIe8dmusF1xEku52joLvw6eAFN0AI+WxCLDnpev2LEejWBAy2sBvBOBAjI3zmvA==",
                     "requires": {
                         "regenerator-runtime": "^0.13.4"
                     }
                 },
                 "csstype": {
-                    "version": "3.0.4",
-                    "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.4.tgz",
-                    "integrity": "sha512-xc8DUsCLmjvCfoD7LTGE0ou2MIWLx0K9RCZwSHMOdynqRsP4MtUcLeqh1HcQ2dInwDTqn+3CE0/FZh1et+p4jA=="
+                    "version": "3.0.7",
+                    "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.7.tgz",
+                    "integrity": "sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g=="
                 },
                 "dom-helpers": {
                     "version": "5.2.0",
@@ -8359,13 +8443,11 @@
             }
         },
         "react-toastify": {
-            "version": "6.2.0",
-            "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-6.2.0.tgz",
-            "integrity": "sha512-XpjFrcBhQ0/nBOL4syqgP/TywFnOyxmstYLWgSQWcj39qpp+WU4vPt3C/ayIDx7RFyxRWfzWTdR2qOcDGo7G0w==",
+            "version": "7.0.3",
+            "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-7.0.3.tgz",
+            "integrity": "sha512-cxZ5rfurC8LzcZQMTYc8RHIkQTs+BFur18Pzk6Loz6uS8OXUWm6nXVlH/wqglz4Z7UAE8xxcF5mRjfE13487uQ==",
             "requires": {
-                "clsx": "^1.1.1",
-                "prop-types": "^15.7.2",
-                "react-transition-group": "^4.4.1"
+                "clsx": "^1.1.1"
             }
         },
         "react-transition-group": {
@@ -8786,18 +8868,18 @@
             "dev": true
         },
         "sass": {
-            "version": "1.30.0",
-            "resolved": "https://registry.npmjs.org/sass/-/sass-1.30.0.tgz",
-            "integrity": "sha512-26EUhOXRLaUY7+mWuRFqGeGGNmhB1vblpTENO1Z7mAzzIZeVxZr9EZoaY1kyGLFWdSOZxRMAufiN2mkbO6dAlw==",
+            "version": "1.32.8",
+            "resolved": "https://registry.npmjs.org/sass/-/sass-1.32.8.tgz",
+            "integrity": "sha512-Sl6mIeGpzjIUZqvKnKETfMf0iDAswD9TNlv13A7aAF3XZlRPMq4VvJWBC2N2DXbp94MQVdNSFG6LfF/iOXrPHQ==",
             "dev": true,
             "requires": {
                 "chokidar": ">=2.0.0 <4.0.0"
             }
         },
         "sass-loader": {
-            "version": "10.1.0",
-            "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.1.0.tgz",
-            "integrity": "sha512-ZCKAlczLBbFd3aGAhowpYEy69Te3Z68cg8bnHHl6WnSCvnKpbM6pQrz957HWMa8LKVuhnD9uMplmMAHwGQtHeg==",
+            "version": "10.1.1",
+            "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.1.1.tgz",
+            "integrity": "sha512-W6gVDXAd5hR/WHsPicvZdjAWHBcEJ44UahgxcIE196fW2ong0ZHMPO1kZuI5q0VlvMQZh32gpv69PLWQm70qrw==",
             "dev": true,
             "requires": {
                 "klona": "^2.0.4",
@@ -8836,6 +8918,15 @@
                         "json5": "^2.1.2"
                     }
                 },
+                "lru-cache": {
+                    "version": "6.0.0",
+                    "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+                    "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+                    "dev": true,
+                    "requires": {
+                        "yallist": "^4.0.0"
+                    }
+                },
                 "schema-utils": {
                     "version": "3.0.0",
                     "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
@@ -8848,10 +8939,13 @@
                     }
                 },
                 "semver": {
-                    "version": "7.3.2",
-                    "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz",
-                    "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==",
-                    "dev": true
+                    "version": "7.3.4",
+                    "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.4.tgz",
+                    "integrity": "sha512-tCfb2WLjqFAtXn4KEdxIhalnRtoKFN7nAwj0B3ZXCbQloV2tq5eDbcTmT68JJD3nRJq24/XgxtQKFIpQdtvmVw==",
+                    "dev": true,
+                    "requires": {
+                        "lru-cache": "^6.0.0"
+                    }
                 }
             }
         },
@@ -8862,9 +8956,9 @@
             "dev": true
         },
         "scheduler": {
-            "version": "0.19.1",
-            "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
-            "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==",
+            "version": "0.20.1",
+            "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.1.tgz",
+            "integrity": "sha512-LKTe+2xNJBNxu/QhHvDR14wUXHRQbVY5ZOYpOGWRzhydZUqrLb2JBvLPY7cAqFmqrWuDED0Mjk7013SZiOz6Bw==",
             "dev": true,
             "requires": {
                 "loose-envify": "^1.1.0",
@@ -9977,12 +10071,12 @@
             }
         },
         "uncontrollable": {
-            "version": "7.1.1",
-            "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.1.1.tgz",
-            "integrity": "sha512-EcPYhot3uWTS3w00R32R2+vS8Vr53tttrvMj/yA1uYRhf8hbTG2GyugGqWDY0qIskxn0uTTojVd6wPYW9ZEf8Q==",
+            "version": "7.2.1",
+            "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+            "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
             "requires": {
                 "@babel/runtime": "^7.6.3",
-                "@types/react": "^16.9.11",
+                "@types/react": ">=16.9.11",
                 "invariant": "^2.2.4",
                 "react-lifecycles-compat": "^3.0.4"
             }

package.json

@@ -11,28 +11,28 @@
     },
     "devDependencies": {
         "axios": "^0.21",
-        "@babel/preset-react": "^7.12.10",
-        "bootstrap": "^4.5.3",
+        "@babel/preset-react": "^7.12.13",
+        "bootstrap": "^4.6.0",
         "cross-env": "^7.0",
         "jquery": "^3.5",
         "laravel-mix": "^5.0.9",
-        "lodash": "^4.17.20",
+        "lodash": "^4.17.21",
         "popper.js": "^1.12",
-        "react": "^16.14.0",
-        "react-dom": "^16.14.0",
+        "react": "^17.0.1",
+        "react-dom": "^17.0.1",
         "resolve-url-loader": "^3.1.2",
-        "sass-loader": "^10.1.0",
-        "sass": "^1.30.0"
+        "sass": "^1.32.8",
+        "sass-loader": "^10.1.1"
     },
     "dependencies": {
-        "@babel/plugin-proposal-class-properties": "^7.12.1",
+        "@babel/plugin-proposal-class-properties": "^7.13.0",
         "chart.js": "^2.9.4",
-        "csv-file-validator": "^1.8.0",
+        "csv-file-validator": "^1.10.1",
         "js-cookie": "^2.2.1",
-        "react-bootstrap": "^1.4.0",
+        "react-bootstrap": "^1.5.1",
         "react-chartjs-2": "^2.11.1",
         "react-router": "^5.2.0",
         "react-router-dom": "^5.2.0",
-        "react-toastify": "^6.2.0"
+        "react-toastify": "^7.0.3"
     }
 }

phpunit.xml

@@ -1,29 +1,26 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<phpunit xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-         xsi:noNamespaceSchemaLocation="./vendor/phpunit/phpunit/phpunit.xsd"
-         bootstrap="vendor/autoload.php"
-         colors="true">
-    <testsuites>
-        <testsuite name="Unit">
-            <directory suffix="Test.php">./tests/Unit</directory>
-        </testsuite>
-        <testsuite name="Feature">
-            <directory suffix="Test.php">./tests/Feature</directory>
-        </testsuite>
-    </testsuites>
-    <filter>
-        <whitelist processUncoveredFilesFromWhitelist="true">
-            <directory suffix=".php">./app</directory>
-        </whitelist>
-    </filter>
-    <php>
-        <server name="APP_ENV" value="testing"/>
-        <server name="BCRYPT_ROUNDS" value="4"/>
-        <server name="CACHE_DRIVER" value="array"/>
-        <server name="DB_CONNECTION" value="sqlite"/>
-        <server name="DB_DATABASE" value=":memory:"/>
-        <server name="MAIL_MAILER" value="array"/>
-        <server name="QUEUE_CONNECTION" value="sync"/>
-        <server name="SESSION_DRIVER" value="array"/>
-    </php>
+<phpunit xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="https://schema.phpunit.de/9.3/phpunit.xsd" bootstrap="vendor/autoload.php" colors="true">
+  <coverage processUncoveredFiles="true">
+    <include>
+      <directory suffix=".php">./app</directory>
+    </include>
+  </coverage>
+  <testsuites>
+    <testsuite name="Unit">
+      <directory suffix="Test.php">./tests/Unit</directory>
+    </testsuite>
+    <testsuite name="Feature">
+      <directory suffix="Test.php">./tests/Feature</directory>
+    </testsuite>
+  </testsuites>
+  <php>
+    <server name="APP_ENV" value="testing"/>
+    <server name="BCRYPT_ROUNDS" value="4"/>
+    <server name="CACHE_DRIVER" value="array"/>
+    <server name="DB_CONNECTION" value="sqlite"/>
+    <server name="DB_DATABASE" value=":memory:"/>
+    <server name="MAIL_MAILER" value="array"/>
+    <server name="QUEUE_CONNECTION" value="sync"/>
+    <server name="SESSION_DRIVER" value="array"/>
+  </php>
 </phpunit>

resources/js/components/Authentication/Authentication.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
-import { Container, Row, Col, Collapse, Button, Modal } from 'react-bootstrap';
+import { Row, Col} from 'react-bootstrap';
 import SessionsTable from './SessionsTable';
 import ResetPassword from './ResetPassword';
 
@@ -44,34 +44,18 @@ export default class Authentication extends Component {
 
         if( (window.config.auth == true && window.authenticated == true)) {
             return (
-                <Container className="mb-4">
+                <div>
                     <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 sm={{ span: 12 }} className="text-center">
+                            <ResetPassword />
                         </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>
+                    <Row>
+                        <Col sm={{ span: 12 }} className="text-center">
+                            <SessionsTable />
+                        </Col>
+                    </Row>
+                </div>
             );
         } else {
             return (

resources/js/components/Graphics/HistoryGraph.js

@@ -37,6 +37,10 @@ export default class HistoryGraph extends Component {
         });
     }
 
+    componentWillUnmount() {
+        clearInterval(this.state.interval);
+    }
+
     getDLULPing = (days) => {
         var url = 'api/speedtest/time/' + days;
 

resources/js/components/Graphics/LatestResults.js

@@ -26,6 +26,10 @@ export default class LatestResults extends Component {
         });
     }
 
+    componentWillUnmount() {
+        clearInterval(this.state.interval);
+    }
+
     getData = () => {
         var url = 'api/speedtest/latest';
 

resources/js/components/Graphics/TestsTable.js

@@ -26,6 +26,10 @@ export default class TestsTable extends Component {
         });
     }
 
+    componentWillUnmount() {
+        clearInterval(this.state.interval);
+    }
+
     getData = (page = this.state.page, refresh = true) => {
         var url = 'api/speedtest/?page=' + page;
 
@@ -83,59 +87,48 @@ export default class TestsTable extends Component {
 
         if(data.length > 0) {
             return (
-                <Container className="mb-4 mt-4" fluid>
-                    <Row>
-                        <Col sm={{ span: 12 }} className="mb-3 text-center">
-                            <div className="mouse"  aria-controls="testsTable" onClick={this.toggleCollapse} aria-expanded={show}>
-                                <h4 className="d-inline mr-2">All tests</h4>
-                                {(show) ?
-                                    <span className="ti-angle-up"></span>
-                                :
-                                    <span className="ti-angle-down"></span>
-                                }
-                            </div>
-                            {(show) &&
-                                <div className="my-1">
+                <div>
+                    <Container className="mb-4 mt-4 px-5">
+                        <Row>
+                            <Col sm={{ span: 12 }} className="mb-3 text-center">
+                                <div>
+                                    <h4 className="d-inline mr-2">All tests</h4>
                                     <span className="text-muted">Auto refresh: {(refresh) ? 'On' : 'Off'}</span>
                                 </div>
-                            }
-                        </Col>
-                    </Row>
-                    <Collapse in={show}>
-                        <div>
+                            </Col>
+                        </Row>
+                        <Row>
+                            <Col sm={{ span: 12 }} id="testsTable">
+                                <Table responsive>
+                                    <thead>
+                                        <tr>
+                                            <th>ID</th>
+                                            <th>Time</th>
+                                            <th>Download (Mbit/s)</th>
+                                            <th>Upload (Mbit/s)</th>
+                                            <th>Ping (ms)</th>
+                                            <th>More</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        {data.map((e,i) => {
+                                            return (
+                                                <TableRow key={e.id} data={e} />
+                                            );
+                                        })}
+                                    </tbody>
+                                </Table>
+                            </Col>
+                        </Row>
+                        {page < lastPage &&
                             <Row>
-                                <Col sm={{ span: 12 }} id="testsTable">
-                                    <Table responsive>
-                                        <thead>
-                                            <tr>
-                                                <th>ID</th>
-                                                <th>Time</th>
-                                                <th>Download (Mbit/s)</th>
-                                                <th>Upload (Mbit/s)</th>
-                                                <th>Ping (ms)</th>
-                                                <th>More</th>
-                                            </tr>
-                                        </thead>
-                                        <tbody>
-                                            {data.map((e,i) => {
-                                                return (
-                                                    <TableRow key={e.id} data={e} />
-                                                );
-                                            })}
-                                        </tbody>
-                                    </Table>
+                                <Col sm={{ span: 12 }} className="text-center">
+                                    <Button variant="primary" onClick={this.getMoreData}>Show more</Button>
                                 </Col>
                             </Row>
-                            {page < lastPage &&
-                                <Row>
-                                    <Col sm={{ span: 12 }} className="text-center">
-                                        <Button variant="primary" onClick={this.getMoreData}>Show more</Button>
-                                    </Col>
-                                </Row>
-                            }
-                        </div>
-                    </Collapse>
-                </Container>
+                        }
+                    </Container>
+                </div>
             );
         } else {
             return (

resources/js/components/Home/HomePage.js

@@ -5,25 +5,22 @@ import LatestResults from '../Graphics/LatestResults';
 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';
+import Navbar from '../Navbar';
 
 export default class HomePage extends Component {
 
     render() {
         return (
             <div>
+                <Navbar />
                 <div className="my-4">
                     {(window.config.auth == true && window.authenticated == false) &&
                         <Login />
                     }
                     <LatestResults />
                     <HistoryGraph />
-                    <TestsTable />
-                    <Settings />
-                    <Authentication />
-                    <DataRow />
                 </div>
                 <Footer />
             </div>

resources/js/components/Login.js

@@ -39,6 +39,9 @@ export default class Login extends Component {
             Cookies.set('auth', token, { expires: expires })
             window.location.reload(true);
         })
+        .catch((err) => {
+            toast.error('Something went wrong logging in.');
+        })
     }
 
     toggleShow = () => {

resources/js/components/Navbar.js

@@ -1,19 +1,77 @@
 import React, { Component } from 'react';
+import {Nav, Navbar as BootstrapNavbar, NavLink as BootstrapNavLink} from 'react-bootstrap';
 import ReactDOM from 'react-dom';
+import { Link, NavLink } from 'react-router-dom';
 
 export default class Navbar extends Component {
     constructor(props) {
         super(props)
 
         this.state = {
-
+            brand: {
+                name: window.config.name,
+                url: window.config.base
+            },
         }
     }
 
+    generatePagesArray() {
+        var pages = [
+            {
+                name: 'Home',
+                url: window.config.base,
+                authRequired: false
+            },
+            {
+                name: 'All Tests',
+                url: window.config.base + 'speedtests',
+                authRequired: false
+            },
+            {
+                name: 'Settings',
+                url: window.config.base + 'settings',
+                authRequired: true
+            },
+        ]
+
+        return pages;
+    }
+
+    generateLinks = () => {
+        var pages = this.generatePagesArray();
+
+        return pages.map(page => {
+            if(
+                page.authRequired === false ||
+                (
+                    page.authRequired === true &&
+                    window.config.auth &&
+                    window.authenticated
+                ) ||
+                (
+                    page.authRequired === true &&
+                    window.config.auth === false
+                )
+            ) {
+                return <BootstrapNavLink key={page.url} as={NavLink} to={page.url}>{page.name}</BootstrapNavLink>;
+            }
+        });
+    }
+
     render() {
+        var brand = this.state.brand;
+        var pages = this.generateLinks();
+
         return (
-            <div>
-            </div>
+            <BootstrapNavbar variant="dark" bg="dark" expand="sm">
+                <BootstrapNavbar.Brand as={Link} to={brand.url}><img style={{width: '15%'}} src={window.config.base + 'files/icons/fav/android-icon-192x192.png'} /> {brand.name}</BootstrapNavbar.Brand>
+                <BootstrapNavbar.Toggle  aria-controls="basic-navbar-nav" />
+                <BootstrapNavbar.Collapse id="basic-navbar-nav">
+                    <Nav className="ml-auto">
+                        {pages}
+                    </Nav>
+                </BootstrapNavbar.Collapse>
+            </BootstrapNavbar>
         );
     }
 }

resources/js/components/Settings/Setting.js

@@ -1,77 +0,0 @@
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import { Card, Form, Button } from 'react-bootstrap';
-import Axios from 'axios';
-import { toast } from 'react-toastify';
-
-export default class Setting extends Component {
-    constructor(props) {
-        super(props)
-
-        this.state = {
-            name: this.props.name,
-            value: this.props.value,
-            description: this.props.description,
-        }
-    }
-
-    ucfirst(string) {
-        return string.charAt(0).toUpperCase() + string.slice(1);
-    }
-
-    update = () => {
-        var url = 'api/settings?token=' + window.token;
-        var data = {
-            name: this.state.name,
-            value: this.state.value
-        };
-
-        Axios.post(url, data)
-        .then((resp) => {
-            toast.success(this.ucfirst(this.state.name) + ' updated');
-        })
-        .catch((err) => {
-            if(err.response.status == 422) {
-                var errors = err.response.data.error;
-                for(var key in errors) {
-                    var error = errors[key];
-                    toast.error(error[0])
-                }
-            } else {
-                toast.error('Something went wrong')
-            }
-        })
-    }
-
-    updateValue = (e) => {
-        this.setState({
-            value: e.target.value
-        });
-    }
-
-    render() {
-        var name = this.state.name;
-        var value = this.state.value;
-        var description = this.state.description;
-
-        return (
-            <Card className="m-2 setting-card">
-                <Card.Body className="d-flex align-items-center">
-                    <div>
-                        <h4>{this.ucfirst(name)}</h4>
-                        <div dangerouslySetInnerHTML={{ __html: description}} />
-                        <Form.Group controlId={name}>
-                            <Form.Label>{this.ucfirst(name)}</Form.Label>
-                            <Form.Control type="text" label={name} defaultValue={value} onInput={this.updateValue} />
-                        </Form.Group>
-                        <Button variant="primary" onClick={this.update}>Save</Button>
-                    </div>
-                </Card.Body>
-            </Card>
-        );
-    }
-}
-
-if (document.getElementById('Setting')) {
-    ReactDOM.render(<Setting />, document.getElementById('Setting'));
-}

resources/js/components/Settings/SettingWithModal.js

@@ -1,296 +0,0 @@
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import { Card, Form, Button, Modal, Row, Col } from 'react-bootstrap';
-import Axios from 'axios';
-import { toast } from 'react-toastify';
-import SettingsModalCard from '../Settings/SettingsModalCard';
-
-export default class SettingWithModal extends Component {
-    constructor(props) {
-        super(props)
-
-        this.state = {
-            title: this.props.title,
-            description: this.props.description,
-            settings: this.props.settings,
-            show: false,
-            autoClose: this.props.autoClose
-        }
-    }
-
-    ucfirst(string) {
-        return string.charAt(0).toUpperCase() + string.slice(1);
-    }
-
-    update = () => {
-        var url = 'api/settings/bulk?token=' + window.token;
-        var data = [];
-        var settings = this.state.settings;
-
-        settings.forEach(e => {
-            if(e.type !== 'button-get') {
-                var res = {
-                    name: e.obj.name,
-                    value: e.obj.value
-                };
-                data.push(res);
-            }
-        });
-
-        data = {
-            data: data
-        };
-
-        Axios.post(url, data)
-        .then((resp) => {
-            toast.success(this.state.title + ' updated');
-            if(this.state.autoClose) {
-                this.toggleShow();
-            }
-            Axios.get('api/settings/config')
-            .then((resp) => {
-                window.config = resp.data;
-            })
-        })
-        .catch((err) => {
-            if(err.response.status == 422) {
-                toast.error('Your input was invalid');
-            } else {
-                toast.error('Something went wrong')
-            }
-        })
-    }
-
-    updateValue = (e) => {
-        var name = e.target.id;
-        if(e.target.type == 'checkbox') {
-            var val = e.target.checked;
-        } else {
-            var val = e.target.value;
-        }
-        var settings = this.state.settings;
-        var i = 0;
-        settings.forEach(ele => {
-            if(ele.obj.name == name) {
-                ele.obj.value = val;
-            }
-            settings[i] = ele;
-            i++;
-        });
-        this.setState({
-            settings: settings
-        });
-    }
-
-    toggleShow = () => {
-        var show = this.state.show;
-        if(show) {
-            this.setState({
-                show: false
-            });
-        } else {
-            this.setState({
-                show: true
-            });
-        }
-    }
-
-    render() {
-        var title = this.state.title;
-        var description = this.state.description;
-        var show = this.state.show;
-        var settings = this.state.settings;
-
-        return (
-            <>
-                <SettingsModalCard title={title} description={description} toggleShow={this.toggleShow} />
-                <Modal show={show} onHide={this.toggleShow}>
-                    <Modal.Header closeButton>
-                        <Modal.Title>{title}</Modal.Title>
-                    </Modal.Header>
-                    <Modal.Body>
-                        {settings.map((e,i) => {
-                            var name = e.obj.name.split('_');
-                            name[0] = this.ucfirst(name[0]);
-                            name = name.join(' ');
-
-                            if(e.obj.description == null || e.obj.description == '') {
-                                var sm = { span: 12 };
-                                var md = { span: 12 };
-                            } else {
-                                var sm = { span: 12 };
-                                var md = { span: 6 };
-                            }
-
-                            var readonly = false;
-                            if(window.config.editable[e.obj.name] == false) {
-                                readonly = true;
-                            }
-
-                            if(e.type == 'info') {
-                                return (
-                                    <Row key={e.obj.id} className="d-flex align-items-center">
-                                        <Col md={md} sm={sm}>
-                                            <p>{e.obj.content}</p>
-                                        </Col>
-                                    </Row>
-                                )
-                            } else if(e.type == 'checkbox') {
-                                return (
-                                    <Row key={e.obj.id} className="d-flex align-items-center">
-                                        <Col  md={md} sm={sm}>
-                                            <Form.Group controlId={e.obj.name}>
-                                                {readonly ?
-                                                    <>
-                                                        <Form.Check type="checkbox" disabled label={name} defaultChecked={Boolean(Number(e.obj.value))} onInput={this.updateValue} />
-                                                        <Form.Text className="text-muted">This setting is defined as an env variable and is not editable.</Form.Text>
-                                                    </>
-                                                :
-                                                    <Form.Check type="checkbox" label={name} defaultChecked={Boolean(Number(e.obj.value))} onInput={this.updateValue} />
-                                                }
-                                            </Form.Group>
-                                        </Col>
-                                        {e.description == null &&
-                                            <Col md={md} sm={sm}>
-                                                <p>{e.obj.description}</p>
-                                            </Col>
-                                        }
-                                    </Row>
-                                );
-                            } else if(e.type == 'number') {
-                                return (
-                                    <Row key={e.obj.id}>
-                                        <Col md={md} sm={sm}>
-                                            <Form.Group controlId={e.obj.name}>
-                                                <Form.Label>{name}</Form.Label>
-                                                {readonly ?
-                                                    <>
-                                                        <Form.Control type="number" disabled min={e.min} max={e.max} defaultValue={e.obj.value} onInput={this.updateValue} />
-                                                        <Form.Text className="text-muted">This setting is defined as an env variable and is not editable.</Form.Text>
-                                                    </>
-                                                :
-                                                    <Form.Control type="number" min={e.min} max={e.max} defaultValue={e.obj.value} onInput={this.updateValue} />
-                                                }
-                                            </Form.Group>
-                                        </Col>
-                                        {e.description == null &&
-                                            <Col md={md} sm={sm}>
-                                                <p>{e.obj.description}</p>
-                                            </Col>
-                                        }
-                                    </Row>
-                                );
-                            } else if(e.type == 'text') {
-                                return (
-                                    <Row key={e.obj.id}>
-                                        <Col md={md} sm={sm}>
-                                            <Form.Group controlId={e.obj.name}>
-                                                <Form.Label>{name}</Form.Label>
-                                                {readonly ?
-                                                    <>
-                                                        <Form.Control type="text" disabled defaultValue={e.obj.value} onInput={this.updateValue} />
-                                                        <Form.Text className="text-muted">This setting is defined as an env variable and is not editable.</Form.Text>
-                                                    </>
-                                                :
-                                                    <Form.Control type="text" defaultValue={e.obj.value} onInput={this.updateValue} />
-                                                }
-                                            </Form.Group>
-                                        </Col>
-                                        {e.description == null &&
-                                            <Col md={md} sm={sm}>
-                                                <p dangerouslySetInnerHTML={{ __html: e.obj.description}}></p>
-                                            </Col>
-                                        }
-                                    </Row>
-                                );
-                            } else if(e.type == 'select') {
-                                return (
-                                    <Row key={e.obj.id}>
-                                        <Col md={md} sm={sm}>
-                                            <Form.Group controlId={e.obj.name}>
-                                                <Form.Label>{name}</Form.Label>
-                                                {readonly ?
-                                                    <>
-                                                        <Form.Control as="select" disabled defaultValue={e.obj.value} onInput={this.updateValue}>
-                                                            {e.options.map((e,i) => {
-                                                                return (
-                                                                    <option key={i} value={e.value}>{e.name}</option>
-                                                                )
-                                                            })}
-                                                        </Form.Control>
-                                                        <Form.Text className="text-muted">This setting is defined as an env variable and is not editable.</Form.Text>
-                                                    </>
-                                                :
-                                                    <Form.Control as="select" defaultValue={e.obj.value} onInput={this.updateValue}>
-                                                        {e.options.map((e,i) => {
-                                                            return (
-                                                                <option key={i} value={e.value}>{e.name}</option>
-                                                            )
-                                                        })}
-                                                    </Form.Control>
-                                                }
-                                            </Form.Group>
-                                        </Col>
-                                        {e.description == null &&
-                                            <Col md={md} sm={sm}>
-                                                <p>{e.obj.description}</p>
-                                            </Col>
-                                        }
-                                    </Row>
-                                )
-                            } else if(e.type == 'button-get') {
-                                return (
-                                    <Row key={e.obj.id}>
-                                        <Col md={md} sm={sm}>
-                                            <p>{name}</p>
-                                            <Button onClick={() => { Axios.get(e.url) }} >{name}</Button>
-                                        </Col>
-                                        {e.description == null &&
-                                            <Col md={md} sm={sm}>
-                                                <p>{e.obj.description}</p>
-                                            </Col>
-                                        }
-                                    </Row>
-                                )
-                            } else if(e.type == 'group') {
-                                return (
-                                    <div key={e.obj.id}>
-                                        <Row>
-                                            <Col md={md} sm={sm}>
-                                                <p className="mb-0">{name}</p>
-                                            </Col>
-                                            {e.description == null &&
-                                                <Col md={md} sm={sm}>
-                                                    <p>{e.obj.description}</p>
-                                                </Col>
-                                            }
-                                        </Row>
-                                        <Row>
-                                            <Col sm={{ span: 12 }}>
-                                                {e.children.map((ee,ii) => {
-                                                    if(ee.type == 'button-get') {
-                                                        return (
-                                                            <Button key={ii} variant={ee.btnType} className={'mr-2 mb-3'} onClick={() => { Axios.get(ee.url)
-                                                                                                                                                .then((resp) => { toast.success('Healthcheck sent') })
-                                                                                                                                                .catch((resp) => { resp = resp.response; toast.error(resp.data.error) })
-                                                            }} >{ee.text}</Button>
-                                                        )
-                                                    }
-                                                })}
-                                            </Col>
-                                        </Row>
-                                    </div>
-                                )
-                            }
-                        })}
-                        <Button variant="primary" type="submit" onClick={this.update} >Save</Button>
-                    </Modal.Body>
-                </Modal>
-            </>
-        );
-    }
-}
-
-if (document.getElementById('Setting')) {
-    ReactDOM.render(<Setting />, document.getElementById('Setting'));
-}

resources/js/components/Settings/Settings.js

@@ -1,323 +0,0 @@
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import { Modal, Container, Row, Col, Collapse } from 'react-bootstrap';
-import Loader from '../Loader';
-import Axios from 'axios';
-import Setting from './Setting';
-import SettingWithModal from './SettingWithModal';
-import ResetSettings from './ResetSettings';
-
-export default class Settings extends Component {
-    constructor(props) {
-        super(props)
-
-        this.state = {
-            show: false,
-            loading: true,
-            data: [],
-        }
-    }
-
-    componentDidMount = () => {
-        if( (window.config.auth == true && window.authenticated == true) || window.config.auth == false) {
-            this.getData();
-        }
-    }
-
-    toggleShow = () => {
-        if(this.state.show) {
-            var show = false;
-        } else {
-            var show = true;
-        }
-
-        this.setState({
-            show: show
-        });
-    }
-
-    getData = () => {
-        var url = 'api/settings/?token=' + window.token;
-
-        Axios.get(url)
-        .then((resp) => {
-            this.setState({
-                loading: false,
-                data: resp.data
-            });
-        })
-        .catch((err) => {
-            if(err.response) {
-
-            }
-        })
-    }
-
-    buildSettingsCards = () => {
-        var e = this.state.data;
-
-        return (
-            <Row>
-                <Col lg={{ span: 4 }} md={{ span: 6 }} sm={{ span: 12 }}>
-                    <SettingWithModal title="General settings" description="Configure general settings for the app." autoClose={true} settings={[
-                        {
-                            obj: e.schedule,
-                            type: 'text'
-                        },
-                        {
-                            obj: e.server,
-                            type: 'text'
-                        },
-                        {
-                            obj: e.show_average,
-                            type: 'checkbox'
-                        },
-                        {
-                            obj: e.show_max,
-                            type: 'checkbox'
-                        },
-                        {
-                            obj: e.show_min,
-                            type: 'checkbox'
-                        },
-                    ]} />
-                </Col>
-                <Col lg={{ span: 4 }} md={{ span: 6 }} sm={{ span: 12 }}>
-                    <SettingWithModal title="Graph settings" description="Control settings for the graphs." autoClose={true} settings={[
-                        {
-                            obj: e.download_upload_graph_enabled,
-                            type: 'checkbox'
-                        },
-                        {
-                            obj: e.download_upload_graph_width,
-                            type: 'select',
-                            options: [
-                                {
-                                    name: 'Full-width',
-                                    'value': 12
-                                },
-                                {
-                                    name: 'Half-width',
-                                    'value': 6
-                                }
-                            ],
-                        },
-                        {
-                            obj: e.ping_graph_enabled,
-                            type: 'checkbox'
-                        },
-                        {
-                            obj: e.ping_graph_width,
-                            type: 'select',
-                            options: [
-                                {
-                                    name: 'Full-width',
-                                    'value': 12
-                                },
-                                {
-                                    name: 'Half-width',
-                                    'value': 6
-                                }
-                            ],
-                        },
-                        {
-                            obj: e.failure_graph_enabled,
-                            type: 'checkbox'
-                        },
-                        {
-                            obj: e.failure_graph_width,
-                            type: 'select',
-                            options: [
-                                {
-                                    name: 'Full-width',
-                                    'value': 12
-                                },
-                                {
-                                    name: 'Half-width',
-                                    'value': 6
-                                }
-                            ],
-                        },
-                        {
-                            obj: e.show_failed_tests_on_graph,
-                            type: 'checkbox'
-                        }
-                    ]} />
-                </Col>
-                <Col lg={{ span: 4 }} md={{ span: 6 }} sm={{ span: 12 }}>
-                    <SettingWithModal title="Notification settings" description="Control which types of notifications the server sends." autoClose={false} settings={[
-                        {
-                            obj: e.slack_webhook,
-                            type: 'text'
-                        },
-                        {
-                            obj: e.telegram_bot_token,
-                            type: 'text'
-                        },
-                        {
-                            obj: e.telegram_chat_id,
-                            type: 'text'
-                        },
-                        {
-                            obj: {
-                                id: (Math.floor(Math.random() * 10000) + 1),
-                                name: "Test notifications",
-                                description: "After saving your updated notification settings, use this to check your settings are correct."
-                            },
-                            type: 'button-get',
-                            url: 'api/settings/test-notification?token=' + window.token
-                        },
-                        {
-                            obj: e.speedtest_notifications,
-                            type: 'checkbox'
-                        },
-                        {
-                            obj: e.speedtest_overview_notification,
-                            type: 'checkbox'
-                        },
-                        {
-                            obj: e.speedtest_overview_time,
-                            type: 'number',
-                            min: 0,
-                            max: 23
-                        },
-                        {
-                            obj: {
-                                id: (Math.floor(Math.random() * 10000) + 1),
-                                name: "Conditional Notifications",
-                                description: ""
-                            },
-                            type: 'group',
-                            children: [
-
-                            ]
-                        },
-                        {
-                            obj: e.threshold_alert_percentage_notifications,
-                            type: 'checkbox',
-                        },
-                        {
-                            obj: e.threshold_alert_percentage,
-                            type: 'number',
-                            min: 0,
-                            max: 100
-                        },
-                        {
-                            obj: e.threshold_alert_absolute_notifications,
-                            type: 'checkbox',
-                        },
-                        {
-                            obj: e.threshold_alert_absolute_download,
-                            type: 'number',
-                        },
-                        {
-                            obj: e.threshold_alert_absolute_upload,
-                            type: 'number',
-                        },
-                        {
-                            obj: e.threshold_alert_absolute_ping,
-                            type: 'number',
-                        }
-                    ]} />
-                </Col>
-                <Col lg={{ span: 4 }} md={{ span: 6 }} sm={{ span: 12 }}>
-                    <SettingWithModal title="healthchecks.io settings" description="Control settings for healthchecks.io" autoClose={false} settings={[
-                        {
-                            obj: e.healthchecks_uuid,
-                            type: 'text'
-                        },
-                        {
-                            obj: e.healthchecks_enabled,
-                            type: 'checkbox'
-                        },
-                        {
-                            obj: {
-                                id: (Math.floor(Math.random() * 10000) + 1),
-                                name: "Test healthchecks (after saving)",
-                                description: ""
-                            },
-                            type: 'group',
-                            children: [
-                                {
-                                    type: 'button-get',
-                                    url: 'api/settings/test-healthchecks/start?token=' + window.token,
-                                    btnType: 'outline-success',
-                                    text: 'Start',
-                                    inline: true,
-                                },
-                                {
-                                    type: 'button-get',
-                                    url: 'api/settings/test-healthchecks/success?token=' + window.token,
-                                    btnType: 'success',
-                                    text: 'Success',
-                                    inline: true,
-                                },
-                                {
-                                    type: 'button-get',
-                                    url: 'api/settings/test-healthchecks/fail?token=' + window.token,
-                                    btnType: 'danger',
-                                    text: 'Fail',
-                                    inline: true,
-                                },
-                            ]
-                        },
-                    ]} />
-                </Col>
-                <Col lg={{ span: 4 }} md={{ span: 6 }} sm={{ span: 12 }}>
-                    <ResetSettings />
-                </Col>
-            </Row>
-        )
-    }
-
-    render() {
-        var show = this.state.show;
-        var loading = this.state.loading;
-        var data = this.state.data;
-        if(!loading) {
-            var cards = this.buildSettingsCards();
-        }
-        if( (window.config.auth == true && window.authenticated == true) || window.config.auth == false) {
-            return (
-                <div>
-                    <Container className="my-4">
-                        <Row>
-                            <Col sm={{ span: 12 }} className="mb-3 text-center">
-                                <div className="mouse" onClick={this.toggleShow}>
-                                    <h4 className="mb-0 mr-2 d-inline">Settings</h4>
-                                    {(show) ?
-                                        <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
-                                        }
-                                    </Col>
-                                </Row>
-                            </div>
-                        </Collapse>
-                    </Container>
-
-                </div>
-            );
-        } else {
-            return(
-                <></>
-            )
-        }
-    }
-}
-
-if (document.getElementById('Settings')) {
-    ReactDOM.render(<Settings />, document.getElementById('Settings'));
-}

resources/js/components/Settings/SettingsIndex.js

@@ -0,0 +1,282 @@
+import Axios from 'axios';
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import Footer from '../Home/Footer';
+import Loader from '../Loader';
+import Navbar from '../Navbar';
+import SettingsTabs from './SettingsTabs';
+
+export default class SettingsIndex extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            data: null,
+            loading: true,
+        }
+    }
+
+    getData = () => {
+        var url = 'api/settings/?token=' + window.token;
+
+        Axios.get(url)
+        .then((resp) => {
+            this.setState({
+                data: this.sortSettings(resp.data),
+                loading: false,
+            });
+        })
+        .catch((err) => {
+            //
+        })
+    }
+
+    sortSettings = (data) => {
+        return {
+            General: [
+                {
+                    obj: data.app_name,
+                    type: 'text',
+                },
+                {
+                    obj: data.schedule_enabled,
+                    type: 'checkbox',
+                },
+                {
+                    obj: data.schedule,
+                    type: 'text',
+                },
+                {
+                    obj: data.server,
+                    type: 'text',
+                },
+                {
+                    obj: data.show_average,
+                    type: 'checkbox',
+                },
+                {
+                    obj: data.show_max,
+                    type: 'checkbox',
+                },
+                {
+                    obj: data.show_min,
+                    type: 'checkbox',
+                }
+            ],
+            Graphs: [
+                {
+                    obj: data.download_upload_graph_enabled,
+                    type: 'checkbox',
+                    hideDescription: true
+                },
+                {
+                    obj: data.download_upload_graph_width,
+                    type: 'select',
+                    options: [
+                        {
+                            name: 'Full-width',
+                            'value': 12
+                        },
+                        {
+                            name: 'Half-width',
+                            'value': 6
+                        }
+                    ],
+                },
+                {
+                    obj: data.ping_graph_enabled,
+                    type: 'checkbox',
+                    hideDescription: true
+                },
+                {
+                    obj: data.ping_graph_width,
+                    type: 'select',
+                    options: [
+                        {
+                            name: 'Full-width',
+                            'value': 12
+                        },
+                        {
+                            name: 'Half-width',
+                            'value': 6
+                        }
+                    ],
+                },
+                {
+                    obj: data.failure_graph_enabled,
+                    type: 'checkbox',
+                    hideDescription: true
+                },
+                {
+                    obj: data.failure_graph_width,
+                    type: 'select',
+                    options: [
+                        {
+                            name: 'Full-width',
+                            'value': 12
+                        },
+                        {
+                            name: 'Half-width',
+                            'value': 6
+                        }
+                    ],
+                },
+                {
+                    obj: data.show_failed_tests_on_graph,
+                    type: 'checkbox',
+                },
+            ],
+            Notifications: [
+                {
+                    obj: data.slack_webhook,
+                    type: 'text'
+                },
+                {
+                    obj: data.telegram_bot_token,
+                    type: 'text'
+                },
+                {
+                    obj: data.telegram_chat_id,
+                    type: 'text'
+                },
+                {
+                    type: 'btn-get',
+                    url: 'api/settings/test-notification?token=' + window.token,
+                    btnType: 'primary',
+                    obj: {
+                        id: (Math.floor(Math.random() * 10000) + 1),
+                        name: 'Test notifications',
+                        description: 'After saving your updated notification settings, use this to check your settings are correct.'
+                    }
+                },
+                {
+                    obj: data.speedtest_notifications,
+                    type: 'checkbox'
+                },
+                {
+                    obj: data.speedtest_overview_notification,
+                    type: 'checkbox'
+                },
+                {
+                    obj: data.speedtest_overview_time,
+                    type: 'number',
+                    min: 0,
+                    max: 23,
+                },
+                // Add handling for title stuff
+                {
+                    obj: data.threshold_alert_percentage,
+                    type: 'number',
+                    min: 0,
+                    max: 100
+                },
+                {
+                    obj: data.threshold_alert_absolute_notifications,
+                    type: 'checkbox'
+                },
+                {
+                    obj: data.threshold_alert_absolute_download,
+                    type: 'number'
+                },
+                {
+                    obj: data.threshold_alert_absolute_upload,
+                    type: 'number'
+                },
+                {
+                    obj: data.threshold_alert_absolute_ping,
+                    type: 'number'
+                },
+            ],
+            healthchecks: [
+                {
+                    obj: data.healthchecks_enabled,
+                    type: 'checkbox'
+                },
+                {
+                    obj: data.healthchecks_server_url,
+                    type: 'text'
+                },
+                {
+                    obj: data.healthchecks_uuid,
+                    type: 'text'
+                },
+                {
+                    obj: {
+                        id: (Math.floor(Math.random() * 10000) + 1),
+                        name: "Test healthchecks.io integration",
+                        description: ""
+                    },
+                },
+                {
+                    obj: {
+                        id: (Math.floor(Math.random() * 10000) + 1),
+                        name: "Start",
+                        description: ""
+                    },
+                    type: 'btn-get',
+                    url: 'api/settings/test-healthchecks/start?token=' + window.token,
+                    btnType: 'outline-success',
+                    inline: true,
+                    earlyReturn: true,
+                    classes: 'mr-2'
+                },
+                {
+                    obj: {
+                        id: (Math.floor(Math.random() * 10000) + 1),
+                        name: "Success",
+                        description: ""
+                    },
+                    type: 'btn-get',
+                    url: 'api/settings/test-healthchecks/success?token=' + window.token,
+                    btnType: 'success',
+                    text: 'Success',
+                    inline: true,
+                    earlyReturn: true,
+                    classes: 'mr-2'
+                },
+                {
+                    obj: {
+                        id: (Math.floor(Math.random() * 10000) + 1),
+                        name: "Fail",
+                        description: ""
+                    },
+                    type: 'btn-get',
+                    url: 'api/settings/test-healthchecks/fail?token=' + window.token,
+                    btnType: 'danger',
+                    text: 'Fail',
+                    inline: true,
+                    earlyReturn: true,
+                    classes: 'mr-2'
+                },
+
+            ]
+        };
+    }
+
+    componentDidMount() {
+        this.getData();
+    }
+
+    render() {
+        var data = this.state.data;
+        var loading = this.state.loading;
+
+        return (
+            <div>
+                <Navbar />
+                <div className="container my-5">
+                    {loading ?
+                        <Loader />
+                        :
+                        <SettingsTabs data={data} />
+                    }
+                </div>
+                <Footer />
+            </div>
+        );
+    }
+}
+
+if (document.getElementById('settingsIndex')) {
+    ReactDOM.render(<SettingsIndex />, document.getElementById('settingsIndex'));
+}

resources/js/components/Settings/SettingsInput.js

@@ -0,0 +1,185 @@
+import React, { Component } from 'react';
+import { Form } from 'react-bootstrap';
+import ReactDOM from 'react-dom';
+
+export default class SettingsInput extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            type: this.props.type,
+            name: this.props.name,
+            displayName: (this.props.name) ? this.formatName(this.props.name) : '',
+            value: (this.props.value) ? this.props.value : '',
+            classes: this.props.classes,
+            id: this.props.id,
+            label: (this.props.label) ? this.props.label : false,
+            readonly: true,
+            description: (this.props.description) ? this.props.description : false,
+            options: this.props.options ? this.props.options : [],
+            hideDescription: this.props.hideDescription ? true : false,
+            min: this.props.min ? this.props.min : null,
+            max: this.props.max ? this.props.max : null,
+            url: this.props.url,
+            inline: this.props.inline ? 'd-inline-block' : 'd-block',
+            btnType: this.props.btnType,
+            earlyReturn: this.props.earlyReturn ? true : false,
+        }
+    }
+
+    componentDidMount() {
+        this.setState({
+            readonly: this.isReadOnly()
+        });
+    }
+
+    formatName(name) {
+        name = name.split('_').join(' ');
+
+        return name.charAt(0).toUpperCase() + name.slice(1);
+    }
+
+    handleInput = (evt) => {
+        var val = evt.target.value;
+
+        if(this.state.type === 'checkbox') {
+            val = evt.target.checked;
+        }
+
+        this.props.handler(
+            this.state.name,
+            val
+        );
+
+        this.setState({
+            value: val
+        });
+    }
+
+    isReadOnly = () => {
+        if(window.config.editable[this.state.name] == false) {
+            return true;
+        }
+
+        return false;
+    }
+
+    generateNumberInput(disabled) {
+        return <Form.Control
+            name={this.state.name}
+            type={this.state.type}
+            defaultValue={this.state.value}
+            disabled={disabled}
+            min={this.state.min}
+            max={this.state.max}
+            onInput={this.handleInput} />
+    }
+
+    generateSelectInput(disabled) {
+        return (
+            <Form.Control
+                as="select"
+                name={this.state.name}
+                type={this.state.type}
+                defaultValue={this.state.value}
+                disabled={disabled}
+                onInput={this.handleInput}
+            >
+                {this.state.options.map((option,i) => {
+                    return <option key={i} value={option.value}>{option.name}</option>
+                })}
+            </Form.Control>
+        );
+    }
+
+    generateCheckboxInput(disabled) {
+        return <Form.Control
+            custom
+            className="ml-2"
+            name={this.state.name}
+            type={this.state.type}
+            defaultChecked={this.state.value}
+            disabled={disabled}
+            onInput={this.handleInput} />
+    }
+
+    generateTextInput(disabled) {
+        return <Form.Control
+            name={this.state.name}
+            type={this.state.type}
+            defaultValue={this.state.value}
+            disabled={disabled}
+            onInput={this.handleInput} />
+    }
+
+    generateButtonGetInput() {
+        var url = this.state.url;
+
+        return (
+            <button
+                type="button"
+                className={"btn btn-" + this.state.btnType + ' ' + this.state.inline + ' ' + this.state.classes}
+                onClick={() => {
+                    window.axios.get(url)
+                }}
+            >{this.state.displayName}</button>
+        );
+    }
+
+    generateInput = () => {
+        var disabled = (this.state.readonly) ? true : false;
+        var input = null;
+
+        if(this.state.type === 'number') {
+            input = this.generateNumberInput(disabled);
+        }
+
+        if(this.state.type === 'select') {
+            input = this.generateSelectInput(disabled);
+        }
+
+        if(this.state.type === 'checkbox') {
+            input = this.generateCheckboxInput(disabled);
+        }
+
+        if(this.state.type === 'text') {
+            input = this.generateTextInput(disabled);
+        }
+
+        if(this.state.type === 'btn-get') {
+            input = this.generateButtonGetInput();
+        }
+
+        if(this.state.earlyReturn) {
+            return input;
+        }
+
+        return (
+            <Form.Group controlId={this.state.id}>
+                {this.state.label &&
+                    <Form.Label style={{fontSize: '1.25rem'}}>{this.formatName(this.state.name)}</Form.Label>
+                }
+
+                {input}
+
+                {this.state.description && !this.state.hideDescription &&
+                    <p className="mt-1 text-muted" dangerouslySetInnerHTML={{ __html: this.state.description }}></p>
+                }
+
+                {this.state.readonly &&
+                    <Form.Text className="text-muted">This setting is defined as an env variable and is not editable.</Form.Text>
+                }
+            </Form.Group>
+        );
+    }
+
+    render() {
+        var input = this.generateInput();
+
+        return input;
+    }
+}
+
+if (document.getElementById('SettingsInput')) {
+    ReactDOM.render(<SettingsInput />, document.getElementById('SettingsInput'));
+}

resources/js/components/Settings/SettingsModalCard.js

@@ -1,37 +0,0 @@
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import { Card, Button } from 'react-bootstrap';
-
-export default class SettingsModalCard extends Component {
-    constructor(props) {
-        super(props)
-
-        this.state = {
-            title: this.props.title,
-            description: this.props.description,
-            toggleShow: this.props.toggleShow,
-        }
-    }
-
-    render() {
-        var title = this.state.title;
-        var description = this.state.description;
-        var toggleShow = this.state.toggleShow;
-
-        return (
-            <Card className="m-2 setting-card">
-                <Card.Body className="d-flex align-items-center">
-                    <div>
-                        <h4>{title}</h4>
-                        <p>{description}</p>
-                        <Button variant="primary" onClick={toggleShow}>Edit</Button>
-                    </div>
-                </Card.Body>
-            </Card>
-        );
-    }
-}
-
-if (document.getElementById('SettingModalCard')) {
-    ReactDOM.render(<SettingsModalCard />, document.getElementById('SettingModalCard'));
-}

resources/js/components/Settings/SettingsTabs.js

@@ -0,0 +1,177 @@
+import Axios from 'axios';
+import React, { Component } from 'react';
+import { Nav, Tab, Tabs } from 'react-bootstrap';
+import ReactDOM from 'react-dom';
+import { toast } from 'react-toastify';
+import SettingsInput from './SettingsInput';
+import ResetSettings from './tabs/ResetSettings';
+import BackupSettings from './tabs/BackupSettings';
+import GeneralSettings from './tabs/GeneralSettings';
+import GraphsSettings from './tabs/GraphsSettings';
+import HealthchecksSettings from './tabs/HealthchecksSettings';
+import NotificationsSettings from './tabs/NotificationsSettings';
+import Authentication from '../Authentication/Authentication';
+
+export default class SettingsTabs extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            tab: "General",
+            data: this.props.data
+        }
+    }
+
+    generateTabs = () => {
+        var tabs = [
+            'General',
+            'Graphs',
+            'Notifications',
+            'healthchecks.io',
+            'Reset',
+            'Backup/Restore',
+        ];
+
+        if(window.config.auth) {
+            tabs.push('Authentication');
+        }
+
+        return tabs.map((tab) => {
+            return <Tab key={tab} eventKey={tab} title={tab} />
+        });
+    }
+
+    switchTab = (tab) => {
+        this.setState({
+            tab: tab
+        });
+    }
+
+    save = (settings, name) => {
+        var url = 'api/settings/bulk?token=' + window.token;
+        var data = [];
+
+        settings.forEach(e => {
+            if(e.type !== 'btn-get') {
+                var res = {
+                    name: e.obj.name,
+                    value: e.obj.value
+                };
+                data.push(res);
+            }
+        });
+
+        data = {
+            data: data
+        };
+
+        Axios.post(url, data)
+        .then((resp) => {
+            toast.success(name + ' settings updated');
+            Axios.get('api/settings/config')
+            .then((resp) => {
+                window.config = resp.data;
+            })
+        })
+        .catch((err) => {
+            if(err.response.status == 422) {
+                toast.error('Your input was invalid');
+            } else {
+                toast.error('Something went wrong')
+            }
+        })
+    }
+
+    generateInputs = (settings, handler) => {
+        return settings.map((setting) => {
+            return <SettingsInput
+                        key={setting.obj.id}
+                        name={setting.obj.name}
+                        id={setting.obj.id}
+                        type={setting.type}
+                        value={setting.obj.value}
+                        description={setting.obj.description}
+                        handler={handler}
+                        label={setting.obj.name}
+                        description={setting.obj.description}
+                        options={setting.type == 'select' ? setting.options : []}
+                        hideDescription={setting.hideDescription ? setting.hideDescription : false}
+                        min={setting.min ? setting.min : false}
+                        max={setting.max ? setting.max : false}
+                        btnType={setting.btnType}
+                        inline={setting.inline}
+                        url={setting.url}
+                        earlyReturn={setting.earlyReturn ? true : false}
+                        classes={setting.classes ? setting.classes : ''}
+                    />
+        })
+    }
+
+    getTabContent = () => {
+        var data = this.state.data;
+
+        switch(this.state.tab) {
+            case 'General':
+                return <GeneralSettings
+                            data={data.General}
+                            generateInputs={this.generateInputs}
+                            save={this.save} />
+            case 'Graphs':
+                return <GraphsSettings
+                            data={data.Graphs}
+                            generateInputs={this.generateInputs}
+                            save={this.save} />
+            case 'Notifications':
+                return <NotificationsSettings
+                            data={data.Notifications}
+                            generateInputs={this.generateInputs}
+                            save={this.save} />
+            case 'healthchecks.io':
+                return <HealthchecksSettings
+                            data={data.healthchecks}
+                            generateInputs={this.generateInputs}
+                            save={this.save} />
+            case 'Reset':
+                return <ResetSettings
+                            data={data.healthchecks}
+                            generateInputs={this.generateInputs}
+                            save={this.save} />
+            case 'Backup/Restore':
+                return <BackupSettings
+                            data={data.healthchecks}
+                            generateInputs={this.generateInputs}
+                            save={this.save} />
+            case 'Authentication':
+                return <Authentication
+                            data={data.healthchecks}
+                            generateInputs={this.generateInputs}
+                            save={this.save} />
+        }
+    }
+
+    render() {
+        var tabs = this.generateTabs();
+        var activeTab = this.state.tab;
+        var tabContent = this.getTabContent();
+
+        return (
+            <div>
+                <Tabs
+                    variant="tabs"
+                    onSelect={(tab) => { this.switchTab(tab) }}
+                    activeKey={activeTab}
+                >
+                    {tabs}
+                </Tabs>
+
+                <div className="mt-3">
+                    {tabContent}
+                </div>
+            </div>
+        );
+    }
+}
+
+if (document.getElementById('settingsTabs')) {
+    ReactDOM.render(<SettingsTabs />, document.getElementById('settingsTabs'));
+}

resources/js/components/Settings/tabs/BackupSettings.js

@@ -0,0 +1,26 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { Modal, Button, Tab } from 'react-bootstrap';
+import Axios from 'axios';
+import DataRow from '../../Data/DataRow';
+
+export default class BackupSettings extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+        }
+    }
+
+    render() {
+        return (
+            <Tab.Content>
+                <DataRow />
+            </Tab.Content>
+        );
+    }
+}
+
+if (document.getElementById('BackupSettings')) {
+    ReactDOM.render(<BackupSettings />, document.getElementById('BackupSettings'));
+}

resources/js/components/Settings/tabs/GeneralSettings.js

@@ -0,0 +1,46 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { Modal, Button, Tab } from 'react-bootstrap';
+import Axios from 'axios';
+
+export default class GeneralSettings extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            data: this.props.data
+        }
+    }
+
+    inputHandler = (name, val) => {
+        var settings = this.state.data;
+        var i = 0;
+        settings.forEach(ele => {
+            if(ele.obj.name == name) {
+                ele.obj.value = val;
+            }
+            settings[i] = ele;
+            i++;
+        });
+        this.setState({
+            data: settings
+        });
+    }
+
+    render() {
+        var settings = this.props.generateInputs(this.state.data, this.inputHandler);
+
+        return (
+            <Tab.Content>
+                {settings}
+                <div className="mt-3">
+                    <button className="btn btn-primary" onClick={() => { this.props.save(this.state.data, 'General') }}>Save</button>
+                </div>
+            </Tab.Content>
+        );
+    }
+}
+
+if (document.getElementById('GeneralSettings')) {
+    ReactDOM.render(<GeneralSettings />, document.getElementById('GeneralSettings'));
+}

resources/js/components/Settings/tabs/GraphsSettings.js

@@ -0,0 +1,48 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { Modal, Button, Tab } from 'react-bootstrap';
+import Axios from 'axios';
+import { toast } from 'react-toastify';
+import SettingsInput from '../SettingsInput';
+
+export default class GraphsSettings extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            data: this.props.data
+        }
+    }
+
+    inputHandler = (name, val) => {
+        var settings = this.state.data;
+        var i = 0;
+        settings.forEach(ele => {
+            if(ele.obj.name == name) {
+                ele.obj.value = val;
+            }
+            settings[i] = ele;
+            i++;
+        });
+        this.setState({
+            data: settings
+        });
+    }
+
+    render() {
+        var settings = this.props.generateInputs(this.state.data, this.inputHandler);
+
+        return (
+            <Tab.Content>
+                {settings}
+                <div className="mt-3">
+                    <button className="btn btn-primary" onClick={() => { this.props.save(this.state.data, 'General') }}>Save</button>
+                </div>
+            </Tab.Content>
+        );
+    }
+}
+
+if (document.getElementById('GraphsSettings')) {
+    ReactDOM.render(<GraphsSettings />, document.getElementById('GraphsSettings'));
+}

resources/js/components/Settings/tabs/HealthchecksSettings.js

@@ -0,0 +1,48 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { Modal, Button, Tab } from 'react-bootstrap';
+import Axios from 'axios';
+import { toast } from 'react-toastify';
+import SettingsInput from '../SettingsInput';
+
+export default class HealthchecksSettings extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            data: this.props.data
+        }
+    }
+
+    inputHandler = (name, val) => {
+        var settings = this.state.data;
+        var i = 0;
+        settings.forEach(ele => {
+            if(ele.obj.name == name) {
+                ele.obj.value = val;
+            }
+            settings[i] = ele;
+            i++;
+        });
+        this.setState({
+            data: settings
+        });
+    }
+
+    render() {
+        var settings = this.props.generateInputs(this.state.data, this.inputHandler);
+
+        return (
+            <Tab.Content>
+                {settings}
+                <div className="mt-3">
+                    <button className="btn btn-primary" onClick={() => { this.props.save(this.state.data, 'healthchecks.io') }}>Save</button>
+                </div>
+            </Tab.Content>
+        );
+    }
+}
+
+if (document.getElementById('HealthchecksSettings')) {
+    ReactDOM.render(<HealthchecksSettings />, document.getElementById('HealthchecksSettings'));
+}

resources/js/components/Settings/tabs/NotificationsSettings.js

@@ -0,0 +1,46 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { Modal, Button, Tab } from 'react-bootstrap';
+import Axios from 'axios';
+
+export default class NotificationsSettings extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            data: this.props.data
+        }
+    }
+
+    inputHandler = (name, val) => {
+        var settings = this.state.data;
+        var i = 0;
+        settings.forEach(ele => {
+            if(ele.obj.name == name) {
+                ele.obj.value = val;
+            }
+            settings[i] = ele;
+            i++;
+        });
+        this.setState({
+            data: settings
+        });
+    }
+
+    render() {
+        var settings = this.props.generateInputs(this.state.data, this.inputHandler);
+
+        return (
+            <Tab.Content>
+                {settings}
+                <div className="mt-3">
+                    <button className="btn btn-primary" onClick={() => { this.props.save(this.state.data, 'Notifications') }}>Save</button>
+                </div>
+            </Tab.Content>
+        );
+    }
+}
+
+if (document.getElementById('NotificationsSettings')) {
+    ReactDOM.render(<NotificationsSettings />, document.getElementById('NotificationsSettings'));
+}

resources/js/components/Settings/tabs/ResetSettings.js

@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
-import { Modal, Button } from 'react-bootstrap';
-import SettingsModalCard from './SettingsModalCard';
+import { Button } from 'react-bootstrap';
 import Axios from 'axios';
 import { toast } from 'react-toastify';
 
@@ -10,15 +9,6 @@ export default class ResetSettings extends Component {
         super(props)
 
         this.state = {
-            show: false,
-        }
-    }
-
-    toggleShow = () => {
-        if(this.state.show) {
-            this.setState({ show: false });
-        } else {
-            this.setState({ show:true });
         }
     }
 
@@ -45,17 +35,9 @@ export default class ResetSettings extends Component {
 
         return (
             <>
-                <SettingsModalCard title={title} description="Bulk delete speedtests from the database." toggleShow={this.toggleShow} />
-                <Modal show={show} onHide={this.toggleShow}>
-                    <Modal.Header>
-                        <Modal.Title>{title}</Modal.Title>
-                    </Modal.Header>
-                    <Modal.Body>
-                        <h4>Clear all speedtests</h4>
-                        <p className="text-muted">If using SQLite, a backup of the database will be stored in the location of the current database.</p>
-                        <Button onClick={this.deleteAll} variant="danger">Delete all</Button>
-                    </Modal.Body>
-                </Modal>
+                <h4>Clear all speedtests</h4>
+                <p className="text-muted">If using SQLite, a backup of the database will be stored in the location of the current database.</p>
+                <Button onClick={this.deleteAll} variant="danger">Delete all</Button>
             </>
         );
     }

resources/js/components/SpeedtestsPage.js

@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import TestsTable from './Graphics/TestsTable';
+import Footer from './Home/Footer';
+import Navbar from './Navbar';
+
+export default class SpeedtestsPage extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+
+        }
+    }
+
+    render() {
+        return (
+            <div>
+                <Navbar />
+                <TestsTable />
+                <Footer />
+            </div>
+        );
+    }
+}
+
+if (document.getElementById('SpeedtestsPage')) {
+    ReactDOM.render(<SpeedtestsPage />, document.getElementById('SpeedtestsPage'));
+}

resources/js/index.js

@@ -8,6 +8,8 @@ import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import HomePage from './components/Home/HomePage';
 import Cookies from 'js-cookie';
+import SettingsIndex from './components/Settings/SettingsIndex';
+import SpeedtestsPage from './components/SpeedtestsPage';
 
 export default class Index extends Component {
     constructor(props) {
@@ -84,6 +86,18 @@ export default class Index extends Component {
                                         <HomePage />
                                     </div>
                                 )} />
+                                <Route exact path={window.config.base + 'speedtests'} render={(props) => (
+                                    <div>
+                                        <SpeedtestsPage />
+
+                                    </div>
+                                )} />
+                                <Route exact path={window.config.base + 'settings'} render={(props) => (
+                                    <div>
+                                        <SettingsIndex />
+
+                                    </div>
+                                )} />
                                 <Route exact path={window.config.base + "error/:code"} render={(props) => ( <ErrorPage code={props.match.params.code} /> )} />
                                 <Route render={(props) => (<ErrorPage code="404" />)} />
                         </Switch>

routes/web.php

@@ -16,20 +16,20 @@ use Illuminate\Support\Facades\Route;
 |
 */
 
-Route::get(SettingsHelper::getBase() . 'files/{path?}', function($file) {
+Route::get(SettingsHelper::getBase() . 'files/{path?}', function ($file) {
     $fileP = explode('?', $file)[0];
     $fileP = public_path() . '/' . $fileP;
-    if(file_exists($fileP)) {
+    if (file_exists($fileP)) {
         $contents = File::get($fileP);
         $mime = \GuzzleHttp\Psr7\mimetype_from_filename($fileP);
-        return Response::make(File::get($fileP), 200, [ 'Content-type' => $mime ]);
+        return Response::make(File::get($fileP), 200, ['Content-type' => $mime]);
     } else {
         abort(404);
     }
 })->where('path', '.*')
-  ->name('files');
+    ->name('files');
 
-Route::get('/{path?}', function() {
-    return view('app', [ 'title' => 'Speedtest Tracker' ]);
+Route::get('/{path?}', function () {
+    return view('app', ['title' => SettingsHelper::get('app_name')->value]);
 })->where('path', '^((?!\/api\/).)*$')
-  ->name('react');
+    ->name('react');

tests/Feature/BackupTest.php

@@ -1,22 +0,0 @@
-<?php
-
-namespace Tests\Feature;
-
-use Illuminate\Foundation\Testing\RefreshDatabase;
-use Illuminate\Foundation\Testing\WithFaker;
-use Tests\TestCase;
-
-class BackupTest extends TestCase
-{
-    /**
-     * A basic feature test example.
-     *
-     * @return void
-     */
-    public function testExample()
-    {
-        $response = $this->get('/');
-
-        $response->assertStatus(200);
-    }
-}

tests/Feature/SettingsTest.php

@@ -1,22 +0,0 @@
-<?php
-
-namespace Tests\Feature;
-
-use Illuminate\Foundation\Testing\RefreshDatabase;
-use Illuminate\Foundation\Testing\WithFaker;
-use Tests\TestCase;
-
-class SettingsTest extends TestCase
-{
-    /**
-     * A basic feature test example.
-     *
-     * @return void
-     */
-    public function testExample()
-    {
-        $response = $this->get('/');
-
-        $response->assertStatus(200);
-    }
-}