1695 - login/register

client/.eslintrc

@@ -71,7 +71,11 @@
                     "bg-muted",
                     "bg-popover",
                     "bg-success",
+                    "bg-surface-brand-primary",
+                    "bg-surface-brand-primary-hover",
+                    "bg-surface-brand-primary-pressed",
                     "border-accent",
+                    "border-content-neutral-tertiary",
                     "border-input",
                     "border-muted",
                     "border-primary",
@@ -116,7 +120,11 @@
                     "nowheel",
                     "pl-property-input-position",
                     "right-data-pill-panel-placement",
+                    "rounded-xs",
                     "text-accent-foreground",
+                    "text-content-neutral-primary",
+                    "text-content-neutral-secondary",
+                    "text-content-neutral-tertiary",
                     "text-destructive",
                     "text-muted-foreground",
                     "text-success",

client/src/App.tsx

@@ -26,7 +26,7 @@ import {
     ZapIcon,
 } from 'lucide-react';
 import {useEffect, useState} from 'react';
-import {Outlet, useLocation, useNavigate} from 'react-router-dom';
+import {Outlet, useLocation} from 'react-router-dom';
 
 const user = {
     email: 'emily.selman@example.com',
@@ -108,7 +108,6 @@ function App() {
         getAccount,
         reset: resetAuthentication,
         sessionHasBeenFetched,
-        showLogin,
     } = useAuthenticationStore();
 
     const {copilotPanelOpen} = useCopilotStore();
@@ -119,8 +118,6 @@ function App() {
 
     const location = useLocation();
 
-    const navigate = useNavigate();
-
     const queryClient = useQueryClient();
 
     const ff_1023 = useFeatureFlagsStore()('ff-1023');
@@ -176,19 +173,6 @@ function App() {
         getApplicationInfo();
     }, [getApplicationInfo]);
 
-    useEffect(() => {
-        if (showLogin) {
-            navigate('/login');
-        }
-    }, [showLogin, navigate]);
-
-    useEffect(() => {
-        if (sessionHasBeenFetched && !authenticated) {
-            navigate('/login');
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [authenticated, sessionHasBeenFetched]);
-
     useEffect(() => {
         if (!authenticated) {
             analytics.reset();

client/src/pages/account/public/AccountErrorPage.tsx

@@ -0,0 +1,33 @@
+import {Button} from '@/components/ui/button';
+import {Card, CardDescription, CardHeader, CardTitle} from '@/components/ui/card';
+import PublicLayoutContainer from '@/shared/layout/PublicLayoutContainer';
+import {XCircleIcon} from 'lucide-react';
+import {Link, useLocation} from 'react-router-dom';
+
+const AccountErrorPage = () => {
+    const location = useLocation();
+
+    return (
+        <PublicLayoutContainer>
+            <Card className="mx-auto flex max-w-sm flex-col gap-6 rounded-xl p-6 text-center shadow-none">
+                <XCircleIcon className="mx-auto size-12 text-destructive" />
+
+                <CardHeader className="p-0">
+                    <CardTitle className="self-center text-xl font-bold text-content-neutral-primary">Error</CardTitle>
+
+                    <CardDescription className="self-center text-center text-content-neutral-secondary">
+                        {location.state.error ? `${location.state.error}` : 'Something went wrong. Try again.'}
+                    </CardDescription>
+                </CardHeader>
+
+                <Link to="/">
+                    <Button className="h-10 w-fit space-x-2 bg-surface-brand-primary hover:bg-surface-brand-primary-hover active:bg-surface-brand-primary-pressed">
+                        Go back
+                    </Button>
+                </Link>
+            </Card>
+        </PublicLayoutContainer>
+    );
+};
+
+export default AccountErrorPage;