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(`circle anim`); + 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(`circle anim`); + $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(), {}); } }; }