From 30c33ce2fb269a2e101fc4b9a9bec3a868d66c5f Mon Sep 17 00:00:00 2001 From: Perry Mitchell Date: Tue, 2 Apr 2024 22:18:46 +0300 Subject: [PATCH] Connect input btn pref for tab launcher --- source/tab/services/config.ts | 13 +++++++++++++ source/tab/services/form.ts | 2 +- source/tab/services/formDetection.ts | 16 ++++++++++++---- source/tab/ui/launch.ts | 22 ++++++++++++++++++---- 4 files changed, 44 insertions(+), 9 deletions(-) create mode 100644 source/tab/services/config.ts diff --git a/source/tab/services/config.ts b/source/tab/services/config.ts new file mode 100644 index 00000000..99b7b386 --- /dev/null +++ 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 { + 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 index 667eb787..f349e246 100644 --- 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 index 5668dda4..eb78ada2 100644 --- 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 index 4991eadf..5ead1f77 100644 --- 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" });