<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="selectAll()"> <i class="fa fa-fw fa-check-square-o"></i> Select All </a> </li> <li> <a href="#" stop-click ng-click="unselectAll()"> <i class="fa fa-fw fa-minus-square-o"></i> Unselect All </a> </li> </ul> </div> <h1> My Vault <small class="visible-md-inline visible-lg-inline"> <span ng-pluralize count="vaultFolders.length > 0 ? vaultFolders.length - 1 : 0" when="{'1': '{} folder', 'other': '{} folders'}"></span>, <span ng-pluralize count="vaultCollections.length" when="{'1': '{} collection', 'other': '{} collections'}"></span>, & <span ng-pluralize count="ciphers.length" when="{'1': '{} item', 'other': '{} items'}"></span> </small> </h1> </section> <section class="content"> <div ng-show="loadingCiphers"> <p>Loading...</p> </div> <div class="box" ng-show="!loadingCiphers"> <div class="box-header with-border"> <h3 class="box-title"> <i class="fa {{selectedIcon}}"></i> {{selectedFolder ? selectedFolder.name : selectedCollection ? selectedCollection.name : selectedTitle}} <small ng-pluralize count="filteredCiphers.length" when="{'1': '{} item', 'other': '{} items'}"></small> </h3> <div class="box-tools" ng-if="selectedFolder && selectedFolder.id"> <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="editFolder(selectedFolder)"> <i class="fa fa-fw fa-pencil"></i> Edit Folder </a> </li> <li> <a href="#" stop-click ng-click="deleteFolder(selectedFolder)" class="text-red"> <i class="fa fa-fw fa-trash"></i> Delete Folder </a> </li> </ul> </div> </div> </div> <div class="box-body" ng-class="{'no-padding': filteredCiphers.length}"> <div ng-show="!filteredCiphers.length"> <p>No items to list.</p> <button type="button" ng-click="addCipher()" class="btn btn-default btn-flat"> Add an Item </button> </div> <div class="table-responsive" ng-show="filteredCiphers.length"> <table class="table table-striped table-hover table-vmiddle"> <tbody> <tr ng-repeat="cipher in filteredCiphers = (ciphers | filter: cipherFilter() | filter: (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"> <form class="search-form"> <label for="search" class="sr-only">Search</label> <div class="form-group has-feedback"> <input type="search" id="search" class="form-control" placeholder="Search my vault..." ng-model="searchVaultText" /> <span class="fa fa-search form-control-feedback" aria-hidden="true"></span> </div> </form> <ul class="control-sidebar-menu"> <li ng-class="{active: selectedAll}"> <a href="#" stop-click ng-click="filterAll()"> <i class="fa fa-th fa-fw"></i> All Items </a> </li> <li ng-class="{active: selectedFavorites}"> <a href="#" stop-click ng-click="filterFavorites()"> <i class="fa fa-star fa-fw"></i> Favorites </a> </li> </ul> <h3 class="control-sidebar-heading">Types</h3> <div class="control-sidebar-section"> <ul class="control-sidebar-menu"> <li ng-class="{active: constants.cipherType.login === selectedType}"> <a href="#" stop-click ng-click="filterType(constants.cipherType.login)"> <i class="fa fa-globe fa-fw"></i> Login </a> </li> <li ng-class="{active: constants.cipherType.card === selectedType}"> <a href="#" stop-click ng-click="filterType(constants.cipherType.card)"> <i class="fa fa-credit-card fa-fw"></i> Card </a> </li> <li ng-class="{active: constants.cipherType.identity === selectedType}"> <a href="#" stop-click ng-click="filterType(constants.cipherType.identity)"> <i class="fa fa-id-card-o fa-fw"></i> Identity </a> </li> <li ng-class="{active: constants.cipherType.secureNote === selectedType}"> <a href="#" stop-click ng-click="filterType(constants.cipherType.secureNote)"> <i class="fa fa-sticky-note-o fa-fw"></i> Secure Note </a> </li> </ul> </div> <h3 class="control-sidebar-heading">Folders</h3> <div ng-show="loadingGroupings"> <p>Loading...</p> </div> <div class="control-sidebar-section" ng-show="!loadingGroupings"> <ul class="control-sidebar-menu"> <li ng-repeat="folder in vaultFolders | orderBy: [groupingSort] track by folder.id" ng-class="{active: selectedFolder && folder.id === selectedFolder.id}"> <a href="#" stop-click ng-click="filterFolder(folder)"> <i class="fa fa-caret-right fa-fw"></i> {{folder.name}} </a> </li> </ul> </div> <h3 class="control-sidebar-heading">Collections</h3> <div ng-show="loadingGroupings"> <p>Loading...</p> </div> <div ng-show="!loadingGroupings && !vaultCollections.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" ng-show="!loadingGroupings && vaultCollections.length"> <ul class="control-sidebar-menu"> <li ng-repeat="collection in vaultCollections | orderBy: [groupingSort] track by collection.id" ng-class="{active: selectedCollection && collection.id === selectedCollection.id}"> <a href="#" stop-click ng-click="filterCollection(collection)"> <i class="fa fa-caret-right fa-fw"></i> {{collection.name}} </a> </li> </ul> </div> </div> </aside>