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/screens/Login.tsx | 14 +++-- src/screens/Registration.tsx | 2 +- src/screens/Verification.tsx | 125 +++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 130 insertions(+), 11 deletions(-) (limited to 'src/screens') 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