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

संपादक में खोलें अपना कोड प्रकाशित करें क्या आपको एक वेबसाइट चाहिए?

अनुशंसित

2 July 2025

एनिमेटेड बॉर्डर और पासवर्ड रीसेट के साथ आधुनिक लॉगिन पैनल TheDoc से

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

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

अनुशंसित

TheDOC से लॉगिन करें

पोर्टफोलियो वेबपेज उदाहरण

एनिमेटेड बॉर्डर और पासवर्ड रीसेट के साथ आधुनिक लॉगिन पैनल TheDoc से

HTML

CSS

JS

अनुशंसित

TheDOC से लॉगिन करें

पोर्टफोलियो वेबपेज उदाहरण

एनिमेटेड बॉर्डर और पासवर्ड रीसेट के साथ आधुनिक लॉगिन पैनल TheDoc से

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS