feat: enhance Role and Settings management UI with improved styling and hover effects
This commit is contained in:
parent
9effaeba0a
commit
b417fdbf4c
@ -112,7 +112,7 @@
|
||||
<div
|
||||
v-for="module in modules"
|
||||
:key="module.id"
|
||||
class="matrix-row"
|
||||
class="matrix-row hover-row"
|
||||
>
|
||||
<div class="module-cell">
|
||||
<i :class="module.icon"></i>
|
||||
@ -618,7 +618,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.matrix-header {
|
||||
background: var(--p-surface-100);
|
||||
background: var(--p-content-background);
|
||||
font-weight: 600;
|
||||
border-bottom: 2px solid var(--p-surface-border);
|
||||
|
||||
@ -645,10 +645,6 @@ onMounted(() => {
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid var(--p-surface-border);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--p-surface-50);
|
||||
}
|
||||
}
|
||||
|
||||
.module-cell,
|
||||
|
||||
@ -1,81 +1,90 @@
|
||||
<template>
|
||||
<div class="settings-management">
|
||||
<h1>Systemeinstellungen</h1>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h2>Sicherheitseinstellungen</h2>
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<div class="font-semibold text-xl">Systemeinstellungen</div>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<form @submit.prevent="saveSettings" v-if="!loading">
|
||||
<!-- Password Minimum Length -->
|
||||
<div class="form-group">
|
||||
<label for="passwordMinLength">
|
||||
<i class="pi pi-lock"></i>
|
||||
Mindestlänge für Passwörter
|
||||
</label>
|
||||
<InputNumber
|
||||
id="passwordMinLength"
|
||||
v-model="settings.passwordMinLength"
|
||||
:min="4"
|
||||
:max="128"
|
||||
:showButtons="true"
|
||||
suffix=" Zeichen"
|
||||
class="w-full"
|
||||
/>
|
||||
<small class="form-text">
|
||||
Legt die Mindestanzahl an Zeichen fest, die ein Passwort haben muss (4-128 Zeichen).
|
||||
</small>
|
||||
<Card class="mb-4">
|
||||
<template #title>
|
||||
<div class="flex items-center gap-2">
|
||||
<i class="pi pi-shield text-primary"></i>
|
||||
<span>Sicherheitseinstellungen</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #content>
|
||||
<form @submit.prevent="saveSettings" v-if="!loading">
|
||||
<!-- Password Minimum Length -->
|
||||
<div class="flex flex-col gap-4 mb-4">
|
||||
<div class="flex flex-col gap-2">
|
||||
<label for="passwordMinLength" class="font-medium">
|
||||
<i class="pi pi-lock mr-2"></i>
|
||||
Mindestlänge für Passwörter
|
||||
</label>
|
||||
<InputNumber
|
||||
id="passwordMinLength"
|
||||
v-model="settings.passwordMinLength"
|
||||
:min="4"
|
||||
:max="128"
|
||||
:showButtons="true"
|
||||
suffix=" Zeichen"
|
||||
class="w-full md:w-1/2"
|
||||
/>
|
||||
<small class="text-500">
|
||||
Legt die Mindestanzahl an Zeichen fest, die ein Passwort haben muss (4-128 Zeichen).
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<!-- Allow Password Login -->
|
||||
<div class="form-group">
|
||||
<div class="flex align-items-center">
|
||||
<Checkbox
|
||||
id="allowPasswordLogin"
|
||||
v-model="settings.allowPasswordLogin"
|
||||
:binary="true"
|
||||
/>
|
||||
<label for="allowPasswordLogin" class="ml-2 cursor-pointer">
|
||||
<i class="pi pi-sign-in"></i>
|
||||
Login mit E-Mail und Passwort erlauben
|
||||
</label>
|
||||
<!-- Allow Password Login -->
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<Checkbox
|
||||
id="allowPasswordLogin"
|
||||
v-model="settings.allowPasswordLogin"
|
||||
:binary="true"
|
||||
/>
|
||||
<label for="allowPasswordLogin" class="cursor-pointer font-medium">
|
||||
<i class="pi pi-sign-in mr-2"></i>
|
||||
Login mit E-Mail und Passwort erlauben
|
||||
</label>
|
||||
</div>
|
||||
<small class="text-500">
|
||||
Wenn deaktiviert, können sich Benutzer nur über alternative Methoden (z.B. OIDC) anmelden.
|
||||
</small>
|
||||
|
||||
<Message v-if="!settings.allowPasswordLogin" severity="warn" class="mt-2" :closable="false">
|
||||
<strong>Achtung:</strong> Stellen Sie sicher, dass mindestens eine alternative Login-Methode (z.B. OIDC)
|
||||
konfiguriert ist, bevor Sie den Passwort-Login deaktivieren.
|
||||
</Message>
|
||||
</div>
|
||||
</div>
|
||||
<small class="form-text">
|
||||
Wenn deaktiviert, können sich Benutzer nur über alternative Methoden (z.B. OIDC) anmelden.
|
||||
</small>
|
||||
|
||||
<Message v-if="!settings.allowPasswordLogin" severity="warn" class="mt-2" :closable="false">
|
||||
<strong>Achtung:</strong> Stellen Sie sicher, dass mindestens eine alternative Login-Methode (z.B. OIDC)
|
||||
konfiguriert ist, bevor Sie den Passwort-Login deaktivieren.
|
||||
</Message>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="flex gap-2 mt-4">
|
||||
<Button
|
||||
type="submit"
|
||||
label="Einstellungen speichern"
|
||||
icon="pi pi-check"
|
||||
:loading="saving"
|
||||
class="p-button-success"
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
label="Zurücksetzen"
|
||||
icon="pi pi-refresh"
|
||||
@click="loadSettings"
|
||||
:disabled="saving"
|
||||
class="p-button-secondary"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
<!-- Action Buttons -->
|
||||
<div class="flex gap-2 mt-4">
|
||||
<Button
|
||||
type="submit"
|
||||
label="Einstellungen speichern"
|
||||
icon="pi pi-check"
|
||||
:loading="saving"
|
||||
severity="success"
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
label="Zurücksetzen"
|
||||
icon="pi pi-refresh"
|
||||
@click="loadSettings"
|
||||
:disabled="saving"
|
||||
outlined
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div v-else class="text-center py-4">
|
||||
<ProgressSpinner />
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="text-center py-4">
|
||||
<ProgressSpinner />
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- Success Toast -->
|
||||
@ -86,6 +95,7 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useToast } from 'primevue/usetoast'
|
||||
import Card from 'primevue/card'
|
||||
import InputNumber from 'primevue/inputnumber'
|
||||
import Checkbox from 'primevue/checkbox'
|
||||
import Button from 'primevue/button'
|
||||
@ -184,81 +194,3 @@ onMounted(() => {
|
||||
loadSettings()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.settings-management {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #333;
|
||||
margin-bottom: 2rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.card-header h2 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.form-group label i {
|
||||
margin-right: 0.5rem;
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
.form-text {
|
||||
display: block;
|
||||
margin-top: 0.5rem;
|
||||
color: #6c757d;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.settings-management {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -30,3 +30,21 @@
|
||||
border-color: var(--color-gray-200, currentcolor);
|
||||
}
|
||||
}
|
||||
|
||||
/* Global hover utility for light and dark mode compatibility */
|
||||
@layer utilities {
|
||||
.hover-row:hover {
|
||||
background-color: rgba(128, 128, 128, 0.1);
|
||||
transition: background-color 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.hover-item:hover {
|
||||
background-color: rgba(128, 128, 128, 0.08);
|
||||
transition: background-color 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.hover-card:hover {
|
||||
background-color: rgba(128, 128, 128, 0.05);
|
||||
transition: background-color 0.15s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user