Reglas de contraseña + alternar componentes web

Abrir en el editor Publica tu código

Recomendado

10 February 2025

Formulario de inicio de sesión

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Andev Web</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="./style.css">

</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);

Reglas de contraseña + alternar componentes web

Recomendado

Información de la tarjeta

Cargador resplandeciente

Formulario de inicio de sesión

HTML

CSS

JS

Recomendado

Información de la tarjeta

Cargador resplandeciente

Formulario de inicio de sesión

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS