<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Kole UI · PasswordInput</title>
  <link rel="stylesheet" href="../.design_library/kole-ui/colors_and_type.css" />
  <link rel="stylesheet" href="./PasswordInput.css" />
</head>
<body>
  <div class="kole-page">
    <h2 class="kole-h2">PasswordInput 密码输入</h2>
    <p class="kole-desc">可见切换 + 强度检测，适用于注册 / 修改密码等场景。</p>

    <div class="kole-demo">
      <div class="kole-demo__title">基础用法（含强度条）</div>
      <div class="kole-pwd" id="pwd1">
        <div class="kole-pwd-field">
          <input class="kole-pwd-input" role="group" type="password" placeholder="请输入密码" />
          <button class="kole-pwd-toggle" type="button">显示</button>
        </div>
        <div class="kole-pwd-strength">
          <span class="kole-pwd-bar"></span>
          <span class="kole-pwd-bar"></span>
          <span class="kole-pwd-bar"></span>
        </div>
        <div class="kole-pwd-tip"></div>
      </div>
    </div>

    <div class="kole-demo">
      <div class="kole-demo__title">关闭强度条</div>
      <div class="kole-pwd" id="pwd2">
        <div class="kole-pwd-field">
          <input class="kole-pwd-input" role="group" type="password" placeholder="请输入密码" />
          <button class="kole-pwd-toggle" type="button">显示</button>
        </div>
        <div class="kole-pwd-tip"></div>
      </div>
    </div>
  </div>

  <script>
    function initPwd(root) {
      var field = root.querySelector('.kole-pwd-field');
      var input = root.querySelector('.kole-pwd-input');
      var toggle = root.querySelector('.kole-pwd-toggle');
      var bars = root.querySelectorAll('.kole-pwd-bar');
      var tip = root.querySelector('.kole-pwd-tip');
      var showStrength = bars.length > 0;
      var visible = false;

      function score(v) {
        if (!v) return 0;
        var s = 0;
        if (v.length >= 8) s++;
        if (/[a-z]/.test(v) && /[A-Z]/.test(v)) s++;
        if (/\d/.test(v)) s++;
        if (/[^A-Za-z0-9]/.test(v)) s++;
        if (v.length >= 12) s++;
        return s;
      }
      function levelOf(v) {
        if (!v) return '';
        var s = score(v);
        if (s <= 2) return 'weak';
        if (s <= 3) return 'mid';
        return 'strong';
      }

      function render() {
        var v = input.value;
        var lvl = levelOf(v);
        bars.forEach(function (b, i) {
          b.className = 'kole-pwd-bar';
          if (showStrength && lvl) {
            var on = (lvl === 'weak' && i < 1) || (lvl === 'mid' && i < 2) || (lvl === 'strong' && i < 3);
            if (on) b.classList.add('on', lvl);
          }
        });
        if (lvl === 'weak') tip.textContent = '弱：建议使用字母、数字与符号组合';
        else if (lvl === 'mid') tip.textContent = '中：再增加长度或符号更安全';
        else if (lvl === 'strong') tip.textContent = '强：密码强度良好';
        else tip.textContent = '';
      }

      input.addEventListener('input', render);
      input.addEventListener('focus', function () { field.classList.add('is-focus'); });
      input.addEventListener('blur', function () { field.classList.remove('is-focus'); });
      toggle.addEventListener('click', function () {
        visible = !visible;
        input.type = visible ? 'text' : 'password';
        toggle.textContent = visible ? '隐藏' : '显示';
      });
      render();
    }

    document.querySelectorAll('.kole-pwd').forEach(initPwd);
  </script>
</body>
</html>
