bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2026-01-08 03:23:50 +00:00
Code Issues Releases Wiki Activity

Change links to buttons

Browse Source 
- more semantically accurate, will expose these as buttons to assistive technologies
- note: while having block-level elements like `<div>` inside a `<button>` is an html validation error, it does not affect functionality as long as there's no more structure inside it
This commit is contained in:
Patrick H. Lauke
2021-07-31 20:03:51 +01:00
parent 1b12a278cf
commit d528d72b4d
27 changed files with 504 additions and 504 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/popup/vault/add-edit.component.html
View File

@@ -56,17 +56,17 @@
<i class="fa fa-lg fa-spinner fa-spin" [hidden]="!checkPasswordBtn.loading"
aria-hidden="true"></i>
</button>
<a class="row-btn" href="#" appStopClick appBlurClick
<button type="button" class="row-btn" appStopClick appBlurClick
appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword()"
*ngIf="cipher.viewPassword">
<i class="fa fa-lg" aria-hidden="true"
[ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
</a>
<a class="row-btn" href="#" appStopClick appBlurClick
</button>
<button type="button" class="row-btn" appStopClick appBlurClick
appA11yTitle="{{'generatePassword' | i18n}}" (click)="generatePassword()"
*ngIf="cipher.viewPassword">
<i class="fa fa-lg fa-refresh" aria-hidden="true"></i>
</a>
</button>
</div>
</div>
<div class="box-content-row" appBoxRow>
@@ -90,11 +90,11 @@
name="Card.Number" [(ngModel)]="cipher.card.number" appInputVerbatim>
</div>
<div class="action-buttons">
<a class="row-btn" href="#" appStopClick appBlurClick
<button type="button" class="row-btn" appStopClick appBlurClick
appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="toggleCardNumber()">
<i class="fa fa-lg" aria-hidden="true"
[ngClass]="{'fa-eye': !showCardNumber, 'fa-eye-slash': showCardNumber}"></i>
</a>
</button>
</div>
</div>
<div class="box-content-row" appBoxRow>
@@ -121,11 +121,11 @@
name="Card.Code" [(ngModel)]="cipher.card.code" appInputVerbatim>
</div>
<div class="action-buttons">
<a class="row-btn" href="#" appStopClick appBlurClick
<button type="button" class="row-btn" appStopClick appBlurClick
appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="toggleCardCode()">
<i class="fa fa-lg" aria-hidden="true"
[ngClass]="{'fa-eye': !showCardCode, 'fa-eye-slash': showCardCode}"></i>
</a>
</button>
</div>
</div>
</div>
@@ -225,9 +225,9 @@
<ng-container *ngIf="cipher.login.hasUris">
<div class="box-content-row box-content-row-multi" appBoxRow
*ngFor="let u of cipher.login.uris; let i = index; trackBy:trackByFunction">
<a href="#" appStopClick (click)="removeUri(u)" appA11yTitle="{{'remove' | i18n}}">
<button type="button" appStopClick (click)="removeUri(u)" appA11yTitle="{{'remove' | i18n}}">
<i class="fa fa-minus-circle fa-lg" aria-hidden="true"></i>
</a>
</button>
<div class="row-main">
<label for="loginUri{{i}}">{{'uriPosition' | i18n : (i + 1)}}</label>
<input id="loginUri{{i}}" type="text" name="Login.Uris[{{i}}].Uri" [(ngModel)]="u.uri"
@@ -251,21 +251,21 @@
</select>
</div>
<div class="action-buttons">
<a *ngIf="currentUris && currentUris.length" class="row-btn" href="#" appStopClick
<button type="button" *ngIf="currentUris && currentUris.length" class="row-btn" appStopClick
appBlurClick appA11yTitle="{{'toggleCurrentUris' | i18n}}" (click)="toggleUriInput(u)">
<i aria-hidden="true" class="fa fa-lg fa-list"></i>
</a>
<a class="row-btn" href="#" appStopClick appBlurClick
</button>
<button type="button" class="row-btn" appStopClick appBlurClick
appA11yTitle="{{'toggleOptions' | i18n}}" (click)="toggleUriOptions(u)">
<i class="fa fa-lg fa-cog" aria-hidden="true"></i>
</a>
</button>
</div>
</div>
</ng-container>
<a href="#" appStopClick appBlurClick (click)="addUri()"
<button type="button" appStopClick appBlurClick (click)="addUri()"
class="box-content-row box-content-row-newmulti">
<i class="fa fa-plus-circle fa-fw fa-lg" aria-hidden="true"></i> {{'newUri' | i18n}}
</a>
</button>
</div>
</div>
<div class="box" *ngIf="showAutoFillOnPageLoadOptions">
@@ -301,17 +301,17 @@
<input id="passwordPrompt" type="checkbox" name="PasswordPrompt" [ngModel]="reprompt"
(change)="repromptChanged()">
</div>
<a class="box-content-row box-content-row-flex text-default" href="#" appStopClick appBlurClick
<button type="button" class="box-content-row box-content-row-flex text-default" appStopClick appBlurClick
(click)="attachments()" *ngIf="editMode && showAttachments && !cloneMode">
<div class="row-main">{{'attachments' | i18n}}</div>
<i class="fa fa-external-link fa-lg fa-fw" aria-hidden="true" *ngIf="openAttachmentsInPopup"></i>
<i class="fa fa-chevron-right row-sub-icon" aria-hidden="true" *ngIf="!openAttachmentsInPopup"></i>
</a>
<a class="box-content-row box-content-row-flex text-default" href="#" appStopClick appBlurClick
</button>
<button type="button" class="box-content-row box-content-row-flex text-default" appStopClick appBlurClick
(click)="editCollections()" *ngIf="editMode && cipher.organizationId && !cloneMode">
<div class="row-main">{{'collections' | i18n}}</div>
<i class="fa fa-chevron-right row-sub-icon" aria-hidden="true"></i>
</a>
</button>
</div>
</div>
<div class="box">
@@ -333,9 +333,9 @@
<div class="box-content-row box-content-row-multi box-draggable-row" appBoxRow cdkDrag
*ngFor="let f of cipher.fields; let i = index; trackBy:trackByFunction"
[ngClass]="{'box-content-row-checkbox': f.type === fieldType.Boolean}">
<a href="#" appStopClick (click)="removeField(f)" appA11yTitle="{{'remove' | i18n}}">
<button type="button" appStopClick (click)="removeField(f)" appA11yTitle="{{'remove' | i18n}}">
<i class="fa fa-minus-circle fa-lg" aria-hidden="true"></i>
</a>
</button>
<label for="fieldName{{i}}" class="sr-only">{{'name' | i18n}}</label>
<label for="fieldValue{{i}}" class="sr-only">{{'value' | i18n}}</label>
<div class="row-main">
@@ -352,11 +352,11 @@
*ngIf="f.type === fieldType.Boolean" appTrueFalseValue trueValue="true" falseValue="false">
<div class="action-buttons"
*ngIf="f.type === fieldType.Hidden && (cipher.viewPassword || f.newField)">
<a class="row-btn" href="#" appStopClick appBlurClick
<button type="button" class="row-btn" appStopClick appBlurClick
appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="toggleFieldValue(f)">
<i class="fa fa-lg" aria-hidden="true"
[ngClass]="{'fa-eye': !f.showValue, 'fa-eye-slash': f.showValue}"></i>
</a>
</button>
</div>
<div class="drag-handle" appA11yTitle="{{'dragToSort' | i18n}}" cdkDragHandle>
<i class="fa fa-bars" aria-hidden="true"></i>
@@ -364,9 +364,9 @@
</div>
</div>
<div class="box-content-row box-content-row-newmulti" appBoxRow>
<a href="#" appStopClick (click)="addField()">
<button type="button" appStopClick (click)="addField()">
<i class="fa fa-plus-circle fa-fw fa-lg" aria-hidden="true"></i> {{'newCustomField' | i18n}}
</a>
</button>
<label for="addFieldType" class="sr-only">{{'type' | i18n}}</label>
<select id="addFieldType" name="AddFieldType" [(ngModel)]="addFieldType" class="field-type">
<option *ngFor="let o of addFieldTypeOptions" [ngValue]="o.value">{{o.name}}</option>
@@ -408,7 +408,7 @@
</div>
<div class="box list" *ngIf="editMode && !cloneMode">
<div class="box-content single-line">
<a class="box-content-row" href="#" appStopClick appBlurClick (click)="delete()"
<button type="button" class="box-content-row" appStopClick appBlurClick (click)="delete()"
[appApiAction]="deletePromise" #deleteBtn>
<div class="row-main text-danger">
<div class="icon text-danger" aria-hidden="true">
@@ -417,7 +417,7 @@
</div>
<span>{{'deleteItem' | i18n}}</span>
</div>
</a>
</button>
</div>
</div>
</content>

2
src/popup/vault/attachments.component.html
View File

@@ -28,7 +28,7 @@
</div>
<small class="row-sub-label">{{a.sizeName}}</small>
<div class="action-buttons no-pad">
<button class="row-btn btn" type="button" appStopClick appBlurClick
<button type="button" class="row-btn btn" type="button" appStopClick appBlurClick
appA11yTitle="{{'deleteAttachment' | i18n}}" (click)="delete(a)" #deleteBtn
[appApiAction]="deletePromises[a.id]" [disabled]="deleteBtn.loading">
<i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading" aria-hidden="true"></i>

10
src/popup/vault/ciphers.component.html
View File

@@ -24,7 +24,7 @@
{{'folders' | i18n}}
</div>
<div class="box-content single-line">
<a *ngFor="let f of nestedFolders" href="#" class="box-content-row" appStopClick appBlurClick
<button type="button" *ngFor="let f of nestedFolders" class="box-content-row" appStopClick appBlurClick
(click)="selectFolder(f.node)">
<div class="row-main">
<div class="icon">
@@ -34,7 +34,7 @@
<span class="text">{{f.node.name}}</span>
</div>
<span><i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i></span>
</a>
</button>
</div>
</div>
<div class="box list" *ngIf="nestedCollections && nestedCollections.length">
@@ -42,14 +42,14 @@
{{'collections' | i18n}}
</div>
<div class="box-content single-line">
<a *ngFor="let c of nestedCollections" href="#" class="box-content-row" appStopClick appBlurClick
<button type="button" *ngFor="let c of nestedCollections" class="box-content-row" appStopClick appBlurClick
(click)="selectCollection(c.node)">
<div class="row-main">
<div class="icon"><i class="fa fa-fw fa-lg fa-cube" aria-hidden="true"></i></div>
<span class="text">{{c.node.name}}</span>
</div>
<span><i class="fa fa-chevron-right fa-lg row-sub-icon" aria-hidden="true"></i></span>
</a>
</button>
</div>
</div>
</ng-container>
@@ -58,7 +58,7 @@
<i class="fa fa-spinner fa-spin fa-3x" *ngIf="!loaded" aria-hidden="true"></i>
<ng-container *ngIf="loaded">
<p>{{'noItemsInList' | i18n}}</p>
<button (click)="addCipher()" class="btn block primary link">
<button type="button" (click)="addCipher()" class="btn block primary link">
{{'addItem' | i18n}}
</button>
</ng-container>

32
src/popup/vault/groupings.component.html
View File

@@ -8,7 +8,7 @@
<i class="fa fa-search"></i>
</div>
<div class="right">
<button appBlurClick (click)="addCipher()" appA11yTitle="{{'addItem' | i18n}}">
<button type="button" appBlurClick (click)="addCipher()" appA11yTitle="{{'addItem' | i18n}}">
<i class="fa fa-plus fa-lg fa-fw" aria-hidden="true"></i>
</button>
</div>
@@ -19,7 +19,7 @@
<ng-container *ngIf="loaded">
<i class="fa fa-frown-o fa-4x"></i>
<p>{{'noItemsInList' | i18n}}</p>
<button (click)="addCipher()" class="btn block primary link">{{'addItem' | i18n}}</button>
<button type="button" (click)="addCipher()" class="btn block primary link">{{'addItem' | i18n}}</button>
</ng-container>
</div>
<ng-container *ngIf="ciphers && ciphers.length && !showSearching()">
@@ -40,31 +40,31 @@
<span class="flex-right">4</span>
</div>
<div class="box-content single-line">
<a href="#" class="box-content-row" appStopClick appBlurClick (click)="selectType(cipherType.Login)">
<button type="button" class="box-content-row" appStopClick appBlurClick (click)="selectType(cipherType.Login)">
<div class="row-main">
<div class="icon"><i class="fa fa-fw fa-lg fa-globe"></i></div>
<span class="text">{{'typeLogin' | i18n}}</span>
</div>
<span class="row-sub-label">{{typeCounts.get(cipherType.Login) || 0}}</span>
<span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
</a>
<a href="#" class="box-content-row" appStopClick appBlurClick (click)="selectType(cipherType.Card)">
</button>
<button type="button" class="box-content-row" appStopClick appBlurClick (click)="selectType(cipherType.Card)">
<div class="row-main">
<div class="icon"><i class="fa fa-fw fa-lg fa-credit-card"></i></div>
<span class="text">{{'typeCard' | i18n}}</span>
</div>
<span class="row-sub-label">{{typeCounts.get(cipherType.Card) || 0}}</span>
<span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
</a>
<a href="#" class="box-content-row" appStopClick appBlurClick (click)="selectType(cipherType.Identity)">
</button>
<button type="button" class="box-content-row" appStopClick appBlurClick (click)="selectType(cipherType.Identity)">
<div class="row-main">
<div class="icon"><i class="fa fa-fw fa-lg fa-id-card-o"></i></div>
<span class="text">{{'typeIdentity' | i18n}}</span>
</div>
<span class="row-sub-label">{{typeCounts.get(cipherType.Identity) || 0}}</span>
<span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
</a>
<a href="#" class="box-content-row" appStopClick appBlurClick
</button>
<button type="button" class="box-content-row" appStopClick appBlurClick
(click)="selectType(cipherType.SecureNote)">
<div class="row-main">
<div class="icon"><i class="fa fa-fw fa-lg fa-sticky-note-o"></i></div>
@@ -72,7 +72,7 @@
</div>
<span class="row-sub-label">{{typeCounts.get(cipherType.SecureNote) || 0}}</span>
<span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
</a>
</button>
</div>
</div>
<div class="box list" *ngIf="nestedFolders?.length">
@@ -81,7 +81,7 @@
<span class="flex-right">{{folderCount}}</span>
</div>
<div class="box-content single-line">
<a *ngFor="let f of nestedFolders" href="#" class="box-content-row" appStopClick appBlurClick
<button type="button" *ngFor="let f of nestedFolders" class="box-content-row" appStopClick appBlurClick
(click)="selectFolder(f.node)">
<div class="row-main">
<div class="icon">
@@ -92,7 +92,7 @@
</div>
<span class="row-sub-label">{{folderCounts.get(f.node.id) || 0}}</span>
<span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
</a>
</button>
</div>
</div>
<div class="box list" *ngIf="nestedCollections && nestedCollections.length">
@@ -101,7 +101,7 @@
<span class="flex-right">{{nestedCollections.length}}</span>
</div>
<div class="box-content single-line">
<a *ngFor="let nestedCollection of nestedCollections" href="#" class="box-content-row"
<button type="button" *ngFor="let nestedCollection of nestedCollections" class="box-content-row"
appStopClick appBlurClick (click)="selectCollection(nestedCollection.node)">
<div class="row-main">
<div class="icon"><i class="fa fa-fw fa-lg fa-cube"></i></div>
@@ -109,7 +109,7 @@
</div>
<span class="row-sub-label">{{collectionCounts.get(nestedCollection.node.id) || 0}}</span>
<span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
</a>
</button>
</div>
</div>
<div class="box list" *ngIf="showNoFolderCiphers">
@@ -129,7 +129,7 @@
<span class="flex-right">{{deletedCount}}</span>
</div>
<div class="box-content single-line">
<a href="#" class="box-content-row" appStopClick appBlurClick
<button type="button" class="box-content-row" appStopClick appBlurClick
(click)="selectTrash()">
<div class="row-main">
<div class="icon"><i class="fa fa-fw fa-lg fa-trash-o"></i></div>
@@ -137,7 +137,7 @@
</div>
<span class="row-sub-label">{{deletedCount}}</span>
<span><i class="fa fa-chevron-right fa-lg row-sub-icon"></i></span>
</a>
</button>
</div>
</div>
</ng-container>

4
src/popup/vault/password-history.component.html
View File

@@ -20,10 +20,10 @@
</div>
</div>
<div class="action-buttons">
<a class="row-btn" href="#" appStopClick appA11yTitle="{{'copyPassword' | i18n}}"
<button type="button" class="row-btn" appStopClick appA11yTitle="{{'copyPassword' | i18n}}"
(click)="copy(h.password)">
<i class="fa fa-lg fa-clone" aria-hidden="true"></i>
</a>
</button>
</div>
</div>
</div>

698
src/popup/vault/view.component.html
View File

@@ -1,349 +1,349 @@
<header>
<div class="left">
<button type="button" appBlurClick (click)="close()">{{'close' | i18n}}</button>
</div>
<div class="center">
<span class="title">{{'viewItem' | i18n}}</span>
</div>
<div class="right" *ngIf="cipher">
<button type="button" appBlurClick (click)="edit()" *ngIf="!cipher.isDeleted">{{'edit' | i18n}}</button>
</div>
</header>
<content *ngIf="cipher">
<div class="box">
<div class="box-header">
{{'itemInformation' | i18n}}
</div>
<div class="box-content">
<div class="box-content-row">
<span class="row-label">{{'name' | i18n}}</span>
<input type="text" [value]="cipher.name" readonly aria-readonly="true" />
</div>
<!-- Login -->
<div *ngIf="cipher.login">
<div class="box-content-row box-content-row-flex" *ngIf="cipher.login.username">
<div class="row-main">
<span class="row-label draggable" draggable="true"
(dragstart)="setTextDataOnDrag($event, cipher.login.username)">{{'username' | i18n}}
</span>
<input type="text" [value]="cipher.login.username" readonly aria-readonly="true" />
</div>
<div class="action-buttons">
<a class="row-btn" href="#" appStopClick appA11yTitle="{{'copyUsername' | i18n}}"
(click)="copy(cipher.login.username, 'username', 'Username')">
<i class="fa fa-lg fa-clone" aria-hidden="true"></i>
</a>
</div>
</div>
<div class="box-content-row box-content-row-flex" *ngIf="cipher.login.password">
<div class="row-main">
<span class="row-label draggable" draggable="true"
(dragstart)="setTextDataOnDrag($event, cipher.login.password)">{{'password' | i18n}}</span>
<div [hidden]="showPassword" class="monospaced">
{{cipher.login.maskedPassword}}</div>
<div [hidden]="!showPassword" class="monospaced password-wrapper" appSelectCopy
[innerHTML]="cipher.login.password | colorPassword"></div>
</div>
<div class="action-buttons">
<button type="button" #checkPasswordBtn class="row-btn btn" appBlurClick
appA11yTitle="{{'checkPassword' | i18n}}" (click)="checkPassword()"
[appApiAction]="checkPasswordPromise" [disabled]="checkPasswordBtn.loading"
*ngIf="cipher.viewPassword">
<i class="fa fa-lg fa-check-circle" [hidden]="checkPasswordBtn.loading"
aria-hidden="true"></i>
<i class="fa fa-lg fa-spinner fa-spin" [hidden]="!checkPasswordBtn.loading"
aria-hidden="true"></i>
</button>
<a class="row-btn" href="#" appStopClick appA11yTitle="{{'toggleVisibility' | i18n}}"
(click)="togglePassword()" *ngIf="cipher.viewPassword">
<i class="fa fa-lg" aria-hidden="true"
[ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
</a>
<a class="row-btn" href="#" appStopClick appA11yTitle="{{'copyPassword' | i18n}}"
(click)="copy(cipher.login.password, 'password', 'Password')" *ngIf="cipher.viewPassword">
<i class="fa fa-lg fa-clone" aria-hidden="true"></i>
</a>
</div>
</div>
<div class="box-content-row box-content-row-flex totp" [ngClass]="{'low': totpLow}"
*ngIf="cipher.login.totp && totpCode">
<div class="row-main">
<span class="row-label draggable" draggable="true"
(dragstart)="setTextDataOnDrag($event, totpCode)">{{'verificationCodeTotp' | i18n}}</span>
<span class="totp-code">{{totpCodeFormatted}}</span>
</div>
<span class="totp-countdown">
<span class="totp-sec">{{totpSec}}</span>
<svg>
<g>
<circle class="totp-circle inner" r="12.6" cy="16" cx="16"
[ngStyle]="{'stroke-dashoffset.px': totpDash}"></circle>
<circle class="totp-circle outer" r="14" cy="16" cx="16"></circle>
</g>
</svg>
</span>
<div class="action-buttons">
<a class="row-btn" href="#" appStopClick appA11yTitle="{{'copyVerificationCode' | i18n}}"
(click)="copy(totpCode, 'verificationCodeTotp', 'TOTP')">
<i class="fa fa-lg fa-clone" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
<!-- Card -->
<div *ngIf="cipher.card">
<div class="box-content-row" *ngIf="cipher.card.cardholderName">
<span class="row-label">{{'cardholderName' | i18n}}</span>
{{cipher.card.cardholderName}}
</div>
<div class="box-content-row box-content-row-flex" *ngIf="cipher.card.number">
<div class="row-main">
<span class="row-label">{{'number' | i18n}}</span>
<span [hidden]="showCardNumber" class="monospaced">{{cipher.card.maskedNumber}}</span>
<span [hidden]="!showCardNumber" class="monospaced">{{cipher.card.number}}</span>
</div>
<div class="action-buttons">
<a class="row-btn" href="#" appStopClick appA11yTitle="{{'toggleVisibility' | i18n}}"
(click)="toggleCardNumber()">
<i class="fa fa-lg" aria-hidden="true"
[ngClass]="{'fa-eye': !showCardNumber, 'fa-eye-slash': showCardNumber}"></i>
</a>
<a class="row-btn" href="#" appStopClick appA11yTitle="{{'copyNumber' | i18n}}"
(click)="copy(cipher.card.number, 'number', 'Card Number')">
<i class="fa fa-lg fa-clone" aria-hidden="true"></i>
</a>
</div>
</div>
<div class="box-content-row" *ngIf="cipher.card.brand">
<span class="row-label">{{'brand' | i18n}}</span>
{{cipher.card.brand}}
</div>
<div class="box-content-row" *ngIf="cipher.card.expiration">
<span class="row-label">{{'expiration' | i18n}}</span>
{{cipher.card.expiration}}
</div>
<div class="box-content-row box-content-row-flex" *ngIf="cipher.card.code">
<div class="row-main">
<span class="row-label">{{'securityCode' | i18n}}</span>
<span [hidden]="showCardCode" class="monospaced">{{cipher.card.maskedCode}}</span>
<span [hidden]="!showCardCode" class="monospaced">{{cipher.card.code}}</span>
</div>
<div class="action-buttons">
<a class="row-btn" href="#" appStopClick appA11yTitle="{{'toggleVisibility' | i18n}}"
(click)="toggleCardCode()">
<i class="fa fa-lg" aria-hidden="true"
[ngClass]="{'fa-eye': !showCardCode, 'fa-eye-slash': showCardCode}"></i>
</a>
<a class="row-btn" href="#" appStopClick appA11yTitle="{{'copySecurityCode' | i18n}}"
(click)="copy(cipher.card.code, 'securityCode', 'Security Code')">
<i class="fa fa-lg fa-clone" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
<!-- Identity -->
<div *ngIf="cipher.identity">
<div class="box-content-row" *ngIf="cipher.identity.fullName">
<span class="row-label">{{'identityName' | i18n}}</span>
{{cipher.identity.fullName}}
</div>
<div class="box-content-row" *ngIf="cipher.identity.username">
<span class="row-label">{{'username' | i18n}}</span>
{{cipher.identity.username}}
</div>
<div class="box-content-row" *ngIf="cipher.identity.company">
<span class="row-label">{{'company' | i18n}}</span>
{{cipher.identity.company}}
</div>
<div class="box-content-row" *ngIf="cipher.identity.ssn">
<span class="row-label">{{'ssn' | i18n}}</span>
{{cipher.identity.ssn}}
</div>
<div class="box-content-row" *ngIf="cipher.identity.passportNumber">
<span class="row-label">{{'passportNumber' | i18n}}</span>
{{cipher.identity.passportNumber}}
</div>
<div class="box-content-row" *ngIf="cipher.identity.licenseNumber">
<span class="row-label">{{'licenseNumber' | i18n}}</span>
{{cipher.identity.licenseNumber}}
</div>
<div class="box-content-row" *ngIf="cipher.identity.email">
<span class="row-label">{{'email' | i18n}}</span>
{{cipher.identity.email}}
</div>
<div class="box-content-row" *ngIf="cipher.identity.phone">
<span class="row-label">{{'phone' | i18n}}</span>
{{cipher.identity.phone}}
</div>
<div class="box-content-row"
*ngIf="cipher.identity.address1 || cipher.identity.city || cipher.identity.country">
<span class="row-label">{{'address' | i18n}}</span>
<div *ngIf="cipher.identity.address1">{{cipher.identity.address1}}</div>
<div *ngIf="cipher.identity.address2">{{cipher.identity.address2}}</div>
<div *ngIf="cipher.identity.address3">{{cipher.identity.address3}}</div>
<div *ngIf="cipher.identity.fullAddressPart2">{{cipher.identity.fullAddressPart2}}</div>
<div *ngIf="cipher.identity.country">{{cipher.identity.country}}</div>
</div>
</div>
</div>
</div>
<div class="box" *ngIf="cipher.login && cipher.login.hasUris">
<div class="box-content">
<div class="box-content-row box-content-row-flex" *ngFor="let u of cipher.login.uris; let i = index">
<div class="row-main">
<span class="row-label" *ngIf="!u.isWebsite">{{'uri' | i18n}}</span>
<span class="row-label" *ngIf="u.isWebsite">{{'website' | i18n}}</span>
<span title="{{u.uri}}">
<input type="text" [value]="u.hostOrUri" readonly aria-readonly="true" />
</span>
</div>
<div class="action-buttons">
<a class="row-btn" href="#" appStopClick appA11yTitle="{{'launch' | i18n}}" *ngIf="u.canLaunch"
(click)="launch(u)">
<i class="fa fa-lg fa-share-square-o" aria-hidden="true"></i>
</a>
<a class="row-btn" href="#" appStopClick appA11yTitle="{{'copyUri' | i18n}}"
(click)="copy(u.uri, u.isWebsite ? 'website' : 'uri', 'URI')">
<i class="fa fa-lg fa-clone" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
<div class="box" *ngIf="cipher.notes">
<div class="box-header">
{{'notes' | i18n}}
</div>
<div class="box-content">
<div class="box-content-row">
<textarea [value]="cipher.notes" rows="6" readonly aria-readonly="true"></textarea>
</div>
</div>
</div>
<div class="box" *ngIf="cipher.hasFields">
<div class="box-header">
{{'customFields' | i18n}}
</div>
<div class="box-content">
<div class="box-content-row box-content-row-flex" *ngFor="let field of cipher.fields">
<div class="row-main">
<span class="row-label">{{field.name}}</span>
<div *ngIf="field.type === fieldType.Text">
{{field.value || '&nbsp;'}}
</div>
<div *ngIf="field.type === fieldType.Hidden">
<span [hidden]="!field.showValue" class="monospaced show-whitespace">{{field.value}}</span>
<span [hidden]="field.showValue" class="monospaced">{{field.maskedValue}}</span>
</div>
<div *ngIf="field.type === fieldType.Boolean">
<i class="fa fa-check-square-o" *ngIf="field.value === 'true'" aria-hidden="true"></i>
<i class="fa fa-square-o" *ngIf="field.value !== 'true'" aria-hidden="true"></i>
<span class="sr-only">{{field.value}}</span>
</div>
</div>
<div class="action-buttons">
<a class="row-btn" href="#" appStopClick appA11yTitle="{{'toggleVisibility' | i18n}}"
*ngIf="field.type === fieldType.Hidden && cipher.viewPassword"
(click)="toggleFieldValue(field)">
<i class="fa fa-lg" aria-hidden="true"
[ngClass]="{'fa-eye': !field.showValue, 'fa-eye-slash': field.showValue}"></i>
</a>
<a class="row-btn" href="#" appStopClick appA11yTitle="{{'copyValue' | i18n}}"
*ngIf="field.value && field.type !== fieldType.Boolean && !(field.type === fieldType.Hidden && !cipher.viewPassword)"
(click)="copy(field.value, 'value', field.type === fieldType.Hidden ? 'H_Field' : 'Field')">
<i class="fa fa-lg fa-clone" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
<div class="box" *ngIf="cipher.hasAttachments && (canAccessPremium || cipher.organizationId) && showAttachments">
<div class="box-header">
{{'attachments' | i18n}}
</div>
<div class="box-content">
<a class="box-content-row box-content-row-flex text-default" *ngFor="let attachment of cipher.attachments"
href="#" appStopClick appBlurCLick (click)="downloadAttachment(attachment)">
<span class="row-main">{{attachment.fileName}}</span>
<small class="row-sub-label">{{attachment.sizeName}}</small>
<i class="fa fa-download fa-fw row-sub-icon" *ngIf="!attachment.downloading" aria-hidden="true"></i>
<i class="fa fa-spinner fa-fw fa-spin row-sub-icon" *ngIf="attachment.downloading"
aria-hidden="true"></i>
</a>
</div>
</div>
<div class="box list">
<div class="box-content single-line">
<a class="box-content-row" href="#" appStopClick appBlurClick (click)="fillCipher()"
*ngIf="cipher.type !== cipherType.SecureNote && !cipher.isDeleted && !inPopout">
<div class="row-main text-primary">
<div class="icon text-primary" aria-hidden="true">
<i class="fa fa-pencil-square-o fa-lg fa-fw"></i>
</div>
<span>{{'autoFill' | i18n}}</span>
</div>
</a>
<a class="box-content-row" href="#" appStopClick appBlurClick (click)="fillCipherAndSave()"
*ngIf="cipher.type === cipherType.Login && !cipher.isDeleted && !inPopout">
<div class="row-main text-primary">
<div class="icon text-primary" aria-hidden="true">
<i class="fa fa-bookmark fa-lg fa-fw"></i>
</div>
<span>{{'autoFillAndSave' | i18n}}</span>
</div>
</a>
<a class="box-content-row" href="#" appStopClick appBlurClick (click)="clone()"
*ngIf="!cipher.organizationId && !cipher.isDeleted">
<div class="row-main text-primary">
<div class="icon text-primary" aria-hidden="true">
<i class="fa fa-files-o fa-lg fa-fw"></i>
</div>
<span>{{'cloneItem' | i18n}}</span>
</div>
</a>
<a class="box-content-row" href="#" appStopClick appBlurClick (click)="share()" *ngIf="!cipher.organizationId">
<div class="row-main text-primary">
<div class="icon text-primary" aria-hidden="true">
<i class="fa fa-arrow-circle-o-right fa-lg fa-fw"></i>
</div>
<span>{{'moveToOrganization' | i18n}}</span>
</div>
</a>
<a class="box-content-row" href="#" appStopClick appBlurClick (click)="restore()" *ngIf="cipher.isDeleted">
<div class="row-main text-primary">
<div class="icon text-primary" aria-hidden="true">
<i class="fa fa-undo fa-lg fa-fw"></i>
</div>
<span>{{'restoreItem' | i18n}}</span>
</div>
</a>
<a class="box-content-row" href="#" appStopClick appBlurClick (click)="delete()">
<div class="row-main text-danger">
<div class="icon text-danger" aria-hidden="true">
<i class="fa fa-trash-o fa-lg fa-fw"></i>
</div>
<span>{{(cipher.isDeleted ? 'permanentlyDeleteItem' : 'deleteItem') | i18n}}</span>
</div>
</a>
</div>
</div>
<div class="box">
<div class="box-footer">
<div>
<b class="font-weight-semibold">{{'dateUpdated' | i18n}}:</b>
{{cipher.revisionDate | date:'medium'}}
</div>
<div *ngIf="cipher.passwordRevisionDisplayDate">
<b class="font-weight-semibold">{{'datePasswordUpdated' | i18n}}:</b>
{{cipher.passwordRevisionDisplayDate | date:'medium'}}
</div>
<div *ngIf="cipher.hasPasswordHistory">
<b class="font-weight-semibold">{{'passwordHistory' | i18n}}:</b>
<a routerLink="/cipher-password-history" [queryParams]="{cipherId: cipher.id}" appStopClick
title="{{'passwordHistory' | i18n}}">
{{cipher.passwordHistory.length}}
</a>
</div>
</div>
</div>
</content>
<header>
<div class="left">
<button type="button" appBlurClick (click)="close()">{{'close' | i18n}}</button>
</div>
<div class="center">
<span class="title">{{'viewItem' | i18n}}</span>
</div>
<div class="right" *ngIf="cipher">
<button type="button" appBlurClick (click)="edit()" *ngIf="!cipher.isDeleted">{{'edit' | i18n}}</button>
</div>
</header>
<content *ngIf="cipher">
<div class="box">
<div class="box-header">
{{'itemInformation' | i18n}}
</div>
<div class="box-content">
<div class="box-content-row">
<span class="row-label">{{'name' | i18n}}</span>
<input type="text" [value]="cipher.name" readonly aria-readonly="true" />
</div>
<!-- Login -->
<div *ngIf="cipher.login">
<div class="box-content-row box-content-row-flex" *ngIf="cipher.login.username">
<div class="row-main">
<span class="row-label draggable" draggable="true"
(dragstart)="setTextDataOnDrag($event, cipher.login.username)">{{'username' | i18n}}
</span>
<input type="text" [value]="cipher.login.username" readonly aria-readonly="true" />
</div>
<div class="action-buttons">
<button type="button" class="row-btn" appStopClick appA11yTitle="{{'copyUsername' | i18n}}"
(click)="copy(cipher.login.username, 'username', 'Username')">
<i class="fa fa-lg fa-clone" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="box-content-row box-content-row-flex" *ngIf="cipher.login.password">
<div class="row-main">
<span class="row-label draggable" draggable="true"
(dragstart)="setTextDataOnDrag($event, cipher.login.password)">{{'password' | i18n}}</span>
<div [hidden]="showPassword" class="monospaced">
{{cipher.login.maskedPassword}}</div>
<div [hidden]="!showPassword" class="monospaced password-wrapper" appSelectCopy
[innerHTML]="cipher.login.password | colorPassword"></div>
</div>
<div class="action-buttons">
<button type="button" #checkPasswordBtn class="row-btn btn" appBlurClick
appA11yTitle="{{'checkPassword' | i18n}}" (click)="checkPassword()"
[appApiAction]="checkPasswordPromise" [disabled]="checkPasswordBtn.loading"
*ngIf="cipher.viewPassword">
<i class="fa fa-lg fa-check-circle" [hidden]="checkPasswordBtn.loading"
aria-hidden="true"></i>
<i class="fa fa-lg fa-spinner fa-spin" [hidden]="!checkPasswordBtn.loading"
aria-hidden="true"></i>
</button>
<button type="button" class="row-btn" appStopClick appA11yTitle="{{'toggleVisibility' | i18n}}"
(click)="togglePassword()" *ngIf="cipher.viewPassword">
<i class="fa fa-lg" aria-hidden="true"
[ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
</button>
<button type="button" class="row-btn" appStopClick appA11yTitle="{{'copyPassword' | i18n}}"
(click)="copy(cipher.login.password, 'password', 'Password')" *ngIf="cipher.viewPassword">
<i class="fa fa-lg fa-clone" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="box-content-row box-content-row-flex totp" [ngClass]="{'low': totpLow}"
*ngIf="cipher.login.totp && totpCode">
<div class="row-main">
<span class="row-label draggable" draggable="true"
(dragstart)="setTextDataOnDrag($event, totpCode)">{{'verificationCodeTotp' | i18n}}</span>
<span class="totp-code">{{totpCodeFormatted}}</span>
</div>
<span class="totp-countdown">
<span class="totp-sec">{{totpSec}}</span>
<svg>
<g>
<circle class="totp-circle inner" r="12.6" cy="16" cx="16"
[ngStyle]="{'stroke-dashoffset.px': totpDash}"></circle>
<circle class="totp-circle outer" r="14" cy="16" cx="16"></circle>
</g>
</svg>
</span>
<div class="action-buttons">
<button type="button" class="row-btn" appStopClick appA11yTitle="{{'copyVerificationCode' | i18n}}"
(click)="copy(totpCode, 'verificationCodeTotp', 'TOTP')">
<i class="fa fa-lg fa-clone" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
<!-- Card -->
<div *ngIf="cipher.card">
<div class="box-content-row" *ngIf="cipher.card.cardholderName">
<span class="row-label">{{'cardholderName' | i18n}}</span>
{{cipher.card.cardholderName}}
</div>
<div class="box-content-row box-content-row-flex" *ngIf="cipher.card.number">
<div class="row-main">
<span class="row-label">{{'number' | i18n}}</span>
<span [hidden]="showCardNumber" class="monospaced">{{cipher.card.maskedNumber}}</span>
<span [hidden]="!showCardNumber" class="monospaced">{{cipher.card.number}}</span>
</div>
<div class="action-buttons">
<button type="button" class="row-btn" appStopClick appA11yTitle="{{'toggleVisibility' | i18n}}"
(click)="toggleCardNumber()">
<i class="fa fa-lg" aria-hidden="true"
[ngClass]="{'fa-eye': !showCardNumber, 'fa-eye-slash': showCardNumber}"></i>
</button>
<button type="button" class="row-btn" appStopClick appA11yTitle="{{'copyNumber' | i18n}}"
(click)="copy(cipher.card.number, 'number', 'Card Number')">
<i class="fa fa-lg fa-clone" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="box-content-row" *ngIf="cipher.card.brand">
<span class="row-label">{{'brand' | i18n}}</span>
{{cipher.card.brand}}
</div>
<div class="box-content-row" *ngIf="cipher.card.expiration">
<span class="row-label">{{'expiration' | i18n}}</span>
{{cipher.card.expiration}}
</div>
<div class="box-content-row box-content-row-flex" *ngIf="cipher.card.code">
<div class="row-main">
<span class="row-label">{{'securityCode' | i18n}}</span>
<span [hidden]="showCardCode" class="monospaced">{{cipher.card.maskedCode}}</span>
<span [hidden]="!showCardCode" class="monospaced">{{cipher.card.code}}</span>
</div>
<div class="action-buttons">
<button type="button" class="row-btn" appStopClick appA11yTitle="{{'toggleVisibility' | i18n}}"
(click)="toggleCardCode()">
<i class="fa fa-lg" aria-hidden="true"
[ngClass]="{'fa-eye': !showCardCode, 'fa-eye-slash': showCardCode}"></i>
</button>
<button type="button" class="row-btn" appStopClick appA11yTitle="{{'copySecurityCode' | i18n}}"
(click)="copy(cipher.card.code, 'securityCode', 'Security Code')">
<i class="fa fa-lg fa-clone" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
<!-- Identity -->
<div *ngIf="cipher.identity">
<div class="box-content-row" *ngIf="cipher.identity.fullName">
<span class="row-label">{{'identityName' | i18n}}</span>
{{cipher.identity.fullName}}
</div>
<div class="box-content-row" *ngIf="cipher.identity.username">
<span class="row-label">{{'username' | i18n}}</span>
{{cipher.identity.username}}
</div>
<div class="box-content-row" *ngIf="cipher.identity.company">
<span class="row-label">{{'company' | i18n}}</span>
{{cipher.identity.company}}
</div>
<div class="box-content-row" *ngIf="cipher.identity.ssn">
<span class="row-label">{{'ssn' | i18n}}</span>
{{cipher.identity.ssn}}
</div>
<div class="box-content-row" *ngIf="cipher.identity.passportNumber">
<span class="row-label">{{'passportNumber' | i18n}}</span>
{{cipher.identity.passportNumber}}
</div>
<div class="box-content-row" *ngIf="cipher.identity.licenseNumber">
<span class="row-label">{{'licenseNumber' | i18n}}</span>
{{cipher.identity.licenseNumber}}
</div>
<div class="box-content-row" *ngIf="cipher.identity.email">
<span class="row-label">{{'email' | i18n}}</span>
{{cipher.identity.email}}
</div>
<div class="box-content-row" *ngIf="cipher.identity.phone">
<span class="row-label">{{'phone' | i18n}}</span>
{{cipher.identity.phone}}
</div>
<div class="box-content-row"
*ngIf="cipher.identity.address1 || cipher.identity.city || cipher.identity.country">
<span class="row-label">{{'address' | i18n}}</span>
<div *ngIf="cipher.identity.address1">{{cipher.identity.address1}}</div>
<div *ngIf="cipher.identity.address2">{{cipher.identity.address2}}</div>
<div *ngIf="cipher.identity.address3">{{cipher.identity.address3}}</div>
<div *ngIf="cipher.identity.fullAddressPart2">{{cipher.identity.fullAddressPart2}}</div>
<div *ngIf="cipher.identity.country">{{cipher.identity.country}}</div>
</div>
</div>
</div>
</div>
<div class="box" *ngIf="cipher.login && cipher.login.hasUris">
<div class="box-content">
<div class="box-content-row box-content-row-flex" *ngFor="let u of cipher.login.uris; let i = index">
<div class="row-main">
<span class="row-label" *ngIf="!u.isWebsite">{{'uri' | i18n}}</span>
<span class="row-label" *ngIf="u.isWebsite">{{'website' | i18n}}</span>
<span title="{{u.uri}}">
<input type="text" [value]="u.hostOrUri" readonly aria-readonly="true" />
</span>
</div>
<div class="action-buttons">
<button type="button" class="row-btn" appStopClick appA11yTitle="{{'launch' | i18n}}" *ngIf="u.canLaunch"
(click)="launch(u)">
<i class="fa fa-lg fa-share-square-o" aria-hidden="true"></i>
</button>
<button type="button" class="row-btn" appStopClick appA11yTitle="{{'copyUri' | i18n}}"
(click)="copy(u.uri, u.isWebsite ? 'website' : 'uri', 'URI')">
<i class="fa fa-lg fa-clone" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</div>
<div class="box" *ngIf="cipher.notes">
<div class="box-header">
{{'notes' | i18n}}
</div>
<div class="box-content">
<div class="box-content-row">
<textarea [value]="cipher.notes" rows="6" readonly aria-readonly="true"></textarea>
</div>
</div>
</div>
<div class="box" *ngIf="cipher.hasFields">
<div class="box-header">
{{'customFields' | i18n}}
</div>
<div class="box-content">
<div class="box-content-row box-content-row-flex" *ngFor="let field of cipher.fields">
<div class="row-main">
<span class="row-label">{{field.name}}</span>
<div *ngIf="field.type === fieldType.Text">
{{field.value || '&nbsp;'}}
</div>
<div *ngIf="field.type === fieldType.Hidden">
<span [hidden]="!field.showValue" class="monospaced show-whitespace">{{field.value}}</span>
<span [hidden]="field.showValue" class="monospaced">{{field.maskedValue}}</span>
</div>
<div *ngIf="field.type === fieldType.Boolean">
<i class="fa fa-check-square-o" *ngIf="field.value === 'true'" aria-hidden="true"></i>
<i class="fa fa-square-o" *ngIf="field.value !== 'true'" aria-hidden="true"></i>
<span class="sr-only">{{field.value}}</span>
</div>
</div>
<div class="action-buttons">
<button type="button" class="row-btn" appStopClick appA11yTitle="{{'toggleVisibility' | i18n}}"
*ngIf="field.type === fieldType.Hidden && cipher.viewPassword"
(click)="toggleFieldValue(field)">
<i class="fa fa-lg" aria-hidden="true"
[ngClass]="{'fa-eye': !field.showValue, 'fa-eye-slash': field.showValue}"></i>
</button>
<button type="button" class="row-btn" appStopClick appA11yTitle="{{'copyValue' | i18n}}"
*ngIf="field.value && field.type !== fieldType.Boolean && !(field.type === fieldType.Hidden && !cipher.viewPassword)"
(click)="copy(field.value, 'value', field.type === fieldType.Hidden ? 'H_Field' : 'Field')">
<i class="fa fa-lg fa-clone" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</div>
<div class="box" *ngIf="cipher.hasAttachments && (canAccessPremium || cipher.organizationId) && showAttachments">
<div class="box-header">
{{'attachments' | i18n}}
</div>
<div class="box-content">
<button type="button" class="box-content-row box-content-row-flex text-default" *ngFor="let attachment of cipher.attachments"
appStopClick appBlurCLick (click)="downloadAttachment(attachment)">
<span class="row-main">{{attachment.fileName}}</span>
<small class="row-sub-label">{{attachment.sizeName}}</small>
<i class="fa fa-download fa-fw row-sub-icon" *ngIf="!attachment.downloading" aria-hidden="true"></i>
<i class="fa fa-spinner fa-fw fa-spin row-sub-icon" *ngIf="attachment.downloading"
aria-hidden="true"></i>
</button>
</div>
</div>
<div class="box list">
<div class="box-content single-line">
<button type="button" class="box-content-row" appStopClick appBlurClick (click)="fillCipher()"
*ngIf="cipher.type !== cipherType.SecureNote && !cipher.isDeleted && !inPopout">
<div class="row-main text-primary">
<div class="icon text-primary" aria-hidden="true">
<i class="fa fa-pencil-square-o fa-lg fa-fw"></i>
</div>
<span>{{'autoFill' | i18n}}</span>
</div>
</button>
<button type="button" class="box-content-row" appStopClick appBlurClick (click)="fillCipherAndSave()"
*ngIf="cipher.type === cipherType.Login && !cipher.isDeleted && !inPopout">
<div class="row-main text-primary">
<div class="icon text-primary" aria-hidden="true">
<i class="fa fa-bookmark fa-lg fa-fw"></i>
</div>
<span>{{'autoFillAndSave' | i18n}}</span>
</div>
</button>
<button type="button" class="box-content-row" appStopClick appBlurClick (click)="clone()"
*ngIf="!cipher.organizationId && !cipher.isDeleted">
<div class="row-main text-primary">
<div class="icon text-primary" aria-hidden="true">
<i class="fa fa-files-o fa-lg fa-fw"></i>
</div>
<span>{{'cloneItem' | i18n}}</span>
</div>
</button>
<button type="button" class="box-content-row" appStopClick appBlurClick (click)="share()" *ngIf="!cipher.organizationId">
<div class="row-main text-primary">
<div class="icon text-primary" aria-hidden="true">
<i class="fa fa-arrow-circle-o-right fa-lg fa-fw"></i>
</div>
<span>{{'moveToOrganization' | i18n}}</span>
</div>
</button>
<button type="button" class="box-content-row" appStopClick appBlurClick (click)="restore()" *ngIf="cipher.isDeleted">
<div class="row-main text-primary">
<div class="icon text-primary" aria-hidden="true">
<i class="fa fa-undo fa-lg fa-fw"></i>
</div>
<span>{{'restoreItem' | i18n}}</span>
</div>
</button>
<button type="button" class="box-content-row" appStopClick appBlurClick (click)="delete()">
<div class="row-main text-danger">
<div class="icon text-danger" aria-hidden="true">
<i class="fa fa-trash-o fa-lg fa-fw"></i>
</div>
<span>{{(cipher.isDeleted ? 'permanentlyDeleteItem' : 'deleteItem') | i18n}}</span>
</div>
</button>
</div>
</div>
<div class="box">
<div class="box-footer">
<div>
<b class="font-weight-semibold">{{'dateUpdated' | i18n}}:</b>
{{cipher.revisionDate | date:'medium'}}
</div>
<div *ngIf="cipher.passwordRevisionDisplayDate">
<b class="font-weight-semibold">{{'datePasswordUpdated' | i18n}}:</b>
{{cipher.passwordRevisionDisplayDate | date:'medium'}}
</div>
<div *ngIf="cipher.hasPasswordHistory">
<b class="font-weight-semibold">{{'passwordHistory' | i18n}}:</b>
<a routerLink="/cipher-password-history" [queryParams]="{cipherId: cipher.id}" appStopClick
title="{{'passwordHistory' | i18n}}">
{{cipher.passwordHistory.length}}
</a>
</div>
</div>
</div>
</content>