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,22 +248,30 @@ export default function ClusterPage() {
     {
       title: t('common.actions'), key: 'actions', width: 110,
       render: (_, r) => (
-        <Popconfirm
+        isViewer ? (
-          title={t('cluster.removePeerConfirmTitle')}
+          <Tooltip title={t('auth.viewerBadge')}>
-          description={t('cluster.removePeerConfirmDesc', { fqdn: r.fqdn })}
+            <Button type="text" size="small" danger icon={<DeleteOutlined />} disabled>
-          okText={t('common.yes')}
+              {t('cluster.removePeerBtn')}
-          cancelText={t('common.no')}
+            </Button>
-          okButtonProps={{ danger: true }}
+          </Tooltip>
-          onConfirm={() => removePeer.mutate(r.id)}
+        ) : (
-        >
+          <Popconfirm
-          <Button
+            title={t('cluster.removePeerConfirmTitle')}
-            type="text" size="small" danger
+            description={t('cluster.removePeerConfirmDesc', { fqdn: r.fqdn })}
-            icon={<DeleteOutlined />}
+            okText={t('common.yes')}
-            loading={removePeer.isPending && removePeer.variables === r.id}
+            cancelText={t('common.no')}
+            okButtonProps={{ danger: true }}
+            onConfirm={() => removePeer.mutate(r.id)}
           >
-            {t('cluster.removePeerBtn')}
+            <Button
-          </Button>
+              type="text" size="small" danger
-        </Popconfirm>
+              icon={<DeleteOutlined />}
+              loading={removePeer.isPending && removePeer.variables === r.id}
+            >
+              {t('cluster.removePeerBtn')}
+            </Button>
+          </Popconfirm>
+        )
       ),
     },
   ]
@@ -274,13 +284,16 @@ export default function ClusterPage() {
         subtitle={t('cluster.intro', { count: 1 + data.peers.length })}
         extra={
           <Space>
-            <Button
+            <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
-              icon={<KeyOutlined />}
+              <Button
-              loading={generateToken.isPending}
+                icon={<KeyOutlined />}
-              onClick={() => generateToken.mutate()}
+                loading={generateToken.isPending}
-            >
+                disabled={isViewer}
-              {t('cluster.generateJoinToken')}
+                onClick={() => generateToken.mutate()}
-            </Button>
+              >
+                {t('cluster.generateJoinToken')}
+              </Button>
+            </Tooltip>
             <Tag color={data.mode === 'cluster' ? 'blue' : 'default'}>
               {data.mode === 'cluster' ? t('cluster.modeCluster') : t('cluster.modeSingle')}
             </Tag>
@@ -363,16 +376,22 @@ 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 && (
-            <Popconfirm
+            isViewer ? (
-              title={t('cluster.renewSelfConfirm')}
+              <Tooltip title={t('auth.viewerBadge')}>
-              okText={t('common.yes')}
+                <Button size="small" disabled>{t('cluster.renewSelfBtn')}</Button>
-              cancelText={t('common.no')}
+              </Tooltip>
-              onConfirm={() => renewSelf.mutate()}
+            ) : (
-            >
+              <Popconfirm
-              <Button size="small" loading={renewSelf.isPending}>
+                title={t('cluster.renewSelfConfirm')}
-                {t('cluster.renewSelfBtn')}
+                okText={t('common.yes')}
-              </Button>
+                cancelText={t('common.no')}
-            </Popconfirm>
+                onConfirm={() => renewSelf.mutate()}
+              >
+                <Button size="small" loading={renewSelf.isPending}>
+                  {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}>
-            setEditing(row)
+            <Button size="small" disabled={isViewer} onClick={() => {
-            form.setFieldsValue({ name: row.name, description: row.description ?? undefined, member_ids: row.member_ids ?? [] })
+              setEditing(row)
-          }}>{t('common.edit')}</Button>
+              form.setFieldsValue({ name: row.name, description: row.description ?? undefined, member_ids: row.member_ids ?? [] })
-          <Popconfirm title={t('fw.ag.deleteConfirm', { name: row.name })} onConfirm={() => del.mutate(row.id)}>
+            }}>{t('common.edit')}</Button>
-            <Button size="small" danger>{t('common.delete')}</Button>
+          </Tooltip>
-          </Popconfirm>
+          {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}>
-        {t('fw.ag.add')}
+        <Button type="primary" className="mb-16" disabled={isViewer} onClick={openCreate}>
-      </Button>
+          {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}>
-            setEditing(row)
+            <Button size="small" disabled={isViewer} onClick={() => {
-            form.setFieldsValue({ name: row.name, kind: row.kind, value: row.value, description: row.description ?? undefined })
+              setEditing(row)
-          }}>{t('common.edit')}</Button>
+              form.setFieldsValue({ name: row.name, kind: row.kind, value: row.value, description: row.description ?? undefined })
-          <Popconfirm title={t('fw.ao.deleteConfirm', { name: row.name })} onConfirm={() => del.mutate(row.id)}>
+            }}>{t('common.edit')}</Button>
-            <Button size="small" danger>{t('common.delete')}</Button>
+          </Tooltip>
-          </Popconfirm>
+          {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}>
-        {t('fw.ao.add')}
+        <Button type="primary" className="mb-16" disabled={isViewer} onClick={openCreate}>
-      </Button>
+          {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,26 +133,34 @@ export default function NATRulesTab() {
       title: t('common.edit'), key: 'actions',
       render: (_, row) => (
         <Space>
-          <Button size="small" onClick={() => {
+          <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
-            setEditing(row)
+            <Button size="small" disabled={isViewer} onClick={() => {
-            form.setFieldsValue({
+              setEditing(row)
-              name: row.name ?? undefined,
+              form.setFieldsValue({
-              priority: row.priority, enabled: row.enabled, kind: row.kind,
+                name: row.name ?? undefined,
-              in_zone: row.in_zone ?? undefined, out_zone: row.out_zone ?? undefined,
+                priority: row.priority, enabled: row.enabled, kind: row.kind,
-              proto: row.proto ?? undefined,
+                in_zone: row.in_zone ?? undefined, out_zone: row.out_zone ?? undefined,
-              match_src_cidr: row.match_src_cidr ?? undefined,
+                proto: row.proto ?? undefined,
-              match_dst_cidr: row.match_dst_cidr ?? undefined,
+                match_src_cidr: row.match_src_cidr ?? undefined,
-              match_dport_start: row.match_dport_start ?? undefined,
+                match_dst_cidr: row.match_dst_cidr ?? undefined,
-              match_dport_end: row.match_dport_end ?? undefined,
+                match_dport_start: row.match_dport_start ?? undefined,
-              target_addr: row.target_addr ?? undefined,
+                match_dport_end: row.match_dport_end ?? undefined,
-              target_port_start: row.target_port_start ?? undefined,
+                target_addr: row.target_addr ?? undefined,
-              target_port_end: row.target_port_end ?? undefined,
+                target_port_start: row.target_port_start ?? undefined,
-              comment: row.comment ?? undefined,
+                target_port_end: row.target_port_end ?? undefined,
-            })
+                comment: row.comment ?? undefined,
-          }}>{t('common.edit')}</Button>
+              })
-          <Popconfirm title={t('fw.nat.deleteConfirm')} onConfirm={() => del.mutate(row.id)}>
+            }}>{t('common.edit')}</Button>
-            <Button size="small" danger>{t('common.delete')}</Button>
+          </Tooltip>
-          </Popconfirm>
+          {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}>
-        {t('fw.nat.add')}
+        <Button type="primary" className="mb-16" disabled={isViewer} onClick={openCreate}>
-      </Button>
+          {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}>
-          <Popconfirm title={t('fw.rule.deleteConfirm')} onConfirm={() => del.mutate(row.id)}>
+            <Button size="small" disabled={isViewer} onClick={() => editFromRow(row)}>{t('common.edit')}</Button>
-            <Button size="small" danger>{t('common.delete')}</Button>
+          </Tooltip>
-          </Popconfirm>
+          {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}>
-        {t('fw.rule.add')}
+        <Button type="primary" className="mb-16" disabled={isViewer} onClick={openCreate}>
-      </Button>
+          {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}>
-            setEditing(row)
+            <Button size="small" disabled={isViewer} onClick={() => {
-            form.setFieldsValue({ name: row.name, description: row.description ?? undefined, member_ids: row.member_ids ?? [] })
+              setEditing(row)
-          }}>{t('common.edit')}</Button>
+              form.setFieldsValue({ name: row.name, description: row.description ?? undefined, member_ids: row.member_ids ?? [] })
-          <Popconfirm title={t('fw.sg.deleteConfirm', { name: row.name })} onConfirm={() => del.mutate(row.id)}>
+            }}>{t('common.edit')}</Button>
-            <Button size="small" danger>{t('common.delete')}</Button>
+          </Tooltip>
-          </Popconfirm>
+          {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}>
-        {t('fw.sg.add')}
+        <Button type="primary" className="mb-16" disabled={isViewer} onClick={openCreate}>
-      </Button>
+          {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,22 +72,30 @@ 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}>
-            setEditing(row)
+            <Button size="small" disabled={row.builtin || isViewer} onClick={() => {
-            form.setFieldsValue({
+              setEditing(row)
-              name: row.name, proto: row.proto,
+              form.setFieldsValue({
-              port_start: row.port_start ?? undefined,
+                name: row.name, proto: row.proto,
-              port_end: row.port_end ?? undefined,
+                port_start: row.port_start ?? undefined,
-              description: row.description ?? undefined,
+                port_end: row.port_end ?? undefined,
-            })
+                description: row.description ?? undefined,
-          }}>{t('common.edit')}</Button>
+              })
-          <Popconfirm
+            }}>{t('common.edit')}</Button>
-            title={t('fw.svc.deleteConfirm', { name: row.name })}
+          </Tooltip>
-            onConfirm={() => del.mutate(row.id)}
+          {isViewer ? (
-            disabled={row.builtin}
+            <Tooltip title={t('auth.viewerBadge')}>
-          >
+              <Button size="small" danger disabled>{t('common.delete')}</Button>
-            <Button size="small" danger disabled={row.builtin}>{t('common.delete')}</Button>
+            </Tooltip>
-          </Popconfirm>
+          ) : (
+            <Popconfirm
+              title={t('fw.svc.deleteConfirm', { name: row.name })}
+              onConfirm={() => del.mutate(row.id)}
+              disabled={row.builtin}
+            >
+              <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}>
-        {t('fw.svc.add')}
+        <Button type="primary" className="mb-16" disabled={isViewer} onClick={openCreate}>
-      </Button>
+          {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,20 +63,22 @@ export default function ZonesTab() {
       title: t('common.actions'), key: 'actions',
       render: (_, row) => (
         <Space>
-          <Button size="small" onClick={() => {
+          <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
-            setEditing(row)
+            <Button size="small" disabled={isViewer} onClick={() => {
-            form.setFieldsValue({ name: row.name, description: row.description ?? undefined })
+              setEditing(row)
-          }}>{t('common.edit')}</Button>
+              form.setFieldsValue({ name: row.name, description: row.description ?? undefined })
-          {row.builtin
+            }}>{t('common.edit')}</Button>
-            ? <Tooltip title={t('fw.zone.builtinHint')}>
+          </Tooltip>
-                <Button size="small" danger disabled>{t('common.delete')}</Button>
+          {isViewer
-              </Tooltip>
+            ? <Tooltip title={t('auth.viewerBadge')}><Button size="small" danger disabled>{t('common.delete')}</Button></Tooltip>
-            : <Popconfirm
+            : row.builtin
-                title={t('fw.zone.deleteConfirm', { name: row.name })}
+              ? <Tooltip title={t('fw.zone.builtinHint')}><Button size="small" danger disabled>{t('common.delete')}</Button></Tooltip>
-                onConfirm={() => del.mutate(row.id)}
+              : <Popconfirm
-              >
+                  title={t('fw.zone.deleteConfirm', { name: row.name })}
-                <Button size="small" danger>{t('common.delete')}</Button>
+                  onConfirm={() => del.mutate(row.id)}
-              </Popconfirm>}
+                >
+                  <Button size="small" danger>{t('common.delete')}</Button>
+                </Popconfirm>}
         </Space>
       ),
     },
@@ -84,9 +88,11 @@ export default function ZonesTab() {
 
   return (
     <>
-      <Button type="primary" className="mb-16" onClick={openCreate}>
+      <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
-        {t('fw.zone.add')}
+        <Button type="primary" className="mb-16" disabled={isViewer} onClick={openCreate}>
-      </Button>
+          {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>
-          <Button
+          <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
-            icon={<ReloadOutlined />}
+            <Button
-            loading={haproxyReload.isPending}
+              icon={<ReloadOutlined />}
-            onClick={() => haproxyReload.mutate()}
+              loading={haproxyReload.isPending}
-          >
+              disabled={isViewer}
-            {t('settings.haproxyReloadBtn')}
+              onClick={() => haproxyReload.mutate()}
-          </Button>
+            >
-          <Button
+              {t('settings.haproxyReloadBtn')}
-            icon={<ReloadOutlined />}
+            </Button>
-            loading={renderConfigs.isPending}
+          </Tooltip>
-            onClick={() => renderConfigs.mutate()}
+          <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
-          >
+            <Button
-            {t('settings.renderConfigsBtn')}
+              icon={<ReloadOutlined />}
-          </Button>
+              loading={renderConfigs.isPending}
-          <Button
+              disabled={isViewer}
-            icon={<DatabaseOutlined />}
+              onClick={() => renderConfigs.mutate()}
-            loading={triggerBackup.isPending}
+            >
-            onClick={() => triggerBackup.mutate()}
+              {t('settings.renderConfigsBtn')}
-          >
+            </Button>
-            {t('settings.backupNowBtn')}
+          </Tooltip>
-          </Button>
+          <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>
-                <Button
+                <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
-                  size="small"
+                  <Button
-                  icon={<ReloadOutlined />}
+                    size="small"
-                  loading={restartingService === svc}
+                    icon={<ReloadOutlined />}
-                  onClick={() => serviceRestart.mutate(svc)}
+                    loading={restartingService === svc}
-                >
+                    disabled={isViewer}
-                  {t('settings.serviceRestartBtn')}
+                    onClick={() => serviceRestart.mutate(svc)}
-                </Button>
+                  >
+                    {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}>
-                {t('common.save')}
+                <Button type="primary" htmlType="submit" loading={updateEmails.isPending} disabled={isViewer}>
-              </Button>
+                  {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>