63 lines
1.8 KiB
TypeScript
63 lines
1.8 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { useRouter } from 'expo-router';
|
|
import { api } from '@/api';
|
|
import { useT } from '@/i18n';
|
|
import { AuthShell } from '@/components/AuthShell';
|
|
import { Button, Field, TextField } from '@/components/ui';
|
|
import { spacing } from '@/theme';
|
|
|
|
export default function ForgotPasswordScreen() {
|
|
const router = useRouter();
|
|
const t = useT();
|
|
|
|
const [email, setEmail] = useState('');
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
async function onSubmit() {
|
|
const mail = email.trim();
|
|
if (!mail || !mail.includes('@')) return setError(t('register.badEmail'));
|
|
|
|
setError(null);
|
|
setLoading(true);
|
|
try {
|
|
await api.auth.forgotPassword(mail);
|
|
} catch (e: any) {
|
|
setError(e?.message ?? t('common.tryAgain'));
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
setLoading(false);
|
|
// The endpoint succeeds even for unknown addresses, and the screen must
|
|
// not reveal whether the account exists.
|
|
router.replace(`/reset?email=${encodeURIComponent(mail)}`);
|
|
}
|
|
|
|
return (
|
|
<AuthShell title={t('forgot.title')} subtitle={t('forgot.subtitle')} back error={error}>
|
|
<Field label={t('login.email')}>
|
|
<TextField
|
|
icon="mail-outline"
|
|
value={email}
|
|
onChangeText={setEmail}
|
|
placeholder={t('login.emailPlaceholder')}
|
|
autoCapitalize="none"
|
|
keyboardType="email-address"
|
|
autoComplete="email"
|
|
textContentType="emailAddress"
|
|
autoFocus
|
|
/>
|
|
</Field>
|
|
|
|
<Button
|
|
title={t('forgot.submit')}
|
|
size="lg"
|
|
block
|
|
loading={loading}
|
|
onPress={onSubmit}
|
|
style={{ marginTop: spacing[2] }}
|
|
/>
|
|
</AuthShell>
|
|
);
|
|
}
|