Skip to content

Commit

Permalink
📦 NEW: Standalone + transform boolean input prop (Angular v17 feature…
Browse files Browse the repository at this point in the history 
…s) (#750)

* 📦 NEW: standalone + transform boolean input prop

* 📦 NEW: provider function to easily import Zxvbn for PSM

* 📦 NEW: examples using standalone components and modules

* 📖 DOC: update docs

* 🚀 RELEASE: v11.0.0

* 🐛 FIX: unit test cases
  • Loading branch information
@antoantonyk
antoantonyk committed Nov 12, 2023
1 parent acb07fb commit a1e2564
Show file tree
Hide file tree
Showing 35 changed files with 483 additions and 544 deletions.
135 changes: 79 additions & 56 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,9 @@ Need lib for Vue.js? [Click here](https://github.com/antoantonyk/vue-password-st
```html
<password-strength-meter [password]="password"></password-strength-meter>
```

[stackblitz](https://stackblitz.com/edit/stackblitz-starters-tz9tse?file=src%2Fmain.ts)

## Get Started

**Step 1:** npm install (For Angular v17)
Expand All @@ -38,73 +40,86 @@ npm install @zxcvbn-ts/core@^3.0.0 @zxcvbn-ts/language-en@^3.0.0 angular-passwor

**Optional Packages:** zxcvbn packagase are not required if PasswordStrengthMeterModule is using with a custom implementation of IPasswordStrengthMeterService .

**Step 2:** Import Password Strength Meter Module into your app module
**Step 2:** Use the provideZxvbnServiceForPSM in appConfig

```ts
....
import { PasswordStrengthMeterModule } from 'angular-password-strength-meter';
import { DEFAULT_PSM_OPTIONS } from 'angular-password-strength-meter/zxcvbn';
import { bootstrapApplication } from '@angular/platform-browser';
import { ApplicationConfig } from '@angular/core';
import { provideZxvbnServiceForPSM } from 'angular-password-strength-meter/zxcvbn';
....

@NgModule({
...
imports: [
....
PasswordStrengthMeterModule.forRoot(DEFAULT_PSM_OPTIONS)
],
....
})
export class AppModule { }
export const appConfig: ApplicationConfig = {
providers: [provideZxvbnServiceForPSM()],
};

bootstrapApplication(AppComponent, appConfig).catch((err) =>
console.error(err)
);

```

**Step 3:** use the password-strength-meter component in your app.component.ts
**Step 3:** Import the PasswordStrengthMeterComponent component in your app.component.ts

```ts
<password-strength-meter [password]="password"></password-strength-meter>
....
import { PasswordStrengthMeterComponent } from 'angular-password-strength-meter';
....

@Component({
selector: 'app-root',
standalone: true,
imports: [
CommonModule,
PasswordStrengthMeterComponent,
],
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
password: string = '';
}

```

## Use custom zxcvbn options for the password strength meter
**Step 4:** use the password-strength-meter component in your app.component.html

```html
<password-strength-meter [password]="password" enableFeedback />
```

You can override the default zxcvbn options by providing the PSM_CONFIG.
## Use custom zxcvbn options for the password strength meter

Refer to the [zxcvbn documentation](https://zxcvbn-ts.github.io/zxcvbn/guide/getting-started) for more information.
You can override the default zxcvbn options by providing the config to provideZxvbnServiceForPSM(config?: ZxvbnConfigType)

```ts
....
import { PasswordStrengthMeterModule} from 'angular-password-strength-meter';
import { DEFAULT_PSM_OPTIONS, ZXCVBN_CONFIG } from 'angular-password-strength-meter/zxcvbn';
import zxcvbnCommonPackage from '@zxcvbn-ts/language-common'
import zxcvbnEnPackage from '@zxcvbn-ts/language-en'
import { bootstrapApplication } from '@angular/platform-browser';
import { ApplicationConfig } from '@angular/core';

import { translations } from '@zxcvbn-ts/language-en';
import { provideZxvbnServiceForPSM, ZxvbnConfigType } from 'angular-password-strength-meter/zxcvbn';
....

@NgModule({
...
imports: [
....
PasswordStrengthMeterModule.forRoot(DEFAULT_PSM_OPTIONS)
],
providers: [
{
provide: ZXCVBN_CONFIG,
useValue: {
translations: zxcvbnEnPackage.translations,
graphs: zxcvbnCommonPackage.adjacencyGraphs,
dictionary: {
...zxcvbnCommonPackage.dictionary,
...zxcvbnEnPackage.dictionary,
},
}
}
],
....
})
export class AppModule { }
const zxvbnConfig: ZxvbnConfigType = {
translations: translations,
};

export const appConfig: ApplicationConfig = {
providers: [provideZxvbnServiceForPSM(zxvbnConfig)],
};

bootstrapApplication(AppComponent, appConfig).catch((err) =>
console.error(err)
);

```

Refer to the [zxcvbn documentation](https://zxcvbn-ts.github.io/zxcvbn/guide/getting-started) for more information.

## Use custom password strength meter service

You can override the default password strength meter service by providing the [Custom Service class](./projects/password-strength-meter-showcase/src/app/custom-psm-service.service.ts) as follows.
You can override the default password strength meter service by providing the [Custom Service class](./projects/password-strength-meter-showcase/src/app/services/custom-psm-service/custom-psm-service.service.ts)

```ts
....
Expand Down Expand Up @@ -135,19 +150,27 @@ export class CustomPsmServiceService extends IPasswordStrengthMeterService {
}
....

import { PasswordStrengthMeterModule } from 'angular-password-strength-meter';
import { CustomPsmServiceService } from './custom-psm-service.service';


@NgModule({
...
imports: [
....
PasswordStrengthMeterModule.forRoot({ serviceClass: CustomPsmServiceService })
],
....
@Component({
selector: 'app-custom-service',
standalone: true,
imports: [CommonModule, FormsModule, PasswordStrengthMeterComponent],
providers: [
{
provide: IPasswordStrengthMeterService,
useClass: CustomPsmServiceService,
},
],
templateUrl: './custom-service.component.html',
styleUrl: './custom-service.component.scss',
})
export class AppModule { }
export class CustomServiceComponent {
text: string = '';
score: number | null = null;

public onPasswordStrengthChange(score: number | null) {
this.score = score;
}
}

```

Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "password-strength-meter",
"version": "10.0.0",
"version": "11.0.0",
"scripts": {
"ng": "ng",
"serve": "ng serve",
Expand Down
109 changes: 30 additions & 79 deletions projects/password-strength-meter-showcase/src/app/app.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,88 +1,39 @@
<form
class="form-signup needs-validation"
[formGroup]="userForm"
(ngSubmit)="onSubmit()"
novalidate
>
<div class="text-center mb-4">
<h1 class="h3 mb-3 font-weight-normal">Password Strength Meter - Demo</h1>
<p>
To display the strength of the password with a visual feedback.
PasswordStrengthMeter use
<a href="https://github.com/dropbox/zxcvbn">zxcvbn</a> to estimate the
strength of the password and also provide a visual feedback with
suggestions and warning messages.
</p>
</div>

<div class="form-label-group">
<section class="container">
<h2 class="title">Password Strength Meter for Angular v17</h2>
<div class="input-field">
<input
type="text"
id="inputFullName"
class="form-control"
[ngClass]="{
'is-invalid': fullName?.invalid && (fullName?.dirty || fullName?.touched)
}"
placeholder="Full name"
formControlName="fullName"
autocomplete="name"
[(ngModel)]="text"
placeholder="Type here to see the progress"
/>
<label for="inputFullName">Full name</label>
<div class="invalid-feedback">Please provide a Full name.</div>
</div>

<div class="form-label-group">
<input
type="text"
id="inputEmail"
class="form-control"
[ngClass]="{
'is-invalid': email?.invalid && (email?.dirty || email?.touched)
}"
placeholder="Email address"
formControlName="email"
autocomplete="email"
<password-strength-meter
[password]="text"
enableFeedback
(strengthChange)="onPasswordStrengthChange($event)"
/>
<label for="inputEmail">Email address</label>
<div class="invalid-feedback">Please provide a email.</div>
</div>

<div class="form-label-group">
<input
type="password"
id="inputPassword"
class="form-control"
[ngClass]="{
'is-invalid': password?.invalid && (password?.dirty || password?.touched)
}"
placeholder="Password"
aria-describedby="passwordHelpBlock"
formControlName="password"
autocomplete="current-password"
/>
<label for="inputPassword">Password</label>
<password-strength-meter
[password]="password?.value"
[numberOfProgressBarItems]="5"
[enableFeedback]="true"
(strengthChange)="onPasswordStrengthChanged($event)"
></password-strength-meter>
<small id="passwordHelpBlock" class="form-text text-muted">
Your password must be 8-20 characters long, contain letters and numbers,
and must not contain spaces, special characters, or emoji.
</small>
<div class="invalid-feedback">Please provide a valid Password.</div>
<p>Score: {{ score }}</p>
</div>

<div class="checkbox mb-3">
<label for="remember-me"> <input id="remember-me" type="checkbox" value="remember-me" /> Remember me </label>
<div class="sub-section">
<h2 class="title">Other examples</h2>
<nav>
<a
class="button"
routerLink="/custom-service"
routerLinkActive="button--active"
>Custom Service</a
>
<a
class="button"
routerLink="/with-module"
routerLinkActive="button--active"
>Using with a module</a
>
</nav>
</div>

<button
id="btn-submit"
class="btn btn-lg btn-primary btn-block"
type="submit"
>
Sign up
</button>
</form>
<div class="sub-pages">
<router-outlet></router-outlet>
</div>
</section>
Loading

0 comments on commit a1e2564

Please sign in to comment.