Check email
Step 2. The reset link is on its way, with a shortcut to the mail app and a resend link.
Last updated
---
/**
* Check email: Step 2. The reset link is on its way, with a shortcut to the mail app and a resend link.
*
* @page forgot-password
*/
import { Mail, 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'
import Link from '@/components/apogee/Link/Link.astro'
---
<AuthShell heading="Check your email" description="We sent a password reset link to mara@example.com." pattern="grid">
<FeaturedIcon slot="brand" theme="outline" color="neutral" size="large"><Mail /></FeaturedIcon>
<Button href="mailto:" size="large" fullWidth>Open email app</Button>
<div slot="footer" class="flex flex-col items-center gap-8">
<p class="text-neutral-faded">Didn't receive the email? <Link href="#" underline="hover" class="font-semibold">Click to resend</Link></p>
<Button href="#" variant="ghost" color="neutral">
<ArrowLeft slot="start" class="rtl:-scale-x-100" aria-hidden="true" />
Back to log in
</Button>
</div>
</AuthShell>
Show codeHide code
---
/**
* Check email: Step 2. The reset link is on its way, with a shortcut to the mail app and a resend link.
*
* @page forgot-password
*/
import { Mail, 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'
import Link from '@/components/apogee/Link/Link.astro'
---
<AuthShell heading="Check your email" description="We sent a password reset link to mara@example.com." pattern="grid">
<FeaturedIcon slot="brand" theme="outline" color="neutral" size="large"><Mail /></FeaturedIcon>
<Button href="mailto:" size="large" fullWidth>Open email app</Button>
<div slot="footer" class="flex flex-col items-center gap-8">
<p class="text-neutral-faded">Didn't receive the email? <Link href="#" underline="hover" class="font-semibold">Click to resend</Link></p>
<Button href="#" variant="ghost" color="neutral">
<ArrowLeft slot="start" class="rtl:-scale-x-100" aria-hidden="true" />
Back to log in
</Button>
</div>
</AuthShell>Add
npx @ava-ui/apogee add forgot-password/check-emailThis copies the page to src/components/apogee/pages/forgot-password/ with everything it uses: AuthShell, Button, FeaturedIcon, Link. 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. - “Open email app” is a
mailto:link; on a phone it opens the default mail app. - “Click to resend” is a link: point it at your resend endpoint.