1.0.3 • Published 1 year ago
urca-password-strength v1.0.3
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>