TOTP length is configurable, so we can't hardcode the length here

If you have a lot of tokens the 2FA section is buried at the bottom

src/components/mfa_form/totp_form.vue

@@ -16,9 +16,16 @@
             {{ $t('login.authentication_code') }}
           </label>
           <input
-            id="code"
+            autocomplete="one-time-code"
-            v-model="code"
+            autocorrect="off"
+            autocapitalize="off"
+            autofocus="true"
             class="form-control"
+            id="totp"
+            name="totp"
+            spellcheck="false"
+            type="text"
+            v-model="code"
           >
         </div>
 

src/components/settings_modal/tabs/security_tab/mfa.vue

@@ -97,8 +97,15 @@
                 <h4>{{ $t('general.verify') }}</h4>
                 <p>{{ $t('settings.mfa.verify.desc') }}</p>
                 <input
-                  v-model="otpConfirmToken"
+                  autocomplete="one-time-code"
+                  autocorrect="off"
+                  autocapitalize="off"
+                  id="totp"
+                  name="totp"
+                  pattern="[0-9]*"
+                  spellcheck="false"
                   type="text"
+                  v-model="otpConfirmToken"
                 >
 
                 <p>{{ $t('settings.enter_current_password_to_confirm') }}:</p>

src/components/settings_modal/tabs/security_tab/security_tab.vue

@@ -72,7 +72,7 @@
         {{ changePasswordError }}
       </p>
     </div>
-
+    <mfa />
     <div class="setting-item">
       <h2>{{ $t('settings.oauth_tokens') }}</h2>
       <table class="oauth-tokens">
@@ -102,7 +102,6 @@
         </tbody>
       </table>
     </div>
-    <mfa />
     <div class="setting-item">
       <h2>{{ $t('settings.delete_account') }}</h2>
       <p v-if="!deletingAccount">