[Feat] Mask sensitive values displayed in the NeuVector UI under the SAML configuration, such as certificates, group names, and tenant ID

Author: lsongsuse

admin/webapp/websrc/app/routes/settings/common/group-domain-role/group-domain-role.component.html

@@ -32,10 +32,25 @@
   </ng-container>
   <ng-container matColumnDef="group">
     <mat-header-cell *matHeaderCellDef class="group">{{
-      'ldap.gridHeader.GROUP' | translate
-    }}</mat-header-cell>
-    <mat-cell *matCellDef="let element" class="group">
-      {{ element.group }}
+        'ldap.gridHeader.GROUP' | translate
+      }}</mat-header-cell>
+    <mat-cell *matCellDef="let element" class="group d-flex align-items-center">
+      <span [class.password-masked]="!element.isGroupVisible">
+        {{ element.group }}
+      </span>
+
+      <button
+        *ngIf="element.group"
+        (click)="element.isGroupVisible = !element.isGroupVisible"
+        aria-label="Visibility icon to toggle visibility"
+        mat-icon-button
+        class="ms-2"
+        style="width: 24px; height: 24px; line-height: 24px; padding: 0;"
+        type="button">
+        <i class="eos-icons" style="font-size: 16px;">
+          {{ element.isGroupVisible ? 'visibility' : 'visibility_off' }}
+        </i>
+      </button>
     </mat-cell>
   </ng-container>
   <ng-container matColumnDef="globalRole">

admin/webapp/websrc/app/routes/settings/common/group-domain-role/group-domain-role.component.scss

@@ -67,3 +67,7 @@ i {
   pointer-events: auto;
   cursor: grabbing;
 }
+
+.password-masked {
+  -webkit-text-security: disc;
+}

admin/webapp/websrc/app/routes/settings/saml/saml-form/saml-form.component.html

@@ -74,16 +74,27 @@
         <mat-label>{{ 'okta.SLO_CERT' | translate }}</mat-label>
         <textarea
           cdkTextareaAutosize
+          [class.password-masked]="!sloCertVisible"
           formControlName="signing_cert"
           matInput></textarea>
       </mat-form-field>
+      <button
+        (click)="sloCertVisible = !sloCertVisible"
+        *ngIf="samlForm.controls.signing_cert.value"
+        aria-label="Visibility icon to toggle visibility"
+        class="mb-4"
+        mat-icon-button
+        type="button">
+        <i class="eos-icons">{{ sloCertVisible ? 'visibility' : 'visibility_off' }}</i>
+      </button>
     </div>
     <div class="col-12 col-md-6 d-flex align-items-center my-2 my-md-0">
       <i class="eos-icons me-3 text-primary mb-4">vpn_key</i>
       <mat-form-field class="w-100">
         <mat-label>{{ 'okta.SLO_KEY' | translate }}</mat-label>
         <textarea
           cdkTextareaAutosize
+          [class.password-masked]="!sloKeyVisible"
           formControlName="signing_key"
           matInput></textarea>
         <mat-icon
@@ -94,6 +105,15 @@
           info
         </mat-icon>
       </mat-form-field>
+      <button
+        (click)="sloKeyVisible = !sloKeyVisible"
+        *ngIf="samlForm.controls.signing_key.value"
+        aria-label="Visibility icon to toggle visibility"
+        class="mb-4"
+        mat-icon-button
+        type="button">
+        <i class="eos-icons">{{ sloKeyVisible ? 'visibility' : 'visibility_off' }}</i>
+      </button>
     </div>
     <ng-container formArrayName="x509_certs">
       <div
@@ -105,22 +125,43 @@
             <mat-label>{{ 'okta.CERTIFICATE' | translate }}</mat-label>
             <textarea
               cdkTextareaAutosize
+              [class.password-masked]="!x509CertVisible[i]"
               [formControlName]="i"
               matInput></textarea>
             <mat-error *ngIf="x509_certs.controls[0].hasError('required')">
               {{ 'general.REQUIRED' | translate }}
             </mat-error>
           </mat-form-field>
+          <button
+            (click)="x509CertVisible[i] = !x509CertVisible[i]"
+            *ngIf="x509_certs.controls[i].value"
+            aria-label="Visibility icon to toggle visibility"
+            class="mb-4"
+            mat-icon-button
+            type="button">
+            <i class="eos-icons">{{ x509CertVisible[i] ? 'visibility' : 'visibility_off' }}</i>
+          </button>
         </ng-container>
+
         <ng-template #extraCertTemplate>
           <i class="eos-icons me-3 text-primary invisible mb-4">verified</i>
           <mat-form-field class="w-100">
             <mat-label>{{ 'okta.EXTRA_CERT' | translate }}</mat-label>
             <textarea
               cdkTextareaAutosize
+              [class.password-masked]="!x509CertVisible[i]"
               [formControlName]="i"
               matInput></textarea>
           </mat-form-field>
+          <button
+            (click)="x509CertVisible[i] = !x509CertVisible[i]"
+            *ngIf="x509_certs.controls[i].value"
+            aria-label="Visibility icon to toggle visibility"
+            class="mb-4"
+            mat-icon-button
+            type="button">
+            <i class="eos-icons">{{ x509CertVisible[i] ? 'visibility' : 'visibility_off' }}</i>
+          </button>
           <button
             (click)="removeExtraCert(i)"
             aria-label="Remove extra X509_cert"
@@ -132,6 +173,7 @@
         </ng-template>
       </div>
     </ng-container>
+
     <div
       class="col-12 d-flex align-items-center"
       *ngIf="x509_certs.length <= 3">

admin/webapp/websrc/app/routes/settings/saml/saml-form/saml-form.component.scss

@@ -8,3 +8,7 @@
 .icon-16 {
   font-size: 16px;
 }
+
+.password-masked {
+  -webkit-text-security: disc;
+}

admin/webapp/websrc/app/routes/settings/saml/saml-form/saml-form.component.ts

@@ -23,7 +23,6 @@ import { NotificationService } from '@services/notification.service';
 import { TranslateService } from '@ngx-translate/core';
 import { Observable } from 'rxjs';
 import { AuthUtilsService } from '@common/utils/auth.utils';
-import { MatSlideToggleChange } from '@angular/material/slide-toggle';
 
 @Component({
   standalone: false,
@@ -40,6 +39,9 @@ export class SamlFormComponent implements OnInit, OnChanges {
   groupMappedRoles: GroupMappedRole[] = [];
   serverName = 'saml1';
   passwordVisible = false;
+  sloCertVisible = false;
+  sloKeyVisible = false;
+  x509CertVisible: boolean[] = [];
   samlRedirectURL!: string;
   samlForm = new FormGroup({
     sso_url: new FormControl(null, [Validators.required, urlValidator()]),
@@ -102,13 +104,15 @@ export class SamlFormComponent implements OnInit, OnChanges {
 
   initForm(): void {
     this.x509_certs.clear();
+    this.x509CertVisible = [];
     const saml = this.samlData.server.servers.find(
       ({ server_type }) => server_type === 'saml'
     );
     if (saml && saml.saml) {
       this.serverName = saml.server_name;
       this.groupMappedRoles = saml.saml.group_mapped_roles || [];
       saml.saml.x509_certs.forEach((x509_cert, idx) => {
+        this.x509CertVisible.push(false);
         this.x509_certs.push(
           new FormControl(
             x509_cert.x509_cert,
@@ -130,6 +134,7 @@ export class SamlFormComponent implements OnInit, OnChanges {
       this.isCreated = false;
     }
     if (!this.x509_certs.length) {
+      this.x509CertVisible.push(false);
       this.x509_certs.push(new FormControl('', [Validators.required]));
     }
   }
@@ -185,10 +190,12 @@ export class SamlFormComponent implements OnInit, OnChanges {
   }
 
   addExtraCert() {
+    this.x509CertVisible.push(false);
     this.x509_certs.push(new FormControl(''));
   }
 
   removeExtraCert(index: number) {
+    this.x509CertVisible.splice(index, 1);
     this.x509_certs.removeAt(index);
   }
 }