Success

Step 4. The password is reset; one button carries on to log in.

Last updated

Open page
Show code
---
/**
 * Success: Step 4. The password is reset; one button carries on to log in.
 *
 * @page forgot-password
 */
import { CircleCheck, ArrowLeft } from '@lucide/astro'
import AuthShell from '@/components/apogee/sections/AuthShell/AuthShell.astro'
import FeaturedIcon from '@/components/apogee/FeaturedIcon/FeaturedIcon.astro'
import Button from '@/components/apogee/Button/Button.astro'
---

<AuthShell heading="Password reset" description="Your password is reset. Log in with your new password." pattern="grid">
  <FeaturedIcon slot="brand" theme="outline" color="positive" size="large"><CircleCheck /></FeaturedIcon>

  <Button href="#" size="large" fullWidth>Continue</Button>

  <Button slot="footer" href="#" variant="ghost" color="neutral">
    <ArrowLeft slot="start" class="rtl:-scale-x-100" aria-hidden="true" />
    Back to log in
  </Button>
</AuthShell>

Add

npx @ava-ui/apogee add forgot-password/success

This copies the page to src/components/apogee/pages/forgot-password/ with everything it uses: AuthShell, Button, FeaturedIcon. Render it from one of your routes, or use Copy code above.

Accessibility

  • The page heading is the h1; the “Back to log in” arrow flips under right-to-left text.
  • The check icon is decoration; the heading says the same thing in words.

Related

Auth shellThe frame of a log in, sign up or recovery page; brand mark, heading and your form, centred, in a card, beside a panel, or beside a step sidebar.
Featured iconAn icon in a tinted tile, the glyph that leads an empty state, an alert, a stat or a feature card.