Added more signup pages and messed with colors

Author: nwassom

App.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { StatusBar } from 'expo-status-bar';
+import { Provider } from 'react-redux';
+
+import store from './StateManagement/store';
+import AuthNavigator from './Navigators/AuthNavigator';
+
+const App: React.FC = () => {
+  return (
+    <Provider store={store}>
+      <NavigationContainer>
+        <StatusBar style="light"/>
+        <AuthNavigator/>
+      </NavigationContainer>
+    </Provider>
+  );
+};
+
+export default App;

App.jsx

@@ -4,6 +4,7 @@ import { TextInput, Text, View, StyleSheet, TextInputProps, TouchableWithoutFeed
 import {LinearGradient} from 'expo-linear-gradient';
 
 import ComponentStyle from '../Styles/ComponentStyles';
+import { COLOR } from '../Styles/Colors';
 
 
 /*
@@ -31,7 +32,7 @@ interface PrimaryTextInputProps extends TextInputProps
 /*
     Component that sets the background when used
 */
-export const PrimaryBackground: React.FC<GradientBackgroundProps> = ({colors = ['#3F51B5','#03A9F4'], style, children }) => {
+export const PrimaryBackground: React.FC<GradientBackgroundProps> = ({colors = COLOR.gradientColors, style, children }) => {
   return (
     <LinearGradient colors={colors} style={[ComponentStyle.primaryBackground, style]}>
       <View style={[ComponentStyle.primaryBackgroundMask]}>

App.tsx

@@ -1,7 +1,8 @@
 import { createStackNavigator } from '@react-navigation/stack';
 
 import AuthLoginView from '../Views/AuthLoginView';
-import EmailView from '../Views/SignUpViews/EmailView';
+import SignUpStack from './SignUpStack';
+
 
 const Stack = createStackNavigator();
 
@@ -13,7 +14,7 @@ const AuthNavigator = () =>
 			screenOptions={{headerShown: false}}
 		>
 			<Stack.Screen name="Login" component={AuthLoginView}/>
-			<Stack.Screen name="SignUp" component={EmailView}/>
+			<Stack.Screen name="SignUpStack" component={SignUpStack}/>
 		</Stack.Navigator>
 	);
 };

Components/Components.tsx

@@ -0,0 +1,28 @@
+import { createStackNavigator } from '@react-navigation/stack';
+import { NavigationContainer } from '@react-navigation/native';
+import EmailView from '../Views/SignUpViews/EmailView';
+import UsernameView from '../Views/SignUpViews/UsernameView';
+import PasswordView from '../Views/SignUpViews/PasswordView';
+
+const Stack = createStackNavigator();
+
+const SignUpStack = () => {
+	return (
+		<Stack.Navigator initialRouteName="EmailView" screenOptions={{ headerShown: false }}>
+			<Stack.Screen 
+				name="EmailView"
+				component={EmailView}
+			/>
+			<Stack.Screen 
+				name="UsernameView"
+				component={UsernameView}
+			/>
+			<Stack.Screen 
+				name="PasswordView"
+				component={PasswordView}
+			/>
+		</Stack.Navigator>
+	)
+}
+
+export default SignUpStack;

Navigators/AuthNavigator.jsx

@@ -0,0 +1,15 @@
+export const setEmail = (email: string) => ({
+	type: 'SET_EMAIL',
+	payload: email,
+});
+
+export const setUsername = (username: string) => ({
+	type: 'SET_USERNAME',
+	payload: username,
+});
+
+export const setPassword = (password: string) => ({
+	type: 'SET_PASSWORD',
+	payload: password,
+});
+

Navigators/SignUpStack.tsx

@@ -0,0 +1,32 @@
+import { createStore } from 'redux';
+
+interface AuthState {
+	email: string;
+	username: string;
+	password: string;
+}
+
+const initialState: AuthState = {
+	email: '',
+	username: '',
+	password: '',
+};
+
+// Handles state updates based on actions within code
+const reducer = (state = initialState, action: any): AuthState => {
+	switch (action.type)
+	{
+		case 'SET_EMAIL':
+			return {...state, email: action.payload };
+		case 'SET_USERNAME':
+			return {...state, username: action.payload };
+		case 'SET_PASSWORD':
+			return {...state, password: action.payload };
+		default:
+			return state;
+	}
+};
+
+const store = createStore(reducer);
+
+export default store;

StateManagement/actions.ts

@@ -17,7 +17,15 @@ const AuthStyles = StyleSheet.create({
 		alignSelf: 'center',
 		alignItems: 'center',
 		alignSelf: 'center',
-		width: '95%',
+		width: '92%',
+	},
+
+	createAccountContainer:
+	{
+		width: '92%',
+		alignItems: 'center',
+		alignSelf: 'center',
+		marginBottom: 75,
 	},
 
 	loginButton:
@@ -46,7 +54,7 @@ const AuthStyles = StyleSheet.create({
 	createAccountButton:
 	{
 		height: 40,
-  		width: '95%',
+  		width: '100%',
   		borderWidth: 1,
  		borderRadius: 5, 
   		borderColor: COLOR.secondaryButtonBackground,

StateManagement/store.ts

@@ -8,6 +8,11 @@
 export interface Colors {
 	none: string;
 
+	gradientColorOne: string;
+	gradientColorTwo: string;
+
+	gradientColors: string[];
+
 	primaryText: string;
 	secondaryText: string;
 	thirdText: string;
@@ -20,6 +25,11 @@ export const COLOR: Colors  = {
 
 	none: 'transparent',
 
+	gradientColors: ['#3F51B5','#03A9F4', '#FFFFFF'],
+
+	gradientColorOne: '#3F51B5',
+	gradientColorTwo: '#03A9F4',
+
 	primaryText: '#FFFFFF',
 	secondaryText: '#FFC107',
 	thirdText: '#CCCCCC',

Styles/AuthStyles.js

@@ -20,7 +20,7 @@ const ComponentStyle = StyleSheet.create({
 	primaryBackgroundMask:
 	{
 		...StyleSheet.absoluteFillObject,
-		backgroundColor: 'rgba(0,0,0,0.5)',
+		backgroundColor: 'rgba(0,0,0,0.3)',
 	},
 
 	primaryTextInputContainer:

Styles/Colors.ts

@@ -12,7 +12,7 @@ const SignUpStyle = StyleSheet.create({
 		justifyContent: 'flex-start',
 		alignSelf: 'center',
 		position: 'relative',
-		width: '90%',
+		width: '92%',
 	},
 
 	backArrow:

Styles/ComponentStyles.ts

@@ -3,4 +3,34 @@ import validator from 'email-validator';
 export function isValidEmail(email: string): boolean
 {
 	return validator.validate(email);
+}
+
+/*
+	function to check if username already exists and/or is valid
+*/
+export function isValidUsername(username: string): boolean
+{
+	return true;
+}
+
+/*
+	function to check if a password is valid or within set restraints
+*/
+export function isValidPassword(password: string): { isValid: boolean; reason?: string }
+{
+	if (password.length < 8) 
+	{
+    	return { isValid: false, reason: "Password must be at least 8 characters long." };
+  	}
+
+  	// Regex pattern for complexity requirements
+  	const pattern = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*\W)/;
+
+  	// Check if the password contains at least one digit, lowercase letter, uppercase letter, and special character
+	if (!pattern.test(password)) 
+	{
+		return { isValid: false, reason: "Password must contain at least one digit, lowercase letter, uppercase letter, and special character." };
+	}
+
+	return { isValid: true };
 }

Styles/SignUpStyle.ts

@@ -33,7 +33,7 @@ const AuthLoginView = () =>
 
 	const sendToSignUp = () => 
 	{
-		navigation.navigate('SignUp')
+		navigation.navigate('SignUpStack')
 	}
 
 	const forgotPass = () =>
@@ -67,8 +67,10 @@ const AuthLoginView = () =>
 					<Text style={AuthStyles.loginButtonText}>Login</Text>				
 				</TouchableOpacity>
 				<Button title="Forgot Password?" onPress={forgotPass}/>
+			</View>
+			<View style={AuthStyles.createAccountContainer}>
 				<TouchableOpacity onPress={sendToSignUp} style={AuthStyles.createAccountButton}>
-					<Text style={AuthStyles.createAccountButtonText}>Create new account</Text>				
+						<Text style={AuthStyles.createAccountButtonText}>Create new account</Text>				
 				</TouchableOpacity>
 			</View>
 		</Component.PrimaryBackground>

Utils/DataVerify.ts

@@ -14,7 +14,6 @@ import SignUpStyle from '../../Styles/SignUpStyle';
 const EmailView = () =>
 {
 	const navigation = useNavigation();
-
 	const [email, setEmail] = useState('');
 
 	const returnLoginArrow = () => {
@@ -42,11 +41,11 @@ const EmailView = () =>
 	{
 		if (isValidEmail(email))
 		{
-			console.log('valid');
+			navigation.navigate('UsernameView');
 		}
 		else
 		{
-			Alert.alert('Email is invalid or missing'); // insert navigation to the new page
+			Alert.alert('Email is invalid or missing');
 		}
 	};
 

Views/AuthLoginView.jsx

@@ -0,0 +1,65 @@
+import React, { useState } from 'react';
+import { SafeAreaView, View, TextInput, Button, Alert, TouchableOpacity, Text } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+
+import * as Component from '../../Components/Components';
+import * as SignUpComponent from '../../Components/SignUpComponents';
+import AuthViewModel from '../../UserAuthentication/AuthViewModel';
+import { isValidPassword } from '../../Utils/DataVerify';
+
+import Styles from '../../Styles/Styles';
+import SignUpStyle from '../../Styles/SignUpStyle';
+
+const PasswordView = () =>
+{
+	const navigation = useNavigation();
+	const [password, setPassword] = useState('');
+
+	const backArrow = () => {
+		navigation.navigate('UsernameView');
+	};
+
+	// Checks that password is valid if not shows user why not
+	const nextButton = () =>
+	{
+		let isPasswordValid = isValidPassword(password)
+		if (isPasswordValid.isValid)
+		{
+			//navigation.navigate('AgeView')
+		}
+		else
+		{
+			Alert.alert(`${isPasswordValid.reason}`);
+		}
+	};
+
+	return (
+		<Component.PrimaryBackground>
+			<SafeAreaView style={Styles.safeZone}>
+				<View style={SignUpStyle.container}>
+					<TouchableOpacity onPress={backArrow}>
+						<Icon name="arrow-back-ios" color="#FFF" style={SignUpStyle.backArrow}/>
+					</TouchableOpacity>
+					<SignUpComponent.SignUpInput
+						heading="Good Password?"
+						subheading={"Try and pick something secure...\nyour data matters."}
+						placeholder="Password"
+						value={password}
+						onChangeText={setPassword}
+						style={{
+							container: SignUpStyle.input,
+							heading: SignUpStyle.heading,
+							subheading: SignUpStyle.subheading,
+						}}
+					/>
+					<TouchableOpacity onPress={nextButton} style={SignUpStyle.nextButton}>
+						<Text style={SignUpStyle.nextButtonText}>Next</Text>				
+					</TouchableOpacity>
+				</View>
+			</SafeAreaView>
+		</Component.PrimaryBackground>
+	);
+};
+
+export default PasswordView;