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

import {
    View,
    Text,
    Image,
    StyleSheet,
    Pressable,
    Alert,
    Dimensions,
    ActivityIndicator
} from 'react-native';

import Logo from '../../../global/logo';
import NormalButton from '../../../global/normal_button';
import NormalInput from '../../../global/normal_input';
import { useState } from 'react';
import { useAuth } from '../../../../context/AuthProvider';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
type LoginPageProps = {
    goToNextPage: () => void;
    goToForgetPassWordPage: () => void;
};

const screenHeight = Dimensions.get('window').height;
console.log(screenHeight);
const LoginPage: React.FC<LoginPageProps> = ({
    goToNextPage,
    goToForgetPassWordPage
}) => {
    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 lowerCaseUsername = username.toLowerCase();
            const success = await login(lowerCaseUsername, password);
            if (!success) {
                Alert.alert('Error', 'Invalid username or password');
            }
        }
        setIsLoading(false);
    };
    const insets = useSafeAreaInsets();

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

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

        //         &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
        //         <View className="flex-1 h-screen">
        //             <View
        //                 className="items-center"
        //                 style={{
        //                     paddingTop: Math.max(insets.top + 20, 20)
        //                 }}
        //             >
        //                 <Image
        //                     source={require('../../../../assets/ccLogo.png')}
        //                     resizeMode="contain"
        //                     style={{ width: 200, height: 200 }}
        //                 />
        //             </View>
        //             <View
        //                 style={{
        //                     gap: 10,
        //                     paddingBottom: Math.max(insets.bottom, 20)
        //                 }}
        //                 className="mx-[5%] flex-1  justify-end mb-10"
        //             >
        //                 <NormalInput
        //                     placeholder="電子郵件"
        //                     onChangeText={(email) => setLoginEmail(email)}
        //                     extendedStyle={{ borderRadius: 12, padding: 20 }}
        //                     textContentType="username"
        //                     autoComplete="username"
        //                 />
        //                 <NormalInput
        //                     placeholder="密碼"
        //                     onChangeText={(password) => setLoginPassword(password)}
        //                     secureTextEntry={true}
        //                     extendedStyle={{ borderRadius: 12, padding: 20 }}
        //                     textContentType="password"
        //                     autoComplete="password"
        //                 />

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

        // const styles = StyleSheet.create({
        //     container: {
        //         flex: 1,
        //         height: Dimensions.get('window').height,
        //         justifyContent: 'center',
        //         marginHorizontal: 20
        //     },
        //     topContainerForLogo: {},

        //     text: {
        //         color: '#02677D',
        //         fontSize: 16,
        //         paddingVertical: 5
        //     }
        // });
        // export default LoginPage;

        // <View className="flex-1 h-screen justify-center">
        <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 "
            >
                <NormalInput
                    placeholder="電子郵件"
                    onChangeText={(email) => setLoginEmail(email)}
                    extendedStyle={{ borderRadius: 12, padding: 20 }}
                    textContentType="username"
                    autoComplete="username"
                />
                <NormalInput
                    placeholder="密碼"
                    onChangeText={(password) => setLoginPassword(password)}
                    secureTextEntry={true}
                    extendedStyle={{ borderRadius: 12, padding: 20 }}
                    textContentType="password"
                    autoComplete="password"
                />

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

const styles = StyleSheet.create({
    container: {
        flex: 1,
        height: Dimensions.get('window').height,
        justifyContent: 'center',
        marginHorizontal: 20
    },
    topContainerForLogo: {},

    text: {
        color: '#02677D',
        fontSize: 16,
        paddingVertical: 5
    }
});
export default LoginPage;