Password Validation

note

If you need a more complex password validation, you can use the BfmPasswordValidationComponent as a building block to create your own password validation.

This component validates a provided password and show a message with which rule not being followed and a checkmark with the rules that are being followed.

It is used in the BfmSignUpFormComponent.

They follow a pre defined set of rules to validate the password. The rules are:

• At least 8 characters
• At least 1 uppercase letter
• At least 1 lowercase letter
• At least 1 number
• At least 1 special character

Usage

To use the BfmPasswordValidationComponent, you need to import it in your module and use it in your template.

Angular

signup.component.ts

import { BfmPasswordValidationComponent } from "@celerofinancas/ui-auth";

@Component({
  standalone: true,
  selector: 'auth-signup',
  imports: [BfmPasswordValidationComponent],
  templateUrl: './signup.component.html',
})
export class SignUpComponent {}

Then, in your template, you can use the component like this:

<bfm-password-validation password="AbcD"></bfm-password-validation>

Web Component

warning

To use a web component, make sure that you have imported the javascript file in your HTML file. For more information, follow the Web components guide.

Also, have followed the Web Component Configuration guide.

If you want to use the BfmPasswordValidationComponent as a web component, you can import in your HTML file as follows:

your-html-file.html

<bfm-password-validation password="AbcD"></bfm-password-validation>

Inputs

password

The password to be validated.

Type	Default
string	''

customRules

Custom rules to validate the password.

Type	Default
PasswordRule[]	[]

Events

The BfmPasswordValidationComponent component has no events.

Examples

Valid password:

signup.component.html

<bfm-password-validation password="AbcD1234!"></bfm-password-validation>

Invalid password:

signup.component.html

<bfm-password-validation password="abc"></bfm-password-validation>

Custom rules:

HTML

signup.component.html

<bfm-password-validation password="AbcD1234!" [customRules]="customRules"></bfm-password-validation>

TS

signup.component.ts

import { PasswordRule } from "@celerofinancas/ui-auth";

@Component({
  standalone: true,
  selector: 'auth-signup',
  imports: [BfmPasswordValidationComponent],
  templateUrl: './signup.component.html',
})
export class SignUpComponent {
  public customRules: PasswordRule[] = [
    { name: 'At least 10 characters', pattern: /.{10,}/, message: 'At least 10 characters' }
  ];
}