From 95e160e64dc6a5763fdbdc7d7e5b814302446ba9 Mon Sep 17 00:00:00 2001 From: Justin Shillingford Date: Mon, 13 Jul 2020 13:17:40 -0400 Subject: [TMA-95] Verification Page UI (#15) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Removed header from view * Setup basic layout of Verification page Also created new SubmitButton component * Some light code cleanup * Implemented SubmitButton component on Login * Added basic verification field * Styled Verification CodeField * Quick typo fix * Some lint cleaning * Removed header from view * Setup basic layout of Verification page Also created new SubmitButton component * Some light code cleanup * Implemented SubmitButton component on Login * Added basic verification field * Styled Verification CodeField * Quick typo fix * Some lint cleaning * Verification isn't that exciting lol * Removed header from view * Setup basic layout of Verification page Also created new SubmitButton component * Some light code cleanup * Implemented SubmitButton component on Login * Added basic verification field * Styled Verification CodeField * Quick typo fix * Some lint cleaning * Light lint cleaning * Still not that exciting lol * Removed misplaced accessibility labels * Added documentation to SubmitButton component * Implemented KeyboardAvoidingView * Fixed wizard position consistency * Updated Verification CodeField to take 6 digits * Removed marginVertical prop from SubmitButton * Updated text to represent 6 digit code 🤦🏽‍♂️ * Made Background use centered prop Also found another 4 that needed to be a 6 🤦🏽‍♂️ --- src/components/onboarding/Background.tsx | 4 +- src/components/onboarding/SubmitButton.tsx | 50 ++++++++++++ src/components/onboarding/index.ts | 1 + src/routes/Routes.tsx | 6 +- src/screens/Login.tsx | 14 ++-- src/screens/Registration.tsx | 2 +- src/screens/Verification.tsx | 125 +++++++++++++++++++++++++++-- 7 files changed, 188 insertions(+), 14 deletions(-) create mode 100644 src/components/onboarding/SubmitButton.tsx (limited to 'src') diff --git a/src/components/onboarding/Background.tsx b/src/components/onboarding/Background.tsx index 85675b0d..054eeff6 100644 --- a/src/components/onboarding/Background.tsx +++ b/src/components/onboarding/Background.tsx @@ -5,7 +5,7 @@ import { TouchableWithoutFeedback, Keyboard, ViewProps, - View, + SafeAreaView, } from 'react-native'; import {CenteredView} from '../common'; @@ -24,7 +24,7 @@ const Background: React.FC = (props) => { {props.centered ? ( {props.children} ) : ( - {props.children} + {props.children} )} diff --git a/src/components/onboarding/SubmitButton.tsx b/src/components/onboarding/SubmitButton.tsx new file mode 100644 index 00000000..f946d390 --- /dev/null +++ b/src/components/onboarding/SubmitButton.tsx @@ -0,0 +1,50 @@ +import React from 'react'; +import { + TouchableOpacity, + TouchableOpacityProps, + Text, + StyleSheet, + View, +} from 'react-native'; + +interface SubmitButtonProps extends TouchableOpacityProps { + text: string; + color: string; +} + +/* + * A button component that creates a TouchableOpacity in the style of our onboarding buttons. It takes in props to define the text in the TouchableOpacity as well as the background color. +*/ +const SubmitButton: React.FC = ( + props: SubmitButtonProps, +) => { + return ( + + + {props.text} + + + ); +}; + +const styles = StyleSheet.create({ + button: { + width: 144, + height: 36, + justifyContent: 'center', + alignItems: 'center', + borderRadius: 18, + }, + text: { + fontSize: 16, + color: '#78a0ef', + fontWeight: 'bold', + }, +}); + +export default SubmitButton; diff --git a/src/components/onboarding/index.ts b/src/components/onboarding/index.ts index 01255c01..ef972194 100644 --- a/src/components/onboarding/index.ts +++ b/src/components/onboarding/index.ts @@ -2,3 +2,4 @@ export {default as ArrowButton} from './ArrowButton'; export {default as Background} from './Background'; export {default as RegistrationWizard} from './RegistrationWizard'; export {default as TermsConditions} from './TermsConditions'; +export {default as SubmitButton} from './SubmitButton'; diff --git a/src/routes/Routes.tsx b/src/routes/Routes.tsx index 94040c1f..c426b033 100644 --- a/src/routes/Routes.tsx +++ b/src/routes/Routes.tsx @@ -26,7 +26,11 @@ const Routes: React.FC = ({}) => { component={Registration} options={{headerShown: false}} /> - + ); }; 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; @@ -171,13 +171,14 @@ const Login: React.FC = ({navigation}: LoginProps) => { * Login screen login button. */ const LoginButton = () => ( - - Let's Start! - + /> ); /** @@ -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 = ({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; type LoginScreenNavigationProp = StackNavigationProp< RootStackParamList, @@ -16,13 +28,116 @@ interface VerificationProps { } const Verification: React.FC = ({}) => { + const [value, setValue] = React.useState(''); + const ref = useBlurOnFulfill({value, cellCount: 6}); + const [valueProps, getCellOnLayoutHandler] = useClearByFocusCell({ + value, + setValue, + }); + return ( - - - Verification! - + + + + Enter 6 digit code + + We sent a 6 digit verification code to the email you provided. + + ( + + + {symbol || (isFocused ? : null)} + + + )} + /> + + + Resend Code + + ); }; +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; -- cgit v1.2.3-70-g09d2