From 04ac51b74d4ecd97917eca73a100d13ba1cb5e55 Mon Sep 17 00:00:00 2001 From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com> Date: Sat, 8 Jun 2024 10:21:17 -0400 Subject: [PATCH 01/42] feat (#273): import and apply LinkCustom component --- app/register/page.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/app/register/page.tsx b/app/register/page.tsx index 07cb3536..12c72c18 100644 --- a/app/register/page.tsx +++ b/app/register/page.tsx @@ -11,6 +11,7 @@ import { registerAccount } from '@/api/apiFunctions'; import logo from '/public/assets/logo-colored-outline.svg'; import { useAuthContext } from '@/context/AuthContextProvider'; +import LinkCustom from '@/components/LinkCustom/LinkCustom'; export default function Register() { const router = useRouter(); @@ -83,9 +84,9 @@ export default function Register() {

If you have an existing account{' '} - + Login! - +

- + Login to get started playing - + From fa8eb8bee9dfdab9fce592b46ec67135b9731587 Mon Sep 17 00:00:00 2001 From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com> Date: Sat, 8 Jun 2024 13:07:54 -0400 Subject: [PATCH 02/42] feat (#273): update --- app/register/page.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/app/register/page.tsx b/app/register/page.tsx index 12c72c18..8ffb1f36 100644 --- a/app/register/page.tsx +++ b/app/register/page.tsx @@ -62,6 +62,10 @@ export default function Register() { } }, [isSignedIn]); + useEffect(() => { + document.title = 'Registration Page | GridIron Survivor'; + }, []); + return ( <div className="h-screen w-full"> <div className="grid h-screen w-full grid-cols-2 bg-gradient-to-b from-[#4E160E] to-zinc-950"> From 7c0363233a8a05210a21b06eb26a62d864a68e48 Mon Sep 17 00:00:00 2001 From: Chris Nowicki <102450568+chris-nowicki@users.noreply.github.com> Date: Mon, 10 Jun 2024 10:29:09 -0400 Subject: [PATCH 03/42] fix: register page.tsx to be a server component --- app/register/Register.tsx | 118 ++++++++++++++++++++++++++++++++++ app/register/page.tsx | 131 +++----------------------------------- 2 files changed, 126 insertions(+), 123 deletions(-) create mode 100644 app/register/Register.tsx diff --git a/app/register/Register.tsx b/app/register/Register.tsx new file mode 100644 index 00000000..42d2897f --- /dev/null +++ b/app/register/Register.tsx @@ -0,0 +1,118 @@ +'use client'; +import { useState, ChangeEvent, useEffect } from 'react'; +import Link from 'next/link'; +import { useRouter } from 'next/navigation'; + +import { Input } from '@/components/Input/Input'; +import Logo from '@/components/Logo/Logo'; +import { Button } from '@/components/Button/Button'; +import { registerAccount } from '@/api/apiFunctions'; + +import logo from '/public/assets/logo-colored-outline.svg'; + +import { useAuthContext } from '@/context/AuthContextProvider'; +import LinkCustom from '@/components/LinkCustom/LinkCustom'; + +export default function Register() { + const router = useRouter(); + const [email, setEmail] = useState<string>(''); + const [password, setPassword] = useState<string>(''); + const [confirmPassword, setConfirmPassword] = useState<string>(''); + const { loginAccount, isSignedIn } = useAuthContext(); + + const handleEmail = (event: ChangeEvent<HTMLInputElement>): void => { + setEmail(event.target.value); + }; + + const handlePassword = (event: ChangeEvent<HTMLInputElement>): void => { + setPassword(event.target.value); + }; + + const comparePasswords = (password: string, confirmPassword: string) => { + return password === confirmPassword; + }; + + const handleConfirmPassword = ( + event: ChangeEvent<HTMLInputElement>, + ): void => { + setConfirmPassword(event.target.value); + }; + + const handleDisabled = () => { + const passwordsMatch = comparePasswords(password, confirmPassword); + if (email && passwordsMatch === true && confirmPassword != '') { + return false; + } + return true; + }; + + const handleRegister = async () => { + try { + await registerAccount({ email, password }); + await loginAccount({ email, password }); + router.push('/weeklyPicks'); + } catch (error) { + console.error('Registration Failed', error); + } + }; + + useEffect(() => { + if (isSignedIn) { + router.push('/weeklyPicks'); + } + }, [isSignedIn]); + + return ( + <div className="h-screen w-full"> + <div className="grid h-screen w-full grid-cols-2 bg-gradient-to-b from-[#4E160E] to-zinc-950"> + <div className="grid p-8"> + <div className="grid"> + <Logo className="mx-auto place-self-end" src={logo} /> + </div> + <div className="mx-auto grid gap-4 place-self-end"> + <p className="leading-7 text-white"> + Thank you... fantasy football draft, for letting me know that even + in my fantasies, I am bad at sports. + </p> + <p className="leading-7 text-white">Jimmy Fallon</p> + </div> + </div> + <div className="grid place-content-center bg-white p-8"> + <div className="mx-auto grid w-80 place-content-center gap-4"> + <h1 className="text-5xl font-extrabold tracking-tight text-foreground"> + Register A New Account + </h1> + <p className="pb-4 font-normal leading-7 text-zinc-500"> + If you have an existing account{' '} + <LinkCustom href="/login">Login!</LinkCustom> + </p> + <Input + type="email" + value={email} + placeholder="Email" + onChange={handleEmail} + /> + <Input + type="password" + value={password} + placeholder="Password" + onChange={handlePassword} + /> + <Input + type="password" + value={confirmPassword} + placeholder="Confirm Password" + onChange={handleConfirmPassword} + /> + <Button + label="Register" + disabled={handleDisabled()} + onClick={handleRegister} + /> + <LinkCustom href="/login">Login to get started playing</LinkCustom> + </div> + </div> + </div> + </div> + ); +} diff --git a/app/register/page.tsx b/app/register/page.tsx index 8ffb1f36..64534405 100644 --- a/app/register/page.tsx +++ b/app/register/page.tsx @@ -1,126 +1,11 @@ -'use client'; -import { useState, ChangeEvent, useEffect } from 'react'; -import Link from 'next/link'; -import { useRouter } from 'next/navigation'; +import { Metadata } from 'next'; +import Register from './Register'; -import { Input } from '@/components/Input/Input'; -import Logo from '@/components/Logo/Logo'; -import { Button } from '@/components/Button/Button'; -import { registerAccount } from '@/api/apiFunctions'; +export const metadata: Metadata = { + title: '...', + description: '...', +}; -import logo from '/public/assets/logo-colored-outline.svg'; - -import { useAuthContext } from '@/context/AuthContextProvider'; -import LinkCustom from '@/components/LinkCustom/LinkCustom'; - -export default function Register() { - const router = useRouter(); - const [email, setEmail] = useState<string>(''); - const [password, setPassword] = useState<string>(''); - const [confirmPassword, setConfirmPassword] = useState<string>(''); - const { loginAccount, isSignedIn } = useAuthContext(); - - const handleEmail = (event: ChangeEvent<HTMLInputElement>): void => { - setEmail(event.target.value); - }; - - const handlePassword = (event: ChangeEvent<HTMLInputElement>): void => { - setPassword(event.target.value); - }; - - const comparePasswords = (password: string, confirmPassword: string) => { - return password === confirmPassword; - }; - - const handleConfirmPassword = ( - event: ChangeEvent<HTMLInputElement>, - ): void => { - setConfirmPassword(event.target.value); - }; - - const handleDisabled = () => { - const passwordsMatch = comparePasswords(password, confirmPassword); - if (email && passwordsMatch === true && confirmPassword != '') { - return false; - } - return true; - }; - - const handleRegister = async () => { - try { - await registerAccount({ email, password }); - await loginAccount({ email, password }); - router.push('/weeklyPicks'); - } catch (error) { - console.error('Registration Failed', error); - } - }; - - useEffect(() => { - if (isSignedIn) { - router.push('/weeklyPicks'); - } - }, [isSignedIn]); - - useEffect(() => { - document.title = 'Registration Page | GridIron Survivor'; - }, []); - - return ( - <div className="h-screen w-full"> - <div className="grid h-screen w-full grid-cols-2 bg-gradient-to-b from-[#4E160E] to-zinc-950"> - <div className="grid p-8"> - <div className="grid"> - <Logo className="mx-auto place-self-end" src={logo} /> - </div> - <div className="mx-auto grid gap-4 place-self-end"> - <p className="leading-7 text-white"> - Thank you... fantasy football draft, for letting me know that even - in my fantasies, I am bad at sports. - </p> - <p className="leading-7 text-white">Jimmy Fallon</p> - </div> - </div> - <div className="grid place-content-center bg-white p-8"> - <div className="mx-auto grid w-80 place-content-center gap-4"> - <h1 className="text-5xl font-extrabold tracking-tight text-foreground"> - Register A New Account - </h1> - <p className="pb-4 font-normal leading-7 text-zinc-500"> - If you have an existing account{' '} - <LinkCustom href="/login"> - Login! - </LinkCustom> - </p> - <Input - type="email" - value={email} - placeholder="Email" - onChange={handleEmail} - /> - <Input - type="password" - value={password} - placeholder="Password" - onChange={handlePassword} - /> - <Input - type="password" - value={confirmPassword} - placeholder="Confirm Password" - onChange={handleConfirmPassword} - /> - <Button - label="Register" - disabled={handleDisabled()} - onClick={handleRegister} - /> - <LinkCustom href="/login"> - Login to get started playing - </LinkCustom> - </div> - </div> - </div> - </div> - ); +export default async function RegisterPage() { + return <Register />; } From e006e55c03259f2808752290011f16358822309c Mon Sep 17 00:00:00 2001 From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com> Date: Mon, 10 Jun 2024 12:38:22 -0400 Subject: [PATCH 04/42] fix(#273): update title and description --- app/register/page.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/register/page.tsx b/app/register/page.tsx index 64534405..d1509feb 100644 --- a/app/register/page.tsx +++ b/app/register/page.tsx @@ -2,8 +2,8 @@ import { Metadata } from 'next'; import Register from './Register'; export const metadata: Metadata = { - title: '...', - description: '...', + title: 'Registration | Gridiron Survivor', + description: 'Fantasy Football Survivor Pool', }; export default async function RegisterPage() { From 7469dddb4ee3233d85a2c86ab07f5fc368117a94 Mon Sep 17 00:00:00 2001 From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com> Date: Fri, 5 Jul 2024 21:40:25 -0400 Subject: [PATCH 05/42] fix(#273): remove Link import --- app/register/Register.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/app/register/Register.tsx b/app/register/Register.tsx index 42d2897f..806513fd 100644 --- a/app/register/Register.tsx +++ b/app/register/Register.tsx @@ -1,6 +1,5 @@ 'use client'; import { useState, ChangeEvent, useEffect } from 'react'; -import Link from 'next/link'; import { useRouter } from 'next/navigation'; import { Input } from '@/components/Input/Input'; From 652a260ab5816008e1102a36c07431da306d9fc7 Mon Sep 17 00:00:00 2001 From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com> Date: Fri, 5 Jul 2024 23:12:33 -0400 Subject: [PATCH 06/42] fix(#273): add font-bold and text classes to LinkCustom --- components/LinkCustom/LinkCustom.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/LinkCustom/LinkCustom.tsx b/components/LinkCustom/LinkCustom.tsx index 6358b547..41bd8176 100644 --- a/components/LinkCustom/LinkCustom.tsx +++ b/components/LinkCustom/LinkCustom.tsx @@ -12,7 +12,7 @@ interface ILinkCustomProps { const LinkCustom = ({ children, href }: ILinkCustomProps) => { return ( <Link - className={'hover:text-orange-600 hover:underline'} + className={'font-bold text-orange-600 hover:text-orange-600 hover:underline'} data-testid="linkCustom" href={href} passHref From 8fba3a64421c6dc1559386c2c82964bf2a7e570d Mon Sep 17 00:00:00 2001 From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com> Date: Fri, 5 Jul 2024 23:47:30 -0400 Subject: [PATCH 07/42] fix(#273): update text of second Login link --- app/register/Register.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/app/register/Register.tsx b/app/register/Register.tsx index 806513fd..5c780aab 100644 --- a/app/register/Register.tsx +++ b/app/register/Register.tsx @@ -108,7 +108,10 @@ export default function Register() { disabled={handleDisabled()} onClick={handleRegister} /> - <LinkCustom href="/login">Login to get started playing</LinkCustom> + <p className="pb-4 font-normal leading-7 text-zinc-500"> + <LinkCustom href="/login">Login</LinkCustom> + {' '} to get started playing + </p> </div> </div> </div> From eb7a990508a7469c709ec31719094633bbb651e1 Mon Sep 17 00:00:00 2001 From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com> Date: Sun, 7 Jul 2024 10:44:54 -0400 Subject: [PATCH 08/42] fix(#273): add return type to RegisterPage function --- app/register/page.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/app/register/page.tsx b/app/register/page.tsx index 97bfb5aa..f1ae4169 100644 --- a/app/register/page.tsx +++ b/app/register/page.tsx @@ -1,6 +1,7 @@ // Copyright (c) Gridiron Survivor. // Licensed under the MIT License. +import { JSX} from 'react'; import { Metadata } from 'next'; import Register from './Register'; @@ -9,6 +10,8 @@ export const metadata: Metadata = { description: 'Fantasy Football Survivor Pool', }; -export default async function RegisterPage() { +const RegisterPage = (): JSX.Element => { return <Register />; -} +}; + +export default RegisterPage; From 9777134c1e98e0b736068b03cd5bdb1e658b06df Mon Sep 17 00:00:00 2001 From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com> Date: Sun, 7 Jul 2024 10:48:33 -0400 Subject: [PATCH 09/42] fix(#273): add JSDoc comment --- app/register/page.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/app/register/page.tsx b/app/register/page.tsx index f1ae4169..14342329 100644 --- a/app/register/page.tsx +++ b/app/register/page.tsx @@ -1,7 +1,7 @@ // Copyright (c) Gridiron Survivor. // Licensed under the MIT License. -import { JSX} from 'react'; +import { JSX } from 'react'; import { Metadata } from 'next'; import Register from './Register'; @@ -10,6 +10,10 @@ export const metadata: Metadata = { description: 'Fantasy Football Survivor Pool', }; +/** + * Renders the registartion page. + * @returns {JSX.Element} The rendered registration page. + */ const RegisterPage = (): JSX.Element => { return <Register />; }; From a1efcba56d646f43d67691e39e6f6242002f4b1c Mon Sep 17 00:00:00 2001 From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com> Date: Sun, 7 Jul 2024 19:36:19 -0400 Subject: [PATCH 10/42] fix(#273): remove the hard-coded data-testid --- app/register/Register.tsx | 14 ++++++++++++-- components/LinkCustom/LinkCustom.tsx | 4 ++-- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/app/register/Register.tsx b/app/register/Register.tsx index a28fd596..208735ae 100644 --- a/app/register/Register.tsx +++ b/app/register/Register.tsx @@ -134,7 +134,12 @@ const Register = (): JSX.Element => { </h1> <p className="pb-4 font-normal leading-7 text-zinc-500"> If you have an existing account{' '} - <LinkCustom href="/login">Login!</LinkCustom> + <LinkCustom + href="/login" + data-testid="login-link" + > + Login! + </LinkCustom> </p> <Form {...form}> @@ -214,7 +219,12 @@ const Register = (): JSX.Element => { disabled={isDisabled} /> <p className="pb-4 font-normal leading-7 text-zinc-500"> - <LinkCustom href="/login">Login</LinkCustom> + <LinkCustom + href="/login" + data-testid="login-link" + > + Login + </LinkCustom> {' '} to get started playing </p> diff --git a/components/LinkCustom/LinkCustom.tsx b/components/LinkCustom/LinkCustom.tsx index afb5be91..a524c872 100644 --- a/components/LinkCustom/LinkCustom.tsx +++ b/components/LinkCustom/LinkCustom.tsx @@ -16,13 +16,13 @@ interface ILinkCustomProps { * @param props.href - this is the URL you want the link to point to * @returns The custom link component */ -const LinkCustom = ({ children, href }: ILinkCustomProps): JSX.Element => { +const LinkCustom = ({ children, href, ... props }: ILinkCustomProps): JSX.Element => { return ( <Link className={'font-bold text-orange-600 hover:text-orange-600 hover:underline'} - data-testid="linkCustom" href={href} passHref + { ...props } > {children} </Link> From 4d33119262c000a29c8e5c2692998360a8ba7d1f Mon Sep 17 00:00:00 2001 From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com> Date: Wed, 10 Jul 2024 09:55:28 -0400 Subject: [PATCH 11/42] fix(#273): create label variants --- app/register/Register.tsx | 18 +++++++++++------ components/Label/Label.tsx | 40 +++++++++++++++++++++++++++++++++----- 2 files changed, 47 insertions(+), 11 deletions(-) diff --git a/app/register/Register.tsx b/app/register/Register.tsx index 208735ae..6310a2c3 100644 --- a/app/register/Register.tsx +++ b/app/register/Register.tsx @@ -11,6 +11,7 @@ import { registerAccount } from '@/api/apiFunctions'; import logo from '/public/assets/logo-colored-outline.svg'; import { useAuthContext } from '@/context/AuthContextProvider'; import LinkCustom from '@/components/LinkCustom/LinkCustom'; +import { Label } from '@/components/Label/Label'; import { z } from 'zod'; import { Control, useForm, useWatch, SubmitHandler } from 'react-hook-form'; import { zodResolver } from '@hookform/resolvers/zod'; @@ -154,12 +155,17 @@ const Register = (): JSX.Element => { render={({ field }) => ( <FormItem> <FormControl> - <Input - data-testid="email" - type="email" - placeholder="Email" - {...field} - /> + <Label htmlFor="email" data-testid="email-label"> + Email + <Input + id="email" + data-testid="email" + type="email" + placeholder="Email" + {...field} + /> + </Label> + </FormControl> {form.formState.errors.email && ( <FormMessage> diff --git a/components/Label/Label.tsx b/components/Label/Label.tsx index 840455a7..0d2ee2bc 100644 --- a/components/Label/Label.tsx +++ b/components/Label/Label.tsx @@ -8,21 +8,51 @@ import * as LabelPrimitive from '@radix-ui/react-label'; import { cva, type VariantProps } from 'class-variance-authority'; import { cn } from '../../utils/utils'; +// const labelVariants = cva( +// 'text-base font-normal leading-none text-zinc-50 cursor-pointer flex gap-2 items-center rounded-xl border-2 border-zinc-800 peer-aria-checked:border-orange-600 py-4 px-3 w-full peer-hover:bg-zinc-800 transition', +// ); + +// const Label = React.forwardRef< +// React.ElementRef<typeof LabelPrimitive.Root>, +// React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & +// VariantProps<typeof labelVariants> +// >(({ className, ...props }, ref) => ( +// <LabelPrimitive.Root +// ref={ref} +// className={cn(labelVariants(), className)} +// {...props} +// /> +// )); +// Label.displayName = LabelPrimitive.Root.displayName; + +// export { Label }; + const labelVariants = cva( - 'text-base font-normal leading-none text-zinc-50 cursor-pointer flex gap-2 items-center rounded-xl border-2 border-zinc-800 peer-aria-checked:border-orange-600 py-4 px-3 w-full peer-hover:bg-zinc-800 transition', + 'text-base font-normal leading-none gap-2 w-full transition', + { + variants: { + variant: { + weeklyPickButtonLabel: 'text-zinc-50 cursor-pointer rounded-xl items-center py-4 px-3 border-2 border-zinc-800 peer-aria-checked:border-orange-600 peer-hover:bg-zinc-800 flex', + inputLabel: 'text-zinc-900 cursor-text flex-col' + } + }, + defaultVariants: { + variant: 'inputLabel' + } + } ); const Label = React.forwardRef< React.ElementRef<typeof LabelPrimitive.Root>, - React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & - VariantProps<typeof labelVariants> ->(({ className, ...props }, ref) => ( + React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants> +>(({ className, variant, ...props }, ref) => ( <LabelPrimitive.Root ref={ref} - className={cn(labelVariants(), className)} + className={cn(labelVariants({ variant }), className)} {...props} /> )); Label.displayName = LabelPrimitive.Root.displayName; export { Label }; + From 2319374dfa10d82acdaa8db3a062fdf49ff4bfe2 Mon Sep 17 00:00:00 2001 From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com> Date: Wed, 10 Jul 2024 10:41:19 -0400 Subject: [PATCH 12/42] fix(#273): wrap input fields in Label component --- app/register/Register.tsx | 32 ++++++++++++++++++++------------ 1 file changed, 20 insertions(+), 12 deletions(-) diff --git a/app/register/Register.tsx b/app/register/Register.tsx index 6310a2c3..abe7435c 100644 --- a/app/register/Register.tsx +++ b/app/register/Register.tsx @@ -181,12 +181,16 @@ const Register = (): JSX.Element => { render={({ field }) => ( <FormItem> <FormControl> - <Input - data-testid="password" - type="password" - placeholder="Password" - {...field} - /> + <Label htmlFor="password" data-testid="password-label"> + Password + <Input + id="password" + data-testid="password" + type="password" + placeholder="Password" + {...field} + /> + </Label> </FormControl> {form.formState.errors.password && ( <FormMessage> @@ -202,12 +206,16 @@ const Register = (): JSX.Element => { render={({ field }) => ( <FormItem> <FormControl> - <Input - data-testid="confirm-password" - type="password" - placeholder="Confirm Password" - {...field} - /> + <Label htmlFor="confirm-password" data-testid="confirm-password-label"> + Confirm Password + <Input + id="confirm-password" + data-testid="confirm-password" + type="password" + placeholder="Confirm Password" + {...field} + /> + </Label> </FormControl> {form.formState.errors.confirmPassword && ( <FormMessage> From f0777a92042b04d8b854c0401497add35df7f9de Mon Sep 17 00:00:00 2001 From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com> Date: Wed, 10 Jul 2024 15:54:38 -0400 Subject: [PATCH 13/42] fix(#273): remove unused code --- components/Label/Label.tsx | 22 ++-------------------- 1 file changed, 2 insertions(+), 20 deletions(-) diff --git a/components/Label/Label.tsx b/components/Label/Label.tsx index 0d2ee2bc..133bfc1b 100644 --- a/components/Label/Label.tsx +++ b/components/Label/Label.tsx @@ -8,25 +8,6 @@ import * as LabelPrimitive from '@radix-ui/react-label'; import { cva, type VariantProps } from 'class-variance-authority'; import { cn } from '../../utils/utils'; -// const labelVariants = cva( -// 'text-base font-normal leading-none text-zinc-50 cursor-pointer flex gap-2 items-center rounded-xl border-2 border-zinc-800 peer-aria-checked:border-orange-600 py-4 px-3 w-full peer-hover:bg-zinc-800 transition', -// ); - -// const Label = React.forwardRef< -// React.ElementRef<typeof LabelPrimitive.Root>, -// React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & -// VariantProps<typeof labelVariants> -// >(({ className, ...props }, ref) => ( -// <LabelPrimitive.Root -// ref={ref} -// className={cn(labelVariants(), className)} -// {...props} -// /> -// )); -// Label.displayName = LabelPrimitive.Root.displayName; - -// export { Label }; - const labelVariants = cva( 'text-base font-normal leading-none gap-2 w-full transition', { @@ -44,7 +25,8 @@ const labelVariants = cva( const Label = React.forwardRef< React.ElementRef<typeof LabelPrimitive.Root>, - React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants> + React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & + VariantProps<typeof labelVariants> >(({ className, variant, ...props }, ref) => ( <LabelPrimitive.Root ref={ref} From 3b3929d69c2c097becf91203fd83451b3b862f5e Mon Sep 17 00:00:00 2001 From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com> Date: Tue, 16 Jul 2024 10:26:04 -0400 Subject: [PATCH 14/42] fix(#273): update data-testid in unit test for LinkCustom --- components/LinkCustom/LinkCustom.test.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/LinkCustom/LinkCustom.test.tsx b/components/LinkCustom/LinkCustom.test.tsx index 88686aa6..26173988 100644 --- a/components/LinkCustom/LinkCustom.test.tsx +++ b/components/LinkCustom/LinkCustom.test.tsx @@ -5,11 +5,11 @@ import LinkCustom from './LinkCustom'; describe('LinkCustom Component', () => { it('renders with default props', () => { render( - <LinkCustom children="Test link" href="https://example.com"></LinkCustom>, + <LinkCustom children="Test link" data-testid="testLink" href="https://example.com"></LinkCustom>, ); - const link = screen.getByTestId('linkCustom'); + const link = screen.getByTestId('testLink'); expect(link).toBeInTheDocument(); expect(link).toHaveTextContent('Test link'); expect(link).toHaveAttribute('href', 'https://example.com'); }); -}); +}); \ No newline at end of file From 8916bc8b965ee1a8cc4a6e52a463187bdefc8bd3 Mon Sep 17 00:00:00 2001 From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com> Date: Tue, 16 Jul 2024 13:57:04 -0400 Subject: [PATCH 15/42] fix(#273): add Label variant to WeeklyPickButton --- components/WeeklyPickButton/WeeklyPickButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/WeeklyPickButton/WeeklyPickButton.tsx b/components/WeeklyPickButton/WeeklyPickButton.tsx index 8e34e428..d28df374 100644 --- a/components/WeeklyPickButton/WeeklyPickButton.tsx +++ b/components/WeeklyPickButton/WeeklyPickButton.tsx @@ -25,7 +25,7 @@ const WeeklyPickButton: React.FC<WeeklyPickButtonProps> = ({ return ( <div className="flex items-center"> <RadioGroupItem value={team} id={team} data-testid="team-radio" /> - <Label htmlFor={team} data-testid="team-label"> + <Label htmlFor={team} variant="weeklyPickButtonLabel" data-testid="team-label"> <Image src={src} alt={team} From 6382386e77723cbbdaf9eb4f145a673c280f154f Mon Sep 17 00:00:00 2001 From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com> Date: Wed, 17 Jul 2024 05:01:43 -0400 Subject: [PATCH 16/42] fix(#273): add unit test for Label --- components/Label/Label.test.tsx | 50 +++++++++++++++++++++++++++++++++ 1 file changed, 50 insertions(+) create mode 100644 components/Label/Label.test.tsx diff --git a/components/Label/Label.test.tsx b/components/Label/Label.test.tsx new file mode 100644 index 00000000..fb383a6a --- /dev/null +++ b/components/Label/Label.test.tsx @@ -0,0 +1,50 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import { Label } from './Label'; + +const variants:Array< +| 'weeklyPickButtonLabel' +| 'inputLabel' +| null +| undefined +> = ['weeklyPickButtonLabel', 'inputLabel']; + +const variantClasses = { + weeklyPickButtonLabel: 'text-zinc-50 cursor-pointer rounded-xl items-center py-4 px-3 border-2 border-zinc-800 peer-aria-checked:border-orange-600 peer-hover:bg-zinc-800 flex', + inputLabel: 'text-zinc-900 cursor-text flex-col', +}; + +describe('Label', () => { + variants.forEach((variant) => { + it(`renders correctly with variant ${variant}`, () => { + render( + <Label data-testid="testLabel" variant={variant}> + Test Label + </Label> + ); + + const label = screen.getByTestId('testLabel'); + expect(label).toBeInTheDocument(); + if (variant) { + expect(label).toHaveClass(variantClasses[variant]); + } + }); + }); + + it(`applies additional custom classes correctly`, () => { + render( + <Label + data-testid="customClassLabel" + className="customClassLabel extra-custom-class" + > + Custom Test Label + </Label> + ); + + const labelCustom = screen.getByTestId('customClassLabel'); + expect(labelCustom).toBeInTheDocument(); + if (labelCustom.hasAttribute('className')) { + expect(labelCustom).toHaveClass('customClassLabel extra-custom-class'); + } + }); +}); From 8b17c8891aa01ebb17d3211de6fda8a8fc9bc587 Mon Sep 17 00:00:00 2001 From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com> Date: Wed, 17 Jul 2024 06:51:58 -0400 Subject: [PATCH 17/42] fix(#273): update placeholder text --- app/register/Register.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/register/Register.tsx b/app/register/Register.tsx index 626ce9f6..7de7b6d4 100644 --- a/app/register/Register.tsx +++ b/app/register/Register.tsx @@ -172,7 +172,7 @@ const Register = (): JSX.Element => { id="email" data-testid="email" type="email" - placeholder="Email" + placeholder="Your email" {...field} /> </Label> @@ -198,7 +198,7 @@ const Register = (): JSX.Element => { id="password" data-testid="password" type="password" - placeholder="Password" + placeholder="Your password" {...field} /> </Label> @@ -223,7 +223,7 @@ const Register = (): JSX.Element => { id="confirm-password" data-testid="confirm-password" type="password" - placeholder="Confirm Password" + placeholder="Confirm your password" {...field} /> </Label> From 54e31c31d7a4f63087c6a084da15bf0416665fc1 Mon Sep 17 00:00:00 2001 From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com> Date: Wed, 17 Jul 2024 06:58:59 -0400 Subject: [PATCH 18/42] fix(#273): update text size for Label --- components/Label/Label.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/Label/Label.tsx b/components/Label/Label.tsx index 133bfc1b..76d39485 100644 --- a/components/Label/Label.tsx +++ b/components/Label/Label.tsx @@ -9,12 +9,12 @@ import { cva, type VariantProps } from 'class-variance-authority'; import { cn } from '../../utils/utils'; const labelVariants = cva( - 'text-base font-normal leading-none gap-2 w-full transition', + 'font-normal leading-none gap-2 w-full transition', { variants: { variant: { - weeklyPickButtonLabel: 'text-zinc-50 cursor-pointer rounded-xl items-center py-4 px-3 border-2 border-zinc-800 peer-aria-checked:border-orange-600 peer-hover:bg-zinc-800 flex', - inputLabel: 'text-zinc-900 cursor-text flex-col' + weeklyPickButtonLabel: 'text-base text-zinc-50 cursor-pointer rounded-xl items-center py-4 px-3 border-2 border-zinc-800 peer-aria-checked:border-orange-600 peer-hover:bg-zinc-800 flex', + inputLabel: 'text-sm text-zinc-900 cursor-text flex-col' } }, defaultVariants: { From a0d13ce1545ce26e6c1f8d040c384a8b2e1c3bd4 Mon Sep 17 00:00:00 2001 From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com> Date: Wed, 17 Jul 2024 10:26:12 -0400 Subject: [PATCH 19/42] fix(#273): update gap values for Label variants --- components/Label/Label.tsx | 40 -------------------------------------- 1 file changed, 40 deletions(-) diff --git a/components/Label/Label.tsx b/components/Label/Label.tsx index 76d39485..e69de29b 100644 --- a/components/Label/Label.tsx +++ b/components/Label/Label.tsx @@ -1,40 +0,0 @@ -// Copyright (c) Gridiron Survivor. -// Licensed under the MIT License. - -'use client'; - -import * as React from 'react'; -import * as LabelPrimitive from '@radix-ui/react-label'; -import { cva, type VariantProps } from 'class-variance-authority'; -import { cn } from '../../utils/utils'; - -const labelVariants = cva( - 'font-normal leading-none gap-2 w-full transition', - { - variants: { - variant: { - weeklyPickButtonLabel: 'text-base text-zinc-50 cursor-pointer rounded-xl items-center py-4 px-3 border-2 border-zinc-800 peer-aria-checked:border-orange-600 peer-hover:bg-zinc-800 flex', - inputLabel: 'text-sm text-zinc-900 cursor-text flex-col' - } - }, - defaultVariants: { - variant: 'inputLabel' - } - } -); - -const Label = React.forwardRef< - React.ElementRef<typeof LabelPrimitive.Root>, - React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & - VariantProps<typeof labelVariants> ->(({ className, variant, ...props }, ref) => ( - <LabelPrimitive.Root - ref={ref} - className={cn(labelVariants({ variant }), className)} - {...props} - /> -)); -Label.displayName = LabelPrimitive.Root.displayName; - -export { Label }; - From b2f46ab9d8f17ed6e588dc4e93228d50133f4540 Mon Sep 17 00:00:00 2001 From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com> Date: Wed, 17 Jul 2024 11:07:11 -0400 Subject: [PATCH 20/42] fix(#273): create interface export for LinkCustom --- components/LinkCustom/LinkCustom.interface.ts | 10 ++++++++++ components/LinkCustom/LinkCustom.tsx | 7 +------ 2 files changed, 11 insertions(+), 6 deletions(-) create mode 100644 components/LinkCustom/LinkCustom.interface.ts diff --git a/components/LinkCustom/LinkCustom.interface.ts b/components/LinkCustom/LinkCustom.interface.ts new file mode 100644 index 00000000..e34163ca --- /dev/null +++ b/components/LinkCustom/LinkCustom.interface.ts @@ -0,0 +1,10 @@ +// Copyright (c) Gridiron Survivor. +// Licensed under the MIT License. + +import React from 'react'; + +export interface ILinkCustomProps { + children: React.ReactNode; + className?: string; + href: string; +} \ No newline at end of file diff --git a/components/LinkCustom/LinkCustom.tsx b/components/LinkCustom/LinkCustom.tsx index 4e4e4c80..9cb81394 100644 --- a/components/LinkCustom/LinkCustom.tsx +++ b/components/LinkCustom/LinkCustom.tsx @@ -3,12 +3,7 @@ import Link from 'next/link'; import React, { JSX } from 'react'; - -interface ILinkCustomProps { - children: React.ReactNode; - className?: string; - href: string; -} +import { ILinkCustomProps } from './LinkCustom.interface'; /** * Custom link component From ff1f6408fe5e417cd51383503e8d9816dade6288 Mon Sep 17 00:00:00 2001 From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com> Date: Thu, 18 Jul 2024 00:11:58 -0400 Subject: [PATCH 21/42] fix(#273): remove interface file for LinkCustom --- components/LinkCustom/LinkCustom.interface.ts | 10 ---------- components/LinkCustom/LinkCustom.tsx | 7 ++++++- 2 files changed, 6 insertions(+), 11 deletions(-) delete mode 100644 components/LinkCustom/LinkCustom.interface.ts diff --git a/components/LinkCustom/LinkCustom.interface.ts b/components/LinkCustom/LinkCustom.interface.ts deleted file mode 100644 index e34163ca..00000000 --- a/components/LinkCustom/LinkCustom.interface.ts +++ /dev/null @@ -1,10 +0,0 @@ -// Copyright (c) Gridiron Survivor. -// Licensed under the MIT License. - -import React from 'react'; - -export interface ILinkCustomProps { - children: React.ReactNode; - className?: string; - href: string; -} \ No newline at end of file diff --git a/components/LinkCustom/LinkCustom.tsx b/components/LinkCustom/LinkCustom.tsx index 9cb81394..4e4e4c80 100644 --- a/components/LinkCustom/LinkCustom.tsx +++ b/components/LinkCustom/LinkCustom.tsx @@ -3,7 +3,12 @@ import Link from 'next/link'; import React, { JSX } from 'react'; -import { ILinkCustomProps } from './LinkCustom.interface'; + +interface ILinkCustomProps { + children: React.ReactNode; + className?: string; + href: string; +} /** * Custom link component From c639f726e638d223745c2bbcd6c25ab97a0eb042 Mon Sep 17 00:00:00 2001 From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com> Date: Thu, 18 Jul 2024 07:26:40 -0400 Subject: [PATCH 22/42] fix(#273): add Label.tsx file --- components/Label/Label.tsx | 40 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/components/Label/Label.tsx b/components/Label/Label.tsx index e69de29b..5c38279f 100644 --- a/components/Label/Label.tsx +++ b/components/Label/Label.tsx @@ -0,0 +1,40 @@ +// Copyright (c) Gridiron Survivor. +// Licensed under the MIT License. + +'use client'; + +import * as React from 'react'; +import * as LabelPrimitive from '@radix-ui/react-label'; +import { cva, type VariantProps } from 'class-variance-authority'; +import { cn } from '../../utils/utils'; + +const labelVariants = cva( + 'font-normal leading-none w-full transition', + { + variants: { + variant: { + weeklyPickButtonLabel: 'text-base text-zinc-50 cursor-pointer rounded-xl items-center py-4 px-3 border-2 border-zinc-800 peer-aria-checked:border-orange-600 peer-hover:bg-zinc-800 flex gap-2', + inputLabel: 'text-sm text-zinc-900 cursor-text flex-col gap-1.5', + } + }, + defaultVariants: { + variant: 'inputLabel' + } + } +); + +const Label = React.forwardRef< + React.ElementRef<typeof LabelPrimitive.Root>, + React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & + VariantProps<typeof labelVariants> +>(({ className, variant, ...props }, ref) => ( + <LabelPrimitive.Root + ref={ref} + className={cn(labelVariants({ variant }), className)} + {...props} + /> +)); +Label.displayName = LabelPrimitive.Root.displayName; + +export { Label }; + From 29fa949cfb1b85bc4dcefa9f55e23c63cc417ba9 Mon Sep 17 00:00:00 2001 From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com> Date: Thu, 18 Jul 2024 11:56:06 -0400 Subject: [PATCH 23/42] fix(#273): fix spelling mistake --- app/(main)/register/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/(main)/register/page.tsx b/app/(main)/register/page.tsx index 14342329..0f501bc5 100644 --- a/app/(main)/register/page.tsx +++ b/app/(main)/register/page.tsx @@ -11,7 +11,7 @@ export const metadata: Metadata = { }; /** - * Renders the registartion page. + * Renders the registration page. * @returns {JSX.Element} The rendered registration page. */ const RegisterPage = (): JSX.Element => { From 2a84095485ec9aaacf688b9b73e57f4f56ae8918 Mon Sep 17 00:00:00 2001 From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com> Date: Thu, 18 Jul 2024 14:33:45 -0400 Subject: [PATCH 24/42] fix(#273): hyphenate data-testid and custom classes --- components/Label/Label.test.tsx | 12 ++++++------ components/LinkCustom/LinkCustom.test.tsx | 4 ++-- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/components/Label/Label.test.tsx b/components/Label/Label.test.tsx index fb383a6a..d728567b 100644 --- a/components/Label/Label.test.tsx +++ b/components/Label/Label.test.tsx @@ -18,12 +18,12 @@ describe('Label', () => { variants.forEach((variant) => { it(`renders correctly with variant ${variant}`, () => { render( - <Label data-testid="testLabel" variant={variant}> + <Label data-testid="test-label" variant={variant}> Test Label </Label> ); - const label = screen.getByTestId('testLabel'); + const label = screen.getByTestId('test-label'); expect(label).toBeInTheDocument(); if (variant) { expect(label).toHaveClass(variantClasses[variant]); @@ -34,17 +34,17 @@ describe('Label', () => { it(`applies additional custom classes correctly`, () => { render( <Label - data-testid="customClassLabel" - className="customClassLabel extra-custom-class" + data-testid="custom-class-label" + className="custom-class-label extra-custom-class" > Custom Test Label </Label> ); - const labelCustom = screen.getByTestId('customClassLabel'); + const labelCustom = screen.getByTestId('custom-class-label'); expect(labelCustom).toBeInTheDocument(); if (labelCustom.hasAttribute('className')) { - expect(labelCustom).toHaveClass('customClassLabel extra-custom-class'); + expect(labelCustom).toHaveClass('custom-class-label extra-custom-class'); } }); }); diff --git a/components/LinkCustom/LinkCustom.test.tsx b/components/LinkCustom/LinkCustom.test.tsx index 26173988..c970b497 100644 --- a/components/LinkCustom/LinkCustom.test.tsx +++ b/components/LinkCustom/LinkCustom.test.tsx @@ -5,9 +5,9 @@ import LinkCustom from './LinkCustom'; describe('LinkCustom Component', () => { it('renders with default props', () => { render( - <LinkCustom children="Test link" data-testid="testLink" href="https://example.com"></LinkCustom>, + <LinkCustom children="Test link" data-testid="test-link" href="https://example.com"></LinkCustom>, ); - const link = screen.getByTestId('testLink'); + const link = screen.getByTestId('test-link'); expect(link).toBeInTheDocument(); expect(link).toHaveTextContent('Test link'); expect(link).toHaveAttribute('href', 'https://example.com'); From f4194218d4d7ea74d8ed39858ec6514121069864 Mon Sep 17 00:00:00 2001 From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com> Date: Mon, 22 Jul 2024 13:21:03 -0400 Subject: [PATCH 25/42] fix(#273): update variant names for Label --- components/Label/Label.tsx | 6 +++--- components/WeeklyPickButton/WeeklyPickButton.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/components/Label/Label.tsx b/components/Label/Label.tsx index 5c38279f..d32417c3 100644 --- a/components/Label/Label.tsx +++ b/components/Label/Label.tsx @@ -13,12 +13,12 @@ const labelVariants = cva( { variants: { variant: { - weeklyPickButtonLabel: 'text-base text-zinc-50 cursor-pointer rounded-xl items-center py-4 px-3 border-2 border-zinc-800 peer-aria-checked:border-orange-600 peer-hover:bg-zinc-800 flex gap-2', - inputLabel: 'text-sm text-zinc-900 cursor-text flex-col gap-1.5', + default: 'text-sm text-zinc-900 cursor-text flex-col gap-1.5', + secondary: 'text-base text-zinc-50 cursor-pointer rounded-xl items-center py-4 px-3 border-2 border-zinc-800 peer-aria-checked:border-orange-600 peer-hover:bg-zinc-800 flex gap-2', } }, defaultVariants: { - variant: 'inputLabel' + variant: 'default' } } ); diff --git a/components/WeeklyPickButton/WeeklyPickButton.tsx b/components/WeeklyPickButton/WeeklyPickButton.tsx index d28df374..f86efbb1 100644 --- a/components/WeeklyPickButton/WeeklyPickButton.tsx +++ b/components/WeeklyPickButton/WeeklyPickButton.tsx @@ -25,7 +25,7 @@ const WeeklyPickButton: React.FC<WeeklyPickButtonProps> = ({ return ( <div className="flex items-center"> <RadioGroupItem value={team} id={team} data-testid="team-radio" /> - <Label htmlFor={team} variant="weeklyPickButtonLabel" data-testid="team-label"> + <Label htmlFor={team} variant="secondary" data-testid="team-label"> <Image src={src} alt={team} From 88a3bfd1311e067d88bf21209f626bf9e63a953d Mon Sep 17 00:00:00 2001 From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com> Date: Mon, 22 Jul 2024 14:06:52 -0400 Subject: [PATCH 26/42] fix(#273): update variants name in Label test --- components/Label/Label.test.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/components/Label/Label.test.tsx b/components/Label/Label.test.tsx index d728567b..3186c568 100644 --- a/components/Label/Label.test.tsx +++ b/components/Label/Label.test.tsx @@ -3,15 +3,15 @@ import { render, screen } from '@testing-library/react'; import { Label } from './Label'; const variants:Array< -| 'weeklyPickButtonLabel' -| 'inputLabel' +| 'default' +| 'secondary' | null | undefined -> = ['weeklyPickButtonLabel', 'inputLabel']; +> = ['default', 'secondary']; const variantClasses = { - weeklyPickButtonLabel: 'text-zinc-50 cursor-pointer rounded-xl items-center py-4 px-3 border-2 border-zinc-800 peer-aria-checked:border-orange-600 peer-hover:bg-zinc-800 flex', - inputLabel: 'text-zinc-900 cursor-text flex-col', + secondary: 'text-zinc-50 cursor-pointer rounded-xl items-center py-4 px-3 border-2 border-zinc-800 peer-aria-checked:border-orange-600 peer-hover:bg-zinc-800 flex', + default: 'text-zinc-900 cursor-text flex-col', }; describe('Label', () => { From c7e9c22f24678d193bae9d2b1e9d322c5d606628 Mon Sep 17 00:00:00 2001 From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com> Date: Thu, 25 Jul 2024 03:57:42 -0400 Subject: [PATCH 27/42] fix(#273): added back the data-testid to LinkCustom --- components/LinkCustom/LinkCustom.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/components/LinkCustom/LinkCustom.tsx b/components/LinkCustom/LinkCustom.tsx index 4e4e4c80..ecc2e004 100644 --- a/components/LinkCustom/LinkCustom.tsx +++ b/components/LinkCustom/LinkCustom.tsx @@ -3,6 +3,7 @@ import Link from 'next/link'; import React, { JSX } from 'react'; +import { cn } from '@/utils/utils'; interface ILinkCustomProps { children: React.ReactNode; @@ -18,13 +19,17 @@ interface ILinkCustomProps { * @param props.className - any additional classes you want to add to that instance of the LinkCustom component. * @returns The custom link component */ -const LinkCustom = ({ children, href, ... props }: ILinkCustomProps): JSX.Element => { +const LinkCustom = ({ + children, + className, + href, +}: ILinkCustomProps): JSX.Element => { return ( <Link - className={'font-bold text-orange-600 hover:text-orange-600 hover:underline'} + className={cn('font-bold text-orange-600 hover:text-orange-600 hover:underline', className)} + data-testid="linkCustom" href={href} passHref - { ...props } > {children} </Link> From caf8de3178af6b61c532f0d925d836d393f9b394 Mon Sep 17 00:00:00 2001 From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com> Date: Thu, 25 Jul 2024 04:38:21 -0400 Subject: [PATCH 28/42] fix(#273): remove data-testid from LinkCustom test --- components/LinkCustom/LinkCustom.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/LinkCustom/LinkCustom.test.tsx b/components/LinkCustom/LinkCustom.test.tsx index c970b497..c8ded248 100644 --- a/components/LinkCustom/LinkCustom.test.tsx +++ b/components/LinkCustom/LinkCustom.test.tsx @@ -5,9 +5,9 @@ import LinkCustom from './LinkCustom'; describe('LinkCustom Component', () => { it('renders with default props', () => { render( - <LinkCustom children="Test link" data-testid="test-link" href="https://example.com"></LinkCustom>, + <LinkCustom children="Test link" href="https://example.com"></LinkCustom>, ); - const link = screen.getByTestId('test-link'); + const link = screen.getByTestId('linkCustom'); expect(link).toBeInTheDocument(); expect(link).toHaveTextContent('Test link'); expect(link).toHaveAttribute('href', 'https://example.com'); From 56d484392112576349504d23296748dc8371b731 Mon Sep 17 00:00:00 2001 From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com> Date: Thu, 25 Jul 2024 07:02:56 -0400 Subject: [PATCH 29/42] fix(#273): create file with Label variant types --- components/Label/Label.test.tsx | 10 ++-------- components/Label/labelVariants.ts | 4 ++++ 2 files changed, 6 insertions(+), 8 deletions(-) create mode 100644 components/Label/labelVariants.ts diff --git a/components/Label/Label.test.tsx b/components/Label/Label.test.tsx index 3186c568..7688315e 100644 --- a/components/Label/Label.test.tsx +++ b/components/Label/Label.test.tsx @@ -1,13 +1,7 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; import { Label } from './Label'; - -const variants:Array< -| 'default' -| 'secondary' -| null -| undefined -> = ['default', 'secondary']; +import { labelVariants } from './labelVariants'; const variantClasses = { secondary: 'text-zinc-50 cursor-pointer rounded-xl items-center py-4 px-3 border-2 border-zinc-800 peer-aria-checked:border-orange-600 peer-hover:bg-zinc-800 flex', @@ -15,7 +9,7 @@ const variantClasses = { }; describe('Label', () => { - variants.forEach((variant) => { + labelVariants.forEach((variant) => { it(`renders correctly with variant ${variant}`, () => { render( <Label data-testid="test-label" variant={variant}> diff --git a/components/Label/labelVariants.ts b/components/Label/labelVariants.ts new file mode 100644 index 00000000..e987f161 --- /dev/null +++ b/components/Label/labelVariants.ts @@ -0,0 +1,4 @@ +// Copyright (c) Gridiron Survivor. +// Licensed under the MIT License. + +export const labelVariants: Array<'default' | 'secondary' | null | undefined> = ['default', 'secondary']; \ No newline at end of file From b985de1d166039c90fdc5a2d4e2449cad7663408 Mon Sep 17 00:00:00 2001 From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com> Date: Tue, 13 Aug 2024 14:00:05 -0400 Subject: [PATCH 30/42] fix(#273): update test with correct name for Register page --- app/(main)/register/page.test.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/(main)/register/page.test.tsx b/app/(main)/register/page.test.tsx index 10d46e2f..0c26b78e 100644 --- a/app/(main)/register/page.test.tsx +++ b/app/(main)/register/page.test.tsx @@ -1,5 +1,5 @@ import { render, screen, fireEvent, waitFor } from '@testing-library/react'; -import Register from './page'; +import RegisterPage from './page'; import { registerAccount } from '@/api/apiFunctions'; import Alert from '@/components/AlertNotification/AlertNotification'; import { AlertVariants } from '@/components/AlertNotification/Alerts.enum'; @@ -47,7 +47,7 @@ describe('Register', () => { beforeEach(() => { jest.clearAllMocks(); - render(<Register />); + render(<RegisterPage />); // Get form elements emailInput = screen.getByTestId('email'); @@ -103,7 +103,7 @@ describe('Register', () => { test('redirects to /league/all when the button is clicked', async () => { mockUseAuthContext.isSignedIn = true; - render(<Register />); + render(<RegisterPage />); await waitFor(() => { expect(mockPush).toHaveBeenCalledWith('/league/all'); From 79480b79ca64ccd9562ff9b5f7a5858158c3ecb2 Mon Sep 17 00:00:00 2001 From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com> Date: Tue, 13 Aug 2024 18:16:05 -0400 Subject: [PATCH 31/42] fix(#273): merge develop --- app/(main)/register/Register.tsx | 250 +++++++++++++++---------------- 1 file changed, 123 insertions(+), 127 deletions(-) diff --git a/app/(main)/register/Register.tsx b/app/(main)/register/Register.tsx index 76a5ca8c..030c9782 100644 --- a/app/(main)/register/Register.tsx +++ b/app/(main)/register/Register.tsx @@ -125,142 +125,138 @@ const Register = (): JSX.Element => { const isDisabled = !email || !password || password !== confirmPassword; return ( - <div className="h-screen w-full"> - <div className="grid h-screen w-full grid-cols-2 bg-gradient-to-b from-[#4E160E] to-zinc-950"> - <div className="grid p-8"> - <div className="grid"> - <Logo className="mx-auto place-self-end" src={logo} /> - </div> - <div className="mx-auto grid gap-4 place-self-end"> - <p className="leading-7 text-white"> - Thank you... fantasy football draft, for letting me know that even - in my fantasies, I am bad at sports. - </p> - <p className="leading-7 text-white">Jimmy Fallon</p> - </div> + <section className="grid xl:grid-cols-2 xl:grid-rows-none"> + <div + data-testid="dark-mode-section" + className="row-span-1 grid w-full place-items-center from-[#4E160E] to-zinc-950 dark:bg-gradient-to-b xl:h-screen xl:bg-gradient-to-b" + > + <Logo className="mx-auto w-52 xl:w-64 xl:place-self-end" src={logo} /> + <div className="mx-auto grid gap-4 place-self-end px-8 pb-8 text-foreground text-white"> + <p className="hidden leading-7 xl:block"> + Thank you... fantasy football draft, for letting me know that even + in my fantasies, I am bad at sports. + </p> + <p className="hidden leading-7 xl:block">Jimmy Fallon</p> + </div> + </div> + <div className="row-span-1 mx-auto grid max-w-sm justify-center space-y-4 px-4 xl:flex xl:flex-col"> + <div> + <h1 className="text-5xl font-extrabold tracking-tight text-foreground"> + Register A New Account + </h1> + <p className="pb-4 font-normal leading-7 text-zinc-500"> + If you have an existing account{' '} + <LinkCustom + href="/login" + data-testid="login-link" + > + Login! + </LinkCustom> + </p> </div> - <div className="grid place-content-center bg-white p-8"> - <div className="mx-auto grid w-80 place-content-center gap-4"> - <h1 className="text-5xl font-extrabold tracking-tight text-foreground"> - Register A New Account - </h1> + + <Form {...form}> + <form + id="input-container" + className="grid gap-3" + onSubmit={form.handleSubmit(onSubmit)} + > + <FormField + control={form.control as Control<object>} + name="email" + render={({ field }) => ( + <FormItem> + <FormControl> + <Label htmlFor="email" data-testid="email-label"> + Email + <Input + id="email" + data-testid="email" + type="email" + placeholder="Your email" + {...field} + /> + </Label> + </FormControl> + {form.formState.errors.email && ( + <FormMessage> + {form.formState.errors.email.message} + </FormMessage> + )} + </FormItem> + )} + /> + <FormField + control={form.control as Control<object>} + name="password" + render={({ field }) => ( + <FormItem> + <FormControl> + <Label htmlFor="password" data-testid="password-label"> + Password + <Input + id="password" + data-testid="password" + type="password" + placeholder="Your password" + {...field} + /> + </Label> + </FormControl> + {form.formState.errors.password && ( + <FormMessage> + {form.formState.errors.password.message} + </FormMessage> + )} + </FormItem> + )} + /> + <FormField + control={form.control as Control<object>} + name="confirmPassword" + render={({ field }) => ( + <FormItem> + <FormControl> + <Label htmlFor="confirm-password" data-testid="confirm-password-label"> + Confirm Password + <Input + id="confirm-password" + data-testid="confirm-password" + type="password" + placeholder="Confirm your password" + {...field} + /> + </Label> + </FormControl> + {form.formState.errors.confirmPassword && ( + <FormMessage> + {form.formState.errors.confirmPassword.message} + </FormMessage> + )} + </FormItem> + )} + /> + + <Button + data-testid="continue-button" + label="Register" + type="submit" + disabled={isDisabled} + /> <p className="pb-4 font-normal leading-7 text-zinc-500"> - If you have an existing account{' '} <LinkCustom href="/login" - data-testid="login-link" + data-testid="login-link" > - Login! + Login </LinkCustom> + {' '} to get started playing </p> - - <Form {...form}> - <form - id="input-container" - className="grid gap-3" - onSubmit={form.handleSubmit(onSubmit)} - > - <FormField - control={form.control as Control<object>} - name="email" - render={({ field }) => ( - <FormItem> - <FormControl> - <Label htmlFor="email" data-testid="email-label"> - Email - <Input - id="email" - data-testid="email" - type="email" - placeholder="Your email" - {...field} - /> - </Label> - - </FormControl> - {form.formState.errors.email && ( - <FormMessage> - {form.formState.errors.email.message} - </FormMessage> - )} - </FormItem> - )} - /> - <FormField - control={form.control as Control<object>} - name="password" - render={({ field }) => ( - <FormItem> - <FormControl> - <Label htmlFor="password" data-testid="password-label"> - Password - <Input - id="password" - data-testid="password" - type="password" - placeholder="Your password" - {...field} - /> - </Label> - </FormControl> - {form.formState.errors.password && ( - <FormMessage> - {form.formState.errors.password.message} - </FormMessage> - )} - </FormItem> - )} - /> - <FormField - control={form.control as Control<object>} - name="confirmPassword" - render={({ field }) => ( - <FormItem> - <FormControl> - <Label htmlFor="confirm-password" data-testid="confirm-password-label"> - Confirm Password - <Input - id="confirm-password" - data-testid="confirm-password" - type="password" - placeholder="Confirm your password" - {...field} - /> - </Label> - </FormControl> - {form.formState.errors.confirmPassword && ( - <FormMessage> - {form.formState.errors.confirmPassword.message} - </FormMessage> - )} - </FormItem> - )} - /> - - <Button - data-testid="continue-button" - label="Register" - type="submit" - disabled={isDisabled} - /> - <p className="pb-4 font-normal leading-7 text-zinc-500"> - <LinkCustom - href="/login" - data-testid="login-link" - > - Login - </LinkCustom> - {' '} to get started playing - </p> - - </form> - </Form> - </div> - </div> + </form> + </Form> </div> - </div> + </section> ); }; export default Register; - From 61973e3ff53f7cdb5ce92acbf36c879dabcdd143 Mon Sep 17 00:00:00 2001 From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com> Date: Tue, 13 Aug 2024 18:37:48 -0400 Subject: [PATCH 32/42] fix(#273): change label text color --- components/Label/Label.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Label/Label.tsx b/components/Label/Label.tsx index d32417c3..e500f27a 100644 --- a/components/Label/Label.tsx +++ b/components/Label/Label.tsx @@ -13,7 +13,7 @@ const labelVariants = cva( { variants: { variant: { - default: 'text-sm text-zinc-900 cursor-text flex-col gap-1.5', + default: 'text-sm text-zinc-300 cursor-text flex-col gap-1.5', secondary: 'text-base text-zinc-50 cursor-pointer rounded-xl items-center py-4 px-3 border-2 border-zinc-800 peer-aria-checked:border-orange-600 peer-hover:bg-zinc-800 flex gap-2', } }, From a3c6480231fe3d818a22b3d35d4023022d956275 Mon Sep 17 00:00:00 2001 From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com> Date: Tue, 13 Aug 2024 18:41:12 -0400 Subject: [PATCH 33/42] fix(#273): remove punctuation from LinkCustom --- app/(main)/register/Register.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/(main)/register/Register.tsx b/app/(main)/register/Register.tsx index 030c9782..9f65835a 100644 --- a/app/(main)/register/Register.tsx +++ b/app/(main)/register/Register.tsx @@ -150,8 +150,9 @@ const Register = (): JSX.Element => { href="/login" data-testid="login-link" > - Login! + Login </LinkCustom> + ! </p> </div> From 2f908569d03087bec0bb5f481a263f04bca64865 Mon Sep 17 00:00:00 2001 From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com> Date: Wed, 14 Aug 2024 22:46:48 -0400 Subject: [PATCH 34/42] fix(#273): update variant classes --- components/Label/Label.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Label/Label.test.tsx b/components/Label/Label.test.tsx index 7688315e..d8df2d3d 100644 --- a/components/Label/Label.test.tsx +++ b/components/Label/Label.test.tsx @@ -4,8 +4,8 @@ import { Label } from './Label'; import { labelVariants } from './labelVariants'; const variantClasses = { + default: 'text-sm text-zinc-300 cursor-text flex-col gap-1.5', secondary: 'text-zinc-50 cursor-pointer rounded-xl items-center py-4 px-3 border-2 border-zinc-800 peer-aria-checked:border-orange-600 peer-hover:bg-zinc-800 flex', - default: 'text-zinc-900 cursor-text flex-col', }; describe('Label', () => { From 2ca6306b3f868d2acfffe2c991e619ad01dfad94 Mon Sep 17 00:00:00 2001 From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com> Date: Thu, 19 Sep 2024 08:46:53 -0400 Subject: [PATCH 35/42] fix(#273): Merge changes from develop --- app/(main)/register/Register.tsx | 54 +++++++++++++--------------- app/(main)/register/page.test.tsx | 1 + components/LinkCustom/LinkCustom.tsx | 2 +- 3 files changed, 26 insertions(+), 31 deletions(-) diff --git a/app/(main)/register/Register.tsx b/app/(main)/register/Register.tsx index 9f65835a..72eece9d 100644 --- a/app/(main)/register/Register.tsx +++ b/app/(main)/register/Register.tsx @@ -2,19 +2,9 @@ // Licensed under the MIT License. 'use client'; -import React, { JSX, useEffect } from 'react'; -import { useRouter } from 'next/navigation'; -import { Input } from '@/components/Input/Input'; -import Logo from '@/components/Logo/Logo'; +import { AlertVariants } from '@/components/AlertNotification/Alerts.enum'; import { Button } from '@/components/Button/Button'; -import { registerAccount } from '@/api/apiFunctions'; -import logo from '/public/assets/logo-colored-outline.svg'; -import { useAuthContext } from '@/context/AuthContextProvider'; -import LinkCustom from '@/components/LinkCustom/LinkCustom'; -import { Label } from '@/components/Label/Label'; -import { z } from 'zod'; import { Control, useForm, useWatch, SubmitHandler } from 'react-hook-form'; -import { zodResolver } from '@hookform/resolvers/zod'; import { Form, FormControl, @@ -22,9 +12,20 @@ import { FormItem, FormMessage, } from '../../../components/Form/Form'; +import { Input } from '@/components/Input/Input'; +import { registerAccount } from '@/api/apiFunctions'; import { toast } from 'react-hot-toast'; +import { useAuthContext } from '@/context/AuthContextProvider'; +import { useRouter } from 'next/navigation'; +import { z } from 'zod'; +import { zodResolver } from '@hookform/resolvers/zod'; import Alert from '@/components/AlertNotification/AlertNotification'; -import { AlertVariants } from '@/components/AlertNotification/Alerts.enum'; +import { Label } from '@/components/Label/Label'; +import LinkCustom from '@/components/LinkCustom/LinkCustom'; +import Logo from '@/components/Logo/Logo'; +import logo from '/public/assets/logo-colored-outline.svg'; +import React, { JSX, useEffect } from 'react'; + const RegisterUserSchema = z .object({ @@ -60,6 +61,7 @@ const Register = (): JSX.Element => { if (isSignedIn) { router.push('/league/all'); } + // eslint-disable-next-line react-hooks/exhaustive-deps }, [isSignedIn]); const form = useForm<RegisterUserSchemaType>({ @@ -107,7 +109,6 @@ const Register = (): JSX.Element => { try { await registerAccount(data); await login(data); - router.push('/league/all'); toast.custom( <Alert variant={AlertVariants.Success} @@ -128,10 +129,10 @@ const Register = (): JSX.Element => { <section className="grid xl:grid-cols-2 xl:grid-rows-none"> <div data-testid="dark-mode-section" - className="row-span-1 grid w-full place-items-center from-[#4E160E] to-zinc-950 dark:bg-gradient-to-b xl:h-screen xl:bg-gradient-to-b" + className="row-span-1 grid w-full place-items-center from-[#4E160E] to-zinc-950 bg-gradient-to-b xl:h-screen xl:bg-gradient-to-b" > <Logo className="mx-auto w-52 xl:w-64 xl:place-self-end" src={logo} /> - <div className="mx-auto grid gap-4 place-self-end px-8 pb-8 text-foreground text-white"> + <div className="mx-auto grid gap-4 place-self-end px-8 pb-8 text-foreground"> <p className="hidden leading-7 xl:block"> Thank you... fantasy football draft, for letting me know that even in my fantasies, I am bad at sports. @@ -139,29 +140,23 @@ const Register = (): JSX.Element => { <p className="hidden leading-7 xl:block">Jimmy Fallon</p> </div> </div> + <div className="row-span-1 mx-auto grid max-w-sm justify-center space-y-4 px-4 xl:flex xl:flex-col"> <div> <h1 className="text-5xl font-extrabold tracking-tight text-foreground"> Register A New Account </h1> - <p className="pb-4 font-normal leading-7 text-zinc-500"> + <p className="pb-4 font-normal leading-7 text-muted-foreground"> If you have an existing account{' '} - <LinkCustom - href="/login" - data-testid="login-link" - > - Login - </LinkCustom> - ! + <LinkCustom href="/login">Login!</LinkCustom> </p> - </div> - + </div> <Form {...form}> <form id="input-container" className="grid gap-3" onSubmit={form.handleSubmit(onSubmit)} - > + > <FormField control={form.control as Control<object>} name="email" @@ -186,7 +181,7 @@ const Register = (): JSX.Element => { )} </FormItem> )} - /> + /> <FormField control={form.control as Control<object>} name="password" @@ -211,7 +206,7 @@ const Register = (): JSX.Element => { )} </FormItem> )} - /> + /> <FormField control={form.control as Control<object>} name="confirmPassword" @@ -237,7 +232,6 @@ const Register = (): JSX.Element => { </FormItem> )} /> - <Button data-testid="continue-button" label="Register" @@ -256,7 +250,7 @@ const Register = (): JSX.Element => { </form> </Form> </div> - </section> + </section> ); }; diff --git a/app/(main)/register/page.test.tsx b/app/(main)/register/page.test.tsx index 21d3c583..bc2b4f34 100644 --- a/app/(main)/register/page.test.tsx +++ b/app/(main)/register/page.test.tsx @@ -5,6 +5,7 @@ import Alert from '@/components/AlertNotification/AlertNotification'; import { AlertVariants } from '@/components/AlertNotification/Alerts.enum'; import { toast } from 'react-hot-toast'; + const mockLogin = jest.fn(); const mockPush = jest.fn(); diff --git a/components/LinkCustom/LinkCustom.tsx b/components/LinkCustom/LinkCustom.tsx index a56ed82f..1376e1d2 100644 --- a/components/LinkCustom/LinkCustom.tsx +++ b/components/LinkCustom/LinkCustom.tsx @@ -39,5 +39,5 @@ const LinkCustom = ({ ); }; -export { Label }; +export default LinkCustom; From f79a31c224460668a7fc341e23bedf57649fb2c2 Mon Sep 17 00:00:00 2001 From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com> Date: Fri, 18 Oct 2024 10:30:21 -0400 Subject: [PATCH 36/42] Merge 'develop' into corina/a11y-audit-signup-page --- app/(main)/register/Register.tsx | 107 ++++++++---------- app/(main)/register/page.test.tsx | 6 +- components/Label/Label.tsx | 19 ++-- .../WeeklyPickButton/WeeklyPickButton.tsx | 2 +- 4 files changed, 61 insertions(+), 73 deletions(-) diff --git a/app/(main)/register/Register.tsx b/app/(main)/register/Register.tsx index 72eece9d..44e0f646 100644 --- a/app/(main)/register/Register.tsx +++ b/app/(main)/register/Register.tsx @@ -20,12 +20,11 @@ import { useRouter } from 'next/navigation'; import { z } from 'zod'; import { zodResolver } from '@hookform/resolvers/zod'; import Alert from '@/components/AlertNotification/AlertNotification'; -import { Label } from '@/components/Label/Label'; import LinkCustom from '@/components/LinkCustom/LinkCustom'; import Logo from '@/components/Logo/Logo'; import logo from '/public/assets/logo-colored-outline.svg'; -import React, { JSX, useEffect } from 'react'; - +import React, { JSX, useEffect, useState } from 'react'; +import LoadingSpinner from '@/components/LoadingSpinner/LoadingSpinner'; const RegisterUserSchema = z .object({ @@ -36,11 +35,11 @@ const RegisterUserSchema = z password: z .string() .min(1, { message: 'Please enter a password' }) - .min(6, { message: 'Password must be at least 6 characters' }), + .min(8, { message: 'Password must be at least 8 characters' }), confirmPassword: z .string() .min(1, { message: 'Please confirm your password' }) - .min(6, { message: 'Password must be at least 6 characters' }), + .min(8, { message: 'Password must be at least 8 characters' }), }) .refine((data) => data.password === data.confirmPassword, { message: "Passwords don't match", @@ -56,6 +55,7 @@ type RegisterUserSchemaType = z.infer<typeof RegisterUserSchema>; const Register = (): JSX.Element => { const router = useRouter(); const { login, isSignedIn } = useAuthContext(); + const [isLoading, setIsLoading] = useState(false); useEffect(() => { if (isSignedIn) { @@ -107,6 +107,7 @@ const Register = (): JSX.Element => { data: RegisterUserSchemaType, ): Promise<void> => { try { + setIsLoading(true); await registerAccount(data); await login(data); toast.custom( @@ -120,6 +121,8 @@ const Register = (): JSX.Element => { toast.custom( <Alert variant={AlertVariants.Error} message="Something went wrong!" />, ); + } finally { + setIsLoading(false); } }; @@ -140,7 +143,6 @@ const Register = (): JSX.Element => { <p className="hidden leading-7 xl:block">Jimmy Fallon</p> </div> </div> - <div className="row-span-1 mx-auto grid max-w-sm justify-center space-y-4 px-4 xl:flex xl:flex-col"> <div> <h1 className="text-5xl font-extrabold tracking-tight text-foreground"> @@ -150,108 +152,97 @@ const Register = (): JSX.Element => { If you have an existing account{' '} <LinkCustom href="/login">Login!</LinkCustom> </p> - </div> + </div> + <Form {...form}> <form id="input-container" className="grid gap-3" + data-testid="register-form" onSubmit={form.handleSubmit(onSubmit)} - > + > <FormField control={form.control as Control<object>} name="email" render={({ field }) => ( <FormItem> <FormControl> - <Label htmlFor="email" data-testid="email-label"> - Email - <Input - id="email" - data-testid="email" - type="email" - placeholder="Your email" - {...field} - /> - </Label> + <Input + data-testid="email" + type="email" + placeholder="Email" + {...field} + /> </FormControl> - {form.formState.errors.email && ( + {form.formState.errors?.email && ( <FormMessage> - {form.formState.errors.email.message} + {form.formState.errors?.email.message} </FormMessage> )} </FormItem> )} - /> + /> <FormField control={form.control as Control<object>} name="password" render={({ field }) => ( <FormItem> <FormControl> - <Label htmlFor="password" data-testid="password-label"> - Password - <Input - id="password" - data-testid="password" - type="password" - placeholder="Your password" - {...field} - /> - </Label> + <Input + data-testid="password" + type="password" + placeholder="Password" + {...field} + /> </FormControl> - {form.formState.errors.password && ( + {form.formState.errors?.password && ( <FormMessage> - {form.formState.errors.password.message} + {form.formState.errors?.password.message} </FormMessage> )} </FormItem> )} - /> + /> <FormField control={form.control as Control<object>} name="confirmPassword" render={({ field }) => ( <FormItem> <FormControl> - <Label htmlFor="confirm-password" data-testid="confirm-password-label"> - Confirm Password - <Input - id="confirm-password" - data-testid="confirm-password" - type="password" - placeholder="Confirm your password" - {...field} - /> - </Label> + <Input + data-testid="confirm-password" + type="password" + placeholder="Confirm Password" + {...field} + /> </FormControl> - {form.formState.errors.confirmPassword && ( + {form.formState.errors?.confirmPassword && ( <FormMessage> - {form.formState.errors.confirmPassword.message} + {form.formState.errors?.confirmPassword.message} </FormMessage> )} </FormItem> )} /> + <Button data-testid="continue-button" - label="Register" + label={ + isLoading ? ( + <LoadingSpinner data-testid="loading-spinner" /> + ) : ( + 'Continue' + ) + } type="submit" disabled={isDisabled} /> - <p className="pb-4 font-normal leading-7 text-zinc-500"> - <LinkCustom - href="/login" - data-testid="login-link" - > - Login - </LinkCustom> - {' '} to get started playing - </p> + <LinkCustom href="/login">Login to get started playing</LinkCustom> </form> </Form> </div> - </section> + </section> ); }; -export default Register; +export default Register; \ No newline at end of file diff --git a/app/(main)/register/page.test.tsx b/app/(main)/register/page.test.tsx index 0a916216..36d7d66a 100644 --- a/app/(main)/register/page.test.tsx +++ b/app/(main)/register/page.test.tsx @@ -5,7 +5,7 @@ import { render, screen, fireEvent, waitFor } from '@testing-library/react'; import { toast } from 'react-hot-toast'; import Alert from '@/components/AlertNotification/AlertNotification'; import React, { useState as useStateMock } from 'react'; -import Register from './page'; +import RegisterPage from './page'; const mockLogin = jest.fn(); const mockPush = jest.fn(); @@ -177,7 +177,7 @@ describe('Register loading spinner', () => { setIsLoading, ]); - render(<Register />); + render(<RegisterPage />); await waitFor(() => { expect(screen.queryByTestId('loading-spinner')).toBeInTheDocument(); @@ -189,7 +189,7 @@ describe('Register loading spinner', () => { setIsLoading, ]); - render(<Register />); + render(<RegisterPage />); await waitFor(() => { expect(screen.queryByTestId('loading-spinner')).not.toBeInTheDocument(); diff --git a/components/Label/Label.tsx b/components/Label/Label.tsx index e500f27a..08bafb02 100644 --- a/components/Label/Label.tsx +++ b/components/Label/Label.tsx @@ -9,28 +9,25 @@ import { cva, type VariantProps } from 'class-variance-authority'; import { cn } from '../../utils/utils'; const labelVariants = cva( - 'font-normal leading-none w-full transition', + 'text-base font-normal leading-none text-foreground cursor-pointer flex gap-2 items-center rounded-xl border-2 border-border py-4 px-3 w-full transition', { variants: { - variant: { - default: 'text-sm text-zinc-300 cursor-text flex-col gap-1.5', - secondary: 'text-base text-zinc-50 cursor-pointer rounded-xl items-center py-4 px-3 border-2 border-zinc-800 peer-aria-checked:border-orange-600 peer-hover:bg-zinc-800 flex gap-2', - } + disabled: { + true: 'opacity-50 cursor-not-allowed', + false: 'peer-aria-checked:border-accent peer-hover:border-white' + }, }, - defaultVariants: { - variant: 'default' - } } ); const Label = React.forwardRef< React.ElementRef<typeof LabelPrimitive.Root>, - React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & + React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants> ->(({ className, variant, ...props }, ref) => ( +>(({ className, disabled, ...props }, ref) => ( <LabelPrimitive.Root ref={ref} - className={cn(labelVariants({ variant }), className)} + className={cn(labelVariants({ disabled }), className)} {...props} /> )); diff --git a/components/WeeklyPickButton/WeeklyPickButton.tsx b/components/WeeklyPickButton/WeeklyPickButton.tsx index 67fa79bc..bc9daa2c 100644 --- a/components/WeeklyPickButton/WeeklyPickButton.tsx +++ b/components/WeeklyPickButton/WeeklyPickButton.tsx @@ -65,4 +65,4 @@ const WeeklyPickButton: React.FC<WeeklyPickButtonProps> = ({ ); }; -export { WeeklyPickButton }; \ No newline at end of file +export { WeeklyPickButton } \ No newline at end of file From 5e155f8b7fd13ca4df36252597d67934af306a07 Mon Sep 17 00:00:00 2001 From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com> Date: Fri, 18 Oct 2024 11:40:30 -0400 Subject: [PATCH 37/42] fix (#273): update Labal unit test after merging develop --- components/Label/Label.test.tsx | 30 +++++++++++++----------------- components/Label/labelVariants.ts | 4 ---- 2 files changed, 13 insertions(+), 21 deletions(-) delete mode 100644 components/Label/labelVariants.ts diff --git a/components/Label/Label.test.tsx b/components/Label/Label.test.tsx index d8df2d3d..c9c77800 100644 --- a/components/Label/Label.test.tsx +++ b/components/Label/Label.test.tsx @@ -1,35 +1,32 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; import { Label } from './Label'; -import { labelVariants } from './labelVariants'; - -const variantClasses = { - default: 'text-sm text-zinc-300 cursor-text flex-col gap-1.5', - secondary: 'text-zinc-50 cursor-pointer rounded-xl items-center py-4 px-3 border-2 border-zinc-800 peer-aria-checked:border-orange-600 peer-hover:bg-zinc-800 flex', -}; describe('Label', () => { - labelVariants.forEach((variant) => { - it(`renders correctly with variant ${variant}`, () => { + const disabledVariants = [true, false]; + + disabledVariants.forEach((disabled) => { + it(`renders correctly when disabled is ${disabled}`, () => { render( - <Label data-testid="test-label" variant={variant}> + <Label data-testid="test-label" disabled={disabled}> Test Label </Label> ); const label = screen.getByTestId('test-label'); expect(label).toBeInTheDocument(); - if (variant) { - expect(label).toHaveClass(variantClasses[variant]); - } + + const expectedClass = disabled ? 'opacity-50 cursor-not-allowed' : 'peer-aria-checked:border-accent peer-hover:border-white'; + expect(label).toHaveClass(expectedClass); }); }); - it(`applies additional custom classes correctly`, () => { + it('applies additional custom classes correctly', () => { + const extraClasses = 'custom-class-label extra-custom-class'; render( <Label data-testid="custom-class-label" - className="custom-class-label extra-custom-class" + className={extraClasses} > Custom Test Label </Label> @@ -37,8 +34,7 @@ describe('Label', () => { const labelCustom = screen.getByTestId('custom-class-label'); expect(labelCustom).toBeInTheDocument(); - if (labelCustom.hasAttribute('className')) { - expect(labelCustom).toHaveClass('custom-class-label extra-custom-class'); - } + expect(labelCustom).toHaveClass(extraClasses); }); }); + diff --git a/components/Label/labelVariants.ts b/components/Label/labelVariants.ts deleted file mode 100644 index e987f161..00000000 --- a/components/Label/labelVariants.ts +++ /dev/null @@ -1,4 +0,0 @@ -// Copyright (c) Gridiron Survivor. -// Licensed under the MIT License. - -export const labelVariants: Array<'default' | 'secondary' | null | undefined> = ['default', 'secondary']; \ No newline at end of file From 0d380b257d3011c15d15ccb626d0058a152b2a8e Mon Sep 17 00:00:00 2001 From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com> Date: Sun, 20 Oct 2024 20:00:58 -0400 Subject: [PATCH 38/42] fix(#273): add labels to registration input fields --- app/(main)/register/Register.tsx | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/app/(main)/register/Register.tsx b/app/(main)/register/Register.tsx index 44e0f646..a13685b6 100644 --- a/app/(main)/register/Register.tsx +++ b/app/(main)/register/Register.tsx @@ -10,6 +10,7 @@ import { FormControl, FormField, FormItem, + FormLabel, FormMessage, } from '../../../components/Form/Form'; import { Input } from '@/components/Input/Input'; @@ -166,11 +167,14 @@ const Register = (): JSX.Element => { name="email" render={({ field }) => ( <FormItem> + <FormLabel className="border-none px-0 py-0 pb-2 pl-1"> + Email + </FormLabel> <FormControl> <Input data-testid="email" type="email" - placeholder="Email" + placeholder="Enter your email" {...field} /> </FormControl> @@ -187,11 +191,14 @@ const Register = (): JSX.Element => { name="password" render={({ field }) => ( <FormItem> + <FormLabel className="border-none px-0 py-0 pb-2 pl-1"> + Password + </FormLabel> <FormControl> <Input data-testid="password" type="password" - placeholder="Password" + placeholder="Enter your password" {...field} /> </FormControl> @@ -208,11 +215,14 @@ const Register = (): JSX.Element => { name="confirmPassword" render={({ field }) => ( <FormItem> + <FormLabel className="border-none px-0 py-0 pb-2 pl-1"> + Confirm Password + </FormLabel> <FormControl> <Input data-testid="confirm-password" type="password" - placeholder="Confirm Password" + placeholder="Confirm your password" {...field} /> </FormControl> From 8429c4a806e34be69927d81ab0ffbc48fec394e2 Mon Sep 17 00:00:00 2001 From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com> Date: Sun, 20 Oct 2024 20:05:56 -0400 Subject: [PATCH 39/42] fix(#273): update placeholder values for registration input fields --- app/(main)/register/Register.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/(main)/register/Register.tsx b/app/(main)/register/Register.tsx index a13685b6..fff49137 100644 --- a/app/(main)/register/Register.tsx +++ b/app/(main)/register/Register.tsx @@ -174,7 +174,7 @@ const Register = (): JSX.Element => { <Input data-testid="email" type="email" - placeholder="Enter your email" + placeholder="Your email" {...field} /> </FormControl> @@ -198,7 +198,7 @@ const Register = (): JSX.Element => { <Input data-testid="password" type="password" - placeholder="Enter your password" + placeholder="Your password" {...field} /> </FormControl> From 2640e7d0e0159fcaa9d0ebdc452afa93d8dad3e0 Mon Sep 17 00:00:00 2001 From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com> Date: Sun, 20 Oct 2024 20:20:52 -0400 Subject: [PATCH 40/42] fix(#273): wrap the link only around the Link word --- app/(main)/register/Register.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/app/(main)/register/Register.tsx b/app/(main)/register/Register.tsx index fff49137..6c8d02b9 100644 --- a/app/(main)/register/Register.tsx +++ b/app/(main)/register/Register.tsx @@ -247,7 +247,10 @@ const Register = (): JSX.Element => { type="submit" disabled={isDisabled} /> - <LinkCustom href="/login">Login to get started playing</LinkCustom> + <p className="pb-4 font-normal leading-7 text-muted-foreground"> + <LinkCustom href="/login">Login</LinkCustom> + {' '} to get started playing. + </p> </form> </Form> </div> From 4bc7c76c5a20e4806ade03a078315aee7a01f706 Mon Sep 17 00:00:00 2001 From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com> Date: Mon, 21 Oct 2024 13:09:33 -0400 Subject: [PATCH 41/42] fix(#273): remove extra lines --- components/Label/Label.tsx | 1 - components/LinkCustom/LinkCustom.tsx | 1 - components/WeeklyPickButton/WeeklyPickButton.tsx | 2 +- 3 files changed, 1 insertion(+), 3 deletions(-) diff --git a/components/Label/Label.tsx b/components/Label/Label.tsx index 08bafb02..2a93646e 100644 --- a/components/Label/Label.tsx +++ b/components/Label/Label.tsx @@ -34,4 +34,3 @@ const Label = React.forwardRef< Label.displayName = LabelPrimitive.Root.displayName; export { Label }; - diff --git a/components/LinkCustom/LinkCustom.tsx b/components/LinkCustom/LinkCustom.tsx index 1376e1d2..868ae100 100644 --- a/components/LinkCustom/LinkCustom.tsx +++ b/components/LinkCustom/LinkCustom.tsx @@ -40,4 +40,3 @@ const LinkCustom = ({ }; export default LinkCustom; - diff --git a/components/WeeklyPickButton/WeeklyPickButton.tsx b/components/WeeklyPickButton/WeeklyPickButton.tsx index bc9daa2c..67fa79bc 100644 --- a/components/WeeklyPickButton/WeeklyPickButton.tsx +++ b/components/WeeklyPickButton/WeeklyPickButton.tsx @@ -65,4 +65,4 @@ const WeeklyPickButton: React.FC<WeeklyPickButtonProps> = ({ ); }; -export { WeeklyPickButton } \ No newline at end of file +export { WeeklyPickButton }; \ No newline at end of file From 883b84ebd82611d93f442976e93a72cc08632447 Mon Sep 17 00:00:00 2001 From: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com> Date: Mon, 21 Oct 2024 13:37:55 -0400 Subject: [PATCH 42/42] fix(#273): add missing new line at the end of the file --- components/LinkCustom/LinkCustom.test.tsx | 2 +- components/WeeklyPickButton/WeeklyPickButton.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/LinkCustom/LinkCustom.test.tsx b/components/LinkCustom/LinkCustom.test.tsx index c8ded248..88686aa6 100644 --- a/components/LinkCustom/LinkCustom.test.tsx +++ b/components/LinkCustom/LinkCustom.test.tsx @@ -12,4 +12,4 @@ describe('LinkCustom Component', () => { expect(link).toHaveTextContent('Test link'); expect(link).toHaveAttribute('href', 'https://example.com'); }); -}); \ No newline at end of file +}); diff --git a/components/WeeklyPickButton/WeeklyPickButton.tsx b/components/WeeklyPickButton/WeeklyPickButton.tsx index 67fa79bc..f0dc9380 100644 --- a/components/WeeklyPickButton/WeeklyPickButton.tsx +++ b/components/WeeklyPickButton/WeeklyPickButton.tsx @@ -65,4 +65,4 @@ const WeeklyPickButton: React.FC<WeeklyPickButtonProps> = ({ ); }; -export { WeeklyPickButton }; \ No newline at end of file +export { WeeklyPickButton };