704 lines
52 KiB
HTML
704 lines
52 KiB
HTML
<!DOCTYPE html>
|
|
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
|
|
xmlns:h="http://xmlns.jcp.org/jsf/html"
|
|
xmlns:f="http://xmlns.jcp.org/jsf/core"
|
|
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
|
|
xmlns:p="http://primefaces.org/ui"
|
|
template="/templates/main-template.xhtml">
|
|
|
|
<ui:param name="page" value="#{personnelBean}"/>
|
|
<ui:define name="title">Paramètres Compte - UnionFlow</ui:define>
|
|
|
|
<ui:define name="content">
|
|
<div class="ui-fluid">
|
|
|
|
<!-- En-tête -->
|
|
<div class="grid mb-4">
|
|
<div class="col-12">
|
|
<div class="surface-card border-round p-4">
|
|
<div class="flex align-items-center justify-content-between mb-4">
|
|
<div>
|
|
<h2 class="text-900 font-bold text-4xl mb-2">
|
|
<i class="pi pi-shield text-red-500 mr-3"></i>
|
|
Paramètres de Compte
|
|
</h2>
|
|
<p class="text-600 text-lg mb-0">
|
|
Gérez la sécurité, la confidentialité et les paramètres avancés de votre compte
|
|
</p>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<p:commandButton value="Sauvegarder"
|
|
styleClass="p-button-primary"
|
|
icon="pi pi-save" />
|
|
<p:commandButton value="Exporter mes données"
|
|
styleClass="p-button-outlined"
|
|
icon="pi pi-download" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Statut sécurité -->
|
|
<div class="surface-green-50 border-left-3 border-green-500 p-4">
|
|
<div class="flex align-items-center gap-3">
|
|
<i class="pi pi-shield text-green-600 text-2xl"></i>
|
|
<div>
|
|
<h6 class="text-green-800 font-semibold mb-1">Compte sécurisé</h6>
|
|
<p class="text-green-700 text-sm mb-0">
|
|
Votre compte respecte toutes les bonnes pratiques de sécurité. Score: #{parametresBean.scoreSecurite}/100
|
|
</p>
|
|
</div>
|
|
<div class="ml-auto">
|
|
<p:tag value="EXCELLENT" severity="success" styleClass="text-sm" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Onglets de paramètres -->
|
|
<div class="grid mb-4">
|
|
<div class="col-12">
|
|
<div class="surface-card border-round p-4">
|
|
<p:tabView styleClass="w-full">
|
|
<!-- Onglet Sécurité -->
|
|
<p:tab title="Sécurité">
|
|
<div class="grid">
|
|
<!-- Mot de passe -->
|
|
<div class="col-12 lg:col-6">
|
|
<div class="surface-100 border-round p-4 h-full">
|
|
<h6 class="text-900 font-semibold mb-4">
|
|
<i class="pi pi-key text-blue-500 mr-2"></i>
|
|
Mot de Passe
|
|
</h6>
|
|
|
|
<h:form id="passwordForm">
|
|
<div class="field">
|
|
<label for="currentPassword" class="block text-900 font-semibold mb-2">Mot de passe actuel *</label>
|
|
<p:password id="currentPassword"
|
|
feedback="false"
|
|
toggleMask="true"
|
|
placeholder="Saisissez votre mot de passe actuel"
|
|
styleClass="w-full" />
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="newPassword" class="block text-900 font-semibold mb-2">Nouveau mot de passe *</label>
|
|
<p:password id="newPassword"
|
|
feedback="true"
|
|
toggleMask="true"
|
|
placeholder="Minimum 8 caractères"
|
|
styleClass="w-full" />
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="confirmPassword" class="block text-900 font-semibold mb-2">Confirmer le mot de passe *</label>
|
|
<p:password id="confirmPassword"
|
|
feedback="false"
|
|
toggleMask="true"
|
|
placeholder="Confirmez votre nouveau mot de passe"
|
|
styleClass="w-full" />
|
|
</div>
|
|
|
|
<div class="surface-blue-50 border-round p-3 mb-3">
|
|
<h6 class="text-blue-800 font-semibold mb-2">Critères de sécurité</h6>
|
|
<ul class="list-none p-0 m-0">
|
|
<li class="flex align-items-center mb-1">
|
|
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
|
<span class="text-blue-700 text-sm">Au moins 8 caractères</span>
|
|
</li>
|
|
<li class="flex align-items-center mb-1">
|
|
<i class="pi pi-times-circle text-red-500 mr-2"></i>
|
|
<span class="text-blue-700 text-sm">Une majuscule</span>
|
|
</li>
|
|
<li class="flex align-items-center mb-1">
|
|
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
|
<span class="text-blue-700 text-sm">Un chiffre</span>
|
|
</li>
|
|
<li class="flex align-items-center">
|
|
<i class="pi pi-times-circle text-red-500 mr-2"></i>
|
|
<span class="text-blue-700 text-sm">Un caractère spécial</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<p:commandButton value="Modifier le mot de passe"
|
|
styleClass="p-button-primary w-full"
|
|
icon="pi pi-save" />
|
|
</h:form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Authentification à deux facteurs -->
|
|
<div class="col-12 lg:col-6">
|
|
<div class="surface-100 border-round p-4 h-full">
|
|
<h6 class="text-900 font-semibold mb-4">
|
|
<i class="pi pi-mobile text-green-500 mr-2"></i>
|
|
Authentification à Deux Facteurs (2FA)
|
|
</h6>
|
|
|
|
<div class="surface-green-50 border-left-3 border-green-500 p-3 mb-4">
|
|
<div class="flex align-items-center justify-content-between">
|
|
<div>
|
|
<h6 class="text-green-800 font-semibold mb-1">2FA Activée</h6>
|
|
<p class="text-green-700 text-sm mb-0">Votre compte est protégé par l'authentification à deux facteurs</p>
|
|
</div>
|
|
<p:inputSwitch value="true" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<h6 class="text-900 font-semibold mb-2">Méthode configurée</h6>
|
|
<div class="surface-white border-round p-3 border-1 border-200">
|
|
<div class="flex align-items-center gap-3">
|
|
<i class="pi pi-mobile text-blue-500 text-xl"></i>
|
|
<div>
|
|
<div class="text-900 font-semibold text-sm">Application Authenticator</div>
|
|
<div class="text-600 text-xs">Google Authenticator, Authy, etc.</div>
|
|
</div>
|
|
<p:tag value="ACTIVE" severity="success" styleClass="text-xs ml-auto" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid gap-2">
|
|
<div class="col-6">
|
|
<p:commandButton value="Reconfigurer"
|
|
styleClass="p-button-outlined w-full"
|
|
icon="pi pi-cog" />
|
|
</div>
|
|
<div class="col-6">
|
|
<p:commandButton value="Codes de secours"
|
|
styleClass="p-button-secondary w-full"
|
|
icon="pi pi-key" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sessions actives -->
|
|
<div class="col-12">
|
|
<div class="surface-100 border-round p-4">
|
|
<h6 class="text-900 font-semibold mb-4">
|
|
<i class="pi pi-desktop text-purple-500 mr-2"></i>
|
|
Sessions Actives
|
|
</h6>
|
|
|
|
<!-- Session actuelle -->
|
|
<div class="surface-white border-round p-4 mb-3 border-2 border-primary">
|
|
<div class="flex align-items-center justify-content-between">
|
|
<div class="flex align-items-center gap-3">
|
|
<i class="pi pi-desktop text-primary text-2xl"></i>
|
|
<div>
|
|
<h6 class="text-900 font-semibold mb-1">Session Actuelle</h6>
|
|
<div class="text-600 text-sm mb-1">Chrome 120.0 sur Windows 11</div>
|
|
<div class="text-500 text-xs">IP: 192.168.1.45 • Dakar, Sénégal</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<p:tag value="ACTIVE" severity="success" styleClass="text-xs mb-2" />
|
|
<div class="text-600 text-xs">Connecté depuis 2h</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Autres sessions -->
|
|
<div class="surface-white border-round p-4 mb-3">
|
|
<div class="flex align-items-center justify-content-between">
|
|
<div class="flex align-items-center gap-3">
|
|
<i class="pi pi-mobile text-blue-500 text-2xl"></i>
|
|
<div>
|
|
<h6 class="text-900 font-semibold mb-1">iPhone 14</h6>
|
|
<div class="text-600 text-sm mb-1">Safari Mobile</div>
|
|
<div class="text-500 text-xs">IP: 41.82.45.123 • Dernière activité: il y a 3h</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<p:commandButton value="Déconnecter"
|
|
styleClass="p-button-outlined p-button-sm"
|
|
icon="pi pi-sign-out" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="surface-white border-round p-4">
|
|
<div class="flex align-items-center justify-content-between">
|
|
<div class="flex align-items-center gap-3">
|
|
<i class="pi pi-tablet text-green-500 text-2xl"></i>
|
|
<div>
|
|
<h6 class="text-900 font-semibold mb-1">iPad Pro</h6>
|
|
<div class="text-600 text-sm mb-1">Safari</div>
|
|
<div class="text-500 text-xs">IP: 197.25.78.156 • Dernière activité: il y a 1 jour</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<p:commandButton value="Déconnecter"
|
|
styleClass="p-button-outlined p-button-sm"
|
|
icon="pi pi-sign-out" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center mt-4">
|
|
<p:commandButton value="Déconnecter toutes les autres sessions"
|
|
styleClass="p-button-danger"
|
|
icon="pi pi-power-off" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</p:tab>
|
|
|
|
<!-- Onglet Confidentialité -->
|
|
<p:tab title="Confidentialité">
|
|
<div class="grid">
|
|
<!-- Visibilité du profil -->
|
|
<div class="col-12 lg:col-6">
|
|
<div class="surface-100 border-round p-4 h-full">
|
|
<h6 class="text-900 font-semibold mb-4">
|
|
<i class="pi pi-eye text-blue-500 mr-2"></i>
|
|
Visibilité du Profil
|
|
</h6>
|
|
|
|
<h:form id="visibiliteForm">
|
|
<div class="field-radiobutton mb-4">
|
|
<p:radioButton id="visiPublic" name="visibilite" value="public" />
|
|
<label for="visiPublic" class="ml-2">
|
|
<div class="surface-white border-round p-3 cursor-pointer border-1 border-200">
|
|
<h6 class="text-900 font-semibold mb-1">Public</h6>
|
|
<p class="text-600 text-sm mb-0">
|
|
Votre profil est visible par tous les membres de l'association
|
|
</p>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="field-radiobutton mb-4">
|
|
<p:radioButton id="visiLimite" name="visibilite" value="limite" />
|
|
<label for="visiLimite" class="ml-2">
|
|
<div class="surface-white border-round p-3 cursor-pointer border-1 border-200">
|
|
<h6 class="text-900 font-semibold mb-1">Limité</h6>
|
|
<p class="text-600 text-sm mb-0">
|
|
Visible uniquement par les administrateurs et organisateurs
|
|
</p>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="field-radiobutton">
|
|
<p:radioButton id="visiPrive" name="visibilite" value="prive" />
|
|
<label for="visiPrive" class="ml-2">
|
|
<div class="surface-white border-round p-3 cursor-pointer border-1 border-200">
|
|
<h6 class="text-900 font-semibold mb-1">Privé</h6>
|
|
<p class="text-600 text-sm mb-0">
|
|
Votre profil n'est visible que par vous-même
|
|
</p>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</h:form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Partage des données -->
|
|
<div class="col-12 lg:col-6">
|
|
<div class="surface-100 border-round p-4 h-full">
|
|
<h6 class="text-900 font-semibold mb-4">
|
|
<i class="pi pi-share-alt text-green-500 mr-2"></i>
|
|
Partage des Données
|
|
</h6>
|
|
|
|
<div class="field-checkbox mb-3">
|
|
<p:selectBooleanCheckbox id="shareEmail" value="true" />
|
|
<label for="shareEmail" class="ml-2">
|
|
<div class="text-900 font-semibold">Adresse email</div>
|
|
<div class="text-600 text-sm">Permettre aux autres membres de voir votre email</div>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="field-checkbox mb-3">
|
|
<p:selectBooleanCheckbox id="sharePhone" />
|
|
<label for="sharePhone" class="ml-2">
|
|
<div class="text-900 font-semibold">Numéro de téléphone</div>
|
|
<div class="text-600 text-sm">Afficher votre numéro dans l'annuaire</div>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="field-checkbox mb-3">
|
|
<p:selectBooleanCheckbox id="shareActivities" value="true" />
|
|
<label for="shareActivities" class="ml-2">
|
|
<div class="text-900 font-semibold">Activités publiques</div>
|
|
<div class="text-600 text-sm">Participation aux événements et formations</div>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="field-checkbox mb-3">
|
|
<p:selectBooleanCheckbox id="shareStats" />
|
|
<label for="shareStats" class="ml-2">
|
|
<div class="text-900 font-semibold">Statistiques anonymes</div>
|
|
<div class="text-600 text-sm">Contribuer aux statistiques générales</div>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="surface-orange-50 border-left-3 border-orange-500 p-3">
|
|
<h6 class="text-orange-800 font-semibold mb-1">
|
|
<i class="pi pi-info-circle mr-2"></i>Information
|
|
</h6>
|
|
<p class="text-orange-700 text-sm mb-0">
|
|
Ces paramètres n'affectent pas les données nécessaires au fonctionnement de l'association.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Données personnelles -->
|
|
<div class="col-12">
|
|
<div class="surface-100 border-round p-4">
|
|
<h6 class="text-900 font-semibold mb-4">
|
|
<i class="pi pi-database text-purple-500 mr-2"></i>
|
|
Gestion des Données Personnelles
|
|
</h6>
|
|
|
|
<div class="grid">
|
|
<div class="col-12 lg:col-4">
|
|
<div class="surface-white border-round p-4 text-center">
|
|
<i class="pi pi-download text-blue-500 text-3xl mb-3"></i>
|
|
<h6 class="text-900 font-semibold mb-2">Exporter mes données</h6>
|
|
<p class="text-600 text-sm mb-3">
|
|
Téléchargez toutes vos données personnelles au format JSON
|
|
</p>
|
|
<p:commandButton value="Télécharger"
|
|
styleClass="p-button-outlined w-full"
|
|
icon="pi pi-download" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 lg:col-4">
|
|
<div class="surface-white border-round p-4 text-center">
|
|
<i class="pi pi-refresh text-green-500 text-3xl mb-3"></i>
|
|
<h6 class="text-900 font-semibold mb-2">Actualiser le consentement</h6>
|
|
<p class="text-600 text-sm mb-3">
|
|
Revoir et mettre à jour vos consentements RGPD
|
|
</p>
|
|
<p:commandButton value="Actualiser"
|
|
styleClass="p-button-outlined w-full"
|
|
icon="pi pi-refresh" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 lg:col-4">
|
|
<div class="surface-white border-round p-4 text-center">
|
|
<i class="pi pi-trash text-red-500 text-3xl mb-3"></i>
|
|
<h6 class="text-900 font-semibold mb-2">Supprimer mon compte</h6>
|
|
<p class="text-600 text-sm mb-3">
|
|
Suppression définitive de toutes vos données
|
|
</p>
|
|
<p:commandButton value="Supprimer"
|
|
styleClass="p-button-danger w-full"
|
|
icon="pi pi-trash" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</p:tab>
|
|
|
|
<!-- Onglet Préférences -->
|
|
<p:tab title="Préférences">
|
|
<div class="grid">
|
|
<!-- Préférences de communication -->
|
|
<div class="col-12 lg:col-6">
|
|
<div class="surface-100 border-round p-4 h-full">
|
|
<h6 class="text-900 font-semibold mb-4">
|
|
<i class="pi pi-envelope text-blue-500 mr-2"></i>
|
|
Communications
|
|
</h6>
|
|
|
|
<div class="field-checkbox mb-3">
|
|
<p:selectBooleanCheckbox id="emailNewsletter" value="true" />
|
|
<label for="emailNewsletter" class="ml-2 text-900">Newsletter hebdomadaire</label>
|
|
</div>
|
|
|
|
<div class="field-checkbox mb-3">
|
|
<p:selectBooleanCheckbox id="emailEvents" value="true" />
|
|
<label for="emailEvents" class="ml-2 text-900">Notifications d'événements</label>
|
|
</div>
|
|
|
|
<div class="field-checkbox mb-3">
|
|
<p:selectBooleanCheckbox id="emailReminders" value="true" />
|
|
<label for="emailReminders" class="ml-2 text-900">Rappels de cotisations</label>
|
|
</div>
|
|
|
|
<div class="field-checkbox mb-3">
|
|
<p:selectBooleanCheckbox id="emailPromo" />
|
|
<label for="emailPromo" class="ml-2 text-900">Offres promotionnelles</label>
|
|
</div>
|
|
|
|
<div class="field-checkbox">
|
|
<p:selectBooleanCheckbox id="smsUrgent" />
|
|
<label for="smsUrgent" class="ml-2 text-900">SMS pour urgences uniquement</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Paramètres d'affichage -->
|
|
<div class="col-12 lg:col-6">
|
|
<div class="surface-100 border-round p-4 h-full">
|
|
<h6 class="text-900 font-semibold mb-4">
|
|
<i class="pi pi-desktop text-green-500 mr-2"></i>
|
|
Affichage
|
|
</h6>
|
|
|
|
<div class="field">
|
|
<label for="themeChoice" class="block text-900 font-semibold mb-2">Thème</label>
|
|
<p:selectOneMenu id="themeChoice" styleClass="w-full">
|
|
<f:selectItem itemLabel="Clair (par défaut)" itemValue="light" />
|
|
<f:selectItem itemLabel="Sombre" itemValue="dark" />
|
|
<f:selectItem itemLabel="Automatique" itemValue="auto" />
|
|
</p:selectOneMenu>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="languageChoice" class="block text-900 font-semibold mb-2">Langue</label>
|
|
<p:selectOneMenu id="languageChoice" styleClass="w-full">
|
|
<f:selectItem itemLabel="Français" itemValue="fr" />
|
|
<f:selectItem itemLabel="English" itemValue="en" />
|
|
<f:selectItem itemLabel="العربية" itemValue="ar" />
|
|
<f:selectItem itemLabel="Wolof" itemValue="wo" />
|
|
</p:selectOneMenu>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="timezoneChoice" class="block text-900 font-semibold mb-2">Fuseau horaire</label>
|
|
<p:selectOneMenu id="timezoneChoice" styleClass="w-full">
|
|
<f:selectItem itemLabel="GMT (Dakar, Casablanca)" itemValue="GMT" />
|
|
<f:selectItem itemLabel="GMT+1 (Paris, Madrid)" itemValue="CET" />
|
|
<f:selectItem itemLabel="GMT-5 (New York)" itemValue="EST" />
|
|
</p:selectOneMenu>
|
|
</div>
|
|
|
|
<div class="field-checkbox">
|
|
<p:selectBooleanCheckbox id="animationsEnabled" value="true" />
|
|
<label for="animationsEnabled" class="ml-2 text-900">Activer les animations</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sauvegarde et synchronisation -->
|
|
<div class="col-12">
|
|
<div class="surface-100 border-round p-4">
|
|
<h6 class="text-900 font-semibold mb-4">
|
|
<i class="pi pi-cloud text-blue-500 mr-2"></i>
|
|
Sauvegarde et Synchronisation
|
|
</h6>
|
|
|
|
<div class="grid">
|
|
<div class="col-12 lg:col-4">
|
|
<div class="surface-white border-round p-4">
|
|
<div class="flex align-items-center justify-content-between mb-3">
|
|
<h6 class="text-900 font-semibold mb-0">Sauvegarde automatique</h6>
|
|
<p:inputSwitch value="true" />
|
|
</div>
|
|
<p class="text-600 text-sm mb-2">
|
|
Sauvegarde quotidienne de vos préférences et données
|
|
</p>
|
|
<div class="text-500 text-xs">Dernière sauvegarde: il y a 2h</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 lg:col-4">
|
|
<div class="surface-white border-round p-4">
|
|
<div class="flex align-items-center justify-content-between mb-3">
|
|
<h6 class="text-900 font-semibold mb-0">Sync calendriers</h6>
|
|
<p:inputSwitch value="true" />
|
|
</div>
|
|
<p class="text-600 text-sm mb-2">
|
|
Synchronisation avec Google Calendar et Outlook
|
|
</p>
|
|
<div class="text-500 text-xs">2 calendriers connectés</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 lg:col-4">
|
|
<div class="surface-white border-round p-4">
|
|
<div class="flex align-items-center justify-content-between mb-3">
|
|
<h6 class="text-900 font-semibold mb-0">Mode hors ligne</h6>
|
|
<p:inputSwitch />
|
|
</div>
|
|
<p class="text-600 text-sm mb-2">
|
|
Accès limité aux fonctionnalités sans connexion
|
|
</p>
|
|
<div class="text-500 text-xs">Cache: 25 MB</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</p:tab>
|
|
|
|
<!-- Onglet Avancé -->
|
|
<p:tab title="Avancé">
|
|
<div class="grid">
|
|
<!-- API et intégrations -->
|
|
<div class="col-12 lg:col-6">
|
|
<div class="surface-100 border-round p-4 h-full">
|
|
<h6 class="text-900 font-semibold mb-4">
|
|
<i class="pi pi-cog text-purple-500 mr-2"></i>
|
|
API et Intégrations
|
|
</h6>
|
|
|
|
<div class="surface-white border-round p-3 mb-3">
|
|
<div class="flex align-items-center justify-content-between mb-2">
|
|
<h6 class="text-900 font-semibold mb-0">Clé API personnelle</h6>
|
|
<p:tag value="ACTIVE" severity="success" styleClass="text-xs" />
|
|
</div>
|
|
<div class="text-600 text-sm mb-2">Utilisée pour les intégrations tierces</div>
|
|
<div class="surface-100 border-round p-2 font-mono text-sm">
|
|
uk_1a2b3c4d5e6f7g8h9i0j...
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid gap-2">
|
|
<div class="col-6">
|
|
<p:commandButton value="Regénérer"
|
|
styleClass="p-button-outlined w-full"
|
|
icon="pi pi-refresh" />
|
|
</div>
|
|
<div class="col-6">
|
|
<p:commandButton value="Révoquer"
|
|
styleClass="p-button-danger w-full"
|
|
icon="pi pi-times" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="surface-orange-50 border-left-3 border-orange-500 p-3 mt-3">
|
|
<h6 class="text-orange-800 font-semibold mb-1">
|
|
<i class="pi pi-exclamation-triangle mr-2"></i>Sécurité
|
|
</h6>
|
|
<p class="text-orange-700 text-sm mb-0">
|
|
Ne partagez jamais votre clé API. Changez-la si elle est compromise.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Logs d'activité -->
|
|
<div class="col-12 lg:col-6">
|
|
<div class="surface-100 border-round p-4 h-full">
|
|
<h6 class="text-900 font-semibold mb-4">
|
|
<i class="pi pi-file-o text-orange-500 mr-2"></i>
|
|
Logs d'Activité
|
|
</h6>
|
|
|
|
<div class="field">
|
|
<label for="logLevel" class="block text-900 font-semibold mb-2">Niveau de logging</label>
|
|
<p:selectOneMenu id="logLevel" styleClass="w-full">
|
|
<f:selectItem itemLabel="Minimal (erreurs uniquement)" itemValue="error" />
|
|
<f:selectItem itemLabel="Standard (recommandé)" itemValue="info" />
|
|
<f:selectItem itemLabel="Détaillé (debug)" itemValue="debug" />
|
|
</p:selectOneMenu>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label for="logRetention" class="block text-900 font-semibold mb-2">Durée de conservation</label>
|
|
<p:selectOneMenu id="logRetention" styleClass="w-full">
|
|
<f:selectItem itemLabel="30 jours" itemValue="30" />
|
|
<f:selectItem itemLabel="90 jours" itemValue="90" />
|
|
<f:selectItem itemLabel="1 an" itemValue="365" />
|
|
</p:selectOneMenu>
|
|
</div>
|
|
|
|
<div class="field-checkbox mb-3">
|
|
<p:selectBooleanCheckbox id="downloadLogs" />
|
|
<label for="downloadLogs" class="ml-2 text-900">Permettre le téléchargement des logs</label>
|
|
</div>
|
|
|
|
<p:commandButton value="Télécharger mes logs"
|
|
styleClass="p-button-outlined w-full"
|
|
icon="pi pi-download" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Zone dangereuse -->
|
|
<div class="col-12">
|
|
<div class="surface-red-50 border-round p-4 border-2 border-red-500">
|
|
<h6 class="text-red-800 font-semibold mb-4">
|
|
<i class="pi pi-exclamation-triangle text-red-600 mr-2"></i>
|
|
Zone Dangereuse
|
|
</h6>
|
|
|
|
<div class="grid">
|
|
<div class="col-12 lg:col-4">
|
|
<div class="surface-white border-round p-4">
|
|
<h6 class="text-900 font-semibold mb-2">Réinitialiser les préférences</h6>
|
|
<p class="text-600 text-sm mb-3">
|
|
Remet tous vos paramètres aux valeurs par défaut
|
|
</p>
|
|
<p:commandButton value="Réinitialiser"
|
|
styleClass="p-button-outlined w-full"
|
|
icon="pi pi-refresh" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 lg:col-4">
|
|
<div class="surface-white border-round p-4">
|
|
<h6 class="text-900 font-semibold mb-2">Désactiver le compte</h6>
|
|
<p class="text-600 text-sm mb-3">
|
|
Suspend temporairement votre accès
|
|
</p>
|
|
<p:commandButton value="Désactiver"
|
|
styleClass="p-button-warning w-full"
|
|
icon="pi pi-pause" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 lg:col-4">
|
|
<div class="surface-white border-round p-4">
|
|
<h6 class="text-900 font-semibold mb-2">Supprimer le compte</h6>
|
|
<p class="text-600 text-sm mb-3">
|
|
Action irréversible. Toutes vos données seront perdues
|
|
</p>
|
|
<p:commandButton value="Supprimer"
|
|
styleClass="p-button-danger w-full"
|
|
icon="pi pi-trash" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</p:tab>
|
|
</p:tabView>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Actions globales -->
|
|
<div class="grid">
|
|
<div class="col-12">
|
|
<div class="surface-card border-round p-4">
|
|
<div class="flex align-items-center justify-content-between">
|
|
<div>
|
|
<h6 class="text-900 font-semibold mb-1">Sauvegarder toutes les modifications</h6>
|
|
<p class="text-600 text-sm mb-0">
|
|
Les changements seront appliqués immédiatement à votre compte
|
|
</p>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<p:commandButton value="Annuler"
|
|
styleClass="p-button-outlined"
|
|
icon="pi pi-times" />
|
|
<p:commandButton value="Enregistrer tous les paramètres"
|
|
styleClass="p-button-primary"
|
|
icon="pi pi-save" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</ui:define>
|
|
|
|
</ui:composition> |