recover password feature

app/(auth)/recover/index.tsx

@@ -1,106 +1,86 @@
-import { Ionicons } from '@expo/vector-icons';
-import { router, type Href } from 'expo-router';
-import React, { useState } from 'react';
-import {
-  Image,
-  ImageBackground,
-  KeyboardAvoidingView,
-  Modal,
-  Platform,
-  Pressable,
-  ScrollView,
-  Text,
-  TextInput,
-  View,
-  StatusBar,
-} from 'react-native';
+import { RecoverScreenLayout } from '@/assets/components/auth/RecoverScreenLayout';
+import { LoadingSpinner } from '@/assets/components/LoadingSpinner';
+import { recoverPassword } from '@/assets/services/passwordRecovery';
 import styles from '@/styles/screens/auth/recover.styles';
+import { router, type Href } from 'expo-router';
+import { useState } from 'react';
+import { Image, Pressable, Text, TextInput } from 'react-native';
 
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 
-export default function Recover() {
+export default function RecoverEmailScreen() {
   const [email, setEmail] = useState('');
-  const [localError, setLocalError] = useState<string | null>(null);
-  const [showSuccessModal, setShowSuccessModal] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
 
-  const handleRecover = () => {
-    if (!email.trim()) {
-      setLocalError('Indica o teu email para continuar.');
+  const handleSubmit = async () => {
+    const trimmed = email.trim();
+    if (!trimmed) {
+      setError('Indica o teu email para continuar.');
+      return;
+    }
+    if (!EMAIL_REGEX.test(trimmed)) {
+      setError('Introduz um email válido.');
       return;
     }
 
-    setLocalError(null);
-    setShowSuccessModal(true);
+    setError(null);
+    setIsLoading(true);
+    try {
+      const data = await recoverPassword(trimmed);
+      if (data.status === 200) {
+        router.push({
+          pathname: '/recover/confirm',
+          params: { email: trimmed, message: data.message ?? '' },
+        } as Href);
+        return;
+      }
+      setError(data.message || 'Não foi possível enviar o código.');
+    } catch {
+      setError('Falha ao contactar o servidor. Tenta novamente.');
+    } finally {
+      setIsLoading(false);
+    }
   };
 
   return (
-    <KeyboardAvoidingView
-      style={styles.container}
-      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-      keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : 20}>
-      <StatusBar barStyle="light-content" />
-      <ScrollView
-        contentContainerStyle={styles.scrollContent}
-        keyboardShouldPersistTaps="handled"
-        showsVerticalScrollIndicator={false}
-        bounces={false}>
-      <ImageBackground
-        source={require('@/assets/images/banner-login.png')}
-        style={styles.hero}
-        imageStyle={styles.heroImage}>
-        <View style={styles.overlay} />
-        <View style={styles.heroContent}>
-          <Image source={require('@/assets/icons/logotipo-branco.png')} style={styles.logo} resizeMode="contain" />
-          <Text style={styles.title}>Repor palavra-passe</Text>
-          <Text style={styles.subtitle}>Indica o teu email para receberes o link de recuperacao.</Text>
-        </View>
-      </ImageBackground>
+    <RecoverScreenLayout
+      title="Repor palavra-passe"
+      subtitle="Indica o teu email para receberes um código de 6 dígitos. O código expira ao fim de 1 hora.">
+      <Text style={styles.label}>
+        Email<Text style={styles.required}>*</Text>
+      </Text>
+      <TextInput
+        value={email}
+        onChangeText={setEmail}
+        placeholder="hello@domain.pt"
+        placeholderTextColor="#9AA0A6"
+        autoCapitalize="none"
+        keyboardType="email-address"
+        autoComplete="email"
+        style={styles.input}
+        editable={!isLoading}
+      />
 
-      <View style={styles.formCard}>
-        <Text style={styles.label}>
-          Email<Text style={styles.required}>*</Text>
-        </Text>
-        <TextInput
-          value={email}
-          onChangeText={setEmail}
-          placeholder="hello@domain.pt"
-          placeholderTextColor="#9AA0A6"
-          autoCapitalize="none"
-          keyboardType="email-address"
-          style={styles.input}
-        />
+      {!!error && <Text style={styles.errorText}>{error}</Text>}
 
-        {!!localError && <Text style={styles.errorText}>{localError}</Text>}
+      <Pressable
+        style={[styles.actionButton, isLoading && styles.actionButtonDisabled]}
+        onPress={handleSubmit}
+        disabled={isLoading}>
+        {isLoading ? (
+          <LoadingSpinner size="small" />
+        ) : (
+          <>
+            <Text style={styles.actionButtonText}>Enviar código</Text>
+            <Image source={require('@/assets/icons/seta-up.png')} style={styles.actionButtonIcon} />
+          </>
+        )}
+      </Pressable>
 
-        <Pressable style={styles.actionButton} onPress={handleRecover}>
-          <Text style={styles.actionButtonText}>Recuperar Palavra-passe</Text>
-          <Image source={require('@/assets/icons/seta-up.png')} style={styles.actionButtonIcon} />
-        </Pressable>
-
-        <Pressable onPress={() => router.replace('/login' as Href)}>
-          <Text style={styles.backLink}>Voltar ao Login</Text>
-        </Pressable>
-      </View>
-      </ScrollView>
-
-      <Modal visible={showSuccessModal} animationType="fade" transparent>
-        <View style={styles.modalOverlay}>
-          <View style={styles.modalCard}>
-            <View style={styles.modalIconCircle}>
-              <Ionicons name="mail-open-outline" size={22} style={styles.modalIcon} />
-            </View>
-            <Text style={styles.modalTitle}>Verifica o teu email</Text>
-            <Text style={styles.modalMessage}>Enviamos-te as instrucoes para recuperares a palavra-passe.</Text>
-            <Pressable
-              style={styles.modalCloseButton}
-              onPress={() => {
-                setShowSuccessModal(false);
-                router.replace('/login' as Href);
-              }}>
-              <Text style={styles.modalCloseText}>Ok</Text>
-            </Pressable>
-          </View>
-        </View>
-      </Modal>
-    </KeyboardAvoidingView>
+      <Pressable onPress={() => router.replace('/login' as Href)} disabled={isLoading}>
+        <Text style={styles.backLink}>Voltar ao Login</Text>
+      </Pressable>
+    </RecoverScreenLayout>
   );
-}
+}