<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Toggle double password</title>
    <link rel="stylesheet" href="style.css">
    <script src="main.js"></script>
</head>
<body>
<h1>Toggle Password Visibility</h1>

<h2>Log In</h2>
<form>
    <div>
        <label for="username">Username</label>
        <input type="text" name="username" id="username">
    </div>

    <div>
        <label for="password">Password</label>
        <input type="password" name="password" id="password">
    </div>

    <div>
        <label class="no-bold" for="show-passwords">
            <input type="checkbox" name="show-passwords" id="show-passwords" data-show-pw="#password">
            Show password
        </label>
    </div>

    <button type="submit">Log In</button>
</form>


<h2>Update Password</h2>
<form>
    <div>
        <label for="current-pw">Current Password</label>
        <input type="password" name="current-pw" id="current-pw">
    </div>

    <div>
        <label for="new-pw">New Password</label>
        <input type="password" name="new-pw" id="new-pw">
    </div>

    <div>
        <label class="no-bold" for="show-password">
            <input type="checkbox" name="show-password" id="show-password" data-show-pw="#current-pw, #new-pw">
            Show passwords
        </label>
    </div>

    <button type="submit">Change Password</button>
</form>

</body>
</html>
/**
		 * Add box sizing to everything
		 * @link http://www.paulirish.com/2012/box-sizing-border-box-ftw/
		 */
/* line 38, src/sass/components/_normalize.scss */
*,
*:before,
*:after {
    box-sizing: border-box;
}
/**
 * Layout
 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    font-size: 112.5%;
    margin-left: auto;
    margin-right: auto;
    max-width: 40em;
    width: 88%;
    background-color: #AD2167;
    color: #FFE0F0;
}
/**
 * Typography
 */
h2 {
    font-weight: normal;
    margin-top: 2em;
}
/**
 * Forms
 */
input {
    margin-bottom: 1em;
    padding: 0.5em 1em;
    width: 100%;
    border: 1px solid #DA4A91;
}

[type="checkbox"] {
    width: auto;
}
label {
    display: block;
    font-weight: bold;
    margin-bottom: 0.5em;
    width: 100%;
}
button {
    background-color: #DA4A91;
    border: 1px solid #DA4A91;
    border-radius: 5px;
    color: #ffffff;
    display: inline-block;
    font-size: 0.9375em;
    font-weight: normal;
    line-height: 1.2;
    margin-right: 0.3125em;
    margin-bottom: 0.3125em;
    padding: 0.5em 0.6875em;
}
button:hover,
button:focus,
button:active {
    background-color: #FFE0F0;
    border-color: #FFE0F0;
    color: #DA4A91;
    text-decoration: none;
}
/**
 * Utilities
 */
.no-bold {
    font-weight: normal;
}
document.addEventListener('DOMContentLoaded', () => {


document.addEventListener('click', ev => {
    
    // Check if a password selector was clicked
    let selector =  ev.target.getAttribute('data-show-pw');
    if (!selector) return;
// Get the password
    var passwords = document.querySelectorAll(selector);

    // Toggle visibility
    Array.from(passwords).forEach(function (password) {
        if (ev.target.checked === true) {
            password.type = 'text';
        } else {
            password.type = 'password';
        }
    })


});

}, false);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.