added password generator tool

src/app/tools/password-generator-history.component.html

@@ -0,0 +1,38 @@
+<div class="modal fade">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2 class="modal-title">{{'passwordHistory' | i18n}}</h2>
+                <button type="button" class="close" data-dismiss="modal" attr.aria-label="{{'close' | i18n}}">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <ul class="list-group list-group-flush" *ngIf="history.length">
+                <li class="list-group-item d-flex" *ngFor="let h of history">
+                    <div>
+                        <div class="password">{{h.password}}</div>
+                        <small class="text-muted">{{h.date | date:'medium'}}</small>
+                    </div>
+                    <div class="ml-auto">
+                        <button class="btn btn-link" appBlurClick title="{{'copyPassword' | i18n}}" (click)="copy(h.password)">
+                            <i class="fa fa-lg fa-clipboard"></i>
+                        </button>
+                    </div>
+                </li>
+            </ul>
+            <div class="modal-body" *ngIf="!history.length">
+                {{'noPasswordsInList' | i18n}}
+            </div>
+            <div class="modal-footer">
+                <button appBlurClick type="button" class="btn btn-outline-secondary" data-dismiss="modal" title="{{'close' | i18n}}">
+                    {{'close' | i18n}}
+                </button>
+                <div class="ml-auto">
+                    <button appBlurClick type="button" (click)="clear()" class="btn btn-outline-danger" title="{{'clear' | i18n}}">
+                        <i class="fa fa-trash-o fa-lg fa-fw"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

src/app/tools/password-generator-history.component.ts

@@ -0,0 +1,24 @@
+import { ToasterService } from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
+
+import { Component } from '@angular/core';
+
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { PasswordGenerationService } from 'jslib/abstractions/passwordGeneration.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+
+import {
+    PasswordGeneratorHistoryComponent as BasePasswordGeneratorHistoryComponent,
+} from 'jslib/angular/components/password-generator-history.component';
+
+@Component({
+    selector: 'app-password-generator-history',
+    templateUrl: 'password-generator-history.component.html',
+})
+export class PasswordGeneratorHistoryComponent extends BasePasswordGeneratorHistoryComponent {
+    constructor(passwordGenerationService: PasswordGenerationService, analytics: Angulartics2,
+        platformUtilsService: PlatformUtilsService, i18nService: I18nService,
+        toasterService: ToasterService) {
+        super(passwordGenerationService, analytics, platformUtilsService, i18nService, toasterService, window);
+    }
+}

src/app/tools/password-generator.component.html

@@ -0,0 +1,63 @@
+<div class="page-header">
+    <h1>{{'passwordGenerator' | i18n}}</h1>
+</div>
+<div class="card card-password bg-light my-4">
+    <div class="card-body">
+        <span>{{password}}</span>
+    </div>
+</div>
+<h2>{{'options' | i18n}}</h2>
+<div class="row">
+    <div class="form-group col-4">
+        <label for="length">{{'length' | i18n}}</label>
+        <input id="length" class="form-control" type="number" min="5" max="128" [(ngModel)]="options.length" (input)="saveOptions()">
+        <input id="lengthRange" class="mt-2" type="range" min="5" max="128" step="1" [(ngModel)]="options.length" (change)="sliderChanged()"
+            (input)="sliderInput()">
+    </div>
+    <div class="form-group col-4">
+        <label for="min-number">{{'minNumbers' | i18n}}</label>
+        <input id="min-number" class="form-control" type="number" min="0" max="9" (input)="saveOptions()" [(ngModel)]="options.minNumber">
+    </div>
+    <div class="form-group col-4">
+        <label for="min-special">{{'minSpecial' | i18n}}</label>
+        <input id="min-special" class="form-control" type="number" min="0" max="9" (input)="saveOptions()" [(ngModel)]="options.minSpecial">
+    </div>
+</div>
+<div class="form-group">
+    <div class="form-check">
+        <input id="uppercase" class="form-check-input" type="checkbox" (change)="saveOptions()" [(ngModel)]="options.uppercase">
+        <label for="uppercase" class="form-check-label">A-Z</label>
+    </div>
+    <div class="form-check">
+        <input id="lowercase" class="form-check-input" type="checkbox" (change)="saveOptions()" [(ngModel)]="options.lowercase">
+        <label for="lowercase" class="form-check-label">a-z</label>
+    </div>
+    <div class="form-check">
+        <input id="numbers" class="form-check-input" type="checkbox" (change)="saveOptions()" [(ngModel)]="options.number">
+        <label for="numbers" class="form-check-label">0-9</label>
+    </div>
+    <div class="form-check">
+        <input id="special" class="form-check-input" type="checkbox" (change)="saveOptions()" [(ngModel)]="options.special">
+        <label for="special" class="form-check-label">!@#$%^&amp;*</label>
+    </div>
+    <div class="form-check">
+        <input id="ambiguous" class="form-check-input" type="checkbox" (change)="saveOptions()" [(ngModel)]="avoidAmbiguous">
+        <label for="ambiguous" class="form-check-label">{{'ambiguous' | i18n}}</label>
+    </div>
+</div>
+<div class="d-flex">
+    <div>
+        <button type="button" class="btn btn-outline-primary" appBlurClick (click)="regenerate()">
+            {{'regeneratePassword' | i18n}}
+        </button>
+        <button type="button" class="btn btn-outline-primary" appBlurClick (click)="copy()">
+            {{'copyPassword' | i18n}}
+        </button>
+    </div>
+    <div class="ml-auto">
+        <button type="button" class="btn btn-link" appBlurClick (click)="history()">
+            {{'passwordHistory' | i18n}}
+        </button>
+    </div>
+</div>
+<ng-template #historyTemplate></ng-template>

src/app/tools/password-generator.component.ts

@@ -0,0 +1,50 @@
+import { ToasterService } from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
+
+import {
+    Component,
+    ComponentFactoryResolver,
+    ViewChild,
+    ViewContainerRef,
+} from '@angular/core';
+
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { PasswordGenerationService } from 'jslib/abstractions/passwordGeneration.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+
+import {
+    PasswordGeneratorComponent as BasePasswordGeneratorComponent,
+} from 'jslib/angular/components/password-generator.component';
+
+import { ModalComponent } from '../modal.component';
+import { PasswordGeneratorHistoryComponent } from './password-generator-history.component';
+
+@Component({
+    selector: 'app-password-generator',
+    templateUrl: 'password-generator.component.html',
+})
+export class PasswordGeneratorComponent extends BasePasswordGeneratorComponent {
+    @ViewChild('historyTemplate', { read: ViewContainerRef }) historyModalRef: ViewContainerRef;
+
+    private modal: ModalComponent = null;
+
+    constructor(passwordGenerationService: PasswordGenerationService, analytics: Angulartics2,
+        platformUtilsService: PlatformUtilsService, i18nService: I18nService,
+        toasterService: ToasterService, private componentFactoryResolver: ComponentFactoryResolver) {
+        super(passwordGenerationService, analytics, platformUtilsService, i18nService, toasterService, window);
+    }
+
+    history() {
+        if (this.modal != null) {
+            this.modal.close();
+        }
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.historyModalRef.createComponent(factory).instance;
+        this.modal.show<PasswordGeneratorHistoryComponent>(PasswordGeneratorHistoryComponent, this.historyModalRef);
+
+        this.modal.onClosed.subscribe(async () => {
+            this.modal = null;
+        });
+    }
+}

src/app/tools/tools.component.html

@@ -4,11 +4,15 @@
             <div class="card">
                 <div class="card-header">Tools</div>
                 <div class="list-group list-group-flush">
+                    <a routerLink="generator" class="list-group-item" routerLinkActive="active">
+                        Password Generator
+                    </a>
                     <a routerLink="import" class="list-group-item" routerLinkActive="active">
                         Import
                     </a>
                     <a routerLink="export" class="list-group-item" routerLinkActive="active">
-                        Export</a>
+                        Export
+                    </a>
                 </div>
             </div>
         </div>