From d0a72c6e258def8e5f5ac99477114da8edfc2fcf Mon Sep 17 00:00:00 2001 From: Justin Shillingford Date: Wed, 15 Jul 2020 14:46:58 -0400 Subject: [TMA-96] Verification Page Logic (#19) * Removed header from view * Setup basic layout of Verification page Also created new SubmitButton component * Some light code cleanup * Implemented SubmitButton component on Login * Added basic verification field * Styled Verification CodeField * Quick typo fix * Some lint cleaning * Removed header from view * Setup basic layout of Verification page Also created new SubmitButton component * Some light code cleanup * Implemented SubmitButton component on Login * Added basic verification field * Styled Verification CodeField * Quick typo fix * Some lint cleaning * Verification isn't that exciting lol * Removed header from view * Setup basic layout of Verification page Also created new SubmitButton component * Some light code cleanup * Implemented SubmitButton component on Login * Added basic verification field * Styled Verification CodeField * Quick typo fix * Some lint cleaning * Light lint cleaning * Still not that exciting lol * Removed misplaced accessibility labels * Added documentation to SubmitButton component * Implemented KeyboardAvoidingView * Fixed wizard position consistency * Updated Verification CodeField to take 6 digits * Removed marginVertical prop from SubmitButton * Added basic implementation of send-otp request * Added indicator to indicate progress during fetch * Handled verification logic * Fixed Verification Screen Routing naming * Passed username and email to verification * Some lint cleaning * Resend Code button is now fully functional * Some lint cleaning * Handling TypeScript type checking errors * Removed header from view * Setup basic layout of Verification page Also created new SubmitButton component * Some light code cleanup * Implemented SubmitButton component on Login * Added basic verification field * Styled Verification CodeField * Some lint cleaning * Setup basic layout of Verification page Also created new SubmitButton component * Some light code cleanup * Implemented SubmitButton component on Login * Added basic verification field * Styled Verification CodeField * Removed header from view * Setup basic layout of Verification page Also created new SubmitButton component * Some light code cleanup * Implemented SubmitButton component on Login * Added basic verification field * Styled Verification CodeField * Some lint cleaning * Removed misplaced accessibility labels * Added documentation to SubmitButton component * Implemented KeyboardAvoidingView * Fixed wizard position consistency * Updated Verification CodeField to take 6 digits * Removed marginVertical prop from SubmitButton * Added basic implementation of send-otp request * Added indicator to indicate progress during fetch * Handled verification logic * Fixed Verification Screen Routing naming * Passed username and email to verification * Some lint cleaning * Resend Code button is now fully functional * Some lint cleaning * Handling TypeScript type checking errors * Lint cleaning * Fixed a merge conflict resolution stowaway * Final lint cleaning before PR * Clear CodeField upon code resend * Baby lint * Navigate to Profile page upon verification * Improved invalid code message * Added documentation for new functions * Baby baby lint * Updated Wizard to have 4 steps * Statuses aren't verifications lmao --- src/screens/onboarding/Login.tsx | 2 +- src/screens/onboarding/Registration.tsx | 43 ++++++++++++--- src/screens/onboarding/Verification.tsx | 97 +++++++++++++++++++++++++++++++-- 3 files changed, 127 insertions(+), 15 deletions(-) (limited to 'src/screens') diff --git a/src/screens/onboarding/Login.tsx b/src/screens/onboarding/Login.tsx index e8500eec..8e406522 100644 --- a/src/screens/onboarding/Login.tsx +++ b/src/screens/onboarding/Login.tsx @@ -43,7 +43,7 @@ const Login: React.FC = ({navigation}: LoginProps) => { }); /** - * Updates the state of username. Also verifies the input of the username field by ensuring proper length and characters. + * Updates the state of username. Also verifies the input of the username field by ensuring proper length and appropriate characters. */ const handleUsernameUpdate = (val: string) => { let validLength: boolean = val.length >= 6; diff --git a/src/screens/onboarding/Registration.tsx b/src/screens/onboarding/Registration.tsx index 29a2b3f3..8d564cd0 100644 --- a/src/screens/onboarding/Registration.tsx +++ b/src/screens/onboarding/Registration.tsx @@ -10,7 +10,9 @@ import { Platform, TouchableOpacity, KeyboardAvoidingView, + ActivityIndicator, } from 'react-native'; +import {usePromiseTracker, trackPromise} from 'react-promise-tracker'; import {RootStackParamList} from '../../routes'; import { @@ -25,6 +27,7 @@ import { passwordRegex, usernameRegex, REGISTER_ENDPOINT, + SEND_OTP_ENDPOINT, } from '../../constants'; type RegistrationScreenRouteProp = RouteProp< @@ -200,7 +203,7 @@ const Registration: React.FC = ({navigation}) => { form.passwordsMatch ) { if (form.tcAccepted) { - let response = await fetch(REGISTER_ENDPOINT, { + let registerResponse = await fetch(REGISTER_ENDPOINT, { method: 'POST', body: JSON.stringify({ first_name: form.fname, @@ -210,14 +213,25 @@ const Registration: React.FC = ({navigation}) => { password: form.password, }), }); - let statusCode = response.status; - let data = await response.json(); + let statusCode = registerResponse.status; + let data = await registerResponse.json(); if (statusCode === 201) { - navigation.navigate('Verification'); - Alert.alert( - "You've successfully registered!🥳", - `Welcome, ${form.username}`, + let sendOtpResponse = await trackPromise( + fetch(SEND_OTP_ENDPOINT, { + method: 'POST', + body: JSON.stringify({ + username: form.username, + email: form.email, + }), + }), ); + let otpStatusCode = sendOtpResponse.status; + if (otpStatusCode === 200) { + navigation.navigate('Verification', { + username: form.username, + email: form.email, + }); + } } else if (statusCode === 409) { Alert.alert('Registration failed 😔', `${data}`); } else { @@ -274,6 +288,18 @@ const Registration: React.FC = ({navigation}) => { ); + /** + * An activity indicator to indicate that the app is working during the send_otp request. + */ + const LoadingIndicator = () => { + const {promiseInProgress} = usePromiseTracker(); + return promiseInProgress ? ( + + ) : ( + <> + ); + }; + return ( @@ -392,6 +418,7 @@ const Registration: React.FC = ({navigation}) => { accepted={form.tcAccepted} onChange={handleTcUpdate} /> +