UrcaPasswordStrength

An angular module to show and validate password for Université de Reims Champagne Ardenne.

Requirement

Angular Material dependancie

• @angular/material: ^11.2.13

Module import

• BrowserModule
• FormsModule
• MatIconModule

Usage

In app.module.ts

...
import { UrcaPasswordStrengthModule } from 'urca-password-strength';
...

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    UrcaPasswordStrengthModule,
    ...
  ],
  ...
  bootstrap: [AppComponent]
})
export class AppModule { }

In your file my-component.component.ts

export class ActivationComponent implements OnInit {
...
import { FormControl, Validators } from '@angular/forms';
import { UrcaPasswordStrengthService } from 'urca-password-strength';
...
    password: FormControl;
    //imprt UrcaPasswordStrengthService to use Validator function
    constructor(public pwdService: UrcaPasswordStrengthService) {
        this.password = new FormControl('', [
            Validators.required,
            this.pwdService.urcaValidatorNoDiacritics(),
            this.pwdService.urcaValidatorForbiddenSpecialChar()
        ]);
     }

    //Helper Function to get validators first messages
    getValidatorMessage(errors) {
    const keys = Object.keys(errors);
    if (keys.length > 0) {
      return keys[0] === 'required' ? 'Veuillez renseigner ce champ' : errors[keys[0]].message;
    }
  }
...
}

In your file my-component.component.html

<input #passwordInput type="password" [formControl]="password" matInput  placeholder="Choose your password">
<span class="error" *ngIf="password.invalid">{{getValidatorMessage(password.errors)}}</span>
<urca-password-strength #pwdstr [password]="passwordInput.value"></urca-password-strength>

<!-- Show password strength value -->
<p> Your password strength = {{passwordInput.strength}} / 100 </p>