[Feature] Auto submit form when 6 characters are entered

LifeOnScreen · Oct 17, 2018 · 0e45781 · 0e45781
1 parent 8ea4b10
commit 0e45781
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 4 deletions.
diff --git a/resources/views/authenticate.blade.php b/resources/views/authenticate.blade.php
@@ -21,6 +21,14 @@
             border-radius: 0 !important;
         }
     </style>
+    <script>
+        function checkAutoSubmit(el) {
+            if (el.value.length === 6) {
+                document.getElementById('authenticate_form').submit();
+            }
+        }
+
+    </script>
 </head>
 <body class="bg-40 text-black h-full">
 <div class="h-full">
@@ -29,7 +37,8 @@
             @include('nova::partials.logo')
         </div>
 
-        <form class="bg-white shadow rounded-lg p-8 max-w-xl mx-auto" method="POST" action="/los/2fa/authenticate">
+        <form id="authenticate_form" class="bg-white shadow rounded-lg p-8 max-w-xl mx-auto" method="POST"
+              action="/los/2fa/authenticate">
             <h2 class="p-2">Two Factor Authentication</h2>
 
             <p class="p-2">Two factor authentication (2FA) strengthens access security by requiring two methods (also
@@ -59,7 +68,7 @@ class="w-1/4 btn btn-default btn-primary hover:bg-primary-dark" type="button">
                     <div id="secret_div">
                         <label class="block font-bold mb-2" for="co">One Time Password</label>
                         <input class="form-control form-input form-input-bordered w-full" id="secret" type="number"
-                               name="secret" value="" autofocus="">
+                               name="secret" value="" onkeyup="checkAutoSubmit(this)" autofocus="">
                     </div>
                     <div id="recover_div" style="display: none;">
                         <label class="block font-bold mb-2" for="co">Recovery code</label>

diff --git a/resources/views/register.blade.php b/resources/views/register.blade.php
@@ -21,6 +21,13 @@
             border-radius: 0 !important;
         }
     </style>
+    <script>
+        function checkAutoSubmit(el) {
+            if (el.value.length === 6) {
+                document.getElementById('register_form').submit();
+            }
+        }
+    </script>
 </head>
 <body class="bg-40 text-black h-full">
 <div class="h-full">
@@ -29,7 +36,8 @@
             @include('nova::partials.logo')
         </div>
 
-        <form class="bg-white shadow rounded-lg p-8 max-w-xl mx-auto" method="POST" action="/los/2fa/confirm">
+        <form id="register_form" class="bg-white shadow rounded-lg p-8 max-w-xl mx-auto" method="POST"
+              action="/los/2fa/confirm">
             <h2 class="p-2">Two Factor Authentication</h2>
 
             <p class="p-2">Two factor authentication (2FA) strengthens access security by requiring two methods (also
@@ -56,7 +64,7 @@
                     @endif
                     <label class="block font-bold mb-2" for="co">Secret</label>
                     <input class="form-control form-input form-input-bordered w-full" id="secret" type="number"
-                           name="secret" value="" required="required" autofocus="">
+                           name="secret" value="" required="required" onkeyup="checkAutoSubmit(this)" autofocus="">
                 </div>
                 <button class="w-1/2 btn btn-default btn-primary hover:bg-primary-dark" type="submit">
                     Confirm