Forgot password
Step 1. The user enters their email to get a reset link.
Last updated
---
/**
* Forgot password: Step 1. The user enters their email to get a reset link.
*
* @page forgot-password
*/
import { KeyRound, ArrowLeft } from '@lucide/astro'
import AuthShell from '@/components/apogee/sections/AuthShell/AuthShell.astro'
import FeaturedIcon from '@/components/apogee/FeaturedIcon/FeaturedIcon.astro'
import Input from '@/components/apogee/Input/Input.astro'
import Button from '@/components/apogee/Button/Button.astro'
---
<AuthShell heading="Forgot password?" description="No worries, we'll send you reset instructions." pattern="grid">
<FeaturedIcon slot="brand" theme="outline" color="neutral" size="large"><KeyRound /></FeaturedIcon>
<form method="post" class="flex flex-col gap-6">
<Input label="Email" type="email" name="email" placeholder="Enter your email" autocomplete="email" required />
<Button type="submit" size="large" fullWidth>Reset password</Button>
</form>
<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>
Show codeHide code
---
/**
* Forgot password: Step 1. The user enters their email to get a reset link.
*
* @page forgot-password
*/
import { KeyRound, ArrowLeft } from '@lucide/astro'
import AuthShell from '@/components/apogee/sections/AuthShell/AuthShell.astro'
import FeaturedIcon from '@/components/apogee/FeaturedIcon/FeaturedIcon.astro'
import Input from '@/components/apogee/Input/Input.astro'
import Button from '@/components/apogee/Button/Button.astro'
---
<AuthShell heading="Forgot password?" description="No worries, we'll send you reset instructions." pattern="grid">
<FeaturedIcon slot="brand" theme="outline" color="neutral" size="large"><KeyRound /></FeaturedIcon>
<form method="post" class="flex flex-col gap-6">
<Input label="Email" type="email" name="email" placeholder="Enter your email" autocomplete="email" required />
<Button type="submit" size="large" fullWidth>Reset password</Button>
</form>
<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/forgot-passwordThis copies the page to src/components/apogee/pages/forgot-password/ with everything it uses: AuthShell, Button, FeaturedIcon, Input. 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 email field has
autocomplete="email", so the browser fills it. - Say the same thing whether or not the address has an account, so the page does not reveal who is signed up.