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