diligent-react-native/screens/LoginScreen.jsx

import React, { useEffect } from "react";
import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
import MaterialIcons from "@expo/vector-icons/MaterialIcons";
import Ionicons from "@expo/vector-icons/Ionicons";

import LoginSVG from "@assets/images/login.svg";
import GoogleSVG from "@assets/images/google.svg";
import FacebookSVG from "@assets/images/facebook.svg";
import TwitterSVG from "@assets/images/twitter.svg";

import CustomButton from "@components/Buttons/CustomButton";
import InputField from "@components/InputField";
import { globalStyles } from "@styles/global";
import Loader from "@components/Loader";
import { Formik } from "formik";
import { loginSchema } from "@schemas/loginSchema";
import { useDispatch, useSelector } from "react-redux";
import { selectLoginError } from "@store/selectors/loginSelectors";
import { clearLoginErrors, fetchUser } from "@store/actions/login/loginActions";
import { selectIsLoadingByActionType } from "@store/selectors/loadingSelectors";
import { LOGIN_USER_SCOPE } from "@store/actions/login/loginActionConstants";
import { fetchAuthProvider } from "@store/actions/authProvider/authProviderActions";
import useAuthHook from "../hooks/useAuthHook";
import { storeData } from "@service/asyncStorage";
import { ACCESS_TOKEN } from "@constants/localStorage";
import Layout from "@components/Layout/Layout";
import { useTheme } from "@styles";
import { useTranslation } from "react-i18next";

const LoginScreen = ({ navigation }) => {
  const { colors } = useTheme();
  const { t } = useTranslation();
  const { response, promptAsync } = useAuthHook();
  const dispatch = useDispatch();
  const error = useSelector(selectLoginError);

  const isLoading = useSelector(selectIsLoadingByActionType(LOGIN_USER_SCOPE));

  const storeToken = async (token) => {
    await storeData(ACCESS_TOKEN, token);
  };

  useEffect(() => {
    if (response?.type === "success") {
      const accessToken = response.authentication.accessToken;
      if (accessToken) {
        storeToken(accessToken);
        dispatch(fetchAuthProvider({ accessToken }));
      }
    }
  }, [response]);

  const handleGoogleAuth = () => {
    promptAsync({ useProxy: true, showInRecents: true });
  };

  const handleLogin = (values) => {
    const { email, password } = values;
    dispatch(clearLoginErrors());
    dispatch(
      fetchUser({
        identifier: email,
        password,
      })
    );
  };

  return (
    <Layout>
      <Loader visible={isLoading} />
      <View style={{ paddingHorizontal: 25 }}>
        <View style={{ alignItems: "center" }}>
          <LoginSVG height={300} width={300} />
        </View>
        <Formik
          initialValues={{
            email: "",
            password: "",
          }}
          validationSchema={loginSchema}
          onSubmit={handleLogin}
          validateOnChange={false}
          validateOnBlur={false}
        >
          {({
            handleChange,
            handleBlur,
            handleSubmit,
            values,
            isValid,
            errors,
          }) => (
            <>
              <Text
                style={[globalStyles.boldText, { color: colors.textPrimary }]}
              >
                {t('login.signIn')}
              </Text>
              <InputField
                name="email"
                label={t('login.email')}
                keyboardType="email-address"
                onChangeText={handleChange("email")}
                text={values.email}
                style={{ color: colors.textPrimary }}
                handleBlur={handleBlur("email")}
                icon={
                  <MaterialIcons
                    name="alternate-email"
                    size={20}
                    color="#666"
                    style={{ marginRight: 5 }}
                  />
                }
              />
              {errors.email && (
                <Text style={styles.errorMessage}>{errors.email}</Text>
              )}
              <InputField
                name="password"
                label={t('login.password')}
                filedButtonLabel={t('register.forgot')}
                fieldButtonFunction={() => {}}
                inputType="password"
                handleBlur={handleBlur("password")}
                text={values.password}
                onChangeText={handleChange("password")}
                icon={
                  <Ionicons
                    name="ios-lock-closed-outline"
                    size={20}
                    color="#666"
                    style={{ marginRight: 5 }}
                  />
                }
              />
              {errors.password && (
                <Text style={styles.errorMessage}>{errors.password}</Text>
              )}
              {error && <Text style={styles.errorMessage}>{error}</Text>}
              <CustomButton label={t('login.login')} onPress={handleSubmit} />
            </>
          )}
        </Formik>
        <Text
          style={[
            globalStyles.regularCenteredText,
            { color: colors.textPrimary },
          ]}
        >
         {t('login.orLoginWith')}
        </Text>
        <View style={styles.providersContainer}>
          <TouchableOpacity
            onPress={handleGoogleAuth}
            style={globalStyles.iconButton}
          >
            <GoogleSVG height={24} width={24} />
          </TouchableOpacity>
          <TouchableOpacity onPress={() => {}} style={globalStyles.iconButton}>
            <FacebookSVG height={24} width={24} />
          </TouchableOpacity>
          <TouchableOpacity onPress={() => {}} style={globalStyles.iconButton}>
            <TwitterSVG height={24} width={24} />
          </TouchableOpacity>
        </View>
        <View style={styles.registerContainer}>
          <Text
            style={[globalStyles.regularText, { color: colors.textPrimary }]}
          >
            {t('login.needAccount')}{" "}
          </Text>
          <TouchableOpacity onPress={() => navigation.navigate("Register")}>
            <Text style={styles.registerButtonText}>{t('login.signUp')}</Text>
          </TouchableOpacity>
        </View>
      </View>
    </Layout>
  );
};

const styles = StyleSheet.create({
  providerText: {
    textAlign: "center",
    color: "#666",
    marginBottom: 30,
    fontFamily: "poppins-regular",
  },
  providersContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
    marginBottom: 30,
  },
  registerContainer: {
    flexDirection: "row",
    justifyContent: "center",
    marginBottom: 30,
  },
  registerButtonText: {
    color: "#AD40AF",
    fontWeight: "700",
    fontFamily: "poppins-semibold",
  },
  errorMessage: {
    marginBottom: 30,
    color: "red",
  },
});

export default LoginScreen;