diff --git a/Team-TaskforceX/TTFX_T3_2022/Screens/CreateAccount.js b/Team-TaskforceX/TTFX_T3_2022/Screens/CreateAccount.js
index adb36ea58..b03d1c857 100644
--- a/Team-TaskforceX/TTFX_T3_2022/Screens/CreateAccount.js
+++ b/Team-TaskforceX/TTFX_T3_2022/Screens/CreateAccount.js
@@ -5,64 +5,123 @@ 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";
+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 [checkValidEmail, setCheckValidEmail] = 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 || {}
- const handleCheckEmail = (val) => {
- let reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w\w+)+$/;
+ useEffect(() => {
+ if (emailConfirm && email !== emailConfirm) {
+ setEmailErrorMessage("Email addresses must match");
+ } else {
+ setEmailErrorMessage("");
+ }
+}, [emailConfirm, email]);
- 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 (passwordConfirm && password !== passwordConfirm) {
+ setPasswordErrorMessage("Passwords must match");
+ } else {
+ setPasswordErrorMessage("");
+ }
+}, [passwordConfirm, password]);
- 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);
+
+ // 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) {
+ 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,
},
-
+
//Back Arrow
backArrow: {
marginTop: 32,
},
-
+
//Title
title: {
fontSize: isLarge ? 30 : 24,
@@ -70,9 +129,9 @@ export default function CreateAccount({ navigation }) {
color: "black",
marginTop: 32,
marginBottom: 16,
- lineHeight: 32,
+ lineHeight: isLarge ? 32 : 28,
},
-
+
//User input fields
TextInputRNPTextInput: {
borderRadius: 4,
@@ -83,153 +142,203 @@ export default function CreateAccount({ navigation }) {
backgroundColor: "#FFFBFE",
marginTop: 16,
},
-
+
//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
button: {
borderRadius: 100,
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",
},
});
-
-
- return (
-
- navigation.goBack()}
- />
-
- Create Account
-
-
- {/* Validation text */}
- {checkValidEmail ? (
- {checkValidEmail}
- ) : null}
-
- {
+ 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 handlePassConfirm = (passwordConfirm) => {
+ if (passwordConfirm !== password) {
+ setPasswordErrorMessage("Passwords do not match");
+ } else {
+ setPasswordErrorMessage("");
+ }
+ };
+
+
+ <> {
- setEmail(value);
- handleCheckEmail(value);
+ fonts: { fontFamily: "OpenSans_400Regular", fontWeight: "600" },
+ colors: { text: "black" },
}}
- />
-
- {
+ setPassword(value);
+ handleCheckPassword(value);
+ } } /> {
- setEmailConfirm(emailConfirm);
- handleEmailConfirm(emailConfirm);
+ secureTextEntry={true}
+ onChangeText={(value) => {
+ setPasswordConfirm(value);
+ handlePassConfirm(value);
}}
- />
-
-
- setPassword(password)
+ />
+
+ {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");
+ }
+ });
}
- />
-
-
- Password must be a minimum of 8 characters
-
-
- {
- setPasswordConfirm(password);
- handlePassConfirm(password);
- }}
- />
-
-
- * Mandatory information
-
-
- navigation.navigate("Authentication",{ switchColour, isLarge})}
- >
- Continue
-
-
- );
+ }
+ }}
+ >
+ Continue
+
}
-