| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Joblin - Reset Password</title> |
| <link rel="stylesheet" href="styles.css"> |
| </head> |
| <body> |
| <div class="auth-page"> |
| <div class="auth-card" id="step1"> |
| <a href="index.html" class="auth-brand"> |
| <div class="auth-brand-icon">J</div> |
| <h1>Job<span>lin</span></h1> |
| </a> |
| <h1>Reset Password</h1> |
| <p class="subtitle">Enter your email to get a reset token</p> |
| <form id="tokenForm"> |
| <div class="form-group"> |
| <label>Email</label> |
| <input type="email" id="email" placeholder="you@example.com" required autocomplete="email"> |
| </div> |
| <button type="submit" class="btn btn-primary btn-lg" style="width:100%" id="tokenBtn">Get Reset Token</button> |
| </form> |
| <p class="footer-link"><a href="login.html">Back to sign in</a></p> |
| </div> |
|
|
| <div class="auth-card" id="step2" style="display:none"> |
| <a href="index.html" class="auth-brand"> |
| <div class="auth-brand-icon">J</div> |
| <h1>Job<span>lin</span></h1> |
| </a> |
| <h1>Reset Password</h1> |
| <p class="subtitle">Use the token below to set a new password</p> |
| <div class="reset-token-box" id="tokenDisplay"></div> |
| <form id="resetForm"> |
| <div class="form-group"> |
| <label>Reset Token</label> |
| <input type="text" id="resetToken" placeholder="Paste or copy the token above" required> |
| </div> |
| <div class="form-group"> |
| <label>New Password</label> |
| <div class="pwd-wrapper"> |
| <input type="password" id="newPassword" placeholder="At least 6 characters" required minlength="6" autocomplete="new-password"> |
| <span class="pwd-toggle" onclick="togglePwd('newPassword',this)">👁</span> |
| </div> |
| </div> |
| <button type="submit" class="btn btn-primary btn-lg" style="width:100%" id="resetBtn">Reset Password</button> |
| </form> |
| <p class="footer-link"><a href="login.html">Back to sign in</a></p> |
| </div> |
| </div> |
| <script src="app.js"></script> |
| <script>document.getElementById("tokenForm").addEventListener("submit", async (e) => { |
| e.preventDefault(); |
| const btn = document.getElementById("tokenBtn"); |
| btn.disabled = true; |
| btn.innerHTML = '<span class="spinner"></span> Sending...'; |
| try { |
| const data = await apiFetch("POST", "/api/auth/forgot-password", { |
| email: document.getElementById("email").value, |
| }); |
| document.getElementById("tokenDisplay").textContent = data.token || "Token generated (check console)"; |
| if (!data.token) console.log("Reset token:", data); |
| document.getElementById("step1").style.display = "none"; |
| document.getElementById("step2").style.display = "block"; |
| } catch (err) { |
| showToast(err.message, "error"); |
| btn.disabled = false; |
| btn.textContent = "Get Reset Token"; |
| } |
| }); |
| |
| document.getElementById("resetForm").addEventListener("submit", async (e) => { |
| e.preventDefault(); |
| const btn = document.getElementById("resetBtn"); |
| btn.disabled = true; |
| btn.innerHTML = '<span class="spinner"></span> Resetting...'; |
| try { |
| const data = await apiFetch("POST", "/api/auth/reset-password", { |
| token: document.getElementById("resetToken").value, |
| password: document.getElementById("newPassword").value, |
| }); |
| showToast("Password reset successfully! Redirecting to login..."); |
| setTimeout(() => { window.location.href = "login.html"; }, 1500); |
| } catch (err) { |
| showToast(err.message, "error"); |
| btn.disabled = false; |
| btn.textContent = "Reset Password"; |
| } |
| }); |
| </script> |
| </body> |
| </html> |
|
|
