From 1e08ee709121d63fb89d6b4cb8c723aac127f275 Mon Sep 17 00:00:00 2001
From: mepiphana2023 <marvin.eph@gmail.com>
Date: Fri, 26 Apr 2024 11:28:42 +0200
Subject: [PATCH] inscription

---
 .../resources/i18n/messages_fr.properties     |   6 +-
 src/main/resources/templates/inscription.html | 211 +++++++++---------
 src/main/resources/templates/modele-page.html |   4 +-
 3 files changed, 106 insertions(+), 115 deletions(-)
diff --git a/src/main/resources/i18n/messages_fr.properties b/src/main/resources/i18n/messages_fr.properties
index 365f49c..a2dbae7 100644
--- a/src/main/resources/i18n/messages_fr.properties
+++ b/src/main/resources/i18n/messages_fr.properties
@@ -34,14 +34,14 @@ login.makecompte = Cr\u00e9er un compte
 
 register.title = Inscription
 register.pseudo.label = Pseudo:
-register.prenom.label = Pr�nom:
+register.prenom.label = Pr\u00E9nom:
 register.nom.label = Nom:
 register.email.label = Email:
-register.telephone.label = T�l�phone:
+register.telephone.label = T\u00E9l\u00E9phone:
 register.rue.label = Rue:
 register.code_postal.label = Code postal:
 register.ville.label = Ville:
 register.password.label = Mot de passe:
 register.confirm_password.label = Confirmation du mot de passe:
-register.submit_button = Cr�er
+register.submit_button = Cr\u00E9er
 register.cancel_button = Annuler
\ No newline at end of file
diff --git a/src/main/resources/templates/inscription.html b/src/main/resources/templates/inscription.html
index f07df47..3bfe517 100644
--- a/src/main/resources/templates/inscription.html
+++ b/src/main/resources/templates/inscription.html
@@ -3,119 +3,110 @@
 <head>
     <meta charset="UTF-8">
 </head>
+
 <body>
-<div id="container-main">
-    <form th:action="@{/inscription/newUser}" method="post" th:object="${userProfile}">
-        <div class="champ-saisie">
-            <label for="pseudo" th:text="#{register.pseudo.label}">Pseudo: </label>
-            <div>
-                <input type="text" th:field="*{pseudo}" id="pseudo" required/>
-            </div>
-            <span style="color: red;" th:if="${#fields.hasErrors('pseudo')}">
-                    <ul>
-                        <li th:each="erreur: ${#fields.errors('pseudo')}" th:text="${erreur}"></li>
-                    </ul>
-                </span>
-        </div>
-        <div class="champ-saisie">
-            <label for="prenom" th:text="#{register.prenom.label}">Prénom: </label>
-            <div>
-                <input type="text" th:field="*{prenom}" id="prenom" required/>
-            </div>
-            <span style="color: red;" th:if="${#fields.hasErrors('prenom')}">
-                    <ul>
-                        <li th:each="erreur: ${#fields.errors('prenom')}" th:text="${erreur}"></li>
-                    </ul>
-                </span>
-        </div>
-        <div class="champ-saisie">
-            <label for="nom" th:text="#{register.nom.label}">Nom: </label>
-            <div>
-                <input type="text" th:field="*{nom}" id="nom" required/>
-            </div>
-            <span style="color: red;" th:if="${#fields.hasErrors('nom')}">
-                    <ul>
-                        <li th:each="erreur: ${#fields.errors('nom')}" th:text="${erreur}"></li>
-                    </ul>
-                </span>
-        </div>
-        <div class="champ-saisie">
-            <label for="email" th:text="#{register.email.label}">Email: </label>
-            <div>
-                <input type="email" th:field="*{email}" id="email" required/>
-            </div>
-            <span style="color: red;" th:if="${#fields.hasErrors('email')}">
-                    <ul>
-                        <li th:each="erreur: ${#fields.errors('email')}" th:text="${erreur}"></li>
-                    </ul>
-                </span>
-        </div>
-        <div class="champ-saisie">
-            <label for="telephone" th:text="#{register.telephone.label}">Téléphone: </label>
-            <div>
-                <input type="text" th:field="*{telephone}" id="telephone" />
-            </div>
-            <span style="color: red;" th:if="${#fields.hasErrors('telephone')}">
-                    <ul>
-                        <li th:each="erreur: ${#fields.errors('telephone')}" th:text="${erreur}"></li>
-                    </ul>
-                </span>
-        </div>
-        <div class="champ-saisie">
-            <label for="rue" th:text="#{register.rue.label}">Rue: </label>
-            <div>
-                <input type="text" th:field="*{rue}" id="rue" required/>
-            </div>
-            <span style="color: red;" th:if="${#fields.hasErrors('rue')}">
-                    <ul>
-                        <li th:each="erreur: ${#fields.errors('rue')}" th:text="${erreur}"></li>
-                    </ul>
-                </span>
-        </div>
-        <div class="champ-saisie">
-            <label for="code_postal" th:text="#{register.code_postal.label}">Code postal: </label>
-            <div>
-                <input type="text" th:field="*{code_postal}" id="code_postal" required/>
-            </div>
-            <span style="color: red;" th:if="${#fields.hasErrors('code_postal')}">
-                    <ul>
-                        <li th:each="erreur: ${#fields.errors('code_postal')}" th:text="${erreur}"></li>
-                    </ul>
-                </span>
-        </div>
-        <div class="champ-saisie">
-            <label for="ville" th:text="#{register.ville.label}">Ville: </label>
-            <div>
-                <input type="text" th:field="*{ville}" id="ville" required/>
-            </div>
-            <span style="color: red;" th:if="${#fields.hasErrors('ville')}">
-                    <ul>
-                        <li th:each="erreur: ${#fields.errors('ville')}" th:text="${erreur}"></li>
-                    </ul>
-                </span>
-        </div>
-        <div class="champ-saisie">
-            <label for="password" th:text="#{register.password.label}">Mot de passe: </label>
-            <div>
-                <input type="password" th:field="*{password}" id="password" required/>
-            </div>
-            <span style="color: red;" th:if="${#fields.hasErrors('password')}">
-                    <ul>
-                        <li th:each="erreur: ${#fields.errors('password')}" th:text="${erreur}"></li>
-                    </ul>
-                </span>
-        </div>
-        <div class="champ-saisie">
-            <label for="confirmPassword" th:text="#{register.confirm_password.label}">Confirmation du mot de passe: </label>
-            <div>
-                <input type="password" name="confirmPassword" id="confirmPassword" required/>
+<div class="container py-5" id="container-main">
+    <div class="row justify-content-center">
+        <div class="col-lg-6">
+            <div class="card border-0 shadow-sm">
+                <div class="card-body">
+                    <h2 class="text-center mb-4" th:text="#{register.title}"></h2>
+                    <form th:action="@{/inscription/newUser}" method="post" th:object="${userProfile}" class="needs-validation" novalidate>
+                        <div class="mb-3">
+                            <label for="pseudo" class="form-label" th:text="#{register.pseudo.label}"></label>
+                            <input type="text" class="form-control" th:field="*{pseudo}" id="pseudo" required/>
+                            <div class="is-invalid text-danger" th:if="${#fields.hasErrors('pseudo')}">
+                                <ul>
+                                    <li th:each="erreur: ${#fields.errors('pseudo')}" th:text="${erreur}"></li>
+                                </ul>
+                            </div>
+                        </div>
+                        <div class="mb-3">
+                            <label for="prenom" class="form-label" th:text="#{register.prenom.label}"></label>
+                            <input type="text" class="form-control" th:field="*{prenom}" id="prenom" required/>
+                            <div class="is-invalid text-danger" th:if="${#fields.hasErrors('prenom')}">
+                                <ul>
+                                    <li th:each="erreur: ${#fields.errors('prenom')}" th:text="${erreur}"></li>
+                                </ul>
+                            </div>
+                        </div>
+                        <div class="mb-3">
+                            <label for="nom" class="form-label" th:text="#{register.nom.label}"></label>
+                            <input type="text" class="form-control" th:field="*{nom}" id="nom" required/>
+                            <div class="is-invalid text-danger" th:if="${#fields.hasErrors('nom')}">
+                                <ul>
+                                    <li th:each="erreur: ${#fields.errors('nom')}" th:text="${erreur}"></li>
+                                </ul>
+                            </div>
+                        </div>
+                        <div class="mb-3">
+                            <label for="email" class="form-label" th:text="#{register.email.label}"></label>
+                            <input type="email" class="form-control" th:field="*{email}" id="email" required/>
+                            <div class="is-invalid text-danger" th:if="${#fields.hasErrors('email')}">
+                                <ul>
+                                    <li th:each="erreur: ${#fields.errors('email')}" th:text="${erreur}"></li>
+                                </ul>
+                            </div>
+                        </div>
+                        <div class="mb-3">
+                            <label for="telephone" class="form-label" th:text="#{register.telephone.label}"></label>
+                            <input type="text" class="form-control" th:field="*{telephone}" id="telephone"/>
+                            <div class="is-invalid text-danger" th:if="${#fields.hasErrors('telephone')}">
+                                <ul>
+                                    <li th:each="erreur: ${#fields.errors('telephone')}" th:text="${erreur}"></li>
+                                </ul>
+                            </div>
+                        </div>
+                        <div class="mb-3">
+                            <label for="rue" class="form-label" th:text="#{register.rue.label}"></label>
+                            <input type="text" class="form-control" th:field="*{rue}" id="rue" required/>
+                            <div class="is-invalid text-danger" th:if="${#fields.hasErrors('rue')}">
+                                <ul>
+                                    <li th:each="erreur: ${#fields.errors('rue')}" th:text="${erreur}"></li>
+                                </ul>
+                            </div>
+                        </div>
+                        <div class="mb-3">
+                            <label for="code_postal" class="form-label" th:text="#{register.code_postal.label}"></label>
+                            <input type="text" class="form-control" th:field="*{code_postal}" id="code_postal" required/>
+                            <div class="is-invalid text-danger" th:if="${#fields.hasErrors('code_postal')}">
+                                <ul>
+                                    <li th:each="erreur: ${#fields.errors('code_postal')}" th:text="${erreur}"></li>
+                                </ul>
+                            </div>
+                        </div>
+                        <div class="mb-3">
+                            <label for="ville" class="form-label" th:text="#{register.ville.label}"></label>
+                            <input type="text" class="form-control" th:field="*{ville}" id="ville" required/>
+                            <span class="is-invalid text-danger" th:if="${#fields.hasErrors('ville')}">
+                                <ul>
+                                    <li th:each="erreur: ${#fields.errors('ville')}" th:text="${erreur}"></li>
+                                </ul>
+                            </span>
+                        </div>
+                        <div class="mb-3">
+                            <label for="password" class="form-label" th:text="#{register.password.label}"></label>
+                            <input type="password" class="form-control" th:field="*{password}" id="password" required/>
+                            <div class="is-invalid text-danger" th:if="${#fields.hasErrors('password')}">
+                                <ul>
+                                    <li th:each="erreur: ${#fields.errors('password')}" th:text="${erreur}"></li>
+                                </ul>
+                            </div>
+                        </div>
+                        <div class="mb-3">
+                            <label for="confirmPassword" class="form-label" th:text="#{register.confirm_password.label}">Confirmation du mot de passe:</label>
+                            <input type="password" class="form-control" name="confirmPassword" id="confirmPassword" required/>
+                        </div>
+
+                        <button type="submit" class="btn btn-primary w-100">S'inscrire</button>
+                    </form>
+                    <form th:action="@{/accueil}" method="post">
+                        <button type="submit" class="btn btn-secondary w-100 mt-3">Annuler</button>
+                    </form>
+                </div>
             </div>
         </div>
-        <input type="submit" th:value="#{register.submit_button}" />
-    </form>
-    <form th:action="@{/accueil}" method="post">
-        <button type="submit" th:text="#{register.cancel_button}">Annuler</button>
-    </form>
+    </div>
 </div>
 </body>
 </html>
diff --git a/src/main/resources/templates/modele-page.html b/src/main/resources/templates/modele-page.html
index 3f8d559..96aa420 100644
--- a/src/main/resources/templates/modele-page.html
+++ b/src/main/resources/templates/modele-page.html
@@ -58,7 +58,7 @@
     <div th:insert="${content}"></div>
 
 
-    <footer class="fixed-bottom text-center text-lg-start bg-body-tertiary text-muted py-3 non-sticky-footer">
+    <footer class="fixed-bottom text-center text-lg-start bg-body-tertiary text-muted py-3 non-sticky-footer" style="background-color: #2a2b30;">
         <section class="py-4 mb-0" style="background-color: #2a2b30;">
             <div class="container text-lg-left text-md-start mt-4 mb-5">
                 <div class="row">
@@ -99,7 +99,7 @@
             </div>
         </section>
 
-        <div class="text-center py-2 mt-0" style="background-color: #1c1b1b;">
+        <div class="text-center py-2 mt-0" style="background-color: #2a2b30;">
             © 2024 Copyright:
         </div>
     </footer>
