Skip to content

Commit

Permalink
Merge pull request #363 from kesharwaniyanshi/register/login
Browse files Browse the repository at this point in the history 
Register/login page has been created
  • Loading branch information
@abhay-raj19
abhay-raj19 authored Jun 28, 2024
2 parents 58fdd0b + b4da70d commit deea605
Show file tree
Hide file tree
Showing 7 changed files with 441 additions and 5 deletions.
8 changes: 7 additions & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Binary file added public/image.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 11 additions & 0 deletions src/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,14 @@ import BackToTop from "./components/UI/BackToTop";
import LocomotiveScroll from 'locomotive-scroll';
import Classes from "./components/UI/Classes";
import Diet from "./components/UI/Diet";

import Register from "./components/UI/Register";
import Login from "./components/UI/Login";

import PrivacyPolicy from "./components/UI/privacypolicy";
import Licensing from "./components/UI/Licensing";
import TermsAndConditions from "./components/UI/termsandconditions";

import { BrowserRouter as Router , Routes, Route } from "react-router-dom";
import Error from "./components/UI/Error";

Expand Down Expand Up @@ -51,10 +56,16 @@ function App() {
</div>} />
<Route path="/classes" element={<Classes />} />
<Route path="/diet" element={<Diet />} />

<Route path="/register" element={<Register />} />
<Route path="/login" element={<Login />} />

<Route path="/privacypolicy" element={<PrivacyPolicy />} />
<Route path="/licensing" element={<Licensing />} />
<Route path="/termsandconditions" element={<TermsAndConditions />} />

<Route path="*" element={<Error />} />

</Routes>
</Router>
</>
Expand Down
7 changes: 3 additions & 4 deletions src/components/Header/Header.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import logo from "../../assets/img/dumble.png";
import { useEffect, useState } from "react";
import gsap from "gsap";
import { useGSAP } from "@gsap/react";
import { Link } from "react-router-dom";
gsap.registerPlugin(useGSAP);

const nav__links = [
Expand Down Expand Up @@ -160,10 +161,8 @@ const Header = ({ isDarkMode, setDarkMode }) => {
{/* Nav Right */}

<div className="nav_right">
<button className="register_btn">Register</button>
{/* <span className="mobile__menu">
<i className="ri-menu-line"></i>
</span> */}
<button className="register_btn" ><Link to="/register">Register</Link></button>
<button className="register_btn" ><Link to="/login">Login</Link></button>
</div>
</div>
</div>
Expand Down
103 changes: 103 additions & 0 deletions src/components/UI/Login.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
import React, { useState } from "react";
import toast, { Toaster } from "react-hot-toast";
import "../../styles/register.css";
import Lottie from "lottie-react";
import ContactAnimation from "../../assets/JSON/contactus.json";

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

const validateForm = () => {
if (formData.email === "" || formData.email === null) {
toast.error("Please enter your email");
return false;
} else if (!isValidEmail(formData.email)) {
toast.error("Please enter a valid email");
return false;
} else if (formData.password === "" || formData.password === null) {
toast.error("Please enter a password");
return false;
} else if (!isValidPassword(formData.password)) {
toast.error("Please enter a valid password");
return false;
} else {
return true;
}
};

const isValidEmail = (email) => {
const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
return emailPattern.test(email);
};

const isValidPassword = (password) => {
const passwordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/;
return passwordPattern.test(password);
};

const handleSubmit = (e) => {
e.preventDefault();
if (validateForm()) {
toast.success("Logged-in successfully", {
duration: 3000, // Duration in milliseconds (3 seconds)
position: "top-center",
}
);
console.log("Form data:", formData);
setFormData(initialFormData);
}
};

const handleInputChange = (e) => {
const { name, value } = e.target;
setFormData({ ...formData, [name]: value });
};

return (
<section id="contact-us" className="form">
<Toaster />
<div className="w-full form grid justify-center items-center">
<div className="register-img">
<img src="./image.png" width={500}></img>
</div>
<div className="contact-form-container">
<h1 className="heading text-center">Login</h1>
<form onSubmit={handleSubmit} className="contact-form">
<div className="input-group">
<input
type="email"
placeholder="Email"
name="email"
value={formData.email}
onChange={handleInputChange}
/>
</div>
<div className="input-group">
<input
type="password"
placeholder="Password"
name="password"
value={formData.password}
onChange={handleInputChange}
/>
</div>
<div className="text-end">
<button className="submit" type="submit">
Login
</button>
</div>
<div>
<a href="/register">New user ? <span style={{fontWeight:900}}>Register Here.</span> </a>
</div>
</form>
</div>
</div>
</section>
);
};

export default Login;
161 changes: 161 additions & 0 deletions src/components/UI/Register.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,161 @@
import React, { useState } from "react";
import toast, { Toaster } from "react-hot-toast";
import "../../styles/register.css";


const Register = () => {
const initialFormData = {
name: "",
email: "",
age: "",
contact: "",
panNumber: "",
password: "",
};
const [formData, setFormData] = useState(initialFormData);

const validateForm = () => {
if (formData.name === "" || formData.name === null) {
toast.error("Please enter your name");
return false;
} else if (formData.email === "" || formData.email === null) {
toast.error("Please enter your email");
return false;
} else if (!isValidEmail(formData.email)) {
toast.error("Please enter a valid email");
return false;
} else if (formData.age === "" || formData.age === null) {
toast.error("Please provide your age");
return false;
} else if (formData.contact === "" || formData.contact === null) {
toast.error("Please provide your phone number");
return false;
} else if (isNaN(formData.contact)) {
toast.error("Please enter a valid phone number");
return false;
}
else if (formData.panNumber === "" || formData.panNumber === null) {
toast.error("Please provide your PAN number");
return false;
} else if (formData.password === "" || formData.password === null) {
toast.error("Please enter a password");
return false;
} else if (!isValidPassword(formData.password)) {
toast.error("Please enter a valid password");
return false;
} else {
return true;
}
};

const isValidEmail = (email) => {
const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
return emailPattern.test(email);
};

const isValidPassword = (password) => {
const passwordPattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/;
return passwordPattern.test(password);
};

const handleSubmit = (e) => {
e.preventDefault();
if (validateForm()) {
toast.success("Registered successfully", {
duration: 3000, // Duration in milliseconds (3 seconds)
position: "top-center",
}
);
console.log("Form data:", formData);
setFormData(initialFormData);
}
};

const handleInputChange = (e) => {
const { name, value } = e.target;
setFormData({ ...formData, [name]: value });
};

return (
<section id="contact-us" className="form">
<Toaster />
<div className="w-full form grid justify-center items-center">
{/* <div className="contact-animation">
<Lottie animationData={ContactAnimation} />
</div> */}
<div className="register-img">
<img src="./image.png" width={500} ></img>
</div>
<div className="contact-form-container">
<h1 className="heading text-center">Register</h1>
<form onSubmit={handleSubmit} className="contact-form">
<div className="input-group">
<input
type="text"
placeholder="Name"
name="name"
value={formData.name}
onChange={handleInputChange}
/>
</div>
<div className="input-group">
<input
type="email"
placeholder="Email"
name="email"
value={formData.email}
onChange={handleInputChange}
/>
</div>
<div className="input-group">
<input
type="number"
placeholder="Phone Number"
name="contact"
value={formData.contact}
onChange={handleInputChange}
/>
</div>
<div className="input-group">
<input
type="number"
placeholder="Age"
name="age"
value={formData.age}
onChange={handleInputChange}
/>
</div>
<div className="input-group">
<input
type="text"
placeholder="PAN number"
name="panNumber"
value={formData.panNumber}
onChange={handleInputChange}
/>
</div>
<div className="input-group">
<input
type="password"
placeholder="Password"
name="password"
value={formData.password}
onChange={handleInputChange}
/>
</div>
<div className="text-end">
<button className="submit" type="submit">
Register
</button>
</div>
</form>
<div>
<a href="/login">Already have an account? <span style={{fontWeight:900}}>Login Here.</span> </a>
</div>
</div>
</div>
</section>
);
};

export default Register;
Loading

0 comments on commit deea605

Please sign in to comment.