Handle user account redirect.

Issue#3802 - Team to user switch fixed

pnpm-lock.yaml

@@ -328,6 +328,8 @@ importers:
         specifier: ^5.9.3
         version: 5.9.3
 
+  dist: {}
+
 packages:
 
   '@ampproject/remapping@2.3.0':

src/app/page.tsx

@@ -2,7 +2,7 @@
 import { redirect } from 'next/navigation';
 import { useEffect } from 'react';
 import { LAST_TEAM_CONFIG } from '@/lib/constants';
-import { getItem, removeItem } from '@/lib/storage';
+import { getItem } from '@/lib/storage';
 
 export default function RootPage() {
   useEffect(() => {
@@ -11,8 +11,6 @@ export default function RootPage() {
     if (lastTeam) {
       redirect(`/teams/${lastTeam}/websites`);
     } else {
-      removeItem(LAST_TEAM_CONFIG);
-
       redirect(`/websites`);
     }
   }, []);

src/components/input/NavButton.tsx

@@ -14,6 +14,7 @@ import {
   Text,
 } from '@umami/react-zen';
 import { ArrowRight } from 'lucide-react';
+import type { Key } from 'react';
 import {
   useConfig,
   useLoginQuery,
@@ -33,7 +34,8 @@ import {
   Users,
 } from '@/components/icons';
 import { Switch } from '@/components/svg';
-import { DOCS_URL } from '@/lib/constants';
+import { DOCS_URL, LAST_TEAM_CONFIG } from '@/lib/constants';
+import { removeItem } from '@/lib/storage';
 
 export interface TeamsButtonProps {
   showText?: boolean;
@@ -44,7 +46,7 @@ export function NavButton({ showText = true }: TeamsButtonProps) {
   const { user } = useLoginQuery();
   const { cloudMode } = useConfig();
   const { formatMessage, labels } = useMessages();
-  const { teamId } = useNavigation();
+  const { teamId, router } = useNavigation();
   const { isMobile } = useMobile();
   const team = user?.teams?.find(({ id }) => id === teamId);
   const selectedKeys = new Set([teamId || 'user']);
@@ -54,7 +56,16 @@ export function NavButton({ showText = true }: TeamsButtonProps) {
     return cloudMode ? `${process.env.cloudUrl}${url}` : url;
   };
 
-  const handleAction = async () => {};
+  const handleAction = async (key: Key) => {
+    if (key === 'user') {
+      removeItem(LAST_TEAM_CONFIG);
+      if (cloudMode) {
+        window.location.href = '/';
+      } else {
+        router.push('/');
+      }
+    }
+  };
 
   return (
     <MenuTrigger>
@@ -84,16 +95,16 @@ export function NavButton({ showText = true }: TeamsButtonProps) {
       </Pressable>
       <Popover placement="bottom start">
         <Column minWidth="300px">
-          <Menu autoFocus="last" onAction={handleAction}>
+          <Menu autoFocus="last">
             <SubmenuTrigger>
               <MenuItem id="teams" showChecked={false} showSubMenuIcon>
                 <IconLabel icon={<Switch />} label={formatMessage(labels.switchAccount)} />
               </MenuItem>
               <Popover placement={isMobile ? 'bottom start' : 'right top'}>
                 <Column minWidth="300px">
-                  <Menu selectionMode="single" selectedKeys={selectedKeys}>
+                  <Menu selectionMode="single" selectedKeys={selectedKeys} onAction={handleAction}>
                     <MenuSection title={formatMessage(labels.myAccount)}>
-                      <MenuItem id="user" href={getUrl('/')}>
+                      <MenuItem id="user">
                         <IconLabel icon={<User />} label={user.username} />
                       </MenuItem>
                     </MenuSection>

src/lib/crypto.ts

@@ -1,5 +1,5 @@
 import crypto from 'node:crypto';
-import { v4, v5 } from 'uuid';
+import { v4, v5, v7 } from 'uuid';
 
 const ALGORITHM = 'aes-256-gcm';
 const IV_LENGTH = 16;
@@ -57,7 +57,9 @@ export function secret() {
 }
 
 export function uuid(...args: any) {
-  if (!args.length) return v4();
+  if (args.length) {
+    return v5(hash(...args, secret()), v5.DNS);
+  }
 
-  return v5(hash(...args, secret()), v5.DNS);
+  return process.env.USE_UUIDV7 ? v7() : v4();
 }