🆒

1 files changed, 87 insertions, 0 deletions

diff --git a/frontend/components/Reset.js b/frontend/components/Reset.js
new file mode 100644
index 0000000..7d36de7
--- /dev/null
+++ b/frontend/components/Reset.js
@@ -0,0 +1,87 @@
+import React, { Component } from 'react';
+import { graphql, compose } from 'react-apollo';
+import { RESET_MUTATION, CURRENT_USER_QUERY } from '../queries';
+
+class Reset extends Component {
+  state = {
+    confirmPassword: '',
+    password: '',
+    errors: [],
+  };
+
+  saveToState = e => {
+    const { name, value } = e.target;
+    this.setState({ [name]: value });
+  };
+
+  resetPassword = async e => {
+    console.log(e);
+    e.preventDefault();
+
+    if (this.state.password !== this.state.confirmPassword) {
+      this.setState({ errors: [{ message: 'Passwords Must Match!' }] });
+    }
+
+    const res = await this.props.resetPassword({
+      variables: {
+        resetToken: this.props.resetToken,
+        password: this.state.password,
+        confirmPassword: this.state.confirmPassword,
+      },
+    });
+
+    if (res.errors) {
+      this.setState({ errors: res.errors });
+      return;
+    }
+    console.log('Back!');
+    console.log(res);
+    // sign them in!
+    localStorage.setItem('token', res.data.resetPassword.token);
+    // refresh the current user query
+    this.props.currentUser.refetch();
+  };
+
+  render() {
+    return (
+      <div>
+        {this.state.loading ? 'LOADING...' : 'Ready!'}
+
+        {this.state.errors ? this.state.errors.map((err, i) => <p key={i}>{err.message}</p>) : null}
+
+        <form onSubmit={this.resetPassword}>
+          <label htmlFor="password">
+            password
+            <input
+              value={this.state.password}
+              onChange={this.saveToState}
+              name="password"
+              type="password"
+              id="password"
+            />
+          </label>
+          <label htmlFor="confirm">
+            Confirm:
+            <input
+              value={this.state.confirmPassword}
+              onChange={this.saveToState}
+              name="confirmPassword"
+              type="password"
+              id="confirmPassword"
+            />
+          </label>
+
+          <button type="submit">Request Reset!</button>
+        </form>
+      </div>
+    );
+  }
+}
+
+// When we submit this mutation, we need to update our store - we have a few ways to do that:
+// One - we can go nucular and run refetchQueries() which will just go get everything - this is easy, but at the cost of efficiency.
+
+const restEnahncer = graphql(RESET_MUTATION, { name: 'resetPassword' });
+const userEnhancer = graphql(CURRENT_USER_QUERY, { name: 'currentUser' });
+
+export default compose(restEnahncer, userEnhancer)(Reset);