cally/components/pages/main/SignInPage.tsx

import {Button, ButtonSize, Text, TextField, View} from "react-native-ui-lib";
import React, {useState} from "react";
import {useSignIn} from "@/hooks/firebase/useSignIn";
import {StyleSheet} from "react-native";
import Toast from 'react-native-toast-message';

const SignInPage = ({setTab}: { setTab:  React.Dispatch<React.SetStateAction<"register" | "login" | "reset-password">> }) => {
    const [email, setEmail] = useState<string>("");
    const [password, setPassword] = useState<string>("");

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

    const handleSignIn = async () => {
        await signIn({email, password});
        if(!isError) {
            Toast.show({
                type: "success",
                text1: "Password successfully reset, please check your messages."
            })
        }
    };

    return (
        <View padding-10 centerV height={"100%"}>
            <TextField
                placeholder="Email"
                value={email}
                onChangeText={setEmail}
                style={styles.textfield}
            />
            <TextField
                placeholder="Password"
                value={password}
                onChangeText={setPassword}
                secureTextEntry
                style={styles.textfield}
            />
            <Button
                label="Login"
                onPress={handleSignIn}
                style={{marginBottom: 20}}
                backgroundColor="#fd1775"
            />
            {isError && <Text center style={{marginBottom: 20}}>{`${error}`}</Text>}

            <View row centerH marginB-5 gap-5>
                <Text text70>
                    Don't have an account?
                </Text>
                <Button
                    onPress={() => setTab("register")}
                    label="Sign Up"
                    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={() => setTab("reset-password")}
                    label="Reset password"
                    link
                    size={ButtonSize.xSmall}
                    padding-0
                    margin-0
                    text70
                    left
                    color="#fd1775"
                />
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    textfield: {
        backgroundColor: "white",
        marginVertical: 10,
        padding: 30,
        height: 45,
        borderRadius: 50,
    },
});

export default SignInPage;