Require logon for Zone pages

src/app/[locale]/(main)/auth/sign-in/page.tsx

@@ -1,65 +1,13 @@
 "use client";
 
-import { useState } from "react";
+import { useTranslations } from "next-intl";
+import { useSearchParams } from "next/navigation";
 
-import { zodResolver } from "@hookform/resolvers/zod";
-import { signIn } from "next-auth/react";
-import { useLocale, useTranslations } from "next-intl";
-import { FormProvider, useForm } from "react-hook-form";
-import { z } from "zod";
-
-import { clearMessage } from "@/components/InfoMessage";
-import InfoMessage from "@/components/InfoMessage";
-import { TextField } from "@/components/form/TextField";
-
-const signInSchema = z.object({
-  email: z.string().email(),
-});
-
-type SignInFormValues = z.infer<typeof signInSchema>;
+import { SignInForm } from "@/components/SignInForm";
 
 export default function SignIn() {
   const t = useTranslations("SignIn");
-  const locale = useLocale();
-
-  const [responseMessage, setResponseMessage] = useState({
-    isSuccessful: false,
-    message: "",
-  });
-
-  const form = useForm<SignInFormValues>({
-    resolver: zodResolver(signInSchema),
-  });
-
-  const onSubmit = async ({ email }: SignInFormValues) => {
-    try {
-      const result = await signIn("nodemailer", {
-        email,
-        redirect: false,
-        callbackUrl: `/${locale}/tournaments`,
-      });
-
-      if (result?.error) {
-        throw new Error(result.error);
-      } else if (result?.ok) {
-        setResponseMessage({
-          isSuccessful: true,
-          message: t("checkEmail"),
-        });
-
-        form.reset();
-      }
-    } catch (err: unknown) {
-      console.log(err);
-
-      setResponseMessage({
-        isSuccessful: false,
-        message: t("failure"),
-      });
-
-      clearMessage(setResponseMessage);
-    }
-  };
+  const params = useSearchParams();
 
   return (
     <section className="grid place-items-center bg-white pb-20 dark:bg-gray-800">
@@ -74,30 +22,9 @@ export default function SignIn() {
           {t("info")}
         </p>
 
-        <FormProvider {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-            <TextField
-              name="email"
-              control={form.control}
-              label={t("emailLabel")}
-              placeholder={t("emailPlaceholder")}
-              required
-            />
-
-            <button
-              disabled={form.formState.isSubmitting}
-              type="submit"
-              className="rounded-lg bg-primary-600 px-5 py-3 text-center text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 disabled:opacity-25 dark:text-white dark:hover:bg-primary-700 dark:focus:ring-primary-800 sm:w-fit"
-            >
-              {t("signInButton")}
-            </button>
-
-            <InfoMessage
-              className="text-center"
-              responseMessage={responseMessage}
-            />
-          </form>
-        </FormProvider>
+        <SignInForm
+          callbackPath={params.get("callbackUrl") ?? "/tournaments"}
+        />
       </div>
     </section>
   );

src/app/[locale]/(main)/zones/create/page.tsx

@@ -35,7 +35,7 @@ const CreateZone = () => {
   };
 
   return (
-    <div className="mx-auto max-w-screen-md px-4 pb-20 pt-8 lg:pt-16">
+    <div>
       <h2
         className="mb-4 text-center text-4xl font-extrabold tracking-tight text-gray-900 dark:text-white"
         data-test="header2"

src/app/[locale]/(main)/zones/edit/[id]/page.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import { useTranslations } from "next-intl";
 import { useParams } from "next/navigation";
 
@@ -17,7 +17,6 @@ const EditZone = () => {
   const t = useTranslations("Zones");
   const router = useRouter();
   const params = useParams();
-  const queryClient = useQueryClient();
 
   const [responseMessage, setResponseMessage] = useState({
     isSuccessful: false,
@@ -75,7 +74,7 @@ const EditZone = () => {
   };
 
   return (
-    <div className="mx-auto max-w-screen-md px-4 pb-20 pt-8 lg:pt-16">
+    <div>
       <h2
         className="mb-4 text-center text-4xl font-extrabold tracking-tight text-gray-900 dark:text-white"
         data-test="header2"

src/app/[locale]/(main)/zones/layout.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { ReactNode } from "react";
+
+import { useSession } from "next-auth/react";
+import { useTranslations } from "next-intl";
+
+import { SignInForm } from "@/components/SignInForm";
+
+export default function ZonesLayout({ children }: { children: ReactNode }) {
+  const { data: sessionData } = useSession();
+  const t = useTranslations("Zones");
+
+  return (
+    <div className="mx-auto max-w-screen-md px-4 py-8 lg:py-16">
+      {!sessionData ? (
+        <div>
+          <h2
+            className="mb-4 text-center text-4xl font-extrabold tracking-tight text-gray-900 dark:text-white"
+            data-test="header2"
+          >
+            {t("title")}
+          </h2>
+
+          <p className="mb-8 text-center font-light text-gray-500 dark:text-gray-400 sm:text-xl lg:mb-16">
+            {t("logonRequired")}
+          </p>
+
+          <SignInForm />
+        </div>
+      ) : (
+        children
+      )}
+    </div>
+  );
+}

src/app/[locale]/(main)/zones/page.tsx

@@ -34,7 +34,7 @@ const Zones = () => {
   const zones = data?.data ?? [];
 
   return (
-    <div className="mx-auto max-w-screen-md px-4 py-8 lg:py-16">
+    <div>
       <h2
         className="mb-4 text-center text-4xl font-extrabold tracking-tight text-gray-900 dark:text-white"
         data-test="header2"