Merge 2c30b2fd85 into c2e61304c1

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: ?>

ts/join.ts

@@ -1 +1,20 @@
-import './join.scss';
+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";
+            }
+        }       
+    });
+});