web/app/vault/views/vault.html

<section class="content-header">
    <h1>
        My Vault
        <small>
            <span ng-pluralize
                  count="vaultFolders.length > 0 ? vaultFolders.length - 1 : 0"
                  when="{'1': '{} folder', 'other': '{} folders'}"></span>,
            <span ng-pluralize count="logins.length" when="{'1': '{} login', 'other': '{} logins'}"></span>
        </small>
    </h1>
</section>
<section class="content">
    <div ng-show="loading && !vaultFolders.length">
        <p>Loading...</p>
    </div>
    <div class="box box-primary" ng-class="{'collapsed-box': favoriteCollapsed}" style="margin-bottom: 40px;"
         ng-show="vaultFolders.length && (!main.searchVaultText || favoriteLogins.length)">
        <div class="box-header with-border">
            <h3 class="box-title">
                <i class="fa fa-star"></i>
                Favorites
                <small ng-pluralize count="favoriteLogins.length" when="{'1': '{} login', 'other': '{} logins'}"></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="#" ng-click="addLogin(null, true)">
                                <i class="fa fa-fw fa-plus-circle"></i> Add Login
                            </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': favoriteLogins.length}">
            <div ng-show="!favoriteLogins.length">
                <p>No favorite logins.</p>
                <button type="button" ng-click="addLogin(null, true)" class="btn btn-default btn-flat">Add a Login</button>
            </div>
            <div class="table-responsive" ng-show="favoriteLogins.length">
                <table class="table table-striped table-hover table-vmiddle">
                    <tbody>
                        <tr ng-repeat="login in favoriteLogins = (logins | filter: { favorite: true } |
                            filter: (main.searchVaultText || '')) track by login.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="javascript:void(0)" ng-click="editLogin(login)">
                                                <i class="fa fa-fw fa-pencil"></i> Edit
                                            </a>
                                        </li>
                                        <li ng-show="!login.organizationId">
                                            <a href="javascript:void(0)" ng-click="share(login)">
                                                <i class="fa fa-fw fa-share-alt"></i> Share
                                            </a>
                                        </li>
                                        <li ng-show="login.organizationId && login.edit">
                                            <a href="javascript:void(0)" ng-click="collections(login)">
                                                <i class="fa fa-fw fa-cubes"></i> Collections
                                            </a>
                                        </li>
                                        <li ng-show="login.edit">
                                            <a href="javascript:void(0)" ng-click="deleteLogin(login)" class="text-red">
                                                <i class="fa fa-fw fa-trash"></i> Delete
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </td>
                            <td>
                                <a href="javascript:void(0)" ng-click="editLogin(login)">{{login.name}}</a>
                                <i class="fa fa-share-alt text-muted" title="Shared" ng-show="login.organizationId"></i>
                                <div class="text-sm text-muted">{{login.username}}</div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="box" ng-class="{'collapsed-box': folder.collapsed}" ng-repeat="folder in vaultFolders track by folder.id"
         ng-show="vaultFolders.length && (!main.searchVaultText || folderLogins.length)">
        <div class="box-header with-border">
            <h3 class="box-title">
                <i class="fa" ng-class="{'fa-folder-open': folder.id !== null, 'fa-folder-open-o': folder.id === null}"></i>
                {{folder.name}}
                <small ng-pluralize count="folderLogins.length" when="{'1': '{} login', 'other': '{} logins'}"></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="#" ng-click="addLogin(folder)">
                                <i class="fa fa-fw fa-plus-circle"></i> Add Login
                            </a>
                        </li>
                        <li ng-show="folder.id">
                            <a href="#" ng-click="editFolder(folder)">
                                <i class="fa fa-fw fa-pencil"></i> Edit Folder
                            </a>
                        </li>
                        <li ng-show="canDeleteFolder(folder)">
                            <a href="#" ng-click="deleteFolder(folder)" class="text-red">
                                <i class="fa fa-fw fa-trash"></i> Delete Folder
                            </a>
                        </li>
                    </ul>
                </div>
                <button type="button" class="btn btn-box-tool" data-widget="collapse" title="Collapse/Expand"
                        ng-click="collapseExpand(folder)">
                    <i class="fa" ng-class="{'fa-minus': !folder.collapsed, 'fa-plus': folder.collapsed}"></i>
                </button>
            </div>
        </div>
        <div class="box-body" ng-class="{'no-padding': folderLogins.length}">
            <div ng-show="!folderLogins.length">
                <p>No logins in this folder.</p>
                <button type="button" ng-click="addLogin(folder)" class="btn btn-default btn-flat">Add a Login</button>
            </div>
            <div class="table-responsive" ng-show="folderLogins.length">
                <table class="table table-striped table-hover table-vmiddle">
                    <tbody>
                        <tr ng-repeat="login in folderLogins = (logins | filter: { folderId: folder.id } |
                            filter: (main.searchVaultText || '')) track by login.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="javascript:void(0)" ng-click="editLogin(login)">
                                                <i class="fa fa-fw fa-pencil"></i> Edit
                                            </a>
                                        </li>
                                        <li ng-show="!login.organizationId">
                                            <a href="javascript:void(0)" ng-click="share(login)">
                                                <i class="fa fa-fw fa-share-alt"></i> Share
                                            </a>
                                        </li>
                                        <li ng-show="login.organizationId && login.edit">
                                            <a href="javascript:void(0)" ng-click="collections(login)">
                                                <i class="fa fa-fw fa-cubes"></i> Collections
                                            </a>
                                        </li>
                                        <li ng-show="login.edit">
                                            <a href="javascript:void(0)" ng-click="deleteLogin(login)" class="text-red">
                                                <i class="fa fa-fw fa-trash"></i> Delete
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </td>
                            <td>
                                <a href="javascript:void(0)" ng-click="editLogin(login)">{{login.name}}</a>
                                <i class="fa fa-star text-muted" title="Favorite" ng-show="login.favorite"></i>
                                <i class="fa fa-share-alt text-muted" title="Shared" ng-show="login.organizationId"></i>
                                <div class="text-sm text-muted">{{login.username}}</div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</section>