Open Password Generator
<!DOCTYPE html> | |
<html lang="fr"> | |
<head> | |
<meta charset="utf-8" /> | |
<title>OPG : Open Password Generator</title> | |
<style> | |
html, body { | |
margin: 0; | |
padding: 0; | |
width: 100%; | |
height: 100%; | |
max-width: 100%; | |
max-height: 100%; | |
font-family: Helvetica; | |
font-size: 1rem; | |
background: #666; | |
background: linear-gradient(to bottom, #666 0%, #222 100%); | |
} | |
.container { | |
padding: 3rem 10%; | |
} | |
.form { | |
padding: 1rem; | |
background-color: #fff; | |
border-radius: 1rem; | |
-webkit-columns: 2; | |
-moz-columns: 2; | |
columns: 2; | |
} | |
.label { | |
display: inline-block; | |
width: 15rem; | |
} | |
.button { | |
margin-top: 2rem; | |
text-align: center; | |
} | |
/** | |
* @see : http://css3buttongenerator.com/ | |
*/ | |
button { | |
font-size: 1.3rem; | |
padding: 0.6rem 0.9rem; | |
cursor: pointer; | |
background: #3498db; | |
background-image: linear-gradient(to bottom, #3498db, #2980b9); | |
border-radius: 1rem; | |
color: #ffffff; | |
border: none; | |
} | |
button:hover { | |
background: #3cb0fd; | |
background-image: linear-gradient(to bottom, #3cb0fd, #3498db); | |
} | |
.result { | |
text-align: center; | |
margin-top: 3rem; | |
padding: 1em; | |
background-color: #fff; | |
border-radius: 1rem; | |
/* @see : https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/ */ | |
-ms-word-break: break-all; | |
word-break: break-all; | |
word-break: break-word; | |
-webkit-hyphens: auto; | |
-moz-hyphens: auto; | |
hyphens: auto; | |
} | |
#password::selection { | |
background-color: transparent; | |
} | |
#password::-moz-selection { | |
background-color: transparent; | |
} | |
.help { | |
margin-top: 0.9rem; | |
text-align: center; | |
font-size: 0.8rem; | |
color: #fff; | |
} | |
@media only screen and (max-width:987px) { | |
.form { | |
-webkit-columns: 1; | |
-moz-columns: 1; | |
columns: 1; | |
} | |
} | |
</style> | |
</head> | |
<body> | |
<div class="container"> | |
<div class="form"> | |
<div class="input"> | |
<label for="pw_length" class="label">Longueur du mot de passe</label> | |
<select id="pw_length"> | |
<optgroup label="Faible"></optgroup><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><optgroup label="Fort"></optgroup><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option><option value="32">32</option><option value="33">33</option><option value="34">34</option><option value="35">35</option><option value="36">36</option><option value="37">37</option><option value="38">38</option><option value="39">39</option><option value="40">40</option><option value="41">41</option><option value="42">42</option><option value="43">43</option><option value="44">44</option><option value="45">45</option><option value="46">46</option><option value="47">47</option><option value="48">48</option><option value="49">49</option><option value="50">50</option><option value="51">51</option><option value="52">52</option><option value="53">53</option><option value="54">54</option><option value="55">55</option><option value="56">56</option><option value="57">57</option><option value="58">58</option><option value="59">59</option><option value="60">60</option><option value="61">61</option><option value="62">62</option><option value="63">63</option><option value="64">64</option><option value="65">65</option><option value="66">66</option><option value="67">67</option><option value="68">68</option><option value="69">69</option><option value="70">70</option><option value="71">71</option><option value="72">72</option><option value="73">73</option><option value="74">74</option><option value="75">75</option><option value="76">76</option><option value="77">77</option><option value="78">78</option><option value="79">79</option><option value="80">80</option><option value="81">81</option><option value="82">82</option><option value="83">83</option><option value="84">84</option><option value="85">85</option><option value="86">86</option><option value="87">87</option><option value="88">88</option><option value="89">89</option><option value="90">90</option><option value="91">91</option><option value="92">92</option><option value="93">93</option><option value="94">94</option><option value="95">95</option><option value="96">96</option><option value="97">97</option><option value="98">98</option><option value="99">99</option><option value="100">100</option><option value="101">101</option><option value="102">102</option><option value="103">103</option><option value="104">104</option><option value="105">105</option><option value="106">106</option><option value="107">107</option><option value="108">108</option><option value="109">109</option><option value="110">110</option><option value="111">111</option><option value="112">112</option><option value="113">113</option><option value="114">114</option><option value="115">115</option><option value="116">116</option><option value="117">117</option><option value="118">118</option><option value="119">119</option><option value="120">120</option><option value="121">121</option><option value="122">122</option><option value="123">123</option><option value="124">124</option><option value="125">125</option><option value="126">126</option><option value="127">127</option><option value="128">128</option><optgroup label="Monstrueux :)"></optgroup><option value="256">256</option><option value="1024">1024</option><option value="2048">2048</option><option value="4096">4096</option> | |
</select> | |
</div> | |
<div class="input"> | |
<span class="label">Caractères minuscule</span> | |
<label> | |
<input type="checkbox" id="lowercase"> | |
(ex. abcdef) | |
</label> | |
</div> | |
<div class="input"> | |
<span class="label">Caractères majuscule</span> | |
<label> | |
<input type="checkbox" id="uppercase"> | |
(ex. ABCDEF) | |
</label> | |
</div> | |
<div class="input"> | |
<span class="label">Nombres</span> | |
<label> | |
<input type="checkbox" id="number"> | |
(ex. 123456) | |
</label> | |
</div> | |
<div class="input"> | |
<span class="label">Caractères spéciaux</span> | |
<label> | |
<input type="checkbox" id="special"> | |
(ex. &[{#|) | |
</label> | |
</div> | |
<div class="input"> | |
<span class="label">Exclure les caractères similaires</span> | |
<label> | |
<input type="checkbox" id="exclude"> | |
(ex. I, l, 0, O) | |
</label> | |
</div> | |
</div> | |
<div class="button"> | |
<button id="generate">Générer un mot de passe</button> | |
</div> | |
<div class="result"> | |
<div id="password"></div> | |
</div> | |
<div class="help">Votre mot de passe est déjà sélectionné même si vous ne le voyez pas. Il ne vous reste plus que le Ctrl + C à faire :)</div> | |
</div> | |
<script type="text/javascript"> | |
var default_options = { | |
pw_length: 16, | |
lowercase: true, | |
uppercase: true, | |
number: true, | |
special: true, | |
exclude: true | |
}; | |
/** | |
* Récupère les préférences de l'utilisateur | |
* @return Object | |
*/ | |
function getSaveOptions() | |
{ | |
var save_options = {}; | |
try { | |
var options = window.localStorage.getItem('options'); | |
if (options) { | |
save_options = JSON.parse(options); | |
} | |
} catch (e) { | |
console.info('no saved options'); | |
} | |
return save_options; | |
} | |
/** | |
* Charge les options du formulaire en fonction | |
* des valeurs par défault et des préférences sauvegardées | |
* | |
* @param Object default_options Les valeurs par défaut | |
*/ | |
function loadOptions(default_options) | |
{ | |
var options = {}; | |
var save_options = getSaveOptions(); | |
var attribute, input; | |
for (attribute in default_options) { | |
if (save_options[attribute] !== undefined) { | |
options[attribute] = save_options[attribute]; | |
} else { | |
options[attribute] = default_options[attribute]; | |
} | |
} | |
for (attribute in options) { | |
input = document.getElementById(attribute); | |
if ('pw_length' !== attribute) { | |
input.checked = options[attribute]; | |
continue; | |
} | |
var items = input.getElementsByTagName('option'); | |
for (var index = 0, length = items.length; index < length; index++) { | |
if (items[index].value == options[attribute]) { | |
input.selectedIndex = index; | |
break; | |
} | |
} | |
} | |
} | |
/** | |
* Enregistre dans les préférences la valeur d'une checkbox | |
*/ | |
function saveCheckbox() | |
{ | |
var save_options = getSaveOptions(); | |
save_options[this.id] = this.checked; | |
window.localStorage.setItem('options', JSON.stringify(save_options)); | |
} | |
/** | |
* Enregistre dans les préférences la valeur d'un select | |
*/ | |
function saveSelect() | |
{ | |
var save_options = getSaveOptions(); | |
try { | |
save_options[this.id] = parseInt(this.value); | |
} catch (e) { | |
save_options[this.id] = this.value; | |
} | |
window.localStorage.setItem('options', JSON.stringify(save_options)); | |
} | |
/** | |
* Retourne un nombre aléatoire entre le min et le max | |
* | |
* @param int min | |
* @param int max | |
* @return int | |
*/ | |
function getRandomInt(min, max) | |
{ | |
return Math.floor(Math.random() * (max - min + 1)) + min; | |
} | |
/** | |
* Génére un mot de passe aléatoire en fonction des options sélectionnées | |
* | |
* @return string Le mot de passe généré | |
*/ | |
function generatePassword() | |
{ | |
var options = { | |
pw_length: document.getElementById('pw_length').value, | |
lowercase: document.getElementById('lowercase').checked, | |
uppercase: document.getElementById('uppercase').checked, | |
number: document.getElementById('number').checked, | |
special: document.getElementById('special').checked, | |
exclude: document.getElementById('exclude').checked | |
}; | |
var characters = { | |
lowercase: 'abcdefghijklmnopqrstuvwxyz', | |
uppercase: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ', | |
number: '0123456789', | |
special: '&~#{[|`\\^@]}"\'(-_)=°+$£*µ%,?;.:/!§éèçàù', | |
exclude: 'Il0O' | |
}; | |
var authorized_char = []; | |
if (options.lowercase === true) { | |
authorized_char.push('lowercase') | |
} | |
if (options.uppercase === true) { | |
authorized_char.push('uppercase') | |
} | |
if (options.number === true) { | |
authorized_char.push('number') | |
} | |
if (options.special === true) { | |
authorized_char.push('special') | |
} | |
var password = ''; | |
var type, max_type, search_string, character; | |
max_type = authorized_char.length - 1; | |
do { | |
type = getRandomInt(0, max_type); | |
search_string = characters[authorized_char[type]]; | |
character = search_string[getRandomInt(0, search_string.length - 1)]; | |
if (options.exclude === true && characters.exclude.indexOf(character) !== -1) { | |
continue; | |
} | |
password += character; | |
} while (password.length < options.pw_length) | |
return password; | |
} | |
/** | |
* Sélectionne le text contenu dans l'élément | |
* | |
* @param string l'identifiant de l'élément à sélectionner | |
*/ | |
function selectText(element) | |
{ | |
var doc = document | |
, text = doc.getElementById(element) | |
, range, selection; | |
if (doc.body.createTextRange) { | |
range = document.body.createTextRange(); | |
range.moveToElementText(text); | |
range.select(); | |
} else if (window.getSelection) { | |
selection = window.getSelection(); | |
range = document.createRange(); | |
range.selectNodeContents(text); | |
selection.removeAllRanges(); | |
selection.addRange(range); | |
} | |
} | |
/** | |
* Display a password according to the options | |
*/ | |
function showPassword() | |
{ | |
var div = document.getElementById('password'); | |
div.innerHTML = generatePassword(); | |
selectText('password'); | |
} | |
// Ajout des listener pour l'enregistrement des préférences utilisateur | |
Array.prototype.slice.call(document.getElementsByTagName('input')).forEach(function (element) { | |
element.addEventListener('change', saveCheckbox); | |
}); | |
Array.prototype.slice.call(document.getElementsByTagName('select')).forEach(function (element) { | |
element.addEventListener('change', saveSelect); | |
}); | |
// Ajout du listener pour le click sur le bouton "générer" | |
document.getElementById('generate').addEventListener('click', showPassword); | |
// Ajout du listener pour sélectionner tout le temps le mot de passe | |
document.getElementById('password').parentNode.addEventListener('click', function() { | |
selectText('password'); | |
}); | |
// Chargement des options du formulaire | |
loadOptions(default_options); | |
// Création d'un mot de passe | |
showPassword(); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment