diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..a723fef --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,22 @@ +# Changelog for POMjs +All notable changes to this project will be documented in this file. + +The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). + +## [1.1.0] - 2022-10-24 + +### Changed +- Moved loading of the javascript file to `` with `defer` attribute to be more adherent to standards. + +### Added +- Added `CHANGELOG.md` :blush: +- Added links to "demo" sites using POMjs +- Added `autofocus` attribute to password generation `button`, this allows Space> and Enter keys to be used to immediately generate passwords. +- Added HTML "outline" to the password generation button when it has focus to make it more obvious that is has focus +- Added automatic password generation (configurable) when parameters are changed, default is enabled. + +### Removed +- Removed incorrect debug output (it would be logged even if debugging was disabled) + +## [1.0.0] - 2022-10-21 +- Initial release diff --git a/README.md b/README.md index 376e1a8..0d598e2 100644 --- a/README.md +++ b/README.md @@ -17,19 +17,20 @@ Download the distribution or clone the repo. Files and folders should be placed There may be references to "Öppet Moln" ("Open Cloud"), which is a Swedish site run by the author of **POMjs**, [oppetmoln.se](https://oppetmoln.se), to promote open source solutions for general use. You can, of course, delete such references. -I'd appreciate a mention on whatever website you use this one, and a link to the original repo. +I'd appreciate a mention on whatever website you use this one, and a link to the original repo, but it's not required. ## Usage -From a visitor perspective, simply enable the desired string sequences, and possibly adjust the password length. Click on the `Enter` button. +* From a visitor perspective, simply enable the desired string sequences, and possibly adjust the password length. Click on the Enter button or use the Enter key when the button has focus. +* The generated password is displayed at the bottom of the box, along with a strength indicator. +* The slider can also be used to change the number of characters in the generated password, as can the input field to the right of the slider. +* The HTML should have proper `tabindex` attributes for easier keyboard navigation. +* To copy the generated password to the clipboard, click on the password. +* "Dark mode" (browser setting) should be honored. -The generated password is displayed at the bottom of the box, along with a strength indicator. +## Changes -The slider can also be used to change the number of characters in the generated password, as can the input field to the right of the slider. - -The HTML should have proper `tabindex` attributes for easier keyboard navigation. - -To copy the generated password to the clipboard, click on the password. +Please see [CHANGELOG.md](CHANGELOG.md) for a list of changes. ## Customization @@ -52,6 +53,7 @@ Most parameters/settings can be changed in the `.js` file. | POM_strSpecialOne_Default | true | Enables POM_strSpecialOne by default | | POM_strSpecialTwo_Default | **false** | Enables POM_strSpecialTwo by default | | POM_mkPasswordOnLoad | true | Generate password on first page load | +| POM_changeIsClick | true | Generate password when parameters are changed | | POM_minLength | 16 | Minimum (and default) password length | | POM_maxLength | 256 | Maxmium password length | | POM_sliderStep | 8 | 1 - .. | @@ -85,6 +87,13 @@ The "cloud icon" comes from [Streamline](https://streamlinehq.com) Copyright 2022 Joaquim Homrighausen. +### Demo + +You can see POMjs in action, and more or less unmodified, on the following links: + +* Öppet Moln ("Open Cloud"); [password.oppetmoln.se](https://password.oppetmoln.se) +* WebbPlatsen i Sverige AB; [password.webbplatsen.se](https://password.webbplatsen.se) + ### External references These links are not here for any sort of endorsement or marketing, they're purely for informational purposes :sunglasses: @@ -94,4 +103,4 @@ These links are not here for any sort of endorsement or marketing, they're purel * me; [joho.se](https://joho.se) and [github.com/joho1968](https://github.com/joho1968) * POMjs repo; [github.com/joho1968/POMjs](https://github.com/joho1968/POMjs) * normalize.css repo; [github.com/necolas/normalize.css](https://github.com/necolas/normalize.css) -* Streamline, Icons and Illustrations; [streamlinehq.com](https://streamlinehq.com) \ No newline at end of file +* Streamline, Icons and Illustrations; [streamlinehq.com](https://streamlinehq.com) diff --git a/css/password-om.css b/css/password-om.css index 6af2c39..0f027db 100644 --- a/css/password-om.css +++ b/css/password-om.css @@ -16,6 +16,7 @@ --pom-mk-password-len-slider-thumb:#00008B; --pom-mk-password-btn:#000000; --pom-mk-password-btn-text:#ffffff; + --pom-mk-password-btn-ol:#00008B; } @media screen and (prefers-color-scheme: dark) { :root { @@ -36,6 +37,7 @@ --pom-mk-password-len-slider-thumb:#f0f0f0; --pom-mk-password-btn:#eeeeee; --pom-mk-password-btn-text:#000000; + --pom-mk-password-btn-ol:orange; } } @@ -180,6 +182,10 @@ a:hover { color:var(--pom-mk-password-btn-text); background-color:var(--pom-mk-password-btn); } +#mk-password-btn:focus { + outline:2px dotted var(--pom-mk-password-btn-ol) !important; + outline-offset:2px; +} #mk-password-btn:hover { cursor:pointer !important; } diff --git a/index.html b/index.html index 3d3980c..c736c97 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,7 @@ + POMjs - Random Password Generator @@ -27,23 +28,24 @@ - - + + - + - - --> + + --> +
+

@@ -126,7 +131,7 @@
-
@@ -149,14 +154,10 @@ - POMjs by Joaquim Homrighausen, get it at GitHub (GPLv2) +

POMjs by Joaquim Homrighausen, get it at GitHub (GPLv2)

- - - - diff --git a/js/password-om.js b/js/password-om.js index 3eb445b..caaf39b 100644 --- a/js/password-om.js +++ b/js/password-om.js @@ -1,5 +1,5 @@ /** - * POMjs 1.00 + * POMjs 1.1.0 * * password-om.js * @@ -48,6 +48,7 @@ const POM_strDigits_Default = true; const POM_strSpecialOne_Default = true; const POM_strSpecialTwo_Default = false; const POM_mkPasswordOnLoad = true; +const POM_changeIsClick = true; const POM_minLength = 16; const POM_maxLength = 256; const POM_sliderStep = 8; @@ -86,6 +87,9 @@ function POM_validateNumInput() { } this.value = mkLengthSlider.value; } + if (POM_changeIsClick) { + document.getElementById('mk-password-btn').click(); + } } /* Validate "manual input" */ function POM_generatePassword() { @@ -201,7 +205,9 @@ function POM_generatePassword() { } /* See if password contains specialtwo characters */ searchStr = '[' + POM_escapeRegExp(POM_strSpecialTwo) + ']'; - console.log('Using ' + searchStr + ' to scan password'); + if (POM_debug) { + console.log('Using ' + searchStr + ' to scan password'); + } re = new RegExp(searchStr); if (re.test(passwordGen)) { scoreP++; @@ -362,7 +368,7 @@ function POM_initialSetup() { /* Add timestamp, for no good reason :) */ document.getElementById("gen-timestamp").innerText = Date.now(); /* Add some event handlers */ - document.getElementById('mk-password-len-slider').addEventListener("oninput", function() { + document.getElementById('mk-password-len-slider').addEventListener('input', function() { let mkLengthField = document.getElementById('mk-length-field'); if (mkLengthField) { mkLengthField.value = this.value; @@ -374,17 +380,28 @@ function POM_initialSetup() { this.value = mkLengthField.value; } }); - document.getElementById('mk-length-field').addEventListener("click", function() { + document.getElementById('mk-length-field').addEventListener('click', function() { this.select(); }); - document.getElementById('mk-length-field').addEventListener("blur", POM_validateNumInput); - document.getElementById('mk-length-field').addEventListener("change", POM_validateNumInput); - document.getElementById('mk-password-btn').addEventListener("click", POM_generatePassword); - document.getElementById('mk-password-field').addEventListener("click", POM_copyPassword); + document.getElementById('mk-length-field').addEventListener('blur', POM_validateNumInput); + document.getElementById('mk-length-field').addEventListener('change', POM_validateNumInput); + document.getElementById('mk-password-btn').addEventListener('click', POM_generatePassword); + document.getElementById('mk-password-field').addEventListener('click', POM_copyPassword); /* Possibly generate password on load */ if (POM_mkPasswordOnLoad) { document.getElementById('mk-password-btn').click(); } + /* Possibly generate password on configuration changes */ + if (POM_changeIsClick) { + document.getElementById('mk-uppercase-select').addEventListener('click', POM_generatePassword); + document.getElementById('mk-special-one-select').addEventListener('click', POM_generatePassword); + document.getElementById('mk-digits-select').addEventListener('click', POM_generatePassword); + document.getElementById('mk-lowercase-select').addEventListener('click', POM_generatePassword); + document.getElementById('mk-digits-select').addEventListener('click', POM_generatePassword); + document.getElementById('mk-special-two-select').addEventListener('click', POM_generatePassword); + document.getElementById('mk-password-len-slider').addEventListener('change', POM_generatePassword); + } + }