-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #29 from NavMapLabs/Feature/auth-modal
added logic for login, and signin
- Loading branch information
Showing
8 changed files
with
251 additions
and
166 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,174 +1,219 @@ | ||
| import { Text, View, StyleSheet, Pressable, Modal } from "react-native" | ||
| import { Text, View, StyleSheet, Pressable, Modal } from "react-native"; | ||
| import React, { useState } from "react"; | ||
| import { TextInput as PaperTextInput, IconButton } from 'react-native-paper'; | ||
| import { | ||
| TextInput as PaperTextInput, | ||
| IconButton, | ||
| Props, | ||
| } from "react-native-paper"; | ||
|
|
||
| type LogInProps = { | ||
| isVisible: boolean, | ||
| onClose: () => void | ||
| toggleSignUp: () => void | ||
| } | ||
| import { AuthError, User } from "firebase/auth"; | ||
|
|
||
| const LogInModal = (props: LogInProps) => { | ||
| const [emailText, setEmailText] = useState(''); | ||
| const [passwordText, setPasswordText] = useState(''); | ||
| import { emailVerification, logIn, logOut } from "./firebaseAuth"; | ||
|
|
||
| const [passwordVisible, setPasswordVisible] = useState(true); | ||
| type LogInProps = { | ||
| isVisible: boolean; | ||
| onClose: () => void; | ||
| toggleSignUp: () => void; | ||
| }; | ||
|
|
||
| const [emailBorderColor, setEmailBorderColor] = useState('gray'); | ||
| const [PasswordBorderColor, setPasswordBorderColor] = useState('gray'); | ||
| const LogInModal = (props: LogInProps) => { | ||
| const [emailText, setEmailText] = useState(""); | ||
| const [passwordText, setPasswordText] = useState(""); | ||
|
|
||
| return ( | ||
| <Modal | ||
| transparent={true} | ||
| animationType="fade" | ||
| visible={props.isVisible} | ||
| onRequestClose={props.onClose} | ||
| > | ||
| <Pressable style={styles.container} onPress={props.onClose}> | ||
| <Pressable style={styles.box} onPress={(e) => e.stopPropagation()} > | ||
| <View style={styles.header}> | ||
| <IconButton icon="close" size={24} onPress={props.onClose} /> | ||
| </View> | ||
| <Text style={styles.label}>Email</Text> | ||
| <PaperTextInput | ||
| style={[styles.paperInput, { borderColor: emailBorderColor }]} | ||
| onFocus={() => setEmailBorderColor('black')} // border color on focus | ||
| onBlur={() => setEmailBorderColor('gray')} // border color on focus | ||
| const [passwordVisible, setPasswordVisible] = useState(true); | ||
|
|
||
| placeholder='Value' | ||
| placeholderTextColor="#a9a9a9" | ||
| value={emailText} | ||
| onChangeText={setEmailText} | ||
| const [emailBorderColor, setEmailBorderColor] = useState("gray"); | ||
| const [PasswordBorderColor, setPasswordBorderColor] = useState("gray"); | ||
|
|
||
| theme={{ colors: { primary: "transparent" } }} // this removes the underline | ||
| underlineColor="transparent" // this removes the any extra underline | ||
| /* obtain data here */ | ||
| /> | ||
| <Text style={styles.label}>Password</Text> | ||
| <PaperTextInput | ||
| style={[styles.paperInput, { borderColor: PasswordBorderColor }]} | ||
| onFocus={() => setPasswordBorderColor('black')} // border color on focus | ||
| onBlur={() => setPasswordBorderColor('gray')} // border color on focus | ||
| const handleLogIn = async () => { | ||
| try { | ||
| const user = await logIn(emailText, passwordText); | ||
| await checkIfEmailVerified(user, props.onClose); | ||
| } catch (error: unknown) { | ||
| if ( | ||
| (error as AuthError).code === "auth/user-not-found" || | ||
| (error as AuthError).code === "auth/wrong-password" | ||
| ) { | ||
| alert("Email already in use"); | ||
| } else if ((error as AuthError).code === "auth/invalid-email") { | ||
| alert("No Email Found, please Sign Up!"); | ||
| } else if ((error as AuthError).code === "auth/too-many-request") { | ||
| alert("Too many unsuccessful login attempts. Please try again later."); | ||
| //invalid-credentials (just say wrong email or password) | ||
| } else { | ||
| console.log((error as AuthError).code); | ||
| alert("Sign In error: " + (error as Error).message); | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| placeholder='Value' | ||
| placeholderTextColor="#a9a9a9" | ||
| secureTextEntry={passwordVisible} | ||
| value={passwordText} | ||
| onChangeText={setPasswordText} | ||
| right={ | ||
| <PaperTextInput.Icon | ||
| icon={passwordVisible ? 'eye' : 'eye-off'} | ||
| onPress={() => setPasswordVisible(!passwordVisible)} | ||
| style={styles.icon} // this adjusts eye icon position | ||
| /> | ||
| } | ||
| theme={{ colors: { primary: "transparent" } }} // this removes the underline | ||
| underlineColor="transparent" // this removes any extra underline | ||
| /* obtain data here */ | ||
| /> | ||
| <Pressable | ||
| style={styles.button} | ||
| onPress={() => { | ||
| /* handle action here */ | ||
| }} | ||
| > | ||
| <Text style={styles.buttonText}>Sign In</Text> | ||
| </Pressable> | ||
| <Text | ||
| style={styles.textSpace}> | ||
| <Text | ||
| style={styles.underline} | ||
| onPress={() => { | ||
| /* handle action here */ | ||
| }} | ||
| > | ||
| Forgot password? | ||
| </Text> | ||
| </Text> | ||
| <Text | ||
| style={styles.underline} | ||
| onPress={() => { | ||
| props.toggleSignUp() | ||
| console.log("Signup Pressed") | ||
| props.onClose() | ||
| }} | ||
| > | ||
| Need an account? Sign-up here. | ||
| </Text> | ||
| </Pressable> | ||
| </Pressable> | ||
| </Modal> | ||
| ); | ||
| return ( | ||
| <Modal | ||
| transparent={true} | ||
| animationType="fade" | ||
| visible={props.isVisible} | ||
| onRequestClose={props.onClose} | ||
| > | ||
| <Pressable style={styles.container} onPress={props.onClose}> | ||
| <Pressable style={styles.box} onPress={(e) => e.stopPropagation()}> | ||
| <View style={styles.header}> | ||
| <IconButton icon="close" size={24} onPress={props.onClose} /> | ||
| </View> | ||
| <Text style={styles.label}>Email</Text> | ||
| <PaperTextInput | ||
| style={[styles.paperInput, { borderColor: emailBorderColor }]} | ||
| onFocus={() => setEmailBorderColor("black")} // border color on focus | ||
| onBlur={() => setEmailBorderColor("gray")} // border color on focus | ||
| placeholder="Value" | ||
| placeholderTextColor="#a9a9a9" | ||
| value={emailText} | ||
| onChangeText={setEmailText} | ||
| theme={{ colors: { primary: "transparent" } }} // this removes the underline | ||
| underlineColor="transparent" // this removes the any extra underline | ||
| /* obtain data here */ | ||
| /> | ||
| <Text style={styles.label}>Password</Text> | ||
| <PaperTextInput | ||
| style={[styles.paperInput, { borderColor: PasswordBorderColor }]} | ||
| onFocus={() => setPasswordBorderColor("black")} // border color on focus | ||
| onBlur={() => setPasswordBorderColor("gray")} // border color on focus | ||
| placeholder="Value" | ||
| placeholderTextColor="#a9a9a9" | ||
| secureTextEntry={passwordVisible} | ||
| value={passwordText} | ||
| onChangeText={setPasswordText} | ||
| right={ | ||
| <PaperTextInput.Icon | ||
| icon={passwordVisible ? "eye" : "eye-off"} | ||
| onPress={() => setPasswordVisible(!passwordVisible)} | ||
| style={styles.icon} // this adjusts eye icon position | ||
| /> | ||
| } | ||
| theme={{ colors: { primary: "transparent" } }} // this removes the underline | ||
| underlineColor="transparent" // this removes any extra underline | ||
| /* obtain data here */ | ||
| /> | ||
| <Pressable | ||
| style={styles.button} | ||
| onPress={() => { | ||
| handleLogIn(); | ||
| }} | ||
| > | ||
| <Text style={styles.buttonText}>Sign In</Text> | ||
| </Pressable> | ||
| <Text style={styles.textSpace}> | ||
| <Text | ||
| style={styles.underline} | ||
| onPress={() => { | ||
| /* handle action here */ | ||
| }} | ||
| > | ||
| Forgot password? | ||
| </Text> | ||
| </Text> | ||
| <Text | ||
| style={styles.underline} | ||
| onPress={() => { | ||
| props.toggleSignUp(); | ||
| console.log("Signup Pressed"); | ||
| props.onClose(); | ||
| }} | ||
| > | ||
| Need an account? Sign-up here. | ||
| </Text> | ||
| </Pressable> | ||
| </Pressable> | ||
| </Modal> | ||
| ); | ||
| }; | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| container: { | ||
| flex: 1, | ||
| backgroundColor: 'rgba(0,0,0,0.5)', // making the background page transparent | ||
| justifyContent: 'center', | ||
| alignItems: 'center', | ||
| }, | ||
| box: { | ||
| backgroundColor: 'white', | ||
| borderRadius: 10, | ||
| padding: 15, | ||
| width: 400, | ||
| alignItems: "center", | ||
| }, | ||
| underline: { | ||
| textDecorationLine: 'underline', | ||
| color: 'black', // set this color of the underline 'black' | ||
| }, | ||
| button: { | ||
| backgroundColor: '#71E0BC', | ||
| borderRadius: 5, | ||
| padding: 10, | ||
| alignItems: 'center', | ||
| justifyContent: 'center', | ||
| marginVertical: 10, | ||
| width: 350, | ||
| }, | ||
| buttonText: { | ||
| color: 'black', // Set the text color to black | ||
| }, | ||
| textSpace: { | ||
| marginTop: 4, // Space before text | ||
| marginBottom: 8, // Space after text | ||
| }, | ||
| label: { | ||
| alignSelf: 'flex-start', // align labels to the start | ||
| marginLeft: 10, // Add some margin to the left to match the input margin | ||
| marginBottom: 1, // Space between label and input | ||
| }, | ||
| icon: { | ||
| marginTop: 20, | ||
| }, | ||
| paperInput: { | ||
| borderWidth: 2, | ||
| borderColor: '#777', | ||
| backgroundColor: 'white', | ||
| paddingHorizontal: 9, | ||
| paddingVertical: 8, | ||
| margin: 10, | ||
| borderRadius: 6, | ||
| width: 350, | ||
| height: 23, | ||
| // this adjust font size and line height to the standard | ||
| fontSize: 14, | ||
| }, | ||
| header: { | ||
| width: '100%', | ||
| height: 15, | ||
| alignItems: "flex-end", | ||
| justifyContent: 'center', | ||
| marginLeft: 30, | ||
| }, | ||
| container: { | ||
| flex: 1, | ||
| backgroundColor: "rgba(0,0,0,0.5)", // making the background page transparent | ||
| justifyContent: "center", | ||
| alignItems: "center", | ||
| }, | ||
| box: { | ||
| backgroundColor: "white", | ||
| borderRadius: 10, | ||
| padding: 15, | ||
| width: 400, | ||
| alignItems: "center", | ||
| }, | ||
| underline: { | ||
| textDecorationLine: "underline", | ||
| color: "black", // set this color of the underline 'black' | ||
| }, | ||
| button: { | ||
| backgroundColor: "#71E0BC", | ||
| borderRadius: 5, | ||
| padding: 10, | ||
| alignItems: "center", | ||
| justifyContent: "center", | ||
| marginVertical: 10, | ||
| width: 350, | ||
| }, | ||
| buttonText: { | ||
| color: "black", // Set the text color to black | ||
| }, | ||
| textSpace: { | ||
| marginTop: 4, // Space before text | ||
| marginBottom: 8, // Space after text | ||
| }, | ||
| label: { | ||
| alignSelf: "flex-start", // align labels to the start | ||
| marginLeft: 10, // Add some margin to the left to match the input margin | ||
| marginBottom: 1, // Space between label and input | ||
| }, | ||
| icon: { | ||
| marginTop: 20, | ||
| }, | ||
| paperInput: { | ||
| borderWidth: 2, | ||
| borderColor: "#777", | ||
| backgroundColor: "white", | ||
| paddingHorizontal: 9, | ||
| paddingVertical: 8, | ||
| margin: 10, | ||
| borderRadius: 6, | ||
| width: 350, | ||
| height: 23, | ||
| // this adjust font size and line height to the standard | ||
| fontSize: 14, | ||
| }, | ||
| header: { | ||
| width: "100%", | ||
| height: 15, | ||
| alignItems: "flex-end", | ||
| justifyContent: "center", | ||
| marginLeft: 30, | ||
| }, | ||
| }); | ||
|
|
||
| export default LogInModal; | ||
|
|
||
| const checkIfEmailVerified = async (user: User, onClose: () => void) => { | ||
| if (user) { | ||
| if (!user.emailVerified) { | ||
| // means that user is still not verified yet, need them to be verified | ||
| await emailVerification(); | ||
| await logOut(); | ||
|
|
||
| //give a warning like an alert to ask to verify | ||
| alert("Please verify your email."); | ||
| } | ||
| //If verified, navigate to other place | ||
| console.log("Woo Verified, I'll navigate you later"); | ||
|
|
||
| onClose(); | ||
| } else { | ||
| throw new Error("Failed to check User"); | ||
| } | ||
| }; | ||
|
|
||
| /* self-note: | ||
| when clocking the navigation 'link', | ||
| it erases the most components from the main background. figure out how to prevent that. | ||
| setvisible prolly would work for the 'link' (?) | ||
| */ | ||
| */ |
Oops, something went wrong.