From 268e7cee101a1beba0e80af3550fe83ab56fdd04 Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Tue, 14 Aug 2018 12:01:14 -0400
Subject: 31 and 32

---
 .../31/frontend/components/RequestReset.js         | 58 +++++++++++++++
 stepped-solutions/31/frontend/components/Reset.js  | 84 ++++++++++++++++++++++
 stepped-solutions/31/frontend/pages/reset.js       | 10 +++
 stepped-solutions/31/frontend/pages/signup.js      | 20 ++++++
 4 files changed, 172 insertions(+)
 create mode 100755 stepped-solutions/31/frontend/components/RequestReset.js
 create mode 100755 stepped-solutions/31/frontend/components/Reset.js
 create mode 100755 stepped-solutions/31/frontend/pages/reset.js
 create mode 100755 stepped-solutions/31/frontend/pages/signup.js

(limited to 'stepped-solutions/31/frontend')

diff --git a/stepped-solutions/31/frontend/components/RequestReset.js b/stepped-solutions/31/frontend/components/RequestReset.js
new file mode 100755
index 0000000..dbc77ab
--- /dev/null
+++ b/stepped-solutions/31/frontend/components/RequestReset.js
@@ -0,0 +1,58 @@
+import React, { Component } from 'react';
+import { Mutation } from 'react-apollo';
+import gql from 'graphql-tag';
+import Form from './styles/Form';
+import Error from './ErrorMessage';
+
+const REQUEST_RESET_MUTATION = gql`
+  mutation REQUEST_RESET_MUTATION($email: String!) {
+    requestReset(email: $email) {
+      message
+    }
+  }
+`;
+
+class Signin extends Component {
+  state = {
+    email: '',
+  };
+  saveToState = e => {
+    this.setState({ [e.target.name]: e.target.value });
+  };
+  render() {
+    return (
+      <Mutation mutation={REQUEST_RESET_MUTATION} variables={this.state}>
+        {(reset, { error, loading, called }) => (
+          <Form
+            method="post"
+            onSubmit={async e => {
+              e.preventDefault();
+              await reset();
+              this.setState({ email: '' });
+            }}
+          >
+            <fieldset disabled={loading} aria-busy={loading}>
+              <h2>Request a password reset</h2>
+              <Error error={error} />
+              {!error && !loading && called && <p>Success! Check your email for a reset link!</p>}
+              <label htmlFor="email">
+                Email
+                <input
+                  type="email"
+                  name="email"
+                  placeholder="email"
+                  value={this.state.email}
+                  onChange={this.saveToState}
+                />
+              </label>
+
+              <button type="submit">Request Reset!</button>
+            </fieldset>
+          </Form>
+        )}
+      </Mutation>
+    );
+  }
+}
+
+export default Signin;
diff --git a/stepped-solutions/31/frontend/components/Reset.js b/stepped-solutions/31/frontend/components/Reset.js
new file mode 100755
index 0000000..a132f03
--- /dev/null
+++ b/stepped-solutions/31/frontend/components/Reset.js
@@ -0,0 +1,84 @@
+import React, { Component } from 'react';
+import { Mutation } from 'react-apollo';
+import gql from 'graphql-tag';
+import PropTypes from 'prop-types';
+import Form from './styles/Form';
+import Error from './ErrorMessage';
+import { CURRENT_USER_QUERY } from './User';
+
+const RESET_MUTATION = gql`
+  mutation RESET_MUTATION($resetToken: String!, $password: String!, $confirmPassword: String!) {
+    resetPassword(resetToken: $resetToken, password: $password, confirmPassword: $confirmPassword) {
+      id
+      email
+      name
+    }
+  }
+`;
+
+class Reset extends Component {
+  static propTypes = {
+    resetToken: PropTypes.string.isRequired,
+  };
+  state = {
+    password: '',
+    confirmPassword: '',
+  };
+  saveToState = e => {
+    this.setState({ [e.target.name]: e.target.value });
+  };
+  render() {
+    return (
+      <Mutation
+        mutation={RESET_MUTATION}
+        variables={{
+          resetToken: this.props.resetToken,
+          password: this.state.password,
+          confirmPassword: this.state.confirmPassword,
+        }}
+        refetchQueries={[{ query: CURRENT_USER_QUERY }]}
+      >
+        {(reset, { error, loading, called }) => (
+          <Form
+            method="post"
+            onSubmit={async e => {
+              e.preventDefault();
+              await reset();
+              this.setState({ password: '', confirmPassword: '' });
+            }}
+          >
+            <fieldset disabled={loading} aria-busy={loading}>
+              <h2>Reset Your Password</h2>
+              <Error error={error} />
+              <label htmlFor="password">
+                Password
+                <input
+                  type="password"
+                  name="password"
+                  placeholder="password"
+                  value={this.state.password}
+                  onChange={this.saveToState}
+                />
+              </label>
+
+              <label htmlFor="confirmPassword">
+                Confirm Your Password
+                <input
+                  type="password"
+                  name="confirmPassword"
+                  placeholder="confirmPassword"
+                  value={this.state.confirmPassword}
+                  onChange={this.saveToState}
+                />
+              </label>
+
+              <button type="submit">Reset Your Password!</button>
+            </fieldset>
+          </Form>
+        )}
+      </Mutation>
+    );
+  }
+}
+
+export default Reset;
diff --git a/stepped-solutions/31/frontend/pages/reset.js b/stepped-solutions/31/frontend/pages/reset.js
new file mode 100755
index 0000000..118ba72
--- /dev/null
+++ b/stepped-solutions/31/frontend/pages/reset.js
@@ -0,0 +1,10 @@
+import Reset from '../components/Reset';
+
+const Sell = props => (
+  <div>
+    <p>Reset Your Password {props.query.resetToken}</p>
+    <Reset resetToken={props.query.resetToken} />
+  </div>
+);
+
+export default Sell;
diff --git a/stepped-solutions/31/frontend/pages/signup.js b/stepped-solutions/31/frontend/pages/signup.js
new file mode 100755
index 0000000..342cfea
--- /dev/null
+++ b/stepped-solutions/31/frontend/pages/signup.js
@@ -0,0 +1,20 @@
+import Signup from '../components/Signup';
+import Signin from '../components/Signin';
+import RequestReset from '../components/RequestReset';
+import styled from 'styled-components';
+
+const Columns = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  grid-gap: 20px;
+`;
+
+const SignupPage = props => (
+  <Columns>
+    <Signup />
+    <Signin />
+    <RequestReset />
+  </Columns>
+);
+
+export default SignupPage;
-- 
cgit v1.3