handle error in login modal

src/components/common/LoginModal.tsx

@@ -3,13 +3,19 @@ import { useStore } from "~/lib/store"
 import { Dialog } from "@headlessui/react"
 import { trpc } from "~/lib/trpc"
 import { useForm } from "react-hook-form"
+import { useEffect } from "react"
 
 export const LoginModal: React.FC = () => {
   const [loginModalOpened, setLoginModalOpened] = useStore((store) => [
     store.loginModalOpened,
     store.setLoginModalOpened,
   ])
-  const requestLoginLink = trpc.useMutation("auth.requestLoginLink")
+  const {
+    mutate: requestLoginLink,
+    status: requestLoginLinkStatus,
+    data,
+    error,
+  } = trpc.useMutation("auth.requestLoginLink")
 
   const form = useForm({
     defaultValues: {
@@ -18,7 +24,7 @@ export const LoginModal: React.FC = () => {
   })
 
   const handleSubmit = form.handleSubmit((values) => {
-    requestLoginLink.mutate({
+    requestLoginLink({
       email: values.email,
       url: location.href,
     })
@@ -39,12 +45,13 @@ export const LoginModal: React.FC = () => {
           </Dialog.Title>
 
           <div className="p-8">
-            {requestLoginLink.data && (
+            {data && (
               <div className="mb-5">
                 We just emailed you with a link to log in, please check your
                 inbox and spam folder in case you can{`'`}t find it.
               </div>
             )}
+            {error && <div className="mb-5 text-red-500">{error.message}</div>}
             <form className="space-y-5" onSubmit={handleSubmit}>
               <div>
                 <label
@@ -56,6 +63,7 @@ export const LoginModal: React.FC = () => {
                 <input
                   id="email"
                   type="email"
+                  required
                   className="input is-block"
                   {...form.register("email")}
                 />
@@ -64,7 +72,7 @@ export const LoginModal: React.FC = () => {
                 <Button
                   type="submit"
                   isBlock
-                  isLoading={requestLoginLink.isLoading}
+                  isLoading={requestLoginLinkStatus === "loading"}
                 >
                   Continue
                 </Button>

src/css/code.css

@@ -8,6 +8,6 @@
   max-height: 800px;
 }
 
-:not(pre) code {
-  @apply bg-purple-100 text-purple-700 inline-flex items-center font-mono break-all;
+:not(pre) > code {
+  @apply bg-purple-100 text-purple-700 inline-flex items-center font-mono break-all leading-snug;
 }

src/css/tailwind.css

@@ -9,7 +9,7 @@
 }
 
 body {
-  @apply antialiased;
+  @apply antialiased break-words;
 }
 
 .container {

src/router/auth.ts

@@ -23,7 +23,7 @@ export const authRouter = createRouter()
   })
   .mutation("requestLoginLink", {
     input: z.object({
-      email: z.string(),
+      email: z.string().nonempty("email is required"),
       url: z.string(),
     }),
     output: z.boolean(),

src/router/index.ts

@@ -1,5 +1,5 @@
 import * as trpc from "@trpc/server"
-import { z } from "zod"
+import { z, ZodError } from "zod"
 import { isNotFoundError } from "~/lib/server-side-props"
 import { TRPCContext } from "~/lib/trpc.server"
 import { getSite } from "~/models/site.model"
@@ -42,8 +42,12 @@ export const appRouter = trpc
   .merge("membership.", membershipRouter)
   .merge("page.", pageRouter)
   .formatError(({ error, shape }) => {
+    const isZodError = error.cause instanceof ZodError
     return {
       ...shape,
+      message: isZodError
+        ? error.cause.issues.map((i) => i.message).join(", ")
+        : error.message,
       data: {
         ...shape.data,
         notFound: isNotFoundError(error.cause),