nessi/NexaPG
1
0
Fork 0
Code Issues 20 Pull Requests Actions Packages Projects Releases 12 Activity

Improve admin page structure and styling for clarity
All checks were successful
PostgreSQL Compatibility Matrix / PG14 smoke (push) Successful in 7s
Details
PostgreSQL Compatibility Matrix / PG15 smoke (push) Successful in 7s
Details
PostgreSQL Compatibility Matrix / PG16 smoke (push) Successful in 7s
Details
PostgreSQL Compatibility Matrix / PG17 smoke (push) Successful in 7s
Details
PostgreSQL Compatibility Matrix / PG18 smoke (push) Successful in 7s
Details

Browse Source 
Updated the Admin Users Page by reorganizing sections, improving labels, and adding descriptions for better usability. Adjusted styles to enhance visual hierarchy and provide consistent spacing and formatting throughout.
This commit is contained in:
Sascha Nesterovic
2026-02-12 15:09:51 +01:00
parent 51eece14c2
commit 7acfb498b4
2 changed files with 69 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
frontend/src/pages/AdminUsersPage.jsx
View File

@@ -119,24 +119,37 @@ export function AdminUsersPage() {
return (
<div className="admin-settings-page">
<h2>Admin Settings - Users</h2>
<h2>Admin Settings</h2>
<p className="muted admin-page-subtitle">Manage users and outgoing notifications for this NexaPG instance.</p>
{error && <div className="card error">{error}</div>}
<div className="card">
<h3>User Management</h3>
<div className="admin-section-head">
<h3>User Management</h3>
<p className="muted">Create accounts and manage access roles.</p>
</div>
<form className="grid three admin-user-form" onSubmit={create}>
<input value={form.email} placeholder="E-Mail" onChange={(e) => setForm({ ...form, email: e.target.value })} />
<input
type="password"
value={form.password}
placeholder="Password"
onChange={(e) => setForm({ ...form, password: e.target.value })}
/>
<select value={form.role} onChange={(e) => setForm({ ...form, role: e.target.value })}>
<option value="viewer">viewer</option>
<option value="operator">operator</option>
<option value="admin">admin</option>
</select>
<div className="admin-field">
<label>Email</label>
<input value={form.email} placeholder="user@example.com" onChange={(e) => setForm({ ...form, email: e.target.value })} />
</div>
<div className="admin-field">
<label>Password</label>
<input
type="password"
value={form.password}
placeholder="Set initial password"
onChange={(e) => setForm({ ...form, password: e.target.value })}
/>
</div>
<div className="admin-field">
<label>Role</label>
<select value={form.role} onChange={(e) => setForm({ ...form, role: e.target.value })}>
<option value="viewer">viewer</option>
<option value="operator">operator</option>
<option value="admin">admin</option>
</select>
</div>
<div className="form-actions field-full">
<button className="primary-btn" type="submit">Create User</button>
</div>
@@ -183,10 +196,10 @@ export function AdminUsersPage() {
</div>
<div className="card">
<h3>Alert Email Notifications (SMTP)</h3>
<p className="muted">
Configure outgoing SMTP for alert emails. This is send-only; no inbound mailbox is used.
</p>
<div className="admin-section-head">
<h3>Alert Email Notifications (SMTP)</h3>
<p className="muted">Configure send-only SMTP for warning and alert notifications.</p>
</div>
{smtpInfo && <div className="test-connection-result ok">{smtpInfo}</div>}
<form className="grid two admin-smtp-form" onSubmit={saveSmtp}>
<label className="toggle-check field-full">
@@ -201,7 +214,7 @@ export function AdminUsersPage() {
</span>
</label>
<div>
<div className="admin-field">
<label>SMTP host</label>
<input
value={emailSettings.smtp_host}
@@ -209,7 +222,7 @@ export function AdminUsersPage() {
onChange={(e) => setEmailSettings({ ...emailSettings, smtp_host: e.target.value })}
/>
</div>
<div>
<div className="admin-field">
<label>SMTP port</label>
<input
type="number"
@@ -218,7 +231,7 @@ export function AdminUsersPage() {
/>
</div>
<div>
<div className="admin-field">
<label>SMTP username</label>
<input
value={emailSettings.smtp_username}
@@ -226,7 +239,7 @@ export function AdminUsersPage() {
onChange={(e) => setEmailSettings({ ...emailSettings, smtp_username: e.target.value })}
/>
</div>
<div>
<div className="admin-field">
<label>SMTP password</label>
<input
type="password"
@@ -236,7 +249,7 @@ export function AdminUsersPage() {
/>
</div>
<div>
<div className="admin-field">
<label>From email</label>
<input
value={emailSettings.from_email}
@@ -244,7 +257,7 @@ export function AdminUsersPage() {
onChange={(e) => setEmailSettings({ ...emailSettings, from_email: e.target.value })}
/>
</div>
<div>
<div className="admin-field">
<label>Alert recipients (comma-separated)</label>
<input
value={emailSettings.alert_recipients}

34
frontend/src/styles.css
View File

@@ -981,18 +981,47 @@ td {
.admin-settings-page h2 {
margin-top: 4px;
margin-bottom: 14px;
margin-bottom: 4px;
}
.admin-settings-page h3 {
margin-top: 0;
margin-bottom: 10px;
margin-bottom: 2px;
}
.admin-page-subtitle {
margin: 0 0 14px;
}
.admin-section-head {
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px solid #264671;
}
.admin-section-head p {
margin: 4px 0 0;
font-size: 13px;
}
.admin-user-form {
gap: 10px;
}
.admin-field label {
display: block;
margin-bottom: 6px;
color: #c6d7f1;
font-size: 13px;
font-weight: 600;
}
.admin-field input,
.admin-field select {
width: 100%;
min-height: 38px;
}
.admin-users-table-wrap table tbody .admin-user-row td {
padding-top: 11px;
padding-bottom: 11px;
@@ -1045,6 +1074,7 @@ td {
.admin-test-recipient {
min-width: 260px;
max-width: 320px;
}
.muted {