Moved notification settings to DB

app/Console/Commands/GetConfig.php

@@ -0,0 +1,43 @@
+<?php
+
+namespace App\Console\Commands;
+
+use App\Helpers\SettingsHelper;
+use Illuminate\Console\Command;
+
+class GetConfig extends Command
+{
+    /**
+     * The name and signature of the console command.
+     *
+     * @var string
+     */
+    protected $signature = 'speedtest:config';
+
+    /**
+     * The console command description.
+     *
+     * @var string
+     */
+    protected $description = 'Get the application configuration';
+
+    /**
+     * Create a new command instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        parent::__construct();
+    }
+
+    /**
+     * Execute the console command.
+     *
+     * @return int
+     */
+    public function handle()
+    {
+        $this->info(json_encode(SettingsHelper::getConfig(), JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES));
+    }
+}

app/Console/Commands/SetSlackWebhook.php

@@ -0,0 +1,47 @@
+<?php
+
+namespace App\Console\Commands;
+
+use App\Helpers\SettingsHelper;
+use Illuminate\Console\Command;
+
+class SetSlackWebhook extends Command
+{
+    /**
+     * The name and signature of the console command.
+     *
+     * @var string
+     */
+    protected $signature = 'speedtest:slack {webhook : The slack webhook to store}';
+
+    /**
+     * The console command description.
+     *
+     * @var string
+     */
+    protected $description = 'Set the slack webhook setting';
+
+    /**
+     * Create a new command instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        parent::__construct();
+    }
+
+    /**
+     * Execute the console command.
+     *
+     * @return int
+     */
+    public function handle()
+    {
+        $webhook = $this->argument('webhook');
+
+        SettingsHelper::set('slack_webhook', $webhook);
+
+        $this->info('Slack webhook updated');
+    }
+}

app/Console/Commands/SetTelegramOptions.php

@@ -0,0 +1,51 @@
+<?php
+
+namespace App\Console\Commands;
+
+use App\Helpers\SettingsHelper;
+use Illuminate\Console\Command;
+
+class SetTelegramOptions extends Command
+{
+    /**
+     * The name and signature of the console command.
+     *
+     * @var string
+     */
+    protected $signature = 'speedtest:telegram
+                            {--bot= : The telegram bot token}
+                            {--chat= : The telegram chat ID}';
+
+    /**
+     * The console command description.
+     *
+     * @var string
+     */
+    protected $description = 'Set the telegram settings';
+
+    /**
+     * Create a new command instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        parent::__construct();
+    }
+
+    /**
+     * Execute the console command.
+     *
+     * @return int
+     */
+    public function handle()
+    {
+        $bot = $this->option('bot');
+        $chat = $this->option('chat');
+
+        SettingsHelper::set('telegram_bot_token', $bot);
+        SettingsHelper::set('telegram_chat_id', $chat);
+
+        $this->info('Telegram options updated');
+    }
+}

app/Console/Commands/TestNotification.php

@@ -0,0 +1,43 @@
+<?php
+
+namespace App\Console\Commands;
+
+use App\Helpers\SettingsHelper;
+use Illuminate\Console\Command;
+
+class TestNotification extends Command
+{
+    /**
+     * The name and signature of the console command.
+     *
+     * @var string
+     */
+    protected $signature = 'speedtest:notification';
+
+    /**
+     * The console command description.
+     *
+     * @var string
+     */
+    protected $description = 'Send test notifications to all notification agents';
+
+    /**
+     * Create a new command instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        parent::__construct();
+    }
+
+    /**
+     * Execute the console command.
+     *
+     * @return int
+     */
+    public function handle()
+    {
+        SettingsHelper::testNotification();
+    }
+}

app/Events/TestNotificationEvent.php

@@ -0,0 +1,38 @@
+<?php
+
+namespace App\Events;
+
+use Illuminate\Broadcasting\Channel;
+use Illuminate\Broadcasting\InteractsWithSockets;
+use Illuminate\Broadcasting\PresenceChannel;
+use Illuminate\Broadcasting\PrivateChannel;
+use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
+use Illuminate\Foundation\Events\Dispatchable;
+use Illuminate\Queue\SerializesModels;
+
+class TestNotificationEvent
+{
+    use Dispatchable, InteractsWithSockets, SerializesModels;
+
+    public $agents;
+
+    /**
+     * Create a new event instance.
+     *
+     * @return void
+     */
+    public function __construct($agents)
+    {
+        $this->agents = $agents;
+    }
+
+    /**
+     * Get the channels the event should broadcast on.
+     *
+     * @return \Illuminate\Broadcasting\Channel|array
+     */
+    public function broadcastOn()
+    {
+        return new PrivateChannel('channel-name');
+    }
+}

app/Helpers/SettingsHelper.php

@@ -2,6 +2,7 @@
 
 namespace App\Helpers;
 
+use App\Events\TestNotificationEvent;
 use App\Setting;
 use Carbon\Carbon;
 
@@ -38,10 +39,11 @@ class SettingsHelper {
     {
         $setting = SettingsHelper::get($name);
 
+        if($value == false) {
+            $value = "0";
+        }
+
         if($setting !== false) {
-            if($value == false) {
-                $value = "0";
-            }
             $setting->value = $value;
             $setting->save();
         } else {
@@ -74,4 +76,75 @@ class SettingsHelper {
         }
         return $base;
     }
+
+    /**
+     * Check whether a setting is defined in ENV vars or through DB
+     *
+     * @param string $key
+     * @return boolean
+     */
+    public static function settingIsEditable(string $key)
+    {
+        // Try exact key
+        $val = exec('echo $' . $key);
+
+        if($val == "") {
+            return true;
+        }
+
+        // Try key all caps
+        $val = exec('echo $' . strtoupper($key));
+
+        if($val == "") {
+            return true;
+        }
+
+        return false;
+    }
+
+    /**
+     * Get the application config
+     *
+     * @return array
+     */
+    public static function getConfig()
+    {
+        return [
+            'base' => SettingsHelper::getBase(),
+            'graphs' => [
+                'download_upload_graph_enabled' => SettingsHelper::get('download_upload_graph_enabled'),
+                'download_upload_graph_width' => SettingsHelper::get('download_upload_graph_width'),
+                'ping_graph_enabled' => SettingsHelper::get('ping_graph_enabled'),
+                'ping_graph_width' => SettingsHelper::get('ping_graph_width'),
+                'failure_graph_enabled' => SettingsHelper::get('failure_graph_enabled'),
+                'failure_graph_width' => SettingsHelper::get('failure_graph_width'),
+            ],
+            'editable' => [
+                'slack_webhook' => SettingsHelper::settingIsEditable('slack_webhook'),
+                'telegram_bot_token' => SettingsHelper::settingIsEditable('telegram_bot_token'),
+                'telegram_chat_id' => SettingsHelper::settingIsEditable('telegram_chat_id'),
+            ]
+        ];
+    }
+
+    /**
+     * Send test notification to agents
+     *
+     * @param boolean|string $agent
+     * @return void
+     */
+    public static function testNotification($agent = true)
+    {
+        $agents = [ 'slack', 'telegram' ];
+
+        if($agent === true) {
+            event(new TestNotificationEvent($agents));
+            return true;
+        }
+
+        if(in_array($agent, $agents)) {
+            event(new TestNotificationEvent([ $agent ]));
+            return true;
+        }
+    }
 }

app/Http/Controllers/SettingsController.php

@@ -6,6 +6,7 @@ use App\Helpers\SettingsHelper;
 use App\Rules\Cron;
 use App\Setting;
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Log;
 use Illuminate\Support\Facades\Validator;
 
 class SettingsController extends Controller
@@ -100,7 +101,17 @@ class SettingsController extends Controller
                     ], 422);
                 }
             }
-            $setting = SettingsHelper::set($d['name'], $d['value']);
+
+            $setting = SettingsHelper::get($d['name']);
+
+            if($setting == false) {
+                $setting = SettingsHelper::set($d['name'], $d['value']);
+            } else if($setting->editable == true) {
+                $setting = SettingsHelper::set($d['name'], $d['value']);
+            } else {
+                continue;
+            }
+
             array_push($settings, $setting);
         }
 
@@ -117,18 +128,15 @@ class SettingsController extends Controller
      */
     public function config()
     {
+        return SettingsHelper::getConfig();
+    }
 
+    public function testNotification()
+    {
+        SettingsHelper::testNotification();
 
-        $config = [
+        return response()->json([
-            'base' => SettingsHelper::getBase(),
+            'method' => 'test notificaiton agents'
-            'download_upload_graph_enabled' => SettingsHelper::get('download_upload_graph_enabled'),
+        ], 200);
-            'download_upload_graph_width' => SettingsHelper::get('download_upload_graph_width'),
-            'ping_graph_enabled' => SettingsHelper::get('ping_graph_enabled'),
-            'ping_graph_width' => SettingsHelper::get('ping_graph_width'),
-            'failure_graph_enabled' => SettingsHelper::get('failure_graph_enabled'),
-            'failure_graph_width' => SettingsHelper::get('failure_graph_width'),
-        ];
-
-        return $config;
     }
 }

app/Jobs/SpeedtestJob.php

@@ -37,9 +37,7 @@ class SpeedtestJob implements ShouldQueue
     {
         $output = SpeedtestHelper::output();
         $speedtest = SpeedtestHelper::runSpeedtest($output, $this->scheduled);
-        Log::info($speedtest);
         if($speedtest == false) {
-            Log::info('speedtest == false');
             event(new SpeedtestFailedEvent());
         } else {
             event(new SpeedtestCompleteEvent($speedtest));

app/Listeners/SpeedtestCompleteListener.php

@@ -34,9 +34,9 @@ class SpeedtestCompleteListener
     {
         if(SettingsHelper::get('speedtest_notifications')->value == true) {
             $data = $event->speedtest;
-            if(env('SLACK_WEBHOOK')) {
+            if(SettingsHelper::get('slack_webhook')) {
                 try {
-                    Notification::route('slack', env('SLACK_WEBHOOK'))
+                    Notification::route('slack', SettingsHelper::get('slack_webhook')->value)
                                 ->notify(new SpeedtestCompleteSlack($data));
                 } catch(Exception $e) {
                     Log::notice('Your sleck webhook is invalid');
@@ -44,9 +44,10 @@ class SpeedtestCompleteListener
                 }
             }
 
-            if(env('TELEGRAM_BOT_TOKEN') && env('TELEGRAM_CHAT_ID')) {
+            if(SettingsHelper::get('telegram_bot_token') && SettingsHelper::get('telegram_chat_id')) {
                 try {
-                    Notification::route(TelegramChannel::class, env('TELEGRAM_CHAT_ID'))
+                    config([ 'services.telegram-bot-api' => [ 'token' => SettingsHelper::get('telegram_bot_token')->value ] ]);
+                    Notification::route(TelegramChannel::class, SettingsHelper::get('telegram_chat_id')->value)
                                 ->notify(new SpeedtestCompleteTelegram($data));
                 } catch(Exception $e) {
                     Log::notice('Your telegram settings are invalid');

app/Listeners/SpeedtestFailedListener.php

@@ -31,9 +31,9 @@ class SpeedtestFailedListener
      */
     public function handle($event)
     {
-        if(env('SLACK_WEBHOOK')) {
+        if(SettingsHelper::get('slack_webhook')) {
             try {
-                Notification::route('slack', env('SLACK_WEBHOOK'))
+                Notification::route('slack', SettingsHelper::get('slack_webhook')->value)
                             ->notify(new SpeedtestFailedSlack());
             } catch(Exception $e) {
                 Log::notice('Your sleck webhook is invalid');
@@ -41,9 +41,10 @@ class SpeedtestFailedListener
             }
         }
 
-        if(env('TELEGRAM_BOT_TOKEN') && env('TELEGRAM_CHAT_ID')) {
+        if(SettingsHelper::get('telegram_bot_token') && SettingsHelper::get('telegram_chat_id')) {
             try {
-                Notification::route(TelegramChannel::class, env('TELEGRAM_CHAT_ID'))
+                config([ 'services.telegram-bot-api' => [ 'token' => SettingsHelper::get('telegram_bot_token')->value ] ]);
+                Notification::route(TelegramChannel::class, SettingsHelper::get('telegram_chat_id')->value)
                             ->notify(new SpeedtestFailedTelegram());
             } catch(Exception $e) {
                 Log::notice('Your telegram settings are invalid');

app/Listeners/SpeedtestOverviewListener.php

@@ -35,9 +35,9 @@ class SpeedtestOverviewListener
     {
         if(SettingsHelper::get('speedtest_overview_notification')->value == true) {
             $data = SpeedtestHelper::last24Hours();
-            if(env('SLACK_WEBHOOK')) {
+            if(SettingsHelper::get('slack_webhook')) {
                 try {
-                    Notification::route('slack', env('SLACK_WEBHOOK'))
+                    Notification::route('slack', SettingsHelper::get('slack_webhook')->value)
                                 ->notify(new SpeedtestOverviewSlack($data));
                 } catch(Exception $e) {
                     Log::notice('Your sleck webhook is invalid');
@@ -45,9 +45,10 @@ class SpeedtestOverviewListener
                 }
             }
 
-            if(env('TELEGRAM_BOT_TOKEN') && env('TELEGRAM_CHAT_ID')) {
+            if(SettingsHelper::get('telegram_bot_token') && SettingsHelper::get('telegram_chat_id')) {
                 try {
-                    Notification::route(TelegramChannel::class, env('TELEGRAM_CHAT_ID'))
+                    config([ 'services.telegram-bot-api' => [ 'token' => SettingsHelper::get('telegram_bot_token')->value ] ]);
+                    Notification::route(TelegramChannel::class, SettingsHelper::get('telegram_chat_id')->value)
                                 ->notify(new SpeedtestOverviewTelegram($data));
                 } catch(Exception $e) {
                     Log::notice('Your telegram settings are invalid');

app/Listeners/TestNotificationListener.php

@@ -0,0 +1,84 @@
+<?php
+
+namespace App\Listeners;
+
+use App\Helpers\SettingsHelper;
+use App\Notifications\TestSlackNotification;
+use App\Notifications\TestTelegramNotification;
+use Exception;
+use Illuminate\Contracts\Queue\ShouldQueue;
+use Illuminate\Queue\InteractsWithQueue;
+use Illuminate\Support\Facades\Log;
+use Illuminate\Support\Facades\Notification;
+use NotificationChannels\Telegram\TelegramChannel;
+
+class TestNotificationListener
+{
+    private $agents;
+
+    /**
+     * Create the event listener.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Handle the event.
+     *
+     * @param  object  $event
+     * @return void
+     */
+    public function handle($event)
+    {
+        foreach($event->agents as $agent) {
+            if($agent == 'slack') {
+                $this->slackNotification();
+            }
+
+            if($agent == 'telegram') {
+                $this->telegramNotification();
+            }
+        }
+    }
+
+    /**
+     * Send a slack notification
+     *
+     * @return void
+     */
+    private function slackNotification()
+    {
+        if(SettingsHelper::get('slack_webhook')) {
+            try {
+                Notification::route('slack', SettingsHelper::get('slack_webhook')->value)
+                            ->notify(new TestSlackNotification());
+            } catch(Exception $e) {
+                Log::notice('Your sleck webhook is invalid');
+                Log::notice($e);
+            }
+        }
+    }
+
+    /**
+     * Send a telegram notification
+     *
+     * @return void
+     */
+    private function telegramNotification()
+    {
+        if(SettingsHelper::get('telegram_bot_token') && SettingsHelper::get('telegram_chat_id')) {
+            try {
+                config([ 'services.telegram-bot-api' => [ 'token' => SettingsHelper::get('telegram_bot_token')->value ] ]);
+                Notification::route(TelegramChannel::class, SettingsHelper::get('telegram_bot_token')->value)
+                            ->notify(new TestTelegramNotification());
+            } catch(Exception $e) {
+                Log::notice('Your telegram settings are invalid');
+                Log::notice($e);
+            }
+        }
+    }
+}

app/Notifications/SpeedtestCompleteTelegram.php

@@ -2,6 +2,7 @@
 
 namespace App\Notifications;
 
+use App\Helpers\SettingsHelper;
 use Illuminate\Bus\Queueable;
 use Illuminate\Contracts\Queue\ShouldQueue;
 use Illuminate\Notifications\Messages\MailMessage;
@@ -40,7 +41,7 @@ class SpeedtestCompleteTelegram extends Notification
     }
 
     /**
-     * Format tekegram notification
+     * Format telegram notification
      *
      * @param   mixed   $notifiable
      * @return  TelegramMessage
@@ -53,7 +54,7 @@ Ping: *$speedtest->ping*
 Download: *$speedtest->download*
 Upload: *$speedtest->upload*";
         return TelegramMessage::create()
-                              ->to(env('TELEGRAM_CHAT_ID'))
+                              ->to(SettingsHelper::get('telegram_chat_id')->value)
                               ->content($msg)
                               ->options(['parse_mode' => 'Markdown']);
     }

app/Notifications/SpeedtestFailedTelegram.php

@@ -2,6 +2,7 @@
 
 namespace App\Notifications;
 
+use App\Helpers\SettingsHelper;
 use Illuminate\Bus\Queueable;
 use Illuminate\Contracts\Queue\ShouldQueue;
 use Illuminate\Notifications\Messages\MailMessage;
@@ -40,7 +41,7 @@ class SpeedtestFailedTelegram extends Notification implements ShouldQueue
     {
         $msg = "Error: something went wrong running your speedtest";
         return TelegramMessage::create()
-                              ->to(env('TELEGRAM_CHAT_ID'))
+                              ->to(SettingsHelper::get('telegram_chat_id')->value)
                               ->content($msg)
                               ->options(['parse_mode' => 'Markdown']);
     }

app/Notifications/SpeedtestOverviewTelegram.php

@@ -2,6 +2,7 @@
 
 namespace App\Notifications;
 
+use App\Helpers\SettingsHelper;
 use Illuminate\Bus\Queueable;
 use Illuminate\Contracts\Queue\ShouldQueue;
 use Illuminate\Notifications\Messages\MailMessage;
@@ -53,7 +54,7 @@ Average ping: *".$data["ping"]."*
 Average download: *".$data["download"]."*
 Average upload: *".$data["upload"]."*";
         return TelegramMessage::create()
-                              ->to(env('TELEGRAM_CHAT_ID'))
+                              ->to(SettingsHelper::get('telegram_chat_id')->value)
                               ->content($msg)
                               ->options(['parse_mode' => 'Markdown']);
     }

app/Notifications/TestSlackNotification.php

@@ -0,0 +1,65 @@
+<?php
+
+namespace App\Notifications;
+
+use Illuminate\Bus\Queueable;
+use Illuminate\Contracts\Queue\ShouldQueue;
+use Illuminate\Notifications\Messages\MailMessage;
+use Illuminate\Notifications\Messages\SlackMessage;
+use Illuminate\Notifications\Notification;
+
+class TestSlackNotification extends Notification
+{
+    use Queueable;
+
+    /**
+     * Create a new notification instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the notification's delivery channels.
+     *
+     * @param  mixed  $notifiable
+     * @return array
+     */
+    public function via($notifiable)
+    {
+        return [
+            'slack'
+        ];
+    }
+
+    /**
+     * Format slack notification
+     *
+     * @param   mixed   $notifiable
+     * @return  SlackMessage
+     */
+    public function toSlack($notifiable)
+    {
+        return (new SlackMessage)
+                ->warning()
+                ->attachment(function ($attachment) {
+                    $attachment->title('Test notification');
+                });
+    }
+
+    /**
+     * Get the array representation of the notification.
+     *
+     * @param  mixed  $notifiable
+     * @return array
+     */
+    public function toArray($notifiable)
+    {
+        return [
+            //
+        ];
+    }
+}

app/Notifications/TestTelegramNotification.php

@@ -0,0 +1,67 @@
+<?php
+
+namespace App\Notifications;
+
+use App\Helpers\SettingsHelper;
+use Illuminate\Bus\Queueable;
+use Illuminate\Contracts\Queue\ShouldQueue;
+use Illuminate\Notifications\Messages\MailMessage;
+use Illuminate\Notifications\Notification;
+use NotificationChannels\Telegram\TelegramChannel;
+use NotificationChannels\Telegram\TelegramMessage;
+
+class TestTelegramNotification extends Notification
+{
+    use Queueable;
+
+    /**
+     * Create a new notification instance.
+     *
+     * @return void
+     */
+    public function __construct()
+    {
+        //
+    }
+
+    /**
+     * Get the notification's delivery channels.
+     *
+     * @param  mixed  $notifiable
+     * @return array
+     */
+    public function via($notifiable)
+    {
+        return [
+            TelegramChannel::class
+        ];
+    }
+
+    /**
+     * Format tekegram notification
+     *
+     * @param   mixed   $notifiable
+     * @return  TelegramMessage
+     */
+    public function toTelegram($notifiable)
+    {
+        $msg = "Test notification";
+        return TelegramMessage::create()
+                              ->to(SettingsHelper::get('telegram_chat_id')->value)
+                              ->content($msg)
+                              ->options(['parse_mode' => 'Markdown']);
+    }
+
+    /**
+     * Get the array representation of the notification.
+     *
+     * @param  mixed  $notifiable
+     * @return array
+     */
+    public function toArray($notifiable)
+    {
+        return [
+            //
+        ];
+    }
+}

app/Providers/EventServiceProvider.php

@@ -5,9 +5,11 @@ namespace App\Providers;
 use App\Events\SpeedtestCompleteEvent;
 use App\Events\SpeedtestFailedEvent;
 use App\Events\SpeedtestOverviewEvent;
+use App\Events\TestNotificationEvent;
 use App\Listeners\SpeedtestCompleteListener;
 use App\Listeners\SpeedtestFailedListener;
 use App\Listeners\SpeedtestOverviewListener;
+use App\Listeners\TestNotificationListener;
 use Illuminate\Auth\Events\Registered;
 use Illuminate\Auth\Listeners\SendEmailVerificationNotification;
 use Illuminate\Foundation\Support\Providers\EventServiceProvider as ServiceProvider;
@@ -33,6 +35,9 @@ class EventServiceProvider extends ServiceProvider
         SpeedtestFailedEvent::class => [
             SpeedtestFailedListener::class
         ],
+        TestNotificationEvent::class => [
+            TestNotificationListener::class
+        ]
     ];
 
     /**

app/Setting.php

@@ -2,6 +2,7 @@
 
 namespace App;
 
+use App\Helpers\SettingsHelper;
 use Illuminate\Database\Eloquent\Model;
 
 class Setting extends Model
@@ -16,4 +17,11 @@ class Setting extends Model
     ];
 
     protected $table = 'settings';
+
+    protected $attributes = [ 'editable' ];
+
+    public function getEditableAttribute()
+    {
+        return SettingsHelper::settingIsEditable($this->name);
+    }
 }

public/css/main.css

@@ -59,3 +59,7 @@
 .home-graph {
     height: 480px;
 }
+
+.form-control:disabled {
+    cursor: not-allowed;
+}

public/js/app.js

@@ -129337,8 +129337,7 @@ var HistoryGraph = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "getData", function () {
       var days = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.state.days;
       axios__WEBPACK_IMPORTED_MODULE_2___default.a.get('api/settings/config').then(function (resp) {
-        var data = resp.data;
+        var data = resp.data.graphs;
-        console.log(data);
 
         _this.setState({
           graph_ul_dl_enabled: Boolean(Number(data.download_upload_graph_enabled.value)),
@@ -129412,10 +129411,6 @@ var HistoryGraph = /*#__PURE__*/function (_Component) {
       var failData = this.state.failData;
       var failOptions = this.state.failOptions;
       var days = this.state.days;
-      console.log(failData);
-      console.log(failOptions);
-      console.log(pingData);
-      console.log(pingOptions);
       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;
@@ -130629,7 +130624,9 @@ var SettingWithModal = /*#__PURE__*/function (_Component) {
       axios__WEBPACK_IMPORTED_MODULE_3___default.a.post(url, data).then(function (resp) {
         react_toastify__WEBPACK_IMPORTED_MODULE_4__["toast"].success(_this.state.title + ' updated');
 
-        _this.toggleShow();
+        if (_this.state.autoClose) {
+          _this.toggleShow();
+        }
       })["catch"](function (err) {
         if (err.response.status == 422) {
           react_toastify__WEBPACK_IMPORTED_MODULE_4__["toast"].error('Your input was invalid');
@@ -130682,7 +130679,8 @@ var SettingWithModal = /*#__PURE__*/function (_Component) {
       title: _this.props.title,
       description: _this.props.description,
       settings: _this.props.settings,
-      show: false
+      show: false,
+      autoClose: _this.props.autoClose
     };
     return _this;
   }
@@ -130716,71 +130714,125 @@ var SettingWithModal = /*#__PURE__*/function (_Component) {
         name[0] = _this2.ucfirst(name[0]);
         name = name.join(' ');
 
+        if (e.obj.description == null) {
+          var sm = {
+            span: 12
+          };
+          var md = {
+            span: 12
+          };
+        } else {
+          var sm = {
+            span: 12
+          };
+          var md = {
+            span: 6
+          };
+        }
+
+        var readonly = false;
+
+        if (window.config.editable[e.obj.name] == false) {
+          readonly = true;
+        }
+
         if (e.type == 'checkbox') {
           return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Row"], {
             key: e.obj.id,
             className: "d-flex align-items-center"
           }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Col"], {
-            md: {
+            md: md,
-              span: 6
+            sm: sm
-            },
-            sm: {
-              span: 12
-            }
           }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Form"].Group, {
             controlId: e.obj.name
-          }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Form"].Check, {
+          }, readonly ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Form"].Check, {
+            type: "checkbox",
+            disabled: true,
+            label: name,
+            defaultChecked: Boolean(Number(e.obj.value)),
+            onInput: _this2.updateValue
+          }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Form"].Text, {
+            className: "text-muted"
+          }, "This setting is defined as an env variable and is not editable.")) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Form"].Check, {
             type: "checkbox",
             label: name,
             defaultChecked: Boolean(Number(e.obj.value)),
             onInput: _this2.updateValue
-          }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Col"], {
+          }))), e.description == null && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Col"], {
-            md: {
+            md: md,
-              span: 6
+            sm: sm
-            },
-            sm: {
-              span: 12
-            }
           }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("p", null, e.obj.description)));
         } else if (e.type == 'number') {
           return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Row"], {
             key: e.obj.id
           }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Col"], {
-            md: {
+            md: md,
-              span: 6
+            sm: sm
-            },
-            sm: {
-              span: 12
-            }
           }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Form"].Group, {
             controlId: e.obj.name
-          }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Form"].Label, null, name), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Form"].Control, {
+          }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Form"].Label, null, name), readonly ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Form"].Control, {
+            type: "number",
+            disabled: true,
+            min: e.min,
+            max: e.max,
+            defaultValue: e.obj.value,
+            onInput: _this2.updateValue
+          }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Form"].Text, {
+            className: "text-muted"
+          }, "This setting is defined as an env variable and is not editable.")) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Form"].Control, {
             type: "number",
             min: e.min,
             max: e.max,
             defaultValue: e.obj.value,
             onInput: _this2.updateValue
-          }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Col"], {
+          }))), e.description == null && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Col"], {
-            md: {
+            md: md,
-              span: 6
+            sm: sm
-            },
+          }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("p", null, e.obj.description)));
-            sm: {
+        } else if (e.type == 'text') {
-              span: 12
+          return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Row"], {
-            }
+            key: e.obj.id
+          }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Col"], {
+            md: md,
+            sm: sm
+          }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Form"].Group, {
+            controlId: e.obj.name
+          }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Form"].Label, null, name), readonly ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Form"].Control, {
+            type: "text",
+            disabled: true,
+            defaultValue: e.obj.value,
+            onInput: _this2.updateValue
+          }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Form"].Text, {
+            className: "text-muted"
+          }, "This setting is defined as an env variable and is not editable.")) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Form"].Control, {
+            type: "text",
+            defaultValue: e.obj.value,
+            onInput: _this2.updateValue
+          }))), e.description == null && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Col"], {
+            md: md,
+            sm: sm
           }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("p", null, e.obj.description)));
         } else if (e.type == 'select') {
           return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Row"], {
             key: e.obj.id
           }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Col"], {
-            md: {
+            md: md,
-              span: 6
+            sm: sm
-            },
-            sm: {
-              span: 12
-            }
           }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Form"].Group, {
             controlId: e.obj.name
-          }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Form"].Label, null, name), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Form"].Control, {
+          }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Form"].Label, null, name), readonly ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Form"].Control, {
+            as: "select",
+            disabled: true,
+            defaultValue: e.obj.value,
+            onInput: _this2.updateValue
+          }, e.options.map(function (e, i) {
+            return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("option", {
+              key: i,
+              value: e.value
+            }, e.name);
+          })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Form"].Text, {
+            className: "text-muted"
+          }, "This setting is defined as an env variable and is not editable.")) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Form"].Control, {
             as: "select",
             defaultValue: e.obj.value,
             onInput: _this2.updateValue
@@ -130789,13 +130841,23 @@ var SettingWithModal = /*#__PURE__*/function (_Component) {
               key: i,
               value: e.value
             }, e.name);
-          })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Col"], {
+          })))), e.description == null && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Col"], {
-            md: {
+            md: md,
-              span: 6
+            sm: sm
-            },
+          }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("p", null, e.obj.description)));
-            sm: {
+        } else if (e.type == 'button-get') {
-              span: 12
+          return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Row"], {
+            key: e.obj.id
+          }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Col"], {
+            md: md,
+            sm: sm
+          }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("p", null, name), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Button"], {
+            onClick: function onClick() {
+              axios__WEBPACK_IMPORTED_MODULE_3___default.a.get(e.url);
             }
+          }, name)), e.description == null && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Col"], {
+            md: md,
+            sm: sm
           }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("p", null, e.obj.description)));
         }
       }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_bootstrap__WEBPACK_IMPORTED_MODULE_2__["Button"], {
@@ -130952,6 +131014,7 @@ var Settings = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_SettingWithModal__WEBPACK_IMPORTED_MODULE_6__["default"], {
         title: "Graph settings",
         description: "Control settings for the graphs.",
+        autoClose: true,
         settings: [{
           obj: e.download_upload_graph_enabled,
           type: 'checkbox'
@@ -131005,7 +131068,25 @@ var Settings = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_SettingWithModal__WEBPACK_IMPORTED_MODULE_6__["default"], {
         title: "Notification settings",
         description: "Control which types of notifications the server sends.",
+        autoClose: false,
         settings: [{
+          obj: e.slack_webhook,
+          type: 'text'
+        }, {
+          obj: e.telegram_bot_token,
+          type: 'text'
+        }, {
+          obj: e.telegram_chat_id,
+          type: 'text'
+        }, {
+          obj: {
+            id: Math.floor(Math.random() * 10000) + 1,
+            name: "Test notifications",
+            description: "After saving your updated notification settings, use this to check your settings are correct."
+          },
+          type: 'button-get',
+          url: 'api/settings/test-notification'
+        }, {
           obj: e.speedtest_notifications,
           type: 'checkbox'
         }, {

resources/js/components/Graphics/HistoryGraph.js

@@ -225,8 +225,7 @@ export default class HistoryGraph extends Component {
     getData = (days = this.state.days) => {
         Axios.get('api/settings/config')
         .then((resp) => {
-            var data = resp.data;
+            var data = resp.data.graphs;
-            console.log(data)
             this.setState({
                 graph_ul_dl_enabled: Boolean(Number(data.download_upload_graph_enabled.value)),
                 graph_ul_dl_width: data.download_upload_graph_width.value,
@@ -274,11 +273,6 @@ export default class HistoryGraph extends Component {
         var failOptions = this.state.failOptions;
         var days = this.state.days;
 
-        console.log(failData);
-        console.log(failOptions);
-        console.log(pingData);
-        console.log(pingOptions);
-
         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;

resources/js/components/Home/SettingWithModal.js

@@ -12,7 +12,8 @@ export default class SettingWithModal extends Component {
             title: this.props.title,
             description: this.props.description,
             settings: this.props.settings,
-            show: false
+            show: false,
+            autoClose: this.props.autoClose
         }
     }
 
@@ -40,7 +41,9 @@ export default class SettingWithModal extends Component {
         Axios.post(url, data)
         .then((resp) => {
             toast.success(this.state.title + ' updated');
-            this.toggleShow();
+            if(this.state.autoClose) {
+                this.toggleShow();
+            }
         })
         .catch((err) => {
             if(err.response.status == 422) {
@@ -111,51 +114,135 @@ export default class SettingWithModal extends Component {
                             var name = e.obj.name.split('_');
                             name[0] = this.ucfirst(name[0]);
                             name = name.join(' ');
+
+                            if(e.obj.description == null) {
+                                var sm = { span: 12 };
+                                var md = { span: 12 };
+                            } else {
+                                var sm = { span: 12 };
+                                var md = { span: 6 };
+                            }
+
+                            var readonly = false;
+                            if(window.config.editable[e.obj.name] == false) {
+                                readonly = true;
+                            }
+
                             if(e.type == 'checkbox') {
                                 return (
                                     <Row key={e.obj.id} className="d-flex align-items-center">
-                                        <Col  md={{ span: 6 }} sm={{ span: 12 }}>
+                                        <Col  md={md} sm={sm}>
                                             <Form.Group controlId={e.obj.name}>
-                                                <Form.Check type="checkbox" label={name} defaultChecked={Boolean(Number(e.obj.value))} onInput={this.updateValue} />
+                                                {readonly ?
+                                                    <>
+                                                        <Form.Check type="checkbox" disabled label={name} defaultChecked={Boolean(Number(e.obj.value))} onInput={this.updateValue} />
+                                                        <Form.Text className="text-muted">This setting is defined as an env variable and is not editable.</Form.Text>
+                                                    </>
+                                                :
+                                                    <Form.Check type="checkbox" label={name} defaultChecked={Boolean(Number(e.obj.value))} onInput={this.updateValue} />
+                                                }
                                             </Form.Group>
                                         </Col>
-                                        <Col md={{ span: 6 }} sm={{ span: 12 }}>
+                                        {e.description == null &&
-                                            <p>{e.obj.description}</p>
+                                            <Col md={md} sm={sm}>
-                                        </Col>
+                                                <p>{e.obj.description}</p>
+                                            </Col>
+                                        }
                                     </Row>
                                 );
                             } else if(e.type == 'number') {
                                 return (
                                     <Row key={e.obj.id}>
-                                        <Col md={{ span: 6 }} sm={{ span: 12 }}>
+                                        <Col md={md} sm={sm}>
                                             <Form.Group controlId={e.obj.name}>
                                                 <Form.Label>{name}</Form.Label>
-                                                <Form.Control type="number" min={e.min} max={e.max} defaultValue={e.obj.value} onInput={this.updateValue} />
+                                                {readonly ?
+                                                    <>
+                                                        <Form.Control type="number" disabled min={e.min} max={e.max} defaultValue={e.obj.value} onInput={this.updateValue} />
+                                                        <Form.Text className="text-muted">This setting is defined as an env variable and is not editable.</Form.Text>
+                                                    </>
+                                                :
+                                                    <Form.Control type="number" min={e.min} max={e.max} defaultValue={e.obj.value} onInput={this.updateValue} />
+                                                }
                                             </Form.Group>
                                         </Col>
-                                        <Col md={{ span: 6 }} sm={{ span: 12 }}>
+                                        {e.description == null &&
-                                            <p>{e.obj.description}</p>
+                                            <Col md={md} sm={sm}>
+                                                <p>{e.obj.description}</p>
+                                            </Col>
+                                        }
+                                    </Row>
+                                );
+                            } else if(e.type == 'text') {
+                                return (
+                                    <Row key={e.obj.id}>
+                                        <Col md={md} sm={sm}>
+                                            <Form.Group controlId={e.obj.name}>
+                                                <Form.Label>{name}</Form.Label>
+                                                {readonly ?
+                                                    <>
+                                                        <Form.Control type="text" disabled defaultValue={e.obj.value} onInput={this.updateValue} />
+                                                        <Form.Text className="text-muted">This setting is defined as an env variable and is not editable.</Form.Text>
+                                                    </>
+                                                :
+                                                    <Form.Control type="text" defaultValue={e.obj.value} onInput={this.updateValue} />
+                                                }
+                                            </Form.Group>
                                         </Col>
+                                        {e.description == null &&
+                                            <Col md={md} sm={sm}>
+                                                <p>{e.obj.description}</p>
+                                            </Col>
+                                        }
                                     </Row>
                                 );
                             } else if(e.type == 'select') {
                                 return (
                                     <Row key={e.obj.id}>
-                                        <Col md={{ span: 6 }} sm={{ span: 12 }}>
+                                        <Col md={md} sm={sm}>
                                             <Form.Group controlId={e.obj.name}>
                                                 <Form.Label>{name}</Form.Label>
-                                                <Form.Control as="select" defaultValue={e.obj.value} onInput={this.updateValue}>
+                                                {readonly ?
-                                                    {e.options.map((e,i) => {
+                                                    <>
-                                                        return (
+                                                        <Form.Control as="select" disabled defaultValue={e.obj.value} onInput={this.updateValue}>
-                                                            <option key={i} value={e.value}>{e.name}</option>
+                                                            {e.options.map((e,i) => {
-                                                        )
+                                                                return (
-                                                    })}
+                                                                    <option key={i} value={e.value}>{e.name}</option>
-                                                </Form.Control>
+                                                                )
+                                                            })}
+                                                        </Form.Control>
+                                                        <Form.Text className="text-muted">This setting is defined as an env variable and is not editable.</Form.Text>
+                                                    </>
+                                                :
+                                                    <Form.Control as="select" defaultValue={e.obj.value} onInput={this.updateValue}>
+                                                        {e.options.map((e,i) => {
+                                                            return (
+                                                                <option key={i} value={e.value}>{e.name}</option>
+                                                            )
+                                                        })}
+                                                    </Form.Control>
+                                                }
                                             </Form.Group>
                                         </Col>
-                                        <Col md={{ span: 6 }} sm={{ span: 12 }}>
+                                        {e.description == null &&
-                                            <p>{e.obj.description}</p>
+                                            <Col md={md} sm={sm}>
+                                                <p>{e.obj.description}</p>
+                                            </Col>
+                                        }
+                                    </Row>
+                                )
+                            } else if(e.type == 'button-get') {
+                                return (
+                                    <Row key={e.obj.id}>
+                                        <Col md={md} sm={sm}>
+                                            <p>{name}</p>
+                                            <Button onClick={() => { Axios.get(e.url) }} >{name}</Button>
                                         </Col>
+                                        {e.description == null &&
+                                            <Col md={md} sm={sm}>
+                                                <p>{e.obj.description}</p>
+                                            </Col>
+                                        }
                                     </Row>
                                 )
                             }

resources/js/components/Home/Settings.js

@@ -61,7 +61,7 @@ export default class Settings extends Component {
                     <Setting name={e.server.name} value={e.server.value} description={e.server.description} />
                 </Col>
                 <Col lg={{ span: 4 }} md={{ span: 6 }} sm={{ span: 12 }}>
-                    <SettingWithModal title="Graph settings" description="Control settings for the graphs." settings={[
+                    <SettingWithModal title="Graph settings" description="Control settings for the graphs." autoClose={true} settings={[
                         {
                             obj: e.download_upload_graph_enabled,
                             type: 'checkbox'
@@ -119,7 +119,28 @@ export default class Settings extends Component {
                     ]} />
                 </Col>
                 <Col lg={{ span: 4 }} md={{ span: 6 }} sm={{ span: 12 }}>
-                    <SettingWithModal title="Notification settings" description="Control which types of notifications the server sends." settings={[
+                    <SettingWithModal title="Notification settings" description="Control which types of notifications the server sends." autoClose={false} settings={[
+                        {
+                            obj: e.slack_webhook,
+                            type: 'text'
+                        },
+                        {
+                            obj: e.telegram_bot_token,
+                            type: 'text'
+                        },
+                        {
+                            obj: e.telegram_chat_id,
+                            type: 'text'
+                        },
+                        {
+                            obj: {
+                                id: (Math.floor(Math.random() * 10000) + 1),
+                                name: "Test notifications",
+                                description: "After saving your updated notification settings, use this to check your settings are correct."
+                            },
+                            type: 'button-get',
+                            url: 'api/settings/test-notification'
+                        },
                         {
                             obj: e.speedtest_notifications,
                             type: 'checkbox'

routes/api.php

@@ -62,6 +62,8 @@ Route::group([
 ], function () {
     Route::get('/config', 'SettingsController@config')
          ->name('settings.config');
+    Route::get('/test-notification', 'SettingsController@testNotification')
+         ->name('settings.test_notification');
     Route::get('/', 'SettingsController@index')
          ->name('settings.index');
     Route::put('/', 'SettingsController@store')