diff --git a/app/javascript/submission_form/kba_step.vue b/app/javascript/submission_form/kba_step.vue index 9abe24f0..15958ad3 100644 --- a/app/javascript/submission_form/kba_step.vue +++ b/app/javascript/submission_form/kba_step.vue @@ -10,9 +10,15 @@ - Question {{ currentQuestionIndex + 1 }} / {{ questions.length }} + Question {{ currentQuestionIndex + 1 }} / {{ questions.length }} + + Time left: {{ formattedTimeLeft }} +
-

{{ currentQuestion.prompt }}

+

+ {{ currentQuestion.prompt }} +

{ + if (this.timeLeftSeconds === null) return + + this.timeLeftSeconds -= 1 + + if (this.timeLeftSeconds <= 0) { + this.handleTimeout() + } + }, 1000) + }, + handleTimeout () { + this.clearCountdown() + + this.questions = null + this.token = null + this.reference = null + this.answers = {} + this.currentQuestionIndex = 0 + this.error = `Knowledge Based Authentication timed out. You only have ${this.kbaTimeLimitSeconds} seconds to complete the verification. Please retry.` + }, nextQuestion () { if (this.isLastQuestion) { this.$emit('submit') @@ -405,6 +462,8 @@ export default { } }, restartKba () { + this.clearCountdown() + this.questions = null this.token = null this.reference = null @@ -415,6 +474,7 @@ export default { async startKba () { this.isLoading = true this.error = null + this.clearCountdown() try { const payload = { ...this.form, submitter_slug: this.submitterSlug } @@ -457,6 +517,8 @@ export default { this.questions.forEach(q => { this.answers[q.id] = null }) + + this.startCountdown() } else { throw new Error('Invalid KBA response') } @@ -467,6 +529,8 @@ export default { } }, async submit () { + this.clearCountdown() + this.isSubmitting = true this.error = null