# ng-password-demo

> A demonstration of the ng-password angular library that provides a collections of tools to test for password strength.

Latest version **1.1.0** (published 2018-07-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install ng-password-demo
pnpm add ng-password-demo
yarn add ng-password-demo
bun add ng-password-demo
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2018-07-30 |
| First published | 2018-07-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 16 |
| Unpacked size | 57.1 KB |
| Known vulnerabilities | 0 (+21 in 3 direct dependencies) |
| Install scripts | no |
| Author | Jakob Pennington |
| Maintainers | jakobpennington |

## Links

- npm: https://www.npmjs.com/package/ng-password-demo
- npm.io page: https://npm.io/package/ng-password-demo

## Dependencies (16)

- [rxjs](https://npm.io/package/rxjs.md) ^6.0.0
- [@clr/ui](https://npm.io/package/@clr/ui.md) ^0.12.6
- [core-js](https://npm.io/package/core-js.md) ^2.5.4
- [zone.js](https://npm.io/package/zone.js.md) ^0.8.26
- [@clr/icons](https://npm.io/package/@clr/icons.md) ^0.12.6
- [@clr/angular](https://npm.io/package/@clr/angular.md) ^0.12.6
- [@angular/core](https://npm.io/package/@angular/core.md) ^6.0.3
- [@angular/http](https://npm.io/package/@angular/http.md) ^6.0.3
- [@angular/forms](https://npm.io/package/@angular/forms.md) ^6.0.3
- [@angular/common](https://npm.io/package/@angular/common.md) ^6.0.3
- [@angular/router](https://npm.io/package/@angular/router.md) ^6.0.3
- [@angular/compiler](https://npm.io/package/@angular/compiler.md) ^6.0.3
- [@angular/animations](https://npm.io/package/@angular/animations.md) ^6.0.3
- [@angular/platform-browser](https://npm.io/package/@angular/platform-browser.md) ^6.0.3
- [@webcomponents/custom-elements](https://npm.io/package/@webcomponents/custom-elements.md) ^1.1.3
- [@angular/platform-browser-dynamic](https://npm.io/package/@angular/platform-browser-dynamic.md) ^6.0.3

## Recent versions

- 1.1.0 (latest) — 2018-07-30

## README

# ng-password

A collection of tools that test password strength.

The demo is an example user registration flow which leverages the Have I Been Pwned API V2 to test for insecure passwords. Rather than requiring users to register a password that meets an arbitrary set of complexity rules, this registration form requires two things:

* The password must be at least 10 characters.
* The password must not be in the Have I Been Pwned database.

[**Demo**](https://jakob.pennington.io/ng-password)

**PS:** The register button does nothing... yet!

## Installation

Install the npm package.

```
npm install ng-password --save
```

Import the PasswordService and PasswordValidator into your ```app.module.ts```. You'll also need to import **HttpClientModule** and **ReactiveFormsModule**.

```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

// ng-password Library
import { PasswordService, PasswordValidator } from 'ng-password';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        HttpClientModule,
        ReactiveFormsModule
    ],
    providers: [
        PasswordService,
        PasswordValidator
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

```

## Usage

Import the PasswordService and PasswordValidator into your component and inject them into the constructor.

```typescript
import { Component, OnInit } from '@angular/core';
import { AbstractControl, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
// HIBP Library
import { PasswordService, PasswordValidator } from 'ng-haveibeenpwned';

@Component({
    selector: 'hibp-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

    ...

    constructor(
        private passwordService: PasswordService,
        private passwordValidator: PasswordValidator,
        private fb: FormBuilder
    ) { }

   ...
```

## Validators

The PasswordValidator currently has three validators:

* **checkPassword:** Test the password against the HIBP API using the non-anonymous **pwnedpassword** API. Returns the number of breaches the password has been pwned in in the **numBreaches** validator response.

* **checkPasswordAnon:** Test the password using the anonymous **pwnedRange** API. In this API, the password is SHA1 hashed and the first five characters are sent to the API. The API responws with the hash-suffixes what have the same hash-prefix, along with the number of breaches the has appeared in. The prefix is then joined with each of the suffixes and compared with the original password hash. **TL;DR** the full password is never sent to the API, protecting your anonymity.

* **matchPasswordValidator:** A form validator that compares two passwords submitted in the password and confirmPassword form fields.

```typescript
// Password minimum length
passwordminLength = 10;

this.registrationForm = this.fb.group(
    {
        email: ['', Validators.required],
        password: ['', [
            Validators.required,
            Validators.minLength(this.passwordminLength)],
            this.passwordValidator.checkPasswordAnon.bind(this.passwordValidator)],
        confirmPassword: ['', Validators.required]
    }, { validator: this.passwordValidator.matchPasswordValidator });
```


## Service

The PasswordService supports each of the API endpoints offered by the Have I Been Pwned V2 API. The services return an observable, so they can be used like this:

```typescript
this.passwordService.pwnedPassword('Password01')
    .subscribe((numBreaches: number) => {
        // Return the number of breaches containing the password
        console.log('This password has appeared in ' + numBreaches + ' breaches.');
    });
```

## Can I use this code?

Of course you can, go your hardest! I'll soon be creating an NPM package so you can easily import the PasswordService and password validator into your own project.

## Thanks

Many thanks to fellow Australian Troy Hunt for creating [Have I Been Pwned](https://haveibeenpwned.com/) and the [API](https://haveibeenpwned.com/API/v2) used in this project. This project has been built using the [Angular CLI](https://github.com/angular/angular-cli) and [Clarity](https://github.com/vmware/clarity).

---
_Source: https://npm.io/package/ng-password-demo · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._