Forgot Password

Two-step password reset flow: request step (email entry) and confirmation step (success message).

Components used

Button · Input · Card

Preview · Forgot Password

Code

HTML · @primus/ui-core

<div style="min-height:360px;display:flex;align-items:center;justify-content:center;background:var(--muted);width:100%;padding:2rem;box-sizing:border-box;gap:1.5rem;flex-wrap:wrap">

  <!-- Step 1: Request -->
  <div class="card" style="width:100%;max-width:380px;padding:2.5rem">
    <div style="margin-bottom:1.75rem">
      <h2 style="margin:0 0 0.5rem;font-size:1.25rem;font-weight:700">Reset your password</h2>
      <p style="margin:0;font-size:0.875rem;color:var(--muted-foreground)">Enter the email address linked to your account and we will send you a reset link.</p>
    </div>
    <div class="vstack" style="gap:1rem">
      <div data-field>
        <label for="reset-email">Email address</label>
        <input id="reset-email" type="email" placeholder="name@company.com" />
      </div>
      <button style="width:100%;justify-content:center">Send reset link</button>
      <a href="#" style="text-align:center;font-size:0.875rem;color:var(--muted-foreground)">Back to sign in</a>
    </div>
  </div>

  <!-- Step 2: Confirmation -->
  <div class="card" style="width:100%;max-width:380px;padding:2.5rem;text-align:center">
    <div style="width:52px;height:52px;border-radius:50%;background:color-mix(in srgb,var(--success) 12%,transparent);display:flex;align-items:center;justify-content:center;margin:0 auto 1.25rem">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" style="color:var(--success)"><polyline points="20 6 9 17 4 12"/></svg>
    </div>
    <h2 style="margin:0 0 0.5rem;font-size:1.25rem;font-weight:700">Check your email</h2>
    <p style="margin:0 0 1.5rem;font-size:0.875rem;color:var(--muted-foreground)">We sent a reset link to <strong>name@company.com</strong>. The link expires in 15 minutes.</p>
    <button class="outline" style="width:100%;justify-content:center">Resend email</button>
    <a href="#" style="display:block;margin-top:1rem;font-size:0.875rem;color:var(--muted-foreground)">Back to sign in</a>
  </div>

</div>

React

import { PrimusInput, PrimusButton } from 'primus-react-ui';
import { useState } from 'react';

export function ForgotPasswordPage() {
  const [email, setEmail]   = useState('');
  const [sent, setSent]     = useState(false);
  const [loading, setLoading] = useState(false);

  const handleSubmit = async () => {
    setLoading(true);
    await requestPasswordReset(email);
    setLoading(false);
    setSent(true);
  };

  if (sent) {
    return (
      <div className="auth-shell">
        <div className="card" style={{ maxWidth: 380, padding: '2.5rem', textAlign: 'center' }}>
          <h2>Check your email</h2>
          <p>We sent a reset link to <strong>{email}</strong>. The link expires in 15 minutes.</p>
          <PrimusButton variant="outline" style={{ width: '100%' }}
            onClick={handleSubmit}>
            Resend email
          </PrimusButton>
        </div>
      </div>
    );
  }

  return (
    <div className="auth-shell">
      <div className="card" style={{ maxWidth: 380, padding: '2.5rem' }}>
        <h2>Reset your password</h2>
        <p>Enter the email address linked to your account.</p>
        <PrimusInput label="Email address" type="email"
          value={email} onChange={setEmail}
          placeholder="name@company.com" />
        <PrimusButton style={{ width: '100%' }}
          loading={loading} onClick={handleSubmit}>
          Send reset link
        </PrimusButton>
      </div>
    </div>
  );
}

Angular

<div class="auth-shell">
  <div class="card auth-card" *ngIf="!sent">
    <h2>Reset your password</h2>
    <p>Enter the email address linked to your account.</p>
    <primus-input label="Email address" type="email"
      [(value)]="email" placeholder="name@company.com">
    </primus-input>
    <primus-button style="width:100%"
      [loading]="loading" (clicked)="onSubmit()">
      Send reset link
    </primus-button>
  </div>

  <div class="card auth-card" *ngIf="sent" style="text-align:center">
    <h2>Check your email</h2>
    <p>We sent a reset link to <strong>{{ email }}</strong>.</p>
    <primus-button variant="outline" style="width:100%"
      (clicked)="onSubmit()">
      Resend email
    </primus-button>
  </div>
</div>