vaultwarden-test/web-vault/app/vault/views/vault.html

<section class="content-header">
    <div class="btn-group pull-right">
        <button type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown" ng-disabled="actionLoading">
            <i class="fa fa-refresh fa-spin" ng-show="actionLoading"></i>
            Actions <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li>
                <a href="#" stop-click ng-click="bulkMove()">
                    <i class="fa fa-fw fa-share"></i> Move Selected
                </a>
            </li>
            <li>
                <a href="#" stop-click ng-click="bulkDelete()">
                    <i class="fa fa-fw fa-trash"></i> Delete Selected
                </a>
            </li>
            <li role="separator" class="divider"></li>
            <li>
                <a href="#" stop-click ng-click="unselectAll()">
                    <i class="fa fa-fw fa-minus-circle"></i> Unselect All
                </a>
            </li>
            <li>
                <a href="#" stop-click ng-click="collapseAll()">
                    <i class="fa fa-fw fa-minus-square-o"></i> Collapse All
                </a>
            </li>
            <li>
                <a href="#" stop-click ng-click="expandAll()">
                    <i class="fa fa-fw fa-plus-square-o"></i> Expand All
                </a>
            </li>
        </ul>
    </div>
    <h1>
        My Vault
        <small class="visible-md-inline visible-lg-inline">
            <span ng-pluralize count="folderCount" when="{'1': '{} folder', 'other': '{} folders'}"></span>,
            <span ng-pluralize count="collectionCount" when="{'1': '{} collection', 'other': '{} collections'}"></span>, &amp;
            <span ng-pluralize count="ciphers.length" when="{'1': '{} item', 'other': '{} items'}"></span>
        </small>
    </h1>
</section>
<section class="content">
    <div ng-show="loading && !vaultGroupings.length">
        <p>Loading...</p>
    </div>
    <div class="box box-primary" ng-class="{'collapsed-box': favoriteCollapsed}" style="margin-bottom: 40px;"
         ng-show="vaultGroupings.length && groupingIdFilter === undefined && (!main.searchVaultText || favoriteCiphers.length)">
        <div class="box-header with-border">
            <h3 class="box-title">
                <i class="fa fa-star"></i>
                Favorites
                <small ng-pluralize count="favoriteCiphers.length" when="{'1': '{} item', 'other': '{} items'}"></small>
            </h3>
            <div class="box-tools">
                <div class="btn-group">
                    <button type="button" class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown">
                        <i class="fa fa-cog"></i> <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-right">
                        <li>
                            <a href="#" stop-click ng-click="addCipher(null, true)">
                                <i class="fa fa-fw fa-plus-circle"></i> New Item
                            </a>
                        </li>
                    </ul>
                </div>
                <button type="button" class="btn btn-box-tool" data-widget="collapse" title="Collapse/Expand"
                        ng-click="collapseExpand(null, true)">
                    <i class="fa" ng-class="{'fa-minus': !favoriteCollapsed, 'fa-plus': favoriteCollapsed}"></i>
                </button>
            </div>
        </div>
        <div class="box-body" ng-class="{'no-padding': favoriteCiphers.length}">
            <div ng-show="!favoriteCiphers.length">
                <p>No favorite items.</p>
                <button type="button" ng-click="addCipher(null, true)" class="btn btn-default btn-flat">Add an Item</button>
            </div>
            <div class="table-responsive" ng-show="favoriteCiphers.length">
                <table class="table table-striped table-hover table-vmiddle">
                    <tbody>
                        <tr ng-repeat="cipher in favoriteCiphers = (ciphers | filter: { favorite: true } |
                            filter: cipherFilter(null) | filter: (main.searchVaultText || '')) track by cipher.id">
                            <td style="width: 70px;">
                                <div class="btn-group" data-append-to="body">
                                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                        <i class="fa fa-cog"></i> <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a href="#" stop-click ng-click="editCipher(cipher)">
                                                <i class="fa fa-fw fa-pencil"></i> Edit
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" stop-click ng-click="attachments(cipher)">
                                                <i class="fa fa-fw fa-paperclip"></i> Attachments
                                            </a>
                                        </li>
                                        <li ng-show="!cipher.organizationId">
                                            <a href="#" stop-click ng-click="share(cipher)">
                                                <i class="fa fa-fw fa-share-alt"></i> Share
                                            </a>
                                        </li>
                                        <li ng-show="cipher.organizationId && cipher.edit">
                                            <a href="#" stop-click ng-click="editCollections(cipher)">
                                                <i class="fa fa-fw fa-cubes"></i> Collections
                                            </a>
                                        </li>
                                        <li ng-show="cipher.meta.password">
                                            <a href="#" stop-click ngclipboard ngclipboard-error="clipboardError(e)"
                                               data-clipboard-text="{{cipher.meta.password}}">
                                                <i class="fa fa-fw fa-clipboard"></i> Copy Password
                                            </a>
                                        </li>
                                        <li ng-show="cipher.edit">
                                            <a href="#" stop-click ng-click="deleteCipher(cipher)" class="text-red">
                                                <i class="fa fa-fw fa-trash"></i> Delete
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </td>
                            <td class="action-select" ng-click="select($event)">
                                <input type="checkbox" value="{{::cipher.id}}" name="cipherSelection" stop-prop />
                            </td>
                            <td class="vault-icon" ng-click="select($event)">
                                <i class="fa fa-fw fa-lg {{::cipher.icon}}" ng-if="!cipher.meta.image"></i>
                                <img alt="" ng-if="cipher.meta.image" ng-src="{{cipher.meta.image}}"
                                     fallback-src="images/fa-globe.png" />
                            </td>
                            <td ng-click="select($event)">
                                <a href="#" stop-click ng-click="editCipher(cipher)" stop-prop>{{cipher.name}}</a>
                                <i class="fa fa-share-alt text-muted" title="Shared" ng-if="cipher.organizationId"
                                   stop-prop></i>
                                <i class="fa fa-paperclip text-muted" title="Attachments" ng-if="cipher.hasAttachments"
                                   stop-prop></i><br />
                                <span class="text-sm text-muted" stop-prop>{{cipher.subTitle}}</span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="box" ng-class="{'collapsed-box': grouping.collapsed}"
         ng-repeat="grouping in filteredVaultGroupings = (vaultGroupings | filter: groupingFilter) track by grouping.id"
         ng-show="vaultGroupings.length && (!main.searchVaultText || groupingCiphers.length)"
         ng-style="firstCollectionId && grouping.id === firstCollectionId &&
            groupingIdFilter !== grouping.id && {'margin-top': '40px'}">
        <div class="box-header with-border">
            <h3 class="box-title">
                <i class="fa" ng-if="grouping.folder"
                   ng-class="{'fa-folder-open': grouping.id !== null, 'fa-folder-open-o': grouping.id === null}"></i>
                <i class="fa fa-cube" ng-if="grouping.collection"></i>
                {{grouping.name}}
                <small ng-pluralize count="groupingCiphers.length" when="{'1': '{} item', 'other': '{} items'}"></small>
            </h3>
            <div class="box-tools">
                <div class="btn-group">
                    <button type="button" class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown">
                        <i class="fa fa-cog"></i> <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-right" ng-if="grouping.folder">
                        <li>
                            <a href="#" stop-click ng-click="addCipher(grouping)">
                                <i class="fa fa-fw fa-plus-circle"></i> New Item
                            </a>
                        </li>
                        <li ng-show="grouping.id">
                            <a href="#" stop-click ng-click="editFolder(grouping)">
                                <i class="fa fa-fw fa-pencil"></i> Edit Folder
                            </a>
                        </li>
                        <li ng-show="canDeleteFolder(grouping)">
                            <a href="#" stop-click ng-click="deleteFolder(grouping)" class="text-red">
                                <i class="fa fa-fw fa-trash"></i> Delete Folder
                            </a>
                        </li>
                        <li>
                            <a href="#" stop-click ng-click="selectFolder(grouping, $event)">
                                <i class="fa fa-fw fa-check-square-o"></i> Select All
                            </a>
                        </li>
                    </ul>
                    <ul class="dropdown-menu dropdown-menu-right" ng-if="grouping.collection">
                        <li>
                            <a href="#" stop-click ng-click="selectFolder(grouping, $event)">
                                <i class="fa fa-fw fa-check-square-o"></i> Select All
                            </a>
                        </li>
                    </ul>
                </div>
                <button type="button" class="btn btn-box-tool" data-widget="collapse" title="Collapse/Expand"
                        ng-click="collapseExpand(grouping)">
                    <i class="fa" ng-class="{'fa-minus': !grouping.collapsed, 'fa-plus': grouping.collapsed}"></i>
                </button>
            </div>
        </div>
        <div class="box-body" ng-class="{'no-padding': groupingCiphers.length}">
            <div ng-show="!groupingCiphers.length">
                <div ng-if="grouping.folder">
                    <p>No items in this folder.</p>
                    <button type="button" ng-click="addCipher(grouping)" class="btn btn-default btn-flat">Add an Item</button>
                </div>
                <div ng-if="!grouping.folder">
                    <p>No items in this collection.</p>
                </div>
            </div>
            <div class="table-responsive" ng-show="groupingCiphers.length">
                <table class="table table-striped table-hover table-vmiddle">
                    <tbody>
                        <tr ng-repeat="cipher in groupingCiphers = (ciphers | filter: cipherFilter(grouping) |
                            filter: (main.searchVaultText || '')) track by cipher.id">
                            <td style="width: 70px;">
                                <div class="btn-group" data-append-to="body">
                                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                        <i class="fa fa-cog"></i> <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a href="#" stop-click ng-click="editCipher(cipher)">
                                                <i class="fa fa-fw fa-pencil"></i> Edit
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" stop-click ng-click="attachments(cipher)">
                                                <i class="fa fa-fw fa-paperclip"></i> Attachments
                                            </a>
                                        </li>
                                        <li ng-show="!cipher.organizationId">
                                            <a href="#" stop-click ng-click="share(cipher)">
                                                <i class="fa fa-fw fa-share-alt"></i> Share
                                            </a>
                                        </li>
                                        <li ng-show="cipher.organizationId && cipher.edit">
                                            <a href="#" stop-click ng-click="editCollections(cipher)">
                                                <i class="fa fa-fw fa-cubes"></i> Collections
                                            </a>
                                        </li>
                                        <li ng-show="cipher.meta.password">
                                            <a href="#" stop-click ngclipboard ngclipboard-error="clipboardError(e)"
                                               data-clipboard-text="{{cipher.meta.password}}">
                                                <i class="fa fa-fw fa-clipboard"></i> Copy Password
                                            </a>
                                        </li>
                                        <li ng-show="cipher.edit">
                                            <a href="#" stop-click ng-click="deleteCipher(cipher)" class="text-red">
                                                <i class="fa fa-fw fa-trash"></i> Delete
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </td>
                            <td class="action-select" ng-click="select($event)">
                                <input type="checkbox" value="{{::cipher.id}}" name="cipherSelection" stop-prop />
                            </td>
                            <td class="vault-icon" ng-click="select($event)">
                                <i class="fa fa-fw fa-lg {{::cipher.icon}}" ng-if="!cipher.meta.image"></i>
                                <img alt="" ng-if="cipher.meta.image" ng-src="{{cipher.meta.image}}"
                                     fallback-src="images/fa-globe.png" />
                            </td>
                            <td ng-click="select($event)">
                                <a href="#" stop-click ng-click="editCipher(cipher)" stop-prop>{{cipher.name}}</a>
                                <i class="fa fa-star text-muted" title="Favorite" ng-show="cipher.favorite" stop-prop></i>
                                <i class="fa fa-share-alt text-muted" title="Shared" ng-show="cipher.organizationId"
                                   stop-prop></i>
                                <i class="fa fa-paperclip text-muted" title="Attachments" ng-if="cipher.hasAttachments"
                                   stop-prop></i>
                                <br />
                                <span class="text-sm text-muted" stop-prop>{{cipher.subTitle}}</span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</section>
<aside class="control-sidebar control-sidebar-light">
    <div class="tab-content">
        <ul class="control-sidebar-menu">
            <li>
                <a href="#" stop-click ng-click="clearFilters()">
                    Clear All Filters
                </a>
            </li>
        </ul>
        <h3 class="control-sidebar-heading">
            <i class="fa fa-tag fa-fw"></i> Types
        </h3>
        <div class="control-sidebar-section">
            <ul class="control-sidebar-menu">
                <li>
                    <a href="#" stop-click ng-click="filterType(constants.cipherType.login)">
                        <i class="fa fa-check fa-fw" ng-if="constants.cipherType.login === typeFilter"></i>
                        <i class="fa fa-globe fa-fw" ng-if="constants.cipherType.login !== typeFilter"></i> Login
                    </a>
                </li>
                <li>
                    <a href="#" stop-click ng-click="filterType(constants.cipherType.card)">
                        <i class="fa fa-check fa-fw" ng-if="constants.cipherType.card === typeFilter"></i>
                        <i class="fa fa-credit-card fa-fw" ng-if="constants.cipherType.card !== typeFilter"></i> Card
                    </a>
                </li>
                <li>
                    <a href="#" stop-click ng-click="filterType(constants.cipherType.identity)">
                        <i class="fa fa-check fa-fw" ng-if="constants.cipherType.identity === typeFilter"></i>
                        <i class="fa fa-id-card-o fa-fw" ng-if="constants.cipherType.identity !== typeFilter"></i> Identity
                    </a>
                </li>
                <li>
                    <a href="#" stop-click ng-click="filterType(constants.cipherType.secureNote)">
                        <i class="fa fa-check fa-fw" ng-if="constants.cipherType.secureNote === typeFilter"></i>
                        <i class="fa fa-sticky-note-o fa-fw" ng-if="constants.cipherType.secureNote !== typeFilter"></i> Secure Note
                    </a>
                </li>
            </ul>
        </div>
        <h3 class="control-sidebar-heading">
            <i class="fa fa-folder fa-fw"></i> Folders
        </h3>
        <div ng-show="loading && !vaultGroupings.length">
            <p>Loading...</p>
        </div>
        <div class="control-sidebar-section">
            <ul class="control-sidebar-menu" ng-show="!loading && folders.length">
                <li ng-repeat="folder in folders = (vaultGroupings | filter: {folder: true}) track by folder.id">
                    <a href="#" stop-click ng-click="filterGrouping(folder)">
                        <i class="fa fa-check fa-fw" ng-if="folder.id === groupingIdFilter"></i>
                        <i class="fa fa-caret-right fa-fw" ng-if="folder.id !== groupingIdFilter"></i>
                        {{folder.name}}
                    </a>
                </li>
            </ul>
        </div>
        <h3 class="control-sidebar-heading">
            <i class="fa fa-cubes fa-fw"></i> Collections
        </h3>
        <div ng-show="loading && !vaultGroupings.length">
            <p>Loading...</p>
        </div>
        <div ng-show="!loading && !collections.length">
            <p>No collections are being shared with you. <i class="fa fa-frown-o"></i></p>
            <a ui-sref="backend.user.settingsCreateOrg" class="btn btn-default btn-lint">
                Create an Organization
            </a>
        </div>
        <div class="control-sidebar-section">
            <ul class="control-sidebar-menu" ng-show="!loading && collections.length">
                <li ng-repeat="collection in collections =
                    (vaultGroupings | filter: {collection: true}) track by collection.id">
                    <a href="#" stop-click ng-click="filterGrouping(collection)">
                        <i class="fa fa-check fa-fw" ng-if="collection.id === groupingIdFilter"></i>
                        <i class="fa fa-caret-right fa-fw" ng-if="collection.id !== groupingIdFilter"></i>
                        {{collection.name}}
                    </a>
                </li>
            </ul>
        </div>
    </div>
</aside>