Skip to content

Commit

Permalink
Merge pull request #27 from frs11/main
Browse files Browse the repository at this point in the history
added registration page and login page with some changes in navbar
  • Loading branch information
jps27CSE authored Oct 23, 2023
2 parents 71a3295 + 50f1291 commit 58ac45f
Show file tree
Hide file tree
Showing 10 changed files with 1,342 additions and 18 deletions.
929 changes: 925 additions & 4 deletions Frontend/package-lock.json

Large diffs are not rendered by default.

5 changes: 4 additions & 1 deletion Frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,16 @@
"preview": "vite preview"
},
"dependencies": {
"firebase": "^10.5.0",
"localforage": "^1.10.0",
"match-sorter": "^6.3.1",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.11.0",
"react-router-dom": "^6.16.0",
"sort-by": "^1.2.0"
"sort-by": "^1.2.0",
"sweetalert": "^2.1.2"
},
"devDependencies": {
"@types/react": "^18.2.15",
Expand Down
62 changes: 52 additions & 10 deletions Frontend/src/Components/Navbar/Navbar.jsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,20 @@
import { useState } from "react";
import { Link, NavLink } from "react-router-dom";
import { useContext, useState } from "react";
import { Link, NavLink, useNavigate } from "react-router-dom";
import { AuthContext } from "../../Provider/AuthProvider";

const Navbar = () => {
const [open, setOpen] = useState(true);
const { user, userSignOut } = useContext(AuthContext);
const navigate = useNavigate();

const handleLogin = () => {
navigate("/login");
};
const handleLogout = () => {
userSignOut()
.then(navigate("/login"))
.catch((err) => console.log(err.message));
};
const links = (
<>
<li>
Expand All @@ -11,7 +23,7 @@ const Navbar = () => {
isPending
? "pending"
: isActive
? " text-teal-700 bg-teal-200 rounded-md font-bold"
? " text-teal-700 bg-teal-300 rounded-md font-bold"
: ""
}
to="/"
Expand All @@ -26,7 +38,7 @@ const Navbar = () => {
isPending
? "pending"
: isActive
? " text-teal-700 bg-teal-200 rounded-md font-bold"
? " text-teal-700 bg-teal-300 rounded-md font-bold"
: ""
}
>
Expand Down Expand Up @@ -76,13 +88,43 @@ const Navbar = () => {
<div className="navbar-center hidden lg:flex">
<ul className="menu menu-horizontal px-1">{links}</ul>
</div>

{/* Navbar End */}
<div className="navbar-end">
<Link
to="/login"
className="px-5 py-2 bg-teal-300 font-medium rounded-lg hover:bg-teal-600 hover:text-white"
>
Login
</Link>
{user ? (
<div className="flex items-center space-x-3">
<div className="">
<img
className="w-7 lg:w-10 h-7 lg:h-10 rounded-full ml-4 lg:ml-2"
src={user?.photoURL}
alt=""
/>
<p className="text-xs font-logoFont text-center">
{user?.displayName}
</p>
</div>
<button
onClick={handleLogout}
className="px-2 py-1 text-sm lg:text-base lg:px-5 lg:py-2 border hover:border-teal-700 border-teal-300 hover:bg-teal-400 hover:text-black font-medium rounded-md"
>
Sign Out
</button>
</div>
) : (
<div className="flex items-center">
<img
className="w-7 lg:w-10 h-7 lg:h-10 rounded-full mr-3"
src="https://i.ibb.co/By0YFNn/default-profile-picture-grey-male-icon.png"
alt=""
/>
<button
onClick={handleLogin}
className="px-2 py-1 text-sm lg:text-base lg:px-5 lg:py-2 bg-teal-600 hover:bg-teal-400 hover:text-black text-white rounded-md"
>
Sign In
</button>
</div>
)}
</div>
</div>
</div>
Expand Down
21 changes: 21 additions & 0 deletions Frontend/src/Firebase Config/firebase,config,js
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: "AIzaSyBqF3JMVJvi74sTf2dFOcp22pa28R6dbas",
authDomain: "gadjet-store-8a7cd.firebaseapp.com",
projectId: "gadjet-store-8a7cd",
storageBucket: "gadjet-store-8a7cd.appspot.com",
messagingSenderId: "839068425227",
appId: "1:839068425227:web:93b4f86c3526d062057b0e"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

export const auth = getAuth(app);
105 changes: 103 additions & 2 deletions Frontend/src/Pages/Login.jsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,108 @@
import { Link, useLocation, useNavigate } from "react-router-dom";
import { useContext } from "react";
import swal from "sweetalert";
import { FcGoogle } from "react-icons/fc";
import { AuthContext } from "../Provider/AuthProvider";

const Login = () => {
const { UserLogin, loginWithGoogle } = useContext(AuthContext);
const navigate = useNavigate();
const location = useLocation();

const handleLogin = (e) => {
e.preventDefault();
const form = new FormData(e.currentTarget);
const userEmail = form.get("email");
const userPassword = form.get("password");

UserLogin(userEmail, userPassword)
.then(() => {
e.target.reset();
swal("Congratulations!", "You logged in Successfully!", "success");
navigate(location?.state ? location.state : "/");
})
.catch((err) => {
swal(err.message, "Try again", "warning");
e.target.reset();
console.log(err.message);
});
};

const handleGoogleLogin = () => {
loginWithGoogle()
.then(() => {
swal("Congratulations!", "You logged in Successfully!", "success");
navigate(location?.state ? location.state : "/");
})
.catch((err) => {
swal(err.message, "", "warning");
console.log(err);
});
};

return (
<div>
<h1>Login</h1>
<div className="hero min-h-screen bg-base-900">
<div className="hero-content flex-col w-full md:w-1/2 lg:w-2/6 lg:max-w-2xl">
<div className="text-center">
<h1 className="text-4xl font-bold">Please Sign in</h1>
</div>
<div className="card w-full py-3 shadow-xl bg-base-100">
<form onSubmit={handleLogin} className="card-body">
<div className="form-control">
<label className="label">
<span className="label-text">Email</span>
</label>
<input
type="email"
placeholder="email"
name="email"
className="input input-bordered"
required
/>
</div>
<div className="form-control">
<label className="label">
<span className="label-text">Password</span>
</label>
<input
type="password"
name="password"
placeholder="password"
className="input input-bordered"
required
/>
</div>
<div className="form-control mt-6">
<button className="py-2 rounded-md bg-teal-500 hover:bg-teal-400 hover:text-black text-white font-semibold">
Sign In
</button>
</div>
</form>

<div className=" my-2 px-8 w-full ">
<p className="text-sm text-gray-700 mb-3 ml-3">
You can also login using Google
</p>
<button
onClick={handleGoogleLogin}
className="py-2 rounded-md w-full border bg-teal-200 border-teal-500 hover:bg-teal-400 hover:text-black font-semibold"
>
<span className="flex justify-center items-center">
<p className="mr-2">Sign in with </p>
<FcGoogle></FcGoogle>
<span className="ml-1">Google</span>
</span>
</button>
</div>

<span className="text-center text-gray-400">
New to this website? Please{" "}
<Link to="/registration" className="font-semibold text-teal-700">
Sign Up
</Link>
</span>
</div>
</div>
</div>
);
};
Expand Down
134 changes: 134 additions & 0 deletions Frontend/src/Pages/Registration.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
import { Link, useNavigate } from "react-router-dom";
import { updateProfile } from "firebase/auth";
import { useContext } from "react";
import swal from "sweetalert";
import { AuthContext } from "../Provider/AuthProvider";

const Registration = () => {
const { createNewUser } = useContext(AuthContext);
const navigate = useNavigate();

const handleRegistration = (e) => {
e.preventDefault();
const form = new FormData(e.currentTarget);
const userName = form.get("name");
const image = form.get("photourl");
const userEmail = form.get("email");
const userPassword = form.get("password");

if (userPassword.length < 6) {
e.target.reset();
return swal(
"Password should be more than 6 letters",
"Please try again",
"warning"
);
} else if (!/[A-Z]/.test(userPassword)) {
e.target.reset();
return swal(
"Password should have at least one capital letter",
"Please try again",
"warning"
);
} else if (!/[!@#$%^&*()_+{}[\]:;<>,.?~\\-]/.test(userPassword)) {
e.target.reset();
return swal(
"Password should have at least one special character!",
"Please try again",
"warning"
);
}
createNewUser(userEmail, userPassword)
.then((res) => {
const user = res.user;
updateProfile(user, {
displayName: userName,
email: userEmail,
photoURL: image,
});
e.target.reset();
console.log(user);
swal("Congratulations!", "Signed Up Successfully!", "success");
navigate("/");
})
.catch((err) => {
e.target.reset();
console.log(err);
});
};
return (
<div className="hero min-h-screen bg-base-900">
<div className="hero-content flex-col w-full md:w-1/2 lg:w-2/6 lg:max-w-2xl">
<div className="text-center">
<h1 className="text-4xl font-bold">Please Sign Up</h1>
</div>
<div className="card w-full py-3 shadow-xl bg-base-100">
<form onSubmit={handleRegistration} className="card-body">
<div className="form-control">
<label className="label">
<span className="label-text">Name</span>
</label>
<input
type="text"
placeholder="Name"
name="name"
className="input input-bordered"
required
/>
</div>
<div className="form-control">
<label className="label">
<span className="label-text">Email</span>
</label>
<input
type="email"
placeholder="email"
name="email"
className="input input-bordered"
required
/>
</div>
<div className="form-control">
<label className="label">
<span className="label-text">Photo url</span>
</label>
<input
type="text"
placeholder="Photo url"
defaultValue="https://source.unsplash.com/random/200x200/?img=1"
name="photourl"
className="input input-bordered"
// required
/>
</div>
<div className="form-control">
<label className="label">
<span className="label-text">Password</span>
</label>
<input
type="password"
placeholder="password"
name="password"
className="input input-bordered"
required
/>
</div>
<div className="form-control mt-6">
<button className="py-2 rounded-md bg-teal-500 hover:bg-teal-400 hover:text-black text-white font-semibold">
Sign Up
</button>
</div>
</form>
<span className="text-center text-gray-400">
Already have an account? Please{" "}
<Link to="/login" className="font-semibold text-teal-700">
Sign in
</Link>
</span>
</div>
</div>
</div>
);
};

export default Registration;
Loading

0 comments on commit 58ac45f

Please sign in to comment.