422 lines
25 KiB
HTML
422 lines
25 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"
|
|
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
|
|
template="/templates/main-template.xhtml">
|
|
|
|
<ui:param name="page" value="#{userSessionBean}"/>
|
|
<ui:define name="title">Mon Profil - Lions User Manager</ui:define>
|
|
|
|
<ui:define name="content">
|
|
<div class="grid">
|
|
<!-- ================================================================
|
|
EN-TÊTE DE LA PAGE
|
|
================================================================ -->
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="flex align-items-center justify-content-between">
|
|
<h2 class="text-900 font-semibold text-xl m-0">
|
|
<i class="pi pi-user text-blue-500 mr-2"></i>
|
|
Mon Profil
|
|
</h2>
|
|
<h:link outcome="/pages/user-manager/dashboard" styleClass="p-button p-button-text">
|
|
<i class="pi pi-arrow-left mr-2"></i>
|
|
Retour au tableau de bord
|
|
</h:link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ================================================================
|
|
CARTE PROFIL PRINCIPAL
|
|
================================================================ -->
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="grid">
|
|
<!-- Photo de profil et informations principales -->
|
|
<div class="col-12 md:col-4">
|
|
<div class="text-center mb-4">
|
|
<!-- Avatar avec gradient -->
|
|
<div style="width: 140px; height: 140px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-color), var(--primary-600, #387FE9)); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem auto; font-size: 3.5rem; font-weight: bold; color: white; box-shadow: 0 8px 24px rgba(0,0,0,0.12);">
|
|
#{userSessionBean.initials}
|
|
</div>
|
|
|
|
<!-- Nom complet -->
|
|
<h3 class="text-900 font-semibold text-2xl mb-2">#{userSessionBean.fullName}</h3>
|
|
|
|
<!-- Email -->
|
|
<p class="text-600 mb-3 flex align-items-center justify-content-center gap-2">
|
|
<i class="pi pi-envelope"></i>
|
|
#{userSessionBean.email}
|
|
</p>
|
|
|
|
<!-- Badge de statut -->
|
|
<div class="inline-flex align-items-center justify-content-center gap-2">
|
|
<span class="inline-flex align-items-center gap-2 bg-green-100 text-green-700 px-3 py-2 border-round font-semibold" style="font-size: 1rem;">
|
|
<i class="pi pi-circle-fill" style="font-size: 0.5rem; animation: pulse 2s ease-in-out infinite;"></i>
|
|
<span>Connecté</span>
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Badge du rôle principal -->
|
|
<div class="mt-3 flex justify-content-center">
|
|
<span class="inline-flex align-items-center bg-blue-100 text-blue-700 px-3 py-1 border-round font-semibold text-sm" style="text-transform: uppercase; letter-spacing: 0.5px;">
|
|
#{userSessionBean.primaryRole}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Informations détaillées -->
|
|
<div class="col-12 md:col-8">
|
|
<div class="grid">
|
|
<!-- Colonne gauche: Informations personnelles -->
|
|
<div class="col-12 md:col-6">
|
|
<h4 class="text-900 font-semibold text-lg mb-3 flex align-items-center gap-2">
|
|
<i class="pi pi-user text-blue-500"></i>
|
|
Informations Personnelles
|
|
</h4>
|
|
|
|
<div class="mb-3 pb-3 border-bottom-1 surface-border">
|
|
<label class="block text-600 font-medium mb-1 text-sm">Nom d'utilisateur</label>
|
|
<p class="text-900 font-semibold m-0">#{userSessionBean.username}</p>
|
|
</div>
|
|
|
|
<div class="mb-3 pb-3 border-bottom-1 surface-border">
|
|
<label class="block text-600 font-medium mb-1 text-sm">Nom complet</label>
|
|
<p class="text-900 font-semibold m-0">#{userSessionBean.fullName}</p>
|
|
</div>
|
|
|
|
<div class="mb-3 pb-3 border-bottom-1 surface-border">
|
|
<label class="block text-600 font-medium mb-1 text-sm">Adresse email</label>
|
|
<div class="flex align-items-center gap-2">
|
|
<p class="text-900 font-semibold m-0">#{userSessionBean.email}</p>
|
|
<i class="pi pi-check-circle text-green-500" title="Email vérifié"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="block text-600 font-medium mb-1 text-sm">Prénom</label>
|
|
<p class="text-900 font-semibold m-0">#{userSessionBean.firstName}</p>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="block text-600 font-medium mb-1 text-sm">Nom</label>
|
|
<p class="text-900 font-semibold m-0">#{userSessionBean.lastName}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Colonne droite: Rôles et permissions -->
|
|
<div class="col-12 md:col-6">
|
|
<h4 class="text-900 font-semibold text-lg mb-3 flex align-items-center gap-2">
|
|
<i class="pi pi-shield text-purple-500"></i>
|
|
Rôles et Permissions
|
|
</h4>
|
|
|
|
<div class="mb-3 pb-3 border-bottom-1 surface-border">
|
|
<label class="block text-600 font-medium mb-2 text-sm">Rôles assignés</label>
|
|
<div class="flex flex-wrap gap-2">
|
|
<ui:repeat value="#{userSessionBean.roles}" var="role">
|
|
<p:badge value="#{role}" severity="info" styleClass="text-sm"></p:badge>
|
|
</ui:repeat>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3 pb-3 border-bottom-1 surface-border">
|
|
<label class="block text-600 font-medium mb-2 text-sm">Rôle principal</label>
|
|
<div class="flex align-items-center">
|
|
<p:badge value="#{userSessionBean.primaryRole}"
|
|
severity="success"
|
|
styleClass="text-sm">
|
|
</p:badge>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3 pb-3 border-bottom-1 surface-border">
|
|
<label class="block text-600 font-medium mb-1 text-sm">Niveau d'accès</label>
|
|
<p class="text-900 font-semibold m-0">
|
|
<h:outputText value="Administrateur système" rendered="#{userSessionBean.hasRole('admin')}" />
|
|
<h:outputText value="Gestionnaire utilisateurs" rendered="#{userSessionBean.hasRole('user_manager') and not userSessionBean.hasRole('admin')}" />
|
|
<h:outputText value="Consultation utilisateurs" rendered="#{userSessionBean.hasRole('user_viewer') and not userSessionBean.hasRole('user_manager') and not userSessionBean.hasRole('admin')}" />
|
|
<h:outputText value="Auditeur" rendered="#{userSessionBean.hasRole('auditor') and not userSessionBean.hasRole('user_viewer') and not userSessionBean.hasRole('user_manager') and not userSessionBean.hasRole('admin')}" />
|
|
<h:outputText value="Utilisateur standard" rendered="#{not userSessionBean.hasRole('admin') and not userSessionBean.hasRole('user_manager') and not userSessionBean.hasRole('user_viewer') and not userSessionBean.hasRole('auditor')}" />
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="block text-600 font-medium mb-2 text-sm">Statut du compte</label>
|
|
<div class="flex align-items-center">
|
|
<p:badge value="Actif" severity="success" styleClass="text-sm"></p:badge>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ================================================================
|
|
INFORMATIONS DE SESSION OIDC
|
|
================================================================ -->
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<h3 class="text-900 font-semibold text-lg mb-4 flex align-items-center gap-2">
|
|
<i class="pi pi-shield text-orange-500"></i>
|
|
Informations de Session OIDC
|
|
</h3>
|
|
|
|
<div class="grid">
|
|
<!-- Colonne gauche: Token Information -->
|
|
<div class="col-12 md:col-6">
|
|
<h4 class="text-900 font-semibold mb-3">Informations du Token</h4>
|
|
|
|
<div class="mb-3">
|
|
<label class="block text-600 font-medium mb-1 text-sm">Issuer (Émetteur)</label>
|
|
<p class="text-700 m-0 text-sm font-mono bg-bluegray-50 p-2 border-round">
|
|
#{userSessionBean.issuer}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="block text-600 font-medium mb-1 text-sm">Subject (Identifiant)</label>
|
|
<p class="text-700 m-0 text-sm font-mono bg-bluegray-50 p-2 border-round">
|
|
#{userSessionBean.subject}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="block text-600 font-medium mb-1 text-sm">Audience</label>
|
|
<p class="text-700 m-0 text-sm font-mono bg-bluegray-50 p-2 border-round">
|
|
account
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="block text-600 font-medium mb-2 text-sm">Token Type</label>
|
|
<div class="flex align-items-center">
|
|
<p:badge value="Bearer" severity="info" styleClass="text-sm"></p:badge>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Colonne droite: Session Details -->
|
|
<div class="col-12 md:col-6">
|
|
<h4 class="text-900 font-semibold mb-3">Détails de la Session</h4>
|
|
|
|
<div class="mb-3">
|
|
<label class="block text-600 font-medium mb-1 text-sm">Expiration du token</label>
|
|
<div class="flex align-items-center gap-2">
|
|
<i class="pi pi-calendar text-orange-500"></i>
|
|
<p class="text-700 m-0 text-sm">
|
|
<h:outputText value="#{userSessionBean.expirationTime}">
|
|
<f:convertDateTime pattern="dd/MM/yyyy à HH:mm:ss" timeZone="Europe/Paris" type="both"/>
|
|
</h:outputText>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="block text-600 font-medium mb-1 text-sm">Émis le</label>
|
|
<div class="flex align-items-center gap-2">
|
|
<i class="pi pi-clock text-blue-500"></i>
|
|
<p class="text-700 m-0 text-sm">
|
|
<h:outputText value="#{userSessionBean.issuedAt}">
|
|
<f:convertDateTime pattern="dd/MM/yyyy à HH:mm:ss" timeZone="Europe/Paris" type="both"/>
|
|
</h:outputText>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="block text-600 font-medium mb-1 text-sm">Realm Keycloak</label>
|
|
<div class="flex align-items-center gap-2">
|
|
<i class="pi pi-globe text-purple-500"></i>
|
|
<p class="text-700 m-0 text-sm font-semibold">
|
|
lions-user-manager
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="block text-600 font-medium mb-1 text-sm">Durée de validité</label>
|
|
<div class="flex align-items-center gap-2">
|
|
<i class="pi pi-hourglass text-green-500"></i>
|
|
<p class="text-700 m-0 text-sm">
|
|
Session active
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ================================================================
|
|
STATISTIQUES D'ACTIVITÉ
|
|
================================================================ -->
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<h3 class="text-900 font-semibold text-lg mb-4 flex align-items-center gap-2">
|
|
<i class="pi pi-chart-line text-green-500"></i>
|
|
Statistiques d'Activité
|
|
</h3>
|
|
|
|
<div class="grid">
|
|
<div class="col-12 md:col-6 lg:col-3">
|
|
<div class="surface-50 border-round p-3">
|
|
<div class="flex align-items-center justify-content-between mb-2">
|
|
<span class="text-600 font-medium text-sm">Connexions</span>
|
|
<i class="pi pi-sign-in text-blue-500"></i>
|
|
</div>
|
|
<p class="text-900 font-bold text-2xl m-0">--</p>
|
|
<small class="text-500">Total des connexions</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 md:col-6 lg:col-3">
|
|
<div class="surface-50 border-round p-3">
|
|
<div class="flex align-items-center justify-content-between mb-2">
|
|
<span class="text-600 font-medium text-sm">Dernière connexion</span>
|
|
<i class="pi pi-clock text-green-500"></i>
|
|
</div>
|
|
<p class="text-900 font-bold text-xl m-0">Aujourd'hui</p>
|
|
<small class="text-500">Session en cours</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 md:col-6 lg:col-3">
|
|
<div class="surface-50 border-round p-3">
|
|
<div class="flex align-items-center justify-content-between mb-2">
|
|
<span class="text-600 font-medium text-sm">Actions</span>
|
|
<i class="pi pi-history text-orange-500"></i>
|
|
</div>
|
|
<p class="text-900 font-bold text-2xl m-0">--</p>
|
|
<small class="text-500">Actions effectuées</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 md:col-6 lg:col-3">
|
|
<div class="surface-50 border-round p-3">
|
|
<div class="flex align-items-center justify-content-between mb-2">
|
|
<span class="text-600 font-medium text-sm">Sessions</span>
|
|
<i class="pi pi-desktop text-purple-500"></i>
|
|
</div>
|
|
<p class="text-900 font-bold text-2xl m-0">1</p>
|
|
<small class="text-500">Session active</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ================================================================
|
|
ACTIONS
|
|
================================================================ -->
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<h3 class="text-900 font-semibold text-lg mb-4 flex align-items-center gap-2">
|
|
<i class="pi pi-cog text-gray-500"></i>
|
|
Actions Rapides
|
|
</h3>
|
|
|
|
<h:form id="formProfileActions">
|
|
<div class="grid">
|
|
<!-- Gestion du Profil -->
|
|
<div class="col-12 md:col-6">
|
|
<div class="surface-50 border-round p-3 h-full">
|
|
<h4 class="text-900 font-semibold mb-3 flex align-items-center gap-2">
|
|
<i class="pi pi-user text-blue-500"></i>
|
|
<span>Gestion du Profil</span>
|
|
</h4>
|
|
<div class="flex flex-column gap-2">
|
|
<p:commandButton value="Modifier mon profil"
|
|
icon="pi pi-pencil"
|
|
styleClass="p-button-outlined w-full justify-content-start"
|
|
disabled="true">
|
|
<f:attribute name="data-tooltip" value="Fonctionnalité gérée par Keycloak"/>
|
|
</p:commandButton>
|
|
|
|
<p:commandButton value="Changer mon mot de passe"
|
|
icon="pi pi-key"
|
|
styleClass="p-button-outlined w-full justify-content-start"
|
|
disabled="true">
|
|
<f:attribute name="data-tooltip" value="Utilisez le portail Keycloak"/>
|
|
</p:commandButton>
|
|
|
|
<p:commandButton value="Paramètres de sécurité"
|
|
icon="pi pi-shield"
|
|
styleClass="p-button-outlined w-full justify-content-start"
|
|
disabled="true">
|
|
<f:attribute name="data-tooltip" value="Fonctionnalité à venir"/>
|
|
</p:commandButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Gestion des Sessions -->
|
|
<div class="col-12 md:col-6">
|
|
<div class="surface-50 border-round p-3 h-full">
|
|
<h4 class="text-900 font-semibold mb-3 flex align-items-center gap-2">
|
|
<i class="pi pi-desktop text-purple-500"></i>
|
|
<span>Sessions et Sécurité</span>
|
|
</h4>
|
|
<div class="flex flex-column gap-2">
|
|
<p:commandButton value="Voir mes sessions actives"
|
|
icon="pi pi-desktop"
|
|
styleClass="p-button-outlined p-button-info w-full justify-content-start"
|
|
disabled="true">
|
|
<f:attribute name="data-tooltip" value="Fonctionnalité à venir"/>
|
|
</p:commandButton>
|
|
|
|
<p:commandButton value="Historique des connexions"
|
|
icon="pi pi-history"
|
|
styleClass="p-button-outlined p-button-secondary w-full justify-content-start"
|
|
disabled="true">
|
|
<f:attribute name="data-tooltip" value="Fonctionnalité à venir"/>
|
|
</p:commandButton>
|
|
|
|
<p:commandButton value="Se déconnecter"
|
|
icon="pi pi-sign-out"
|
|
styleClass="p-button-danger w-full justify-content-start"
|
|
action="#{userSessionBean.logout}">
|
|
<p:confirm header="Confirmation de déconnexion"
|
|
message="Êtes-vous sûr de vouloir vous déconnecter ?"
|
|
icon="pi pi-exclamation-triangle" />
|
|
</p:commandButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</h:form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ================================================================
|
|
DIALOG DE CONFIRMATION
|
|
================================================================ -->
|
|
<p:confirmDialog global="true" showEffect="fade" hideEffect="fade"
|
|
responsive="true" width="400">
|
|
<p:commandButton value="Non" type="button"
|
|
styleClass="p-button-text"
|
|
icon="pi pi-times" />
|
|
<p:commandButton value="Oui" type="button"
|
|
styleClass="p-button-danger"
|
|
icon="pi pi-check" />
|
|
</p:confirmDialog>
|
|
|
|
<!-- Animation CSS pour le badge "Connecté" -->
|
|
<style>
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
</style>
|
|
</ui:define>
|
|
|
|
</ui:composition>
|