-
Notifications
You must be signed in to change notification settings - Fork 16
/
sign-up.tsx
110 lines (103 loc) · 3.41 KB
/
sign-up.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
import * as React from 'react';
import invariant from 'tiny-invariant';
import {
Button,
Grid,
Link,
TextField,
makeStyles,
createStyles,
Theme,
} from '@material-ui/core';
import Auth from '@aws-amplify/auth';
import { I18n } from '@aws-amplify/core';
import { useAuthContext } from './auth-context';
import { FormSection, SectionHeader, SectionBody, SectionFooter } from '../ui';
import { useForm } from '../hooks';
export interface SignUpProps {
validationData?: { [key: string]: string };
}
const useStyles = makeStyles((theme: Theme) =>
createStyles({
form: {
width: '100%', // Fix IE 11 issue.
marginTop: theme.spacing(1),
},
submit: {
margin: theme.spacing(3, 0, 2),
},
}),
);
export const SignUp: React.FC<SignUpProps> = props => {
const { onStateChange } = useAuthContext();
const classes = useStyles();
const signUp = async (inputs: any) => {
invariant(
Auth && typeof Auth.signUp === 'function',
'No Auth module found, please ensure @aws-amplify/auth is imported',
);
// TODO
};
const { inputs, handleInputChange, handleSubmit } = useForm(signUp, {
email: '',
password: '',
});
return (
<FormSection>
<SectionHeader>{I18n.get('Sign in to your account')}</SectionHeader>
<form onSubmit={handleSubmit} className={classes.form} noValidate>
<SectionBody>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
id="email"
label="Email Address"
name="email"
autoComplete="email"
autoFocus
onChange={handleInputChange}
value={inputs.email}
/>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
name="password"
label="Password"
type="password"
id="password"
autoComplete="current-password"
onChange={handleInputChange}
value={inputs.password}
/>
</SectionBody>
<SectionFooter>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
>
Sign Up
</Button>
<Grid container>
<Grid item xs>
Have an account?
<Link
href="#"
onClick={() => onStateChange('signIn', null)}
variant="body2"
>
Sign in
</Link>
</Grid>
</Grid>
</SectionFooter>
</form>
</FormSection>
);
};