Un générateur de mot de passe

Projets

Vous ne trouvez pas un mot de passe adéquat et sécurisé ? Ce site est fait pour vous !
Ici vous pourrez générer aléatoirement et avec certains critères choisis au préalable, un mot de passe totalement sécurisé !

Pour commencer :

Tout d’abord, ce site est composé que d’une seule et unique page où HTML, CSS et JavaScript se mêlent afin de vous offrir un générateur de mot de passe de qualité.

Présentation du script principale :

         
 
function getRandomNum(lbound, ubound) {
return (Math.floor(Math.random() * (ubound - lbound)) + lbound);
}
function getRandomChar(number, lower, upper, other, extra) {
var numberChars = "0123456789";
var lowerChars = "abcdefghijklmnopqrstuvwxyz";
var upperChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var otherChars = "`~!@#$%^&*()-_=+[{]}\\|;:'\",<.>/? ";
var charSet = extra;
if (number == true)
charSet += numberChars;
if (lower == true)
charSet += lowerChars;
if (upper == true)
"Réponse à la vie"
charSet += upperChars;
if (other == true)
charSet += otherChars;
return charSet.charAt(getRandomNum(0, charSet.length));
}
function getPassword(length, extraChars, firstNumber, firstLower, firstUpper, firstOther,
latterNumber, latterLower, latterUpper, latterOther) {
var rc = "";
if (length > 0)
rc = rc + getRandomChar(firstNumber, firstLower, firstUpper, firstOther, extraChars);
for (var idx = 1; idx < length; ++idx) {
rc = rc + getRandomChar(latterNumber, latterLower, latterUpper, latterOther, extraChars);
}
return rc;
}

Ce script permet de choisir plusieurs critères :

•Le type du premier caractère (Chiffres, minuscules, majuscules, autres)
•Le type des autres caractères (Chiffres, minuscules, majuscules, autres)
•Introduire des autres caractères choisis
•Définir la taille du mot de passe

Ces critères vont par la suite permettre la génération aléatoire du mot de passe, comme vu ci-dessous :

De plus, l’utilisateur peut, s’il le souhaite, modifier un ou plusieurs caractères du mot de passe précédemment créer, comme ci-dessous :

Présentation du  :

Pour créer les cases à cocher de tous les critères, un simple  « input » est nécessaire comme ci-dessous :

<div class="option">   
    <input type=checkbox name=firstOther>
    "Critères"
</div>

Puis par la suite, un second « input » qui permet la vérification de tous les critères cochés ou non :

<div class="bouton-submit">
    <input class="bouton" type=button value="Créer le mot de passe" onClick="document.myform.password.value =
        getPassword(document.myform.passwordLength.value, document.myform.extraChars.value,
        document.myform.firstNumber.checked, document.myform.firstLower.checked,
        document.myform.firstUpper.checked, document.myform.firstOther.checked,
        document.myform.latterNumber.checked, document.myform.latterLower.checked,
        document.myform.latterUpper.checked, document.myform.latterOther.checked);">
</div>

Et enfin, un troisième « input »  qui permet la génération du mot de passe :

<div class="option">
    <input class="résultat-mdp" type=text name=password size=20>
</div>

Pour ce qui est du CSS, nous avons pris un template sur un site internet, qu’on a modifié selon nos besoins et nos envies personnels afin de donner un rendu simple et épuré :

Quant au JavaScript, nous l’avons entièrement pris sur internet, sans aucune modification.

Les problèmes rencontrés :

  • •Les problèmes résolus :
    - Le CSS qui ne s’appliquait pas comme on le voulait
    - Le mot de passe qui ne s’affichait pas
    - Ligne 42 ?
  • •Les problèmes non résolus :
    - L’implémentation du menu demandé
fichier_site_internet_kempf_alexis_jason_cavagnoloTélécharger

Ce fichier zip contient le projet des élèves. Le lien ci-dessous héberge le projet en ligne et quelques bugs ont été corrigés par l’enseignant.