Fix #102 - Show form errors when submitting an invalid OTP preview

resources/js/components/OtpDisplayer.vue

@@ -7,7 +7,7 @@
         <p class="is-size-6 has-text-grey has-ellipsis">{{ internal_account }}</p>
         <p class="is-size-1 has-text-white is-clickable" :title="$t('commons.copy_to_clipboard')" v-clipboard="() => internal_password.replace(/ /g, '')" v-clipboard:success="clipboardSuccessHandler">{{ displayedOtp }}</p>
         <ul class="dots" v-show="isTimeBased(internal_otp_type)">
-            <li v-for="n in 10"></li>
+            <li v-for="n in 10" :key="n"></li>
         </ul>
         <ul v-show="isHMacBased(internal_otp_type)">
             <li>counter: {{ internal_counter }}</li>
@@ -123,44 +123,56 @@
                 }
 
                 if( this.internal_id || this.uri || this.secret ) { // minimun required vars to get an otp from the backend
+                    try {
+                        if(this.isTimeBased(this.internal_otp_type)) {
+                            await this.startTotpLoop()
+                        }
+                        else if(this.isHMacBased(this.internal_otp_type)) {
+                            await this.getHOTP()
+                        }
+                        else this.$router.push({ name: 'genericError', params: { err: this.$t('errors.not_a_supported_otp_type') } });
     
-                    if(this.isTimeBased(this.internal_otp_type)) {
+                        this.$parent.isActive = true
-                        await this.startTotpLoop()
                     }
-                    else if(this.isHMacBased(this.internal_otp_type)) {
+                    catch(error) {
-                        await this.getHOTP()
+                        this.clearOTP()
                     }
-                    else this.$router.push({ name: 'genericError', params: { err: this.$t('errors.not_a_supported_otp_type') } });
-
-                    this.$parent.isActive = true
                 }
             },
 
             getOtp: async function() {
 
-                if(this.internal_id) {
+                try {
-                    const { data } =  await this.axios.get('/api/v1/twofaccounts/' + this.internal_id + '/otp')
+                    if(this.internal_id) {
-                    return data
+                        const { data } =  await this.axios.get('/api/v1/twofaccounts/' + this.internal_id + '/otp')
+                        return data
+                    }
+                    else if(this.internal_uri) {
+                        const { data } =  await this.axios.post('/api/v1/twofaccounts/otp', {
+                            uri: this.internal_uri
+                        })
+                        return data
+                    }
+                    else {
+                        const { data } =  await this.axios.post('/api/v1/twofaccounts/otp', {
+                            service     : this.internal_service,
+                            account     : this.internal_account,
+                            icon        : this.internal_icon,
+                            otp_type    : this.internal_otp_type,
+                            secret      : this.internal_secret,
+                            digits      : this.internal_digits,
+                            algorithm   : this.internal_algorithm,
+                            period      : this.internal_period,
+                            counter     : this.internal_counter,
+                        })
+                        return data
+                    }
                 }
-                else if(this.internal_uri) {
+                catch(error) {
-                    const { data } =  await this.axios.post('/api/v1/twofaccounts/otp', {
+                    if (error.response.status === 422) {
-                        uri: this.internal_uri
+                        this.$emit('validation-error', error.response)
-                    })
+                    }
-                    return data
+                    throw error
-                }
-                else {
-                    const { data } =  await this.axios.post('/api/v1/twofaccounts/otp', {
-                        service     : this.internal_service,
-                        account     : this.internal_account,
-                        icon        : this.internal_icon,
-                        otp_type    : this.internal_otp_type,
-                        secret      : this.internal_secret,
-                        digits      : this.internal_digits,
-                        algorithm   : this.internal_algorithm,
-                        period      : this.internal_period,
-                        counter     : this.internal_counter,
-                    })
-                    return data
                 }
             },
 

resources/js/views/twofaccounts/Create.vue

@@ -103,7 +103,7 @@
                         <p class="control">
                             <span class="select">
                                 <select @change="form.secret=''" v-model="secretIsBase32Encoded">
-                                    <option v-for="(format, index) in secretFormats" :key="index" :value="format.value">{{ format.text }}</option>
+                                    <option v-for="(format) in secretFormats" :key="format.value" :value="format.value">{{ format.text }}</option>
                                 </select>
                             </span>
                         </p>
@@ -144,7 +144,7 @@
             </form>
             <!-- modal -->
             <modal v-model="ShowTwofaccountInModal">
-                <otp-displayer ref="AdvancedFormOtpDisplayer" v-bind="form.data()" @increment-hotp="incrementHotp">
+                <otp-displayer ref="AdvancedFormOtpDisplayer" v-bind="otpdisplayerData" @increment-hotp="incrementHotp" @validation-error="mapDisplayerErrors">
                 </otp-displayer>
             </modal>
         </form-wrapper>
@@ -255,6 +255,17 @@
             },
         },
 
+        computed: {
+            otpdisplayerData: function() {
+                let o = this.form.data()
+                o.secret = this.secretIsBase32Encoded
+                    ? o.secret
+                    : Base32.encode(o.secret).toString();
+
+                    return o
+            }
+        },
+
         mounted: function () {
             if( this.$route.params.decodedUri ) {
                 this.uri = this.$route.params.decodedUri
@@ -311,6 +322,7 @@
             },
 
             previewAccount() {
+                this.form.clear()
                 this.$refs.AdvancedFormOtpDisplayer.show()
             },
 
@@ -367,7 +379,7 @@
             },
 
             fetchLogo() {
-                if ($root.appSettings.getOfficialIcons) {
+                if (this.$root.appSettings.getOfficialIcons) {
                     this.axios.post('/api/v1/icons/default', {service: this.form.service}, {returnError: true}).then(response => {
                         if (response.status === 201) {
                             // clean possible already uploaded temp icon
@@ -425,6 +437,10 @@
                 }
             },
 
+            mapDisplayerErrors (event) {
+                this.form.errors.set(this.form.extractErrors(event))
+            }
+            
         },
 
     }

resources/js/views/twofaccounts/Edit.vue

@@ -130,7 +130,7 @@
         </form>
         <!-- modal -->
         <modal v-model="ShowTwofaccountInModal">
-            <otp-displayer ref="AdvancedFormOtpDisplayer" v-bind="form.data()" @increment-hotp="incrementHotp">
+            <otp-displayer ref="AdvancedFormOtpDisplayer" v-bind="form.data()" @increment-hotp="incrementHotp" @validation-error="mapDisplayerErrors">
             </otp-displayer>
         </modal>
     </form-wrapper>
@@ -305,6 +305,10 @@
                 this.form.uri = payload.nextUri
             },
 
+            mapDisplayerErrors (event) {
+                this.form.errors.set(this.form.extractErrors(event))
+            }
+
         },
 
     }