Feature: Implement secure public pre-registration flow with CAPTCHA and HTMX dashboard
- Created V16 Flyway migration for pre_inscription and token_pre_inscription tables. - Added PreInscription and TokenPreInscription entities with respective repositories. - Updated SecurityConfig to allow public access to /inscription-public/**. - Implemented CaptchaValidationService to interact with Cloudflare Turnstile API. - Created PublicInscriptionController for managing the QR code entry, CAPTCHA validation, ephemeral tokens, and public form submission. - Added public Thymeleaf views (demarrer, formulaire, succes, lien-expire) with TailwindCSS. - Developed AdminPreInscriptionController and PreInscriptionService to handle back-office validation and rejection workflows. - Built the admin pre-inscriptions dashboard list view. - Added a dynamic, polling notification badge in the sidebar using HTMX, auto-updating on validation/rejection events.
This commit is contained in:
@@ -0,0 +1,85 @@
|
||||
<!DOCTYPE html>
|
||||
<html xmlns:th="http://www.thymeleaf.org">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>AS Talange - Formulaire d'inscription</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style> body { font-family: 'Inter', sans-serif; } </style>
|
||||
</head>
|
||||
<body class="bg-gray-50 flex items-center justify-center min-h-screen py-12">
|
||||
<div class="max-w-xl w-full bg-white rounded-xl shadow-md p-8 border border-gray-100">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-6 text-center">Formulaire de pré-inscription</h2>
|
||||
<p class="text-sm text-gray-500 mb-8 text-center">Veuillez remplir les informations concernant le futur licencié.</p>
|
||||
|
||||
<form th:action="@{/inscription-public/formulaire}" th:object="${preInscription}" method="post" class="space-y-6">
|
||||
<input type="hidden" name="token" th:value="${tokenUuid}" />
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Nom <span class="text-red-500">*</span></label>
|
||||
<input type="text" th:field="*{nom}" required class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none uppercase">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Prénom <span class="text-red-500">*</span></label>
|
||||
<input type="text" th:field="*{prenom}" required class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none capitalize">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Date de naissance <span class="text-red-500">*</span></label>
|
||||
<input type="date" id="dateNaissance" th:field="*{dateNaissance}" required class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
|
||||
</div>
|
||||
|
||||
<div id="representantBlock" class="hidden bg-blue-50 p-4 rounded-lg border border-blue-100">
|
||||
<label class="block text-sm font-medium text-blue-800 mb-1">Représentant légal <span class="text-red-500">*</span></label>
|
||||
<p class="text-xs text-blue-600 mb-2">Obligatoire pour les mineurs.</p>
|
||||
<input type="text" id="representantLegal" th:field="*{representantLegal}" placeholder="Nom et Prénom du parent" class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Téléphone</label>
|
||||
<input type="tel" th:field="*{telephone}" class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
|
||||
<input type="email" th:field="*{email}" class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Adresse postale</label>
|
||||
<textarea th:field="*{adresse}" rows="3" class="w-full border border-gray-300 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none"></textarea>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-lg transition-colors mt-4">
|
||||
Soumettre le dossier
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.getElementById('dateNaissance').addEventListener('change', function() {
|
||||
const dateInput = this.value;
|
||||
const repBlock = document.getElementById('representantBlock');
|
||||
const repInput = document.getElementById('representantLegal');
|
||||
|
||||
if (dateInput) {
|
||||
const dob = new Date(dateInput);
|
||||
const ageDifMs = Date.now() - dob.getTime();
|
||||
const ageDate = new Date(ageDifMs);
|
||||
const age = Math.abs(ageDate.getUTCFullYear() - 1970);
|
||||
|
||||
if (age < 18) {
|
||||
repBlock.classList.remove('hidden');
|
||||
repInput.required = true;
|
||||
} else {
|
||||
repBlock.classList.add('hidden');
|
||||
repInput.required = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user