github_mirrors/puter
1
0
Fork 0
mirror of https://github.com/HeyPuter/puter.git synced 2025-01-23 22:40:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

Address UX issues

Browse Source
This commit is contained in:
KernelDeimos 2024-05-06 18:53:43 -04:00
parent b2d678ca95
commit 4c53ec6dd3
4 changed files with 51 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/UI/Components/Button.js
View File

@ -5,6 +5,7 @@ export default class Button extends Component {
label: { value: 'Test Label' },
on_click: { value: null },
enabled: { value: true },
style: { value: 'primary' }
}
static RENDER_MODE = Component.NO_SHADOW;
@ -14,14 +15,36 @@ export default class Button extends Component {
margin: 0;
color: hsl(220, 25%, 31%);
}
.link-button {
background: none;
border: none;
color: #3b4863;
text-decoration: none;
cursor: pointer;
text-align: center;
display: block;
width: 100%;
}
.link-button:hover {
text-decoration: underline;
}
`;
create_template ({ template }) {
if ( this.get('style') === 'link' ) {
$(template).html(/*html*/`
<button type="submit" class="link-button code-confirm-btn" style="margin-top:10px;" disabled>${
html_encode(this.get('label'))
}</button>
`);
return;
}
$(template).html(/*html*/`
<button type="submit" class="button button-block button-primary code-confirm-btn" style="margin-top:10px;" disabled>${
<button type="submit" class="button button-block button-${this.get('style')} code-confirm-btn" style="margin-top:10px;" disabled>${
html_encode(this.get('label'))
}</button>
`);
}
on_ready ({ listen }) {

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

@ -84,6 +84,14 @@ export default class CodeEntryView extends Component {
$(this.dom_).find('.error').text(error).show();
});
listen('value', value => {
// clear the inputs
if ( value === undefined ) {
$(this.dom_).find('.digit-input').val('');
return;
}
})
listen('is_checking_code', (is_checking_code, { old_value }) => {
if ( old_value === is_checking_code ) return;
if ( old_value === undefined ) return;

7
src/UI/Components/RecoveryCodeEntryView.js
View File

@ -68,6 +68,13 @@ export default class RecoveryCodeEntryView extends Component {
$(this.dom_).find('.error').text(error).show();
});
listen('value', (value) => {
// clear input
if ( value === undefined ) {
$(this.dom_).find('input').val('');
}
});
const input = $(this.dom_).find('input');
input.on('input', () => {
if ( input.val().length === this.get('length') ) {

12
src/UI/UIWindowLogin.js
View File

@ -178,6 +178,7 @@ async function UIWindowLogin(options){
if ( data.next_step === 'otp' ) {
p = new TeePromise();
let code_entry;
let recovery_entry;
let win;
let stepper;
const otp_option = new Flexer({
@ -196,6 +197,7 @@ async function UIWindowLogin(options){
_ref: me => code_entry = me,
async [`property.value`] (value, { component }) {
let error_i18n_key = 'something_went_wrong';
if ( ! value ) return;
try {
const resp = await fetch(`${api_origin}/login/otp`, {
method: 'POST',
@ -236,8 +238,11 @@ async function UIWindowLogin(options){
}),
new Button({
label: i18n('login2fa_use_recovery_code'),
style: 'link',
on_click: async () => {
stepper.next();
code_entry.set('value', undefined);
code_entry.set('error', undefined);
}
})
],
@ -258,7 +263,9 @@ async function UIWindowLogin(options){
`
}),
new RecoveryCodeEntryView({
_ref: me => recovery_entry = me,
async [`property.value`] (value, { component }) {
if ( ! value ) return;
console.log('token?', data.otp_jwt_token);
console.log('what about the rest of the data?', data);
const resp = await fetch(`${api_origin}/login/recovery-code`, {
@ -287,8 +294,11 @@ async function UIWindowLogin(options){
}),
new Button({
label: i18n('login2fa_recovery_back'),
style: 'link',
on_click: async () => {
stepper.back();
recovery_entry.set('value', undefined);
recovery_entry.set('error', undefined);
}
})
]
@ -299,7 +309,9 @@ async function UIWindowLogin(options){
win = await UIComponentWindow({
component,
width: 500,
height: 410,
backdrop: true,
is_resizable: false,
body_css: {
width: 'initial',
height: '100%',