From 7891027d55d3ea8d2faf15f54b8831a725b8ec92 Mon Sep 17 00:00:00 2001 From: rcourtman Date: Sat, 13 Dec 2025 21:30:44 +0000 Subject: [PATCH] style: replace emojis with text indicators in UI components - SecurityWarning: replace emoji icons with text-based indicators - NodeModal: minor formatting cleanup --- .../src/components/SecurityWarning.tsx | 29 ++-- .../src/components/Settings/NodeModal.tsx | 139 +++++++++--------- 2 files changed, 81 insertions(+), 87 deletions(-) diff --git a/frontend-modern/src/components/SecurityWarning.tsx b/frontend-modern/src/components/SecurityWarning.tsx index a037852..96635f1 100644 --- a/frontend-modern/src/components/SecurityWarning.tsx +++ b/frontend-modern/src/components/SecurityWarning.tsx @@ -92,11 +92,11 @@ export const SecurityWarning: Component = () => { return 'text-red-600 dark:text-red-400'; }; - const getScoreEmoji = (score: number, max: number) => { + const getScoreIcon = (score: number, max: number) => { const percentage = (score / max) * 100; - if (percentage >= 80) return '🛡ī¸'; - if (percentage >= 60) return '⚠ī¸'; - return '🚨'; + if (percentage >= 80) return 'shield'; + if (percentage >= 60) return 'warning'; + return 'alert'; }; // Show more aggressively if public access detected @@ -120,16 +120,17 @@ export const SecurityWarning: Component = () => { return (
- {getScoreEmoji(status()!.score, status()!.maxScore)} + + {getScoreIcon(status()!.score, status()!.maxScore) === 'shield' ? '✓' : getScoreIcon(status()!.score, status()!.maxScore) === 'warning' ? '!' : '!!'} +
{

{status()!.publicAccess ? ( - ⚠ī¸ PUBLIC NETWORK ACCESS DETECTED - Your Proxmox credentials are exposed to + WARNING: PUBLIC NETWORK ACCESS DETECTED - Your Proxmox credentials are exposed to the internet! ) : ( @@ -172,13 +173,13 @@ export const SecurityWarning: Component = () => { - {status()!.credentialsEncrypted ? '✅' : '❌'} + {status()!.credentialsEncrypted ? 'Yes' : 'No'} Credentials encrypted at rest

- {status()!.exportProtected ? '✅' : '❌'} + {status()!.exportProtected ? 'Yes' : 'No'} Export requires authentication
@@ -186,19 +187,19 @@ export const SecurityWarning: Component = () => { - {status()!.hasAuthentication ? '✅' : '❌'} + {status()!.hasAuthentication ? 'Yes' : 'No'} Authentication enabled
- {status()!.hasHTTPS ? '✅' : '❌'} + {status()!.hasHTTPS ? 'Yes' : 'No'} HTTPS connection
- {status()!.hasAuditLogging ? '✅' : '❌'} + {status()!.hasAuditLogging ? 'Yes' : 'No'} Audit logging enabled
diff --git a/frontend-modern/src/components/Settings/NodeModal.tsx b/frontend-modern/src/components/Settings/NodeModal.tsx index fd6c2ff..584f69d 100644 --- a/frontend-modern/src/components/Settings/NodeModal.tsx +++ b/frontend-modern/src/components/Settings/NodeModal.tsx @@ -35,15 +35,15 @@ interface NodeModalProps { } type TemperatureTransportDetail = { - tone: 'info' | 'success' | 'warning' | 'danger'; - message: string; - disable?: boolean; + tone: 'info' | 'success' | 'warning' | 'danger'; + message: string; + disable?: boolean; }; interface ProxyInstallResponse { - command: string; - pulseURL: string; - node?: string; + command: string; + pulseURL: string; + node?: string; } const deriveNameFromHost = (host: string): string => { @@ -280,11 +280,11 @@ export const NodeModal: Component = (props) => { const pmgConfig = node.type === 'pmg' ? (node as NodeConfig & { - monitorMailStats?: boolean; - monitorQueues?: boolean; - monitorQuarantine?: boolean; - monitorDomainStats?: boolean; - }) + monitorMailStats?: boolean; + monitorQueues?: boolean; + monitorQuarantine?: boolean; + monitorDomainStats?: boolean; + }) : undefined; const formSource: ReturnType = { @@ -776,11 +776,10 @@ export const NodeModal: Component = (props) => { @@ -1007,7 +1004,7 @@ export const NodeModal: Component = (props) => { {formData().host ? 'Click the button above to copy the setup command' - : '⚠ī¸ Please enter the Host URL above first'} + : 'Please enter the Host URL above first'} } > @@ -1153,7 +1150,7 @@ export const NodeModal: Component = (props) => {

- ✨ Fully automatic - no manual token copying needed! + Fully automatic - no manual token copying needed!

@@ -1252,7 +1249,7 @@ export const NodeModal: Component = (props) => {

- ⚠ī¸ Copy the token value immediately - it won't be shown again! + Important: Copy the token value immediately - it won't be shown again!

@@ -1337,7 +1334,7 @@ export const NodeModal: Component = (props) => {

- ℹī¸ PVEAuditor gives read-only API access. PulseMonitor adds + Note: PVEAuditor gives read-only API access. PulseMonitor adds Sys.Audit plus either VM.Monitor (PVE 8) or VM.GuestAgent.Audit (PVE 9+) for disk and guest metrics. PVEDatastoreAdmin on /storage adds backup visibility. @@ -1374,11 +1371,10 @@ export const NodeModal: Component = (props) => { @@ -1931,30 +1925,30 @@ export const NodeModal: Component = (props) => { + + + + +

+

+ Generate a dedicated API token in Configuration → API Tokens on your + Mail Gateway. We recommend creating a service user such as pulse-monitor@pmg + with Auditor privileges. +

+
    +
  1. Click Add and choose the service user (or create one if needed).
    2. +
  2. Enable Privilege Separation and assign the Auditor role.
    3. +
  3. Copy the generated Token ID (e.g. pulse-monitor@pmg!pulse-edge) and the secret value into the fields below.
    4. +
+

+ Pulse only requires read-only access. Avoid granting administrator permissions to the token. +

+
- - -
-

- Generate a dedicated API token in Configuration → API Tokens on your - Mail Gateway. We recommend creating a service user such as pulse-monitor@pmg - with Auditor privileges. -

-
    -
  1. Click Add and choose the service user (or create one if needed).
    2. -
  2. Enable Privilege Separation and assign the Auditor role.
    3. -
  3. Copy the generated Token ID (e.g. pulse-monitor@pmg!pulse-edge) and the secret value into the fields below.
    4. -
-

- Pulse only requires read-only access. Avoid granting administrator permissions to the token. -

-
- - - {/* Token Input Fields */} -
+ {/* Token Input Fields */} +