gitea-admin/gh-christianlouis-pomjs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1.1.0

Browse Source
This commit is contained in:
Joaquim Homrighausen
2022-10-24 08:42:36 +02:00
parent 0a91c024a6
commit f76043a1f9
5 changed files with 84 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+22
View File
@@ -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 `<head>` 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 <kbd>Space></kbd> and <kbd>Enter</kbd> 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
README.md
+18 -9
View File
@@ -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 <kbd>Enter</kbd> button or use the <kbd>Enter</kbd> 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)
* Streamline, Icons and Illustrations; [streamlinehq.com](https://streamlinehq.com)
css/password-om.css
+6
View File
@@ -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;
}
index.html
+13 -12
View File
@@ -7,6 +7,7 @@
<meta name="description" content="Zufallsgenerator für Passwörter" lang="de">
<meta name="keywords" content="password generator,random password,lösenord,slumpmässigt lösenord,öppet moln,öppen källkod">
<meta name="author" content="Joaquim Homrighausen">
<meta name="generator" content="POMjs">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/png" href="favicon/favicon-32x32.png" />
<title lang="en">POMjs - Random Password Generator</title>
@@ -27,23 +28,24 @@
<meta property="og:type" content="website" />
<meta property="og:title" content="POMjs - Random Password Generator" />
<meta property="og:description" content="Plain vanilla javascript random password generator" />
<meta property="og:image" content="favicon/pomjs-logo.png" />
<meta property="og:image:width" content="500" />
<meta property="og:image" content="/favicon/pomjs-logo.png" />
<meta property="og:image:width" content="256" />
<meta property="og:image:type" content="image/png" />
<meta property="og:site_name" content="POMjs" />
<meta property="og:url" content="https://password.oppetmoln.se">
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:creator" content="@oppetmoln" />
<meta property="twitter:site" content="@oppetmoln" />
<meta property="twitter:domain" content="POMjs" />
<meta property="twitter:url" content="https://password.oppetmoln.se" />
<meta name="twitter:title" content="POMjs - Random Password Generator" />
<meta name="twitter:description" content="Plain vanilla javascript random password generator" />
<meta name="twitter:image" content="favicon/pomjs-logo.png" />
-->
<meta name="twitter:image" content="/favicon/pomjs-logo.png" />
-->
<script defer src="js/password-om.js" type="text/javascript" id="password-om"></script>
</head>
<!--
POMjs 1.00
POMjs 1.1.0
Plain vanilla javascript for the "Öppet Moln" ("Open Cloud") random
password generator site (password.oppetmoln.se). For the sake of having
@@ -76,6 +78,9 @@
-->
<body>
<header>
<!--
<h1>DEV</h1>
-->
<h1 id="cfg-page-title"></h1>
<h2 id="cfg-page-slogan"></h2>
<p id="cfg-page-lang"></p>
@@ -126,7 +131,7 @@
<div class="selection-row" id="mk-password-btn-div">
<div class="static-col"></div>
<div class="selection-col">
<button type="button" name="mk-password-btn" id="mk-password-btn" title="" tabindex="8">
<button type="button" name="mk-password-btn" id="mk-password-btn" title="" tabindex="8" autofocus>
&#8629;&nbsp;
</button>
</div>
@@ -149,14 +154,10 @@
<!--
<p id="gen-hosted-by">Website hosted by <span style="display:inline-block"><a href="https://www.webbplatsen.se" target="_blank" tabindex="-1">WebbPlatsen i Sverige AB</a></span></p>
-->
<small>POMjs by Joaquim Homrighausen, <span style="display:inline-block">get it at <a href="https://github.com/joho1968/POMjs" target="_blank" tabindex="-1">GitHub</a> (GPLv2)</span></small>
<p><small>POMjs by Joaquim Homrighausen, <span style="display:inline-block">get it at <a href="https://github.com/joho1968/POMjs" target="_blank" tabindex="-1">GitHub</a> (GPLv2)</span></small></p>
<p id="gen-timestamp"></p>
</footer>
</body>
</html>
<script async src="js/password-om.min.js" type="text/javascript" id="password-om"></script>
js/password-om.js
+25 -8
View File
@@ -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);
}
}