Configure expiration and error illustrated message for auth

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>
   )
 });

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>
-  );
-}

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>
   )
 });

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>
   )
 });

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>
+  );
+}

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>
+  );
+}