updated dates and password history

jslib

@@ -1 +1 @@
-Subproject commit 9df96a3288510a5b92837d93513d9981336d0229
+Subproject commit b21cb789da2f93a36908cdfb0dba6e701102b87d

src/_locales/en/messages.json

@@ -1053,5 +1053,13 @@
   },
   "default": {
     "message": "Default"
+  },
+  "dateUpdated": {
+    "message": "Updated",
+    "description": "ex. Date this item was updated"
+  },
+  "datePasswordUpdated": {
+    "message": "Password Updated",
+    "description": "ex. Date this password was updated"
   }
 }

src/popup/app-routing.animations.ts

@@ -108,8 +108,8 @@ export const routerTransition = trigger('routerTransition', [
     transition('tabs => view-cipher, ciphers => view-cipher', inSlideUp),
     transition('view-cipher => tabs, view-cipher => ciphers', outSlideDown),
 
-    transition('view-cipher => edit-cipher', inSlideUp),
-    transition('edit-cipher => view-cipher, edit-cipher => tabs', outSlideDown),
+    transition('view-cipher => edit-cipher, view-cipher => cipher-password-history', inSlideUp),
+    transition('edit-cipher => view-cipher, cipher-password-history => view-cipher, edit-cipher => tabs', outSlideDown),
 
     transition('tabs => add-cipher, ciphers => add-cipher', inSlideUp),
     transition('add-cipher => tabs, add-cipher => ciphers', outSlideDown),

src/popup/app-routing.module.ts

@@ -32,6 +32,7 @@ import { AttachmentsComponent } from './vault/attachments.component';
 import { CiphersComponent } from './vault/ciphers.component';
 import { CurrentTabComponent } from './vault/current-tab.component';
 import { GroupingsComponent } from './vault/groupings.component';
+import { PasswordHistoryComponent } from './vault/password-history.component';
 import { ViewComponent } from './vault/view.component';
 
 const routes: Routes = [
@@ -104,6 +105,12 @@ const routes: Routes = [
         canActivate: [AuthGuardService],
         data: { state: 'view-cipher' },
     },
+    {
+        path: 'cipher-password-history',
+        component: PasswordHistoryComponent,
+        canActivate: [AuthGuardService],
+        data: { state: 'cipher-password-history' },
+    },
     {
         path: 'add-cipher',
         component: AddEditComponent,

src/popup/app.module.ts

@@ -39,6 +39,7 @@ import { AttachmentsComponent } from './vault/attachments.component';
 import { CiphersComponent } from './vault/ciphers.component';
 import { CurrentTabComponent } from './vault/current-tab.component';
 import { GroupingsComponent } from './vault/groupings.component';
+import { PasswordHistoryComponent } from './vault/password-history.component';
 import { ViewComponent } from './vault/view.component';
 
 import { ApiActionDirective } from 'jslib/angular/directives/api-action.directive';
@@ -103,6 +104,7 @@ import { IconComponent } from 'jslib/angular/components/icon.component';
         OptionsComponent,
         PasswordGeneratorComponent,
         PasswordGeneratorHistoryComponent,
+        PasswordHistoryComponent,
         PopOutComponent,
         PremiumComponent,
         PrivateModeComponent,

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

@@ -3,7 +3,6 @@ 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';
@@ -26,7 +25,7 @@ export class PasswordGeneratorComponent extends BasePasswordGeneratorComponent {
     constructor(passwordGenerationService: PasswordGenerationService, analytics: Angulartics2,
         platformUtilsService: PlatformUtilsService, i18nService: I18nService,
         toasterService: ToasterService, private stateService: StateService,
-        private router: Router, private location: Location) {
+        private location: Location) {
         super(passwordGenerationService, analytics, platformUtilsService, i18nService, toasterService, window);
     }
 

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

@@ -0,0 +1,34 @@
+<header>
+    <div class="left">
+        <button type="button" appBlurClick (click)="close()">{{'close' | i18n}}</button>
+    </div>
+    <div class="center">
+        <span class="title">{{'passwordHistory' | i18n}}</span>
+    </div>
+    <div class="right"></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.lastUsedDate | 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/vault/password-history.component.ts

@@ -0,0 +1,43 @@
+import { ToasterService } from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
+
+import { Location } from '@angular/common';
+import { Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+import { CipherService } from 'jslib/abstractions/cipher.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
+import { PlatformUtilsService } from 'jslib/abstractions/platformUtils.service';
+
+import {
+    PasswordHistoryComponent as BasePasswordHistoryComponent,
+} from 'jslib/angular/components/password-history.component';
+
+@Component({
+    selector: 'app-password-history',
+    templateUrl: 'password-history.component.html',
+})
+export class PasswordHistoryComponent extends BasePasswordHistoryComponent {
+    constructor(cipherService: CipherService, analytics: Angulartics2,
+        platformUtilsService: PlatformUtilsService, i18nService: I18nService,
+        toasterService: ToasterService, private location: Location,
+        private route: ActivatedRoute) {
+        super(cipherService, analytics, platformUtilsService, i18nService, toasterService, window);
+    }
+
+    async ngOnInit() {
+        this.route.queryParams.subscribe(async (params) => {
+            if (params.cipherId) {
+                this.cipherId = params.cipherId;
+            } else {
+                this.close();
+            }
+
+            await super.ngOnInit();
+        });
+    }
+
+    close() {
+        this.location.back();
+    }
+}

src/popup/vault/view.component.html

@@ -255,4 +255,27 @@
             </a>
         </div>
     </div>
+    <div class="box">
+        <div class="box-header">
+            {{'other' | i18n}}
+        </div>
+        <div class="box-content">
+            <div class="box-content-row">
+                <span class="row-label">{{'dateUpdated' | i18n}}</span>
+                {{cipher.revisionDate | date:'medium'}}
+            </div>
+            <div class="box-content-row box-content-row-flex" *ngIf="cipher.passwordRevisionDisplayDate">
+                <div class="row-main">
+                    <span class="row-label">{{'datePasswordUpdated' | i18n}}</span>
+                    {{cipher.passwordRevisionDisplayDate | date:'medium'}}
+                </div>
+                <div class="action-buttons" *ngIf="cipher.hasPasswordHistory">
+                    <a class="row-btn" routerLink="/cipher-password-history" [queryParams]="{cipherId: cipher.id}"
+                       appStopClick title="{{'passwordHistory' | i18n}}">
+                        <i class="fa fa-lg fa-clock-o"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
 </content>