110 lines
3.7 KiB
TypeScript
110 lines
3.7 KiB
TypeScript
import { Ionicons } from '@expo/vector-icons';
|
|
import React, { useState } from 'react';
|
|
import {
|
|
Image,
|
|
ImageBackground,
|
|
KeyboardAvoidingView,
|
|
Platform,
|
|
Pressable,
|
|
ScrollView,
|
|
Text,
|
|
TextInput,
|
|
View,
|
|
StatusBar,
|
|
} from 'react-native';
|
|
import styles from '@/styles/screens/auth/login.styles';
|
|
import { useAuth } from '@/assets/contexts/useAuth';
|
|
import { router, type Href } from 'expo-router';
|
|
|
|
export default function Login() {
|
|
const [email, setEmail] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
const [localError, setLocalError] = useState<string | null>(null);
|
|
const { login, isLoading, error } = useAuth();
|
|
|
|
const handleLogin = async () => {
|
|
if (!email.trim() || !password.trim()) {
|
|
setLocalError('Preenche email e palavra-passe.');
|
|
return;
|
|
}
|
|
|
|
setLocalError(null);
|
|
|
|
try {
|
|
await login(email.trim(), password);
|
|
router.replace('/home' as Href);
|
|
} catch {
|
|
// O erro já é guardado no contexto; evitamos uncaught promise no ecrã.
|
|
}
|
|
};
|
|
|
|
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}>Login</Text>
|
|
<Text style={styles.subtitle}>Acede às tuas reservas, documentos e informaçoes de viagem.</Text>
|
|
</View>
|
|
</ImageBackground>
|
|
|
|
<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}
|
|
/>
|
|
|
|
<Text style={styles.label}>
|
|
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}
|
|
/>
|
|
<Pressable onPress={() => setShowPassword((prev) => !prev)} hitSlop={8}>
|
|
<Ionicons name={showPassword ? 'eye-off-outline' : 'eye-outline'} size={20} style={styles.eyeIcon} />
|
|
</Pressable>
|
|
</View>
|
|
|
|
<Pressable onPress={() => router.push('/recover' as Href)}>
|
|
<Text style={styles.forgot}>Esqueci-me da palavra-passe</Text>
|
|
</Pressable>
|
|
|
|
{!!(localError || error) && <Text style={styles.errorText}>{localError || error}</Text>}
|
|
|
|
<Pressable style={styles.loginButton} onPress={handleLogin} disabled={isLoading}>
|
|
<Text style={styles.loginButtonText}>Entrar</Text>
|
|
<Image source={require('@/assets/icons/seta-up.png')} style={styles.loginButtonIcon} />
|
|
</Pressable>
|
|
</View>
|
|
</ScrollView>
|
|
</KeyboardAvoidingView>
|
|
);
|
|
} |