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

import { View, Text, Image, StyleSheet, Pressable, Alert, Dimensions, ActivityIndicator } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import Logo from '../../../global/logo';
import NormalButton from '../../../global/normal_button';
import NormalInput from '../../../global/normal_input';
import { useEffect, useState } from 'react';
import { useAuth } from '../../../../context/AuthProvider';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import AsyncStorage from '@react-native-async-storage/async-storage';
import Checkbox from 'expo-checkbox';
import { router } from 'expo-router';
import PhoneInput from '../../../global/phone_input';
type LoginPageProps = {
    goToNextPage: () => void;
    goToForgetPassWordPage: () => void;
    goToBindingPhoneNumberPage: () => void;
};

const screenHeight = Dimensions.get('window').height;

const LoginPage: React.FC<LoginPageProps> = ({ goToNextPage, goToForgetPassWordPage, goToBindingPhoneNumberPage }) => {
    // const [loginEmail, setLoginEmail] = useState('');
    const [loginPhone, setLoginPhone] = useState('');
    const [loginPassword, setLoginPassword] = useState('');
    const [saveAccount, setSaveAccount] = useState(false);
    const [isLoading, setIsLoading] = useState(false);
    const { login } = useAuth();
    const [isChecked, setChecked] = useState(false);
    const [showPassword, setShowPassword] = useState(false);

    useEffect(() => {
        loadSavedCredentials();
    }, []);

    const loadSavedCredentials = async () => {
        try {
            const savedPhone = await AsyncStorage.getItem('savedPhone');
            // const savedEmail = await AsyncStorage.getItem('savedEmail');
            const savedPassword = await AsyncStorage.getItem('savedPassword');
            if (savedPhone && savedPassword) {
                // setLoginEmail(savedEmail);
                setLoginPhone(savedPhone);
                setLoginPassword(savedPassword);
                setSaveAccount(true);
                setChecked(true);
            }
        } catch (error) {
            console.error('Error loading saved credentials:', error);
        }
    };

    // const _login = async (username: string, password: string) => {
    //     setIsLoading(true);
    //     if (username === '' || password === '') {
    //         Alert.alert('請輸入資料', '請輸入電子郵件和密碼');
    //     } else {
    //         const lowerCaseUsername = username.toLowerCase();
    //         const success = await login(lowerCaseUsername, password);
    //         if (!success) {
    //             Alert.alert('登入失敗', '請檢查您的電子郵件和密碼');
    //         }
    //     }
    //     setIsLoading(false);
    // };

    // const _login = async (username: string, password: string) => {
    //     setIsLoading(true);
    //     if (username === '' || password === '') {
    //         Alert.alert('請輸入資料', '請輸入電話號碼和密碼');
    //     } else if (username.includes('@')) {
    //         Alert.alert('請綁定您的手機號碼', '客戶只能使用已經綁定的手機號碼進行登入', [
    //             { text: '我要進行綁定', onPress: () => goToBindingPhoneNumberPage() },
    //             { text: '我已綁定，帶我回登入頁面', onPress: () => router.replace('/login') }
    //         ]);
    //     } else {
    //         // const lowerCaseUsername = username.toLowerCase();
    //         const isBinding = false;
    //         const success = await login(username, password, isBinding);
    //         if (success) {
    //             if (saveAccount) {
    //                 await AsyncStorage.setItem('savedEmail', username);
    //                 await AsyncStorage.setItem('savedPassword', password);
    //             } else {
    //                 await AsyncStorage.removeItem('savedEmail');
    //                 await AsyncStorage.removeItem('savedPassword');
    //             }
    //         } else {
    //             Alert.alert('登入失敗', '請檢查您的電子郵件和密碼');
    //         }
    //     }
    //     setIsLoading(false);
    // };

    const _login = async (username: string, password: string) => {
        setIsLoading(true);
        if (username === '' || password === '') {
            Alert.alert('請輸入資料', '請輸入電話號碼和密碼');
        } else if (username.includes('@')) {
            Alert.alert('請綁定您的手機號碼', '客戶現在起只能使用已經綁定的手機號碼進行登入', [
                { text: '我要進行綁定', onPress: () => goToBindingPhoneNumberPage() },
                { text: '我已綁定，帶我回登入頁面', onPress: () => router.replace('/login') }
            ]);
        } else {
            // const lowerCaseUsername = username.toLowerCase();
            const isBinding = false;
            const success = await login(username, password, isBinding);
            if (success) {
                if (saveAccount) {
                    await AsyncStorage.setItem('savedPhone', username);
                    await AsyncStorage.setItem('savedPassword', password);
                } else {
                    await AsyncStorage.removeItem('savedPhone');
                    await AsyncStorage.removeItem('savedPassword');
                }
            } else {
                Alert.alert('登入失敗', '請檢查您的電話號碼和密碼');
            }
        }
        setIsLoading(false);
    };

    const insets = useSafeAreaInsets();

    return (
        <View className={`flex-1 justify-center ${screenHeight < 750 ? 'h-screen' : 'h-[80vh] space-y-8'}`}>
            <View className="flex-3 items-center  justify-end" style={{}}>
                <Image
                    source={require('../../../../assets/ccLogo.png')}
                    resizeMode="contain"
                    style={{
                        width: screenHeight > 750 ? 250 : 200,
                        height: screenHeight > 750 ? 250 : 200
                    }}
                />
            </View>
            <View
                style={{
                    gap: 10
                    // paddingBottom: Math.max(insets.bottom, 20)
                    // marginTop: screenHeight > 750 ? 40 : 0
                }}
                className="mx-[5%] flex-2 "
            >
                <Text className="text-lg text-center text-[#888888] font-[600]">
                    提示： 舊用戶<Text className="font-bold">必須</Text>綁定手機號碼才能登入
                </Text>
                <Pressable onPress={goToBindingPhoneNumberPage}>
                    <Text className="text-lg text-center text-[#888888] font-[600] underline">
                        立即按我前往綁定頁面
                    </Text>
                </Pressable>
                {/* <NormalInput
                    placeholder="輸入電話號碼"
                    value={loginPhone}
                    onChangeText={(phone) => setLoginPhone(phone)}
                    extendedStyle={{ borderRadius: 12, padding: 20 }}
                    textContentType="username"
                    autoComplete="username"
                    keyboardType="email-address"
                    autoCapitalize="none"
                /> */}

                <PhoneInput
                    value={loginPhone}
                    onChangeText={(phone) => setLoginPhone(phone)}
                    placeholder="輸入電話號碼"
                    extendedStyle={{ borderRadius: 12, padding: 20 }}
                    textContentType="telephoneNumber"
                    autoComplete="tel"
                    keyboardType="phone-pad"
                    autoCapitalize="none"
                />
                <View className="relative">
                    <NormalInput
                        value={loginPassword}
                        placeholder="密碼"
                        onChangeText={(password) => setLoginPassword(password)}
                        secureTextEntry={!showPassword}
                        extendedStyle={{ borderRadius: 12, padding: 20, paddingRight: 50 }}
                        textContentType="password"
                        autoComplete="password"
                    />
                    <Pressable
                        className="absolute right-4 top-0 bottom-0 justify-center"
                        onPress={() => setShowPassword(!showPassword)}
                    >
                        <Ionicons name={showPassword ? 'eye-outline' : 'eye-off-outline'} size={24} color="#02677D" />
                    </Pressable>
                </View>

                <View className="flex flex-row items-center ">
                    <Checkbox
                        style={styles.checkbox}
                        value={saveAccount}
                        color={saveAccount ? '#02677D' : '#02677D'}
                        onValueChange={(newValue) => {
                            setSaveAccount(newValue);
                            console.log(newValue);
                        }}
                    />

                    <Text style={styles.text}>記住我的電話號碼</Text>
                </View>

                <NormalButton
                    extendedStyle={{ padding: 20 }}
                    onPress={() => _login(loginPhone, loginPassword)}
                    title={
                        isLoading ? (
                            <Text
                                style={{
                                    fontWeight: '700',
                                    fontSize: 20,
                                    color: '#fff'
                                }}
                            >
                                <ActivityIndicator />
                            </Text>
                        ) : (
                            <Text
                                style={{
                                    fontWeight: '700',
                                    fontSize: 20,
                                    color: '#fff'
                                }}
                            >
                                登入
                            </Text>
                        )
                    }
                />
                <View className="flex flex-row justify-between relative">
                    <Pressable className="self-start" onPress={goToNextPage}>
                        <Text style={styles.text}>註冊會員</Text>
                    </Pressable>
                    <Pressable className="self-start" onPress={() => goToForgetPassWordPage()}>
                        <Text style={styles.text}>忘記密碼</Text>
                    </Pressable>
                    {/* <View className="flex flex-row justify-center absolute top-16 left-0 right-0 items-center">
                        <View className="flex-1 h-[1px] bg-[#888888] mx-2" />
                        <Pressable onPress={goToBindingPhoneNumberPage}>
                            <Text className="text-[#888888] text-lg">舊用戶/已有用戶/手機號碼綁定</Text>
                        </Pressable>
                        <View className="flex-1 h-[1px] bg-[#888888] mx-2" />
                    </View> */}
                </View>
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        height: Dimensions.get('window').height,
        justifyContent: 'center',
        marginHorizontal: 20
    },
    topContainerForLogo: {},
    checkbox: {
        margin: 8
    },
    text: {
        color: '#02677D',
        fontSize: 16,
        paddingVertical: 5
    }
});
export default LoginPage;