recover password feature

app/(auth)/recover/confirm.tsx

@@ -0,0 +1,106 @@
+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>
+  );
+}