Merge branch 'autofill/pm-8322-firefox-inline-autofill-not-propagating-correctly-when-switching-tabs' into autofill/pm-5189-fix-issues-present-with-inline-menu-rendering-in-iframes

apps/web/src/app/admin-console/organizations/policies/policies.component.ts

@@ -1,18 +1,19 @@
 import { Component, OnInit, ViewChild, ViewContainerRef } from "@angular/core";
-import { ActivatedRoute, Router } from "@angular/router";
+import { ActivatedRoute } from "@angular/router";
+import { lastValueFrom } from "rxjs";
 import { first } from "rxjs/operators";
 
-import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { PolicyApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/policy/policy-api.service.abstraction";
 import { PolicyType } from "@bitwarden/common/admin-console/enums";
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
 import { PolicyResponse } from "@bitwarden/common/admin-console/models/response/policy.response";
+import { DialogService } from "@bitwarden/components";
 
 import { PolicyListService } from "../../core/policy-list.service";
 import { BasePolicy } from "../policies";
 
-import { PolicyEditComponent } from "./policy-edit.component";
+import { PolicyEditComponent, PolicyEditDialogResult } from "./policy-edit.component";
 
 @Component({
   selector: "app-org-policies",
@@ -33,11 +34,10 @@ export class PoliciesComponent implements OnInit {
 
   constructor(
     private route: ActivatedRoute,
-    private modalService: ModalService,
     private organizationService: OrganizationService,
     private policyApiService: PolicyApiServiceAbstraction,
     private policyListService: PolicyListService,
-    private router: Router,
+    private dialogService: DialogService,
   ) {}
 
   async ngOnInit() {
@@ -83,21 +83,17 @@ export class PoliciesComponent implements OnInit {
   }
 
   async edit(policy: BasePolicy) {
-    const [modal] = await this.modalService.openViewRef(
+    const dialogRef = PolicyEditComponent.open(this.dialogService, {
-      PolicyEditComponent,
+      data: {
-      this.editModalRef,
+        policy: policy,
-      (comp) => {
+        organizationId: this.organizationId,
-        comp.policy = policy;
+        policiesEnabledMap: this.policiesEnabledMap,
-        comp.organizationId = this.organizationId;
-        comp.policiesEnabledMap = this.policiesEnabledMap;
-        // eslint-disable-next-line rxjs-angular/prefer-takeuntil
-        comp.onSavedPolicy.subscribe(() => {
-          modal.close();
-          // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
-          // eslint-disable-next-line @typescript-eslint/no-floating-promises
-          this.load();
-        });
       },
-    );
+    });
+
+    const result = await lastValueFrom(dialogRef.closed);
+    if (result === PolicyEditDialogResult.Saved) {
+      await this.load();
+    }
   }
 }

apps/web/src/app/admin-console/organizations/policies/policy-edit.component.html

@@ -1,49 +1,28 @@
-<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="policiesEditTitle">
+<form [formGroup]="formGroup" [bitSubmit]="submit" [appApiAction]="formPromise">
-  <div class="modal-dialog modal-dialog-scrollable" role="document">
+  <bit-dialog [loading]="loading">
-    <form
+    <span bitDialogTitle>{{ "editPolicy" | i18n }} - {{ policy.name | i18n }}</span>
-      class="modal-content"
-      #form
-      (ngSubmit)="submit()"
-      [appApiAction]="formPromise"
-      ngNativeValidate
-    >
-      <div class="modal-header">
-        <h1 class="modal-title" id="policiesEditTitle">
-          {{ "editPolicy" | i18n }} - {{ policy.name | i18n }}
-        </h1>
-        <button
-          type="button"
-          class="close"
-          data-dismiss="modal"
-          appA11yTitle="{{ 'close' | i18n }}"
-        >
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div>
 
-      <div class="modal-body">
+    <ng-container bitDialogContent>
-        <div class="modal-body" *ngIf="loading">
+      <div *ngIf="loading">
-          <i
+        <i
-            class="bwi bwi-spinner bwi-spin text-muted"
+          class="bwi bwi-spinner bwi-spin tw-text-muted"
-            title="{{ 'loading' | i18n }}"
+          title="{{ 'loading' | i18n }}"
-            aria-hidden="true"
+          aria-hidden="true"
-          ></i>
+        ></i>
-          <span class="sr-only">{{ "loading" | i18n }}</span>
+        <span class="tw-sr-only">{{ "loading" | i18n }}</span>
-        </div>
-        <div [hidden]="loading">
-          <p>{{ policy.description | i18n }}</p>
-          <ng-template #policyForm></ng-template>
-        </div>
       </div>
-      <div class="modal-footer">
+      <div [hidden]="loading">
-        <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
+        <p bitTypography="body1">{{ policy.description | i18n }}</p>
-          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+        <ng-template #policyForm></ng-template>
-          <span>{{ "save" | i18n }}</span>
-        </button>
-        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
-          {{ "cancel" | i18n }}
-        </button>
       </div>
-    </form>
+    </ng-container>
-  </div>
+    <ng-container bitDialogFooter>
-</div>
+      <button bitButton buttonType="primary" bitFormButton type="submit">
+        {{ "save" | i18n }}
+      </button>
+      <button bitButton buttonType="secondary" bitDialogClose type="button">
+        {{ "cancel" | i18n }}
+      </button>
+    </ng-container>
+  </bit-dialog>
+</form>

apps/web/src/app/admin-console/organizations/policies/policy-edit.component.ts

@@ -1,33 +1,34 @@
-import {
+import { DIALOG_DATA, DialogConfig, DialogRef } from "@angular/cdk/dialog";
-  ChangeDetectorRef,
+import { ChangeDetectorRef, Component, Inject, ViewChild, ViewContainerRef } from "@angular/core";
-  Component,
+import { FormBuilder } from "@angular/forms";
-  EventEmitter,
-  Input,
-  Output,
-  ViewChild,
-  ViewContainerRef,
-} from "@angular/core";
 
 import { PolicyApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/policy/policy-api.service.abstraction";
 import { PolicyType } from "@bitwarden/common/admin-console/enums";
 import { PolicyRequest } from "@bitwarden/common/admin-console/models/request/policy.request";
 import { PolicyResponse } from "@bitwarden/common/admin-console/models/response/policy.response";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { DialogService } from "@bitwarden/components";
 
 import { BasePolicy, BasePolicyComponent } from "../policies";
 
+export type PolicyEditDialogData = {
+  /** Returns policy abstracts. */
+  policy: BasePolicy;
+  /** Returns a unique organization id  */
+  organizationId: string;
+  /** A map indicating whether each policy type is enabled or disabled. */
+  policiesEnabledMap: Map<PolicyType, boolean>;
+};
+
+export enum PolicyEditDialogResult {
+  Saved = "saved",
+}
 @Component({
   selector: "app-policy-edit",
   templateUrl: "policy-edit.component.html",
 })
 export class PolicyEditComponent {
-  @Input() policy: BasePolicy;
-  @Input() organizationId: string;
-  @Input() policiesEnabledMap: Map<PolicyType, boolean> = new Map<PolicyType, boolean>();
-  @Output() onSavedPolicy = new EventEmitter();
-
   @ViewChild("policyForm", { read: ViewContainerRef, static: true })
   policyFormRef: ViewContainerRef;
 
@@ -39,22 +40,29 @@ export class PolicyEditComponent {
   policyComponent: BasePolicyComponent;
 
   private policyResponse: PolicyResponse;
-
+  formGroup = this.formBuilder.group({
+    enabled: [this.enabled],
+  });
   constructor(
+    @Inject(DIALOG_DATA) protected data: PolicyEditDialogData,
     private policyApiService: PolicyApiServiceAbstraction,
     private i18nService: I18nService,
     private platformUtilsService: PlatformUtilsService,
     private cdr: ChangeDetectorRef,
-    private logService: LogService,
+    private formBuilder: FormBuilder,
+    private dialogRef: DialogRef<PolicyEditDialogResult>,
   ) {}
+  get policy(): BasePolicy {
+    return this.data.policy;
+  }
 
   async ngAfterViewInit() {
     await this.load();
     this.loading = false;
 
-    this.policyComponent = this.policyFormRef.createComponent(this.policy.component)
+    this.policyComponent = this.policyFormRef.createComponent(this.data.policy.component)
       .instance as BasePolicyComponent;
-    this.policyComponent.policy = this.policy;
+    this.policyComponent.policy = this.data.policy;
     this.policyComponent.policyResponse = this.policyResponse;
 
     this.cdr.detectChanges();
@@ -63,8 +71,8 @@ export class PolicyEditComponent {
   async load() {
     try {
       this.policyResponse = await this.policyApiService.getPolicy(
-        this.organizationId,
+        this.data.organizationId,
-        this.policy.type,
+        this.data.policy.type,
       );
     } catch (e) {
       if (e.statusCode === 404) {
@@ -75,30 +83,29 @@ export class PolicyEditComponent {
     }
   }
 
-  async submit() {
+  submit = async () => {
     let request: PolicyRequest;
     try {
-      request = await this.policyComponent.buildRequest(this.policiesEnabledMap);
+      request = await this.policyComponent.buildRequest(this.data.policiesEnabledMap);
     } catch (e) {
       this.platformUtilsService.showToast("error", null, e.message);
       return;
     }
+    this.formPromise = this.policyApiService.putPolicy(
+      this.data.organizationId,
+      this.data.policy.type,
+      request,
+    );
+    await this.formPromise;
+    this.platformUtilsService.showToast(
+      "success",
+      null,
+      this.i18nService.t("editedPolicyId", this.i18nService.t(this.data.policy.name)),
+    );
+    this.dialogRef.close(PolicyEditDialogResult.Saved);
+  };
 
-    try {
+  static open = (dialogService: DialogService, config: DialogConfig<PolicyEditDialogData>) => {
-      this.formPromise = this.policyApiService.putPolicy(
+    return dialogService.open<PolicyEditDialogResult>(PolicyEditComponent, config);
-        this.organizationId,
+  };
-        this.policy.type,
-        request,
-      );
-      await this.formPromise;
-      this.platformUtilsService.showToast(
-        "success",
-        null,
-        this.i18nService.t("editedPolicyId", this.i18nService.t(this.policy.name)),
-      );
-      this.onSavedPolicy.emit();
-    } catch (e) {
-      this.logService.error(e);
-    }
-  }
 }

bitwarden_license/bit-web/src/app/admin-console/organizations/manage/scim.component.html

@@ -1,39 +1,21 @@
 <app-header></app-header>
 
-<p>{{ "scimDescription" | i18n }}</p>
+<p bitTypography="body1">{{ "scimDescription" | i18n }}</p>
 
 <div *ngIf="loading">
   <i
-    class="bwi bwi-spinner bwi-spin text-muted"
+    class="bwi bwi-spinner bwi-spin tw-text-muted"
     title="{{ 'loading' | i18n }}"
     aria-hidden="true"
   ></i>
-  <span class="sr-only">{{ "loading" | i18n }}</span>
+  <span class="tw-sr-only">{{ "loading" | i18n }}</span>
 </div>
-<form
+<form [bitSubmit]="submit" [formGroup]="formData" *ngIf="!loading">
-  #form
+  <bit-form-control>
-  (ngSubmit)="submit()"
+    <input type="checkbox" bitCheckbox [formControl]="enabled" />
-  [appApiAction]="formPromise"
+    <bit-label>{{ "scimEnabledCheckboxDesc" | i18n }}</bit-label>
-  [formGroup]="formData"
+    <bit-hint>{{ "scimEnabledCheckboxDescHelpText" | i18n }}</bit-hint>
-  *ngIf="!loading"
+  </bit-form-control>
->
-  <div class="form-group">
-    <div class="form-check">
-      <input
-        class="form-check-input"
-        type="checkbox"
-        id="enabled"
-        [formControl]="enabled"
-        name="Enabled"
-        aria-describedby="scimEnabledCheckboxDescHelpText"
-      />
-      <label class="form-check-label" for="enabled">{{ "scimEnabledCheckboxDesc" | i18n }}</label>
-      <div id="scimEnabledCheckboxDescHelpText">
-        <small class="form-text text-muted">{{ "scimEnabledCheckboxDescHelpText" | i18n }}</small>
-      </div>
-    </div>
-  </div>
-
   <bit-form-field *ngIf="showScimSettings">
     <bit-label>{{ "scimUrl" | i18n }}</bit-label>
     <input bitInput type="text" formControlName="endpointUrl" />
@@ -41,7 +23,7 @@
       type="button"
       bitSuffix
       bitIconButton="bwi-clone"
-      (click)="copyScimUrl()"
+      [bitAction]="copyScimUrl"
       [appA11yTitle]="'copyScimUrl' | i18n"
     ></button>
   </bit-form-field>
@@ -54,44 +36,32 @@
       formControlName="clientSecret"
       id="clientSecret"
     />
-    <ng-container>
+    <button
-      <button
+      type="button"
-        type="button"
+      bitSuffix
-        bitSuffix
+      [bitIconButton]="showScimKey ? 'bwi-eye-slash' : 'bwi-eye'"
-        [disabled]="$any(rotateButton).loading"
+      [bitAction]="toggleScimKey"
-        [bitIconButton]="showScimKey ? 'bwi-eye-slash' : 'bwi-eye'"
+      [appA11yTitle]="'toggleVisibility' | i18n"
-        (click)="toggleScimKey()"
+    ></button>
-        [appA11yTitle]="'toggleVisibility' | i18n"
+    <button
-      ></button>
+      type="button"
-    </ng-container>
+      bitSuffix
-    <ng-container #rotateButton [appApiAction]="rotatePromise">
+      bitIconButton="bwi-generate"
-      <!-- TODO: Convert to async actions -->
+      [bitAction]="rotateScimKey"
-      <button
+      bitFormButton
-        [loading]="$any(rotateButton).loading"
+      [appA11yTitle]="'rotateScimKey' | i18n"
-        type="button"
+    ></button>
-        bitSuffix
-        bitIconButton="bwi-generate"
-        (click)="rotateScimKey()"
-        [appA11yTitle]="'rotateScimKey' | i18n"
-      ></button>
-    </ng-container>
     <button
       type="button"
       bitSuffix
       bitIconButton="bwi-clone"
-      (click)="copyScimKey()"
+      [bitAction]="copyScimKey"
       [appA11yTitle]="'copyScimKey' | i18n"
     ></button>
     <bit-hint>{{ "scimApiKeyHelperText" | i18n }}</bit-hint>
   </bit-form-field>
 
-  <button
+  <button type="submit" buttonType="primary" bitButton bitFormButton>
-    type="submit"
-    buttonType="primary"
-    bitButton
-    [loading]="form.loading"
-    [disabled]="form.loading"
-  >
     {{ "save" | i18n }}
   </button>
 </form>

bitwarden_license/bit-web/src/app/admin-console/organizations/manage/scim.component.ts

@@ -14,7 +14,6 @@ import { OrganizationApiKeyRequest } from "@bitwarden/common/admin-console/model
 import { OrganizationConnectionRequest } from "@bitwarden/common/admin-console/models/request/organization-connection.request";
 import { ScimConfigRequest } from "@bitwarden/common/admin-console/models/request/scim-config.request";
 import { OrganizationConnectionResponse } from "@bitwarden/common/admin-console/models/response/organization-connection.response";
-import { ApiKeyResponse } from "@bitwarden/common/auth/models/response/api-key.response";
 import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
@@ -29,8 +28,6 @@ export class ScimComponent implements OnInit {
   loading = true;
   organizationId: string;
   existingConnectionId: string;
-  formPromise: Promise<OrganizationConnectionResponse<ScimConfigApi>>;
-  rotatePromise: Promise<ApiKeyResponse>;
   enabled = new FormControl(false);
   showScimSettings = false;
   showScimKey = false;
@@ -82,11 +79,11 @@ export class ScimComponent implements OnInit {
     });
   }
 
-  async copyScimUrl() {
+  copyScimUrl = async () => {
     this.platformUtilsService.copyToClipboard(await this.getScimEndpointUrl());
-  }
+  };
 
-  async rotateScimKey() {
+  rotateScimKey = async () => {
     const confirmed = await this.dialogService.openSimpleDialog({
       title: { key: "rotateScimKey" },
       content: { key: "rotateScimKeyWarning" },
@@ -102,62 +99,50 @@ export class ScimComponent implements OnInit {
     request.type = OrganizationApiKeyType.Scim;
     request.masterPasswordHash = "N/A";
 
-    this.rotatePromise = this.organizationApiService.rotateApiKey(this.organizationId, request);
+    const response = await this.organizationApiService.rotateApiKey(this.organizationId, request);
+    this.formData.setValue({
+      endpointUrl: await this.getScimEndpointUrl(),
+      clientSecret: response.apiKey,
+    });
+    this.platformUtilsService.showToast("success", null, this.i18nService.t("scimApiKeyRotated"));
+  };
 
-    try {
+  copyScimKey = async () => {
-      const response = await this.rotatePromise;
-      this.formData.setValue({
-        endpointUrl: await this.getScimEndpointUrl(),
-        clientSecret: response.apiKey,
-      });
-      this.platformUtilsService.showToast("success", null, this.i18nService.t("scimApiKeyRotated"));
-    } catch {
-      // Logged by appApiAction, do nothing
-    }
-
-    this.rotatePromise = null;
-  }
-
-  async copyScimKey() {
     this.platformUtilsService.copyToClipboard(this.formData.get("clientSecret").value);
-  }
+  };
 
-  async submit() {
+  submit = async () => {
-    try {
+    const request = new OrganizationConnectionRequest(
-      const request = new OrganizationConnectionRequest(
+      this.organizationId,
-        this.organizationId,
+      OrganizationConnectionType.Scim,
-        OrganizationConnectionType.Scim,
+      true,
-        true,
+      new ScimConfigRequest(this.enabled.value),
-        new ScimConfigRequest(this.enabled.value),
+    );
+    let response: OrganizationConnectionResponse<ScimConfigApi>;
+
+    if (this.existingConnectionId == null) {
+      response = await this.apiService.createOrganizationConnection(request, ScimConfigApi);
+    } else {
+      response = await this.apiService.updateOrganizationConnection(
+        request,
+        ScimConfigApi,
+        this.existingConnectionId,
       );
-      if (this.existingConnectionId == null) {
-        this.formPromise = this.apiService.createOrganizationConnection(request, ScimConfigApi);
-      } else {
-        this.formPromise = this.apiService.updateOrganizationConnection(
-          request,
-          ScimConfigApi,
-          this.existingConnectionId,
-        );
-      }
-      const response = (await this.formPromise) as OrganizationConnectionResponse<ScimConfigApi>;
-      await this.setConnectionFormValues(response);
-      this.platformUtilsService.showToast("success", null, this.i18nService.t("scimSettingsSaved"));
-    } catch (e) {
-      // Logged by appApiAction, do nothing
     }
 
-    this.formPromise = null;
+    await this.setConnectionFormValues(response);
-  }
+    this.platformUtilsService.showToast("success", null, this.i18nService.t("scimSettingsSaved"));
+  };
 
   async getScimEndpointUrl() {
     const env = await firstValueFrom(this.environmentService.environment$);
     return env.getScimUrl() + "/" + this.organizationId;
   }
 
-  toggleScimKey() {
+  toggleScimKey = () => {
     this.showScimKey = !this.showScimKey;
     document.getElementById("clientSecret").focus();
-  }
+  };
 
   private async setConnectionFormValues(connection: OrganizationConnectionResponse<ScimConfigApi>) {
     this.existingConnectionId = connection?.id;

bitwarden_license/bit-web/src/app/admin-console/policies/maximum-vault-timeout.component.html

@@ -2,58 +2,31 @@
   {{ "requireSsoPolicyReq" | i18n }}
 </app-callout>
 
-<div class="form-group">
+<bit-form-control>
-  <div class="form-check">
+  <input type="checkbox" id="enabled" bitCheckbox [formControl]="enabled" />
-    <input
+  <bit-label>{{ "turnOn" | i18n }}</bit-label>
-      class="form-check-input"
+</bit-form-control>
-      type="checkbox"
-      id="enabled"
-      [formControl]="enabled"
-      name="Enabled"
-    />
-    <label class="form-check-label" for="enabled">{{ "turnOn" | i18n }}</label>
-  </div>
-</div>
 
 <div [formGroup]="data">
-  <div class="form-group">
+  <div class="tw-grid tw-grid-cols-12 tw-gap-4">
-    <label for="hours">{{ "maximumVaultTimeoutLabel" | i18n }}</label>
+    <bit-form-field class="tw-col-span-6 !tw-mb-0">
-    <div class="row">
+      <bit-label>{{ "maximumVaultTimeoutLabel" | i18n }}</bit-label>
-      <div class="col-6">
+      <input bitInput type="number" min="0" formControlName="hours" />
-        <input
+      <bit-hint>{{ "hours" | i18n }}</bit-hint>
-          id="hours"
+    </bit-form-field>
-          class="form-control"
+    <bit-form-field class="tw-col-span-6 tw-self-end !tw-mb-0">
-          type="number"
+      <input bitInput type="number" min="0" max="59" formControlName="minutes" />
-          min="0"
+      <bit-hint>{{ "minutes" | i18n }}</bit-hint>
-          name="hours"
+    </bit-form-field>
-          formControlName="hours"
+    <bit-form-field class="tw-col-span-6">
-        />
+      <bit-label>{{ "vaultTimeoutAction" | i18n }}</bit-label>
-        <small>{{ "hours" | i18n }}</small>
+      <bit-select formControlName="action">
-      </div>
+        <bit-option
-      <div class="col-6">
+          *ngFor="let option of vaultTimeoutActionOptions"
-        <input
+          [value]="option.value"
-          id="minutes"
+          [label]="option.name"
-          class="form-control"
+        ></bit-option>
-          type="number"
+      </bit-select>
-          min="0"
+    </bit-form-field>
-          max="59"
-          name="minutes"
-          formControlName="minutes"
-        />
-        <small>{{ "minutes" | i18n }}</small>
-      </div>
-    </div>
-  </div>
-  <div class="form-group">
-    <div class="row">
-      <div class="col-6">
-        <label for="action">{{ "vaultTimeoutAction" | i18n }}</label>
-        <select class="form-control" formControlName="action">
-          <option *ngFor="let o of vaultTimeoutActionOptions" [ngValue]="o.value">
-            {{ o.name }}
-          </option>
-        </select>
-      </div>
-    </div>
   </div>
 </div>