[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

1 files changed, 35 insertions, 8 deletions

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<RegistrationProps> = ({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<RegistrationProps> = ({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<RegistrationProps> = ({navigation}) => {
     </View>
   );
 
+  /**
+   * An activity indicator to indicate that the app is working during the send_otp request.
+   */
+  const LoadingIndicator = () => {
+    const {promiseInProgress} = usePromiseTracker();
+    return promiseInProgress ? (
+      <ActivityIndicator size="large" color="#fff" />
+    ) : (
+      <></>
+    );
+  };
+
   return (
     <Background style={styles.container}>
       <StatusBar barStyle="light-content" />
@@ -392,6 +418,7 @@ const Registration: React.FC<RegistrationProps> = ({navigation}) => {
           accepted={form.tcAccepted}
           onChange={handleTcUpdate}
         />
+        <LoadingIndicator />
       </KeyboardAvoidingView>
       <Footer />
     </Background>
@@ -421,7 +448,7 @@ const styles = StyleSheet.create({
     marginBottom: '5%',
   },
   tc: {
-    marginTop: '5%',
+    marginVertical: '5%',
   },
   footer: {
     width: '100%',