Skip to content

Commit

Permalink
Fix #102 - Show form errors when submitting an invalid OTP preview
Browse files Browse the repository at this point in the history
  • Loading branch information
@Bubka
Bubka committed Jul 22, 2022
1 parent 5bab7d4 commit 7d4add0
Show file tree
Hide file tree
Showing 3 changed files with 67 additions and 35 deletions.
74 changes: 43 additions & 31 deletions resources/js/components/OtpDisplayer.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -123,44 +123,56 @@
}
if( this.internal_id || this.uri || this.secret ) { // minimun required vars to get an otp from the backend
if(this.isTimeBased(this.internal_otp_type)) {
await this.startTotpLoop()
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') } });
this.$parent.isActive = true
}
else if(this.isHMacBased(this.internal_otp_type)) {
await this.getHOTP()
catch(error) {
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) {
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
try {
if(this.internal_id) {
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 {
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
catch(error) {
if (error.response.status === 422) {
this.$emit('validation-error', error.response)
}
throw error
}
},
Expand Down
22 changes: 19 additions & 3 deletions resources/js/views/twofaccounts/Create.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -311,6 +322,7 @@
},
previewAccount() {
this.form.clear()
this.$refs.AdvancedFormOtpDisplayer.show()
},
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -424,6 +436,10 @@
this.deleteIcon()
}
},
mapDisplayerErrors (event) {
this.form.errors.set(this.form.extractErrors(event))
}
},
Expand Down
6 changes: 5 additions & 1 deletion resources/js/views/twofaccounts/Edit.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -305,6 +305,10 @@
this.form.uri = payload.nextUri
},
mapDisplayerErrors (event) {
this.form.errors.set(this.form.extractErrors(event))
}
},
}
Expand Down

0 comments on commit 7d4add0

Please sign in to comment.