fix line indention
This commit is contained in:
Mads Rasmussen
@@ -1,464 +1,471 @@
|
||||
<div ng-controller="Umbraco.Editors.Users.UsersController as vm" class="clearfix">
|
||||
|
||||
<umb-load-indicator ng-show="vm.loading"></umb-load-indicator>
|
||||
<umb-load-indicator ng-show="vm.loading"></umb-load-indicator>
|
||||
|
||||
<!-- Users Overview -->
|
||||
<div ng-if="vm.usersViewState === 'overview'">
|
||||
<!-- Users Overview -->
|
||||
<div ng-if="vm.usersViewState === 'overview'">
|
||||
|
||||
<umb-editor-sub-header>
|
||||
<umb-editor-sub-header>
|
||||
|
||||
<!-- No selection -->
|
||||
<umb-editor-sub-header-content-left ng-if="vm.selection.length === 0">
|
||||
<umb-button-group ng-if="vm.defaultButton"
|
||||
default-button="vm.defaultButton"
|
||||
sub-buttons="vm.subButtons">
|
||||
</umb-button-group>
|
||||
</umb-editor-sub-header-content-left>
|
||||
<!-- No selection -->
|
||||
<umb-editor-sub-header-content-left ng-if="vm.selection.length === 0">
|
||||
<umb-button-group
|
||||
ng-if="vm.defaultButton"
|
||||
default-button="vm.defaultButton"
|
||||
sub-buttons="vm.subButtons">
|
||||
</umb-button-group>
|
||||
</umb-editor-sub-header-content-left>
|
||||
|
||||
<umb-editor-sub-header-content-right ng-if="vm.selection.length === 0">
|
||||
<umb-editor-sub-header-section>
|
||||
<umb-layout-selector ng-if="vm.layouts"
|
||||
layouts="vm.layouts"
|
||||
active-layout="vm.activeLayout"
|
||||
on-layout-select="vm.selectLayout">
|
||||
</umb-layout-selector>
|
||||
</umb-editor-sub-header-section>
|
||||
<umb-editor-sub-header-section>
|
||||
<div class="form-search -no-margin-bottom pull-right">
|
||||
<div class="inner-addon left-addon">
|
||||
<i class="icon icon-search"></i>
|
||||
<input class="form-control search-input"
|
||||
type="text"
|
||||
localize="placeholder"
|
||||
placeholder="@general_typeToSearch"
|
||||
ng-model="vm.usersOptions.filter"
|
||||
ng-change="vm.searchUsers()"
|
||||
prevent-enter-submit
|
||||
no-dirty-check>
|
||||
</div>
|
||||
</div>
|
||||
</umb-editor-sub-header-section>
|
||||
</umb-editor-sub-header-content-right>
|
||||
<umb-editor-sub-header-content-right ng-if="vm.selection.length === 0">
|
||||
<umb-editor-sub-header-section>
|
||||
<umb-layout-selector
|
||||
ng-if="vm.layouts"
|
||||
layouts="vm.layouts"
|
||||
active-layout="vm.activeLayout"
|
||||
on-layout-select="vm.selectLayout">
|
||||
</umb-layout-selector>
|
||||
</umb-editor-sub-header-section>
|
||||
<umb-editor-sub-header-section>
|
||||
<div class="form-search -no-margin-bottom pull-right">
|
||||
<div class="inner-addon left-addon">
|
||||
<i class="icon icon-search"></i>
|
||||
<input
|
||||
class="form-control search-input"
|
||||
type="text" localize="placeholder"
|
||||
placeholder="@general_typeToSearch"
|
||||
ng-model="vm.usersOptions.filter"
|
||||
ng-change="vm.searchUsers()"
|
||||
prevent-enter-submit
|
||||
no-dirty-check>
|
||||
</div>
|
||||
</div>
|
||||
</umb-editor-sub-header-section>
|
||||
</umb-editor-sub-header-content-right>
|
||||
|
||||
<!-- With selection -->
|
||||
<umb-editor-sub-header-content-left ng-if="vm.selection.length > 0">
|
||||
<umb-editor-sub-header-section>
|
||||
<umb-button type="button"
|
||||
label="Clear selection"
|
||||
size="xs"
|
||||
label-key="buttons_clearSelection"
|
||||
action="vm.clearSelection()"
|
||||
disabled="actionInProgress">
|
||||
</umb-button>
|
||||
</umb-editor-sub-header-section>
|
||||
<umb-editor-sub-header-section>
|
||||
<strong>{{ vm.selection.length }} <localize key="general_of">of</localize> {{ vm.users.length }} <localize key="general_selected">selected</localize></strong>
|
||||
</umb-editor-sub-header-section>
|
||||
</umb-editor-sub-header-content-left>
|
||||
|
||||
<umb-editor-sub-header-content-right ng-if="vm.selection.length > 0">
|
||||
<div style="margin-right: 5px;">
|
||||
<umb-button ng-if="vm.allowSetUserGroup"
|
||||
<!-- With selection -->
|
||||
<umb-editor-sub-header-content-left ng-if="vm.selection.length > 0">
|
||||
<umb-editor-sub-header-section>
|
||||
<umb-button
|
||||
type="button"
|
||||
label="Clear selection"
|
||||
size="xs"
|
||||
label-key="buttons_clearSelection"
|
||||
action="vm.clearSelection()"
|
||||
disabled="actionInProgress">
|
||||
</umb-button>
|
||||
</umb-editor-sub-header-section>
|
||||
<umb-editor-sub-header-section>
|
||||
<strong>{{ vm.selection.length }} <localize key="general_of">of</localize> {{ vm.users.length }} <localize key="general_selected">selected</localize></strong>
|
||||
</umb-editor-sub-header-section>
|
||||
|
||||
</umb-editor-sub-header-content-left>
|
||||
|
||||
<umb-editor-sub-header-content-right ng-if="vm.selection.length > 0">
|
||||
<div style="margin-right: 5px;">
|
||||
<umb-button
|
||||
ng-if="vm.allowSetUserGroup"
|
||||
type="button" size="xs"
|
||||
label-key="actions_setGroup"
|
||||
icon="icon-users"
|
||||
action="vm.openBulkUserGroupPicker()">
|
||||
</umb-button>
|
||||
</div>
|
||||
<div style="margin-right: 5px;">
|
||||
<umb-button ng-if="vm.allowEnableUser"
|
||||
</umb-button>
|
||||
</div>
|
||||
<div style="margin-right: 5px;">
|
||||
<umb-button
|
||||
ng-if="vm.allowEnableUser"
|
||||
type="button"
|
||||
size="xs"
|
||||
state="vm.enableUserButtonState"
|
||||
label-key="actions_enable"
|
||||
icon="icon-check"
|
||||
action="vm.enableUsers()">
|
||||
</umb-button>
|
||||
</div>
|
||||
<div>
|
||||
<umb-button ng-if="vm.allowDisableUser"
|
||||
</umb-button>
|
||||
</div>
|
||||
<div>
|
||||
<umb-button
|
||||
ng-if="vm.allowDisableUser"
|
||||
type="button"
|
||||
size="xs"
|
||||
state="vm.disableUserButtonState"
|
||||
label-key="actions_disable"
|
||||
icon="icon-block"
|
||||
action="vm.disableUsers()">
|
||||
</umb-button>
|
||||
</div>
|
||||
</umb-editor-sub-header-content-right>
|
||||
</umb-button>
|
||||
</div>
|
||||
</umb-editor-sub-header-content-right>
|
||||
|
||||
</umb-editor-sub-header>
|
||||
</umb-editor-sub-header>
|
||||
|
||||
<!-- Filters -->
|
||||
<div style="margin-bottom: 20px;" class="flex items-center">
|
||||
<!-- Filters -->
|
||||
<div style="margin-bottom: 20px;" class="flex items-center">
|
||||
|
||||
<div style="font-size: 16px;">
|
||||
<span class="bold"><localize key="sections_users">Users</localize></span> <span ng-if="vm.usersOptions.totalItems">({{vm.usersOptions.totalItems}})</span>
|
||||
</div>
|
||||
|
||||
<div class="flex" style="margin-left: auto;">
|
||||
|
||||
<!-- State filter -->
|
||||
<div style="position: relative;" ng-if="vm.userStatesFilter.length > 0">
|
||||
<a class="btn btn-link dropdown-toggle flex" href="" ng-click="vm.toggleFilter('state')">
|
||||
<span><localize key="general_status">Status</localize>:</span>
|
||||
<span class="bold truncate dib" style="margin-left: 5px; margin-right: 3px; max-width: 150px;">{{ vm.getFilterName(vm.userStatesFilter) }}</span>
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
<umb-dropdown class="pull-right" ng-if="vm.page.showStatusFilter" on-close="vm.page.showStatusFilter = false;">
|
||||
<umb-dropdown-item ng-repeat="userState in vm.userStatesFilter | filter:{ count: '!0', key: '!All'}" style="padding: 8px 20px 8px 16px;">
|
||||
<div class="flex items-center">
|
||||
<input id="state-{{$index}}" type="checkbox" ng-model="userState.selected" ng-change="vm.setUserStatesFilter(userState)" style="margin-right: 10px; margin-top: -3px;" />
|
||||
<label for="state-{{$index}}">{{ userState.name }} ({{userState.count}})</label>
|
||||
</div>
|
||||
</umb-dropdown-item>
|
||||
</umb-dropdown>
|
||||
</div>
|
||||
|
||||
<!-- Groups filter -->
|
||||
<div style="position: relative;">
|
||||
<a class="btn btn-link dropdown-toggle flex" href="" ng-click="vm.toggleFilter('group')">
|
||||
<span><localize key="general_groups"></localize>:</span>
|
||||
<span class="bold truncate dib" style="margin-left: 5px; margin-right: 3px; max-width: 150px;">{{ vm.getFilterName(vm.userGroups) }}</span>
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
<umb-dropdown class="pull-right" ng-if="vm.page.showGroupFilter" on-close="vm.page.showGroupFilter = false;">
|
||||
<umb-dropdown-item ng-repeat="userGroup in vm.userGroups" style="padding: 8px 20px 8px 16px;">
|
||||
<div class="flex items-center">
|
||||
<input id="group-{{$index}}" type="checkbox" ng-model="userGroup.selected" ng-change="vm.setUserGroupFilter(userGroup)" style="margin-right: 10px; margin-top: -3px;" />
|
||||
<label for="group-{{$index}}">{{ userGroup.name }}</label>
|
||||
</div>
|
||||
</umb-dropdown-item>
|
||||
</umb-dropdown>
|
||||
</div>
|
||||
|
||||
<!-- Order By -->
|
||||
<div style="position: relative;">
|
||||
<a class="btn btn-link dropdown-toggle flex" href="" ng-click="vm.toggleFilter('orderBy')">
|
||||
<span><localize key="general_orderBy">Order by</localize>:</span>
|
||||
<span class="bold" style="margin-left: 2px;">{{ vm.getSortLabel(vm.usersOptions.orderBy, vm.usersOptions.orderDirection) }} </span>
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
<umb-dropdown class="pull-right" ng-if="vm.page.showOrderByFilter" on-close="vm.page.showOrderByFilter = false;" umb-keyboard-list>
|
||||
<umb-dropdown-item ng-repeat="sortData in vm.userSortData">
|
||||
<a href="#" ng-click="vm.setOrderByFilter(sortData.key, sortData.direction)" prevent-default>{{sortData.label}}</a>
|
||||
</umb-dropdown-item>
|
||||
</umb-dropdown>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Empty states -->
|
||||
<umb-empty-state ng-if="!vm.users && vm.usersOptions.filter.length > 0"
|
||||
position="center">
|
||||
<localize key="general_searchNoResult"></localize>
|
||||
</umb-empty-state>
|
||||
|
||||
<!-- Layout: Cards -->
|
||||
<div class="umb-user-cards" ng-if="vm.activeLayout.path === '1' && vm.loading === false">
|
||||
<a href="" class="umb-user-card" ng-repeat="user in vm.users" ng-click="vm.clickUser(user)">
|
||||
<div class="umb-user-card__content" ng-class="{'umb-user-card__content--selected': user.selected}">
|
||||
<umb-badge class="umb-user-card__badge"
|
||||
size="xs"
|
||||
ng-if="user.userDisplayState.key !== 'Active'"
|
||||
color="{{user.userDisplayState.color}}">
|
||||
{{ user.userDisplayState.name }}
|
||||
</umb-badge>
|
||||
<div class="umb-user-card__avatar">
|
||||
<umb-avatar size="l"
|
||||
color="secondary"
|
||||
name="{{user.name}}"
|
||||
img-src="{{user.avatars[2]}}"
|
||||
img-srcset="{{user.avatars[3]}} 2x, {{user.avatars[4]}} 3x">
|
||||
</umb-avatar>
|
||||
</div>
|
||||
<div class="umb-user-card__checkmark" ng-class="{'umb-user-card__checkmark--visible': user.selected || vm.selection.length > 0 }" ng-click="vm.selectUser(user, vm.selection, $event)">
|
||||
<umb-checkmark ng-if="!user.isCurrentUser" checked="user.selected" size="s"></umb-checkmark>
|
||||
</div>
|
||||
<div class="umb-user-card__name" href="">{{user.name}}</div>
|
||||
<div class="umb-user-card__group">
|
||||
<span ng-repeat="userGroup in user.userGroups">{{ userGroup.name }}<span ng-if="!$last">, </span></span>
|
||||
</div>
|
||||
<div class="umb-user-card__last-login">
|
||||
<div ng-if="user.formattedLastLogin">
|
||||
<div><localize key="user_lastLogin">Last login</localize></div>
|
||||
{{ user.formattedLastLogin }}
|
||||
<div style="font-size: 16px;">
|
||||
<span class="bold"><localize key="sections_users">Users</localize></span> <span ng-if="vm.usersOptions.totalItems">({{vm.usersOptions.totalItems}})</span>
|
||||
</div>
|
||||
<div ng-if="!user.formattedLastLogin">
|
||||
<div>{{ user.name | umbWordLimit:1 }} <localize key="user_noLogin">has not logged in yet</localize></div>
|
||||
|
||||
<div class="flex" style="margin-left: auto;">
|
||||
|
||||
<!-- State filter -->
|
||||
<div style="position: relative;" ng-if="vm.userStatesFilter.length > 0">
|
||||
<a class="btn btn-link dropdown-toggle flex" href="" ng-click="vm.toggleFilter('state')">
|
||||
<span><localize key="general_status">Status</localize>:</span>
|
||||
<span class="bold truncate dib" style="margin-left: 5px; margin-right: 3px; max-width: 150px;">{{ vm.getFilterName(vm.userStatesFilter) }}</span>
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
<umb-dropdown class="pull-right" ng-if="vm.page.showStatusFilter" on-close="vm.page.showStatusFilter = false;">
|
||||
<umb-dropdown-item ng-repeat="userState in vm.userStatesFilter | filter:{ count: '!0', key: '!All'}" style="padding: 8px 20px 8px 16px;">
|
||||
<div class="flex items-center">
|
||||
<input
|
||||
id="state-{{$index}}"
|
||||
type="checkbox"
|
||||
ng-model="userState.selected"
|
||||
ng-change="vm.setUserStatesFilter(userState)"
|
||||
style="margin-right: 10px; margin-top: -3px;" />
|
||||
<label for="state-{{$index}}">{{ userState.name }} ({{userState.count}})</label>
|
||||
</div>
|
||||
</umb-dropdown-item>
|
||||
</umb-dropdown>
|
||||
</div>
|
||||
|
||||
<!-- Groups filter -->
|
||||
<div style="position: relative;">
|
||||
<a class="btn btn-link dropdown-toggle flex" href="" ng-click="vm.toggleFilter('group')">
|
||||
<span><localize key="general_groups"></localize>:</span>
|
||||
<span class="bold truncate dib" style="margin-left: 5px; margin-right: 3px; max-width: 150px;">{{ vm.getFilterName(vm.userGroups) }}</span>
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
<umb-dropdown class="pull-right" ng-if="vm.page.showGroupFilter" on-close="vm.page.showGroupFilter = false;">
|
||||
<umb-dropdown-item ng-repeat="userGroup in vm.userGroups" style="padding: 8px 20px 8px 16px;">
|
||||
<div class="flex items-center">
|
||||
<input
|
||||
id="group-{{$index}}"
|
||||
type="checkbox"
|
||||
ng-model="userGroup.selected"
|
||||
ng-change="vm.setUserGroupFilter(userGroup)"
|
||||
style="margin-right: 10px; margin-top: -3px;" />
|
||||
<label for="group-{{$index}}">{{ userGroup.name }}</label>
|
||||
</div>
|
||||
</umb-dropdown-item>
|
||||
</umb-dropdown>
|
||||
</div>
|
||||
|
||||
<!-- Order By -->
|
||||
<div style="position: relative;">
|
||||
<a class="btn btn-link dropdown-toggle flex" href="" ng-click="vm.toggleFilter('orderBy')">
|
||||
<span><localize key="general_orderBy">Order by</localize>:</span>
|
||||
<span class="bold" style="margin-left: 2px;">{{ vm.getSortLabel(vm.usersOptions.orderBy, vm.usersOptions.orderDirection) }} </span>
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
<umb-dropdown class="pull-right" ng-if="vm.page.showOrderByFilter" on-close="vm.page.showOrderByFilter = false;" umb-keyboard-list>
|
||||
<umb-dropdown-item ng-repeat="sortData in vm.userSortData">
|
||||
<a href="#" ng-click="vm.setOrderByFilter(sortData.key, sortData.direction)" prevent-default>{{sortData.label}}</a>
|
||||
</umb-dropdown-item>
|
||||
</umb-dropdown>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Layout: Table -->
|
||||
<div ng-if="vm.activeLayout.path === '2'">
|
||||
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="padding-left: 10px; width: 10px;">
|
||||
<a href="" style="text-decoration: none;" ng-click="vm.selectAll()"><umb-checkmark checked="vm.areAllSelected()" size="xs"></umb-checkmark></a>
|
||||
</th>
|
||||
<th style="width: 70px;"></th>
|
||||
<th><localize key="general_name">Name</localize></th>
|
||||
<th><localize key="user_usergroup">User group</localize></th>
|
||||
<th><localize key="user_lastLogin">Last login</localize></th>
|
||||
<th><localize key="general_status">Status</localize></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="user in vm.users" ng-click="vm.clickUser(user)" style="cursor: pointer;" ng-mouseenter="user.hover = true" ng-mouseleave="user.hover = false">
|
||||
<td style="padding-left: 10px;">
|
||||
<div ng-if="!user.isCurrentUser" ng-click="vm.selectUser(user, vm.selection, $event)">
|
||||
<umb-checkmark
|
||||
ng-if="vm.selection.length > 0 || user.hover"
|
||||
checked="user.selected"
|
||||
size="xs">
|
||||
</umb-checkmark>
|
||||
</div>
|
||||
</td>
|
||||
<td scope="row">
|
||||
<umb-avatar size="xs"
|
||||
color="secondary"
|
||||
name="{{user.name}}"
|
||||
img-src="{{user.avatars[0]}}"
|
||||
img-srcset="{{user.avatars[1]}} 2x, {{user.avatars[2]}} 3x">
|
||||
</umb-avatar>
|
||||
</td>
|
||||
<td class="bold">{{user.name}}</td>
|
||||
<td><span ng-repeat="userGroup in user.userGroups">{{ userGroup.name }}<span ng-if="!$last">, </span></span></td>
|
||||
<td>{{ user.formattedLastLogin }}</td>
|
||||
<td style="text-transform: capitalize;">
|
||||
<umb-badge size="xs"
|
||||
ng-if="user.userDisplayState.key !== 'Active'"
|
||||
color="{{user.userDisplayState.color}}">
|
||||
{{ user.userDisplayState.name }}
|
||||
</umb-badge>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div ng-if="!vm.loading" class="flex justify-center">
|
||||
<umb-pagination ng-if="vm.usersOptions.totalPages"
|
||||
page-number="vm.usersOptions.pageNumber"
|
||||
total-pages="vm.usersOptions.totalPages"
|
||||
on-change="vm.changePageNumber(pageNumber)">
|
||||
</umb-pagination>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Add user -->
|
||||
<div ng-if="vm.usersViewState === 'inviteUser' || vm.usersViewState === 'createUser'">
|
||||
|
||||
<umb-editor-sub-header>
|
||||
<umb-editor-sub-header-content-left>
|
||||
<a class="umb-package-details__back-link" href="" ng-click="vm.setUsersViewState('overview');">← <localize key="user_backToUsers">Back to users</localize></a>
|
||||
</umb-editor-sub-header-content-left>
|
||||
</umb-editor-sub-header>
|
||||
|
||||
<div class="flex justify-center">
|
||||
<form name="addUserForm" no-validate val-form-manager style="max-width: 500px;" class="block-form">
|
||||
<div>
|
||||
<div ng-if="vm.usersViewState === 'inviteUser'">
|
||||
<h3 class="bold" style="margin-bottom: 0;"><localize key="user_inviteUser">Invite User</localize></h3>
|
||||
<p style="line-height: 1.6em; margin-bottom: 15px;">
|
||||
<localize key="user_inviteUserHelp"></localize>
|
||||
</p>
|
||||
</div>
|
||||
<div ng-if="vm.usersViewState === 'createUser'">
|
||||
<h3 class="bold" style="margin-bottom: 0;"><localize key="user_createUser">Create user</localize></h3>
|
||||
<p style="line-height: 1.6em; margin-bottom: 15px;">
|
||||
<localize key="user_createUserHelp"></localize>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<umb-control-group label="@general_name" label-for="name">
|
||||
<input type="text"
|
||||
name="name"
|
||||
localize="placeholder"
|
||||
placeholder="@placeholders_entername"
|
||||
class="input-block-level"
|
||||
ng-model="vm.newUser.name"
|
||||
umb-auto-focus
|
||||
required
|
||||
val-server-field="Name"/>
|
||||
<span class="help-inline" val-msg-for="name" val-toggle-msg="required"><localize key="general_required">Required</localize></span>
|
||||
<span class="help-inline" val-msg-for="name" val-toggle-msg="valServerField"></span>
|
||||
</umb-control-group>
|
||||
<!-- Empty states -->
|
||||
<umb-empty-state
|
||||
ng-if="!vm.users && vm.usersOptions.filter.length > 0"
|
||||
position="center">
|
||||
<localize key="general_searchNoResult"></localize>
|
||||
</umb-empty-state>
|
||||
|
||||
<umb-control-group label="@general_email" label-for="email">
|
||||
<input type="email"
|
||||
name="email"
|
||||
localize="placeholder"
|
||||
placeholder="@placeholders_enteremail"
|
||||
class="input-block-level"
|
||||
ng-model="vm.newUser.email"
|
||||
required
|
||||
val-email
|
||||
val-server-field="Email"/>
|
||||
<span class="help-inline" val-msg-for="email" val-toggle-msg="required"><localize key="general_required">Required</localize></span>
|
||||
<span class="help-inline" val-msg-for="email" val-toggle-msg="valServerField"></span>
|
||||
</umb-control-group>
|
||||
<!-- Layout: Cards -->
|
||||
<div class="umb-user-cards" ng-if="vm.activeLayout.path === '1' && vm.loading === false">
|
||||
<a href="" class="umb-user-card" ng-repeat="user in vm.users" ng-click="vm.clickUser(user)">
|
||||
<div class="umb-user-card__content" ng-class="{'umb-user-card__content--selected': user.selected}">
|
||||
<umb-badge class="umb-user-card__badge" size="xs" ng-if="user.userDisplayState.key !== 'Active'" color="{{user.userDisplayState.color}}">
|
||||
{{ user.userDisplayState.name }}
|
||||
</umb-badge>
|
||||
<div class="umb-user-card__avatar">
|
||||
<umb-avatar size="l" color="secondary" name="{{user.name}}" img-src="{{user.avatars[2]}}" img-srcset="{{user.avatars[3]}} 2x, {{user.avatars[4]}} 3x">
|
||||
</umb-avatar>
|
||||
</div>
|
||||
<div class="umb-user-card__checkmark" ng-class="{'umb-user-card__checkmark--visible': user.selected || vm.selection.length > 0 }"
|
||||
ng-click="vm.selectUser(user, vm.selection, $event)">
|
||||
<umb-checkmark ng-if="!user.isCurrentUser" checked="user.selected" size="s"></umb-checkmark>
|
||||
</div>
|
||||
<div class="umb-user-card__name" href="">{{user.name}}</div>
|
||||
<div class="umb-user-card__group">
|
||||
<span ng-repeat="userGroup in user.userGroups">{{ userGroup.name }}<span ng-if="!$last">, </span></span>
|
||||
</div>
|
||||
<div class="umb-user-card__last-login">
|
||||
<div ng-if="user.formattedLastLogin">
|
||||
<div>
|
||||
<localize key="user_lastLogin">Last login</localize>
|
||||
</div>
|
||||
{{ user.formattedLastLogin }}
|
||||
</div>
|
||||
<div ng-if="!user.formattedLastLogin">
|
||||
<div>{{ user.name | umbWordLimit:1 }}
|
||||
<localize key="user_noLogin">has not logged in yet</localize>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<umb-control-group label="@user_usergroup" description="@user_groupsHelp">
|
||||
<!-- Layout: Table -->
|
||||
<div ng-if="vm.activeLayout.path === '2'">
|
||||
|
||||
<umb-user-group-preview ng-repeat="group in vm.newUser.userGroups"
|
||||
icon="group.icon"
|
||||
name="group.name"
|
||||
sections="group.sections"
|
||||
content-start-node="group.contentStartNode"
|
||||
media-start-node="group.mediaStartNode"
|
||||
allow-remove="true"
|
||||
on-remove="vm.removeSelectedUserGroup($index, vm.newUser.userGroups)">
|
||||
</umb-user-group-preview>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="padding-left: 10px; width: 10px;">
|
||||
<a href="" style="text-decoration: none;" ng-click="vm.selectAll()">
|
||||
<umb-checkmark checked="vm.areAllSelected()" size="xs"></umb-checkmark>
|
||||
</a>
|
||||
</th>
|
||||
<th style="width: 70px;"></th>
|
||||
<th><localize key="general_name">Name</localize></th>
|
||||
<th><localize key="user_usergroup">User group</localize></th>
|
||||
<th><localize key="user_lastLogin">Last login</localize></th>
|
||||
<th><localize key="general_status">Status</localize></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr ng-repeat="user in vm.users" ng-click="vm.clickUser(user)" style="cursor: pointer;" ng-mouseenter="user.hover = true" ng-mouseleave="user.hover = false">
|
||||
<td style="padding-left: 10px;">
|
||||
<div ng-if="!user.isCurrentUser" ng-click="vm.selectUser(user, vm.selection, $event)">
|
||||
<umb-checkmark
|
||||
ng-if="vm.selection.length > 0 || user.hover"
|
||||
checked="user.selected"
|
||||
size="xs">
|
||||
</umb-checkmark>
|
||||
</div>
|
||||
</td>
|
||||
<td scope="row">
|
||||
<umb-avatar
|
||||
size="xs"
|
||||
color="secondary"
|
||||
name="{{user.name}}"
|
||||
img-src="{{user.avatars[0]}}"
|
||||
img-srcset="{{user.avatars[1]}} 2x, {{user.avatars[2]}} 3x">
|
||||
</umb-avatar>
|
||||
</td>
|
||||
<td class="bold">{{user.name}}</td>
|
||||
<td><span ng-repeat="userGroup in user.userGroups">{{ userGroup.name }}<span ng-if="!$last">, </span></span></td>
|
||||
<td>{{ user.formattedLastLogin }}</td>
|
||||
<td style="text-transform: capitalize;">
|
||||
<umb-badge
|
||||
size="xs"
|
||||
ng-if="user.userDisplayState.key !== 'Active'"
|
||||
color="{{user.userDisplayState.color}}">
|
||||
{{ user.userDisplayState.name }}
|
||||
</umb-badge>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<a href=""
|
||||
style="max-width: 100%;"
|
||||
class="umb-node-preview-add"
|
||||
ng-click="vm.openUserGroupPicker($event)"
|
||||
prevent-default>
|
||||
<localize key="general_add">Add</localize>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</umb-control-group>
|
||||
<!-- Pagination -->
|
||||
<div ng-if="!vm.loading" class="flex justify-center">
|
||||
<umb-pagination
|
||||
ng-if="vm.usersOptions.totalPages"
|
||||
page-number="vm.usersOptions.pageNumber"
|
||||
total-pages="vm.usersOptions.totalPages"
|
||||
on-change="vm.changePageNumber(pageNumber)">
|
||||
</umb-pagination>
|
||||
</div>
|
||||
|
||||
<umb-control-group label="@general_message" ng-if="vm.usersViewState === 'inviteUser'" label-for="message">
|
||||
<textarea name="message"
|
||||
type="text"
|
||||
class="input-block-level"
|
||||
localize="placeholder"
|
||||
placeholder="@placeholders_enterMessage"
|
||||
ng-model="vm.newUser.message"
|
||||
rows="4"
|
||||
required
|
||||
val-server-field="Message">
|
||||
</textarea>
|
||||
<span class="help-inline" val-msg-for="message" val-toggle-msg="required"><localize key="general_required">Required</localize></span>
|
||||
<span class="help-inline" val-msg-for="message" val-toggle-msg="valServerField"></span>
|
||||
</umb-control-group>
|
||||
</div>
|
||||
|
||||
<umb-button ng-if="vm.usersViewState === 'inviteUser'"
|
||||
<!-- Add user -->
|
||||
<div ng-if="vm.usersViewState === 'inviteUser' || vm.usersViewState === 'createUser'">
|
||||
|
||||
<umb-editor-sub-header>
|
||||
<umb-editor-sub-header-content-left>
|
||||
<a class="umb-package-details__back-link" href="" ng-click="vm.setUsersViewState('overview');">← <localize key="user_backToUsers">Back to users</localize></a>
|
||||
</umb-editor-sub-header-content-left>
|
||||
</umb-editor-sub-header>
|
||||
|
||||
<div class="flex justify-center">
|
||||
<form name="addUserForm" no-validate val-form-manager style="max-width: 500px;" class="block-form">
|
||||
<div>
|
||||
<div ng-if="vm.usersViewState === 'inviteUser'">
|
||||
<h3 class="bold" style="margin-bottom: 0;">
|
||||
<localize key="user_inviteUser">Invite User</localize>
|
||||
</h3>
|
||||
<p style="line-height: 1.6em; margin-bottom: 15px;">
|
||||
<localize key="user_inviteUserHelp"></localize>
|
||||
</p>
|
||||
</div>
|
||||
<div ng-if="vm.usersViewState === 'createUser'">
|
||||
<h3 class="bold" style="margin-bottom: 0;">
|
||||
<localize key="user_createUser">Create user</localize>
|
||||
</h3>
|
||||
<p style="line-height: 1.6em; margin-bottom: 15px;">
|
||||
<localize key="user_createUserHelp"></localize>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<umb-control-group label="@general_name" label-for="name">
|
||||
<input type="text" name="name" localize="placeholder" placeholder="@placeholders_entername" class="input-block-level" ng-model="vm.newUser.name"
|
||||
umb-auto-focus required val-server-field="Name" />
|
||||
<span class="help-inline" val-msg-for="name" val-toggle-msg="required"><localize key="general_required">Required</localize></span>
|
||||
<span class="help-inline" val-msg-for="name" val-toggle-msg="valServerField"></span>
|
||||
</umb-control-group>
|
||||
|
||||
<umb-control-group label="@general_email" label-for="email">
|
||||
<input type="email" name="email" localize="placeholder" placeholder="@placeholders_enteremail" class="input-block-level"
|
||||
ng-model="vm.newUser.email" required val-email val-server-field="Email" />
|
||||
<span class="help-inline" val-msg-for="email" val-toggle-msg="required"><localize key="general_required">Required</localize></span>
|
||||
<span class="help-inline" val-msg-for="email" val-toggle-msg="valServerField"></span>
|
||||
</umb-control-group>
|
||||
|
||||
<umb-control-group label="@user_usergroup" description="@user_groupsHelp">
|
||||
|
||||
<umb-user-group-preview
|
||||
ng-repeat="group in vm.newUser.userGroups"
|
||||
icon="group.icon"
|
||||
name="group.name"
|
||||
sections="group.sections"
|
||||
content-start-node="group.contentStartNode"
|
||||
media-start-node="group.mediaStartNode"
|
||||
allow-remove="true"
|
||||
on-remove="vm.removeSelectedUserGroup($index, vm.newUser.userGroups)">
|
||||
</umb-user-group-preview>
|
||||
|
||||
<a href="" style="max-width: 100%;" class="umb-node-preview-add" ng-click="vm.openUserGroupPicker($event)" prevent-default>
|
||||
<localize key="general_add">Add</localize>
|
||||
</a>
|
||||
|
||||
</umb-control-group>
|
||||
|
||||
<umb-control-group label="@general_message" ng-if="vm.usersViewState === 'inviteUser'" label-for="message">
|
||||
<textarea
|
||||
name="message"
|
||||
type="text"
|
||||
class="input-block-level"
|
||||
localize="placeholder"
|
||||
placeholder="@placeholders_enterMessage"
|
||||
ng-model="vm.newUser.message"
|
||||
rows="4"
|
||||
required val-server-field="Message">
|
||||
</textarea>
|
||||
<span class="help-inline" val-msg-for="message" val-toggle-msg="required"><localize key="general_required">Required</localize></span>
|
||||
<span class="help-inline" val-msg-for="message" val-toggle-msg="valServerField"></span>
|
||||
</umb-control-group>
|
||||
|
||||
<umb-button
|
||||
ng-if="vm.usersViewState === 'inviteUser'"
|
||||
button-style="success"
|
||||
state="vm.page.createButtonState"
|
||||
type="button"
|
||||
action="vm.inviteUser(addUserForm)"
|
||||
label-key="user_sendInvite"
|
||||
size="m">
|
||||
</umb-button>
|
||||
</umb-button>
|
||||
|
||||
<umb-button ng-if="vm.usersViewState === 'createUser'"
|
||||
<umb-button
|
||||
ng-if="vm.usersViewState === 'createUser'"
|
||||
button-style="success"
|
||||
state="vm.page.createButtonState"
|
||||
type="button"
|
||||
action="vm.createUser(addUserForm)"
|
||||
label-key="user_createUser"
|
||||
size="m">
|
||||
</umb-button>
|
||||
</umb-button>
|
||||
|
||||
</form>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Create user success -->
|
||||
<div ng-if="vm.usersViewState === 'createUserSuccess'">
|
||||
<umb-editor-sub-header>
|
||||
<umb-editor-sub-header-content-left>
|
||||
<a class="umb-package-details__back-link" href="" ng-click="vm.setUsersViewState('overview');">← <localize key="user_backToUsers">Back to users</localize></a>
|
||||
</umb-editor-sub-header-content-left>
|
||||
</umb-editor-sub-header>
|
||||
|
||||
<div class="flex justify-center">
|
||||
<div style="max-width: 500px;">
|
||||
<div class="flex items-center" style="margin-bottom: 15px;">
|
||||
<umb-checkmark
|
||||
checked="vm.usersViewState === 'createUserSuccess'"
|
||||
size="m">
|
||||
</umb-checkmark>
|
||||
<h3 class="bold" style="margin: 0 0 0 10px;">
|
||||
{{vm.newUser.name | umbWordLimit:1}} <localize key="user_userCreated">has been created</localize>
|
||||
</h3>
|
||||
</div>
|
||||
<p style="line-height: 1.6em; margin-bottom: 20px;"><localize key="user_userCreatedSuccessHelp"></localize></p>
|
||||
<div>
|
||||
</div>
|
||||
|
||||
<label class="bold">
|
||||
<localize key="user_password">Password</localize>
|
||||
</label>
|
||||
<!-- Create user success -->
|
||||
<div ng-if="vm.usersViewState === 'createUserSuccess'">
|
||||
|
||||
<umb-editor-sub-header>
|
||||
<umb-editor-sub-header-content-left>
|
||||
<a class="umb-package-details__back-link" href="" ng-click="vm.setUsersViewState('overview');">← <localize key="user_backToUsers">Back to users</localize></a>
|
||||
</umb-editor-sub-header-content-left>
|
||||
</umb-editor-sub-header>
|
||||
|
||||
<div class="flex items-center justify-between" style="background-color: #f3f3f5; padding: 10px 20px; border-radius: 3px; margin-bottom: 30px;">
|
||||
|
||||
<div ng-show="vm.newUser.showPassword">{{vm.newUser.resetPasswordValue}}</div>
|
||||
<div ng-show="!vm.newUser.showPassword">••••••••</div>
|
||||
<div class="flex justify-center">
|
||||
<div style="max-width: 500px;">
|
||||
|
||||
<!-- Success text -->
|
||||
<div class="flex items-center" style="margin-bottom: 15px;">
|
||||
<umb-checkmark
|
||||
checked="vm.usersViewState === 'createUserSuccess'"
|
||||
size="m">
|
||||
</umb-checkmark>
|
||||
<h3 class="bold" style="margin: 0 0 0 10px;">
|
||||
{{vm.newUser.name | umbWordLimit:1}}
|
||||
<localize key="user_userCreated">has been created</localize>
|
||||
</h3>
|
||||
</div>
|
||||
<p style="line-height: 1.6em; margin-bottom: 20px;"><localize key="user_userCreatedSuccessHelp"></localize></p>
|
||||
|
||||
<!-- New password -->
|
||||
<div>
|
||||
<label class="bold"><localize key="user_password">Password</localize></label>
|
||||
<div class="flex items-center justify-between" style="background-color: #f3f3f5; padding: 10px 20px; border-radius: 3px; margin-bottom: 30px;">
|
||||
<div ng-show="vm.newUser.showPassword">{{vm.newUser.resetPasswordValue}}</div>
|
||||
<div ng-show="!vm.newUser.showPassword">••••••••</div>
|
||||
<div>
|
||||
<umb-button
|
||||
ng-if="!vm.newUser.showPassword"
|
||||
type="button"
|
||||
action="vm.toggleNewUserPassword()"
|
||||
label-key="general_show"
|
||||
size="xs">
|
||||
</umb-button>
|
||||
<umb-button
|
||||
ng-if="vm.newUser.showPassword"
|
||||
type="button"
|
||||
action="vm.toggleNewUserPassword()"
|
||||
label-key="general_hide"
|
||||
size="xs">
|
||||
</umb-button>
|
||||
<umb-button
|
||||
ng-if="vm.newUser.resetPasswordValue"
|
||||
umb-clipboard
|
||||
umb-clipboard-success="vm.copySuccess()"
|
||||
umb-clipboard-error="vm.copyError()"
|
||||
umb-clipboard-text="vm.newUser.resetPasswordValue"
|
||||
state="vm.page.copyPasswordButtonState"
|
||||
type="button"
|
||||
label-key="general_copy" size="xs">
|
||||
</umb-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<umb-button
|
||||
ng-if="!vm.newUser.showPassword"
|
||||
type="button"
|
||||
action="vm.toggleNewUserPassword()"
|
||||
label-key="general_show"
|
||||
size="xs">
|
||||
</umb-button>
|
||||
|
||||
<umb-button
|
||||
ng-if="vm.newUser.showPassword"
|
||||
type="button"
|
||||
action="vm.toggleNewUserPassword()"
|
||||
label-key="general_hide"
|
||||
size="xs">
|
||||
</umb-button>
|
||||
|
||||
<umb-button
|
||||
ng-if="vm.newUser.resetPasswordValue"
|
||||
umb-clipboard
|
||||
umb-clipboard-success="vm.copySuccess()"
|
||||
umb-clipboard-error="vm.copyError()"
|
||||
umb-clipboard-text="vm.newUser.resetPasswordValue"
|
||||
state="vm.page.copyPasswordButtonState"
|
||||
type="button"
|
||||
label-key="general_copy"
|
||||
size="xs">
|
||||
</umb-button>
|
||||
<!-- actions -->
|
||||
<div>
|
||||
<umb-button
|
||||
type="button" button-style="info"
|
||||
label-key="user_createAnotherUser"
|
||||
action="vm.setUsersViewState('createUser');"
|
||||
size="m">
|
||||
</umb-button>
|
||||
<umb-button
|
||||
type="button"
|
||||
button-style="success"
|
||||
label-key="user_goToProfile"
|
||||
action="vm.goToUser(vm.newUser.id);"
|
||||
size="m">
|
||||
</umb-button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<umb-button type="button"
|
||||
button-style="info"
|
||||
label-key="user_createAnotherUser"
|
||||
action="vm.setUsersViewState('createUser');"
|
||||
size="m">
|
||||
</umb-button>
|
||||
<umb-button type="button"
|
||||
button-style="success"
|
||||
label-key="user_goToProfile"
|
||||
action="vm.goToUser(vm.newUser.id);"
|
||||
size="m">
|
||||
</umb-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<umb-overlay ng-if="vm.userGroupPicker.show"
|
||||
model="vm.userGroupPicker"
|
||||
view="vm.userGroupPicker.view"
|
||||
position="right">
|
||||
</umb-overlay>
|
||||
<umb-overlay
|
||||
ng-if="vm.userGroupPicker.show"
|
||||
model="vm.userGroupPicker"
|
||||
view="vm.userGroupPicker.view"
|
||||
position="right">
|
||||
</umb-overlay>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user