diff --git a/src/app/(dashboard)/peers/page.tsx b/src/app/(dashboard)/peers/page.tsx index 75332d3..8a7049c 100644 --- a/src/app/(dashboard)/peers/page.tsx +++ b/src/app/(dashboard)/peers/page.tsx @@ -8,13 +8,24 @@ import useFetchApi from "@utils/api"; import { ExternalLinkIcon } from "lucide-react"; import React, { lazy, Suspense } from "react"; import PeerIcon from "@/assets/icons/PeerIcon"; -import { useUsers } from "@/contexts/UsersProvider"; +import { useLoggedInUser, useUsers } from "@/contexts/UsersProvider"; import { Peer } from "@/interfaces/Peer"; import PageContainer from "@/layouts/PageContainer"; +import { SetupModalContent } from "@/modules/setup-netbird-modal/SetupModal"; const PeersTable = lazy(() => import("@/modules/peers/PeersTable")); export default function Peers() { + const { isUser } = useLoggedInUser(); + + return ( + + {isUser ? : } + + ); +} + +function PeersView() { const { data: peers, isLoading } = useFetchApi("/peers"); const { users } = useUsers(); @@ -27,7 +38,7 @@ export default function Peers() { }); return ( - + <>
}> - + + ); +} + +function PeersDefaultView() { + return ( +
+
+

Add new peer to your network

+ + To get started, install NetBird and log in using your email account. + After that you should be connected. If you have further questions + check out our{" "} + + Installation Guide + + + +
+
+
+ +
+
+
); } diff --git a/src/app/(dashboard)/team/user/page.tsx b/src/app/(dashboard)/team/user/page.tsx index 4df3f08..df56117 100644 --- a/src/app/(dashboard)/team/user/page.tsx +++ b/src/app/(dashboard)/team/user/page.tsx @@ -57,7 +57,7 @@ function UserOverview({ user }: Props) { const router = useRouter(); const userRequest = useApiCall("/users"); const { mutate } = useSWRConfig(); - const { loggedInUser, isOwnerOrAdmin } = useLoggedInUser(); + const { loggedInUser, isOwnerOrAdmin, isUser } = useLoggedInUser(); const isLoggedInUser = loggedInUser ? loggedInUser?.id === user.id : false; const initialGroups = user.auto_groups; @@ -104,6 +104,7 @@ function UserOverview({ user }: Props) { } /> @@ -117,6 +118,7 @@ function UserOverview({ user }: Props) { } /> )} @@ -156,28 +158,30 @@ function UserOverview({ user }: Props) {
-
- + {!isUser && ( +
+ - -
+ +
+ )}
@@ -190,6 +194,7 @@ function UserOverview({ user }: Props) { Groups will be assigned to peers added by this user. diff --git a/src/app/globals.css b/src/app/globals.css index 06993f3..ca461db 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -64,4 +64,8 @@ p { display: table; position: relative; width: 100%; +} + +.stepper-bg-variant .step-circle { + @apply !border-[#1d2024]; } \ No newline at end of file diff --git a/src/components/Breadcrumbs.tsx b/src/components/Breadcrumbs.tsx index b272623..cb8358f 100644 --- a/src/components/Breadcrumbs.tsx +++ b/src/components/Breadcrumbs.tsx @@ -15,13 +15,25 @@ type ItemProps = { label: string; icon?: React.ReactNode; active?: boolean; + disabled?: boolean; }; -export const Item = ({ href, label, icon, active }: ItemProps) => { +export const Item = ({ + href, + label, + icon, + active, + disabled = false, +}: ItemProps) => { const router = useRouter(); return ( -
+
{ className={cn( "h-[34px] w-[34px] shrink-0 rounded-full flex items-center justify-center font-medium text-xs relative z-0 border-4 transition-all", "dark:bg-nb-gray-900 dark:text-nb-gray-400 dark:border-nb-gray dark:group-hover:bg-nb-gray-800", - "bg-nb-gray-100 text-nb-gray-400 border-white group-hover:bg-nb-gray-200", + "bg-nb-gray-100 text-nb-gray-400 border-white group-hover:bg-nb-gray-200 step-circle", )} > {step} diff --git a/src/contexts/CountryProvider.tsx b/src/contexts/CountryProvider.tsx index f4304c7..4c4ceff 100644 --- a/src/contexts/CountryProvider.tsx +++ b/src/contexts/CountryProvider.tsx @@ -1,5 +1,6 @@ import useFetchApi from "@utils/api"; import React, { useCallback } from "react"; +import { useLoggedInUser } from "@/contexts/UsersProvider"; import { Country } from "@/interfaces/Country"; import { Peer } from "@/interfaces/Peer"; @@ -16,6 +17,16 @@ const CountryContext = React.createContext( ); export default function CountryProvider({ children }: Props) { + const { isUser } = useLoggedInUser(); + + return isUser ? ( + children + ) : ( + {children} + ); +} + +function CountryProviderContent({ children }: Props) { const { data: countries, isLoading } = useFetchApi( "/locations/countries", false, diff --git a/src/contexts/GroupsProvider.tsx b/src/contexts/GroupsProvider.tsx index 7bd7b39..ac0f4e8 100644 --- a/src/contexts/GroupsProvider.tsx +++ b/src/contexts/GroupsProvider.tsx @@ -1,5 +1,7 @@ import useFetchApi from "@utils/api"; +import { usePathname } from "next/navigation"; import React, { useState } from "react"; +import { useLoggedInUser } from "@/contexts/UsersProvider"; import { Group } from "@/interfaces/Group"; type Props = { @@ -17,6 +19,17 @@ const GroupContext = React.createContext( ); export default function GroupsProvider({ children }: Props) { + const path = usePathname(); + const { isUser } = useLoggedInUser(); + + return isUser && path == "/peers" ? ( + children + ) : ( + {children} + ); +} + +export function GroupsProviderContent({ children }: Props) { const { data: groups, mutate, isLoading } = useFetchApi("/groups"); const [dropdownOptions, setDropdownOptions] = useState([]); diff --git a/src/layouts/DashboardLayout.tsx b/src/layouts/DashboardLayout.tsx index adc98b2..c5fe617 100644 --- a/src/layouts/DashboardLayout.tsx +++ b/src/layouts/DashboardLayout.tsx @@ -15,7 +15,7 @@ import ApplicationProvider, { } from "@/contexts/ApplicationProvider"; import CountryProvider from "@/contexts/CountryProvider"; import GroupsProvider from "@/contexts/GroupsProvider"; -import UsersProvider from "@/contexts/UsersProvider"; +import UsersProvider, { useLoggedInUser } from "@/contexts/UsersProvider"; import Navigation from "@/layouts/Navigation"; import Navbar, { headerHeight } from "./Header"; @@ -42,6 +42,7 @@ function DashboardPageContent({ children }: { children: React.ReactNode }) { const { mobileNavOpen, toggleMobileNav } = useApplicationContext(); const isSm = useIsSm(); const isXs = useIsXs(); + const { isUser } = useLoggedInUser(); const navOpenPageWidth = isSm ? "50%" : isXs ? "65%" : "80%"; const { bannerHeight } = useAnnouncement(); @@ -146,13 +147,14 @@ function DashboardPageContent({ children }: { children: React.ReactNode }) { }} > +
- + {!isUser && } {children}
diff --git a/src/layouts/Header.tsx b/src/layouts/Header.tsx index 514013c..e3c48fc 100644 --- a/src/layouts/Header.tsx +++ b/src/layouts/Header.tsx @@ -13,6 +13,7 @@ import NetBirdLogo from "@/assets/netbird.svg"; import NetBirdLogoFull from "@/assets/netbird-full.svg"; import { useAnnouncement } from "@/contexts/AnnouncementProvider"; import { useApplicationContext } from "@/contexts/ApplicationProvider"; +import { useLoggedInUser } from "@/contexts/UsersProvider"; export const headerHeight = 75; @@ -39,6 +40,8 @@ export default function NavbarWithDropdown() { const { toggleMobileNav } = useApplicationContext(); const { bannerHeight } = useAnnouncement(); + const { isUser } = useLoggedInUser(); + return ( <>