fix scheduled job injection

fix crontab not using correct php bin
update readme
2025-12-24 06:28:27 +01:00 · 2023-06-25 10:11:46 +01:00 · 2023-06-25 09:59:34 +01:00 · 2023-06-25 06:03:45 +01:00 · 2023-06-25 05:54:39 +01:00 · 2023-06-25 05:52:14 +01:00
76 changed files with 21799 additions and 237218 deletions
--- a/.github/workflows/laravel-dev.yml
+++ b/.github/workflows/laravel-dev.yml
@@ -24,6 +24,6 @@ jobs:
        with:
          context: .
          file: ./docker/Dockerfile
-          platforms: linux/amd64,linux/arm64,linux/arm/v7
+          platforms: linux/amd64,linux/arm64
          push: true
          tags: henrywhitaker3/speedtest-tracker:dev,henrywhitaker3/speedtest-tracker:dev-arm
--- a/.github/workflows/laravel-master.yml
+++ b/.github/workflows/laravel-master.yml
@@ -24,6 +24,6 @@ jobs:
        with:
          context: .
          file: ./docker/Dockerfile
-          platforms: linux/amd64,linux/arm64,linux/arm/v7
+          platforms: linux/amd64,linux/arm64
          push: true
          tags: henrywhitaker3/speedtest-tracker:latest,henrywhitaker3/speedtest-tracker:latest-arm
--- a/.github/workflows/laravel-pr.yml
+++ b/.github/workflows/laravel-pr.yml
@@ -12,7 +12,7 @@ jobs:
    steps:
    - uses: shivammathur/setup-php@b7d1d9c9a92d8d8463ce36d7f60da34d461724f8
      with:
-        php-version: '7.4'
+        php-version: '8.2'
    - uses: actions/checkout@v2
    - name: Copy .env
      run: php -r "file_exists('.env') || copy('.env.example', '.env');"
@@ -46,7 +46,7 @@ jobs:
    - name: Directory Permissions
      run: chmod -R 777 storage bootstrap/cache
    - name: Download Speedtest binary
-      run: wget https://install.speedtest.net/app/cli/ookla-speedtest-1.0.0-x86_64-linux.tgz -O speedtest.tgz && tar zxvf speedtest.tgz && mv speedtest app/Bin/
+      run: wget https://install.speedtest.net/app/cli/ookla-speedtest-1.2.0-linux-x86_64.tgz -O speedtest.tgz && tar zxvf speedtest.tgz && mv speedtest app/Bin/
    - name: Accept EULA
      env:
        DB_CONNECTION: sqlite
--- a/README.md
+++ b/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.12.2-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/actions/workflow/status/henrywhitaker3/Speedtest-Tracker/laravel-master.yml?branch=master&label=dev&logo=github&style=flat-square)](https://github.com/henrywhitaker3/Speedtest-Tracker/actions) [![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/henrywhitaker3/Speedtest-Tracker/laravel-dev.yml?branch=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.12.3-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.

--- a/Taskfile.yaml
+++ b/Taskfile.yaml
@@ -0,0 +1,15 @@
+version: "3"
+
+vars:
+  RTAG:
+    sh: head -n 25 /dev/random | md5sum | head -c 8
+
+tasks:
+  build:
+    cmds:
+      - docker build . -f docker/Dockerfile --tag henrywhitaker3/speedtest-tracker:{{ .RTAG }}
+
+  run:
+    deps: [build]
+    cmds:
+      - docker run --rm -p 8765:80 -e OOKLA_EULA_GDPR=true henrywhitaker3/speedtest-tracker:{{ .RTAG }}
--- a/app/Actions/QueueSpeedtest.php
+++ b/app/Actions/QueueSpeedtest.php
@@ -30,6 +30,6 @@ class QueueSpeedtest implements ActionInterface
    {
        SettingsHelper::loadIntegrationConfig();

-        SpeedtestJob::dispatch(false, config('integrations'), $this->speedtestProvider);
+        SpeedtestJob::dispatch($this->speedtestProvider, false, config('integrations'));
    }
 }
--- a/app/Console/Kernel.php
+++ b/app/Console/Kernel.php
@@ -32,9 +32,9 @@ class Kernel extends ConsoleKernel
        if ((bool)SettingsHelper::get('schedule_enabled')->value) {
            $schedule->job(
                new SpeedtestJob(
+                    app()->make(SpeedtestProvider::class),
                    true,
                    config('integrations'),
-                    app()->make(SpeedtestProvider::class)
                )
            )
                ->cron(SettingsHelper::get('schedule')['value'])
--- a/app/Http/Controllers/IntegrationsController.php
+++ b/app/Http/Controllers/IntegrationsController.php
@@ -15,7 +15,7 @@ class IntegrationsController extends Controller
 {
    public function __construct()
    {
-        if ((bool)SettingsHelper::get('auth')->value === true) {
+        if((bool)SettingsHelper::get('auth')->value === true) {
            $this->middleware('auth:api');
        }
    }
@@ -31,15 +31,15 @@ class IntegrationsController extends Controller

        try {
            // SettingsHelper::loadIntegrationConfig();
-            if ($method == 'success') {
+            if($method == 'success') {
                Healthcheck::success();
            }

-            if ($method == 'fail') {
+            if($method == 'fail') {
                Healthcheck::fail();
            }

-            if ($method == 'start') {
+            if($method == 'start') {
                Healthcheck::start();
            }

@@ -47,19 +47,19 @@ class IntegrationsController extends Controller
                'method' => $methodResp,
                'success' => true
            ], 200);
-        } catch (InvalidUuidStringException $e) {
+        } catch(InvalidUuidStringException $e) {
            return response()->json([
                'method' => $methodResp,
                'success' => false,
                'error' => 'Invalid UUID'
            ], 422);
-        } catch (HealthchecksUuidNotFoundException $e) {
+        } catch(HealthchecksUuidNotFoundException $e) {
            return response()->json([
                'method' => $methodResp,
                'success' => false,
                'error' => 'UUID not found'
            ], 404);
-        } catch (Exception $e) {
+        } catch(Exception $e) {
            return response()->json([
                'method' => $methodResp,
                'success' => false,
--- a/app/Http/Kernel.php
+++ b/app/Http/Kernel.php
@@ -36,7 +36,6 @@ class Kernel extends HttpKernel
            \Illuminate\View\Middleware\ShareErrorsFromSession::class,
            \App\Http\Middleware\VerifyCsrfToken::class,
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
-            \App\Http\Middleware\HandleInertiaRequests::class,
        ],

        'api' => [
--- a/app/Http/Middleware/HandleInertiaRequests.php
+++ b/app/Http/Middleware/HandleInertiaRequests.php
@@ -1,43 +0,0 @@
-<?php
-
-namespace App\Http\Middleware;
-
-use Illuminate\Http\Request;
-use Inertia\Middleware;
-
-class HandleInertiaRequests extends Middleware
-{
-    /**
-     * The root template that's loaded on the first page visit.
-     *
-     * @see https://inertiajs.com/server-side-setup#root-template
-     * @var string
-     */
-    protected $rootView = 'app';
-
-    /**
-     * Determines the current asset version.
-     *
-     * @see https://inertiajs.com/asset-versioning
-     * @param  \Illuminate\Http\Request  $request
-     * @return string|null
-     */
-    public function version(Request $request)
-    {
-        return parent::version($request);
-    }
-
-    /**
-     * Defines the props that are shared by default.
-     *
-     * @see https://inertiajs.com/shared-data
-     * @param  \Illuminate\Http\Request  $request
-     * @return array
-     */
-    public function share(Request $request)
-    {
-        return array_merge(parent::share($request), [
-            //
-        ]);
-    }
-}
--- a/app/Jobs/SpeedtestJob.php
+++ b/app/Jobs/SpeedtestJob.php
@@ -43,7 +43,7 @@ class SpeedtestJob implements ShouldQueue
     *
     * @return void
     */
-    public function __construct($scheduled = true, $config = [], SpeedtestProvider $speedtestProvider)
+    public function __construct(SpeedtestProvider $speedtestProvider, $scheduled = true, $config = [])
    {
        $this->scheduled = $scheduled;
        $this->config = $config;
--- a/changelog.json
+++ b/changelog.json
@@ -1,4 +1,14 @@
 {
+    "1.12.3": [
+        {
+            "description": "Updated to PHP 8.2",
+            "link": ""
+        },
+        {
+            "description": "Updated speedtest cli to 1.2.0 (#1119)",
+            "link": "https://github.com/henrywhitaker3/Speedtest-Tracker/issues/1119"
+        }
+    ],
    "1.12.2": [
        {
            "description": "Fixed a bug where the latest X days widget would not update for the failure graph",
--- a/composer.json
+++ b/composer.json
@@ -8,7 +8,7 @@
    ],
    "license": "MIT",
    "require": {
-        "php": "^7.2.5",
+        "php": "^8",
        "doctrine/dbal": "^2.10",
        "dragonmantank/cron-expression": "^3",
        "fideloper/proxy": "^4.2",
@@ -16,7 +16,6 @@
        "guzzlehttp/guzzle": "^7.0.1",
        "henrywhitaker3/healthchecks-io": "^1.0",
        "henrywhitaker3/laravel-actions": "^1.0",
-        "inertiajs/inertia-laravel": "^0.4.5",
        "influxdata/influxdb-client-php": "^1.12",
        "influxdb/influxdb-php": "^1.15",
        "laravel-notification-channels/telegram": "^0.5.0",
@@ -24,7 +23,6 @@
        "laravel/slack-notification-channel": "^2.0",
        "laravel/tinker": "^2.0",
        "laravel/ui": "^3.0",
-        "tightenco/ziggy": "^1.4",
        "tymon/jwt-auth": "^1.0"
    },
    "require-dev": {
--- a/composer.lock
+++ b/composer.lock
--- a/config/speedtest.php
+++ b/config/speedtest.php
@@ -7,7 +7,7 @@ return [
    |--------------------------------------------------------------------------
    */

-    'version' => '1.12.2',
+    'version' => '1.12.3',

    /*
    |--------------------------------------------------------------------------
--- a/docker/Dockerfile
+++ b/docker/Dockerfile
@@ -3,6 +3,8 @@ LABEL maintainer=henrywhitaker3@outlook.com

 ENV arch='x86_64'

+RUN apk add php82-tokenizer
+
 COPY docker/conf/ /
 COPY . /site

--- a/docker/arm.Dockerfile
+++ b/docker/arm.Dockerfile
@@ -3,6 +3,8 @@ LABEL maintainer=henrywhitaker3@outlook.com

 ENV arch='arm'

+RUN apk add php82-tokenizer
+
 COPY docker/conf/ /
 COPY . /site

--- a/docker/conf/defaults/crontab
+++ b/docker/conf/defaults/crontab
@@ -6,5 +6,5 @@
 0       3       *       *       6       run-parts /etc/periodic/weekly
 0       5       1       *       *       run-parts /etc/periodic/monthly
 # speedtest cron
-* * * * * php /config/www/artisan schedule:run >> /config/log/speedtest/cron.log
-# */5 * * * * php /config/www/artisan queue:retry all >> /config/log/speedtest.cron.log
+* * * * * php82 /config/www/artisan schedule:run >> /config/log/speedtest/cron.log
+# */5 * * * * php82 /config/www/artisan queue:retry all >> /config/log/speedtest.cron.log
--- a/docker/conf/defaults/nginx/site-confs/default.conf.sample
+++ b/docker/conf/defaults/nginx/site-confs/default.conf.sample
--- a/docker/conf/etc/cont-init.d/50-speedtest
+++ b/docker/conf/etc/cont-init.d/50-speedtest
@@ -11,6 +11,18 @@ function eulaError()
    exit 1
 }

+function downloadSpeedtestCli()
+{
+    if [ $(uname -m) == "x86_64" ]; then
+        wget https://install.speedtest.net/app/cli/ookla-speedtest-1.2.0-linux-x86_64.tgz -O speedtest.tgz > /dev/null
+    else
+        wget https://install.speedtest.net/app/cli/ookla-speedtest-1.2.0-linux-aarch64.tgz -O speedtest.tgz > /dev/null
+    fi
+
+    tar zxvf speedtest.tgz > /dev/null
+    cp speedtest /site/app/Bin/
+}
+
 # Do Ookla stuff
 if [ -z ${OOKLA_EULA_GDPR+x} ]; then
    eulaError
@@ -23,24 +35,27 @@ else
        echo "Ookla GDPR and EULA accepted. Downloading Speedtest CLI."
        cd /tmp

-        if [ $(uname -m) == "x86_64" ]; then
-            wget https://install.speedtest.net/app/cli/ookla-speedtest-1.0.0-x86_64-linux.tgz -O speedtest.tgz > /dev/null
-        else
-            wget https://install.speedtest.net/app/cli/ookla-speedtest-1.0.0-arm-linux.tgz -O speedtest.tgz > /dev/null
-        fi
-
-        tar zxvf speedtest.tgz > /dev/null
-        cp speedtest /site/app/Bin/
+        downloadSpeedtestCli

        chmod +x /site/artisan
        HOME=/config && s6-setuidgid abc /site/app/Bin/speedtest --accept-license --accept-gdpr > /dev/null
        HOME=/root
    else
+        /config/www/app/Bin/speedtest --version | grep -E "1\.2\.0"
+        rc=$?
+
+        if [ $rc -ne 0 ]; then
+            downloadSpeedtestCli
+        fi
+
        HOME=/config && s6-setuidgid abc /site/app/Bin/speedtest --accept-license --accept-gdpr > /dev/null
        HOME=/root
    fi
 fi

+# Copy latest nginx config
+cp /defaults/nginx/nginx.conf.sample /config/nginx/nginx.conf
+
 # Copy site files to /config
 echo "Copying latest site files to config"
 cp -rfT /site/ /config/www/
@@ -69,19 +84,19 @@ fi

 echo 'Updating packages'
 apk add composer
-cd /config/www && composer install && echo date > /config/www/.composer-time
+cd /config/www && php82 /usr/bin/composer.phar install && echo date > /config/www/.composer-time

 sed "s,DB_DATABASE=.*,DB_DATABASE=/config/speed.db," -i.bak /config/www/.env

 echo "Running database migrations"
-php /config/www/artisan migrate
+php82 /config/www/artisan migrate

 # Check app key exists
 if grep -E "APP_KEY=[0-9A-Za-z:+\/=]{1,}" /config/www/.env > /dev/null; then
    echo "App key exists"
 else
    echo "Generating app key"
-    php /config/www/artisan key:generate
+    php82 /config/www/artisan key:generate
 fi

 # Check JWT secret exists
@@ -89,7 +104,7 @@ if grep -E "JWT_SECRET=[0-9A-Za-z:+\/=]{1,}" /config/www/.env > /dev/null ; then
    echo "JWT secret exists"
 else
    echo "Generating JWT secret"
-    php /config/www/artisan jwt:secret
+    php82 /config/www/artisan jwt:secret
 fi

 if [ -z ${SLACK_WEBHOOK+x} ]; then
@@ -98,7 +113,7 @@ if [ -z ${SLACK_WEBHOOK+x} ]; then
 else
    echo "Slack webhook set, updating db"
    sed "s,SLACK_WEBHOOK=.*,SLACK_WEBHOOK=$SLACK_WEBHOOK," -i.bak /config/www/.env
-    php /config/www/artisan speedtest:slack $SLACK_WEBHOOK
+    php82 /config/www/artisan speedtest:slack $SLACK_WEBHOOK
 fi

 if [ -z ${TELEGRAM_BOT_TOKEN+x} ] && [ -z ${TELEGRAM_CHAT_ID+x} ]; then
@@ -109,7 +124,7 @@ else
    echo "Telegram chat id and bot token set, updating .env"
    sed "s,TELEGRAM_BOT_TOKEN=.*,TELEGRAM_BOT_TOKEN=$TELEGRAM_BOT_TOKEN," -i.bak /config/www/.env
    sed "s,TELEGRAM_CHAT_ID=.*,TELEGRAM_CHAT_ID=$TELEGRAM_CHAT_ID," -i.bak /config/www/.env
-    php /config/www/artisan speedtest:telegram --chat=$TELEGRAM_CHAT_ID --bot=$TELEGRAM_BOT_TOKEN
+    php82 /config/www/artisan speedtest:telegram --chat=$TELEGRAM_CHAT_ID --bot=$TELEGRAM_BOT_TOKEN
 fi

 if [ -z ${BASE_PATH+x} ]; then
@@ -122,19 +137,19 @@ fi

 if [ -z ${AUTH+x} ]; then
    echo "AUTH variable not set. Disabling authentication"
-    php /config/www/artisan speedtest:auth --disable
+    php82 /config/www/artisan speedtest:auth --disable
 else
    if [ $AUTH == 'true' ]; then
        echo "AUTH variable set. Enabling authentication"
-        php /config/www/artisan speedtest:auth --enable
+        php82 /config/www/artisan speedtest:auth --enable
    else
        echo "AUTH variable set, but not to 'true'. Disabling authentication"
-        php /config/www/artisan speedtest:auth --disable
+        php82 /config/www/artisan speedtest:auth --disable
    fi
 fi

 echo "Clearing old jobs from queue"
-php /config/www/artisan queue:clear
+php82 /config/www/artisan queue:clear

 mkdir -p /config/log/speedtest

--- a/docker/conf/etc/php82/php-fpm.d/www.conf
+++ b/docker/conf/etc/php82/php-fpm.d/www.conf
--- a/docker/conf/etc/services.d/speedtest/run
+++ b/docker/conf/etc/services.d/speedtest/run
@@ -1,3 +1,3 @@
 #!/usr/bin/with-contenv bash

-exec s6-setuidgid abc php /config/www/artisan queue:work --timeout=120 >> /config/log/speedtest/queue.log
+exec s6-setuidgid abc php82 /config/www/artisan queue:work --timeout=120 >> /config/log/speedtest/queue.log
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -2,32 +2,38 @@
    "private": true,
    "scripts": {
        "dev": "npm run development",
-        "development": "mix",
-        "watch": "mix watch",
-        "watch-poll": "mix watch -- --watch-options-poll=1000",
-        "hot": "mix watch --hot",
+        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "watch": "npm run development -- --watch",
+        "watch-poll": "npm run watch -- --watch-poll",
+        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
-        "production": "mix --production"
+        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
-        "autoprefixer": "^10.4.0",
+        "@babel/preset-react": "^7.12.13",
        "axios": "^0.21",
-        "laravel-mix": "^6.0.27",
+        "bootstrap": "^4.6.0",
+        "cross-env": "^7.0",
+        "jquery": "^3.5",
+        "laravel-mix": "^5.0.9",
        "lodash": "^4.17.21",
-        "resolve-url-loader": "^4.0.0",
+        "popper.js": "^1.12",
+        "react": "^17.0.1",
+        "react-dom": "^17.0.1",
+        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.8",
-        "sass-loader": "^10.1.1",
-        "tailwindcss": "^2.0.1",
-        "vue": "^2.5.17",
-        "vue-loader": "^15.9.8",
-        "vue-template-compiler": "^2.6.10"
+        "sass-loader": "^10.1.1"
    },
    "dependencies": {
        "@babel/plugin-proposal-class-properties": "^7.13.0",
-        "@inertiajs/inertia": "^0.10.1",
-        "@inertiajs/inertia-vue": "^0.7.2",
-        "@inertiajs/progress": "^0.2.6",
-        "dayjs": "^1.10.7",
-        "laravel-mix-tailwind": "^0.1.2"
+        "chart.js": "^2.9.4",
+        "csv-file-validator": "^1.10.1",
+        "js-cookie": "^2.2.1",
+        "react-beautiful-dnd": "^13.1.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": "^7.0.3"
    }
 }
--- a/public/css/app.css
+++ b/public/css/app.css
--- a/public/js/app.js
+++ b/public/js/app.js
--- a/public/js/app.js.LICENSE.txt
+++ b/public/js/app.js.LICENSE.txt
@@ -0,0 +1,138 @@
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+
+/* @license
+Papa Parse
+v5.3.0
+https://github.com/mholt/PapaParse
+License: MIT
+*/
+
+/*!
+  * Bootstrap v4.6.0 (https://getbootstrap.com/)
+  * Copyright 2011-2021 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
+  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+  */
+
+/*!
+  Copyright (c) 2017 Jed Watson.
+  Licensed under the MIT License (MIT), see
+  http://jedwatson.github.io/classnames
+*/
+
+/*!
+ * Chart.js v2.9.4
+ * https://www.chartjs.org
+ * (c) 2020 Chart.js Contributors
+ * Released under the MIT License
+ */
+
+/*!
+ * JavaScript Cookie v2.2.1
+ * https://github.com/js-cookie/js-cookie
+ *
+ * Copyright 2006, 2015 Klaus Hartl & Fagner Brack
+ * Released under the MIT license
+ */
+
+/*!
+ * Sizzle CSS Selector Engine v2.3.5
+ * https://sizzlejs.com/
+ *
+ * Copyright JS Foundation and other contributors
+ * Released under the MIT license
+ * https://js.foundation/
+ *
+ * Date: 2020-03-14
+ */
+
+/*!
+ * jQuery JavaScript Library v3.5.1
+ * https://jquery.com/
+ *
+ * Includes Sizzle.js
+ * https://sizzlejs.com/
+ *
+ * Copyright JS Foundation and other contributors
+ * Released under the MIT license
+ * https://jquery.org/license
+ *
+ * Date: 2020-05-04T22:49Z
+ */
+
+/**
+ * @license
+ * Lodash <https://lodash.com/>
+ * Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
+ * Released under MIT license <https://lodash.com/license>
+ * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
+ * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+ */
+
+/** @license React v0.20.1
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v17.0.1
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v17.0.1
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**!
+ * @fileOverview Kickass library to create and place poppers near their reference elements.
+ * @version 1.16.1
+ * @license
+ * Copyright (c) 2016 Federico Zivolo and contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+//! moment.js
+
+//! moment.js locale configuration
--- a/public/js/bootstrap.min.js
+++ b/public/js/bootstrap.min.js
--- a/public/js/jquery.min.js
+++ b/public/js/jquery.min.js
--- a/public/js/popper.min.js
+++ b/public/js/popper.min.js
--- a/public/js/resources_js_Pages_Home_vue.js
+++ b/public/js/resources_js_Pages_Home_vue.js
@@ -1,227 +0,0 @@
-"use strict";
-(self["webpackChunk"] = self["webpackChunk"] || []).push([["resources_js_Pages_Home_vue"],{
-
-/***/ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5[0].rules[0].use[0]!./node_modules/vue-loader/lib/index.js??vue-loader-options!./resources/js/Pages/Home.vue?vue&type=script&lang=js&":
-/*!******************************************************************************************************************************************************************************************************!*\
-  !*** ./node_modules/babel-loader/lib/index.js??clonedRuleSet-5[0].rules[0].use[0]!./node_modules/vue-loader/lib/index.js??vue-loader-options!./resources/js/Pages/Home.vue?vue&type=script&lang=js& ***!
-  \******************************************************************************************************************************************************************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
-/* harmony export */ });
-//
-//
-//
-//
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({});
-
-/***/ }),
-
-/***/ "./resources/js/Pages/Home.vue":
-/*!*************************************!*\
-  !*** ./resources/js/Pages/Home.vue ***!
-  \*************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
-/* harmony export */ });
-/* harmony import */ var _Home_vue_vue_type_template_id_6a63e488___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Home.vue?vue&type=template&id=6a63e488& */ "./resources/js/Pages/Home.vue?vue&type=template&id=6a63e488&");
-/* harmony import */ var _Home_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Home.vue?vue&type=script&lang=js& */ "./resources/js/Pages/Home.vue?vue&type=script&lang=js&");
-/* harmony import */ var _node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! !../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js */ "./node_modules/vue-loader/lib/runtime/componentNormalizer.js");
-
-
-
-
-
-/* normalize component */
-;
-var component = (0,_node_modules_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__["default"])(
-  _Home_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__["default"],
-  _Home_vue_vue_type_template_id_6a63e488___WEBPACK_IMPORTED_MODULE_0__.render,
-  _Home_vue_vue_type_template_id_6a63e488___WEBPACK_IMPORTED_MODULE_0__.staticRenderFns,
-  false,
-  null,
-  null,
-  null
-  
-)
-
-/* hot reload */
-if (false) { var api; }
-component.options.__file = "resources/js/Pages/Home.vue"
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (component.exports);
-
-/***/ }),
-
-/***/ "./resources/js/Pages/Home.vue?vue&type=script&lang=js&":
-/*!**************************************************************!*\
-  !*** ./resources/js/Pages/Home.vue?vue&type=script&lang=js& ***!
-  \**************************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
-/* harmony export */ });
-/* harmony import */ var _node_modules_babel_loader_lib_index_js_clonedRuleSet_5_0_rules_0_use_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Home_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-5[0].rules[0].use[0]!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Home.vue?vue&type=script&lang=js& */ "./node_modules/babel-loader/lib/index.js??clonedRuleSet-5[0].rules[0].use[0]!./node_modules/vue-loader/lib/index.js??vue-loader-options!./resources/js/Pages/Home.vue?vue&type=script&lang=js&");
- /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_babel_loader_lib_index_js_clonedRuleSet_5_0_rules_0_use_0_node_modules_vue_loader_lib_index_js_vue_loader_options_Home_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__["default"]); 
-
-/***/ }),
-
-/***/ "./resources/js/Pages/Home.vue?vue&type=template&id=6a63e488&":
-/*!********************************************************************!*\
-  !*** ./resources/js/Pages/Home.vue?vue&type=template&id=6a63e488& ***!
-  \********************************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "render": () => (/* reexport safe */ _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_Home_vue_vue_type_template_id_6a63e488___WEBPACK_IMPORTED_MODULE_0__.render),
-/* harmony export */   "staticRenderFns": () => (/* reexport safe */ _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_Home_vue_vue_type_template_id_6a63e488___WEBPACK_IMPORTED_MODULE_0__.staticRenderFns)
-/* harmony export */ });
-/* harmony import */ var _node_modules_vue_loader_lib_loaders_templateLoader_js_vue_loader_options_node_modules_vue_loader_lib_index_js_vue_loader_options_Home_vue_vue_type_template_id_6a63e488___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../../../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Home.vue?vue&type=template&id=6a63e488& */ "./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib/index.js??vue-loader-options!./resources/js/Pages/Home.vue?vue&type=template&id=6a63e488&");
-
-
-/***/ }),
-
-/***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib/index.js??vue-loader-options!./resources/js/Pages/Home.vue?vue&type=template&id=6a63e488&":
-/*!***********************************************************************************************************************************************************************************************************!*\
-  !*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib/index.js??vue-loader-options!./resources/js/Pages/Home.vue?vue&type=template&id=6a63e488& ***!
-  \***********************************************************************************************************************************************************************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "render": () => (/* binding */ render),
-/* harmony export */   "staticRenderFns": () => (/* binding */ staticRenderFns)
-/* harmony export */ });
-var render = function () {
-  var _vm = this
-  var _h = _vm.$createElement
-  var _c = _vm._self._c || _h
-  return _c("div", [_vm._v("Hello")])
-}
-var staticRenderFns = []
-render._withStripped = true
-
-
-
-/***/ }),
-
-/***/ "./node_modules/vue-loader/lib/runtime/componentNormalizer.js":
-/*!********************************************************************!*\
-  !*** ./node_modules/vue-loader/lib/runtime/componentNormalizer.js ***!
-  \********************************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "default": () => (/* binding */ normalizeComponent)
-/* harmony export */ });
-/* globals __VUE_SSR_CONTEXT__ */
-
-// IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
-// This module is a runtime utility for cleaner component module output and will
-// be included in the final webpack user bundle.
-
-function normalizeComponent (
-  scriptExports,
-  render,
-  staticRenderFns,
-  functionalTemplate,
-  injectStyles,
-  scopeId,
-  moduleIdentifier, /* server only */
-  shadowMode /* vue-cli only */
-) {
-  // Vue.extend constructor export interop
-  var options = typeof scriptExports === 'function'
-    ? scriptExports.options
-    : scriptExports
-
-  // render functions
-  if (render) {
-    options.render = render
-    options.staticRenderFns = staticRenderFns
-    options._compiled = true
-  }
-
-  // functional template
-  if (functionalTemplate) {
-    options.functional = true
-  }
-
-  // scopedId
-  if (scopeId) {
-    options._scopeId = 'data-v-' + scopeId
-  }
-
-  var hook
-  if (moduleIdentifier) { // server build
-    hook = function (context) {
-      // 2.3 injection
-      context =
-        context || // cached call
-        (this.$vnode && this.$vnode.ssrContext) || // stateful
-        (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
-      // 2.2 with runInNewContext: true
-      if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
-        context = __VUE_SSR_CONTEXT__
-      }
-      // inject component styles
-      if (injectStyles) {
-        injectStyles.call(this, context)
-      }
-      // register component module identifier for async chunk inferrence
-      if (context && context._registeredComponents) {
-        context._registeredComponents.add(moduleIdentifier)
-      }
-    }
-    // used by ssr in case component is cached and beforeCreate
-    // never gets called
-    options._ssrRegister = hook
-  } else if (injectStyles) {
-    hook = shadowMode
-      ? function () {
-        injectStyles.call(
-          this,
-          (options.functional ? this.parent : this).$root.$options.shadowRoot
-        )
-      }
-      : injectStyles
-  }
-
-  if (hook) {
-    if (options.functional) {
-      // for template-only hot-reload because in that case the render fn doesn't
-      // go through the normalizer
-      options._injectStyles = hook
-      // register for functional component in vue file
-      var originalRender = options.render
-      options.render = function renderWithStyleInjection (h, context) {
-        hook.call(context)
-        return originalRender(h, context)
-      }
-    } else {
-      // inject component registration as beforeCreate hook
-      var existing = options.beforeCreate
-      options.beforeCreate = existing
-        ? [].concat(existing, hook)
-        : [hook]
-    }
-  }
-
-  return {
-    exports: scriptExports,
-    options: options
-  }
-}
-
-
-/***/ })
-
-}]);
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -1,4 +1,4 @@
 {
-    "/js/app.js": "/js/app.js?id=3f160e1be04f20c83775",
-    "/css/app.css": "/css/app.css?id=56fcadeb3d7b8e0e21d6"
+    "/js/app.js": "/js/app.js",
+    "/css/app.css": "/css/app.css"
 }
--- a/resources/js/Pages/Home.vue
+++ b/resources/js/Pages/Home.vue
@@ -1,12 +0,0 @@
-<template>
-    <div>
-        Hello
-        <!-- <div>{{ relativeDate('2021-10-15 00:00:00') }}</div> -->
-    </div>
-</template>
-
-<script>
-export default {
-
-}
-</script>
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -1,23 +1,15 @@
-require("./bootstrap");
+/**
+ * First we will load all of this project's JavaScript dependencies which
+ * includes React and other helpers. It's a great starting point while
+ * building robust, powerful web applications using React + Laravel.
+ */

-// Import modules...
-import Vue from 'vue';
-import { createInertiaApp } from '@inertiajs/inertia-vue';
+require('./bootstrap');

-import { InertiaProgress } from "@inertiajs/progress";
-import dayjs from 'dayjs';
-import relativeTime from 'dayjs/plugin/relativeTime';
-dayjs.extend(relativeTime);
+/**
+ * Next, we will create a fresh React component instance and attach it to
+ * the page. Then, you may begin adding components to this application
+ * or customize the JavaScript scaffolding to fit your unique needs.
+ */

-Vue.use(InertiaProgress);
-
-createInertiaApp({
-    resolve: name => require(`./Pages/${name}`),
-    setup({ el, App, props }) {
-        new Vue({
-            render: h => h(App, props),
-        }).$mount(el)
-    },
-});
-
-InertiaProgress.init({ color: "#4B5563" });
+require('./index');
--- a/resources/js/bootstrap.js
+++ b/resources/js/bootstrap.js
@@ -1,5 +1,18 @@
 window._ = require('lodash');

+/**
+ * We'll load jQuery and the Bootstrap jQuery plugin which provides support
+ * for JavaScript based Bootstrap features such as modals and tabs. This
+ * code may be modified to fit the specific needs of your application.
+ */
+
+try {
+    window.Popper = require('popper.js').default;
+    window.$ = window.jQuery = require('jquery');
+
+    require('bootstrap');
+} catch (e) {}
+
 /**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
@@ -24,5 +37,5 @@ window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 //     broadcaster: 'pusher',
 //     key: process.env.MIX_PUSHER_APP_KEY,
 //     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
-//     forceTLS: true
+//     encrypted: true
 // });
--- a/resources/js/components/Authentication/Authentication.js
+++ b/resources/js/components/Authentication/Authentication.js
@@ -0,0 +1,70 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { Row, Col} from 'react-bootstrap';
+import SessionsTable from './SessionsTable';
+import ResetPassword from './ResetPassword';
+
+export default class Authentication extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            showCollapse: false,
+            showModal: false
+        }
+    }
+
+    toggleCollapse = () => {
+        if(this.state.showCollapse) {
+            this.setState({
+                showCollapse: false
+            });
+        } else {
+            this.setState({
+                showCollapse: true
+            });
+        }
+    }
+
+    toggleModal = () => {
+        if(this.state.showModal) {
+            this.setState({
+                showModal: false
+            });
+        } else {
+            this.setState({
+                showModal: true
+            });
+        }
+    }
+
+    render() {
+        var showCollapse = this.state.showCollapse;
+        var showModal = this.state.showModal;
+
+        if( (window.config.auth == true && window.authenticated == true)) {
+            return (
+                <div>
+                    <Row>
+                        <Col sm={{ span: 12 }} className="text-center">
+                            <ResetPassword />
+                        </Col>
+                    </Row>
+                    <Row>
+                        <Col sm={{ span: 12 }} className="text-center">
+                            <SessionsTable />
+                        </Col>
+                    </Row>
+                </div>
+            );
+        } else {
+            return (
+                <></>
+            );
+        }
+    }
+}
+
+if (document.getElementById('Authentication')) {
+    ReactDOM.render(<Authentication />, document.getElementById('Authentication'));
+}
--- a/resources/js/components/Authentication/ResetPassword.js
+++ b/resources/js/components/Authentication/ResetPassword.js
@@ -0,0 +1,111 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { Container, Row, Col, Collapse, Button, Modal, Form } from 'react-bootstrap';
+import SessionsTable from './SessionsTable';
+import Axios from 'axios';
+import { toast } from 'react-toastify';
+
+export default class ResetPassword extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            showModal: false,
+            currentPassword: '',
+            newPassword: '',
+            newPasswordConfirmation: '',
+            logoutDevices: false
+        }
+    }
+
+    toggleModal = () => {
+        if(this.state.showModal) {
+            this.setState({
+                showModal: false
+            });
+        } else {
+            this.setState({
+                showModal: true
+            });
+        }
+    }
+
+    updateTextField = (e) => {
+        this.setState({
+            [e.target.id]: e.target.value
+        })
+    }
+
+    updateCheckbox = (e) => {
+        this.setState({
+            [e.target.id]: e.target.checked
+        });
+    }
+
+    changePassword = (e) => {
+        e.preventDefault();
+
+        var data = {
+            currentPassword: this.state.currentPassword,
+            newPassword: this.state.newPassword,
+            newPassword_confirmation: this.state.newPasswordConfirmation,
+            logoutDevices: this.state.logoutDevices
+        }
+
+        var url = 'api/auth/change-password?token=' + window.token;
+        Axios.post(url, data)
+        .then((resp) => {
+            toast.success('Password updated');
+            this.toggleModal();
+            if(this.state.logoutDevices == true) {
+                location.reload(true);
+            }
+        })
+        .catch((err) => {
+            if(err.response) {
+                for(var key in err.response.data.error) {
+                    toast.error(err.response.data.error[key][0]);
+                }
+            }
+        })
+    }
+
+    render() {
+        var showModal = this.state.showModal;
+
+        return (
+            <div>
+                <Button variant="primary" onClick={this.toggleModal} className="mb-3">Change password</Button>
+                <Modal show={showModal} onHide={this.toggleModal}>
+                    <Modal.Header closeButton>
+                        <Modal.Title>Change password</Modal.Title>
+                    </Modal.Header>
+                    <Modal.Body>
+                        <Form onSubmit={this.changePassword}>
+                            <Form.Group controlId="currentPassword">
+                                <Form.Label>Current password</Form.Label>
+                                <Form.Control type="password" onInput={this.updateTextField} required />
+                            </Form.Group>
+                            <Form.Group controlId="newPassword">
+                                <Form.Label>New Password</Form.Label>
+                                <Form.Control type="password" onInput={this.updateTextField} required />
+                            </Form.Group>
+                            <Form.Group controlId="newPasswordConfirmation">
+                                <Form.Label>Confirm New Password</Form.Label>
+                                <Form.Control type="password" onInput={this.updateTextField} required />
+                            </Form.Group>
+                            <Button variant="primary" type="submit" className="d-inline-block">Change password</Button>
+                            <Form.Group controlId="logoutDevices" className="d-inline-block ml-2">
+                                <Form.Check type="checkbox" label="Log everywhere out" onInput={this.updateCheckbox} />
+                            </Form.Group>
+                        </Form>
+                    </Modal.Body>
+                </Modal>
+            </div>
+        );
+    }
+}
+
+if (document.getElementById('ResetPassword')) {
+    ReactDOM.render(<ResetPassword />, document.getElementById('ResetPassword'));
+}
--- a/resources/js/components/Authentication/SessionsTable.js
+++ b/resources/js/components/Authentication/SessionsTable.js
@@ -0,0 +1,67 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { Container, Row, Col, Table } from 'react-bootstrap';
+import Axios from 'axios';
+
+export default class SessionsTable extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            sessions: []
+        }
+    }
+
+    componentDidMount() {
+        this.getSessions();
+    }
+
+    getSessions = () => {
+        var url = 'api/auth/sessions?token=' + window.token;
+
+        Axios.get(url)
+        .then((resp) => {
+            this.setState({
+                sessions: resp.data.response
+            })
+        })
+    }
+
+    render() {
+        var sessions = this.state.sessions;
+
+        return (
+            <Container className="mb-4">
+                <Row>
+                    <Col sm={{ span: 12 }} className="mb-3 text-center">
+                        <h5>Login Sessions</h5>
+                        <Table responsive>
+                            <thead>
+                                <tr>
+                                    <th>IP</th>
+                                    <th>Expires</th>
+                                    <th>Created at</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {sessions.map((e,i) => {
+                                    return(
+                                        <tr key={i}>
+                                            <td>{e.ip}</td>
+                                            <td>{new Date(e.expires * 1000).toLocaleDateString() + ' ' + new Date(e.expires * 1000).toLocaleTimeString()}</td>
+                                            <td>{e.created_at}</td>
+                                        </tr>
+                                    )
+                                })}
+                            </tbody>
+                        </Table>
+                    </Col>
+                </Row>
+            </Container>
+        );
+    }
+}
+
+if (document.getElementById('SessionsTable')) {
+    ReactDOM.render(<SessionsTable />, document.getElementById('SessionsTable'));
+}
--- a/resources/js/components/Data/Backup.js
+++ b/resources/js/components/Data/Backup.js
@@ -0,0 +1,42 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { Button, Dropdown, DropdownButton } from 'react-bootstrap';
+import { toast } from 'react-toastify';
+import Axios from 'axios';
+
+export default class Backup extends Component {
+    backup = (format) => {
+        var url = 'api/backup?format=' + format + '&token=' + window.token;
+
+        toast.info('Your backup has started downloading...');
+
+        Axios.get(url, {
+            responseType: 'blob'
+        })
+        .then((resp) => {
+            var a = document.createElement('a');
+            a.href = url;
+            a.download = "";
+            document.body.appendChild(a);
+            a.click();
+            a.remove();
+            toast.success('Backup downloaded');
+        })
+        .catch((err) => {
+            console.log(err);
+        })
+    }
+
+    render() {
+        return (
+            <DropdownButton title="Backup" variant="primary" className="m-2 d-inline-block">
+                <Dropdown.Item href="#" onClick={() => { this.backup('json') }}>JSON</Dropdown.Item>
+                <Dropdown.Item href="#" onClick={() => { this.backup('csv') }}>CSV</Dropdown.Item>
+            </DropdownButton>
+        );
+    }
+}
+
+if (document.getElementById('Backup')) {
+    ReactDOM.render(<Backup />, document.getElementById('Backup'));
+}
--- a/resources/js/components/Data/Changelog.js
+++ b/resources/js/components/Data/Changelog.js
@@ -0,0 +1,140 @@
+import React, { Component, version } from 'react';
+import ReactDOM from 'react-dom';
+import Axios from 'axios';
+import { Modal, Collapse, Button } from 'react-bootstrap';
+
+export default class Changelog extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            changelog: {},
+            modal: false,
+            loading: true,
+            hidden: false,
+        }
+    }
+
+    componentDidMount = () => {
+        if( (window.config.auth == true && window.authenticated == true) || window.config.auth == false) {
+            this.getChangelog();
+        }
+    }
+
+    getChangelog = () => {
+        Axios.get('api/update/changelog?token=' + window.token)
+        .then((resp) => {
+            this.setState({
+                changelog: resp.data.data,
+                loading: false
+            });
+        })
+    }
+
+    showModal = () => {
+        this.setState({
+            modal: true,
+        });
+    }
+
+    hideModal = () => {
+        this.setState({
+            modal: false,
+        });
+    }
+
+    toggleHidden = () => {
+        var hidden = this.state.hidden;
+        if(hidden) {
+            this.setState({
+                hidden: false
+            });
+        } else {
+            this.setState({
+                hidden: true
+            });
+        }
+    }
+
+    versionList = (key, data) => {
+        return (
+            <div key={key}>
+                <h5>Version: {key}</h5>
+                <ul>
+                    {data.map((e,i) => {
+                        if(e.link == '') {
+                            return <li key={key.split('.').join() + i}>{e.description}</li>
+                        } else {
+                            return <li key={key + i}><a href={e.link} target="_blank" rel="noopener noreferer">{e.description}</a></li>
+                        }
+                    })}
+                </ul>
+            </div>
+        );
+    }
+
+    makeChangelog() {
+        var changelog = this.state.changelog;
+        var versionsVis = [];
+        var versionsHid = [];
+
+        var i = 0;
+        for(var key in changelog) {
+            if(i <= 5) {
+                versionsVis.push(this.versionList(key, changelog[key]));
+            } else {
+                versionsHid.push(this.versionList(key, changelog[key]));
+            }
+            i++;
+        }
+
+        return {
+            visible: versionsVis,
+            hidden: versionsHid
+        };
+    }
+
+    render() {
+        var show = this.state.modal;
+        var loading = this.state.loading;
+        var showHidden = this.state.hidden;
+
+        if(loading) {
+            return <></>
+        } else {
+            var changelog = this.makeChangelog();
+            return (
+                <div className="text-muted ml-1 d-inline-block">
+                    <i className="ti-link mouse" onClick={this.showModal} />
+
+                    <Modal show={show} onHide={this.hideModal} animation={true}>
+                        <Modal.Body>
+                            <h3>Changelog:</h3>
+                            {changelog.visible}
+                            {changelog.hidden.length > 5 &&
+                                <>
+                                    <Collapse in={showHidden}>
+                                        <div>
+                                            {changelog.hidden}
+                                        </div>
+                                    </Collapse>
+                                    <div className="w-100 text-center">
+                                    {showHidden ?
+                                        <Button variant="primary" className="mx-auto mouse" onClick={this.toggleHidden}>Show less</Button>
+                                    :
+                                        <Button variant="primary" className="mx-auto mouse" onClick={this.toggleHidden}>Show more</Button>
+                                    }
+                                    </div>
+                                </>
+                            }
+                        </Modal.Body>
+                    </Modal>
+                </div>
+            );
+        }
+    }
+}
+
+if (document.getElementById('Changelog')) {
+    ReactDOM.render(<Changelog />, document.getElementById('Changelog'));
+}
--- a/resources/js/components/Data/DataRow.js
+++ b/resources/js/components/Data/DataRow.js
@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { Container } from 'react-bootstrap';
+import { Row } from 'react-bootstrap';
+import { Col } from 'react-bootstrap';
+import Backup from './Backup';
+import Restore from './Restore';
+
+export default class DataRow extends Component {
+    render() {
+        if( (window.config.auth == true && window.authenticated == true) || window.config.auth == false) {
+            return (
+                <Container className="mb-4">
+                    <Row>
+                        <Col sm={{ span: 12 }} className="text-center">
+                            <p>Use these buttons to backup/restore your data</p>
+                        </Col>
+                    </Row>
+                    <Row>
+                        <Col sm={{ span: 12 }} className="text-center">
+                            <Backup />
+                            <Restore />
+                        </Col>
+                    </Row>
+                </Container>
+            );
+        } else {
+            return (
+                <></>
+            )
+        }
+    }
+}
+
+if (document.getElementById('DataRow')) {
+    ReactDOM.render(<DataRow />, document.getElementById('DataRow'));
+}
--- a/resources/js/components/Data/Restore.js
+++ b/resources/js/components/Data/Restore.js
@@ -0,0 +1,209 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { Button, Modal, Form, Tooltip, OverlayTrigger, Dropdown, DropdownButton } from 'react-bootstrap';
+import { toast } from 'react-toastify';
+import Axios from 'axios';
+import CSVFileValidator from 'csv-file-validator';
+
+export default class Restore extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            show: false,
+            data: null,
+            uploadReady: false,
+            filename: 'Upload your backup',
+            format: 'json'
+        };
+    }
+
+    showModal = (format) => {
+        this.setState({
+            show: true,
+            format: format
+        });
+    }
+
+    hideModal = () => {
+        this.setState({
+            show: false
+        });
+    }
+
+    readFile = (e, format) => {
+        var file = e.target.files[0];
+        var reader = new FileReader();
+        reader.readAsText(file, 'UTF-8');
+        reader.onload = function(evt) {
+            var data = evt.target.result.trim();
+            if(format == 'csv') {
+                var csv = data.substr(45);
+                var config = {
+                    headers: [
+                        {
+                            name: "id",
+                            inputName: 'id',
+                            required: false,
+                        },
+                        {
+                            name: "ping",
+                            inputName: 'ping',
+                            required: true,
+                            requiredError: function (headerName, rowNumber, columnNumber) {
+                                return `${headerName} is required in the ${rowNumber} row / ${columnNumber} column`
+                            }
+                        },
+                        {
+                            name: "upload",
+                            inputName: 'upload',
+                            required: true,
+                            requiredError: function (headerName, rowNumber, columnNumber) {
+                                return `${headerName} is required in the ${rowNumber} row / ${columnNumber} column`
+                            }
+                        },
+                        {
+                            name: "download",
+                            inputName: 'download',
+                            required: true,
+                            requiredError: function (headerName, rowNumber, columnNumber) {
+                                return `${headerName} is required in the ${rowNumber} row / ${columnNumber} column`
+                            }
+                        },
+                        {
+                            name: "created_at",
+                            inputName: 'created_at',
+                            required: false,
+                        },
+                        {
+                            name: "server_id",
+                            inputName: 'server_id',
+                            required: false,
+                        },
+                        {
+                            name: "server_name",
+                            inputName: 'server_name',
+                            required: false,
+                        },
+                        {
+                            name: "server_host",
+                            inputName: 'server_host',
+                            required: false,
+                        },
+                        {
+                            name: "url",
+                            inputName: 'url',
+                            required: false,
+                        },
+                        {
+                            name: "scheduled",
+                            inputName: 'scheduled',
+                            required: false,
+                        },
+                        {
+                            name: "failed",
+                            inputName: 'failed',
+                            required: false,
+                        },
+                        {
+                            name: "updated_at",
+                            inputName: 'updated_at',
+                            required: false,
+                        }
+                    ]
+                };
+                CSVFileValidator(csv, config)
+                .then((e) => {
+                    if(e.inValidMessages.length > 0) {
+                        toast.error('Your upload file is not valid ' + format.toUpperCase());
+                    } else {
+                        this.setState({
+                            data: data,
+                            uploadReady: true,
+                            filename: file.name
+                        });
+                    }
+                })
+                .catch((e) => {
+                    toast.error('Your upload file is not valid ' + format.toUpperCase());
+                })
+            } else {
+                try {
+                    var data = JSON.parse(data);
+                    this.setState({
+                        data: data,
+                        uploadReady: true,
+                        filename: file.name
+                    });
+                } catch(e) {
+                    console.log(e);
+                    toast.error('Your upload file is not valid ' + format.toUpperCase());
+                }
+            }
+        }.bind(this)
+        reader.onerror = function (evt) {
+            toast.error('Something went wrong parsing your backup file.');
+        }
+    }
+
+    uploadFile = () => {
+        var data = { data: this.state.data, format: this.state.format };
+        var url = 'api/restore?token=' + window.token;
+
+        Axios.post(url, data)
+        .then((resp) => {
+            toast.success('Your data is being restored...');
+            this.setState({
+                show: false,
+                data: null,
+                uploadReady: false,
+                filename: 'Upload your backup'
+            });
+        })
+        .catch((err) => {
+            console.log(err);
+        })
+    }
+
+    render() {
+        var show = this.state.show;
+        var uploadReady = this.state.uploadReady;
+        var filename = this.state.filename;
+
+        return (
+            <>
+                <DropdownButton variant="secondary" title="Restore" className="m-2 d-inline-block">
+                    <Dropdown.Item href="#" onClick={() => { this.showModal('json') }}>JSON</Dropdown.Item>
+                    <Dropdown.Item href="#" onClick={() => { this.showModal('csv') }}>CSV</Dropdown.Item>
+                </DropdownButton>
+
+                <Modal show={show} onHide={this.hideModal} animation={true}>
+                    <Modal.Header closeButton>
+                        <Modal.Title>Restore from a backup</Modal.Title>
+                    </Modal.Header>
+                    <Modal.Body>
+                        <p>Upload your {this.state.format.toUpperCase()} backup file here:</p>
+                        <Form.File
+                            id="restoreFileInput"
+                            label={"Upload " + this.state.format.toUpperCase() + " file"}
+                            className="mb-3"
+                            custom
+                        >
+                            <Form.File.Input onChange={(e) => { this.readFile(e, this.state.format) }} />
+                            <Form.File.Label data-browse="Choose file">
+                                {filename}
+                            </Form.File.Label>
+                        </Form.File>
+                        {uploadReady === true &&
+                            <Button variant="secondary" onClick={this.uploadFile}>Restore</Button>
+                        }
+                    </Modal.Body>
+                </Modal>
+            </>
+        );
+    }
+}
+
+if (document.getElementById('Restore')) {
+    ReactDOM.render(<Restore />, document.getElementById('Restore'));
+}
--- a/resources/js/components/ErrorPage.js
+++ b/resources/js/components/ErrorPage.js
@@ -0,0 +1,89 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { BrowserRouter, Route, Link } from "react-router-dom";
+import { Container } from 'react-bootstrap';
+import { Row } from 'react-bootstrap';
+import { Col } from 'react-bootstrap';
+import { Button } from 'react-bootstrap';
+
+export default class ErrorPage extends Component {
+    constructor(props) {
+        super(props);
+
+        var colour = '';
+        var message = false;
+        switch(this.props.code.toString()[0]) {
+            case 2:
+            case '2':
+                colour = 'success';
+                break;
+            case 4:
+            case '4':
+                colour = 'danger';
+                break;
+            case 5:
+            case '5':
+            default:
+                colour = 'warning';
+                break;
+        }
+
+        switch(this.props.code) {
+            case '400':
+                message = 'Bad request'
+                break;
+            case '401':
+                message = 'You aren\'t authenticated';
+                break;
+            case '403':
+                message = 'You aren\'t authorised to view this page';
+                break;
+            case '404':
+                message = 'Page not found';
+                break;
+            case '405':
+                message = 'Method not allowed'
+                break;
+            case '413':
+                message = 'Request too large'
+                break;
+            case '422':
+                message = 'Your request was unprocessable'
+                break;
+        }
+
+        this.state = {
+            code: this.props.code,
+            colour: colour,
+            message: message
+        };
+    }
+
+    render() {
+        const colour = this.state.colour;
+        const code = this.state.code;
+        const message = this.state.message;
+        return (
+            <Container fluid>
+                <Row className="fullscreen text-center align-items-center">
+                    <Col
+                        lg={{ span: 2, offset: 5}}
+                        md={{ span: 4, offset: 4}}
+                        sm={{ span: 4, offset: 4}}
+                        xs={{ span: 12}}
+                    >
+                        <h1 className={'text-' + colour + ' mb-0'}>{code}</h1>
+                        {message &&
+                            <p className={colour + '-text mt-0 mb-2'}>{message}</p>
+                        }
+                        <Link to="/" className={'waves-effect waves-' + colour + ' btn ' + colour}><Button variant={colour}>Go home</Button></Link>
+                    </Col>
+                </Row>
+            </Container>
+        );
+    }
+}
+
+if (document.getElementById('errorpage')) {
+    ReactDOM.render(<ErrorPage />, document.getElementById('errorpage'));
+}
--- a/resources/js/components/Example.js
+++ b/resources/js/components/Example.js
@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+
+export default class Index extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+
+        }
+    }
+
+    render() {
+        return (
+            <div>
+            </div>
+        );
+    }
+}
+
+if (document.getElementById('main')) {
+    ReactDOM.render(<Index />, document.getElementById('main'));
+}
--- a/resources/js/components/Graphics/HistoryGraph.js
+++ b/resources/js/components/Graphics/HistoryGraph.js
@@ -0,0 +1,392 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import Axios from 'axios';
+import { Spinner, Container, Row, Form, Card } from 'react-bootstrap';
+import { Line, Bar } from 'react-chartjs-2';
+import { Col } from 'react-bootstrap';
+import { toast } from 'react-toastify';
+
+export default class HistoryGraph extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            days: props.days,
+            time: props.dlUl,
+            fail: props.fail,
+            config: props.config,
+            duData: {},
+            duOptions: {},
+            pingData: {},
+            pingOptions: {},
+            failData: {},
+            failOptions: {},
+            loading: true,
+            interval: null,
+            graph_ul_dl_enabled: true,
+            graph_ul_dl_width: 6,
+            graph_failure_enabled: true,
+            graph_failure_width: 6,
+            graph_ping_enabled: true,
+            graph_ping_width: 6,
+            firstUpdate: false,
+        }
+    }
+
+    componentDidMount = () => {
+    }
+
+    componentDidUpdate() {
+        if(
+            this.state.time != this.props.dlUl ||
+            this.state.fail != this.props.fail ||
+            this.state.config != this.props.config ||
+            this.state.days != this.props.days
+        ) {
+            this.setState({
+                time: this.props.dlUl,
+                fail: this.props.fail,
+                config: this.props.config,
+                days: this.props.days
+            });
+
+            if(this.state.config !== null) {
+                this.processData();
+            }
+        }
+
+        if(
+            !this.state.firstUpdate &&
+            this.state.config !== null
+        ) {
+            this.processData();
+            this.setState({
+                firstUpdate: true,
+            });
+        }
+    }
+
+    processData() {
+        this.processConfig();
+        this.processDlUlPing();
+        this.processFailure();
+    }
+
+    processConfig() {
+        this.setState({
+            graph_ul_dl_enabled: Boolean(Number(this.state.config.graphs.download_upload_graph_enabled.value)),
+            graph_ul_dl_width: this.state.config.graphs.download_upload_graph_width.value,
+            graph_ping_enabled: Boolean(Number(this.state.config.graphs.ping_graph_enabled.value)),
+            graph_ping_width: this.state.config.graphs.ping_graph_width.value,
+            graph_failure_enabled: Boolean(Number(this.state.config.graphs.failure_graph_enabled.value)),
+            graph_failure_width: this.state.config.graphs.failure_graph_width.value,
+        });
+    }
+
+    processDlUlPing() {
+        let days = this.state.days;
+
+        var duData = {
+            labels: [],
+            datasets:[
+                {
+                    data: [],
+                    label: 'Download',
+                    borderColor: "#fca503",
+                    fill: false,
+                },
+                {
+                    data: [],
+                    label: 'Upload',
+                    borderColor: "#3e95cd",
+                    fill: false,
+                }
+            ],
+        };
+        var duOptions = {
+            maintainAspectRatio: false,
+            responsive: true,
+            tooltips: {
+                callbacks: {
+                  label: (item) => `${item.yLabel} Mbit/s`,
+                },
+            },
+            title: {
+                display: false,
+                text: 'Speedtests results for the last ' + days + ' days',
+            },
+            scales: {
+                xAxes: [{
+                    display: false,
+                    scaleLabel: {
+                        display: true,
+                        labelString: 'DateTime'
+                    }
+                }],
+            },
+            elements: {
+                point:{
+                    radius: 0,
+                    hitRadius: 8
+                }
+            }
+        };
+
+        var pingData = {
+            labels: [],
+            datasets:[
+                {
+                    data: [],
+                    label: 'Ping',
+                    borderColor: "#07db71",
+                    fill: false,
+                },
+            ],
+        };
+        var pingOptions = {
+            maintainAspectRatio: false,
+            responsive: true,
+            tooltips: {
+                callbacks: {
+                  label: (item) => `${item.yLabel} ms`,
+                },
+            },
+            title: {
+                display: false,
+                text: 'Ping results for the last ' + days + ' days',
+            },
+            scales: {
+                xAxes: [{
+                    display: false,
+                    scaleLabel: {
+                        display: true,
+                        labelString: 'DateTime'
+                    }
+                }],
+            },
+            elements: {
+                point:{
+                    radius: 0,
+                    hitRadius: 8
+                }
+            }
+        }
+
+        this.state.time.forEach(e => {
+            var download = {
+                t: new Date(e.created_at),
+                y: e.download,
+            };
+            var upload = {
+                t: new Date(e.created_at),
+                y: e.upload,
+            };
+            var ping = {
+                t: new Date(e.created_at),
+                y: parseFloat(e.ping)
+            }
+            duData.datasets[0].data.push(download);
+            duData.datasets[1].data.push(upload);
+            pingData.datasets[0].data.push(ping);
+            duData.labels.push(new Date(e.created_at).toLocaleString());
+            pingData.labels.push(new Date(e.created_at).toLocaleString());
+        });
+
+        this.setState({
+            duData: duData,
+            duOptions: duOptions,
+            pingData: pingData,
+            pingOptions: pingOptions,
+            loading: false,
+        });
+    }
+
+    processFailure() {
+        let days = this.state.days;
+
+        var failData = {
+            labels: [],
+            datasets: [
+                {
+                    data: [],
+                    label: 'Successful',
+                    backgroundColor: '#07db71'
+                },
+                {
+                    data: [],
+                    label: 'Failed',
+                    backgroundColor: '#E74C3C'
+                },
+            ],
+        };
+        var failOptions = {
+            maintainAspectRatio: false,
+            responsive: true,
+            tooltips: {
+                callbacks: {
+                  label: (item) => `${item.yLabel} speedtests`,
+                },
+            },
+            scales: {
+                xAxes: [{
+                    stacked: true
+                }],
+                yAxes: [{
+                    stacked: true
+                }]
+            }
+        };
+
+        this.state.fail.forEach(e => {
+            var success = {x: e.date, y: e.success};
+            var fail = {x: e.date, y: e.failure};
+            failData.datasets[0].data.push(success);
+            failData.datasets[1].data.push(fail);
+            failData.labels.push(new Date(e.date).toLocaleString([], {year: '2-digit', month:'2-digit', day:'2-digit'}));
+        })
+
+        this.setState({
+            failData: failData,
+            failOptions: failOptions
+        });
+    }
+
+    updateDays = (e) => {
+        var days = e.target.value;
+        if(days) {
+            toast.info('Showing results for the last ' + days + ' days');
+            this.props.updateDays(days);
+        }
+    }
+
+    render() {
+        var loading = this.state.loading;
+        var duData = this.state.duData;
+        var duOptions = this.state.duOptions;
+        var pingData = this.state.pingData;
+        var pingOptions = this.state.pingOptions;
+        var failData = this.state.failData;
+        var failOptions = {
+            maintainAspectRatio: false,
+            responsive: true,
+            tooltips: {
+                callbacks: {
+                  label: (item) => `${item.yLabel} speedtests`,
+                },
+            },
+            scales: {
+                xAxes: [{
+                    stacked: true,
+                    gridLines: {
+                        display: false
+                    }
+                }],
+                yAxes: [{
+                    stacked: true,
+                    ticks: {
+                        stepSize: 1
+                    }
+                }]
+            }
+        };
+        var days = this.state.days;
+
+        var graph_ul_dl_enabled = this.state.graph_ul_dl_enabled;
+        var graph_ul_dl_width = this.state.graph_ul_dl_width;
+        var graph_ping_enabled = this.state.graph_ping_enabled;
+        var graph_ping_width = this.state.graph_ping_width;
+        var graph_failure_enabled = this.state.graph_failure_enabled;
+        var graph_failure_width = this.state.graph_failure_width;
+
+        var dlClasses = 'my-2 home-graph ';
+        var pingClasses = 'my-2 home-graph ';
+        var failureClasses = 'my-2 home-graph ';
+
+        if(graph_ul_dl_enabled == true) {
+            //
+        } else {
+            dlClasses += 'd-none ';
+        }
+
+        if(graph_ping_enabled == true) {
+            //
+        } else {
+            pingClasses += 'd-none ';
+        }
+
+        if(graph_failure_enabled == true) {
+            //
+        } else {
+            failureClasses += 'd-none ';
+        }
+
+        if(loading) {
+            return (
+                <div>
+                    <Spinner animation="grow" />
+                </div>
+            )
+        } else {
+            return (
+                <Container className="mb-4 mt-1" fluid>
+                    <Row>
+                        <Col
+                            lg={{ span: graph_ul_dl_width }}
+                            md={{ span: graph_ul_dl_width }}
+                            sm={{ span: 12 }}
+                            xs={{ span: 12 }}
+                            className={dlClasses}
+                        >
+                            <Card className="shadow-sm">
+                                <Card.Body>
+                                    <Line data={duData} options={duOptions} height={440} />
+                                </Card.Body>
+                            </Card>
+                        </Col>
+                        <Col
+                            lg={{ span: graph_ping_width }}
+                            md={{ span: graph_ping_width }}
+                            sm={{ span: 12 }}
+                            xs={{ span: 12 }}
+                            className={pingClasses}
+                        >
+                            <Card className="shadow-sm">
+                                <Card.Body>
+                                    <Line data={pingData} options={pingOptions} height={440} />
+                                </Card.Body>
+                            </Card>
+                        </Col>
+                        <Col
+                            lg={{ span: graph_failure_width }}
+                            md={{ span: graph_failure_width }}
+                            sm={{ span: 12 }}
+                            xs={{ span: 12 }}
+                            className={failureClasses}
+                        >
+                            <Card className="shadow-sm h-100">
+                                <Card.Body className="w-100 h-100">
+                                    <Bar data={failData} options={failOptions} height={440} />
+                            </Card.Body>
+                            </Card>
+                        </Col>
+                    </Row>
+                    <Row>
+                        <Col sm={{ span: 12 }}>
+                            <div className="text-center">
+                                <div className="d-inline-flex align-items-center mb-2">
+                                    <h4 className="d-inline mb-0">Show results for the last</h4>
+                                    <Form.Control id="duDaysInput" className="d-inline-block mx-2" defaultValue={days} onInput={this.updateDays}></Form.Control>
+                                    <h4 className="d-inline mb-0">days</h4>
+                                </div>
+                            </div>
+                        </Col>
+                    </Row>
+                </Container>
+            );
+        }
+    }
+}
+
+if (document.getElementById('HistoryGraph')) {
+    ReactDOM.render(<HistoryGraph />, document.getElementById('HistoryGraph'));
+}
--- a/resources/js/components/Graphics/LatestResults.js
+++ b/resources/js/components/Graphics/LatestResults.js
@@ -0,0 +1,164 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import Axios from 'axios';
+import Widget from './Widget';
+import { Container, Row, Spinner } from 'react-bootstrap';
+import { Col } from 'react-bootstrap';
+import { Button } from 'react-bootstrap';
+import { toast } from 'react-toastify';
+
+export default class LatestResults extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            data: props.data,
+            interval: null,
+            loading: true,
+        }
+    }
+
+    componentDidUpdate() {
+        if(this.state.data !== this.props.data) {
+            this.setState({
+                data: this.props.data,
+                loading: false,
+            });
+        }
+    }
+
+    componentWillUnmount() {
+        clearInterval(this.state.interval);
+    }
+
+    newScan = () => {
+        var url = 'api/speedtest/run?token=' + window.token;
+
+        Axios.get(url)
+        .then((resp) => {
+            toast.info('A test has been queued. This page will refresh when the test has finished.');
+        })
+        .catch((err) => {
+            if(err.response) {
+                if(err.response.status == 429) {
+                    toast.error('You are doing that too much. Try again later.');
+                }
+                console.log(err.response);
+            } else {
+                console.log(err.data);
+            }
+        })
+    }
+
+    render() {
+        var loading = this.state.loading;
+        var data = this.state.data;
+
+        if(loading && data !== false) {
+            return (
+                <Container fluid>
+                    <Row>
+                        <Col sm={{ span: 12 }}>
+                            <Spinner animation="grow" />
+                        </Col>
+                    </Row>
+                </Container>
+            );
+        } else if(data === false) {
+            if( (window.config.auth == true && window.authenticated == true) || window.config.auth == false) {
+                return (
+                    <Container fluid>
+                        <Row>
+                            <Col sm={{ span: 12 }} className="text-center">
+                                <div>
+                                    <Button variant="primary" onClick={this.newScan}>Start your first test!</Button>
+                                </div>
+                            </Col>
+                        </Row>
+                    </Container>
+                );
+            } else if(window.config.auth == true && window.authenticated == false) {
+                return (
+                    <Container fluid>
+                        <Row>
+                            <Col sm={{ span: 12 }} className="text-center">
+                                <div>
+                                    <p>Please login to run the first test</p>
+                                </div>
+                            </Col>
+                        </Row>
+                    </Container>
+                );
+            }
+        } else {
+            return (
+                <Container fluid>
+                    <Row>
+                        <Col sm={{ span: 12 }} className="text-center mb-2">
+                            <div>
+                                {(window.config.auth == true && window.authenticated == true) || window.config.auth == false ?
+                                    <div>
+                                        <Button className="d-inline-block mx-3 mb-2" variant="primary" onClick={this.newScan}>Test again</Button>
+                                        <p className="text-muted mb-0 d-inline-block">Last test performed at: {new Date(data.data.created_at).toLocaleString()}</p>
+                                    </div>
+                                :
+                                    <div>
+                                        <p className="text-muted mb-0 d-inline-block">Last test performed at: {new Date(data.data.created_at).toLocaleString()}</p>
+                                    </div>
+                                }
+                            </div>
+                        </Col>
+                    </Row>
+                    <Row>
+                        <Col
+                            lg={{ span: 4 }}
+                            md={{ span: 4 }}
+                            sm={{ span: 12 }}
+                            className="my-2"
+                        >
+                            <Widget
+                                title="Ping"
+                                data={data}
+                                failed={data.data.failed}
+                                unit="ms"
+                                icon="ping"
+                            />
+                        </Col>
+                        <Col
+                            lg={{ span: 4 }}
+                            md={{ span: 4 }}
+                            sm={{ span: 12 }}
+                            className="my-2"
+                        >
+                            <Widget
+                                title="Download"
+                                data={data}
+                                failed={data.data.failed}
+                                unit="Mbit/s"
+                                icon="dl"
+                            />
+                        </Col>
+                        <Col
+                            lg={{ span: 4 }}
+                            md={{ span: 4 }}
+                            sm={{ span: 12 }}
+                            className="my-2"
+                        >
+                            <Widget
+                                title="Upload"
+                                data={data}
+                                failed={data.data.failed}
+                                unit="Mbit/s"
+                                icon="ul"
+                            />
+                        </Col>
+                    </Row>
+                </Container>
+            );
+        }
+    }
+}
+
+if (document.getElementById('LatestResults')) {
+    ReactDOM.render(<LatestResults />, document.getElementById('LatestResults'));
+}
--- a/resources/js/components/Graphics/TableRow.js
+++ b/resources/js/components/Graphics/TableRow.js
@@ -0,0 +1,162 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { Modal, Button } from 'react-bootstrap';
+import Axios from 'axios';
+import { toast } from 'react-toastify';
+
+export default class TableRow extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            data: this.props.data,
+            show: false,
+        }
+    }
+
+    toggleShow = () => {
+        var show = this.state.show;
+        if(show) {
+            this.setState({
+                show: false
+            });
+        } else {
+            this.setState({
+                show: true
+            });
+        }
+    }
+
+    delete = (id) => {
+        var url = 'api/speedtest/delete/' + id + '?token=' + window.token;
+
+        Axios.delete(url)
+        .then((resp) => {
+            console.log(resp);
+            toast.success('Speedtest deleted');
+        })
+        .catch((err) => {
+            if(err.response.status == 404) {
+                toast.warning('Speedtest not found');
+            } else {
+                toast.error('Something went wrong');
+            }
+        })
+
+        this.props.refresh();
+        this.toggleShow();
+    }
+
+    getDataFields = () => {
+        let allFields = this.props.allFields;
+        let data = this.state.data;
+        let processedFields = [];
+
+        for(var key in allFields) {
+            let field = allFields[key];
+
+            let value = data[key];
+
+            if(field.type === 'date') {
+                value = new Date(value).toLocaleString();
+            } else if(field.type === 'bool') {
+                value = Boolean(value) ? field.if_true : field.if_false
+            }
+
+            let final = {
+                name: key,
+                key: field.alias,
+                value: value,
+                type: field.type
+            };
+
+            processedFields.push(final);
+        }
+
+        let visible = [];
+        let inModal = [];
+
+        window.config.tables.visible_columns.forEach(column => {
+            visible.push(processedFields.find(x => x.name == column));
+        });
+
+        inModal = processedFields.filter(el => {
+            return !visible.includes(el);
+        });
+
+        return {
+            visible: visible,
+            modal: inModal
+        };
+    }
+
+    render() {
+        var e = this.state.data;
+        var show = this.state.show;
+        var fields = this.getDataFields();
+
+        if(e.failed != true) {
+            return (
+                <tr>
+                    {fields.visible.map((e, i) => {
+                        return (
+                            <td key={i}>{e.value}</td>
+                        );
+                    })}
+                    {e.server_host != null ?
+                        <td>
+                            <span onClick={this.toggleShow} className="ti-arrow-top-right mouse"></span>
+                            <Modal show={show} onHide={this.toggleShow}>
+                                <Modal.Header closeButton>
+                                    <Modal.Title>More info</Modal.Title>
+                                </Modal.Header>
+                                <Modal.Body className="text-center">
+                                    {fields.modal.map((e, i) => {
+                                        if(e.type === 'url') {
+                                            return (
+                                                <p key={i}>{e.key}: <a href={e.value} target="_blank" rel="noopener noreferer">Speedtest.net</a></p>
+                                            );
+                                        } else {
+                                            return (
+                                                <p key={i}>{e.key}: {e.value}</p>
+                                            );
+                                        }
+                                    })}
+                                    <Button variant="danger" onClick={() => { this.delete(e.id) }}>Delete</Button>
+                                </Modal.Body>
+                            </Modal>
+                        </td>
+                    :
+                        <td></td>
+                    }
+                </tr>
+            );
+        } else {
+            return (
+                <tr>
+                    {fields.visible.map((e, i) => {
+                        console.log(e);
+                        if(e.name === 'created_at') {
+                            return <td key={i}>{new Date(e.value).toLocaleString()}</td>
+                        } else if (e.name === 'id') {
+                            return <td key={i}>{e.value}</td>
+                        }
+
+                        return (
+                            <td key={i}><span className="ti-close text-danger"></span></td>
+                        );
+                    })}
+                    {(window.config.auth && window.authenticated) || !window.config.auth ?
+                        <td><Button variant="danger" onClick={() => { this.delete(e.id) }}>Delete</Button></td>
+                    :
+                        <td></td>
+                    }
+                </tr>
+            );
+        }
+    }
+}
+
+if (document.getElementById('tableRow')) {
+    ReactDOM.render(<TableRow />, document.getElementById('tableRow'));
+}
--- a/resources/js/components/Graphics/TestsTable.js
+++ b/resources/js/components/Graphics/TestsTable.js
@@ -0,0 +1,189 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import Axios from 'axios';
+import { Container, Row, Table, Col, Collapse, Button } from 'react-bootstrap';
+import TableRow from './TableRow';
+
+export default class TestsTable extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            page: 1,
+            lastPage: 1,
+            data: [],
+            showTable: false,
+            refresh: true,
+            interval: null,
+            allFields: {
+                id: {
+                    type: 'int',
+                    alias: 'ID'
+                },
+                created_at: {
+                    type: 'date',
+                    alias: 'Time'
+                },
+                download: {
+                    type: 'float',
+                    alias: 'Download (Mbit/s)'
+                },
+                upload: {
+                    type: 'float',
+                    alias: 'Upload (Mbit/s)'
+                },
+                ping: {
+                    type: 'float',
+                    alias: 'Ping (ms)'
+                },
+                server_id: {
+                    type: 'int',
+                    alias: 'Server ID'
+                },
+                server_name: {
+                    type: 'string',
+                    alias: 'Name'
+                },
+                server_host: {
+                    type: 'string',
+                    alias: 'Host'
+                },
+                url: {
+                    type: 'url',
+                    alias: 'URL'
+                },
+                scheduled: {
+                    type: 'bool',
+                    alias: 'Type',
+                    if_true: 'scheduled',
+                    if_false: 'manual'
+                }
+            }
+        }
+    }
+
+    componentDidMount() {
+        this.getData();
+        var int = setInterval(this.getData, 10000);
+        this.setState({
+            interval: int
+        });
+    }
+
+    componentWillUnmount() {
+        clearInterval(this.state.interval);
+    }
+
+    getData = (page = this.state.page, refresh = true) => {
+        var url = 'api/speedtest/?page=' + page;
+
+        Axios.get(url)
+        .then((resp) => {
+            var data = resp.data.data.data;
+            if(!refresh) {
+                data = this.state.data.concat(data);
+            }
+            var page = resp.data.data.current_page;
+            var lastPage = resp.data.data.last_page;
+            this.setState({
+                data: data,
+                page: page,
+                lastPage: lastPage,
+                refresh: refresh
+            });
+        })
+        .catch((err) => {
+            console.log(err);
+        })
+    }
+
+    getMoreData = () => {
+        var page = this.state.page;
+        page = page + 1;
+
+        if(this.state.refresh) {
+            clearInterval(this.state.interval);
+        }
+
+        this.getData(page, false);
+    }
+
+    toggleCollapse = () => {
+        var show = this.state.showTable;
+
+        if(show) {
+            this.setState({
+                showTable: false
+            });
+        } else {
+            this.setState({
+                showTable: true
+            });
+        }
+    }
+
+    render() {
+        var page = this.state.page;
+        var lastPage = this.state.lastPage;
+        var data = this.state.data;
+        var show = this.state.showTable;
+        var refresh = this.state.refresh;
+        let allFields = this.state.allFields;
+
+        if(data.length > 0) {
+            return (
+                <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>
+                        <Row>
+                            <Col sm={{ span: 12 }} id="testsTable">
+                                <Table responsive>
+                                    <thead>
+                                        <tr>
+                                            {window.config.tables.visible_columns.map((e, i) => {
+                                                return (
+                                                    <th key={i}>{allFields[e].alias}</th>
+                                                );
+                                            })}
+                                            <th>More</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        {data.map((e,i) => {
+                                            return (
+                                                <TableRow key={e.id} data={e} allFields={allFields} refresh={this.getData} />
+                                            );
+                                        })}
+                                    </tbody>
+                                </Table>
+                            </Col>
+                        </Row>
+                        {page < lastPage &&
+                            <Row>
+                                <Col sm={{ span: 12 }} className="text-center">
+                                    <Button variant="primary" onClick={this.getMoreData}>Show more</Button>
+                                </Col>
+                            </Row>
+                        }
+                    </Container>
+                </div>
+            );
+        } else {
+            return (
+                <>
+                </>
+            )
+        }
+    }
+}
+
+if (document.getElementById('TestsTable')) {
+    ReactDOM.render(<TestsTable />, document.getElementById('TestsTable'));
+}
--- a/resources/js/components/Graphics/Widget.js
+++ b/resources/js/components/Graphics/Widget.js
@@ -0,0 +1,150 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { Card } from 'react-bootstrap';
+
+export default class Widget extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            title: this.props.title,
+            unit: this.props.unit,
+            icon: this.props.icon,
+            failed: this.props.failed,
+            data: this.props.data
+        }
+    }
+
+    parseData(title, data) {
+        var returnData = {};
+
+
+        if(title == 'Ping') {
+            returnData.value = parseFloat(data.data.ping).toFixed(1);
+
+            if(window.config.widgets.show_average) {
+                returnData.avg = parseFloat(data.average.ping).toFixed(1);
+            }
+
+            if(window.config.widgets.show_max) {
+                returnData.max = parseFloat(data.maximum.ping).toFixed(1);
+            }
+
+            if(window.config.widgets.show_min) {
+                returnData.min = parseFloat(data.minimum.ping).toFixed(1);
+            }
+        }
+
+        if(title == 'Upload') {
+            returnData.value = parseFloat(data.data.upload).toFixed(1);
+
+            if(window.config.widgets.show_average) {
+                returnData.avg = parseFloat(data.average.upload).toFixed(1);
+            }
+
+            if(window.config.widgets.show_max) {
+                returnData.max = parseFloat(data.maximum.upload).toFixed(1);
+            }
+
+            if(window.config.widgets.show_min) {
+                returnData.min = parseFloat(data.minimum.upload).toFixed(1);
+            }
+        }
+
+        if(title == 'Download') {
+            returnData.value = parseFloat(data.data.download).toFixed(1);
+
+            if(window.config.widgets.show_average) {
+                returnData.avg = parseFloat(data.average.download).toFixed(1);
+            }
+
+            if(window.config.widgets.show_max) {
+                returnData.max = parseFloat(data.maximum.download).toFixed(1);
+            }
+
+            if(window.config.widgets.show_min) {
+                returnData.min = parseFloat(data.minimum.download).toFixed(1);
+            }
+        }
+
+        return returnData;
+    }
+
+    componentDidUpdate = () => {
+        if(this.props.title != this.state.title || this.props.data != this.state.data || this.props.unit != this.state.unit || this.props.icon != this.state.icon || this.props.failed != this.state.failed) {
+            this.setState({
+                title: this.props.title,
+                unit: this.props.unit,
+                icon: this.props.icon,
+                failed: this.props.failed,
+                data: this.props.data
+            });
+        }
+    }
+
+    render() {
+        var title = this.state.title;
+        var unit = this.state.unit;
+        var icon = this.state.icon;
+        var failed = Boolean(Number(this.state.failed));
+
+        var data = this.parseData(title, this.state.data);
+
+        switch(icon) {
+            case 'ping':
+                icon = <span className="ti-pulse icon text-success"></span>;
+                break;
+            case 'dl':
+                icon = <span className="ti-download icon text-warning"></span>;
+                break;
+            case 'ul':
+                icon = <span className="ti-upload icon text-primary"></span>;
+                break;
+        }
+
+        return (
+            <Card className="widget-card shadow-sm">
+                <Card.Body>
+                    <div>
+                        <div>
+                            <div className="d-flex align-items-center justify-content-between">
+                                <h4>{title}</h4>
+                                {icon}
+                            </div>
+
+                            <div className="text-truncate">
+                                <h3 className="d-inline">{(!failed) ? data.value : <span className="ti-close text-danger"></span> }</h3>
+                                <p className="d-inline ml-2">{unit} (current)</p>
+                            </div>
+
+                            {window.config.widgets.show_average &&
+                                <div className="text-muted text-truncate">
+                                    <h5 className="d-inline">{data.avg}</h5>
+                                    <p className="d-inline ml-2">{unit} (average)</p>
+                                </div>
+                            }
+
+                            {window.config.widgets.show_max &&
+                                <div className="text-muted text-truncate">
+                                    <h5 className="d-inline">{data.max}</h5>
+                                    <p className="d-inline ml-2">{unit} (maximum)</p>
+                                </div>
+                            }
+
+                            {window.config.widgets.show_min &&
+                                <div className="text-muted text-truncate">
+                                    <h5 className="d-inline">{data.min}</h5>
+                                    <p className="d-inline ml-2">{unit} (minimum)</p>
+                                </div>
+                            }
+                        </div>
+                    </div>
+                </Card.Body>
+            </Card>
+        );
+    }
+}
+
+if (document.getElementById('Widget')) {
+    ReactDOM.render(<Widget />, document.getElementById('Widget'));
+}
--- a/resources/js/components/Home/Footer.js
+++ b/resources/js/components/Home/Footer.js
@@ -0,0 +1,24 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { Container, Row } from 'react-bootstrap';
+import { Col } from 'react-bootstrap';
+import Version from './Version';
+
+export default class Footer extends Component {
+    render() {
+        return (
+            <Container>
+                <Row>
+                    <Col sm={{ span: 12 }} className="text-center">
+                        <Version />
+                        <p className="text-muted">See the code on <a href="https://github.com/henrywhitaker3/Speedtest-Tracker" target="_blank" rel="noopener noreferrer">GitHub</a></p>
+                    </Col>
+                </Row>
+            </Container>
+        );
+    }
+}
+
+if (document.getElementById('Footer')) {
+    ReactDOM.render(<Footer />, document.getElementById('Footer'));
+}
--- a/resources/js/components/Home/HomePage.js
+++ b/resources/js/components/Home/HomePage.js
@@ -0,0 +1,84 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import HistoryGraph from '../Graphics/HistoryGraph';
+import LatestResults from '../Graphics/LatestResults';
+import Footer from './Footer';
+import DataRow from '../Data/DataRow';
+import TestsTable from '../Graphics/TestsTable';
+import Login from '../Login';
+import Authentication from '../Authentication/Authentication';
+import Navbar from '../Navbar';
+import axios from 'axios';
+
+export default class HomePage extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            latest: null,
+            time: null,
+            fail: null,
+            config: null,
+            days: 7,
+            interval: null,
+        }
+    }
+
+    componentDidMount = () => {
+        this.getData();
+        var interval = setInterval(this.getData, 10000);
+        this.setState({
+            interval: interval,
+        });
+    }
+
+    componentWillUnmount() {
+        clearInterval(this.state.interval);
+    }
+
+    updateDays = (days) => {
+        this.setState({ days: days });
+        this.setState({ days: days }, () => { this.getData() });
+    }
+
+    getData = () => {
+        axios.get('api/speedtest/home/' + this.state.days)
+        .then((resp) => {
+            this.setState({
+                latest: resp.data.latest,
+                time: resp.data.time,
+                fail: resp.data.fail,
+                config: resp.data.config
+            });
+        })
+        .catch((err) => {
+            console.log(err);
+        })
+    }
+
+    render() {
+        let latest = this.state.latest;
+        let time = this.state.time;
+        let fail = this.state.fail;
+        let config = this.state.config;
+        let days = this.state.days;
+
+        return (
+            <div>
+                <Navbar />
+                <div className="my-4">
+                    {(window.config.auth == true && window.authenticated == false) &&
+                        <Login />
+                    }
+                    <LatestResults data={latest} />
+                    <HistoryGraph updateDays={this.updateDays} dlUl={time} fail={fail} config={config} days={days} />
+                </div>
+                <Footer />
+            </div>
+        );
+    }
+}
+
+if (document.getElementById('homePage')) {
+    ReactDOM.render(<HomePage />, document.getElementById('homePage'));
+}
--- a/resources/js/components/Home/Version.js
+++ b/resources/js/components/Home/Version.js
@@ -0,0 +1,152 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import Axios from 'axios';
+import { toast } from 'react-toastify';
+import { Modal, ProgressBar } from 'react-bootstrap';
+import { Button } from 'react-bootstrap';
+import Changelog from '../Data/Changelog';
+
+export default class Version extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            version: document.querySelector('meta[name="version"]').content,
+            update: false,
+            modalShow: false,
+            changelog: [],
+            showProgress: false,
+            updateProgress: 0,
+        };
+    }
+
+    componentDidMount() {
+        // this.checkForUpdates();
+    }
+
+    checkForUpdates = () => {
+        var url = 'api/update/check';
+
+        Axios.get(url)
+        .then((resp) => {
+            var update = resp.data.update;
+            if(update !== false) {
+                toast.info('A new version of Speedtest Tracker is available (v' + update.version + '). Go to the bottom of the page to update.');
+                this.setState({
+                    update: update.version,
+                    changelog: update.changelog,
+                });
+            }
+        })
+        .catch((err) => {
+            console.log(err);
+        });
+    }
+
+    showModal = () => {
+        this.setState({
+            modalShow: true
+        });
+    }
+
+    hideModal = () => {
+        this.setState({
+            modalShow: false
+        });
+    }
+
+    updateApp = () => {
+        this.setState({
+            showProgress: true,
+            updateProgress: 0,
+        });
+        toast.info('Downloading update');
+        Axios.get('api/update/download')
+        .then((resp) => {
+            this.setState({
+                updateProgress: 50,
+            });
+            toast.info('Extracting update');
+            Axios.get('api/speedtest/extract')
+            .then((resp) => {
+                this.setState({
+                    updateProgress: 75,
+                });
+                toast.info('Applying update');
+                Axios.get('api/update/move')
+                .then((resp) => {
+                    this.setState({
+                        updateProgress: 100,
+                    });
+                    toast.success('Update successful. Refreshing your page...');
+                    setTimeout(function() {
+                        location.reload(true);
+                    }, 5000);
+                })
+            })
+        })
+        .catch((err) => {
+            toast.error('Something went wrong...');
+        })
+    }
+
+    render() {
+        var version = this.state.version;
+        var update = this.state.update;
+        var modalShow = this.state.modalShow;
+        var changelog = this.state.changelog;
+        var showProgress = this.state.showProgress;
+        var updateProgress = this.state.updateProgress;
+
+        if(update === false) {
+            return (
+                <div>
+                    <p className="text-muted mb-0 d-inline-block">Speedtest Tracker Version: {version}</p>
+                    <Changelog />
+                </div>
+            );
+        } else {
+            return (
+                <div>
+                    <p className="text-muted mb-0 d-inline">Speedtest Tracker Version: {version} - </p>
+                    <a href="#!" className="mb-0 d-inline" onClick={this.showModal}>New version available - v{update}</a>
+
+                    <Modal show={modalShow} onHide={this.hideModal} animation={true}>
+                        <Modal.Header closeButton>
+                            <Modal.Title>Update to v{update}</Modal.Title>
+                        </Modal.Header>
+                        <Modal.Body>
+                            <h5>Changelog:</h5>
+                            <ul>
+                                {changelog.map((e, i) => {
+                                    if(e.link == '') {
+                                        return (
+                                            <li key={i}>{e.description}</li>
+                                        );
+                                    } else {
+                                        return (
+                                            <li key={i}><a href={e.link} target="_blank" rel="noopener noreferer">{e.description}</a></li>
+                                        )
+                                    }
+                                })}
+                            </ul>
+                            {showProgress &&
+                                <div>
+                                    <p>Update progress:</p>
+                                    <ProgressBar animated now={updateProgress} />
+                                </div>
+                            }
+                            {!showProgress &&
+                                <Button variant="primary" onClick={this.updateApp}>Update</Button>
+                            }
+                        </Modal.Body>
+                    </Modal>
+                </div>
+            );
+        }
+    }
+}
+
+if (document.getElementById('Version')) {
+    ReactDOM.render(<Version />, document.getElementById('Version'));
+}
--- a/resources/js/components/Loader.js
+++ b/resources/js/components/Loader.js
@@ -0,0 +1,54 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import Spinner from 'react-bootstrap/Spinner';
+import { Container } from 'react-bootstrap';
+import { Row } from 'react-bootstrap';
+import { Col } from 'react-bootstrap';
+
+export default class Loader extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+
+        };
+    }
+
+    render() {
+        if(this.props.small) {
+            return (
+                <Container fluid>
+                    <Row className="text-center align-items-center">
+                        <Col
+                            lg={{ span: 2, offset: 5}}
+                            md={{ span: 4, offset: 4}}
+                            sm={{ span: 4, offset: 4}}
+                            xs={{ span: 12}}
+                        >
+                            <Spinner animation="grow" size="lg"/>
+                        </Col>
+                    </Row>
+                </Container>
+            )
+        }
+
+        return (
+            <Container fluid>
+                <Row className="fullscreen text-center align-items-center">
+                    <Col
+                        lg={{ span: 2, offset: 5}}
+                        md={{ span: 4, offset: 4}}
+                        sm={{ span: 4, offset: 4}}
+                        xs={{ span: 12}}
+                    >
+                        <Spinner animation="grow" size="lg"/>
+                    </Col>
+                </Row>
+            </Container>
+        );
+    }
+}
+
+if (document.getElementById('loader')) {
+    ReactDOM.render(<Loader />, document.getElementById('loader'));
+}
--- a/resources/js/components/Login.js
+++ b/resources/js/components/Login.js
@@ -0,0 +1,97 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { Container, Row, Form, Toast, Modal } from 'react-bootstrap';
+import { Col } from 'react-bootstrap';
+import { Button } from 'react-bootstrap';
+import Axios from 'axios';
+import { toast } from 'react-toastify';
+import Cookies from 'js-cookie';
+
+export default class Login extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            loginEmailInput: '',
+            loginPasswordInput: ''
+        }
+    }
+
+    updateTextField = (e) => {
+        this.setState({
+            [e.target.id]: e.target.value
+        })
+    }
+
+    login = (e) => {
+        e.preventDefault();
+
+        var data = {
+            email: this.state.loginEmailInput,
+            password: this.state.loginPasswordInput
+        }
+
+        var url = 'api/auth/login';
+        Axios.post(url, data)
+        .then((resp) => {
+            var token = resp.data.access_token;
+            var expires = (resp.data.expires_in / 60) / 24;
+            Cookies.set('auth', token, { expires: expires })
+            window.location.reload(true);
+        })
+        .catch((err) => {
+            toast.error('Something went wrong logging in.');
+        })
+    }
+
+    toggleShow = () => {
+        if(this.state.show) {
+            this.setState({
+                show: false
+            })
+        } else {
+            this.setState({
+                show: true
+            })
+        }
+    }
+
+    render() {
+        var show = this.state.show;
+
+        return (
+            <Container>
+                <Row>
+                    <Col
+                        xs={{ span: 12 }}
+                        className="pb-2 text-center"
+                    >
+                        <Button variant="primary" onClick={this.toggleShow}>Login</Button>
+                        <Modal show={show} onHide={this.toggleShow}>
+                            <Modal.Header closeButton>
+                                <Modal.Title>Login</Modal.Title>
+                            </Modal.Header>
+                            <Modal.Body>
+                                <Form onSubmit={this.login}>
+                                    <Form.Group controlId="loginEmailInput">
+                                        <Form.Label>Email address</Form.Label>
+                                        <Form.Control type="email" placeholder="admin@admin.com" onInput={this.updateTextField} required />
+                                    </Form.Group>
+                                    <Form.Group controlId="loginPasswordInput">
+                                        <Form.Label>Password</Form.Label>
+                                        <Form.Control type="password" onInput={this.updateTextField} required />
+                                    </Form.Group>
+                                    <Button variant="primary" type="submit">Login</Button>
+                                </Form>
+                            </Modal.Body>
+                        </Modal>
+                    </Col>
+                </Row>
+            </Container>
+        );
+    }
+}
+
+if (document.getElementById('login')) {
+    ReactDOM.render(<Login />, document.getElementById('login'));
+}
--- a/resources/js/components/Navbar.js
+++ b/resources/js/components/Navbar.js
@@ -0,0 +1,81 @@
+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 (
+            <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>
+        );
+    }
+}
+
+if (document.getElementById('navbar')) {
+    ReactDOM.render(<Navbar />, document.getElementById('navbar'));
+}
--- a/resources/js/components/Settings/SettingsIndex.js
+++ b/resources/js/components/Settings/SettingsIndex.js
@@ -0,0 +1,320 @@
+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',
+                }
+            ],
+            Tables: [
+                {
+                    obj: data.visible_columns,
+                    type: 'list'
+                },
+                {
+                    obj: data.hidden_columns,
+                    type: 'list'
+                }
+            ],
+            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'
+                },
+
+            ],
+            influxdb: [
+                {
+                    obj: data.influx_db_enabled,
+                    type: 'checkbox'
+                },
+                {
+                    obj: data.influx_db_host,
+                    type: 'text'
+                },
+                {
+                    obj: data.influx_db_port,
+                    type: 'number'
+                },
+                {
+                    obj: data.influx_db_database,
+                    type: 'text'
+                },
+                {
+                    obj: data.influx_db_username,
+                    type: 'text',
+                    autoComplete: false,
+                },
+                {
+                    obj: data.influx_db_password,
+                    type: 'password',
+                    autoComplete: false,
+                }
+            ],
+        };
+    }
+
+    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} refreshConfig={this.props.refreshConfig} />
+                    }
+                </div>
+                <Footer />
+            </div>
+        );
+    }
+}
+
+if (document.getElementById('settingsIndex')) {
+    ReactDOM.render(<SettingsIndex />, document.getElementById('settingsIndex'));
+}
--- a/resources/js/components/Settings/SettingsInput.js
+++ b/resources/js/components/Settings/SettingsInput.js
@@ -0,0 +1,202 @@
+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,
+            autoComplete: String(this.props.autoComplete ? true : Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 7)),
+        }
+    }
+
+    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}
+            autoComplete={this.state.autoComplete} />
+    }
+
+    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}
+            autoComplete={this.state.autoComplete} />
+    }
+
+    generatePasswordInput(disabled) {
+        return <Form.Control
+            name={this.state.name}
+            type={this.state.type}
+            defaultValue={this.state.value}
+            disabled={disabled}
+            onInput={this.handleInput}
+            autoComplete={this.state.autoComplete} />
+    }
+
+    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 === 'password') {
+            input = this.generatePasswordInput(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'));
+}
--- a/resources/js/components/Settings/SettingsTabs.js
+++ b/resources/js/components/Settings/SettingsTabs.js
@@ -0,0 +1,192 @@
+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';
+import TableSettings from './tabs/TableSettings';
+import InfluxDBSettings from './tabs/InfluxDBSettings';
+
+export default class SettingsTabs extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            tab: "General",
+            data: this.props.data
+        }
+    }
+
+    generateTabs = () => {
+        var tabs = [
+            'General',
+            'Graphs',
+            'Tables',
+            'Notifications',
+            'healthchecks.io',
+            'InfluxDB',
+            '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 : ''}
+                        autoComplete={setting.autoComplete ? true : false}
+                    />
+        })
+    }
+
+    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 'Tables':
+                return <TableSettings
+                            data={data.Tables}
+                            refreshConfig={this.props.refreshConfig}
+                            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 'InfluxDB':
+                return <InfluxDBSettings
+                            data={data.influxdb}
+                            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'));
+}
--- a/resources/js/components/Settings/tabs/BackupSettings.js
+++ b/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'));
+}
--- a/resources/js/components/Settings/tabs/GeneralSettings.js
+++ b/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'));
+}
--- a/resources/js/components/Settings/tabs/GraphsSettings.js
+++ b/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'));
+}
--- a/resources/js/components/Settings/tabs/HealthchecksSettings.js
+++ b/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'));
+}
--- a/resources/js/components/Settings/tabs/InfluxDBSettings.js
+++ b/resources/js/components/Settings/tabs/InfluxDBSettings.js
@@ -0,0 +1,50 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { Modal, Button, Tab } from 'react-bootstrap';
+import Axios from 'axios';
+
+export default class InfluxDBSettings 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>
+                <form onSubmit={(e) => { e.preventDefault() }} autoComplete="off">
+                    <input type="text" autoComplete="username" style={{ display: 'none' }} />
+                    <input type="password" name="password" autoComplete="passoword" style={{ display: 'none' }} />
+                    {settings}
+                </form>
+                <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('InfluxDBSettings')) {
+    ReactDOM.render(<InfluxDBSettings />, document.getElementById('InfluxDBSettings'));
+}
--- a/resources/js/components/Settings/tabs/NotificationsSettings.js
+++ b/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'));
+}
--- a/resources/js/components/Settings/tabs/ResetSettings.js
+++ b/resources/js/components/Settings/tabs/ResetSettings.js
@@ -0,0 +1,48 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { Button } from 'react-bootstrap';
+import Axios from 'axios';
+import { toast } from 'react-toastify';
+
+export default class ResetSettings extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+        }
+    }
+
+    deleteAll = () => {
+        var url = 'api/speedtest/delete/all';
+
+        Axios.delete(url)
+        .then((resp) => {
+            toast.success('All speedtests have been deleted.');
+            this.toggleShow();
+        })
+        .catch((err) => {
+            if(err.response.data.error == undefined) {
+                toast.error('Something went wrong.');
+            }
+
+            toast.error(err.response.data.error);
+        })
+    }
+
+    render() {
+        var show = this.state.show;
+        const title = 'Reset Speedtests';
+
+        return (
+            <>
+                <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>
+            </>
+        );
+    }
+}
+
+if (document.getElementById('ResetSettings')) {
+    ReactDOM.render(<ResetSettings />, document.getElementById('ResetSettings'));
+}
--- a/resources/js/components/Settings/tabs/TableSettings.js
+++ b/resources/js/components/Settings/tabs/TableSettings.js
@@ -0,0 +1,123 @@
+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 { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
+
+export default class TableSettings extends Component {
+    constructor(props) {
+        super(props)
+
+        this.state = {
+            visible: this.props.data[0],
+            hidden: this.props.data[1],
+        }
+    }
+
+    handleOnDragEnd = (result) => {
+        if (!result.destination) return;
+
+        let visible = this.state.visible;
+        let hidden = this.state.hidden;
+
+        let from = result.source.droppableId == 'visibleColumns' ? visible.obj.value : hidden.obj.value;
+        let to = result.destination.droppableId == 'visibleColumns' ? visible.obj.value : hidden.obj.value;
+
+        let [reorderedItem] = from.splice(result.source.index, 1);
+        to.splice(result.destination.index, 0, reorderedItem);
+
+        this.setState({
+            visible: visible,
+            hidden: hidden
+        });
+    }
+
+    save = () => {
+        var url = 'api/settings/bulk?token=' + window.token;
+
+        Axios.post(url, {
+            data: [
+                {
+                    name: 'visible_columns',
+                    value: this.state.visible.obj.value
+                },
+                {
+                    name: 'hidden_columns',
+                    value: this.state.hidden.obj.value
+                }
+            ],
+        })
+        .then((resp) => {
+            toast.success('Table settings updated');
+            this.props.refreshConfig();
+        })
+        .catch((err) => {
+            toast.error('Something went wrong');
+            console.log(err);
+        })
+    }
+
+    render() {
+        let visible = this.state.visible;
+        let hidden = this.state.hidden;
+
+        return (
+            <Tab.Content>
+                <div>
+                    <p>{visible.obj.description}</p>
+
+                    <DragDropContext onDragEnd={this.handleOnDragEnd}>
+                        <div className="card pt-4 pb-2 px-4 mb-4">
+                            <h4>Visible Columns</h4>
+                            <Droppable droppableId="visibleColumns">
+                                {(provided) => (
+                                    <ul className="visibleColumns pl-0" {...provided.droppableProps} ref={provided.innerRef}>
+                                        {visible.obj.value.map((e, i) => {
+                                            return (
+                                                <Draggable draggableId={e} index={i} key={e}>
+                                                    {(provided) => (
+                                                        <li className="card bg-secondary py-2 px-3 my-2" key={e} ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>{e}</li>
+                                                    )}
+                                                </Draggable>
+                                            );
+                                        })}
+                                        {provided.placeholder}
+                                    </ul>
+                                )}
+                            </Droppable>
+                        </div>
+
+                        <div className="card pt-4 pb-2 px-4">
+                            <h4>Hidden Columns</h4>
+                            <Droppable droppableId="hiddenColumns pl-0">
+                                {(provided) => (
+                                    <ul className="hiddenColumns pl-0" {...provided.droppableProps} ref={provided.innerRef}>
+                                        {hidden.obj.value.map((e, i) => {
+                                            return (
+                                                <Draggable draggableId={e} index={i} key={e}>
+                                                    {(provided) => (
+                                                        <li className="card bg-secondary py-2 px-3 my-2" key={e} ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>{e}</li>
+                                                    )}
+                                                </Draggable>
+                                            );
+                                        })}
+                                        {provided.placeholder}
+                                    </ul>
+                                )}
+                            </Droppable>
+                        </div>
+                    </DragDropContext>
+
+                    <div className="mt-3">
+                        <button className="btn btn-primary" onClick={() => { this.save() }}>Save</button>
+                    </div>
+                </div>
+            </Tab.Content>
+        );
+    }
+}
+
+if (document.getElementById('TableSettings')) {
+    ReactDOM.render(<TableSettings />, document.getElementById('TableSettings'));
+}
--- a/resources/js/components/SpeedtestsPage.js
+++ b/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'));
+}
--- a/resources/js/index.js
+++ b/resources/js/index.js
@@ -0,0 +1,125 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { BrowserRouter, Switch, Route, Redirect, useHistory } from 'react-router-dom';
+import Axios from 'axios';
+import ErrorPage from './components/ErrorPage';
+import Loader from './components/Loader';
+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) {
+        super(props)
+
+        this.state = {
+            loading: true,
+            redirect: false,
+        }
+    }
+
+    componentDidMount = () => {
+        this.getConfig();
+    }
+
+    getConfig() {
+        var url = 'api/settings/config';
+
+        Axios.get(url)
+        .then((resp) => {
+            window.config = resp.data;
+            if(window.config.auth === true) {
+                var authCookie = Cookies.get('auth');
+                if(authCookie == undefined) {
+                    window.authenticated = false;
+                    this.setState({
+                        loading: false,
+                        redirect: true,
+                    });
+                } else {
+                    var url = 'api/auth/me?token=' + authCookie;
+                    Axios.get(url)
+                    .then((resp) => {
+                        window.authenticated = true;
+                        window.token = authCookie;
+                    })
+                    .catch((err) => {
+                        Cookies.remove('auth');
+                        window.authenticated = false;
+                    })
+                    .finally(() => {
+                        this.setState({
+                            loading: false,
+                            redirect: true,
+                        });
+                    })
+                }
+            } else {
+                this.setState({
+                    loading: false,
+                    redirect: true,
+                });
+            }
+        })
+    }
+
+    render() {
+        var loading = this.state.loading;
+        var redirect = this.state.redirect;
+        var baseSet = this.isset(window.config);
+
+        if(loading) {
+            return (
+                <Loader />
+            );
+        } else {
+            if(baseSet && window.config.base) {
+                return (
+                    <BrowserRouter>
+                        <Route render={(props) => (<ToastContainer />)} />
+                        <Switch>
+                                <Route exact path={window.config.base} render={(props) => (
+                                    <div>
+                                        <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 refreshConfig={this.getConfig} />
+
+                                    </div>
+                                )} />
+                                <Route exact path={window.config.base + "error/:code"} render={(props) => ( <ErrorPage code={props.match.params.code} /> )} />
+                                <Route render={(props) => (<ErrorPage code="404" />)} />
+                        </Switch>
+                    </BrowserRouter>
+                );
+            } else {
+                return (
+                    <Loader />
+                );
+            }
+        }
+    }
+
+    isset(v) {
+        if(typeof v !== "undefined" || v !== null) {
+            return true;
+        } else {
+            return false;
+        }
+    }
+}
+
+if (document.getElementById('main')) {
+    ReactDOM.render(<Index />, document.getElementById('main'));
+}
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -1,3 +1,8 @@
-// Base tailwind files
-@import "tailwindcss/base";
-@import "tailwindcss/components";
+// Fonts
+@import url('https://fonts.googleapis.com/css?family=Nunito');
+
+// Variables
+@import 'variables';
+
+// Bootstrap
+@import '~bootstrap/scss/bootstrap';
--- a/resources/sass/tailwind-utilities.scss
+++ b/resources/sass/tailwind-utilities.scss
@@ -1 +0,0 @@
-@import "tailwindcss/utilities";
--- a/resources/views/app.blade.php
+++ b/resources/views/app.blade.php
@@ -7,36 +7,35 @@
        <meta name="author" content="Henry Whitaker">
        <meta name="version" content="{{ config('speedtest.version', 'Unknown') }}">

-        <link href="/icons/themify/themify-icons.css" rel="stylesheet">
+        <link href="{{ App\Helpers\SettingsHelper::getBase() }}files/icons/themify/themify-icons.css" rel="stylesheet">
+        <link rel="stylesheet" href="{{ App\Helpers\SettingsHelper::getBase() }}files/css/bootstrap.dark.min.css">
+        <link rel="stylesheet" href="{{ App\Helpers\SettingsHelper::getBase() }}files/css/main.css?v={{ str_replace('.', '-', config('speedtest.version')) }}">

-        <link rel="apple-touch-icon" sizes="57x57" href="/icons/fav/apple-icon-57x57.png">
-        <link rel="apple-touch-icon" sizes="60x60" href="/icons/fav/apple-icon-60x60.png">
-        <link rel="apple-touch-icon" sizes="72x72" href="/icons/fav/apple-icon-72x72.png">
-        <link rel="apple-touch-icon" sizes="76x76" href="/icons/fav/apple-icon-76x76.png">
-        <link rel="apple-touch-icon" sizes="114x114" href="/icons/fav/apple-icon-114x114.png">
-        <link rel="apple-touch-icon" sizes="120x120" href="/icons/fav/apple-icon-120x120.png">
-        <link rel="apple-touch-icon" sizes="144x144" href="/icons/fav/apple-icon-144x144.png">
-        <link rel="apple-touch-icon" sizes="152x152" href="/icons/fav/apple-icon-152x152.png">
-        <link rel="apple-touch-icon" sizes="180x180" href="/icons/fav/apple-icon-180x180.png">
-        <link rel="icon" type="image/png" sizes="192x192"  href="/icons/fav/android-icon-192x192.png">
-        <link rel="icon" type="image/png" sizes="32x32" href="/icons/fav/favicon-32x32.png">
-        <link rel="icon" type="image/png" sizes="96x96" href="/icons/fav/favicon-96x96.png">
-        <link rel="icon" type="image/png" sizes="16x16" href="/icons/fav/favicon-16x16.png">
-        <link rel="manifest" href="/icons/fav/manifest.json">
+        <link rel="apple-touch-icon" sizes="57x57" href="{{ App\Helpers\SettingsHelper::getBase() }}files/icons/fav/apple-icon-57x57.png">
+        <link rel="apple-touch-icon" sizes="60x60" href="{{ App\Helpers\SettingsHelper::getBase() }}files/icons/fav/apple-icon-60x60.png">
+        <link rel="apple-touch-icon" sizes="72x72" href="{{ App\Helpers\SettingsHelper::getBase() }}files/icons/fav/apple-icon-72x72.png">
+        <link rel="apple-touch-icon" sizes="76x76" href="{{ App\Helpers\SettingsHelper::getBase() }}files/icons/fav/apple-icon-76x76.png">
+        <link rel="apple-touch-icon" sizes="114x114" href="{{ App\Helpers\SettingsHelper::getBase() }}files/icons/fav/apple-icon-114x114.png">
+        <link rel="apple-touch-icon" sizes="120x120" href="{{ App\Helpers\SettingsHelper::getBase() }}files/icons/fav/apple-icon-120x120.png">
+        <link rel="apple-touch-icon" sizes="144x144" href="{{ App\Helpers\SettingsHelper::getBase() }}files/icons/fav/apple-icon-144x144.png">
+        <link rel="apple-touch-icon" sizes="152x152" href="{{ App\Helpers\SettingsHelper::getBase() }}files/icons/fav/apple-icon-152x152.png">
+        <link rel="apple-touch-icon" sizes="180x180" href="{{ App\Helpers\SettingsHelper::getBase() }}files/icons/fav/apple-icon-180x180.png">
+        <link rel="icon" type="image/png" sizes="192x192"  href="{{ App\Helpers\SettingsHelper::getBase() }}files/icons/fav/android-icon-192x192.png">
+        <link rel="icon" type="image/png" sizes="32x32" href="{{ App\Helpers\SettingsHelper::getBase() }}files/icons/fav/favicon-32x32.png">
+        <link rel="icon" type="image/png" sizes="96x96" href="{{ App\Helpers\SettingsHelper::getBase() }}files/icons/fav/favicon-96x96.png">
+        <link rel="icon" type="image/png" sizes="16x16" href="{{ App\Helpers\SettingsHelper::getBase() }}files/icons/fav/favicon-16x16.png">
+        <link rel="manifest" href="{{ App\Helpers\SettingsHelper::getBase() }}files/icons/fav/manifest.json">
        <meta name="msapplication-TileColor" content="#303030">
-        <meta name="msapplication-TileImage" content="/icons/fav/ms-icon-144x144.png">
+        <meta name="msapplication-TileImage" content="{{ App\Helpers\SettingsHelper::getBase() }}files/icons/fav/ms-icon-144x144.png">
        <meta name="theme-color" content="#303030">

-        <title>{{ config('app.name') }}</title>
-
-        <!-- Styles -->
-        <link rel="stylesheet" href="{{ mix('css/app.css') }}">
-
-        @routes
-
-        <script src="{{ mix('js/app.js') }}" defer></script>
+        <title>{{ $title }}</title>
    </head>
-    <body class="font-sans antialiased">
-        @inertia
+    <body>
+        <div id="main"></div>
+
+        <script src="{{ App\Helpers\SettingsHelper::getBase() }}files/js/jquery.min.js"></script>
+        <script src="{{ App\Helpers\SettingsHelper::getBase() }}files/js/popper.min.js"></script>
+        <script src="{{ App\Helpers\SettingsHelper::getBase() }}files/js/app.js?v={{ str_replace('.', '-', config('speedtest.version')) }}"></script>
    </body>
 </html>
--- a/routes/api.php
+++ b/routes/api.php
@@ -4,7 +4,6 @@ use App\Helpers\SpeedtestHelper;
 use App\Http\Controllers\AuthController;
 use App\Http\Controllers\BackupController;
 use App\Http\Controllers\HomepageDataController;
-use App\Http\Controllers\IntegrationsController;
 use App\Http\Controllers\SettingsController;
 use App\Http\Controllers\SpeedtestController;
 use App\Http\Controllers\UpdateController;
@@ -79,9 +78,9 @@ Route::group([
 ], function () {
    Route::get('/config', [SettingsController::class, 'config'])
        ->name('settings.config');
-    Route::get('/test-notification', [IntegrationsController::class, 'testNotification'])
+    Route::get('/test-notification', 'IntegrationsController@testNotification')
        ->name('settings.test_notification');
-    Route::get('/test-healthchecks/{method}', [IntegrationsController::class, 'testHealthchecks'])
+    Route::get('/test-healthchecks/{method}', 'IntegrationsController@testHealthchecks')
        ->name('settings.test_notification');
    Route::get('/', [SettingsController::class, 'index'])
        ->name('settings.index');
--- a/routes/web.php
+++ b/routes/web.php
@@ -5,7 +5,6 @@ use GuzzleHttp\Psr7\MimeType;
 use Illuminate\Support\Facades\File;
 use Illuminate\Support\Facades\Response;
 use Illuminate\Support\Facades\Route;
-use Inertia\Inertia;

 /*
 |--------------------------------------------------------------------------
@@ -18,6 +17,20 @@ use Inertia\Inertia;
 |
 */

-Route::get('/', function () {
-    return Inertia::render('Home');
-});
+Route::get(SettingsHelper::getBase() . 'files/{path?}', function ($file) {
+    $fileP = explode('?', $file)[0];
+    $fileP = public_path() . '/' . $fileP;
+    if (file_exists($fileP)) {
+        $contents = File::get($fileP);
+        $mime = MimeType::fromFilename($fileP);
+        return Response::make(File::get($fileP), 200, ['Content-type' => $mime]);
+    } else {
+        abort(404);
+    }
+})->where('path', '.*')
+    ->name('files');
+
+Route::get('/{path?}', function () {
+    return view('app', ['title' => SettingsHelper::get('app_name')->value]);
+})->where('path', '^((?!\/api\/).)*$')
+    ->name('react');
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,11 +0,0 @@
-module.exports = {
-  purge: [],
-  darkMode: false, // or 'media' or 'class'
-  theme: {
-    extend: {},
-  },
-  variants: {
-    extend: {},
-  },
-  plugins: [],
-}
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,9 +0,0 @@
-const path = require('path');
-
-module.exports = {
-    resolve: {
-        alias: {
-            '@': path.resolve('resources/js'),
-        },
-    },
-};
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -1,7 +1,4 @@
-const mix = require("laravel-mix");
-
-require("laravel-mix-tailwind");
-
+const mix = require('laravel-mix');

 /*
 |--------------------------------------------------------------------------
@@ -14,18 +11,5 @@ require("laravel-mix-tailwind");
 |
 */

-mix.js("resources/js/app.js", "public/js")
-    .vue()
-    .webpackConfig(require("./webpack.config"))
-    .version();
-
-mix.sass("resources/sass/app.scss", "public/css")
-    .options({
-        processCssUrls: false,
-        imgLoaderOptions: {
-            enabled: false,
-        },
-    })
-    .sass("resources/sass/tailwind-utilities.scss", "public/css/app.css")
-    .tailwind("./tailwind.config.js")
-    .version();
+mix.react('resources/js/app.js', 'public/js')
+   .sass('resources/sass/app.scss', 'public/css');
Author	SHA1	Message	Date
Henry Whitaker	fe6b96d7eb	fix scheduled job injection	2023-06-25 10:11:46 +01:00
Henry Whitaker	4e649b24f3	fix crontab not using correct php bin	2023-06-25 09:59:34 +01:00
Henry Whitaker	14fd1b688e	update readme	2023-06-25 06:03:45 +01:00
Henry Whitaker	0e105ff8f3	update workflow	2023-06-25 05:54:39 +01:00
Henry Whitaker	5fd47d7494	Merge pull request #1124 from henrywhitaker3/fix/1119	2023-06-25 05:52:14 +01:00
Henry Whitaker	724a9f1bc5	update arm dockerfile	2023-06-25 05:49:21 +01:00
Henry Whitaker	f18f250dcc	update php version in actions	2023-06-25 05:34:55 +01:00
Henry Whitaker	ea79ce4fb5	fix nginx conf and arm loc	2023-06-25 05:28:06 +01:00
Henry Whitaker	544a8ada31	bump version	2023-06-25 04:58:42 +01:00
Henry Whitaker	35a72132d8	updated to run on php8	2023-06-25 04:55:47 +01:00
Henry Whitaker	ba8fc9ec4c	bump to php 8	2023-06-25 04:13:37 +01:00