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>
fix(rbac): Viewer-Rolle in Settings + Cluster — operative Buttons sperren
2026-05-24 13:20:54 +02:00 · 2026-05-24 13:14:51 +02:00
13 changed files with 320 additions and 178 deletions
--- a/2
+++ b/2
@@ -1 +1 @@
-1.1.89
+1.1.91
--- a/cmd/edgeguard-api/main.go
+++ b/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")
--- a/cmd/edgeguard-ctl/main.go
+++ b/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

--- a/cmd/edgeguard-scheduler/main.go
+++ b/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.
--- a/management-ui/src/pages/Cluster/index.tsx
+++ b/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>
--- a/management-ui/src/pages/Firewall/AddressGroups.tsx
+++ b/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>
+            }
          />
        }
      />
--- a/management-ui/src/pages/Firewall/AddressObjects.tsx
+++ b/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>
            }
          />
        }
--- a/management-ui/src/pages/Firewall/NATRules.tsx
+++ b/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>
+            }
          />
        }
      />
--- a/management-ui/src/pages/Firewall/Rules.tsx
+++ b/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>
+            }
          />
        }
      />
--- a/management-ui/src/pages/Firewall/ServiceGroups.tsx
+++ b/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>
+            }
          />
        }
      />
--- a/management-ui/src/pages/Firewall/Services.tsx
+++ b/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>
+            }
          />
        }
      />
--- a/management-ui/src/pages/Firewall/Zones.tsx
+++ b/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>
            }
          />
        }
--- a/management-ui/src/pages/Settings/index.tsx
+++ b/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>
@@ -1 +1 @@
 .1.89
 .1.91