Revert "Remove the Button component from some UI components"

This reverts commit 1eb4c60.
HeyPuter · Feb 28, 2025 · b56f5c5 · b56f5c5
1 parent 5c62742
commit b56f5c5
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 75 deletions.
diff --git a/src/gui/src/UI/Settings/UITabSecurity.js b/src/gui/src/UI/Settings/UITabSecurity.js
@@ -17,6 +17,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 import TeePromise from "../../util/TeePromise.js";
+import Button from "../Components/Button.js";
 import Flexer from "../Components/Flexer.js";
 import JustHTML from "../Components/JustHTML.js";
 import PasswordEntry from "../Components/PasswordEntry.js";
@@ -111,28 +112,6 @@ export default {
                 password_confirm_promise.resolve(true);
                 $(win).close();
             }
-
-            const passwordEntryElement = new PasswordEntry({
-                _ref: me => password_entry = me,
-                on_submit: async () => {
-                    try_password();
-                }
-            });
-
-            const disableBtn = $(`<button class="button button-primary">${i18n('disable_2fa')}</button>`);
-            disableBtn.on('click', async () => {
-                try_password();
-            });
-
-            const cancelBtn = $(`<button class="button button-secondary">${i18n('cancel')}</button>`);
-            cancelBtn.on('click', async () => {
-                password_confirm_promise.resolve(false);
-                $(win).close();
-            });
-
-            const buttonContainer = $('<div style="display: flex; gap: 5pt;"></div>');
-            buttonContainer.append(disableBtn, cancelBtn);
-
             const password_confirm = new Flexer({
                 children: [
                     new JustHTML({
@@ -148,9 +127,27 @@ export default {
                     new Flexer({
                         gap: '5pt',
                         children: [
-                            passwordEntryElement,
-                            { dom: buttonContainer[0] }
-                        ]            
+                            new PasswordEntry({
+                                _ref: me => password_entry = me,
+                                on_submit: async () => {
+                                    try_password();
+                                }
+                            }),
+                            new Button({
+                                label: i18n('disable_2fa'),
+                                on_click: async () => {
+                                    try_password();
+                                }
+                            }),
+                            new Button({
+                                label: i18n('cancel'),
+                                style: 'secondary',
+                                on_click: async () => {
+                                    password_confirm_promise.resolve(false);
+                                    $(win).close();
+                                }
+                            })
+                        ]
                     }),
                 ]
             });

diff --git a/src/gui/src/UI/UIWindow2FASetup.js b/src/gui/src/UI/UIWindow2FASetup.js
@@ -39,6 +39,7 @@
 
 import TeePromise from "../util/TeePromise.js";
 import ValueHolder from "../util/ValueHolder.js";
+import Button from "./Components/Button.js";
 import CodeEntryView from "./Components/CodeEntryView.js";
 import ConfirmationsView from "./Components/ConfirmationsView.js";
 import Flexer from "./Components/Flexer.js";
@@ -168,35 +169,14 @@ const UIWindow2FASetup = async function UIWindow2FASetup () {
                             ],
                             confirmed: done_enabled,
                         }),
-                        {
-                            dom: (function() {
-                                const enableButton = $(`<button class="button button-primary button-block" style="margin-top:10px;">${i18n('setup2fa_5_button')}</button>`);
-
-                                // Initially disabled if done_enabled is initially false
-                                if (!done_enabled.get()) {
-                                    enableButton.prop('disabled', true);
-                                }
-
-                                // Handle the enabled state changes
-                                done_enabled.sub(value => {
-                                    enableButton.prop('disabled', !value);
-                                });
-
-                                enableButton.on('click', async () => {
-                                    // Optional loading animation
-                                    const originalText = enableButton.text();
-                                    enableButton.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>`);
-
-                                    await enable_2fa_();
-                                    stepper.next();
-
-                                    // Reset button text (though it may not be necessary since the view is changing)
-                                    enableButton.html(originalText);
-                                });
-
-                                return enableButton[0]; // Return the DOM element
-                            })()
-                        }
+                        new Button({
+                            enabled: done_enabled,
+                            label: i18n('setup2fa_5_button'),
+                            on_click: async () => {
+                                await enable_2fa_();
+                                stepper.next();
+                            },
+                        }),
                     ]
                 }),
             ]

diff --git a/src/gui/src/UI/UIWindowProgress.js b/src/gui/src/UI/UIWindowProgress.js
@@ -19,6 +19,7 @@
 
 import UIWindow from './UIWindow.js'
 import Placeholder from '../util/Placeholder.js';
+import Button from './Components/Button.js';
 
 /**
  * General purpose progress dialog.
@@ -110,19 +111,25 @@ async function UIWindowProgress({
     });
 
     if (on_cancel) {
-        const cancelBtn = $(`<button class="button button-small">${i18n('cancel')}</button>`);
-        cancelBtn.on('click', () => {
-            $(el_window).close();
-            on_cancel();
+        const cancel_btn = new Button({
+            label: i18n('cancel'),
+            style: 'small',
+            on_click: () => {
+                $(el_window).close();
+                on_cancel();
+            },
         });
-        placeholder_cancel_btn.replaceWith(cancelBtn);
+        cancel_btn.attach(placeholder_cancel_btn);
     }
-
-    const okBtn = $(`<button class="button button-small">${i18n('ok')}</button>`);
-    okBtn.on('click', () => {
-        $(el_window).close();
+
+    const ok_btn = new Button({
+        label: i18n('ok'),
+        style: 'small',
+        on_click: () => {
+            $(el_window).close();
+        },
     });
-    placeholder_ok_btn.replaceWith(okBtn);
+    ok_btn.attach(placeholder_ok_btn);
 
     return {
         element: el_window,

diff --git a/src/gui/src/UI/UIWindowThemeDialog.js b/src/gui/src/UI/UIWindowThemeDialog.js
@@ -17,6 +17,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 import UIComponentWindow from './UIComponentWindow.js';
+import Button from './Components/Button.js';
 import Flexer from './Components/Flexer.js';
 import Slider from './Components/Slider.js';
 
@@ -60,19 +61,20 @@ const UIWindowThemeDialog = async function UIWindowThemeDialog (options) {
         on_change: slider_ch,
     });
 
-    const resetButton = $(`<button class="button button-secondary">${i18n('reset_colors')}</button>`);
-    resetButton.on('click', () => {
-        svc_theme.reset();
-        state = {};
-        hue_slider.set('value', svc_theme.get('hue'));
-        sat_slider.set('value', svc_theme.get('sat'));
-        lig_slider.set('value', svc_theme.get('lig'));
-        alpha_slider.set('value', svc_theme.get('alpha'));
-    });
-
     const component = new Flexer({
         children: [
-            { dom: resetButton[0] },
+            new Button({
+                label: i18n('reset_colors'),
+                style: 'secondary',
+                on_click: () => {
+                    svc_theme.reset();
+                    state = {};
+                    hue_slider.set('value', svc_theme.get('hue'));
+                    sat_slider.set('value', svc_theme.get('sat'));
+                    lig_slider.set('value', svc_theme.get('lig'));
+                    alpha_slider.set('value', svc_theme.get('alpha'));
+                },
+            }),
             hue_slider,
             sat_slider,
             lig_slider,