Source Code

<div class="prf-card" id="prfCard">
  <div class="prf-inner" id="prfInner"></div>
</div>

Learn Coding Visually

Learn to code with interactive, live-preview playgrounds — HTML, CSS, JavaScript, React & more.

See all ->
HTML Playground42 lessons · Click-based · Live previewCSS PlaygroundLearn CSS with a live editorJavaScript Playground60 lessons · DOM · Async · CanvasReact PlaygroundLearn React with a live code editorGSAP PlaygroundLearn GSAP animation interactivelySVG Playground44 lessons · shapes · paths · animationSCSS Playground45 lessons · Sass modules · tokensTailwind PlaygroundLearn Tailwind CSS with a live editorBootstrap 5 Playground50 lessons · live preview

Password Reset Flow Card — Free HTML CSS JS Snippet

Password Reset Flow Card · Cards · Plain HTML, CSS & JS · Live preview

TagsSVGAuthentication

What's included

Features

Single card container whose inner content is swapped between four states via innerHTML
Email format validation with inline error messaging before advancing to the confirmation step
Resend-email cooldown timer (20s) implemented with setInterval, disabling the resend link until it expires
New password step validates both minimum length (8+ characters) and password-confirmation match
Clear success state with a confirmation icon and a way to return to the start of the flow
Fresh event listeners attached on every re-render, so no stale handlers accumulate across steps
Fully self-contained vanilla JS state machine — no routing or page reloads involved
Accessible labeled inputs for every form field in the flow

About this UI Snippet

Password Reset Flow Card — Multi-Step Reset Password Card in One Container

Screenshot of the Password Reset Flow Card snippet rendered live

Most password reset flows are built as three separate pages, which means three separate route changes and three chances for the visual container to jump or flicker between steps. This snippet instead uses one fixed card element whose inner content is entirely replaced by JavaScript as the user moves through the flow, so the outer card frame never changes — only what's inside it does.

One container, three rendered states

renderStepOne(), renderStepTwo(), and renderStepThree() each set card.innerHTML to a different markup block and then attach their own event listeners to the buttons they just created. Because listeners are attached fresh after every re-render, there's no need to track or remove old handlers — the previous state's DOM (and its listeners) is simply discarded when innerHTML is reassigned.

Step one: email validation before advancing

The email step runs a regex check (/^[^\s@]+@[^\s@]+\.[^\s@]+$/) before calling renderStepTwo(). On failure it re-renders step one with an error message passed as an argument, rather than trying to mutate the existing DOM in place — keeping every state's render function the single place that decides what that state looks like, error included.

Step two: a real resend cooldown

The confirmation step starts a setInterval that ticks a resendCooldown counter down from 20 and disables the "Resend" link until it reaches zero, updating the button's label each second. Clicking resend while enabled just calls renderStepTwo() again, which naturally resets the cooldown and clears the previous interval first via clearInterval.

Step three: length and match validation

The new-password step checks both that the password is at least 8 characters and that the confirm field matches exactly before calling renderSuccess(), otherwise it re-renders itself with a specific error message so the user knows exactly which rule failed.

Step by step

How to Use

  1. 1
    Load the snippetClick "Password Reset Flow Card" in the sidebar to load its HTML, CSS, and JS into the editor panels. The preview updates instantly.
  2. 2
    Edit the codeModify any panel — HTML, CSS, or JS. The preview refreshes as you type. Use Reset in each panel header to restore the original.
  3. 3
    Preview on devicesClick the Mobile (375px), Tablet (768px), or Desktop buttons in the preview header to check responsiveness.
  4. 4
    Export in your formatClick "HTML" to download a standalone file, "JSX" for a React component, "Tailwind" for a React + Tailwind CSS component, "Tailwind HTML" for a standalone HTML file with Tailwind CDN, "Vue" for a Vue 3 SFC with <template>/<script setup>/<style scoped>, or "Angular" for a standalone Angular .component.ts file. "Copy all" copies the full code to clipboard.
  5. 5
    Save your versionClick "Save as", type a name, and press Enter. Your snippet saves to IndexedDB and appears in the Saved tab.

Real-world uses

Common Use Cases

Account recovery and password reset pages
A drop-in pattern for the exact multi-step flow most auth systems need.
SaaS and dashboard login screens
Keep the reset flow visually contained in one modal or card instead of separate pages.
Design systems needing a reference multi-step card
A clean example of one container swapping states instead of routing between screens.
Teaching state-driven UI without a framework
Demonstrates a simple state machine pattern using plain innerHTML re-renders.

Got questions?

Frequently Asked Questions

No — this is a self-contained front-end simulation. The "Send reset link" and "Resend" actions only transition the UI between states; wire them to your real backend endpoint to send actual emails.

renderStepTwo() starts a setInterval that decrements a resendCooldown counter every second and updates the resend button label and disabled state, clearing any previous interval first so re-entering the step never stacks multiple timers.

The new-password step requires at least 8 characters and requires the confirm-password field to exactly match, both checked in JavaScript before the success state is shown.

Yes — extend the check inside the reset button click handler in renderStepThree() with any additional regex or length rules, and pass a specific error string to renderStepThree() when they fail.