From fca2e11a06099a9790b1f698a471a3aee7803b91 Mon Sep 17 00:00:00 2001
From: Jack Collier <jcollier@scottlogic.com>
Date: Thu, 2 Dec 2021 11:46:19 +0000
Subject: [PATCH] added login pages, and register/login functionality

---
 src/App.js                                  | 33 +++++++-
 src/components/layout/MainNavigation.js     | 11 ++-
 src/components/login/CreateLogin.js         | 72 ++++++++++++++++
 src/components/login/CreateLogin.module.css | 44 ++++++++++
 src/components/posts/AddPostForm.js         |  1 -
 src/pages/Login.js                          | 92 +++++++++++++++++++++
 src/pages/Login.module.css                  | 29 +++++++
 7 files changed, 277 insertions(+), 5 deletions(-)
 create mode 100644 src/components/login/CreateLogin.js
 create mode 100644 src/components/login/CreateLogin.module.css
 create mode 100644 src/pages/Login.js
 create mode 100644 src/pages/Login.module.css

diff --git a/src/App.js b/src/App.js
index 1072efb..2a76779 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,16 +2,47 @@ import FeedPage from "./pages/Feed.js";
 import { Routes, Route } from "react-router-dom";
 import { React, useState } from "react";
 import MainNavigation from "./components/layout/MainNavigation";
+import LoginPage from "./pages/Login.js";
 
 function App() {
   const [refreshPost, setRefreshPost] = useState(false);
+  const [showError, setShowError] = useState(false);
+  const [errorText, setErrorText] = useState("");
+  const [idToken, setIdToken] = useState();
+  const [userIdToken, setUserIdToken] = useState();
+
+  if (!idToken) {
+    return (
+      <LoginPage
+        setShowError={setShowError}
+        setErrorText={setErrorText}
+        setIdToken={setIdToken}
+      />
+    );
+  }
+
   return (
     <>
-      <MainNavigation setRefreshPost={setRefreshPost} />
+      <MainNavigation
+        setRefreshPost={setRefreshPost}
+        showError={showError}
+        setShowError={setShowError}
+        errorText={errorText}
+        setErrorText={setErrorText}
+      />
       <div>
         <Routes>
           <Route
             path="/"
+            element={
+              <LoginPage
+                setShowError={setShowError}
+                setErrorText={setErrorText}
+              />
+            }
+          />
+          <Route
+            path="/feed"
             element={
               <FeedPage
                 refreshPost={refreshPost}
diff --git a/src/components/layout/MainNavigation.js b/src/components/layout/MainNavigation.js
index f4a30f5..f1b97e8 100644
--- a/src/components/layout/MainNavigation.js
+++ b/src/components/layout/MainNavigation.js
@@ -4,10 +4,15 @@ import classes from "./MainNavigation.module.css";
 import Backdrop from "../UI/Backdrop";
 import ErrorModal from "../UI/ErrorModal";
 
-function MainNavigation({ setRefreshPost }) {
+function MainNavigation({
+  setRefreshPost,
+  showError,
+  setShowError,
+  errorText,
+  setErrorText,
+}) {
   const [showForm, setShowForm] = useState(false);
-  const [showError, setShowError] = useState(false);
-  const [errorText, setErrorText] = useState("");
+
   function addForm() {
     setShowForm(true);
   }
diff --git a/src/components/login/CreateLogin.js b/src/components/login/CreateLogin.js
new file mode 100644
index 0000000..d061d8a
--- /dev/null
+++ b/src/components/login/CreateLogin.js
@@ -0,0 +1,72 @@
+import { useRef, useState } from "react";
+import { useNavigate } from "react-router";
+import action from "../posts/buttons/Button.module.css";
+import Post from "../UI/Post";
+import classes from "./CreateLogin.module.css";
+
+function CreateLoginForm({ setShowError, setErrorText, setIdToken }) {
+  const [emailError, setEmailError] = useState("");
+  const navigate = useNavigate();
+  const emailRef = useRef();
+  const passRef = useRef();
+  let fireResp = false;
+  function submitHandler(event) {
+    event.preventDefault();
+
+    const account = {
+      email: emailRef.current.value,
+      password: passRef.current.value,
+      returnSecureToken: true,
+    };
+
+    createAccount(account);
+  }
+
+  function createAccount(account) {
+    fetch(
+      "https://www.googleapis.com/identitytoolkit/v3/relyingparty/signupNewUser?key=",
+      {
+        method: "POST",
+        body: JSON.stringify(account),
+        headers: {
+          "Content-Type": "application/json",
+        },
+      }
+    )
+      .then((response) => {
+        if (response.status === 200) {
+          fireResp = true;
+        } else {
+          fireResp = false;
+        }
+        return response.json();
+      })
+      .then((data) => {
+        if (fireResp === true) {
+          setIdToken(data.idToken);
+          navigate("/feed");
+        } else {
+          setEmailError(data.error.message);
+        }
+      });
+  }
+  return (
+    <form className={classes.form} onSubmit={submitHandler}>
+      <Post>
+        <h3>Create Account</h3>
+        <div className={classes.content}>
+          <input placeholder="Email" ref={emailRef} />
+          <input placeholder="Password" ref={passRef} />
+        </div>
+        {emailError !== "" && <p className={classes.error}>{emailError}</p>}
+        <div className={action.actions}>
+          <div className={classes.actions}>
+            <button>Create Account</button>
+          </div>
+        </div>
+      </Post>
+    </form>
+  );
+}
+
+export default CreateLoginForm;
diff --git a/src/components/login/CreateLogin.module.css b/src/components/login/CreateLogin.module.css
new file mode 100644
index 0000000..1f20946
--- /dev/null
+++ b/src/components/login/CreateLogin.module.css
@@ -0,0 +1,44 @@
+.form {
+    position: absolute;
+    z-index: 10;
+    right: 30%;
+    left: 30%
+}
+
+.form h3{
+    padding-top: 6%;
+    margin: 0;
+    padding-bottom: 0px;
+    text-align: center;
+}
+
+.content {
+    display: flex;
+    flex-direction: column;
+    padding-left: 10%;
+    padding-right:10%;
+    width: 100%;
+    
+    
+}
+.content input{
+    margin: 3px;
+    display: inline-block;
+  font: inherit;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  padding: 0.25rem;
+  width: 100%;
+}
+
+.actions{
+    text-align: center;
+    padding-top: 2%;
+    padding-bottom: 5%;
+    /* height: 50%; */
+}
+
+.error{
+    text-align: center;
+    color: red;
+}
\ No newline at end of file
diff --git a/src/components/posts/AddPostForm.js b/src/components/posts/AddPostForm.js
index b50a648..b04500d 100644
--- a/src/components/posts/AddPostForm.js
+++ b/src/components/posts/AddPostForm.js
@@ -29,7 +29,6 @@ function AddPostForm({ onCancel, onAddPost, setErrorText, setShowError }) {
       };
 
       onAddPost(postData);
-    } else {
     }
   }
 
diff --git a/src/pages/Login.js b/src/pages/Login.js
new file mode 100644
index 0000000..4db68ae
--- /dev/null
+++ b/src/pages/Login.js
@@ -0,0 +1,92 @@
+import Post from "../components/UI/Post";
+import classes from "./Login.module.css";
+import action from "../components/posts/buttons/Button.module.css";
+import { useNavigate } from "react-router-dom";
+import { useRef, useState } from "react";
+import CreateLoginForm from "../components/login/CreateLogin";
+import Backdrop from "../components/UI/Backdrop";
+
+function LoginPage({ setShowError, setErrorText, setIdToken }) {
+  const [showCreateLogin, setShowCreateLogin] = useState(false);
+  const [emailError, setEmailError] = useState("");
+  const navigate = useNavigate();
+  const emailRef = useRef();
+  const passRef = useRef();
+  let fireResp = false;
+
+  function onSubmit(event) {
+    event.preventDefault();
+
+    const account = {
+      email: emailRef.current.value,
+      password: passRef.current.value,
+      returnSecureToken: true,
+    };
+
+    fetch(
+      "https://www.googleapis.com/identitytoolkit/v3/relyingparty/verifyPassword?key=",
+      {
+        method: "POST",
+        body: JSON.stringify(account),
+        headers: {
+          "Content-Type": "application/json",
+        },
+      }
+    )
+      .then((response) => {
+        if (response.status === 200) {
+          fireResp = true;
+        } else {
+          fireResp = false;
+        }
+        return response.json();
+      })
+      .then((data) => {
+        if (fireResp === true) {
+          setIdToken(data.idToken);
+          navigate("/feed");
+        } else {
+          setEmailError(data.error.message);
+        }
+      });
+  }
+
+  function createLoginHandler() {
+    setShowCreateLogin(!showCreateLogin);
+  }
+  return (
+    <>
+      <form className={classes.login} onSubmit={onSubmit}>
+        <Post>
+          <div className={classes.content}>
+            <div className={classes.input}>
+              <input required placeholder="Email" ref={emailRef}></input>
+              <input required placeholder="Password" ref={passRef}></input>
+            </div>
+            {emailError !== "" && <p className={classes.error}>{emailError}</p>}
+            <div className={action.actions}>
+              <button>Login</button>
+            </div>
+          </div>
+        </Post>
+      </form>
+      <div className={action.actions}>
+        <div className={classes.create}>
+          <button onClick={createLoginHandler}>Create Login</button>
+        </div>
+      </div>
+      {showCreateLogin && (
+        <>
+          <CreateLoginForm
+            setShowError={setShowError}
+            setErrorText={setErrorText}
+            setIdToken={setIdToken}
+          />
+          <Backdrop onClick={createLoginHandler} />
+        </>
+      )}
+    </>
+  );
+}
+
+export default LoginPage;
diff --git a/src/pages/Login.module.css b/src/pages/Login.module.css
new file mode 100644
index 0000000..d881f59
--- /dev/null
+++ b/src/pages/Login.module.css
@@ -0,0 +1,29 @@
+.login{
+    display: flex;
+    margin: 100px 30% 1% 30%;
+    justify-content: center;
+}
+
+.content {
+    text-align: center;
+    padding: 10%;
+}
+
+.input input{
+    margin: 3px;
+    display: inline-block;
+  font: inherit;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  padding: 0.25rem;
+  width: 100%;
+}
+
+.create {
+    text-align: center;
+}
+
+.error{
+    text-align: center;
+    color: red;
+}
\ No newline at end of file