crazycharge-app/component/registrationMultiStepForm/formComponent/formPages/loginPage.tsx

import {
    View,
    Text,
    StyleSheet,
    Pressable,
    ScrollView,
    Alert
} from 'react-native';
import NormalButton from '../../../global/normal_button';
import Logo from '../../../global/logo';
import PhoneInput from '../../../global/phone_input';
import NormalInput from '../../../global/normal_input';
import { useState } from 'react';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useAuth } from '../../../../context/AuthProvider';
type LoginPageProps = {
    goToNextPage: () => void;
    goToForgetPassWordPage: () => void;
};

const LoginPage: React.FC<LoginPageProps> = ({
    goToNextPage,
    goToForgetPassWordPage
}) => {
    // const [loginPhone, setLoginPhone] = useState(''); //This loginPhone useState is only a placeholder, will be updated in the future
    const [loginEmail, setLoginEmail] = useState('');
    const [loginPassword, setLoginPassword] = useState('');
    const [isLoading, setIsLoading] = useState(false);
    const { login } = useAuth();

    const _login = async (username: string, password: string) => {
        setIsLoading(true);
        if (username === '' || password === '') {
            Alert.alert('Error', 'Please enter a username and password');
        } else {
            const success = await login(username, password);
            if (!success) {
                Alert.alert('Error', 'Invalid username or password');
            }
        }
        setIsLoading(false);
    };

    return (
        <ScrollView>
            <SafeAreaView style={styles.container}>
                <View style={styles.topContainerForLogo}>
                    <Logo />
                </View>
                <View style={styles.bottomContainer}>
                    <NormalInput
                        placeholder="電子郵件"
                        onChangeText={(email) => setLoginEmail(email)}
                        extendedStyle={{ borderRadius: 12, padding: 20 }}
                    />
                    <NormalInput
                        placeholder="密碼"
                        onChangeText={(password) => setLoginPassword(password)}
                        secureTextEntry={true}
                        extendedStyle={{ borderRadius: 12, padding: 20 }}
                    />

                    <Pressable onPress={() => goToForgetPassWordPage()}>
                        <Text style={styles.text}>忘記密碼</Text>
                    </Pressable>
                    <NormalButton
                        onPress={() => _login(loginEmail, loginPassword)}
                        title={
                            isLoading ? (
                                <Text
                                    style={{
                                        fontWeight: '700',
                                        fontSize: 20,
                                        color: '#fff'
                                    }}
                                >
                                    Loading ...{' '}
                                </Text>
                            ) : (
                                <Text
                                    style={{
                                        fontWeight: '700',
                                        fontSize: 20,
                                        color: '#fff'
                                    }}
                                >
                                    登入
                                </Text>
                            )
                        }
                    />
                    <Pressable onPress={goToNextPage}>
                        <Text style={styles.text}>註冊會員</Text>
                    </Pressable>
                </View>
            </SafeAreaView>
        </ScrollView>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        gap: 50,
        marginHorizontal: 20
    },
    topContainerForLogo: {
        flex: 1 / 2
    },
    bottomContainer: {
        flex: 1,
        gap: 10
    },
    text: {
        color: '#02677D',
        fontSize: 16,
        paddingVertical: 5
    }
});
export default LoginPage;