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

Bi 12/login: Add validations, register route #45

Merged
merged 20 commits into from
May 9, 2024
Merged

Bi 12/login: Add validations, register route #45

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
53141d6
remove package lock
bacpactech Apr 11, 2024
9675489
Merge branch 'dev' of https://github.com/BacPacNet/web-app-client int…
ayushtiwari110 Apr 11, 2024
dbb88e5
Merge branch 'dev' into BI-12/login
ayushtiwari110 Apr 11, 2024
ff9deb8
BI-12/login: added login, signup forms
ayushtiwari110 Apr 12, 2024
f3aed10
BI-12/login: husky fix
ayushtiwari110 Apr 12, 2024
97fd96a
BI-12/login: build fix
ayushtiwari110 Apr 12, 2024
216d1fb
BI-12/login: prettier fix
ayushtiwari110 Apr 12, 2024
505737f
BI-12/login: storybook config fix
ayushtiwari110 Apr 12, 2024
7bd9753
BI-12/login: assets fix
ayushtiwari110 Apr 12, 2024
5e314bb
BI-12/login: ui changes
ayushtiwari110 Apr 12, 2024
7022c08
BI-12/login: refactor Footer logic
ayushtiwari110 Apr 13, 2024
a2ce83f
BI-12/login: ui fixes
ayushtiwari110 Apr 13, 2024
1fb3a2f
BI-12/login: storybook fixes
ayushtiwari110 Apr 13, 2024
dc4f166
BI-12/login: storybook fix
ayushtiwari110 Apr 13, 2024
c5dcf08
BI-12/login: storybook fix
ayushtiwari110 Apr 13, 2024
af92e99
BI-12/login: add navigation to login/signup
ayushtiwari110 Apr 18, 2024
c00cd7f
BI-12/login: add /register route
ayushtiwari110 Apr 18, 2024
3fc897d
BI-12/login: add validations
ayushtiwari110 Apr 18, 2024
0edb617
BI-12/login: add validations IN login
ayushtiwari110 Apr 18, 2024
e932655
Merge branch 'dev' into BI-12/login
ayushtiwari110 Apr 18, 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
303 changes: 58 additions & 245 deletions src/app/login/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,275 +5,88 @@ import { useForm, SubmitHandler } from 'react-hook-form'
import { useState } from 'react'
import { AiOutlineEye } from 'react-icons/ai'
import { AiOutlineEyeInvisible } from 'react-icons/ai'

import Link from 'next/link'
interface loginInputs {
email: string
password: string
rememberMe: boolean | string
}

interface signupInputs {
firstname: string
lastname: string
email: string
gender: string
birthday: any
country: string
city: string
password: string
confirmPassword: string
tnc: boolean | string
}

const Login = () => {
const [showPassword, setShowPassword] = useState(false)
const [showConfirmPassword, setShowConfirmPassword] = useState(false)
// display login or signup
const [display, setDisplay] = useState('login')
const {
register: registerLogin,
handleSubmit: handleSubmitLogin,
formState: { errors: loginErrors },
} = useForm<loginInputs>()
const {
register: registerSignup,
handleSubmit: handleSubmitSignup,
formState: { errors: signupErrors },
} = useForm<signupInputs>()
const onLoginSubmit: SubmitHandler<loginInputs> = (data) => console.log(data)
const onSignupSubmit: SubmitHandler<signupInputs> = (data) => {
console.log(data)
console.log('signup errors', signupErrors)
}

return (
<main>
<div className="flex flex-col justify-center items-center bg-violet-100">
{/* LOGIN COMPONENT */}
{display === 'login' && (
<div className="my-16 bg-white flex flex-col justify-center px-6 py-8 rounded-xl lg:min-w-[500px] mx-4">
<div className="self-center">
<img src="/unibuzzLogo.png" alt="uniBuzz Logo" />
</div>
<h1 className="text-2xl font-extrabold py-6 text-center">Login to your account</h1>
<form onSubmit={handleSubmitLogin(onLoginSubmit)} className="flex flex-col font-medium">
<label htmlFor="email" className="py-1">
Email Address
</label>
<input
{...registerLogin('email', { required: true })}
placeholder="Email Address"
className=" border pl-6 py-2 text-md rounded-lg border-gray-light font-normal"
/>
{loginErrors.email && <span className="text-red-500 font-normal">Please enter your email!</span>}
<label htmlFor="password" className="py-1 mt-5">
Password
</label>
{/* include validation with required or other standard HTML validation rules */}
<div className="relative">
<input
{...registerLogin('password', { required: true })}
placeholder="Password"
className=" border pl-6 py-2 text-md rounded-lg border-gray-light font-normal w-full"
type={showPassword ? 'text' : 'password'}
/>
<div className="absolute inset-y-0 right-0 pr-3 flex items-center text-sm leading-5">
{showPassword ? (
<AiOutlineEyeInvisible className="h-5 w-5 text-gray-700 cursor-pointer" onClick={() => setShowPassword(!showPassword)} />
) : (
<AiOutlineEye className="h-5 w-5 text-gray-700 cursor-pointer" onClick={() => setShowPassword(!showPassword)} />
)}
</div>
</div>
{/* errors will return when field validation fails */}
{loginErrors.password && <span className="text-red-500 font-normal">Please enter your password!</span>}
<p className="text-sm text-slate-600 font-normal px-2 my-4 cursor-pointer">Forgot Password?</p>
{/* checkbox for remember me */}
<div className="flex flex-row items-center mb-4 pl-2">
<div>
<input type="checkbox" {...registerLogin('rememberMe')} id="rememberMe" name="rememberMe" value="rememberMe" className="mr-2" />
</div>
<label htmlFor="rememberMe" className="text-sm font-normal">
Remember Me
</label>
</div>
<input type="submit" value="Login" className="bg-primary py-2 rounded-xl text-white text-lg font-normal mb-5" />
<p className="text-md text-center text-gray font-medium px-2">
Don&apos;t have an account?{' '}
<span
className="text-primary cursor-pointer"
onClick={() => {
setDisplay('signup')
}}
>
Sign Up
</span>
</p>
</form>
<div className="my-16 bg-white flex flex-col justify-center px-6 py-8 rounded-xl lg:min-w-[500px] mx-4">
<div className="self-center">
<img src="/unibuzzLogo.png" alt="uniBuzz Logo" />
</div>
)}
{/* SIGNUP COMPONENT */}
{display === 'signup' && (
<div className="my-16 bg-white flex flex-col justify-center px-6 py-8 rounded-xl lg:min-w-[500px] mx-4 sm:mx-32">
<div className="mb-8">
<img src="/unibuzzLogo.png" alt="uniBuzz Logo" />
</div>
<h1 className="text-2xl font-extrabold mb-1">Sign Up</h1>
<p>Start your journey with us by creating an account!</p>
<form onSubmit={handleSubmitSignup(onSignupSubmit)} className="flex flex-col font-medium">
<label htmlFor="firstname" className="py-1 mt-5">
First Name
</label>
<input
{...registerSignup('firstname', { required: true })}
placeholder="First Name"
className=" border pl-3 py-2 text-md rounded-lg border-gray-light font-normal"
/>
{signupErrors.firstname && <span className="text-red-500 font-normal">Please enter your first name!</span>}
<label htmlFor="lastname" className="py-1 mt-5">
Last Name
</label>
<h1 className="text-2xl font-extrabold py-6 text-center">Login to your account</h1>
<form onSubmit={handleSubmitLogin(onLoginSubmit)} className="flex flex-col font-medium">
<label htmlFor="email" className="py-1">
Email Address
</label>
<input
{...registerLogin('email', {
required: true,
pattern: {
value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
message: 'Please enter a valid email address',
},
})}
placeholder="Email Address"
className=" border pl-6 py-2 text-md rounded-lg border-gray-light font-normal"
/>
{loginErrors.email && (
<span className="text-red-500 font-normal">{loginErrors.email.message ? loginErrors.email.message : 'Please enter your email!'}</span>
)}
<label htmlFor="password" className="py-1 mt-5">
Password
</label>
{/* include validation with required or other standard HTML validation rules */}
<div className="relative">
<input
{...registerSignup('lastname')}
placeholder="Last Name"
className=" border pl-3 py-2 text-md rounded-lg border-gray-light font-normal"
{...registerLogin('password', { required: true })}
placeholder="Password"
className=" border pl-6 py-2 text-md rounded-lg border-gray-light font-normal w-full"
type={showPassword ? 'text' : 'password'}
/>

<label htmlFor="email" className="py-1 mt-5">
Email Address
</label>
<input
{...registerSignup('email', { required: true })}
placeholder="Email Address"
className=" border pl-3 py-2 text-md rounded-lg border-gray-light font-normal"
/>
{signupErrors.email && <span className="text-red-500 font-normal">Please enter your email!</span>}
<label htmlFor="gender" className="py-1 mt-5">
Gender
</label>
{/* TODO: make it a dropdown */}
<input
{...registerSignup('gender')}
placeholder="Gender"
className=" border pl-3 py-2 text-md rounded-lg border-gray-light font-normal"
/>
<label htmlFor="birthday" className="py-1 mt-5">
Birthday
</label>
<input
type="date"
{...registerSignup('birthday')}
placeholder="Email Address"
className=" border px-3 py-2 text-md rounded-lg border-gray-light font-normal text-gray"
/>
<label htmlFor="country" className="py-1 mt-5">
Country
</label>
<input
{...registerSignup('country')}
placeholder="Country"
className=" border pl-3 py-2 text-md rounded-lg border-gray-light font-normal"
/>
<label htmlFor="city" className="py-1 mt-5">
City
</label>
<input {...registerSignup('city')} placeholder="City" className=" border pl-3 py-2 text-md rounded-lg border-gray-light font-normal" />
<label htmlFor="password" className="py-1 mt-5">
Password
</label>
{/* include validation with required or other standard HTML validation rules */}
<div className="relative">
<input
{...registerSignup('password', { required: true })}
placeholder="Password"
className=" border pl-3 py-2 text-md rounded-lg border-gray-light font-normal w-full"
type={showPassword ? 'text' : 'password'}
/>
<div className="absolute inset-y-0 right-0 pr-3 flex items-center text-sm leading-5">
{showPassword ? (
<AiOutlineEyeInvisible className="h-5 w-5 text-gray-700 cursor-pointer" onClick={() => setShowPassword(!showPassword)} />
) : (
<AiOutlineEye className="h-5 w-5 text-gray-700 cursor-pointer" onClick={() => setShowPassword(!showPassword)} />
)}
</div>
<div className="absolute inset-y-0 right-0 pr-3 flex items-center text-sm leading-5">
{showPassword ? (
<AiOutlineEyeInvisible className="h-5 w-5 text-gray-700 cursor-pointer" onClick={() => setShowPassword(!showPassword)} />
) : (
<AiOutlineEye className="h-5 w-5 text-gray-700 cursor-pointer" onClick={() => setShowPassword(!showPassword)} />
)}
</div>
<label htmlFor="confirm password" className="py-1 mt-5">
Confirm Password
</label>
<div className="relative">
<input
{...registerSignup('confirmPassword', { required: true })}
placeholder="Password"
className=" border pl-3 py-2 text-md rounded-lg border-gray-light font-normal w-full"
type={showConfirmPassword ? 'text' : 'password'}
/>
<div className="absolute inset-y-0 right-0 pr-3 flex items-center text-sm leading-5">
{showConfirmPassword ? (
<AiOutlineEyeInvisible
className="h-5 w-5 text-gray-700 cursor-pointer"
onClick={() => setShowConfirmPassword(!showConfirmPassword)}
/>
) : (
<AiOutlineEye className="h-5 w-5 text-gray-700 cursor-pointer" onClick={() => setShowConfirmPassword(!showConfirmPassword)} />
)}
</div>
</div>
{/* errors will return when field validation fails */}
{signupErrors.password && <span className="text-red-500 font-normal">Please enter your password!</span>}
<label htmlFor="tnc" className="my-5 font-normal">
Terms & Conditions
</label>
<div className="lg:max-w-lg md:max-w-md sm:max-w-sm h-40 overflow-auto p-2 font-normal text-sm border border-primary">
<p>
Welcome to UniBuzz, a [brief description of your product/service]. These Terms and Conditions (&quot;Terms&quot;) govern your access
to and use of UniBuzz Network Pvt Ltd (hereon referred to as UniBuzz Networks) website, mobile application, and related services
(collectively, the &quot;Service&quot;). By accessing or using the Service, you agree to be bound by these Terms, our Privacy
Policy, and any additional terms applicable to certain features of the Service, which are incorporated herein by reference. By
creating an account, accessing, or Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel modi et porro quo aut fugiat
reprehenderit quod, voluptate consequatur, voluptatum repellat quidem. Voluptatem, corporis mollitia laborum ab cumque quaerat
soluta! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, maxime sint inventore laudantium quos non libero unde.
Modi, necessitatibus. Debitis quisquam reprehenderit velit necessitatibus, maxime doloremque molestiae numquam accusamus ducimus.
</p>
</div>
{/* errors will return when field validation fails */}
{loginErrors.password && <span className="text-red-500 font-normal">Please enter your password!</span>}
<p className="text-sm text-slate-600 font-normal px-2 my-4 cursor-pointer">Forgot Password?</p>
{/* checkbox for remember me */}
<div className="flex flex-row items-center mb-4 pl-2">
<div>
<input type="checkbox" {...registerLogin('rememberMe')} id="rememberMe" name="rememberMe" value="true" className="mr-2" />
</div>
<label htmlFor="privacy policy" className="my-5 font-normal">
Privacy Policy
<label htmlFor="rememberMe" className="text-sm font-normal">
Remember Me
</label>
<div className="lg:max-w-lg md:max-w-md sm:max-w-sm h-40 overflow-auto p-2 font-normal text-sm border border-primary mb-5">
<p>
Welcome to UniBuzz, a [brief description of your product/service]. These Terms and Conditions (&quot;Terms&quot;) govern your access
to and use of UniBuzz Network Pvt Ltd (hereon referred to as UniBuzz Networks) website, mobile application, and related services
(collectively, the &quot;Service&quot;). By accessing or using the Service, you agree to be bound by these Terms, our Privacy
Policy, and any additional terms applicable to certain features of the Service, which are incorporated herein by reference. By
creating an account, accessing, or Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque, et, dolorem eaque, id enim
laboriosam architecto accusamus odit velit dolorum aut? Adipisci vel nisi libero! Beatae earum a illum modi?Lorem ipsum dolor sit
amet consectetur, adipisicing elit. Ea incidunt distinctio officia architecto. Officiis iure quia repudiandae culpa veniam non nemo
consequatur ut? Obcaecati, nisi. Soluta, maxime eligendi! Soluta, enim.
</p>
</div>
{/* checkbox for remember me */}
<div className="flex items-center mb-4 pl-2">
<div>
<input {...registerSignup('tnc')} type="checkbox" id="rememberMe" name="rememberMe" value="tnc" className="mr-2" />
</div>
<label htmlFor="tnc agree" className="text-md font-normal">
I have read and agree with the terms of service and privacy policy.
</label>
</div>
<input type="submit" value="Sign Up" className="bg-primary py-2 rounded-lg text-white text-lg font-normal mb-5" />
<p className="text-md text-center text-gray font-medium px-2">
Already a member?{' '}
<span
className="text-primary cursor-pointer"
onClick={() => {
setDisplay('login')
}}
>
Sign In
</span>
</p>
</form>
</div>
)}
</div>
<input type="submit" value="Login" className="bg-primary py-2 rounded-xl text-white text-lg font-normal mb-5" />
<p className="text-md text-center text-gray font-medium px-2">
Don&apos;t have an account?{' '}
<span className="text-primary cursor-pointer">
<Link href={'/register'}>Sign Up</Link>
</span>
</p>
</form>
</div>
</div>
<Footer />
</main>
Expand Down
Loading
Loading