web_huangguo_web/app/templates/page/editPassword.html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    {{template "seoCommon" .}}
    <title>修改登录密码 - 黄果短剧</title>
    <meta
      name="description"
      content="修改黄果短剧登录密码，提升账号安全性，保护你的观影与资产信息 - 黄果短剧"
    />
    <meta name="keywords" content="修改密码,登录密码,账号安全,黄果短剧" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="修改登录密码 - 黄果短剧" />
    <meta
      property="og:description"
      content="修改黄果短剧登录密码，提升账号安全性。"
    />
    <link rel="stylesheet" href="/static/css/editPassword.css" />
    <link rel="stylesheet" href="/static/css/accountShared.css?v=11" />
  </head>
  <body class="site-shell edit-password-layout is-edit-password-page">
    {{template "header" .}}
    <main class="edit-password-page">
      <div class="edit-password-pc">
        <nav class="edit-password-breadcrumb" aria-label="面包屑">
          <a class="edit-password-breadcrumb-link" href="/user-center/"
            >个人中心</a
          >
          <span class="edit-password-breadcrumb-sep">/</span>
          <a class="edit-password-breadcrumb-link" href="/setting/">账号设置</a>
          <span class="edit-password-breadcrumb-sep">/</span>
          <span class="edit-password-breadcrumb-current">修改密码</span>
        </nav>
        <div class="edit-password-pc-head">
          <h1 class="edit-password-pc-title">修改登录密码</h1>
          <div class="edit-password-pc-desc">
            建议使用 8–20 位字母、数字和符号组合
          </div>
        </div>
      </div>

      <div class="edit-password-shell">
        <div class="edit-password-nav">
          <a
            class="edit-password-back"
            href="javascript:history.back()"
            aria-label="返回"
          >
            <img src="/static/images/back.svg" alt="返回" />
          </a>
          <div class="edit-password-nav-title">修改登录密码</div>
          <div class="edit-password-nav-spacer" aria-hidden="true"></div>
        </div>

        <form
          class="edit-password-form"
          action="/api/auth/profile"
          method="post"
          data-edit-password-form
          novalidate
        >
          <div class="edit-password-intro">
            <div class="edit-password-intro-title">设置新的登录密码</div>
            <div class="edit-password-intro-desc">
              建议使用 8–20 位字母、数字和符号组合
            </div>
          </div>

          <div class="edit-password-field" data-edit-password-field="current">
            <label class="edit-password-label" for="editPasswordCurrent"
              >当前密码</label
            >
            <div class="edit-password-input-row">
              <input
                class="edit-password-input"
                id="editPasswordCurrent"
                type="password"
                name="currentPassword"
                placeholder="请输入当前密码"
                autocomplete="current-password"
                minlength="4"
                maxlength="16"
                data-edit-password-current
              />
              <button
                class="edit-password-toggle"
                type="button"
                data-password-toggle="editPasswordCurrent"
              >
                显示
              </button>
            </div>
            <p class="edit-password-error" hidden data-edit-password-error>
              请输入当前密码
            </p>
          </div>

          <div class="edit-password-field" data-edit-password-field="new">
            <label class="edit-password-label" for="editPasswordNew"
              >新密码</label
            >
            <div class="edit-password-input-row">
              <input
                class="edit-password-input"
                id="editPasswordNew"
                type="password"
                name="newPassword"
                placeholder="请输入新密码"
                autocomplete="new-password"
                minlength="4"
                maxlength="16"
                data-edit-password-new
              />
              <button
                class="edit-password-toggle"
                type="button"
                data-password-toggle="editPasswordNew"
              >
                显示
              </button>
            </div>
            <p class="edit-password-error" hidden data-edit-password-error>
              新密码需为 4–16 个字符
            </p>
          </div>

          <div class="edit-password-field" data-edit-password-field="confirm">
            <label class="edit-password-label" for="editPasswordConfirm"
              >确认新密码</label
            >
            <div class="edit-password-input-row">
              <input
                class="edit-password-input"
                id="editPasswordConfirm"
                type="password"
                name="confirmPassword"
                placeholder="请再次输入新密码"
                autocomplete="new-password"
                minlength="4"
                maxlength="16"
                data-edit-password-confirm
              />
              <button
                class="edit-password-toggle"
                type="button"
                data-password-toggle="editPasswordConfirm"
              >
                显示
              </button>
            </div>
            <p class="edit-password-error" hidden data-edit-password-error>
              两次输入的新密码不一致
            </p>
          </div>

          <button
            class="edit-password-submit"
            type="submit"
            data-edit-password-submit
          >
            保存修改
          </button>
        </form>
      </div>
    </main>
    {{template "footer" .}}
    <script src="/static/js/pages/editPassword.js?v=2"></script>
  </body>
</html>