[EC-450] Added show SCIM key toggle button (#3682)

* [EC-450] Added show SCIM key toggle button

* [EC-450] Add id on the showApiKey button

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

@@ -52,7 +52,22 @@
 
   <bit-form-field *ngIf="showScimSettings">
     <bit-label>{{ "scimApiKey" | i18n }}</bit-label>
-    <input bitInput type="text" formControlName="clientSecret" />
+    <input
+      bitInput
+      type="{{ showScimKey ? 'text' : 'password' }}"
+      formControlName="clientSecret"
+      id="clientSecret"
+    />
+    <ng-container>
+      <button type="button" bitSuffix bitButton (click)="toggleScimKey()">
+        <i
+          aria-hidden="true"
+          class="bwi bwi-lg bwi-eye"
+          [ngClass]="{ 'bwi-eye': !showScimKey, 'bwi-eye-slash': showScimKey }"
+          [appA11yTitle]="'toggleVisibility' | i18n"
+        ></i>
+      </button>
+    </ng-container>
     <ng-container #rotateButton [appApiAction]="rotatePromise">
       <button
         [disabled]="rotateButton.loading"

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

@@ -29,6 +29,7 @@ export class ScimComponent implements OnInit {
   rotatePromise: Promise<ApiKeyResponse>;
   enabled = new FormControl(false);
   showScimSettings = false;
+  showScimKey = false;
 
   formData = this.formBuilder.group({
     endpointUrl: new FormControl({ value: "", disabled: true }),
@@ -147,6 +148,11 @@ export class ScimComponent implements OnInit {
     return this.environmentService.getScimUrl() + "/" + this.organizationId;
   }
 
+  toggleScimKey() {
+    this.showScimKey = !this.showScimKey;
+    document.getElementById("clientSecret").focus();
+  }
+
   private async setConnectionFormValues(connection: OrganizationConnectionResponse<ScimConfigApi>) {
     this.existingConnectionId = connection?.id;
     if (connection !== null && connection.config?.enabled) {