feat: Implémentation complète page Profil utilisateur
- ProfileView.java: Bean avec données OIDC/Keycloak - Extraction: nom, email, rôles, dernière connexion, expiration - Interface complète: infos personnelles, rôles, sécurité - Bouton redirection vers compte Keycloak - Design moderne avec PrimeFaces + Flex 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
dahoud
@@ -1,8 +1,8 @@
|
||||
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:h="http://java.sun.com/jsf/html"
|
||||
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:h="http://java.sun.com/jsf/html"
|
||||
xmlns:f="http://java.sun.com/jsf/core"
|
||||
xmlns:ui="http://java.sun.com/jsf/facelets"
|
||||
xmlns:p="http://primefaces.org/ui"
|
||||
xmlns:p="http://primefaces.org/ui"
|
||||
template="/WEB-INF/template.xhtml">
|
||||
|
||||
<ui:define name="title">Mon Profil - BTP Xpress</ui:define>
|
||||
@@ -10,14 +10,201 @@
|
||||
<ui:define name="content">
|
||||
<div class="layout-dashboard">
|
||||
<div class="grid">
|
||||
<!-- En-tête de profil -->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h1>Mon Profil</h1>
|
||||
<p>Module en cours de développement...</p>
|
||||
<div class="flex align-items-center gap-3 mb-4">
|
||||
<div class="avatar-circle" style="width: 80px; height: 80px; background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-700) 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 2rem; font-weight: bold;">
|
||||
#{profileView.initiales}
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h1 class="text-3xl font-bold mb-2">#{profileView.nomComplet}</h1>
|
||||
<p class="text-xl text-600 mb-0">
|
||||
<i class="pi pi-briefcase mr-2"></i>
|
||||
<ui:repeat value="#{profileView.roles}" var="role" varStatus="status">
|
||||
#{role}<h:outputText value=", " rendered="#{!status.last}"/>
|
||||
</ui:repeat>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Informations personnelles -->
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card">
|
||||
<div class="flex align-items-center justify-content-between mb-4">
|
||||
<h2 class="text-2xl font-bold mb-0">
|
||||
<i class="pi pi-user mr-2"></i>
|
||||
Informations Personnelles
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<p:divider/>
|
||||
|
||||
<div class="grid">
|
||||
<div class="col-12 mb-3">
|
||||
<label class="block text-600 font-semibold mb-2">Nom d'utilisateur</label>
|
||||
<div class="p-3 surface-100 border-round">
|
||||
<i class="pi pi-at mr-2 text-primary"></i>
|
||||
<span class="font-medium">#{profileView.username}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 mb-3">
|
||||
<label class="block text-600 font-semibold mb-2">Email</label>
|
||||
<div class="p-3 surface-100 border-round">
|
||||
<i class="pi pi-envelope mr-2 text-primary"></i>
|
||||
<span class="font-medium">#{profileView.email}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 mb-3" rendered="#{profileView.prenom != null}">
|
||||
<label class="block text-600 font-semibold mb-2">Prénom</label>
|
||||
<div class="p-3 surface-100 border-round">
|
||||
<i class="pi pi-user mr-2 text-primary"></i>
|
||||
<span class="font-medium">#{profileView.prenom}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 mb-3" rendered="#{profileView.nom != null}">
|
||||
<label class="block text-600 font-semibold mb-2">Nom</label>
|
||||
<div class="p-3 surface-100 border-round">
|
||||
<i class="pi pi-user mr-2 text-primary"></i>
|
||||
<span class="font-medium">#{profileView.nom}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 mb-3" rendered="#{profileView.telephone != null}">
|
||||
<label class="block text-600 font-semibold mb-2">Téléphone</label>
|
||||
<div class="p-3 surface-100 border-round">
|
||||
<i class="pi pi-phone mr-2 text-primary"></i>
|
||||
<span class="font-medium">#{profileView.telephone}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 mb-3" rendered="#{profileView.organisation != null}">
|
||||
<label class="block text-600 font-semibold mb-2">Organisation</label>
|
||||
<div class="p-3 surface-100 border-round">
|
||||
<i class="pi pi-building mr-2 text-primary"></i>
|
||||
<span class="font-medium">#{profileView.organisation}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sécurité et rôles -->
|
||||
<div class="col-12 md:col-6">
|
||||
<!-- Rôles et permissions -->
|
||||
<div class="card mb-4">
|
||||
<h2 class="text-2xl font-bold mb-4">
|
||||
<i class="pi pi-shield mr-2"></i>
|
||||
Rôles et Permissions
|
||||
</h2>
|
||||
|
||||
<p:divider/>
|
||||
|
||||
<div class="mb-3">
|
||||
<div class="flex align-items-center justify-content-between mb-2">
|
||||
<span class="text-600 font-semibold">Rôles attribués</span>
|
||||
<p:badge value="#{profileView.nombreRoles}" severity="info"/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-2 mt-3">
|
||||
<ui:repeat value="#{profileView.roles}" var="role">
|
||||
<p:chip label="#{role}" icon="pi pi-tag" styleClass="bg-primary"/>
|
||||
</ui:repeat>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Informations de sécurité -->
|
||||
<div class="card">
|
||||
<h2 class="text-2xl font-bold mb-4">
|
||||
<i class="pi pi-lock mr-2"></i>
|
||||
Sécurité
|
||||
</h2>
|
||||
|
||||
<p:divider/>
|
||||
|
||||
<div class="grid">
|
||||
<div class="col-12 mb-3">
|
||||
<label class="block text-600 font-semibold mb-2">Dernière connexion</label>
|
||||
<div class="p-3 surface-100 border-round">
|
||||
<i class="pi pi-clock mr-2 text-primary"></i>
|
||||
<span class="font-medium">#{profileView.derniereConnexion}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 mb-3">
|
||||
<label class="block text-600 font-semibold mb-2">Expiration de la session</label>
|
||||
<div class="p-3 surface-100 border-round">
|
||||
<i class="pi pi-calendar mr-2 text-primary"></i>
|
||||
<span class="font-medium">#{profileView.tokenExpiration}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<h:form>
|
||||
<p:commandButton value="Gérer mon compte Keycloak"
|
||||
icon="pi pi-cog"
|
||||
action="#{profileView.changerMotDePasse()}"
|
||||
ajax="false"
|
||||
styleClass="w-full"
|
||||
severity="secondary"/>
|
||||
</h:form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Statistiques d'activité (optionnel - peut être enrichi plus tard) -->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h2 class="text-2xl font-bold mb-4">
|
||||
<i class="pi pi-chart-bar mr-2"></i>
|
||||
Activité Récente
|
||||
</h2>
|
||||
|
||||
<p:divider/>
|
||||
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="p-4 border-round border-1 surface-border text-center">
|
||||
<div class="text-4xl font-bold text-primary mb-2">
|
||||
<i class="pi pi-folder"></i>
|
||||
</div>
|
||||
<div class="text-600 mb-1">Projets actifs</div>
|
||||
<div class="text-2xl font-bold">-</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="p-4 border-round border-1 surface-border text-center">
|
||||
<div class="text-4xl font-bold text-green-500 mb-2">
|
||||
<i class="pi pi-check-circle"></i>
|
||||
</div>
|
||||
<div class="text-600 mb-1">Tâches complétées</div>
|
||||
<div class="text-2xl font-bold">-</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="p-4 border-round border-1 surface-border text-center">
|
||||
<div class="text-4xl font-bold text-orange-500 mb-2">
|
||||
<i class="pi pi-bell"></i>
|
||||
</div>
|
||||
<div class="text-600 mb-1">Notifications</div>
|
||||
<div class="text-2xl font-bold">-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p:messages id="messages" showDetail="true" closable="true"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ui:define>
|
||||
</ui:composition>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user