Disable login button (#148)

* 🚸 Disable login button
* 💄 Changes button animation icon to spinner

---------

Co-authored-by: Wun Chiou <wun@utdallas.edu>

public/mix-manifest.json

@@ -1,5 +1,5 @@
 {
-    "/js/app.js": "/js/app.js?id=d6cc6e82bb4e678d3a96d87b3c38835c",
+    "/js/app.js": "/js/app.js?id=9dc35e8177d13dc48b6a5c2515bf88b0",
     "/js/manifest.js": "/js/manifest.js?id=dc9ead3d7857b522d7de22d75063453c",
     "/css/app.css": "/css/app.css?id=54db96a1c960aab96ee5b38d5cbbf2f1",
     "/js/vendor.js": "/js/vendor.js?id=4d3313683b3a2faf8ca0278ce47f3880"

resources/assets/js/app.js

@@ -119,6 +119,22 @@ var profiles = (function ($, undefined) {
         }
     }
 
+    /**
+     * Display spinner animation and disable form submit button
+     *
+     * @param {HTMLElement} form that gets submitted 
+     */
+    const wait_when_submitting = function(form) {
+        elem = form.querySelector('button[type=submit]');
+
+        elem_text = elem.innerHTML.replace(/<i[^>]*>(.*?)<\/i>/g, '');
+        elem.innerHTML = `<i class="fas fa-spinner fa-spin fa-fw"></i> ${elem_text}`;
+
+        elem.classList.add('btn-primary', 'disabled');
+        elem.classList.remove('btn-light', 'btn-dark', 'btn-secondary', 'btn-info', 'btn-success', 'btn-warning', 'btn-danger');
+        elem.disabled = true;
+    }
+
     /**
      * Adds a new item input row
      *
@@ -496,6 +512,7 @@ var profiles = (function ($, undefined) {
         toast: toast,
         toggle_class: toggle_class,
         toggle_show: toggle_show,
+        wait_when_submitting : wait_when_submitting,
     };
 
 })(jQuery);

resources/views/auth/login.blade.php

@@ -25,7 +25,7 @@
                         </div>
                     @endif
 
-                    <form class="form-horizontal" role="form" method="POST" action="{{ route('login') }}">
+                    <form id="login-form" class="form-horizontal" role="form" method="POST" action="{{ route('login')}}" data-toggle="wait-on-submit">
                         <input type="hidden" name="_token" value="{{ csrf_token() }}">
 
                         <div class="form-group row justify-content-center">
@@ -79,12 +79,14 @@
 
 @section('scripts')
 <script>
-$(document).ready(function() {
+$(function() {
     // focus the name field if it's empty
     $username = $('#name');
     if (! $username.val()) {
         $username.focus();
     }
+
+    $('form[data-toggle=wait-on-submit]').on('submit', (e) => profiles.wait_when_submitting(e.currentTarget));
 });
 </script>
 @endsection