proxy/nodejs/views/users.ejs

<%- include('top') %>
<script type="text/javascript">
	// Require login to see this page.
	app.auth.forceLogin();
</script>

<style type="text/css">
	@include color-mode(dark) {
	  // CSS variable overrides here...
	}
	label.control-label{
		font-weight: bold;
		margin-bottom: 1px;
	}
	.card-title{
		font-weight: bold;
	}
</style>

<script type="text/javascript">


	function processUser(user){
		user.isExternal = user.backing === 'oidc';
		return user;
	}

	function populateUsers(actionMessage){
		app.user.list(function(error, data){
			if(error) return app.messages.action(error, $.scope.users.$this, 'danger');
			for(let user of data.results){
				$.scope.users.push(processUser(user));
			}
			$.scope.users.__put = function($el, item, list){
				$el.addClass('bg-success');
				$el.fadeIn(3000, function(){
					$el.removeClass('bg-success');
				});
			};
		});
	}

	function removeUser(username){
		app.user.remove({username: username}, function(error, data){
			if(error) return app.messages.action(error, $.scope.users.$this, 'danger');
			$.scope.users.remove(username);
		});
	}

	function userAddOpen(){
		app.modal.open({title: 'Add New User', bodyHtml:
			'<form action="user/" onsubmit="formAJAX(this)" evalAJAX="'
			+ '$.scope.users.splice(0, 0, processUser(data));'
			+ 'setTimeout(function(){ app.util.revealItem($(\'#user-row-\' + data.username)); }, 100);'
			+ 'app.modal.close();'
			+ '">'
			+   '<input type="hidden" class="form-control" name="delete" value="false" />'
			+   '<div class="form-group">'
			+     '<label class="control-label">User-name</label>'
			+     '<input type="text" class="form-control" name="username" placeholder="Letter, numbers, -, _, . and @ only" validate="user:3" />'
			+     '<div class="invalid-feedback d-none" data-field-error="username"></div>'
			+   '</div>'
			+   '<div class="form-group">'
			+     '<label class="control-label">Password</label>'
			+     '<input type="password" class="form-control" name="password" placeholder="8+ chars; mix upper/lower/number/symbol (or 12+)" validate="password"/>'
			+     '<div class="invalid-feedback d-none" data-field-error="password"></div>'
			+   '</div>'
			+   '<div class="form-group">'
			+     '<label class="control-label">Again</label>'
			+     '<input type="password" class="form-control" name="passwordMatch" placeholder="Retype password" validate="eq:password"/>'
			+     '<div class="invalid-feedback d-none" data-field-error="passwordMatch"></div>'
			+   '</div>'
			+   '<hr />'
			+   '<button type="submit" class="btn btn-info">Add</button>'
			+ '</form>',
		onValidationError: function(errors){
			// Clear all field errors first
			$('[data-field-error]').addClass('d-none').text('');
			$('.form-control.is-invalid').removeClass('is-invalid');

			// Show action message at top
			let errorMsg = 'Please fix the following errors:';
			for(let field in errors){
				let $field = $('[name="' + field + '"]');
				$field.addClass('is-invalid');
				$field.siblings('[data-field-error]').removeClass('d-none').text(errors[field]);
				errorMsg += ' ' + field + ': ' + errors[field] + ';';
			}
			$('.modal-body .actionMessage').first().length ?
				$('.modal-body .actionMessage').first().text(errorMsg).removeClass('d-none').addClass('alert alert-danger') :
				app.messages.action(errorMsg, $('.modal-body'), 'danger');
		}
		});
	}

	$(document).ready(function(){
		populateUsers(); //populate the table

		$.scope.users.__take = function($el, item, list){
			$el.addClass('bg-danger');
			$el.fadeOut(1000, function(){
				$el.remove()
			});
		};

	});
</script>
<div class="container mt-4">
<div class="row" style="display:none">
	<div class="col-12">
		<div class="card shadow-lg">

			<div class="card-header text-center">
				<span class="card-icon float-start">
					<i class="fa-solid fa-users"></i>
				</span>
				<span class="card-title">
					User List
				</span>
				<span class="float-end">
					<a href="/docs/access" class="text-reset me-2" title="Help"><i class="fa-solid fa-circle-question"></i></a>
					<button type="button" class="btn btn-sm btn-success" onclick="userAddOpen()">
						<i class="fa-solid fa-user-plus"></i>
						Add User
					</button>
				</span>
			</div>

			<div class="card-header actionMessage" style="display:none"></div>
			<div class="card-body">
				<div class="table-responsive">
					<table class="table table-striped mb-0">
						<thead>
							<tr>
								<th>Username</th>
								<th>Auth Type</th>
								<th>Password</th>
								<th>Actions</th>
							</tr>
						</thead>
						<tbody id="user-cards">
							<tr jq-repeat="users" jq-repeat-index="username" id="user-row-{{username}}" style="display:none">
								<td>
									<strong>{{ username }}</strong>
								</td>
								<td>
									{{#isExternal}}
									<span class="badge text-bg-secondary" title="Provisioned via SSO login; no local password to manage here.">
										<i class="fa-solid fa-cloud"></i> External (SSO)
									</span>
									{{/isExternal}}
									{{^isExternal}}
									<span class="badge text-bg-primary">Local</span>
									{{/isExternal}}
								</td>
								<td>
									{{^isExternal}}
									<form class="input-group input-group-sm" style="max-width: 350px;" action="user/password/{{ username }}" method="put" onsubmit="formAJAX(this)">
									  <input type="password" name="password" class="form-control" placeholder="Change password" aria-label="Update password">
									  <button class="btn btn-warning" type="submit">Change</button>
									</form>
									{{/isExternal}}
									{{#isExternal}}
									<span class="text-muted">Authenticates via SSO — cannot be edited here.</span>
									{{/isExternal}}
								</td>
								<td>
									<button type="button" class="btn btn-sm btn-danger" onclick="removeUser('{{username}}')">
										<i class="fa-solid fa-user-slash"></i>
										Delete
									</button>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>
</div>
<%- include('bottom') %>