Refactor LayoutMiddleBox for auth pages; solve className on body tag

FixMyBerlin · Dec 23, 2022 · daa28fd · daa28fd
1 parent e6785e2
commit daa28fd
Show file tree

Hide file tree

Showing 14 changed files with 79 additions and 49 deletions.
diff --git 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
@@ -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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1 @@
+export * from "./Logo"
diff --git 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
@@ -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
@@ -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
@@ -2,18 +2,17 @@ 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)
 
   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
@@ -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>
 )