Login screen

client/src/components/Auth/LoginScreen.tsx

@@ -9,26 +9,38 @@ import {
   Platform,
   TouchableWithoutFeedback,
   Keyboard,
+  TouchableOpacity,
 } from "react-native";
 import { LogInEmailInput, LogInPasswordInput } from "../Common/CustomInputs";
-import { LogInButton } from "../Common/AuthButtons";
+import { LogInButton, ExternalLoginButton } from "../Common/AuthButtons";
 import { useLocalSearchParams, useRouter } from "expo-router";
 import { appSignIn } from "../../services/store";
-import { AuthenticationErrorMessage, AuthenticationResponse } from "./AuthenticationResponse";
+import {
+  AuthenticationErrorMessage,
+  AuthenticationResponse,
+} from "./AuthenticationResponse";
+import { ArrowLeftCircle } from "react-native-feather";
 
 const LoginScreen = () => {
   const router = useRouter();
   const [fontsLoaded, fontError] = useFonts({
-    "Gilroy-ExtraBold": require("../../../assets/fonts/Gilroy-ExtraBold.otf"),
-    "Gilroy-Light": require("../../../assets/fonts/Gilroy-Light.otf"),
+    "Quicksand-Bold": require("../../../assets/fonts/Quicksand-Bold.ttf"),
+    "Quicksand-Medium": require("../../../assets/fonts/Quicksand-Medium.ttf"),
   });
 
   const { inputEmail } = useLocalSearchParams();
   const [email, setEmail] = React.useState<string>("");
   const [password, setPassword] = React.useState<string>("");
-  const [authResponse, setAuthResponse] = React.useState<AuthenticationResponse>();
+  const [authResponse, setAuthResponse] =
+    React.useState<AuthenticationResponse>();
   const [invalidLogin, invalidateLogin] = React.useState<boolean>(false); // Possbily change this?
 
+  const externalLoginIcons = {
+    google: require("../../../assets/google_logo.png"),
+    facebook: require("../../../assets/facebook_logo.png"),
+    apple: require("../../../assets/apple_logo.png"),
+  };
+
   // Sign in function with email and password
   const onHandleSubmit = async () => {
     Keyboard.dismiss();
@@ -43,7 +55,7 @@ const LoginScreen = () => {
       console.log(authResponse.error);
       invalidateLogin(true);
     }
-  }, [authResponse])
+  }, [authResponse]);
 
   useEffect(() => {
     setEmail(inputEmail?.toString() || ""); // On load of the page, set the email to the inputEmail if they entered it!
@@ -53,41 +65,117 @@ const LoginScreen = () => {
     return null;
   }
 
+  const handleGoogleSignIn = async () => {
+    console.log("Google Sign In");
+  };
+
+  const handleFacebookSignIn = async () => {
+    console.log("Facebook Sign In");
+  };
+
+  const handleAppleSignIn = async () => {
+    console.log("Apple Sign In");
+  };
+
+  const handleGithubSignIn = async () => {
+    console.log("Github Sign In");
+  };
+
   return (
     <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
       <View>
-        <KeyboardAvoidingView
-          behavior={Platform.OS === "ios" ? "padding" : undefined}
-        >
-          <View style={styles.main_container}>
-            <View style={styles.header_container}>
-              <Text style={styles.header_text}>Welcome back!</Text>
-            </View>
-            <View style={styles.input_container}>
-              <LogInEmailInput
-                value={email}
-                onChangeText={(text) => setEmail(text)}
-                invalid={invalidLogin}
-              />
-              <LogInPasswordInput
-                value={password}
-                onChangeText={(text) => setPassword(text)}
-                invalid={invalidLogin}
-              />
-            </View>
-            <View style={styles.button_container}>
-              <LogInButton onPress={onHandleSubmit} />
+        <View style={styles.main_container}>
+          <TouchableOpacity
+            onPress={() => router.back()}
+            style={styles.back_button}
+          >
+            <ArrowLeftCircle
+              color={"black"}
+              strokeWidth={1.4}
+              width={34}
+              height={34}
+            />
+          </TouchableOpacity>
+          <View style={styles.header_container}>
+            <Text style={styles.header_text}>Welcome back!</Text>
+            <Text style={styles.subheader_text}>How have you been?</Text>
+          </View>
+          <View style={styles.input_container}>
+            <LogInEmailInput
+              value={email}
+              onChangeText={(text) => setEmail(text)}
+              invalid={invalidLogin}
+            />
+            <LogInPasswordInput
+              value={password}
+              onChangeText={(text) => setPassword(text)}
+              invalid={invalidLogin}
+            />
+          </View>
+          <View style={styles.button_container}>
+            <LogInButton onPress={onHandleSubmit} />
+          </View>
+          <TouchableOpacity>
+            <Text
+              style={[styles.regular_text, { textDecorationLine: "underline" }]}
+            >
+              Forgot password?
+            </Text>
+          </TouchableOpacity>
+          <View style={styles.divider_container}>
+            <View style={styles.horizontal_line} />
+            <View>
+              <Text style={[styles.regular_text, { marginHorizontal: 10 }]}>
+                Or Login With
+              </Text>
             </View>
+            <View style={styles.horizontal_line} />
           </View>
-        </KeyboardAvoidingView>
 
-        <View style={styles.error_container}>
-          <AuthenticationErrorMessage response={authResponse} onPress={() => {
-            setAuthResponse(undefined)
-            invalidateLogin(false)
-            }} />
+          <View style={styles.externalLinkContainer}>
+            <ExternalLoginButton
+              onPress={handleGoogleSignIn}
+              companyName="google"
+            />
+            <ExternalLoginButton
+              onPress={handleAppleSignIn}
+              companyName="apple"
+            />
+            <ExternalLoginButton
+              onPress={handleFacebookSignIn}
+              companyName="facebook"
+            />
+            <ExternalLoginButton
+              onPress={handleGithubSignIn}
+              companyName="github"
+            />
+          </View>
+          <View style={styles.footer_text_container}>
+            <Text style={styles.footer_text}>Don't have an account?</Text>
+            <TouchableOpacity
+              onPress={() => router.replace({ pathname: "/signup" })}
+            >
+              <Text
+                style={[
+                  styles.footer_text,
+                  { color: "#5dbea3", textDecorationLine: "underline" },
+                ]}
+              >
+                Sign up
+              </Text>
+            </TouchableOpacity>
+          </View>
         </View>
 
+        <View style={styles.error_container}>
+          <AuthenticationErrorMessage
+            response={authResponse}
+            onPress={() => {
+              setAuthResponse(undefined);
+              invalidateLogin(false);
+            }}
+          />
+        </View>
       </View>
     </TouchableWithoutFeedback>
 
@@ -102,8 +190,12 @@ const styles = StyleSheet.create({
     display: "flex",
     height: "100%",
     width: "100%",
-    justifyContent: "center",
+    justifyContent: "flex-start",
     alignItems: "center",
+    paddingHorizontal: Dimensions.get("window").width * 0.11,
+    paddingVertical: Dimensions.get("window").height * 0.01,
+    backgroundColor: "white",
+    gap: Dimensions.get("window").height * 0.029,
   },
 
   //This is an example of where the error message could be
@@ -112,7 +204,7 @@ const styles = StyleSheet.create({
     justifyContent: "space-around",
     alignItems: "center",
     width: "100%",
-    bottom: Dimensions.get("window").height * 0.10,
+    top: Dimensions.get("window").height * 0.1,
     position: "absolute",
   },
 
@@ -134,13 +226,60 @@ const styles = StyleSheet.create({
   header_container: {
     display: "flex",
     justifyContent: "center",
-    alignItems: "center",
+    alignItems: "flex-start",
     width: "100%",
+    marginBottom: Dimensions.get("window").height * 0.019,
+    marginTop: Dimensions.get("window").height * 0.23,
   },
 
   header_text: {
-    fontFamily: "Gilroy-ExtraBold",
-    fontSize: 30,
+    fontFamily: "Quicksand-Bold",
+    fontSize: 37,
+    marginBottom: Dimensions.get("window").height * 0.01,
+  },
+  subheader_text: {
+    fontFamily: "Quicksand-Medium",
+    fontSize: 20,
+  },
+  regular_text: {
+    fontFamily: "Quicksand-Medium",
+    color: "#8E8E8E",
+  },
+  horizontal_line: {
+    flex: 1,
+    height: 1,
+    backgroundColor: "#8E8E8E",
+  },
+  externalLinkContainer: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    width: "100%",
+  },
+  footer_text: {
+    fontFamily: "Quicksand-Bold",
+    color: "black",
+    fontSize: 15,
+  },
+  footer_text_container: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "flex-end",
+    gap: 7,
+    flex: 1,
+    paddingBottom: Dimensions.get("window").height * 0.01,
+  },
+  divider_container: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginVertical: Dimensions.get("window").height * 0.011,
+  },
+  back_button: {
+    position: "absolute",
+    top: Dimensions.get("window").height * 0.075,
+    left: Dimensions.get("window").width * 0.075,
   },
 });