work on obfuscating PSK

netbox/templates/base/base.html

@@ -101,6 +101,24 @@
       }
       window.addEventListener('resize', function(){ checkSideNav() });
       checkSideNav();
+
+      window.addEventListener('DOMContentLoaded', function() {
+        secretToggle = document.querySelector('.secret-toggle')
+        secret = document.querySelector('.secret')
+        secret_value = secret.innerHTML
+        obfuscated = "••••••••"
+        secret.innerHTML = obfuscated
+
+        secretToggle.addEventListener('click', function() {
+          if (secretToggle.classList.contains('active')) {
+            secret.innerHTML = secret_value
+            secretToggle.innerHTML = 'Hide'
+          } else {
+            secret.innerHTML = obfuscated
+            secretToggle.innerHTML = 'Show'
+          }
+        })
+      })
     </script>
 
     {# Page layout #}

netbox/templates/wireless/inc/authentication_attrs.html

@@ -14,7 +14,7 @@
       </tr>
       <tr>
           <th scope="row">PSK</th>
-          <td class="font-monospace">{{ object.auth_psk|placeholder }}</td>
+          <td class="font-monospace secret">{{ object.auth_psk|placeholder }}</td><button type="button" class="btn btn-primary secret-toggle" data-bs-toggle="button">Show</button>
       </tr>
     </table>
   </div>