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/components/onboarding/RegistrationWizard.tsx | 6 +- src/constants/api.ts | 3 + src/routes/Routes.tsx | 8 +- src/screens/onboarding/Login.tsx | 2 +- src/screens/onboarding/Registration.tsx | 43 +++++++++-- src/screens/onboarding/Verification.tsx | 97 ++++++++++++++++++++++-- 6 files changed, 140 insertions(+), 19 deletions(-) (limited to 'src') diff --git a/src/components/onboarding/RegistrationWizard.tsx b/src/components/onboarding/RegistrationWizard.tsx index 5d7e6ee2..1157455f 100644 --- a/src/components/onboarding/RegistrationWizard.tsx +++ b/src/components/onboarding/RegistrationWizard.tsx @@ -2,7 +2,7 @@ import React from 'react'; import {View, StyleSheet, ViewProps} from 'react-native'; interface RegistrationWizardProps extends ViewProps { - step: 'one' | 'two' | 'three'; + step: 'one' | 'two' | 'three' | 'four' | 'five'; } const RegistrationWizard = (props: RegistrationWizardProps) => { @@ -16,6 +16,8 @@ const RegistrationWizard = (props: RegistrationWizardProps) => { + + ); @@ -38,7 +40,7 @@ const styles = StyleSheet.create({ backgroundColor: '#e1f0ff', }, progress: { - width: '30%', + width: '20%', height: 2, backgroundColor: '#e1f0ff', }, diff --git a/src/constants/api.ts b/src/constants/api.ts index 0944eb16..657adf03 100644 --- a/src/constants/api.ts +++ b/src/constants/api.ts @@ -2,3 +2,6 @@ export const API_ENDPOINT: string = 'http://127.0.0.1:8000/api/'; export const LOGIN_ENDPOINT: string = 'http://127.0.0.1:8000/api/login/'; export const LOGOUT_ENDPOINT: string = 'http://127.0.0.1:8000/api/logout/'; export const REGISTER_ENDPOINT: string = 'http://127.0.0.1:8000/api/register/'; +export const SEND_OTP_ENDPOINT: string = 'http://127.0.0.1:8000/api/send-otp/'; +export const VERIFY_OTP_ENDPOINT: string = + 'http://127.0.0.1:8000/api/verify-otp/'; diff --git a/src/routes/Routes.tsx b/src/routes/Routes.tsx index 98aeff8d..c6365613 100644 --- a/src/routes/Routes.tsx +++ b/src/routes/Routes.tsx @@ -12,7 +12,7 @@ import { export type RootStackParamList = { Login: undefined; Registration: undefined; - Verification: undefined; + Verification: {username: string; email: string} | undefined; Profile: undefined; Camera: undefined; }; @@ -44,7 +44,11 @@ const Routes: React.FC = ({}) => { component={Profile} options={{headerShown: false}} /> - + ); }; 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} /> +