[PM-22758] Configurable Keyboard Shortcut for Autotype (#16613)

* [PM-22785] Initial push with configuration and ipc changes for the configurable autotype keyboard shortcut

* [PM-22785] Add messy code with working configurable hotkey

* [PM-22785] Add more messy rust code

* [PM-22785] Add temp changes with configurable hotkey ui

* Add shortcut display to settings

* [PM-22785] Logic updates. Ran npm run prettier and lint:fix.

* [PM-22785] Add back disableAutotype with refactors.

* [PM-22785] Clean up Rust code

* [PM-22785] Clean up Rust code v2

* [PM-22785] Add unicode bounds in Rust code

* [PM-22785] Update rust code comments

* [PM-22785] Add unicode_value byte length check post-encoding

* [PM-22785] Extract encoding to a separate function

* Various fixes for the autotype setting label

* Misc component fixes

* Disallow nunmbers and allow Win key

* Themify edit shortcut

* Change display of Super to Win

* Create autotype format method

* Autotpe modal cleanup

* [PM-22785] Some cleanup

* Add unit tests and adjust error handling

* [PM-22785] Fix build issues on Mac and Linux

* [PM-22785] Linting fix

* Remove unused message

* [PM-22785] Linting fix

* [PM-22785] More linting fix

* [PM-22785] Address initial PR comments

* [PM-22785] Comment change

* [PM-22785] If statement change

* [PM-22785] Update with fixes from PR comments

* [PM-22785] Update with fixes from PR comments version ?

* add unit tests for get_alphabetic_hot_key()

* Fix tests

* Add missing mock to tests

* [PM-22785] Update with small fixes via PR comments

---------

Co-authored-by: Robyn MacCallum <robyntmaccallum@gmail.com>
Co-authored-by: neuronull <9162534+neuronull@users.noreply.github.com>

apps/desktop/src/app/accounts/settings.component.html

@@ -340,7 +340,10 @@
                       (change)="saveEnableAutotype()"
                     />
                     <div class="tw-flex tw-items-center tw-gap-2">
-                      {{ "enableAutotypeTransitionKey" | i18n }}
+                      {{ "enableAutotypeShortcutPreview" | i18n }}
+                      <div>
+                        <code>{{ form.value.autotypeShortcut }}</code>
+                      </div>
                       <app-premium-badge></app-premium-badge>
                     </div>
                   </label>
@@ -348,7 +351,13 @@
                 <small class="help-block" *ngIf="form.value.enableAutotype">
                   <b>{{ "important" | i18n }}</b>
                   {{ "enableAutotypeDescriptionTransitionKey" | i18n }}
-                  <b>{{ "editShortcut" | i18n }}</b></small
+                  <span
+                    class="settings-link"
+                    *ngIf="this.form.value.enableAutotype"
+                    (click)="saveAutotypeShortcut()"
+                  >
+                    {{ "editShortcut" | i18n }}
+                  </span></small
                 >
               </div>
               <div class="form-group">

apps/desktop/src/app/accounts/settings.component.spec.ts

@@ -183,6 +183,7 @@ describe("SettingsComponent", () => {
     policyService.policiesByType$.mockReturnValue(of([null]));
     desktopAutotypeService.resolvedAutotypeEnabled$ = of(false);
     desktopAutotypeService.autotypeEnabledUserSetting$ = of(false);
+    desktopAutotypeService.autotypeKeyboardShortcut$ = of(["Control", "Shift", "B"]);
     billingAccountProfileStateService.hasPremiumFromAnySource$.mockReturnValue(of(false));
     configService.getFeatureFlag$.mockReturnValue(of(true));
   });

apps/desktop/src/app/accounts/settings.component.ts

@@ -58,6 +58,7 @@ import { KeyService, BiometricStateService, BiometricsStatus } from "@bitwarden/
 import { PermitCipherDetailsPopoverComponent } from "@bitwarden/vault";
 
 import { SetPinComponent } from "../../auth/components/set-pin.component";
+import { AutotypeShortcutComponent } from "../../autofill/components/autotype-shortcut.component";
 import { SshAgentPromptType } from "../../autofill/models/ssh-agent-setting";
 import { DesktopAutofillSettingsService } from "../../autofill/services/desktop-autofill-settings.service";
 import { DesktopAutotypeService } from "../../autofill/services/desktop-autotype.service";
@@ -111,6 +112,7 @@ export class SettingsComponent implements OnInit, OnDestroy {
   requireEnableTray = false;
   showDuckDuckGoIntegrationOption = false;
   showEnableAutotype = false;
+  autotypeShortcut: string;
   showOpenAtLoginOption = false;
   isWindows: boolean;
   isLinux: boolean;
@@ -173,6 +175,7 @@ export class SettingsComponent implements OnInit, OnDestroy {
       value: false,
       disabled: true,
     }),
+    autotypeShortcut: [null as string | null],
     theme: [null as Theme | null],
     locale: [null as string | null],
   });
@@ -397,6 +400,9 @@ export class SettingsComponent implements OnInit, OnDestroy {
       ),
       allowScreenshots: !(await firstValueFrom(this.desktopSettingsService.preventScreenshots$)),
       enableAutotype: await firstValueFrom(this.desktopAutotypeService.autotypeEnabledUserSetting$),
+      autotypeShortcut: this.getFormattedAutotypeShortcutText(
+        (await firstValueFrom(this.desktopAutotypeService.autotypeKeyboardShortcut$)) ?? [],
+      ),
       theme: await firstValueFrom(this.themeStateService.selectedTheme$),
       locale: await firstValueFrom(this.i18nService.userSetLocale$),
     };
@@ -897,6 +903,29 @@ export class SettingsComponent implements OnInit, OnDestroy {
 
   async saveEnableAutotype() {
     await this.desktopAutotypeService.setAutotypeEnabledState(this.form.value.enableAutotype);
+    const currentShortcut = await firstValueFrom(
+      this.desktopAutotypeService.autotypeKeyboardShortcut$,
+    );
+    if (currentShortcut) {
+      this.form.controls.autotypeShortcut.setValue(
+        this.getFormattedAutotypeShortcutText(currentShortcut),
+      );
+    }
+  }
+
+  async saveAutotypeShortcut() {
+    const dialogRef = AutotypeShortcutComponent.open(this.dialogService);
+
+    const newShortcutArray = await firstValueFrom(dialogRef.closed);
+
+    if (!newShortcutArray) {
+      return;
+    }
+
+    this.form.controls.autotypeShortcut.setValue(
+      this.getFormattedAutotypeShortcutText(newShortcutArray),
+    );
+    await this.desktopAutotypeService.setAutotypeKeyboardShortcutState(newShortcutArray);
   }
 
   private async generateVaultTimeoutOptions(): Promise<VaultTimeoutOption[]> {
@@ -944,4 +973,8 @@ export class SettingsComponent implements OnInit, OnDestroy {
         throw new Error("Unsupported platform");
     }
   }
+
+  getFormattedAutotypeShortcutText(shortcut: string[]) {
+    return shortcut ? shortcut.join("+").replace("Super", "Win") : null;
+  }
 }