Connect input btn pref for tab launcher

buttercup · Apr 2, 2024 · 30c33ce · 30c33ce
1 parent c10d133
commit 30c33ce
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 9 deletions.
diff --git a/source/tab/services/config.ts b/source/tab/services/config.ts
@@ -0,0 +1,13 @@
+import { Layerr } from "layerr";
+import { sendBackgroundMessage } from "../../shared/services/messaging.js";
+import { BackgroundMessageType, Configuration } from "../types.js";
+
+export async function getConfig(): Promise<Configuration> {
+    const resp = await sendBackgroundMessage({
+        type: BackgroundMessageType.GetConfiguration
+    });
+    if (resp.error) {
+        throw new Layerr(resp.error, "Failed fetching configuration");
+    }
+    return resp.config;
+}
diff --git a/source/tab/services/form.ts b/source/tab/services/form.ts
@@ -27,7 +27,7 @@ export function fillFormDetails(frameEvent: FrameEvent) {
 
 export async function initialise() {
     // Watch for forms
-    waitAndAttachLaunchButtons((input, loginTarget, inputType) => {
+    await waitAndAttachLaunchButtons((input, loginTarget, inputType) => {
         FORM.currentFormID = ulid();
         FORM.currentLoginTarget = loginTarget;
         if (FRAME.isTop) {

diff --git a/source/tab/services/formDetection.ts b/source/tab/services/formDetection.ts
@@ -3,6 +3,7 @@ import { attachLaunchButton } from "../ui/launch.js";
 import { watchCredentialsOnTarget } from "./logins/watcher.js";
 import { processTargetAutoLogin } from "./autoLogin.js";
 import { InputType } from "../types.js";
+import { getConfig } from "./config.js";
 
 const TARGET_SEARCH_INTERVAL = 1000;
 
@@ -28,19 +29,26 @@ function onIdentifiedTarget(callback: (target: LoginTarget) => void) {
     };
 }
 
-export function waitAndAttachLaunchButtons(
+export async function waitAndAttachLaunchButtons(
     onInputActivate: (input: HTMLInputElement, loginTarget: LoginTarget, inputType: InputType) => void
 ) {
+    const config = await getConfig();
     onIdentifiedTarget((loginTarget: LoginTarget) => {
         const { otpField, usernameField, passwordField } = loginTarget;
         if (otpField) {
-            attachLaunchButton(otpField, (el) => onInputActivate(el, loginTarget, InputType.OTP));
+            attachLaunchButton(otpField, config.inputButtonDefault, (el) =>
+                onInputActivate(el, loginTarget, InputType.OTP)
+            );
         }
         if (passwordField) {
-            attachLaunchButton(passwordField, (el) => onInputActivate(el, loginTarget, InputType.UserPassword));
+            attachLaunchButton(passwordField, config.inputButtonDefault, (el) =>
+                onInputActivate(el, loginTarget, InputType.UserPassword)
+            );
         }
         if (usernameField) {
-            attachLaunchButton(usernameField, (el) => onInputActivate(el, loginTarget, InputType.UserPassword));
+            attachLaunchButton(usernameField, config.inputButtonDefault, (el) =>
+                onInputActivate(el, loginTarget, InputType.UserPassword)
+            );
         }
         watchCredentialsOnTarget(loginTarget);
         processTargetAutoLogin(loginTarget).catch(console.error);

diff --git a/source/tab/ui/launch.ts b/source/tab/ui/launch.ts
@@ -6,11 +6,16 @@ import { onBodyWidthResize } from "../library/resize.js";
 import { getExtensionURL } from "../../shared/library/extension.js";
 import BUTTON_BACKGROUND_IMAGE_RES from "../../../resources/content-button-background.png";
 import INPUT_BACKGROUND_IMAGE_RES from "../../../resources/buttercup-simple-150.png";
+import { InputButtonType } from "../types.js";
 
 const BUTTON_BACKGROUND_IMAGE = getExtensionURL(BUTTON_BACKGROUND_IMAGE_RES);
 const INPUT_BACKGROUND_IMAGE = getExtensionURL(INPUT_BACKGROUND_IMAGE_RES);
 
-export function attachLaunchButton(input: HTMLInputElement, onClick: (input: HTMLInputElement) => void) {
+export function attachLaunchButton(
+    input: HTMLInputElement,
+    buttonType: InputButtonType,
+    onClick: (input: HTMLInputElement) => void
+): void {
     if (input.dataset.bcup === "attached" || itemIsIgnored(input)) {
         return;
     }
@@ -24,8 +29,11 @@ export function attachLaunchButton(input: HTMLInputElement, onClick: (input: HTM
             setTimeout(tryToAttach, 250);
             return;
         }
-        renderButtonStyle(input, () => onClick(input), tryToAttach, bounds);
-        // renderInternalStyle(input, () => onClick(input), tryToAttach, bounds);
+        if (buttonType === InputButtonType.LargeButton) {
+            renderButtonStyle(input, () => onClick(input), tryToAttach, bounds);
+        } else if (buttonType === InputButtonType.InnerIcon) {
+            renderInternalStyle(input, () => onClick(input), tryToAttach, bounds);
+        }
     };
     tryToAttach();
 }
@@ -41,6 +49,7 @@ function renderInternalStyle(
     const imageSize = height * 0.6;
     const rightOffset = 8;
     const buttonArea = imageSize + rightOffset + 4;
+    const originalAutocomplete = input.getAttribute("autocomplete") ?? null;
     setStyle(input, {
         backgroundImage: `url(${INPUT_BACKGROUND_IMAGE})`,
         backgroundSize: `${imageSize}px`,
@@ -52,16 +61,21 @@ function renderInternalStyle(
         if (event.offsetX >= input.offsetWidth - buttonArea) {
             event.preventDefault();
             event.stopPropagation();
-            // toggleInputDialog(input, DIALOG_TYPE_ENTRY_PICKER);
             onClick();
         }
     };
     input.onmousemove = (event) => {
         if (event.offsetX >= input.offsetWidth - buttonArea) {
+            input.setAttribute("autocomplete", "off");
             setStyle(input, {
                 cursor: "pointer"
             });
         } else {
+            if (originalAutocomplete) {
+                input.setAttribute("autocomplete", originalAutocomplete);
+            } else {
+                input.removeAttribute("autocomplete");
+            }
             setStyle(input, {
                 cursor: "unset"
             });