yasder5/projet_php
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

jolie beau

Browse source
This commit is contained in:
Yasder5 2026-03-04 22:27:34 +01:00
parent f663b33c77
commit c5acb87ccb
6 changed files with 79 additions and 196 deletions
Download patch file Download diff file Expand all files Collapse all files

83
views/signup.tpl
View file

@ -1,6 +1,7 @@
{extends file="views/layout.tpl"}
{block name="title" append} - Inscription{/block}
{block name="display" }style="display:none;"{/block}
{block name="content"}
<!-- Page : Inscription -->
<div class="py-5">
@ -93,13 +94,33 @@
<label class="form-label" for="user_password">
Mot de passe *
</label>
<input
class="form-control"
type="password"
id="user_password"
name="user_password"
required
>
<div class="position-relative">
<input
class="form-control pe-5"
type="password"
id="user_password"
name="user_password"
required
>
<button
class="btn position-absolute top-50 end-0 translate-middle-y me-2 p-0 border-0 bg-transparent text-muted"
type="button"
onclick="togglePassword('user_password', this)"
style="z-index: 10;"
>
<i class="fa-regular fa-eye"></i>
</button>
</div>
<div class="mt-2 small text-muted">
<p class="mb-1">Le mot de passe doit contenir :</p>
<ul class="mb-0 ps-3">
<li>Au moins <strong>15 caractères</strong></li>
<li>Au moins <strong>une lettre majuscule</strong></li>
<li>Au moins <strong>une lettre minuscule</strong></li>
<li>Au moins <strong>un chiffre</strong></li>
<li>Au moins <strong>un caractère spécial</strong> (# ? ! @ $ % ^ & * -)</li>
</ul>
</div>
</div>
<!-- Champ : confirmer le mot de passe -->
@ -107,13 +128,22 @@
<label class="form-label" for="pwd_confirm">
Confirmer le mot de passe *
</label>
<div class="position-relative">
<input
class="form-control"
type="password"
id="pwd_confirm"
name="pwd_confirm"
required
>
><button
class="btn position-absolute top-50 end-0 translate-middle-y me-2 p-0 border-0 bg-transparent text-muted"
type="button"
onclick="togglePassword('pwd_confirm', this)"
style="z-index: 10;"
>
<i class="fa-regular fa-eye"></i>
</button>
</div>
</div>
<!-- Champ optionnel : numéro de téléphone -->
@ -207,5 +237,42 @@
</div>
</div>
<script>
const pwd = document.getElementById('user_password');
const rules = {
length: { el: null, test: v => v.length >= 15 },
upper: { el: null, test: v => /[A-Z]/.test(v) },
lower: { el: null, test: v => /[a-z]/.test(v) },
digit: { el: null, test: v => /[0-9]/.test(v) },
special: { el: null, test: v => /[#?!@$%^&*\-]/.test(v) }
};
// Associe chaque règle à son <li> dans l'ordre du DOM
const items = pwd.closest('.col-12').querySelectorAll('ul li');
const keys = Object.keys(rules);
items.forEach((li, i) => rules[keys[i]].el = li);
pwd.addEventListener('input', () => {
const v = pwd.value;
keys.forEach(key => {
const { el, test } = rules[key];
el.classList.toggle('text-success', test(v));
el.classList.toggle('text-danger', !test(v));
});
});
function togglePassword(fieldId, btn) {
const input = document.getElementById(fieldId);
const icon = btn.querySelector('svg');
if (input.type === 'password') {
input.type = 'text';
icon.classList.replace('fa-eye', 'fa-eye-slash');
} else {
input.type = 'password';
icon.classList.replace('fa-eye-slash', 'fa-eye');
}
}
</script>
{include file="views/_partial/apigeo.tpl"}
{/block}