Skip to content

Commit

Permalink
Login screen (#197)
Browse files Browse the repository at this point in the history 
* Changed font for heading and subheading and tweaked rounding on email inputs.

* Added Forgot Password and alternate login divider

* Added logos for external logins

* Fixed external login button behavior

* More visual tweaks, added link to sign up page

* Fixed external login buttons

* Changed margins and renamed css

* Changed sign up text

* Added back button and border around external login buttons

* Changed margin for footer text

* Adjusted border thickness for external login and changed header text

* Changed Login button for consistency

* Changed login text for consistency
  • Loading branch information
@dyland88
dyland88 authored Mar 7, 2024
1 parent 3d49036 commit 3618154
Show file tree
Hide file tree
Showing 9 changed files with 434 additions and 179 deletions.
Binary file added client/assets/apple_logo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added client/assets/facebook_logo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added client/assets/fonts/Quicksand-Bold.ttf
View file
Binary file not shown.
Binary file added client/assets/fonts/Quicksand-Medium.ttf
View file
Binary file not shown.
Binary file added client/assets/github_logo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added client/assets/google_logo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
215 changes: 177 additions & 38 deletions client/src/components/Auth/LoginScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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!
Expand All @@ -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>

Expand All @@ -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
Expand All @@ -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",
},

Expand All @@ -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,
},
});

Expand Down
Loading

0 comments on commit 3618154

Please sign in to comment.