From d0f5370f229cd984ef92b44624edf6b30de5881c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Morten=20N=2EO=2E=20N=C3=B8rgaard=20Henriksen?=
 <1136718+raix@users.noreply.github.com>
Date: Wed, 24 Jul 2024 00:54:47 +0200
Subject: [PATCH] Configure expiration and error illustrated message for auth

---
 .../WebApp/pages/(auth)/login.tsx             |  6 +++++
 .../WebApp/pages/(auth)/register/expired.tsx  | 24 +++++++------------
 .../WebApp/pages/(auth)/register/index.tsx    |  6 +++++
 .../WebApp/pages/(auth)/register/verify.tsx   |  6 +++++
 .../WebApp/shared/ui/auth/ErrorMessage.tsx    | 23 ++++++++++++++++++
 .../auth/VerificationCodeExpiredMessage.tsx   | 19 +++++++++++++++
 6 files changed, 68 insertions(+), 16 deletions(-)
 create mode 100644 application/account-management/WebApp/shared/ui/auth/ErrorMessage.tsx
 create mode 100644 application/account-management/WebApp/shared/ui/auth/VerificationCodeExpiredMessage.tsx

diff --git a/application/account-management/WebApp/pages/(auth)/login.tsx b/application/account-management/WebApp/pages/(auth)/login.tsx
index a044906c4..562a979d2 100644
--- a/application/account-management/WebApp/pages/(auth)/login.tsx
+++ b/application/account-management/WebApp/pages/(auth)/login.tsx
@@ -1,11 +1,17 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { HorizontalHeroLayout } from "@/shared/ui/layout/HorizontalHeroLayout";
 import { LoginForm } from "@/shared/ui/auth/LoginForm";
+import { ErrorMessage } from "@/shared/ui/auth/ErrorMessage";
 
 export const Route = createFileRoute("/(auth)/login")({
   component: () => (
     <HorizontalHeroLayout>
       <LoginForm />
     </HorizontalHeroLayout>
+  ),
+  errorComponent: (props) => (
+    <HorizontalHeroLayout>
+      <ErrorMessage {...props} />
+    </HorizontalHeroLayout>
   )
 });
diff --git a/application/account-management/WebApp/pages/(auth)/register/expired.tsx b/application/account-management/WebApp/pages/(auth)/register/expired.tsx
index 7df021158..1476cef66 100644
--- a/application/account-management/WebApp/pages/(auth)/register/expired.tsx
+++ b/application/account-management/WebApp/pages/(auth)/register/expired.tsx
@@ -1,25 +1,17 @@
 import { createFileRoute } from "@tanstack/react-router";
-import { Link } from "@repo/ui/components/Link";
 import { HorizontalHeroLayout } from "@/shared/ui/layout/HorizontalHeroLayout";
-import { useRegistration } from "@/shared/ui/auth/actions/accountRegistration";
+import { ErrorMessage } from "@/shared/ui/auth/ErrorMessage";
+import { VerificationCodeExpiredMessage } from "@/shared/ui/auth/VerificationCodeExpiredMessage";
 
 export const Route = createFileRoute("/(auth)/register/expired")({
   component: () => (
     <HorizontalHeroLayout>
-      <VerificationExpiredPage />
+      <VerificationCodeExpiredMessage />
+    </HorizontalHeroLayout>
+  ),
+  errorComponent: (props) => (
+    <HorizontalHeroLayout>
+      <ErrorMessage {...props} />
     </HorizontalHeroLayout>
   )
 });
-
-function VerificationExpiredPage() {
-  const { accountRegistrationId } = useRegistration();
-
-  return (
-    <div className="flex flex-col text-center p-8">
-      <h2>Verification code expired</h2>
-      <p>The verification code you are trying to use has expired.</p>
-      <p>Account Registration ID: {accountRegistrationId}</p>
-      <Link href="/register">Try again</Link>
-    </div>
-  );
-}
diff --git a/application/account-management/WebApp/pages/(auth)/register/index.tsx b/application/account-management/WebApp/pages/(auth)/register/index.tsx
index e1e70f662..43aaa7b6f 100644
--- a/application/account-management/WebApp/pages/(auth)/register/index.tsx
+++ b/application/account-management/WebApp/pages/(auth)/register/index.tsx
@@ -1,11 +1,17 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { HorizontalHeroLayout } from "@/shared/ui/layout/HorizontalHeroLayout";
 import { StartAccountRegistrationForm } from "@/shared/ui/auth/StartAccountRegistrationForm";
+import { ErrorMessage } from "@/shared/ui/auth/ErrorMessage";
 
 export const Route = createFileRoute("/(auth)/register/")({
   component: () => (
     <HorizontalHeroLayout>
       <StartAccountRegistrationForm />
     </HorizontalHeroLayout>
+  ),
+  errorComponent: (props) => (
+    <HorizontalHeroLayout>
+      <ErrorMessage {...props} />
+    </HorizontalHeroLayout>
   )
 });
diff --git a/application/account-management/WebApp/pages/(auth)/register/verify.tsx b/application/account-management/WebApp/pages/(auth)/register/verify.tsx
index b9830d4b7..5e45359c5 100644
--- a/application/account-management/WebApp/pages/(auth)/register/verify.tsx
+++ b/application/account-management/WebApp/pages/(auth)/register/verify.tsx
@@ -1,11 +1,17 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { HorizontalHeroLayout } from "@/shared/ui/layout/HorizontalHeroLayout";
 import { CompleteAccountRegistrationForm } from "@/shared/ui/auth/CompleteAccountRegistrationForm";
+import { ErrorMessage } from "@/shared/ui/auth/ErrorMessage";
 
 export const Route = createFileRoute("/(auth)/register/verify")({
   component: () => (
     <HorizontalHeroLayout>
       <CompleteAccountRegistrationForm />
     </HorizontalHeroLayout>
+  ),
+  errorComponent: (props) => (
+    <HorizontalHeroLayout>
+      <ErrorMessage {...props} />
+    </HorizontalHeroLayout>
   )
 });
diff --git a/application/account-management/WebApp/shared/ui/auth/ErrorMessage.tsx b/application/account-management/WebApp/shared/ui/auth/ErrorMessage.tsx
new file mode 100644
index 000000000..907ad6f2c
--- /dev/null
+++ b/application/account-management/WebApp/shared/ui/auth/ErrorMessage.tsx
@@ -0,0 +1,23 @@
+import { useEffect } from "react";
+import type { ErrorComponentProps } from "@tanstack/react-router";
+import ErrorIllustration from "@spectrum-icons/illustrations/Error";
+import { Content, Heading, IllustratedMessage } from "@repo/ui/components/IllustratedMessage";
+import { Button } from "@repo/ui/components/Button";
+
+export function ErrorMessage({ error, reset }: Readonly<ErrorComponentProps>) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error(error);
+  }, [error]);
+
+  return (
+    <IllustratedMessage>
+      <ErrorIllustration />
+      <Heading>Error: Something went wrong!</Heading>
+      <Content>An error occurred while processing your request. {error.message}</Content>
+      <Button type="button" onPress={reset}>
+        Try again
+      </Button>
+    </IllustratedMessage>
+  );
+}
diff --git a/application/account-management/WebApp/shared/ui/auth/VerificationCodeExpiredMessage.tsx b/application/account-management/WebApp/shared/ui/auth/VerificationCodeExpiredMessage.tsx
new file mode 100644
index 000000000..7a8f76789
--- /dev/null
+++ b/application/account-management/WebApp/shared/ui/auth/VerificationCodeExpiredMessage.tsx
@@ -0,0 +1,19 @@
+import Timeout from "@spectrum-icons/illustrations/Timeout";
+import { Link } from "@repo/ui/components/Link";
+import { useRegistration } from "@/shared/ui/auth/actions/accountRegistration";
+import { Content, Heading, IllustratedMessage } from "@repo/ui/components/IllustratedMessage";
+
+export function VerificationCodeExpiredMessage() {
+  const { accountRegistrationId } = useRegistration();
+
+  return (
+    <IllustratedMessage>
+      <Timeout />
+      <Heading>Error: Verification code expired</Heading>
+      <Content>
+        The verification code you are trying to use has expired for Account Registration ID: {accountRegistrationId}
+      </Content>
+      <Link href="/register">Try again</Link>
+    </IllustratedMessage>
+  );
+}