Skip to content

Commit

Permalink
Refactored Signup component
Browse files Browse the repository at this point in the history
  • Loading branch information
@amantaphelix
amantaphelix committed Jun 21, 2024
1 parent 79a4699 commit 28332b7
Show file tree
Hide file tree
Showing 4 changed files with 132 additions and 329 deletions.
1 change: 1 addition & 0 deletions server/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
"express-async-handler": "^1.2.0",
"faker": "^5.5.3",
"jsonwebtoken": "^9.0.2",
"mongodb": "^6.7.0",
"mongoose": "^7.6.13",
"multer": "^1.4.5-lts.1",
"nodemailer": "^6.9.13",
Expand Down
1 change: 1 addition & 0 deletions src/components/Navbar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,7 @@ const Navbar = () => {
</div>
</div>
</div>
</div>
<AnimatePresence>
{isOpen && (
<motion.div
Expand Down
149 changes: 32 additions & 117 deletions src/pages/Login.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,23 @@

import React, { useState, useEffect } from "react";

import { AiOutlineEye, AiOutlineEyeInvisible } from "react-icons/ai";
import { Link, useNavigate } from "react-router-dom";
import { toast } from "react-hot-toast";
import axios from "axios";

import logo from "../assets/logo2.png";
import Loader from "../components/Loader/Loader";
import { useAuth } from "../authContext";

function Login() {
const [formData, setFormData] = useState({
email: "",
accountType : "",
accountType: "",
password: "",
});

const { checkAuthentication } = useAuth();
const [showPassword, setShowPassword] = useState(false);
const [loading, setLoading] = useState(false);
const [rememberMe, setRememberMe] = useState(false);
const [rememberMe, setRememberMe] = useState(false);

const navigate = useNavigate();

Expand All @@ -41,43 +39,32 @@ function Login() {
}));
}


function rememberMeHandler(event) {
setRememberMe(event.target.checked);
}

async function submitHandler(event) {
event.preventDefault();
setLoading(true);

try {
const apiUrl =
formData.accountType === "User"
? `${process.env.REACT_APP_BASE_URL}/studentLogin`
: `${process.env.REACT_APP_BASE_URL}/canteenLogin`;

if(formData.accountType === "User"){

const apiUrl = `${process.env.REACT_APP_BASE_URL}/studentLogin`;
// const apiUrl = `http://localhost:4000/api/v1/studentLogin`;
const response = await axios.post(apiUrl, formData);

axios.post(apiUrl , formData)
.then((response)=>{
toast.success("User Logged in ");
toast.success("User Logged in");
if (formData.accountType === "User") {
navigate("/home");
})
.catch((error)=>{
toast.error("Failed to login")
});
}

else{

const apiUrl = `${process.env.REACT_APP_BASE_URL}/canteenLogin`;

axios.post(apiUrl , formData)
.then((response)=>{
toast.success("User Logged in ");
} else {
navigate(`/section/${response.data.cantId}`);
})
.catch((error)=>{
toast.error("Failed to login")
});

}
} catch (error) {
toast.error("Failed to login");
} finally {
setLoading(false);
}
}

Expand All @@ -89,10 +76,8 @@ function Login() {
<div className="relative h-screen md:flex">
<div className="absolute top-0 right-0 m-3">
<Link to="/contact">
<button
className="hover:shadow-blue-950 hover:shadow-sm text-white py-1 px-2 w-full h-auto text-l relative z-0 rounded-full transition-all duration-200 hover:scale-110"
>
<img src="/c4.png" className="h-10 w-10" />
<button className="hover:shadow-blue-950 hover:shadow-sm text-white py-1 px-2 w-full h-auto text-l relative z-0 rounded-full transition-all duration-200 hover:scale-110">
<img src="/c4.png" className="h-10 w-10" alt="Contact" />
</button>
</Link>
</div>
Expand All @@ -108,43 +93,6 @@ function Login() {
<div className="absolute -top-40 -right-0 w-80 h-80 border-4 rounded-full border-opacity-30 border-t-8"></div>
<div className="absolute -top-20 -right-20 w-80 h-80 border-4 rounded-full border-opacity-30 border-t-8"></div>
</div>

<div className="h-screen md:flex">

<div className="relative overflow-hidden md:flex w-1/2 bg-gradient-to-t from-blue-950 via-blue-950 to-gray-900 bg-no-repeat justify-around items-center hidden">

<div>
<img src={logo} alt="logo" className="w-48 h-12 mb-2"/>
<p className="text-white mt-1 ml-3">Connecting You to Your College Canteens</p>
</div>

<div className="absolute -bottom-32 -left-40 w-80 h-80 border-4 rounded-full border-opacity-30 border-t-8"></div>
<div className="absolute -bottom-40 -left-20 w-80 h-80 border-4 rounded-full border-opacity-30 border-t-8"></div>
<div className="absolute -top-40 -right-0 w-80 h-80 border-4 rounded-full border-opacity-30 border-t-8"></div>
<div className="absolute -top-20 -right-20 w-80 h-80 border-4 rounded-full border-opacity-30 border-t-8"></div>

</div>

<div className="flex md:w-1/2 justify-center py-10 items-center bg-white">

<form className="bg-white p-8 rounded shadow-lg w-80" onSubmit={submitHandler}>

<h1 className="text-gray-800 font-bold text-2xl mb-1">Hello Again!</h1>
<p className="text-sm font-normal text-gray-600 mb-7">Welcome Back</p>

<div className="mb-4">
<input
required
className="w-full py-2 px-3 border border-gray-300 rounded-2xl"
type="email"
placeholder="Email"
name="email"
value={formData.email}
onChange={changeHandler}
/>
</div>


<div className="flex md:w-1/2 justify-center py-10 items-center bg-white">
<form
className="bg-white p-8 rounded shadow-lg w-80"
Expand All @@ -156,7 +104,6 @@ function Login() {
<p className="text-sm font-normal text-gray-600 mb-7">
Welcome Back
</p>

<div className="mb-4">
<input
required
Expand All @@ -168,7 +115,6 @@ function Login() {
onChange={changeHandler}
/>
</div>

<div className="mb-4">
<select
required
Expand All @@ -184,7 +130,6 @@ function Login() {
<option value="Canteen">Canteen</option>
</select>
</div>

<div className="relative mb-4">
<input
required
Expand All @@ -206,7 +151,6 @@ function Login() {
)}
</span>
</div>

<div className="remember-me mb-4">
<input
type="checkbox"
Expand All @@ -216,58 +160,29 @@ function Login() {
/>
<label htmlFor="remember-me"> Remember me</label>
</div>

<div className="mb-4 flex justify-center text-red-400">
<Link to="/forgotPassword">
<h1 className="font-medium">Forgot Password ?</h1>
<h1 className="font-medium">Forgot Password?</h1>
</Link>
</div>

<button
type="submit"
className="w-full bg-gradient-to-t from-blue-950 via-blue-950 to-gray-900 py-2 rounded-2xl text-white font-semibold mb-2"
disabled={loading}

>
<option value="" disabled selected hidden>Login as</option>
<option value="User">User</option>
<option value="Canteen">Canteen</option>
</select>
</div>

<div className="relative mb-4">
<input
required
className="w-full py-2 px-3 border border-gray-300 rounded-2xl"
type={showPassword ? "text" : "password"}
placeholder="Password"
name="password"
value={formData.password}
onChange={changeHandler}
/>
<span
className="absolute right-3 top-3 cursor-pointer"
onClick={() => setShowPassword((prev) => !prev)}
>
{showPassword ? <AiOutlineEye size={20} /> : <AiOutlineEyeInvisible size={20} />}
</span>
Login
</button>
<Link to="/signup">
<span className="text-sm ml-2 hover:text-blue-500 cursor-pointer">
Don't have an account? Sign Up
</span>
</Link>
</form>
</div>

<button type="submit" className="w-full bg-gradient-to-t from-blue-950 via-blue-950 to-gray-900 py-2 rounded-2xl text-white font-semibold mb-2">
Login
</button>

<Link to="/signup">
<span className="text-sm ml-2 hover:text-blue-500 cursor-pointer">Don't have an account? Sign Up</span>
</Link>

</form>

</div>

</div>
</div>
)}
</>
);
}

export default Login;

Loading

0 comments on commit 28332b7

Please sign in to comment.