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.viewLogin}}</div>
</div>
<div class="content">
    <div class="list list-no-selection">
        <div class="list-section">
            <div class="list-section-header">
                {{i18n.loginInformation}}
                <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">
                    <span class="item-label">{{i18n.name}}</span>
                    {{cipher.name}}
                </div>
                <div ng-if="cipher.type === constants.cipherType.login">
                    <div class="list-section-item" ng-if="cipher.login.uri" title="{{cipher.login.uri}}">
                        <a class="btn-list" href="" title="{{i18n.launchWebsite}}" ng-click="launchWebsite(cipher)"
                           ng-show="cipher.showLaunch">
                            <i class="fa fa-lg fa-share-square-o"></i>
                        </a>
                        <span class="item-label">{{i18n.website}}</span>
                        {{cipher.login.website}}
                    </div>
                    <div class="list-section-item" ng-if="cipher.login.username">
                        <a class="btn-list" href="" title="{{i18n.copyUsername}}"
                           ngclipboard ngclipboard-error="clipboardError(e)"
                           ngclipboard-success="clipboardSuccess(e, i18n.username)"
                           data-clipboard-text="{{cipher.login.username}}">
                            <i class="fa fa-lg fa-clipboard"></i>
                        </a>
                        <span class="item-label">{{i18n.username}}</span>
                        <span id="username">{{cipher.login.username}}</span>
                    </div>
                    <div class="list-section-item" ng-if="cipher.login.password">
                        <a class="btn-list" href="" title="{{i18n.copyPassword}}"
                           ngclipboard ngclipboard-error="clipboardError(e)"
                           ngclipboard-success="clipboardSuccess(e, i18n.password)"
                           data-clipboard-text="{{cipher.login.password}}">
                            <i class="fa fa-lg fa-clipboard"></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>
                        <span class="item-label">{{i18n.password}}</span>
                        <span ng-show="!showPassword" class="monospaced">{{cipher.maskedPassword}}</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">
                        <a class="btn-list" href="" title="{{i18n.copyVerificationCode}}"
                           ngclipboard ngclipboard-error="clipboardError(e)"
                           ngclipboard-success="clipboardSuccess(e, i18n.verificationCodeTotp)" data-clipboard-text="{{totpCode}}">
                            <i class="fa fa-lg fa-clipboard"></i>
                        </a>
                        <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">
                        <a class="btn-list" href="" title="{{i18n.copy}}"
                           ngclipboard ngclipboard-error="clipboardError(e)"
                           ngclipboard-success="clipboardSuccess(e, i18n.cardholderName)"
                           data-clipboard-text="{{cipher.card.cardholderName}}">
                            <i class="fa fa-lg fa-clipboard"></i>
                        </a>
                        <span class="item-label">{{i18n.cardholderName}}</span>
                        <span id="username">{{cipher.card.cardholderName}}</span>
                    </div>
                    <div class="list-section-item" ng-if="cipher.card.number">
                        <a class="btn-list" href="" title="{{i18n.copy}}"
                           ngclipboard ngclipboard-error="clipboardError(e)"
                           ngclipboard-success="clipboardSuccess(e, i18n.number)"
                           data-clipboard-text="{{cipher.card.number}}">
                            <i class="fa fa-lg fa-clipboard"></i>
                        </a>
                        <span class="item-label">{{i18n.number}}</span>
                        <span id="username">{{cipher.card.number}}</span>
                    </div>
                </div>
                <div ng-if="cipher.type === constants.cipherType.identity">
                    <div class="list-section-item" ng-if="cipher.identity.firstName">
                        <span class="item-label">{{i18n.firstName}}</span>
                        {{cipher.identity.firstName}}
                    </div>
                    <div class="list-section-item" ng-if="cipher.identity.middleName">
                        <span class="item-label">{{i18n.middleName}}</span>
                        {{cipher.identity.middleName}}
                    </div>
                    <div class="list-section-item" ng-if="cipher.identity.lastName">
                        <span class="item-label">{{i18n.lastName}}</span>
                        {{cipher.identity.lastName}}
                    </div>
                </div>
                <div ng-if="cipher.type === constants.cipherType.secureNote">
                    <!-- Nothing for now -->
                </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" ng-repeat="field in cipher.fields">
                    <a class="btn-list" href="" title="{{i18n.copyValue}}" ngclipboard ngclipboard-error="clipboardError(e)"
                       ngclipboard-success="clipboardSuccess(e, i18n.value)" data-clipboard-text="{{field.value}}"
                       ng-if="field.type !== constants.fieldType.boolean && field.value">
                        <i class="fa fa-lg fa-clipboard"></i>
                    </a>
                    <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>
                    <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" 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>