[PM-9190] Edit Login - Autofill Options (#10274)

* [PM-8524] Update appA11yTitle to keep attributes in sync after first render * [PM-8524] Introduce UriOptionComponent * [PM-9190] Introduce AutofillOptionsComponent * [PM-9190] Add AutofillOptions to LoginDetailsSection * [PM-9190] Add autofill options component unit tests * [PM-9190] Add UriOptionComponent unit tests * [PM-9190] Add missing translations * [PM-9190] Add autofill on page load field * [PM-9190] Ensure updatedCipherView is completely separate from originalCipherView * [CL-348] Do not override items if there are no OptionComponents available * [PM-9190] Mock AutoFillOptions component in Login Details tests * [PM-9190] Cleanup storybook and missing web translations * [PM-9190] Ensure storybook decryptCipher returns a separate object
2025-12-16 08:13:42 +00:00 · 2024-08-01 08:35:04 -07:00
parent ffc9022f54
commit 0d76835cd8
17 changed files with 912 additions and 7 deletions
--- a/libs/vault/src/cipher-form/components/autofill-options/uri-option.component.ts
+++ b/libs/vault/src/cipher-form/components/autofill-options/uri-option.component.ts
@@ -0,0 +1,164 @@
+import { NgForOf, NgIf } from "@angular/common";
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  forwardRef,
+  Input,
+  Output,
+  ViewChild,
+} from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import {
+  ControlValueAccessor,
+  FormBuilder,
+  NG_VALUE_ACCESSOR,
+  ReactiveFormsModule,
+} from "@angular/forms";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import {
+  UriMatchStrategy,
+  UriMatchStrategySetting,
+} from "@bitwarden/common/models/domain/domain-service";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import {
+  FormFieldModule,
+  IconButtonModule,
+  SelectComponent,
+  SelectModule,
+} from "@bitwarden/components";
+
+@Component({
+  selector: "vault-autofill-uri-option",
+  templateUrl: "./uri-option.component.html",
+  standalone: true,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => UriOptionComponent),
+      multi: true,
+    },
+  ],
+  imports: [
+    FormFieldModule,
+    ReactiveFormsModule,
+    IconButtonModule,
+    JslibModule,
+    SelectModule,
+    NgForOf,
+    NgIf,
+  ],
+})
+export class UriOptionComponent implements ControlValueAccessor {
+  @ViewChild("uriInput")
+  private inputElement: ElementRef<HTMLInputElement>;
+
+  @ViewChild("matchDetectionSelect")
+  private matchDetectionSelect: SelectComponent<UriMatchStrategySetting>;
+
+  protected uriForm = this.formBuilder.group({
+    uri: [null as string],
+    matchDetection: [null as UriMatchStrategySetting],
+  });
+
+  protected uriMatchOptions: { label: string; value: UriMatchStrategySetting }[] = [
+    { label: this.i18nService.t("default"), value: null },
+    { label: this.i18nService.t("baseDomain"), value: UriMatchStrategy.Domain },
+    { label: this.i18nService.t("host"), value: UriMatchStrategy.Host },
+    { label: this.i18nService.t("startsWith"), value: UriMatchStrategy.StartsWith },
+    { label: this.i18nService.t("regEx"), value: UriMatchStrategy.RegularExpression },
+    { label: this.i18nService.t("exact"), value: UriMatchStrategy.Exact },
+    { label: this.i18nService.t("never"), value: UriMatchStrategy.Never },
+  ];
+
+  /**
+   * Whether the URI can be removed from the form. If false, the remove button will be hidden.
+   */
+  @Input({ required: true })
+  canRemove: boolean;
+
+  /**
+   * The user's current default match detection strategy. Will be displayed in () after "Default"
+   */
+  @Input({ required: true })
+  set defaultMatchDetection(value: UriMatchStrategySetting) {
+    this.uriMatchOptions[0].label = this.i18nService.t(
+      "defaultLabel",
+      this.uriMatchOptions.find((o) => o.value === value)?.label,
+    );
+  }
+
+  /**
+   * Emits when the remove button is clicked and URI should be removed from the form.
+   */
+  @Output()
+  remove = new EventEmitter<void>();
+
+  protected showMatchDetection = false;
+
+  protected toggleMatchDetection() {
+    this.showMatchDetection = !this.showMatchDetection;
+    if (this.showMatchDetection) {
+      setTimeout(() => this.matchDetectionSelect?.select?.focus(), 0);
+    }
+  }
+
+  protected get toggleTitle() {
+    return this.showMatchDetection
+      ? this.i18nService.t("hideMatchDetection", this.uriForm.value.uri)
+      : this.i18nService.t("showMatchDetection", this.uriForm.value.uri);
+  }
+
+  // NG_VALUE_ACCESSOR implementation
+  private onChange: any = () => {};
+  private onTouched: any = () => {};
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private i18nService: I18nService,
+  ) {
+    this.uriForm.valueChanges.pipe(takeUntilDestroyed()).subscribe((value) => {
+      this.onChange(value);
+    });
+
+    this.uriForm.statusChanges.pipe(takeUntilDestroyed()).subscribe(() => {
+      this.onTouched();
+    });
+  }
+
+  focusInput() {
+    if (this.inputElement?.nativeElement) {
+      this.inputElement.nativeElement.focus();
+    }
+  }
+
+  removeUri() {
+    this.remove.emit();
+  }
+
+  // NG_VALUE_ACCESSOR implementation
+  writeValue(value: any): void {
+    if (value) {
+      this.uriForm.setValue(
+        {
+          uri: value.uri ?? "",
+          matchDetection: value.match ?? null,
+        },
+        { emitEvent: false },
+      );
+    }
+  }
+
+  registerOnChange(fn: () => void): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState?(isDisabled: boolean): void {
+    isDisabled ? this.uriForm.disable() : this.uriForm.enable();
+  }
+}