documize/gui/app/templates/components/customize/user-list.hbs

<div class="view-customize">
	{{#if isAuthProviderKeycloak}}
		<Ui::UiSpacer @size="300" />
		{{#if syncInProgress}}
			{{ui/ui-button color=constants.Color.Gray light=true icon=constants.Icon.Locked label=(localize 'auth_keycloak_running')}}
		{{else}}
			{{ui/ui-button color=constants.Color.Yellow light=true icon=constants.Icon.Locked label=(localize 'auth_keycloak_sync') onClick=(action "onSyncKeycloak")}}
		{{/if}}
	{{/if}}

	{{#if (or isAuthProviderLDAP isDualAuth)}}
		<Ui::UiSpacer @size="300" />
		{{#if syncInProgress}}
			{{ui/ui-button color=constants.Color.Gray light=true icon=constants.Icon.Locked label=(localize 'auth_ldap_running')}}
		{{else}}
			{{ui/ui-button color=constants.Color.Yellow light=true icon=constants.Icon.Locked label=(localize 'auth_ldap_sync') onClick=(action "onSyncLDAP")}}
		{{/if}}
	{{/if}}

	<Ui::UiSpacer @size="300" />
	<div class="explain-user-perms">
		<div class="title" {{action "togglePerms"}}>
			{{localize 'permissions'}}
			{{#if showPermExplain}}
				<i class="dicon {{constants.Icon.ArrowSmallUp}}" />
			{{else}}
				<i class="dicon {{constants.Icon.ArrowSmallDown}}" />
			{{/if}}
		</div>
		<div class="perms">
			<div class="perm-name">{{localize 'permission_spaces'}}</div>
			<div class="perm-desc">{{localize 'permission_spaces_explain'}}</div>
			<div class="perm-name">{{localize 'permission_visible'}}</div>
			<div class="perm-desc">{{localize 'permission_visible_explain'}}</div>
			<div class="perm-name">{{localize 'permission_admin'}}</div>
			<div class="perm-desc">{{localize 'permission_admin_explain'}}</div>
			<div class="perm-name">{{localize 'permission_analytics'}}</div>
			<div class="perm-desc">{{localize 'permission_analytics_explain'}}<</div>
			<div class="perm-name">{{localize 'permission_active'}}</div>
			<div class="perm-desc">{{localize 'permission_active_explain'}}</div>
		</div>
	</div>
	<Ui::UiSpacer @size="300" />

	<div class="form-group">
		{{focus-input type="text" class="form-control" placeholder=(localize 'find_user') value=filter key-up=(action "onFilterChange")}}
		<small class="form-text text-muted">{{localize 'find_user_syntax'}}</small>
	</div>

	<div class="text-center">
		{{#ui/ui-toolbar dark=false light=false raised=false large=true bordered=false tooltip=(localize 'user_max_display')}}
			{{ui/ui-toolbar-label color=constants.Color.Gray label="5" selected=(eq userLimit 5) onClick=(action "onLimit" 5)}}
			{{ui/ui-toolbar-label color=constants.Color.Gray label="10" selected=(eq userLimit 10) onClick=(action "onLimit" 10)}}
			{{ui/ui-toolbar-label color=constants.Color.Gray label="25" selected=(eq userLimit 25) onClick=(action "onLimit" 25)}}
			{{ui/ui-toolbar-label color=constants.Color.Gray label="50" selected=(eq userLimit 50) onClick=(action "onLimit" 50)}}
			{{ui/ui-toolbar-label color=constants.Color.Gray label="100" selected=(eq userLimit 100) onClick=(action "onLimit" 100)}}
			{{ui/ui-toolbar-label color=constants.Color.Gray label="250" selected=(eq userLimit 250) onClick=(action "onLimit" 250)}}
			{{ui/ui-toolbar-label color=constants.Color.Gray label="500" selected=(eq userLimit 500) onClick=(action "onLimit" 500)}}
			{{ui/ui-toolbar-label color=constants.Color.Gray label="1,000" selected=(eq userLimit 1000) onClick=(action "onLimit" 1000)}}
			{{ui/ui-toolbar-label color=constants.Color.Gray label="ALL" selected=(eq userLimit 99999) onClick=(action "onLimit" 99999)}}
		{{/ui/ui-toolbar}}
	</div>

	<table class="table table-responsive table-borderless user-table">
		<thead>
			<tr>
				<th class="no-width"></th>
				<th>
					{{#if hasSelectedUsers}}
						{{ui/ui-button
							id="bulk-delete-users"
							color=constants.Color.Red
							light=false
							icon=constants.Icon.Delete
							label=(localize 'delete')
							onClick=(action "onShowDeleteBulk")}}
					{{/if}}
				</th>
				<th class="no-width">{{localize 'permission_spaces'}}</th>
				<th class="no-width">{{localize 'permission_visible'}}</th>
				<th class="no-width">{{localize 'permission_analytics'}}</th>
				<th class="no-width">{{localize 'permission_admin'}}</th>
				<th class="no-width">{{localize 'permission_active'}}</th>
				<th class="no-width"></th>
			</tr>
		</thead>
		<tbody>
			{{#each users key="id" as |user|}}
				<tr>
					<td class="no-width text-center align-middle">
						{{#if user.me}}
							<i class="user-checkbox dicon {{constants.Icon.NotAllowed}}" />
						{{else if user.selected}}
							<i class="user-checkbox dicon {{constants.Icon.CheckboxChecked}}" {{action "toggleSelect" user}} role="button" tabindex="0" />
						{{else}}
							<i class="user-checkbox dicon {{constants.Icon.Checkbox}}" {{action "toggleSelect" user}} role="button" tabindex="0" />
						{{/if}}
					</td>
					<td class="{{unless user.active "inactive-user"}} {{if user.admin "admin-user"}}">
						<div class="name" {{action "onShowEdit" user.id}} role="button" tabindex="0">
							{{user.fullname}}
							<div class="email">{{user.email}}</div>
						</div>
						<div class="groups" {{action "onShowGroupsModal" user.id}} role="button" tabindex="0">
							{{#each user.groups as |group|}}
								<span class="group">
									{{group.name}}{{#if (not-eq group user.groups.lastObject)}}, {{/if}}
								</span>
							{{else}}
								<span class="group">&lt;{{localize 'group_none'}}&gt;</span>
							{{/each}}
						</div>
					</td>
					<td class="no-width text-center align-middle">
						{{#if user.editor}}
							<i class="user-checkbox dicon {{constants.Icon.CheckboxChecked}}" {{action "toggleEditor" user.id}} role="button" tabindex="0" />
						{{else}}
							<i class="user-checkbox dicon {{constants.Icon.Checkbox}}" {{action "toggleEditor" user.id}} role="button" tabindex="0" />
						{{/if}}
					</td>
					<td class="no-width text-center align-middle">
						{{#if user.viewUsers}}
							<i class="user-checkbox dicon {{constants.Icon.CheckboxChecked}}" {{action "toggleUsers" user.id}} role="button" tabindex="0" />
						{{else}}
							<i class="user-checkbox dicon {{constants.Icon.Checkbox}}" {{action "toggleUsers" user.id}} role="button" tabindex="0" />
						{{/if}}
					</td>
					<td class="no-width text-center align-middle">
						{{#if user.analytics}}
							<i class="user-checkbox dicon {{constants.Icon.CheckboxChecked}}" {{action "toggleAnalytics" user.id}} role="button" tabindex="0" />
						{{else}}
							<i class="user-checkbox dicon {{constants.Icon.Checkbox}}" {{action "toggleAnalytics" user.id}} role="button" tabindex="0" />
						{{/if}}
					</td>
					<td class="no-width text-center align-middle">
						{{#if user.me}}
							<i class="user-checkbox dicon {{constants.Icon.NotAllowed}}" />
						{{else if user.admin}}
							<i class="user-checkbox dicon {{constants.Icon.CheckboxChecked}}" {{action "toggleAdmin" user.id}} role="button" tabindex="0" />
						{{else}}
							<i class="user-checkbox dicon {{constants.Icon.Checkbox}}" {{action "toggleAdmin" user.id}} role="button" tabindex="0" />
						{{/if}}
					</td>
					<td class="no-width text-center align-middle">
						{{#if user.me}}
							<i class="user-checkbox dicon {{constants.Icon.NotAllowed}}" />
						{{else if user.active}}
							<i class="user-checkbox dicon {{constants.Icon.CheckboxChecked}}" {{action "toggleActive" user.id}} role="button" tabindex="0" />
						{{else}}
							<i class="user-checkbox dicon {{constants.Icon.Checkbox}}" {{action "toggleActive" user.id}} role="button" tabindex="0" />
						{{/if}}
					</td>
					<td class="no-width text-center align-middle">
						{{#ui/ui-toolbar dark=false light=true raised=true large=false bordered=true}}
							{{ui/ui-toolbar-icon icon=constants.Icon.Edit color=constants.Color.Gray tooltip=(localize 'edit') onClick=(action "onShowEdit" user.id)}}
							{{ui/ui-toolbar-icon icon=constants.Icon.AddUser color=constants.Color.Gray tooltip=(localize 'user_assign_group') onClick=(action "onShowGroupsModal" user.id)}}
							{{#unless user.me}}
								{{ui/ui-toolbar-icon icon=constants.Icon.Delete color=constants.Color.Red tooltip=(localize 'delete') onClick=(action "onShowDelete" user.id)}}
							{{/unless}}
						{{/ui/ui-toolbar}}
					</td>
				</tr>
			{{/each}}
		</tbody>
	</table>
</div>

{{#ui/ui-dialog title="Delete User" confirmCaption=(localize 'delete') buttonColor=constants.Color.Red show=showDeleteDialog onAction=(action "onDelete")}}
	<p>{{localize 'user_delete_confirm' deleteUser.fullname}}</p>
{{/ui/ui-dialog}}

<div id="edit-user-modal" class="modal" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">User {{editUser.firstname}} {{editUser.lastname}}</div>
			<div class="modal-body">
				<form role="form">
					<div class="form-group">
						<label for="edit-firstname">{{localize 'firstname'}}</label>
						{{input id="edit-firstname" class="form-control" type="text" value=editUser.firstname}}
					</div>
					<div class="form-group">
						<label for="edit-lastname">{{localize 'lastname'}}</label>
						{{input id="edit-lastname" type="text" class="form-control" value=editUser.lastname}}
					</div>
					<div class="form-group">
						<label for="edit-email">{{localize 'email'}}</label>
						{{input id="edit-email" type="text" class="form-control" value=editUser.email}}
					</div>
					{{#if (or isAuthProviderDocumize isDualAuth)}}
						<div class="form-group">
							<label for="edit-password">{{localize 'password'}}</label>
							{{input id="edit-password" type="password" class="form-control" value=password.password}}
							<small class="form-text text-muted">Optional</small>
						</div>
						<div class="form-group">
							<label for="edit-confirmPassword">Confirm Password</label>
							{{input id="edit-confirmPassword" type="password" class="form-control" value=password.confirmation}}
							<small class="form-text text-muted"></small>
						</div>
					{{/if}}
				</form>
			</div>
			<div class="modal-footer">
				{{ui/ui-button color=constants.Color.Gray light=true label=(localize 'close') dismiss=true}}
				{{ui/ui-button-gap}}
				{{ui/ui-button color=constants.Color.Green light=true label=(localize 'update') onClick=(action "onUpdate")}}
			</div>
		</div>
	</div>
</div>

<div id="admin-user-delete-modal" class="modal" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">{{localize 'user_delete'}}</div>
			<div class="modal-body">
				<p>{{localize 'user_selected_delete_confirm'}}</p>
			</div>
			<div class="modal-footer">
				{{ui/ui-button color=constants.Color.Gray light=true label=(localize 'close') dismiss=true}}
				{{ui/ui-button-gap}}
				{{ui/ui-button color=constants.Color.Red light=true label=(localize 'delete') onClick=(action "onBulkDelete")}}
			</div>
		</div>
	</div>
</div>

<div id="group-member-modal" class="modal" tabindex="-1" role="dialog">
	<div class="modal-dialog modal-lg" role="document">
		<div class="modal-content">
			<div class="modal-header">{{selectedUser.fullname}}</div>
			<div class="modal-body">
				{{#each groups as |group|}}
					<div class="grid-container-8-2">
						<div class="grid-cell-1">
							<div class="view-customize">
								<div class="group-membership">
									<div class="item">
										<div class="group-name">{{group.name}}
											{{#if group.purpose}}
												<span class="group-purpose">&nbsp;&mdash;&nbsp;{{group.purpose}}</span>
											{{/if}}
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="grid-cell-2 grid-cell-right">
							<div class="view-customize">
								<div class="group-membership">
									<div class="item">
										{{#if group.isMember}}
											{{ui/ui-button color=constants.Color.Red light=true label=(localize 'leave') onClick=(action "onLeaveGroup" group.id)}}
										{{else}}
											{{ui/ui-button color=constants.Color.Green light=true label=(localize 'join') onClick=(action "onJoinGroup" group.id)}}
										{{/if}}
									</div>
								</div>
							</div>
						</div>
					</div>
				{{/each}}
			</div>
			<div class="modal-footer">
				{{ui/ui-button color=constants.Color.Gray light=true label=(localize 'close') dismiss=true}}
			</div>
		</div>
	</div>
</div>