Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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. &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
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.