Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issue 25 login #32

Merged
merged 3 commits into from
Jul 10, 2024
Merged

Issue 25 login #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b2ab52a
login page ui
yuxunn Jul 9, 2024
6c1f8e4
favourites page
yuxunn Jul 9, 2024
68a24e6
signup
yuxunn Jul 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 9 additions & 5 deletions frontend/src/pages/favourites.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
// src/pages/Home.js
import React, { useEffect, useState, useContext } from 'react';
import { collection, query, onSnapshot } from 'firebase/firestore';
import { auth, db } from '../components/firebase';
import CardFav from '../components/cardfav';
import { SearchContext } from '../components/searchContext';


const Favourites = () => {
const [recipes, setRecipes] = useState([]);
const { searchTerm } = useContext(SearchContext);
Expand Down Expand Up @@ -40,9 +38,15 @@ const Favourites = () => {

return (
<main className="p-4 pt-16 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{filteredRecipes.map((recipe) => (
<CardFav key={recipe.id} isFavorited={true} {...recipe} />
))}
{filteredRecipes.length > 0 ? (
filteredRecipes.map((recipe) => (
<CardFav key={recipe.id} isFavorited={true} {...recipe} />
))
) : (
<div className="col-span-full text-center text-gray-600">
You have no favourited recipes yet! 😭 Start to ❤️ the recipes you like now!
</div>
)}
</main>
);
};
Expand Down
76 changes: 51 additions & 25 deletions frontend/src/pages/login.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,90 +2,116 @@ import React, { useState } from 'react';
import strawberrycake from '../assets/strawberrycake.png';
import { Link } from 'react-router-dom';
import { signInWithEmailAndPassword, signInWithPopup } from 'firebase/auth';
import { auth , provider} from '../components/firebase';
import { auth, provider } from '../components/firebase';
import googleLogo from "../assets/google.png";

function Login() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [isButtonDisabled, setIsButtonDisabled] = useState(true);
const [isSubmitting, setIsSubmitting] = useState(false);

const handleEmailChange = (e) => {
setEmail(e.target.value);
setIsButtonDisabled(e.target.value === '' || password === '');
};

const handlePasswordChange = (e) => {
setPassword(e.target.value);
setIsButtonDisabled(e.target.value === '' || email === '');
};

const handleSubmit = async (event) => {
event.preventDefault();
setIsSubmitting(true);
try {
await signInWithEmailAndPassword(auth, email, password);
console.log("logged in successfully");
window.location.href = "/home";
} catch (error) {
console.log(error.message);
setIsSubmitting(false);
}
}

const handleClick = async (event) => {
event.preventDefault();
setIsSubmitting(true);
try {
const result = await signInWithPopup(auth, provider);
const user = result.user;
console.log("Google signin");
window.location.href = "/home";

} catch (error) {
console.log("error");
alert("failed to login TT");
setIsSubmitting(false);
}
};

return (
<div className="flex items-center justify-center min-h-screen bg-gradient-to-r from-pink-200 to-blue-300">
<div className="bg-white p-8 rounded-lg shadow-lg flex flex-col md:flex-row w-full max-w-md mx-4">
<div className="flex items-center justify-center md:w-1/3">
<img
className="w-12 h-12 mb-4"
<div className="bg-white p-8 rounded-lg shadow-lg w-full max-w-md mx-4">
<div className="flex items-center justify-center mb-4">
<img
className="w-12 h-12 mb-2 mr-2"
src={strawberrycake}
alt="Logo"
/>
<h1 className="text-2xl mb-2 font-bold">ekac</h1>
</div>
<form onSubmit={handleSubmit} className="md:w-2/3">
<div className="mb-4">
<form onSubmit={handleSubmit} className="space-y-4">
<div>
<input
type="email"
id="email"
placeholder="Email"
value={email}
onChange={(e) => setEmail(e.target.value)}
onChange={handleEmailChange}
className="w-full p-2 border rounded-lg"
/>
</div>
<div className="mb-4">
<div>
<input
type="password"
id="password"
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
onChange={handlePasswordChange}
className="w-full p-2 border rounded-lg"
/>
</div>
<div className="text-right">
<Link to="/forgot-password" className="text-blue-500">Forget Password</Link>
</div>
<button
type="submit"
className="w-full py-2 bg-gradient-to-r from-pink-500 to-blue-400 text-white rounded hover:bg-gradient-to-l"
disabled={isButtonDisabled || isSubmitting}
className={`w-full py-2 bg-gradient-to-r from-pink-500 to-blue-400 text-white rounded ${isButtonDisabled || isSubmitting ? 'opacity-50 cursor-not-allowed' : 'hover:bg-gradient-to-l'}`}
>
Log In
{isSubmitting ? 'Logging in...' : 'Login'}
</button>
<button
onClick={handleClick}
className=" mt-3 w-full flex justify-center items-center bg-white hover:bg-gray-100 text-gray-800 font-normal py-2 px-4 rounded shadow"
>
<img
src={googleLogo}
alt="Google sign-in"
className="mr-2 w-10 h-8 object-fit:contain"
/>
Login with Google
</button>

<div className="mt-4 text-center text-gray-600">
Don't have an account? <Link to="/signup" className="text-blue-500">Sign up here</Link>.
</div>
</form>
<div className="flex items-center my-4">
<div className="flex-grow border-t border-gray-300"></div>
<span className="mx-4 text-gray-500">OR</span>
<div className="flex-grow border-t border-gray-300"></div>
</div>
<button
onClick={handleClick}
disabled={isSubmitting}
className="w-full flex justify-center items-center bg-white hover:bg-gray-100 text-gray-800 font-normal py-2 px-4 rounded shadow"
>
<img
src={googleLogo}
alt="Google sign-in"
className="mr-2 w-10 h-8 object-contain"
/>
Login with Google
</button>
</div>
</div>
);
Expand Down
168 changes: 91 additions & 77 deletions frontend/src/pages/signup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,42 @@
import React, { useState } from "react";
import strawberrycake from "../assets/strawberrycake.png";
import { createUserWithEmailAndPassword, signInWithPopup } from "firebase/auth";
import { auth, db, provider } from "../components/firebase";
import React, { useState } from 'react';
import strawberrycake from '../assets/strawberrycake.png';
import { Link } from 'react-router-dom';
import { setDoc, doc } from "firebase/firestore";
import { Link } from "react-router-dom";
import googleLogo from "../assets/google.png";
import { createUserWithEmailAndPassword, signInWithPopup } from 'firebase/auth';
import { auth, db, provider } from "../components/firebase";

import finn from "../assets/finn-the-human-duotone-svgrepo-com.svg"

import googleLogo from "../assets/google.png";

function Signup() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [secondPassword, setSecondPassword] = useState("");
const [email, setEmail] = useState('');
const [username, setUsername] = useState("");
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const [isButtonDisabled, setIsButtonDisabled] = useState(true);
const [isSubmitting, setIsSubmitting] = useState(false);

const handleClick = async (event) => {
event.preventDefault();
try {
const result = await signInWithPopup(auth, provider);
const user = result.user;
console.log("Google sign-in successful. User:", user);
const handleEmailChange = (e) => {
setEmail(e.target.value);
checkFields(e.target.value, password, confirmPassword);
};

await setDoc(doc(db, "users", user.uid), {
email: user.email,
username: user.displayName,
avatar: finn
});
window.location.href = "/home";
} catch (error) {
console.error("Error signing in with Google:", error.message);
alert("Failed to sign in with Google. Please try again.");
const handlePasswordChange = (e) => {
setPassword(e.target.value);
checkFields(email, e.target.value, confirmPassword);
};

const handleConfirmPasswordChange = (e) => {
setConfirmPassword(e.target.value);
checkFields(email, password, e.target.value);
};

const checkFields = (email, password, confirmPassword) => {
if (email && password && confirmPassword && password === confirmPassword) {
setIsButtonDisabled(false);
} else {
setIsButtonDisabled(true);
}
};

Expand All @@ -36,7 +45,7 @@ function Signup() {
if (email === "" || password === "" || username === "") {
alert("Please fill in all fields");
return;
} else if (password !== secondPassword) {
} else if (password !== confirmPassword) {
alert("Passwords do not match!");
return;
}
Expand All @@ -57,42 +66,45 @@ function Signup() {
window.location.href = "/login";
} catch (error) {
console.log(error.message);
setIsSubmitting(false);
}
};

const handleClick = async (event) => {
event.preventDefault();
setIsSubmitting(true);
try {
const result = await signInWithPopup(auth, provider);
const user = result.user;
console.log("Google signup");
window.location.href = "/home";
} catch (error) {
console.log("error");
alert("Failed to signup TT");
setIsSubmitting(false);
}
};

return (
<div className="flex items-center justify-center min-h-screen bg-gradient-to-r from-pink-200 to-blue-300">
<div
style={{
backgroundColor: "white",
padding: "16px",
borderRadius: "10px",
boxShadow: "0 2px 8px rgba(0, 0, 0, 0.1)",
width: "90%",
maxWidth: "500px",
margin: "auto",
}}
className="flex flex-col w-full mx-4"
>
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
width: "100%",
}}
>
<img className="w-16 h-16 mb-4" src={strawberrycake} alt="Logo" />
<div className="bg-white p-8 rounded-lg shadow-lg w-full max-w-md mx-4">
<div className="flex items-center justify-center mb-4">
<img
className="w-12 h-12 mr-2"
src={strawberrycake}
alt="Logo"
/>
<h1 className="text-2xl font-bold">ekac</h1>
</div>
<form onSubmit={handleSubmit} className="md: w-full">
<div className="mb-4">
<form onSubmit={handleSubmit} className="space-y-4">
<div>
<input
type="email"
id="email"
placeholder="Email"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="w-full p-3 border rounded-lg"
onChange={handleEmailChange}
className="w-full p-2 border rounded-lg"
/>
</div>
<div className="mb-4">
Expand All @@ -111,46 +123,48 @@ function Signup() {
id="password"
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="w-full p-3 border rounded-lg"
onChange={handlePasswordChange}
className="w-full p-2 border rounded-lg"
/>
</div>
<div className="mb-4">
<div>
<input
type="password"
id="secondPassword"
placeholder="Re-enter password"
value={secondPassword}
onChange={(e) => setSecondPassword(e.target.value)}
className="w-full p-3 border rounded-lg"
id="confirmPassword"
placeholder="Confirm Password"
value={confirmPassword}
onChange={handleConfirmPasswordChange}
className="w-full p-2 border rounded-lg"
/>
</div>
<button
type="submit"
className="w-full py-3 bg-gradient-to-r from-pink-500 to-blue-400 text-white rounded hover:from-blue-400 hover:to-pink-500"
>
Sign Up
</button>
<button
onClick={handleClick}
className=" mt-3 w-full flex justify-center items-center bg-white hover:bg-gray-100 text-gray-800 font-normal py-2 px-4 rounded shadow"
disabled={isButtonDisabled || isSubmitting}
className={`w-full py-2 bg-gradient-to-r from-pink-500 to-blue-400 text-white rounded ${isButtonDisabled || isSubmitting ? 'opacity-50 cursor-not-allowed' : 'hover:bg-gradient-to-l'}`}
>
<img
src={googleLogo}
alt="Google sign-in"
className="mr-2 w-10 h-10 object-fit:contain"
/>
Sign up with Google
{isSubmitting ? 'Signing up...' : 'Signup'}
</button>

<div className="mt-4 text-center text-gray-600">
Already have an account? Log In{" "}
<Link to="/login" className="text-blue-500">
here
</Link>
.
Already have an account? <Link to="/login" className="text-blue-500">Log in here</Link>.
</div>
</form>
<div className="flex items-center my-4">
<div className="flex-grow border-t border-gray-300"></div>
<span className="mx-4 text-gray-500">OR</span>
<div className="flex-grow border-t border-gray-300"></div>
</div>
<button
onClick={handleClick}
disabled={isSubmitting}
className="w-full flex justify-center items-center bg-white hover:bg-gray-100 text-gray-800 font-normal py-2 px-4 rounded shadow"
>
<img
src={googleLogo}
alt="Google signup"
className="mr-2 w-10 h-8 object-contain"
/>
Signup with Google
</button>
</div>
</div>
);
Expand Down
Loading