Improvements for Username Switch (#15)

Author: smashedr

package.json

@@ -16,7 +16,6 @@
     "build": "npm run build:chrome && npm run build:firefox",
     "prettier:check": "npx prettier --check .",
     "prettier:write": "npx prettier --write .",
-    "actionlint": "actionlint",
     "yamllint": "yamllint -c .github/yamllint.yaml ."
   },
   "dependencies": {

src/js/export.js

@@ -130,7 +130,6 @@ export function showHidePassword(event) {
 export async function copyInput(event) {
     console.debug('copyInput:', event)
     const el = event.currentTarget || event.target.closest('button')
-    console.debug('el.dataset.copyInput:', el.dataset.copyInput)
     const input = document.querySelector(el.dataset.copyInput)
     console.debug('input:', input)
     if (!input.value) {
@@ -180,8 +179,11 @@ export async function saveOptions(event) {
     } else {
         value = event.target.value
     }
+
     if (value === undefined) {
-        console.warn(`No Value for key: ${key}`)
+        console.warn(`No value for key: ${key}`)
+    } else if (value === options[key]) {
+        console.log(`No value change for key: ${key}:`, value)
     } else {
         options[key] = value
         console.log(`Set %c${key}:`, 'color: Khaki', value)
@@ -222,7 +224,6 @@ export function updateOptions(options) {
             hideShowElement(`#${el.dataset.related}`, value)
         }
         if (el.dataset.warning) {
-            // addWarningClass(el.nextElementSibling, value, el.dataset.warning)
             el.nextElementSibling.classList.toggle(el.dataset.warning, !!value)
         }
     }
@@ -245,27 +246,11 @@ function hideShowElement(selector, show, speed = 'fast') {
     }
 }
 
-// /**
-//  * Add Warning Class to Element
-//  * @function addWarningClass
-//  * @param {HTMLElement} element
-//  * @param {Boolean} value
-//  * @param {String} warning
-//  */
-// function addWarningClass(element, value, warning) {
-//     // console.debug('addWarningClass:', value, element)
-//     if (value) {
-//         element.classList.add(warning)
-//     } else {
-//         element.classList.remove(warning)
-//     }
-// }
-
 /**
  * Link Click Callback
  * Note: Firefox popup requires a call to window.close()
  * @function linkClick
- * @param {MouseEvent} event
+ * @param {Event|MouseEvent} event
  * @param {Boolean} [close]
  */
 export async function linkClick(event, close = false) {
@@ -402,10 +387,10 @@ export async function checkPerms() {
         origins: ['*://*/*'],
     })
     console.debug('checkPerms:', hasPerms)
+
     // Firefox still uses DOM Based Background Scripts
-    if (typeof document === 'undefined') {
-        return hasPerms
-    }
+    if (typeof document === 'undefined') return hasPerms
+
     const hasPermsEl = document.querySelectorAll('.has-perms')
     const grantPermsEl = document.querySelectorAll('.grant-perms')
     if (hasPerms) {
@@ -421,16 +406,14 @@ export async function checkPerms() {
 /**
  * Grant Permissions Click Callback
  * @function grantPerms
- * @param {MouseEvent} event
+ * @param {Event} event
  * @param {Boolean} [close]
  */
 export async function grantPerms(event, close = false) {
     console.debug('grantPerms:', event)
     // noinspection ES6MissingAwait
     requestPerms()
-    if (close) {
-        window.close()
-    }
+    if (close) window.close()
 }
 
 /**

src/js/options.js

@@ -131,14 +131,10 @@ $('.form-control').on('change input', function () {
  */
 async function initOptions() {
     console.debug('initOptions')
-    // noinspection ES6MissingAwait
-    updateManifest()
-    // noinspection ES6MissingAwait
-    updateBrowser()
-    // noinspection ES6MissingAwait
-    updatePlatform()
-    // noinspection ES6MissingAwait
-    setShortcuts()
+    updateManifest().catch((e) => console.log(e))
+    updateBrowser().catch((e) => console.log(e))
+    updatePlatform().catch((e) => console.log(e))
+    setShortcuts().catch((e) => console.log(e))
 
     checkPerms().then((hasPerms) => {
         if (!hasPerms) console.log('%cMissing Host Permissions', 'color: Red')
@@ -223,10 +219,11 @@ function updateTable(data) {
  */
 async function deleteHost(event) {
     console.debug('deleteHost:', event)
+    const target = event.currentTarget
     try {
-        const host = event.currentTarget?.dataset?.value
+        const host = target?.dataset?.value
         console.debug('host:', host)
-        const confirm = event.currentTarget?.id !== 'confirm-delete'
+        const confirm = target?.id !== 'confirm-delete'
         const { options } = await chrome.storage.sync.get(['options'])
         if (options.confirmDelete && !!confirm) {
             console.debug('Show Delete Modal')
@@ -249,12 +246,13 @@ async function deleteHost(event) {
  * @param {MouseEvent} event
  */
 async function editClick(event) {
+    console.debug('editClick:', event)
     const target = event.currentTarget
-    console.debug('editClick:', target)
     const inputs = editModalEl.querySelectorAll('input')
     if (target.dataset.action === 'add') {
         // Process Add
         usernameSwitch.checked = false
+        editUsername.required = true
         console.debug('%c Add Host editClick', 'color: Lime')
         document.getElementById('edit-modal-label').textContent = 'Add Host'
         editForm.dataset.action = 'add'
@@ -281,6 +279,7 @@ async function editClick(event) {
     editPassword.dataset.original = password
     editPassword.type = 'password'
     usernameSwitch.checked = username === ''
+    editUsername.required = username !== ''
     editModal.show()
 }
 
@@ -594,17 +593,6 @@ async function onChanged(changes, namespace) {
             updateTable(hosts)
         }
     }
-    // for (const [key, { newValue }] of Object.entries(changes)) {
-    //     if (namespace === 'sync') {
-    //         if (key === 'options') {
-    //             updateOptions(newValue)
-    //         } else {
-    //             const hosts = await Hosts.all()
-    //             console.debug('hosts:', hosts)
-    //             updateTable(hosts)
-    //         }
-    //     }
-    // }
 }
 
 /**

src/js/permissions.js

@@ -19,8 +19,7 @@ document
  */
 async function domContentLoaded() {
     console.debug('domContentLoaded')
-    // noinspection ES6MissingAwait
-    updateManifest()
+    updateManifest().catch((e) => console.log(e))
     checkPerms().then((hasPerms) => {
         if (!hasPerms) console.log('%cMissing Host Permissions', 'color: Red')
     })

src/js/popup.js

@@ -14,11 +14,9 @@ import {
 chrome.storage.onChanged.addListener(onChanged)
 
 document.addEventListener('DOMContentLoaded', initPopup)
-// noinspection JSCheckFunctionSignatures
 document
     .querySelectorAll('.grant-permissions')
     .forEach((el) => el.addEventListener('click', (e) => grantPerms(e, true)))
-// noinspection JSCheckFunctionSignatures
 document
     .querySelectorAll('a[href]')
     .forEach((el) => el.addEventListener('click', (e) => linkClick(e, true)))
@@ -44,8 +42,7 @@ const usernameEl = document.getElementById('username')
  */
 async function initPopup() {
     console.debug('initPopup')
-    // noinspection ES6MissingAwait
-    updateManifest()
+    updateManifest().catch((e) => console.log(e))
     checkPerms().then((hasPerms) => {
         if (!hasPerms) console.log('%cMissing Host Permissions', 'color: Red')
     })