Show peers for regular users but hide / disable actions (delete, enable ssh etc.) (#360)

* Show peers for regular users but hide / disable actions (delete, enable ssh etc.) * Do not load countries for regular users
2026-01-26 01:21:04 +00:00 · 2024-03-21 14:21:26 +01:00
parent fe6d8c9bd5
commit 4c56ae704c
7 changed files with 132 additions and 62 deletions
--- a/src/app/(dashboard)/peer/page.tsx
+++ b/src/app/(dashboard)/peer/page.tsx
@@ -32,6 +32,7 @@ import {
  FlagIcon,
  Globe,
  History,
+  LockIcon,
  MapPin,
  MonitorSmartphoneIcon,
  NetworkIcon,
@@ -50,6 +51,7 @@ import PeerIcon from "@/assets/icons/PeerIcon";
 import { useCountries } from "@/contexts/CountryProvider";
 import PeerProvider, { usePeer } from "@/contexts/PeerProvider";
 import RoutesProvider from "@/contexts/RoutesProvider";
+import { useLoggedInUser } from "@/contexts/UsersProvider";
 import { useHasChanges } from "@/hooks/useHasChanges";
 import { getOperatingSystem } from "@/hooks/useOperatingSystem";
 import { OperatingSystem } from "@/interfaces/OperatingSystem";
@@ -124,6 +126,8 @@ function PeerOverview() {
    });
  };

+  const { isUser } = useLoggedInUser();
+
  return (
    <PageContainer>
      <RoutesProvider>
@@ -148,29 +152,31 @@ function PeerOverview() {
                  />
                  <TextWithTooltip text={name} maxChars={30} />

-                  <Modal
-                    open={showEditNameModal}
-                    onOpenChange={setShowEditNameModal}
-                  >
-                    <ModalTrigger>
-                      <div
-                        className={
-                          "flex items-center gap-2 dark:text-neutral-300 text-neutral-500 hover:text-neutral-100 transition-all hover:bg-nb-gray-800/60 py-2 px-3 rounded-md cursor-pointer"
-                        }
-                      >
-                        <PencilIcon size={16} />
-                      </div>
-                    </ModalTrigger>
-                    <EditNameModal
-                      onSuccess={(newName) => {
-                        setName(newName);
-                        setShowEditNameModal(false);
-                      }}
-                      peer={peer}
-                      initialName={name}
-                      key={showEditNameModal ? 1 : 0}
-                    />
-                  </Modal>
+                  {!isUser && (
+                    <Modal
+                      open={showEditNameModal}
+                      onOpenChange={setShowEditNameModal}
+                    >
+                      <ModalTrigger>
+                        <div
+                          className={
+                            "flex items-center gap-2 dark:text-neutral-300 text-neutral-500 hover:text-neutral-100 transition-all hover:bg-nb-gray-800/60 py-2 px-3 rounded-md cursor-pointer"
+                          }
+                        >
+                          <PencilIcon size={16} />
+                        </div>
+                      </ModalTrigger>
+                      <EditNameModal
+                        onSuccess={(newName) => {
+                          setName(newName);
+                          setShowEditNameModal(false);
+                        }}
+                        peer={peer}
+                        initialName={name}
+                        key={showEditNameModal ? 1 : 0}
+                      />
+                    </Modal>
+                  )}
                </h1>
                <LoginExpiredBadge loginExpired={peer.login_expired} />
              </div>
@@ -192,7 +198,7 @@ function PeerOverview() {
                variant={"primary"}
                className={"w-full"}
                onClick={() => updatePeer()}
-                disabled={!hasChanges}
+                disabled={!hasChanges || isUser}
              >
                Save Changes
              </Button>
@@ -210,18 +216,32 @@ function PeerOverview() {
                      "flex gap-2 items-center !text-nb-gray-300 text-xs"
                    }
                  >
-                    <IconInfoCircle size={14} />
-                    <span>
-                      Login expiration is disabled for all peers added with an
-                      setup-key.
-                    </span>
+                    {!peer.user_id ? (
+                      <>
+                        <>
+                          <IconInfoCircle size={14} />
+                          <span>
+                            Login expiration is disabled for all peers added
+                            with an setup-key.
+                          </span>
+                        </>
+                      </>
+                    ) : (
+                      <>
+                        <LockIcon size={14} />
+                        <span>
+                          {`You don't have the required permissions to update this
+                          setting.`}
+                        </span>
+                      </>
+                    )}
                  </div>
                }
                className={"w-full block"}
-                disabled={!!peer.user_id}
+                disabled={!!peer.user_id && !isUser}
              >
                <FancyToggleSwitch
-                  disabled={!peer.user_id}
+                  disabled={!peer.user_id || isUser}
                  value={loginExpiration}
                  onChange={setLoginExpiration}
                  label={
@@ -235,33 +255,74 @@ function PeerOverview() {
                  }
                />
              </FullTooltip>
-              <FancyToggleSwitch
-                value={ssh}
-                onChange={(set) =>
-                  !set
-                    ? setSsh(false)
-                    : openSSHDialog().then((confirm) => setSsh(confirm))
+              <FullTooltip
+                content={
+                  <div
+                    className={
+                      "flex gap-2 items-center !text-nb-gray-300 text-xs"
+                    }
+                  >
+                    <LockIcon size={14} />
+                    <span>
+                      {`You don't have the required permissions to update this
+                          setting.`}
+                    </span>
+                  </div>
                }
-                label={
-                  <>
-                    <TerminalSquare size={16} />
-                    SSH Access
-                  </>
-                }
-                helpText={
-                  "Enable the SSH server on this peer to access the machine via an secure shell."
-                }
-              />
+                interactive={false}
+                className={"w-full block"}
+                disabled={!isUser}
+              >
+                <FancyToggleSwitch
+                  value={ssh}
+                  disabled={isUser}
+                  onChange={(set) =>
+                    !set
+                      ? setSsh(false)
+                      : openSSHDialog().then((confirm) => setSsh(confirm))
+                  }
+                  label={
+                    <>
+                      <TerminalSquare size={16} />
+                      SSH Access
+                    </>
+                  }
+                  helpText={
+                    "Enable the SSH server on this peer to access the machine via an secure shell."
+                  }
+                />
+              </FullTooltip>
+
              <div>
                <Label>Assigned Groups</Label>
                <HelpText>
                  Use groups to control what this peer can access.
                </HelpText>
-                <PeerGroupSelector
-                  onChange={setSelectedGroups}
-                  values={selectedGroups}
-                  peer={peer}
-                />
+                <FullTooltip
+                  content={
+                    <div
+                      className={
+                        "flex gap-2 items-center !text-nb-gray-300 text-xs"
+                      }
+                    >
+                      <LockIcon size={14} />
+                      <span>
+                        {`You don't have the required permissions to update this
+                          setting.`}
+                      </span>
+                    </div>
+                  }
+                  interactive={false}
+                  className={"w-full block"}
+                  disabled={!isUser}
+                >
+                  <PeerGroupSelector
+                    disabled={isUser}
+                    onChange={setSelectedGroups}
+                    values={selectedGroups}
+                    peer={peer}
+                  />
+                </FullTooltip>
              </div>
            </div>
          </div>
@@ -269,7 +330,7 @@ function PeerOverview() {

        <Separator />

-        {isLinux ? (
+        {isLinux && !isUser ? (
          <div className={"px-8 py-6"}>
            <div className={"max-w-6xl"}>
              <div className={"flex justify-between items-center"}>
--- a/src/app/(dashboard)/peers/page.tsx
+++ b/src/app/(dashboard)/peers/page.tsx
@@ -21,7 +21,7 @@ export default function Peers() {

  return (
    <PageContainer>
-      {isUser ? <PeersDefaultView /> : <PeersView />}
+      <PeersView />
    </PageContainer>
  );
 }
--- a/src/contexts/CountryProvider.tsx
+++ b/src/contexts/CountryProvider.tsx
@@ -19,8 +19,14 @@ const CountryContext = React.createContext(
 export default function CountryProvider({ children }: Props) {
  const { isUser } = useLoggedInUser();

+  const getRegionByPeer = (peer: Peer) => "Unknown";
+
  return isUser ? (
-    children
+    <CountryContext.Provider
+      value={{ countries: [], isLoading: false, getRegionByPeer }}
+    >
+      {children}
+    </CountryContext.Provider>
  ) : (
    <CountryProviderContent>{children}</CountryProviderContent>
  );
--- a/src/contexts/GroupsProvider.tsx
+++ b/src/contexts/GroupsProvider.tsx
@@ -22,11 +22,7 @@ export default function GroupsProvider({ children }: Props) {
  const path = usePathname();
  const { isUser } = useLoggedInUser();

-  return isUser && path == "/peers" ? (
-    children
-  ) : (
-    <GroupsProviderContent>{children}</GroupsProviderContent>
-  );
+  return <GroupsProviderContent>{children}</GroupsProviderContent>;
 }

 export function GroupsProviderContent({ children }: Props) {
--- a/src/layouts/DashboardLayout.tsx
+++ b/src/layouts/DashboardLayout.tsx
@@ -154,7 +154,7 @@ function DashboardPageContent({ children }: { children: React.ReactNode }) {
                height: `calc(100vh - ${headerHeight + bannerHeight}px)`,
              }}
            >
-              {!isUser && <Navigation hideOnMobile />}
+              <Navigation hideOnMobile />
              {children}
            </div>
          </motion.div>
--- a/src/modules/common-table-rows/GroupsRow.tsx
+++ b/src/modules/common-table-rows/GroupsRow.tsx
@@ -14,6 +14,7 @@ import { FolderGit2 } from "lucide-react";
 import * as React from "react";
 import { useMemo } from "react";
 import { useGroups } from "@/contexts/GroupsProvider";
+import { useLoggedInUser } from "@/contexts/UsersProvider";
 import { Group } from "@/interfaces/Group";
 import { Peer } from "@/interfaces/Peer";
 import useGroupHelper from "@/modules/groups/useGroupHelper";
@@ -38,6 +39,7 @@ export default function GroupsRow({
  peer,
 }: Props) {
  const { groups: allGroups } = useGroups();
+  const { isUser } = useLoggedInUser();

  // Get the group by the id
  const foundGroups = useMemo(() => {
@@ -54,7 +56,7 @@ export default function GroupsRow({
        onClick={(e) => {
          e.preventDefault();
          e.stopPropagation();
-          setModal && setModal(true);
+          setModal && !isUser && setModal(true);
        }}
      >
        <MultipleGroups groups={foundGroups} label={label} />
--- a/src/modules/peers/PeersTable.tsx
+++ b/src/modules/peers/PeersTable.tsx
@@ -17,6 +17,7 @@ import React from "react";
 import { useSWRConfig } from "swr";
 import PeerIcon from "@/assets/icons/PeerIcon";
 import PeerProvider from "@/contexts/PeerProvider";
+import { useLoggedInUser } from "@/contexts/UsersProvider";
 import { useLocalStorage } from "@/hooks/useLocalStorage";
 import { Group } from "@/interfaces/Group";
 import { Peer } from "@/interfaces/Peer";
@@ -133,6 +134,7 @@ const PeersTableColumns: ColumnDef<Peer>[] = [
    ),
  },
  {
+    id: "actions",
    accessorKey: "id",
    header: "",
    cell: ({ row }) => (
@@ -176,6 +178,8 @@ export default function PeersTable({ peers, isLoading }: Props) {
      "name",
    ) as Group[]) || ([] as Group[]);

+  const { isUser } = useLoggedInUser();
+
  return (
    <DataTable
      onRowClick={(row) => router.push("/peer?id=" + row.original.id)}
@@ -193,6 +197,7 @@ export default function PeersTable({ peers, isLoading }: Props) {
        ip: false,
        user_name: false,
        user_email: false,
+        actions: !isUser,
      }}
      isLoading={isLoading}
      getStartedCard={