password
This commit is contained in:
oliver
@@ -25,7 +25,7 @@ Single-page user portal for **derez.ai** — lets customers sign up, log in, and
|
|||||||
index.html ← all markup — auth card + app shell + confirm dialog
|
index.html ← all markup — auth card + app shell + confirm dialog
|
||||||
styles.css ← all styles — design tokens, layout, components
|
styles.css ← all styles — design tokens, layout, components
|
||||||
app.js ← all logic — auth, agents, keys, password, restart, backups, contract
|
app.js ← all logic — auth, agents, keys, password, restart, backups, contract
|
||||||
password-reset.html ← standalone page — receives ?token=XXX, sets new password, redirects to app
|
password.html ← standalone page — receives ?token=XXX, sets new password, redirects to app
|
||||||
start ← dev server launcher (live-server)
|
start ← dev server launcher (live-server)
|
||||||
AGENTS.md ← this file
|
AGENTS.md ← this file
|
||||||
style_guide.md ← visual design spec (tokens, typography, components)
|
style_guide.md ← visual design spec (tokens, typography, components)
|
||||||
@@ -93,7 +93,7 @@ Password Reset — step 1 (auth screen)
|
|||||||
always → hide signin-error → show #reset-pw-sent confirmation
|
always → hide signin-error → show #reset-pw-sent confirmation
|
||||||
(response not checked — never reveal whether address exists)
|
(response not checked — never reveal whether address exists)
|
||||||
|
|
||||||
Password Reset — step 2 (password-reset.html?token=XXX)
|
Password Reset — step 2 (password.html?token=XXX)
|
||||||
└── token missing or < 8 chars → show invalid-state
|
└── token missing or < 8 chars → show invalid-state
|
||||||
token valid → show password form
|
token valid → show password form
|
||||||
POST PW_RESET_URL {token, password}
|
POST PW_RESET_URL {token, password}
|
||||||
@@ -335,15 +335,18 @@ The agent info GET response (webhook 6) drives wizard visibility: if the respons
|
|||||||
|
|
||||||
### 10 · Password Reset
|
### 10 · Password Reset
|
||||||
```
|
```
|
||||||
|
Step 1 — request reset email
|
||||||
POST https://n8n.derez.ai/webhook/c2ce0eba-eb26-405d-8a90-8d982ec30698
|
POST https://n8n.derez.ai/webhook/c2ce0eba-eb26-405d-8a90-8d982ec30698
|
||||||
Body (step 1 — request email): { email }
|
Body: { email }
|
||||||
Body (step 2 — save new password): { token, password }
|
|
||||||
|
Step 2 — save new password
|
||||||
|
POST https://n8n.derez.ai/webhook/c2ce0eba-eb26-405d-8a90-8d982ec30698/update
|
||||||
|
Body: { token, password }
|
||||||
```
|
```
|
||||||
The same endpoint handles both steps — the presence of `token` distinguishes them.
|
|
||||||
|
|
||||||
**Step 1** is triggered from `index.html` when the user clicks **Send reset email** inside `#reset-pw-wrap` (visible only after a failed sign-in). The response is intentionally ignored and the sent-confirmation is always shown — this avoids revealing whether the email address exists.
|
**Step 1** is triggered from `index.html` when the user clicks **Send reset email** inside `#reset-pw-wrap` (visible only after a failed sign-in). The response is intentionally ignored and the sent-confirmation is always shown — this avoids revealing whether the email address exists.
|
||||||
|
|
||||||
**Step 2** is handled entirely by `password-reset.html`, which:
|
**Step 2** is handled entirely by `password.html`, which:
|
||||||
- Reads `?token=XXX` from the URL on load; shows an invalid-state if absent.
|
- Reads `?token=XXX` from the URL on load; shows an invalid-state if absent.
|
||||||
- Requires both password fields to match and be ≥ 8 characters before enabling Save.
|
- Requires both password fields to match and be ≥ 8 characters before enabling Save.
|
||||||
- On 200 response shows a success state with a 2 s animated progress bar then redirects to `https://app.derez.ai`.
|
- On 200 response shows a success state with a 2 s animated progress bar then redirects to `https://app.derez.ai`.
|
||||||
|
|||||||
+428
-151
@@ -6,25 +6,31 @@
|
|||||||
<title>derez.ai — Reset Password</title>
|
<title>derez.ai — Reset Password</title>
|
||||||
<style>
|
<style>
|
||||||
/* ─── Reset ─────────────────────────────────────────── */
|
/* ─── Reset ─────────────────────────────────────────── */
|
||||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/* ─── Design tokens (Digital Grid theme) ────────────── */
|
/* ─── Design tokens (Digital Grid theme) ────────────── */
|
||||||
:root {
|
:root {
|
||||||
--bg: #000810;
|
--bg: #000810;
|
||||||
--bg-card: #010f20;
|
--bg-card: #010f20;
|
||||||
--bg-inner: #000d1a;
|
--bg-inner: #000d1a;
|
||||||
--bg-hover: #001a30;
|
--bg-hover: #001a30;
|
||||||
--bg-input: #000813;
|
--bg-input: #000813;
|
||||||
--border: #0a3060;
|
--border: #0a3060;
|
||||||
--border-hi: rgba(0, 245, 255, 0.45);
|
--border-hi: rgba(0, 245, 255, 0.45);
|
||||||
--accent: #00f5ff;
|
--accent: #00f5ff;
|
||||||
--accent-dim: #002535;
|
--accent-dim: #002535;
|
||||||
--danger: #ff3b3b;
|
--danger: #ff3b3b;
|
||||||
--danger-dim: #3b0000;
|
--danger-dim: #3b0000;
|
||||||
--success: #00ff88;
|
--success: #00ff88;
|
||||||
--text: #c8f0ff;
|
--text: #c8f0ff;
|
||||||
--text-muted: #2e6a80;
|
--text-muted: #2e6a80;
|
||||||
--radius: 8px;
|
--radius: 8px;
|
||||||
--shadow:
|
--shadow:
|
||||||
0 0 0 1px rgba(0, 245, 255, 0.25),
|
0 0 0 1px rgba(0, 245, 255, 0.25),
|
||||||
0 0 60px rgba(0, 245, 255, 0.12),
|
0 0 60px rgba(0, 245, 255, 0.12),
|
||||||
@@ -32,7 +38,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* ─── Base ───────────────────────────────────────────── */
|
/* ─── Base ───────────────────────────────────────────── */
|
||||||
html, body {
|
html,
|
||||||
|
body {
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
font-family: "Courier New", Courier, monospace;
|
font-family: "Courier New", Courier, monospace;
|
||||||
@@ -52,27 +59,130 @@
|
|||||||
inset: 0;
|
inset: 0;
|
||||||
background:
|
background:
|
||||||
/* Stars */
|
/* Stars */
|
||||||
radial-gradient(circle 5px at 5% 8%, white 0%, white 40%, rgba(180,245,255,.28) 72%, transparent 100%),
|
radial-gradient(
|
||||||
radial-gradient(circle 3px at 15% 5%, white 0%, white 42%, transparent 100%),
|
circle 5px at 5% 8%,
|
||||||
radial-gradient(circle 6px at 31% 4%, white 0%, white 38%, rgba(150,220,255,.32) 70%, transparent 100%),
|
white 0%,
|
||||||
radial-gradient(circle 3px at 47% 6%, white 0%, white 42%, transparent 100%),
|
white 40%,
|
||||||
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%),
|
rgba(180, 245, 255, 0.28) 72%,
|
||||||
radial-gradient(circle 5px at 71% 7%, white 0%, white 40%, rgba(180,245,255,.26) 70%, transparent 100%),
|
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(
|
||||||
radial-gradient(circle 3px at 18% 16%, white 0%, white 42%, transparent 100%),
|
circle 3px at 15% 5%,
|
||||||
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%),
|
white 0%,
|
||||||
radial-gradient(circle 3px at 75% 15%, white 0%, white 42%, transparent 100%),
|
white 42%,
|
||||||
radial-gradient(circle 2px at 9% 22%, rgba(255,255,255,.65) 0%, rgba(255,255,255,.65) 45%, transparent 100%),
|
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(
|
||||||
radial-gradient(circle 2px at 83% 20%, rgba(160,225,255,.68) 0%, rgba(160,225,255,.68) 45%, transparent 100%),
|
circle 6px at 31% 4%,
|
||||||
radial-gradient(circle 3px at 33% 38%, rgba(170,230,255,.52) 0%, rgba(170,230,255,.52) 42%, transparent 100%),
|
white 0%,
|
||||||
radial-gradient(circle 2px at 62% 31%, rgba(180,240,255,.42) 0%, rgba(180,240,255,.42) 45%, transparent 100%),
|
white 38%,
|
||||||
radial-gradient(circle 3px at 69% 38%, white 0%, white 42%, transparent 100%),
|
rgba(150, 220, 255, 0.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, 0.28) 70%,
|
||||||
|
transparent 100%
|
||||||
|
),
|
||||||
|
radial-gradient(
|
||||||
|
circle 5px at 71% 7%,
|
||||||
|
white 0%,
|
||||||
|
white 40%,
|
||||||
|
rgba(180, 245, 255, 0.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, 0.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, 0.65) 0%,
|
||||||
|
rgba(255, 255, 255, 0.65) 45%,
|
||||||
|
transparent 100%
|
||||||
|
),
|
||||||
|
radial-gradient(
|
||||||
|
circle 2px at 40% 25%,
|
||||||
|
rgba(255, 255, 255, 0.55) 0%,
|
||||||
|
rgba(255, 255, 255, 0.55) 45%,
|
||||||
|
transparent 100%
|
||||||
|
),
|
||||||
|
radial-gradient(
|
||||||
|
circle 2px at 66% 23%,
|
||||||
|
rgba(255, 255, 255, 0.55) 0%,
|
||||||
|
rgba(255, 255, 255, 0.55) 45%,
|
||||||
|
transparent 100%
|
||||||
|
),
|
||||||
|
radial-gradient(
|
||||||
|
circle 2px at 83% 20%,
|
||||||
|
rgba(160, 225, 255, 0.68) 0%,
|
||||||
|
rgba(160, 225, 255, 0.68) 45%,
|
||||||
|
transparent 100%
|
||||||
|
),
|
||||||
|
radial-gradient(
|
||||||
|
circle 3px at 33% 38%,
|
||||||
|
rgba(170, 230, 255, 0.52) 0%,
|
||||||
|
rgba(170, 230, 255, 0.52) 42%,
|
||||||
|
transparent 100%
|
||||||
|
),
|
||||||
|
radial-gradient(
|
||||||
|
circle 2px at 62% 31%,
|
||||||
|
rgba(180, 240, 255, 0.42) 0%,
|
||||||
|
rgba(180, 240, 255, 0.42) 45%,
|
||||||
|
transparent 100%
|
||||||
|
),
|
||||||
|
radial-gradient(
|
||||||
|
circle 3px at 69% 38%,
|
||||||
|
white 0%,
|
||||||
|
white 42%,
|
||||||
|
transparent 100%
|
||||||
|
),
|
||||||
/* Ambient glow + horizon line */
|
/* Ambient glow + horizon line */
|
||||||
radial-gradient(ellipse 70% 55% at 50% 48%, rgba(0,120,200,.18) 0%, transparent 68%),
|
radial-gradient(
|
||||||
radial-gradient(ellipse 100% 4% at 50% 50%, rgba(0,245,255,.22) 0%, transparent 100%);
|
ellipse 70% 55% at 50% 48%,
|
||||||
|
rgba(0, 120, 200, 0.18) 0%,
|
||||||
|
transparent 68%
|
||||||
|
),
|
||||||
|
radial-gradient(
|
||||||
|
ellipse 100% 4% at 50% 50%,
|
||||||
|
rgba(0, 245, 255, 0.22) 0%,
|
||||||
|
transparent 100%
|
||||||
|
);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
@@ -86,13 +196,30 @@
|
|||||||
height: 62%;
|
height: 62%;
|
||||||
bottom: -8%;
|
bottom: -8%;
|
||||||
background-image:
|
background-image:
|
||||||
linear-gradient(rgba(0,245,255,.28) 1px, transparent 1px),
|
linear-gradient(
|
||||||
linear-gradient(90deg, rgba(0,245,255,.16) 1px, transparent 1px);
|
rgba(0, 245, 255, 0.28) 1px,
|
||||||
|
transparent 1px
|
||||||
|
),
|
||||||
|
linear-gradient(
|
||||||
|
90deg,
|
||||||
|
rgba(0, 245, 255, 0.16) 1px,
|
||||||
|
transparent 1px
|
||||||
|
);
|
||||||
background-size: 80px 40px;
|
background-size: 80px 40px;
|
||||||
transform: perspective(520px) rotateX(75deg);
|
transform: perspective(520px) rotateX(75deg);
|
||||||
transform-origin: center 0%;
|
transform-origin: center 0%;
|
||||||
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.55) 22%, black 50%);
|
-webkit-mask-image: linear-gradient(
|
||||||
mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.55) 22%, black 50%);
|
to bottom,
|
||||||
|
transparent 0%,
|
||||||
|
rgba(0, 0, 0, 0.55) 22%,
|
||||||
|
black 50%
|
||||||
|
);
|
||||||
|
mask-image: linear-gradient(
|
||||||
|
to bottom,
|
||||||
|
transparent 0%,
|
||||||
|
rgba(0, 0, 0, 0.55) 22%,
|
||||||
|
black 50%
|
||||||
|
);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
@@ -111,8 +238,16 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@keyframes flyIn {
|
@keyframes flyIn {
|
||||||
from { opacity: 0; transform: scale(0); filter: blur(6px); }
|
from {
|
||||||
to { opacity: 1; transform: scale(1); filter: blur(0); }
|
opacity: 0;
|
||||||
|
transform: scale(0);
|
||||||
|
filter: blur(6px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
filter: blur(0);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ─── Logo / header ──────────────────────────────────── */
|
/* ─── Logo / header ──────────────────────────────────── */
|
||||||
@@ -131,7 +266,7 @@
|
|||||||
height: 44px;
|
height: 44px;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
background: var(--accent-dim);
|
background: var(--accent-dim);
|
||||||
border: 1px solid rgba(0,245,255,.3);
|
border: 1px solid rgba(0, 245, 255, 0.3);
|
||||||
color: var(--accent);
|
color: var(--accent);
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
@@ -141,7 +276,7 @@
|
|||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: var(--accent);
|
color: var(--accent);
|
||||||
letter-spacing: 1.5px;
|
letter-spacing: 1.5px;
|
||||||
text-shadow: 0 0 14px rgba(0,245,255,.85);
|
text-shadow: 0 0 14px rgba(0, 245, 255, 0.85);
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo-text p {
|
.logo-text p {
|
||||||
@@ -202,22 +337,24 @@
|
|||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
outline: none;
|
outline: none;
|
||||||
transition: border-color .15s, box-shadow .15s;
|
transition:
|
||||||
|
border-color 0.15s,
|
||||||
|
box-shadow 0.15s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-wrap input:focus {
|
.input-wrap input:focus {
|
||||||
border-color: var(--accent);
|
border-color: var(--accent);
|
||||||
box-shadow: 0 0 0 2px rgba(0,245,255,.08);
|
box-shadow: 0 0 0 2px rgba(0, 245, 255, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-wrap input.is-valid {
|
.input-wrap input.is-valid {
|
||||||
border-color: var(--success);
|
border-color: var(--success);
|
||||||
box-shadow: 0 0 0 2px rgba(0,255,136,.07);
|
box-shadow: 0 0 0 2px rgba(0, 255, 136, 0.07);
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-wrap input.is-invalid {
|
.input-wrap input.is-invalid {
|
||||||
border-color: var(--danger);
|
border-color: var(--danger);
|
||||||
box-shadow: 0 0 0 2px rgba(255,59,59,.07);
|
box-shadow: 0 0 0 2px rgba(255, 59, 59, 0.07);
|
||||||
}
|
}
|
||||||
|
|
||||||
.eye-btn {
|
.eye-btn {
|
||||||
@@ -234,10 +371,12 @@
|
|||||||
color: var(--text-muted);
|
color: var(--text-muted);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
transition: color .15s;
|
transition: color 0.15s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.eye-btn:hover { color: var(--accent); }
|
.eye-btn:hover {
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
/* ─── Match indicator ────────────────────────────────── */
|
/* ─── Match indicator ────────────────────────────────── */
|
||||||
.match-msg {
|
.match-msg {
|
||||||
@@ -246,13 +385,19 @@
|
|||||||
gap: 6px;
|
gap: 6px;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
min-height: 16px;
|
min-height: 16px;
|
||||||
transition: opacity .2s;
|
transition: opacity 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.match-msg.ok { color: var(--success); }
|
.match-msg.ok {
|
||||||
.match-msg.err { color: var(--danger); }
|
color: var(--success);
|
||||||
|
}
|
||||||
|
.match-msg.err {
|
||||||
|
color: var(--danger);
|
||||||
|
}
|
||||||
|
|
||||||
.match-msg svg { flex-shrink: 0; }
|
.match-msg svg {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/* ─── Hint ───────────────────────────────────────────── */
|
/* ─── Hint ───────────────────────────────────────────── */
|
||||||
.field-hint {
|
.field-hint {
|
||||||
@@ -292,29 +437,29 @@
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
letter-spacing: 0.3px;
|
letter-spacing: 0.3px;
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0 0 8px rgba(0,245,255,.35),
|
0 0 8px rgba(0, 245, 255, 0.35),
|
||||||
inset 0 0 8px rgba(0,245,255,.04);
|
inset 0 0 8px rgba(0, 245, 255, 0.04);
|
||||||
transition:
|
transition:
|
||||||
background .15s,
|
background 0.15s,
|
||||||
box-shadow .15s,
|
box-shadow 0.15s,
|
||||||
opacity .15s,
|
opacity 0.15s,
|
||||||
transform .1s;
|
transform 0.1s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.save-btn:not(:disabled):hover {
|
.save-btn:not(:disabled):hover {
|
||||||
background: rgba(0,245,255,.08);
|
background: rgba(0, 245, 255, 0.08);
|
||||||
box-shadow:
|
box-shadow:
|
||||||
0 0 18px rgba(0,245,255,.55),
|
0 0 18px rgba(0, 245, 255, 0.55),
|
||||||
inset 0 0 12px rgba(0,245,255,.07);
|
inset 0 0 12px rgba(0, 245, 255, 0.07);
|
||||||
}
|
}
|
||||||
|
|
||||||
.save-btn:not(:disabled):active {
|
.save-btn:not(:disabled):active {
|
||||||
transform: scale(.97);
|
transform: scale(0.97);
|
||||||
opacity: .8;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
|
|
||||||
.save-btn:disabled {
|
.save-btn:disabled {
|
||||||
opacity: .3;
|
opacity: 0.3;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
border-color: var(--border);
|
border-color: var(--border);
|
||||||
@@ -325,15 +470,19 @@
|
|||||||
.spinner-sm {
|
.spinner-sm {
|
||||||
width: 13px;
|
width: 13px;
|
||||||
height: 13px;
|
height: 13px;
|
||||||
border: 2px solid rgba(255,255,255,.25);
|
border: 2px solid rgba(255, 255, 255, 0.25);
|
||||||
border-top-color: #fff;
|
border-top-color: #fff;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
animation: spin .6s linear infinite;
|
animation: spin 0.6s linear infinite;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes spin { to { transform: rotate(360deg); } }
|
@keyframes spin {
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* ─── Invalid token state ────────────────────────────── */
|
/* ─── Invalid token state ────────────────────────────── */
|
||||||
.invalid-state {
|
.invalid-state {
|
||||||
@@ -347,7 +496,7 @@
|
|||||||
|
|
||||||
.invalid-state svg {
|
.invalid-state svg {
|
||||||
color: var(--danger);
|
color: var(--danger);
|
||||||
filter: drop-shadow(0 0 8px rgba(255,59,59,.5));
|
filter: drop-shadow(0 0 8px rgba(255, 59, 59, 0.5));
|
||||||
}
|
}
|
||||||
|
|
||||||
.invalid-state h2 {
|
.invalid-state h2 {
|
||||||
@@ -371,10 +520,12 @@
|
|||||||
color: var(--accent);
|
color: var(--accent);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
transition: opacity .15s;
|
transition: opacity 0.15s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.back-link:hover { opacity: .75; }
|
.back-link:hover {
|
||||||
|
opacity: 0.75;
|
||||||
|
}
|
||||||
|
|
||||||
/* ─── Success state ──────────────────────────────────── */
|
/* ─── Success state ──────────────────────────────────── */
|
||||||
.success-state {
|
.success-state {
|
||||||
@@ -384,24 +535,30 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
padding: 10px 0 4px;
|
padding: 10px 0 4px;
|
||||||
animation: fadeIn .35s ease both;
|
animation: fadeIn 0.35s ease both;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes fadeIn {
|
@keyframes fadeIn {
|
||||||
from { opacity: 0; transform: translateY(8px); }
|
from {
|
||||||
to { opacity: 1; transform: translateY(0); }
|
opacity: 0;
|
||||||
|
transform: translateY(8px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.success-state svg {
|
.success-state svg {
|
||||||
color: var(--success);
|
color: var(--success);
|
||||||
filter: drop-shadow(0 0 10px rgba(0,255,136,.6));
|
filter: drop-shadow(0 0 10px rgba(0, 255, 136, 0.6));
|
||||||
}
|
}
|
||||||
|
|
||||||
.success-state h2 {
|
.success-state h2 {
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: var(--success);
|
color: var(--success);
|
||||||
text-shadow: 0 0 12px rgba(0,255,136,.4);
|
text-shadow: 0 0 12px rgba(0, 255, 136, 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.success-state p {
|
.success-state p {
|
||||||
@@ -424,23 +581,37 @@
|
|||||||
background: var(--success);
|
background: var(--success);
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
width: 0%;
|
width: 0%;
|
||||||
box-shadow: 0 0 6px rgba(0,255,136,.6);
|
box-shadow: 0 0 6px rgba(0, 255, 136, 0.6);
|
||||||
transition: width 1.8s linear;
|
transition: width 1.8s linear;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="card" id="card">
|
<div class="card" id="card">
|
||||||
|
|
||||||
<!-- Logo -->
|
<!-- Logo -->
|
||||||
<div class="card-logo">
|
<div class="card-logo">
|
||||||
<div class="logo-icon">
|
<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">
|
<svg
|
||||||
<rect x="3" y="8" width="18" height="13" rx="2"/>
|
width="22"
|
||||||
<path d="M9 12h.01M15 12h.01"/>
|
height="22"
|
||||||
<path d="M9 16h6"/>
|
viewBox="0 0 24 24"
|
||||||
<path d="M12 8V5"/>
|
fill="none"
|
||||||
<circle cx="12" cy="4" r="1.2" fill="currentColor" stroke="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>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<div class="logo-text">
|
<div class="logo-text">
|
||||||
@@ -450,34 +621,66 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
|
|
||||||
<!-- ── Invalid / expired token ─────────────────── -->
|
<!-- ── Invalid / expired token ─────────────────── -->
|
||||||
<div id="invalid-state" class="invalid-state">
|
<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">
|
<svg
|
||||||
<circle cx="12" cy="12" r="10"/>
|
width="40"
|
||||||
<line x1="12" y1="8" x2="12" y2="12"/>
|
height="40"
|
||||||
<line x1="12" y1="16" x2="12.01" y2="16"/>
|
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>
|
</svg>
|
||||||
<h2>Invalid or expired link</h2>
|
<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>
|
<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">
|
<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">
|
<svg
|
||||||
<polyline points="15 18 9 12 15 6"/>
|
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>
|
</svg>
|
||||||
Back to sign in
|
Back to sign in
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- ── Reset form ──────────────────────────────── -->
|
<!-- ── Reset form ──────────────────────────────── -->
|
||||||
<div id="form-state" style="display:none">
|
<div id="form-state" style="display: none">
|
||||||
<div style="display:flex;flex-direction:column;gap:16px;">
|
<div
|
||||||
|
style="display: flex; flex-direction: column; gap: 16px"
|
||||||
|
>
|
||||||
<div>
|
<div>
|
||||||
<p class="section-title">Reset your password</p>
|
<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>
|
<p class="section-sub" style="margin-top: 6px">
|
||||||
|
Choose a strong new password for your account.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<form id="reset-form" onsubmit="handleSave(event)" novalidate style="display:flex;flex-direction:column;gap:14px;">
|
<form
|
||||||
|
id="reset-form"
|
||||||
|
onsubmit="handleSave(event)"
|
||||||
|
novalidate
|
||||||
|
style="
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 14px;
|
||||||
|
"
|
||||||
|
>
|
||||||
<!-- New password -->
|
<!-- New password -->
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<label for="pw">New password</label>
|
<label for="pw">New password</label>
|
||||||
@@ -489,14 +692,33 @@
|
|||||||
autocomplete="new-password"
|
autocomplete="new-password"
|
||||||
oninput="validate()"
|
oninput="validate()"
|
||||||
/>
|
/>
|
||||||
<button type="button" class="eye-btn" onclick="toggleVis('pw', this)" title="Show / hide">
|
<button
|
||||||
<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">
|
type="button"
|
||||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
|
class="eye-btn"
|
||||||
<circle cx="12" cy="12" r="3"/>
|
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>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<span class="field-hint">At least 8 characters.</span>
|
<span class="field-hint"
|
||||||
|
>At least 8 characters.</span
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Repeat password -->
|
<!-- Repeat password -->
|
||||||
@@ -510,53 +732,90 @@
|
|||||||
autocomplete="new-password"
|
autocomplete="new-password"
|
||||||
oninput="validate()"
|
oninput="validate()"
|
||||||
/>
|
/>
|
||||||
<button type="button" class="eye-btn" onclick="toggleVis('pw2', this)" title="Show / hide">
|
<button
|
||||||
<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">
|
type="button"
|
||||||
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
|
class="eye-btn"
|
||||||
<circle cx="12" cy="12" r="3"/>
|
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>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<!-- Match indicator -->
|
<!-- Match indicator -->
|
||||||
<div id="match-msg" class="match-msg" style="opacity:0;"></div>
|
<div
|
||||||
|
id="match-msg"
|
||||||
|
class="match-msg"
|
||||||
|
style="opacity: 0"
|
||||||
|
></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Error banner -->
|
<!-- Error banner -->
|
||||||
<div id="error-banner" class="error-banner"></div>
|
<div id="error-banner" class="error-banner"></div>
|
||||||
|
|
||||||
<!-- Save button -->
|
<!-- Save button -->
|
||||||
<button type="submit" id="save-btn" class="save-btn" disabled>
|
<button
|
||||||
|
type="submit"
|
||||||
|
id="save-btn"
|
||||||
|
class="save-btn"
|
||||||
|
disabled
|
||||||
|
>
|
||||||
Save new password
|
Save new password
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- ── Success ─────────────────────────────────── -->
|
<!-- ── Success ─────────────────────────────────── -->
|
||||||
<div id="success-state" class="success-state">
|
<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">
|
<svg
|
||||||
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
|
width="44"
|
||||||
<polyline points="22 4 12 14.01 9 11.01"/>
|
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>
|
</svg>
|
||||||
<h2>Password updated!</h2>
|
<h2>Password updated!</h2>
|
||||||
<p>Your new password has been saved.<br>Redirecting you to sign in…</p>
|
<p>
|
||||||
|
Your new password has been saved.<br />Redirecting you
|
||||||
|
to sign in…
|
||||||
|
</p>
|
||||||
<div class="redirect-bar-wrap">
|
<div class="redirect-bar-wrap">
|
||||||
<div class="redirect-bar" id="redirect-bar"></div>
|
<div class="redirect-bar" id="redirect-bar"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
/* ─── Constants ────────────────────────────────────── */
|
/* ─── Constants ────────────────────────────────────── */
|
||||||
const RESET_URL = "https://n8n.derez.ai/webhook/c2ce0eba-eb26-405d-8a90-8d982ec30698";
|
const RESET_URL =
|
||||||
const APP_URL = "https://app.derez.ai";
|
"https://n8n.derez.ai/webhook/c2ce0eba-eb26-405d-8a90-8d982ec30698/update";
|
||||||
|
const APP_URL = "https://app.derez.ai";
|
||||||
|
|
||||||
/* ─── Extract token from URL ─────────────────────── */
|
/* ─── Extract token from URL ─────────────────────── */
|
||||||
const params = new URLSearchParams(window.location.search);
|
const params = new URLSearchParams(window.location.search);
|
||||||
const token = params.get("token");
|
const token = params.get("token");
|
||||||
|
|
||||||
/* ─── Init ───────────────────────────────────────── */
|
/* ─── Init ───────────────────────────────────────── */
|
||||||
if (!token || token.length < 8) {
|
if (!token || token.length < 8) {
|
||||||
@@ -580,49 +839,57 @@
|
|||||||
|
|
||||||
/* ─── Live validation ────────────────────────────── */
|
/* ─── Live validation ────────────────────────────── */
|
||||||
function validate() {
|
function validate() {
|
||||||
const pw = document.getElementById("pw").value;
|
const pw = document.getElementById("pw").value;
|
||||||
const pw2 = document.getElementById("pw2").value;
|
const pw2 = document.getElementById("pw2").value;
|
||||||
const pwEl = document.getElementById("pw");
|
const pwEl = document.getElementById("pw");
|
||||||
const pw2El = document.getElementById("pw2");
|
const pw2El = document.getElementById("pw2");
|
||||||
const msg = document.getElementById("match-msg");
|
const msg = document.getElementById("match-msg");
|
||||||
const btn = document.getElementById("save-btn");
|
const btn = document.getElementById("save-btn");
|
||||||
|
|
||||||
// Clear error banner on re-type
|
// Clear error banner on re-type
|
||||||
const banner = document.getElementById("error-banner");
|
const banner = document.getElementById("error-banner");
|
||||||
banner.style.display = "none";
|
banner.style.display = "none";
|
||||||
banner.textContent = "";
|
banner.textContent = "";
|
||||||
|
|
||||||
const longEnough = pw.length >= 8;
|
const longEnough = pw.length >= 8;
|
||||||
const match = pw.length > 0 && pw2.length > 0 && pw === pw2;
|
const match = pw.length > 0 && pw2.length > 0 && pw === pw2;
|
||||||
const mismatch = pw2.length > 0 && pw !== pw2;
|
const mismatch = pw2.length > 0 && pw !== pw2;
|
||||||
|
|
||||||
// Style first field
|
// Style first field
|
||||||
pwEl.className = pw.length === 0
|
pwEl.className =
|
||||||
? ""
|
pw.length === 0
|
||||||
: longEnough ? "is-valid" : "is-invalid";
|
? ""
|
||||||
|
: longEnough
|
||||||
|
? "is-valid"
|
||||||
|
: "is-invalid";
|
||||||
|
|
||||||
// Style second field
|
// Style second field
|
||||||
pw2El.className = pw2.length === 0
|
pw2El.className =
|
||||||
? ""
|
pw2.length === 0
|
||||||
: match ? "is-valid" : mismatch ? "is-invalid" : "";
|
? ""
|
||||||
|
: match
|
||||||
|
? "is-valid"
|
||||||
|
: mismatch
|
||||||
|
? "is-invalid"
|
||||||
|
: "";
|
||||||
|
|
||||||
// Match message
|
// Match message
|
||||||
if (match) {
|
if (match) {
|
||||||
msg.style.opacity = "1";
|
msg.style.opacity = "1";
|
||||||
msg.className = "match-msg ok";
|
msg.className = "match-msg ok";
|
||||||
msg.innerHTML =
|
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>' +
|
'<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";
|
"Passwords match";
|
||||||
} else if (mismatch) {
|
} else if (mismatch) {
|
||||||
msg.style.opacity = "1";
|
msg.style.opacity = "1";
|
||||||
msg.className = "match-msg err";
|
msg.className = "match-msg err";
|
||||||
msg.innerHTML =
|
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>' +
|
'<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";
|
"Passwords don\u2019t match";
|
||||||
} else {
|
} else {
|
||||||
msg.style.opacity = "0";
|
msg.style.opacity = "0";
|
||||||
msg.className = "match-msg";
|
msg.className = "match-msg";
|
||||||
msg.innerHTML = "";
|
msg.innerHTML = "";
|
||||||
}
|
}
|
||||||
|
|
||||||
btn.disabled = !(match && longEnough);
|
btn.disabled = !(match && longEnough);
|
||||||
@@ -632,40 +899,50 @@
|
|||||||
async function handleSave(e) {
|
async function handleSave(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
const password = document.getElementById("pw").value;
|
const password = document.getElementById("pw").value;
|
||||||
const btn = document.getElementById("save-btn");
|
const btn = document.getElementById("save-btn");
|
||||||
const banner = document.getElementById("error-banner");
|
const banner = document.getElementById("error-banner");
|
||||||
|
|
||||||
// Loading state
|
// Loading state
|
||||||
btn.disabled = true;
|
btn.disabled = true;
|
||||||
btn.innerHTML = '<span class="spinner-sm"></span> Saving\u2026';
|
btn.innerHTML = '<span class="spinner-sm"></span> Saving\u2026';
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const res = await fetch(RESET_URL, {
|
const res = await fetch(RESET_URL, {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
headers: { "Content-Type": "application/json" },
|
headers: { "Content-Type": "application/json" },
|
||||||
body: JSON.stringify({ token, password }),
|
body: JSON.stringify({ token, password }),
|
||||||
});
|
});
|
||||||
|
|
||||||
if (!res.ok) throw new Error("The reset link may have expired. Please request a new one.");
|
if (!res.ok)
|
||||||
|
throw new Error(
|
||||||
|
"The reset link may have expired. Please request a new one.",
|
||||||
|
);
|
||||||
|
|
||||||
// Success — show confirmation then redirect
|
// Success — show confirmation then redirect
|
||||||
document.getElementById("form-state").style.display = "none";
|
document.getElementById("form-state").style.display =
|
||||||
document.getElementById("success-state").style.display = "flex";
|
"none";
|
||||||
|
document.getElementById("success-state").style.display =
|
||||||
|
"flex";
|
||||||
|
|
||||||
// Animate progress bar then redirect
|
// Animate progress bar then redirect
|
||||||
requestAnimationFrame(() => {
|
requestAnimationFrame(() => {
|
||||||
requestAnimationFrame(() => {
|
requestAnimationFrame(() => {
|
||||||
document.getElementById("redirect-bar").style.width = "100%";
|
document.getElementById(
|
||||||
|
"redirect-bar",
|
||||||
|
).style.width = "100%";
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
setTimeout(() => { window.location.href = APP_URL; }, 2000);
|
setTimeout(() => {
|
||||||
|
window.location.href = APP_URL;
|
||||||
|
}, 2000);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
banner.textContent = err.message || "Something went wrong. Please try again.";
|
banner.textContent =
|
||||||
|
err.message ||
|
||||||
|
"Something went wrong. Please try again.";
|
||||||
banner.style.display = "flex";
|
banner.style.display = "flex";
|
||||||
btn.disabled = false;
|
btn.disabled = false;
|
||||||
btn.innerHTML = "Save new password";
|
btn.innerHTML = "Save new password";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Reference in New Issue
Block a user