TMA123: Add Profile Pictures UI (#17)

* rebasing

* rebasing

* remove debug code

* fixed margins and added navigation from login

* moved plist file into gitignore

* moved index.ts to onboarding directory

* install react native image crop picker

* added permissions into Info.plist

* rebasing

* minor changes for Justins PR

* change debug code back

Co-authored-by: meganhong <meganhong31@g.ucla.edu>

1 files changed, 143 insertions, 0 deletions

diff --git a/src/screens/onboarding/Verification.tsx b/src/screens/onboarding/Verification.tsx
new file mode 100644
index 00000000..1dd4cf9e
--- /dev/null
+++ b/src/screens/onboarding/Verification.tsx
@@ -0,0 +1,143 @@
+import React from 'react';
+
+import {RootStackParamList} from '../../routes';
+import {RouteProp} from '@react-navigation/native';
+import {StackNavigationProp} from '@react-navigation/stack';
+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,
+  'Login'
+>;
+interface VerificationProps {
+  route: VerificationScreenRouteProp;
+  navigation: VerificationScreenNavigationProp;
+}
+
+const Verification: React.FC<VerificationProps> = ({}) => {
+  const [value, setValue] = React.useState('');
+  const ref = useBlurOnFulfill({value, cellCount: 6});
+  const [valueProps, getCellOnLayoutHandler] = useClearByFocusCell({
+    value,
+    setValue,
+  });
+
+  return (
+    <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;