summaryrefslogtreecommitdiffstats
path: root/finished-application/frontend/components/Signin.js
diff options
context:
space:
mode:
authorWes Bos <wesbos@gmail.com>2018-09-14 12:18:12 -0400
committerWes Bos <wesbos@gmail.com>2018-09-14 12:18:12 -0400
commit2d145b026cfdf54a63bef0b9d6324b6785390307 (patch)
treef6c1d8f987437803a5c026e70535bf9ff244e885 /finished-application/frontend/components/Signin.js
parent8a5825d52271d712ec7c8348447d433067e13ef2 (diff)
move finished folder
Diffstat (limited to 'finished-application/frontend/components/Signin.js')
-rw-r--r--finished-application/frontend/components/Signin.js76
1 files changed, 76 insertions, 0 deletions
diff --git a/finished-application/frontend/components/Signin.js b/finished-application/frontend/components/Signin.js
new file mode 100644
index 0000000..4fd3013
--- /dev/null
+++ b/finished-application/frontend/components/Signin.js
@@ -0,0 +1,76 @@
+import React, { Component } from 'react';
+import { Mutation } from 'react-apollo';
+import gql from 'graphql-tag';
+import Form from './styles/Form';
+import Error from './ErrorMessage';
+import { CURRENT_USER_QUERY } from './User';
+
+const SIGNIN_MUTATION = gql`
+ mutation SIGNIN_MUTATION($email: String!, $password: String!) {
+ signin(email: $email, password: $password) {
+ id
+ email
+ name
+ }
+ }
+`;
+
+class Signin extends Component {
+ state = {
+ name: '',
+ password: '',
+ email: '',
+ };
+ saveToState = e => {
+ this.setState({ [e.target.name]: e.target.value });
+ };
+ render() {
+ return (
+ <Mutation
+ mutation={SIGNIN_MUTATION}
+ variables={this.state}
+ refetchQueries={[{ query: CURRENT_USER_QUERY }]}
+ >
+ {(signup, { error, loading }) => (
+ <Form
+ method="post"
+ onSubmit={async e => {
+ e.preventDefault();
+ await signup();
+ this.setState({ name: '', email: '', password: '' });
+ }}
+ >
+ <fieldset disabled={loading} aria-busy={loading}>
+ <h2>Sign into your account</h2>
+ <Error error={error} />
+ <label htmlFor="email">
+ Email
+ <input
+ type="email"
+ name="email"
+ placeholder="email"
+ value={this.state.email}
+ onChange={this.saveToState}
+ />
+ </label>
+ <label htmlFor="password">
+ Password
+ <input
+ type="password"
+ name="password"
+ placeholder="password"
+ value={this.state.password}
+ onChange={this.saveToState}
+ />
+ </label>
+
+ <button type="submit">Sign In!</button>
+ </fieldset>
+ </Form>
+ )}
+ </Mutation>
+ );
+ }
+}
+
+export default Signin;