123 lines
3.1 KiB
TypeScript
123 lines
3.1 KiB
TypeScript
import React, { useState } from 'react';
|
||
import { View, Text, TextInput, TouchableOpacity, StyleSheet, Alert, ActivityIndicator, SafeAreaView, KeyboardAvoidingView, Platform } from 'react-native';
|
||
import { useRouter } from 'expo-router';
|
||
import { Colors } from '../Fluxup/src/constants/theme';
|
||
|
||
export default function ForgotPasswordScreen() {
|
||
const router = useRouter();
|
||
const [email, setEmail] = useState('');
|
||
const [loading, setLoading] = useState(false);
|
||
|
||
const handleReset = () => {
|
||
if (!email) {
|
||
Alert.alert('Erro', 'Por favor insira o seu email');
|
||
return;
|
||
}
|
||
|
||
setLoading(true);
|
||
// simulação de envio de instruções
|
||
setTimeout(() => {
|
||
setLoading(false);
|
||
Alert.alert('Sucesso', 'Um email com instruções foi enviado.');
|
||
// o TypeScript não reconhece "/inicio" nas rotas tipadas; forçamos o cast
|
||
router.replace('/inicio' as any);
|
||
}, 1500);
|
||
};
|
||
|
||
return (
|
||
<SafeAreaView style={styles.safe}>
|
||
<KeyboardAvoidingView
|
||
style={styles.container}
|
||
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
||
>
|
||
<Text style={styles.title}>Fluxup</Text>
|
||
<Text style={styles.subtitle}>Recuperar palavra‑passe</Text>
|
||
|
||
<TextInput
|
||
style={styles.input}
|
||
placeholder="Email"
|
||
placeholderTextColor="#999"
|
||
keyboardType="email-address"
|
||
autoCapitalize="none"
|
||
value={email}
|
||
onChangeText={setEmail}
|
||
editable={!loading}
|
||
/>
|
||
|
||
<TouchableOpacity
|
||
style={[styles.button, loading && styles.buttonDisabled]}
|
||
onPress={handleReset}
|
||
disabled={loading}
|
||
>
|
||
{loading ? <ActivityIndicator color="#fff" /> : <Text style={styles.buttonText}>Enviar</Text>}
|
||
</TouchableOpacity>
|
||
|
||
<TouchableOpacity onPress={() => router.back()}>
|
||
<Text style={styles.linkText}>Voltar</Text>
|
||
</TouchableOpacity>
|
||
</KeyboardAvoidingView>
|
||
</SafeAreaView>
|
||
);
|
||
}
|
||
|
||
const primary = Colors.light.tint;
|
||
|
||
const styles = StyleSheet.create({
|
||
safe: {
|
||
flex: 1,
|
||
backgroundColor: Colors.light.background,
|
||
},
|
||
container: {
|
||
flex: 1,
|
||
justifyContent: 'center',
|
||
alignItems: 'center',
|
||
padding: 20,
|
||
backgroundColor: Colors.light.background,
|
||
},
|
||
title: {
|
||
fontSize: 32,
|
||
fontWeight: 'bold',
|
||
marginBottom: 8,
|
||
color: primary,
|
||
},
|
||
subtitle: {
|
||
fontSize: 16,
|
||
color: Colors.light.icon,
|
||
marginBottom: 24,
|
||
},
|
||
input: {
|
||
width: '100%',
|
||
height: 50,
|
||
borderRadius: 8,
|
||
borderWidth: 1,
|
||
borderColor: '#ddd',
|
||
paddingHorizontal: 15,
|
||
marginBottom: 15,
|
||
fontSize: 16,
|
||
backgroundColor: '#f9f9f9',
|
||
},
|
||
button: {
|
||
width: '100%',
|
||
height: 50,
|
||
borderRadius: 8,
|
||
backgroundColor: primary,
|
||
justifyContent: 'center',
|
||
alignItems: 'center',
|
||
marginTop: 10,
|
||
marginBottom: 20,
|
||
},
|
||
buttonDisabled: {
|
||
backgroundColor: '#ccc',
|
||
},
|
||
buttonText: {
|
||
color: '#fff',
|
||
fontSize: 18,
|
||
fontWeight: 'bold',
|
||
},
|
||
linkText: {
|
||
color: primary,
|
||
fontSize: 14,
|
||
marginTop: 10,
|
||
},
|
||
});
|