From fca2e11a06099a9790b1f698a471a3aee7803b91 Mon Sep 17 00:00:00 2001 From: Jack Collier Date: Thu, 2 Dec 2021 11:46:19 +0000 Subject: [PATCH 1/2] 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 ( + + ); + } + return ( <> - +
+ } + /> + { + 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 ( +
+ +

Create Account

+
+ + +
+ {emailError !== "" &&

{emailError}

} +
+
+ +
+
+ +
+ ); +} + +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 ( + <> +
+ +
+
+ + +
+ {emailError !== "" &&

{emailError}

} +
+ +
+
+ +
+
+
+ +
+
+ {showCreateLogin && ( + <> + + + + )} + + ); +} + +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 From df2c7233e21e06a671e8a5c025a7a3984f42d39f Mon Sep 17 00:00:00 2001 From: Jack Collier Date: Thu, 2 Dec 2021 14:28:23 +0000 Subject: [PATCH 2/2] changes --- .gitignore | 3 +++ src/components/login/CreateLogin.js | 3 ++- src/pages/Login.js | 3 ++- 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/.gitignore b/.gitignore index 4d29575..77cd5ce 100644 --- a/.gitignore +++ b/.gitignore @@ -21,3 +21,6 @@ npm-debug.log* yarn-debug.log* yarn-error.log* + +#config +Local-config.js \ No newline at end of file diff --git a/src/components/login/CreateLogin.js b/src/components/login/CreateLogin.js index d061d8a..0b9b029 100644 --- a/src/components/login/CreateLogin.js +++ b/src/components/login/CreateLogin.js @@ -3,6 +3,7 @@ import { useNavigate } from "react-router"; import action from "../posts/buttons/Button.module.css"; import Post from "../UI/Post"; import classes from "./CreateLogin.module.css"; +import { API_KEY } from "../../Local-config"; function CreateLoginForm({ setShowError, setErrorText, setIdToken }) { const [emailError, setEmailError] = useState(""); @@ -24,7 +25,7 @@ function CreateLoginForm({ setShowError, setErrorText, setIdToken }) { function createAccount(account) { fetch( - "https://www.googleapis.com/identitytoolkit/v3/relyingparty/signupNewUser?key=", + `https://www.googleapis.com/identitytoolkit/v3/relyingparty/signupNewUser?key=${API_KEY}`, { method: "POST", body: JSON.stringify(account), diff --git a/src/pages/Login.js b/src/pages/Login.js index 4db68ae..20c2927 100644 --- a/src/pages/Login.js +++ b/src/pages/Login.js @@ -5,6 +5,7 @@ import { useNavigate } from "react-router-dom"; import { useRef, useState } from "react"; import CreateLoginForm from "../components/login/CreateLogin"; import Backdrop from "../components/UI/Backdrop"; +import { API_KEY } from "../Local-config"; function LoginPage({ setShowError, setErrorText, setIdToken }) { const [showCreateLogin, setShowCreateLogin] = useState(false); @@ -24,7 +25,7 @@ function LoginPage({ setShowError, setErrorText, setIdToken }) { }; fetch( - "https://www.googleapis.com/identitytoolkit/v3/relyingparty/verifyPassword?key=", + `https://www.googleapis.com/identitytoolkit/v3/relyingparty/verifyPassword?key=${API_KEY}`, { method: "POST", body: JSON.stringify(account),