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 populateUsers(actionMessage){
		app.user.list(function(error, data){
			if(error) return app.util.actionMessage(error, $.scope.users.$this, 'danger');
			for(let user of data.results){
				$.scope.users.push(user);
			}
			$.scope.users.__setPut(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.util.actionMessage(error, $.scope.users.$this, 'danger');
			$.scope.users.remove(username);
		});
	}

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

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

	});
</script>
<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">
					<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, data);
				">
					<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">
					<i class="fa-solid fa-circle-minus"></i>
				</span>
			</div>

			<div class="card-header actionMessage" style="display:none"></div>
			<div class="table-responsive">
			<table class="card-body table table-striped" style="margin-bottom:0">
				<thead>
					<th>Name</th>
					<th>Password</th>
					<th>Delete</th>
				</thead>
				<tbody>
					<tr jq-repeat="users" jq-repeat-index="username" style="display:none" >
						<td class="align-middle">
							{{ username }}
						</td>
						<td>

							<form class="input-group" action="user/password/{{ username }}" method="put" onsubmit="formAJAX(this)">
							  <input type="password" name="password" class="form-control" placeholder="Change {{ username }} password" aria-label="Update password">
							  <button class="btn btn-warning" type="submit">Change</button>
							</form>

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