email password recovery

src/App.js

@@ -9,6 +9,7 @@ import HomepageLayout from "./layouts/HomepageLayout";
 import Homepage from "./pages/Homepage";
 import Registration from "./pages/Registration";
 import Login from "./pages/Login";
+import Recovery from "./pages/Recovery";
 
 const initialState = { currentUser: null };
 
@@ -80,6 +81,14 @@ class App extends Component {
               )
             }
           />
+          <Route
+            path="/recovery"
+            render={() => (
+              <MainLayout>
+                <Recovery />
+              </MainLayout>
+            )}
+          />
         </Switch>
       </div>
     );

src/components/AuthWrapper/index.js

@@ -0,0 +1,15 @@
+import React from "react";
+import "./styles.scss";
+
+const AuthWrapper = ({ headline, children }) => {
+  return (
+    <div className="authWrapper">
+      <div className="wrap">
+        {headline && <h2>{headline}</h2>}
+        <div className="children">{children}</div>
+      </div>
+    </div>
+  );
+};
+
+export default AuthWrapper;

src/components/AuthWrapper/styles.scss

@@ -0,0 +1,23 @@
+.authWrapper {
+  display: block;
+  width: 100%;
+  max-width: 40rem;
+  margin: 4rem auto 6rem;
+  border: 1px solid black;
+
+  .wrap {
+    padding: 10px;
+
+    h2 {
+      font-size: 2.2rem;
+      line-height: 1;
+      font-weight: 400;
+      text-transform: uppercase;
+      text-align: center;
+      display: block;
+      padding: 0;
+      width: 100%;
+      margin: 0 auto 3rem;
+    }
+  }
+}

src/components/EmailPassword/index.js

@@ -0,0 +1,81 @@
+import React, { Component } from "react";
+import { withRouter } from "react-router-dom";
+import "./styles.scss";
+import AuthWrapper from "./../AuthWrapper";
+import FormInput from "./../forms/FormInput";
+import Button from "./../forms/Button";
+import { auth } from "./../../firebase/utils";
+
+const initialState = {
+  email: "",
+  errors: [],
+};
+
+class EmailPassword extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      ...initialState,
+    };
+    this.handleChange = this.handleChange.bind(this);
+  }
+  handleChange(e) {
+    const { name, value } = e.target;
+    this.setState({
+      [name]: value,
+    });
+  }
+  handleSubmit = async (e) => {
+    e.preventDefault();
+
+    try {
+      const { email } = this.state;
+      const config = {
+        url: "http://localhost:3000/login",
+      };
+      await auth
+        .sendPasswordResetEmail(email, config)
+        .then(() => this.props.histoy.push("/login"))
+        .catch(() => {
+          const err = ["Email not found. Please try again."];
+          this.setState({
+            errors: err,
+          });
+        });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  render() {
+    const { email, errors } = this.state;
+    const configAuthWrapper = {
+      headline: "Email Password",
+    };
+    return (
+      <AuthWrapper {...configAuthWrapper}>
+        <div className="formWrap">
+          {errors.length > 0 && (
+            <ul>
+              {errors.map((e, index) => {
+                return <li key={index}>{e}</li>;
+              })}
+            </ul>
+          )}
+
+          <form onSubmit={this.handleSubmit}>
+            <FormInput
+              type="email"
+              name="email"
+              value={email}
+              placeholder="Email"
+              onChange={this.handleChange}
+            />
+            <Button type="submit">Email Password</Button>
+          </form>
+        </div>
+      </AuthWrapper>
+    );
+  }
+}
+
+export default withRouter(EmailPassword);

src/components/SignIn/index.js

@@ -1,9 +1,10 @@
 import React, { Component } from "react";
 import "./styles.scss";
 import { signInWitGoogle, auth } from "./../../firebase/utils";
-
+import { Link } from "react-router-dom";
 import FormInput from "./../forms/FormInput";
 import Button from "./../forms/Button";
+import AuthWrapper from "./../AuthWrapper";
 
 const initialState = {
   email: "",
@@ -41,38 +42,41 @@ class SignIn extends Component {
 
   render() {
     const { email, password } = this.state;
+    const configAuthWrapper = {
+      headline: "LogIn",
+    };
     return (
-      <div className="signin">
-        <div className="wrap">
-          <h2>LogIn</h2>
-          <div className="formWrap">
-            <form onSubmit={this.handleSubmit}>
-              <FormInput
-                type="email"
-                name="email"
-                value={email}
-                placeholder="Email"
-                handleChange={this.handleChange}
-              />
-              <FormInput
-                type="password"
-                name="password"
-                value={password}
-                placeholder="Password"
-                handleChange={this.handleChange}
-              />
+      <AuthWrapper {...configAuthWrapper}>
+        <div className="formWrap">
+          <form onSubmit={this.handleSubmit}>
+            <FormInput
+              type="email"
+              name="email"
+              value={email}
+              placeholder="Email"
+              handleChange={this.handleChange}
+            />
+            <FormInput
+              type="password"
+              name="password"
+              value={password}
+              placeholder="Password"
+              handleChange={this.handleChange}
+            />
 
-              <Button type="submit">LogIn</Button>
+            <Button type="submit">LogIn</Button>
 
-              <div className="socialSignin">
-                <div className="row">
-                  <Button onClick={signInWitGoogle}>Sign in with Google</Button>
-                </div>
+            <div className="socialSignin">
+              <div className="row">
+                <Button onClick={signInWitGoogle}>Sign in with Google</Button>
               </div>
-            </form>
-          </div>
+            </div>
+            <div className="links">
+              <Link to="recovery">Reset Password</Link>
+            </div>
+          </form>
         </div>
-      </div>
+      </AuthWrapper>
     );
   }
 }

src/components/SignIn/styles.scss

@@ -1,27 +1,12 @@
-.signin {
+.socialSignin {
+  margin: 0.5rem auto 0;
+}
+.links {
   display: block;
   width: 100%;
-  max-width: 40rem;
-  margin: 4rem auto 6rem;
-  border: 1px solid black;
-
-  .wrap {
-    padding: 10px;
-
-    h2 {
-      font-size: 2.2rem;
-      line-height: 1;
-      font-weight: 400;
-      text-transform: uppercase;
-      text-align: center;
-      display: block;
-      padding: 0;
-      width: 100%;
-      margin: 0 auto 3rem;
-    }
+  margin: 1.5rem auto 0;
 
-    .socialSignin {
-      margin: 0.5rem auto 0;
-    }
+  a {
+    color: black;
   }
 }

src/components/Signup/index.js

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import FormInput from "./../forms/FormInput";
 import Button from "./../forms/Button";
+import AuthWrapper from "./../AuthWrapper";
 import "./styles.scss";
 import { auth, handleUserProfile } from "./../../firebase/utils";
 
@@ -62,52 +63,52 @@ class Signup extends Component {
       confirmPassword,
       errors,
     } = this.state;
+    const configAuthWrapper = {
+      headline: "Registration",
+    };
     return (
-      <div className="signup">
-        <div className="wrap">
-          <h2>Signup</h2>
+      <AuthWrapper {...configAuthWrapper}>
+        <div className="formWrap">
           {errors.length > 0 && (
             <ul>
               {errors.map((err, index) => {
                 return <li key={index}>{err}</li>;
               })}
             </ul>
           )}
-          <div className="formWrap">
-            <form onSubmit={this.handleFormSubmit}>
-              <FormInput
-                type="text"
-                name="displayName"
-                value={displayName}
-                placeholder="Full name"
-                onChange={this.handleChange}
-              />
-              <FormInput
-                type="email"
-                name="email"
-                value={email}
-                placeholder="Email"
-                onChange={this.handleChange}
-              />
-              <FormInput
-                type="password"
-                name="password"
-                value={password}
-                placeholder="Password"
-                onChange={this.handleChange}
-              />
-              <FormInput
-                type="password"
-                name="confirmPassword"
-                value={confirmPassword}
-                placeholder="re-enter password"
-                onChange={this.handleChange}
-              />
-              <Button type="submit">Register</Button>
-            </form>
-          </div>
+          <form onSubmit={this.handleFormSubmit}>
+            <FormInput
+              type="text"
+              name="displayName"
+              value={displayName}
+              placeholder="Full name"
+              onChange={this.handleChange}
+            />
+            <FormInput
+              type="email"
+              name="email"
+              value={email}
+              placeholder="Email"
+              onChange={this.handleChange}
+            />
+            <FormInput
+              type="password"
+              name="password"
+              value={password}
+              placeholder="Password"
+              onChange={this.handleChange}
+            />
+            <FormInput
+              type="password"
+              name="confirmPassword"
+              value={confirmPassword}
+              placeholder="re-enter password"
+              onChange={this.handleChange}
+            />
+            <Button type="submit">Register</Button>
+          </form>
         </div>
-      </div>
+      </AuthWrapper>
     );
   }
 }

src/components/Signup/styles.scss

@@ -1,27 +1,3 @@
-.signup {
-  display: block;
-  width: 100%;
-  max-width: 40rem;
-  margin: 4rem auto 6rem;
-  border: 1px solid black;
-
-  .wrap {
-    padding: 10px;
-
-    h2 {
-      font-size: 2.2rem;
-      line-height: 1;
-      font-weight: 400;
-      text-transform: uppercase;
-      text-align: center;
-      display: block;
-      padding: 0;
-      width: 100%;
-      margin: 0 auto;
-    }
-
-    .formWrap {
-      margin: 3rem auto 0;
-    }
-  }
+.formWrap {
+  margin: 3rem auto 0;
 }

src/pages/Recovery/index.js

@@ -0,0 +1,8 @@
+import React from "react";
+import EmailPassword from "../../components/EmailPassword";
+
+const Recovery = () => {
+  return <EmailPassword />;
+};
+
+export default Recovery;