[TMA-60] Registration Page UI & Field Validation (#13)

* remove unused image

* refactor LoginInput component to be more generic

* configure bare registration screen

* create index files for exports

* add yarn typing script

* refactor and re-style LoginInput component

* re-style login screen according to designs

* make LoginInput name more generic, give TaggInput dirty & width props

* add disabled feature to login screen submit button, finalized styles

* add arrow images and create ArrowButton component

* create RegistrationWizard component and move files around

* added disabled & enabled buttons to ArrowButton component

* create dummy terms and conditions text

* create common CenteredView component for re-use

* create custom RadioCheckbox for registration screen

* create TermsConditions & OverlayView components

* update index.ts export files

* build registration page UI with basic validation

* yarn lint/type & add platform-specific styling

* add yarn type item to PR checklist

* add react-native-animatable dependency to project

* add regex variables to constants file

* Add width prop for more flexible styling

* Add types and disable auto-capitalization

* Update email validation regex

* Create linear-gradient background component

* Update password regex and add inline docs

* Refactor code to be more readable

* Add warning prop and animation to TaggInput

* Add wrapper View for vertical margins

* Make JSX more readable & add TaggInput components

* Integrate refactored code into registration page

* Merge in login screen changes

* Lint and fix file syntax

* Fix function docs

* Add ViewProps to CenterView props

* Add KeyboardAvoidingView to Background component

* Add blurOnSubmit for inputs, restore deleted handleLogin code

* Create Verification screen and add it to routes

* Add routing to Verification page upon success

* Add API request upon registration submit

* Trigger warning shaking animation on submit

* Make disabled arrow touchable, tap triggers submit

1 files changed, 140 insertions, 0 deletions

diff --git a/src/components/onboarding/TermsConditions.tsx b/src/components/onboarding/TermsConditions.tsx
new file mode 100644
index 00000000..5af1b972
--- /dev/null
+++ b/src/components/onboarding/TermsConditions.tsx
@@ -0,0 +1,140 @@
+import React, {useState} from 'react';
+import {
+  Modal,
+  StyleSheet,
+  View,
+  Text,
+  Button,
+  TouchableOpacity,
+  ScrollView,
+  ViewProps,
+} from 'react-native';
+
+import {RadioCheckbox, CenteredView, OverlayView} from '../common';
+import {dummyTermsConditions} from '../../constants';
+
+interface TermsConditionsProps extends ViewProps {
+  accepted: boolean;
+  onChange: (accepted: boolean) => void;
+}
+const TermsConditions: React.FC<TermsConditionsProps> = (props) => {
+  // boolean representing if modal is visible
+  const [modalVisible, setModalVisible] = useState(false);
+  // destructure props
+  const {accepted, onChange} = props;
+  /**
+   * Hides the modal.
+   */
+  const hideModal = (): void => {
+    if (modalVisible) {
+      setModalVisible(false);
+    }
+  };
+  /**
+   * Sets `accepted` to `true` and hides the modal.
+   */
+  const handleAccept = (): void => {
+    onChange(true);
+    hideModal();
+  };
+  /**
+   * Toggles the value of `accepted`.
+   */
+  const toggleAccepted = (): void => {
+    onChange(!accepted);
+  };
+
+  return (
+    <View {...props}>
+      <View style={styles.body}>
+        <RadioCheckbox checked={accepted} onPress={toggleAccepted} />
+        <View style={styles.bodyPrompt}>
+          <Text style={styles.bodyPromptText}>I accept the </Text>
+          <TouchableOpacity onPress={() => setModalVisible(true)}>
+            <Text
+              style={[styles.bodyPromptText, styles.bodyPromptTextUnderline]}>
+              terms and conditions.
+            </Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+      <Modal visible={modalVisible} transparent={true} animationType="fade">
+        <OverlayView>
+          <CenteredView>
+            <View style={styles.modalView}>
+              <ScrollView
+                style={styles.modalScrollView}
+                contentContainerStyle={styles.modalScrollViewContent}>
+                <Text style={styles.tcHeader}>Terms and Conditions</Text>
+                <Text>{dummyTermsConditions}</Text>
+              </ScrollView>
+              <View style={styles.modalActions}>
+                <Button title="Accept" onPress={handleAccept} />
+                <View style={styles.modalActionsDivider} />
+                <Button title="Close" onPress={hideModal} />
+              </View>
+            </View>
+          </CenteredView>
+        </OverlayView>
+      </Modal>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  body: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  bodyPrompt: {
+    flexDirection: 'row',
+    marginLeft: 10,
+  },
+  bodyPromptText: {
+    fontSize: 16,
+    color: '#fff',
+  },
+  bodyPromptTextUnderline: {
+    textDecorationLine: 'underline',
+  },
+  modalView: {
+    width: '85%',
+    height: '55%',
+    backgroundColor: '#fff',
+    shadowColor: '#000',
+    shadowOpacity: 30,
+    shadowOffset: {width: 0, height: 2},
+    shadowRadius: 5,
+    borderRadius: 8,
+    paddingTop: 30,
+    paddingBottom: 15,
+    paddingHorizontal: 20,
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  modalScrollViewContent: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modalScrollView: {
+    marginBottom: 10,
+  },
+  tcHeader: {
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+  modalActions: {
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+    alignItems: 'center',
+    width: '100%',
+  },
+  modalActionsDivider: {
+    height: '60%',
+    backgroundColor: '#0160Ca',
+    width: 1,
+  },
+});
+
+export default TermsConditions;