mirrors/puter
1
0
Fork 0
mirror of https://github.com/HeyPuter/puter synced 2024-11-14 22:06:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix spinner getting stuck

Browse Source
This commit is contained in:
KernelDeimos 2024-05-06 01:30:32 -04:00
parent 77fedee58a
commit 1592bc44fc
5 changed files with 42 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/UI/Components/CodeEntryView.js
View File

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

2
src/UI/UIWindow2FASetup.js
View File

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

3
src/UI/UIWindowLogin.js
View File

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

1
src/i18n/translations/en.js
View File

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

2
src/util/Component.js
View File

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