[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, 91 insertions, 6 deletions

diff --git a/src/screens/onboarding/Verification.tsx b/src/screens/onboarding/Verification.tsx
index 827f65e1..1c456e01 100644
--- a/src/screens/onboarding/Verification.tsx
+++ b/src/screens/onboarding/Verification.tsx
@@ -4,6 +4,7 @@ import {RootStackParamList} from '../../routes';
 import {RouteProp} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
 import {Background, RegistrationWizard, SubmitButton} from '../../components';
+import {VERIFY_OTP_ENDPOINT, SEND_OTP_ENDPOINT} from '../../constants';
 import {Text} from 'react-native-animatable';
 import {
   CodeField,
@@ -16,28 +17,107 @@ import {
   View,
   TouchableOpacity,
   KeyboardAvoidingView,
+  Alert,
+  ActivityIndicator,
 } from 'react-native';
-type LoginScreenRouteProp = RouteProp<RootStackParamList, 'Login'>;
-type LoginScreenNavigationProp = StackNavigationProp<
+import {usePromiseTracker, trackPromise} from 'react-promise-tracker';
+
+type VerificationScreenRouteProp = RouteProp<
+  RootStackParamList,
+  'Verification'
+>;
+type VerificationScreenNavigationProp = StackNavigationProp<
   RootStackParamList,
-  'Login'
+  'Verification'
 >;
 interface VerificationProps {
   route: VerificationScreenRouteProp;
   navigation: VerificationScreenNavigationProp;
 }
 
-const Verification: React.FC<VerificationProps> = ({}) => {
+const Verification: React.FC<VerificationProps> = ({route, navigation}) => {
   const [value, setValue] = React.useState('');
   const ref = useBlurOnFulfill({value, cellCount: 6});
   const [valueProps, getCellOnLayoutHandler] = useClearByFocusCell({
     value,
     setValue,
   });
+  const registrationVals = route.params;
+  const username: string = registrationVals!.username;
+  const email: string = registrationVals!.email;
+
+  /**
+   * Sends the verify_otp request upon tapping the Verify button.
+   * If successful, it navigates to the Profile page.
+   */
+  const handleVerification = async () => {
+    try {
+      let verifyOtpResponse = await fetch(VERIFY_OTP_ENDPOINT, {
+        method: 'POST',
+        body: JSON.stringify({
+          username: username,
+          otp: value,
+        }),
+      });
+      let statusCode = verifyOtpResponse.status;
+      if (statusCode === 200) {
+        navigation.navigate('Profile');
+      } else {
+        Alert.alert(
+          'Invalid verification code 🤔',
+          'Try again. Tap the resend code button if you need a new code.',
+        );
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  /**
+   * Sends the send_otp request so to provide a new verification code upon tapping the Resend Code button.
+   */
+  const handleResend = async () => {
+    try {
+      let sendOtpResponse = await trackPromise(
+        fetch(SEND_OTP_ENDPOINT, {
+          method: 'POST',
+          body: JSON.stringify({
+            username: username,
+            email: email,
+          }),
+        }),
+      );
+      let sendOtpStatusCode = sendOtpResponse.status;
+      if (sendOtpStatusCode === 200) {
+        setValue('');
+        Alert.alert('New verification code sent!', 'Check your email for your code.');
+      } else {
+        Alert.alert('Something went wrong!');
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  /**
+   * An activity indicator to indicate that the app is working during the send_otp request.
+   */
+  const LoadingIndicator = () => {
+    const {promiseInProgress} = usePromiseTracker();
+    return promiseInProgress ? (
+      <ActivityIndicator
+        style={styles.loadingIndicator}
+        size="large"
+        color="#fff"
+      />
+    ) : (
+      <></>
+    );
+  };
 
   return (
     <Background centered style={styles.container}>
-      <RegistrationWizard style={styles.wizard} step="one" />
+      <RegistrationWizard style={styles.wizard} step="two" />
       <KeyboardAvoidingView behavior="padding" style={styles.form}>
         <Text style={styles.formHeader}>Enter 6 digit code</Text>
         <Text style={styles.description}>
@@ -69,10 +149,12 @@ const Verification: React.FC<VerificationProps> = ({}) => {
           style={styles.button}
           accessibilityLabel="Verify"
           accessibilityHint="Select this after entering your email verification code"
+          onPress={handleVerification}
         />
-        <TouchableOpacity>
+        <TouchableOpacity onPress={handleResend}>
           <Text style={styles.resend}>Resend Code</Text>
         </TouchableOpacity>
+        <LoadingIndicator />
       </KeyboardAvoidingView>
     </Background>
   );
@@ -139,5 +221,8 @@ const styles = StyleSheet.create({
   button: {
     marginVertical: '5%',
   },
+  loadingIndicator: {
+    marginVertical: '5%',
+  },
 });
 export default Verification;