107 lines
3.5 KiB
TypeScript
107 lines
3.5 KiB
TypeScript
import { RecoverScreenLayout } from '@/assets/components/auth/RecoverScreenLayout';
|
|
import { LoadingSpinner } from '@/assets/components/LoadingSpinner';
|
|
import { confirmRecoveryToken } from '@/assets/services/passwordRecovery';
|
|
import styles from '@/styles/screens/auth/recover.styles';
|
|
import { router, type Href, useLocalSearchParams } from 'expo-router';
|
|
import { useState } from 'react';
|
|
import { Image, Pressable, Text, TextInput } from 'react-native';
|
|
|
|
export default function RecoverConfirmScreen() {
|
|
const { email, message } = useLocalSearchParams<{ email?: string; message?: string }>();
|
|
const [token, setToken] = useState('');
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
const emailValue = typeof email === 'string' ? email : '';
|
|
|
|
const handleTokenChange = (text: string) => {
|
|
setToken(text.replace(/\D/g, '').slice(0, 6));
|
|
};
|
|
|
|
const handleSubmit = async () => {
|
|
if (!emailValue) {
|
|
setError('Sessão inválida. Volta ao início do processo.');
|
|
return;
|
|
}
|
|
if (token.length !== 6) {
|
|
setError('Introduz o código de 6 dígitos recebido por email.');
|
|
return;
|
|
}
|
|
|
|
setError(null);
|
|
setIsLoading(true);
|
|
try {
|
|
const data = await confirmRecoveryToken(emailValue, token);
|
|
if (data.status === 200) {
|
|
router.push({
|
|
pathname: '/recover/reset',
|
|
params: { email: emailValue, token },
|
|
} as Href);
|
|
return;
|
|
}
|
|
setError(data.message || 'Código inválido ou expirado.');
|
|
} catch {
|
|
setError('Falha ao contactar o servidor. Tenta novamente.');
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
if (!emailValue) {
|
|
return (
|
|
<RecoverScreenLayout
|
|
title="Código de verificação"
|
|
subtitle="Não foi possível continuar. Volta ao passo anterior.">
|
|
<Text style={styles.errorText}>Email em falta.</Text>
|
|
<Pressable style={styles.actionButton} onPress={() => router.replace('/recover' as Href)}>
|
|
<Text style={styles.actionButtonText}>Voltar</Text>
|
|
</Pressable>
|
|
</RecoverScreenLayout>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<RecoverScreenLayout
|
|
title="Código de verificação"
|
|
subtitle={
|
|
message
|
|
? message
|
|
: `Introduz o código de 6 dígitos enviado para ${emailValue}.`
|
|
}>
|
|
<Text style={styles.label}>
|
|
Código<Text style={styles.required}>*</Text>
|
|
</Text>
|
|
<TextInput
|
|
value={token}
|
|
onChangeText={handleTokenChange}
|
|
placeholder="000000"
|
|
placeholderTextColor="#9AA0A6"
|
|
keyboardType="number-pad"
|
|
maxLength={6}
|
|
style={[styles.input, { letterSpacing: 8, textAlign: 'center', fontSize: 22 }]}
|
|
editable={!isLoading}
|
|
/>
|
|
|
|
{!!error && <Text style={styles.errorText}>{error}</Text>}
|
|
|
|
<Pressable
|
|
style={[styles.actionButton, isLoading && styles.actionButtonDisabled]}
|
|
onPress={handleSubmit}
|
|
disabled={isLoading}>
|
|
{isLoading ? (
|
|
<LoadingSpinner size="small" />
|
|
) : (
|
|
<>
|
|
<Text style={styles.actionButtonText}>Validar código</Text>
|
|
<Image source={require('@/assets/icons/seta-up.png')} style={styles.actionButtonIcon} />
|
|
</>
|
|
)}
|
|
</Pressable>
|
|
|
|
<Pressable onPress={() => router.replace('/recover' as Href)} disabled={isLoading}>
|
|
<Text style={styles.backLink}>Voltar</Text>
|
|
</Pressable>
|
|
</RecoverScreenLayout>
|
|
);
|
|
}
|