From 9c7a867c1851914322a4b60f20223ae06a31c661 Mon Sep 17 00:00:00 2001 From: George Rusu <56009869+grusu6928@users.noreply.github.com> Date: Tue, 27 Oct 2020 12:13:13 -0700 Subject: [TMA263] Added Phone Verification UI (#74) * [TMA263] Added Phone Verification UI * include email field Co-authored-by: george Co-authored-by: hsalhab --- src/constants/regex.ts | 8 +++++ src/routes/onboarding/OnboardingStack.tsx | 6 ++-- src/screens/onboarding/RegistrationOne.tsx | 53 ++++++++++++++-------------- src/screens/onboarding/RegistrationThree.tsx | 9 +++-- src/screens/onboarding/RegistrationTwo.tsx | 48 ++++++++++++++++++++++--- src/screens/onboarding/Verification.tsx | 14 ++++---- 6 files changed, 94 insertions(+), 44 deletions(-) (limited to 'src') diff --git a/src/constants/regex.ts b/src/constants/regex.ts index 38ed03ce..4d60d78c 100644 --- a/src/constants/regex.ts +++ b/src/constants/regex.ts @@ -48,3 +48,11 @@ export const bioRegex: RegExp = /^$|^[A-Za-z'\-,.!@#$%^&*()_:?/ ]{1,150}$/; * - match alphanumerics, hyphens, and whitespaces */ export const genderRegex: RegExp = /^$|^[A-Za-z\- ]{2,20}$/; + +/** + * The phone regex has the following constraints + * - must be 10 digits + * - accepts 012-345-6789 + * + */ +export const phoneRegex: RegExp = /(\+[1][0-9]{10})/; diff --git a/src/routes/onboarding/OnboardingStack.tsx b/src/routes/onboarding/OnboardingStack.tsx index ab9816b4..6bc1ed9d 100644 --- a/src/routes/onboarding/OnboardingStack.tsx +++ b/src/routes/onboarding/OnboardingStack.tsx @@ -5,10 +5,10 @@ export type OnboardingStackParams = { Login: undefined; InvitationCodeVerification: undefined; RegistrationOne: undefined; - RegistrationTwo: {email: string}; - RegistrationThree: {firstName: string; lastName: string; email: string}; + RegistrationTwo: {phone: string}; + RegistrationThree: {firstName: string; lastName: string; phone: string; email: string}; Checkpoint: {username: string; userId: string}; - Verification: {email: string}; + Verification: {phone: string}; ProfileOnboarding: {username: string; userId: string}; SocialMedia: {username: string; userId: string}; }; diff --git a/src/screens/onboarding/RegistrationOne.tsx b/src/screens/onboarding/RegistrationOne.tsx index 12643d69..e0db0755 100644 --- a/src/screens/onboarding/RegistrationOne.tsx +++ b/src/screens/onboarding/RegistrationOne.tsx @@ -26,7 +26,7 @@ import {trackPromise} from 'react-promise-tracker'; import {SEND_OTP_ENDPOINT} from '../../constants'; -import {emailRegex} from '../../constants'; +import {phoneRegex} from '../../constants'; type RegistrationScreenOneRouteProp = RouteProp< OnboardingStackParams, @@ -46,24 +46,24 @@ interface RegistrationOneProps { */ const RegistrationOne: React.FC = ({navigation}) => { // // refs for changing focus - const emailRef = useRef(); + const phoneRef = useRef(); // registration form state const [form, setForm] = useState({ - email: '', - isValidEmail: false, + phone_number: '', + isValidPhone: false, attemptedSubmit: false, }); /* * 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); + const handlePhoneUpdate = (phone_number: string) => { + let isValidPhone: boolean = phoneRegex.test(phone_number); setForm({ ...form, - email, - isValidEmail, + phone_number, + isValidPhone, }); }; @@ -78,27 +78,27 @@ const RegistrationOne: React.FC = ({navigation}) => { }); } try { - if (form.isValidEmail) { + if (form.isValidPhone) { let sendOtpResponse = await trackPromise( fetch(SEND_OTP_ENDPOINT, { method: 'POST', body: JSON.stringify({ - email: form.email, + phone_number: form.phone_number, }), }), ); let otpStatusCode = sendOtpResponse.status; if (otpStatusCode === 200) { navigation.navigate('Verification', { - email: form.email, + phone: form.phone_number, }); } else if (otpStatusCode === 409) { Alert.alert( - 'This email is already registered with us, please use another email.', + 'This phone number is already registered with us, please use another email.', ); } else { Alert.alert( - "Looks like Our email servers might be down 😓'", + "Looks like Our phone servers might be down 😓'", "Try again in a couple minutes. We're sorry for the inconvenience.", ); } @@ -127,7 +127,7 @@ const RegistrationOne: React.FC = ({navigation}) => { @@ -142,22 +142,23 @@ const RegistrationOne: React.FC = ({navigation}) => { behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={styles.container}> - ENTER EMAIL + ENTER PHONE NUMBER = ({ const registrationName = route.params; const fname: string = registrationName!.firstName; const lname: string = registrationName!.lastName; + const phone: string = registrationName!.phone; const email: string = registrationName!.email; + /** * Handles focus change to the next input field. * @param field key for field to move focus onto @@ -84,11 +86,11 @@ const RegistrationThree: React.FC = ({ // registration form state const [form, setForm] = useState({ - email: '', + phone: '', username: '', password: '', confirm: '', - isValidEmail: false, + isValidPhone: false, isValidUsername: false, isValidPassword: false, passwordsMatch: false, @@ -163,6 +165,7 @@ const RegistrationThree: React.FC = ({ first_name: fname, last_name: lname, email: email, + phone_number: phone, username: form.username, password: form.password, }), @@ -218,7 +221,7 @@ const RegistrationThree: React.FC = ({ navigation.navigate('RegistrationTwo', {email: email})} + onPress={() => navigation.navigate('RegistrationTwo', {phone: phone})} /> = ({ }) => { // refs for changing focus const lnameRef = useRef(); + const emailRef = useRef(); const params = route.params; - const email: string = params!.email; + const phone: string = params!.phone; /** * Handles focus change to the next input field. * @param field key for field to move focus onto @@ -58,6 +59,10 @@ const RegistrationTwo: React.FC = ({ const lnameField: any = lnameRef.current; lnameField.focus(); break; + case 'email': + const emailField: any = emailRef.current; + emailField.focus(); + break; default: return; } @@ -66,9 +71,11 @@ const RegistrationTwo: React.FC = ({ // registration form state const [form, setForm] = useState({ fname: '', - lname: '', + lname: '', + email: '', isValidFname: false, isValidLname: false, + isValidEmail: false, attemptedSubmit: false, token: '', }); @@ -97,6 +104,18 @@ const RegistrationTwo: React.FC = ({ }); }; + /* + * 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 a click on the "next" arrow button by navigating to RegistrationThree if First Name and Last Name are filled */ @@ -108,11 +127,12 @@ const RegistrationTwo: React.FC = ({ }); } try { - if (form.isValidFname && form.isValidLname) { + if (form.isValidFname && form.isValidLname && form.isValidEmail) { navigation.navigate('RegistrationThree', { firstName: form.fname, lastName: form.lname, - email: email, + email: form.email, + phone: phone, }); } else { setForm({...form, attemptedSubmit: false}); @@ -187,6 +207,24 @@ const RegistrationTwo: React.FC = ({ width={280} onSubmitEditing={goToRegisterThree} /> +