feature: Role system implementation on frontend

limanmys · Sep 13, 2023 · 363bdfe · 363bdfe
1 parent a305e01
commit 363bdfe
Show file tree

Hide file tree

Showing 19 changed files with 358 additions and 195 deletions.
diff --git a/src/components/dashboard/cards.tsx b/src/components/dashboard/cards.tsx
@@ -3,6 +3,8 @@ import Link from "next/link"
 import { apiService } from "@/services"
 import { ArrowRight, Cog, Server, ToyBrick, Users } from "lucide-react"
 
+import { cn } from "@/lib/utils"
+import { useCurrentUser } from "@/hooks/auth/useCurrentUser"
 import { CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 
 import { Skeleton } from "../ui/skeleton"
@@ -18,6 +20,7 @@ interface IDashboardInformation {
 export default function DashboardCards() {
   const [loading, setLoading] = useState<boolean>(true)
   const [data, setData] = useState<IDashboardInformation>()
+  const user = useCurrentUser()
 
   useEffect(() => {
     apiService
@@ -30,7 +33,14 @@ export default function DashboardCards() {
   }, [])
 
   return (
-    <div className="grid divide-x border-y md:grid-cols-2 lg:grid-cols-4">
+    <div
+      className={cn(
+        "grid divide-x border-y",
+        user.status === 1
+          ? "md:grid-cols-2 lg:grid-cols-4"
+          : "md:grid-cols-1 lg:grid-cols-3"
+      )}
+    >
       <div className="p-2">
         <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
           <CardTitle className="text-sm font-medium opacity-70">
@@ -54,29 +64,32 @@ export default function DashboardCards() {
           </Link>
         </CardContent>
       </div>
-      <div className="p-2">
-        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-          <CardTitle className="text-sm font-medium opacity-70">
-            Eklenti Sayısı
-          </CardTitle>
-          <ToyBrick className="h-4 w-4 text-muted-foreground" />
-        </CardHeader>
-        <CardContent>
-          <div className="text-2xl font-semibold">
-            {loading ? (
-              <Skeleton className="mb-2 h-6 w-16" />
-            ) : (
-              data?.extension_count
-            )}
-          </div>
-          <Link
-            className="flex items-center gap-1 text-xs text-muted-foreground transition-all hover:gap-3"
-            href="/settings/extensions"
-          >
-            Tüm eklentileri gör <ArrowRight className="inline-block h-4 w-4" />
-          </Link>
-        </CardContent>
-      </div>
+      {user.status === 1 && (
+        <div className="p-2">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium opacity-70">
+              Eklenti Sayısı
+            </CardTitle>
+            <ToyBrick className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-semibold">
+              {loading ? (
+                <Skeleton className="mb-2 h-6 w-16" />
+              ) : (
+                data?.extension_count
+              )}
+            </div>
+            <Link
+              className="flex items-center gap-1 text-xs text-muted-foreground transition-all hover:gap-3"
+              href="/settings/extensions"
+            >
+              Tüm eklentileri gör{" "}
+              <ArrowRight className="inline-block h-4 w-4" />
+            </Link>
+          </CardContent>
+        </div>
+      )}
       <div className="p-2">
         <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
           <CardTitle className="text-sm font-medium opacity-70">
@@ -92,13 +105,19 @@ export default function DashboardCards() {
               data?.user_count
             )}
           </div>
-          <Link
-            href="/settings/users"
-            className="flex items-center gap-1 text-xs text-muted-foreground transition-all hover:gap-3"
-          >
-            Tüm kullanıcıları gör{" "}
-            <ArrowRight className="inline-block h-4 w-4" />
-          </Link>
+          {user.status === 1 ? (
+            <Link
+              href="/settings/users"
+              className="flex items-center gap-1 text-xs text-muted-foreground transition-all hover:gap-3"
+            >
+              Tüm kullanıcıları gör{" "}
+              <ArrowRight className="inline-block h-4 w-4" />
+            </Link>
+          ) : (
+            <p className="flex items-center gap-1 text-xs text-muted-foreground transition-all hover:gap-3">
+              adet Liman kullanıcısı
+            </p>
+          )}
         </CardContent>
       </div>
       <div className="p-2">

diff --git a/src/components/navigation/notifications.tsx b/src/components/navigation/notifications.tsx
@@ -9,6 +9,7 @@ import Pusher from "pusher-js"
 
 import { INotification } from "@/types/notification"
 import { cn } from "@/lib/utils"
+import { useCurrentUser } from "@/hooks/auth/useCurrentUser"
 import { Button, buttonVariants } from "@/components/ui/button"
 
 import { Badge } from "../ui/badge"
@@ -24,6 +25,7 @@ import { useNotification } from "../ui/use-notification"
 export default function Notifications() {
   const router = useRouter()
   const { sendNotification } = useNotification()
+  const user = useCurrentUser()
 
   const snd = new Audio("/assets/sound/notification.mp3")
   function beep() {
@@ -217,15 +219,20 @@ export default function Notifications() {
         )}
         <DropdownMenuSeparator />
         <div className="flex items-center justify-between p-3">
-          <Link href="/settings/notifications">
-            <Button
-              size="sm"
-              variant="ghost"
-              className="-ml-1 text-muted-foreground"
-            >
-              Bildirimleri Yönet
-            </Button>
-          </Link>
+          {user.status === 1 ? (
+            <Link href="/settings/external_notifications">
+              <Button
+                size="sm"
+                variant="ghost"
+                className="-ml-1 text-muted-foreground"
+              >
+                Bildirimleri Yönet
+              </Button>
+            </Link>
+          ) : (
+            <div></div>
+          )}
+
           <Link href="/notifications">
             <Button size="sm" className="rounded-[8px]">
               Tüm Bildirimleri Görüntüle

diff --git a/src/components/navigation/sidebar-selected.tsx b/src/components/navigation/sidebar-selected.tsx
@@ -21,6 +21,7 @@ import {
 import { IExtension } from "@/types/extension"
 import { IServer } from "@/types/server"
 import { cn } from "@/lib/utils"
+import { useCurrentUser } from "@/hooks/auth/useCurrentUser"
 
 import { Icons } from "../ui/icons"
 import { Skeleton } from "../ui/skeleton"
@@ -38,6 +39,7 @@ export default function SidebarSelected() {
     setSelectedLoading,
   ] = useSidebarContext()
   const sidebarCtx = useSidebarContext()
+  const user = useCurrentUser()
 
   useEffect(() => {
     setSelectedLoading(true)
@@ -130,82 +132,96 @@ export default function SidebarSelected() {
             />
           </div>
           <div>
-            <ServerItem
-              link={`/servers/${selected}`}
-              exact={true}
-              disabled={elementIsActive(selectedData)}
-            >
-              <TrendingUp className="mr-2 h-4 w-4" />
-              Sistem Durumu
-            </ServerItem>
-            <ServerItem
-              link={`/servers/${selected}/extensions`}
-              exact={true}
-              disabled={!selectedData.is_online}
-            >
-              <ToyBrick className="mr-2 h-4 w-4" />
-              Eklentiler
-            </ServerItem>
-            <ServerItem
-              link={`/servers/${selected}/services`}
-              disabled={elementIsActive(selectedData)}
-            >
-              <ServerCog className="mr-2 h-4 w-4" />
-              Servisler
-            </ServerItem>
-            <ServerItem
-              link={`/servers/${selected}/packages`}
-              disabled={elementIsActive(selectedData)}
-            >
-              <PackageOpen className="mr-2 h-4 w-4" />
-              Paketler
-            </ServerItem>
-            <ServerItem
-              link={`/servers/${selected}/updates`}
-              disabled={elementIsActive(selectedData)}
-            >
-              <PackageSearch className="mr-2 h-4 w-4" />
-              Güncellemeler
-            </ServerItem>
-            <div className="mb-1">
-              <DropdownServerItem
-                items={[
-                  {
-                    link: `/servers/${selected}/users/local`,
-                    name: "Yerel Kullanıcılar",
-                    exact: true,
-                  },
-                  {
-                    link: `/servers/${selected}/users/groups`,
-                    name: "Yerel Gruplar",
-                    exact: true,
-                  },
-                  {
-                    link: `/servers/${selected}/users/sudoers`,
-                    name: "Yetkili Kullanıcılar",
-                    exact: true,
-                  },
-                ]}
+            {user.permissions.server_details && (
+              <>
+                <ServerItem
+                  link={`/servers/${selected}`}
+                  exact={true}
+                  disabled={elementIsActive(selectedData)}
+                >
+                  <TrendingUp className="mr-2 h-4 w-4" />
+                  Sistem Durumu
+                </ServerItem>
+                <ServerItem
+                  link={`/servers/${selected}/extensions`}
+                  exact={true}
+                  disabled={!selectedData.is_online}
+                >
+                  <ToyBrick className="mr-2 h-4 w-4" />
+                  Eklentiler
+                </ServerItem>
+              </>
+            )}
+
+            {user.permissions.server_services && (
+              <ServerItem
+                link={`/servers/${selected}/services`}
                 disabled={elementIsActive(selectedData)}
               >
-                <Users className="mr-2 h-4 w-4" />
-                Kullanıcı İşlemleri
-              </DropdownServerItem>
-            </div>
-            <ServerItem
-              link={`/servers/${selected}/open_ports`}
-              disabled={elementIsActive(selectedData)}
-            >
-              <Network className="mr-2 h-4 w-4" />
-              Açık Portlar
-            </ServerItem>
-            <ServerItem
-              link={`/servers/${selected}/access_logs`}
-              disabled={!selectedData.is_online}
-            >
-              <FileClock className="mr-2 h-4 w-4" />
-              Erişim Kayıtları
-            </ServerItem>
+                <ServerCog className="mr-2 h-4 w-4" />
+                Servisler
+              </ServerItem>
+            )}
+            {user.permissions.server_details && (
+              <>
+                <ServerItem
+                  link={`/servers/${selected}/packages`}
+                  disabled={elementIsActive(selectedData)}
+                >
+                  <PackageOpen className="mr-2 h-4 w-4" />
+                  Paketler
+                </ServerItem>
+                <ServerItem
+                  link={`/servers/${selected}/updates`}
+                  disabled={elementIsActive(selectedData)}
+                >
+                  <PackageSearch className="mr-2 h-4 w-4" />
+                  Güncellemeler
+                </ServerItem>
+                <div className="mb-1">
+                  <DropdownServerItem
+                    items={[
+                      {
+                        link: `/servers/${selected}/users/local`,
+                        name: "Yerel Kullanıcılar",
+                        exact: true,
+                      },
+                      {
+                        link: `/servers/${selected}/users/groups`,
+                        name: "Yerel Gruplar",
+                        exact: true,
+                      },
+                      {
+                        link: `/servers/${selected}/users/sudoers`,
+                        name: "Yetkili Kullanıcılar",
+                        exact: true,
+                      },
+                    ]}
+                    disabled={elementIsActive(selectedData)}
+                  >
+                    <Users className="mr-2 h-4 w-4" />
+                    Kullanıcı İşlemleri
+                  </DropdownServerItem>
+                </div>
+                <ServerItem
+                  link={`/servers/${selected}/open_ports`}
+                  disabled={elementIsActive(selectedData)}
+                >
+                  <Network className="mr-2 h-4 w-4" />
+                  Açık Portlar
+                </ServerItem>
+              </>
+            )}
+
+            {user.permissions.view_logs && (
+              <ServerItem
+                link={`/servers/${selected}/access_logs`}
+                disabled={!selectedData.is_online}
+              >
+                <FileClock className="mr-2 h-4 w-4" />
+                Erişim Kayıtları
+              </ServerItem>
+            )}
           </div>
 
           {selectedData.extensions && selectedData.extensions.length > 0 && (

diff --git a/src/components/navigation/sidebar-settings.tsx b/src/components/navigation/sidebar-settings.tsx
@@ -1,11 +1,14 @@
-import { Server } from "lucide-react"
+import { useAutoAnimate } from "@formkit/auto-animate/react"
 
 import { Settings } from "@/lib/settings"
+import { useCurrentUser } from "@/hooks/auth/useCurrentUser"
 
-import { Button } from "../ui/button"
 import SettingsItem from "./settings-item"
 
 export default function SidebarSettings() {
+  const user = useCurrentUser()
+  const [parent] = useAutoAnimate()
+
   return (
     <>
       <h2 className="mb-5 px-2 text-lg font-semibold tracking-tight">
@@ -19,14 +22,18 @@ export default function SidebarSettings() {
           <SettingsItem {...setting} key={setting.href} />
         ))}
       </div>
-      <h3 className="mb-2 mt-6 px-2 text-base font-semibold tracking-tight">
-        Sistem Ayarları
-      </h3>
-      <div className="space-y-1">
-        {Settings.system.map((setting) => (
-          <SettingsItem {...setting} key={setting.href} />
-        ))}
-      </div>
+      {user.status === 1 && (
+        <div ref={parent}>
+          <h3 className="mb-2 mt-6 px-2 text-base font-semibold tracking-tight">
+            Sistem Ayarları
+          </h3>
+          <div className="space-y-1">
+            {Settings.system.map((setting) => (
+              <SettingsItem {...setting} key={setting.href} />
+            ))}
+          </div>
+        </div>
+      )}
     </>
   )
 }