password
This commit is contained in:
oliver
+428
-151
@@ -6,25 +6,31 @@
|
||||
<title>derez.ai — Reset Password</title>
|
||||
<style>
|
||||
/* ─── 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) ────────────── */
|
||||
: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;
|
||||
--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: #ff3b3b;
|
||||
--danger-dim: #3b0000;
|
||||
--success: #00ff88;
|
||||
--text: #c8f0ff;
|
||||
--success: #00ff88;
|
||||
--text: #c8f0ff;
|
||||
--text-muted: #2e6a80;
|
||||
--radius: 8px;
|
||||
--radius: 8px;
|
||||
--shadow:
|
||||
0 0 0 1px rgba(0, 245, 255, 0.25),
|
||||
0 0 60px rgba(0, 245, 255, 0.12),
|
||||
@@ -32,7 +38,8 @@
|
||||
}
|
||||
|
||||
/* ─── Base ───────────────────────────────────────────── */
|
||||
html, body {
|
||||
html,
|
||||
body {
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
font-family: "Courier New", Courier, monospace;
|
||||
@@ -52,27 +59,130 @@
|
||||
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%),
|
||||
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,.18) 0%, transparent 68%),
|
||||
radial-gradient(ellipse 100% 4% at 50% 50%, rgba(0,245,255,.22) 0%, transparent 100%);
|
||||
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;
|
||||
}
|
||||
@@ -86,13 +196,30 @@
|
||||
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);
|
||||
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,.55) 22%, black 50%);
|
||||
mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.55) 22%, black 50%);
|
||||
-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;
|
||||
}
|
||||
@@ -111,8 +238,16 @@
|
||||
}
|
||||
|
||||
@keyframes flyIn {
|
||||
from { opacity: 0; transform: scale(0); filter: blur(6px); }
|
||||
to { opacity: 1; transform: scale(1); filter: blur(0); }
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
filter: blur(6px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
filter: blur(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── Logo / header ──────────────────────────────────── */
|
||||
@@ -131,7 +266,7 @@
|
||||
height: 44px;
|
||||
border-radius: 12px;
|
||||
background: var(--accent-dim);
|
||||
border: 1px solid rgba(0,245,255,.3);
|
||||
border: 1px solid rgba(0, 245, 255, 0.3);
|
||||
color: var(--accent);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@@ -141,7 +276,7 @@
|
||||
font-weight: 700;
|
||||
color: var(--accent);
|
||||
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 {
|
||||
@@ -202,22 +337,24 @@
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
outline: none;
|
||||
transition: border-color .15s, box-shadow .15s;
|
||||
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,.08);
|
||||
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,.07);
|
||||
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,.07);
|
||||
box-shadow: 0 0 0 2px rgba(255, 59, 59, 0.07);
|
||||
}
|
||||
|
||||
.eye-btn {
|
||||
@@ -234,10 +371,12 @@
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
transition: color .15s;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
|
||||
.eye-btn:hover { color: var(--accent); }
|
||||
.eye-btn:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* ─── Match indicator ────────────────────────────────── */
|
||||
.match-msg {
|
||||
@@ -246,13 +385,19 @@
|
||||
gap: 6px;
|
||||
font-size: 11px;
|
||||
min-height: 16px;
|
||||
transition: opacity .2s;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.match-msg.ok { color: var(--success); }
|
||||
.match-msg.err { color: var(--danger); }
|
||||
.match-msg.ok {
|
||||
color: var(--success);
|
||||
}
|
||||
.match-msg.err {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.match-msg svg { flex-shrink: 0; }
|
||||
.match-msg svg {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ─── Hint ───────────────────────────────────────────── */
|
||||
.field-hint {
|
||||
@@ -292,29 +437,29 @@
|
||||
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);
|
||||
0 0 8px rgba(0, 245, 255, 0.35),
|
||||
inset 0 0 8px rgba(0, 245, 255, 0.04);
|
||||
transition:
|
||||
background .15s,
|
||||
box-shadow .15s,
|
||||
opacity .15s,
|
||||
transform .1s;
|
||||
background 0.15s,
|
||||
box-shadow 0.15s,
|
||||
opacity 0.15s,
|
||||
transform 0.1s;
|
||||
}
|
||||
|
||||
.save-btn:not(:disabled):hover {
|
||||
background: rgba(0,245,255,.08);
|
||||
background: rgba(0, 245, 255, 0.08);
|
||||
box-shadow:
|
||||
0 0 18px rgba(0,245,255,.55),
|
||||
inset 0 0 12px rgba(0,245,255,.07);
|
||||
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(.97);
|
||||
opacity: .8;
|
||||
transform: scale(0.97);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.save-btn:disabled {
|
||||
opacity: .3;
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
box-shadow: none;
|
||||
border-color: var(--border);
|
||||
@@ -325,15 +470,19 @@
|
||||
.spinner-sm {
|
||||
width: 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-radius: 50%;
|
||||
animation: spin .6s linear infinite;
|
||||
animation: spin 0.6s linear infinite;
|
||||
display: inline-block;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── Invalid token state ────────────────────────────── */
|
||||
.invalid-state {
|
||||
@@ -347,7 +496,7 @@
|
||||
|
||||
.invalid-state svg {
|
||||
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 {
|
||||
@@ -371,10 +520,12 @@
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
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 {
|
||||
@@ -384,24 +535,30 @@
|
||||
text-align: center;
|
||||
gap: 12px;
|
||||
padding: 10px 0 4px;
|
||||
animation: fadeIn .35s ease both;
|
||||
animation: fadeIn 0.35s ease both;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
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));
|
||||
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,.4);
|
||||
text-shadow: 0 0 12px rgba(0, 255, 136, 0.4);
|
||||
}
|
||||
|
||||
.success-state p {
|
||||
@@ -424,23 +581,37 @@
|
||||
background: var(--success);
|
||||
border-radius: 2px;
|
||||
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;
|
||||
}
|
||||
</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
|
||||
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">
|
||||
@@ -450,34 +621,66 @@
|
||||
</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
|
||||
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>
|
||||
<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
|
||||
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 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>
|
||||
<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;">
|
||||
|
||||
<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>
|
||||
@@ -489,14 +692,33 @@
|
||||
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"/>
|
||||
<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>
|
||||
<span class="field-hint"
|
||||
>At least 8 characters.</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Repeat password -->
|
||||
@@ -510,53 +732,90 @@
|
||||
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"/>
|
||||
<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
|
||||
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>
|
||||
<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
|
||||
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>
|
||||
<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/c2ce0eba-eb26-405d-8a90-8d982ec30698";
|
||||
const APP_URL = "https://app.derez.ai";
|
||||
const RESET_URL =
|
||||
"https://n8n.derez.ai/webhook/c2ce0eba-eb26-405d-8a90-8d982ec30698/update";
|
||||
const APP_URL = "https://app.derez.ai";
|
||||
|
||||
/* ─── Extract token from URL ─────────────────────── */
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const token = params.get("token");
|
||||
const token = params.get("token");
|
||||
|
||||
/* ─── Init ───────────────────────────────────────── */
|
||||
if (!token || token.length < 8) {
|
||||
@@ -580,49 +839,57 @@
|
||||
|
||||
/* ─── Live validation ────────────────────────────── */
|
||||
function validate() {
|
||||
const pw = document.getElementById("pw").value;
|
||||
const pw2 = document.getElementById("pw2").value;
|
||||
const pwEl = document.getElementById("pw");
|
||||
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");
|
||||
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 = "";
|
||||
banner.textContent = "";
|
||||
|
||||
const longEnough = pw.length >= 8;
|
||||
const match = pw.length > 0 && pw2.length > 0 && pw === pw2;
|
||||
const mismatch = pw2.length > 0 && pw !== pw2;
|
||||
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";
|
||||
pwEl.className =
|
||||
pw.length === 0
|
||||
? ""
|
||||
: longEnough
|
||||
? "is-valid"
|
||||
: "is-invalid";
|
||||
|
||||
// Style second field
|
||||
pw2El.className = pw2.length === 0
|
||||
? ""
|
||||
: match ? "is-valid" : mismatch ? "is-invalid" : "";
|
||||
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 =
|
||||
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 =
|
||||
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 = "";
|
||||
msg.className = "match-msg";
|
||||
msg.innerHTML = "";
|
||||
}
|
||||
|
||||
btn.disabled = !(match && longEnough);
|
||||
@@ -632,40 +899,50 @@
|
||||
async function handleSave(e) {
|
||||
e.preventDefault();
|
||||
const password = document.getElementById("pw").value;
|
||||
const btn = document.getElementById("save-btn");
|
||||
const banner = document.getElementById("error-banner");
|
||||
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';
|
||||
btn.disabled = true;
|
||||
btn.innerHTML = '<span class="spinner-sm"></span> Saving\u2026';
|
||||
|
||||
try {
|
||||
const res = await fetch(RESET_URL, {
|
||||
method: "POST",
|
||||
method: "POST",
|
||||
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
|
||||
document.getElementById("form-state").style.display = "none";
|
||||
document.getElementById("success-state").style.display = "flex";
|
||||
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%";
|
||||
document.getElementById(
|
||||
"redirect-bar",
|
||||
).style.width = "100%";
|
||||
});
|
||||
});
|
||||
|
||||
setTimeout(() => { window.location.href = APP_URL; }, 2000);
|
||||
|
||||
setTimeout(() => {
|
||||
window.location.href = APP_URL;
|
||||
}, 2000);
|
||||
} 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";
|
||||
btn.disabled = false;
|
||||
btn.innerHTML = "Save new password";
|
||||
btn.disabled = false;
|
||||
btn.innerHTML = "Save new password";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user