leblanc-simon/index.html

## 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>
	<!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>