recover password feature
This commit is contained in:
106
app/(auth)/recover/confirm.tsx
Normal file
106
app/(auth)/recover/confirm.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
166
app/(auth)/recover/reset.tsx
Normal file
166
app/(auth)/recover/reset.tsx
Normal file
@@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -79,6 +79,7 @@ export default function Home() {
|
||||
|
||||
if (!token) {
|
||||
setReservas([]);
|
||||
setIsFromCache(false);
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -127,6 +128,9 @@ export default function Home() {
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setReservas([]);
|
||||
setIsFromCache(false);
|
||||
setIsLoading(true);
|
||||
fetchReservas();
|
||||
}, [token]);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user