From bf8d1578bb984c5b3c973358c42e0c37abe6b446 Mon Sep 17 00:00:00 2001
From: "Raph@PC42" <raphael@42factory.com>
Date: Tue, 17 Mar 2026 15:54:11 +0100
Subject: [PATCH 1/2] add-key: added password generator

---
 addKey.html |  5 ++++-
 addKey.js   | 21 ++++++++++++++++++++-
 common.js   | 14 ++++++++++++++
 popup.js    | 16 +---------------
 style.css   |  5 +++++
 5 files changed, 44 insertions(+), 17 deletions(-)

diff --git a/addKey.html b/addKey.html
index 1b7afd3..67882d5 100644
--- a/addKey.html
+++ b/addKey.html
@@ -74,7 +74,10 @@ <h1 class="h1 title">Add Key</h1>
         </div>
 
         <div class="form-group">
-          <label for="password" class="label">Password:</label>
+          <div class="password-row">
+            <label for="password" class="label">Password:</label>
+            <button type="button" id="generatePasswordButton" class="button">Generate</button>
+          </div>
           <input
             type="password"
             id="password"
diff --git a/addKey.js b/addKey.js
index 101efa9..ab00944 100644
--- a/addKey.js
+++ b/addKey.js
@@ -1,8 +1,9 @@
-/* global Notify storePathComponents */
+/* global Notify storePathComponents,copyStringToClipboard */
 
 const notify = new Notify(document.querySelector('#notify'));
 const addKeyForm = document.getElementById('addKeyForm');
 const urlRegexInput = document.getElementById('urlRegex');
+const generatePasswordButton = document.getElementById('generatePasswordButton');
 const cancelButton = document.getElementById('cancelButton');
 const secretPathSelect = document.getElementById('secretPath');
 
@@ -15,6 +16,7 @@ async function mainLoaded() {
 
   // Set up event listeners
   addKeyForm.addEventListener('submit', handleFormSubmit);
+  generatePasswordButton.addEventListener('click', handleGeneratePassword);
   cancelButton.addEventListener('click', handleCancel);
 }
 
@@ -175,6 +177,23 @@ async function handleFormSubmit(event) {
   }
 }
 
+function handleGeneratePassword() {
+  const length = 20;
+  const charset =
+    'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+~`|}{[]:;?><,./-=';
+  let password = '';
+
+  for (let i = 0; i < length; i++) {
+    const randomIndex = Math.floor(Math.random() * charset.length);
+    password += charset[randomIndex];
+  }
+  document.getElementById('password').value = password;
+
+  copyStringToClipboard(password);
+
+  notify.success('Generated password copied to clipboard!', { time: 5000 });
+}
+
 function handleCancel() {
   window.location.href = '/popup.html';
 }
diff --git a/common.js b/common.js
index ed94c06..19136dc 100644
--- a/common.js
+++ b/common.js
@@ -20,3 +20,17 @@ function storePathComponents(storePath) {
 if (!browser.browserAction) {
   browser.browserAction = chrome.browserAction ?? chrome.action;
 }
+
+async function copyStringToClipboard(string) {
+  const tabs = await browser.tabs.query({ active: true, currentWindow: true });
+  for (let tabIndex = 0; tabIndex < tabs.length; tabIndex++) {
+    const tab = tabs[tabIndex];
+    if (tab.url) {
+      browser.tabs.sendMessage(tab.id, {
+        message: 'copy_to_clipboard',
+        string: string,
+      });
+      break;
+    }
+  }
+}
diff --git a/popup.js b/popup.js
index fd2cb60..47a663e 100644
--- a/popup.js
+++ b/popup.js
@@ -1,5 +1,5 @@
 /* eslint-disable no-prototype-builtins */
-/* global Notify storePathComponents */
+/* global Notify storePathComponents,copyStringToClipboard */
 
 const notify = new Notify(document.querySelector('#notify'));
 const resultList = document.getElementById('resultList');
@@ -293,20 +293,6 @@ async function fillCredentialsInBrowser(username, password) {
   }
 }
 
-async function copyStringToClipboard(string) {
-  const tabs = await browser.tabs.query({ active: true, currentWindow: true });
-  for (let tabIndex = 0; tabIndex < tabs.length; tabIndex++) {
-    const tab = tabs[tabIndex];
-    if (tab.url) {
-      browser.tabs.sendMessage(tab.id, {
-        message: 'copy_to_clipboard',
-        string: string,
-      });
-      break;
-    }
-  }
-}
-
 async function deleteCredentials(secretPath) {
   const result = await fetch(`${vaultServerAddress}/v1/${secretPath}`, {
     method: 'DELETE',
diff --git a/style.css b/style.css
index 2bbcc29..e65cbcc 100644
--- a/style.css
+++ b/style.css
@@ -233,6 +233,11 @@ main {
 .form-group {
   margin-bottom: var(--space-lg);
 }
+.password-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
 .label {
   display: block;
   margin-bottom: var(--space-sm);

From efd0d916892eec0aa1a400e7b150686d69e98085 Mon Sep 17 00:00:00 2001
From: "Raph@PC42" <raphael@42factory.com>
Date: Tue, 17 Mar 2026 16:05:43 +0100
Subject: [PATCH 2/2] formatted with prettier

---
 addKey.html | 4 +++-
 addKey.js   | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/addKey.html b/addKey.html
index 67882d5..9442516 100644
--- a/addKey.html
+++ b/addKey.html
@@ -76,7 +76,9 @@ <h1 class="h1 title">Add Key</h1>
         <div class="form-group">
           <div class="password-row">
             <label for="password" class="label">Password:</label>
-            <button type="button" id="generatePasswordButton" class="button">Generate</button>
+            <button type="button" id="generatePasswordButton" class="button">
+              Generate
+            </button>
           </div>
           <input
             type="password"
diff --git a/addKey.js b/addKey.js
index ab00944..9d538ec 100644
--- a/addKey.js
+++ b/addKey.js
@@ -3,7 +3,9 @@
 const notify = new Notify(document.querySelector('#notify'));
 const addKeyForm = document.getElementById('addKeyForm');
 const urlRegexInput = document.getElementById('urlRegex');
-const generatePasswordButton = document.getElementById('generatePasswordButton');
+const generatePasswordButton = document.getElementById(
+  'generatePasswordButton'
+);
 const cancelButton = document.getElementById('cancelButton');
 const secretPathSelect = document.getElementById('secretPath');