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

<div class="view-customize my-5">
	{{#if isAuthProviderKeycloak}}
		{{#if syncInProgress}}
			<div class="btn btn-secondary mt-3 mb-3">Keycloak user sync running...</div>
		{{else}}
			<div class="btn btn-success mt-3 mb-3" {{action 'onSync'}}>Sync with Keycloak</div>
		{{/if}}
	{{/if}}

	<div class="my-2">
		<span class="font-weight-bold">Spaces</span>
		<span class="text-muted">&nbsp;&nbsp;&mdash;&nbsp;can add spaces, both personal and shared with others</span>
	</div>
	<div class="my-2">
		<span class="font-weight-bold">Visible</span>
		<span class="text-muted">&nbsp;&nbsp;&mdash;&nbsp;can see names of users and groups, can disable for external users like customers/partners</span>
	</div>
	<div class="my-2">
		<span class="font-weight-bold">Admin</span>
		<span class="text-muted">&nbsp;&nbsp;&mdash;&nbsp;can manage all aspects of Documize, like this screen</span>
	</div>
	<div class="my-2">
		<span class="font-weight-bold">Analytics</span>
		<span class="text-muted">&nbsp;&nbsp;&mdash;&nbsp;can view analytical reports</span>
	</div>
	<div class="mt-2 mb-4">
		<span class="font-weight-bold">Active</span>
		<span class="text-muted">&nbsp;&nbsp;&mdash;&nbsp;can login and use Documize</span>
	</div>

	<div class="form-group mt-5 mb-3">
		{{focus-input type="text" class="form-control" placeholder="filter users" value=filter}}
		<small class="form-text text-muted">search firstname, lastname, email</small>
	</div>

	<div class="max-results py-3">
		<div class="btn-group btn-group-toggle" data-toggle="tooltip" data-placement="top" title="Show how many users">
			<label class="btn btn-outline-secondary {{if (eq userLimit 1) 'active'}}">
				<input type="radio" name="options" autocomplete="off" {{action 'onLimit' 1}}>1
			</label>
			<label class="btn btn-outline-secondary {{if (eq userLimit 10) 'active'}}">
				<input type="radio" name="options" autocomplete="off" {{action 'onLimit' 10}}>10
			</label>
			<label class="btn btn-outline-secondary {{if (eq userLimit 25) 'active'}}">
				<input type="radio" name="options" autocomplete="off" {{action 'onLimit' 25}}>25
			</label>
			<label class="btn btn-outline-secondary {{if (eq userLimit 50) 'active'}}">
				<input type="radio" name="options" autocomplete="off" {{action 'onLimit' 50}}>50
			</label>
			<label class="btn btn-outline-secondary {{if (eq userLimit 100) 'active'}}">
				<input type="radio" name="options" autocomplete="off" {{action 'onLimit' 100}}>100
			</label>
			<label class="btn btn-outline-secondary {{if (eq userLimit 250) 'active'}}">
				<input type="radio" name="options" autocomplete="off" {{action 'onLimit' 250}}>250
			</label>
			<label class="btn btn-outline-secondary {{if (eq userLimit 500) 'active'}}">
				<input type="radio" name="options" autocomplete="off" {{action 'onLimit' 500}}>500
			</label>
			<label class="btn btn-outline-secondary {{if (eq userLimit 1000) 'active'}}">
				<input type="radio" name="options" autocomplete="off" {{action 'onLimit' 1000}}>1,000
			</label>
			<label class="btn btn-outline-secondary {{if (eq userLimit 99999) 'active'}}">
				<input type="radio" name="options" autocomplete="off" {{action 'onLimit' 99999}}>all
			</label>
		</div>
	</div>

	<table class="table table-responsive table-borderless user-table">
		<thead>
			<tr>
				<th class="text-muted">
					{{#if hasSelectedUsers}}
						<button id="bulk-delete-users" type="button" class="btn btn-danger" data-toggle="modal" data-target="#admin-user-delete-modal" data-backdrop="static">Delete selected users</button>
					{{/if}}
				</th>
				<th class="no-width">Spaces</th>
				<th class="no-width">Visible</th>
				<th class="no-width">Admin</th>
				<th class="no-width">Analytics</th>
				<th class="no-width">Active</th>
				<th class="no-width">
				</th>
			</tr>
		</thead>
		<tbody>
			{{#each users key="id" as |user|}}
				<tr>
					<td class="{{unless user.active 'inactive-user'}} {{if user.admin 'admin-user'}}">
						<div class="d-inline-block align-top">
							{{#if user.me}}
								<i class="material-icons color-gray">check_box_outline_blank</i>
							{{else if user.selected}}
								<i class="material-icons checkbox" {{action 'toggleSelect' user}}>check_box</i>
							{{else}}
								<i class="material-icons checkbox" {{action 'toggleSelect' user}}>check_box_outline_blank</i>
							{{/if}}
						</div>
						<div class="d-inline-block">
							<div class="name" {{action "onShowEdit" user.id}}>{{user.fullname}}<div class="email">&nbsp;&nbsp;({{user.email}})</div></div>
							<div class="groups" {{action "onShowGroupsModal" user.id}}>
								{{#each user.groups as |group|}}
									<span class="group">
										{{group.name}}{{#if (not-eq group user.groups.lastObject)}}, {{/if}}
									</span>
								{{else}}
									<span class="group">&lt;no groups&gt;</span>
								{{/each}}
							</div>
						</div>
					</td>
					<td class="no-width text-center">
						{{#if user.editor}}
							<i class="material-icons checkbox" {{action 'toggleEditor' user.id}}>check_box</i>
						{{else}}
							<i class="material-icons checkbox" {{action 'toggleEditor' user.id}}>check_box_outline_blank</i>
						{{/if}}
					</td>
					<td class="no-width text-center">
						{{#if user.viewUsers}}
							<i class="material-icons checkbox" {{action 'toggleUsers' user.id}}>check_box</i>
						{{else}}
							<i class="material-icons checkbox" {{action 'toggleUsers' user.id}}>check_box_outline_blank</i>
						{{/if}}
					</td>
					<td class="no-width text-center">
						{{#if user.me}}
							<i class="material-icons color-gray">check_box</i>
						{{else if user.admin}}
							<i class="material-icons checkbox" {{action 'toggleAdmin' user.id}}>check_box</i>
						{{else}}
							<i class="material-icons checkbox" {{action 'toggleAdmin' user.id}}>check_box_outline_blank</i>
						{{/if}}
					</td>
					<td class="no-width text-center">
						{{#if user.analytics}}
							<i class="material-icons checkbox" {{action 'toggleAnalytics' user.id}}>check_box</i>
						{{else}}
							<i class="material-icons checkbox" {{action 'toggleAnalytics' user.id}}>check_box_outline_blank</i>
						{{/if}}
					</td>
					<td class="no-width text-center">
						{{#if user.me}}
							<i class="material-icons color-gray">check_box</i>
						{{else if user.active}}
							<i class="material-icons checkbox" {{action 'toggleActive' user.id}}>check_box</i>
						{{else}}
							<i class="material-icons checkbox" {{action 'toggleActive' user.id}}>check_box_outline_blank</i>
						{{/if}}
					</td>
					<td class="no-width text-center">
						<div class="user-button-{{user.id}} button-icon-gray button-icon-small" title="Edit" {{action "onShowEdit" user.id}}>
							<i class="material-icons">mode_edit</i>
						</div>
						{{#unless user.me}}
							<div class="button-icon-gap" />
							<div class="delete-button-{{user.id}} button-icon-red button-icon-small" title="Delete" {{action "onShowDelete" user.id}}>
								<i class="material-icons">delete</i>
							</div>
						{{/unless}}
					</td>
				</tr>
			{{/each}}
		</tbody>
	</table>
</div>

<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>
					<div class="form-group">
						<label for="edit-firstname">Firstname</label>
						{{input id="edit-firstname" class="form-control" type="text" value=editUser.firstname}}
					</div>
					<div class="form-group">
						<label for="edit-lastname">Lastname</label>
						{{input id="edit-lastname" type="text" class="form-control" value=editUser.lastname}}
					</div>
					<div class="form-group">
						<label for="edit-email">Email</label>
						{{input id="edit-email" type="text" class="form-control" value=editUser.email}}
					</div>
					{{#if isAuthProviderDocumize}}
						<div class="row">
							<div class="col-md-6">
								<div class="form-group">
									<label for="edit-password">Password</label>
									{{input id="edit-password" type="password" class="form-control" value=password.password}}
									<small class="form-text text-muted">Optional new password</small>
								</div>
							</div>
							<div class="col-md-6">
								<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">Confirm new password</small>
								</div>
							</div>
						</div>
					{{/if}}
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
				<button type="button" class="btn btn-success" onclick={{action 'onUpdate'}}>Save</button>
			</div>
		</div>
	</div>
</div>

{{#ui/ui-dialog title="Delete User" confirmCaption="Delete" buttonType="btn-danger" show=showDeleteDialog onAction=(action 'onDelete')}}
	<p>Are you sure you want to delete {{deleteUser.fullname}}?</p>
{{/ui/ui-dialog}}

<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">Delete Users</div>
			<div class="modal-body">
				<p>Are you sure you want to delete selected users?</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
				<button type="button" class="btn btn-success" onclick={{action 'onBulkDelete'}}>Delete</button>
			</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">
				<div class="view-customize">
					<div class="group-membership my-5">
						{{#each groups as |group|}}
							<div class="row item">
								<div class="col-10 group-name">{{group.name}}
									{{#if group.purpose}}
										<span class="text-muted group-purpose">&nbsp;&nbsp;&mdash;&nbsp;{{group.purpose}}</span>
									{{/if}}
								</div>
								<div class="col-2 text-right">
									{{#if group.isMember}}
										<button class="btn btn-danger" {{action 'onLeaveGroup' group.id}}>Leave</button>
									{{else}}
										<button class="btn btn-success" {{action 'onJoinGroup' group.id}}>Join</button>
									{{/if}}
								</div>
							</div>
						{{/each}}
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>