Hide My custom projects tab in navigation sidebar when user is not lo…

…gged and Re-organize My custom projects in Profile section
Vizzuality · Dec 14, 2024 · f10abb7 · f10abb7
1 parent 3dfed3f
commit f10abb7
Show file tree

Hide file tree

Showing 3 changed files with 412 additions and 36 deletions.
diff --git a/client/src/containers/nav/index.tsx b/client/src/containers/nav/index.tsx
@@ -47,6 +47,7 @@ const navItems = {
       url: "/my-projects",
       icon: ClipboardListIcon,
       match: (pathname: string) => pathname === "/my-projects",
+      requireAuth: true,
     },
     {
       title: "Admin",
@@ -70,6 +71,9 @@ export default function MainNav() {
   const { status } = useSession();
   const pathname = usePathname();
 
+  // Don't render nav items until authentication is determined
+  const isLoading = status === "loading";
+
   return (
     <Sidebar collapsible="icon" className="py-6">
       <SidebarHeader>
@@ -79,29 +83,33 @@ export default function MainNav() {
         <SidebarGroup>
           <SidebarGroupContent>
             <SidebarMenu>
-              {navItems.main.map((item) => {
-                const isActive = item.match(pathname);
-                return (
-                  <SidebarMenuItem key={item.title}>
-                    <SidebarMenuButton
-                      asChild
-                      tooltip={{
-                        children: item.title,
-                        hidden: open,
-                      }}
-                      className={cn(
-                        isActive &&
-                          "bg-sidebar-accent text-sidebar-accent-foreground",
-                      )}
-                    >
-                      <Link href={item.url}>
-                        {item.icon && <item.icon />}
-                        <span>{item.title}</span>
-                      </Link>
-                    </SidebarMenuButton>
-                  </SidebarMenuItem>
-                );
-              })}
+              {!isLoading && navItems.main
+                .filter(
+                  (item) => !item.requireAuth || status === "authenticated"
+                )
+                .map((item) => {
+                  const isActive = item.match(pathname);
+                  return (
+                    <SidebarMenuItem key={item.title}>
+                      <SidebarMenuButton
+                        asChild
+                        tooltip={{
+                          children: item.title,
+                          hidden: open,
+                        }}
+                        className={cn(
+                          isActive &&
+                            "bg-sidebar-accent text-sidebar-accent-foreground",
+                        )}
+                      >
+                        <Link href={item.url}>
+                          {item.icon && <item.icon />}
+                          <span>{item.title}</span>
+                        </Link>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  );
+                })}
             </SidebarMenu>
           </SidebarGroupContent>
         </SidebarGroup>

diff --git a/client/src/containers/profile/edit-password/form/index.tsx b/client/src/containers/profile/edit-password/form/index.tsx
@@ -96,7 +96,7 @@ const SignUpForm: FC = () => {
           name="password"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Password</FormLabel>
+              <FormLabel>Your password</FormLabel>
               <FormControl>
                 <div className="relative flex items-center">
                   <Input