From 5233a930a0a7256abadd2d0a0b27bc54ad27236d Mon Sep 17 00:00:00 2001
From: Baozier <byn9826@gmail.com>
Date: Fri, 6 Dec 2024 22:16:40 -0500
Subject: [PATCH] Improve UI for code input (#198)

---
 package.json                              |   2 +-
 server/src/configs/locale.ts              |   4 +
 server/src/views/AuthorizeEmailMfa.tsx    |   5 +-
 server/src/views/AuthorizeReset.tsx       |   3 +-
 server/src/views/AuthorizeSmsMfa.tsx      |   3 +-
 server/src/views/ChangeEmail.tsx          |   3 +-
 server/src/views/VerifyEmail.tsx          |   4 +-
 server/src/views/components/CodeInput.tsx | 117 ++++++++++++++++++++++
 server/src/views/components/Layout.tsx    |   8 ++
 server/src/views/scripts/resetError.ts    |   2 +-
 10 files changed, 142 insertions(+), 9 deletions(-)
 create mode 100644 server/src/views/components/CodeInput.tsx

diff --git a/package.json b/package.json
index 57da5f5..eaf2834 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "melody-auth",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "A turnkey OAuth & authentication system.",
   "license": "MIT",
   "author": "Baozier",
diff --git a/server/src/configs/locale.ts b/server/src/configs/locale.ts
index 9aa86ed..d99ddcb 100644
--- a/server/src/configs/locale.ts
+++ b/server/src/configs/locale.ts
@@ -329,6 +329,10 @@ export const authorizeEmailMfa = Object.freeze({
     en: 'Verify',
     fr: 'Vérifier',
   },
+  code: {
+    en: 'Enter your verification code here',
+    fr: 'Entrez votre code de vérification ici',
+  },
   resend: {
     en: 'Resend a new code',
     fr: 'Renvoyer un nouveau code',
diff --git a/server/src/views/AuthorizeEmailMfa.tsx b/server/src/views/AuthorizeEmailMfa.tsx
index b75770b..0b4647e 100644
--- a/server/src/views/AuthorizeEmailMfa.tsx
+++ b/server/src/views/AuthorizeEmailMfa.tsx
@@ -11,8 +11,8 @@ import {
   resetErrorScript,
 } from 'views/scripts'
 import SubmitError from 'views/components/SubmitError'
-import Field from 'views/components/Field'
 import SubmitButton from 'views/components/SubmitButton'
+import CodeInput from 'views/components/CodeInput'
 
 const AuthorizeEmailMfa = ({
   queryDto, logoUrl, locales, error,
@@ -40,10 +40,11 @@ const AuthorizeEmailMfa = ({
           onsubmit='return handleSubmit(event)'
         >
           <section class='flex-col gap-4'>
-            <Field
+            <CodeInput
               type='text'
               required={false}
               name='code'
+              label={localeConfig.authorizeEmailMfa.code[queryDto.locale]}
             />
             <button
               id='resend-btn'
diff --git a/server/src/views/AuthorizeReset.tsx b/server/src/views/AuthorizeReset.tsx
index 37361a1..cdd97dd 100644
--- a/server/src/views/AuthorizeReset.tsx
+++ b/server/src/views/AuthorizeReset.tsx
@@ -13,6 +13,7 @@ import Title from 'views/components/Title'
 import Field from 'views/components/Field'
 import { oauthDto } from 'dtos'
 import SubmitButton from 'views/components/SubmitButton'
+import CodeInput from 'views/components/CodeInput'
 
 const AuthorizeReset = ({
   logoUrl, queryString, queryDto, locales,
@@ -57,7 +58,7 @@ const AuthorizeReset = ({
               required
               name='email'
             />
-            <Field
+            <CodeInput
               label={localeConfig.authorizeReset.code[queryDto.locale]}
               type='text'
               required
diff --git a/server/src/views/AuthorizeSmsMfa.tsx b/server/src/views/AuthorizeSmsMfa.tsx
index 3833dc7..0678fe8 100644
--- a/server/src/views/AuthorizeSmsMfa.tsx
+++ b/server/src/views/AuthorizeSmsMfa.tsx
@@ -13,6 +13,7 @@ import {
 import SubmitError from 'views/components/SubmitError'
 import Field from 'views/components/Field'
 import SubmitButton from 'views/components/SubmitButton'
+import CodeInput from 'views/components/CodeInput'
 
 const AuthorizeSmsMfa = ({
   queryDto, logoUrl, locales, phoneNumber, showEmailMfaBtn,
@@ -51,7 +52,7 @@ const AuthorizeSmsMfa = ({
           >
             {localeConfig.authorizeSmsMfa.resend[queryDto.locale]}
           </button>
-          <Field
+          <CodeInput
             label={localeConfig.authorizeSmsMfa.code[queryDto.locale]}
             type='text'
             required={false}
diff --git a/server/src/views/ChangeEmail.tsx b/server/src/views/ChangeEmail.tsx
index 9742f71..1bc17b7 100644
--- a/server/src/views/ChangeEmail.tsx
+++ b/server/src/views/ChangeEmail.tsx
@@ -13,6 +13,7 @@ import Title from 'views/components/Title'
 import Field from 'views/components/Field'
 import { identityDto } from 'dtos'
 import SubmitButton from 'views/components/SubmitButton'
+import CodeInput from 'views/components/CodeInput'
 
 const ChangeEmail = ({
   logoUrl, queryDto, locales, redirectUri,
@@ -56,7 +57,7 @@ const ChangeEmail = ({
               required
               name='email'
             />
-            <Field
+            <CodeInput
               label={localeConfig.changeEmail.code[queryDto.locale]}
               type='text'
               required
diff --git a/server/src/views/VerifyEmail.tsx b/server/src/views/VerifyEmail.tsx
index 7d8a10c..af0ab09 100644
--- a/server/src/views/VerifyEmail.tsx
+++ b/server/src/views/VerifyEmail.tsx
@@ -11,8 +11,8 @@ import {
   resetErrorScript, responseScript, validateScript,
 } from 'views/scripts'
 import Title from 'views/components/Title'
-import Field from 'views/components/Field'
 import SubmitError from 'views/components/SubmitError'
+import CodeInput from 'views/components/CodeInput'
 
 const VerifyEmail = ({
   queryDto, logoUrl, locales,
@@ -44,7 +44,7 @@ const VerifyEmail = ({
           onsubmit='return handleSubmit(event)'
         >
           <section class='flex-col gap-2'>
-            <Field
+            <CodeInput
               type='text'
               required={false}
               name='code'
diff --git a/server/src/views/components/CodeInput.tsx b/server/src/views/components/CodeInput.tsx
new file mode 100644
index 0000000..ffe89e0
--- /dev/null
+++ b/server/src/views/components/CodeInput.tsx
@@ -0,0 +1,117 @@
+import { html } from 'hono/html'
+import { resetSubmitError } from 'views/scripts/resetError'
+
+const CodeInput = ({
+  label,
+  required,
+  type,
+  name,
+  className,
+  value,
+}: {
+  label?: string;
+  required: boolean;
+  type: 'email' | 'text' | 'password';
+  name: string;
+  className?: string;
+  value?: string;
+}) => {
+  return (
+    <section
+      id={`${name}-row`}
+      class={`flex-col gap-2 ${className || ''}`}
+    >
+      <label
+        class='label w-text'
+        for={`form-${name}`}
+      >
+        {label}
+        {required && <span class='text-red ml-2'>*</span>}
+      </label>
+      <section class='flex-row gap-2'>
+        <input
+          class='code-input'
+          type='text'
+          id='code-input-1'
+        />
+        <input
+          class='code-input'
+          type='text'
+          id='code-input-2'
+        />
+        <input
+          class='code-input'
+          type='text'
+          id='code-input-3'
+        />
+        <input
+          class='code-input'
+          type='text'
+          id='code-input-4'
+        />
+        <input
+          class='code-input'
+          type='text'
+          id='code-input-5'
+        />
+        <input
+          class='code-input'
+          type='text'
+          id='code-input-6'
+        />
+      </section>
+      <input
+        class='input hidden'
+        type={type}
+        name={name}
+        id={`form-${name}`}
+        value={value}
+      />
+      <p
+        id={`error-${name}`}
+        class='text-red hidden text-sm w-text'>
+      </p>
+      {html`
+        <script>
+          var codeInputs = document.querySelectorAll(".code-input");
+          var hiddenInput = document.getElementById("form-${name}");
+
+          function updateHiddenInput() {
+            var code = ""
+            codeInputs.forEach((input) => {
+              code = code + input.value
+            })
+            hiddenInput.value = code;
+            document.getElementById('error-code').classList.add('hidden');
+            ${resetSubmitError()}
+          }
+
+          codeInputs.forEach((input, index) => {
+            input.addEventListener('input', (e) => {
+              var value = e.target.value.replace(/[^0-9]/g, '');
+              if (value.length > 1) {
+                e.target.value = value.substring(0, 1);
+              } else {
+                e.target.value = value;
+              }
+
+              if (value.length !== 0 && index < codeInputs.length - 1) {
+                codeInputs[index + 1].focus();
+              }
+              updateHiddenInput();
+            });
+
+            input.addEventListener('keyup', (e) => {
+              if (e.key === 'Backspace' && e.target.value === '' && index > 0) {
+                codeInputs[index - 1].focus();
+                updateHiddenInput();
+              }
+            });
+          });
+        </script>
+      `}
+    </section>
+  )
+}
+
+export default CodeInput
diff --git a/server/src/views/components/Layout.tsx b/server/src/views/components/Layout.tsx
index 900f7c9..bf28847 100644
--- a/server/src/views/components/Layout.tsx
+++ b/server/src/views/components/Layout.tsx
@@ -112,6 +112,14 @@ const Layout = ({
             font-size: 16px;
             color: darkslategray;
           }
+          .code-input {
+            background-color: white;
+            border: 1px solid lightgray;
+            text-align: center;
+            border-radius: 12px;
+            width: 42px;
+            height: 42px;
+          }
           .input {
             background-color: white;
             border: 1px solid lightgray;
diff --git a/server/src/views/scripts/resetError.ts b/server/src/views/scripts/resetError.ts
index df0e878..b500ff0 100644
--- a/server/src/views/scripts/resetError.ts
+++ b/server/src/views/scripts/resetError.ts
@@ -1,6 +1,6 @@
 import { html } from 'hono/html'
 
-const resetSubmitError = () => html`
+export const resetSubmitError = () => html`
   var submitBtn = document.getElementById('submit-button');
   if (submitBtn) submitBtn.disabled = false;
   var errorEl = document.getElementById('submit-error');