Skip to content

Commit

Permalink
Merge pull request #353 from amantaphelix/main
Browse files Browse the repository at this point in the history 
Signup Page Visibility
  • Loading branch information
@hustlerZzZ
hustlerZzZ authored Jun 24, 2024
2 parents b66a341 + d8a8edb commit 59492d1
Show file tree
Hide file tree
Showing 4 changed files with 57 additions and 89 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
2 changes: 1 addition & 1 deletion src/components/Navbar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -160,4 +160,4 @@ const IconNews = () => <span>📰</span>;
const IconRateUs = () => <span>⭐</span>;
const IconCanteen = () => <span>🥗</span>;

export default Navbar;
export default Navbar;
2 changes: 1 addition & 1 deletion src/pages/Login.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -193,4 +193,4 @@ function Login() {
);
}

export default Login;
export default Login;
141 changes: 54 additions & 87 deletions src/pages/Signup.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,8 @@ import { arrows_exclamation } from 'react-icons-kit/linea/arrows_exclamation';
import { useAuth } from "../authContext.js";

function Signup() {

const { isAuthenticated, signUp } = useAuth();

const [formData, setFormData] = useState({
name: "",
email: "",
Expand All @@ -32,12 +31,12 @@ function Signup() {
const [loading, setLoading] = useState(false);

const navigate = useNavigate();

useEffect(() => {
if(isAuthenticated){
if (isAuthenticated) {
navigate('/home');
}
})
}, [isAuthenticated, navigate]);

function PasswordChecker(event) {
const lower = new RegExp('(?=.*[a-z])');
Expand Down Expand Up @@ -71,8 +70,8 @@ function Signup() {
console.log("ENV FILE", process.env.REACT_APP_BASE_URL);

if (lowerValidated && upperValidated && numberValidated && specialValidated && lengthValidated) {
const apiUrl = formData.accountType === "User"
? `${process.env.REACT_APP_BASE_URL}/studentSignup`
const apiUrl = formData.accountType === "User"
? `${process.env.REACT_APP_BASE_URL}/studentSignup`
: `${process.env.REACT_APP_BASE_URL}/canteenSignup`;

try {
Expand All @@ -83,8 +82,8 @@ function Signup() {
toast.success("Account Created Successfully!");
if (formData.accountType === "User") {
navigate("/");
}
if(formData.accountType === "Canteen") {
}
if (formData.accountType === "Canteen") {
const token = response.data.token;
signUp(token);
navigate("/home");
Expand All @@ -102,8 +101,8 @@ function Signup() {
}

return (
<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 className="min-h-screen flex flex-col md:flex-row">
<div className="md:flex w-full md: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>
Expand All @@ -114,12 +113,15 @@ function Signup() {
<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">
<div className="flex flex-col justify-center items-center w-full md:w-1/2 py-10 bg-white">
<form
className="bg-white p-8 rounded shadow-lg w-full max-w-md overflow-y-auto"
onSubmit={submitHandler}
>
<h1 className="text-gray-800 font-bold text-2xl mb-1 text-center md:text-left">
Hello There!
</h1>
<p className="text-sm font-normal text-gray-600 mb-7">
<p className="text-sm font-normal text-gray-600 mb-7 text-center md:text-left">
Create an Account
</p>

Expand Down Expand Up @@ -185,8 +187,11 @@ function Signup() {
value={formData.password}
onChange={PasswordChecker}
/>
<span className="absolute right-3 top-3 cursor-pointer" onClick={() => setShowPassword((prev) => !prev)}>
{showPassword ? <AiOutlineEyeInvisible size={20} />: <AiOutlineEye size={20} /> }
<span
className="absolute right-3 top-3 cursor-pointer"
onClick={() => setShowPassword((prev) => !prev)}
>
{showPassword ? <AiOutlineEyeInvisible size={20} /> : <AiOutlineEye size={20} />}
</span>
</div>

Expand All @@ -204,86 +209,48 @@ function Signup() {
className="absolute right-3 top-1/2 transform -translate-y-1/2 cursor-pointer"
onClick={() => setShowConfirmPassword((prev) => !prev)}
>
{showConfirmPassword ? (
<AiOutlineEye size={20} />
) : (
<AiOutlineEyeInvisible size={20} />
)}
{showConfirmPassword ? <AiOutlineEyeInvisible size={20} /> : <AiOutlineEye size={20} />}
</span>
</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}
>
{loading ? "Loading..." : "Sign Up"}
</button>

<Link to="/login">
<span className="text-sm ml-2 hover:text-blue-500 cursor-pointer">
Already have an account? Login
</span>
</Link>

<main className='tracker-box text-sm font-normal text-red-600'>
<div className={lowerValidated ? 'validated text-green-600' : 'not-validated'}>
<span className='list-icon'>
<Icon icon={lowerValidated ? arrows_circle_check : arrows_exclamation} />
</span>
At least one lowercase letter
<div className="mb-4">
<div className={`flex items-center ${lowerValidated ? "text-green-600" : "text-red-500"}`}>
<span className="mr-2">{lowerValidated ? <Icon icon={arrows_circle_check} /> : <Icon icon={arrows_exclamation} />}</span>
<p className="text-xs">At least one lowercase letter</p>
</div>
<div className={upperValidated ? 'validated text-green-600' : 'not-validated'}>
<span className='list-icon'>
<Icon icon={upperValidated ? arrows_circle_check : arrows_exclamation} />
</span>
At least one uppercase letter
<div className={`flex items-center ${upperValidated ? "text-green-600" : "text-red-500"}`}>
<span className="mr-2">{upperValidated ? <Icon icon={arrows_circle_check} /> : <Icon icon={arrows_exclamation} />}</span>
<p className="text-xs">At least one uppercase letter</p>
</div>
<div className={numberValidated ? 'validated text-green-600' : 'not-validated'}>
<span className='list-icon'>
<Icon icon={numberValidated ? arrows_circle_check : arrows_exclamation} />
</span>
At least one number
<div className={`flex items-center ${numberValidated ? "text-green-600" : "text-red-500"}`}>
<span className="mr-2">{numberValidated ? <Icon icon={arrows_circle_check} /> : <Icon icon={arrows_exclamation} />}</span>
<p className="text-xs">At least one number</p>
</div>
<div className={specialValidated ? 'validated text-green-600' : 'not-validated'}>
<span className='list-icon'>
<Icon icon={specialValidated ? arrows_circle_check : arrows_exclamation} />
</span>
At least one special character
<div className={`flex items-center ${specialValidated ? "text-green-600" : "text-red-500"}`}>
<span className="mr-2">{specialValidated ? <Icon icon={arrows_circle_check} /> : <Icon icon={arrows_exclamation} />}</span>
<p className="text-xs">At least one special character</p>
</div>
<div className={lengthValidated ? 'validated text-green-600' : 'not-validated'}>
<span className='list-icon'>
<Icon icon={lengthValidated ? arrows_circle_check : arrows_exclamation} />
</span>
At least 8 characters
<div className={`flex items-center ${lengthValidated ? "text-green-600" : "text-red-500"}`}>
<span className="mr-2">{lengthValidated ? <Icon icon={arrows_circle_check} /> : <Icon icon={arrows_exclamation} />}</span>
<p className="text-xs">Minimum 8 characters</p>
</div>
</main>
</div>
<div className="flex justify-center">
<button
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 ${loading ? "opacity-50 cursor-not-allowed" : ""}`}
disabled={loading}
type="submit"
>
{loading ? "Signing up..." : "Sign Up"}
</button>
</div>
<div className="mt-4 text-center">
<Link to="/" className="text-gray-600 text-sm font-semibold hover:underline">
Already have an account? Log In
</Link>
</div>
</form>
</div>

<style jsx global>
{`
.tracker-box{
font-size: 0.7rem;
letter-spacing: 0.09em;
padding: 15px;
border-radius: 5px;
margin-top: 5px;
}
.tracker-box div{
margin: 5px 0;
}
.list-icon{
padding-right: 0.3rem;
}
.list-icon.green{
color: #006400;
}
`}
</style>
</div>
);
}
Expand Down

0 comments on commit 59492d1

Please sign in to comment.