From 80933d83caa5896e5bc7f645ae8d4f0524ff44d8 Mon Sep 17 00:00:00 2001
From: brtbr <contact@jsmg.de>
Date: Sun, 2 Jun 2024 14:03:14 +0200
Subject: [PATCH] feat: add a checkbox to toggle password visibility

This commit adds the ability to toggle the password visibility for the
password input for guests in password-protected bbb rooms.
---
 templates/join.php |  4 +++-
 ts/join.ts         | 21 ++++++++++++++++++++-
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/templates/join.php b/templates/join.php
index 7eec0de..0cd49bb 100644
--- a/templates/join.php
+++ b/templates/join.php
@@ -23,9 +23,11 @@
 				required minlength="3" autofocus />
 			<?php if (isset($_['passwordRequired']) && $_['passwordRequired']): ?>
 				<label for="password" class="infield"><?php p($l->t('Password')); ?></label>
-				<input type="text" name="password" id="password" class="bbb-input"
+				<input type="password" name="password" id="password" class="bbb-input"
 					placeholder="<?php p($l->t('Password')); ?>" value=""
 					required minlength="8" />
+				<input type="checkbox" name="password-visibility-toggle" id="password-visibility" class="checkbox" value=""/>
+            	<label for="password-visibility"><?php p($l->t('Show Password')); ?></label>
 				<button class="primary"><?php p($l->t('Join')); ?>
 				<div class="submit-icon icon-confirm-white"></div></button>
 			<?php else: ?>
diff --git a/ts/join.ts b/ts/join.ts
index 15f35f5..7d81f66 100644
--- a/ts/join.ts
+++ b/ts/join.ts
@@ -1 +1,20 @@
-import './join.scss';
\ No newline at end of file
+import './join.scss';
+
+
+$(() => {
+    $<HTMLInputElement>('#password-visibility').on('change', function (ev) {
+        ev.preventDefault();
+        
+        console.log(`checkbox ${ev.target.name} changed to ${ev.target.checked}`);
+
+        const passwordField = document.querySelector("#password") as HTMLInputElement | null;       
+    
+        if (passwordField != null) {
+            if (passwordField.type === "password") {
+                passwordField.type = "text";
+            } else {
+                passwordField.type = "password";
+            }
+        }       
+    });
+});
\ No newline at end of file