From d462542bbd456a575b28f7852b46af0ba410bd25 Mon Sep 17 00:00:00 2001
From: Samidy <samidy@proton.me>
Date: Mon, 13 Apr 2026 22:51:05 +0300
Subject: [PATCH] fix password resets

---
 index.html          | 105 ++++++++++++++++++++++++++++++++++++++++++++
 js/accounts/auth.js |  26 ++++++++---
 js/router.js        |   3 ++
 js/ui.js            |  66 ++++++++++++++++++++++++++++
 4 files changed, 194 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index ab7ff43..9c89c36 100644
--- a/index.html
+++ b/index.html
@@ -5930,6 +5930,111 @@
                         </div>
                     </div>
                 </div>
+                <div id="page-reset-password" class="page">
+                    <div
+                        class="reset-password-container"
+                        style="text-align: center; padding: var(--space-8); max-width: 400px; margin: 0 auto"
+                    >
+                        <h2 class="section-title" style="margin-bottom: var(--space-10)">Reset your Password</h2>
+
+                        <div
+                            id="reset-password-error"
+                            class="message error-msg"
+                            style="
+                                display: none;
+                                padding: var(--space-3) 0;
+                                border-radius: var(--radius-md);
+                                font-size: var(--text-sm);
+                                margin-bottom: var(--space-4);
+                                background: transparent;
+                                color: #ff6b6b;
+                                text-align: left;
+                            "
+                        ></div>
+                        <div
+                            id="reset-password-success"
+                            class="message success-msg"
+                            style="
+                                display: none;
+                                padding: var(--space-3) 0;
+                                border-radius: var(--radius-md);
+                                font-size: var(--text-sm);
+                                margin-bottom: var(--space-4);
+                                background: transparent;
+                                color: var(--foreground);
+                                text-align: left;
+                            "
+                        ></div>
+
+                        <form id="reset-password-form">
+                            <div style="margin-bottom: var(--space-4)">
+                                <input
+                                    type="password"
+                                    id="reset-password-input"
+                                    placeholder="New Password"
+                                    required
+                                    minlength="8"
+                                    style="
+                                        width: 100%;
+                                        padding: var(--space-3) var(--space-4);
+                                        border: 1px solid var(--border);
+                                        border-radius: var(--radius-md);
+                                        background: var(--card);
+                                        color: var(--foreground);
+                                        font-size: 0.925rem;
+                                        outline: none;
+                                        transition: border-color 0.15s;
+                                    "
+                                />
+                            </div>
+                            <div style="margin-bottom: var(--space-6)">
+                                <input
+                                    type="password"
+                                    id="reset-password-confirm"
+                                    placeholder="Confirm New Password"
+                                    required
+                                    minlength="8"
+                                    style="
+                                        width: 100%;
+                                        padding: var(--space-3) var(--space-4);
+                                        border: 1px solid var(--border);
+                                        border-radius: var(--radius-md);
+                                        background: var(--card);
+                                        color: var(--foreground);
+                                        font-size: 0.925rem;
+                                        outline: none;
+                                        transition: border-color 0.15s;
+                                    "
+                                />
+                            </div>
+                            <button
+                                type="submit"
+                                id="reset-password-submit-btn"
+                                class="btn-primary"
+                                style="width: 100%; justify-content: center"
+                            >
+                                <span id="reset-password-btn-text">Reset Password</span>
+                                <div
+                                    id="reset-password-btn-spinner"
+                                    class="animate-spin"
+                                    style="display: none; width: 18px; height: 18px"
+                                >
+                                    <svg
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        stroke-width="2"
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                        style="width: 100%; height: 100%"
+                                    >
+                                        <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+                                    </svg>
+                                </div>
+                            </button>
+                        </form>
+                    </div>
+                </div>
             </main>
 
             <footer class="now-playing-bar">
diff --git a/js/accounts/auth.js b/js/accounts/auth.js
index 7e25269..f8df941 100644
--- a/js/accounts/auth.js
+++ b/js/accounts/auth.js
@@ -15,12 +15,14 @@ export class AuthManager {
         const isOAuthRedirect = params.get('oauth') === '1';
 
         if (userId && secret && userId !== 'null' && secret !== 'null') {
-            try {
-                await auth.createSession(userId, secret);
-                window.history.replaceState({}, '', window.location.pathname);
-            } catch (error) {
-                console.warn('OAuth session handoff failed:', error.message);
-                window.history.replaceState({}, '', window.location.pathname);
+            if (window.location.pathname !== '/reset-password') {
+                try {
+                    await auth.createSession(userId, secret);
+                    window.history.replaceState({}, '', window.location.pathname);
+                } catch (error) {
+                    console.warn('OAuth session handoff failed:', error.message);
+                    window.history.replaceState({}, '', window.location.pathname);
+                }
             }
         } else if (isOAuthRedirect) {
             await new Promise((resolve) => setTimeout(resolve, 500));
@@ -137,6 +139,18 @@ export class AuthManager {
         }
     }
 
+    async resetPassword(userId, secret, password, confirmPassword) {
+        if (password !== confirmPassword) {
+            throw new Error('Passwords do not match');
+        }
+        try {
+            await auth.updateRecovery(userId, secret, password, password);
+        } catch (error) {
+            console.error('Password reset failed:', error);
+            throw error;
+        }
+    }
+
     async signOut() {
         try {
             await auth.deleteSession('current');
diff --git a/js/router.js b/js/router.js
index 934c281..aeebe1c 100644
--- a/js/router.js
+++ b/js/router.js
@@ -114,6 +114,9 @@ export function createRouter(ui) {
             case 'home':
                 await ui.renderHomePage();
                 break;
+            case 'reset-password':
+                await ui.renderResetPasswordPage();
+                break;
             case 'donate':
                 ui.showPage('donate');
                 break;
diff --git a/js/ui.js b/js/ui.js
index 02c7f7a..d88f6c6 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -2392,6 +2392,72 @@ export class UIRenderer {
         }
     }
 
+    async renderResetPasswordPage() {
+        await this.showPage('reset-password');
+        const form = document.getElementById('reset-password-form');
+        const errorEl = document.getElementById('reset-password-error');
+        const successEl = document.getElementById('reset-password-success');
+        const btn = document.getElementById('reset-password-submit-btn');
+        const btnText = document.getElementById('reset-password-btn-text');
+        const spinner = document.getElementById('reset-password-btn-spinner');
+        const passwordInput = document.getElementById('reset-password-input');
+        const confirmInput = document.getElementById('reset-password-confirm');
+
+        if (!form) return;
+
+        const params = new URLSearchParams(window.location.search);
+        const userId = params.get('userId');
+        const secret = params.get('secret');
+
+        if (!userId || !secret) {
+            errorEl.textContent = 'Invalid or missing password reset link.';
+            errorEl.style.display = 'block';
+            form.style.display = 'none';
+            return;
+        }
+
+        form.onsubmit = async (e) => {
+            e.preventDefault();
+            errorEl.style.display = 'none';
+            successEl.style.display = 'none';
+
+            const password = passwordInput.value;
+            const confirm = confirmInput.value;
+
+            if (password !== confirm) {
+                errorEl.textContent = 'Passwords do not match.';
+                errorEl.style.display = 'block';
+                return;
+            }
+
+            try {
+                btn.disabled = true;
+                btnText.style.display = 'none';
+                spinner.style.display = 'block';
+
+                await authManager.resetPassword(userId, secret, password, confirm);
+
+                successEl.textContent = 'Password reset successfully. Opening login...';
+                successEl.style.display = 'block';
+                form.style.display = 'none';
+
+                setTimeout(() => {
+                    const authModal = document.getElementById('email-auth-modal');
+                    if (authModal) {
+                        authModal.classList.add('active');
+                    }
+                }, 2000);
+            } catch (error) {
+                errorEl.textContent = error.message || 'Failed to reset password. Please try again.';
+                errorEl.style.display = 'block';
+            } finally {
+                btn.disabled = false;
+                btnText.style.display = 'inline';
+                spinner.style.display = 'none';
+            }
+        };
+    }
+
     async renderPartyDetailPage(id) {
         await this.showPage('party-detail');
         await partyManager.joinParty(id);