Components: Password input with visibility toggle

[feloy]

Bug, feature request, or proposal:

feature request

What is the expected behavior?

I will need to implement a password input field with visibility toggle support, as specified in material design specs: https://material.google.com/components/text-fields.html#text-fields-password-input

I wonder if it could be interesting to implement this directly in the Material2 Library. If this is the case, with an md-input attribute called md-visibility-toggle?

What is the use-case or motivation for changing an existing behavior?

Material Design Spec not yet implemented in Material2

Is there anything else we should know?

I can work on the implementation but would need some advice on the specifications.

[jelbourn]

You can do this by binding to the type property of the input:

<input [type]="showPassword.checked ? 'text' : 'password'">
<md-checkbox #showPassword>Show password</md-checkbox>

[SuperiorJT]

Maybe I'm missing something here, but the current solution for this doesn't match the design spec. Is it possible for a proper implementation of this to be added to the roadmap?

[hisankaran]

@SuperiorJT Please check if this is the one you are looking for: https://material.angular.io/components/form-field/overview#prefix-amp-suffix

[AnthonyNahas]

Take a look at @angular-material-extensions/password-strength.

The library provides a prebuilt material password toggle visibility component with one single line of code

• short version

 <mat-pass-toggle-visibility #toggle matSuffix></mat-pass-toggle-visibility>
  <!-- THERE ABOVE ;)-->
  <input matInput #password
         [type]="toggle.type"
         required
         placeholder="Password">

• full version

<mat-form-field appearance="outline" style="width: 100%" [color]="passwordComponent.color">
  <mat-label>Password</mat-label>
  <!-- HERE DOWN :D-->
  <mat-pass-toggle-visibility #toggle matSuffix></mat-pass-toggle-visibility>
  <!-- THERE ABOVE ;)-->
  <input matInput #password
         [type]="toggle.type"
         required
         placeholder="Password">
  <mat-hint align="end" aria-live="polite">
    {{password.value.length}} / 25
  </mat-hint>
</mat-form-field>

<mat-password-strength #passwordComponent
                                   (onStrengthChanged)="onStrengthChanged($event)"
                                   [password]="password.value">
</mat-password-strength>

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}