diff options
Diffstat (limited to 'src/screens/Registration.tsx')
| -rw-r--r-- | src/screens/Registration.tsx | 448 |
1 files changed, 436 insertions, 12 deletions
diff --git a/src/screens/Registration.tsx b/src/screens/Registration.tsx index 57b0eb18..52508a76 100644 --- a/src/screens/Registration.tsx +++ b/src/screens/Registration.tsx @@ -1,24 +1,448 @@ -import React from 'react'; -import {View, Text, StyleSheet} from 'react-native'; +import React, {useState, useRef} from 'react'; +import {RouteProp} from '@react-navigation/native'; +import {StackNavigationProp} from '@react-navigation/stack'; +import { + View, + Text, + StyleSheet, + StatusBar, + Alert, + Platform, + TouchableOpacity, +} from 'react-native'; -interface RegistrationProps {} +import {RootStackParamList} from '../routes'; +import { + ArrowButton, + RegistrationWizard, + TaggInput, + TermsConditions, + Background, + CenteredView, +} from '../components'; +import { + emailRegex, + passwordRegex, + usernameRegex, + REGISTER_ENDPOINT, +} from '../constants'; + +type RegistrationScreenRouteProp = RouteProp< + RootStackParamList, + 'Registration' +>; +type RegistrationScreenNavigationProp = StackNavigationProp< + RootStackParamList, + 'Registration' +>; +interface RegistrationProps { + route: RegistrationScreenRouteProp; + navigation: RegistrationScreenNavigationProp; +} +/** + * Registration screen. + * @param navigation react-navigation navigation object + */ +const Registration: React.FC<RegistrationProps> = ({navigation}) => { + // refs for changing focus + const lnameRef = useRef(); + const emailRef = useRef(); + const usernameRef = useRef(); + const passwordRef = useRef(); + const confirmRef = useRef(); + /** + * Handles focus change to the next input field. + * @param field key for field to move focus onto + */ + const handleFocusChange = (field: string): void => { + switch (field) { + case 'lname': + const lnameField: any = lnameRef.current; + lnameField.focus(); + break; + case 'email': + const emailField: any = emailRef.current; + emailField.focus(); + break; + case 'username': + const usernameField: any = usernameRef.current; + usernameField.focus(); + break; + case 'password': + const passwordField: any = passwordRef.current; + passwordField.focus(); + break; + case 'confirm': + const confirmField: any = confirmRef.current; + confirmField.focus(); + break; + default: + return; + } + }; + + // registration form state + const [form, setForm] = useState({ + fname: '', + lname: '', + email: '', + username: '', + password: '', + confirm: '', + isValidFname: false, + isValidLname: false, + isValidEmail: false, + isValidUsername: false, + isValidPassword: false, + passwordsMatch: false, + tcAccepted: false, + attemptedSubmit: false, + }); + + /* + * Handles changes to the first name field value and verifies the input by updating state and running a validation function. + */ + const handleFnameUpdate = (fname: string) => { + let isValidFname: boolean = fname.length > 0; + setForm({ + ...form, + fname, + isValidFname, + }); + }; + /* + * Handles changes to the last name field value and verifies the input by updating state and running a validation function. + */ + const handleLnameUpdate = (lname: string) => { + let isValidLname: boolean = lname.length > 0; + setForm({ + ...form, + lname, + isValidLname, + }); + }; + /* + * Handles changes to the email field value and verifies the input by updating state and running a validation function. + */ + const handleEmailUpdate = (email: string) => { + let isValidEmail: boolean = emailRegex.test(email); + setForm({ + ...form, + email, + isValidEmail, + }); + }; + + /* + * Handles changes to the username field value and verifies the input by updating state and running a validation function. + */ + const handleUsernameUpdate = (username: string) => { + let isValidUsername: boolean = usernameRegex.test(username); + setForm({ + ...form, + username, + isValidUsername, + }); + }; + /* + * Handles changes to the password field value and verifies the input by updating state and running a validation function. + */ + const handlePasswordUpdate = (password: string) => { + let isValidPassword: boolean = passwordRegex.test(password); + setForm({ + ...form, + password, + isValidPassword, + }); + }; + + /* + * Handles changes to the confirm password field value and verifies the input by updating state and running a validation function. + */ + const handleConfirmUpdate = (confirm: string) => { + let passwordsMatch: boolean = form.password === confirm; + setForm({ + ...form, + confirm, + passwordsMatch, + }); + }; + + /** + * Handles changes to the terms and conditions accepted boolean. + * @param tcAccepted the boolean to set the terms and conditions value to + */ + const handleTcUpdate = (tcAccepted: boolean) => { + setForm({ + ...form, + tcAccepted, + }); + }; + + /** + * Handles a click on the "next" arrow button by sending an API request to the backend and displaying the appropriate response. + */ + const handleRegister = async () => { + if (!form.attemptedSubmit) { + setForm({ + ...form, + attemptedSubmit: true, + }); + } + try { + if ( + form.isValidFname && + form.isValidLname && + form.isValidUsername && + form.isValidPassword && + form.passwordsMatch + ) { + if (form.tcAccepted) { + let response = await fetch(REGISTER_ENDPOINT, { + method: 'POST', + body: JSON.stringify({ + first_name: form.fname, + last_name: form.lname, + email: form.email, + username: form.username, + password: form.password, + }), + }); + let statusCode = response.status; + let data = await response.json(); + if (statusCode === 201) { + navigation.navigate('Verification'); + Alert.alert( + "You've successfully registrated!🥳", + `Welcome, ${form.username}`, + ); + } else if (statusCode === 409) { + Alert.alert('Registration failed 😔', `${data}`); + } else { + Alert.alert( + 'Something went wrong! ðŸ˜', + "Would you believe me if I told you that I don't know what happened?", + ); + } + } else { + Alert.alert( + 'Terms and conditions', + 'You must first agree to the terms and conditions.', + ); + } + } else { + setForm({...form, attemptedSubmit: false}); + setTimeout(() => setForm({...form, attemptedSubmit: true})); + } + } catch (error) { + Alert.alert( + 'Looks like our servers are down. 😓', + "Try again in a couple minutes. We're sorry for the inconvenience.", + ); + return { + name: 'Registration error', + description: error, + }; + } + }; -const Registration: React.FC<RegistrationProps> = ({}) => { return ( - <View style={styles.view}> - <Text style={styles.text}>Registration sequence begins here!</Text> - </View> + <Background style={styles.container}> + <StatusBar barStyle="light-content" /> + <CenteredView> + <RegistrationWizard style={styles.wizard} step="one" /> + <View style={styles.form}> + <Text style={styles.formHeader}>SIGN UP</Text> + <TaggInput + accessibilityHint="Enter your first name." + accessibilityLabel="First name input field." + placeholder="First Name" + autoCompleteType="name" + textContentType="name" + returnKeyType="next" + onChangeText={handleFnameUpdate} + onSubmitEditing={() => handleFocusChange('lname')} + blurOnSubmit={false} + valid={form.isValidFname} + invalidWarning="First name cannot be empty." + attemptedSubmit={form.attemptedSubmit} + width={280} + /> + <TaggInput + accessibilityHint="Enter your last name." + accessibilityLabel="Last name input field." + placeholder="Last Name" + autoCompleteType="name" + textContentType="name" + returnKeyType="next" + onChangeText={handleLnameUpdate} + onSubmitEditing={() => handleFocusChange('email')} + blurOnSubmit={false} + ref={lnameRef} + valid={form.isValidLname} + invalidWarning="Last name cannot be empty." + attemptedSubmit={form.attemptedSubmit} + width={280} + /> + <TaggInput + accessibilityHint="Enter your email." + accessibilityLabel="Email input field." + placeholder="Email" + autoCompleteType="email" + textContentType="emailAddress" + autoCapitalize="none" + returnKeyType="next" + keyboardType="email-address" + onChangeText={handleEmailUpdate} + onSubmitEditing={() => handleFocusChange('username')} + blurOnSubmit={false} + ref={emailRef} + valid={form.isValidEmail} + invalidWarning={'Please enter a valid email address.'} + attemptedSubmit={form.attemptedSubmit} + width={280} + /> + <TaggInput + accessibilityHint="Enter a username." + accessibilityLabel="Username input field." + placeholder="Username" + autoCompleteType="username" + textContentType="username" + autoCapitalize="none" + returnKeyType="next" + onChangeText={handleUsernameUpdate} + onSubmitEditing={() => handleFocusChange('password')} + blurOnSubmit={false} + ref={usernameRef} + valid={form.isValidUsername} + invalidWarning={ + 'Username must be 6 characters long and contain only alphanumeric characters.' + } + attemptedSubmit={form.attemptedSubmit} + width={280} + /> + <TaggInput + accessibilityHint="Enter a password." + accessibilityLabel="Password input field." + placeholder="Password" + autoCompleteType="password" + textContentType="newPassword" + returnKeyType="next" + onChangeText={handlePasswordUpdate} + onSubmitEditing={() => handleFocusChange('confirm')} + blurOnSubmit={false} + secureTextEntry + ref={passwordRef} + valid={form.isValidPassword} + invalidWarning={ + 'Password must be 8 characters long & contain at least one lowercase, one uppercase, a number, and a special character.' + } + attemptedSubmit={form.attemptedSubmit} + width={280} + /> + <TaggInput + accessibilityHint={'Re-enter your password.'} + accessibilityLabel={'Password confirmation input field.'} + placeholder={'Confirm Password'} + autoCompleteType="password" + textContentType="password" + returnKeyType={form.tcAccepted ? 'go' : 'default'} + onChangeText={handleConfirmUpdate} + onSubmitEditing={handleRegister} + secureTextEntry + ref={confirmRef} + valid={form.passwordsMatch} + invalidWarning={'Passwords must match.'} + attemptedSubmit={form.attemptedSubmit} + width={280} + /> + <TermsConditions + style={styles.tc} + accepted={form.tcAccepted} + onChange={handleTcUpdate} + /> + </View> + <View style={styles.footer}> + <ArrowButton + direction="backward" + onPress={() => navigation.navigate('Login')} + /> + <TouchableOpacity onPress={handleRegister}> + <ArrowButton + direction="forward" + disabled={ + !( + form.isValidFname && + form.isValidLname && + form.isValidEmail && + form.isValidUsername && + form.isValidPassword && + form.passwordsMatch && + form.tcAccepted + ) + } + onPress={handleRegister} + /> + </TouchableOpacity> + </View> + </CenteredView> + </Background> ); }; const styles = StyleSheet.create({ - view: { + container: { flex: 1, - alignSelf: 'center', - justifyContent: 'center', }, - text: { - fontSize: 18, + wizard: { + ...Platform.select({ + ios: { + marginBottom: '18%', + }, + android: { + marginTop: '20%', + marginBottom: '10%', + }, + }), + }, + form: { + alignItems: 'center', + }, + formHeader: { + color: '#fff', + fontSize: 30, + fontWeight: '600', + ...Platform.select({ + ios: { + marginBottom: '6%', + }, + android: { + marginBottom: '2%', + }, + }), + }, + tc: { + ...Platform.select({ + ios: { + marginTop: '5%', + marginBottom: '20%', + }, + android: { + marginTop: '7%', + marginBottom: '12%', + }, + }), + }, + footer: { + width: '100%', + flexDirection: 'row', + justifyContent: 'space-around', + ...Platform.select({ + android: { + marginBottom: '22%', + }, + }), }, }); + export default Registration; |