Convert Client Secret Input Fields to password

src/frontend/packages/cloud-foundry/src/features/cloud-foundry/user-invites/configuration-dialog/user-invite-configuration-dialog.component.html

@@ -1,5 +1,7 @@
 <div class="connection-dialog__loading-wrapper">
-  <mat-progress-bar class="connection-dialog__loading" [color]="(connectingError$ | async) && !(isBusy$ | async) ? 'warn' : 'primary'" [mode]="(isBusy$ | async) ? 'indeterminate' : 'solid'">
+  <mat-progress-bar class="connection-dialog__loading"
+    [color]="(connectingError$ | async) && !(isBusy$ | async) ? 'warn' : 'primary'"
+    [mode]="(isBusy$ | async) ? 'indeterminate' : 'solid'">
   </mat-progress-bar>
 </div>
 <div class="connection-dialog">
@@ -15,13 +17,19 @@ <h2 mat-dialog-title>
         <input matInput placeholder="Client ID" formControlName="clientID">
       </mat-form-field>
       <mat-form-field>
-        <input matInput placeholder="Client Secret" type="password" formControlName="clientSecret">
+        <input matInput placeholder="Client Secret" type="password" formControlName="clientSecret"
+          [type]="!showSecret ? 'password' : 'text'">
+        <button mat-icon-button matSuffix (click)="showSecret = !showSecret" [attr.aria-label]="'Hide Secret'"
+          [attr.aria-pressed]="!showSecret" type='button'>
+          <mat-icon>{{!showSecret ? 'visibility_off' : 'visibility'}}</mat-icon>
+        </button>
       </mat-form-field>
     </mat-dialog-content>
-    <app-dialog-error message="Could not connect, please try again." [show]="connectingError$ | async"></app-dialog-error>
+    <app-dialog-error message="Could not connect, please try again." [show]="connectingError$ | async">
+    </app-dialog-error>
     <mat-dialog-actions class="connection-dialog__actions">
       <button [mat-dialog-close]="true" mat-button color="warn">Cancel</button>
       <button type="submit" [disabled]="!endpointForm.valid" mat-button color="primary">Configure</button>
     </mat-dialog-actions>
   </form>
-</div>
+</div>

src/frontend/packages/cloud-foundry/src/features/cloud-foundry/user-invites/configuration-dialog/user-invite-configuration-dialog.component.ts

@@ -37,6 +37,7 @@ export class UserInviteConfigurationDialogComponent {
   public connectDelay = 1000;
 
   guid: string;
+  public showSecret = false;
 
   constructor(
     public fb: FormBuilder,

src/frontend/packages/core/src/features/endpoints/create-endpoint/create-endpoint-cf-step-1/create-endpoint-cf-step-1.component.html

@@ -22,7 +22,11 @@ <h1 class="create-endpoint__section-title">Advanced Information (Optional)</h1>
     </mat-form-field>
     <mat-form-field>
       <input matInput id="client_secret" name="client_secret" ngModel #clientSecretField="ngModel"
-        placeholder="Client Secret">
+        placeholder="Client Secret" [type]="!show ? 'password' : 'text'">
+      <button mat-icon-button matSuffix (click)="show = !show" [attr.aria-label]="'Hide Secret'"
+        [attr.aria-pressed]="!show">
+        <mat-icon>{{!show ? 'visibility_off' : 'visibility'}}</mat-icon>
+      </button>
     </mat-form-field>
   </div>
   <div *ngIf="endpointTypeSupportsSSO" class="create-endpoint__sso">

src/frontend/packages/core/src/features/endpoints/create-endpoint/create-endpoint-cf-step-1/create-endpoint-cf-step-1.component.ts

@@ -51,6 +51,7 @@ export class CreateEndpointCfStep1Component implements IStepperStep, AfterConten
 
   endpointTypeSupportsSSO = false;
   endpoint: StratosCatalogEndpointEntity;
+  show = false;
 
   constructor(
     activatedRoute: ActivatedRoute,

src/frontend/packages/core/src/features/endpoints/edit-endpoint/edit-endpoint-step/edit-endpoint-step.component.html

@@ -15,14 +15,20 @@ <h1 class="edit-endpoint__section-title">{{definition.label}} Information</h1>
     <div *ngIf="showAdvancedFields" class="edit-endpoint__section">
       <h1 class="edit-endpoint__section-title">Advanced Information (Optional)</h1>
 
-      <mat-checkbox matInput name="setClientInfo" formControlName="setClientInfo">Update Client ID and Client Secret</mat-checkbox>
-
+      <mat-checkbox matInput name="setClientInfo" formControlName="setClientInfo">Update Client ID and Client Secret
+      </mat-checkbox>
+
       <mat-form-field>
         <input matInput id="client_id" name="client_id" formControlName="clientID" placeholder="Client ID" required>
         <mat-error *ngIf="clientID.errors && clientID.errors.required">Client ID is required</mat-error>
       </mat-form-field>
       <mat-form-field>
-        <input matInput id="client_secret" name="client_secret" formControlName="clientSecret" placeholder="Client Secret">
+        <input matInput id="client_secret" name="client_secret" formControlName="clientSecret"
+          placeholder="Client Secret" [type]="!show ? 'password' : 'text'">
+        <button mat-icon-button matSuffix (click)="show = !show" [attr.aria-label]="'Hide Secret'"
+          [attr.aria-pressed]="!show">
+          <mat-icon>{{!show ? 'visibility_off' : 'visibility'}}</mat-icon>
+        </button>
       </mat-form-field>
     </div>
     <div *ngIf="endpointTypeSupportsSSO" class="edit-endpoint__sso">
@@ -36,4 +42,4 @@ <h1 class="edit-endpoint__section-title">Advanced Information (Optional)</h1>
       </div>
     </div>
   </form>
-</div>
+</div>

src/frontend/packages/core/src/features/endpoints/edit-endpoint/edit-endpoint-step/edit-endpoint-step.component.ts

@@ -42,6 +42,7 @@ export class EditEndpointStepComponent implements OnDestroy, IStepperStep {
   existingEndpointNames$: Observable<string[]>;
   formChangeSub: Subscription;
   setClientInfo = false;
+  show = false;
 
   constructor(
     activatedRoute: ActivatedRoute,

src/frontend/packages/core/src/features/setup/uaa-wizard/console-uaa-wizard.component.html

@@ -20,7 +20,12 @@ <h1>{{title}} Setup with Cloud Foundry UAA</h1>
                 <input matInput formControlName="clientId" placeholder="Client ID">
               </mat-form-field>
               <mat-form-field>
-                <input matInput formControlName="clientSecret" placeholder="Client Secret">
+                <input matInput formControlName="clientSecret" placeholder="Client Secret"
+                  [type]="!show ? 'password' : 'text'">
+                <button mat-icon-button matSuffix (click)="show = !show" [attr.aria-label]="'Hide password'"
+                  [attr.aria-pressed]="!show">
+                  <mat-icon>{{!show ? 'visibility_off' : 'visibility'}}</mat-icon>
+                </button>
               </mat-form-field>
             </div>
             <p class="uaa-wizard__form-section">Enter the username and password of an admin user (this is used to
@@ -31,7 +36,12 @@ <h1>{{title}} Setup with Cloud Foundry UAA</h1>
                 <input matInput formControlName="adminUsername" placeholder="Admin Username">
               </mat-form-field>
               <mat-form-field>
-                <input matInput type="password" formControlName="adminPassword" placeholder="Admin Password">
+                <input matInput type="password" formControlName="adminPassword" placeholder="Admin Password"
+                  [type]="!showPassword ? 'password' : 'text'">
+                <button mat-icon-button matSuffix (click)="showPassword = !showPassword"
+                  [attr.aria-label]="'Hide password'" [attr.aria-pressed]="!showPassword">
+                  <mat-icon>{{!showPassword ? 'visibility_off' : 'visibility'}}</mat-icon>
+                </button>
               </mat-form-field>
             </div>
             <!-- Single Sign-on -->

src/frontend/packages/core/src/features/setup/uaa-wizard/console-uaa-wizard.component.ts

@@ -1,16 +1,16 @@
-import { Component, OnInit, ViewEncapsulation, Inject } from '@angular/core';
+import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { delay, filter, map, skipWhile, take } from 'rxjs/operators';
 
 import { VerifySession } from '../../../../../store/src/actions/auth.actions';
+import { SetupConsoleGetScopes, SetupSaveConfig } from '../../../../../store/src/actions/setup.actions';
 import { InternalAppState } from '../../../../../store/src/app-state';
 import { AuthState } from '../../../../../store/src/reducers/auth.reducer';
 import { UAASetupState } from '../../../../../store/src/types/uaa-setup.types';
-import { StepOnNextFunction } from '../../../shared/components/stepper/step/step.component';
-import { SetupConsoleGetScopes, SetupSaveConfig } from '../../../../../store/src/actions/setup.actions';
 import { APP_TITLE } from '../../../core/core.types';
+import { StepOnNextFunction } from '../../../shared/components/stepper/step/step.component';
 import { getSSOClientRedirectURI } from '../../endpoints/endpoint-helpers';
 
 @Component({
@@ -35,6 +35,9 @@ export class ConsoleUaaWizardComponent implements OnInit {
   selectedScope = '';
   applyingSetup$ = new BehaviorSubject<boolean>(false);
 
+  public show = false;
+  public showPassword = false;
+
   uaaFormNext: StepOnNextFunction = () => {
     this.store.dispatch(new SetupConsoleGetScopes({
       uaa_endpoint: this.uaaForm.get('apiUrl').value,