Feat: Add a password generator button in Add Key

addKey.html

@@ -74,7 +74,12 @@ <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"

addKey.js

@@ -1,8 +1,11 @@
-/* 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 +18,7 @@ async function mainLoaded() {
 
   // Set up event listeners
   addKeyForm.addEventListener('submit', handleFormSubmit);
+  generatePasswordButton.addEventListener('click', handleGeneratePassword);
   cancelButton.addEventListener('click', handleCancel);
 }
 
@@ -175,6 +179,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';
 }

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;
+    }
+  }
+}

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',

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);