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.
pull/277/head
brtbr 2024-06-02 14:03:14 +02:00 committed by Brtbr
parent d023ffa331
commit 80933d83ca
No known key found for this signature in database
2 changed files with 23 additions and 2 deletions

View File

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

View File

@ -1 +1,20 @@
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";
}
}
});
});