refactor: update authConfig in config.ts and borderRadius in tailwind…

….config.ts - Update authConfig in config.ts to include skipCSRFCheck and trustHost properties for development environment. - Update borderRadius in tailwind.config.ts to include new sizes: xl, lg, md, and sm.
Sivanwol · Sep 9, 2024 · 62cc1f5 · 62cc1f5
1 parent 40aa3b0
commit 62cc1f5
Show file tree

Hide file tree

Showing 7 changed files with 299 additions and 41 deletions.
diff --git a/apps/backoffice/src/app/[lng]/platform/(common)/user/profile/page.tsx b/apps/backoffice/src/app/[lng]/platform/(common)/user/profile/page.tsx
@@ -3,7 +3,7 @@ import { Card, CardContent, CardHeader, Typography } from "@mui/material";
 
 import type { PageCommonProps } from "@app/utils";
 import { LoadingPage, UserProfilePage } from "@app/ui";
-import { initTranslation, t, genders } from "@app/utils";
+import { genders, initTranslation, t } from "@app/utils";
 
 import { api, HydrateClient } from "~/trpc/server";
 
@@ -29,7 +29,7 @@ export default async function HomePage({ params: { lng } }: PageCommonProps) {
     errorFirstName: t("userProfile", "errors.firstName"),
     errorLastName: t("userProfile", "errors.lastName"),
     errorEmail: t("userProfile", "errors.email"),
-  }
+  };
   return (
     <HydrateClient>
       <main className="container h-screen py-16">
@@ -58,7 +58,8 @@ export default async function HomePage({ params: { lng } }: PageCommonProps) {
                       email: user.email ?? "",
                       gender: user.gender ?? genders[0],
                       aboutMe: user.aboutMe ?? "",
-                    }} />
+                    }}
+                  />
                 </CardContent>
               </Card>
             </Suspense>

diff --git a/apps/backoffice/src/app/error.tsx b/apps/backoffice/src/app/error.tsx
@@ -0,0 +1,80 @@
+"use client";
+
+import React from "react";
+import Link from "next/link";
+import { CssBaseline } from "@mui/material";
+
+import "./globals.css";
+
+// Error boundaries must be Client Components
+function ArrowRightIcon(
+  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>,
+) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M5 12h14" />
+      <path d="m12 5 7 7-7 7" />
+    </svg>
+  );
+}
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <html lang="en">
+      <head>
+        <title>500 - error occurred</title>
+        <CssBaseline />
+      </head>
+      <body>
+        <div className="flex min-h-[100dvh] flex-col items-center justify-center bg-background px-4 py-12 sm:px-6 lg:px-8">
+          <div className="mx-auto max-w-md text-center">
+            <div className="relative h-48 w-48 overflow-hidden rounded-full bg-primary">
+              <div className="absolute inset-0 flex items-center justify-center">
+                <h1 className="text-6xl font-bold text-primary-foreground">
+                  404
+                </h1>
+              </div>
+              <div className="absolute inset-0 flex items-center justify-center">
+                <div className="h-32 w-32 animate-spin rounded-full border-4 border-primary-foreground border-t-transparent" />
+              </div>
+            </div>
+            <h2 className="mt-6 text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
+              Oops, something went wrong!
+            </h2>
+            <p className="mt-4 text-muted-foreground">
+              Something went wrong on our end. <br />
+              Please try again later. Don't worry, you can try going back to the
+              homepage.
+            </p>
+            <div className="mt-6">
+              <Link
+                href="/en/platform"
+                className="mt-4 inline-flex animate-bounce items-center rounded-md bg-secondary-foreground px-3 py-2 text-sm font-medium text-secondary shadow-sm transition-colors hover:bg-secondary-foreground/90 focus:outline-none focus:ring-2 focus:ring-secondary focus:ring-offset-2"
+                prefetch={false}
+              >
+                Go Home
+                <ArrowRightIcon className="ml-2 h-5 w-5" />
+              </Link>
+            </div>
+          </div>
+        </div>
+      </body>
+    </html>
+  );
+}
diff --git a/apps/backoffice/src/app/globals.css b/apps/backoffice/src/app/globals.css
@@ -0,0 +1,68 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 327 66% 69%;
+    --primary-foreground: 337 65.5% 17.1%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 72.22% 50.59%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5% 64.9%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 327 66% 69%;
+    --primary-foreground: 337 65.5% 17.1%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 85.7% 97.3%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+  }
+}
+
+/* Loading spinner stuff */
+.spinner_ZC {
+  animation: spinner 1.2s cubic-bezier(0.52, 0.6, 0.25, 0.99) infinite;
+}
+.spinner_ga {
+  animation-delay: 0.6s;
+}
+@keyframes spinner {
+  0% {
+    r: 0;
+    opacity: 1;
+  }
+  100% {
+    r: 11px;
+    opacity: 0;
+  }
+}
diff --git a/apps/backoffice/src/app/not-found.tsx b/apps/backoffice/src/app/not-found.tsx
@@ -0,0 +1,79 @@
+"use client";
+
+import React from "react";
+import Link from "next/link";
+import { CssBaseline } from "@mui/material";
+
+import "./globals.css";
+
+// Error boundaries must be Client Components
+function ArrowRightIcon(
+  props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>,
+) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M5 12h14" />
+      <path d="m12 5 7 7-7 7" />
+    </svg>
+  );
+}
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <html lang="en">
+      <head>
+        <title>404 - Not Found</title>
+        <CssBaseline />
+      </head>
+      <body>
+        <div className="flex min-h-[100dvh] flex-col items-center justify-center bg-background px-4 py-12 sm:px-6 lg:px-8">
+          <div className="mx-auto max-w-md text-center">
+            <div className="relative h-48 w-48 overflow-hidden rounded-full bg-primary">
+              <div className="absolute inset-0 flex items-center justify-center">
+                <h1 className="text-6xl font-bold text-primary-foreground">
+                  404
+                </h1>
+              </div>
+              <div className="absolute inset-0 flex items-center justify-center">
+                <div className="h-32 w-32 animate-spin rounded-full border-4 border-primary-foreground border-t-transparent" />
+              </div>
+            </div>
+            <h2 className="mt-6 text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
+              Oops, something went wrong!
+            </h2>
+            <p className="mt-4 text-muted-foreground">
+              We couldn't find the page you were looking for. Don't worry, you
+              can try going back to the homepage.
+            </p>
+            <div className="mt-6">
+              <Link
+                href="/en/platform"
+                className="mt-4 inline-flex animate-bounce items-center rounded-md bg-secondary-foreground px-3 py-2 text-sm font-medium text-secondary shadow-sm transition-colors hover:bg-secondary-foreground/90 focus:outline-none focus:ring-2 focus:ring-secondary focus:ring-offset-2"
+                prefetch={false}
+              >
+                Go Home
+                <ArrowRightIcon className="ml-2 h-5 w-5" />
+              </Link>
+            </div>
+          </div>
+        </div>
+      </body>
+    </html>
+  );
+}
diff --git a/apps/backoffice/tailwind.config.ts b/apps/backoffice/tailwind.config.ts
@@ -57,9 +57,10 @@ export default {
         },
       },
       borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
+        xl: `calc(var(--radius) + 4px)`,
+        lg: `var(--radius)`,
+        md: `calc(var(--radius) - 2px)`,
+        sm: `calc(var(--radius) - 4px)`,
       },
       keyframes: {
         "accordion-down": {

diff --git a/packages/auth/src/config.ts b/packages/auth/src/config.ts
@@ -32,9 +32,9 @@ export const authConfig = {
   // In development, we need to skip checks to allow Expo to work
   ...(!isSecureContext
     ? {
-      skipCSRFCheck: skipCSRFCheck,
-      trustHost: true,
-    }
+        skipCSRFCheck: skipCSRFCheck,
+        trustHost: true,
+      }
     : {}),
   secret: env.AUTH_SECRET,
   providers: [