Fix OTP not being displayed on the Import view

resources/js_vue3/components/OtpDisplay.vue

@@ -4,10 +4,12 @@
     import Dots from '@/components/Dots.vue'
     import twofaccountService from '@/services/twofaccountService'
     import { useUserStore } from '@/stores/user'
+    import { useNotifyStore } from '@/stores/notify'
     import { UseColorMode } from '@vueuse/components'
     import { useDisplayablePassword } from '@/composables/helpers'
 
     const user = useUserStore()
+    const notify = useNotifyStore()
     const $2fauth = inject('2fauth')
     const { copy, copied } = useClipboard({ legacy: true })
     
@@ -29,17 +31,17 @@
 
     const id = ref(null)
     const uri = ref(null)
-    const otpauthParams = reactive({
+    const otpauthParams = ref({
-        otp_type : String,
+        otp_type : '',
-        account : String,
+        account : '',
-        service : String,
+        service : '',
-        icon : String,
+        icon : '',
-        secret : String,
+        secret : '',
-        digits : Number,
+        digits : null,
-        algorithm : String,
+        algorithm : '',
         period : null,
         counter : null,
-        image : String
+        image : ''
     })
     const password = ref('')
     const generated_at = ref(null)
@@ -66,16 +68,15 @@
         //   Case 3 : When user uses the Advanced form and preview the account: We should have all OTP parameter
         //     to obtain an otp, including Secret and otp_type which are required
 
-        otpauthParams.otp_type = props.otp_type
+        otpauthParams.value.otp_type = props.otp_type
-        otpauthParams.account = props.account
+        otpauthParams.value.account = props.account
-        otpauthParams.service = props.service
+        otpauthParams.value.service = props.service
-        otpauthParams.icon = props.icon
+        otpauthParams.value.icon = props.icon
-        otpauthParams.secret = props.secret
+        otpauthParams.value.secret = props.secret
-        otpauthParams.digits = props.digits
+        otpauthParams.value.digits = props.digits
-        otpauthParams.algorithm = props.algorithm
+        otpauthParams.value.algorithm = props.algorithm
-        otpauthParams.period = props.period
+        otpauthParams.value.period = props.period
-        otpauthParams.counter = props.counter
+        otpauthParams.value.counter = props.counter
-
         setLoadingState()
 
         // Case 1
@@ -83,25 +84,25 @@
             id.value = accountId
             const { data } = await twofaccountService.get(id.value)
 
-            otpauthParams.service = data.service
+            otpauthParams.value.service = data.service
-            otpauthParams.account = data.account
+            otpauthParams.value.account = data.account
-            otpauthParams.icon = data.icon
+            otpauthParams.value.icon = data.icon
-            otpauthParams.otp_type = data.otp_type
+            otpauthParams.value.otp_type = data.otp_type
 
             if( isHMacBased(data.otp_type) && data.counter ) {
-                otpauthParams.counter = data.counter
+                otpauthParams.value.counter = data.counter
             }
         }
         // Case 2
         else if(props.uri) {
             uri.value = props.uri
-            otpauthParams.otp_type = props.uri.slice(0, 15 ).toLowerCase() === "otpauth://totp/" ? 'totp' : 'hotp'
+            otpauthParams.value.otp_type = props.uri.slice(0, 15 ).toLowerCase() === "otpauth://totp/" ? 'totp' : 'hotp'
         }
         // Case 3
         else if (! props.secret) {
             notify.error(new Error(trans('errors.cannot_create_otp_without_secret')))
         }
-        else if (! isTimeBased(otpauthParams.otp_type) && ! isHMacBased(otpauthParams.otp_type)) {
+        else if (! isTimeBased(otpauthParams.value.otp_type) && ! isHMacBased(otpauthParams.value.otp_type)) {
             notify.error(new Error(trans('errors.not_a_supported_otp_type')))
         }
 
@@ -120,7 +121,7 @@
     async function getOtp() {
         setLoadingState()
 
-        getOtpPromise().then(response => {
+        await getOtpPromise().then(response => {
             let otp = response.data
             password.value = otp.password
 
@@ -130,7 +131,7 @@
 
             if (isTimeBased(otp.otp_type)) {
                 generated_at.value = otp.generated_at
-                otpauthParams.period = otp.period
+                otpauthParams.value.period = otp.period
                 hasTOTP.value = true
 
                 nextTick().then(() => {
@@ -138,7 +139,7 @@
                 })
             }
             else if (isHMacBased(otp.otp_type)) {
-                otpauthParams.counter = otp.counter
+                otpauthParams.value.counter = otp.counter
 
                 // returned counter & uri are incremented
                 emit('increment-hotp', { nextHotpCounter: otp.counter, nextUri: otp.uri })
@@ -148,7 +149,8 @@
             if (error.response.status === 422) {
                 emit('validation-error', error.response)
             }
-            throw error
+            console.log(error)
+            //throw error
         })
         .finally(() => {
             showInlineSpinner.value = false
@@ -174,7 +176,7 @@
             return twofaccountService.getOtpByUri(uri.value)
         }
         else {
-            return twofaccountService.getOtpByParams(otpauthParams)
+            return twofaccountService.getOtpByParams(otpauthParams.value)
         }
     }
 
@@ -182,8 +184,8 @@
      * Reset component's refs
      */
     function clearOTP() {
-        id.value = otpauthParams.counter = generated_at.value = null
+        id.value = otpauthParams.value.counter = generated_at.value = null
-        otpauthParams.service = otpauthParams.account = otpauthParams.icon = otpauthParams.otp_type = otpauthParams.secret = ''
+        otpauthParams.value.service = otpauthParams.value.account = otpauthParams.value.icon = otpauthParams.value.otp_type = otpauthParams.value.secret = ''
         password.value = '... ...'
         hasTOTP.value = false
 

resources/js_vue3/views/twofaccounts/Import.vue

@@ -5,13 +5,14 @@
     import { useNotifyStore } from '@/stores/notify'
     import { useUserStore } from '@/stores/user'
     import { useBusStore } from '@/stores/bus'
+    import { useTwofaccounts } from '@/stores/twofaccounts'
     import { UseColorMode } from '@vueuse/components'
 
     const $2fauth = inject('2fauth')
     const notify = useNotifyStore()
     const user = useUserStore()
     const bus = useBusStore()
-    const router = useRouter()
+    const twofaccounts = useTwofaccounts()
     const otpDisplay = ref(null)
     const fileInput = ref(null)
     const fileInputLabel = ref(null)
@@ -28,6 +29,14 @@
         counter: null,
         period: null,
     }))
+    const fileForm = new Form({
+        file: null,
+        withSecret: true
+    })
+    const qrcodeForm = new Form({
+        qrcode: null,
+        withSecret: true
+    })
     const showTwofaccountInModal = ref(false)
     const supportedSources = [
         {app: '2FAuth', format: 'JSON'},
@@ -132,13 +141,14 @@
      * Stores the provided account
      */
     async function createAccount(accountIndex) {
-        let twofaccount = exportedAccounts.value[accountIndex]
+        form.fill(exportedAccounts.value[accountIndex])
-        mapAccountToForm(twofaccount)
 
         await form.post('/api/v1/twofaccounts', {returnError: true})
         .then(response => {
             exportedAccounts.value[accountIndex].imported = 1
             exportedAccounts.value[accountIndex].id = response.data.id
+            delete response.data.secret
+            twofaccounts.items.push(response.data)
         })
         .catch(error => {
             exportedAccounts.value[accountIndex].imported = 0
@@ -151,34 +161,14 @@
      * Generates a fresh OTP password and displays it
      */
     function previewAccount(accountIndex) {
-        mapAccountToForm(exportedAccounts.value[accountIndex])
+        form.fill(exportedAccounts.value[accountIndex])
-        .then(() => {
+        showTwofaccountInModal.value = true
-            // this.$refs.OtpDisplayForAdvancedForm.$forceUpdate()
+
-            otpDisplay.value?.show()
+        nextTick().then(() => {
+            otpDisplay.value.show()
         })
-
     }
 
-    /**
-     * Maps account field with the Form object
-     */
-    function mapAccountToForm(twofaccount) {
-        form.account = twofaccount.account
-        form.service = twofaccount.service
-        form.otp_type = twofaccount.otp_type
-        form.icon = twofaccount.icon
-        form.secret = twofaccount.secret
-        form.algorithm = twofaccount.algorithm
-        form.digits = twofaccount.digits
-        form.counter = twofaccount.otp_type === 'hotp' ? twofaccount.counter : null
-        form.period = twofaccount.otp_type === 'totp' ? twofaccount.period : null
-    }
-
-    const fileForm = new Form({
-        file: null,
-        withSecret: true
-    })
-
     /**
      * Uploads the submitted file to the backend for parsing
      */
@@ -205,11 +195,6 @@
         isFetching.value = false
     }
 
-    const qrcodeForm = new Form({
-        qrcode: null,
-        withSecret: true
-    })
-
     /**
      * Uploads the submitted QR code file to the backend for decoding
      */

resources/lang/en/twofaccounts.php

@@ -17,7 +17,7 @@ return [
     'account' => 'Account',
     'accounts' => 'Accounts',
     'icon' => 'Icon',
-    'icon_for_account_x_at_service_y' => 'Icon of the {account} account at {service}',
+    'icon_for_account_x_at_service_y' => 'Icon of the :account account at :service',
     'icon_to_illustrate_the_account' => 'Icon that illustrates the account',
     'remove_icon' => 'Remove icon',
     'no_account_here' => 'No 2FA here!',