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

DNS, NTP, ForwardProxy, RoutingRules, Networks (Interfaces + Routes), IPAddresses, WireGuard (Servers + Clients + Peers), Backups/RemoteTargets, SSL: Add-Buttons, quickToggle-Switches und Settings-Save-Buttons für Viewer deaktiviert. ActionButtons-Komponente schützt Edit/Delete bereits zentral; hier wurden nur die verbleibenden Mutationspunkte (Add, Switch, Submit) nachgezogen. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-24 13:56:24 +02:00
parent d4267e2003
commit d3a3b93c1b
15 changed files with 252 additions and 149 deletions
--- a/2
+++ b/2
@@ -1 +1 @@
-1.1.91
+1.1.92
--- 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.91"
+var version = "1.1.92"

 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.91"
+var version = "1.1.92"

 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.91"
+var version = "1.1.92"

 const (
 	// renewTickInterval — how often we re-evaluate expiring certs.
--- a/management-ui/src/pages/Backups/RemoteTargets.tsx
+++ b/management-ui/src/pages/Backups/RemoteTargets.tsx
@@ -11,6 +11,7 @@ import { useTranslation } from 'react-i18next'
 import dayjs from 'dayjs'

 import apiClient, { isEnvelope } from '../../api/client'
+import { useAuthStore } from '../../stores/auth'

 const { Text } = Typography

@@ -83,6 +84,7 @@ function buildPayload(v: FormValues): RemoteTarget {
 export default function RemoteTargetsTab() {
  const { t } = useTranslation()
  const qc = useQueryClient()
+  const isViewer = useAuthStore((s) => s.user?.role) === 'viewer'
  const [msg, msgCtx] = message.useMessage()

  const list = useQuery({
@@ -170,6 +172,7 @@ export default function RemoteTargetsTab() {
        <Switch
          size="small"
          checked={v}
+          disabled={isViewer}
          loading={quickToggle.isPending && quickToggle.variables?.id === r.id}
          onChange={(checked) => quickToggle.mutate({ id: r.id, row: r, checked })}
        />
@@ -184,7 +187,8 @@ export default function RemoteTargetsTab() {
            onClick={() => test.mutate(r.id)}>
            {t('remotes.test')}
          </Button>
-          <Button size="small" onClick={() => {
+          <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
+            <Button size="small" disabled={isViewer} onClick={() => {
              setEdit(r); form.resetFields()
              const settings = (r.settings ?? {}) as Record<string, unknown>
              form.setFieldsValue({
@@ -205,10 +209,12 @@ export default function RemoteTargetsTab() {
                host_key_fingerprint:  settings.host_key_fingerprint as string,
              })
            }}>{t('common.edit')}</Button>
-          <Popconfirm title={t('remotes.confirmDelete', { name: r.name })}
-            onConfirm={() => del.mutate(r.id)}>
+          </Tooltip>
+          {isViewer
+            ? <Tooltip title={t('auth.viewerBadge')}><Button size="small" danger disabled>{t('common.delete')}</Button></Tooltip>
+            : <Popconfirm title={t('remotes.confirmDelete', { name: r.name })} onConfirm={() => del.mutate(r.id)}>
                <Button size="small" danger>{t('common.delete')}</Button>
-          </Popconfirm>
+              </Popconfirm>}
        </Space>
      ),
    },
@@ -225,13 +231,16 @@ export default function RemoteTargetsTab() {
        description={t('remotes.scopeDesc')}
      />
      <Card size="small" extra={
+        <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
          <Button type="primary" size="small" icon={<PlusOutlined />}
+            disabled={isViewer}
            onClick={() => {
              setCreating(true); form.resetFields()
              form.setFieldsValue({ kind: 's3', active: true, use_ssl: true, port: 22 })
            }}>
            {t('remotes.add')}
          </Button>
+        </Tooltip>
      }>
        <Table size="small" rowKey="id" loading={list.isFetching}
          dataSource={list.data ?? []} columns={columns}
--- a/management-ui/src/pages/DNS/index.tsx
+++ b/management-ui/src/pages/DNS/index.tsx
@@ -1,11 +1,12 @@
 import { useState } from 'react'
-import { Alert, Button, Drawer, Form, Input, InputNumber, Modal, Select, Space, Switch, Tabs, Tag, Typography, message } from 'antd'
+import { Alert, Button, Drawer, Form, Input, InputNumber, Modal, Select, Space, Switch, Tabs, Tag, Tooltip, Typography, message } from 'antd'
 import type { ColumnsType } from 'antd/es/table'
 import { CheckCircleOutlined, CloseCircleOutlined, GlobalOutlined, NodeIndexOutlined, PlusOutlined, SettingOutlined } from '@ant-design/icons'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'

 import apiClient, { isEnvelope } from '../../api/client'
+import { useAuthStore } from '../../stores/auth'
 import DataTable from '../../components/DataTable'
 import EmptyState from '../../components/EmptyState'
 import PageHeader from '../../components/PageHeader'
@@ -120,6 +121,7 @@ export default function DNSPage() {
 function ZonesTab() {
  const { t } = useTranslation()
  const qc = useQueryClient()
+  const isViewer = useAuthStore((s) => s.user?.role) === 'viewer'
  const { data, isLoading } = useQuery({ queryKey: ['dns', 'zones'], queryFn: listZones })

  const [editing, setEditing] = useState<Zone | null>(null)
@@ -167,6 +169,7 @@ function ZonesTab() {
        <Switch
          size="small"
          checked={v}
+          disabled={isViewer}
          loading={quickToggle.isPending && quickToggle.variables?.id === row.id}
          onChange={(checked) => quickToggle.mutate({ id: row.id, row, checked })}
        />
@@ -207,9 +210,11 @@ function ZonesTab() {
        dataSource={data ?? []}
        columns={cols}
        extraActions={
-          <Button type="primary" icon={<PlusOutlined />} onClick={openZoneCreate}>
+          <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
+            <Button type="primary" icon={<PlusOutlined />} disabled={isViewer} onClick={openZoneCreate}>
              {t('dns.zone.add')}
            </Button>
+          </Tooltip>
        }
        emptyContent={
          <EmptyState
@@ -217,9 +222,11 @@ function ZonesTab() {
            title={t('dns.zone.emptyTitle')}
            description={t('dns.zone.emptyDesc')}
            action={
-              <Button type="primary" icon={<PlusOutlined />} onClick={openZoneCreate}>
+              <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
+                <Button type="primary" icon={<PlusOutlined />} disabled={isViewer} onClick={openZoneCreate}>
                  {t('dns.zone.add')}
                </Button>
+              </Tooltip>
            }
          />
        }
@@ -277,6 +284,7 @@ interface RecordsDrawerProps {
 function RecordsDrawer({ zone, onClose }: RecordsDrawerProps) {
  const { t } = useTranslation()
  const qc = useQueryClient()
+  const isViewer = useAuthStore((s) => s.user?.role) === 'viewer'
  const open = zone !== null
  const zoneID = zone?.id ?? 0

@@ -327,6 +335,7 @@ function RecordsDrawer({ zone, onClose }: RecordsDrawerProps) {
        <Switch
          size="small"
          checked={v}
+          disabled={isViewer}
          loading={quickToggle.isPending && quickToggle.variables?.id === row.id}
          onChange={(checked) => quickToggle.mutate({ id: row.id, row, checked })}
        />
@@ -371,9 +380,11 @@ function RecordsDrawer({ zone, onClose }: RecordsDrawerProps) {
        dataSource={data ?? []}
        columns={cols}
        extraActions={
-          <Button type="primary" icon={<PlusOutlined />} onClick={openRecordCreate}>
+          <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
+            <Button type="primary" icon={<PlusOutlined />} disabled={isViewer} onClick={openRecordCreate}>
              {t('dns.record.add')}
            </Button>
+          </Tooltip>
        }
        emptyContent={
          <EmptyState
@@ -381,9 +392,11 @@ function RecordsDrawer({ zone, onClose }: RecordsDrawerProps) {
            title={t('dns.record.emptyTitle')}
            description={t('dns.record.emptyDesc')}
            action={
-              <Button type="primary" icon={<PlusOutlined />} onClick={openRecordCreate}>
+              <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
+                <Button type="primary" icon={<PlusOutlined />} disabled={isViewer} onClick={openRecordCreate}>
                  {t('dns.record.add')}
                </Button>
+              </Tooltip>
            }
          />
        }
@@ -433,6 +446,7 @@ interface SettingsForm extends Omit<Settings, 'listen_addresses'> {
 function SettingsTab() {
  const { t } = useTranslation()
  const qc = useQueryClient()
+  const isViewer = useAuthStore((s) => s.user?.role) === 'viewer'
  const { data, isLoading } = useQuery({ queryKey: ['dns', 'settings'], queryFn: getSettings })
  const { data: sys } = useQuery({ queryKey: ['system', 'interfaces'], queryFn: listSystemInterfaces })
  const [form] = Form.useForm<SettingsForm>()
@@ -526,9 +540,11 @@ function SettingsTab() {
        </Form.Item>
      </Space>
      <Form.Item>
-        <Button type="primary" htmlType="submit" loading={save.isPending}>
+        <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
+          <Button type="primary" htmlType="submit" disabled={isViewer} loading={save.isPending}>
            {t('common.save')}
          </Button>
+        </Tooltip>
      </Form.Item>
    </Form>
  )
--- a/management-ui/src/pages/ForwardProxy/index.tsx
+++ b/management-ui/src/pages/ForwardProxy/index.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import {
-  Alert, Button, Form, Input, InputNumber, Modal, Select, Space, Switch, Tag, Typography, message,
+  Alert, Button, Form, Input, InputNumber, Modal, Select, Space, Switch, Tag, Tooltip, Typography, message,
 } from 'antd'
 import type { ColumnsType } from 'antd/es/table'
 import { CheckCircleOutlined, CloseCircleOutlined, CloudServerOutlined, PlusOutlined } from '@ant-design/icons'
@@ -8,6 +8,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'

 import apiClient, { isEnvelope } from '../../api/client'
+import { useAuthStore } from '../../stores/auth'
 import DataTable from '../../components/DataTable'
 import EmptyState from '../../components/EmptyState'
 import PageHeader from '../../components/PageHeader'
@@ -54,6 +55,7 @@ async function listACLs(): Promise<ACL[]> {
 export default function ForwardProxyPage() {
  const { t } = useTranslation()
  const qc = useQueryClient()
+  const isViewer = useAuthStore((s) => s.user?.role) === 'viewer'
  const { data, isLoading } = useQuery({ queryKey: ['fwd-proxy', 'acls'], queryFn: listACLs })

  const { data: services } = useQuery({
@@ -112,6 +114,7 @@ export default function ForwardProxyPage() {
        <Switch
          size="small"
          checked={v}
+          disabled={isViewer}
          loading={quickToggle.isPending && quickToggle.variables?.id === row.id}
          onChange={(checked) => quickToggle.mutate({ id: row.id, row, checked })}
        />
@@ -174,9 +177,11 @@ export default function ForwardProxyPage() {
        dataSource={data ?? []}
        columns={cols}
        extraActions={
-          <Button type="primary" icon={<PlusOutlined />} onClick={openCreate}>
+          <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
+            <Button type="primary" icon={<PlusOutlined />} disabled={isViewer} onClick={openCreate}>
              {t('fwd.add')}
            </Button>
+          </Tooltip>
        }
        emptyContent={
          <EmptyState
@@ -184,9 +189,11 @@ export default function ForwardProxyPage() {
            title={t('fwd.emptyTitle')}
            description={t('fwd.emptyDesc')}
            action={
-              <Button type="primary" icon={<PlusOutlined />} onClick={openCreate}>
+              <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
+                <Button type="primary" icon={<PlusOutlined />} disabled={isViewer} onClick={openCreate}>
                  {t('fwd.add')}
                </Button>
+              </Tooltip>
            }
          />
        }
--- a/management-ui/src/pages/IPAddresses/index.tsx
+++ b/management-ui/src/pages/IPAddresses/index.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { Button, Card, Form, Input, InputNumber, Modal, Select, Switch, Tag, Typography, message } from 'antd'
+import { Button, Card, Form, Input, InputNumber, Modal, Select, Switch, Tag, Tooltip, Typography, message } from 'antd'
 import { NodeIndexOutlined, PlusOutlined } from '@ant-design/icons'
 import PageHeader from '../../components/PageHeader'
 import ActionButtons from '../../components/ActionButtons'
@@ -10,6 +10,7 @@ import { useTranslation } from 'react-i18next'
 import DataTable from '../../components/DataTable'

 import apiClient, { isEnvelope } from '../../api/client'
+import { useAuthStore } from '../../stores/auth'

 interface IPAddress {
  id: number
@@ -85,6 +86,7 @@ async function listSystemAddresses(): Promise<SystemAddress[]> {
 export default function IPAddressesPage() {
  const { t } = useTranslation()
  const qc = useQueryClient()
+  const isViewer = useAuthStore((s) => s.user?.role) === 'viewer'

  const { data: ips, isLoading } = useQuery({ queryKey: ['ip-addresses'], queryFn: listIPs })
  const { data: ifs } = useQuery({ queryKey: ['network-interfaces'], queryFn: listIfaces })
@@ -150,6 +152,7 @@ export default function IPAddressesPage() {
        <Switch
          size="small"
          checked={v}
+          disabled={isViewer}
          loading={quickToggle.isPending && quickToggle.variables?.id === row.id}
          onChange={(checked) => quickToggle.mutate({ id: row.id, row, checked })}
        />
@@ -216,9 +219,11 @@ export default function IPAddressesPage() {
        dataSource={ips ?? []}
        columns={columns}
        extraActions={
-          <Button type="primary" icon={<PlusOutlined />} onClick={openCreate}>
+          <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
+            <Button type="primary" icon={<PlusOutlined />} disabled={isViewer} onClick={openCreate}>
              {t('ips.addAddress')}
            </Button>
+          </Tooltip>
        }
        emptyContent={
          <EmptyState
@@ -226,9 +231,11 @@ export default function IPAddressesPage() {
            title={t('ips.emptyTitle')}
            description={t('ips.emptyDesc')}
            action={
-              <Button type="primary" icon={<PlusOutlined />} onClick={openCreate}>
+              <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
+                <Button type="primary" icon={<PlusOutlined />} disabled={isViewer} onClick={openCreate}>
                  {t('ips.addAddress')}
                </Button>
+              </Tooltip>
            }
          />
        }
--- a/management-ui/src/pages/NTP/index.tsx
+++ b/management-ui/src/pages/NTP/index.tsx
@@ -8,6 +8,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'

 import apiClient, { isEnvelope } from '../../api/client'
+import { useAuthStore } from '../../stores/auth'
 import DataTable from '../../components/DataTable'
 import EmptyState from '../../components/EmptyState'
 import PageHeader from '../../components/PageHeader'
@@ -180,6 +181,7 @@ export default function NTPPage() {
 function PoolsTab() {
  const { t } = useTranslation()
  const qc = useQueryClient()
+  const isViewer = useAuthStore((s) => s.user?.role) === 'viewer'
  const { data, isLoading } = useQuery({ queryKey: ['ntp', 'pools'], queryFn: listPools })

  const [editing, setEditing] = useState<Pool | null>(null)
@@ -234,6 +236,7 @@ function PoolsTab() {
        <Switch
          size="small"
          checked={v}
+          disabled={isViewer}
          loading={quickToggle.isPending && quickToggle.variables?.id === row.id}
          onChange={(checked) => quickToggle.mutate({ id: row.id, row, checked })}
        />
@@ -267,9 +270,11 @@ function PoolsTab() {
        dataSource={data ?? []}
        columns={cols}
        extraActions={
-          <Button type="primary" icon={<PlusOutlined />} onClick={openCreate}>
+          <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
+            <Button type="primary" icon={<PlusOutlined />} disabled={isViewer} onClick={openCreate}>
              {t('ntp.pool.add')}
            </Button>
+          </Tooltip>
        }
        emptyContent={
          <EmptyState
@@ -277,9 +282,11 @@ function PoolsTab() {
            title={t('ntp.pool.emptyTitle')}
            description={t('ntp.pool.emptyDesc')}
            action={
-              <Button type="primary" icon={<PlusOutlined />} onClick={openCreate}>
+              <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
+                <Button type="primary" icon={<PlusOutlined />} disabled={isViewer} onClick={openCreate}>
                  {t('ntp.pool.add')}
                </Button>
+              </Tooltip>
            }
          />
        }
@@ -336,6 +343,7 @@ function PoolsTab() {
 function SettingsTab() {
  const { t } = useTranslation()
  const qc = useQueryClient()
+  const isViewer = useAuthStore((s) => s.user?.role) === 'viewer'
  const { data, isLoading } = useQuery({ queryKey: ['ntp', 'settings'], queryFn: getSettings })
  const { data: sys } = useQuery({ queryKey: ['system', 'interfaces'], queryFn: listSystemInterfaces })
  const [form] = Form.useForm<SettingsForm>()
@@ -415,9 +423,11 @@ function SettingsTab() {
        <Input placeholder="right/UTC" allowClear />
      </Form.Item>
      <Form.Item>
-        <Button type="primary" htmlType="submit" loading={save.isPending}>
+        <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
+          <Button type="primary" htmlType="submit" disabled={isViewer} loading={save.isPending}>
            {t('common.save')}
          </Button>
+        </Tooltip>
      </Form.Item>
    </Form>
  )
--- a/management-ui/src/pages/Networks/Interfaces.tsx
+++ b/management-ui/src/pages/Networks/Interfaces.tsx
@@ -9,6 +9,7 @@ import EmptyState from '../../components/EmptyState'
 import ActionButtons from '../../components/ActionButtons'

 import apiClient, { isEnvelope } from '../../api/client'
+import { useAuthStore } from '../../stores/auth'

 interface NetworkInterface {
  id: number
@@ -77,6 +78,7 @@ async function listZones(): Promise<FwZone[]> {
 export default function InterfacesTab() {
  const { t } = useTranslation()
  const qc = useQueryClient()
+  const isViewer = useAuthStore((s) => s.user?.role) === 'viewer'

  const { data: ifs, isLoading } = useQuery({ queryKey: ['network-interfaces'], queryFn: listInterfaces })
  const { data: sys } = useQuery({ queryKey: ['system', 'interfaces'], queryFn: listSystemInterfaces, refetchInterval: 10_000 })
@@ -151,6 +153,7 @@ export default function InterfacesTab() {
        <Switch
          size="small"
          checked={v}
+          disabled={isViewer}
          loading={quickToggle.isPending && quickToggle.variables?.id === row.id}
          onChange={(checked) => quickToggle.mutate({ id: row.id, row, checked })}
        />
@@ -235,9 +238,11 @@ export default function InterfacesTab() {
        dataSource={ifs ?? []}
        columns={columns}
        extraActions={
-          <Button type="primary" icon={<PlusOutlined />} onClick={openCreate}>
+          <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
+            <Button type="primary" icon={<PlusOutlined />} disabled={isViewer} onClick={openCreate}>
              {t('networks.addInterface')}
            </Button>
+          </Tooltip>
        }
        emptyContent={
          <EmptyState
@@ -245,9 +250,11 @@ export default function InterfacesTab() {
            title={t('networks.emptyTitle')}
            description={t('networks.emptyDesc')}
            action={
-              <Button type="primary" icon={<PlusOutlined />} onClick={openCreate}>
+              <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
+                <Button type="primary" icon={<PlusOutlined />} disabled={isViewer} onClick={openCreate}>
                  {t('networks.addInterface')}
                </Button>
+              </Tooltip>
            }
          />
        }
--- a/management-ui/src/pages/Networks/Routes.tsx
+++ b/management-ui/src/pages/Networks/Routes.tsx
@@ -10,6 +10,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'

 import apiClient, { isEnvelope } from '../../api/client'
+import { useAuthStore } from '../../stores/auth'
 import EmptyState from '../../components/EmptyState'

 const { Text } = Typography
@@ -50,6 +51,7 @@ interface RouteFormValues {
 export default function RoutesTab() {
  const { t } = useTranslation()
  const qc = useQueryClient()
+  const isViewer = useAuthStore((s) => s.user?.role) === 'viewer'

  const managed = useQuery({
    queryKey: ['routes', 'managed'],
@@ -129,6 +131,7 @@ export default function RoutesTab() {
        <Switch
          size="small"
          checked={v}
+          disabled={isViewer}
          loading={quickToggle.isPending && quickToggle.variables?.id === row.id}
          onChange={(checked) => quickToggle.mutate({ id: row.id, row, checked })}
        />
@@ -140,7 +143,8 @@ export default function RoutesTab() {
      title: t('common.actions'), key: 'a', width: 160,
      render: (_, r) => (
        <Space size={4}>
-          <Button size="small" onClick={() => {
+          <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
+            <Button size="small" disabled={isViewer} onClick={() => {
              setEdit(r)
              form.setFieldsValue({
                destination: r.destination,
@@ -152,10 +156,12 @@ export default function RoutesTab() {
                comment: r.comment ?? undefined,
              })
            }}>{t('common.edit')}</Button>
-          <Popconfirm title={t('routes.confirmDelete', { dest: r.destination })}
-            onConfirm={() => del.mutate(r.id)}>
+          </Tooltip>
+          {isViewer
+            ? <Tooltip title={t('auth.viewerBadge')}><Button size="small" danger disabled>{t('common.delete')}</Button></Tooltip>
+            : <Popconfirm title={t('routes.confirmDelete', { dest: r.destination })} onConfirm={() => del.mutate(r.id)}>
                <Button size="small" danger>{t('common.delete')}</Button>
-          </Popconfirm>
+              </Popconfirm>}
        </Space>
      ),
    },
@@ -232,10 +238,12 @@ export default function RoutesTab() {
        size="small"
        title={t('routes.managedTitle')}
        extra={
+          <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
            <Button type="primary" size="small" icon={<PlusOutlined />}
-            onClick={openCreate}>
+              disabled={isViewer} onClick={openCreate}>
              {t('routes.add')}
            </Button>
+          </Tooltip>
        }
      >
        <Text type="secondary">{t('routes.managedIntro')}</Text>
@@ -252,9 +260,11 @@ export default function RoutesTab() {
              title={t('routes.emptyTitle')}
              description={t('routes.emptyDesc')}
              action={
-                <Button type="primary" icon={<PlusOutlined />} onClick={openCreate}>
+                <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
+                  <Button type="primary" icon={<PlusOutlined />} disabled={isViewer} onClick={openCreate}>
                    {t('routes.add')}
                  </Button>
+                </Tooltip>
              }
            />
          ) }}
--- a/management-ui/src/pages/RoutingRules/index.tsx
+++ b/management-ui/src/pages/RoutingRules/index.tsx
@@ -10,6 +10,7 @@ import PageHeader from '../../components/PageHeader'
 import ActionButtons from '../../components/ActionButtons'

 import apiClient, { isEnvelope } from '../../api/client'
+import { useAuthStore } from '../../stores/auth'

 interface RoutingRule {
  id: number
@@ -68,6 +69,7 @@ async function listHAProxyStats(): Promise<HAProxyStat[]> {
 export default function RoutingRulesPage() {
  const { t } = useTranslation()
  const qc = useQueryClient()
+  const isViewer = useAuthStore((s) => s.user?.role) === 'viewer'

  const { data: rules, isLoading } = useQuery({ queryKey: ['routing-rules'], queryFn: listRules })
  const { data: domains } = useQuery({ queryKey: ['domains'], queryFn: listDomains })
@@ -160,6 +162,7 @@ export default function RoutingRulesPage() {
        <Switch
          size="small"
          checked={v}
+          disabled={isViewer}
          loading={quickToggle.isPending && quickToggle.variables?.id === row.id}
          onChange={(checked) => quickToggle.mutate({ id: row.id, row, checked })}
        />
@@ -204,9 +207,11 @@ export default function RoutingRulesPage() {
        dataSource={rules ?? []}
        columns={columns}
        extraActions={
-          <Button type="primary" icon={<PlusOutlined />} onClick={openCreate}>
+          <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
+            <Button type="primary" icon={<PlusOutlined />} disabled={isViewer} onClick={openCreate}>
              {t('routing.addRule')}
            </Button>
+          </Tooltip>
        }
        emptyContent={
          <EmptyState
@@ -214,9 +219,11 @@ export default function RoutingRulesPage() {
            title={t('routing.emptyTitle')}
            description={t('routing.emptyDesc')}
            action={
-              <Button type="primary" icon={<PlusOutlined />} onClick={openCreate}>
+              <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
+                <Button type="primary" icon={<PlusOutlined />} disabled={isViewer} onClick={openCreate}>
                  {t('routing.addRule')}
                </Button>
+              </Tooltip>
            }
          />
        }
--- a/management-ui/src/pages/SSL/index.tsx
+++ b/management-ui/src/pages/SSL/index.tsx
@@ -10,6 +10,7 @@ import DataTable from '../../components/DataTable'
 import EmptyState from '../../components/EmptyState'

 import apiClient, { isEnvelope } from '../../api/client'
+import { useAuthStore } from '../../stores/auth'

 interface TLSCert {
  id: number
@@ -95,6 +96,7 @@ function relativeAgo(ms: number, t: (k: string, v?: Record<string, unknown>) =>
 export default function SSLPage() {
  const { t } = useTranslation()
  const qc = useQueryClient()
+  const isViewer = useAuthStore((s) => s.user?.role) === 'viewer'

  const { data: certs, isLoading } = useQuery({ queryKey: ['tls-certs'], queryFn: listCerts })
  const { data: domains } = useQuery({ queryKey: ['domains'], queryFn: listDomains })
@@ -219,7 +221,11 @@ export default function SSLPage() {
      render: (_, row) => (
        <Space size={4}>
          {row.issuer === 'letsencrypt' && (
-            <Popconfirm
+            isViewer
+              ? <Tooltip title={t('auth.viewerBadge')}>
+                  <Button size="small" icon={<ReloadOutlined />} disabled>{t('ssl.renewBtn')}</Button>
+                </Tooltip>
+              : <Popconfirm
                  title={t('ssl.renewConfirmTitle')}
                  description={t('ssl.renewConfirmDesc', { domain: row.domain })}
                  okText={t('common.yes')} cancelText={t('common.no')}
@@ -263,9 +269,11 @@ export default function SSLPage() {
                allowClear
              />
            </Form.Item>
-            <Button type="primary" htmlType="submit" loading={issueMut.isPending}>
+            <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
+              <Button type="primary" htmlType="submit" disabled={isViewer} loading={issueMut.isPending}>
                {t('ssl.issueButton')}
              </Button>
+            </Tooltip>
          </Form>
        </Card>
      ),
@@ -290,9 +298,11 @@ export default function SSLPage() {
              <Input.TextArea rows={6} placeholder="-----BEGIN PRIVATE KEY-----..." style={{ fontFamily: 'monospace', fontSize: 12 }} />
            </Form.Item>
            <Space>
-              <Button type="primary" htmlType="submit" loading={uploadMut.isPending}>
+              <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
+                <Button type="primary" htmlType="submit" disabled={isViewer} loading={uploadMut.isPending}>
                  {t('ssl.uploadButton')}
                </Button>
+              </Tooltip>
              <Typography.Text type="secondary">{t('ssl.uploadHint')}</Typography.Text>
            </Space>
          </Form>
--- a/management-ui/src/pages/Wireguard/Clients.tsx
+++ b/management-ui/src/pages/Wireguard/Clients.tsx
@@ -9,6 +9,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'

 import apiClient, { isEnvelope } from '../../api/client'
+import { useAuthStore } from '../../stores/auth'
 import DataTable from '../../components/DataTable'
 import EmptyState from '../../components/EmptyState'
 import ActionButtons from '../../components/ActionButtons'
@@ -81,6 +82,7 @@ async function listZones(): Promise<FwZoneLite[]> {
 export default function ClientsTab() {
  const { t } = useTranslation()
  const qc = useQueryClient()
+  const isViewer = useAuthStore((s) => s.user?.role) === 'viewer'

  const { data: clients, isLoading } = useQuery({ queryKey: ['wg', 'clients'], queryFn: listClients })
  const { data: zones } = useQuery({ queryKey: ['fw-zones'], queryFn: listZones })
@@ -160,6 +162,7 @@ export default function ClientsTab() {
        <Switch
          size="small"
          checked={v}
+          disabled={isViewer}
          loading={quickToggle.isPending && quickToggle.variables?.id === row.id}
          onChange={(checked) => quickToggle.mutate({ id: row.id, row, checked })}
        />
@@ -214,9 +217,11 @@ export default function ClientsTab() {
        dataSource={clients ?? []}
        columns={cols}
        extraActions={
-          <Button type="primary" icon={<PlusOutlined />} onClick={openCreate}>
+          <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
+            <Button type="primary" icon={<PlusOutlined />} disabled={isViewer} onClick={openCreate}>
              {t('wg.iface.addClient')}
            </Button>
+          </Tooltip>
        }
        emptyContent={
          <EmptyState
@@ -224,9 +229,11 @@ export default function ClientsTab() {
            title={t('wg.iface.emptyClientTitle')}
            description={t('wg.iface.emptyClientDesc')}
            action={
-              <Button type="primary" icon={<PlusOutlined />} onClick={openCreate}>
+              <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
+                <Button type="primary" icon={<PlusOutlined />} disabled={isViewer} onClick={openCreate}>
                  {t('wg.iface.addClient')}
                </Button>
+              </Tooltip>
            }
          />
        }
--- a/management-ui/src/pages/Wireguard/Servers.tsx
+++ b/management-ui/src/pages/Wireguard/Servers.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import {
  Alert, Button, Card, Col, Drawer, Form, Input, InputNumber,
-  Modal, Row, Select, Space, Switch, Tag, Typography, message,
+  Modal, Row, Select, Space, Switch, Tag, Tooltip, Typography, message,
 } from 'antd'
 import type { ColumnsType } from 'antd/es/table'
 import {
@@ -12,6 +12,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'

 import apiClient, { isEnvelope } from '../../api/client'
+import { useAuthStore } from '../../stores/auth'
 import DataTable from '../../components/DataTable'
 import EmptyState from '../../components/EmptyState'
 import ActionButtons from '../../components/ActionButtons'
@@ -98,6 +99,7 @@ async function listZones(): Promise<FwZoneLite[]> {
 export default function ServersTab() {
  const { t } = useTranslation()
  const qc = useQueryClient()
+  const isViewer = useAuthStore((s) => s.user?.role) === 'viewer'

  const { data: servers, isLoading } = useQuery({ queryKey: ['wg', 'servers'], queryFn: listServers })
  const { data: zones } = useQuery({ queryKey: ['fw-zones'], queryFn: listZones })
@@ -152,6 +154,7 @@ export default function ServersTab() {
        <Switch
          size="small"
          checked={v}
+          disabled={isViewer}
          loading={quickToggle.isPending && quickToggle.variables?.id === row.id}
          onChange={(checked) => quickToggle.mutate({ id: row.id, row, checked })}
        />
@@ -208,9 +211,11 @@ export default function ServersTab() {
        dataSource={servers ?? []}
        columns={cols}
        extraActions={
-          <Button type="primary" icon={<PlusOutlined />} onClick={openCreate}>
+          <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
+            <Button type="primary" icon={<PlusOutlined />} disabled={isViewer} onClick={openCreate}>
              {t('wg.iface.addServer')}
            </Button>
+          </Tooltip>
        }
        emptyContent={
          <EmptyState
@@ -218,9 +223,11 @@ export default function ServersTab() {
            title={t('wg.iface.emptyServerTitle')}
            description={t('wg.iface.emptyServerDesc')}
            action={
-              <Button type="primary" icon={<PlusOutlined />} onClick={openCreate}>
+              <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
+                <Button type="primary" icon={<PlusOutlined />} disabled={isViewer} onClick={openCreate}>
                  {t('wg.iface.addServer')}
                </Button>
+              </Tooltip>
            }
          />
        }
@@ -333,6 +340,7 @@ interface PeerDrawerProps {
 function PeerDrawer({ iface, onClose }: PeerDrawerProps) {
  const { t } = useTranslation()
  const qc = useQueryClient()
+  const isViewer = useAuthStore((s) => s.user?.role) === 'viewer'
  const open = iface !== null
  const ifaceID = iface?.id ?? 0

@@ -432,6 +440,7 @@ function PeerDrawer({ iface, onClose }: PeerDrawerProps) {
        <Switch
          size="small"
          checked={v}
+          disabled={isViewer}
          loading={peerToggle.isPending && peerToggle.variables?.id === row.id}
          onChange={(checked) => peerToggle.mutate({ id: row.id, row, checked })}
        />
@@ -504,9 +513,11 @@ function PeerDrawer({ iface, onClose }: PeerDrawerProps) {
        dataSource={peers ?? []}
        columns={cols}
        extraActions={
-          <Button type="primary" icon={<PlusOutlined />} onClick={openPeerCreate}>
+          <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
+            <Button type="primary" icon={<PlusOutlined />} disabled={isViewer} onClick={openPeerCreate}>
              {t('wg.peer.add')}
            </Button>
+          </Tooltip>
        }
        emptyContent={
          <EmptyState
@@ -514,9 +525,11 @@ function PeerDrawer({ iface, onClose }: PeerDrawerProps) {
            title={t('wg.peer.emptyTitle')}
            description={t('wg.peer.emptyDesc')}
            action={
-              <Button type="primary" icon={<PlusOutlined />} onClick={openPeerCreate}>
+              <Tooltip title={isViewer ? t('auth.viewerBadge') : undefined}>
+                <Button type="primary" icon={<PlusOutlined />} disabled={isViewer} onClick={openPeerCreate}>
                  {t('wg.peer.add')}
                </Button>
+              </Tooltip>
            }
          />
        }
@@ -1 +1 @@
 .1.91
 .1.92