Merge pull request #84 from JustinTan-1/main

Stay Logged in Checkbox

Author: 7riumph

src/components/AuthForm.tsx

@@ -1,14 +1,15 @@
 import React, { useState, useContext } from 'react';
-import { TextInput, Text, StyleSheet } from 'react-native';
+import { TextInput, Text, StyleSheet, Modal, Alert, Pressable, View } from 'react-native';
 import { Context as AuthContext } from 'src/components/context/AuthContext';
 import tw from 'twrnc';
 
 import Button from './Button';
+import CheckBox from './CheckBox';
 
 interface LoginFieldProps {
   errorMessage: string;
   submitButtonText: string;
-  onSubmit: ({ email, password }) => void;
+  onSubmit: ({ email, password}) => void;
   style?: StyleSheet.NamedStyles<any>;
 }
 
@@ -20,6 +21,8 @@ const AuthForm: React.FC<LoginFieldProps> = ({
 }) => {
   const [email, setEmail] = useState<string>('');
   const [password, setPassword] = useState<string>('');
+  const [staySignedIn, setStaySignedIn] = useState<boolean>(false)
+  const [modalVisible, setModalVisible] = useState<boolean>(false);
 
   const { signin } = useContext(AuthContext);
 
@@ -31,6 +34,11 @@ const AuthForm: React.FC<LoginFieldProps> = ({
     }
   };
 
+  const handleStaySignInToggle = () => { 
+    setStaySignedIn(!staySignedIn); 
+    if (!staySignedIn) setModalVisible(true); 
+  };
+
   return (
     <>
       <TextInput
@@ -50,13 +58,36 @@ const AuthForm: React.FC<LoginFieldProps> = ({
         autoCorrect={false}
         onChangeText={setPassword}
       />
+      <CheckBox
+        onPress={handleStaySignInToggle}
+        title="Stay Logged In"
+        isChecked={staySignedIn}
+      />
       {errorMessage && <Text className="pl-4 text-red-500">{errorMessage}</Text>}
       <Button
         buttonStyle={tw`flex bg-[#ea5a4e] rounded-3xl w-40 h-10  flex justify-center items-center`}
         textStyle={tw`text-xl font-bold text-white`}
         title="Sign In"
         onPress={handleSignIn}
       />
+      <Modal
+        animationType="slide"
+        transparent={true}
+        visible={modalVisible}
+        onRequestClose={() => {
+          setModalVisible(!modalVisible);
+        }}>
+        <View style={tw`flex-1 justify-center items-center`}>
+          <View style={tw`m-5 bg-white rounded-2xl p-9 items-center shadow-lg`}>
+            <Text style={tw`mb-4 text-center`}>Your session will stay active until you sign out.</Text>
+            <Pressable
+              style={tw`rounded-2xl px-4 py-2 bg-[#345073]`}
+              onPress={() => setModalVisible(!modalVisible)}>
+              <Text style={tw`text-white font-bold text-center`}>OK</Text>
+            </Pressable>
+          </View>
+        </View>
+      </Modal>
     </>
   );
 };

src/components/CheckBox.tsx

@@ -0,0 +1,21 @@
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import React from "react";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import tw from 'twrnc';
+
+const CheckBox = (props) => {
+    const iconName = props.isChecked ?
+        "checkbox-marked" : "checkbox-blank-outline";
+
+    return (
+        <View style={tw`flex-row items-center w-36 mt-1 mx-1`}>
+            <Pressable onPress={props.onPress}>
+                <MaterialCommunityIcons 
+                    name={iconName} size={24} color="#FFFFFF" />
+            </Pressable>
+            <Text style={tw`text-white text-sm font-semibold ml-1`}>{props.title}</Text>
+        </View>
+    );
+};
+
+export default CheckBox;

src/components/context/AuthContext.ts

@@ -74,4 +74,4 @@ export const { Provider, Context } = createDataContext(
   authReducer,
   { signin, signout, updateUser, tryLocalSignin },
   { isSignedIn: false, token: null, user: null }
-);
+);

src/screens/CaseContactListScreen.tsx

@@ -27,7 +27,7 @@ const CaseContactListScreen = ({ navigation }) => {
           />
         </View>
       </View>
-    </View>
+    </View> 
   );
 };