From 6f9f5cec4d4017595f3367af20a8dc5c3ab6025d Mon Sep 17 00:00:00 2001
From: IanM <16573496+imorland@users.noreply.github.com>
Date: Thu, 1 Feb 2024 12:00:08 +0000
Subject: [PATCH] feat: auto submit token from oauth path (#24)

---
 locale/en.yml                |  1 +
 views/oauth/verify.blade.php | 17 +++++++++++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/locale/en.yml b/locale/en.yml
index 87fb480..5fd3600 100644
--- a/locale/en.yml
+++ b/locale/en.yml
@@ -69,6 +69,7 @@ ianm-twofactor:
     reset_password:
       two_factor_token_label: 2FA Token
     two_factor_token:
+      title: Two-Factor Authentication
       submit_button: Submit Token
 
 blomstra-gdpr:
diff --git a/views/oauth/verify.blade.php b/views/oauth/verify.blade.php
index acf1d96..abc4c06 100644
--- a/views/oauth/verify.blade.php
+++ b/views/oauth/verify.blade.php
@@ -16,15 +16,28 @@
 
   <h3>{{ $translator->trans('ianm-twofactor.forum.log_in.two_factor_required_message') }}</h3>
 
-  <form class="form" method="POST" action="{{ $url->to('forum')->route('twoFactor.oauth.verify') }}">
+  <form class="form" method="POST" action="{{ $url->to('forum')->route('twoFactor.oauth.verify') }}" id="twoFactorForm">
     <input type="hidden" name="csrfToken" value="{{ $csrfToken }}">
     
     <p class="form-group">
-        <input type="text" class="form-control" name="twoFactorToken" placeholder="{{ $translator->trans('ianm-twofactor.forum.log_in.two_factor_placeholder') }}" required>
+        <input type="text" class="form-control" name="twoFactorToken" id="twoFactorTokenInput" placeholder="{{ $translator->trans('ianm-twofactor.forum.log_in.two_factor_placeholder') }}" inputmode="numeric" pattern="[0-9]*" autocomplete="one-time-code" required>
     </p>
 
     <p class="form-group">
       <button type="submit" class="button">{{ $translator->trans('ianm-twofactor.views.two_factor_token.submit_button') }}</button>
     </p>
   </form>
+
+  <script>
+    document.addEventListener('DOMContentLoaded', function() {
+      const form = document.getElementById('twoFactorForm');
+      const tokenInput = document.getElementById('twoFactorTokenInput');
+
+      tokenInput.addEventListener('input', function() {
+        if (tokenInput.value.length === 6) {
+          form.submit();
+        }
+      });
+    });
+  </script>
 @endsection