feat(rbac): Viewer-Rolle auf alle Firewall-CRUD-Seiten durchsetzen — v1.1.91

AddressObjects, AddressGroups, Services, ServiceGroups, Rules, NATRules, Zones:
Add/Edit-Buttons disabled + Tooltip, Delete bedingt gerendert (viewer vs. Popconfirm).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

VERSION

@@ -1 +1 @@
-1.1.89
+1.1.91

cmd/edgeguard-api/main.go

@@ -60,7 +60,7 @@ import (
 	usersvc "git.netcell-it.de/projekte/edgeguard-native/internal/services/users"
 )
 
-var version = "1.1.89"
+var version = "1.1.91"
 
 func main() {
 	addr := os.Getenv("EDGEGUARD_API_ADDR")

cmd/edgeguard-ctl/main.go

@@ -11,7 +11,7 @@ import (
 	"git.netcell-it.de/projekte/edgeguard-native/internal/services/setup"
 )
 
-var version = "1.1.89"
+var version = "1.1.91"
 
 const usage = `edgeguard-ctl — EdgeGuard CLI
 

cmd/edgeguard-scheduler/main.go

@@ -35,7 +35,7 @@ import (
 	"git.netcell-it.de/projekte/edgeguard-native/internal/services/tlscerts"
 )
 
-var version = "1.1.89"
+var version = "1.1.91"
 
 const (
 	// renewTickInterval — how often we re-evaluate expiring certs.

management-ui/src/pages/Cluster/index.tsx

@@ -7,6 +7,7 @@ import { useTranslation } from 'react-i18next'
 
 import apiClient, { isEnvelope } from '../../api/client'
 import PageHeader from '../../components/PageHeader'
+import { useAuthStore } from '../../stores/auth'
 
 const { Text } = Typography
 
@@ -116,6 +117,7 @@ function useTickingNow(intervalMs = 1000): number {
 export default function ClusterPage() {
   const { t } = useTranslation()
   const now = useTickingNow()
+  const isViewer = useAuthStore((s) => s.user?.role) === 'viewer'
 
   const { data, isLoading } = useQuery({
     queryKey: ['cluster', 'status'],
@@ -246,6 +248,13 @@ export default function ClusterPage() {
     {
       title: t('common.actions'), key: 'actions', width: 110,
       render: (_, r) => (
+        isViewer ? (
+          <Tooltip title={t('auth.viewerBadge')}>
+            <Button type="text" size="small" danger icon={<DeleteOutlined />} disabled>
+              {t('cluster.removePeerBtn')}
+            </Button>
+          </Tooltip>
+        ) : (
           <Popconfirm
             title={t('cluster.removePeerConfirmTitle')}
             description={t('cluster.removePeerConfirmDesc', { fqdn: r.fqdn })}
@@ -262,6 +271,7 @@ export default function ClusterPage() {
               {t('cluster.removePeerBtn')}
             </Button>
           </Popconfirm>
+        )
       ),
     },
   ]
@@ -274,13 +284,16 @@ export default function ClusterPage() {
         subtitle={t('cluster.intro', { count: 1 + data.peers.length })}
         extra={
           <Space>
+            <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
               <Button
                 icon={<KeyOutlined />}
                 loading={generateToken.isPending}
+                disabled={isViewer}
                 onClick={() => generateToken.mutate()}
               >
                 {t('cluster.generateJoinToken')}
               </Button>
+            </Tooltip>
             <Tag color={data.mode === 'cluster' ? 'blue' : 'default'}>
               {data.mode === 'cluster' ? t('cluster.modeCluster') : t('cluster.modeSingle')}
             </Tag>
@@ -363,6 +376,11 @@ export default function ClusterPage() {
       {(certStatus.data?.has_ca || certStatus.data?.has_peer) && (
         <Card size="small" title={t('cluster.certCardTitle')} className="mb-16"
           extra={certStatus.data?.has_ca && (
+            isViewer ? (
+              <Tooltip title={t('auth.viewerBadge')}>
+                <Button size="small" disabled>{t('cluster.renewSelfBtn')}</Button>
+              </Tooltip>
+            ) : (
               <Popconfirm
                 title={t('cluster.renewSelfConfirm')}
                 okText={t('common.yes')}
@@ -373,6 +391,7 @@ export default function ClusterPage() {
                   {t('cluster.renewSelfBtn')}
                 </Button>
               </Popconfirm>
+            )
           )}
         >
           <Descriptions size="small" column={2} bordered>

management-ui/src/pages/Firewall/AddressGroups.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { Button, Form, Input, Modal, Popconfirm, Select, Space, Tag, message } from 'antd'
+import { Button, Form, Input, Modal, Popconfirm, Select, Space, Tag, Tooltip, message } from 'antd'
 import type { ColumnsType } from 'antd/es/table'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
@@ -9,6 +9,7 @@ import DataTable from '../../components/DataTable'
 import EmptyState from '../../components/EmptyState'
 
 import apiClient, { isEnvelope } from '../../api/client'
+import { useAuthStore } from '../../stores/auth'
 import type { AddressGroup, AddressObject } from './types'
 
 interface FormValues {
@@ -31,6 +32,7 @@ async function listObjects(): Promise<AddressObject[]> {
 export default function AddressGroupsTab() {
   const { t } = useTranslation()
   const qc = useQueryClient()
+  const isViewer = useAuthStore((s) => s.user?.role) === 'viewer'
   const { data: groups, isLoading } = useQuery({ queryKey: ['fw', 'addr-grp'], queryFn: listGroups })
   const { data: objects } = useQuery({ queryKey: ['fw', 'addr-obj'], queryFn: listObjects })
 
@@ -75,13 +77,21 @@ export default function AddressGroupsTab() {
       title: t('common.edit'), key: 'actions',
       render: (_, row) => (
         <Space>
-          <Button size="small" onClick={() => {
+          <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
+            <Button size="small" disabled={isViewer} onClick={() => {
               setEditing(row)
               form.setFieldsValue({ name: row.name, description: row.description ?? undefined, member_ids: row.member_ids ?? [] })
             }}>{t('common.edit')}</Button>
+          </Tooltip>
+          {isViewer ? (
+            <Tooltip title={t('auth.viewerBadge')}>
+              <Button size="small" danger disabled>{t('common.delete')}</Button>
+            </Tooltip>
+          ) : (
             <Popconfirm title={t('fw.ag.deleteConfirm', { name: row.name })} onConfirm={() => del.mutate(row.id)}>
               <Button size="small" danger>{t('common.delete')}</Button>
             </Popconfirm>
+          )}
         </Space>
       ),
     },
@@ -94,9 +104,11 @@ export default function AddressGroupsTab() {
 
   return (
     <>
-      <Button type="primary" className="mb-16" onClick={openCreate}>
+      <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
+        <Button type="primary" className="mb-16" disabled={isViewer} onClick={openCreate}>
           {t('fw.ag.add')}
         </Button>
+      </Tooltip>
       <DataTable
         rowKey="id"
         loading={isLoading}
@@ -107,7 +119,11 @@ export default function AddressGroupsTab() {
             icon={<GroupOutlined />}
             title={t('fw.ag.emptyTitle')}
             description={t('fw.ag.emptyDesc')}
-            action={<Button type="primary" onClick={openCreate}>{t('fw.ag.add')}</Button>}
+            action={
+              <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
+                <Button type="primary" disabled={isViewer} onClick={openCreate}>{t('fw.ag.add')}</Button>
+              </Tooltip>
+            }
           />
         }
       />

management-ui/src/pages/Firewall/AddressObjects.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { Button, Form, Input, Modal, Popconfirm, Select, Space, Tag, message } from 'antd'
+import { Button, Form, Input, Modal, Popconfirm, Select, Space, Tag, Tooltip, message } from 'antd'
 import type { ColumnsType } from 'antd/es/table'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
@@ -9,6 +9,7 @@ import DataTable from '../../components/DataTable'
 import EmptyState from '../../components/EmptyState'
 
 import apiClient, { isEnvelope } from '../../api/client'
+import { useAuthStore } from '../../stores/auth'
 import type { AddressObject } from './types'
 
 interface FormValues {
@@ -34,6 +35,7 @@ const KIND_PLACEHOLDER: Record<AddressObject['kind'], string> = {
 export default function AddressObjectsTab() {
   const { t } = useTranslation()
   const qc = useQueryClient()
+  const isViewer = useAuthStore((s) => s.user?.role) === 'viewer'
   const { data, isLoading } = useQuery({ queryKey: ['fw', 'addr-obj'], queryFn: listAO })
 
   const [editing, setEditing] = useState<AddressObject | null>(null)
@@ -68,13 +70,21 @@ export default function AddressObjectsTab() {
       title: t('common.edit'), key: 'actions',
       render: (_, row) => (
         <Space>
-          <Button size="small" onClick={() => {
+          <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
+            <Button size="small" disabled={isViewer} onClick={() => {
               setEditing(row)
               form.setFieldsValue({ name: row.name, kind: row.kind, value: row.value, description: row.description ?? undefined })
             }}>{t('common.edit')}</Button>
+          </Tooltip>
+          {isViewer ? (
+            <Tooltip title={t('auth.viewerBadge')}>
+              <Button size="small" danger disabled>{t('common.delete')}</Button>
+            </Tooltip>
+          ) : (
             <Popconfirm title={t('fw.ao.deleteConfirm', { name: row.name })} onConfirm={() => del.mutate(row.id)}>
               <Button size="small" danger>{t('common.delete')}</Button>
             </Popconfirm>
+          )}
         </Space>
       ),
     },
@@ -87,9 +97,11 @@ export default function AddressObjectsTab() {
 
   return (
     <>
-      <Button type="primary" className="mb-16" onClick={openCreate}>
+      <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
+        <Button type="primary" className="mb-16" disabled={isViewer} onClick={openCreate}>
           {t('fw.ao.add')}
         </Button>
+      </Tooltip>
       <DataTable
         rowKey="id"
         loading={isLoading}
@@ -101,7 +113,9 @@ export default function AddressObjectsTab() {
             title={t('fw.ao.emptyTitle')}
             description={t('fw.ao.emptyDesc')}
             action={
-              <Button type="primary" onClick={openCreate}>{t('fw.ao.add')}</Button>
+              <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
+                <Button type="primary" disabled={isViewer} onClick={openCreate}>{t('fw.ao.add')}</Button>
+              </Tooltip>
             }
           />
         }

management-ui/src/pages/Firewall/NATRules.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { Button, Form, Input, InputNumber, Modal, Popconfirm, Select, Space, Switch, Tag, message } from 'antd'
+import { Button, Form, Input, InputNumber, Modal, Popconfirm, Select, Space, Switch, Tag, Tooltip, message } from 'antd'
 import type { ColumnsType } from 'antd/es/table'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
@@ -9,6 +9,7 @@ import DataTable from '../../components/DataTable'
 import EmptyState from '../../components/EmptyState'
 
 import apiClient, { isEnvelope } from '../../api/client'
+import { useAuthStore } from '../../stores/auth'
 import type { FwZone, NATRule } from './types'
 
 interface FormValues {
@@ -49,6 +50,7 @@ const KIND_COLORS: Record<NATRule['kind'], string> = {
 export default function NATRulesTab() {
   const { t } = useTranslation()
   const qc = useQueryClient()
+  const isViewer = useAuthStore((s) => s.user?.role) === 'viewer'
   const { data, isLoading } = useQuery({ queryKey: ['fw', 'nat'], queryFn: listNAT })
   const { data: zones } = useQuery({ queryKey: ['fw', 'zones'], queryFn: listZones })
 
@@ -121,6 +123,7 @@ export default function NATRulesTab() {
         <Switch
           size="small"
           checked={v}
+          disabled={isViewer}
           loading={quickToggle.isPending && quickToggle.variables?.id === row.id}
           onChange={(checked) => quickToggle.mutate({ id: row.id, row, checked })}
         />
@@ -130,7 +133,8 @@ export default function NATRulesTab() {
       title: t('common.edit'), key: 'actions',
       render: (_, row) => (
         <Space>
-          <Button size="small" onClick={() => {
+          <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
+            <Button size="small" disabled={isViewer} onClick={() => {
               setEditing(row)
               form.setFieldsValue({
                 name: row.name ?? undefined,
@@ -147,9 +151,16 @@ export default function NATRulesTab() {
                 comment: row.comment ?? undefined,
               })
             }}>{t('common.edit')}</Button>
+          </Tooltip>
+          {isViewer ? (
+            <Tooltip title={t('auth.viewerBadge')}>
+              <Button size="small" danger disabled>{t('common.delete')}</Button>
+            </Tooltip>
+          ) : (
             <Popconfirm title={t('fw.nat.deleteConfirm')} onConfirm={() => del.mutate(row.id)}>
               <Button size="small" danger>{t('common.delete')}</Button>
             </Popconfirm>
+          )}
         </Space>
       ),
     },
@@ -162,9 +173,11 @@ export default function NATRulesTab() {
 
   return (
     <>
-      <Button type="primary" className="mb-16" onClick={openCreate}>
+      <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
+        <Button type="primary" className="mb-16" disabled={isViewer} onClick={openCreate}>
           {t('fw.nat.add')}
         </Button>
+      </Tooltip>
       <DataTable
         rowKey="id"
         loading={isLoading}
@@ -175,7 +188,11 @@ export default function NATRulesTab() {
             icon={<BranchesOutlined />}
             title={t('fw.nat.emptyTitle')}
             description={t('fw.nat.emptyDesc')}
-            action={<Button type="primary" onClick={openCreate}>{t('fw.nat.add')}</Button>}
+            action={
+              <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
+                <Button type="primary" disabled={isViewer} onClick={openCreate}>{t('fw.nat.add')}</Button>
+              </Tooltip>
+            }
           />
         }
       />

management-ui/src/pages/Firewall/Rules.tsx

@@ -11,6 +11,7 @@ import DataTable from '../../components/DataTable'
 import EmptyState from '../../components/EmptyState'
 
 import apiClient, { isEnvelope } from '../../api/client'
+import { useAuthStore } from '../../stores/auth'
 import type { AddressGroup, AddressObject, FwRule, FwService, FwZone, ServiceGroup, Zone } from './types'
 import { ZONES_FALLBACK } from './types'
 
@@ -112,6 +113,7 @@ function buildPayload(v: FormValues) {
 export default function RulesTab() {
   const { t } = useTranslation()
   const qc = useQueryClient()
+  const isViewer = useAuthStore((s) => s.user?.role) === 'viewer'
   const { data: rules, isLoading } = useQuery({ queryKey: ['fw', 'rules'], queryFn: listRules })
   const { data: aos } = useQuery({ queryKey: ['fw', 'addr-obj'], queryFn: listAO })
   const { data: ags } = useQuery({ queryKey: ['fw', 'addr-grp'], queryFn: listAG })
@@ -225,6 +227,7 @@ export default function RulesTab() {
         <Switch
           size="small"
           checked={v}
+          disabled={isViewer}
           loading={quickToggle.isPending && quickToggle.variables?.id === row.id}
           onChange={(checked) => quickToggle.mutate({ id: row.id, row, checked })}
         />
@@ -247,10 +250,18 @@ export default function RulesTab() {
       title: t('common.edit'), key: 'actions',
       render: (_, row) => (
         <Space>
-          <Button size="small" onClick={() => editFromRow(row)}>{t('common.edit')}</Button>
+          <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
+            <Button size="small" disabled={isViewer} onClick={() => editFromRow(row)}>{t('common.edit')}</Button>
+          </Tooltip>
+          {isViewer ? (
+            <Tooltip title={t('auth.viewerBadge')}>
+              <Button size="small" danger disabled>{t('common.delete')}</Button>
+            </Tooltip>
+          ) : (
             <Popconfirm title={t('fw.rule.deleteConfirm')} onConfirm={() => del.mutate(row.id)}>
               <Button size="small" danger>{t('common.delete')}</Button>
             </Popconfirm>
+          )}
         </Space>
       ),
     },
@@ -267,9 +278,11 @@ export default function RulesTab() {
 
   return (
     <>
-      <Button type="primary" className="mb-16" onClick={openCreate}>
+      <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
+        <Button type="primary" className="mb-16" disabled={isViewer} onClick={openCreate}>
           {t('fw.rule.add')}
         </Button>
+      </Tooltip>
       <DataTable
         rowKey="id"
         loading={isLoading}
@@ -280,7 +293,11 @@ export default function RulesTab() {
             icon={<FireOutlined />}
             title={t('fw.rule.emptyTitle')}
             description={t('fw.rule.emptyDesc')}
-            action={<Button type="primary" onClick={openCreate}>{t('fw.rule.add')}</Button>}
+            action={
+              <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
+                <Button type="primary" disabled={isViewer} onClick={openCreate}>{t('fw.rule.add')}</Button>
+              </Tooltip>
+            }
           />
         }
       />

management-ui/src/pages/Firewall/ServiceGroups.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { Button, Form, Input, Modal, Popconfirm, Select, Space, Tag, message } from 'antd'
+import { Button, Form, Input, Modal, Popconfirm, Select, Space, Tag, Tooltip, message } from 'antd'
 import type { ColumnsType } from 'antd/es/table'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
@@ -9,6 +9,7 @@ import DataTable from '../../components/DataTable'
 import EmptyState from '../../components/EmptyState'
 
 import apiClient, { isEnvelope } from '../../api/client'
+import { useAuthStore } from '../../stores/auth'
 import type { FwService, ServiceGroup } from './types'
 
 interface FormValues {
@@ -31,6 +32,7 @@ async function listServices(): Promise<FwService[]> {
 export default function ServiceGroupsTab() {
   const { t } = useTranslation()
   const qc = useQueryClient()
+  const isViewer = useAuthStore((s) => s.user?.role) === 'viewer'
   const { data: groups, isLoading } = useQuery({ queryKey: ['fw', 'svc-grp'], queryFn: listGroups })
   const { data: services } = useQuery({ queryKey: ['fw', 'svc'], queryFn: listServices })
 
@@ -75,13 +77,21 @@ export default function ServiceGroupsTab() {
       title: t('common.edit'), key: 'actions',
       render: (_, row) => (
         <Space>
-          <Button size="small" onClick={() => {
+          <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
+            <Button size="small" disabled={isViewer} onClick={() => {
               setEditing(row)
               form.setFieldsValue({ name: row.name, description: row.description ?? undefined, member_ids: row.member_ids ?? [] })
             }}>{t('common.edit')}</Button>
+          </Tooltip>
+          {isViewer ? (
+            <Tooltip title={t('auth.viewerBadge')}>
+              <Button size="small" danger disabled>{t('common.delete')}</Button>
+            </Tooltip>
+          ) : (
             <Popconfirm title={t('fw.sg.deleteConfirm', { name: row.name })} onConfirm={() => del.mutate(row.id)}>
               <Button size="small" danger>{t('common.delete')}</Button>
             </Popconfirm>
+          )}
         </Space>
       ),
     },
@@ -94,9 +104,11 @@ export default function ServiceGroupsTab() {
 
   return (
     <>
-      <Button type="primary" className="mb-16" onClick={openCreate}>
+      <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
+        <Button type="primary" className="mb-16" disabled={isViewer} onClick={openCreate}>
           {t('fw.sg.add')}
         </Button>
+      </Tooltip>
       <DataTable
         rowKey="id"
         loading={isLoading}
@@ -107,7 +119,11 @@ export default function ServiceGroupsTab() {
             icon={<GroupOutlined />}
             title={t('fw.sg.emptyTitle')}
             description={t('fw.sg.emptyDesc')}
-            action={<Button type="primary" onClick={openCreate}>{t('fw.sg.add')}</Button>}
+            action={
+              <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
+                <Button type="primary" disabled={isViewer} onClick={openCreate}>{t('fw.sg.add')}</Button>
+              </Tooltip>
+            }
           />
         }
       />

management-ui/src/pages/Firewall/Services.tsx

@@ -9,6 +9,7 @@ import DataTable from '../../components/DataTable'
 import EmptyState from '../../components/EmptyState'
 
 import apiClient, { isEnvelope } from '../../api/client'
+import { useAuthStore } from '../../stores/auth'
 import type { FwService } from './types'
 
 interface FormValues {
@@ -28,6 +29,7 @@ async function listServices(): Promise<FwService[]> {
 export default function ServicesTab() {
   const { t } = useTranslation()
   const qc = useQueryClient()
+  const isViewer = useAuthStore((s) => s.user?.role) === 'viewer'
   const { data, isLoading } = useQuery({ queryKey: ['fw', 'svc'], queryFn: listServices })
 
   const [editing, setEditing] = useState<FwService | null>(null)
@@ -70,7 +72,8 @@ export default function ServicesTab() {
       title: t('common.edit'), key: 'actions',
       render: (_, row) => (
         <Space>
-          <Button size="small" disabled={row.builtin} onClick={() => {
+          <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
+            <Button size="small" disabled={row.builtin || isViewer} onClick={() => {
               setEditing(row)
               form.setFieldsValue({
                 name: row.name, proto: row.proto,
@@ -79,6 +82,12 @@ export default function ServicesTab() {
                 description: row.description ?? undefined,
               })
             }}>{t('common.edit')}</Button>
+          </Tooltip>
+          {isViewer ? (
+            <Tooltip title={t('auth.viewerBadge')}>
+              <Button size="small" danger disabled>{t('common.delete')}</Button>
+            </Tooltip>
+          ) : (
             <Popconfirm
               title={t('fw.svc.deleteConfirm', { name: row.name })}
               onConfirm={() => del.mutate(row.id)}
@@ -86,6 +95,7 @@ export default function ServicesTab() {
             >
               <Button size="small" danger disabled={row.builtin}>{t('common.delete')}</Button>
             </Popconfirm>
+          )}
         </Space>
       ),
     },
@@ -98,9 +108,11 @@ export default function ServicesTab() {
 
   return (
     <>
-      <Button type="primary" className="mb-16" onClick={openCreate}>
+      <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
+        <Button type="primary" className="mb-16" disabled={isViewer} onClick={openCreate}>
           {t('fw.svc.add')}
         </Button>
+      </Tooltip>
       <DataTable
         rowKey="id"
         loading={isLoading}
@@ -111,7 +123,11 @@ export default function ServicesTab() {
             icon={<ApiOutlined />}
             title={t('fw.svc.emptyTitle')}
             description={t('fw.svc.emptyDesc')}
-            action={<Button type="primary" onClick={openCreate}>{t('fw.svc.add')}</Button>}
+            action={
+              <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
+                <Button type="primary" disabled={isViewer} onClick={openCreate}>{t('fw.svc.add')}</Button>
+              </Tooltip>
+            }
           />
         }
       />

management-ui/src/pages/Firewall/Zones.tsx

@@ -7,6 +7,7 @@ import { useTranslation } from 'react-i18next'
 import { ApartmentOutlined } from '@ant-design/icons'
 
 import apiClient, { isEnvelope } from '../../api/client'
+import { useAuthStore } from '../../stores/auth'
 import DataTable from '../../components/DataTable'
 import EmptyState from '../../components/EmptyState'
 import type { FwZone } from './types'
@@ -25,6 +26,7 @@ async function listZones(): Promise<FwZone[]> {
 export default function ZonesTab() {
   const { t } = useTranslation()
   const qc = useQueryClient()
+  const isViewer = useAuthStore((s) => s.user?.role) === 'viewer'
   const [editing, setEditing] = useState<FwZone | null>(null)
   const [creating, setCreating] = useState(false)
   const [form] = Form.useForm<FormValues>()
@@ -61,14 +63,16 @@ export default function ZonesTab() {
       title: t('common.actions'), key: 'actions',
       render: (_, row) => (
         <Space>
-          <Button size="small" onClick={() => {
+          <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
+            <Button size="small" disabled={isViewer} onClick={() => {
               setEditing(row)
               form.setFieldsValue({ name: row.name, description: row.description ?? undefined })
             }}>{t('common.edit')}</Button>
-          {row.builtin
-            ? <Tooltip title={t('fw.zone.builtinHint')}>
-                <Button size="small" danger disabled>{t('common.delete')}</Button>
           </Tooltip>
+          {isViewer
+            ? <Tooltip title={t('auth.viewerBadge')}><Button size="small" danger disabled>{t('common.delete')}</Button></Tooltip>
+            : row.builtin
+              ? <Tooltip title={t('fw.zone.builtinHint')}><Button size="small" danger disabled>{t('common.delete')}</Button></Tooltip>
               : <Popconfirm
                   title={t('fw.zone.deleteConfirm', { name: row.name })}
                   onConfirm={() => del.mutate(row.id)}
@@ -84,9 +88,11 @@ export default function ZonesTab() {
 
   return (
     <>
-      <Button type="primary" className="mb-16" onClick={openCreate}>
+      <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
+        <Button type="primary" className="mb-16" disabled={isViewer} onClick={openCreate}>
           {t('fw.zone.add')}
         </Button>
+      </Tooltip>
       <DataTable
         rowKey="id"
         loading={isLoading}
@@ -98,7 +104,9 @@ export default function ZonesTab() {
             title={t('fw.zone.emptyTitle')}
             description={t('fw.zone.emptyDesc')}
             action={
-              <Button type="primary" onClick={openCreate}>{t('fw.zone.add')}</Button>
+              <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
+                <Button type="primary" disabled={isViewer} onClick={openCreate}>{t('fw.zone.add')}</Button>
+              </Tooltip>
             }
           />
         }

management-ui/src/pages/Settings/index.tsx

@@ -1,4 +1,4 @@
-import { Alert, Button, Card, Descriptions, Form, Input, InputNumber, Select, Space, Spin, Switch, Typography, message } from 'antd'
+import { Alert, Button, Card, Descriptions, Form, Input, InputNumber, Select, Space, Spin, Switch, Tooltip, Typography, message } from 'antd'
 import { CloudDownloadOutlined, CloudSyncOutlined, CodeOutlined, DatabaseOutlined, ExclamationCircleOutlined, FileSearchOutlined, GlobalOutlined, LockOutlined, MailOutlined, ReloadOutlined, SettingOutlined, StopOutlined, ToolOutlined } from '@ant-design/icons'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useEffect, useState } from 'react'
@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next'
 
 import apiClient, { isEnvelope } from '../../api/client'
 import PageHeader from '../../components/PageHeader'
+import { useAuthStore } from '../../stores/auth'
 
 interface SetupStatus {
   completed: boolean
@@ -33,6 +34,7 @@ interface ChangePasswordValues {
 export default function SettingsPage() {
   const { t } = useTranslation()
   const qc = useQueryClient()
+  const isViewer = useAuthStore((s) => s.user?.role) === 'viewer'
   const [msg, msgCtx] = message.useMessage()
   const [pwForm] = Form.useForm<ChangePasswordValues>()
 
@@ -343,27 +345,36 @@ export default function SettingsPage() {
         size="small"
       >
         <Space wrap>
+          <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
             <Button
               icon={<ReloadOutlined />}
               loading={haproxyReload.isPending}
+              disabled={isViewer}
               onClick={() => haproxyReload.mutate()}
             >
               {t('settings.haproxyReloadBtn')}
             </Button>
+          </Tooltip>
+          <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
             <Button
               icon={<ReloadOutlined />}
               loading={renderConfigs.isPending}
+              disabled={isViewer}
               onClick={() => renderConfigs.mutate()}
             >
               {t('settings.renderConfigsBtn')}
             </Button>
+          </Tooltip>
+          <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
             <Button
               icon={<DatabaseOutlined />}
               loading={triggerBackup.isPending}
+              disabled={isViewer}
               onClick={() => triggerBackup.mutate()}
             >
               {t('settings.backupNowBtn')}
             </Button>
+          </Tooltip>
         </Space>
         <Typography.Paragraph type="secondary" style={{ fontSize: 12, marginTop: 8, marginBottom: 0 }}>
           {t('settings.actionsHint')}
@@ -396,14 +407,17 @@ export default function SettingsPage() {
                     </Typography.Text>
                   )}
                 </Space>
+                <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
                   <Button
                     size="small"
                     icon={<ReloadOutlined />}
                     loading={restartingService === svc}
+                    disabled={isViewer}
                     onClick={() => serviceRestart.mutate(svc)}
                   >
                     {t('settings.serviceRestartBtn')}
                   </Button>
+                </Tooltip>
               </Space>
             )
           })}
@@ -501,9 +515,11 @@ export default function SettingsPage() {
           </Form.Item>
           <Form.Item style={{ marginBottom: 0 }}>
             <Space>
-              <Button type="primary" htmlType="submit" loading={updateEmails.isPending}>
+              <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
+                <Button type="primary" htmlType="submit" loading={updateEmails.isPending} disabled={isViewer}>
                   {t('common.save')}
                 </Button>
+              </Tooltip>
               <Button onClick={() => emailForm.resetFields()}>
                 {t('common.cancel')}
               </Button>
@@ -532,6 +548,7 @@ export default function SettingsPage() {
             <Switch
               checked={maintenance?.enabled ?? false}
               loading={toggleMaintenance.isPending}
+              disabled={isViewer}
               onChange={(checked) => toggleMaintenance.mutate({
                 enabled: checked,
                 message: maintMessage || maintenance?.message || '',
@@ -574,7 +591,7 @@ export default function SettingsPage() {
               step={1}
               value={backupRetention?.keep ?? 0}
               onChange={(v) => setBackupRetention.mutate((v as number) ?? 0)}
-              disabled={setBackupRetention.isPending}
+              disabled={setBackupRetention.isPending || isViewer}
               addonAfter={t('settings.backupRetentionUnit')}
               style={{ width: 200 }}
             />
@@ -603,7 +620,7 @@ export default function SettingsPage() {
               step={30}
               value={auditRetention?.days ?? 0}
               onChange={(v) => setAuditRetention.mutate((v as number) ?? 0)}
-              disabled={setAuditRetention.isPending}
+              disabled={setAuditRetention.isPending || isViewer}
               addonAfter={t('settings.auditRetentionUnit')}
               style={{ width: 200 }}
             />
@@ -629,6 +646,7 @@ export default function SettingsPage() {
             <Switch
               checked={autoUpdate?.enabled ?? false}
               loading={toggleAutoUpdate.isPending}
+              disabled={isViewer}
               onChange={(checked) => toggleAutoUpdate.mutate(checked)}
             />
             <Typography.Text>
@@ -651,6 +669,7 @@ export default function SettingsPage() {
             <Switch
               checked={ipv6?.enabled ?? false}
               loading={toggleIPv6.isPending}
+              disabled={isViewer}
               onChange={(checked) => toggleIPv6.mutate(checked)}
             />
             <Typography.Text>