10-Password Reset and Password Change with Firebase

Author: rwieruch

src/components/Account/index.js

@@ -1,9 +1,14 @@
 import React from 'react';
 
-const Account = () => (
+import { PasswordForgetForm } from '../PasswordForget';
+import PasswordChangeForm from '../PasswordChange';
+
+const AccountPage = () => (
   <div>
-    <h1>Account</h1>
+    <h1>Account Page</h1>
+    <PasswordForgetForm />
+    <PasswordChangeForm />
   </div>
 );
 
-export default Account;
+export default AccountPage;

src/components/PasswordChange/index.js

@@ -1,9 +1,69 @@
-import React from 'react';
+import React, { Component } from 'react';
 
-const PasswordChange = () => (
-  <div>
-    <h1>PasswordChange</h1>
-  </div>
-);
+import { withFirebase } from '../Firebase';
 
-export default PasswordChange;
+const INITIAL_STATE = {
+  passwordOne: '',
+  passwordTwo: '',
+  error: null,
+};
+
+class PasswordChangeForm extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = { ...INITIAL_STATE };
+  }
+
+  onSubmit = event => {
+    const { passwordOne } = this.state;
+
+    this.props.firebase
+      .doPasswordUpdate(passwordOne)
+      .then(() => {
+        this.setState({ ...INITIAL_STATE });
+      })
+      .catch(error => {
+        this.setState({ error });
+      });
+
+    event.preventDefault();
+  };
+
+  onChange = event => {
+    this.setState({ [event.target.name]: event.target.value });
+  };
+
+  render() {
+    const { passwordOne, passwordTwo, error } = this.state;
+
+    const isInvalid =
+      passwordOne !== passwordTwo || passwordOne === '';
+
+    return (
+      <form onSubmit={this.onSubmit}>
+        <input
+          name="passwordOne"
+          value={passwordOne}
+          onChange={this.onChange}
+          type="password"
+          placeholder="New Password"
+        />
+        <input
+          name="passwordTwo"
+          value={passwordTwo}
+          onChange={this.onChange}
+          type="password"
+          placeholder="Confirm New Password"
+        />
+        <button disabled={isInvalid} type="submit">
+          Reset My Password
+        </button>
+
+        {error && <p>{error.message}</p>}
+      </form>
+    );
+  }
+}
+
+export default withFirebase(PasswordChangeForm);

src/components/PasswordForget/index.js

@@ -1,9 +1,79 @@
-import React from 'react';
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
 
-const PasswordForget = () => (
+import { withFirebase } from '../Firebase';
+import * as ROUTES from '../../constants/routes';
+
+const PasswordForgetPage = () => (
   <div>
     <h1>PasswordForget</h1>
+    <PasswordForgetForm />
   </div>
 );
 
-export default PasswordForget;
+const INITIAL_STATE = {
+  email: '',
+  error: null,
+};
+
+class PasswordForgetFormBase extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = { ...INITIAL_STATE };
+  }
+
+  onSubmit = event => {
+    const { email } = this.state;
+
+    this.props.firebase
+      .doPasswordReset(email)
+      .then(() => {
+        this.setState({ ...INITIAL_STATE });
+      })
+      .catch(error => {
+        this.setState({ error });
+      });
+
+    event.preventDefault();
+  };
+
+  onChange = event => {
+    this.setState({ [event.target.name]: event.target.value });
+  };
+
+  render() {
+    const { email, error } = this.state;
+
+    const isInvalid = email === '';
+
+    return (
+      <form onSubmit={this.onSubmit}>
+        <input
+          name="email"
+          value={this.state.email}
+          onChange={this.onChange}
+          type="text"
+          placeholder="Email Address"
+        />
+        <button disabled={isInvalid} type="submit">
+          Reset My Password
+        </button>
+
+        {error && <p>{error.message}</p>}
+      </form>
+    );
+  }
+}
+
+const PasswordForgetLink = () => (
+  <p>
+    <Link to={ROUTES.PASSWORD_FORGET}>Forgot Password?</Link>
+  </p>
+);
+
+export default PasswordForgetPage;
+
+const PasswordForgetForm = withFirebase(PasswordForgetFormBase);
+
+export { PasswordForgetForm, PasswordForgetLink };

src/components/SignIn/index.js

@@ -3,13 +3,15 @@ import { withRouter } from 'react-router-dom';
 import { compose } from 'recompose';
 
 import { SignUpLink } from '../SignUp';
+import { PasswordForgetLink } from '../PasswordForget';
 import { withFirebase } from '../Firebase';
 import * as ROUTES from '../../constants/routes';
 
 const SignInPage = () => (
   <div>
     <h1>SignIn</h1>
     <SignInForm />
+    <PasswordForgetLink />
     <SignUpLink />
   </div>
 );