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);
		});
	}

	$(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-md-4">
		<div class="card shadow-lg">

			<div class="card-header text-center">
				<span class="card-icon float-start">
					<i class="fa-solid fa-user-plus"></i>
				</span>
				<span class="card-title">
					Add New User
				</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>
					<i class="fa-solid fa-circle-minus"></i>
				</span>
			</div>

			<div class="card-header actionMessage" style="display:none"></div>
			<div class="card-body">
				<form action="user/" onsubmit="formAJAX(this)" evalAJAX="
					$.scope.users.splice(0, 0, processUser(data));
					setTimeout(function(){ app.util.revealItem($('#user-row-' + data.username)); }, 100);
				">
					<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>
					<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>
					<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>
					<hr />
					<button type="submit" class="btn btn-info">
						Add
					</button>
				</form>
			</div>
		</div>
	</div>
	<div class="col-md-8">
		<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>
					<i class="fa-solid fa-circle-minus"></i>
				</span>
			</div>

			<div class="card-header actionMessage" style="display:none"></div>
			<div class="card-body">
			<div class="row row-cols-1 row-cols-lg-2 g-3" id="user-cards">
				<div class="col" jq-repeat="users" jq-repeat-index="username" id="user-row-{{username}}" style="display:none">
					<div class="card shadow-sm h-100">
						<div class="card-body">
							<h6 class="d-flex align-items-center mb-2">
								<i class="fa-solid fa-user me-2"></i>
								{{ username }}
								{{#isExternal}}
								<span class="badge text-bg-secondary ms-2" title="Provisioned via SSO login; no local password to manage here.">
									<i class="fa-solid fa-cloud"></i> External (SSO)
								</span>
								{{/isExternal}}
							</h6>

							{{^isExternal}}
							<form class="input-group input-group-sm mb-2" 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}}
							<p class="text-muted small mb-2">Authenticates via SSO -- cannot be edited here.</p>
							{{/isExternal}}

							<button type="button" class="btn btn-sm btn-danger" onclick="removeUser('{{username}}')">
								<i class="fa-solid fa-user-slash"></i>
								Delete
							</button>
						</div>
					</div>
				</div>
			</div>
			</div>
		</div>
	</div>
</div>
</div>
<%- include('bottom') %>