Password rules + toggle Web Components

Open In Editor Publish Your Code

</head>
<body>
<form id="signup-form" class="flow" onsubmit="return false;">
  <div class="input-wrapper">
    <label for="new-password">Password</label>
    <div class="password-input-wrapper">
      <input type="password" id="new-password" name="password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_]).{9,}$" autocomplete="new-password">
      <div id="password-display-status" class="visually-hidden" aria-live="polite"></div>
      <password-toggle data-input-id="new-password" data-status-id="password-display-status">
        <button type="button">
          <span class="visually-hidden">Toggle password visibility</span>
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256">
            <path d="M228,175a8,8,0,0,1-10.92-3l-19-33.2A123.23,123.23,0,0,1,162,155.46l5.87,35.22a8,8,0,0,1-6.58,9.21A8.4,8.4,0,0,1,160,200a8,8,0,0,1-7.88-6.69l-5.77-34.58a133.06,133.06,0,0,1-36.68,0l-5.77,34.58A8,8,0,0,1,96,200a8.4,8.4,0,0,1-1.32-.11,8,8,0,0,1-6.58-9.21L94,155.46a123.23,123.23,0,0,1-36.06-16.69L39,172A8,8,0,1,1,25.06,164l20-35a153.47,153.47,0,0,1-19.3-20A8,8,0,1,1,38.22,99c16.6,20.54,45.64,45,89.78,45s73.18-24.49,89.78-45A8,8,0,1,1,230.22,109a153.47,153.47,0,0,1-19.3,20l20,35A8,8,0,0,1,228,175Z"></path>
          </svg>
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256">
            <path d="M247.31,124.76c-.35-.79-8.82-19.58-27.65-38.41C194.57,61.26,162.88,48,128,48S61.43,61.26,36.34,86.35C17.51,105.18,9,124,8.69,124.76a8,8,0,0,0,0,6.5c.35.79,8.82,19.57,27.65,38.4C61.43,194.74,93.12,208,128,208s66.57-13.26,91.66-38.34c18.83-18.83,27.3-37.61,27.65-38.4A8,8,0,0,0,247.31,124.76ZM128,192c-30.78,0-57.67-11.19-79.93-33.25A133.47,133.47,0,0,1,25,128,133.33,133.33,0,0,1,48.07,97.25C70.33,75.19,97.22,64,128,64s57.67,11.19,79.93,33.25A133.46,133.46,0,0,1,231.05,128C223.84,141.46,192.43,192,128,192Zm0-112a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z"></path>
          </svg>
        </button>
      </password-toggle>
    </div>
    <password-rules data-input-id="new-password" data-rules=".{9}, .*\d, [\W_], [a-z], [A-Z]">
      <div class="password-rules__meter">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <div class="password-rules__score"></div>
      </div>
      <ul class="password-rules__checklist flow">
        <li data-rule-index="0">Longer than 8 characters</li>
        <li data-rule-index="3">Includes a lowercase letter</li>
        <li data-rule-index="4">Includes an uppercase letter</li>
        <li data-rule-index="1">Includes a number</li>
        <li data-rule-index="2">Includes a special character</li>
      </ul>
    </password-rules>
  </div>
</form>
  <script  src="./script.js"></script>

</body>
</html>

CSS

.password-rules__meter {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  max-inline-size: 10rem;
}

.password-rules__meter > :where(span) {
  width: 100%;
  height: 0.25em;
  background-color: lightgray;
  border-radius: 360px;
  transition: background-color 100ms ease-out;
}

password-rules[data-score="1"] .password-rules__meter :first-child,
password-rules[data-score="2"] .password-rules__meter :nth-child(-n + 2),
password-rules[data-score="3"] .password-rules__meter :nth-child(-n + 3),
password-rules[data-score="4"] .password-rules__meter :nth-child(-n + 4) {
  background-color: dodgerblue;
}

password-rules[data-score="5"] .password-rules__meter :nth-child(-n + 5) {
  background-color: mediumseagreen;
}

.password-rules__score::before {
  display: block;
  counter-reset: score var(--score, 0) total var(--total, 5);
  content: counter(score) "/" counter(total);
  font-feature-settings: "tnum";
  font-size: 0.8em;
}

.password-rules__checklist {
  --flow: 0.3rem;
  -webkit-padding-start: 1.2em;
          padding-inline-start: 1.2em;
}

.password-rules__checklist li {
  position: relative;
  list-style-type: circle;
}

.password-rules__checklist .is-match::before {
  content: "✅";
  position: absolute;
  top: 0;
  right: calc(100% + 0.25em);
  font-size: 0.9em;
}

.password-input-wrapper {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
}
.password-input-wrapper button {
  display: grid;
  place-items: center;
}

.password-input-wrapper button svg:last-of-type {
  display: none;
}

.password-input-wrapper button[aria-pressed="true"] {
  svg:first-of-type {
    display: none;
  }
  svg:last-of-type {
    display: block;
  }
}

/* Base elements */
body {
  font-family: system-ui, sans-serif;
  color: CanvasText;
  background: Canvas;
}
form {
  width: min(30rem, 100% - 1rem);
  margin-inline: auto;
  margin-block: 4rem;
}

input {
  box-sizing: border-box;
  padding-inline: 0.5rem;
  width: 100%;
  border: 1px solid lightgray;
  border-radius: 0.25rem;
  box-shadow: 0 2px 6px -4px rgba(0 0 0 / 0.2);
}

button {
  all: unset;
  outline: revert;
  padding-inline: 1rem;
  background: linear-gradient(white, whitesmoke);

&:active {
    translate: 0 1px;
    box-shadow: none;
  }
}

:is(input, button) {
  font: inherit;
  padding-block: 0.5rem;
  border: 1px solid lightgray;
  border-radius: 0.25rem;
  box-shadow: 0 2px 6px -4px rgba(0 0 0 / 0.2);
}

/* Utils */
.flow > * + * {
  -webkit-margin-before: var(--flow, 1rem);
          margin-block-start: var(--flow, 1rem);
}

.visually-hidden {
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.input-wrapper {
  display: grid;
  gap: 0.4rem;

label {
    justify-self: start;
  }
}

JS

class PasswordRules extends HTMLElement {
  connectedCallback() {
    this.input = document.getElementById(this.dataset.inputId);

if (!this.input) return;

this.rules = [];
    this.setupRules();
    this.input.addEventListener("input", this);
  }

handleEvent(e) {
    this.score = 0;

for (let [index, rule] of this.rules.entries()) {
      const match = e.target.value.match(rule);

if (match) this.score++;

this.toggleMatchedRuleClass(index, match);
    }

this.setAttributes("score", this.score);
  }

setAttributes(name, value) {
    this.dataset[name] = value;
    this.style.setProperty(`--${name}`, value);
  }

setupRules() {
    const rules = this.dataset.rules;

if (!rules) return;

rules.split(this.dataset.separator || ",").forEach((match) => {
      this.rules.push(new RegExp(match.trim()));
    });

this.setAttributes("total", this.rules.length);
  }

toggleMatchedRuleClass(index, value) {
    const el = this.querySelector(`[data-rule-index="${index}"]`);

if (!el) return;

el.classList.toggle("is-match", value);
  }
}

class PasswordToggle extends HTMLElement {
  connectedCallback() {
    this.input = document.getElementById(this.dataset.inputId);
    this.status = document.getElementById(this.dataset.statusId);
    this.btn = this.querySelector("button");

if (!this.input || !this.btn) return;

this.btn.ariaPressed = false;
    this.btn.ariaLabel = "Show password";
    this.btn.setAttribute("aria-controls", this.dataset.inputId);
    this.btn.addEventListener("click", this);
  }

handleEvent(e) {
    if (this.input.type === "password") {
      this.btn.ariaPressed = true;
      this.btn.ariaLabel = "Hide password";
      this.input.type = "text";

if (this.status) this.status.textContent = "Password is showing";
    } else {
      this.btn.ariaPressed = false;
      this.btn.ariaLabel = "Show password";
      this.input.type = "password";

if (this.status) this.status.textContent = "Password is hidden";
    }
  }
}

customElements.define("password-rules", PasswordRules);
customElements.define("password-toggle", PasswordToggle);

Password rules + toggle Web Components

Recommended

password

CSS Dark Mode Toggle

HTML Bike Rental Website Template

HTML

CSS

JS

Recommended

password

CSS Dark Mode Toggle

HTML Bike Rental Website Template

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS