[TMA-95] Verification Page UI (#15)

* 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

* Updated text to represent 6 digit code

🤦🏽‍♂️

* Made Background use centered prop

Also found another 4 that needed to be a 6 🤦🏽‍♂️

7 files changed, 188 insertions, 14 deletions

diff --git a/src/components/onboarding/Background.tsx b/src/components/onboarding/Background.tsx
index 85675b0d..054eeff6 100644
--- a/src/components/onboarding/Background.tsx
+++ b/src/components/onboarding/Background.tsx
@@ -5,7 +5,7 @@ import {
   TouchableWithoutFeedback,
   Keyboard,
   ViewProps,
-  View,
+  SafeAreaView,
 } from 'react-native';
 import {CenteredView} from '../common';
 
@@ -24,7 +24,7 @@ const Background: React.FC<BackgroundProps> = (props) => {
         {props.centered ? (
           <CenteredView {...props}>{props.children}</CenteredView>
         ) : (
-          <View {...props}>{props.children}</View>
+          <SafeAreaView {...props}>{props.children}</SafeAreaView>
         )}
       </TouchableWithoutFeedback>
     </LinearGradient>
diff --git a/src/components/onboarding/SubmitButton.tsx b/src/components/onboarding/SubmitButton.tsx
new file mode 100644
index 00000000..f946d390
--- /dev/null
+++ b/src/components/onboarding/SubmitButton.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import {
+  TouchableOpacity,
+  TouchableOpacityProps,
+  Text,
+  StyleSheet,
+  View,
+} from 'react-native';
+
+interface SubmitButtonProps extends TouchableOpacityProps {
+  text: string;
+  color: string;
+}
+
+/*
+ * A button component that creates a TouchableOpacity in the style of our onboarding buttons. It takes in props to define the text in the TouchableOpacity as well as the background color.
+*/
+const SubmitButton: React.FC<SubmitButtonProps> = (
+  props: SubmitButtonProps,
+) => {
+  return (
+    <View {...props}>
+      <TouchableOpacity
+        style={[
+          styles.button,
+          {backgroundColor: props.color},
+        ]}
+      >
+        <Text style={styles.text}>{props.text}</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    width: 144,
+    height: 36,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 18,
+  },
+  text: {
+    fontSize: 16,
+    color: '#78a0ef',
+    fontWeight: 'bold',
+  },
+});
+
+export default SubmitButton;
diff --git a/src/components/onboarding/index.ts b/src/components/onboarding/index.ts
index 01255c01..ef972194 100644
--- a/src/components/onboarding/index.ts
+++ b/src/components/onboarding/index.ts
@@ -2,3 +2,4 @@ export {default as ArrowButton} from './ArrowButton';
 export {default as Background} from './Background';
 export {default as RegistrationWizard} from './RegistrationWizard';
 export {default as TermsConditions} from './TermsConditions';
+export {default as SubmitButton} from './SubmitButton';
diff --git a/src/routes/Routes.tsx b/src/routes/Routes.tsx
index 94040c1f..c426b033 100644
--- a/src/routes/Routes.tsx
+++ b/src/routes/Routes.tsx
@@ -26,7 +26,11 @@ const Routes: React.FC<RoutesProps> = ({}) => {
         component={Registration}
         options={{headerShown: false}}
       />
-      <RootStack.Screen name="Verification" component={Verification} />
+      <RootStack.Screen
+        name="Verification"
+        component={Verification}
+        options={{headerShown: false}}
+      />
     </RootStack.Navigator>
   );
 };
diff --git a/src/screens/Login.tsx b/src/screens/Login.tsx
index b3b1ab71..1ddf6e0a 100644
--- a/src/screens/Login.tsx
+++ b/src/screens/Login.tsx
@@ -14,7 +14,7 @@ import {
 } from 'react-native';
 
 import {RootStackParamList} from '../routes';
-import {Background, TaggInput} from '../components';
+import {Background, TaggInput, SubmitButton} from '../components';
 import {usernameRegex, LOGIN_ENDPOINT} from '../constants';
 
 type LoginScreenRouteProp = RouteProp<RootStackParamList, 'Login'>;
@@ -171,13 +171,14 @@ const Login: React.FC<LoginProps> = ({navigation}: LoginProps) => {
    * Login screen login button.
    */
   const LoginButton = () => (
-    <TouchableOpacity
+    <SubmitButton
+      text="Let's Start!"
+      color="#fff"
+      style={styles.button}
       accessibilityLabel="Let's Start!"
       accessibilityHint="Select this after entering your tagg username and password"
       onPress={handleLogin}
-      style={styles.start}>
-      <Text style={styles.startText}>Let's Start!</Text>
-    </TouchableOpacity>
+    />
   );
 
   /**
@@ -308,6 +309,9 @@ const styles = StyleSheet.create({
     color: '#fff',
     textDecorationLine: 'underline',
   },
+  button: {
+    marginVertical: '10%'
+  }
 });
 
 export default Login;
diff --git a/src/screens/Registration.tsx b/src/screens/Registration.tsx
index aaf929ba..0471e42e 100644
--- a/src/screens/Registration.tsx
+++ b/src/screens/Registration.tsx
@@ -215,7 +215,7 @@ const Registration: React.FC<RegistrationProps> = ({navigation}) => {
           if (statusCode === 201) {
             navigation.navigate('Verification');
             Alert.alert(
-              "You've successfully registrated!🥳",
+              "You've successfully registered!🥳",
               `Welcome, ${form.username}`,
             );
           } else if (statusCode === 409) {
diff --git a/src/screens/Verification.tsx b/src/screens/Verification.tsx
index 92032594..82f01e54 100644
--- a/src/screens/Verification.tsx
+++ b/src/screens/Verification.tsx
@@ -3,8 +3,20 @@ import React from 'react';
 import {RootStackParamList} from '../routes';
 import {RouteProp} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
-import {Background, CenteredView} from '../components';
+import {
+  Background,
+  CenteredView,
+  RegistrationWizard,
+  SubmitButton,
+} from '../components';
 import {Text} from 'react-native-animatable';
+import {
+  CodeField,
+  Cursor,
+  useBlurOnFulfill,
+  useClearByFocusCell,
+} from 'react-native-confirmation-code-field';
+import {StyleSheet, View, TouchableOpacity, KeyboardAvoidingView} from 'react-native';
 type LoginScreenRouteProp = RouteProp<RootStackParamList, 'Login'>;
 type LoginScreenNavigationProp = StackNavigationProp<
   RootStackParamList,
@@ -16,13 +28,116 @@ interface VerificationProps {
 }
 
 const Verification: React.FC<VerificationProps> = ({}) => {
+  const [value, setValue] = React.useState('');
+  const ref = useBlurOnFulfill({value, cellCount: 6});
+  const [valueProps, getCellOnLayoutHandler] = useClearByFocusCell({
+    value,
+    setValue,
+  });
+
   return (
-    <Background>
-      <CenteredView>
-        <Text>Verification!</Text>
-      </CenteredView>
+    <Background centered style={styles.container}>
+        <RegistrationWizard style={styles.wizard} step="one" />
+        <KeyboardAvoidingView behavior='padding' style={styles.form}>
+          <Text style={styles.formHeader}>Enter 6 digit code</Text>
+          <Text style={styles.description}>
+            We sent a 6 digit verification code to the email you provided.
+          </Text>
+          <CodeField
+            ref={ref}
+            {...valueProps}
+            value={value}
+            onChangeText={setValue}
+            cellCount={6}
+            rootStyle={styles.codeFieldRoot}
+            keyboardType="number-pad"
+            textContentType="oneTimeCode"
+            renderCell={({index, symbol, isFocused}) => (
+              <View
+                onLayout={getCellOnLayoutHandler(index)}
+                key={index}
+                style={[styles.cellRoot, isFocused && styles.focusCell]}>
+                <Text style={styles.cellText}>
+                  {symbol || (isFocused ? <Cursor /> : null)}
+                </Text>
+              </View>
+            )}
+          />
+          <SubmitButton
+            text="Verify"
+            color="#fff"
+            style={styles.button}
+            accessibilityLabel="Verify"
+            accessibilityHint="Select this after entering your email verification code"
+          />
+          <TouchableOpacity>
+            <Text style={styles.resend}>Resend Code</Text>
+          </TouchableOpacity>
+        </KeyboardAvoidingView>
     </Background>
   );
 };
 
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  wizard: {
+    marginTop: '3.5%',
+    flex: 1,
+    justifyContent: 'center'
+  },
+  form: {
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    flex: 3,
+  },
+  formHeader: {
+    color: '#fff',
+    fontSize: 20,
+    fontWeight: 'bold',
+    alignSelf: 'flex-start',
+    marginBottom: '6%',
+    marginHorizontal: '10%',
+  },
+  description: {
+    color: '#fff',
+    fontWeight: '600',
+    fontSize: 17,
+    marginHorizontal: '10%',
+  },
+  resend: {
+    textDecorationLine: 'underline',
+    color: '#fff',
+    fontSize: 15,
+    fontWeight: '600',
+  },
+  codeFieldRoot: {
+    width: 280,
+    marginHorizontal: 'auto',
+    marginVertical: '15%',
+  },
+  cellRoot: {
+    width: 40,
+    height: 60,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderBottomColor: '#fff',
+    borderBottomWidth: 1,
+  },
+  cellText: {
+    color: '#fff',
+    fontSize: 48,
+    textAlign: 'center',
+  },
+  focusCell: {
+    borderBottomColor: '#78a0ef',
+    borderBottomWidth: 2,
+  },
+  button: {
+    marginVertical: '5%'
+  }
+});
 export default Verification;