Skip to content

Commit

Permalink
Merge pull request #50 from cis3296f23/Oladele(New)-Branch
Browse files Browse the repository at this point in the history 
Oladele(new) branch
  • Loading branch information
@tup37064
tup37064 authored Nov 21, 2023
2 parents 5a3fcbe + 5bd60e7 commit 0eb4daf
Show file tree
Hide file tree
Showing 6 changed files with 285 additions and 278 deletions.
53 changes: 53 additions & 0 deletions src/components/header.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
93 changes: 62 additions & 31 deletions src/components/header.js
View file
Original file line number Diff line number Diff line change
@@ -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(
<div>
<nav className="navbar fixed-top navbar-expand-lg bg-light">
<div
className="container-fluid justify-content-start"
style={{ overflowWrap: "anywhere" }}
>
<a className="navbar-brand" href="/">
CookBook Pro
</a>
<div className="navbar-nav mr-auto">
<a className="nav-link" href="/meal-plans">
Meal Plans
</a>
<a className="nav-link" href="/search">
Search
</a>
<a className="nav-link" href="/recipes">
Recipes
</a>
<a className="nav-link" href="/shopping-list">
Shopping List
</a>
<a id={"buffer"} style={{width:"950px"}}></a>
<a className="nav-link" href="/Login">
<input
className="getLogin"
type="button"
id="isValid"
value={"Log In"}
/>
</a>
<div className="container-fluid justify-content-start" style={{ overflowWrap: "anywhere" }}>
<a className="navbar-brand" href="/">CookBook Pro</a>
<div className="navbar-nav">
<a className="nav-link" href="/meal-plans">Meal Plans</a>
<a className="nav-link" href="/search">Search</a>
<a className="nav-link" href="/recipes">Recipes</a>
<a className="nav-link" href="/shopping-list">Shopping List</a>
{isLogIn ? (
<div className="isUser">
<button className="userDropDown" type="button" id="getUser" onClick={getToggle}>User</button>
<div className="getDropDown" id="isDropDown">
<a href="/">Home</a>
<a href="/">Profile</a>
<a href="/" onClick={Logout}>Sign Out</a>
</div>
</div>
):
<a className="isLogin" href="/Login"><input className="getLogin" type="button" id="isValid" value={"Log In"}/></a>}
</div>
</div>
</nav>
</div>
);
};
126 changes: 46 additions & 80 deletions src/pages/Login.js
View file
Original file line number Diff line number Diff line change
@@ -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 (
<div className="LogIn">
<h1 className="Title">Log In</h1>
<br />
<form>
<label className="Email">
Email<br></br>
</label>
<input
value={userEmail}
onChange={(e) => isUserEmail(e.target.value)}
className="getEmail"
type="text"
id="isEmail"
name="isEmail"
/>
<br />
<label className="Password">
Password<br></br>
</label>
<input
value={userPassword}
onChange={(e) => isUserPassword(e.target.value)}
className="getPassword"
type="text"
id="isPassword"
name="isPassword"
/>
<div className="InvalidInput">
<span style={{ color: "blue" }}>Forgot Password?</span>
</div>
<br />
<input
className="isValidate"
type="button"
id="isValid"
onClick={(e) => checkInput(e)}
value={"Log In"}
/>
</form>
<br></br>
<p style={{ textAlign: "center" }}>
<a href="/SignUp">Dont Have An Account? Create Account</a>
</p>
</div>
);
};
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(
<div className = "LogIn">
<h1 className="Title">Log In</h1><br />
<form>
<label className="Email">Email<br></br></label>
<input value={userEmail} onChange={e => isUserEmail(e.target.value)} className = "getEmail" type="text" id="isEmail" name="isEmail"/><br/>
<label className="Password">Password<br></br></label>
<input value={userPassword} onChange={e => isUserPassword(e.target.value)} className="getPassword" type="text" id="isPassword" name="isPassword"/>
<div className="InvalidInput"><span style={{color:"blue"}}>Forgot Password?</span></div><br/>
<input className= "isValidate" type="button" id="isValid" onClick={e=>checkInput(e)} value={"Log In"} />
</form><br></br>
<p style={{textAlign:'center'}}><a href='/SignUp'>Dont Have An Account? Create Account</a></p>
</div>
)
}
export default Login;
112 changes: 53 additions & 59 deletions src/pages/LoginSignUp.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
Loading

0 comments on commit 0eb4daf

Please sign in to comment.