fix(rbac): Viewer-Rolle in Settings + Cluster — operative Buttons sperren

Settings: HAProxy-Reload, Render-Configs, Backup-Now, Service-Restart, E-Mail-Save, Maintenance-Toggle, Backup-/Audit-Retention, Auto-Update- und IPv6-Toggle disabled für Viewer (Passwort-Änderung bleibt aktiv). Cluster: Join-Token-Generation, Peer-Removal, mTLS-Cert-Renew disabled. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-24 13:14:51 +02:00
parent 2d027b3044
commit 8b0e8a8ab4
6 changed files with 109 additions and 71 deletions
--- 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,22 +248,30 @@ export default function ClusterPage() {
    {
      title: t('common.actions'), key: 'actions', width: 110,
      render: (_, r) => (
-        <Popconfirm
-          title={t('cluster.removePeerConfirmTitle')}
-          description={t('cluster.removePeerConfirmDesc', { fqdn: r.fqdn })}
-          okText={t('common.yes')}
-          cancelText={t('common.no')}
-          okButtonProps={{ danger: true }}
-          onConfirm={() => removePeer.mutate(r.id)}
-        >
-          <Button
-            type="text" size="small" danger
-            icon={<DeleteOutlined />}
-            loading={removePeer.isPending && removePeer.variables === r.id}
+        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 })}
+            okText={t('common.yes')}
+            cancelText={t('common.no')}
+            okButtonProps={{ danger: true }}
+            onConfirm={() => removePeer.mutate(r.id)}
          >
-            {t('cluster.removePeerBtn')}
-          </Button>
-        </Popconfirm>
+            <Button
+              type="text" size="small" danger
+              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
-              icon={<KeyOutlined />}
-              loading={generateToken.isPending}
-              onClick={() => generateToken.mutate()}
-            >
-              {t('cluster.generateJoinToken')}
-            </Button>
+            <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,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
-              title={t('cluster.renewSelfConfirm')}
-              okText={t('common.yes')}
-              cancelText={t('common.no')}
-              onConfirm={() => renewSelf.mutate()}
-            >
-              <Button size="small" loading={renewSelf.isPending}>
-                {t('cluster.renewSelfBtn')}
-              </Button>
-            </Popconfirm>
+            isViewer ? (
+              <Tooltip title={t('auth.viewerBadge')}>
+                <Button size="small" disabled>{t('cluster.renewSelfBtn')}</Button>
+              </Tooltip>
+            ) : (
+              <Popconfirm
+                title={t('cluster.renewSelfConfirm')}
+                okText={t('common.yes')}
+                cancelText={t('common.no')}
+                onConfirm={() => renewSelf.mutate()}
+              >
+                <Button size="small" loading={renewSelf.isPending}>
+                  {t('cluster.renewSelfBtn')}
+                </Button>
+              </Popconfirm>
+            )
          )}
        >
          <Descriptions size="small" column={2} bordered>
--- 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>
-          <Button
-            icon={<ReloadOutlined />}
-            loading={haproxyReload.isPending}
-            onClick={() => haproxyReload.mutate()}
-          >
-            {t('settings.haproxyReloadBtn')}
-          </Button>
-          <Button
-            icon={<ReloadOutlined />}
-            loading={renderConfigs.isPending}
-            onClick={() => renderConfigs.mutate()}
-          >
-            {t('settings.renderConfigsBtn')}
-          </Button>
-          <Button
-            icon={<DatabaseOutlined />}
-            loading={triggerBackup.isPending}
-            onClick={() => triggerBackup.mutate()}
-          >
-            {t('settings.backupNowBtn')}
-          </Button>
+          <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>
-                <Button
-                  size="small"
-                  icon={<ReloadOutlined />}
-                  loading={restartingService === svc}
-                  onClick={() => serviceRestart.mutate(svc)}
-                >
-                  {t('settings.serviceRestartBtn')}
-                </Button>
+                <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}>
-                {t('common.save')}
-              </Button>
+              <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>