feat: password reset + data-action delegation for all onclick

public/index.html

@@ -57,6 +57,7 @@
   <script src="js/pages/install.js"></script>
   <script src="js/pages/login.js"></script>
   <script src="js/pages/register.js"></script>
+  <script src="js/pages/forgot.js"></script>
   <script src="js/pages/home.js"></script>
   <script src="js/pages/dashboard.js"></script>
   <script src="js/pages/tickets.js"></script>

public/js/app.js

@@ -63,6 +63,7 @@ const App = {
     if (page === 'install') { this.showPublic('install'); return; }
     if (page === 'home') { this.showPublic('home', param); return; }
     if (page === 'login' || page === 'register') { this.showPublic(page); return; }
+    if (page === 'forgot' || page === 'reset') { this.showPublic(page); return; }
     if (!Auth.logged()) { location.hash = '#/login'; return; }
 
     this.showLayout();
@@ -98,7 +99,7 @@ const App = {
     const pub = document.getElementById('public-page');
     pub.classList.remove('hidden');
     this.updateTopAuth();
-    const comp = page === 'login' ? LoginPage : page === 'register' ? RegisterPage : page === 'install' ? InstallPage : HomePage;
+    const comp = page === 'login' ? LoginPage : page === 'register' ? RegisterPage : page === 'install' ? InstallPage : page === 'forgot' ? ForgotPage : page === 'reset' ? ResetPage : HomePage;
     comp.render(param).then(html => { pub.innerHTML = html; if (comp.mount) comp.mount(param); }).catch(() => {
       pub.innerHTML = '<div class="pub-card"><div class="logo"><i class="fas fa-exclamation-triangle" style="color:var(--d)"></i><h2>加载失败</h2><p>请刷新页面重试</p></div></div>';
     });
@@ -167,6 +168,8 @@ window.PollsPage = PollsPage;
 window.FeaturesPage = FeaturesPage;
 window.LoginPage = LoginPage;
 window.RegisterPage = RegisterPage;
+window.ForgotPage = ForgotPage;
+window.ResetPage = ResetPage;
 window.HomePage = HomePage;
 window.InstallPage = InstallPage;
 window.U = U;

public/js/pages/forgot.js

@@ -0,0 +1,56 @@
+const ForgotPage = {
+  async render() {
+    return `<div class="pub-card"><div class="logo"><i class="fas fa-key"></i><h2>忘记密码</h2><p>输入注册邮箱获取重置链接</p></div>
+      <form id="forgot-form"><div class="form-group"><input type="email" id="fg-email" placeholder="注册邮箱" required></div>
+      <div id="fg-msg" class="hidden"></div>
+      <button type="submit" class="btn btn-p btn-lg w-full"><i class="fas fa-paper-plane"></i> 发送重置链接</button></form>
+      <div style="margin-top:14px;text-align:center;font-size:13px"><a href="#/login" style="color:var(--p);text-decoration:none">返回登录</a></div>
+    </div>`;
+  },
+  mount() {
+    document.getElementById('forgot-form').addEventListener('submit', async e => {
+      e.preventDefault();
+      try {
+        await API.post('/auth/forgot-password', { email: document.getElementById('fg-email').value });
+        const el = document.getElementById('fg-msg');
+        el.className = 'alert alert-s';
+        el.textContent = '如果邮箱已注册，重置链接已发送';
+        el.classList.remove('hidden');
+      } catch(ex) { alert(ex.message); }
+    });
+  }
+};
+
+const ResetPage = {
+  async render() {
+    const params = new URLSearchParams((location.hash.split('?')[1] || ''));
+    const token = params.get('token');
+    if (!token) return `<div class="pub-card"><div class="logo"><i class="fas fa-exclamation-triangle" style="color:var(--d)"></i><h2>无效链接</h2><p>重置链接无效</p></div><div style="text-align:center;margin-top:14px"><a href="#/login" style="color:var(--p)">返回登录</a></div></div>`;
+    return `<div class="pub-card"><div class="logo"><i class="fas fa-lock"></i><h2>重置密码</h2><p>请输入新密码</p></div>
+      <form id="reset-form"><div class="form-group"><input type="password" id="rs-pwd" placeholder="新密码（至少6位）" required minlength="6"></div>
+      <div id="rs-msg" class="hidden"></div>
+      <button type="submit" class="btn btn-p btn-lg w-full"><i class="fas fa-save"></i> 重置密码</button>
+      </form><div style="margin-top:14px;text-align:center;font-size:13px"><a href="#/login" style="color:var(--p)">返回登录</a></div></div>`;
+  },
+  mount() {
+    const params = new URLSearchParams((location.hash.split('?')[1] || ''));
+    const token = params.get('token');
+    if (!token) return;
+    document.getElementById('reset-form').addEventListener('submit', async e => {
+      e.preventDefault();
+      try {
+        await API.post('/auth/reset-password', { token, password: document.getElementById('rs-pwd').value });
+        const el = document.getElementById('rs-msg');
+        el.className = 'alert alert-s';
+        el.textContent = '密码重置成功！请登录';
+        el.classList.remove('hidden');
+        setTimeout(() => location.hash = '#/login', 2000);
+      } catch(ex) {
+        const el = document.getElementById('rs-msg');
+        el.className = 'alert alert-e';
+        el.textContent = ex.message;
+        el.classList.remove('hidden');
+      }
+    });
+  }
+};

public/js/pages/login.js

@@ -4,7 +4,7 @@ const LoginPage = {
       <div class="pub-card">
         <div class="logo"><i class="fas fa-shield-halved"></i><h2>欢迎回来</h2><p>登录您的账号</p></div>
         <form id="login-form">
-          <div class="form-group"><input id="lu" placeholder="用户å<EFBFBD>? required autofocus></div>
+          <div class="form-group"><input id="lu" placeholder="用户<EFBFBD>? required autofocus></div>
           <div class="form-group"><input type="password" id="lp" placeholder="密码" required></div>
           <div id="le" class="alert alert-e hidden"></div>
           <button type="submit" class="btn btn-p btn-lg w-full"><i class="fas fa-sign-in-alt"></i> 登录</button>
@@ -12,6 +12,8 @@ const LoginPage = {
         <div style="margin-top:18px;text-align:center;font-size:13px">
           <a href="#/register" style="color:var(--p);text-decoration:none;font-weight:600">还没有账号？立即注册</a>
           <span style="color:var(--g4);margin:0 10px">|</span>
+          <a href="#/forgot" style="color:var(--g5);text-decoration:none">忘记密码</a>
+          <span style="color:var(--g4);margin:0 10px">|</span>
           <a href="#/home" style="color:var(--g5);text-decoration:none">匿名提交</a>
         </div>
       </div>`;
@@ -22,7 +24,7 @@ const LoginPage = {
       e.preventDefault();
       const btn = e.target.querySelector('button');
       btn.disabled = true;
-      btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 登录�..';
+      btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 登录<EFBFBD>?..';
       try {
         await Auth.login(document.getElementById('lu').value.trim(), document.getElementById('lp').value.trim());
         App.afterLogin();