oliver
953 lines
37 KiB
HTML
953 lines
37 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="robots" content="noindex, nofollow" />
|
|
<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, 0.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, 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 */
|
|
radial-gradient(
|
|
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;
|
|
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, 0.28) 1px,
|
|
transparent 1px
|
|
),
|
|
linear-gradient(
|
|
90deg,
|
|
rgba(0, 245, 255, 0.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, 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;
|
|
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, 0.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, 0.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 0.15s,
|
|
box-shadow 0.15s;
|
|
}
|
|
|
|
.input-wrap input:focus {
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 0 2px rgba(0, 245, 255, 0.08);
|
|
}
|
|
|
|
.input-wrap input.is-valid {
|
|
border-color: var(--success);
|
|
box-shadow: 0 0 0 2px rgba(0, 255, 136, 0.07);
|
|
}
|
|
|
|
.input-wrap input.is-invalid {
|
|
border-color: var(--danger);
|
|
box-shadow: 0 0 0 2px rgba(255, 59, 59, 0.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 0.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 0.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, 0.35),
|
|
inset 0 0 8px rgba(0, 245, 255, 0.04);
|
|
transition:
|
|
background 0.15s,
|
|
box-shadow 0.15s,
|
|
opacity 0.15s,
|
|
transform 0.1s;
|
|
}
|
|
|
|
.save-btn:not(:disabled):hover {
|
|
background: rgba(0, 245, 255, 0.08);
|
|
box-shadow:
|
|
0 0 18px rgba(0, 245, 255, 0.55),
|
|
inset 0 0 12px rgba(0, 245, 255, 0.07);
|
|
}
|
|
|
|
.save-btn:not(:disabled):active {
|
|
transform: scale(0.97);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.save-btn:disabled {
|
|
opacity: 0.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, 0.25);
|
|
border-top-color: #fff;
|
|
border-radius: 50%;
|
|
animation: spin 0.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, 0.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 0.15s;
|
|
}
|
|
|
|
.back-link:hover {
|
|
opacity: 0.75;
|
|
}
|
|
|
|
/* ─── Success state ──────────────────────────────────── */
|
|
.success-state {
|
|
display: none;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
gap: 12px;
|
|
padding: 10px 0 4px;
|
|
animation: fadeIn 0.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, 0.6));
|
|
}
|
|
|
|
.success-state h2 {
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
color: var(--success);
|
|
text-shadow: 0 0 12px rgba(0, 255, 136, 0.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, 0.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…
|
|
</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/account/password/change";
|
|
const APP_URL = "https://app.derez.ai";
|
|
|
|
/* ─── Extract token + email from URL ──────────────── */
|
|
const params = new URLSearchParams(window.location.search);
|
|
const token = params.get("token");
|
|
const email = params.get("email") || "";
|
|
|
|
/* ─── 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: "PUT",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ token, password, email }),
|
|
});
|
|
|
|
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>
|