From 9269e2bde97975392d94bb5ad71dcb7bcd4a01fb Mon Sep 17 00:00:00 2001
From: Cody Epstein <codyepstein@gmail.com>
Date: Tue, 22 Oct 2024 11:57:46 -0700
Subject: [PATCH 1/2] Cody/increase weekly pick button responsiveness (#611)

Closes #601

- Changed flex-direction of label on smallest screens to `flex-col` to
stack team image and name vertically

![Recording 2024-10-16 at 10 37
05](https://github.com/user-attachments/assets/2ced0e00-c0dc-4d7e-9316-7baeca587d29)
---
 components/WeeklyPickButton/WeeklyPickButton.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/components/WeeklyPickButton/WeeklyPickButton.tsx b/components/WeeklyPickButton/WeeklyPickButton.tsx
index f0dc9380..382c43f8 100644
--- a/components/WeeklyPickButton/WeeklyPickButton.tsx
+++ b/components/WeeklyPickButton/WeeklyPickButton.tsx
@@ -48,7 +48,12 @@ const WeeklyPickButton: React.FC<WeeklyPickButtonProps> = ({
           data-testid="team-radio"
         />
 
-        <Label htmlFor={team} data-testid="team-label" disabled={isDisabled}>
+        <Label
+          htmlFor={team}
+          data-testid="team-label"
+          disabled={isDisabled}
+          className="flex-col sm:flex-row"
+        >
           <Image
             src={src}
             alt={team}

From 6204626e3ae0be49fe5d374f4aa56d658d550c40 Mon Sep 17 00:00:00 2001
From: Corina Murg <115652409+CorinaMurg@users.noreply.github.com>
Date: Wed, 23 Oct 2024 13:26:29 -0400
Subject: [PATCH 2/2] fix (#273): a11y audit signup page (#303)

Fixes: #273

### Changes:
- add `title` element (completed by Chris). This involved setting up a
server-side page, now responsible for rendering the `Register` component
and setting its metadata (title and description). This approach is what
Next.js expects. It wants to integrate the metadata into the server
response when the page is initially loaded.
- add `FormLabel` to input fields
- create test for `Label` component

### Remaining (until design updates):
- change input border color to meet contrast ratio

---------

Co-authored-by: Cor-Ina <115652409+Cor-Ina@users.noreply.github.com>
Co-authored-by: Chris Nowicki <102450568+chris-nowicki@users.noreply.github.com>
Co-authored-by: Ryan Furrer <ryandotfurrer@gmail.com>
Co-authored-by: Shashi Lo <362527+shashilo@users.noreply.github.com>
---
 app/(main)/register/Register.tsx  | 261 ++++++++++++++++++++++++++++++
 app/(main)/register/page.test.tsx |  10 +-
 app/(main)/register/page.tsx      | 249 ++--------------------------
 components/Label/Label.test.tsx   |  40 +++++
 4 files changed, 317 insertions(+), 243 deletions(-)
 create mode 100644 app/(main)/register/Register.tsx
 create mode 100644 components/Label/Label.test.tsx

diff --git a/app/(main)/register/Register.tsx b/app/(main)/register/Register.tsx
new file mode 100644
index 00000000..6c8d02b9
--- /dev/null
+++ b/app/(main)/register/Register.tsx
@@ -0,0 +1,261 @@
+// Copyright (c) Gridiron Survivor.
+// Licensed under the MIT License.
+
+'use client';
+import { AlertVariants } from '@/components/AlertNotification/Alerts.enum';
+import { Button } from '@/components/Button/Button';
+import { Control, useForm, useWatch, SubmitHandler } from 'react-hook-form';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  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 LinkCustom from '@/components/LinkCustom/LinkCustom';
+import Logo from '@/components/Logo/Logo';
+import logo from '/public/assets/logo-colored-outline.svg';
+import React, { JSX, useEffect, useState } from 'react';
+import LoadingSpinner from '@/components/LoadingSpinner/LoadingSpinner';
+
+const RegisterUserSchema = z
+  .object({
+    email: z
+      .string()
+      .min(1, { message: 'Please enter an email address' })
+      .email({ message: 'Please enter a valid email address' }),
+    password: z
+      .string()
+      .min(1, { message: 'Please enter a password' })
+      .min(8, { message: 'Password must be at least 8 characters' }),
+    confirmPassword: z
+      .string()
+      .min(1, { message: 'Please confirm your password' })
+      .min(8, { message: 'Password must be at least 8 characters' }),
+  })
+  .refine((data) => data.password === data.confirmPassword, {
+    message: "Passwords don't match",
+    path: ['confirmPassword'],
+  });
+
+type RegisterUserSchemaType = z.infer<typeof RegisterUserSchema>;
+
+/**
+ * Renders the registration page.
+ * @returns {JSX.Element} The rendered registration page.
+ */
+const Register = (): JSX.Element => {
+  const router = useRouter();
+  const { login, isSignedIn } = useAuthContext();
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    if (isSignedIn) {
+      router.push('/league/all');
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isSignedIn]);
+
+  const form = useForm<RegisterUserSchemaType>({
+    resolver: zodResolver(RegisterUserSchema),
+  });
+
+  /**
+   * The current value of the 'email' field in the form.
+   * @type {string}
+   */
+  const email: string = useWatch({
+    control: form.control,
+    name: 'email',
+    defaultValue: '',
+  });
+
+  /**
+   * The current value of the 'password' field in the form.
+   * @type {string}
+   */
+  const password: string = useWatch({
+    control: form.control,
+    name: 'password',
+    defaultValue: '',
+  });
+
+  /**
+   * The current value of the 'confirmPassword' field in the form.
+   * @type {string}
+   */
+  const confirmPassword: string = useWatch({
+    control: form.control,
+    name: 'confirmPassword',
+    defaultValue: '',
+  });
+
+  /**
+   * A function that handles form submission.
+   * @param {RegisterUserSchemaType} data - The data submitted in the form.
+   * @returns {Promise<void>} Promise that resolves after form submission is processed.
+   */
+  const onSubmit: SubmitHandler<RegisterUserSchemaType> = async (
+    data: RegisterUserSchemaType,
+  ): Promise<void> => {
+    try {
+      setIsLoading(true);
+      await registerAccount(data);
+      await login(data);
+      toast.custom(
+        <Alert
+          variant={AlertVariants.Success}
+          message="You have successfully registered your account."
+        />,
+      );
+    } catch (error) {
+      console.error('Registration Failed', error);
+      toast.custom(
+        <Alert variant={AlertVariants.Error} message="Something went wrong!" />,
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const isDisabled = !email || !password || password !== confirmPassword;
+
+  return (
+    <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 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">
+          <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-muted-foreground">
+            If you have an existing account{' '}
+            <LinkCustom href="/login">Login!</LinkCustom>
+          </p>
+        </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>
+                  <FormLabel className="border-none px-0 py-0 pb-2 pl-1">
+                    Email
+                  </FormLabel>
+                  <FormControl>
+                    <Input
+                      data-testid="email"
+                      type="email"
+                      placeholder="Your email"
+                      {...field}
+                    />
+                  </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>
+                  <FormLabel className="border-none px-0 py-0 pb-2 pl-1">
+                    Password
+                  </FormLabel>
+                  <FormControl>
+                    <Input
+                      data-testid="password"
+                      type="password"
+                      placeholder="Your password"
+                      {...field}
+                    />
+                  </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>
+                  <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 your password"
+                      {...field}
+                    />
+                  </FormControl>
+                  {form.formState.errors?.confirmPassword && (
+                    <FormMessage>
+                      {form.formState.errors?.confirmPassword.message}
+                    </FormMessage>
+                  )}
+                </FormItem>
+              )}
+            />
+
+            <Button
+              data-testid="continue-button"
+              label={
+                isLoading ? (
+                  <LoadingSpinner data-testid="loading-spinner" />
+                ) : (
+                  'Continue'
+                )
+              }
+              type="submit"
+              disabled={isDisabled}
+            />
+            <p className="pb-4 font-normal leading-7 text-muted-foreground">
+              <LinkCustom href="/login">Login</LinkCustom>
+              {' '} to get started playing.
+            </p>
+          </form>
+        </Form>
+      </div>
+    </section>
+  );
+};
+
+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 e03874c0..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();
@@ -57,7 +57,7 @@ describe('Register', () => {
       .spyOn(React, 'useState')
       .mockImplementation(() => [false, setIsLoading]);
 
-    render(<Register />);
+    render(<RegisterPage />);
 
     confirmPasswordInput = screen.getByTestId('confirm-password');
     continueButton = screen.getByTestId('continue-button');
@@ -98,7 +98,7 @@ describe('Register', () => {
   it('redirects to /league/all when the button is clicked', async () => {
     mockUseAuthContext.isSignedIn = true;
 
-    render(<Register />);
+    render(<RegisterPage />);
 
     await waitFor(() => {
       expect(mockPush).toHaveBeenCalledWith('/league/all');
@@ -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/app/(main)/register/page.tsx b/app/(main)/register/page.tsx
index 4d1b8e8d..32323ed3 100644
--- a/app/(main)/register/page.tsx
+++ b/app/(main)/register/page.tsx
@@ -1,248 +1,21 @@
 // Copyright (c) Gridiron Survivor.
 // Licensed under the MIT License.
 
-'use client';
-import { AlertVariants } from '@/components/AlertNotification/Alerts.enum';
-import { Button } from '@/components/Button/Button';
-import { Control, useForm, useWatch, SubmitHandler } from 'react-hook-form';
-import {
-  Form,
-  FormControl,
-  FormField,
-  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 LinkCustom from '@/components/LinkCustom/LinkCustom';
-import Logo from '@/components/Logo/Logo';
-import logo from '/public/assets/logo-colored-outline.svg';
-import React, { JSX, useEffect, useState } from 'react';
-import LoadingSpinner from '@/components/LoadingSpinner/LoadingSpinner';
+import { JSX } from 'react';
+import { Metadata } from 'next';
+import Register from './Register';
 
-const RegisterUserSchema = z
-  .object({
-    email: z
-      .string()
-      .min(1, { message: 'Please enter an email address' })
-      .email({ message: 'Please enter a valid email address' }),
-    password: z
-      .string()
-      .min(1, { message: 'Please enter a password' })
-      .min(8, { message: 'Password must be at least 8 characters' }),
-    confirmPassword: z
-      .string()
-      .min(1, { message: 'Please confirm your password' })
-      .min(8, { message: 'Password must be at least 8 characters' }),
-  })
-  .refine((data) => data.password === data.confirmPassword, {
-    message: "Passwords don't match",
-    path: ['confirmPassword'],
-  });
-
-type RegisterUserSchemaType = z.infer<typeof RegisterUserSchema>;
+export const metadata: Metadata = {
+  title: 'Registration | Gridiron Survivor',
+  description: 'Fantasy Football Survivor Pool',
+};
 
 /**
  * Renders the registration page.
  * @returns {JSX.Element} The rendered registration page.
  */
-const Register = (): JSX.Element => {
-  const router = useRouter();
-  const { login, isSignedIn } = useAuthContext();
-  const [isLoading, setIsLoading] = useState(false);
-
-  useEffect(() => {
-    if (isSignedIn) {
-      router.push('/league/all');
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isSignedIn]);
-
-  const form = useForm<RegisterUserSchemaType>({
-    resolver: zodResolver(RegisterUserSchema),
-  });
-
-  /**
-   * The current value of the 'email' field in the form.
-   * @type {string}
-   */
-  const email: string = useWatch({
-    control: form.control,
-    name: 'email',
-    defaultValue: '',
-  });
-
-  /**
-   * The current value of the 'password' field in the form.
-   * @type {string}
-   */
-  const password: string = useWatch({
-    control: form.control,
-    name: 'password',
-    defaultValue: '',
-  });
-
-  /**
-   * The current value of the 'confirmPassword' field in the form.
-   * @type {string}
-   */
-  const confirmPassword: string = useWatch({
-    control: form.control,
-    name: 'confirmPassword',
-    defaultValue: '',
-  });
-
-  /**
-   * A function that handles form submission.
-   * @param {RegisterUserSchemaType} data - The data submitted in the form.
-   * @returns {Promise<void>} Promise that resolves after form submission is processed.
-   */
-  const onSubmit: SubmitHandler<RegisterUserSchemaType> = async (
-    data: RegisterUserSchemaType,
-  ): Promise<void> => {
-    try {
-      setIsLoading(true);
-      await registerAccount(data);
-      await login(data);
-      toast.custom(
-        <Alert
-          variant={AlertVariants.Success}
-          message="You have successfully registered your account."
-        />,
-      );
-    } catch (error) {
-      console.error('Registration Failed', error);
-      toast.custom(
-        <Alert variant={AlertVariants.Error} message="Something went wrong!" />,
-      );
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const isDisabled = !email || !password || password !== confirmPassword;
-
-  return (
-    <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 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">
-          <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-muted-foreground">
-            If you have an existing account{' '}
-            <LinkCustom href="/login">Login!</LinkCustom>
-          </p>
-        </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>
-                    <Input
-                      data-testid="email"
-                      type="email"
-                      placeholder="Email"
-                      {...field}
-                    />
-                  </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>
-                    <Input
-                      data-testid="password"
-                      type="password"
-                      placeholder="Password"
-                      {...field}
-                    />
-                  </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>
-                    <Input
-                      data-testid="confirm-password"
-                      type="password"
-                      placeholder="Confirm Password"
-                      {...field}
-                    />
-                  </FormControl>
-                  {form.formState.errors?.confirmPassword && (
-                    <FormMessage>
-                      {form.formState.errors?.confirmPassword.message}
-                    </FormMessage>
-                  )}
-                </FormItem>
-              )}
-            />
-
-            <Button
-              data-testid="continue-button"
-              label={
-                isLoading ? (
-                  <LoadingSpinner data-testid="loading-spinner" />
-                ) : (
-                  'Continue'
-                )
-              }
-              type="submit"
-              disabled={isDisabled}
-            />
-            <LinkCustom href="/login">Login to get started playing</LinkCustom>
-          </form>
-        </Form>
-      </div>
-    </section>
-  );
+const RegisterPage = (): JSX.Element => {
+  return <Register />;
 };
-
-export default Register;
+  
+export default RegisterPage;
\ No newline at end of file
diff --git a/components/Label/Label.test.tsx b/components/Label/Label.test.tsx
new file mode 100644
index 00000000..c9c77800
--- /dev/null
+++ b/components/Label/Label.test.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Label } from './Label'; 
+
+describe('Label', () => {
+  const disabledVariants = [true, false]; 
+
+  disabledVariants.forEach((disabled) => {
+    it(`renders correctly when disabled is ${disabled}`, () => {
+      render(
+        <Label data-testid="test-label" disabled={disabled}>
+          Test Label
+        </Label>
+      );
+
+      const label = screen.getByTestId('test-label');
+      expect(label).toBeInTheDocument();
+
+      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', () => {
+    const extraClasses = 'custom-class-label extra-custom-class';
+    render(
+      <Label
+        data-testid="custom-class-label"
+        className={extraClasses}
+      >
+        Custom Test Label
+      </Label>
+    );
+
+    const labelCustom = screen.getByTestId('custom-class-label');
+    expect(labelCustom).toBeInTheDocument();
+    expect(labelCustom).toHaveClass(extraClasses);
+  });
+});
+