[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

4 files changed, 39 insertions, 5 deletions

diff --git a/src/constants/api.ts b/src/constants/api.ts
new file mode 100644
index 00000000..0944eb16
--- /dev/null
+++ b/src/constants/api.ts
@@ -0,0 +1,4 @@
+export const API_ENDPOINT: string = 'http://127.0.0.1:8000/api/';
+export const LOGIN_ENDPOINT: string = 'http://127.0.0.1:8000/api/login/';
+export const LOGOUT_ENDPOINT: string = 'http://127.0.0.1:8000/api/logout/';
+export const REGISTER_ENDPOINT: string = 'http://127.0.0.1:8000/api/register/';
diff --git a/src/constants/index.ts b/src/constants/index.ts
index 0667a187..deb89e57 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -1,5 +1,3 @@
-// Backend API constants
-export const API_ENDPOINT: string = 'http://127.0.0.1:8000/api/';
-export const LOGIN_ENDPOINT: string = 'http://127.0.0.1:8000/api/login/';
-export const LOGOUT_ENDPOINT: string = 'http://127.0.0.1:8000/api/logout/';
-export const REGISTER_ENDPOINT: string = 'http://127.0.0.1:8000/api/register/';
+export * from './api';
+export * from './regex';
+export * from './termsConditions';
diff --git a/src/constants/regex.ts b/src/constants/regex.ts
new file mode 100644
index 00000000..350cb855
--- /dev/null
+++ b/src/constants/regex.ts
@@ -0,0 +1,21 @@
+/**
+ * The email regex has complex constraints compliant with RFC 5322 standards. More details can be found [here](https://emailregex.com/).
+ */
+export const emailRegex: RegExp = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+
+/**
+ * The password regex has the following constraints
+ * - min. 8 chars, max. 120 chars ({8,120})
+ * - at least one numeric digit ([0-9])
+ * - at least one lowercase letter ([a-z])
+ * - at least one uppercase letter ([A-Z])
+ * - at least one special character ([^a-zA-z0-9])
+ */
+export const passwordRegex: RegExp = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,120}$/;
+
+/**
+ * The username regex has the following constraints
+ * - min. 6 chars, max. 30 chars ({6,30})
+ * - match only alphanumerics, underscores, and periods
+ */
+export const usernameRegex: RegExp = /^[a-zA-Z0-9_.]{6,30}$/;
diff --git a/src/constants/termsConditions.ts b/src/constants/termsConditions.ts
new file mode 100644
index 00000000..37c2b0e4
--- /dev/null
+++ b/src/constants/termsConditions.ts
@@ -0,0 +1,11 @@
+export const dummyTermsConditions = `
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A condimentum vitae sapien pellentesque habitant morbi tristique senectus. Bibendum neque egestas congue quisque. Semper risus in hendrerit gravida rutrum. Ullamcorper malesuada proin libero nunc consequat interdum varius sit amet. Ultrices neque ornare aenean euismod elementum nisi. Nunc pulvinar sapien et ligula ullamcorper malesuada proin libero nunc. Auctor neque vitae tempus quam pellentesque nec nam aliquam. Vestibulum mattis ullamcorper velit sed. Leo in vitae turpis massa sed elementum tempus egestas. Interdum consectetur libero id faucibus. Vitae purus faucibus ornare suspendisse sed. Accumsan lacus vel facilisis volutpat. Velit sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Nec feugiat nisl pretium fusce id velit ut. Amet consectetur adipiscing elit duis tristique sollicitudin nibh. Ipsum a arcu cursus vitae congue. Ultricies lacus sed turpis tincidunt id aliquet risus feugiat. Facilisis mauris sit amet massa vitae tortor.
+
+Molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit sed. Condimentum mattis pellentesque id nibh tortor. Nullam non nisi est sit amet. Ipsum consequat nisl vel pretium lectus quam id leo. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus aenean. Blandit massa enim nec dui nunc mattis. Diam vulputate ut pharetra sit amet. Velit laoreet id donec ultrices. Aenean pharetra magna ac placerat vestibulum lectus mauris. Magna fermentum iaculis eu non. Quis imperdiet massa tincidunt nunc. Et tortor consequat id porta nibh venenatis cras sed. Vel facilisis volutpat est velit egestas dui id. Volutpat lacus laoreet non curabitur gravida arcu ac tortor dignissim. Et netus et malesuada fames ac. Semper eget duis at tellus at. Non curabitur gravida arcu ac tortor dignissim convallis. Dui sapien eget mi proin sed libero enim sed. Neque viverra justo nec ultrices dui sapien. Id neque aliquam vestibulum morbi.
+
+Diam phasellus vestibulum lorem sed risus ultricies. Faucibus pulvinar elementum integer enim. Senectus et netus et malesuada fames. Vitae proin sagittis nisl rhoncus mattis rhoncus urna neque viverra. Tincidunt lobortis feugiat vivamus at augue eget arcu. Lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque. Gravida in fermentum et sollicitudin ac orci. Vitae nunc sed velit dignissim sodales ut eu sem integer. Euismod quis viverra nibh cras. Massa sed elementum tempus egestas sed sed risus pretium quam. Fermentum odio eu feugiat pretium nibh ipsum consequat nisl. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. Ipsum dolor sit amet consectetur adipiscing elit pellentesque. Sed faucibus turpis in eu mi bibendum neque egestas. Etiam tempor orci eu lobortis elementum nibh tellus molestie.
+
+In ante metus dictum at tempor commodo ullamcorper. Pharetra vel turpis nunc eget lorem dolor. Platea dictumst vestibulum rhoncus est pellentesque. Maecenas pharetra convallis posuere morbi. Magna sit amet purus gravida. Quam id leo in vitae turpis. Sodales ut etiam sit amet nisl purus in mollis nunc. Euismod elementum nisi quis eleifend quam. Ut porttitor leo a diam. Et ligula ullamcorper malesuada proin libero. In tellus integer feugiat scelerisque varius morbi. Ultricies mi eget mauris pharetra et ultrices neque ornare. Facilisis sed odio morbi quis commodo odio aenean sed. Consequat id porta nibh venenatis cras sed. Tortor vitae purus faucibus ornare.
+
+Velit euismod in pellentesque massa placerat duis ultricies. Mollis nunc sed id semper risus in hendrerit gravida. Ultrices neque ornare aenean euismod elementum nisi quis eleifend quam. Nunc mattis enim ut tellus elementum sagittis vitae et leo. Dolor sit amet consectetur adipiscing. Sapien faucibus et molestie ac. Sit amet volutpat consequat mauris nunc congue. Nunc id cursus metus aliquam eleifend. Rutrum quisque non tellus orci ac. Massa id neque aliquam vestibulum morbi blandit cursus. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Viverra tellus in hac habitasse. Urna porttitor rhoncus dolor purus non enim praesent elementum facilisis. Dignissim sodales ut eu sem integer vitae justo eget magna. Gravida arcu ac tortor dignissim convallis. Massa vitae tortor condimentum lacinia quis. Tellus id interdum velit laoreet id donec ultrices tincidunt. Tellus orci ac auctor augue mauris. Proin sed libero enim sed faucibus turpis in eu mi.
+`;