334 lines
19 KiB
HTML
334 lines
19 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="#{userCreationBean}"/>
|
|
<ui:define name="title">Nouvel Utilisateur - 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">
|
|
<div class="flex align-items-center gap-2">
|
|
<i class="pi pi-user-plus text-green-500" style="font-size: 2rem"></i>
|
|
<div>
|
|
<h3 class="m-0 mb-1">Nouvel Utilisateur</h3>
|
|
<p class="text-600 m-0">Créer un nouvel utilisateur dans Keycloak</p>
|
|
</div>
|
|
</div>
|
|
<h:link outcome="/pages/user-manager/users/list" styleClass="p-button p-button-text">
|
|
<i class="pi pi-arrow-left mr-2"></i>
|
|
Retour à la liste
|
|
</h:link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ================================================================
|
|
FORMULAIRE DE CRÉATION
|
|
================================================================ -->
|
|
<h:form id="formUserCreation">
|
|
<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-info-circle text-blue-500"></i>
|
|
Informations de l'Utilisateur
|
|
</h3>
|
|
|
|
<div class="grid">
|
|
<!-- Colonne gauche: Informations de base -->
|
|
<div class="col-12 lg:col-6">
|
|
<div class="surface-50 border-round p-3 mb-3">
|
|
<h4 class="text-900 font-semibold mb-3 flex align-items-center gap-2">
|
|
<i class="pi pi-user text-blue-500"></i>
|
|
<span>Informations de Base</span>
|
|
</h4>
|
|
|
|
<!-- Nom d'utilisateur -->
|
|
<div class="field mb-3">
|
|
<label for="username" class="block text-900 font-medium mb-2">
|
|
Nom d'utilisateur <span class="text-red-500">*</span>
|
|
</label>
|
|
<p:inputText id="username"
|
|
value="#{userCreationBean.newUser.username}"
|
|
styleClass="w-full"
|
|
required="true"
|
|
placeholder="ex: jdupont">
|
|
<f:validateLength minimum="3" maximum="50" />
|
|
</p:inputText>
|
|
<small class="text-500">Identifiant unique de connexion</small>
|
|
</div>
|
|
|
|
<!-- Email -->
|
|
<div class="field mb-3">
|
|
<label for="email" class="block text-900 font-medium mb-2">
|
|
Adresse email <span class="text-red-500">*</span>
|
|
</label>
|
|
<p:inputText id="email"
|
|
value="#{userCreationBean.newUser.email}"
|
|
styleClass="w-full"
|
|
required="true"
|
|
type="email"
|
|
placeholder="ex: jean.dupont@example.com">
|
|
<f:validateRegex pattern="^[A-Za-z0-9+_.-]+@(.+)$" />
|
|
</p:inputText>
|
|
</div>
|
|
|
|
<!-- Prénom -->
|
|
<div class="field mb-3">
|
|
<label for="prenom" class="block text-900 font-medium mb-2">
|
|
Prénom <span class="text-red-500">*</span>
|
|
</label>
|
|
<p:inputText id="prenom"
|
|
value="#{userCreationBean.newUser.prenom}"
|
|
styleClass="w-full"
|
|
required="true"
|
|
placeholder="ex: Jean">
|
|
<f:validateLength minimum="2" maximum="100" />
|
|
</p:inputText>
|
|
</div>
|
|
|
|
<!-- Nom -->
|
|
<div class="field mb-0">
|
|
<label for="nom" class="block text-900 font-medium mb-2">
|
|
Nom <span class="text-red-500">*</span>
|
|
</label>
|
|
<p:inputText id="nom"
|
|
value="#{userCreationBean.newUser.nom}"
|
|
styleClass="w-full"
|
|
required="true"
|
|
placeholder="ex: Dupont">
|
|
<f:validateLength minimum="2" maximum="100" />
|
|
</p:inputText>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Colonne droite: Mot de passe et Configuration -->
|
|
<div class="col-12 lg:col-6">
|
|
<!-- Section Mot de passe -->
|
|
<div class="surface-50 border-round p-3 mb-3">
|
|
<h4 class="text-900 font-semibold mb-3 flex align-items-center gap-2">
|
|
<i class="pi pi-key text-orange-500"></i>
|
|
<span>Mot de Passe</span>
|
|
</h4>
|
|
|
|
<!-- Mot de passe -->
|
|
<div class="field mb-3">
|
|
<label for="password" class="block text-900 font-medium mb-2">
|
|
Mot de passe <span class="text-red-500">*</span>
|
|
</label>
|
|
<p:password id="password"
|
|
value="#{userCreationBean.password}"
|
|
styleClass="w-full"
|
|
required="true"
|
|
feedback="true"
|
|
toggleMask="true"
|
|
placeholder="Minimum 8 caractères">
|
|
<f:validateLength minimum="8" maximum="100" />
|
|
</p:password>
|
|
<small class="text-500">Au moins 8 caractères</small>
|
|
</div>
|
|
|
|
<!-- Confirmation mot de passe -->
|
|
<div class="field mb-0">
|
|
<label for="passwordConfirm" class="block text-900 font-medium mb-2">
|
|
Confirmer le mot de passe <span class="text-red-500">*</span>
|
|
</label>
|
|
<p:password id="passwordConfirm"
|
|
value="#{userCreationBean.passwordConfirm}"
|
|
styleClass="w-full"
|
|
required="true"
|
|
feedback="false"
|
|
toggleMask="true"
|
|
placeholder="Confirmer le mot de passe">
|
|
</p:password>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section Configuration -->
|
|
<div class="surface-50 border-round p-3">
|
|
<h4 class="text-900 font-semibold mb-3 flex align-items-center gap-2">
|
|
<i class="pi pi-cog text-purple-500"></i>
|
|
<span>Configuration</span>
|
|
</h4>
|
|
|
|
<!-- Realm -->
|
|
<div class="field mb-3">
|
|
<label for="realm" class="block text-900 font-medium mb-2">
|
|
Realm Keycloak
|
|
</label>
|
|
<p:selectOneMenu id="realm"
|
|
value="#{userCreationBean.realmName}"
|
|
styleClass="w-full">
|
|
<f:selectItems value="#{userCreationBean.availableRealms}"
|
|
var="realm"
|
|
itemLabel="#{realm}"
|
|
itemValue="#{realm}" />
|
|
</p:selectOneMenu>
|
|
</div>
|
|
|
|
<!-- Options de configuration -->
|
|
<div class="flex flex-column gap-2">
|
|
<!-- Compte activé -->
|
|
<div class="field-checkbox mb-0">
|
|
<p:selectBooleanCheckbox id="enabled"
|
|
value="#{userCreationBean.newUser.enabled}">
|
|
</p:selectBooleanCheckbox>
|
|
<label for="enabled" class="ml-2">Compte activé</label>
|
|
</div>
|
|
|
|
<!-- Email vérifié -->
|
|
<div class="field-checkbox mb-0">
|
|
<p:selectBooleanCheckbox id="emailVerified"
|
|
value="#{userCreationBean.newUser.emailVerified}">
|
|
</p:selectBooleanCheckbox>
|
|
<label for="emailVerified" class="ml-2">Email vérifié</label>
|
|
</div>
|
|
</div>
|
|
</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-check-circle text-green-500"></i>
|
|
Actions
|
|
</h3>
|
|
|
|
<div class="flex flex-wrap gap-2 align-items-center">
|
|
<!-- Bouton Créer -->
|
|
<p:commandButton value="Créer l'utilisateur"
|
|
icon="pi pi-check"
|
|
styleClass="p-button-success"
|
|
action="#{userCreationBean.createUser}"
|
|
update=":formUserCreation"
|
|
validateClient="true">
|
|
</p:commandButton>
|
|
|
|
<!-- Bouton Réinitialiser -->
|
|
<p:commandButton value="Réinitialiser"
|
|
icon="pi pi-refresh"
|
|
styleClass="p-button-outlined p-button-secondary"
|
|
action="#{userCreationBean.resetForm}"
|
|
update=":formUserCreation"
|
|
immediate="true">
|
|
<p:confirm header="Confirmation"
|
|
message="Voulez-vous vraiment réinitialiser le formulaire ?"
|
|
icon="pi pi-exclamation-triangle" />
|
|
</p:commandButton>
|
|
|
|
<!-- Bouton Annuler -->
|
|
<p:commandButton value="Annuler"
|
|
icon="pi pi-times"
|
|
styleClass="p-button-outlined"
|
|
action="#{userCreationBean.cancel}"
|
|
immediate="true">
|
|
<p:confirm header="Confirmation"
|
|
message="Voulez-vous vraiment annuler la création ?"
|
|
icon="pi pi-exclamation-triangle" />
|
|
</p:commandButton>
|
|
|
|
<div class="flex-grow-1"></div>
|
|
|
|
<!-- Aide -->
|
|
<p:commandButton value="Aide"
|
|
icon="pi pi-question-circle"
|
|
styleClass="p-button-outlined p-button-help"
|
|
type="button"
|
|
onclick="PF('helpDialog').show();">
|
|
</p:commandButton>
|
|
</div>
|
|
|
|
<!-- Message d'information -->
|
|
<p:messages id="messages" showDetail="true" closable="true" styleClass="mt-3">
|
|
<p:autoUpdate />
|
|
</p:messages>
|
|
</div>
|
|
</div>
|
|
</h:form>
|
|
</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-primary"
|
|
icon="pi pi-check" />
|
|
</p:confirmDialog>
|
|
|
|
<!-- ================================================================
|
|
DIALOG D'AIDE
|
|
================================================================ -->
|
|
<p:dialog header="Aide - Création d'Utilisateur"
|
|
widgetVar="helpDialog"
|
|
modal="true"
|
|
responsive="true"
|
|
width="600"
|
|
showEffect="fade"
|
|
hideEffect="fade">
|
|
<div class="grid">
|
|
<div class="col-12">
|
|
<h4 class="text-900 font-semibold flex align-items-center gap-2 mb-3">
|
|
<i class="pi pi-info-circle text-blue-500"></i>
|
|
Informations Requises
|
|
</h4>
|
|
<ul class="text-700 line-height-3 mb-4">
|
|
<li><strong>Nom d'utilisateur</strong> : Identifiant unique (3-50 caractères)</li>
|
|
<li><strong>Email</strong> : Adresse email valide</li>
|
|
<li><strong>Mot de passe</strong> : Au moins 8 caractères</li>
|
|
</ul>
|
|
|
|
<h4 class="text-900 font-semibold flex align-items-center gap-2 mb-3">
|
|
<i class="pi pi-shield text-purple-500"></i>
|
|
Sécurité
|
|
</h4>
|
|
<ul class="text-700 line-height-3 mb-4">
|
|
<li>Le mot de passe doit contenir au moins 8 caractères</li>
|
|
<li>Utilisez une combinaison de lettres, chiffres et caractères spéciaux</li>
|
|
<li>L'utilisateur pourra modifier son mot de passe après la première connexion</li>
|
|
</ul>
|
|
|
|
<h4 class="text-900 font-semibold flex align-items-center gap-2 mb-3">
|
|
<i class="pi pi-cog text-orange-500"></i>
|
|
Configuration
|
|
</h4>
|
|
<ul class="text-700 line-height-3 mb-0">
|
|
<li><strong>Compte activé</strong> : L'utilisateur peut se connecter immédiatement</li>
|
|
<li><strong>Email vérifié</strong> : L'email est considéré comme vérifié</li>
|
|
<li><strong>Realm</strong> : Espace d'administration Keycloak</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<f:facet name="footer">
|
|
<p:commandButton value="Fermer"
|
|
icon="pi pi-times"
|
|
styleClass="p-button-text"
|
|
onclick="PF('helpDialog').hide();"
|
|
type="button" />
|
|
</f:facet>
|
|
</p:dialog>
|
|
</ui:define>
|
|
|
|
</ui:composition>
|