/**
* Fonction pour déterminer la force du mot de passe
* @returns {void}
* @constant passwordInput - L'élément d'entrée du mot de passe.
* @constant password - La valeur du mot de passe.
* @constant progressBar - L'élément de la barre de progression.
* @constant result - L'élément pour afficher le résultat de la force du mot de passe.
* @constant length - La longueur du mot de passe.
* @constant hasUpper - Vérifie la présence de majuscules.
* @constant hasLower - Vérifie la présence de minuscules.
* @constant hasNumber - Vérifie la présence de chiffres.
* @constant hasSpecial - Vérifie la présence de caractères spéciaux.
* @constant hasSpace - Vérifie la présence d'espaces.
* @constant hasConsecutive - Vérifie la présence de répétitions de 3 caractères.
* @constant score - Le score de force du mot de passe.
* @constant message - Le message à afficher en fonction de la force du mot de passe.
* @description Cette fonction évalue la force du mot de passe en fonction de sa longueur, de la présence de majuscules, minuscules, chiffres, caractères spéciaux, espaces et répétitions.
*/
function passwordStrength() {
const passwordInput = document.getElementById("password");
const password = passwordInput.value;
const progressBar = document.getElementById("progressBar");
const result = document.getElementById("result");
const length = password.length;
const hasUpper = /[A-Z]/.test(password);
const hasLower = /[a-z]/.test(password);
const hasNumber = /\d/.test(password);
const hasSpecial = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(password);
const hasSpace = /\s/.test(password);
const hasConsecutive = /(.)\1{2,}/.test(password);
let score = 0;
if (length >= 6) score += 1;
if (length >= 10) score += 1;
if (hasUpper) score += 1;
if (hasLower) score += 1;
if (hasNumber) score += 1;
if (hasSpecial) score += 1;
if (hasSpace || hasConsecutive) score = 0; // pénalité si espace ou répétition de 3 caractères
let message = "";
let color = "";
let width = "0%";
if (length === 0) {
message = "Mot de passe vide";
color = "#e0e0e0";
width = "0%";
} else if (score <= 2) {
message = "Mot de passe faible";
color = "red";
width = "25%";
} else if (score <= 4) {
message = "Mot de passe moyen";
color = "orange";
width = "50%";
} else if (score === 5) {
message = "Mot de passe bon";
color = "lightgreen";
width = "75%";
} else if (score === 6) {
message = "Mot de passe fort";
color = "green";
width = "100%";
}
progressBar.style.width = width;
progressBar.style.backgroundColor = color;
result.textContent = message;
}
// Mettre à jour la force à chaque frappe dans le champ
document.getElementById("password").addEventListener("input", passwordStrength);
/**
* Fonction pour générer un mot de passe aléatoire
* @returns {void}
* @constant upper - Les lettres majuscules.
* @constant lower - Les lettres minuscules.
* @constant num - Les chiffres.
* @constant sym - Les caractères spéciaux.
* @constant charset - La chaîne de caractères utilisée pour générer le mot de passe.
* @constant password - Le mot de passe généré.
* @constant lengthInput - L'élément d'entrée de la longueur du mot de passe.
* @constant passwordLength - La longueur du mot de passe.
* @description Cette fonction génère un mot de passe aléatoire en utilisant des lettres majuscules, minuscules, chiffres et caractères spéciaux.
*/
function randomPassword() {
const upper = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
const lower = "abcdefghijklmnopqrstuvwxyz";
const num = "0123456789";
const sym = "!@#$%^&*()_+[]{}|;:,.<>?";
let charset = upper + lower + num + sym;
let password = "";
const lengthInput = document.getElementById("length").value;
const passwordLength = Math.max(6, parseInt(lengthInput)); // minimum 6
for (let i = 0; i < passwordLength; i++) {
const randomIndex = Math.floor(Math.random() * charset.length);
password += charset[randomIndex];
}
const passwordField = document.getElementById("password");
passwordField.value = password;
passwordField.dispatchEvent(new Event('input'));
}
/**
* Fonction pour copier le mot de passe dans le presse-papiers
* @returns {void}
* @constant password - La valeur du mot de passe.
* @description Cette fonction copie le mot de passe dans le presse-papiers et affiche une alerte.
*/
function copyPassword() {
const password = document.getElementById("password").value;
if (password) {
navigator.clipboard.writeText(password)
.then(() => {
alert("Mot de passe copié dans le presse-papiers !");
})
.catch(err => {
console.error("Erreur lors de la copie : ", err);
});
} else {
alert("Aucun mot de passe à copier !");
}
}
// Gestion de la popup
const modal = document.getElementById("passwordModal");
const closeModal = document.getElementById("closeModal");
const generateBtn = document.getElementById("generateBtn");
const cancelBtn = document.getElementById("cancelBtn");
/**
* Ouvrir la popup automatiquement après 10 s de chargement
* @returns {void}
* @description Cette fonction affiche la popup après 10 secondes de chargement de la page.
*/
window.onload = function() {
setTimeout(() => {
modal.style.display = "block";
}, 10000);
}
/**
* Fermeture de la popup
* @returns {void}
* @description Cette fonction ferme la popup lorsque l'utilisateur clique sur le bouton de fermeture ou sur le bouton d'annulation.
*/
closeModal.onclick = function() {
modal.style.display = "none";
}
/**
* Annuler la popup
* @returns {void}
* @description Cette fonction ferme la popup lorsque l'utilisateur clique sur le bouton d'annulation.
*/
cancelBtn.onclick = function() {
modal.style.display = "none";
}
/**
* Générer un mot de passe aléatoire et fermer la popup
* @returns {void}
* @description Cette fonction génère un mot de passe aléatoire et ferme la popup lorsque l'utilisateur clique sur le bouton de génération.
*/
generateBtn.onclick = function() {
const lengthInput = document.getElementById("length").value;
const passwordLength = parseInt(lengthInput);
if (isNaN(passwordLength) || passwordLength < 6 || passwordLength > 18) {
alert("La longueur doit être comprise entre 6 et 18 caractères !");
} else {
randomPassword();
modal.style.display = "none";
}
}
/**
* Fermeture de la popup en cliquant à l'extérieur
* @returns {void}
* @description Cette fonction ferme la popup lorsque l'utilisateur clique en dehors de celle-ci.
*/
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
/**
* Afficher la popup si le mot de passe est vide après 20 secondes
* @returns {void}
* @description Cette fonction affiche la popup si le champ de mot de passe est vide après 20 secondes.
*/
setInterval(() => {
const passwordInput = document.getElementById("password").value;
if (!passwordInput) {
modal.style.display = "block";
}
}, 20000);
/**
* Fonction pour basculer la visibilité du mot de passe
* @returns {void}
* @constant passwordInput - L'élément d'entrée du mot de passe.
* @constant eyeIcon - L'icône de l'œil.
* @description Cette fonction bascule la visibilité du mot de passe entre texte et mot de passe.
*/
function togglePasswordVisibility() {
const passwordInput = document.getElementById("password");
const eyeIcon = document.getElementById("eyeIcon");
const isPassword = passwordInput.type === "password";
passwordInput.type = isPassword ? "text" : "password";
eyeIcon.innerHTML = isPassword
? `<path d="M17.94 17.94A10.95 10.95 0 0 1 12 20c-7 0-11-8-11-8a21.82 21.82 0 0 1 5.17-6.16"/><path d="M1 1l22 22"/>`
: `<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8S1 12 1 12z"/><circle cx="12" cy="12" r="3"/>`;
}
/**
* Fonction pour gérer la soumission du formulaire de connexion
* @returns {void}
* @description Cette fonction gère la soumission du formulaire de connexion en vérifiant les champs et en affichant une alerte.
*/
function handleLogin() {
const username = document.getElementById("username").value.trim();
const password = document.getElementById("password").value.trim();
if (!username || !password) {
alert("Veuillez remplir les deux champs !");
return;
}
alert(`Connexion réussie pour ${username} (factice)`);
}
/**
* Fonction pour gérer la soumission du formulaire d'inscription
* @returns {void}
* @description Cette fonction gère la soumission du formulaire d'inscription en vérifiant les champs et en affichant une alerte.
*/
function startSnowfall() {
const containerClass = "snowfall";
let container = document.querySelector(`.${containerClass}`);
if (!container) {
container = document.createElement("div");
container.className = containerClass;
document.body.appendChild(container);
}
const snowflakeChars = ["❄", "❅", "❆", "✻", "✼"];
const colors = ["white", "#cceeff", "#99ddff"];
const MAX_FLAKES = 100;
let currentFlakes = 0;
function randomBetween(min, max) {
return Math.random() * (max - min) + min;
}
/**
* Fonction pour créer un flocon de neige
* @returns {void}
* @description Cette fonction crée un flocon de neige et l'ajoute au conteneur.
* @constant flake - L'élément du flocon de neige.
* @constant size - La taille du flocon de neige.
* @constant colors - Les couleurs des flocons de neige.
* @constant currentFlakes - Le nombre actuel de flocons de neige.
* @constant MAX_FLAKES - Le nombre maximum de flocons de neige.
* @constant container - Le conteneur pour les flocons de neige.
*/
function createFlake() {
if (currentFlakes >= MAX_FLAKES) return;
const flake = document.createElement("span");
flake.className = "snowflake";
flake.textContent = snowflakeChars[Math.floor(Math.random() * snowflakeChars.length)];
const size = randomBetween(12, 28);
flake.style.left = `${randomBetween(0, 100)}vw`;
flake.style.fontSize = `${size}px`;
flake.style.opacity = randomBetween(0.5, 1).toFixed(2);
flake.style.color = colors[Math.floor(Math.random() * colors.length)];
flake.style.animationDuration = `${randomBetween(6, 12)}s, ${randomBetween(2, 5)}s`;
container.appendChild(flake);
currentFlakes++;
// Supprimer le flocon après son animation
setTimeout(() => {
flake.remove();
currentFlakes--;
}, 12000);
}
setInterval(createFlake, 200);
}
window.addEventListener("DOMContentLoaded", startSnowfall);
Source