feat: add autofill mode to append OTP to focused field (#1516)

_locales/en/messages.json

@@ -297,6 +297,18 @@
     "message": "Use Autofill",
     "description": "Use Autofill"
   },
+  "autofill_mode": {
+    "message": "Autofill mode",
+    "description": "Label for autofill mode selector"
+  },
+  "autofill_mode_replace": {
+    "message": "Replace (dedicated OTP field)",
+    "description": "Autofill replaces the value in detected OTP field"
+  },
+  "autofill_mode_append": {
+    "message": "Append to focused field (password + OTP)",
+    "description": "Autofill appends the code to the currently focused input"
+  },
   "use_high_contrast": {
     "message": "Use High Contrast",
     "description": "Use High Contrast"

src/components/Popup/EntryComponent.vue

@@ -227,6 +227,7 @@ export default Vue.extend({
                 chrome.tabs.sendMessage(tab.id, {
                   action: "pastecode",
                   code: entry.code,
+                  mode: this.$store.state.menu.autofillMode,
                 });
               }
             }

src/components/Popup/PreferencesPage.vue

@@ -30,6 +30,15 @@
       <option value="20">20%</option>
     </a-select-input>
     <a-toggle-input :label="i18n.use_autofill" v-model="useAutofill" />
+    <a-select-input
+      v-if="useAutofill"
+      :label="i18n.autofill_mode"
+      v-model="autofillMode"
+      style="margin-left: 10px"
+    >
+      <option value="replace">{{ i18n.autofill_mode_replace }}</option>
+      <option value="append">{{ i18n.autofill_mode_append }}</option>
+    </a-select-input>
     <a-toggle-input
       :label="i18n.browser_sync"
       v-model="browserSync"
@@ -83,6 +92,14 @@ export default Vue.extend({
         this.$store.commit("menu/setAutofill", useAutofill);
       },
     },
+    autofillMode: {
+      get(): "replace" | "append" {
+        return this.$store.state.menu.autofillMode;
+      },
+      set(autofillMode: "replace" | "append") {
+        this.$store.commit("menu/setAutofillMode", autofillMode);
+      },
+    },
     smartFilter: {
       get(): boolean {
         return this.$store.state.menu.smartFilter;

src/content.ts

@@ -43,7 +43,7 @@ if (!document.getElementById("__ga_grayLayout__")) {
         alert(chrome.i18n.getMessage("updateSuccess"));
         break;
       case "pastecode":
-        pasteCode(message.code);
+        pasteCode(message.code, message.mode || "replace");
         break;
       case "stopCapture": {
         const captureBox = document.getElementById("__ga_captureBox__");
@@ -282,7 +282,17 @@ async function qrDecode(
   qr.src = url;
 }
 
-function pasteCode(code: string) {
+function pasteCode(code: string, mode: "replace" | "append" = "replace") {
+  if (mode === "append") {
+    const activeEl = document.activeElement;
+    if (activeEl && activeEl.tagName === "INPUT") {
+      const inputBox = activeEl as HTMLInputElement;
+      inputBox.value = inputBox.value + code;
+      fireInputEvents(inputBox);
+    }
+    return;
+  }
+
   const _inputBoxes = document.getElementsByTagName("input");
   const inputBoxes: HTMLInputElement[] = [];
   for (let i = 0; i < _inputBoxes.length; i++) {

src/definitions/module-interface.d.ts

@@ -34,6 +34,7 @@ interface MenuState {
   zoom: number;
   autolock: number;
   useAutofill: boolean;
+  autofillMode: "replace" | "append";
   smartFilter: boolean;
   enableContextMenu: boolean;
   theme: string;

src/models/settings.ts

@@ -25,6 +25,7 @@ interface UserSettingsData {
   // syncable settings
   advisorIgnoreList?: string[];
   autofill?: boolean;
+  autofillMode?: "replace" | "append";
   autolock?: number;
   enableContextMenu?: boolean;
   encodedPhrase?: string;

src/store/Menu.ts

@@ -11,6 +11,8 @@ export class Menu implements Module {
         version: chrome.runtime.getManifest()?.version || "0.0.0",
         zoom: Number(UserSettings.items.zoom) || 100,
         useAutofill: UserSettings.items.autofill === true,
+        autofillMode:
+          UserSettings.items.autofillMode === "append" ? "append" : "replace",
         smartFilter: UserSettings.items.smartFilter === true,
         enableContextMenu: UserSettings.items.enableContextMenu === true,
         theme: UserSettings.items.theme || (isSafari ? "flat" : "normal"),
@@ -38,6 +40,14 @@ export class Menu implements Module {
           UserSettings.items.autofill = useAutofill;
           UserSettings.commitItems();
         },
+        setAutofillMode(
+          state: MenuState,
+          autofillMode: "replace" | "append"
+        ) {
+          state.autofillMode = autofillMode;
+          UserSettings.items.autofillMode = autofillMode;
+          UserSettings.commitItems();
+        },
         setSmartFilter(state: MenuState, smartFilter: boolean) {
           state.smartFilter = smartFilter;
           UserSettings.items.smartFilter = smartFilter;