Merge pull request #4880 from signalco-io/next

Next

web/apps/workingparty/app/(rest)/(app)/app/logout/page.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { useMutation } from '@tanstack/react-query';
+import { Spinner } from '@signalco/ui-primitives/Spinner';
+import { KnownPages } from '../../../../../src/knownPages';
+
+function useLogOut() {
+    const router = useRouter();
+
+    return useMutation({
+        mutationFn: () => fetch('/api/auth/logout', { method: 'POST' }),
+        onSettled: () => {
+            router.push(KnownPages.Landing);
+        },
+    });
+}
+
+export default function AppLogoutPage() {
+    const logOut = useLogOut();
+
+    useEffect(() => {
+        logOut.mutate();
+    }, []);
+
+    return (
+        <div className="flex h-full items-center justify-center">
+            <Spinner loadingLabel={'Logging you out'} loading />
+        </div>
+    );
+}

web/apps/workingparty/app/(rest)/(marketing)/login/email-sent/LoginEmailSentVerifyMessage.tsx

@@ -1,5 +1,7 @@
 'use client';
+
 import { Typography } from '@signalco/ui-primitives/Typography';
+import { Stack } from '@signalco/ui-primitives/Stack';
 import { useSearchParam } from '@signalco/hooks/useSearchParam';
 
 export function LoginEmailSentVerifyMessage() {
@@ -10,13 +12,18 @@ export function LoginEmailSentVerifyMessage() {
         <>
             <Typography center level="h2" semiBold>Email Login</Typography>
             <Typography center level="body1" secondary>
-                Keep this window open, and in new tab or another device, open the link we just sent to{' '}
-                <span className="inline font-semibold text-blue-500">{email}</span>{' '}
-                with security code:
-            </Typography>
-            <Typography className="rounded border p-3 text-center font-bold">
-                {verifyPhrase}
+                Open the link we just sent to{' '}
+                <span className="inline font-semibold text-blue-500">{email}</span>,
+                {' '}verify it matches security code displayed below.
             </Typography>
+            <Stack spacing={1}>
+                <Typography className="rounded border p-3 text-center font-bold">
+                    {verifyPhrase}
+                </Typography>
+                <Typography center level="body2" tertiary>
+                    You can close this window after you have successfully logged in.
+                </Typography>
+            </Stack>
         </>
     );
 }

web/apps/workingparty/app/api/auth/logout/route.ts

@@ -0,0 +1,6 @@
+import { cookies } from 'next/headers';
+
+export async function POST() {
+    cookies().delete('wp_session');
+    return Response.json(null);
+}

web/apps/workingparty/package.json

@@ -40,7 +40,7 @@
         "@vercel/analytics": "1.2.2",
         "classix": "2.1.36",
         "jose": "5.2.3",
-        "next": "14.2.0-canary.47",
+        "next": "14.2.0-canary.48",
         "next-secure-headers": "2.2.0",
         "next-themes": "0.3.0",
         "nanoid": "5.0.6",

web/apps/workingparty/src/components/AppSidebarProfileButton.tsx

@@ -33,7 +33,12 @@ export function AppSidebarProfileButton() {
                     Settings
                 </DropdownMenuItem>
                 <DropdownMenuSeparator />
-                <DropdownMenuItem className="text-red-600 dark:text-red-400" startDecorator={<LogOut className="w-5" />}>Logout</DropdownMenuItem>
+                <DropdownMenuItem
+                    className="text-red-600 dark:text-red-400"
+                    startDecorator={<LogOut className="w-5" />}
+                    href={KnownPages.AppLogout}>
+                    Logout
+                </DropdownMenuItem>
             </DropdownMenuContent>
         </DropdownMenu>
     );