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%',