diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx index b9d16874..d6bae62a 100644 --- a/src/app/login/page.tsx +++ b/src/app/login/page.tsx @@ -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() - const { - register: registerSignup, - handleSubmit: handleSubmitSignup, - formState: { errors: signupErrors }, - } = useForm() const onLoginSubmit: SubmitHandler = (data) => console.log(data) - const onSignupSubmit: SubmitHandler = (data) => { - console.log(data) - console.log('signup errors', signupErrors) - } return (
- {/* LOGIN COMPONENT */} - {display === 'login' && ( -
-
- uniBuzz Logo -
-

Login to your account

-
- - - {loginErrors.email && Please enter your email!} - - {/* include validation with required or other standard HTML validation rules */} -
- -
- {showPassword ? ( - setShowPassword(!showPassword)} /> - ) : ( - setShowPassword(!showPassword)} /> - )} -
-
- {/* errors will return when field validation fails */} - {loginErrors.password && Please enter your password!} -

Forgot Password?

- {/* checkbox for remember me */} -
-
- -
- -
- -

- Don't have an account?{' '} - { - setDisplay('signup') - }} - > - Sign Up - -

-
+
+
+ uniBuzz Logo
- )} - {/* SIGNUP COMPONENT */} - {display === 'signup' && ( -
-
- uniBuzz Logo -
-

Sign Up

-

Start your journey with us by creating an account!

-
- - - {signupErrors.firstname && Please enter your first name!} - +

Login to your account

+ + + + {loginErrors.email && ( + {loginErrors.email.message ? loginErrors.email.message : 'Please enter your email!'} + )} + + {/* include validation with required or other standard HTML validation rules */} +
- - - - {signupErrors.email && Please enter your email!} - - {/* TODO: make it a dropdown */} - - - - - - - - - {/* include validation with required or other standard HTML validation rules */} -
- -
- {showPassword ? ( - setShowPassword(!showPassword)} /> - ) : ( - setShowPassword(!showPassword)} /> - )} -
+
+ {showPassword ? ( + setShowPassword(!showPassword)} /> + ) : ( + setShowPassword(!showPassword)} /> + )}
- -
- -
- {showConfirmPassword ? ( - setShowConfirmPassword(!showConfirmPassword)} - /> - ) : ( - setShowConfirmPassword(!showConfirmPassword)} /> - )} -
-
- {/* errors will return when field validation fails */} - {signupErrors.password && Please enter your password!} - -
-

- Welcome to UniBuzz, a [brief description of your product/service]. These Terms and Conditions ("Terms") 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 "Service"). 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. -

+
+ {/* errors will return when field validation fails */} + {loginErrors.password && Please enter your password!} +

Forgot Password?

+ {/* checkbox for remember me */} +
+
+
-
- )} +
+ +

+ Don't have an account?{' '} + + Sign Up + +

+ +
diff --git a/src/app/register/page.tsx b/src/app/register/page.tsx new file mode 100644 index 00000000..04e71ac7 --- /dev/null +++ b/src/app/register/page.tsx @@ -0,0 +1,243 @@ +/* eslint-disable @next/next/no-img-element */ +'use client' +import Footer from '@components/Footer/Footer' +import Link from 'next/link' +import { useForm, SubmitHandler } from 'react-hook-form' +import { useState } from 'react' +import { AiOutlineEye } from 'react-icons/ai' +import { AiOutlineEyeInvisible } from 'react-icons/ai' + +interface signupInputs { + firstname: string + lastname: string + email: string + gender: string + birthday: any + country: string + city: string + password: string + confirmPassword: string + tnc: boolean | string +} + +const SignUp = () => { + const [showPassword, setShowPassword] = useState(false) + const [showConfirmPassword, setShowConfirmPassword] = useState(false) + const { + register: registerSignup, + handleSubmit: handleSubmitSignup, + formState: { errors: signupErrors }, + watch, + } = useForm() + + // Get the current values of password and confirmPassword + const password = watch('password') + + const onSignupSubmit: SubmitHandler = (data) => { + console.log(data) + console.log('signup errors', signupErrors) + } + + return ( +
+
+
+
+ uniBuzz Logo +
+

Sign Up

+

Start your journey with us by creating an account!

+
+ + + {signupErrors.firstname && Please enter your first name!} + + + {signupErrors.lastname && Please enter your last name!} + + + {signupErrors.email && ( + {signupErrors.email.message ? signupErrors.email.message : 'Please enter your email!'} + )} + + {/* TODO: make it a dropdown */} + + {signupErrors.gender && Please enter your Gender!} + + + {signupErrors.birthday && Please enter your birth date!} + + + {signupErrors.country && Please enter your Country!} + + + {signupErrors.firstname && Please enter your City!} + +
+ +
+ {showPassword ? ( + setShowPassword(!showPassword)} /> + ) : ( + setShowPassword(!showPassword)} /> + )} +
+
+ {signupErrors.password && ( +
+ + {signupErrors.password.message ? signupErrors.password.message : 'Please enter your password!'} + +
+ )} + +
+ value === password || 'Passwords do not match', + })} + placeholder="Password" + className=" border pl-3 py-2 text-md rounded-lg border-gray-light font-normal w-full" + type={showConfirmPassword ? 'text' : 'password'} + /> +
+ {showConfirmPassword ? ( + setShowConfirmPassword(!showConfirmPassword)} + /> + ) : ( + setShowConfirmPassword(!showConfirmPassword)} /> + )} +
+
+ {signupErrors.confirmPassword && {signupErrors.confirmPassword.message}} + + +
+

+ Welcome to UniBuzz, a [brief description of your product/service]. These Terms and Conditions ("Terms") 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 "Service"). 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. +

+
+ +
+

+ Welcome to UniBuzz, a [brief description of your product/service]. These Terms and Conditions ("Terms") 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 "Service"). 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. +

+
+ {/* checkbox for remember me */} +
+
+ +
+ +
+ {signupErrors.tnc && Required!} + +

+ Already a member?{' '} + + Sign In + +

+
+
+
+
+
+ ) +} + +export default SignUp diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx index 90223f79..067ef27d 100644 --- a/src/components/Navbar/Navbar.tsx +++ b/src/components/Navbar/Navbar.tsx @@ -94,16 +94,24 @@ const Navbar: React.FC = () => { <>
- - + +
) : null}
{ <>
- - + +