1 files changed, 27 insertions, 28 deletions

diff --git a/finished-application/frontend/components/Reset.js b/finished-application/frontend/components/Reset.js
index bb2ece0..a132f03 100644
--- a/finished-application/frontend/components/Reset.js
+++ b/finished-application/frontend/components/Reset.js
@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { Component } from 'react';
 import { Mutation } from 'react-apollo';
-import PropTypes from 'prop-types';
 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';
@@ -16,26 +16,17 @@ const RESET_MUTATION = gql`
   }
 `;
 
-class Reset extends React.Component {
+class Reset extends Component {
   static propTypes = {
     resetToken: PropTypes.string.isRequired,
   };
-
   state = {
-    confirmPassword: '',
     password: '',
+    confirmPassword: '',
   };
-
   saveToState = e => {
-    const { name, value } = e.target;
-    this.setState({ [name]: value });
-  };
-
-  resetPassword = async (e, resetMutation) => {
-    e.preventDefault();
-    await resetMutation();
+    this.setState({ [e.target.name]: e.target.value });
   };
-
   render() {
     return (
       <Mutation
@@ -47,32 +38,41 @@ class Reset extends React.Component {
         }}
         refetchQueries={[{ query: CURRENT_USER_QUERY }]}
       >
-        {(resetMutation, { error, loading }) => (
-          <Form onSubmit={e => this.resetPassword(e, resetMutation)}>
-            <Error error={error} />
+        {(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
+                Password
                 <input
+                  type="password"
+                  name="password"
+                  placeholder="password"
                   value={this.state.password}
                   onChange={this.saveToState}
-                  name="password"
-                  type="password"
-                  id="password"
                 />
               </label>
-              <label htmlFor="confirm">
-                Confirm:
+
+              <label htmlFor="confirmPassword">
+                Confirm Your Password
                 <input
+                  type="password"
+                  name="confirmPassword"
+                  placeholder="confirmPassword"
                   value={this.state.confirmPassword}
                   onChange={this.saveToState}
-                  name="confirmPassword"
-                  type="password"
-                  id="confirmPassword"
                 />
               </label>
 
-              <button type="submit">Request Reset!</button>
+              <button type="submit">Reset Your Password!</button>
             </fieldset>
           </Form>
         )}
@@ -82,4 +82,3 @@ class Reset extends React.Component {
 }
 
 export default Reset;
-export { RESET_MUTATION };