(FYI I am moving to passwordless (and serverless) architecture so I am dumping here anything password-related) - Password Tricks: When you press CTRL+X on an HTML password input it will not delete the text, if it annoys you, this will fix it + More stuff

login-register.html

<h1>Register:</h1>
<label for="password">Password:</label>
<div class="password-field">
    <div onclick="togglePass(this);">👁‍🗨</div>
    <input type="password" required value="12345678aA!" name="password" autocomplete="new-password">
</div>
<label for="password">Confirm Password:</label>
<div class="password-field">
    <div onclick="togglePass(this);">👁‍🗨</div>
    <input type="password" required value="12345678aA!" name="confirm_password" autocomplete="new-password">
</div>

<h1>Login:</h1>
<label for="password">Password:</label>
<div class="password-field">
    <div onclick="togglePass(this);">👁‍🗨</div>
    <input type="password" required value="12345678aA!" name="password" autocomplete="current-password">
</div>

<style>
.password-field div {
    position: absolute;
    right: -9px;
    top: 2px;
    cursor: pointer;
    user-select: none;
    padding: 4px;
}

.password-field div.active-btn {
    background: linear-gradient(45deg, #7b0303, transparent);
    border-radius: 50%;
}

.password-field {
    position: relative;
    width: 100%;
}

.input-field {
    width: 100%;
}
</style>

Password tricks + Enable deleting password on CTRL+X - GG.js

for (const passwordInput of document.querySelectorAll('input[type=password]')) {
    passwordInput.addEventListener('keydown', function (event) {
        if (this.getAttribute('type') !== 'password') return;
        if (event.ctrlKey && event.key === 'x') this.value = '';
    });
}

password-server-limits.js

// Password limits:
// if (DEBUG_REGISTER) console.log("password", requestBody.password);
if (!requestBody.password) return new Response(JSON.stringify({ error: 20 })); // Password is missing
if (requestBody.password.length < 8) return new Response(JSON.stringify({ error: 21 })); // Password is too short
if (requestBody.password.length > 128) return new Response(JSON.stringify({ error: 22 })); // Password is too long
const lowercaseRegex = /[a-z]/;
if (!lowercaseRegex.test(requestBody.password)) return new Response(JSON.stringify({ error: 30 })); // Must contain at least 1 lowercase letter
const uppercaseRegex = /[A-Z]/;
if (!uppercaseRegex.test(requestBody.password)) return new Response(JSON.stringify({ error: 31 })); // Must contain at least 1 uppercase letter
const specialCharacterRegex = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/;
if (!specialCharacterRegex.test(requestBody.password)) return new Response(JSON.stringify({ error: 32 })); // Must contain at least 1 special character
const numberRegex = /[0-9]/;
if (!numberRegex.test(requestBody.password)) return new Response(JSON.stringify({ error: 33 })); // Must contain at least 1 number

// Check that confirm password matches:
if (!requestBody.confirm_password) return new Response(JSON.stringify({ error: 40 })); // Confirm Password is missing
if (requestBody.confirm_password !== requestBody.password) return new Response(JSON.stringify({ error: 41 })); // Passwords did not match

passwordValidation.js

const isInvalidPasswordChar = str => {
    const regex = /^[~`!@#$%^&*()_+=[\]\{}|;':",.\/<>?a-zA-Z0-9-]+$/;
    return regex.test(str)
};

function isValidPasswordChar(password) {
    // Check for the presence of at least one special character
    return /[!@#$%^&*()_+=[\]{}|;:'",.<>?/-]/.test(password);
}

/*
// Make sure password is strong enough
if (!core.tools.isInvalidPasswordChar(pass)) {
    if (captchaData) core.tools.svgCaptcha.retryCaptcha(id, captchaData);
    return res.json({ error: 'Password can not contain non-English letters.'});
}
// Make sure the password is long enough
if (pass.length < 8) {
    if (captchaData) core.tools.svgCaptcha.retryCaptcha(id, captchaData);
    return res.json({ error: 'Password must be at least 8 characters long.'});
}
// Make sure the password is short enough
if (pass.length > 64) {
    if (captchaData) core.tools.svgCaptcha.retryCaptcha(id, captchaData);
    return res.json({ error: 'Passwords limited to a maximum of 64 characters.'});
}
// Check for the presence of at least one uppercase letter
if (!/[A-Z]/.test(pass)) {
    if (captchaData) core.tools.svgCaptcha.retryCaptcha(id, captchaData);
    return res.json({ error: 'Password must contain at least one uppercase letter.'});
}
// Check for the presence of at least one lowercase letter
if (!/[a-z]/.test(pass)) {
    if (captchaData) core.tools.svgCaptcha.retryCaptcha(id, captchaData);
    return res.json({ error: 'Password must contain at least one lowercase letter.'});
}
// Check for the presence of at least one digit
if (!/\d/.test(pass)) {
    if (captchaData) core.tools.svgCaptcha.retryCaptcha(id, captchaData);
    return res.json({ error: 'Password must contain at least one digit.'});
}
// Check for the presence of at least one special character
if (!core.tools.isValidPasswordChar(pass)) {
    if (captchaData) core.tools.svgCaptcha.retryCaptcha(id, captchaData);
    return res.json({ error: 'Password must contain at least one special character.'});
}
*/

module.exports = {
    isInvalidPasswordChar,
    isValidPasswordChar
}

test-password-fields.js

// show the pass on load for testing
window.onload = function () {
    for (const pass of document.querySelectorAll('[type=password]')) {
        if (pass.getAttribute('type') == 'password') {
            pass.setAttribute('type', 'text');
        } else {
            pass.setAttribute('type', 'password');
        }
    }
}

togglePass.js

function togglePass(el) {
    const currentEl = el.parentElement.querySelector('input');
    const currentAttr = currentEl.getAttribute('type');
    el.classList.toggle('active-btn');
    if (currentAttr == 'password') {
        currentEl.setAttribute('type', 'text');
    } else {
        currentEl.setAttribute('type', 'password');
    }
}