browser/src/popup/app/vault/views/vaultViewCipher.html

<div class="header">
    <div class="left">
        <a href="" ng-click="close()">{{i18n.close}}</a>
    </div>
    <div class="right">
        <a href="" ng-click="edit(cipher)">{{i18n.edit}}</a>
    </div>
    <div class="title">{{i18n.viewItem}}</div>
</div>
<div class="content">
    <div class="list list-no-selection">
        <div class="list-section">
            <div class="list-section-header">
                {{i18n.itemInformation}}
                <i class="fa fa-share-alt fa-lg pull-right" ng-if="cipher.organizationId" title="{{i18n.shared}}"></i>
            </div>
            <div class="list-section-items">
                <div class="list-section-item wrap">
                    <span class="item-label">{{i18n.name}}</span>
                    {{cipher.name}}
                </div>
                <div ng-if="cipher.type === constants.cipherType.login">
                    <div class="list-section-item wrap" ng-if="cipher.login.username">
                        <div class="action-buttons">
                            <a class="btn-list" href="" title="{{i18n.copyUsername}}"
                               ngclipboard ngclipboard-error="clipboardError(e)"
                               ngclipboard-success="clipboardSuccess(e, i18n.username, 'Username')"
                               data-clipboard-text="{{cipher.login.username}}">
                                <i class="fa fa-lg fa-clipboard"></i>
                            </a>
                        </div>
                        <span class="item-label">{{i18n.username}}</span>
                        <span id="username">{{cipher.login.username}}</span>
                    </div>
                    <div class="list-section-item wrap" ng-if="cipher.login.password">
                        <div class="action-buttons">
                            <a class="btn-list" href="" title="{{i18n.checkPassword}}" ng-click="checkPassword()">
                                <i class="fa fa-lg fa-check-circle"></i>
                            </a>
                            <a class="btn-list" href="" title="{{i18n.togglePassword}}" ng-click="togglePassword()">
                                <i class="fa fa-lg" ng-class="[{'fa-eye': !showPassword}, {'fa-eye-slash': showPassword}]"></i>
                            </a>
                            <a class="btn-list" href="" title="{{i18n.copyPassword}}"
                               ngclipboard ngclipboard-error="clipboardError(e)"
                               ngclipboard-success="clipboardSuccess(e, i18n.password, 'Password')"
                               data-clipboard-text="{{cipher.login.password}}">
                                <i class="fa fa-lg fa-clipboard"></i>
                            </a>
                        </div>
                        <span class="item-label">{{i18n.password}}</span>
                        <span ng-show="!showPassword" class="monospaced">{{maskValue(cipher.login.password)}}</span>
                        <span id="password" ng-show="showPassword" class="monospaced">{{cipher.login.password}}</span>
                    </div>
                    <div class="list-section-item totp" ng-class="{'low': totpLow}" ng-if="cipher.login.totp && totpCode">
                        <div class="action-buttons">
                            <a class="btn-list" href="" title="{{i18n.copyVerificationCode}}"
                               ngclipboard ngclipboard-error="clipboardError(e)"
                               ngclipboard-success="clipboardSuccess(e, i18n.verificationCodeTotp, 'TOTP')"
                               data-clipboard-text="{{totpCode}}">
                                <i class="fa fa-lg fa-clipboard"></i>
                            </a>
                        </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"
                                            style="stroke-dashoffset: {{totpDash}}px;"></circle>
                                    <circle class="totp-circle outer" r="14" cy="16" cx="16"></circle>
                                </g>
                            </svg>
                        </span>
                        <span class="item-label">{{i18n.verificationCodeTotp}}</span>
                        <span id="totp" class="totp-code">{{totpCodeFormatted}}</span>

                    </div>
                </div>
                <div ng-if="cipher.type === constants.cipherType.card">
                    <div class="list-section-item" ng-if="cipher.card.cardholderName">
                        <span class="item-label">{{i18n.cardholderName}}</span>
                        {{cipher.card.cardholderName}}
                    </div>
                    <div class="list-section-item" ng-if="cipher.card.number">
                        <div class="action-buttons">
                            <a class="btn-list" href="" title="{{i18n.copyNumber}}"
                               ngclipboard ngclipboard-error="clipboardError(e)"
                               ngclipboard-success="clipboardSuccess(e, i18n.number, 'Number')"
                               data-clipboard-text="{{cipher.card.number}}">
                                <i class="fa fa-lg fa-clipboard"></i>
                            </a>
                        </div>
                        <span class="item-label">{{i18n.number}}</span>
                        {{cipher.card.number}}
                    </div>
                    <div class="list-section-item" ng-if="cipher.card.brand">
                        <span class="item-label">{{i18n.brand}}</span>
                        {{cipher.card.brand}}
                    </div>
                    <div class="list-section-item" ng-if="cipher.card.expMonth || cipher.card.expYear">
                        <span class="item-label">{{i18n.expiration}}</span>
                        {{cipher.card.expMonth ? ('0' + cipher.card.expMonth).slice(-2) : '__'}}
                        /
                        {{cipher.card.expYear ? formatYear(cipher.card.expYear) : '____'}}
                    </div>
                    <div class="list-section-item" ng-if="cipher.card.code">
                        <div class="action-buttons">
                            <a class="btn-list" href="" title="{{i18n.copySecurityCode}}"
                               ngclipboard ngclipboard-error="clipboardError(e)"
                               ngclipboard-success="clipboardSuccess(e, i18n.securityCode, 'Security Code')"
                               data-clipboard-text="{{cipher.card.code}}">
                                <i class="fa fa-lg fa-clipboard"></i>
                            </a>
                        </div>
                        <span class="item-label">{{i18n.securityCode}}</span>
                        {{cipher.card.code}}
                    </div>
                </div>
                <div ng-if="cipher.type === constants.cipherType.identity">
                    <div class="list-section-item" ng-if="cipher.identity.firstName || cipher.identity.lastName">
                        <span class="item-label">{{i18n.identityName}}</span>
                        {{cipher.identity.title}}
                        {{cipher.identity.firstName}}
                        {{cipher.identity.middleName}}
                        {{cipher.identity.lastName}}
                    </div>
                    <div class="list-section-item" ng-if="cipher.identity.username">
                        <span class="item-label">{{i18n.username}}</span>
                        {{cipher.identity.username}}
                    </div>
                    <div class="list-section-item" ng-if="cipher.identity.company">
                        <span class="item-label">{{i18n.company}}</span>
                        {{cipher.identity.company}}
                    </div>
                    <div class="list-section-item" ng-if="cipher.identity.ssn">
                        <span class="item-label">{{i18n.ssn}}</span>
                        {{cipher.identity.ssn}}
                    </div>
                    <div class="list-section-item" ng-if="cipher.identity.passportNumber">
                        <span class="item-label">{{i18n.passportNumber}}</span>
                        {{cipher.identity.passportNumber}}
                    </div>
                    <div class="list-section-item" ng-if="cipher.identity.licenseNumber">
                        <span class="item-label">{{i18n.licenseNumber}}</span>
                        {{cipher.identity.licenseNumber}}
                    </div>
                    <div class="list-section-item" ng-if="cipher.identity.email">
                        <span class="item-label">{{i18n.email}}</span>
                        {{cipher.identity.email}}
                    </div>
                    <div class="list-section-item" ng-if="cipher.identity.phone">
                        <span class="item-label">{{i18n.phone}}</span>
                        {{cipher.identity.phone}}
                    </div>
                    <div class="list-section-item"
                         ng-if="cipher.identity.address1 || cipher.identity.city || cipher.identity.country">
                        <span class="item-label">{{i18n.address}}</span>
                        <div ng-if="cipher.identity.address1">{{cipher.identity.address1}}</div>
                        <div ng-if="cipher.identity.address2">{{cipher.identity.address2}}</div>
                        <div ng-if="cipher.identity.address3">{{cipher.identity.address3}}</div>
                        <div ng-if="cipher.identity.city || cipher.identity.state || cipher.identity.postalCode">
                            {{cipher.identity.city || '-'}},
                            {{cipher.identity.state || '-'}},
                            {{cipher.identity.postalCode || '-'}}
                        </div>
                        <div ng-if="cipher.identity.country">{{cipher.identity.country}}</div>
                    </div>
                </div>
                <div ng-if="cipher.type === constants.cipherType.secureNote">
                    <!-- Nothing for now -->
                </div>
            </div>
        </div>
        <div class="list-section"
             ng-if="cipher.type === constants.cipherType.login && cipher.login.uris && cipher.login.uris.length">
            <div class="list-section-items">
                <div class="list-section-item wrap" title="{{u.uri}}" ng-repeat="u in cipher.login.uris">
                    <div class="action-buttons">
                        <a class="btn-list" href="" title="{{i18n.launchWebsite}}" ng-click="launch(u)"
                           ng-show="u.canLaunch">
                            <i class="fa fa-lg fa-share-square-o"></i>
                        </a>
                        <a class="btn-list" href="" title="{{i18n.copyUri}}"
                           ngclipboard ngclipboard-error="clipboardError(e)"
                           ngclipboard-success="clipboardSuccess(e, i18n.uri, 'URI')"
                           data-clipboard-text="{{u.uri}}">
                            <i class="fa fa-lg fa-clipboard"></i>
                        </a>
                    </div>
                    <span class="item-label" ng-if="u.isWebsite">{{i18n.website}}</span>
                    <span class="item-label" ng-if="!u.isWebsite">{{i18n.uri}}</span>
                    {{u.domainOrUri}}
                </div>
            </div>
        </div>
        <div class="list-section" ng-if="cipher.notes">
            <div class="list-section-header">
                {{i18n.notes}}
            </div>
            <div class="list-section-items">
                <div class="list-section-item pre">{{cipher.notes}}</div>
            </div>
        </div>
        <div class="list-section" ng-if="cipher.fields && cipher.fields.length">
            <div class="list-section-header">
                {{i18n.customFields}}
            </div>
            <div class="list-section-items">
                <div class="list-section-item wrap" ng-repeat="field in cipher.fields">
                    <div class="action-buttons">
                        <a class="btn-list" href="" title="{{i18n.toggleValue}}" ng-click="toggleFieldValue(field)"
                           ng-if="field.type === constants.fieldType.hidden">
                            <i class="fa fa-lg" ng-class="[{'fa-eye': !field.showValue}, {'fa-eye-slash': field.showValue}]"></i>
                        </a>
                        <a class="btn-list" href="" title="{{i18n.copyValue}}" ngclipboard ngclipboard-error="clipboardError(e)"
                           ngclipboard-success="clipboardSuccess(e, i18n.value, 'Field')" data-clipboard-text="{{field.value}}"
                           ng-if="field.type !== constants.fieldType.boolean && field.value">
                            <i class="fa fa-lg fa-clipboard"></i>
                        </a>
                    </div>
                    <span class="item-label">{{field.name}}</span>
                    <div ng-if="field.type === constants.fieldType.text">
                        {{field.value || '&nbsp;'}}
                    </div>
                    <div ng-if="field.type === constants.fieldType.hidden">
                        <span ng-show="!field.showValue" class="monospaced">{{maskValue(field.value)}}</span>
                        <span ng-show="field.showValue" class="monospaced">{{field.value}}</span>
                    </div>
                    <div ng-if="field.type === constants.fieldType.boolean">
                        <i class="fa fa-check-square-o" ng-if="field.value === 'true'"></i>
                        <i class="fa fa-square-o" ng-if="field.value !== 'true'"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="list-section" ng-if="showAttachments && isPremium && cipher.attachments && cipher.attachments.length">
            <div class="list-section-header">
                {{i18n.attachments}}
            </div>
            <div class="list-section-items">
                <a class="list-section-item list-allow-selection wrap" href="#" stop-click
                   ng-repeat="attachment in cipher.attachments"
                   ng-click="download(attachment)">
                    <i class="fa fa-download right-icon fa-fw no-animation" ng-if="!attachment.downloading"></i>
                    <i class="fa fa-spin fa-spinner right-icon fa-fw no-animation" ng-if="attachment.downloading"></i>
                    <small class="item-sub-label">{{attachment.sizeName}}</small>
                    <span class="text">{{attachment.fileName}}</span>
                </a>
            </div>
        </div>
    </div>
</div>