Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve password input fields to include a reveal button to view password #4219

Closed
richard-cox opened this issue Apr 14, 2020 · 1 comment · Fixed by #4712
Closed

Improve password input fields to include a reveal button to view password #4219

richard-cox opened this issue Apr 14, 2020 · 1 comment · Fixed by #4712

Comments

@richard-cox
Copy link
Contributor

richard-cox commented Apr 14, 2020

  • Update all type=password input's to use angular's standard (newish) show password process
  • New process looks like
          <mat-form-field>
            <mat-label>Password</mat-label>
            <input matInput formControlName="password" required [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>
    
    which is from src/frontend/packages/core/src/features/endpoints/backup-restore/backup-endpoints/backup- endpoints.component.html (Endpoints Page, click on the the backup/restore icon in the header, select backup, password is
    on the second step
  • Any existing error handling and validation should be kept
@richard-cox
Copy link
Contributor Author

All places where we use input's with type="password" will need updating

  • src/frontend/packages/cloud-foundry/src/features/cloud-foundry/user-invites/configuration-dialog/user-invite-configuration-dialog.component.html
    • Cloud Foundry Page, Summary Card, click on Configure in User Invitation Support section, password is in dialog
  • src/frontend/packages/core/src/features/endpoints/connect-endpoint-dialog/auth-forms/credentials-auth-form.component.html
    • Endpoints Page, action menu item 'connect', password is in dialog
  • src/frontend/packages/core/src/features/login/login-page/login-page.component.html
    • Log in page of Stratos
  • src/frontend/packages/core/src/features/setup/local-account-wizard/local-account-wizard.component.html
    • This is a little more complicated, you will need to comment out UAA_ENDPOINT in your src/config.properties and `default.config.propeties files (then restart jetstream) to enter the setup wizard. From there select 'local' authentication (i think, basically not the UAA option)
  • src/frontend/packages/core/src/features/setup/uaa-wizard/console-uaa-wizard.component.html
    • Use the same process as above, but select the uaa option instead
  • src/frontend/packages/core/src/features/user-profile/edit-profile-info/edit-profile-info.component.html
    • Click on the user profile button top right in the header then `Profile and finally the pen icon
  • src/frontend/packages/example-extensions/src/acme-login/acme-login.component.html
    • Don't worry about this one at the moment

@richard-cox richard-cox assigned richard-cox and unassigned vvaradhan Oct 22, 2020
@richard-cox richard-cox added this to the 4.3.0 milestone Oct 22, 2020
richard-cox added a commit that referenced this issue Oct 22, 2020
- add `show` style button to all input fields
- fixes #4219
@nwmac nwmac changed the title Improve password input fields Improve password input fields by adding a reveal button Oct 23, 2020
@nwmac nwmac changed the title Improve password input fields by adding a reveal button Improve password input fields to include a reveal button to view password Oct 23, 2020
nwmac pushed a commit that referenced this issue Nov 2, 2020
* Improve password input fields
- add `show` style button to all input fields
- fixes #4219

* Move as much as possible into component
- matSuffix directive must remain in parent element to work
- cannot then bump that content into a directive off of the input
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants