ileauchiens/maquette_backoffice
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FEAT : page profil

Browse Source
This commit is contained in:
pestak
2025-12-16 08:31:11 +01:00
parent ee068c9d6f
commit 706d3ece23
2 changed files with 218 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
js/password.js Normal file
View File

@@ -0,0 +1,92 @@
/**
* Verification et gestion du mot de passe lors de la réinitialisation
*/
const PASSWORD_LENGTH = 8;
const PASSWORD_CONTENT = ['[A-Z]', '[a-z]', '[0-9]'];
const passwordElt = document.getElementById('password');
const confirmPasswordElt = document.getElementById('passwordConfirm');
const min8Elt = document.getElementById('min8');
const uppercaseElt = document.getElementById('uppercase');
const lowercaseElt = document.getElementById('lowercase');
const digitElt = document.getElementById('digit');
const specialElt = document.getElementById('special');
//Pattern du mot de passe
passwordElt.addEventListener('input', function() {
const password = passwordElt.value;
// Vérification de la longueur
if (password.length >= PASSWORD_LENGTH) {
min8Elt.style.color = 'green';
} else {
min8Elt.style.color = 'red';
}
// Vérification du contenu
PASSWORD_CONTENT.forEach((pattern, index) => {
const regex = new RegExp(pattern);
const element = [uppercaseElt, lowercaseElt, digitElt, specialElt][index];
if (regex.test(password)) {
element.style.color = 'green';
} else {
element.style.color = 'red';
}
});
});
// Vérification de la confirmation du mot de passe
confirmPasswordElt.addEventListener('input', function() {
const password = passwordElt.value;
const confirmPassword = confirmPasswordElt.value;
if (password === confirmPassword) {
confirmPasswordElt.style.borderColor = 'green';
} else {
confirmPasswordElt.style.borderColor = 'red';
}
});
// Afficher ou masquer le mot de passe
const showPasswordElt = document.getElementById('showPassword');
showPasswordElt.addEventListener('change', function() {
if (showPasswordElt.checked) {
passwordElt.type = 'text';
confirmPasswordElt.type = 'text';
} else {
passwordElt.type = 'password';
confirmPasswordElt.type = 'password';
}
});
// Gestion de la soumission du formulaire
const passwordForm = document.getElementById('password-form');
passwordForm.addEventListener('submit', function(event) {
const password = passwordElt.value;
const confirmPassword = confirmPasswordElt.value;
// Empêcher la soumission si les critères ne sont pas remplis
if (password.length < PASSWORD_LENGTH ||
!/[A-Z]/.test(password) ||
!/[a-z]/.test(password) ||
!/[0-9]/.test(password) ||
password !== confirmPassword) {
event.preventDefault();
const alertElt = document.createElement('div');
alertElt.className = 'alert alert-danger text-center';
alertElt.textContent = "Le mot de passe ne respecte pas les critères requis ou la confirmation ne correspond pas.";
document.querySelector('main').prepend(alertElt);
window.scrollTo(0, 0);
}
});

126
profil/html/profil.html Normal file
View File

@@ -0,0 +1,126 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profil - L'Il'eau chiens - Admin</title>
<link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/node_modules/bs-icon/icons.css">
<link rel="shortcut icon" href="/favicon.png" type="image/png">
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/citations.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-xl bg-body-tertiary">
<div class="container-fluid align-items-center">
<a class="navbar-brand" href="#">L'Il'eau chiens - Admin</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link left-label" aria-current="page" href="#">Blog</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Boutique</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Prestations</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">FAQ</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Vétos</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">Citations</a></li>
<li class="nav-item"><a class="nav-link left-label" href="#">À propos</a></li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-megaphone me-1"></i> Message d'actu</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-box-arrow-up-right me-1"></i> Voir le site</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="bi bi-gear me-1"></i> Configuration</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userMenu" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-person-circle me-1"></i> <span id="userFirstName">Prénom</span>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userMenu">
<li><a class="dropdown-item active" href="#">Profil</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Sortir</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="my-5 fs-6">
<div class="container">
<header>
<h1 class="title my-4 fs-2 text-center">Mon profil</h1>
</header>
<div class="content">
<section class="my-4">
<h2 class="fs-4 mb-3">Informations personnelles</h2>
<form class="row g-3" id="profile-info-form">
<div class="col-md-12">
<label for="lastName" class="form-label">Nom (obligatoire)</label>
<input type="text" class="form-control" id="lastName" name="lastName" placeholder="Votre nom" value="Nom de famille" required>
</div>
<div class="col-md-12">
<label for="firstName" class="form-label">Prénom (obligatoire)</label>
<input type="text" class="form-control" id="firstName" name="firstName" placeholder="Votre prénom" value="Sandrine" required>
</div>
<div class="col-12">
<label for="email" class="form-label">Email (obligatoire)</label>
<input type="email" class="form-control" id="email" name="email" placeholder="votre@email.com" value="sandrine@gmail.com">
</div>
<div class="col-12 d-flex justify-content-star">
<button type="submit" class="btn btn-primary">Modifier</button>
</div>
</form>
</section>
<section class="my-5">
<h2 class="fs-4">Mot de passe</h2>
<form class="row" id="password-form">
<div class="col-12 my-2">
<small class="text-muted">Laissez ces champs vides pour ne pas modifier votre mot de passe.</small>
</div>
<div class="col-12 mb-3">
<label for="password" class="form-label">Nouveau mot de passe (<span id="min8">8 caractères minimum</span>, incluant une <span id="uppercase">majuscule</span>, une <span id="lowercase">minuscule</span> et un <span id="digit">chiffre</span>)</label>
<input type="password" class="form-control" id="password" name="password" placeholder="Nouveau mot de passe">
</div>
<div class="col-12">
<label for="passwordConfirm" class="form-label">Confirmation</label>
<input type="password" class="form-control" id="passwordConfirm" name="passwordConfirm" placeholder="Confirmer le mot de passe">
</div>
<div class="col-12">
<label for="showPassword" class="mt-2 mb-3">
<input type="checkbox" id="showPassword" />
Voir le mot de passe
</label>
</div>
<div class="col-12 d-flex justify-content-star">
<button type="submit" class="btn btn-primary">Modifier</button>
</div>
</form>
</section>
</div>
</div>
</main>
<footer class="bg-body-tertiary py-4 mt-auto">
<div class="container d-flex gap-3 flex-wrap">
<span class="text-muted">© 2025 L'Il'eau chiens. Tous droits réservés.</span>
<a href="/pagesText/mentionsLégales.html" class="link-secondary">Mentions légales</a>
<a href="/pagesText/cgv.html" class="link-secondary">CGV</a>
</div>
</footer>
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/js/password.js"></script>
</body>
</html>