From 2da6e88326aeefe106fbe9d36efd1fd6f554a706 Mon Sep 17 00:00:00 2001
From: oliver <oliver@odoo4projects.com>
Date: Mon, 8 Jun 2026 09:54:19 -0300
Subject: [PATCH] Create password-reset.html

---
 password-reset.html | 673 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 673 insertions(+)
 create mode 100644 password-reset.html
diff --git a/password-reset.html b/password-reset.html
new file mode 100644
index 0000000..a5adec4
--- /dev/null
+++ b/password-reset.html
@@ -0,0 +1,673 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>derez.ai — Reset Password</title>
+        <style>
+            /* ─── Reset ─────────────────────────────────────────── */
+            *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+            /* ─── Design tokens (Digital Grid theme) ────────────── */
+            :root {
+                --bg:         #000810;
+                --bg-card:    #010f20;
+                --bg-inner:   #000d1a;
+                --bg-hover:   #001a30;
+                --bg-input:   #000813;
+                --border:     #0a3060;
+                --border-hi:  rgba(0, 245, 255, 0.45);
+                --accent:     #00f5ff;
+                --accent-dim: #002535;
+                --danger:     #ff3b3b;
+                --danger-dim: #3b0000;
+                --success:    #00ff88;
+                --text:       #c8f0ff;
+                --text-muted: #2e6a80;
+                --radius:     8px;
+                --shadow:
+                    0 0 0 1px rgba(0, 245, 255, 0.25),
+                    0 0 60px rgba(0, 245, 255, 0.12),
+                    0 28px 72px rgba(0, 0, 0, 0.9);
+            }
+
+            /* ─── Base ───────────────────────────────────────────── */
+            html, body {
+                min-height: 100%;
+                height: 100%;
+                font-family: "Courier New", Courier, monospace;
+                background: var(--bg);
+                color: var(--text);
+                font-size: 14px;
+                overflow: hidden;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+
+            /* ─── Background: star field + ambient glow ─────────── */
+            body::before {
+                content: "";
+                position: fixed;
+                inset: 0;
+                background:
+                    /* Stars */
+                    radial-gradient(circle 5px at  5%  8%, white 0%, white 40%, rgba(180,245,255,.28) 72%, transparent 100%),
+                    radial-gradient(circle 3px at 15%  5%, white 0%, white 42%, transparent 100%),
+                    radial-gradient(circle 6px at 31%  4%, white 0%, white 38%, rgba(150,220,255,.32) 70%, transparent 100%),
+                    radial-gradient(circle 3px at 47%  6%, white 0%, white 42%, transparent 100%),
+                    radial-gradient(circle 4px at 54%  3%, rgba(190,245,255,1) 0%, rgba(190,245,255,1) 42%, rgba(190,245,255,.28) 70%, transparent 100%),
+                    radial-gradient(circle 5px at 71%  7%, white 0%, white 40%, rgba(180,245,255,.26) 70%, transparent 100%),
+                    radial-gradient(circle 3px at 87%  9%, white 0%, white 42%, transparent 100%),
+                    radial-gradient(circle 4px at 94%  5%, rgba(190,245,255,1) 0%, rgba(190,245,255,1) 42%, transparent 100%),
+                    radial-gradient(circle 3px at 18% 16%, white 0%, white 42%, transparent 100%),
+                    radial-gradient(circle 4px at 57% 17%, rgba(180,240,255,1) 0%, rgba(180,240,255,1) 42%, rgba(180,240,255,.26) 70%, transparent 100%),
+                    radial-gradient(circle 3px at 75% 15%, white 0%, white 42%, transparent 100%),
+                    radial-gradient(circle 2px at  9% 22%, rgba(255,255,255,.65) 0%, rgba(255,255,255,.65) 45%, transparent 100%),
+                    radial-gradient(circle 2px at 40% 25%, rgba(255,255,255,.55) 0%, rgba(255,255,255,.55) 45%, transparent 100%),
+                    radial-gradient(circle 2px at 66% 23%, rgba(255,255,255,.55) 0%, rgba(255,255,255,.55) 45%, transparent 100%),
+                    radial-gradient(circle 2px at 83% 20%, rgba(160,225,255,.68) 0%, rgba(160,225,255,.68) 45%, transparent 100%),
+                    radial-gradient(circle 3px at 33% 38%, rgba(170,230,255,.52) 0%, rgba(170,230,255,.52) 42%, transparent 100%),
+                    radial-gradient(circle 2px at 62% 31%, rgba(180,240,255,.42) 0%, rgba(180,240,255,.42) 45%, transparent 100%),
+                    radial-gradient(circle 3px at 69% 38%, white 0%, white 42%, transparent 100%),
+                    /* Ambient glow + horizon line */
+                    radial-gradient(ellipse 70% 55% at 50% 48%, rgba(0,120,200,.18) 0%, transparent 68%),
+                    radial-gradient(ellipse 100% 4%  at 50% 50%, rgba(0,245,255,.22) 0%, transparent 100%);
+                pointer-events: none;
+                z-index: 0;
+            }
+
+            /* ─── Background: 3-D perspective grid floor ─────────── */
+            body::after {
+                content: "";
+                position: fixed;
+                left: -100%;
+                width: 300%;
+                height: 62%;
+                bottom: -8%;
+                background-image:
+                    linear-gradient(rgba(0,245,255,.28) 1px, transparent 1px),
+                    linear-gradient(90deg, rgba(0,245,255,.16) 1px, transparent 1px);
+                background-size: 80px 40px;
+                transform: perspective(520px) rotateX(75deg);
+                transform-origin: center 0%;
+                -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.55) 22%, black 50%);
+                mask-image:         linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.55) 22%, black 50%);
+                pointer-events: none;
+                z-index: 0;
+            }
+
+            /* ─── Card ───────────────────────────────────────────── */
+            .card {
+                position: relative;
+                z-index: 10;
+                width: min(420px, calc(100vw - 24px));
+                background: var(--bg-card);
+                border: 1px solid var(--border-hi);
+                border-radius: var(--radius);
+                box-shadow: var(--shadow);
+                overflow: hidden;
+                animation: flyIn 1s cubic-bezier(0.65, 0, 0.85, 0.05) 1 both;
+            }
+
+            @keyframes flyIn {
+                from { opacity: 0; transform: scale(0); filter: blur(6px); }
+                to   { opacity: 1; transform: scale(1); filter: blur(0); }
+            }
+
+            /* ─── Logo / header ──────────────────────────────────── */
+            .card-logo {
+                display: flex;
+                align-items: center;
+                gap: 14px;
+                padding: 28px 28px 0;
+            }
+
+            .logo-icon {
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                width: 44px;
+                height: 44px;
+                border-radius: 12px;
+                background: var(--accent-dim);
+                border: 1px solid rgba(0,245,255,.3);
+                color: var(--accent);
+                flex-shrink: 0;
+            }
+
+            .logo-text h1 {
+                font-size: 20px;
+                font-weight: 700;
+                color: var(--accent);
+                letter-spacing: 1.5px;
+                text-shadow: 0 0 14px rgba(0,245,255,.85);
+            }
+
+            .logo-text p {
+                font-size: 11px;
+                color: var(--text-muted);
+                margin-top: 2px;
+                letter-spacing: 0.5px;
+            }
+
+            /* ─── Form body ──────────────────────────────────────── */
+            .card-body {
+                padding: 24px 28px 32px;
+                display: flex;
+                flex-direction: column;
+                gap: 16px;
+            }
+
+            .section-title {
+                font-size: 15px;
+                font-weight: 700;
+                color: var(--text);
+                letter-spacing: 0.3px;
+            }
+
+            .section-sub {
+                font-size: 12px;
+                color: var(--text-muted);
+                line-height: 1.55;
+                margin-top: -8px;
+            }
+
+            /* ─── Fields ─────────────────────────────────────────── */
+            .field {
+                display: flex;
+                flex-direction: column;
+                gap: 6px;
+            }
+
+            .field label {
+                font-size: 12px;
+                font-weight: 500;
+                color: var(--text-muted);
+            }
+
+            .input-wrap {
+                position: relative;
+                display: flex;
+                align-items: center;
+            }
+
+            .input-wrap input {
+                width: 100%;
+                padding: 10px 40px 10px 12px;
+                background: var(--bg-input);
+                border: 1px solid var(--border);
+                border-radius: 6px;
+                color: var(--text);
+                font-family: inherit;
+                font-size: 13px;
+                outline: none;
+                transition: border-color .15s, box-shadow .15s;
+            }
+
+            .input-wrap input:focus {
+                border-color: var(--accent);
+                box-shadow: 0 0 0 2px rgba(0,245,255,.08);
+            }
+
+            .input-wrap input.is-valid {
+                border-color: var(--success);
+                box-shadow: 0 0 0 2px rgba(0,255,136,.07);
+            }
+
+            .input-wrap input.is-invalid {
+                border-color: var(--danger);
+                box-shadow: 0 0 0 2px rgba(255,59,59,.07);
+            }
+
+            .eye-btn {
+                position: absolute;
+                right: 8px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 26px;
+                height: 26px;
+                background: none;
+                border: none;
+                border-radius: 4px;
+                color: var(--text-muted);
+                cursor: pointer;
+                padding: 0;
+                transition: color .15s;
+            }
+
+            .eye-btn:hover { color: var(--accent); }
+
+            /* ─── Match indicator ────────────────────────────────── */
+            .match-msg {
+                display: flex;
+                align-items: center;
+                gap: 6px;
+                font-size: 11px;
+                min-height: 16px;
+                transition: opacity .2s;
+            }
+
+            .match-msg.ok  { color: var(--success); }
+            .match-msg.err { color: var(--danger); }
+
+            .match-msg svg { flex-shrink: 0; }
+
+            /* ─── Hint ───────────────────────────────────────────── */
+            .field-hint {
+                font-size: 11px;
+                color: var(--text-muted);
+            }
+
+            /* ─── Error banner ───────────────────────────────────── */
+            .error-banner {
+                display: none;
+                align-items: flex-start;
+                gap: 8px;
+                padding: 9px 12px;
+                background: var(--danger-dim);
+                border: 1px solid var(--danger);
+                border-radius: 6px;
+                font-size: 12px;
+                color: var(--danger);
+                line-height: 1.5;
+            }
+
+            /* ─── Save button ────────────────────────────────────── */
+            .save-btn {
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                gap: 7px;
+                width: 100%;
+                padding: 11px 14px;
+                border-radius: 6px;
+                border: 1px solid var(--accent);
+                background: transparent;
+                color: #fff;
+                font-family: inherit;
+                font-size: 14px;
+                font-weight: 500;
+                cursor: pointer;
+                letter-spacing: 0.3px;
+                box-shadow:
+                    0 0 8px rgba(0,245,255,.35),
+                    inset 0 0 8px rgba(0,245,255,.04);
+                transition:
+                    background .15s,
+                    box-shadow .15s,
+                    opacity .15s,
+                    transform .1s;
+            }
+
+            .save-btn:not(:disabled):hover {
+                background: rgba(0,245,255,.08);
+                box-shadow:
+                    0 0 18px rgba(0,245,255,.55),
+                    inset 0 0 12px rgba(0,245,255,.07);
+            }
+
+            .save-btn:not(:disabled):active {
+                transform: scale(.97);
+                opacity: .8;
+            }
+
+            .save-btn:disabled {
+                opacity: .3;
+                cursor: not-allowed;
+                box-shadow: none;
+                border-color: var(--border);
+                color: var(--text-muted);
+            }
+
+            /* ─── Spinner (inline) ───────────────────────────────── */
+            .spinner-sm {
+                width: 13px;
+                height: 13px;
+                border: 2px solid rgba(255,255,255,.25);
+                border-top-color: #fff;
+                border-radius: 50%;
+                animation: spin .6s linear infinite;
+                display: inline-block;
+                flex-shrink: 0;
+            }
+
+            @keyframes spin { to { transform: rotate(360deg); } }
+
+            /* ─── Invalid token state ────────────────────────────── */
+            .invalid-state {
+                display: none;
+                flex-direction: column;
+                align-items: center;
+                text-align: center;
+                gap: 12px;
+                padding: 10px 0 4px;
+            }
+
+            .invalid-state svg {
+                color: var(--danger);
+                filter: drop-shadow(0 0 8px rgba(255,59,59,.5));
+            }
+
+            .invalid-state h2 {
+                font-size: 15px;
+                font-weight: 700;
+                color: var(--text);
+            }
+
+            .invalid-state p {
+                font-size: 12px;
+                color: var(--text-muted);
+                line-height: 1.6;
+                max-width: 280px;
+            }
+
+            .back-link {
+                display: inline-flex;
+                align-items: center;
+                gap: 5px;
+                font-size: 12px;
+                color: var(--accent);
+                text-decoration: none;
+                margin-top: 4px;
+                transition: opacity .15s;
+            }
+
+            .back-link:hover { opacity: .75; }
+
+            /* ─── Success state ──────────────────────────────────── */
+            .success-state {
+                display: none;
+                flex-direction: column;
+                align-items: center;
+                text-align: center;
+                gap: 12px;
+                padding: 10px 0 4px;
+                animation: fadeIn .35s ease both;
+            }
+
+            @keyframes fadeIn {
+                from { opacity: 0; transform: translateY(8px); }
+                to   { opacity: 1; transform: translateY(0); }
+            }
+
+            .success-state svg {
+                color: var(--success);
+                filter: drop-shadow(0 0 10px rgba(0,255,136,.6));
+            }
+
+            .success-state h2 {
+                font-size: 15px;
+                font-weight: 700;
+                color: var(--success);
+                text-shadow: 0 0 12px rgba(0,255,136,.4);
+            }
+
+            .success-state p {
+                font-size: 12px;
+                color: var(--text-muted);
+                line-height: 1.6;
+            }
+
+            .redirect-bar-wrap {
+                width: 100%;
+                height: 3px;
+                background: var(--bg-inner);
+                border-radius: 2px;
+                overflow: hidden;
+                margin-top: 4px;
+            }
+
+            .redirect-bar {
+                height: 100%;
+                background: var(--success);
+                border-radius: 2px;
+                width: 0%;
+                box-shadow: 0 0 6px rgba(0,255,136,.6);
+                transition: width 1.8s linear;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="card" id="card">
+
+            <!-- Logo -->
+            <div class="card-logo">
+                <div class="logo-icon">
+                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+                        <rect x="3" y="8" width="18" height="13" rx="2"/>
+                        <path d="M9 12h.01M15 12h.01"/>
+                        <path d="M9 16h6"/>
+                        <path d="M12 8V5"/>
+                        <circle cx="12" cy="4" r="1.2" fill="currentColor" stroke="none"/>
+                    </svg>
+                </div>
+                <div class="logo-text">
+                    <h1>derez.ai</h1>
+                    <p>Your AI agents, managed simply.</p>
+                </div>
+            </div>
+
+            <div class="card-body">
+
+                <!-- ── Invalid / expired token ─────────────────── -->
+                <div id="invalid-state" class="invalid-state">
+                    <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+                        <circle cx="12" cy="12" r="10"/>
+                        <line x1="12" y1="8" x2="12" y2="12"/>
+                        <line x1="12" y1="16" x2="12.01" y2="16"/>
+                    </svg>
+                    <h2>Invalid or expired link</h2>
+                    <p>This password reset link is missing, invalid, or has already been used. Please request a new one.</p>
+                    <a href="https://app.derez.ai" class="back-link">
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                            <polyline points="15 18 9 12 15 6"/>
+                        </svg>
+                        Back to sign in
+                    </a>
+                </div>
+
+                <!-- ── Reset form ──────────────────────────────── -->
+                <div id="form-state" style="display:none">
+                    <div style="display:flex;flex-direction:column;gap:16px;">
+                        <div>
+                            <p class="section-title">Reset your password</p>
+                            <p class="section-sub" style="margin-top:6px;">Choose a strong new password for your account.</p>
+                        </div>
+
+                        <form id="reset-form" onsubmit="handleSave(event)" novalidate style="display:flex;flex-direction:column;gap:14px;">
+
+                            <!-- New password -->
+                            <div class="field">
+                                <label for="pw">New password</label>
+                                <div class="input-wrap">
+                                    <input
+                                        type="password"
+                                        id="pw"
+                                        placeholder="Min. 8 characters"
+                                        autocomplete="new-password"
+                                        oninput="validate()"
+                                    />
+                                    <button type="button" class="eye-btn" onclick="toggleVis('pw', this)" title="Show / hide">
+                                        <svg id="pw-eye" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
+                                            <circle cx="12" cy="12" r="3"/>
+                                        </svg>
+                                    </button>
+                                </div>
+                                <span class="field-hint">At least 8 characters.</span>
+                            </div>
+
+                            <!-- Repeat password -->
+                            <div class="field">
+                                <label for="pw2">Repeat password</label>
+                                <div class="input-wrap">
+                                    <input
+                                        type="password"
+                                        id="pw2"
+                                        placeholder="Same password again"
+                                        autocomplete="new-password"
+                                        oninput="validate()"
+                                    />
+                                    <button type="button" class="eye-btn" onclick="toggleVis('pw2', this)" title="Show / hide">
+                                        <svg id="pw2-eye" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
+                                            <circle cx="12" cy="12" r="3"/>
+                                        </svg>
+                                    </button>
+                                </div>
+                                <!-- Match indicator -->
+                                <div id="match-msg" class="match-msg" style="opacity:0;"></div>
+                            </div>
+
+                            <!-- Error banner -->
+                            <div id="error-banner" class="error-banner"></div>
+
+                            <!-- Save button -->
+                            <button type="submit" id="save-btn" class="save-btn" disabled>
+                                Save new password
+                            </button>
+
+                        </form>
+                    </div>
+                </div>
+
+                <!-- ── Success ─────────────────────────────────── -->
+                <div id="success-state" class="success-state">
+                    <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
+                        <polyline points="22 4 12 14.01 9 11.01"/>
+                    </svg>
+                    <h2>Password updated!</h2>
+                    <p>Your new password has been saved.<br>Redirecting you to sign in&hellip;</p>
+                    <div class="redirect-bar-wrap">
+                        <div class="redirect-bar" id="redirect-bar"></div>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+
+        <script>
+            /* ─── Constants ────────────────────────────────────── */
+            const RESET_URL = "https://n8n.derez.ai/webhook/c2ce0eba-eb26-405d-8a90-8d982ec30698";
+            const APP_URL   = "https://app.derez.ai";
+
+            /* ─── Extract token from URL ─────────────────────── */
+            const params = new URLSearchParams(window.location.search);
+            const token  = params.get("token");
+
+            /* ─── Init ───────────────────────────────────────── */
+            if (!token || token.length < 8) {
+                document.getElementById("invalid-state").style.display = "flex";
+            } else {
+                document.getElementById("form-state").style.display = "block";
+            }
+
+            /* ─── Show / hide password ───────────────────────── */
+            function toggleVis(fieldId, btn) {
+                const inp = document.getElementById(fieldId);
+                const isText = inp.type === "text";
+                inp.type = isText ? "password" : "text";
+                // Swap icon: eye vs eye-off
+                btn.querySelector("svg").innerHTML = isText
+                    ? '<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>'
+                    : '<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/>' +
+                      '<path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/>' +
+                      '<line x1="1" y1="1" x2="23" y2="23"/>';
+            }
+
+            /* ─── Live validation ────────────────────────────── */
+            function validate() {
+                const pw    = document.getElementById("pw").value;
+                const pw2   = document.getElementById("pw2").value;
+                const pwEl  = document.getElementById("pw");
+                const pw2El = document.getElementById("pw2");
+                const msg   = document.getElementById("match-msg");
+                const btn   = document.getElementById("save-btn");
+
+                // Clear error banner on re-type
+                const banner = document.getElementById("error-banner");
+                banner.style.display = "none";
+                banner.textContent   = "";
+
+                const longEnough = pw.length >= 8;
+                const match      = pw.length > 0 && pw2.length > 0 && pw === pw2;
+                const mismatch   = pw2.length > 0 && pw !== pw2;
+
+                // Style first field
+                pwEl.className = pw.length === 0
+                    ? ""
+                    : longEnough ? "is-valid" : "is-invalid";
+
+                // Style second field
+                pw2El.className = pw2.length === 0
+                    ? ""
+                    : match ? "is-valid" : mismatch ? "is-invalid" : "";
+
+                // Match message
+                if (match) {
+                    msg.style.opacity = "1";
+                    msg.className     = "match-msg ok";
+                    msg.innerHTML     =
+                        '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>' +
+                        "Passwords match";
+                } else if (mismatch) {
+                    msg.style.opacity = "1";
+                    msg.className     = "match-msg err";
+                    msg.innerHTML     =
+                        '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>' +
+                        "Passwords don\u2019t match";
+                } else {
+                    msg.style.opacity = "0";
+                    msg.className     = "match-msg";
+                    msg.innerHTML     = "";
+                }
+
+                btn.disabled = !(match && longEnough);
+            }
+
+            /* ─── Submit ─────────────────────────────────────── */
+            async function handleSave(e) {
+                e.preventDefault();
+                const password = document.getElementById("pw").value;
+                const btn      = document.getElementById("save-btn");
+                const banner   = document.getElementById("error-banner");
+
+                // Loading state
+                btn.disabled   = true;
+                btn.innerHTML  = '<span class="spinner-sm"></span> Saving\u2026';
+
+                try {
+                    const res = await fetch(RESET_URL, {
+                        method:  "POST",
+                        headers: { "Content-Type": "application/json" },
+                        body:    JSON.stringify({ token, password }),
+                    });
+
+                    if (!res.ok) throw new Error("The reset link may have expired. Please request a new one.");
+
+                    // Success — show confirmation then redirect
+                    document.getElementById("form-state").style.display   = "none";
+                    document.getElementById("success-state").style.display = "flex";
+
+                    // Animate progress bar then redirect
+                    requestAnimationFrame(() => {
+                        requestAnimationFrame(() => {
+                            document.getElementById("redirect-bar").style.width = "100%";
+                        });
+                    });
+
+                    setTimeout(() => { window.location.href = APP_URL; }, 2000);
+
+                } catch (err) {
+                    banner.textContent   = err.message || "Something went wrong. Please try again.";
+                    banner.style.display = "flex";
+                    btn.disabled         = false;
+                    btn.innerHTML        = "Save new password";
+                }
+            }
+        </script>
+    </body>
+</html>
