[AC-2405] migrate SCIM component (#8781)

* migrating scim authentication component

* migrating scim authentication component

* migrating scim authentication component

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
       type="button"
       bitSuffix
-        [disabled]="$any(rotateButton).loading"
       [bitIconButton]="showScimKey ? 'bwi-eye-slash' : 'bwi-eye'"
-        (click)="toggleScimKey()"
+      [bitAction]="toggleScimKey"
       [appA11yTitle]="'toggleVisibility' | i18n"
     ></button>
-    </ng-container>
-    <ng-container #rotateButton [appApiAction]="rotatePromise">
-      <!-- TODO: Convert to async actions -->
     <button
-        [loading]="$any(rotateButton).loading"
       type="button"
       bitSuffix
       bitIconButton="bwi-generate"
-        (click)="rotateScimKey()"
+      [bitAction]="rotateScimKey"
+      bitFormButton
       [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);
-
-    try {
-      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;
+  copyScimKey = async () => {
-  }
-
-  async copyScimKey() {
     this.platformUtilsService.copyToClipboard(this.formData.get("clientSecret").value);
-  }
+  };
 
-  async submit() {
+  submit = async () => {
-    try {
     const request = new OrganizationConnectionRequest(
       this.organizationId,
       OrganizationConnectionType.Scim,
       true,
       new ScimConfigRequest(this.enabled.value),
     );
+    let response: OrganizationConnectionResponse<ScimConfigApi>;
+
     if (this.existingConnectionId == null) {
-        this.formPromise = this.apiService.createOrganizationConnection(request, ScimConfigApi);
+      response = await this.apiService.createOrganizationConnection(request, ScimConfigApi);
     } else {
-        this.formPromise = this.apiService.updateOrganizationConnection(
+      response = await 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;
-  }
 
   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;