recover password feature

2026-05-26 11:36:09 +01:00
parent b427fb0f85
commit b48f7783c9
12 changed files with 527 additions and 97 deletions
--- a/app/(auth)/recover/reset.tsx
+++ b/app/(auth)/recover/reset.tsx
@@ -0,0 +1,166 @@
+import { RecoverScreenLayout } from '@/assets/components/auth/RecoverScreenLayout';
+import { LoadingSpinner } from '@/assets/components/LoadingSpinner';
+import { resetPassword } from '@/assets/services/passwordRecovery';
+import styles from '@/styles/screens/auth/recover.styles';
+import { Ionicons } from '@expo/vector-icons';
+import { router, type Href, useLocalSearchParams } from 'expo-router';
+import { useState } from 'react';
+import { Image, Modal, Pressable, Text, TextInput, View } from 'react-native';
+
+export default function RecoverResetScreen() {
+  const { email, token } = useLocalSearchParams<{ email?: string; token?: string }>();
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [showSuccessModal, setShowSuccessModal] = useState(false);
+  const [successMessage, setSuccessMessage] = useState('');
+
+  const emailValue = typeof email === 'string' ? email : '';
+  const tokenValue = typeof token === 'string' ? token : '';
+
+  const handleSubmit = async () => {
+    if (!emailValue || !tokenValue) {
+      setError('Sessão inválida. Volta ao início do processo.');
+      return;
+    }
+    if (password.length < 5) {
+      setError('A palavra-passe deve ter pelo menos 5 caracteres.');
+      return;
+    }
+    if (password !== confirmPassword) {
+      setError('As palavras-passe não coincidem.');
+      return;
+    }
+
+    setError(null);
+    setIsLoading(true);
+    try {
+      const data = await resetPassword(emailValue, tokenValue, password, confirmPassword);
+      if (data.status === 200) {
+        setSuccessMessage(data.message || 'Password atualizada com sucesso.');
+        setShowSuccessModal(true);
+        return;
+      }
+      setError(data.message || 'Não foi possível atualizar a palavra-passe.');
+    } catch {
+      setError('Falha ao contactar o servidor. Tenta novamente.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  if (!emailValue || !tokenValue) {
+    return (
+      <RecoverScreenLayout
+        title="Nova palavra-passe"
+        subtitle="Não foi possível continuar. Volta ao passo anterior.">
+        <Text style={styles.errorText}>Dados em falta.</Text>
+        <Pressable style={styles.actionButton} onPress={() => router.replace('/recover' as Href)}>
+          <Text style={styles.actionButtonText}>Voltar</Text>
+        </Pressable>
+      </RecoverScreenLayout>
+    );
+  }
+
+  return (
+    <>
+      <RecoverScreenLayout
+        title="Nova palavra-passe"
+        subtitle="Define a tua nova palavra-passe.">
+        <Text style={styles.label}>
+          Nova palavra-passe<Text style={styles.required}>*</Text>
+        </Text>
+        <View style={styles.passwordWrapper}>
+          <TextInput
+            value={password}
+            onChangeText={setPassword}
+            placeholder="Palavra-passe"
+            placeholderTextColor="#9AA0A6"
+            secureTextEntry={!showPassword}
+            style={styles.passwordInput}
+            editable={!isLoading}
+          />
+          <Pressable onPress={() => setShowPassword((p) => !p)} hitSlop={8}>
+            <Ionicons
+              name={showPassword ? 'eye-off-outline' : 'eye-outline'}
+              size={20}
+              style={styles.eyeIcon}
+            />
+          </Pressable>
+        </View>
+
+        <Text style={styles.label}>
+          Confirmar palavra-passe<Text style={styles.required}>*</Text>
+        </Text>
+        <View style={styles.passwordWrapper}>
+          <TextInput
+            value={confirmPassword}
+            onChangeText={setConfirmPassword}
+            placeholder="Confirmar palavra-passe"
+            placeholderTextColor="#9AA0A6"
+            secureTextEntry={!showConfirmPassword}
+            style={styles.passwordInput}
+            editable={!isLoading}
+          />
+          <Pressable onPress={() => setShowConfirmPassword((p) => !p)} hitSlop={8}>
+            <Ionicons
+              name={showConfirmPassword ? 'eye-off-outline' : 'eye-outline'}
+              size={20}
+              style={styles.eyeIcon}
+            />
+          </Pressable>
+        </View>
+
+        {!!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}>Guardar palavra-passe</Text>
+              <Image source={require('@/assets/icons/seta-up.png')} style={styles.actionButtonIcon} />
+            </>
+          )}
+        </Pressable>
+
+        <Pressable
+          onPress={() =>
+            router.replace({
+              pathname: '/recover/confirm',
+              params: { email: emailValue },
+            } as Href)
+          }
+          disabled={isLoading}>
+          <Text style={styles.backLink}>Voltar</Text>
+        </Pressable>
+      </RecoverScreenLayout>
+
+      <Modal visible={showSuccessModal} animationType="fade" transparent>
+        <View style={styles.modalOverlay}>
+          <View style={styles.modalCard}>
+            <View style={styles.modalIconCircle}>
+              <Ionicons name="checkmark" size={22} style={styles.modalIcon} />
+            </View>
+            <Text style={styles.modalTitle}>Palavra-passe atualizada</Text>
+            <Text style={styles.modalMessage}>{successMessage}</Text>
+            <Pressable
+              style={styles.modalCloseButton}
+              onPress={() => {
+                setShowSuccessModal(false);
+                router.replace('/login' as Href);
+              }}>
+              <Text style={styles.modalCloseText}>Ir para o Login</Text>
+            </Pressable>
+          </View>
+        </View>
+      </Modal>
+    </>
+  );
+}