[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 🤦🏽‍♂️

1 files changed, 120 insertions, 5 deletions

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;