feat: register Shareit IDs with QR

login.html

@@ -3,9 +3,9 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <meta name="description" content="Traffic Intelligence 用户登录与 Google Authenticator 验证">
+  <meta name="description" content="使用 Shareit ID 与 Google Authenticator 登录 Traffic Intelligence">
   <title>用户登录 · Traffic Intelligence</title>
-  <link rel="stylesheet" href="assets/styles.css?v=auth1">
+  <link rel="stylesheet" href="assets/styles.css?v=auth2">
 </head>
 <body class="login-page">
   <header class="site-header">
@@ -17,15 +17,21 @@
     <section class="login-intro">
       <p class="eyebrow"><span></span> IDENTITY CHECK</p>
       <h1>登录后开始<br><em>转换链接。</em></h1>
-      <p>请选择自己的账号，并使用密码和 Google Authenticator 动态码完成验证。</p>
+      <p>输入你的 Shareit ID，并使用密码和 Google Authenticator 动态码完成验证。</p>
       <div class="login-note"><b>!</b><span><strong>简易本机验证</strong>账号绑定、登录状态和链接记录仅保存在当前浏览器，不属于服务端安全认证。</span></div>
     </section>
 
     <section class="panel login-card">
-      <div class="panel-title"><span>ACCOUNT</span><h2 id="loginTitle">用户登录</h2><p id="loginSubtitle">选择你的账号</p></div>
-      <label class="field-label" for="loginUser">用户账号</label>
-      <select id="loginUser"></select>
-      <div class="selected-role" id="selectedRole"></div>
+      <div class="panel-title"><span>ACCOUNT</span><h2 id="loginTitle">Shareit ID 登录</h2><p id="loginSubtitle">输入你的 Shareit ID 继续</p></div>
+
+      <form id="accountForm" class="account-form" novalidate>
+        <label class="field-label" for="loginUser">Shareit ID</label>
+        <input id="loginUser" type="text" autocomplete="username" autocapitalize="none" spellcheck="false" placeholder="请输入 Shareit ID">
+        <div class="auth-message" id="accountMessage" role="alert"></div>
+        <button class="primary-btn full-btn" type="submit"><span>继续</span><b>→</b></button>
+      </form>
+
+      <div class="confirmed-account hidden" id="confirmedAccount"><span>Shareit ID</span><strong id="confirmedUser"></strong><button id="changeAccount" type="button">更换账号</button></div>
 
       <form id="signinForm" class="auth-form hidden" novalidate>
         <label class="field-label" for="signinPassword">登录密码</label>
@@ -38,13 +44,10 @@
       </form>
 
       <form id="enrollForm" class="auth-form hidden" novalidate>
-        <div class="setup-steps">
-          <div><b>1</b><p><strong>打开 Google Authenticator</strong><span>点击“＋”并选择“输入设置密钥”</span></p></div>
-          <div><b>2</b><p><strong>填写账号和设置密钥</strong><span>类型选择“基于时间”</span></p></div>
+        <div class="qr-setup">
+          <div class="qr-code" id="qrCode" aria-label="Google Authenticator 绑定二维码"><span>正在生成二维码…</span></div>
+          <div class="qr-instructions"><b>首次注册</b><ol><li>打开 Google Authenticator</li><li>点击“＋”并选择“扫描二维码”</li><li>扫描左侧二维码</li></ol></div>
         </div>
-        <label class="field-label">Authenticator 设置密钥</label>
-        <div class="setup-key"><code id="setupKey">生成中…</code><button id="copySetupKey" type="button">复制</button></div>
-        <p class="field-help">账号名称：<strong id="authAccountName"></strong></p>
         <label class="field-label" for="newPassword">设置本机登录密码</label>
         <input id="newPassword" type="password" autocomplete="new-password" placeholder="至少 8 位">
         <label class="field-label" for="confirmPassword">再次输入密码</label>
@@ -52,15 +55,16 @@
         <label class="field-label" for="setupCode">输入 App 中显示的 6 位验证码</label>
         <input id="setupCode" class="otp-input" inputmode="numeric" autocomplete="one-time-code" maxlength="6" placeholder="000000">
         <div class="auth-message" id="enrollMessage" role="alert"></div>
-        <button class="primary-btn full-btn" type="submit"><span>完成绑定并登录</span><b>→</b></button>
+        <button class="primary-btn full-btn" type="submit"><span>完成注册并登录</span><b>→</b></button>
       </form>
     </section>
   </main>
 
   <div class="toast" id="toast" role="status"></div>
-  <script src="assets/data/users.js?v=auth1"></script>
-  <script src="assets/auth.js?v=auth1"></script>
-  <script src="assets/common.js?v=auth1"></script>
-  <script src="assets/login.js?v=auth1"></script>
+  <script src="assets/data/users.js?v=auth2"></script>
+  <script src="assets/auth.js?v=auth2"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcode-generator/1.4.4/qrcode.min.js" integrity="sha512-ZDSPMa/JM1D+7kdg2x3BsruQ6T/JpJo3jWDWkCZsP+5yVyp1KfESqLI+7RqB5k24F7p2cV7i2YHh/890y6P6Sw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+  <script src="assets/common.js?v=auth2"></script>
+  <script src="assets/login.js?v=auth2"></script>
 </body>
 </html>