From 224b0b66599fc12234949b4a313f9d20395737ff Mon Sep 17 00:00:00 2001
From: JelNiSlaw <jelnislaw@gmail.com>
Date: Fri, 22 Dec 2023 14:11:48 +0100
Subject: [PATCH] handle concurrent button highlights

---
 public/scripts/password-generator.js |  9 ++++++---
 public/styles/password-generator.css | 24 ++++++++++++------------
 2 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/public/scripts/password-generator.js b/public/scripts/password-generator.js
index 57bd250..65db06e 100644
--- a/public/scripts/password-generator.js
+++ b/public/scripts/password-generator.js
@@ -8,6 +8,8 @@ const charsets = {
 
 let password = null;
 
+let concurrentButtonActions = 0;
+
 const preferences = {
   form: document.getElementById("password-preferences"),
   autoGenerate: document.getElementById("auto-generate"),
@@ -106,11 +108,12 @@ async function copyPassword() {
       success = false;
     }
   }
-  const className = success ? "copy-success" : "copy-error";
   const copyButton = document.getElementById("password-copy");
-  copyButton.classList.add(className);
+  concurrentButtonActions += 1;
+  copyButton.setAttribute("highlight", success ? "success" : "error");
   setTimeout(() => {
-    copyButton.classList.remove(className);
+    concurrentButtonActions -= 1;
+    if (concurrentButtonActions <= 0) copyButton.removeAttribute("highlight");
   }, 1_000);
 }
 
diff --git a/public/styles/password-generator.css b/public/styles/password-generator.css
index 9cb01bd..311c437 100644
--- a/public/styles/password-generator.css
+++ b/public/styles/password-generator.css
@@ -40,10 +40,6 @@ button {
   transition-timing-function: ease-out;
 }
 
-button:hover {
-  background: var(--gray-20);
-}
-
 .flex-center {
   display: flex;
   justify-content: center;
@@ -78,6 +74,18 @@ button,
   border-radius: 1em;
 }
 
+button:hover {
+  background: var(--gray-20);
+}
+
+button[highlight="success"] {
+  background: var(--green);
+}
+
+button[highlight="error"] {
+  background: var(--red);
+}
+
 .password {
   font-family: "JetBrains Mono", monospace;
   font-size: 1rem;
@@ -102,14 +110,6 @@ button,
   }
 }
 
-.copy-success {
-  background: var(--green);
-}
-
-.copy-error {
-  background: var(--red);
-}
-
 .password-stats {
   text-align: left;
 }