feat: add auto-generate and auto-copy settings (#2)

- add hover styles to buttons
jelni · Dec 22, 2023 · 2bbec4b · 2bbec4b
1 parent b348872
commit 2bbec4b
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 2 deletions.
diff --git a/public/password-generator.html b/public/password-generator.html
@@ -86,5 +86,15 @@
             Password entropy: <span id="password-entropy">0</span> bits<br />
             Entropy per character: ≈<span id="entropy-per-char">0</span> bits
         </div>
+        <div class="settings">
+            <label>
+                <input type="checkbox" id="auto-generate" />
+                Auto-generate when making changes
+            </label>
+            <label>
+                <input type="checkbox" id="auto-copy" />
+                Auto-copy to clipboard
+            </label>
+        </div>
     </body>
 </html>
diff --git a/public/scripts/password-generator.js b/public/scripts/password-generator.js
@@ -8,16 +8,25 @@ const charsets = {
 let password = null;
 
 const preferencesForm = document.getElementById("password-preferences");
+const settingsEls = {
+  autoGen: document.getElementById("auto-generate"),
+  autoCopy: document.getElementById("auto-copy")
+};
 loadPreferences();
 preferencesForm.addEventListener("submit", e => {
   e.preventDefault();
-  generatePassword(true);
+  generatePassword(settingsEls.autoCopy.checked);
 });
 preferencesForm.addEventListener("reset", e => {
   e.preventDefault();
   clearPreferences();
   loadPreferences();
 });
+preferencesForm.addEventListener("change", e => {
+  e.preventDefault();
+  if (settingsEls.autoGen.checked)
+    generatePassword(settingsEls.autoCopy.checked)
+});
 document
   .getElementById("save-defaults")
   .addEventListener("click", savePreferences);
@@ -159,6 +168,8 @@ function savePreferences() {
     ["password-numbers", "checked"],
     ["password-punctuation", "checked"],
     ["password-punctuation-extended", "checked"],
+    ["auto-generate", "checked"],
+    ["auto-copy", "checked"]
   ]) {
     localStorage.setItem(
       element,
@@ -175,6 +186,8 @@ function loadPreferences() {
     ["password-numbers", "checked", true],
     ["password-punctuation", "checked", true],
     ["password-punctuation-extended", "checked", false],
+    ["auto-generate", "checked", false],
+    ["auto-copy", "checked", true]
   ]) {
     document.getElementById(element)[property] =
       JSON.parse(localStorage.getItem(element)) ?? def;

diff --git a/public/styles/main.css b/public/styles/main.css
@@ -2,6 +2,7 @@
   --gray-90: hsl(0, 0%, 90%);
   --gray-75: hsl(0, 0%, 75%);
   --gray-50: hsl(0, 0%, 50%);
+  --gray-20: hsl(0, 0%, 20%);
   --gray-15: hsl(0, 0%, 15%);
   --gray-10: hsl(0, 0%, 10%);
 }
@@ -10,6 +11,7 @@
   :root {
     --gray-90: hsl(0, 0%, 10%);
     --gray-75: hsl(0, 0%, 25%);
+    --gray-20: hsl(0, 0%, 80%);
     --gray-15: hsl(0, 0%, 85%);
     --gray-10: hsl(0, 0%, 90%);
   }

diff --git a/public/styles/password-generator.css b/public/styles/password-generator.css
@@ -27,11 +27,19 @@ body {
 
 input,
 button {
+  transition-property: color, background;
+  transition-duration: 0.5s;
+
   color: unset;
   border: unset;
   user-select: none;
 }
 
+button:hover, .buttons > :hover {
+  background: var(--gray-20);
+  cursor: pointer;
+}
+
 .flex-center {
   display: flex;
   justify-content: center;
@@ -44,7 +52,7 @@ button {
   gap: 1rem;
 }
 
-.charsets {
+.charsets, .settings {
   display: flex;
   flex-direction: column;
   align-items: flex-start;