From d49a4196c77c59fe6005ca763188808ce92f50dd Mon Sep 17 00:00:00 2001
From: Phantasm <phantasm@centrum.cz>
Date: Tue, 25 Mar 2025 22:24:58 +0100
Subject: [PATCH 1/2] Use pinia oauth store in mfa forms

Taken from 216d318bb522d02c092b3a4be26cfa31f7e918a3
---
 changelog.d/pinia-oauth-mfa.skip         | 0
 src/components/mfa_form/recovery_form.js | 6 ++++--
 src/components/mfa_form/totp_form.js     | 6 ++++--
 3 files changed, 8 insertions(+), 4 deletions(-)
 create mode 100644 changelog.d/pinia-oauth-mfa.skip

diff --git a/changelog.d/pinia-oauth-mfa.skip b/changelog.d/pinia-oauth-mfa.skip
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/components/mfa_form/recovery_form.js b/src/components/mfa_form/recovery_form.js
index 01a62a503..66778b4f6 100644
--- a/src/components/mfa_form/recovery_form.js
+++ b/src/components/mfa_form/recovery_form.js
@@ -1,5 +1,7 @@
 import mfaApi from '../../services/new_api/mfa.js'
 import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
+import { mapStores } from 'pinia'
+import { useOAuthStore } from 'src/stores/oauth.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faTimes
@@ -18,9 +20,9 @@ export default {
     ...mapGetters({
       authSettings: 'authFlow/settings'
     }),
+    ...mapStores(useOAuthStore),
     ...mapState({
       instance: 'instance',
-      oauth: 'oauth'
     })
   },
   methods: {
@@ -28,7 +30,7 @@ export default {
     ...mapActions({ login: 'authFlow/login' }),
     clearError () { this.error = false },
     submit () {
-      const { clientId, clientSecret } = this.oauth
+      const { clientId, clientSecret } = this.oauthStore
 
       const data = {
         clientId,
diff --git a/src/components/mfa_form/totp_form.js b/src/components/mfa_form/totp_form.js
index 6ee823ed3..e347e017a 100644
--- a/src/components/mfa_form/totp_form.js
+++ b/src/components/mfa_form/totp_form.js
@@ -1,5 +1,7 @@
 import mfaApi from '../../services/new_api/mfa.js'
 import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
+import { mapStores } from 'pinia'
+import { useOAuthStore } from 'src/stores/oauth.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faTimes
@@ -18,9 +20,9 @@ export default {
     ...mapGetters({
       authSettings: 'authFlow/settings'
     }),
+    ...mapStores(useOAuthStore),
     ...mapState({
       instance: 'instance',
-      oauth: 'oauth'
     })
   },
   methods: {
@@ -28,7 +30,7 @@ export default {
     ...mapActions({ login: 'authFlow/login' }),
     clearError () { this.error = false },
     submit () {
-      const { clientId, clientSecret } = this.oauth
+      const { clientId, clientSecret } = this.oauthStore
 
       const data = {
         clientId,

From dcc2acfe5d0709a50622575b228bd8db5ef40c2e Mon Sep 17 00:00:00 2001
From: Phantasm <phantasm@centrum.cz>
Date: Tue, 25 Mar 2025 23:01:50 +0100
Subject: [PATCH 2/2] Use correct CSS class in MFA forms, focus code input on
 error

---
 src/components/mfa_form/recovery_form.js  | 8 ++++++++
 src/components/mfa_form/recovery_form.vue | 4 +++-
 src/components/mfa_form/totp_form.js      | 8 ++++++++
 src/components/mfa_form/totp_form.vue     | 4 +++-
 4 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/components/mfa_form/recovery_form.js b/src/components/mfa_form/recovery_form.js
index 66778b4f6..2d0f4fdff 100644
--- a/src/components/mfa_form/recovery_form.js
+++ b/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
         }
 
diff --git a/src/components/mfa_form/recovery_form.vue b/src/components/mfa_form/recovery_form.vue
index f8c3e6a04..02f27ddaf 100644
--- a/src/components/mfa_form/recovery_form.vue
+++ b/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>
diff --git a/src/components/mfa_form/totp_form.js b/src/components/mfa_form/totp_form.js
index e347e017a..857d055ff 100644
--- a/src/components/mfa_form/totp_form.js
+++ b/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
         }
 
diff --git a/src/components/mfa_form/totp_form.vue b/src/components/mfa_form/totp_form.vue
index 26fc1e804..b057f0413 100644
--- a/src/components/mfa_form/totp_form.vue
+++ b/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>