AngularJS directive for email inputs, checking against the list of breached accounts via the Have I Been Pwned API. A basic example can be found here.
- Get
angular-pwned-directive.jshowever you see fit (clone this repo, copy-and-paste, whatever). - Put that file somewhere.
- Optionally edit the
timerDelayvalue in that file. - Add
pwnedto any emailinputfield.
You'd want to use this directive in an input field, something like:
<input type="email" name="input" ng-model="myEmail" placeholder="Email Address" pwned />
If the email address is listed in the Have I Been Pwned breached accounts database, then you can check the appropriate $error.ispwned value.
If you add a value to the attribute like:
<input type="email" name="input" ng-model="myEmail" placeholder="Email Address" pwned="pwnedErrorData" />
...then you can use that value in your current $scope, so you can tell the user which breaches their email address is found in. Using this example, you would use $scope.pwnedErrorData. The data is the raw JSON that comes back from the Have I Been Pwned API, so either examine the data structure that comes back or go refer to the API.
- It appears that this directive does not work with the Angular 1.3.x branch. Please use 1.2.2 until further notice. No, I haven't yet filed a bug report with AngularJS...
- The reason behind the
timerDelayis because you probably don't want to hammer the Have I Been Pwned API every time the user types a letter. Put a little delay on it, and it'll do the request when the user has stopped typing fortimerDelaymilliseconds. - This directive does not (yet) support the new paste search API.