rework UI of mail settings page to allow for saving settings before testing

Author: ayan4m1

app/Http/Controllers/Admin/Settings/MailController.php

@@ -5,7 +5,7 @@
 use Exception;
 use Illuminate\View\View;
 use Illuminate\Http\Request;
-use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Response;
 use Prologue\Alerts\AlertsMessageBag;
 use Illuminate\Contracts\Console\Kernel;
 use Pterodactyl\Notifications\MailTested;
@@ -85,13 +85,13 @@ public function index(): View
      * Handle request to update SMTP mail settings.
      *
      * @param \Pterodactyl\Http\Requests\Admin\Settings\MailSettingsFormRequest $request
-     * @return \Illuminate\Http\RedirectResponse
+     * @return \Illuminate\Http\Response
      *
      * @throws DisplayException
      * @throws \Pterodactyl\Exceptions\Model\DataValidationException
      * @throws \Pterodactyl\Exceptions\Repository\RecordNotFoundException
      */
-    public function update(MailSettingsFormRequest $request): RedirectResponse
+    public function update(MailSettingsFormRequest $request): Response
     {
         if ($this->config->get('mail.driver') !== 'smtp') {
             throw new DisplayException('This feature is only available if SMTP is the selected email driver for the Panel.');
@@ -111,30 +111,25 @@ public function update(MailSettingsFormRequest $request): RedirectResponse
         }
 
         $this->kernel->call('queue:restart');
-        $this->alert->success('Mail settings have been updated successfully and the queue worker was restarted to apply these changes.')->flash();
 
-        return redirect()->route('admin.settings.mail');
+        return response('', 204);
     }
 
     /**
      * Submit a request to send a test mail message.
      *
      * @param Request $request
-     * @return \Illuminate\Http\RedirectResponse
+     * @return \Illuminate\Http\Response
      */
-    public function test(Request $request): RedirectResponse
+    public function test(Request $request): Response
     {
         try {
             Notification::route('mail', $request->user()->email)
                 ->notify(new MailTested($request->user()));
         } catch (Exception $exception) {
-            $this->alert->danger(trans('base.mail.test_failed') . ' ' . $exception->getMessage())->flash();
-
-            return redirect()->route('admin.settings.mail');
+            return response($exception->getMessage(), 500);
         }
 
-        $this->alert->success(trans('base.mail.test_succeeded'))->flash();
-
-        return redirect()->route('admin.settings.mail');
+        return response('', 204);
     }
 }

resources/themes/pterodactyl/admin/settings/mail.blade.php

@@ -32,7 +32,7 @@
                         </div>
                     </div>
                 @else
-                    <form action="{{ route('admin.settings.mail') }}" method="POST">
+                    <form>
                         <div class="box-body">
                             <div class="row">
                                 <div class="form-group col-md-6">
@@ -99,8 +99,8 @@
                         <div class="box-footer">
                             {{ csrf_field() }}
                             <div class="pull-right">
-                                <a href="{{ route('admin.settings.mail.test') }}" class="btn btn-sm btn-success">Test</a>
-                                <button type="submit" name="_method" value="PATCH" class="btn btn-sm btn-primary">Save</button>
+                                <button type="button" id="testButton" class="btn btn-sm btn-success">Test</button>
+                                <button type="button" id="saveButton" class="btn btn-sm btn-primary">Save</button>
                             </div>
                         </div>
                     </form>
@@ -109,3 +109,82 @@
         </div>
     </div>
 @endsection
+
+@section('footer-scripts')
+    {!! Theme::js('js/laroute.js?t={cache-version}') !!}
+    {!! Theme::js('vendor/jquery/jquery.min.js?t={cache-version}') !!}
+    {!! Theme::js('vendor/sweetalert/sweetalert.min.js?t={cache-version}') !!}
+
+    <script>
+        function saveSettings() {
+            return $.ajax({
+                method: 'PATCH',
+                url: Router.route('admin.settings.mail'),
+                contentType: 'application/json',
+                data: JSON.stringify({
+                    'mail:host': $('input[name="mail:host"]').val(),
+                    'mail:port': $('input[name="mail:port"]').val(),
+                    'mail:encryption': $('select[name="mail:encryption"]').val(),
+                    'mail:username': $('input[name="mail:username"]').val(),
+                    'mail:password': $('input[name="mail:password"]').val(),
+                    'mail:from:address': $('input[name="mail:from:address"]').val(),
+                    'mail:from:name': $('input[name="mail:from:name"]').val()
+                }),
+                headers: { 'X-CSRF-Token': $('input[name="_token"]').val() }
+            }).fail(function (jqXHR) {
+                showErrorDialog(jqXHR, 'save');
+            });
+        }
+
+        function testSettings() {
+            return $.ajax({
+                method: 'GET',
+                url: Router.route('admin.settings.mail.test'),
+                headers: { 'X-CSRF-Token': $('input[name="_token"]').val() }
+            }).fail(function (jqXHR) {
+                showErrorDialog(jqXHR, 'test');
+            }).done(function () {
+                swal({
+                    title: 'Success',
+                    text: 'The test message was sent successfully.',
+                    type: 'success'
+                });
+            });
+        }
+
+        function saveAndTestSettings() {
+            saveSettings().done(testSettings);
+        }
+
+        function showErrorDialog(jqXHR, verb) {
+            console.error(jqXHR);
+            var errorText;
+            if (jqXHR.responseJSON.error) {
+                errorText = jqXHR.responseJSON.error;
+            } else if (jqXHR.responseJSON.errors) {
+                $.each(jqXHR.responseJSON.errors, function (i, v) {
+                    errorText += ', ' + v.detail;
+                });
+            }
+
+            swal({
+                title: 'Whoops!',
+                text: 'An error occurred while attempting to ' + verb + ' mail settings: ' + errorText,
+                type: 'error'
+            });
+        }
+
+        $(document).ready(function () {
+            $('#testButton').on('click', saveAndTestSettings);
+            $('#saveButton').on('click', function () {
+                saveSettings().done(function () {
+                    swal({
+                        title: 'Success',
+                        text: 'Mail settings have been updated successfully and the queue worker was restarted to apply these changes.',
+                        type: 'success'
+                    });
+                });
+            });
+        });
+    </script>
+@endsection