[Feature] give show password button to wifinetworks (#1190)

.config/ags/modules/sideright/centermodules/wifinetworks.js

@@ -98,6 +98,7 @@ const NetResource = (icon, command) => {
 }
 
 const CurrentNetwork = () => {
+    let passwordVisible = false;
     let authLock = false;
     let timeoutId = null;
 
@@ -154,6 +155,8 @@ const CurrentNetwork = () => {
         label: getString('Cancel'),
         hpack: 'end',
         onClicked: () => {
+            passwordVisible = false;
+            authEntry.visibility = false;
             networkAuth.revealChild = false;
             authFailed.revealChild = false;
             networkAuthSSID.label = '';
@@ -171,6 +174,17 @@ const CurrentNetwork = () => {
             cancelAuthButton
         ]
     });
+    const authVisible = Button({
+        vpack: 'center',
+        child: MaterialIcon('visibility', 'large'),
+        className: 'txt sidebar-wifinetworks-auth-visible',
+        onClicked: (self) => {
+            passwordVisible = !passwordVisible;
+            authEntry.visibility = passwordVisible;
+            self.child.label = passwordVisible ? 'visibility_off' : 'visibility';
+        },
+        setup: setupCursorHover,
+    });
     const authFailed = Revealer({
         revealChild: false,
         child: Label({
@@ -181,6 +195,7 @@ const CurrentNetwork = () => {
     const authEntry = Entry({
         className: 'sidebar-wifinetworks-auth-entry',
         visibility: false,
+        hexpand: true,
         onAccept: (self) => {
             authLock = false;
             // Delete SSID connection before attempting to reconnect
@@ -193,6 +208,8 @@ const CurrentNetwork = () => {
                     networkAuth.revealChild = false; // Hide input if successful
                     authFailed.revealChild = false; // Hide failed message if successful
                     self.text = ''; // Empty input for retry
+                    passwordVisible = false;
+                    authEntry.visibility = false;
                 })
                 .catch(() => {
                     // Connection failed, show password input again
@@ -202,6 +219,13 @@ const CurrentNetwork = () => {
         },
         placeholderText: getString('Enter network password'),
     });
+    const authBox = Box({
+        className: 'sidebar-wifinetworks-auth-box',
+        children: [
+            authEntry,
+            authVisible,
+        ]
+    });
     const forgetButton = Button({
         label: getString('Forget'),
         hexpand: true,
@@ -270,7 +294,7 @@ const CurrentNetwork = () => {
             vertical: true,
             children: [
                 authHeader,
-                authEntry,
+                authBox,
                 authFailed,
             ]
         }),
@@ -288,10 +312,12 @@ const CurrentNetwork = () => {
                         }
                         timeoutId = setTimeout(() => {
                             authLock = false;
+                            passwordVisible = false;
+                            authEntry.visibility = false;
                             self.revealChild = false;
                             authFailed.revealChild = false;
                             Network.wifi.state = 'activated';
-                        }, 20000); // 20 seconds timeout
+                        }, 60000); // 60 seconds timeout
                     }
                 }
                 ).catch(print);

.config/ags/scss/_sidebars.scss

@@ -1006,14 +1006,35 @@ $waifu_image_overlay_transparency: 0.7;
     font-size: 2.045rem;
 }
 
-.sidebar-wifinetworks-auth-entry {
+.sidebar-wifinetworks-auth-box {
     @include small-rounding;
     background-color: $layer1;
     color: $onLayer1;
+}
+
+.sidebar-wifinetworks-auth-entry {
+    @include small-rounding;
+    color: $onLayer1;
     padding: 0.682rem;
     caret-color: $onLayer2;
 }
 
+.sidebar-wifinetworks-auth-visible {
+    @include element_decel;
+    @include small-rounding;
+    min-width: 2.045rem;
+    min-height: 2.045rem;
+    margin: 0.341rem;
+
+    &:hover,
+    &:focus {
+        background-color: $layer3Hover;
+    }
+    &:active {
+        background-color: $layer3Active;
+    }
+}
+
 .sidebar-wifinetworks-bandwidth {
     min-width: 6.3rem;
     padding-left: 1rem;