पासवर्ड नियम + वेब घटक टॉगल करें

अनुशंसित

19 May 2025

"एन्स डेवलपमेंट" के लिए एक स्वागत संदेश और नेविगेशन के साथ एक वेब पेज

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

पासवर्ड नियम + वेब घटक टॉगल करें

अनुशंसित

वेबजीएल शेडर परियोजना

एक मंच वेबसाइट

"एन्स डेवलपमेंट" के लिए एक स्वागत संदेश और नेविगेशन के साथ एक वेब पेज

HTML

CSS

JS

अनुशंसित

वेबजीएल शेडर परियोजना

एक मंच वेबसाइट

"एन्स डेवलपमेंट" के लिए एक स्वागत संदेश और नेविगेशन के साथ एक वेब पेज

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS