feat: rebrand to HAProxy OpenManager, remove demo accounts from login

- Replace login icon with ClusterOutlined, title "HAProxy OpenManager"
- Add subtitle "Multi-Cluster Load Balancer Management" on login page
- Remove demo account list from login page
- Update sidebar logo: emoji → ClusterOutlined icon
- Update header and browser tab title
- Clean up unused demo-account CSS styles

Made-with: Cursor
This commit is contained in:
taylanbakircioglu
2026-03-19 13:12:24 +03:00
parent bb6cb58db3
commit 5796d3d1fd
5 changed files with 26 additions and 91 deletions
+2 -2
View File
@@ -7,9 +7,9 @@
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="HAProxy Load Balancer Management UI"
content="HAProxy Multi-Cluster Load Balancer Management"
/>
<title>HAProxy Management UI</title>
<title>HAProxy OpenManager</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
+11 -14
View File
@@ -17,7 +17,8 @@ import {
PlayCircleOutlined,
CloudUploadOutlined,
ApiOutlined,
SearchOutlined
SearchOutlined,
ClusterOutlined
} from '@ant-design/icons';
import Dashboard from './components/DashboardV2';
@@ -232,28 +233,24 @@ function AppContent() {
overflow: 'hidden'
}}>
{collapsed ? (
<div style={{
fontSize: '20px',
<ClusterOutlined style={{
fontSize: '22px',
color: '#1890ff',
textShadow: '0 0 10px rgba(24, 144, 255, 0.5)'
}}>
H
</div>
}} />
) : (
<div style={{
display: 'flex',
alignItems: 'center',
gap: '8px',
fontSize: '16px'
fontSize: '14px'
}}>
<div style={{
fontSize: '24px',
<ClusterOutlined style={{
fontSize: '22px',
color: '#1890ff',
textShadow: '0 0 10px rgba(24, 144, 255, 0.5)'
}}>
</div>
<span>HAProxy Management</span>
}} />
<span>HAProxy OpenManager</span>
</div>
)}
</div>
@@ -293,7 +290,7 @@ function AppContent() {
marginLeft: '8px',
whiteSpace: 'nowrap'
}}>
HAProxy Load Balancer Management
HAProxy OpenManager
</div>
</div>
<div style={{ flex: 1, display: 'flex', justifyContent: 'center', padding: '0 16px', minWidth: 0 }}>
+2 -2
View File
@@ -19,7 +19,7 @@ const APIDocumentation = () => {
<Alert
message="Interactive API Documentation Available"
description="HAProxy Open Manager provides comprehensive, interactive API documentation via Swagger UI and ReDoc. You can test API endpoints directly from the documentation interface."
description="HAProxy OpenManager provides comprehensive, interactive API documentation via Swagger UI and ReDoc. You can test API endpoints directly from the documentation interface."
type="info"
showIcon
style={{ marginBottom: 24 }}
@@ -206,7 +206,7 @@ curl -X POST "${baseUrl}/api/backends" \\
>
<Title level={4}>Agent-Pull Architecture</Title>
<Paragraph>
HAProxy Open Manager uses an <Text strong>agent-pull architecture</Text>:
HAProxy OpenManager uses an <Text strong>agent-pull architecture</Text>:
</Paragraph>
<ol>
<li>
+4 -50
View File
@@ -55,9 +55,9 @@
}
.login-icon {
font-size: 48px;
font-size: 52px;
color: #1890ff;
margin-bottom: 16px;
margin-bottom: 12px;
display: block;
}
@@ -149,36 +149,11 @@
}
.login-footer {
margin-top: 30px;
padding-top: 20px;
margin-top: 24px;
padding-top: 16px;
border-top: 1px solid #f0f0f0;
}
.demo-accounts {
background: #fafafa;
border-radius: 8px;
padding: 16px;
border: 1px solid #f0f0f0;
}
.demo-account-list {
margin-top: 8px;
}
.demo-account {
padding: 4px 0;
font-size: 14px;
color: #595959;
display: flex;
justify-content: space-between;
align-items: center;
}
.demo-account .ant-typography {
color: #1890ff;
font-weight: 500;
}
/* Error alert customization */
.ant-alert-error {
border-radius: 8px;
@@ -232,17 +207,6 @@
font-size: 42px;
}
.demo-account {
flex-direction: column;
align-items: flex-start;
gap: 4px;
padding: 6px 0;
}
.demo-accounts {
padding: 12px;
}
.ant-input-affix-wrapper,
.ant-input {
height: 32px;
@@ -284,13 +248,6 @@
margin-top: 16px;
}
.demo-accounts {
padding: 10px;
}
.demo-account-list .ant-typography {
font-size: 13px;
}
}
@media screen and (max-width: 360px) {
@@ -333,9 +290,6 @@
margin-top: 12px;
}
.demo-accounts {
padding: 8px;
}
}
/* High DPI displays */
+7 -23
View File
@@ -14,7 +14,7 @@ import {
import {
UserOutlined,
LockOutlined,
SecurityScanOutlined
ClusterOutlined
} from '@ant-design/icons';
import axios from 'axios';
import { useAuth } from '../contexts/AuthContext';
@@ -97,12 +97,12 @@ const Login = () => {
>
<Card className="login-card">
<div className="login-header">
<SecurityScanOutlined className="login-icon" />
<ClusterOutlined className="login-icon" />
<Title level={2} className="login-title">
HAProxy Management
HAProxy OpenManager
</Title>
<Text type="secondary" className="login-subtitle">
Sign in to your account
Multi-Cluster Load Balancer Management
</Text>
</div>
@@ -166,25 +166,9 @@ const Login = () => {
</Form>
<div className="login-footer">
<div className="demo-accounts">
<Title level={5} style={{ color: '#666', marginBottom: 8 }}>
Demo Accounts:
</Title>
<div className="demo-account-list">
<div className="demo-account">
<Text strong>admin</Text> - Super Administrator
</div>
<div className="demo-account">
<Text strong>operator1</Text> - Daily Operations
</div>
<div className="demo-account">
<Text strong>security1</Text> - Security Management
</div>
<div className="demo-account">
<Text strong>viewer1</Text> - Read-only Access
</div>
</div>
</div>
<Text type="secondary" style={{ fontSize: 12, display: 'block', textAlign: 'center' }}>
Centralized management for multiple HAProxy clusters
</Text>
</div>
</Card>
</Col>