folder listing, add/edit components, cleanup

src/popup/generator/password-generator-history.component.html

@@ -0,0 +1,41 @@
+<header>
+    <div class="left">
+        <button appBlurClick type="button" (click)="close()">
+            <span class="header-icon"><i class="fa fa-chevron-left"></i></span>
+            <span>{{'back' | i18n}}</span>
+        </button>
+    </div>
+    <div class="center">
+        <span class="title">{{'passwordHistory' | i18n}}</span>
+    </div>
+    <div class="right">
+        <button appBlurClick type="button" (click)="clear()">
+            {{'clear' | i18n}}
+        </button>
+    </div>
+</header>
+<content>
+    <div class="box list full-list" *ngIf="history && history.length">
+        <div class="box-content">
+            <div class="box-content-row box-content-row-flex" *ngFor="let h of history">
+                <div class="row-main">
+                    <div class="row-main-content">
+                        <span class="text monospaced no-ellipsis">
+                            {{h.password}}
+                        </span>
+                        <span class="detail">{{h.date | date:'medium'}}</span>
+                    </div>
+                </div>
+                <div class="action-buttons">
+                    <a class="row-btn" href="#" appStopClick title="{{'copyPassword' | i18n}}"
+                       (click)="copy(h.password)">
+                        <i class="fa fa-lg fa-clipboard"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="no-items" *ngIf="!history || !history.length">
+        <p>{{'noPasswordsInList' | i18n}}</p>
+    </div>
+</content>

src/popup/generator/password-generator-history.component.ts

@@ -0,0 +1,29 @@
+import { ToasterService } from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
+
+import { Location } from '@angular/common';
+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, private location: Location) {
+        super(passwordGenerationService, analytics, platformUtilsService, i18nService, toasterService);
+    }
+
+    close() {
+        this.location.back();
+    }
+}

src/popup/generator/password-generator.component.html

@@ -0,0 +1,80 @@
+<header>
+    <div class="left">
+        <app-pop-out [show]="!showSelect"></app-pop-out>
+        <button type="button" appBlurClick (click)="close()" *ngIf="showSelect">{{'cancel' | i18n}}</button>
+    </div>
+    <div class="center">
+        <span class="title">{{'passGen' | i18n}}</span>
+    </div>
+    <div class="right">
+        <button type="button" appBlurClick (click)="select()" *ngIf="showSelect">{{'select' | i18n}}</button>
+    </div>
+</header>
+<content>
+    <div class="password-block">{{password}}</div>
+    <div class="box">
+        <div class="box-content">
+            <a class="box-content-row" href="#" appStopClick appBlurClick
+               (click)="regenerate()">{{'regeneratePassword' | i18n}}</a>
+            <a class="box-content-row" href="#" appStopClick appBlurClick
+               (click)="copy()">{{'copyPassword' | i18n}}</a>
+            <a class="box-content-row box-content-row-flex" routerLink="/generator-history">
+                <div class="row-main">{{'passwordHistory' | i18n}}</div>
+                <i class="fa fa-chevron-right row-sub-icon"></i>
+            </a>
+        </div>
+    </div>
+    <div class="box">
+        <div class="box-header">
+            {{'options' | i18n}}
+        </div>
+        <div class="box-content">
+            <div class="box-content-row box-content-row-slider" appBoxRow>
+                <label for="length">{{'length' | i18n}}</label>
+                <input id="length" type="number" min="5" max="128" [(ngModel)]="options.length"
+                       (input)="saveOptions()">
+                <input id="lengthRange" type="range" min="5" max="128" step="1"
+                       [(ngModel)]="options.length" (change)="sliderChanged()" (input)="sliderInput()">
+            </div>
+            <div class="box-content-row box-content-row-checkbox" appBoxRow>
+                <label for="uppercase">A-Z</label>
+                <input id="uppercase" type="checkbox" (change)="saveOptions()"
+                       [(ngModel)]="options.uppercase">
+            </div>
+            <div class="box-content-row box-content-row-checkbox" appBoxRow>
+                <label for="lowercase">a-z</label>
+                <input id="lowercase" type="checkbox" (change)="saveOptions()"
+                       [(ngModel)]="options.lowercase">
+            </div>
+            <div class="box-content-row box-content-row-checkbox" appBoxRow>
+                <label for="numbers">0-9</label>
+                <input id="numbers" type="checkbox" (change)="saveOptions()"
+                       [(ngModel)]="options.number">
+            </div>
+            <div class="box-content-row box-content-row-checkbox" appBoxRow>
+                <label for="special">!@#$%^&*</label>
+                <input id="special" type="checkbox" (change)="saveOptions()"
+                       [(ngModel)]="options.special">
+            </div>
+        </div>
+    </div>
+    <div class="box">
+        <div class="box-content">
+            <div class="box-content-row box-content-row-input" appBoxRow>
+                <label for="min-number">{{'minNumbers' | i18n}}</label>
+                <input id="min-number" type="number" min="0" max="9" (input)="saveOptions()"
+                       [(ngModel)]="options.minNumber">
+            </div>
+            <div class="box-content-row box-content-row-input" appBoxRow>
+                <label for="min-special">{{'minSpecial' | i18n}}</label>
+                <input id="min-special" type="number" min="0" max="9" (input)="saveOptions()"
+                       [(ngModel)]="options.minSpecial">
+            </div>
+            <div class="box-content-row box-content-row-checkbox" appBoxRow>
+                <label for="ambiguous">{{'avoidAmbChar' | i18n}}</label>
+                <input id="ambiguous" type="checkbox" (change)="saveOptions()"
+                       [(ngModel)]="avoidAmbiguous">
+            </div>
+        </div>
+    </div>
+</content>

src/popup/generator/password-generator.component.ts

@@ -0,0 +1,48 @@
+import { ToasterService } from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
+
+import { Location } from '@angular/common';
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { PasswordGenerationService } from 'jslib/abstractions/passwordGeneration.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+import { StateService } from 'jslib/abstractions/state.service';
+
+import { CipherView } from 'jslib/models/view/cipherView';
+
+import {
+    PasswordGeneratorComponent as BasePasswordGeneratorComponent,
+} from 'jslib/angular/components/password-generator.component';
+
+@Component({
+    selector: 'app-password-generator',
+    templateUrl: 'password-generator.component.html',
+})
+export class PasswordGeneratorComponent extends BasePasswordGeneratorComponent {
+    private cipherState: CipherView;
+
+    constructor(passwordGenerationService: PasswordGenerationService, analytics: Angulartics2,
+        platformUtilsService: PlatformUtilsService, i18nService: I18nService,
+        toasterService: ToasterService, private stateService: StateService,
+        private router: Router, private location: Location) {
+        super(passwordGenerationService, analytics, platformUtilsService, i18nService, toasterService);
+    }
+
+    async ngOnInit() {
+        await super.ngOnInit();
+        this.cipherState = await this.stateService.get<CipherView>('addEditCipher');
+        this.showSelect = this.cipherState != null;
+    }
+
+    select() {
+        super.select();
+        this.cipherState.login.password = this.password;
+        this.close();
+    }
+
+    close() {
+        this.location.back();
+    }
+}