Skip to content

Instantly share code, notes, and snippets.

@leblanc-simon

leblanc-simon/index.html

Created May 1, 2015
Star
Embed
What would you like to do?
Learn more about clone URLs
Download ZIP
Open Password Generator
Raw
index.html
<!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. &amp;[{#|)
</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