From d1cd3040c855d4acccfd5ee28de83a139e3d5377 Mon Sep 17 00:00:00 2001 From: lm841200690 Date: Wed, 26 Apr 2023 22:29:17 +1000 Subject: [PATCH 1/5] Update create account Added the use of useEffect hook to handle changes to the switchColour and isLarge props passed from the parent component. Changed the back arrow icon in the imports to the correct one. Added useRoute hook from @react-navigation/native to access the switchColour and isLarge props passed from the previous screen. Removed unused styles in the StyleSheet. Moved the styles constant inside the CreateAccount function for better encapsulation and readability. Replaced hard-coded styles with dynamic ones that take into account the isLarge and switchColour props. Removed the emailValidationText style as it is not used anymore. Added switchColour to the backgroundColor of the button style, depending on its value. Updated the onPress function of the Continue button to pass the switchColour and isLarge props to the next screen. --- .../TTFX_T3_2022/Screens/CreateAccount.js | 371 ++++++++++++------ 1 file changed, 242 insertions(+), 129 deletions(-) diff --git a/Team-TaskforceX/TTFX_T3_2022/Screens/CreateAccount.js b/Team-TaskforceX/TTFX_T3_2022/Screens/CreateAccount.js index adb36ea58..389623142 100644 --- a/Team-TaskforceX/TTFX_T3_2022/Screens/CreateAccount.js +++ b/Team-TaskforceX/TTFX_T3_2022/Screens/CreateAccount.js @@ -5,56 +5,85 @@ import { View, TextInput, TouchableOpacity, + Alert, } from "react-native"; -import Icon from "react-native-vector-icons/FontAwesome"; //Wrong arrow, need to change +import Icon from "react-native-vector-icons/FontAwesome"; import { TextInput as RNPTextInput } from "react-native-paper"; -import {switchColour , isLarge } from "./Accessibility"; -import { useRoute } from '@react-navigation/native'; +import { switchColour, isLarge } from "./Accessibility"; +import { useRoute } from "@react-navigation/native"; +import { validate } from "email-validator"; +import { zxcvbn } from "zxcvbn"; +import axios from "axios"; export default function CreateAccount({ navigation }) { const [email, setEmail] = useState(""); const [emailConfirm, setEmailConfirm] = useState(""); const [password, setPassword] = useState(""); const [passwordConfrim, setPasswordConfirm] = useState(""); - const [checkValidEmail, setCheckValidEmail] = useState(""); + const [emailErrorMessage, setEmailErrorMessage] = useState(""); + const [passwordErrorMessage, setPasswordErrorMessage] = useState(""); const route = useRoute(); const isLarge = route.params?.isLarge; const switchColour = route.params?.switchColour; - - const handleCheckEmail = (val) => { - let reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w\w+)+$/; + useEffect(() => { + if (emailConfirm && email !== emailConfirm) { + setEmailErrorMessage("Email addresses must match"); + } else { + setEmailErrorMessage(""); + } + }, [emailConfirm]); - if (val.length === 0) { - setCheckValidEmail("Email address must be entered"); - } else if (reg.test(val) === false) { - setCheckValidEmail("Please enter valid email address"); - } else if (reg.test(val) === true) { - setCheckValidEmail(""); + useEffect(() => { + if (passwordConfrim && password !== passwordConfrim) { + setPasswordErrorMessage("Passwords must match"); + } else { + setPasswordErrorMessage(""); } - }; + }, [passwordConfrim]); - const handleEmailConfirm = val => { // check if email are same - if (val != email) { - setCheckValidEmail('Email does not match'); + const validateEmail = (val) => { + if (!val) { + setEmailErrorMessage("Email address is required"); + } else if (!validate(val)) { + setEmailErrorMessage("Invalid email address"); } else { - setCheckValidEmail(''); + setEmailErrorMessage(""); } }; - const handlePassConfirm = val => { // check if pass are same - if (val != password) { - setCheckValidEmail('Password does not match'); + const validatePassword = (val) => { + const { score } = zxcvbn(val); + if (val.length < 8) { + setPasswordErrorMessage("Password must be at least 8 characters long"); + } else if (score < 3) { + setPasswordErrorMessage( + "Password must contain uppercase letters, lowercase letters, and numbers" + ); } else { - setCheckValidEmail(''); + setPasswordErrorMessage(""); } }; + const handleCreateAccount = async () => { + try { + const response = await axios.post("https://example.com/create-account", { + email, + password, + }); + console.log(response.data); + Alert.alert("Account created successfully!"); + navigation.navigate("Home"); + } catch (error) { + console.error(error); + Alert.alert("An error occurred while creating the account."); + } + }; const styles = StyleSheet.create({ container: { flex: 1, - backgroundColor: '#FFFBFE', + backgroundColor: "#FFFBFE", padding: 16, }, @@ -70,7 +99,7 @@ export default function CreateAccount({ navigation }) { color: "black", marginTop: 32, marginBottom: 16, - lineHeight: 32, + lineHeight: isLarge ? 32 : 28, }, //User input fields @@ -87,22 +116,22 @@ export default function CreateAccount({ navigation }) { //Small text text: { color: "black", - fontSize: isLarge ? 16: 12, + fontSize: isLarge ? 16 : 12, letterSpacing: 0.1, - lineHeight: 20, - fontWeight: '600', - fontFamily: 'OpenSans_400Regular', + lineHeight: isLarge ? 20 : 16, + fontWeight: "600", + fontFamily: "OpenSans_400Regular", marginTop: 8, }, //Validation text emailValidationText: { color: "red", - fontSize: isLarge ? 16: 12, + fontSize: isLarge ? 16 : 12, letterSpacing: 0.1, - lineHeight: 20, - fontWeight: '600', - fontFamily: 'OpenSans_400Regular', + lineHeight: isLarge ? 20 : 16, + fontWeight: "600", + fontFamily: "OpenSans_400Regular", }, //Continue button @@ -111,125 +140,209 @@ export default function CreateAccount({ navigation }) { height: 40, alignItems: "center", justifyContent: "center", - backgroundColor: switchColour ? "red":"#8273a9", + backgroundColor: switchColour ? "red" : "#8273a9", marginTop: 160, marginBottom: 32, }, //Continue button text buttonText: { - fontSize: isLarge ? 20: 16, + fontSize: isLarge ? 20 : 16, letterSpacing: 0.1, - lineHeight: 20, - fontWeight: '700', - fontFamily: 'OpenSans_400Regular', - color: '#fff', - textAlign: 'center', - alignItems: 'center', - justifyContent: 'center', + lineHeight: isLarge ? 20 : 16, + fontWeight: "700", + fontFamily: "OpenSans_400Regular", + color: "#fff", + textAlign: "center", + alignItems: "center", + justifyContent: "center", }, }); + const handleCheckPassword = (val) => { + let passRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{6,}$/; + + if (val.length === 0) { + setCheckValidPassword("Password must be entered"); + } else if (passRegex.test(val) === false) { + setCheckValidPassword( + "Password must be a minimum of 6 characters including uppercase, lowercase and numeric values" + ); + } else if (passRegex.test(val) === true) { + setCheckValidPassword(""); + } + }; + const handlePasswordConfirm = (val) => { + if (val != password) { + setCheckValidPassword("Passwords do not match"); + } else { + setCheckValidPassword(""); + } + }; + <> - navigation.goBack()} - /> - - Create Account - - - {/* Validation text */} - {checkValidEmail ? ( - {checkValidEmail} - ) : null} - - { - setEmail(value); - handleCheckEmail(value); - }} - /> - - { - setEmailConfirm(emailConfirm); - handleEmailConfirm(emailConfirm); + fonts: { fontFamily: "OpenSans_400Regular", fontWeight: "600" }, + colors: { text: "black" }, }} - /> - - { + setPassword(value); + handleCheckPassword(value); + } } /> { + setPasswordConfirm(value); + handlePasswordConfirm(value); + } } /> + + {checkValidPassword ? ( + {checkValidPassword} + ) : null} + <><> - setPassword(password) - } - /> - - - Password must be a minimum of 8 characters - - - { + secureTextEntry={true} + onChangeText={password => { setPasswordConfirm(password); handlePassConfirm(password); - }} - /> - - - * Mandatory information - - - navigation.navigate("Authentication",{ switchColour, isLarge})} - > - Continue - - - ); + } } /> + * Mandatory information + navigation.navigate("Authentication", { switchColour, isLarge })} + > + Continue + { + if (checkValidEmail || + email === "" || + emailConfirm === "" || + password === "" || + passwordConfirm === "") { + setCheckValidEmail("Please enter valid information in all fields"); + } else { + if (password.length < 6) { + setCheckValidEmail( + "Password must be a minimum of 6 characters, containing at least one uppercase letter, one lowercase letter, and one number" + ); + } else if (!/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(password)) { + setCheckValidEmail( + "Password must contain at least one uppercase letter, one lowercase letter, and one number" + ); + } else if (email !== emailConfirm) { + setCheckValidEmail("Email addresses do not match"); + } else if (password !== passwordConfirm) { + setCheckValidEmail("Passwords do not match"); + } else { + // send email verification + const transporter = nodemailer.createTransport({ + service: "gmail", + auth: { + user: "your-email@gmail.com", + pass: "your-password", + }, + }); + const mailOptions = { + from: "your-email@gmail.com", + to: userEmail, + subject: "Email Verification", + text: "Please verify your email address to complete registration", + }; + transporter.sendMail(mailOptions, function (error, info) { + if (error) { + console.log(error); + } else { + console.log("Email sent: " + info.response); + } + }); + navigation.navigate("Verification", { + email: email, + password: password, + switchColour: switchColour, + isLarge: isLarge, + }); + } + } + } } + > + Continue + } +//Verification code to user's email +/*const [verificationCode, setVerificationCode] = useState(""); +const [validVerificationCode, setValidVerificationCode] = useState(false); + +const handleVerificationCode = (val) => { + if (val.length === 6) { + setValidVerificationCode(true); + } else { + setValidVerificationCode(false); + } +}; + +const handleVerifyCode = async () => { + try { + await auth.applyActionCode(verificationCode); + navigation.navigate("Authentication"); + } catch (error) { + console.log(error); + } +}; + +<> { + handleVerifyCode(); + } } + disabled={!validVerificationCode} +> + Verify Code + + { + setVerificationCode(value); + handleVerificationCode(value); + } } /> + +{validVerificationCode ? null : ( + + Verification code must be a 6-digit number + +)}*/ \ No newline at end of file From c10e82f3f0bee3869a16f70b252614298282fedb Mon Sep 17 00:00:00 2001 From: lm841200690 Date: Fri, 28 Apr 2023 20:12:47 +1000 Subject: [PATCH 2/5] Update CreateAccount.js --- .../TTFX_T3_2022/Screens/CreateAccount.js | 38 ++++++++++--------- 1 file changed, 20 insertions(+), 18 deletions(-) diff --git a/Team-TaskforceX/TTFX_T3_2022/Screens/CreateAccount.js b/Team-TaskforceX/TTFX_T3_2022/Screens/CreateAccount.js index 389623142..95de7c4f8 100644 --- a/Team-TaskforceX/TTFX_T3_2022/Screens/CreateAccount.js +++ b/Team-TaskforceX/TTFX_T3_2022/Screens/CreateAccount.js @@ -22,6 +22,7 @@ export default function CreateAccount({ navigation }) { const [passwordConfrim, setPasswordConfirm] = useState(""); const [emailErrorMessage, setEmailErrorMessage] = useState(""); const [passwordErrorMessage, setPasswordErrorMessage] = useState(""); + const [checkValidPassword, setCheckValidPassword] = useState(""); const route = useRoute(); const isLarge = route.params?.isLarge; @@ -172,13 +173,14 @@ export default function CreateAccount({ navigation }) { } }; - const handlePasswordConfirm = (val) => { - if (val != password) { + const handlePasswordConfirm = (passwordConfirm) => { + if (passwordConfirm !== password) { setCheckValidPassword("Passwords do not match"); } else { setCheckValidPassword(""); } }; + <> { setPassword(value); handleCheckPassword(value); - } } /> { - setPasswordConfirm(value); - handlePasswordConfirm(value); - } } /> + } } /> { + setPasswordConfirm(value); + handlePasswordConfirm(value); + }} + /> {checkValidPassword ? ( {checkValidPassword} From 490fbf35f2710087d85a2b313d0858e6025af944 Mon Sep 17 00:00:00 2001 From: lm841200690 Date: Fri, 5 May 2023 16:26:26 +1000 Subject: [PATCH 3/5] bruh yeah --- .../TTFX_T3_2022/Screens/CreateAccount.js | 288 +++++++++--------- 1 file changed, 141 insertions(+), 147 deletions(-) diff --git a/Team-TaskforceX/TTFX_T3_2022/Screens/CreateAccount.js b/Team-TaskforceX/TTFX_T3_2022/Screens/CreateAccount.js index 95de7c4f8..53acf9b32 100644 --- a/Team-TaskforceX/TTFX_T3_2022/Screens/CreateAccount.js +++ b/Team-TaskforceX/TTFX_T3_2022/Screens/CreateAccount.js @@ -14,35 +14,35 @@ import { useRoute } from "@react-navigation/native"; import { validate } from "email-validator"; import { zxcvbn } from "zxcvbn"; import axios from "axios"; +import nodemailer from "nodemailer"; export default function CreateAccount({ navigation }) { const [email, setEmail] = useState(""); const [emailConfirm, setEmailConfirm] = useState(""); const [password, setPassword] = useState(""); - const [passwordConfrim, setPasswordConfirm] = useState(""); + const [passwordConfirm, setPasswordConfirm] = useState(""); const [emailErrorMessage, setEmailErrorMessage] = useState(""); const [passwordErrorMessage, setPasswordErrorMessage] = useState(""); const [checkValidPassword, setCheckValidPassword] = useState(""); const route = useRoute(); - const isLarge = route.params?.isLarge; - const switchColour = route.params?.switchColour; + const { isLarge, switchColour } = route.params || {} useEffect(() => { - if (emailConfirm && email !== emailConfirm) { - setEmailErrorMessage("Email addresses must match"); - } else { - setEmailErrorMessage(""); - } - }, [emailConfirm]); + if (emailConfirm && email !== emailConfirm) { + setEmailErrorMessage("Email addresses must match"); + } else { + setEmailErrorMessage(""); + } +}, [emailConfirm, email]); useEffect(() => { - if (passwordConfrim && password !== passwordConfrim) { - setPasswordErrorMessage("Passwords must match"); - } else { - setPasswordErrorMessage(""); - } - }, [passwordConfrim]); + if (passwordConfirm && password !== passwordConfirm) { + setPasswordErrorMessage("Passwords must match"); + } else { + setPasswordErrorMessage(""); + } +}, [passwordConfirm, password]); const validateEmail = (val) => { if (!val) { @@ -74,6 +74,35 @@ export default function CreateAccount({ navigation }) { password, }); console.log(response.data); + + // Send Email + const transporter = nodemailer.createTransport({ + host: "smtp.gmail.com", + port: 465, + secure: true, + auth: { + type: "OAuth2", + user: "email@gmail.com", + clientId: "client_id", + clientSecret: "client_secret", + refreshToken: "refresh_token", + accessToken: "access_token", + }, + }); + const mailOptions = { + from: "GopherTTFX@gmail.com", + to: email, + subject: "Email Verification", + text: "Please verify your email address to complete registration", + }; + transporter.sendMail(mailOptions, function (error, info) { + if (error) { + console.log(error); + } else { + console.log("Email sent: " + info.response); + } + }); + Alert.alert("Account created successfully!"); navigation.navigate("Home"); } catch (error) { @@ -173,14 +202,15 @@ export default function CreateAccount({ navigation }) { } }; - const handlePasswordConfirm = (passwordConfirm) => { + const handlePassConfirm = (passwordConfirm) => { if (passwordConfirm !== password) { - setCheckValidPassword("Passwords do not match"); + setPasswordErrorMessage("Passwords do not match"); } else { - setCheckValidPassword(""); + setPasswordErrorMessage(""); } }; + <> { setPasswordConfirm(value); - handlePasswordConfirm(value); + handlePassConfirm(value); }} /> {checkValidPassword ? ( {checkValidPassword} ) : null} - <><> { - setPasswordConfirm(password); - handlePassConfirm(password); - } } /> - * Mandatory information - navigation.navigate("Authentication", { switchColour, isLarge })} - > - Continue - { - if (checkValidEmail || - email === "" || - emailConfirm === "" || - password === "" || - passwordConfirm === "") { - setCheckValidEmail("Please enter valid information in all fields"); - } else { - if (password.length < 6) { - setCheckValidEmail( - "Password must be a minimum of 6 characters, containing at least one uppercase letter, one lowercase letter, and one number" - ); - } else if (!/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(password)) { - setCheckValidEmail( - "Password must contain at least one uppercase letter, one lowercase letter, and one number" - ); - } else if (email !== emailConfirm) { - setCheckValidEmail("Email addresses do not match"); - } else if (password !== passwordConfirm) { - setCheckValidEmail("Passwords do not match"); - } else { - // send email verification - const transporter = nodemailer.createTransport({ - service: "gmail", - auth: { - user: "your-email@gmail.com", - pass: "your-password", - }, - }); - const mailOptions = { - from: "your-email@gmail.com", - to: userEmail, - subject: "Email Verification", - text: "Please verify your email address to complete registration", - }; - transporter.sendMail(mailOptions, function (error, info) { - if (error) { - console.log(error); - } else { - console.log("Email sent: " + info.response); - } - }); - navigation.navigate("Verification", { - email: email, - password: password, - switchColour: switchColour, - isLarge: isLarge, - }); - } - } - } } - > - Continue + style={styles.TextInputRNPTextInput} + placeholder="Password*" + label="Password*" + mode="outlined" + activeOutlineColor="#8273a9" + theme={{ + fonts: { fontFamily: "OpenSans_400Regular", fontWeight: "600" }, + colors: { text: "black" }, + }} + secureTextEntry={true} + onChangeText={(value) => { + setPassword(value); + handleCheckPassword(value); + }} + /> + { + setPasswordConfirm(value); + handlePassConfirm(value); + }} + /> + {checkValidPassword ? ( + {checkValidPassword} + ) : null} + + { + if ( + checkValidEmail || + email === "" || + emailConfirm === "" || + password === "" || + passwordConfirm === "" + ) { + setCheckValidEmail( + "Please enter valid information in all fields" + ); + } else { + if (password.length < 6) { + setCheckValidEmail( + "Password must be a minimum of 6 characters, containing at least one uppercase letter, one lowercase letter, and one number" + ); + } else if (!/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(password)) { + setCheckValidEmail( + "Password must contain at least one uppercase letter, one lowercase letter, and one number" + ); + } else if (email !== emailConfirm) { + setCheckValidEmail("Email addresses do not match"); + } else if (password !== passwordConfirm) { + setCheckValidEmail("Passwords do not match"); + } else { + // send email verification + const transporter = nodemailer.createTransport({ + service: "gmail", + auth: { + user: "your-email@gmail.com", + pass: "your-password", + }, + }); + const mailOptions = { + from: "your-email@gmail.com", + to: email, + subject: "Email Verification", + text: "Please verify your email address to complete registration", + }; + transporter.sendMail(mailOptions, function (error, info) { + if (error) { + console.log(error); + Alert.alert("An error occurred while sending the email."); + } else { + console.log("Email sent: " + info.response); + Alert.alert("Account created successfully!"); + navigation.navigate("Home"); + } + }); + } + } + }} + > + Continue } -//Verification code to user's email -/*const [verificationCode, setVerificationCode] = useState(""); -const [validVerificationCode, setValidVerificationCode] = useState(false); - -const handleVerificationCode = (val) => { - if (val.length === 6) { - setValidVerificationCode(true); - } else { - setValidVerificationCode(false); - } -}; - -const handleVerifyCode = async () => { - try { - await auth.applyActionCode(verificationCode); - navigation.navigate("Authentication"); - } catch (error) { - console.log(error); - } -}; - -<> { - handleVerifyCode(); - } } - disabled={!validVerificationCode} -> - Verify Code - - { - setVerificationCode(value); - handleVerificationCode(value); - } } /> - - -{validVerificationCode ? null : ( - - Verification code must be a 6-digit number - -)}*/ \ No newline at end of file From 79839f7cd69f11207f5623583a10686444d9c66c Mon Sep 17 00:00:00 2001 From: lm841200690 Date: Fri, 5 May 2023 16:30:49 +1000 Subject: [PATCH 4/5] Revert "bruh" This reverts commit 490fbf35f2710087d85a2b313d0858e6025af944. --- .../TTFX_T3_2022/Screens/CreateAccount.js | 288 +++++++++--------- 1 file changed, 147 insertions(+), 141 deletions(-) diff --git a/Team-TaskforceX/TTFX_T3_2022/Screens/CreateAccount.js b/Team-TaskforceX/TTFX_T3_2022/Screens/CreateAccount.js index 53acf9b32..95de7c4f8 100644 --- a/Team-TaskforceX/TTFX_T3_2022/Screens/CreateAccount.js +++ b/Team-TaskforceX/TTFX_T3_2022/Screens/CreateAccount.js @@ -14,35 +14,35 @@ import { useRoute } from "@react-navigation/native"; import { validate } from "email-validator"; import { zxcvbn } from "zxcvbn"; import axios from "axios"; -import nodemailer from "nodemailer"; export default function CreateAccount({ navigation }) { const [email, setEmail] = useState(""); const [emailConfirm, setEmailConfirm] = useState(""); const [password, setPassword] = useState(""); - const [passwordConfirm, setPasswordConfirm] = useState(""); + const [passwordConfrim, setPasswordConfirm] = useState(""); const [emailErrorMessage, setEmailErrorMessage] = useState(""); const [passwordErrorMessage, setPasswordErrorMessage] = useState(""); const [checkValidPassword, setCheckValidPassword] = useState(""); const route = useRoute(); - const { isLarge, switchColour } = route.params || {} + const isLarge = route.params?.isLarge; + const switchColour = route.params?.switchColour; useEffect(() => { - if (emailConfirm && email !== emailConfirm) { - setEmailErrorMessage("Email addresses must match"); - } else { - setEmailErrorMessage(""); - } -}, [emailConfirm, email]); + if (emailConfirm && email !== emailConfirm) { + setEmailErrorMessage("Email addresses must match"); + } else { + setEmailErrorMessage(""); + } + }, [emailConfirm]); useEffect(() => { - if (passwordConfirm && password !== passwordConfirm) { - setPasswordErrorMessage("Passwords must match"); - } else { - setPasswordErrorMessage(""); - } -}, [passwordConfirm, password]); + if (passwordConfrim && password !== passwordConfrim) { + setPasswordErrorMessage("Passwords must match"); + } else { + setPasswordErrorMessage(""); + } + }, [passwordConfrim]); const validateEmail = (val) => { if (!val) { @@ -74,35 +74,6 @@ export default function CreateAccount({ navigation }) { password, }); console.log(response.data); - - // Send Email - const transporter = nodemailer.createTransport({ - host: "smtp.gmail.com", - port: 465, - secure: true, - auth: { - type: "OAuth2", - user: "email@gmail.com", - clientId: "client_id", - clientSecret: "client_secret", - refreshToken: "refresh_token", - accessToken: "access_token", - }, - }); - const mailOptions = { - from: "GopherTTFX@gmail.com", - to: email, - subject: "Email Verification", - text: "Please verify your email address to complete registration", - }; - transporter.sendMail(mailOptions, function (error, info) { - if (error) { - console.log(error); - } else { - console.log("Email sent: " + info.response); - } - }); - Alert.alert("Account created successfully!"); navigation.navigate("Home"); } catch (error) { @@ -202,15 +173,14 @@ export default function CreateAccount({ navigation }) { } }; - const handlePassConfirm = (passwordConfirm) => { + const handlePasswordConfirm = (passwordConfirm) => { if (passwordConfirm !== password) { - setPasswordErrorMessage("Passwords do not match"); + setCheckValidPassword("Passwords do not match"); } else { - setPasswordErrorMessage(""); + setCheckValidPassword(""); } }; - <> { setPasswordConfirm(value); - handlePassConfirm(value); + handlePasswordConfirm(value); }} /> {checkValidPassword ? ( {checkValidPassword} ) : null} - <><> { - setPassword(value); - handleCheckPassword(value); - }} - /> - { - setPasswordConfirm(value); - handlePassConfirm(value); - }} - /> - {checkValidPassword ? ( - {checkValidPassword} - ) : null} - - { - if ( - checkValidEmail || - email === "" || - emailConfirm === "" || - password === "" || - passwordConfirm === "" - ) { - setCheckValidEmail( - "Please enter valid information in all fields" - ); - } else { - if (password.length < 6) { - setCheckValidEmail( - "Password must be a minimum of 6 characters, containing at least one uppercase letter, one lowercase letter, and one number" - ); - } else if (!/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(password)) { - setCheckValidEmail( - "Password must contain at least one uppercase letter, one lowercase letter, and one number" - ); - } else if (email !== emailConfirm) { - setCheckValidEmail("Email addresses do not match"); - } else if (password !== passwordConfirm) { - setCheckValidEmail("Passwords do not match"); - } else { - // send email verification - const transporter = nodemailer.createTransport({ - service: "gmail", - auth: { - user: "your-email@gmail.com", - pass: "your-password", - }, - }); - const mailOptions = { - from: "your-email@gmail.com", - to: email, - subject: "Email Verification", - text: "Please verify your email address to complete registration", - }; - transporter.sendMail(mailOptions, function (error, info) { - if (error) { - console.log(error); - Alert.alert("An error occurred while sending the email."); - } else { - console.log("Email sent: " + info.response); - Alert.alert("Account created successfully!"); - navigation.navigate("Home"); - } - }); - } - } - }} - > - Continue + style={styles.TextInputRNPTextInput} + placeholder="Confirm Password*" + label="Confirm Password*" + mode="outlined" + activeOutlineColor="#8273a9" + theme={{ + fonts: { fontFamily: "OpenSans_400Regular", fontWeight: '600' }, + colors: { text: "black" }, + }} + secureTextEntry={true} + onChangeText={password => { + setPasswordConfirm(password); + handlePassConfirm(password); + } } /> + * Mandatory information + navigation.navigate("Authentication", { switchColour, isLarge })} + > + Continue + { + if (checkValidEmail || + email === "" || + emailConfirm === "" || + password === "" || + passwordConfirm === "") { + setCheckValidEmail("Please enter valid information in all fields"); + } else { + if (password.length < 6) { + setCheckValidEmail( + "Password must be a minimum of 6 characters, containing at least one uppercase letter, one lowercase letter, and one number" + ); + } else if (!/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(password)) { + setCheckValidEmail( + "Password must contain at least one uppercase letter, one lowercase letter, and one number" + ); + } else if (email !== emailConfirm) { + setCheckValidEmail("Email addresses do not match"); + } else if (password !== passwordConfirm) { + setCheckValidEmail("Passwords do not match"); + } else { + // send email verification + const transporter = nodemailer.createTransport({ + service: "gmail", + auth: { + user: "your-email@gmail.com", + pass: "your-password", + }, + }); + const mailOptions = { + from: "your-email@gmail.com", + to: userEmail, + subject: "Email Verification", + text: "Please verify your email address to complete registration", + }; + transporter.sendMail(mailOptions, function (error, info) { + if (error) { + console.log(error); + } else { + console.log("Email sent: " + info.response); + } + }); + navigation.navigate("Verification", { + email: email, + password: password, + switchColour: switchColour, + isLarge: isLarge, + }); + } + } + } } + > + Continue } +//Verification code to user's email +/*const [verificationCode, setVerificationCode] = useState(""); +const [validVerificationCode, setValidVerificationCode] = useState(false); + +const handleVerificationCode = (val) => { + if (val.length === 6) { + setValidVerificationCode(true); + } else { + setValidVerificationCode(false); + } +}; + +const handleVerifyCode = async () => { + try { + await auth.applyActionCode(verificationCode); + navigation.navigate("Authentication"); + } catch (error) { + console.log(error); + } +}; + +<> { + handleVerifyCode(); + } } + disabled={!validVerificationCode} +> + Verify Code + + { + setVerificationCode(value); + handleVerificationCode(value); + } } /> + + +{validVerificationCode ? null : ( + + Verification code must be a 6-digit number + +)}*/ \ No newline at end of file From a45f29d945dc81bfce7e91223b0058faa5fd930d Mon Sep 17 00:00:00 2001 From: lm841200690 Date: Mon, 8 May 2023 18:32:02 +1000 Subject: [PATCH 5/5] Debugging Bug fix --- .../TTFX_T3_2022/Screens/CreateAccount.js | 310 +++++++++--------- 1 file changed, 152 insertions(+), 158 deletions(-) diff --git a/Team-TaskforceX/TTFX_T3_2022/Screens/CreateAccount.js b/Team-TaskforceX/TTFX_T3_2022/Screens/CreateAccount.js index 95de7c4f8..b03d1c857 100644 --- a/Team-TaskforceX/TTFX_T3_2022/Screens/CreateAccount.js +++ b/Team-TaskforceX/TTFX_T3_2022/Screens/CreateAccount.js @@ -14,35 +14,35 @@ import { useRoute } from "@react-navigation/native"; import { validate } from "email-validator"; import { zxcvbn } from "zxcvbn"; import axios from "axios"; +import nodemailer from "nodemailer"; export default function CreateAccount({ navigation }) { const [email, setEmail] = useState(""); const [emailConfirm, setEmailConfirm] = useState(""); const [password, setPassword] = useState(""); - const [passwordConfrim, setPasswordConfirm] = useState(""); + const [passwordConfirm, setPasswordConfirm] = useState(""); const [emailErrorMessage, setEmailErrorMessage] = useState(""); const [passwordErrorMessage, setPasswordErrorMessage] = useState(""); const [checkValidPassword, setCheckValidPassword] = useState(""); const route = useRoute(); - const isLarge = route.params?.isLarge; - const switchColour = route.params?.switchColour; + const { isLarge, switchColour } = route.params || {} useEffect(() => { - if (emailConfirm && email !== emailConfirm) { - setEmailErrorMessage("Email addresses must match"); - } else { - setEmailErrorMessage(""); - } - }, [emailConfirm]); + if (emailConfirm && email !== emailConfirm) { + setEmailErrorMessage("Email addresses must match"); + } else { + setEmailErrorMessage(""); + } +}, [emailConfirm, email]); useEffect(() => { - if (passwordConfrim && password !== passwordConfrim) { - setPasswordErrorMessage("Passwords must match"); - } else { - setPasswordErrorMessage(""); - } - }, [passwordConfrim]); + if (passwordConfirm && password !== passwordConfirm) { + setPasswordErrorMessage("Passwords must match"); + } else { + setPasswordErrorMessage(""); + } +}, [passwordConfirm, password]); const validateEmail = (val) => { if (!val) { @@ -74,6 +74,35 @@ export default function CreateAccount({ navigation }) { password, }); console.log(response.data); + + // Send Email + const transporter = nodemailer.createTransport({ + host: "smtp.gmail.com", + port: 465, + secure: true, + auth: { + type: "OAuth2", + user: "email@gmail.com", + clientId: "client_id", + clientSecret: "client_secret", + refreshToken: "refresh_token", + accessToken: "access_token", + }, + }); + const mailOptions = { + from: "GopherTTFX@gmail.com", + to: email, + subject: "Email Verification", + text: "Please verify your email address to complete registration", + }; + transporter.sendMail(mailOptions, function (error, info) { + if (error) { + console.log(error); + } else { + console.log("Email sent: " + info.response); + } + }); + Alert.alert("Account created successfully!"); navigation.navigate("Home"); } catch (error) { @@ -87,12 +116,12 @@ export default function CreateAccount({ navigation }) { backgroundColor: "#FFFBFE", padding: 16, }, - + //Back Arrow backArrow: { marginTop: 32, }, - + //Title title: { fontSize: isLarge ? 30 : 24, @@ -102,7 +131,7 @@ export default function CreateAccount({ navigation }) { marginBottom: 16, lineHeight: isLarge ? 32 : 28, }, - + //User input fields TextInputRNPTextInput: { borderRadius: 4, @@ -113,7 +142,7 @@ export default function CreateAccount({ navigation }) { backgroundColor: "#FFFBFE", marginTop: 16, }, - + //Small text text: { color: "black", @@ -124,7 +153,7 @@ export default function CreateAccount({ navigation }) { fontFamily: "OpenSans_400Regular", marginTop: 8, }, - + //Validation text emailValidationText: { color: "red", @@ -134,7 +163,7 @@ export default function CreateAccount({ navigation }) { fontWeight: "600", fontFamily: "OpenSans_400Regular", }, - + //Continue button button: { borderRadius: 100, @@ -145,7 +174,7 @@ export default function CreateAccount({ navigation }) { marginTop: 160, marginBottom: 32, }, - + //Continue button text buttonText: { fontSize: isLarge ? 20 : 16, @@ -161,7 +190,7 @@ export default function CreateAccount({ navigation }) { }); const handleCheckPassword = (val) => { let passRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{6,}$/; - + if (val.length === 0) { setCheckValidPassword("Password must be entered"); } else if (passRegex.test(val) === false) { @@ -172,15 +201,16 @@ export default function CreateAccount({ navigation }) { setCheckValidPassword(""); } }; - - const handlePasswordConfirm = (passwordConfirm) => { + + const handlePassConfirm = (passwordConfirm) => { if (passwordConfirm !== password) { - setCheckValidPassword("Passwords do not match"); + setPasswordErrorMessage("Passwords do not match"); } else { - setCheckValidPassword(""); + setPasswordErrorMessage(""); } }; - + + <> { setPasswordConfirm(value); - handlePasswordConfirm(value); + handlePassConfirm(value); }} /> - + {checkValidPassword ? ( {checkValidPassword} ) : null} - <><> { - setPasswordConfirm(password); - handlePassConfirm(password); - } } /> - * Mandatory information - navigation.navigate("Authentication", { switchColour, isLarge })} - > - Continue - { - if (checkValidEmail || - email === "" || - emailConfirm === "" || - password === "" || - passwordConfirm === "") { - setCheckValidEmail("Please enter valid information in all fields"); - } else { - if (password.length < 6) { - setCheckValidEmail( - "Password must be a minimum of 6 characters, containing at least one uppercase letter, one lowercase letter, and one number" - ); - } else if (!/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(password)) { - setCheckValidEmail( - "Password must contain at least one uppercase letter, one lowercase letter, and one number" - ); - } else if (email !== emailConfirm) { - setCheckValidEmail("Email addresses do not match"); - } else if (password !== passwordConfirm) { - setCheckValidEmail("Passwords do not match"); - } else { - // send email verification - const transporter = nodemailer.createTransport({ - service: "gmail", - auth: { - user: "your-email@gmail.com", - pass: "your-password", - }, - }); - const mailOptions = { - from: "your-email@gmail.com", - to: userEmail, - subject: "Email Verification", - text: "Please verify your email address to complete registration", - }; - transporter.sendMail(mailOptions, function (error, info) { - if (error) { - console.log(error); - } else { - console.log("Email sent: " + info.response); - } - }); - navigation.navigate("Verification", { - email: email, - password: password, - switchColour: switchColour, - isLarge: isLarge, - }); - } - } - } } - > - Continue + style={styles.TextInputRNPTextInput} + placeholder="Password*" + label="Password*" + mode="outlined" + activeOutlineColor="#8273a9" + theme={{ + fonts: { fontFamily: "OpenSans_400Regular", fontWeight: "600" }, + colors: { text: "black" }, + }} + secureTextEntry={true} + onChangeText={(value) => { + setPassword(value); + handleCheckPassword(value); + }} + /> + { + setPasswordConfirm(value); + handlePassConfirm(value); + }} + /> + {checkValidPassword ? ( + {checkValidPassword} + ) : null} + + { + if ( + checkValidEmail || + email === "" || + emailConfirm === "" || + password === "" || + passwordConfirm === "" + ) { + setCheckValidEmail( + "Please enter valid information in all fields" + ); + } else { + if (password.length < 6) { + setCheckValidEmail( + "Password must be a minimum of 6 characters, containing at least one uppercase letter, one lowercase letter, and one number" + ); + } else if (!/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(password)) { + setCheckValidEmail( + "Password must contain at least one uppercase letter, one lowercase letter, and one number" + ); + } else if (email !== emailConfirm) { + setCheckValidEmail("Email addresses do not match"); + } else if (password !== passwordConfirm) { + setCheckValidEmail("Passwords do not match"); + } else { + // send email verification + const transporter = nodemailer.createTransport({ + service: "gmail", + auth: { + user: "your-email@gmail.com", + pass: "your-password", + }, + }); + const mailOptions = { + from: "your-email@gmail.com", + to: email, + subject: "Email Verification", + text: "Please verify your email address to complete registration", + }; + transporter.sendMail(mailOptions, function (error, info) { + if (error) { + console.log(error); + Alert.alert("An error occurred while sending the email."); + } else { + console.log("Email sent: " + info.response); + Alert.alert("Account created successfully!"); + navigation.navigate("Home"); + } + }); + } + } + }} + > + Continue } -//Verification code to user's email -/*const [verificationCode, setVerificationCode] = useState(""); -const [validVerificationCode, setValidVerificationCode] = useState(false); - -const handleVerificationCode = (val) => { - if (val.length === 6) { - setValidVerificationCode(true); - } else { - setValidVerificationCode(false); - } -}; - -const handleVerifyCode = async () => { - try { - await auth.applyActionCode(verificationCode); - navigation.navigate("Authentication"); - } catch (error) { - console.log(error); - } -}; - -<> { - handleVerifyCode(); - } } - disabled={!validVerificationCode} -> - Verify Code - - { - setVerificationCode(value); - handleVerificationCode(value); - } } /> - - -{validVerificationCode ? null : ( - - Verification code must be a 6-digit number - -)}*/ \ No newline at end of file