Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Platform 123 #69

Merged
merged 5 commits into from
Aug 13, 2020
Merged

Platform 123 #69

Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f3ecdba
Merge pull request #4 from hopetambala/master
joseph-mccombs Aug 3, 2020
f362cc5
Merge pull request #5 from hopetambala/master
joseph-mccombs Aug 4, 2020
74247a5
Merge pull request #6 from hopetambala/master
joseph-mccombs Aug 11, 2020
8b16163
ADded checkbox to verify terms and service and modal to view them, ma…
joseph-mccombs Aug 13, 2020
ff8402b
issue: refactored termsModal to components
joseph-mccombs Aug 13, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
244 changes: 168 additions & 76 deletions domains/SignUp.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,21 @@
import React from 'react';
import {
SafeAreaView,
Button,
ActivityIndicator,
StyleSheet,
View
} from 'react-native';
import {
Checkbox, Button, Modal, Text, Portal, Headline
} from 'react-native-paper';
import { ScrollView } from 'react-native-gesture-handler';
import { Formik } from 'formik';
import * as yup from 'yup';
import { retrieveSignUpFunction, retrieveSignInFunction } from '../services/parse/auth';

import FormInput from '../components/FormInput';
// STYLING
import theme from '../modules/theme';

const validationSchema = yup.object().shape({
firstname: yup
Expand Down Expand Up @@ -41,83 +48,168 @@ const validationSchema = yup.object().shape({

// export default () => (
export default function SignUp({ navigation }) {
const [checked, setChecked] = React.useState(false);

const [visible, setVisible] = React.useState(false);
const showModal = () => setVisible(true);
const hideModal = () => setVisible(false);

return (
<SafeAreaView style={{ marginTop: 90 }}>
<Formik
initialValues={{
firstname: '', lastname: '', email: '', phonenumber: '', password: '', organization: ''
}}
onSubmit={(values, actions) => {
retrieveSignUpFunction(values)
.then((user) => {
const userString = JSON.stringify(user);
const userValues = JSON.parse(userString);
const { username } = userValues;
// sign user in after successful sign up
retrieveSignInFunction(username, values.password)
.then(() => {
// user signed in and signed up
navigation.navigate('Root');
<ScrollView>
<SafeAreaView style={{ marginTop: 30 }}>
<Formik
initialValues={{
firstname: '', lastname: '', email: '', phonenumber: '', password: '', organization: ''
}}
onSubmit={(values, actions) => {
if (!checked) {
alert('Error, terms and service need to be agreed to.'); console.log(error); // eslint-disable-line
} else {
retrieveSignUpFunction(values)
.then((user) => {
const userString = JSON.stringify(user);
const userValues = JSON.parse(userString);
const { username } = userValues;
// sign user in after successful sign up
retrieveSignInFunction(username, values.password)
.then(() => {
// user signed in and signed up
navigation.navigate('Root');
}, () => {
// sign in failed, alert user
});
}, () => {
// sign in failed, alert user
// sign up failed alert user
});
}, () => {
// sign up failed alert user
});
setTimeout(() => {
actions.setSubmitting(false);
}, 1000);
}}
validationSchema={validationSchema}
>
{(formikProps) => (
<>
<FormInput
label="First Name"
formikProps={formikProps}
formikKey="firstname"
placeholder="John"
autoFocus
/>
<FormInput
label="Last Name"
formikProps={formikProps}
formikKey="lastname"
placeholder="Doe"
/>
<FormInput
label="Email"
formikProps={formikProps}
formikKey="email"
placeholder="[email protected]"
/>
<FormInput
label="Phone Number"
formikProps={formikProps}
formikKey="phonenumber"
placeholder="123-456-7890"
/>
<FormInput
label="Password"
formikProps={formikProps}
formikKey="password"
placeholder="Password Here"
secureTextEntry
/>
<FormInput
label="Organization"
formikProps={formikProps}
formikKey="organization"
placeholder="Puente"
/>
{formikProps.isSubmitting ? (
<ActivityIndicator />
) : (
<Button title="Submit" onPress={formikProps.handleSubmit} />
)}
</>
)}
</Formik>
</SafeAreaView>
}
setTimeout(() => {
actions.setSubmitting(false);
}, 1000);
}}
validationSchema={validationSchema}
>
{(formikProps) => (
<>
<FormInput
label="First Name"
formikProps={formikProps}
formikKey="firstname"
placeholder="John"
autoFocus
/>
<FormInput
label="Last Name"
formikProps={formikProps}
formikKey="lastname"
placeholder="Doe"
/>
<FormInput
label="Email"
formikProps={formikProps}
formikKey="email"
placeholder="[email protected]"
/>
<FormInput
label="Phone Number"
formikProps={formikProps}
formikKey="phonenumber"
placeholder="123-456-7890"
/>
<FormInput
label="Password"
formikProps={formikProps}
formikKey="password"
placeholder="Password Here"
secureTextEntry
/>
<FormInput
label="Organization"
formikProps={formikProps}
formikKey="organization"
placeholder="Puente"
/>
<Button mode="text" theme={theme} dark color="#3E81FD" style={styles.serviceButton} onPress={showModal}>View the terms and service</Button>
<View style={styles.container}>
<Text style={styles.serviceText}>
By checking this box, I ackowledge that I have read and
understood the Terms and Service agreement.
</Text>
<View style={styles.checkbox}>
<Checkbox
disabled={false}
theme={theme}
status={checked ? 'checked' : 'unchecked'}
onPress={() => {
setChecked(!checked);
}}
/>
</View>
</View>
{formikProps.isSubmitting ? (
<ActivityIndicator />
) : (
<Button mode="contained" theme={theme} style={styles.submitButton} onPress={formikProps.handleSubmit}>Submit</Button>
)}
<Portal theme={theme}>
<Modal
hopetambala marked this conversation as resolved.
Show resolved Hide resolved
visible={visible}
theme={theme}
contentContainerStyle={styles.modal}
onDismiss={hideModal}
>
<Headline theme={theme}>Terms and Service</Headline>
<Text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
</Text>
</Modal>
</Portal>
</>
)}
</Formik>
</SafeAreaView>
</ScrollView>
);
}

const styles = StyleSheet.create({
checkbox: {
flex: 1,
borderWidth: 1,
borderRadius: 5,
marginLeft: 20,
},
container: {
flexDirection: 'row',
marginLeft: 90,
marginRight: 90,
marginBottom: 5
},
serviceText: {
flex: 5,
fontSize: 10
},
modal: {
backgroundColor: 'white',
padding: 30,
margin: 30
},
submitButton: {
marginLeft: 20,
marginRight: 20,
marginTop: 10,
marginBottom: 60,
},
serviceButton: {
marginLeft: 20,
marginRight: 20,
marginTop: 10,
}
});