password history and updated dates on view

src/app/app.module.ts

@@ -47,6 +47,7 @@ import { FolderAddEditComponent } from './vault/folder-add-edit.component';
 import { GroupingsComponent } from './vault/groupings.component';
 import { PasswordGeneratorHistoryComponent } from './vault/password-generator-history.component';
 import { PasswordGeneratorComponent } from './vault/password-generator.component';
+import { PasswordHistoryComponent } from './vault/password-history.component';
 import { VaultComponent } from './vault/vault.component';
 import { ViewComponent } from './vault/view.component';
 
@@ -85,6 +86,7 @@ import { ViewComponent } from './vault/view.component';
         ModalComponent,
         PasswordGeneratorComponent,
         PasswordGeneratorHistoryComponent,
+        PasswordHistoryComponent,
         PremiumComponent,
         RegisterComponent,
         SearchCiphersPipe,
@@ -104,6 +106,7 @@ import { ViewComponent } from './vault/view.component';
         ModalComponent,
         PasswordGeneratorComponent,
         PasswordGeneratorHistoryComponent,
+        PasswordHistoryComponent,
         PremiumComponent,
         SettingsComponent,
         TwoFactorOptionsComponent,

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

@@ -0,0 +1,35 @@
+<div class="modal fade">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-body">
+                <div class="box">
+                    <div class="box-header">
+                        {{'passwordHistory' | i18n}}
+                    </div>
+                    <div class="box-content condensed">
+                        <div class="box-content-row box-content-row-flex" *ngFor="let h of history">
+                            <div class="row-main">
+                                <span class="text monospaced">
+                                    {{h.password}}
+                                </span>
+                                <span class="detail">{{h.lastUsedDate | date:'medium'}}</span>
+                            </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 class="box-content-row" *ngIf="!history.length">
+                            {{'noPasswordsInList' | i18n}}
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" data-dismiss="modal">{{'close' | i18n}}</button>
+            </div>
+        </div>
+    </div>
+</div>

src/app/vault/password-history.component.ts

@@ -0,0 +1,24 @@
+import { ToasterService } from 'angular2-toaster';
+import { Angulartics2 } from 'angulartics2';
+
+import { Component } from '@angular/core';
+
+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) {
+        super(cipherService, analytics, platformUtilsService, i18nService, toasterService, window);
+    }
+}

src/app/vault/vault.component.html

@@ -18,7 +18,8 @@
     <app-vault-view id="details"
                     *ngIf="cipherId && action === 'view'"
                     [cipherId]="cipherId"
-                    (onEditCipher)="editCipher($event)">
+                    (onEditCipher)="editCipher($event)"
+                    (onViewCipherPasswordHistory)="viewCipherPasswordHistory($event)">
     </app-vault-view>
     <app-vault-add-edit id="details"
                         *ngIf="action === 'add' || action === 'edit'"
@@ -41,4 +42,5 @@
     <ng-template #passwordGenerator></ng-template>
     <ng-template #attachments></ng-template>
     <ng-template #folderAddEdit></ng-template>
+    <ng-template #passwordHistory></ng-template>
 </div>

src/app/vault/vault.component.ts

@@ -29,11 +29,11 @@ import { CiphersComponent } from './ciphers.component';
 import { FolderAddEditComponent } from './folder-add-edit.component';
 import { GroupingsComponent } from './groupings.component';
 import { PasswordGeneratorComponent } from './password-generator.component';
+import { PasswordHistoryComponent } from './password-history.component';
 
 import { CipherType } from 'jslib/enums/cipherType';
 
 import { CipherView } from 'jslib/models/view/cipherView';
-import { CollectionView } from 'jslib/models/view/collectionView';
 import { FolderView } from 'jslib/models/view/folderView';
 
 import { I18nService } from 'jslib/abstractions/i18n.service';
@@ -55,6 +55,7 @@ export class VaultComponent implements OnInit, OnDestroy {
     @ViewChild('passwordGenerator', { read: ViewContainerRef }) passwordGeneratorModalRef: ViewContainerRef;
     @ViewChild('attachments', { read: ViewContainerRef }) attachmentsModalRef: ViewContainerRef;
     @ViewChild('folderAddEdit', { read: ViewContainerRef }) folderAddEditModalRef: ViewContainerRef;
+    @ViewChild('passwordHistory', { read: ViewContainerRef }) passwordHistoryModalRef: ViewContainerRef;
 
     action: string;
     cipherId: string = null;
@@ -347,6 +348,22 @@ export class VaultComponent implements OnInit, OnDestroy {
         });
     }
 
+    viewCipherPasswordHistory(cipher: CipherView) {
+        if (this.modal != null) {
+            this.modal.close();
+        }
+
+        const factory = this.componentFactoryResolver.resolveComponentFactory(ModalComponent);
+        this.modal = this.passwordHistoryModalRef.createComponent(factory).instance;
+        const childComponent = this.modal.show<PasswordHistoryComponent>(PasswordHistoryComponent,
+            this.passwordHistoryModalRef);
+
+        childComponent.cipherId = cipher.id;
+        this.modal.onClosed.subscribe(async () => {
+            this.modal = null;
+        });
+    }
+
     cancelledAddEdit(cipher: CipherView) {
         this.cipherId = cipher.id;
         this.action = this.cipherId != null ? 'view' : null;

src/app/vault/view.component.html

@@ -245,6 +245,29 @@
                 </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" href="#" appStopClick title="{{'passwordHistory' | i18n}}"
+                           (click)="viewHistory(c)">
+                            <i class="fa fa-lg fa-clock-o"></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 </div>
 <div class="footer">

src/locales/en/messages.json

@@ -1067,5 +1067,13 @@
   },
   "hideToTray": {
     "message": "Hide to Tray"
+  },
+  "dateUpdated": {
+    "message": "Updated",
+    "description": "ex. Date this item was updated"
+  },
+  "datePasswordUpdated": {
+    "message": "Password Updated",
+    "description": "ex. Date this password was updated"
   }
 }