From daa28fddd38a579b6c1349a9e59524fb37768cb6 Mon Sep 17 00:00:00 2001
From: Tobias <tobias@fixmycity.de>
Date: Fri, 23 Dec 2022 09:00:08 +0100
Subject: [PATCH] Refactor LayoutMiddleBox for auth pages; solve className on
 body tag

---
 src/auth/components/LoginForm.tsx        |  6 ++--
 src/auth/components/SignupForm.tsx       |  6 ++--
 src/core/components/forms/FormLayout.tsx | 31 -------------------
 src/core/components/forms/index.ts       |  1 -
 src/core/layouts/Layout.tsx              |  5 +++-
 src/core/layouts/LayoutArticle.tsx       |  8 +++--
 src/core/layouts/LayoutMiddleBox.tsx     | 38 ++++++++++++++++++++++++
 src/core/layouts/Logo/Logo.tsx           |  6 ++++
 src/core/layouts/Logo/index.ts           |  1 +
 src/core/layouts/index.ts                |  2 ++
 src/core/styles/index.css                | 11 +++++++
 src/pages/_document.tsx                  |  1 +
 src/pages/auth/forgot-password.tsx       |  7 ++---
 src/pages/auth/reset-password.tsx        |  5 ++--
 14 files changed, 79 insertions(+), 49 deletions(-)
 delete mode 100644 src/core/components/forms/FormLayout.tsx
 create mode 100644 src/core/layouts/LayoutMiddleBox.tsx
 create mode 100644 src/core/layouts/Logo/Logo.tsx
 create mode 100644 src/core/layouts/Logo/index.ts

diff --git a/src/auth/components/LoginForm.tsx b/src/auth/components/LoginForm.tsx
index 0bd5be88..79a7202e 100644
--- a/src/auth/components/LoginForm.tsx
+++ b/src/auth/components/LoginForm.tsx
@@ -3,10 +3,10 @@ import { useMutation } from "@blitzjs/rpc"
 import { AuthenticationError, PromiseReturnType } from "blitz"
 import login from "src/auth/mutations/login"
 import { Login } from "src/auth/validations"
-import { FormLayout } from "src/core/components/forms"
 import { Form, FORM_ERROR } from "src/core/components/forms/Form"
 import { LabeledTextField } from "src/core/components/forms/LabeledTextField"
 import { Link } from "src/core/components/links"
+import { LayoutMiddleBox } from "src/core/layouts"
 
 type LoginFormProps = {
   onSuccess?: (user: PromiseReturnType<typeof login>) => void
@@ -16,7 +16,7 @@ export const LoginForm = (props: LoginFormProps) => {
   const [loginMutation] = useMutation(login)
 
   return (
-    <FormLayout title="Einloggen" subtitle="Willkommen zurück!">
+    <LayoutMiddleBox title="Einloggen" subtitle="Willkommen zurück!">
       <Form
         className="space-y-6"
         submitText="Einloggen"
@@ -50,7 +50,7 @@ export const LoginForm = (props: LoginFormProps) => {
       <div className="mt-4">
         Oder <Link href={Routes.SignupPage()}>registrieren</Link>
       </div>
-    </FormLayout>
+    </LayoutMiddleBox>
   )
 }
 
diff --git a/src/auth/components/SignupForm.tsx b/src/auth/components/SignupForm.tsx
index 87407118..f8c39466 100644
--- a/src/auth/components/SignupForm.tsx
+++ b/src/auth/components/SignupForm.tsx
@@ -2,10 +2,10 @@ import { Routes } from "@blitzjs/next"
 import { useMutation } from "@blitzjs/rpc"
 import signup from "src/auth/mutations/signup"
 import { Signup } from "src/auth/validations"
-import { FormLayout } from "src/core/components/forms"
 import { Form, FORM_ERROR } from "src/core/components/forms/Form"
 import { LabeledTextField } from "src/core/components/forms/LabeledTextField"
 import { Link } from "src/core/components/links"
+import { LayoutMiddleBox } from "src/core/layouts"
 
 type SignupFormProps = {
   onSuccess?: () => void
@@ -29,7 +29,7 @@ export const SignupForm = (props: SignupFormProps) => {
   }
 
   return (
-    <FormLayout title="Registrieren" subtitle="Willkommen!">
+    <LayoutMiddleBox title="Registrieren" subtitle="Willkommen!">
       <Form
         className="space-y-6"
         submitText="Registrieren"
@@ -67,7 +67,7 @@ export const SignupForm = (props: SignupFormProps) => {
           anmelden
         </Link>
       </div>
-    </FormLayout>
+    </LayoutMiddleBox>
   )
 }
 
diff --git a/src/core/components/forms/FormLayout.tsx b/src/core/components/forms/FormLayout.tsx
deleted file mode 100644
index aa0e21f3..00000000
--- a/src/core/components/forms/FormLayout.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { EyeDropperIcon } from "@heroicons/react/24/solid"
-import Head from "next/head"
-import React from "react"
-
-type Props = {
-  title: string
-  subtitle?: string
-  children: React.ReactNode
-}
-
-export const FormLayout: React.FC<Props> = ({ title, subtitle, children }) => {
-  return (
-    <div className="flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
-      <Head>
-        <body className="bg-indigo-50" />
-      </Head>
-
-      <div className="sm:mx-auto sm:w-full sm:max-w-md">
-        <EyeDropperIcon className="mx-auto h-12 w-auto" />
-        <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">
-          {title}
-        </h2>
-        {Boolean(subtitle) && <p className="mt-2 text-center text-sm text-gray-600">{subtitle}</p>}
-      </div>
-
-      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-        <div className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">{children}</div>
-      </div>
-    </div>
-  )
-}
diff --git a/src/core/components/forms/index.ts b/src/core/components/forms/index.ts
index 96e01650..e18feade 100644
--- a/src/core/components/forms/index.ts
+++ b/src/core/components/forms/index.ts
@@ -1,3 +1,2 @@
 export * from "./Form"
 export * from "./LabeledTextField"
-export * from "./FormLayout"
diff --git a/src/core/layouts/Layout.tsx b/src/core/layouts/Layout.tsx
index 409fad73..f1bda610 100644
--- a/src/core/layouts/Layout.tsx
+++ b/src/core/layouts/Layout.tsx
@@ -2,12 +2,15 @@ import { BlitzLayout } from "@blitzjs/next"
 import Head from "next/head"
 import React from "react"
 
-type Props = { children?: React.ReactNode }
+type Props = {
+  children?: React.ReactNode
+}
 
 export const Layout: BlitzLayout<Props> = ({ children }) => {
   return (
     <>
       <Head>
+        {/* Reminder: We cannot use this to set the <body class>. See index.css for our workaround. */}
         <link rel="icon" href="/favicon.svg" />
       </Head>
       {children}
diff --git a/src/core/layouts/LayoutArticle.tsx b/src/core/layouts/LayoutArticle.tsx
index 9f3e49a1..caa9a19c 100644
--- a/src/core/layouts/LayoutArticle.tsx
+++ b/src/core/layouts/LayoutArticle.tsx
@@ -2,11 +2,13 @@ import { BlitzLayout } from "@blitzjs/next"
 import React from "react"
 import { Layout } from "./Layout"
 
-type Props = { children?: React.ReactNode }
+type Props = {
+  children?: React.ReactNode
+}
 
-export const LayoutArticle: BlitzLayout<Props> = ({ children, ...props }) => {
+export const LayoutArticle: BlitzLayout<Props> = ({ children }) => {
   return (
-    <Layout {...props}>
+    <Layout>
       <div className="prose mx-auto">{children}</div>
     </Layout>
   )
diff --git a/src/core/layouts/LayoutMiddleBox.tsx b/src/core/layouts/LayoutMiddleBox.tsx
new file mode 100644
index 00000000..959c9ff1
--- /dev/null
+++ b/src/core/layouts/LayoutMiddleBox.tsx
@@ -0,0 +1,38 @@
+import { EyeDropperIcon } from "@heroicons/react/24/solid"
+import Head from "next/head"
+import React from "react"
+import { Layout } from "./Layout"
+import { Logo } from "./Logo"
+
+type Props = {
+  title?: string
+  subtitle?: string
+  children: React.ReactNode
+}
+
+export const LayoutMiddleBox: React.FC<Props> = ({ title, subtitle, children }) => {
+  return (
+    <Layout>
+      <div className="set-bg-indigo-50-on-body">
+        <div className="flex min-h-full flex-col justify-center py-12 sm:px-6 lg:px-8">
+          <div className="sm:mx-auto sm:w-full sm:max-w-md">
+            <Logo />
+
+            {Boolean(title) && (
+              <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">
+                {title}
+              </h2>
+            )}
+            {Boolean(subtitle) && (
+              <p className="mt-2 text-center text-sm text-gray-600">{subtitle}</p>
+            )}
+          </div>
+
+          <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
+            <div className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">{children}</div>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  )
+}
diff --git a/src/core/layouts/Logo/Logo.tsx b/src/core/layouts/Logo/Logo.tsx
new file mode 100644
index 00000000..1eb57ca3
--- /dev/null
+++ b/src/core/layouts/Logo/Logo.tsx
@@ -0,0 +1,6 @@
+import { EyeDropperIcon } from "@heroicons/react/24/solid"
+import React from "react"
+
+export const Logo: React.FC = () => {
+  return <EyeDropperIcon className="mx-auto h-12 w-auto" />
+}
diff --git a/src/core/layouts/Logo/index.ts b/src/core/layouts/Logo/index.ts
new file mode 100644
index 00000000..9f59dd1e
--- /dev/null
+++ b/src/core/layouts/Logo/index.ts
@@ -0,0 +1 @@
+export * from "./Logo"
diff --git a/src/core/layouts/index.ts b/src/core/layouts/index.ts
index 6f74ed4c..613f795e 100644
--- a/src/core/layouts/index.ts
+++ b/src/core/layouts/index.ts
@@ -1,3 +1,5 @@
 export * from "./Layout"
 export * from "./LayoutArticle"
+export * from "./LayoutMiddleBox"
+export * from "./Logo"
 export * from "./MetaTags"
diff --git a/src/core/styles/index.css b/src/core/styles/index.css
index 58588273..d8caeb41 100644
--- a/src/core/styles/index.css
+++ b/src/core/styles/index.css
@@ -12,6 +12,17 @@
   #__next {
     @apply flex w-full h-full flex-none flex-col;
   }
+
+  /*
+  This is wild…
+  The next.js Head component does not provide a way to add classes to the <body> tag.
+  One can only add static lasses via _document.tsx.
+  There are complex solutions involving `pagePros` – thanks @ https://stackoverflow.com/a/66358460/729221
+  However, we can use css instead – thanks @ https://stackoverflow.com/a/21253034/729221
+  */
+  body:has(#__next .set-bg-indigo-50-on-body) {
+    @apply bg-indigo-50;
+  }
 }
 
 @layer components {
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index 45301de7..196248bf 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -6,6 +6,7 @@ class MyDocument extends Document {
   //   const initialProps = await Document.getInitialProps(ctx)
   //   return {...initialProps}
   // }
+
   render() {
     return (
       <Html lang="de" className="h-full">
diff --git a/src/pages/auth/forgot-password.tsx b/src/pages/auth/forgot-password.tsx
index 66b2b907..9d2b9406 100644
--- a/src/pages/auth/forgot-password.tsx
+++ b/src/pages/auth/forgot-password.tsx
@@ -2,10 +2,9 @@ import { BlitzPage } from "@blitzjs/next"
 import { useMutation } from "@blitzjs/rpc"
 import forgotPassword from "src/auth/mutations/forgotPassword"
 import { ForgotPassword } from "src/auth/validations"
-import { FormLayout } from "src/core/components/forms"
 import { Form, FORM_ERROR } from "src/core/components/forms/Form"
 import { LabeledTextField } from "src/core/components/forms/LabeledTextField"
-import { Layout, MetaTags } from "src/core/layouts"
+import { Layout, LayoutMiddleBox, MetaTags } from "src/core/layouts"
 
 const ForgotPasswordPage: BlitzPage = () => {
   const [forgotPasswordMutation, { isSuccess }] = useMutation(forgotPassword)
@@ -13,7 +12,7 @@ const ForgotPasswordPage: BlitzPage = () => {
   return (
     <Layout>
       <MetaTags noindex title="Passwort vergessen" />
-      <FormLayout title="Passwort vergessen">
+      <LayoutMiddleBox title="Passwort vergessen">
         {isSuccess ? (
           <>
             <h2>Anfrage empfangen</h2>
@@ -41,7 +40,7 @@ const ForgotPasswordPage: BlitzPage = () => {
             <LabeledTextField name="email" label="Email" placeholder="Email" />
           </Form>
         )}
-      </FormLayout>
+      </LayoutMiddleBox>
     </Layout>
   )
 }
diff --git a/src/pages/auth/reset-password.tsx b/src/pages/auth/reset-password.tsx
index 0bad8f0b..0cdfa630 100644
--- a/src/pages/auth/reset-password.tsx
+++ b/src/pages/auth/reset-password.tsx
@@ -5,10 +5,9 @@ import { useRouter } from "next/router"
 import { useEffect, useState } from "react"
 import resetPassword from "src/auth/mutations/resetPassword"
 import { ResetPassword } from "src/auth/validations"
-import { FormLayout } from "src/core/components/forms"
 import { Form, FORM_ERROR } from "src/core/components/forms/Form"
 import { LabeledTextField } from "src/core/components/forms/LabeledTextField"
-import { Layout, MetaTags } from "src/core/layouts"
+import { Layout, LayoutMiddleBox, MetaTags } from "src/core/layouts"
 
 const ResetPasswordPage: BlitzPage = () => {
   const [token, setToken] = useState("")
@@ -70,7 +69,7 @@ ResetPasswordPage.redirectAuthenticatedTo = "/"
 ResetPasswordPage.getLayout = (page) => (
   <Layout>
     <MetaTags noindex title="Passwort vergessen" />
-    <FormLayout title="Neues Passwort vergeben">{page}</FormLayout>
+    <LayoutMiddleBox title="Neues Passwort vergeben">{page}</LayoutMiddleBox>
   </Layout>
 )