[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, 4 insertions, 2 deletions

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) => {
         <View style={props.step === 'two' ? stepActiveStyle : stepStyle} />
         <View style={styles.progress} />
         <View style={props.step === 'three' ? stepActiveStyle : stepStyle} />
+        <View style={styles.progress} />
+        <View style={props.step === 'four' ? stepActiveStyle : stepStyle} />
       </View>
     </View>
   );
@@ -38,7 +40,7 @@ const styles = StyleSheet.create({
     backgroundColor: '#e1f0ff',
   },
   progress: {
-    width: '30%',
+    width: '20%',
     height: 2,
     backgroundColor: '#e1f0ff',
   },