Improve confirm code input UX for easier typing (#22)

* Improve user experience when typing confirm code * update
imorland · Feb 1, 2024 · 6e24051 · 6e24051
1 parent 6db6e03
commit 6e24051
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 0 deletions.
diff --git a/js/src/forum/components/TwoFactorEnableModal.js b/js/src/forum/components/TwoFactorEnableModal.js
@@ -102,10 +102,14 @@ export default class TwoFactorEnableModal extends Modal {
               <form onsubmit={this.onSubmit.bind(this)}>
                 <div className="Form-group">
                   <input
+                    type="text"
                     className="FormControl"
                     name="token"
                     bidi={this.token}
                     placeholder={app.translator.trans('ianm-twofactor.forum.security.enter_token')}
+                    inputmode="numeric"
+                    pattern="[0-9]*"
+                    autocomplete="one-time-code"
                   />
                 </div>
                 <div className="Form-group">

diff --git a/js/src/forum/extendLogInModal.js b/js/src/forum/extendLogInModal.js
@@ -24,6 +24,9 @@ export default function extendLogInModal() {
             placeholder={app.translator.trans('ianm-twofactor.forum.log_in.two_factor_placeholder')}
             value={this.twoFactorToken()}
             disabled={this.loading}
+            inputmode="numeric"
+            pattern="[0-9]*"
+            autocomplete="one-time-code"
             oninput={(e) => {
               this.twoFactorToken(e.currentTarget.value);