cally/components/pages/main/SignInPage.tsx

import {
    Button,
    ButtonSize,
    Colors,
    KeyboardAwareScrollView,
    LoaderScreen,
    Text,
    TextField,
    TextFieldRef,
    View,
} from "react-native-ui-lib";
import React, {useRef, useState} from "react";
import {useSignIn} from "@/hooks/firebase/useSignIn";
import {KeyboardAvoidingView, Platform, StyleSheet} from "react-native";
import Toast from "react-native-toast-message";
import KeyboardManager from "react-native-keyboard-manager";
import {SafeAreaView} from "react-native-safe-area-context";
import {useRouter} from "expo-router";

KeyboardManager.setEnableAutoToolbar(true);

const SignInPage = () => {
    const [email, setEmail] = useState<string>("");
    const [password, setPassword] = useState<string>("");
    const passwordRef = useRef<TextFieldRef>(null);

    const {mutateAsync: signIn, error, isError, isLoading} = useSignIn();

    const router = useRouter()

    const handleSignIn = async () => {
        await signIn({email, password});
        if (!isError) {
            Toast.show({
                type: "success",
                text1: "Login successful!",
            });
        } else {
            Toast.show({
                type: "error",
                text1: "Error logging in",
                text2: `${error}`,
            });
        }
    };

    return (
        <SafeAreaView style={{flex: 1}}>
            <KeyboardAwareScrollView contentContainerStyle={{flexGrow: 1}} enableOnAndroid>
                <View style={{flex: 1, padding: 21, paddingBottom: 45, paddingTop: "20%"}}>
                    <View gap-13 width={"100%"} marginB-20>
                        <Text style={{fontSize: 40, fontFamily: 'Manrope_600SemiBold'}}>
                            Jump back into Cally
                        </Text>
                        <Text color={"#919191"} style={{fontSize: 20}}>
                            Please enter your details.
                        </Text>
                    </View>

                    <KeyboardAvoidingView style={{width: "100%"}}
                                          contentContainerStyle={{justifyContent: "center"}}
                                          keyboardVerticalOffset={50}
                                          behavior={Platform.OS === "ios" ? "padding" : "height"}
                    >
                        <TextField
                            placeholder="Email"
                            keyboardType={"email-address"}
                            returnKeyType={"next"}
                            textContentType={"emailAddress"}
                            defaultValue={email}
                            onChangeText={setEmail}
                            style={styles.textfield}
                            autoComplete={"email"}
                            autoCorrect={false}
                            onSubmitEditing={() => {
                                // Move focus to the description field
                                passwordRef.current?.focus();
                            }}
                        />
                        <TextField
                            ref={passwordRef}
                            placeholder="Password"
                            textContentType={"oneTimeCode"}
                            value={password}
                            onChangeText={setPassword}
                            secureTextEntry
                            style={styles.textfield}
                            autoCorrect={false}
                        />
                    </KeyboardAvoidingView>

                    <View flexG/>

                    <Button
                        label="Log in"
                        marginT-50
                        labelStyle={{
                            fontFamily: "PlusJakartaSans_600SemiBold",
                            fontSize: 16,
                        }}
                        onPress={handleSignIn}
                        style={{marginBottom: 20, height: 50}}
                        backgroundColor="#fd1775"
                    />

                    {isError && (
                        <Text center style={{marginBottom: 20}}>{`${
                            error?.toString()?.split("]")?.[1]
                        }`}</Text>
                    )}

                    <View row centerH marginB-5 gap-5>
                        <Text style={styles.jakartaLight}>Don't have an account?</Text>
                        <Button
                            onPress={() => router.replace("/(unauth)/sign_up")}
                            label="Sign Up"
                            labelStyle={[
                                styles.jakartaMedium,
                                {textDecorationLine: "none", color: "#fd1575"},
                            ]}
                            link
                            size={ButtonSize.xSmall}
                            padding-0
                            margin-0
                            text70
                            left
                            color="#fd1775"
                        />
                    </View>

                    {/*<View row centerH marginB-5 gap-5>*/}
                    {/*    <Text text70>Forgot your password?</Text>*/}
                    {/*    <Button*/}
                    {/*        onPress={() => router.replace("/(unauth)/sign_up")}*/}
                    {/*        label="Reset password"*/}
                    {/*        labelStyle={[*/}
                    {/*            styles.jakartaMedium,*/}
                    {/*            {textDecorationLine: "none", color: "#fd1575"},*/}
                    {/*        ]}*/}
                    {/*        link*/}
                    {/*        size={ButtonSize.xSmall}*/}
                    {/*        padding-0*/}
                    {/*        margin-0*/}
                    {/*        text70*/}
                    {/*        left*/}
                    {/*        avoidInnerPadding*/}
                    {/*        color="#fd1775"*/}
                    {/*    />*/}
                    {/*</View>*/}

                    {isLoading && (
                        <LoaderScreen overlay message={"Signing in..."} backgroundColor={Colors.white}
                                      color={Colors.grey40}/>
                    )}
                </View>
            </KeyboardAwareScrollView>
        </SafeAreaView>
    );
};

const styles = StyleSheet.create({
    textfield: {
        backgroundColor: "white",
        marginVertical: 10,
        padding: 30,
        height: 45,
        borderRadius: 50,
        fontFamily: "PlusJakartaSans_300Light",
    },
    jakartaLight: {
        fontFamily: "PlusJakartaSans_300Light",
        fontSize: 16,
        color: "#484848",
    },
    jakartaMedium: {
        fontFamily: "PlusJakartaSans_500Medium",
        fontSize: 16,
        color: "#919191",
        textDecorationLine: "underline",
    },
});

export default SignInPage;