89 lines
2.9 KiB
TypeScript
89 lines
2.9 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Alert, Pressable, StyleSheet, Text } from 'react-native';
|
|
import { useLocalSearchParams, 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 { CODE_LENGTH, CodeField } from '@/components/CodeField';
|
|
import { colors, fontSize, spacing } from '@/theme';
|
|
|
|
const MIN_PASSWORD = 8;
|
|
|
|
export default function ResetPasswordScreen() {
|
|
const { email } = useLocalSearchParams<{ email: string }>();
|
|
const router = useRouter();
|
|
const t = useT();
|
|
|
|
const [code, setCode] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [showPass, setShowPass] = useState(false);
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
async function onSubmit() {
|
|
if (code.length < CODE_LENGTH) return setError(t('verify.invalid'));
|
|
if (password.length < MIN_PASSWORD) {
|
|
return setError(t('register.shortPassword', { count: MIN_PASSWORD }));
|
|
}
|
|
|
|
setError(null);
|
|
setLoading(true);
|
|
try {
|
|
await api.auth.resetPassword(String(email), code, password);
|
|
// Every session was revoked server-side, so signing in again is the only
|
|
// way forward.
|
|
Alert.alert(t('reset.doneTitle'), t('reset.doneBody'), [
|
|
{ text: t('login.signIn'), onPress: () => router.replace('/login') },
|
|
]);
|
|
} catch (e: any) {
|
|
setError(e?.code === 'code_expired' ? t('verify.expired') : t('verify.invalid'));
|
|
setCode('');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<AuthShell
|
|
title={t('reset.title')}
|
|
subtitle={t('verify.subtitle', { email: String(email ?? '') })}
|
|
back
|
|
error={error}
|
|
>
|
|
<Field label={t('verify.code')}>
|
|
<CodeField value={code} onChange={setCode} autoFocus />
|
|
</Field>
|
|
|
|
<Field label={t('reset.newPassword')}>
|
|
<TextField
|
|
icon="lock-closed-outline"
|
|
value={password}
|
|
onChangeText={setPassword}
|
|
placeholder={t('register.passwordHint', { count: MIN_PASSWORD })}
|
|
secureTextEntry={!showPass}
|
|
autoCapitalize="none"
|
|
textContentType="newPassword"
|
|
/>
|
|
<Pressable onPress={() => setShowPass((v) => !v)} style={styles.showPass} hitSlop={8}>
|
|
<Text style={styles.link}>{showPass ? t('login.hide') : t('login.show')}</Text>
|
|
</Pressable>
|
|
</Field>
|
|
|
|
<Button
|
|
title={t('reset.submit')}
|
|
size="lg"
|
|
block
|
|
loading={loading}
|
|
onPress={onSubmit}
|
|
style={{ marginTop: spacing[2] }}
|
|
/>
|
|
</AuthShell>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
showPass: { position: 'absolute', right: 14, top: 40 },
|
|
link: { color: colors.teal700, fontWeight: '600', fontSize: fontSize.sm },
|
|
});
|