From 4c53ec6dd3547a860513093bae320faa26ca3a2a Mon Sep 17 00:00:00 2001
From: KernelDeimos <eric.alex.dube@gmail.com>
Date: Mon, 6 May 2024 18:53:43 -0400
Subject: [PATCH] Address UX issues

---
 src/UI/Components/Button.js                | 25 +++++++++++++++++++++-
 src/UI/Components/CodeEntryView.js         |  8 +++++++
 src/UI/Components/RecoveryCodeEntryView.js |  7 ++++++
 src/UI/UIWindowLogin.js                    | 12 +++++++++++
 4 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/src/UI/Components/Button.js b/src/UI/Components/Button.js
index d00a68bbb..148b4ee3e 100644
--- a/src/UI/Components/Button.js
+++ b/src/UI/Components/Button.js
@@ -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 }) {
diff --git a/src/UI/Components/CodeEntryView.js b/src/UI/Components/CodeEntryView.js
index 06a82a2da..ba8197cea 100644
--- a/src/UI/Components/CodeEntryView.js
+++ b/src/UI/Components/CodeEntryView.js
@@ -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;
diff --git a/src/UI/Components/RecoveryCodeEntryView.js b/src/UI/Components/RecoveryCodeEntryView.js
index 6395bbf54..adb9f2d02 100644
--- a/src/UI/Components/RecoveryCodeEntryView.js
+++ b/src/UI/Components/RecoveryCodeEntryView.js
@@ -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') ) {
diff --git a/src/UI/UIWindowLogin.js b/src/UI/UIWindowLogin.js
index 3b69cfeb4..e7fe171df 100644
--- a/src/UI/UIWindowLogin.js
+++ b/src/UI/UIWindowLogin.js
@@ -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%',