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

This commit is contained in:
Bubka 2022-07-22 11:32:55 +02:00
parent 5bab7d4912
commit 7d4add0159
3 changed files with 67 additions and 35 deletions

View File

@ -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,7 +123,7 @@
}
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()
}
@ -134,10 +134,15 @@
this.$parent.isActive = true
}
catch(error) {
this.clearOTP()
}
}
},
getOtp: async function() {
try {
if(this.internal_id) {
const { data } = await this.axios.get('/api/v1/twofaccounts/' + this.internal_id + '/otp')
return data
@ -162,6 +167,13 @@
})
return data
}
}
catch(error) {
if (error.response.status === 422) {
this.$emit('validation-error', error.response)
}
throw error
}
},
startTotpLoop: async function() {

View File

@ -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))
}
},
}

View File

@ -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))
}
},
}