Add Next button to verification page

authgear · Jul 9, 2024 · d2098f6 · d2098f6
1 parent bdc0f79
commit d2098f6
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 9 deletions.
diff --git a/authui/src/authflowv2/otpInput.ts b/authui/src/authflowv2/otpInput.ts
@@ -32,6 +32,7 @@ export class OtpInputController extends Controller {
     this.inputTarget.addEventListener("paste", this.handlePaste);
     this.inputTarget.addEventListener("focus", this.handleFocus);
     this.inputTarget.addEventListener("blur", this.handleBlur);
+    this.submitTarget.disabled = true;
     // element.selectionchange is NOT the same as document.selectionchange
     // element.selectionchange is an experimental technology.
     window.document.addEventListener(
@@ -61,6 +62,7 @@ export class OtpInputController extends Controller {
 
     const reachedMaxDigits = this.value.length === this.maxLength;
     if (reachedMaxDigits) {
+      this.submitTarget.disabled = false;
       this.submitTarget.click();
     }
 

diff --git a/resources/authgear/templates/en/web/authflowv2/__otp_input.html b/resources/authgear/templates/en/web/authflowv2/__otp_input.html
@@ -59,15 +59,6 @@
       </div>
     {{ end }}
 
-    <button
-      form="{{ $.FormName }}"
-      class="hidden"
-      type="submit"
-      name="{{ or $.SubmitButtonName "x_action" }}"
-      value="{{ or $.SubmitButtonValue "submit" }}"
-      data-otp-input-target="submit"
-      data-authgear-event="{{ $.SubmitEvent }}"
-    ></button>
   </div>
 
   {{ if not $.ResendButtonHidden }}
@@ -90,5 +81,16 @@
       </button>
     </form>
   {{ end }}
+
+  <button
+    form="{{ $.FormName }}"
+    class="primary-btn w-full"
+    type="submit"
+    name="{{ or $.SubmitButtonName "x_action" }}"
+    value="{{ or $.SubmitButtonValue "submit" }}"
+    data-otp-input-target="submit"
+    data-authgear-event="{{ $.SubmitEvent }}"
+  > Next </button>
+
 </div>
 {{ end }}