Add system settings, audit logging, user management, and dark mode fixes
System Settings: - Add SystemSettings.vue with Zabbix integration, SMTP/email config, SAML SSO settings - Add Setting model with key-value storage and typed values - Add settings API with caching Audit Logging: - Add AuditLog model tracking user, IP, action, entity changes - Add comprehensive audit logging to all CRUD operations: - Machines, Computers, Equipment, Network devices, VLANs, Subnets - Printers, USB devices (including checkout/checkin) - Applications, Settings, Users/Roles - Track old/new values for all field changes - Mask sensitive values (passwords, tokens) in logs User Management: - Add UsersList.vue with full user CRUD - Add Role management with granular permissions - Add 41 predefined permissions across 10 categories - Add users API with roles and permissions endpoints Reports: - Add TonerReport.vue for printer supply monitoring Dark Mode Fixes: - Fix map position section in PCForm, PrinterForm - Fix alert-warning in KnowledgeBaseDetail - All components now use CSS variables for theming CLI Commands: - Add flask seed permissions - Add flask seed settings Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
cproudlock
367
frontend/src/views/settings/AuditLogs.vue
Normal file
367
frontend/src/views/settings/AuditLogs.vue
Normal file
@@ -0,0 +1,367 @@
|
||||
<template>
|
||||
<div class="page-header">
|
||||
<h1>Audit Logs</h1>
|
||||
</div>
|
||||
|
||||
<div class="filters">
|
||||
<input
|
||||
type="text"
|
||||
v-model="search"
|
||||
placeholder="Search by name or user..."
|
||||
@input="debouncedSearch"
|
||||
>
|
||||
<select v-model="filterAction" @change="loadLogs">
|
||||
<option value="">All Actions</option>
|
||||
<option value="created">Created</option>
|
||||
<option value="updated">Updated</option>
|
||||
<option value="deleted">Deleted</option>
|
||||
</select>
|
||||
<select v-model="filterEntity" @change="loadLogs">
|
||||
<option value="">All Entities</option>
|
||||
<option v-for="e in entityTypes" :key="e" :value="e">{{ e }}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="table-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 160px">Timestamp</th>
|
||||
<th style="width: 100px">Action</th>
|
||||
<th style="width: 100px">Entity</th>
|
||||
<th>Name/ID</th>
|
||||
<th style="width: 120px">User</th>
|
||||
<th style="width: 130px">IP Address</th>
|
||||
<th>Changes</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-if="loading">
|
||||
<td colspan="7" class="loading">Loading...</td>
|
||||
</tr>
|
||||
<tr v-else-if="!logs.length">
|
||||
<td colspan="7" class="empty">No audit logs found</td>
|
||||
</tr>
|
||||
<tr v-for="log in logs" :key="log.auditlogid">
|
||||
<td class="timestamp">{{ formatDate(log.timestamp) }}</td>
|
||||
<td>
|
||||
<span class="badge" :class="actionClass(log.action)">
|
||||
{{ log.action }}
|
||||
</span>
|
||||
</td>
|
||||
<td>{{ log.entitytype }}</td>
|
||||
<td>
|
||||
<router-link
|
||||
v-if="getEntityLink(log)"
|
||||
:to="getEntityLink(log)"
|
||||
class="entity-link"
|
||||
>
|
||||
{{ log.entityname || `#${log.entityid}` }}
|
||||
</router-link>
|
||||
<span v-else>{{ log.entityname || `#${log.entityid}` }}</span>
|
||||
</td>
|
||||
<td>{{ log.username || '-' }}</td>
|
||||
<td class="ip">{{ log.ipaddress || '-' }}</td>
|
||||
<td>
|
||||
<button
|
||||
v-if="log.changes && Object.keys(log.changes).length"
|
||||
class="changes-btn"
|
||||
@click="showChanges(log)"
|
||||
>
|
||||
{{ Object.keys(log.changes).length }} field(s)
|
||||
</button>
|
||||
<span v-else class="no-changes">-</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="pagination" v-if="totalPages > 1">
|
||||
<button :disabled="page <= 1" @click="page--; loadLogs()">Prev</button>
|
||||
<span>Page {{ page }} of {{ totalPages }}</span>
|
||||
<button :disabled="page >= totalPages" @click="page++; loadLogs()">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Changes Modal -->
|
||||
<div v-if="selectedLog" class="modal-overlay" @click.self="selectedLog = null">
|
||||
<div class="modal">
|
||||
<div class="modal-header">
|
||||
<h3>Changes - {{ selectedLog.entitytype }} {{ selectedLog.entityname }}</h3>
|
||||
<button class="close-btn" @click="selectedLog = null">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<table class="changes-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Field</th>
|
||||
<th>Old Value</th>
|
||||
<th>New Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(change, field) in selectedLog.changes" :key="field">
|
||||
<td>{{ field }}</td>
|
||||
<td class="old-value">{{ formatValue(change.old) }}</td>
|
||||
<td class="new-value">{{ formatValue(change.new) }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import { auditLogsApi } from '../../api'
|
||||
|
||||
const logs = ref([])
|
||||
const loading = ref(true)
|
||||
const page = ref(1)
|
||||
const perpage = 50
|
||||
const total = ref(0)
|
||||
const search = ref('')
|
||||
const filterAction = ref('')
|
||||
const filterEntity = ref('')
|
||||
const selectedLog = ref(null)
|
||||
|
||||
const entityTypes = ['Asset', 'Printer', 'Computer', 'Equipment', 'Network', 'Setting', 'User', 'Application', 'KnowledgeBase']
|
||||
|
||||
const totalPages = computed(() => Math.ceil(total.value / perpage))
|
||||
|
||||
let debounceTimer = null
|
||||
function debouncedSearch() {
|
||||
clearTimeout(debounceTimer)
|
||||
debounceTimer = setTimeout(() => {
|
||||
page.value = 1
|
||||
loadLogs()
|
||||
}, 300)
|
||||
}
|
||||
|
||||
async function loadLogs() {
|
||||
loading.value = true
|
||||
try {
|
||||
const params = {
|
||||
page: page.value,
|
||||
perpage
|
||||
}
|
||||
if (search.value) params.search = search.value
|
||||
if (filterAction.value) params.action = filterAction.value
|
||||
if (filterEntity.value) params.entitytype = filterEntity.value
|
||||
|
||||
const { data } = await auditLogsApi.list(params)
|
||||
logs.value = data.data
|
||||
total.value = data.meta.total
|
||||
} catch (e) {
|
||||
console.error('Failed to load audit logs:', e)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function formatDate(isoString) {
|
||||
if (!isoString) return '-'
|
||||
const d = new Date(isoString)
|
||||
return d.toLocaleString()
|
||||
}
|
||||
|
||||
function actionClass(action) {
|
||||
switch (action) {
|
||||
case 'created': return 'badge-success'
|
||||
case 'updated': return 'badge-warning'
|
||||
case 'deleted': return 'badge-danger'
|
||||
default: return ''
|
||||
}
|
||||
}
|
||||
|
||||
function getEntityLink(log) {
|
||||
if (!log.entityid) return null
|
||||
const type = log.entitytype?.toLowerCase()
|
||||
switch (type) {
|
||||
case 'printer': return `/printers/${log.entityid}`
|
||||
case 'computer': return `/pcs/${log.entityid}`
|
||||
case 'equipment': return `/equipment/${log.entityid}`
|
||||
case 'asset': return `/assets/${log.entityid}`
|
||||
case 'application': return `/applications/${log.entityid}`
|
||||
case 'knowledgebase': return `/kb/${log.entityid}`
|
||||
default: return null
|
||||
}
|
||||
}
|
||||
|
||||
function showChanges(log) {
|
||||
selectedLog.value = log
|
||||
}
|
||||
|
||||
function formatValue(val) {
|
||||
if (val === null || val === undefined) return '(empty)'
|
||||
if (typeof val === 'boolean') return val ? 'Yes' : 'No'
|
||||
if (typeof val === 'object') return JSON.stringify(val)
|
||||
return String(val)
|
||||
}
|
||||
|
||||
onMounted(loadLogs)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.filters {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filters input,
|
||||
.filters select {
|
||||
padding: 0.5rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
background: var(--bg-card);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.filters input {
|
||||
min-width: 250px;
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-light);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ip {
|
||||
font-family: monospace;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.badge {
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.8rem;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.badge-success { background: var(--success); color: white; }
|
||||
.badge-warning { background: var(--warning); color: #000; }
|
||||
.badge-danger { background: var(--danger); color: white; }
|
||||
|
||||
.entity-link {
|
||||
color: var(--link);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.entity-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.changes-btn {
|
||||
padding: 0.2rem 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.changes-btn:hover {
|
||||
background: var(--primary-dark);
|
||||
}
|
||||
|
||||
.no-changes {
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.loading, .empty {
|
||||
text-align: center;
|
||||
color: var(--text-light);
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
/* Modal */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
min-width: 500px;
|
||||
max-width: 90vw;
|
||||
max-height: 80vh;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.modal-header h3 {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
color: var(--text-light);
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 1rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.changes-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.changes-table th,
|
||||
.changes-table td {
|
||||
padding: 0.5rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.changes-table th {
|
||||
background: var(--bg);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.old-value {
|
||||
color: var(--danger);
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.new-value {
|
||||
color: var(--success);
|
||||
}
|
||||
</style>
|
||||
@@ -62,12 +62,30 @@
|
||||
<h3>Subnets</h3>
|
||||
<p>Manage IP subnets and DHCP</p>
|
||||
</router-link>
|
||||
|
||||
<router-link to="/settings/system" class="settings-card">
|
||||
<div class="card-icon"><Settings :size="28" /></div>
|
||||
<h3>System Settings</h3>
|
||||
<p>Configure integrations and system options</p>
|
||||
</router-link>
|
||||
|
||||
<router-link to="/settings/auditlogs" class="settings-card">
|
||||
<div class="card-icon"><FileText :size="28" /></div>
|
||||
<h3>Audit Logs</h3>
|
||||
<p>View system activity and change history</p>
|
||||
</router-link>
|
||||
|
||||
<router-link to="/settings/users" class="settings-card">
|
||||
<div class="card-icon"><Users :size="28" /></div>
|
||||
<h3>Users & Roles</h3>
|
||||
<p>Manage user accounts and permissions</p>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Factory, MapPin, Tag, Package, Monitor, Laptop, Cog, Building, Globe, Link } from 'lucide-vue-next'
|
||||
import { Factory, MapPin, Tag, Package, Monitor, Laptop, Cog, Building, Globe, Link, Settings, FileText, Users } from 'lucide-vue-next'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
742
frontend/src/views/settings/SystemSettings.vue
Normal file
742
frontend/src/views/settings/SystemSettings.vue
Normal file
@@ -0,0 +1,742 @@
|
||||
<template>
|
||||
<div class="page-header">
|
||||
<h1>System Settings</h1>
|
||||
</div>
|
||||
|
||||
<div class="settings-sections">
|
||||
<!-- Integrations Section -->
|
||||
<div class="section-card">
|
||||
<h2 class="section-title">Integrations</h2>
|
||||
|
||||
<div class="setting-group">
|
||||
<h3>Zabbix Integration</h3>
|
||||
<p class="setting-description">
|
||||
Connect to Zabbix for real-time printer supply monitoring. When enabled, supply levels
|
||||
are fetched from Zabbix API and displayed on printer detail pages.
|
||||
</p>
|
||||
|
||||
<div class="setting-row">
|
||||
<label class="toggle-label">
|
||||
<span>Enable Zabbix Integration</span>
|
||||
<button
|
||||
class="toggle-btn"
|
||||
:class="{ active: settings.zabbix_enabled }"
|
||||
@click="toggleSetting('zabbix_enabled')"
|
||||
:disabled="saving"
|
||||
>
|
||||
<span class="toggle-slider"></span>
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="setting-row" v-if="settings.zabbix_enabled">
|
||||
<label>
|
||||
<span>Zabbix API URL</span>
|
||||
<input
|
||||
type="url"
|
||||
v-model="settings.zabbix_url"
|
||||
placeholder="http://zabbix.example.com:8080"
|
||||
@blur="saveSetting('zabbix_url', settings.zabbix_url)"
|
||||
:disabled="saving"
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="setting-row" v-if="settings.zabbix_enabled">
|
||||
<label>
|
||||
<span>Zabbix API Token</span>
|
||||
<input
|
||||
type="password"
|
||||
v-model="settings.zabbix_token"
|
||||
placeholder="Enter API token"
|
||||
@blur="saveSetting('zabbix_token', settings.zabbix_token)"
|
||||
:disabled="saving"
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="status-indicator" v-if="settings.zabbix_enabled">
|
||||
<span class="status-dot" :class="zabbixStatus"></span>
|
||||
<span>{{ zabbixMessage }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Email Section -->
|
||||
<div class="section-card">
|
||||
<h2 class="section-title">Email / SMTP</h2>
|
||||
|
||||
<div class="setting-group">
|
||||
<h3>Email Notifications</h3>
|
||||
<p class="setting-description">
|
||||
Configure SMTP settings to enable email notifications for alerts, toner reports,
|
||||
and other system notifications.
|
||||
</p>
|
||||
|
||||
<div class="setting-row">
|
||||
<label class="toggle-label">
|
||||
<span>Enable Email Notifications</span>
|
||||
<button
|
||||
class="toggle-btn"
|
||||
:class="{ active: settings.smtp_enabled }"
|
||||
@click="toggleSetting('smtp_enabled')"
|
||||
:disabled="saving"
|
||||
>
|
||||
<span class="toggle-slider"></span>
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<template v-if="settings.smtp_enabled">
|
||||
<div class="settings-grid">
|
||||
<div class="setting-row">
|
||||
<label>
|
||||
<span>SMTP Host</span>
|
||||
<input
|
||||
type="text"
|
||||
v-model="settings.smtp_host"
|
||||
placeholder="smtp.example.com"
|
||||
@blur="saveSetting('smtp_host', settings.smtp_host)"
|
||||
:disabled="saving"
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="setting-row">
|
||||
<label>
|
||||
<span>SMTP Port</span>
|
||||
<input
|
||||
type="number"
|
||||
v-model="settings.smtp_port"
|
||||
placeholder="587"
|
||||
@blur="saveSetting('smtp_port', settings.smtp_port)"
|
||||
:disabled="saving"
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="setting-row">
|
||||
<label>
|
||||
<span>Username</span>
|
||||
<input
|
||||
type="text"
|
||||
v-model="settings.smtp_username"
|
||||
placeholder="username"
|
||||
@blur="saveSetting('smtp_username', settings.smtp_username)"
|
||||
:disabled="saving"
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="setting-row">
|
||||
<label>
|
||||
<span>Password</span>
|
||||
<input
|
||||
type="password"
|
||||
v-model="settings.smtp_password"
|
||||
placeholder="password"
|
||||
@blur="saveSetting('smtp_password', settings.smtp_password)"
|
||||
:disabled="saving"
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="setting-row">
|
||||
<label class="toggle-label">
|
||||
<span>Use TLS Encryption</span>
|
||||
<button
|
||||
class="toggle-btn"
|
||||
:class="{ active: settings.smtp_use_tls }"
|
||||
@click="toggleSetting('smtp_use_tls')"
|
||||
:disabled="saving"
|
||||
>
|
||||
<span class="toggle-slider"></span>
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="settings-grid">
|
||||
<div class="setting-row">
|
||||
<label>
|
||||
<span>From Address</span>
|
||||
<input
|
||||
type="email"
|
||||
v-model="settings.smtp_from_address"
|
||||
placeholder="noreply@example.com"
|
||||
@blur="saveSetting('smtp_from_address', settings.smtp_from_address)"
|
||||
:disabled="saving"
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="setting-row">
|
||||
<label>
|
||||
<span>From Name</span>
|
||||
<input
|
||||
type="text"
|
||||
v-model="settings.smtp_from_name"
|
||||
placeholder="ShopDB"
|
||||
@blur="saveSetting('smtp_from_name', settings.smtp_from_name)"
|
||||
:disabled="saving"
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="setting-row full-width">
|
||||
<label>
|
||||
<span>Default Alert Recipients</span>
|
||||
<input
|
||||
type="text"
|
||||
v-model="settings.alert_recipients"
|
||||
placeholder="user1@example.com, user2@example.com"
|
||||
@blur="saveSetting('alert_recipients', settings.alert_recipients)"
|
||||
:disabled="saving"
|
||||
>
|
||||
<small class="input-hint">Comma-separated list of email addresses</small>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="status-indicator">
|
||||
<span class="status-dot" :class="smtpStatus"></span>
|
||||
<span>{{ smtpMessage }}</span>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="test-btn"
|
||||
@click="testEmail"
|
||||
:disabled="saving || testingEmail || !canTestEmail"
|
||||
>
|
||||
{{ testingEmail ? 'Sending...' : 'Send Test Email' }}
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Audit Section -->
|
||||
<div class="section-card">
|
||||
<h2 class="section-title">Audit & Logging</h2>
|
||||
|
||||
<div class="setting-group">
|
||||
<h3>Audit Log Retention</h3>
|
||||
<p class="setting-description">
|
||||
Configure how long audit logs are retained. Older logs will be automatically purged.
|
||||
Set to 0 to keep logs indefinitely.
|
||||
</p>
|
||||
|
||||
<div class="setting-row">
|
||||
<label>
|
||||
<span>Retention Period (days)</span>
|
||||
<input
|
||||
type="number"
|
||||
v-model="settings.audit_retention_days"
|
||||
min="0"
|
||||
placeholder="90"
|
||||
@blur="saveSetting('audit_retention_days', settings.audit_retention_days)"
|
||||
:disabled="saving"
|
||||
>
|
||||
<small class="input-hint">0 = keep forever, recommended: 90 days</small>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<router-link to="/settings/auditlogs" class="view-logs-link">
|
||||
View Audit Logs →
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Authentication Section -->
|
||||
<div class="section-card">
|
||||
<h2 class="section-title">Authentication</h2>
|
||||
|
||||
<div class="setting-group">
|
||||
<h3>SAML Single Sign-On</h3>
|
||||
<p class="setting-description">
|
||||
Enable SAML SSO for enterprise authentication. Users can sign in using your organization's
|
||||
identity provider (Azure AD, Okta, etc.). Local login can remain enabled as a fallback.
|
||||
</p>
|
||||
|
||||
<div class="setting-row">
|
||||
<label class="toggle-label">
|
||||
<span>Enable SAML SSO</span>
|
||||
<button
|
||||
class="toggle-btn"
|
||||
:class="{ active: settings.saml_enabled }"
|
||||
@click="toggleSetting('saml_enabled')"
|
||||
:disabled="saving"
|
||||
>
|
||||
<span class="toggle-slider"></span>
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<template v-if="settings.saml_enabled">
|
||||
<div class="setting-row">
|
||||
<label>
|
||||
<span>Identity Provider Metadata URL</span>
|
||||
<input
|
||||
type="url"
|
||||
v-model="settings.saml_idp_metadata_url"
|
||||
placeholder="https://login.microsoftonline.com/.../federationmetadata.xml"
|
||||
@blur="saveSetting('saml_idp_metadata_url', settings.saml_idp_metadata_url)"
|
||||
:disabled="saving"
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="setting-row">
|
||||
<label>
|
||||
<span>Service Provider Entity ID</span>
|
||||
<input
|
||||
type="text"
|
||||
v-model="settings.saml_entity_id"
|
||||
placeholder="https://shopdb.example.com"
|
||||
@blur="saveSetting('saml_entity_id', settings.saml_entity_id)"
|
||||
:disabled="saving"
|
||||
>
|
||||
<small class="input-hint">Unique identifier for this application</small>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="setting-row">
|
||||
<label>
|
||||
<span>Assertion Consumer Service URL</span>
|
||||
<input
|
||||
type="url"
|
||||
v-model="settings.saml_acs_url"
|
||||
placeholder="https://shopdb.example.com/api/auth/saml/acs"
|
||||
@blur="saveSetting('saml_acs_url', settings.saml_acs_url)"
|
||||
:disabled="saving"
|
||||
>
|
||||
<small class="input-hint">URL where SAML responses are sent</small>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="setting-row">
|
||||
<label>
|
||||
<span>Admin Group Name</span>
|
||||
<input
|
||||
type="text"
|
||||
v-model="settings.saml_admin_group"
|
||||
placeholder="ShopDB-Admins"
|
||||
@blur="saveSetting('saml_admin_group', settings.saml_admin_group)"
|
||||
:disabled="saving"
|
||||
>
|
||||
<small class="input-hint">SAML group that grants admin role (leave empty to manage manually)</small>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="setting-row">
|
||||
<label class="toggle-label">
|
||||
<span>Allow Local Login</span>
|
||||
<button
|
||||
class="toggle-btn"
|
||||
:class="{ active: settings.saml_allow_local_login }"
|
||||
@click="toggleSetting('saml_allow_local_login')"
|
||||
:disabled="saving"
|
||||
>
|
||||
<span class="toggle-slider"></span>
|
||||
</button>
|
||||
</label>
|
||||
<small class="input-hint toggle-hint">Keep enabled for admin fallback access</small>
|
||||
</div>
|
||||
|
||||
<div class="setting-row">
|
||||
<label class="toggle-label">
|
||||
<span>Auto-Create Users</span>
|
||||
<button
|
||||
class="toggle-btn"
|
||||
:class="{ active: settings.saml_auto_create_users }"
|
||||
@click="toggleSetting('saml_auto_create_users')"
|
||||
:disabled="saving"
|
||||
>
|
||||
<span class="toggle-slider"></span>
|
||||
</button>
|
||||
</label>
|
||||
<small class="input-hint toggle-hint">Automatically create user accounts on first SAML login</small>
|
||||
</div>
|
||||
|
||||
<div class="status-indicator">
|
||||
<span class="status-dot" :class="samlStatus"></span>
|
||||
<span>{{ samlMessage }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="setting-group">
|
||||
<h3>User Management</h3>
|
||||
<p class="setting-description">
|
||||
Manage local user accounts and roles. Local accounts work alongside SAML when both are enabled.
|
||||
</p>
|
||||
|
||||
<router-link to="/settings/users" class="view-logs-link">
|
||||
Manage Users →
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="error" class="error-message">{{ error }}</div>
|
||||
<div v-if="success" class="success-message">{{ success }}</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, computed } from 'vue'
|
||||
import { settingsApi } from '../../api'
|
||||
|
||||
const settings = reactive({
|
||||
// Zabbix
|
||||
zabbix_enabled: false,
|
||||
zabbix_url: '',
|
||||
zabbix_token: '',
|
||||
// Email
|
||||
smtp_enabled: false,
|
||||
smtp_host: '',
|
||||
smtp_port: 587,
|
||||
smtp_username: '',
|
||||
smtp_password: '',
|
||||
smtp_use_tls: true,
|
||||
smtp_from_address: '',
|
||||
smtp_from_name: 'ShopDB',
|
||||
alert_recipients: '',
|
||||
// Audit
|
||||
audit_retention_days: 90,
|
||||
// SAML
|
||||
saml_enabled: false,
|
||||
saml_idp_metadata_url: '',
|
||||
saml_entity_id: '',
|
||||
saml_acs_url: '',
|
||||
saml_allow_local_login: true,
|
||||
saml_auto_create_users: true,
|
||||
saml_admin_group: ''
|
||||
})
|
||||
|
||||
const loading = ref(true)
|
||||
const saving = ref(false)
|
||||
const testingEmail = ref(false)
|
||||
const error = ref('')
|
||||
const success = ref('')
|
||||
|
||||
// Zabbix status
|
||||
const zabbixStatus = computed(() => {
|
||||
if (!settings.zabbix_enabled) return 'inactive'
|
||||
if (!settings.zabbix_url || !settings.zabbix_token) return 'warning'
|
||||
return 'pending'
|
||||
})
|
||||
|
||||
const zabbixMessage = computed(() => {
|
||||
if (!settings.zabbix_enabled) return 'Disabled'
|
||||
if (!settings.zabbix_url) return 'URL not configured'
|
||||
if (!settings.zabbix_token) return 'Token not configured'
|
||||
return 'Configured (connectivity checked on first use)'
|
||||
})
|
||||
|
||||
// SMTP status
|
||||
const smtpStatus = computed(() => {
|
||||
if (!settings.smtp_enabled) return 'inactive'
|
||||
if (!settings.smtp_host || !settings.smtp_from_address) return 'warning'
|
||||
return 'pending'
|
||||
})
|
||||
|
||||
const smtpMessage = computed(() => {
|
||||
if (!settings.smtp_enabled) return 'Disabled'
|
||||
if (!settings.smtp_host) return 'SMTP host not configured'
|
||||
if (!settings.smtp_from_address) return 'From address not configured'
|
||||
return 'Configured - use test button to verify'
|
||||
})
|
||||
|
||||
const canTestEmail = computed(() => {
|
||||
return settings.smtp_host && settings.smtp_from_address && settings.alert_recipients
|
||||
})
|
||||
|
||||
// SAML status
|
||||
const samlStatus = computed(() => {
|
||||
if (!settings.saml_enabled) return 'inactive'
|
||||
if (!settings.saml_idp_metadata_url || !settings.saml_entity_id) return 'warning'
|
||||
return 'pending'
|
||||
})
|
||||
|
||||
const samlMessage = computed(() => {
|
||||
if (!settings.saml_enabled) return 'Disabled - using local authentication only'
|
||||
if (!settings.saml_idp_metadata_url) return 'IdP metadata URL not configured'
|
||||
if (!settings.saml_entity_id) return 'Entity ID not configured'
|
||||
return 'Configured - SAML login available'
|
||||
})
|
||||
|
||||
async function loadSettings() {
|
||||
try {
|
||||
loading.value = true
|
||||
const { data } = await settingsApi.list()
|
||||
|
||||
for (const setting of data.data) {
|
||||
if (setting.key in settings) {
|
||||
settings[setting.key] = setting.value
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
error.value = 'Failed to load settings'
|
||||
console.error(e)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function toggleSetting(key) {
|
||||
const newValue = !settings[key]
|
||||
await saveSetting(key, newValue)
|
||||
}
|
||||
|
||||
async function saveSetting(key, value) {
|
||||
try {
|
||||
saving.value = true
|
||||
error.value = ''
|
||||
success.value = ''
|
||||
|
||||
await settingsApi.update(key, value)
|
||||
settings[key] = value
|
||||
|
||||
success.value = 'Setting saved'
|
||||
setTimeout(() => { success.value = '' }, 2000)
|
||||
} catch (e) {
|
||||
error.value = e.response?.data?.message || 'Failed to save setting'
|
||||
console.error(e)
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function testEmail() {
|
||||
// TODO: Implement test email endpoint
|
||||
testingEmail.value = true
|
||||
error.value = ''
|
||||
success.value = ''
|
||||
|
||||
try {
|
||||
// await settingsApi.testEmail()
|
||||
success.value = 'Test email feature coming soon'
|
||||
} catch (e) {
|
||||
error.value = e.response?.data?.message || 'Failed to send test email'
|
||||
} finally {
|
||||
testingEmail.value = false
|
||||
setTimeout(() => { success.value = '' }, 3000)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(loadSettings)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.settings-sections {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.section-card {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: 1.1rem;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.setting-group {
|
||||
border-top: 1px solid var(--border);
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.setting-group h3 {
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: 1rem;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.setting-description {
|
||||
color: var(--text-light);
|
||||
font-size: 0.9rem;
|
||||
margin: 0 0 1rem 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.settings-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.setting-row {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.setting-row.full-width {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.setting-row label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.setting-row label span {
|
||||
color: var(--text);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.setting-row input {
|
||||
padding: 0.5rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-size: 1rem;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.setting-row input[type="number"] {
|
||||
max-width: 120px;
|
||||
}
|
||||
|
||||
.setting-row input:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.input-hint {
|
||||
color: var(--text-light);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.toggle-label {
|
||||
flex-direction: row !important;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
position: relative;
|
||||
width: 50px;
|
||||
height: 26px;
|
||||
border-radius: 13px;
|
||||
border: none;
|
||||
background: var(--secondary);
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.toggle-btn.active {
|
||||
background: var(--success);
|
||||
}
|
||||
|
||||
.toggle-slider {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.toggle-btn.active .toggle-slider {
|
||||
transform: translateX(24px);
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem;
|
||||
background: var(--bg);
|
||||
border-radius: 4px;
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-light);
|
||||
max-width: 400px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.status-dot.inactive {
|
||||
background: var(--secondary);
|
||||
}
|
||||
|
||||
.status-dot.warning {
|
||||
background: var(--warning);
|
||||
}
|
||||
|
||||
.status-dot.pending {
|
||||
background: var(--primary);
|
||||
}
|
||||
|
||||
.status-dot.success {
|
||||
background: var(--success);
|
||||
}
|
||||
|
||||
.test-btn {
|
||||
padding: 0.5rem 1rem;
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.test-btn:hover:not(:disabled) {
|
||||
background: var(--primary-dark);
|
||||
}
|
||||
|
||||
.test-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
margin-top: 1rem;
|
||||
padding: 0.75rem;
|
||||
background: var(--danger);
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.success-message {
|
||||
margin-top: 1rem;
|
||||
padding: 0.75rem;
|
||||
background: var(--success);
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.view-logs-link {
|
||||
display: inline-block;
|
||||
margin-top: 0.5rem;
|
||||
color: var(--link);
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.view-logs-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.toggle-hint {
|
||||
display: block;
|
||||
margin-top: -0.5rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
</style>
|
||||
745
frontend/src/views/settings/UsersList.vue
Normal file
745
frontend/src/views/settings/UsersList.vue
Normal file
@@ -0,0 +1,745 @@
|
||||
<template>
|
||||
<div class="page-header">
|
||||
<h1>User Management</h1>
|
||||
<button class="btn-primary" @click="showCreateModal = true">Add User</button>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="table-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Username</th>
|
||||
<th>Email</th>
|
||||
<th>Name</th>
|
||||
<th>Roles</th>
|
||||
<th>Status</th>
|
||||
<th>Last Login</th>
|
||||
<th class="actions">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-if="loading">
|
||||
<td colspan="7" class="loading">Loading...</td>
|
||||
</tr>
|
||||
<tr v-else-if="!users.length">
|
||||
<td colspan="7" class="empty">No users found</td>
|
||||
</tr>
|
||||
<tr v-for="user in users" :key="user.userid">
|
||||
<td>{{ user.username }}</td>
|
||||
<td>{{ user.email }}</td>
|
||||
<td>{{ [user.firstname, user.lastname].filter(Boolean).join(' ') || '-' }}</td>
|
||||
<td>
|
||||
<span
|
||||
v-for="role in user.roles"
|
||||
:key="role.roleid"
|
||||
class="badge"
|
||||
:class="role.rolename === 'admin' ? 'badge-primary' : 'badge-secondary'"
|
||||
>
|
||||
{{ role.rolename }}
|
||||
</span>
|
||||
<span v-if="!user.roles.length" class="text-muted">None</span>
|
||||
</td>
|
||||
<td>
|
||||
<span v-if="user.islocked" class="badge badge-danger">Locked</span>
|
||||
<span v-else-if="!user.isactive" class="badge badge-warning">Inactive</span>
|
||||
<span v-else class="badge badge-success">Active</span>
|
||||
</td>
|
||||
<td>{{ formatDate(user.lastlogindate) }}</td>
|
||||
<td class="actions">
|
||||
<button class="btn-sm" @click="editUser(user)">Edit</button>
|
||||
<button
|
||||
class="btn-sm btn-danger"
|
||||
@click="confirmDelete(user)"
|
||||
:disabled="user.userid === currentUserId"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Roles Section -->
|
||||
<div class="page-header" style="margin-top: 2rem">
|
||||
<h2>Roles</h2>
|
||||
<button class="btn-secondary" @click="showRoleModal = true">Add Role</button>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="table-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Role Name</th>
|
||||
<th>Description</th>
|
||||
<th>Permissions</th>
|
||||
<th>Users</th>
|
||||
<th class="actions">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="role in roles" :key="role.roleid">
|
||||
<td>
|
||||
<span class="badge" :class="role.rolename === 'admin' ? 'badge-primary' : 'badge-secondary'">
|
||||
{{ role.rolename }}
|
||||
</span>
|
||||
</td>
|
||||
<td>{{ role.description || '-' }}</td>
|
||||
<td>
|
||||
<span v-if="role.isadmin" class="text-muted">All permissions</span>
|
||||
<span v-else-if="role.permissions?.length">{{ role.permissions.length }} permissions</span>
|
||||
<span v-else class="text-muted">None</span>
|
||||
</td>
|
||||
<td>{{ role.usercount }}</td>
|
||||
<td class="actions">
|
||||
<button class="btn-sm" @click="editRole(role)">Edit</button>
|
||||
<button
|
||||
class="btn-sm btn-danger"
|
||||
@click="confirmDeleteRole(role)"
|
||||
:disabled="role.rolename === 'admin' || role.usercount > 0"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- User Modal -->
|
||||
<div v-if="showCreateModal || editingUser" class="modal-overlay" @click.self="closeUserModal">
|
||||
<div class="modal">
|
||||
<div class="modal-header">
|
||||
<h3>{{ editingUser ? 'Edit User' : 'Create User' }}</h3>
|
||||
<button class="close-btn" @click="closeUserModal">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form @submit.prevent="saveUser">
|
||||
<div class="form-group">
|
||||
<label>Username</label>
|
||||
<input
|
||||
type="text"
|
||||
v-model="userForm.username"
|
||||
required
|
||||
:disabled="!!editingUser"
|
||||
placeholder="username"
|
||||
>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Email</label>
|
||||
<input type="email" v-model="userForm.email" required placeholder="user@example.com">
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>First Name</label>
|
||||
<input type="text" v-model="userForm.firstname" placeholder="John">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Last Name</label>
|
||||
<input type="text" v-model="userForm.lastname" placeholder="Doe">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>{{ editingUser ? 'New Password (leave blank to keep current)' : 'Password' }}</label>
|
||||
<input
|
||||
type="password"
|
||||
v-model="userForm.password"
|
||||
:required="!editingUser"
|
||||
placeholder="********"
|
||||
>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Roles</label>
|
||||
<div class="checkbox-group">
|
||||
<label v-for="role in roles" :key="role.roleid" class="checkbox-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
:value="role.roleid"
|
||||
v-model="userForm.roles"
|
||||
>
|
||||
{{ role.rolename }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" v-if="editingUser">
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" v-model="userForm.isactive">
|
||||
Account Active
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group" v-if="editingUser && editingUser.islocked">
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" v-model="userForm.unlock">
|
||||
Unlock Account
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="button" class="btn-secondary" @click="closeUserModal">Cancel</button>
|
||||
<button type="submit" class="btn-primary" :disabled="saving">
|
||||
{{ saving ? 'Saving...' : (editingUser ? 'Update' : 'Create') }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Role Modal -->
|
||||
<div v-if="showRoleModal || editingRole" class="modal-overlay" @click.self="closeRoleModal">
|
||||
<div class="modal modal-lg">
|
||||
<div class="modal-header">
|
||||
<h3>{{ editingRole ? 'Edit Role' : 'Create Role' }}</h3>
|
||||
<button class="close-btn" @click="closeRoleModal">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form @submit.prevent="saveRole">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label>Role Name</label>
|
||||
<input
|
||||
type="text"
|
||||
v-model="roleForm.rolename"
|
||||
required
|
||||
:disabled="!!editingRole"
|
||||
placeholder="rolename"
|
||||
>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Description</label>
|
||||
<input type="text" v-model="roleForm.description" placeholder="Role description">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group" v-if="!editingRole?.isadmin">
|
||||
<label>Permissions</label>
|
||||
<p class="text-muted" style="font-size: 0.85rem; margin: 0 0 0.5rem 0">
|
||||
Select which actions this role can perform
|
||||
</p>
|
||||
<div class="permissions-grid">
|
||||
<div v-for="(perms, category) in permissionsGrouped" :key="category" class="permission-category">
|
||||
<div class="category-header">
|
||||
<label class="checkbox-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
:checked="isCategoryFullySelected(category)"
|
||||
:indeterminate="isCategoryPartiallySelected(category)"
|
||||
@change="toggleCategory(category, $event.target.checked)"
|
||||
>
|
||||
<strong>{{ formatCategory(category) }}</strong>
|
||||
</label>
|
||||
</div>
|
||||
<div class="category-perms">
|
||||
<label v-for="p in perms" :key="p.name" class="checkbox-label perm-item">
|
||||
<input
|
||||
type="checkbox"
|
||||
:value="p.name"
|
||||
v-model="roleForm.permissions"
|
||||
>
|
||||
{{ p.description }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="form-group">
|
||||
<label>Permissions</label>
|
||||
<p class="text-muted">Admin role has all permissions by default</p>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="button" class="btn-secondary" @click="closeRoleModal">Cancel</button>
|
||||
<button type="submit" class="btn-primary" :disabled="saving">
|
||||
{{ saving ? 'Saving...' : (editingRole ? 'Update' : 'Create') }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete Confirmation -->
|
||||
<div v-if="deletingUser" class="modal-overlay" @click.self="deletingUser = null">
|
||||
<div class="modal modal-sm">
|
||||
<div class="modal-header">
|
||||
<h3>Delete User</h3>
|
||||
<button class="close-btn" @click="deletingUser = null">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Are you sure you want to delete user <strong>{{ deletingUser.username }}</strong>?</p>
|
||||
<p class="text-muted">This action cannot be undone.</p>
|
||||
<div class="form-actions">
|
||||
<button class="btn-secondary" @click="deletingUser = null">Cancel</button>
|
||||
<button class="btn-danger" @click="deleteUser" :disabled="saving">
|
||||
{{ saving ? 'Deleting...' : 'Delete' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="error" class="error-toast">{{ error }}</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { usersApi } from '../../api'
|
||||
import { useAuthStore } from '../../stores/auth'
|
||||
|
||||
const authStore = useAuthStore()
|
||||
const currentUserId = authStore.user?.userid
|
||||
|
||||
const users = ref([])
|
||||
const roles = ref([])
|
||||
const permissions = ref([])
|
||||
const permissionsGrouped = ref({})
|
||||
const loading = ref(true)
|
||||
const saving = ref(false)
|
||||
const error = ref('')
|
||||
|
||||
// Modals
|
||||
const showCreateModal = ref(false)
|
||||
const showRoleModal = ref(false)
|
||||
const editingUser = ref(null)
|
||||
const editingRole = ref(null)
|
||||
const deletingUser = ref(null)
|
||||
|
||||
// Forms
|
||||
const userForm = reactive({
|
||||
username: '',
|
||||
email: '',
|
||||
firstname: '',
|
||||
lastname: '',
|
||||
password: '',
|
||||
roles: [],
|
||||
isactive: true,
|
||||
unlock: false
|
||||
})
|
||||
|
||||
const roleForm = reactive({
|
||||
rolename: '',
|
||||
description: '',
|
||||
permissions: []
|
||||
})
|
||||
|
||||
async function loadData() {
|
||||
loading.value = true
|
||||
try {
|
||||
const [usersRes, rolesRes, permsRes] = await Promise.all([
|
||||
usersApi.list(),
|
||||
usersApi.roles.list(),
|
||||
usersApi.permissions.list()
|
||||
])
|
||||
users.value = usersRes.data.data
|
||||
roles.value = rolesRes.data.data
|
||||
permissions.value = permsRes.data.data.permissions
|
||||
permissionsGrouped.value = permsRes.data.data.grouped
|
||||
} catch (e) {
|
||||
error.value = 'Failed to load users'
|
||||
setTimeout(() => error.value = '', 3000)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function formatCategory(cat) {
|
||||
return cat.charAt(0).toUpperCase() + cat.slice(1)
|
||||
}
|
||||
|
||||
function isCategoryFullySelected(category) {
|
||||
const catPerms = permissionsGrouped.value[category] || []
|
||||
return catPerms.length > 0 && catPerms.every(p => roleForm.permissions.includes(p.name))
|
||||
}
|
||||
|
||||
function isCategoryPartiallySelected(category) {
|
||||
const catPerms = permissionsGrouped.value[category] || []
|
||||
const selected = catPerms.filter(p => roleForm.permissions.includes(p.name))
|
||||
return selected.length > 0 && selected.length < catPerms.length
|
||||
}
|
||||
|
||||
function toggleCategory(category, checked) {
|
||||
const catPerms = permissionsGrouped.value[category] || []
|
||||
const permNames = catPerms.map(p => p.name)
|
||||
|
||||
if (checked) {
|
||||
// Add all perms from this category
|
||||
for (const name of permNames) {
|
||||
if (!roleForm.permissions.includes(name)) {
|
||||
roleForm.permissions.push(name)
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// Remove all perms from this category
|
||||
roleForm.permissions = roleForm.permissions.filter(p => !permNames.includes(p))
|
||||
}
|
||||
}
|
||||
|
||||
function formatDate(iso) {
|
||||
if (!iso) return 'Never'
|
||||
return new Date(iso).toLocaleDateString()
|
||||
}
|
||||
|
||||
function editUser(user) {
|
||||
editingUser.value = user
|
||||
userForm.username = user.username
|
||||
userForm.email = user.email
|
||||
userForm.firstname = user.firstname || ''
|
||||
userForm.lastname = user.lastname || ''
|
||||
userForm.password = ''
|
||||
userForm.roles = user.roles.map(r => r.roleid)
|
||||
userForm.isactive = user.isactive
|
||||
userForm.unlock = false
|
||||
}
|
||||
|
||||
function closeUserModal() {
|
||||
showCreateModal.value = false
|
||||
editingUser.value = null
|
||||
Object.assign(userForm, {
|
||||
username: '', email: '', firstname: '', lastname: '',
|
||||
password: '', roles: [], isactive: true, unlock: false
|
||||
})
|
||||
}
|
||||
|
||||
async function saveUser() {
|
||||
saving.value = true
|
||||
error.value = ''
|
||||
try {
|
||||
const data = {
|
||||
email: userForm.email,
|
||||
firstname: userForm.firstname || null,
|
||||
lastname: userForm.lastname || null,
|
||||
roles: userForm.roles
|
||||
}
|
||||
|
||||
if (editingUser.value) {
|
||||
data.isactive = userForm.isactive
|
||||
if (userForm.password) data.password = userForm.password
|
||||
if (userForm.unlock) data.unlock = true
|
||||
await usersApi.update(editingUser.value.userid, data)
|
||||
} else {
|
||||
data.username = userForm.username
|
||||
data.password = userForm.password
|
||||
await usersApi.create(data)
|
||||
}
|
||||
|
||||
closeUserModal()
|
||||
await loadData()
|
||||
} catch (e) {
|
||||
error.value = e.response?.data?.message || 'Failed to save user'
|
||||
setTimeout(() => error.value = '', 3000)
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function confirmDelete(user) {
|
||||
deletingUser.value = user
|
||||
}
|
||||
|
||||
async function deleteUser() {
|
||||
saving.value = true
|
||||
try {
|
||||
await usersApi.delete(deletingUser.value.userid)
|
||||
deletingUser.value = null
|
||||
await loadData()
|
||||
} catch (e) {
|
||||
error.value = e.response?.data?.message || 'Failed to delete user'
|
||||
setTimeout(() => error.value = '', 3000)
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// Roles
|
||||
function editRole(role) {
|
||||
editingRole.value = role
|
||||
roleForm.rolename = role.rolename
|
||||
roleForm.description = role.description || ''
|
||||
roleForm.permissions = role.permissions ? [...role.permissions] : []
|
||||
}
|
||||
|
||||
function closeRoleModal() {
|
||||
showRoleModal.value = false
|
||||
editingRole.value = null
|
||||
roleForm.rolename = ''
|
||||
roleForm.description = ''
|
||||
roleForm.permissions = []
|
||||
}
|
||||
|
||||
async function saveRole() {
|
||||
saving.value = true
|
||||
error.value = ''
|
||||
try {
|
||||
const data = {
|
||||
description: roleForm.description,
|
||||
permissions: roleForm.permissions
|
||||
}
|
||||
|
||||
if (editingRole.value) {
|
||||
await usersApi.roles.update(editingRole.value.roleid, data)
|
||||
} else {
|
||||
data.rolename = roleForm.rolename
|
||||
await usersApi.roles.create(data)
|
||||
}
|
||||
closeRoleModal()
|
||||
await loadData()
|
||||
} catch (e) {
|
||||
error.value = e.response?.data?.message || 'Failed to save role'
|
||||
setTimeout(() => error.value = '', 3000)
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function confirmDeleteRole(role) {
|
||||
if (confirm(`Delete role "${role.rolename}"?`)) {
|
||||
deleteRole(role)
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteRole(role) {
|
||||
try {
|
||||
await usersApi.roles.delete(role.roleid)
|
||||
await loadData()
|
||||
} catch (e) {
|
||||
error.value = e.response?.data?.message || 'Failed to delete role'
|
||||
setTimeout(() => error.value = '', 3000)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(loadData)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.8rem;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.badge-primary { background: var(--primary); color: white; }
|
||||
.badge-secondary { background: var(--secondary); color: white; }
|
||||
.badge-success { background: var(--success); color: white; }
|
||||
.badge-warning { background: var(--warning); color: #000; }
|
||||
.badge-danger { background: var(--danger); color: white; }
|
||||
|
||||
.text-muted { color: var(--text-light); }
|
||||
|
||||
.btn-primary {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-primary:hover { background: var(--primary-dark); }
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--secondary);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: var(--danger);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.85rem;
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.btn-sm:hover { background: var(--border); }
|
||||
.btn-sm.btn-danger { background: var(--danger); color: white; border-color: var(--danger); }
|
||||
.btn-sm:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
|
||||
.actions {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.actions button { margin-right: 0.25rem; }
|
||||
|
||||
.loading, .empty {
|
||||
text-align: center;
|
||||
color: var(--text-light);
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
/* Modal */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
width: 500px;
|
||||
max-width: 90vw;
|
||||
max-height: 90vh;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.modal-sm { width: 400px; }
|
||||
.modal-lg { width: 700px; }
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.modal-header h3 { margin: 0; }
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
color: var(--text-light);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 1rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 0.25rem;
|
||||
font-size: 0.9rem;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.checkbox-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.checkbox-label input[type="checkbox"] {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.5rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.error-toast {
|
||||
position: fixed;
|
||||
bottom: 1rem;
|
||||
right: 1rem;
|
||||
background: var(--danger);
|
||||
color: white;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 4px;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
/* Permissions grid */
|
||||
.permissions-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
.permission-category {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.category-header {
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding-bottom: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.category-perms {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.perm-item {
|
||||
font-size: 0.85rem;
|
||||
padding: 0.25rem 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user