feat(login): add login function

src/screens/Login.js

@@ -1,19 +1,24 @@
 import React, { useEffect, useState } from 'react';
 import { useForm, Controller } from 'react-hook-form';
-import { KeyboardAvoidingView, ScrollView, StatusBar, View, StyleSheet, Image, Platform, Dimensions } from 'react-native';
+import { KeyboardAvoidingView, ScrollView, StatusBar, View, StyleSheet, Image, Platform, Dimensions, Alert } from 'react-native';
-import { Button, TextInput, HelperText, Text } from 'react-native-paper';
+import { Button, TextInput, HelperText, Text, Modal } from 'react-native-paper';
-import { useDispatch, useSelector } from 'react-redux';
+import { setIsLogin, setUser, setRegister } from '../appredux/actions';
-import { setIsLogin, setUser } from '../appredux/actions';
 import { store } from '../appredux/store';
 import { colors } from '../utils/color';
 import LOGIN_BANNER from '../assets/images/logo_nawakara.png';
 import { strings } from '../utils/i18n';
 import { initFirebase } from '../utils/Auth';
+import RequestModule from '../services/api/request';
+import Toast from 'react-native-toast-message';
+
 const LoginScreen = ({ route, navigation }) => {
-    const { scannedCode } = useSelector(state => state.userReducer)
+    const request = new RequestModule('');
+    const [visible, setVisible] = useState(false);
+    const showModal = () => setVisible(true);
+    const hideModal = () => setVisible(false);
     const [loginProcess, setLoginProcess] = useState(false);
     const [showPassword, setShowPassword] = useState(false);
-    const { control, handleSubmit, formState: { errors, isDirty, isValid, isSubmitting, isLoading } } = useForm({
+    const { control, handleSubmit, formState: { errors, isDirty, isValid, isSubmitting } } = useForm({
         defaultValues: {
             username: '',
             password: ''
@@ -23,16 +28,45 @@ const LoginScreen = ({ route, navigation }) => {
 
     useEffect(() => {
         initFirebase();
-    }, [])
+    }, []);
+
 
     const onSubmitLogin = async (payload) => {
-        navigation.navigate('App');
+        setLoginProcess(true);
+        try {
+            const result = await request.login(payload);
+            if (result && result.status === 200 && result.data.data) {
+                store.dispatch(setIsLogin(true));
+                store.dispatch(setUser(result.data.data));
+                if (result.data.data.assigment_hr) {
+                    store.dispatch(setRegister(true));
+                    navigation.navigate('App');
+                } else {
+                    store.dispatch(setRegister(false));
+                    navigation.navigate('RegisterScreen');
+                }
+            } else {
+                Toast.show({
+                    type: 'error',
+                    text1: 'Please check username or password',
+                    position: 'bottom',
+                });
+            }
+        } catch (error) {
+            Toast.show({
+                type: 'error',
+                text1: 'An error occurred during login',
+                position: 'bottom',
+            });
+        } finally {
+            setLoginProcess(false);
+        }
     }
 
     return (
         <>
             <StatusBar backgroundColor={colors.white} barStyle='dark-content' translucent={true} />
-            <KeyboardAvoidingView ehavior={Platform.OS === "ios" ? "padding" : null} style={{ flex: 1 }}>
+            <KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : null} style={{ flex: 1 }}>
                 <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
                     <View style={styles.container}>
                         <Image
@@ -48,7 +82,7 @@ const LoginScreen = ({ route, navigation }) => {
                             control={control}
                             rules={{
                                 required: true,
-                                minLength: 3
+                                minLength: 0
                             }}
                             render={({ field: { onChange, onBlur, value } }) => (
                                 <TextInput
@@ -60,6 +94,8 @@ const LoginScreen = ({ route, navigation }) => {
                                     onChangeText={onChange}
                                     style={{ marginTop: 10 }}
                                     value={value}
+                                    accessible={true}
+                                    accessibilityLabel="Username"
                                 />
                             )}
                             name="username"
@@ -72,6 +108,7 @@ const LoginScreen = ({ route, navigation }) => {
                             control={control}
                             rules={{
                                 required: true,
+                                minLength: 3
                             }}
                             render={({ field: { onChange, onBlur, value } }) => (
                                 <TextInput
@@ -89,8 +126,9 @@ const LoginScreen = ({ route, navigation }) => {
                                         onPress={() => setShowPassword(!showPassword)}
                                         style={styles.eyeIcon}
                                     />}
+                                    accessible={true}
+                                    accessibilityLabel="Password"
                                 />
-
                             )}
                             name="password"
                         />
@@ -103,15 +141,18 @@ const LoginScreen = ({ route, navigation }) => {
                             mode="contained"
                             onPress={handleSubmit(onSubmitLogin)}
                             style={{ marginTop: 15, backgroundColor: colors.blue, borderRadius: 10 }}
-                            disabled={!isDirty || !isValid || isSubmitting}
+                            disabled={!isDirty || !isValid || isSubmitting || loginProcess}
                             labelStyle={{ color: colors.white }}
+                            loading={isSubmitting || loginProcess}
                         >
-                            {isSubmitting ? "Loading..." : strings('loginPage.signInBtn')}
+                            {strings('loginPage.signInBtn')}
                         </Button>
                     </View>
                 </ScrollView >
             </KeyboardAvoidingView>
+
         </>
+
     )
 }
 
@@ -119,8 +160,13 @@ const styles = StyleSheet.create({
     container: {
         flex: 1,
         padding: 20,
-        backgroundColor: colors.pureWhite
+        justifyContent: 'center',
+        backgroundColor: colors.white,
+        paddingBottom: 100
+    },
+    eyeIcon: {
+        marginTop: 12
     }
 })
 
-export default LoginScreen
+export default LoginScreen;