Fix spinner getting stuck

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(`<svg style="width:20px; margin-top: 5px;" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><title>circle anim</title><g fill="#fff" class="nc-icon-wrapper"><g class="nc-loop-circle-24-icon-f"><path d="M12 24a12 12 0 1 1 12-12 12.013 12.013 0 0 1-12 12zm0-22a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2z" fill="#eee" opacity=".4"></path><path d="M24 12h-2A10.011 10.011 0 0 0 12 2V0a12.013 12.013 0 0 1 12 12z" data-color="color-2"></path></g><style>.nc-loop-circle-24-icon-f{--animation-duration:0.5s;transform-origin:12px 12px;animation:nc-loop-circle-anim var(--animation-duration) infinite linear}@keyframes nc-loop-circle-anim{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}</style></g></svg>`);
+                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);
+            const $button = $(this);
-            $(this).closest('.error').hide();
 
-            // Check if already checking code to prevent multiple requests
+            $button.prop('disabled', true);
-            if(is_checking_code)
+            $button.closest('.error').hide();
-                return;
-            // Confirm button
-            is_checking_code = true;
 
-            // set animation
+            that.set('is_checking_code', true);
-            $(this).html(`<svg style="width:20px; margin-top: 5px;" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24"><title>circle anim</title><g fill="#fff" class="nc-icon-wrapper"><g class="nc-loop-circle-24-icon-f"><path d="M12 24a12 12 0 1 1 12-12 12.013 12.013 0 0 1-12 12zm0-22a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2z" fill="#eee" opacity=".4"></path><path d="M24 12h-2A10.011 10.011 0 0 0 12 2V0a12.013 12.013 0 0 1 12 12z" data-color="color-2"></path></g><style>.nc-loop-circle-24-icon-f{--animation-duration:0.5s;transform-origin:12px 12px;animation:nc-loop-circle-anim var(--animation-duration) infinite linear}@keyframes nc-loop-circle-anim{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}</style></g></svg>`);
+            
+            // 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 || 0;
-            const inputLength = target.value.length;
             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);
             }
         });
 

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();
                             }

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();

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",

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(), {});
             }
         };
     }