From c2df5c608e1eb713c5fcc053ef2b78bd360a6740 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rui=20Tom=C3=A9?=
 <108268980+r-tome@users.noreply.github.com>
Date: Tue, 18 Oct 2022 16:50:22 +0100
Subject: [PATCH] [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
---
 .../organizations/manage/scim.component.html    | 17 ++++++++++++++++-
 .../app/organizations/manage/scim.component.ts  |  6 ++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/bitwarden_license/bit-web/src/app/organizations/manage/scim.component.html b/bitwarden_license/bit-web/src/app/organizations/manage/scim.component.html
index 3d27448753f..5dafe8c536d 100644
--- a/bitwarden_license/bit-web/src/app/organizations/manage/scim.component.html
+++ b/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"
diff --git a/bitwarden_license/bit-web/src/app/organizations/manage/scim.component.ts b/bitwarden_license/bit-web/src/app/organizations/manage/scim.component.ts
index 015fb770e93..58c75874fdb 100644
--- a/bitwarden_license/bit-web/src/app/organizations/manage/scim.component.ts
+++ b/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) {