/index.html
Created May 1, 2015
| <!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