From acf53d23a61bac525cc989b4b84240fe7fb5f7c6 Mon Sep 17 00:00:00 2001
From: defining-art <118932320+defining-art@users.noreply.github.com>
Date: Tue, 21 Nov 2023 13:25:40 -0500
Subject: [PATCH 1/2] Store UID
---
src/pages/Login.js | 126 ++++++++++++--------------------
src/pages/LoginSignUp.css | 112 ++++++++++++++--------------
src/pages/SignUp.js | 149 ++++++++++++++++----------------------
src/pages/home.js | 30 ++------
4 files changed, 170 insertions(+), 247 deletions(-)
diff --git a/src/pages/Login.js b/src/pages/Login.js
index fc251e7..d70a796 100644
--- a/src/pages/Login.js
+++ b/src/pages/Login.js
@@ -1,80 +1,46 @@
-import React, { useState, useEffect } from "react";
-import { useNavigate } from "react-router-dom";
-import { getAuth, signInWithEmailAndPassword } from "firebase/auth";
-import "../index.js";
-import "./LoginSignUp.css";
-import "../firebase/firebaseConfig.js";
-import "./home.js";
-import "./SignUp.js";
-
-var Login = () => {
- const [userEmail, isUserEmail] = useState("");
- const [userPassword, isUserPassword] = useState("");
- const auth = getAuth();
- const navigate = useNavigate();
- useEffect(() => {
- document.title = "CookBook-Pro: Login";
- document.body.style.backgroundColor = "#E0EAFC";
- }, []);
- const checkInput = (e) => {
- e.preventDefault();
- signInWithEmailAndPassword(auth, userEmail, userPassword)
- .then((userCredential) => {
- const user = userCredential.user;
- document.location.href = "/";
- })
- .catch((error) => {
- const errorCode = error.code;
- const errorMessage = error.message;
- console.log(errorCode, errorMessage);
- });
- };
-
- return (
-
- );
-};
-export default Login;
+import React, {useState, useEffect} from 'react'
+import {getAuth, signInWithEmailAndPassword} from 'firebase/auth';
+import '../index.js'
+import './LoginSignUp.css';
+import '../firebase/firebaseConfig.js';
+import './home.js'
+import './SignUp.js'
+
+var Login=()=>{
+ const[userEmail, isUserEmail] = useState("");
+ const[userPassword, isUserPassword] = useState("");
+ const auth = getAuth();
+ useEffect(()=>{
+ document.title = 'CookBook-Pro: Login';
+ document.body.style.backgroundColor="#E0EAFC";
+ }, []);
+ const checkInput=async(e)=>{
+ e.preventDefault();
+ await signInWithEmailAndPassword(auth, userEmail, userPassword)
+ .then((userCredential)=>{
+ const user = userCredential.user;
+ document.location.href = "/";
+ })
+ .catch((error)=>{
+ const errorCode = error.code;
+ const errorMessage = error.message;
+ console.log(errorCode,errorMessage);
+ });
+ }
+
+ return(
+
+ )
+}
+export default Login;
\ No newline at end of file
diff --git a/src/pages/LoginSignUp.css b/src/pages/LoginSignUp.css
index e863b8d..d3abcd5 100644
--- a/src/pages/LoginSignUp.css
+++ b/src/pages/LoginSignUp.css
@@ -1,59 +1,53 @@
-.LogIn,
-.SignUp {
- width: 350px;
- height: 350px;
- border: 2px lightgrey;
- border-style: solid;
- border-radius: 15px;
- margin: auto;
- margin-top: 150px;
- overflow-wrap: anywhere;
- background: white;
-}
-
-.Title {
- text-align: center;
-}
-
-.FullName,
-.Email,
-.Password {
- padding-left: 12px;
-}
-
-.getFullName,
-.getEmail,
-.getPassword {
- margin-left: 14px;
- height: 25px;
- width: 300px;
- border-radius: 15px;
- padding-left: 8px;
-}
-
-.InvalidInput {
- margin-left: 14px;
- color: blue;
-}
-
-.InvalidInput:hover {
- cursor: pointer;
-}
-
-.isSubmission,
-.isValidate {
- height: 35px;
- width: 300px;
- margin-left: 20px;
- font-size: 14pt;
- color: white;
- background-color: darkgray;
- border-radius: 12px;
- border-style: none;
-}
-
-.isValidate:hover {
- background-color: lightgray;
- box-shadow: 2px 5px 4px rgba(0, 0, 0, 0.5);
- cursor: pointer;
-}
+.LogIn, .SignUp{
+ width: 350px;
+ height: 350px;
+ border: 2px lightgrey;
+ border-style:solid;
+ border-radius: 15px;
+ margin:auto;
+ margin-top: 150px;
+ overflow-wrap: anywhere;
+ background: white;
+}
+
+.Title{
+ text-align: center;
+}
+
+.FullName, .Email, .Password{
+ padding-left: 12px;
+}
+
+.getFullName, .getEmail, .getPassword{
+ margin-left: 14px;
+ height: 25px;
+ width: 300px;
+ border-radius: 15px;
+ padding-left: 8px;
+}
+
+.InvalidInput{
+ margin-left: 14px;
+ color: blue;
+}
+
+.InvalidInput:hover{
+ cursor:pointer;
+}
+
+.isSubmission, .isValidate{
+ height: 35px;
+ width: 300px;
+ margin-left: 20px;
+ font-size: 14pt;
+ color: white;
+ background-color: darkgray;
+ border-radius: 12px;
+ border-style: none;
+}
+
+.isValidate:hover{
+ background-color: lightgray;
+ box-shadow: 2px 5px 4px rgba(0, 0, 0, 0.5);
+ cursor: pointer;
+}
\ No newline at end of file
diff --git a/src/pages/SignUp.js b/src/pages/SignUp.js
index 8c98af5..db1dc64 100644
--- a/src/pages/SignUp.js
+++ b/src/pages/SignUp.js
@@ -1,85 +1,64 @@
-import React, { useState, useEffect } from "react";
-import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";
-import "../index.js";
-import "./LoginSignUp.css";
-import "../firebase/firebaseConfig.js";
-import "./home.js";
-
-var SignUp = () => {
- const [userName, isUserName] = useState("");
- const [userEmail, isUserEmail] = useState("");
- const [userPassword, isUserPassword] = useState("");
- const auth = getAuth();
- useEffect(() => {
- document.title = "CookBook-Pro: SignUp";
- document.body.style.backgroundColor = "#CFDEF3";
- }, []);
- const inputCredentials = async (e) => {
- e.preventDefault();
- await createUserWithEmailAndPassword(auth, userEmail, userPassword)
- .then((userCredential) => {
- const user = userCredential.user;
- document.location.href = "/";
- })
- .catch((error) => {
- const errorCode = error.code;
- const errorMessage = error.message;
- console.log(errorCode, errorMessage);
- });
- };
-
- return (
-
-
Sign Up
-
-
-
- );
-};
-
-export default SignUp;
+import React, {useState, useEffect} from 'react';
+import {getAuth, createUserWithEmailAndPassword, updateProfile} from 'firebase/auth';
+import {getFirestore} from "firebase/firestore";
+import {collection, doc, getDoc, setDoc} from "firebase/firestore";
+import {firebaseApp} from '../firebase/firebaseConfig.js';
+import '../index.js'
+import './LoginSignUp.css';
+import './home.js'
+
+var SignUp=()=>{
+ const[userName, isUserName] = useState("");
+ const[userEmail, isUserEmail] = useState("");
+ const[userPassword, isUserPassword] = useState("");
+ const auth = getAuth();
+ const firebaseDB = getFirestore(firebaseApp);
+ useEffect(()=>{
+ document.title = 'CookBook-Pro: SignUp';
+ document.body.style.backgroundColor="#CFDEF3"
+ }, []);
+ const inputCredentials=async(e)=>{
+ e.preventDefault();
+ await createUserWithEmailAndPassword(auth, userEmail, userPassword)
+ .then (async (userCredential)=>{
+ const user = userCredential.user;
+ const isUID = user.uid;
+ const docSnap = await getDoc(doc(firebaseDB, "Users", isUID));
+ if(!docSnap.exists()){
+ await setDoc(doc(firebaseDB, "Users", isUID), {recipeID:[""]});
+ }
+ })
+ .catch((error)=>{
+ const errorCode = error.code;
+ const errorMessage = error.message;
+ console.log(errorCode, errorMessage);
+ });
+ await updateProfile(auth.currentUser, {displayName: document.getElementById("isName").value})
+ .then(()=>{
+ console.log(auth.currentUser);
+ document.location.href = "/";
+ })
+ .catch((error)=>{
+ const errorCode = error.code;
+ const errorMessage = error.message;
+ console.log(errorCode, errorMessage);
+ });
+ }
+
+ return(
+
+
Sign Up
+
+
+ )
+}
+
+export default SignUp;
\ No newline at end of file
diff --git a/src/pages/home.js b/src/pages/home.js
index d64e33f..6c18fb6 100644
--- a/src/pages/home.js
+++ b/src/pages/home.js
@@ -1,35 +1,19 @@
+import React, {useState, useEffect} from 'react';
+import {Offcanvas, OffcanvasHeader, OffcanvasBody, Button, Card, ListGroup, ListGroupItem, ListGroupItemHeading, ListGroupItemText, ListInlineItem } from 'reactstrap';
-import React, { useState } from 'react';
-
-import { Offcanvas, OffcanvasHeader, OffcanvasBody, Button, Card, ListGroup, ListGroupItem, ListGroupItemHeading, ListGroupItemText, ListInlineItem } from 'reactstrap';
-
-const Home = () => {
-
+const Home=()=>{
const [toggle, setToggle] = useState(false);
-
- function buttonPushed() {
+ function buttonPushed(){
setToggle(toggle => !toggle);
}
return (
Welcome to CookBook Pro
-
-
+
- buttonPushed()}>
- Offcanvas
-
-
-
- This is the Offcanvas body.
-
-
+ buttonPushed()}>Offcanvas
+ This is the Offcanvas body.
);
From 5bd60e774e39ab9695be0370a9c5bec198652d5d Mon Sep 17 00:00:00 2001
From: defining-art <118932320+defining-art@users.noreply.github.com>
Date: Tue, 21 Nov 2023 13:28:00 -0500
Subject: [PATCH 2/2] Update User Login
---
src/components/header.css | 53 ++++++++++++++++++++++
src/components/header.js | 93 ++++++++++++++++++++++++++-------------
2 files changed, 115 insertions(+), 31 deletions(-)
create mode 100644 src/components/header.css
diff --git a/src/components/header.css b/src/components/header.css
new file mode 100644
index 0000000..8512cef
--- /dev/null
+++ b/src/components/header.css
@@ -0,0 +1,53 @@
+.isUser{
+ position: relative;
+ display: inline-block;
+}
+
+.userDropDown{
+ height: 35px;
+ width: 60px;
+ background-color: #3498DB;
+ color: white;
+ border-radius: 12px;
+ font-size: 16px;
+ border-style: none;
+ cursor: pointer;
+ margin-top: 5px;
+ margin-left: 950px;
+ }
+
+.userDropDown:hover, .userDropDown:focus{
+ background-color: #2980B9;
+}
+
+.getDropDown{
+ display: none;
+ position: absolute;
+ background-color: #f1f1f1;
+ min-width: 100px;
+ overflow: auto;
+ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+ right: 0;
+ z-index: 1;
+}
+
+.getDropDown a{
+ color: black;
+ padding: 12px 16px;
+ text-decoration: none;
+ display: block;
+}
+
+.getDropDown a:hover{
+ background-color: #ddd;
+}
+
+.show{
+ display: block;
+}
+
+.getLogin{
+ position: absolute;
+ margin-top: 5px;
+ margin-left: 950px;
+}
\ No newline at end of file
diff --git a/src/components/header.js b/src/components/header.js
index cf5278d..984c73e 100644
--- a/src/components/header.js
+++ b/src/components/header.js
@@ -1,40 +1,71 @@
import "bootstrap/dist/css/bootstrap.min.css";
-import React from "react";
+import React, {useState, useEffect} from 'react';
+import {Navbar} from "reactstrap";
+import {getAuth, onAuthStateChanged, signOut} from "firebase/auth";
+import './header.css';
export default () => {
- return (
+ const [isLogIn, isLoggedIn] = useState(false);
+ const auth = getAuth();
+ useEffect(()=>{
+ document.title = 'Home';
+ onAuthStateChanged(auth, (isUser)=>{
+ (isUser) ? isLoggedIn(true) : isLoggedIn(false);
+ });
+ if(isLogIn){
+ console.log("Signed IN");
+ window.onclick = function(event){
+ if(!event.target.matches('.userDropDown')){
+ var dropdowns = document.getElementsByClassName("getDropDown");
+ var i;
+ for(i = 0; i < dropdowns.length; i++){
+ var openDropdown = dropdowns[i];
+ if(openDropdown.classList.contains('show')){
+ openDropdown.classList.remove('show');
+ }
+ }
+ }
+ }
+ }
+ }, [isLogIn]);
+ const Logout=()=>{
+ signOut(auth).then(()=>{
+ document.location.href = "/";
+ console.log("Signed out successfully")
+ }).catch((error)=>{
+ const errorCode = error.code;
+ const errorMessage = error.message;
+ console.log(errorCode, errorMessage);
+ });
+ }
+ function getToggle(){
+ document.getElementById("isDropDown").classList.toggle("show");
+ }
+
+ return(
+