Use correct CSS class in MFA forms, focus code input on error

src/components/mfa_form/recovery_form.js

@@ -29,6 +29,13 @@ export default {
     ...mapMutations('authFlow', ['requireTOTP', 'abortMFA']),
     ...mapActions({ login: 'authFlow/login' }),
     clearError () { this.error = false },
+
+    focusOnCodeInput () {
+      const codeInput = this.$refs.codeInput
+      codeInput.focus()
+      codeInput.setSelectionRange(0, codeInput.value.length)
+    },
+
     submit () {
       const { clientId, clientSecret } = this.oauthStore
 
@@ -44,6 +51,7 @@ export default {
         if (result.error) {
           this.error = result.error
           this.code = null
+          this.focusOnCodeInput()
           return
         }
 

src/components/mfa_form/recovery_form.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="login panel panel-default">
+  <div class="login-panel panel panel-default">
     <!-- Default panel contents -->
 
     <div class="panel-heading">
@@ -17,6 +17,7 @@
           <label for="code">{{ $t('login.recovery_code') }}</label>
           <input
             id="code"
+            ref="codeInput"
             v-model="code"
             class="input form-control"
           >
@@ -71,4 +72,5 @@
     </div>
   </div>
 </template>
+
 <script src="./recovery_form.js"></script>

src/components/mfa_form/totp_form.js

@@ -29,6 +29,13 @@ export default {
     ...mapMutations('authFlow', ['requireRecovery', 'abortMFA']),
     ...mapActions({ login: 'authFlow/login' }),
     clearError () { this.error = false },
+
+    focusOnCodeInput () {
+      const codeInput = this.$refs.codeInput
+      codeInput.focus()
+      codeInput.setSelectionRange(0, codeInput.value.length)
+    },
+
     submit () {
       const { clientId, clientSecret } = this.oauthStore
 
@@ -44,6 +51,7 @@ export default {
         if (result.error) {
           this.error = result.error
           this.code = null
+          this.focusOnCodeInput()
           return
         }
 

src/components/mfa_form/totp_form.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="login panel panel-default">
+  <div class="login-panel panel panel-default">
     <!-- Default panel contents -->
 
     <div class="panel-heading">
@@ -19,6 +19,7 @@
           </label>
           <input
             id="code"
+            ref="codeInput"
             v-model="code"
             class="input form-control"
           >
@@ -74,4 +75,5 @@
     </div>
   </div>
 </template>
+
 <script src="./totp_form.js"></script>