Oliver/app.derez.ai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

name change

Browse Source
This commit is contained in:
oliver
2026-06-08 10:08:31 -03:00
parent 8c668d4cd0
commit 3ab1498e0d
1 changed files with 0 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
password.html
+673
View File
@@ -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>