diff --git a/src/UI/Components/CodeEntryView.js b/src/UI/Components/CodeEntryView.js
index b57dd338..06a82a2d 100644
--- a/src/UI/Components/CodeEntryView.js
+++ b/src/UI/Components/CodeEntryView.js
@@ -79,28 +79,43 @@ export default class CodeEntryView extends Component {
}
on_ready ({ listen }) {
- let is_checking_code = false;
-
listen('error', (error) => {
if ( ! error ) return $(this.dom_).find('.error').hide();
$(this.dom_).find('.error').text(error).show();
});
+ listen('is_checking_code', (is_checking_code, { old_value }) => {
+ if ( old_value === is_checking_code ) return;
+ if ( old_value === undefined ) return;
+
+ const $button = $(this.dom_).find('.code-confirm-btn');
+
+ if ( is_checking_code ) {
+ // set animation
+ $button.prop('disabled', true);
+ $button.html(``);
+ return;
+ }
+
+ const submit_btn_txt = i18n('confirm_code_generic_try_again');
+ $button.html(submit_btn_txt);
+ $button.prop('disabled', false);
+ });
+
+ const that = this;
$(this.dom_).find('.code-confirm-btn').on('click submit', function(e){
e.preventDefault();
e.stopPropagation();
- $(this).prop('disabled', true);
- $(this).closest('.error').hide();
-
- // Check if already checking code to prevent multiple requests
- if(is_checking_code)
- return;
- // Confirm button
- is_checking_code = true;
+ const $button = $(this);
- // set animation
- $(this).html(``);
+ $button.prop('disabled', true);
+ $button.closest('.error').hide();
+
+ that.set('is_checking_code', true);
+
+ // force update to trigger the listener
+ that.set('value', that.get('value'));
})
// Elements
@@ -109,8 +124,7 @@ export default class CodeEntryView extends Component {
// Event listeners
numberCodeForm.addEventListener('input', ({ target }) => {
- if(!target.value.length) { return target.value = null; }
- const inputLength = target.value.length;
+ const inputLength = target.value.length || 0;
let currentIndex = Number(target.dataset.numberCodeInput);
if(inputLength === 2){
const inputValues = target.value.split('');
@@ -141,11 +155,16 @@ export default class CodeEntryView extends Component {
current_code += numberCodeInputs[i].value;
}
+ const submit_btn_txt = i18n('confirm_code_generic_submit');
+ $(this.dom_).find('.code-confirm-btn').html(submit_btn_txt);
+
// Automatically submit if 6 digits entered
if(current_code.length === 6){
- this.set('value', current_code);
$(this.dom_).find('.code-confirm-btn').prop('disabled', false);
- $(this.dom_).find('.code-confirm-btn').trigger('click');
+ this.set('value', current_code);
+ this.set('is_checking_code', true);
+ } else {
+ $(this.dom_).find('.code-confirm-btn').prop('disabled', true);
}
});
diff --git a/src/UI/UIWindow2FASetup.js b/src/UI/UIWindow2FASetup.js
index 6d432311..83b48a38 100644
--- a/src/UI/UIWindow2FASetup.js
+++ b/src/UI/UIWindow2FASetup.js
@@ -119,8 +119,10 @@ const UIWindow2FASetup = async function UIWindow2FASetup () {
if ( ! await check_code_(value) ) {
component.set('error', 'Invalid code');
+ component.set('is_checking_code', false);
return;
}
+ component.set('is_checking_code', false);
stepper.next();
}
diff --git a/src/UI/UIWindowLogin.js b/src/UI/UIWindowLogin.js
index 2ec4fc57..ce7fb3ff 100644
--- a/src/UI/UIWindowLogin.js
+++ b/src/UI/UIWindowLogin.js
@@ -210,9 +210,12 @@ async function UIWindowLogin(options){
if ( ! next_data.proceed ) {
component.set('error', i18n('confirm_code_generic_incorrect'));
+ component.set('is_checking_code', false);
return;
}
+ component.set('is_checking_code', false);
+
data = next_data;
$(win).close();
diff --git a/src/i18n/translations/en.js b/src/i18n/translations/en.js
index 3c8a0a9d..c9eebb0e 100644
--- a/src/i18n/translations/en.js
+++ b/src/i18n/translations/en.js
@@ -51,6 +51,7 @@ const en = {
confirm_account_for_free_referral_storage_c2a: 'Create an account and confirm your email address to receive 1 GB of free storage. Your friend will get 1 GB of free storage too.',
confirm_code_generic_incorrect: "Incorrect Code.",
confirm_code_generic_submit: "Submit Code",
+ confirm_code_generic_try_again: "Try Again",
confirm_code_generic_title: "Enter Confirmation Code",
confirm_code_2fa_instruction: "Enter the 6-digit code from your authenticator app.",
confirm_code_2fa_submit_btn: "Submit",
diff --git a/src/util/Component.js b/src/util/Component.js
index 18dd84eb..6943c964 100644
--- a/src/util/Component.js
+++ b/src/util/Component.js
@@ -133,7 +133,7 @@ export class Component extends HTMLElement {
return {
listen: (name, callback) => {
this.values_[name].sub(callback);
- callback(this.values_[name].get());
+ callback(this.values_[name].get(), {});
}
};
}