https://github.com/akehir/angular-password-checker
Mirror of:: https://git.akehir.com/akehir/password-checker >>>>> Check out the example::
https://github.com/akehir/angular-password-checker
Last synced: 5 months ago
JSON representation
Mirror of:: https://git.akehir.com/akehir/password-checker >>>>> Check out the example::
- Host: GitHub
- URL: https://github.com/akehir/angular-password-checker
- Owner: akehir
- License: mit
- Created: 2019-03-01T13:27:13.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2025-05-29T13:55:51.000Z (5 months ago)
- Last Synced: 2025-06-07T01:57:20.051Z (5 months ago)
- Language: TypeScript
- Homepage: https://password.akehir.com/
- Size: 2.66 MB
- Stars: 8
- Watchers: 1
- Forks: 2
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-angular - angular-password-checker - Protect your users from re-using a password known to be hacked with this simple Angular directive. (Third Party Components / Form Validation)
- fucking-awesome-angular - angular-password-checker - Protect your users from re-using a password known to be hacked with this simple Angular directive. (Third Party Components / Form Validation)
README
# Angular Pwned Password Checker Directive
Protect your users from re-using a password known to be hacked with this simple Angular directive. Check out the [example page](https://password.akehir.com/) to see how it works. The passwords never leave the browser memory and are not transmitted over the network.
## Getting Started
If you just want to use the library to verify the passwords given by your users, follow the following 4 simple steps. For contributing, or building the library locally, see the section on [building](#building) the library.
Supported Angular Versions
| Angular Version | Password Checker Version |
| ---------------- | ------------------------- |
| 6.x | 1.0.0 |
| 7.x | 2.2.0 |
| 8.x | 3.0.0 |
| 9.x | 4.0.0 |
| 10.x | 5.0.0 |
| 11.x | 6.0.0 |
| 12.x | 7.0.0 |
| 13.x | 8.0.1 |
| 14.x | 9.0.0 |
| 15.x | 10.0.0 |
| 16.x | 11.0.0 |
| 17.x | 12.0.0 |
| 18.x | 13.0.0 - 13.2.0 |
| 19.x | 14.0.0 |
| 20.x | 20.0.0 |
### Step 1: Install
Install the npm package.
```
npm i @triangular/password-checker
```
### Step 2: Add to NgModule Imports
Then, add the __PasswordCheckerModule__ to the imports of your app.
_If you're using standalone components, you can skip this step._
```typescript
import { NgModule } from '@angular/core';
import { PasswordCheckerModule } from '@triangular/password-checker';
@NgModule({
declarations: [
],
imports: [
PasswordCheckerModule,
],
providers: [],
bootstrap: [],
})
export class AppModule { }
```
### Step 3: Add Directive to an Input
Now you can use the provided directive __pwnedPasswordValidator__ on your reactive forms, to trigger the validation with the pwned password database whenever the form is being validated.
```html
```
You can configure the directive by providing additional input bindings. Currently the API endpoint, the input debounce time, as well as the minimum occurrence of a password to fail the validation are configurable:
```html
```
Alternatively, you can configure your module by using the `PasswordCheckerModule.forRoot()` method.
```typescript
@NgModule({
declarations: [
AppComponent,
ExampleComponent,
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
PasswordCheckerModule.forRoot( {
pwnedPasswordApiCallDebounceTime: 1000,
pwnedPasswordMinimumOccurrenceForError: 4,
pwnedPasswordApi: 'https://api.pwnedpasswords.com/range/',
}),
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
### Step 4: Provide Feedback
Don't forget to provide some feedback to your users:
```html
This password has been seen
{{form.get('password').errors.pwnedPasswordOccurrence | number:'1.0-0' }}
times before
This password has previously appeared in a data breach and should never be used.
If you've ever used it anywhere before, change it!
```
## Building
As a pre-requisite to build the library, you need to install all the dependencies via `npm install` or `yarn`.
### Building the Library
Before the sample app can be run, you need to build the library itself.
```
npm run ng -- build password-checker-lib --progress=false
```
### Building the Sample App
After building the library, it is either possible to build the sample app, via
```
npm run ng -- build example-app --prod --progress=false
```
,or to run the sample app with a local dev server:
```
npm run ng -- serve
```
## Running the tests
### Unit Tests
There are not many tests, but those that are can be run with:
```
npm run test -- --no-watch --progress=false --code-coverage --browsers ChromeHeadless
```
### And coding style tests
The project follows the [angular style guide](https://angular.io/guide/styleguide) and lints with the following command:
```
npm run lint
```
## Built With
* [Angular](https://github.com/angular/angular) - The web framework used
* [NPM](https://www.npmjs.com/) - Dependency Management
* [Gitlab](https://git.akehir.com) - Source Control & CI Runner
## Contributing
Please read [CONTRIBUTING.md](CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.
## Versioning
We use [SemVer](http://semver.org/) for versioning.
## Authors
* **Raphael Ochsenbein** - *Initial work* - [Akehir](https://github.com/akehir)
See also the list of [contributors](https://github.com/akehir/angular-password-checker/contributors) who participated in this project.
## License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details
## Acknowledgments
* [Pwned Passwords](https://haveibeenpwned.com/Passwords) for providing the API
* [CloudFlare](https://blog.cloudflare.com/validating-leaked-passwords-with-k-anonymity/) For sponsoring the hosting of the API
* [angularindepth](https://blog.angularindepth.com/creating-a-library-in-angular-6-87799552e7e5) for a tutorial for creating an angular library
* [PurpleBooth](https://gist.github.com/PurpleBooth/109311bb0361f32d87a2/) for the readme template