AaronPo/the-biergarten-app
1
0
Fork 0
mirror of https://github.com/aaronpo97/the-biergarten-app.git synced 2026-02-16 10:42:08 +00:00
Code Issues Packages Projects 1 Releases Wiki Activity

Refactor login and register page designs

Browse Source
This commit is contained in:
Aaron William Po
2024-04-07 15:51:25 -04:00
parent ac89833a5d
commit b299ed946b
4 changed files with 55 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/components/RegisterUserForm.tsx
View File

@@ -44,13 +44,9 @@ const RegisterUserForm: FC = () => {
} }
}; };
return ( return (
<form <form className="form-control w-full" noValidate onSubmit={handleSubmit(onSubmit)}>
className="form-control w-full space-y-5" <div className="space-y-5">
noValidate <div className="flex flex-col lg:flex-row lg:space-x-5">
onSubmit={handleSubmit(onSubmit)}
>
<div>
<div className="flex flex-col lg:flex-row lg:space-x-3">
<div className="lg:w-[50%]"> <div className="lg:w-[50%]">
<FormInfo> <FormInfo>
<FormLabel htmlFor="firstName">First name</FormLabel> <FormLabel htmlFor="firstName">First name</FormLabel>
@@ -63,7 +59,7 @@ const RegisterUserForm: FC = () => {
type="text" type="text"
formValidationSchema={register('firstName')} formValidationSchema={register('firstName')}
error={!!errors.firstName} error={!!errors.firstName}
placeholder="first name" placeholder="John"
/> />
</FormSegment> </FormSegment>
</div> </div>
@@ -80,13 +76,13 @@ const RegisterUserForm: FC = () => {
type="text" type="text"
formValidationSchema={register('lastName')} formValidationSchema={register('lastName')}
error={!!errors.lastName} error={!!errors.lastName}
placeholder="last name" placeholder="Doe"
/> />
</FormSegment> </FormSegment>
</div> </div>
</div> </div>
<div className="flex flex-col lg:flex-row lg:space-x-3"> <div className="flex flex-col lg:flex-row lg:space-x-5">
<div className="lg:w-[50%]"> <div className="lg:w-[50%]">
<FormInfo> <FormInfo>
<FormLabel htmlFor="email">email</FormLabel> <FormLabel htmlFor="email">email</FormLabel>
@@ -99,7 +95,7 @@ const RegisterUserForm: FC = () => {
type="email" type="email"
formValidationSchema={register('email')} formValidationSchema={register('email')}
error={!!errors.email} error={!!errors.email}
placeholder="email" placeholder="john.doe@example.com"
/> />
</FormSegment> </FormSegment>
</div> </div>
@@ -115,13 +111,13 @@ const RegisterUserForm: FC = () => {
type="text" type="text"
formValidationSchema={register('username')} formValidationSchema={register('username')}
error={!!errors.username} error={!!errors.username}
placeholder="username" placeholder="johndoe"
/> />
</FormSegment> </FormSegment>
</div> </div>
</div> </div>
<div className="flex flex-col lg:flex-row lg:space-x-3"> <div className="flex flex-col lg:flex-row lg:space-x-5">
<div className="lg:w-[50%]"> <div className="lg:w-[50%]">
<FormInfo> <FormInfo>
<FormLabel htmlFor="password">password</FormLabel> <FormLabel htmlFor="password">password</FormLabel>
@@ -155,26 +151,28 @@ const RegisterUserForm: FC = () => {
</FormSegment> </FormSegment>
</div> </div>
</div> </div>
<FormInfo> <div>
<FormLabel htmlFor="dateOfBirth">Date of birth</FormLabel> <FormInfo>
<FormError>{errors.dateOfBirth?.message}</FormError> <FormLabel htmlFor="dateOfBirth">Date of birth</FormLabel>
</FormInfo> <FormError>{errors.dateOfBirth?.message}</FormError>
<FormSegment> </FormInfo>
<FormTextInput <FormSegment>
id="dateOfBirth" <FormTextInput
disabled={formState.isSubmitting} id="dateOfBirth"
type="date" disabled={formState.isSubmitting}
formValidationSchema={register('dateOfBirth')} type="date"
error={!!errors.dateOfBirth} formValidationSchema={register('dateOfBirth')}
placeholder="date of birth" error={!!errors.dateOfBirth}
/> placeholder="date of birth"
</FormSegment> />
<div className="mt-6 w-full"> </FormSegment>
<Button type="submit" isSubmitting={formState.isSubmitting}>
Register User
</Button>
</div> </div>
</div> </div>
<div className="mt-10">
<Button type="submit" isSubmitting={formState.isSubmitting}>
Register User
</Button>
</div>
</form> </form>
); );
}; };

4
src/pages/index.tsx
View File

@@ -49,8 +49,8 @@ const Home: NextPage = () => {
className="pointer-events-none absolute h-full w-full object-cover mix-blend-overlay" className="pointer-events-none absolute h-full w-full object-cover mix-blend-overlay"
/> />
<div className="relative flex w-9/12 flex-col space-y-3 text-base-content"> <div className="relative flex w-9/12 flex-col space-y-3 text-base-content">
<h1 className="text-8xl font-extrabold">The Biergarten App</h1> <h1 className="text-5xl font-extrabold lg:text-8xl">The Biergarten App</h1>
<p className="text-3xl font-bold">{description}</p> <p className="font-bold lg:text-3xl">{description}</p>
</div> </div>
</div> </div>
</> </>

2
src/pages/login/index.tsx
View File

@@ -28,7 +28,7 @@ const LoginPage: NextPage = () => {
/> />
<div className="relative flex w-9/12 flex-col items-center text-center text-base-content lg:w-6/12"> <div className="relative flex w-9/12 flex-col items-center text-center text-base-content lg:w-6/12">
<div className="flex w-full flex-col items-center space-y-2 text-center"> <div className="mb-8 flex w-full flex-col items-center space-y-2 text-center">
<FaUserCircle className="text-6xl text-primary-content" /> <FaUserCircle className="text-6xl text-primary-content" />
<h1 className="text-6xl font-extrabold">Login</h1> <h1 className="text-6xl font-extrabold">Login</h1>
</div> </div>

33
src/pages/register/index.tsx
View File

@@ -1,10 +1,11 @@
import RegisterUserForm from '@/components/RegisterUserForm'; import RegisterUserForm from '@/components/RegisterUserForm';
import FormPageLayout from '@/components/ui/forms/FormPageLayout';
import useRedirectWhenLoggedIn from '@/hooks/auth/useRedirectIfLoggedIn'; import useRedirectWhenLoggedIn from '@/hooks/auth/useRedirectIfLoggedIn';
import { NextPage } from 'next'; import { NextPage } from 'next';
import { CldImage } from 'next-cloudinary';
import Head from 'next/head'; import Head from 'next/head';
import { BiUser } from 'react-icons/bi';
import { FaUserCircle } from 'react-icons/fa';
const RegisterUserPage: NextPage = () => { const RegisterUserPage: NextPage = () => {
useRedirectWhenLoggedIn(); useRedirectWhenLoggedIn();
@@ -15,14 +16,26 @@ const RegisterUserPage: NextPage = () => {
<title>Register User</title> <title>Register User</title>
<meta name="description" content="Register a new user" /> <meta name="description" content="Register a new user" />
</Head> </Head>
<FormPageLayout
headingText="Register User" <div className="relative flex min-h-dvh w-full flex-col items-center justify-center bg-base-300">
headingIcon={BiUser} <CldImage
backLink="/" src="https://res.cloudinary.com/dxie9b7na/image/upload/v1701056793/cloudinary-images/pexels-elevate-1267700_jrno3s.jpg"
backLinkText="Back to home" alt="Login Image"
> width={5000}
<RegisterUserForm /> height={5000}
</FormPageLayout> className="pointer-events-none absolute h-full w-full object-cover mix-blend-overlay"
/>
<div className="relative flex w-10/12 flex-col items-center pb-20 text-center text-base-content lg:w-6/12">
<div className="mb-8 mt-20 flex w-full flex-col items-center space-y-2 text-center">
<FaUserCircle className="text-6xl text-primary-content" />
<h1 className="text-6xl font-extrabold">Register</h1>
</div>
<div className="w-full">
<RegisterUserForm />
</div>
</div>
</div>
</> </>
); );
}; };