import { Formik } from 'formik'; import React, { useContext } from 'react'; import { ActivityIndicator, KeyboardAvoidingView, Platform, SafeAreaView, StyleSheet, View } from 'react-native'; import { ScrollView } from 'react-native-gesture-handler'; import { Button, Checkbox, Text } from 'react-native-paper'; import * as yup from 'yup'; import FormInput from '../../../components/FormikFields/FormInput'; import Autofill from '../../../components/FormikFields/PaperInputPicker/AutoFill'; import TermsModal from '../../../components/TermsModal'; import { UserContext } from '../../../context/auth.context'; import I18n from '../../../modules/i18n'; import { theme } from '../../../modules/theme'; const validationSchema = yup.object().shape({ firstname: yup .string() .label('First Name') .required(), lastname: yup .string() .label('Last Name') .required(), email: yup .string() .label('Email') .email(), phonenumber: yup .string() .label('Phone Number') .min(10, 'Seems a bit short..'), organization: yup .string() .label('Organization') .required(), password: yup .string() .label('Password') .required() .min(4, 'Seems a bit short...'), password2: yup .string() .label('Password') .required() .min(4, 'Seems a bit short...') }); // export default () => ( export default function SignUp({ navigation }) { const [checked, setChecked] = React.useState(false); const [visible, setVisible] = React.useState(false); const [scrollViewScroll, setScrollViewScroll] = React.useState(); const { register } = useContext(UserContext); const handleLogIn = () => { navigation.navigate('Sign In'); }; return ( <KeyboardAvoidingView enabled behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={{ backgroundColor: theme.colors.accent, flex: 1 }} > <View> <Button icon="arrow-left" width={100} style={{ paddingTop: 40 }} onPress={handleLogIn}> Back </Button> <ScrollView style={{ backgroundColor: theme.colors.accent }} keyboardShouldPersistTaps="never" scrollEnabled={scrollViewScroll} > <SafeAreaView style={{ marginTop: 10 }}> <Formik initialValues={{ firstname: '', lastname: '', email: '', phonenumber: '', password: '', password2: '', organization: '' }} onSubmit={(values, actions) => { if (!checked) { alert(I18n.t('signUp.errorTerms')); // eslint-disable-line } else if (values.password !== values.password2) { alert(I18n.t('signUp.errorPassword')) // eslint-disable-line } else { register(values) .then(() => navigation.navigate('Root')).catch((error) => { // sign up failed alert user console.log(`Error: ${error.code} ${error.message}`); // eslint-disable-line alert(I18n.t('signUp.usernameError')); // eslint-disable-line }); } setTimeout(() => { actions.setSubmitting(false); }, 1000); }} validationSchema={validationSchema} > {(formikProps) => ( <> <FormInput label={I18n.t('signUp.firstName')} formikProps={formikProps} formikKey="firstname" placeholder="John" autoFocus /> <FormInput label={I18n.t('signUp.lastName')} formikProps={formikProps} formikKey="lastname" placeholder="Doe" /> <FormInput label={I18n.t('signUp.email')} formikProps={formikProps} formikKey="email" placeholder="[email protected]" /> <FormInput label={I18n.t('signUp.phoneNumber')} formikProps={formikProps} formikKey="phonenumber" placeholder="123-456-7890" keyboardType="numeric" /> <FormInput label={I18n.t('signUp.password')} formikProps={formikProps} formikKey="password" placeholder="Password Here" secureTextEntry /> <FormInput label={I18n.t('signUp.password2')} formikProps={formikProps} formikKey="password2" placeholder="Password Here" secureTextEntry /> <Autofill parameter="organization" formikProps={formikProps} formikKey="organization" label="signUp.organization" translatedLabel={I18n.t('signUp.organization')} scrollViewScroll={scrollViewScroll} setScrollViewScroll={setScrollViewScroll} /> <Button mode="text" theme={theme} color="#3E81FD" style={styles.serviceButton} onPress={() => setVisible(true)}>{I18n.t('signUp.termsOfService.view')}</Button> <View style={styles.container}> <Text style={styles.serviceText}> {I18n.t('signUp.termsOfService.acknoledgement')} </Text> <View style={styles.checkbox}> <Checkbox disabled={false} color={theme.colors.primary} status={checked ? 'checked' : 'unchecked'} onPress={() => { setChecked(!checked); }} /> </View> </View> {formikProps.isSubmitting ? ( <ActivityIndicator /> ) : ( <Button mode="contained" theme={theme} style={styles.submitButton} onPress={formikProps.handleSubmit}>{I18n.t('signUp.submit')}</Button> )} <TermsModal visible={visible} setVisible={setVisible} /> </> )} </Formik> </SafeAreaView> </ScrollView> </View> </KeyboardAvoidingView> ); } const styles = StyleSheet.create({ checkbox: { flex: 1, borderRadius: 5, marginLeft: 20, backgroundColor: 'white' }, container: { flexDirection: 'row', marginLeft: 90, marginRight: 90, marginBottom: 5 }, serviceText: { flex: 5, fontSize: 10 }, submitButton: { marginLeft: 20, marginRight: 20, marginTop: 10, marginBottom: 100, }, serviceButton: { marginLeft: 20, marginRight: 20, marginTop: 10, }, footerContainer: { flexDirection: 'row', marginLeft: 'auto', marginRight: 'auto', backgroundColor: theme.colors.accent, marginBottom: 35 }, loginText: { fontSize: 15, marginTop: 'auto', marginBottom: 'auto' }, });