From 7ec1307afee51d9c39f743d6865d3684e7b04d00 Mon Sep 17 00:00:00 2001 From: Dylan Date: Thu, 21 Mar 2024 17:58:19 -0400 Subject: [PATCH 01/11] Fixed input prop types --- client/.gitignore | 4 +++- client/src/components/Common/CustomInputs.tsx | 6 +++--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/client/.gitignore b/client/.gitignore index 88c086f9d..d70c2ec80 100644 --- a/client/.gitignore +++ b/client/.gitignore @@ -33,4 +33,6 @@ yarn-error.* .env*.local # typescript -*.tsbuildinfo \ No newline at end of file +*.tsbuildinfo + +.prettierrc \ No newline at end of file diff --git a/client/src/components/Common/CustomInputs.tsx b/client/src/components/Common/CustomInputs.tsx index de9c88724..026b3816f 100644 --- a/client/src/components/Common/CustomInputs.tsx +++ b/client/src/components/Common/CustomInputs.tsx @@ -16,7 +16,7 @@ export const WelcomeEmailInput: React.FC = ({ value, onChangeTex // Maybe will put LogInEmailInput & LogInPasswordInput two together into a single component -export const LogInEmailInput: React.FC = ({ +export const LogInEmailInput: React.FC = ({ value, onChangeText, invalid, @@ -32,7 +32,7 @@ export const LogInEmailInput: React.FC = ({ ); }; -export const LogInPasswordInput: React.FC = ({ +export const LogInPasswordInput: React.FC = ({ value, onChangeText, invalid, @@ -98,7 +98,7 @@ export const SignUpConfirmPasswordInput: React.FC = ({ ); }; -export const ChatInput: React.FC = ({ +export const ChatInput: React.FC void }> = ({ value, onChangeText, onSend, From b0fe0c76bf1ae1e8149950cc787a65277bf7aea1 Mon Sep 17 00:00:00 2001 From: Dylan Date: Tue, 26 Mar 2024 17:19:52 -0400 Subject: [PATCH 02/11] Changed login text and text entry for password confirmation --- client/.prettierrc | 4 + client/src/components/Auth/SignUpScreen.tsx | 234 ++++++++++++++++++-- 2 files changed, 216 insertions(+), 22 deletions(-) create mode 100644 client/.prettierrc diff --git a/client/.prettierrc b/client/.prettierrc new file mode 100644 index 000000000..222861c34 --- /dev/null +++ b/client/.prettierrc @@ -0,0 +1,4 @@ +{ + "tabWidth": 2, + "useTabs": false +} diff --git a/client/src/components/Auth/SignUpScreen.tsx b/client/src/components/Auth/SignUpScreen.tsx index e249b8e83..4822784da 100644 --- a/client/src/components/Auth/SignUpScreen.tsx +++ b/client/src/components/Auth/SignUpScreen.tsx @@ -9,12 +9,24 @@ import { Platform, TouchableWithoutFeedback, Keyboard, + TouchableOpacity, } from "react-native"; -import { SignUpEmailInput, SignUpPasswordInput, SignUpConfirmPasswordInput } from "../Common/CustomInputs"; +import { + SignUpEmailInput, + SignUpPasswordInput, + SignUpConfirmPasswordInput, +} from "../Common/CustomInputs"; +import { LogInEmailInput, LogInPasswordInput } from "../Common/CustomInputs"; import SignUpButton from "../Common/SignUpButton"; -import { AuthenticationErrorMessage, AuthenticationResponse, CustomError } from "./AuthenticationResponse"; +import { + AuthenticationErrorMessage, + AuthenticationResponse, + CustomError, +} from "./AuthenticationResponse"; import { useLocalSearchParams, useRouter } from "expo-router"; import { appSignUp } from "../../services/store"; +import { ArrowLeftCircle } from "react-native-feather"; +import { LogInButton, ExternalLoginButton } from "../Common/AuthButtons"; const SignUpScreen = () => { const router = useRouter(); @@ -27,16 +39,17 @@ const SignUpScreen = () => { const [email, setEmail] = React.useState(""); const [password, setPassword] = React.useState(""); const [confirmPassword, setConfirmPassword] = React.useState(""); - const [authResponse, setAuthResponse] = React.useState(); + const [authResponse, setAuthResponse] = + React.useState(); const onHandleSubmit = async () => { Keyboard.dismiss(); // Check if password and confirm password match if (password !== confirmPassword) { - const nonmatching_password_error: AuthenticationResponse = { - error: new CustomError("Invalid password", "Passwords do not match") - } - setAuthResponse(nonmatching_password_error) + const nonmatching_password_error: AuthenticationResponse = { + error: new CustomError("Invalid password", "Passwords do not match"), + }; + setAuthResponse(nonmatching_password_error); return; } @@ -53,6 +66,130 @@ const SignUpScreen = () => { if (!fontsLoaded && !fontError) { return null; } + if (!fontsLoaded && !fontError) { + 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 ( + + + + router.back()} + style={styles.back_button} + > + + + + Join the conversation + Talk to people near you + + + setEmail(text)} + // invalid={invalidLogin} + /> + setPassword(text)} + //invalid={invalidLogin} + /> + setPassword(text)} + //invalid={invalidLogin} + /> + + + + + + + Forgot password? + + + + + + + Or Login With + + + + + + + + + + + + + Don't have an account? + router.replace({ pathname: "/signup" })} + > + + Sign up + + + + + + + setAuthResponse(undefined)} + /> + + + + + // Log In + + // Make an account with Google (TEMP) + ); return ( @@ -85,9 +222,11 @@ const SignUpScreen = () => { - setAuthResponse(undefined)} /> + setAuthResponse(undefined)} + /> - ); @@ -98,45 +237,96 @@ 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, }, - input_container: { + //This is an example of where the error message could be + error_container: { display: "flex", - width: "100%", justifyContent: "space-around", alignItems: "center", - height: Dimensions.get("window").height * 0.2, - marginBottom: 20, + width: "100%", + top: Dimensions.get("window").height * 0.1, + position: "absolute", }, - button_container: { + input_container: { display: "flex", + width: "100%", justifyContent: "space-around", alignItems: "center", - width: "100%", + height: Dimensions.get("window").height * 0.15, }, - error_container: { + button_container: { display: "flex", justifyContent: "space-around", alignItems: "center", width: "100%", - bottom: Dimensions.get("window").height * 0.10, - position: "absolute", }, 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.2, }, 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, }, }); From 73a8334ecf7490319b48c842c4897ccfdfac0ba6 Mon Sep 17 00:00:00 2001 From: Dylan Date: Tue, 26 Mar 2024 17:19:52 -0400 Subject: [PATCH 03/11] Changed login text and text entry for password confirmation --- client/.prettierrc | 4 + client/src/components/Auth/SignUpScreen.tsx | 234 ++++++++++++++++++-- 2 files changed, 216 insertions(+), 22 deletions(-) create mode 100644 client/.prettierrc diff --git a/client/.prettierrc b/client/.prettierrc new file mode 100644 index 000000000..222861c34 --- /dev/null +++ b/client/.prettierrc @@ -0,0 +1,4 @@ +{ + "tabWidth": 2, + "useTabs": false +} diff --git a/client/src/components/Auth/SignUpScreen.tsx b/client/src/components/Auth/SignUpScreen.tsx index e249b8e83..4822784da 100644 --- a/client/src/components/Auth/SignUpScreen.tsx +++ b/client/src/components/Auth/SignUpScreen.tsx @@ -9,12 +9,24 @@ import { Platform, TouchableWithoutFeedback, Keyboard, + TouchableOpacity, } from "react-native"; -import { SignUpEmailInput, SignUpPasswordInput, SignUpConfirmPasswordInput } from "../Common/CustomInputs"; +import { + SignUpEmailInput, + SignUpPasswordInput, + SignUpConfirmPasswordInput, +} from "../Common/CustomInputs"; +import { LogInEmailInput, LogInPasswordInput } from "../Common/CustomInputs"; import SignUpButton from "../Common/SignUpButton"; -import { AuthenticationErrorMessage, AuthenticationResponse, CustomError } from "./AuthenticationResponse"; +import { + AuthenticationErrorMessage, + AuthenticationResponse, + CustomError, +} from "./AuthenticationResponse"; import { useLocalSearchParams, useRouter } from "expo-router"; import { appSignUp } from "../../services/store"; +import { ArrowLeftCircle } from "react-native-feather"; +import { LogInButton, ExternalLoginButton } from "../Common/AuthButtons"; const SignUpScreen = () => { const router = useRouter(); @@ -27,16 +39,17 @@ const SignUpScreen = () => { const [email, setEmail] = React.useState(""); const [password, setPassword] = React.useState(""); const [confirmPassword, setConfirmPassword] = React.useState(""); - const [authResponse, setAuthResponse] = React.useState(); + const [authResponse, setAuthResponse] = + React.useState(); const onHandleSubmit = async () => { Keyboard.dismiss(); // Check if password and confirm password match if (password !== confirmPassword) { - const nonmatching_password_error: AuthenticationResponse = { - error: new CustomError("Invalid password", "Passwords do not match") - } - setAuthResponse(nonmatching_password_error) + const nonmatching_password_error: AuthenticationResponse = { + error: new CustomError("Invalid password", "Passwords do not match"), + }; + setAuthResponse(nonmatching_password_error); return; } @@ -53,6 +66,130 @@ const SignUpScreen = () => { if (!fontsLoaded && !fontError) { return null; } + if (!fontsLoaded && !fontError) { + 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 ( + + + + router.back()} + style={styles.back_button} + > + + + + Join the conversation + Talk to people near you + + + setEmail(text)} + // invalid={invalidLogin} + /> + setPassword(text)} + //invalid={invalidLogin} + /> + setPassword(text)} + //invalid={invalidLogin} + /> + + + + + + + Forgot password? + + + + + + + Or Login With + + + + + + + + + + + + + Don't have an account? + router.replace({ pathname: "/signup" })} + > + + Sign up + + + + + + + setAuthResponse(undefined)} + /> + + + + + // Log In + + // Make an account with Google (TEMP) + ); return ( @@ -85,9 +222,11 @@ const SignUpScreen = () => { - setAuthResponse(undefined)} /> + setAuthResponse(undefined)} + /> - ); @@ -98,45 +237,96 @@ 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, }, - input_container: { + //This is an example of where the error message could be + error_container: { display: "flex", - width: "100%", justifyContent: "space-around", alignItems: "center", - height: Dimensions.get("window").height * 0.2, - marginBottom: 20, + width: "100%", + top: Dimensions.get("window").height * 0.1, + position: "absolute", }, - button_container: { + input_container: { display: "flex", + width: "100%", justifyContent: "space-around", alignItems: "center", - width: "100%", + height: Dimensions.get("window").height * 0.15, }, - error_container: { + button_container: { display: "flex", justifyContent: "space-around", alignItems: "center", width: "100%", - bottom: Dimensions.get("window").height * 0.10, - position: "absolute", }, 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.2, }, 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, }, }); From da9bdd76745a430cf0034d09e8e94b962f4d564b Mon Sep 17 00:00:00 2001 From: Dylan Date: Tue, 26 Mar 2024 17:25:26 -0400 Subject: [PATCH 04/11] Fixed fonts not working --- client/src/components/Auth/SignUpScreen.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/src/components/Auth/SignUpScreen.tsx b/client/src/components/Auth/SignUpScreen.tsx index 4822784da..f4a639cb1 100644 --- a/client/src/components/Auth/SignUpScreen.tsx +++ b/client/src/components/Auth/SignUpScreen.tsx @@ -31,8 +31,8 @@ import { LogInButton, ExternalLoginButton } from "../Common/AuthButtons"; const SignUpScreen = () => { 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(); From ed5c613f910b0b3a6d40d2740bd8d5c25fa41390 Mon Sep 17 00:00:00 2001 From: Dylan Date: Tue, 26 Mar 2024 17:59:05 -0400 Subject: [PATCH 05/11] Removed redundant signupinput methods --- client/src/components/Auth/LoginScreen.tsx | 6 +- client/src/components/Auth/SignUpScreen.tsx | 133 +++++++++--------- client/src/components/Common/CustomInputs.tsx | 62 +++----- 3 files changed, 86 insertions(+), 115 deletions(-) diff --git a/client/src/components/Auth/LoginScreen.tsx b/client/src/components/Auth/LoginScreen.tsx index 899a73364..da200e326 100644 --- a/client/src/components/Auth/LoginScreen.tsx +++ b/client/src/components/Auth/LoginScreen.tsx @@ -11,7 +11,7 @@ import { Keyboard, TouchableOpacity, } from "react-native"; -import { LogInEmailInput, LogInPasswordInput } from "../Common/CustomInputs"; +import { EmailInput, PasswordInput } from "../Common/CustomInputs"; import { LogInButton, ExternalLoginButton } from "../Common/AuthButtons"; import { useLocalSearchParams, useRouter } from "expo-router"; import { appSignIn } from "../../services/store"; @@ -101,12 +101,12 @@ const LoginScreen = () => { How have you been? - setEmail(text)} invalid={invalidLogin} /> - setPassword(text)} invalid={invalidLogin} diff --git a/client/src/components/Auth/SignUpScreen.tsx b/client/src/components/Auth/SignUpScreen.tsx index f4a639cb1..18bc5dade 100644 --- a/client/src/components/Auth/SignUpScreen.tsx +++ b/client/src/components/Auth/SignUpScreen.tsx @@ -12,11 +12,10 @@ import { TouchableOpacity, } from "react-native"; import { - SignUpEmailInput, - SignUpPasswordInput, - SignUpConfirmPasswordInput, + EmailInput, + PasswordInput, + ConfirmPasswordInput, } from "../Common/CustomInputs"; -import { LogInEmailInput, LogInPasswordInput } from "../Common/CustomInputs"; import SignUpButton from "../Common/SignUpButton"; import { AuthenticationErrorMessage, @@ -41,6 +40,7 @@ const SignUpScreen = () => { const [confirmPassword, setConfirmPassword] = React.useState(""); const [authResponse, setAuthResponse] = React.useState(); + const [invalidLogin, invalidateLogin] = React.useState(false); const onHandleSubmit = async () => { Keyboard.dismiss(); @@ -70,20 +70,20 @@ const SignUpScreen = () => { return null; } - const handleGoogleSignIn = async () => { - console.log("Google Sign In"); + const handleGoogleSignUp = async () => { + console.log("Google Sign Up"); }; const handleFacebookSignIn = async () => { - console.log("Facebook Sign In"); + console.log("Facebook Sign Up"); }; - const handleAppleSignIn = async () => { - console.log("Apple Sign In"); + const handleAppleSignUp = async () => { + console.log("Apple Sign Up"); }; - const handleGithubSignIn = async () => { - console.log("Github Sign In"); + const handleGithubSignUp = async () => { + console.log("Github Sign Up"); }; return ( @@ -106,32 +106,26 @@ const SignUpScreen = () => { Talk to people near you - setEmail(text)} - // invalid={invalidLogin} + invalid={invalidLogin} /> - setPassword(text)} - //invalid={invalidLogin} + invalid={invalidLogin} /> - setPassword(text)} - //invalid={invalidLogin} + onChangeText={(text) => setConfirmPassword(text)} + invalid={invalidLogin} /> - - - Forgot password? - - + @@ -144,11 +138,11 @@ const SignUpScreen = () => { { companyName="facebook" /> - Don't have an account? + Already have an account? router.replace({ pathname: "/signup" })} + onPress={() => router.replace({ pathname: "/login" })} > { { color: "#5dbea3", textDecorationLine: "underline" }, ]} > - Sign up + Log in @@ -191,45 +185,45 @@ const SignUpScreen = () => { // Make an account with Google (TEMP) ); - return ( - - - - - - Welcome! - - - setEmail(text)} - /> - setPassword(text)} - /> - setConfirmPassword(text)} - /> - - - - - - + // return ( + // + // + // + // + // + // Welcome! + // + // + // setEmail(text)} + // /> + // setPassword(text)} + // /> + // setConfirmPassword(text)} + // /> + // + // + // + // + // + // - - setAuthResponse(undefined)} - /> - - - - ); + // + // setAuthResponse(undefined)} + // /> + // + // + // + // ); }; const styles = StyleSheet.create({ @@ -245,7 +239,6 @@ const styles = StyleSheet.create({ gap: Dimensions.get("window").height * 0.029, }, - //This is an example of where the error message could be error_container: { display: "flex", justifyContent: "space-around", diff --git a/client/src/components/Common/CustomInputs.tsx b/client/src/components/Common/CustomInputs.tsx index 026b3816f..d758fc16a 100644 --- a/client/src/components/Common/CustomInputs.tsx +++ b/client/src/components/Common/CustomInputs.tsx @@ -1,29 +1,21 @@ -import React from 'react' -import { TextInput, View, StyleSheet, Dimensions, Platform } from 'react-native' -import { ChatInputProps } from '../../types/Props'; -import { ChatSendButton } from './CustomButtons' +import React from "react"; +import { + TextInput, + View, + StyleSheet, + Dimensions, + Platform, +} from "react-native"; +import { ChatInputProps } from "../../types/Props"; +import { ChatSendButton } from "./CustomButtons"; -export const WelcomeEmailInput: React.FC = ({ value, onChangeText }) => { - return ( - - ) -} - -// Maybe will put LogInEmailInput & LogInPasswordInput two together into a single component - -export const LogInEmailInput: React.FC = ({ +export const WelcomeEmailInput: React.FC = ({ value, onChangeText, - invalid, }) => { return ( = ( ); }; -export const LogInPasswordInput: React.FC = ({ +// Maybe will put LogInEmailInput & LogInPasswordInput two together into a single component + +export const EmailInput: React.FC = ({ value, onChangeText, invalid, @@ -40,24 +34,6 @@ export const LogInPasswordInput: React.FC return ( - ); -}; - -// sign up screen inputs - -export const SignUpEmailInput: React.FC = ({ - value, - onChangeText, -}) => { - return ( - = ({ ); }; -export const SignUpPasswordInput: React.FC = ({ +export const PasswordInput: React.FC = ({ value, onChangeText, + invalid, }) => { return ( = ({ ); }; -export const SignUpConfirmPasswordInput: React.FC = ({ +// sign up screen inputs +export const ConfirmPasswordInput: React.FC = ({ value, onChangeText, }) => { From 027451a62b3757da0e22ba997c9994f0ee460932 Mon Sep 17 00:00:00 2001 From: Dylan Date: Tue, 26 Mar 2024 18:02:06 -0400 Subject: [PATCH 06/11] Updated input container to use gap instead of height --- client/src/components/Auth/LoginScreen.tsx | 2 +- client/src/components/Auth/SignUpScreen.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/client/src/components/Auth/LoginScreen.tsx b/client/src/components/Auth/LoginScreen.tsx index da200e326..f8331012f 100644 --- a/client/src/components/Auth/LoginScreen.tsx +++ b/client/src/components/Auth/LoginScreen.tsx @@ -213,7 +213,7 @@ const styles = StyleSheet.create({ width: "100%", justifyContent: "space-around", alignItems: "center", - height: Dimensions.get("window").height * 0.15, + gap: Dimensions.get("window").height * 0.02, }, button_container: { diff --git a/client/src/components/Auth/SignUpScreen.tsx b/client/src/components/Auth/SignUpScreen.tsx index 18bc5dade..32a00b3a0 100644 --- a/client/src/components/Auth/SignUpScreen.tsx +++ b/client/src/components/Auth/SignUpScreen.tsx @@ -253,7 +253,7 @@ const styles = StyleSheet.create({ width: "100%", justifyContent: "space-around", alignItems: "center", - height: Dimensions.get("window").height * 0.15, + gap: Dimensions.get("window").height * 0.02, }, button_container: { From b8ec0ed971531264855eb0096f6b0d6b6d560958 Mon Sep 17 00:00:00 2001 From: Dylan Date: Tue, 26 Mar 2024 18:28:11 -0400 Subject: [PATCH 07/11] Separated email errors and password errors --- client/src/components/Auth/SignUpScreen.tsx | 28 +++++++++++++------ client/src/components/Common/CustomInputs.tsx | 9 +++--- 2 files changed, 23 insertions(+), 14 deletions(-) diff --git a/client/src/components/Auth/SignUpScreen.tsx b/client/src/components/Auth/SignUpScreen.tsx index 32a00b3a0..05d34bd44 100644 --- a/client/src/components/Auth/SignUpScreen.tsx +++ b/client/src/components/Auth/SignUpScreen.tsx @@ -40,7 +40,10 @@ const SignUpScreen = () => { const [confirmPassword, setConfirmPassword] = React.useState(""); const [authResponse, setAuthResponse] = React.useState(); - const [invalidLogin, invalidateLogin] = React.useState(false); + //grays out password on password error + const [invalidPassword, invalidatePassword] = React.useState(false); + //grays out email on email error + const [invalidEmail, invalidateEmail] = React.useState(false); const onHandleSubmit = async () => { Keyboard.dismiss(); @@ -49,6 +52,7 @@ const SignUpScreen = () => { const nonmatching_password_error: AuthenticationResponse = { error: new CustomError("Invalid password", "Passwords do not match"), }; + invalidatePassword(true); setAuthResponse(nonmatching_password_error); return; @@ -108,18 +112,24 @@ const SignUpScreen = () => { setEmail(text)} - invalid={invalidLogin} + onChangeText={(text) => { + invalidateEmail(false); + setEmail(text); + }} + invalid={invalidEmail} /> setPassword(text)} - invalid={invalidLogin} + onChangeText={(text) => { + invalidatePassword(false); + setPassword(text); + }} + invalid={invalidPassword} /> - setConfirmPassword(text)} - invalid={invalidLogin} + invalid={invalidPassword} /> @@ -269,7 +279,7 @@ const styles = StyleSheet.create({ alignItems: "flex-start", width: "100%", marginBottom: Dimensions.get("window").height * 0.019, - marginTop: Dimensions.get("window").height * 0.2, + marginTop: Dimensions.get("window").height * 0.17, }, header_text: { diff --git a/client/src/components/Common/CustomInputs.tsx b/client/src/components/Common/CustomInputs.tsx index d758fc16a..996801ea7 100644 --- a/client/src/components/Common/CustomInputs.tsx +++ b/client/src/components/Common/CustomInputs.tsx @@ -60,13 +60,12 @@ export const PasswordInput: React.FC = ({ }; // sign up screen inputs -export const ConfirmPasswordInput: React.FC = ({ - value, - onChangeText, -}) => { +export const ConfirmPasswordInput: React.FC< + ChatInputProps & { invalid: boolean } +> = ({ value, onChangeText, invalid }) => { return ( Date: Thu, 28 Mar 2024 17:21:32 -0400 Subject: [PATCH 08/11] Added extra error case and sign up button --- .../Auth/AuthenticationResponse.tsx | 4 +- client/src/components/Auth/SignUpScreen.tsx | 6 +- client/src/components/Common/AuthButtons.tsx | 19 +++ client/src/services/store.ts | 108 ++++++++++-------- 4 files changed, 84 insertions(+), 53 deletions(-) diff --git a/client/src/components/Auth/AuthenticationResponse.tsx b/client/src/components/Auth/AuthenticationResponse.tsx index 041d7b4b8..1f0e5bed8 100644 --- a/client/src/components/Auth/AuthenticationResponse.tsx +++ b/client/src/components/Auth/AuthenticationResponse.tsx @@ -45,10 +45,12 @@ const decodeFirebaseError = (error: FirebaseError) => { return "Too many requests, please try again later"; case "auth/email-already-in-use": return "Email already in use"; + case "auth/invalid-email": + return "Invalid email"; default: return "Unknown error"; } -} +}; const decodeCustomError = (error: CustomError) => { return error.message; diff --git a/client/src/components/Auth/SignUpScreen.tsx b/client/src/components/Auth/SignUpScreen.tsx index 05d34bd44..f881838a1 100644 --- a/client/src/components/Auth/SignUpScreen.tsx +++ b/client/src/components/Auth/SignUpScreen.tsx @@ -16,7 +16,7 @@ import { PasswordInput, ConfirmPasswordInput, } from "../Common/CustomInputs"; -import SignUpButton from "../Common/SignUpButton"; + import { AuthenticationErrorMessage, AuthenticationResponse, @@ -25,7 +25,7 @@ import { import { useLocalSearchParams, useRouter } from "expo-router"; import { appSignUp } from "../../services/store"; import { ArrowLeftCircle } from "react-native-feather"; -import { LogInButton, ExternalLoginButton } from "../Common/AuthButtons"; +import { SignUpButton, ExternalLoginButton } from "../Common/AuthButtons"; const SignUpScreen = () => { const router = useRouter(); @@ -133,7 +133,7 @@ const SignUpScreen = () => { /> - + diff --git a/client/src/components/Common/AuthButtons.tsx b/client/src/components/Common/AuthButtons.tsx index 973611948..55e75a769 100644 --- a/client/src/components/Common/AuthButtons.tsx +++ b/client/src/components/Common/AuthButtons.tsx @@ -91,6 +91,25 @@ export const LogInButton: React.FC<{ onPress?: () => void }> = ({ ); }; +export const SignUpButton: React.FC<{ onPress?: () => void }> = ({ + onPress, +}) => { + const [fontsLoaded, fontError] = useFonts({ + "Gilroy-ExtraBold": require("../../../assets/fonts/Gilroy-ExtraBold.otf"), + "Gilroy-Light": require("../../../assets/fonts/Gilroy-Light.otf"), + }); + + if (!fontsLoaded && !fontError) { + return null; + } + + return ( + + Sign Up + + ); +}; + export const ExternalLoginButton: React.FC<{ onPress?: () => void; companyName: string; diff --git a/client/src/services/store.ts b/client/src/services/store.ts index 9b5321256..2d6cd8c24 100644 --- a/client/src/services/store.ts +++ b/client/src/services/store.ts @@ -1,66 +1,76 @@ -import { User, createUserWithEmailAndPassword, onAuthStateChanged, signInWithEmailAndPassword, signOut } from 'firebase/auth' -import { Store } from 'pullstate' -import { auth, app } from '../configs/firebaseConfig' -import { FirebaseError } from 'firebase/app'; -import { useUser } from '../contexts/UserContext'; +import { + User, + createUserWithEmailAndPassword, + onAuthStateChanged, + signInWithEmailAndPassword, + signOut, +} from "firebase/auth"; +import { Store } from "pullstate"; +import { auth, app } from "../configs/firebaseConfig"; +import { FirebaseError } from "firebase/app"; +import { useUser } from "../contexts/UserContext"; interface AuthStoreInterface { - isLoggedin: boolean, - initialized: boolean, - userAuthInfo: User | null, + isLoggedin: boolean; + initialized: boolean; + userAuthInfo: User | null; } export const AuthStore = new Store({ - isLoggedin: false, - initialized: false, - userAuthInfo: null, -}) + isLoggedin: false, + initialized: false, + userAuthInfo: null, +}); const unsub = onAuthStateChanged(auth, (user) => { - console.log('onAuthStateChanged', user); - AuthStore.update((store) => { - store.initialized = true, - store.isLoggedin = user ? true : false, - store.userAuthInfo = user - }) + console.log("onAuthStateChanged", user); + AuthStore.update((store) => { + (store.initialized = true), + (store.isLoggedin = user ? true : false), + (store.userAuthInfo = user); + }); }); export const appSignIn = async (email: string, password: string) => { - try { - const response = await signInWithEmailAndPassword(auth, email, password); - AuthStore.update((store) => { - store.userAuthInfo = response?.user; - store.isLoggedin = response?.user ? true : false; - }); - return { user: auth.currentUser }; - } catch (e) { - return { error: e }; - } + try { + const response = await signInWithEmailAndPassword(auth, email, password); + AuthStore.update((store) => { + store.userAuthInfo = response?.user; + store.isLoggedin = response?.user ? true : false; + }); + return { user: auth.currentUser }; + } catch (e) { + return { error: e }; + } }; export const appSignOut = async () => { - try { - await signOut(auth); - AuthStore.update((store) => { - store.userAuthInfo = null; - store.isLoggedin = false; - }); - return { user: null} - } catch (e) { - return { error: e }; - } + try { + await signOut(auth); + AuthStore.update((store) => { + store.userAuthInfo = null; + store.isLoggedin = false; + }); + return { user: null }; + } catch (e) { + return { error: e }; + } }; export const appSignUp = async (email: string, password: string) => { - try { - const response = await createUserWithEmailAndPassword(auth, email, password); - - AuthStore.update((store) => { - store.userAuthInfo = response.user; - store.isLoggedin = response.user ? true : false; - }); - return { user: auth.currentUser} - } catch (e) { - return { error: e }; - } + try { + const response = await createUserWithEmailAndPassword( + auth, + email, + password + ); + + AuthStore.update((store) => { + store.userAuthInfo = response.user; + store.isLoggedin = response.user ? true : false; + }); + return { user: auth.currentUser }; + } catch (e) { + return { error: e }; + } }; From 6e3d666fe98e1f2db3512f449de3b65a31c47758 Mon Sep 17 00:00:00 2001 From: Dylan Date: Thu, 28 Mar 2024 17:22:20 -0400 Subject: [PATCH 09/11] Renamed externalloginbutton to externalauthbutton --- client/src/components/Auth/LoginScreen.tsx | 10 +++++----- client/src/components/Auth/SignUpScreen.tsx | 10 +++++----- client/src/components/Common/AuthButtons.tsx | 2 +- 3 files changed, 11 insertions(+), 11 deletions(-) diff --git a/client/src/components/Auth/LoginScreen.tsx b/client/src/components/Auth/LoginScreen.tsx index f8331012f..d61dc4cf5 100644 --- a/client/src/components/Auth/LoginScreen.tsx +++ b/client/src/components/Auth/LoginScreen.tsx @@ -12,7 +12,7 @@ import { TouchableOpacity, } from "react-native"; import { EmailInput, PasswordInput } from "../Common/CustomInputs"; -import { LogInButton, ExternalLoginButton } from "../Common/AuthButtons"; +import { LogInButton, ExternalAuthButton } from "../Common/AuthButtons"; import { useLocalSearchParams, useRouter } from "expo-router"; import { appSignIn } from "../../services/store"; import { @@ -133,19 +133,19 @@ const LoginScreen = () => { - - - - diff --git a/client/src/components/Auth/SignUpScreen.tsx b/client/src/components/Auth/SignUpScreen.tsx index f881838a1..ef90b2b6d 100644 --- a/client/src/components/Auth/SignUpScreen.tsx +++ b/client/src/components/Auth/SignUpScreen.tsx @@ -25,7 +25,7 @@ import { import { useLocalSearchParams, useRouter } from "expo-router"; import { appSignUp } from "../../services/store"; import { ArrowLeftCircle } from "react-native-feather"; -import { SignUpButton, ExternalLoginButton } from "../Common/AuthButtons"; +import { SignUpButton, ExternalAuthButton } from "../Common/AuthButtons"; const SignUpScreen = () => { const router = useRouter(); @@ -147,19 +147,19 @@ const SignUpScreen = () => { - - - - diff --git a/client/src/components/Common/AuthButtons.tsx b/client/src/components/Common/AuthButtons.tsx index 55e75a769..7b9c13088 100644 --- a/client/src/components/Common/AuthButtons.tsx +++ b/client/src/components/Common/AuthButtons.tsx @@ -110,7 +110,7 @@ export const SignUpButton: React.FC<{ onPress?: () => void }> = ({ ); }; -export const ExternalLoginButton: React.FC<{ +export const ExternalAuthButton: React.FC<{ onPress?: () => void; companyName: string; imageSource?: ImageSourcePropType; From c7892ad8fb6ebab3e1066dec74c8bc3408b02dea Mon Sep 17 00:00:00 2001 From: Dylan Date: Thu, 28 Mar 2024 17:57:09 -0400 Subject: [PATCH 10/11] Removed unused code and imports --- client/src/components/Auth/SignUpScreen.tsx | 46 +-------------------- 1 file changed, 1 insertion(+), 45 deletions(-) diff --git a/client/src/components/Auth/SignUpScreen.tsx b/client/src/components/Auth/SignUpScreen.tsx index ef90b2b6d..4d8129be3 100644 --- a/client/src/components/Auth/SignUpScreen.tsx +++ b/client/src/components/Auth/SignUpScreen.tsx @@ -1,12 +1,9 @@ -import React, { useEffect } from "react"; import { useFonts } from "expo-font"; import { View, Text, StyleSheet, Dimensions, - KeyboardAvoidingView, - Platform, TouchableWithoutFeedback, Keyboard, TouchableOpacity, @@ -26,6 +23,7 @@ import { useLocalSearchParams, useRouter } from "expo-router"; import { appSignUp } from "../../services/store"; import { ArrowLeftCircle } from "react-native-feather"; import { SignUpButton, ExternalAuthButton } from "../Common/AuthButtons"; +import React from "react"; const SignUpScreen = () => { const router = useRouter(); @@ -189,51 +187,9 @@ const SignUpScreen = () => { - - // Log In - - // Make an account with Google (TEMP) ); - // return ( - // - // - // - // - // - // Welcome! - // - // - // setEmail(text)} - // /> - // setPassword(text)} - // /> - // setConfirmPassword(text)} - // /> - // - // - // - // - // - // - // - // setAuthResponse(undefined)} - // /> - // - // - // - // ); }; const styles = StyleSheet.create({ From 8198ce74dc349cc7bd1aa3e40332412feccf7d9e Mon Sep 17 00:00:00 2001 From: Dylan Date: Thu, 28 Mar 2024 17:57:54 -0400 Subject: [PATCH 11/11] Removed unused email import --- client/src/components/Auth/SignUpScreen.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/client/src/components/Auth/SignUpScreen.tsx b/client/src/components/Auth/SignUpScreen.tsx index 4d8129be3..38bd48e8a 100644 --- a/client/src/components/Auth/SignUpScreen.tsx +++ b/client/src/components/Auth/SignUpScreen.tsx @@ -32,7 +32,6 @@ const SignUpScreen = () => { "Quicksand-Medium": require("../../../assets/fonts/Quicksand-Medium.ttf"), }); - const { inputEmail } = useLocalSearchParams(); const [email, setEmail] = React.useState(""); const [password, setPassword] = React.useState(""); const [confirmPassword, setConfirmPassword] = React.useState("");