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( +
+
); }; 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 ( -
-

Log In

-
-
- - isUserEmail(e.target.value)} - className="getEmail" - type="text" - id="isEmail" - name="isEmail" - /> -
- - isUserPassword(e.target.value)} - className="getPassword" - type="text" - id="isPassword" - name="isPassword" - /> -
- Forgot Password? -
-
- checkInput(e)} - value={"Log In"} - /> -
-

-

- Dont Have An Account? Create Account -

-
- ); -}; -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( +
+

Log In


+
+ + isUserEmail(e.target.value)} className = "getEmail" type="text" id="isEmail" name="isEmail"/>
+ + isUserPassword(e.target.value)} className="getPassword" type="text" id="isPassword" name="isPassword"/> +
Forgot Password?

+ checkInput(e)} value={"Log In"} /> +


+

Dont Have An Account? Create Account

+
+ ) +} +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

-
-
- - isUserName(e.target.value)} - className="getFullName" - type="text" - id="isName" - name="isName" - /> -
- - isUserEmail(e.target.value)} - className="getEmail" - type="text" - id="isEmail" - name="isEmail" - /> -
- - isUserPassword(e.target.value)} - className="getPassword" - type="text" - id="isPassword" - name="isPassword" - /> -
-
- inputCredentials(e)} - value={"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


+
+ + isUserName(e.target.value)} className = "getFullName" type="text" id="isName" name="isName"/>
+ + isUserEmail(e.target.value)} className = "getEmail" type="text" id="isEmail" name="isEmail"/>
+ + isUserPassword(e.target.value)} className="getPassword" type="text" id="isPassword" name="isPassword"/>

+ inputCredentials(e)} value={"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.
);