password visibilitty toggle

Author: czechbol

src/components/menus/network/wifi/APStaging/PasswordInput.tsx

@@ -10,7 +10,7 @@ export const PasswordInput = ({
     staging,
     isConnectingWithPassword,
 }: PasswordInputProps): JSX.Element => {
-    const showPassword = true;
+    const showPassword = Variable(false);
 
     return (
         <box className="network-password-input-container" halign={Gtk.Align.FILL} hexpand vertical>
@@ -19,7 +19,7 @@ export const PasswordInput = ({
                     className="network-password-input"
                     hexpand
                     halign={Gtk.Align.START}
-                    visibility={!showPassword}
+                    visibility={bind(showPassword)}
                     placeholderText="Enter Password"
                     onKeyPressEvent={(self, event) => {
                         handlePasswordInput(self, event, staging, isConnectingWithPassword);
@@ -28,6 +28,23 @@ export const PasswordInput = ({
                         setTimeout(() => self.grab_focus(), 100);
                     }}
                 />
+                <button
+                    className="toggle-password-visibility-button"
+                    halign={Gtk.Align.END}
+                    onClick={(_, event) => {
+                        if (isPrimaryClick(event)) {
+                            showPassword.set(!showPassword.get());
+                        }
+                    }}
+                    tooltipText={bind(showPassword).as((show) => (show ? 'Hide password' : 'Show password'))}
+                >
+                    <icon
+                        className="toggle-password-visibility-icon"
+                        icon={bind(showPassword).as((show) =>
+                            show ? 'view-conceal-symbolic' : 'view-reveal-symbolic',
+                        )}
+                    />
+                </button>
                 <button
                     className="close-network-password-input-button"
                     halign={Gtk.Align.END}