UI Components Easy

Forgot Password

Forgot password flow with email input, animated success state, resend countdown timer, and back-to-login link. No dependencies.

Open in Lab

css vanilla-js

Targets: JS HTML

Code

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg: #0f1117;
  --surface: #16181f;
  --surface2: #1e2130;
  --border: #2a2d3a;
  --text: #e2e8f0;
  --text-muted: #64748b;
  --accent: #818cf8;
  --accent-hover: #a5b4fc;
  --red: #f87171;
  --green: #34d399;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.auth-center {
  width: 100%;
  display: grid;
  place-items: center;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px 36px;
}

.auth-logo {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--accent);
  text-decoration: none;
  display: block;
  margin-bottom: 28px;
}

.step-dots {
  display: flex;
  gap: 6px;
  margin-bottom: 24px;
}

.step-dot {
  width: 28px;
  height: 4px;
  border-radius: 2px;
  background: var(--surface2);
  transition: background .3s;
}

.step-dot.active {
  background: var(--accent);
}

.auth-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(129, 140, 248, 0.1);
  border: 1px solid rgba(129, 140, 248, 0.2);
  display: grid;
  place-items: center;
  color: var(--accent);
  margin-bottom: 20px;
}

.auth-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.auth-subtitle {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 24px;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.field-label {
  font-size: 0.82rem;
  font-weight: 600;
}

.field-input {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text);
  font-size: 0.875rem;
  padding: 10px 14px;
  outline: none;
  font-family: inherit;
  transition: border-color .15s;
}

.field-input::placeholder {
  color: var(--text-muted);
}

.field-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.1);
}

.field-input.invalid {
  border-color: var(--red);
}

.field-error {
  font-size: 0.78rem;
  color: var(--red);
}

.auth-submit {
  width: 100%;
  background: var(--accent);
  border: none;
  border-radius: 9px;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 11px;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background .15s, opacity .15s;
  text-align: center;
  text-decoration: none;
}

.auth-submit:hover {
  background: var(--accent-hover);
}

.auth-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.btn-spinner svg {
  animation: spin .8s linear infinite;
}

.auth-switch {
  margin-top: 16px;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.auth-switch-link {
  color: var(--accent);
  text-decoration: none;
}

.auth-switch--small {
  font-size: 0.8rem;
  margin-top: 10px;
}

.link-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: inherit;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}

.link-btn:hover {
  text-decoration: underline;
}

.link-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sent-email {
  color: var(--text);
}

const step1 = document.getElementById("step1");
const step2 = document.getElementById("step2");
const form = document.getElementById("forgotForm");
const emailEl = document.getElementById("email");
const sendBtn = document.getElementById("sendBtn");
const sentEmailEl = document.getElementById("sentEmail");
const resendBtn = document.getElementById("resendBtn");
const changeEmail = document.getElementById("changeEmail");
const dot1 = document.getElementById("dot1");
const dot2 = document.getElementById("dot2");

form?.addEventListener("submit", async (e) => {
  e.preventDefault();
  const email = emailEl.value.trim();
  const errEl = document.getElementById("email-error");

  if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
    errEl.textContent = "Enter a valid email address.";
    errEl.hidden = false;
    emailEl.classList.add("invalid");
    return;
  }
  errEl.hidden = true;
  emailEl.classList.remove("invalid");

  sendBtn.disabled = true;
  sendBtn.querySelector(".btn-text").hidden = true;
  sendBtn.querySelector(".btn-spinner").hidden = false;
  await new Promise((r) => setTimeout(r, 1200));

  // Show step 2
  sentEmailEl.textContent = email;
  step1.hidden = true;
  step2.hidden = false;
  dot1.classList.remove("active");
  dot2.classList.add("active");
  startCountdown(60);
});

function startCountdown(secs) {
  let remaining = secs;
  const countEl = document.getElementById("countdown");
  resendBtn.disabled = true;

  const timer = setInterval(() => {
    remaining--;
    countEl.textContent = remaining;
    if (remaining <= 0) {
      clearInterval(timer);
      resendBtn.disabled = false;
      resendBtn.textContent = "Resend email";
    }
  }, 1000);
}

resendBtn?.addEventListener("click", () => {
  resendBtn.textContent = "Resent!";
  resendBtn.disabled = true;
  setTimeout(() => startCountdown(60), 1000);
});

changeEmail?.addEventListener("click", () => {
  step2.hidden = true;
  step1.hidden = false;
  dot2.classList.remove("active");
  dot1.classList.add("active");
  sendBtn.disabled = false;
  sendBtn.querySelector(".btn-text").hidden = false;
  sendBtn.querySelector(".btn-spinner").hidden = true;
  emailEl.focus();
});

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Forgot Password</title>
    <link rel="stylesheet" href="style.css" />
</head>

<body>

    <div class="auth-center">

        <div class="auth-card">

            <!-- Logo -->
            <a href="#" class="auth-logo">✦ StealThis</a>

            <!-- Step indicator -->
            <div class="step-dots" aria-hidden="true">
                <span class="step-dot active" id="dot1"></span>
                <span class="step-dot" id="dot2"></span>
            </div>

            <!-- ── Step 1: Enter email ── -->
            <div id="step1">
                <div class="auth-icon">
                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                        stroke-width="1.8">
                        <rect x="2" y="4" width="20" height="16" rx="2" />
                        <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
                    </svg>
                </div>

                <h1 class="auth-title">Forgot password?</h1>
                <p class="auth-subtitle">Enter your email and we'll send you a reset link.</p>

                <form id="forgotForm" class="auth-form" novalidate>
                    <div class="field">
                        <label for="email" class="field-label">Email address</label>
                        <input type="email" id="email" class="field-input" placeholder="you@example.com"
                            autocomplete="email" />
                        <p class="field-error" id="email-error" role="alert" hidden></p>
                    </div>
                    <button type="submit" class="auth-submit" id="sendBtn">
                        <span class="btn-text">Send reset link</span>
                        <span class="btn-spinner" hidden>
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                stroke-width="2.5">
                                <path d="M21 12a9 9 0 1 1-6.219-8.56" />
                            </svg>
                        </span>
                    </button>
                </form>

                <p class="auth-switch"><a href="#" class="auth-switch-link">← Back to sign in</a></p>
            </div>

            <!-- ── Step 2: Success ── -->
            <div id="step2" hidden>
                <div class="auth-icon auth-icon--success">
                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                        stroke-width="1.8">
                        <path d="m22 2-7 20-4-9-9-4Z" />
                        <path d="M22 2 11 13" />
                    </svg>
                </div>

                <h1 class="auth-title">Check your email</h1>
                <p class="auth-subtitle">
                    We've sent a password reset link to<br />
                    <strong id="sentEmail" class="sent-email"></strong>
                </p>

                <button class="auth-submit" id="resendBtn" disabled>
                    Resend email (<span id="countdown">60</span>s)
                </button>

                <p class="auth-switch auth-switch--small">
                    Wrong email? <button type="button" class="link-btn" id="changeEmail">Change email address</button>
                </p>
                <p class="auth-switch"><a href="#" class="auth-switch-link">← Back to sign in</a></p>
            </div>

        </div>
    </div>

    <script src="script.js"></script>
</body>

</html>

Forgot Password

A clean password-recovery flow: enter email, receive animated “email sent” confirmation, with a 60-second resend countdown and back-to-login link.

Features

Email input with validation
Submit transitions to a success state with animated envelope SVG
“Resend email” link with 60-second countdown timer that re-enables the button
Edit email link to go back to input state
Back to login link throughout
Progress indicator: Step 1 → Step 2 breadcrumb dots

How it works

On submit, form panel slides out and success panel slides in with CSS class toggle
startCountdown(60) decrements a counter via setInterval, updates the resend button label, and re-enables at 0
“Change email” button resets to input state so the user can correct their address