From e32241734c8cc258812ac12c7727aaa7f947eed5 Mon Sep 17 00:00:00 2001
From: Leon Jiang <35908040+leonyjiang@users.noreply.github.com>
Date: Wed, 8 Jul 2020 09:56:17 -0700
Subject: [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
---
 src/components/common/RadioCheckbox.tsx | 40 +++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 src/components/common/RadioCheckbox.tsx

(limited to 'src/components/common/RadioCheckbox.tsx')

diff --git a/src/components/common/RadioCheckbox.tsx b/src/components/common/RadioCheckbox.tsx
new file mode 100644
index 00000000..33d50527
--- /dev/null
+++ b/src/components/common/RadioCheckbox.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import {
+  View,
+  StyleSheet,
+  TouchableOpacity,
+  TouchableOpacityProps,
+} from 'react-native';
+
+interface RadioCheckboxProps extends TouchableOpacityProps {
+  checked: boolean;
+}
+const RadioCheckbox: React.FC<RadioCheckboxProps> = (props) => {
+  return (
+    <TouchableOpacity {...props}>
+      <View style={styles.outerCircle}>
+        {props.checked && <View style={styles.innerCircle} />}
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  outerCircle: {
+    width: 23,
+    height: 23,
+    borderRadius: 11.5,
+    borderWidth: 1,
+    borderColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  innerCircle: {
+    width: 17,
+    height: 17,
+    borderRadius: 8.5,
+    backgroundColor: '#04ffff',
+  },
+});
+
+export default RadioCheckbox;
-- 
cgit v1.2.3-70-g09d2