3 files changed, 130 insertions, 11 deletions

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;