CopperWire
/
daktylos


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298
							<html>
<?php include("header.php") ?>
<style type="text/css">

</style>
<div class="sidebar">
	<button class="add-user-modal button"><i class="fa fa-user-plus"></i> Add New User</button>
</div>
<div class="content">
<div id="message-center"></div>
	<table>
		<tr>
			<th>Id</th>
			<th style="width: 160px;">Display Name</th>
			<th style="width: 160px;">Username</th>
			<th style="width: 160px;">Email</th>
			<th style="width: 200px;">Domains</th>
<?php if($superadmin): ?>
			<th style="width: 160px;">Password</th>
<?php endif; ?>
			<th style="width: 120px;">Actions</th>
		</tr>
		<?php foreach($users as $user) : ?>
			<?php if (empty($user)) continue; ?>
			<tr class="display-row">
				<td><?=$user['user_id']?></td>
				<td><?=$user['display_name']?></td>
				<td><?=$user['username']?></td>
				<td><?=$user['email']?></td>
				<td><?php if(empty($user['domains'])) { echo "no assigned domains"; } else { ?>
					<?php foreach($user['domains'] as $domain) : ?>
						<div class="domain"><?=$domain['subdomain']?></div>
					<?php endforeach; ?>
					<?php }?></td>
<?php if($superadmin): ?>
				<td>[hidden]</td>
<?php endif; ?>
				<td>
					<button class="edit button">Edit</button>
				</td>
			</tr>
			<tr class="edit-row">
				<td><?=$user['user_id']?></td>
				<td><input type="text" name="display_name" value="<?=$user['display_name']?>" /></td>
				<td><input type="text" name="username" value="<?=$user['username']?>" /></td>
				<td><input type="text" name="email" value="<?=$user['email']?>" /></td>
				<td><?php if(empty($user['domains'])) { echo ""; } else { ?>
					<?php foreach($user['domains'] as $domain) : ?>
						<div class="domain"><?=$domain['subdomain']?><button class="remove-domain" data-user="<?=$user['user_id']?>" data-client="<?=$domain['client_id']?>">X</button></div>
					<?php endforeach; ?>
					<?php }?><input type="text" name="subdomain" /><button class="add-domain" data-user="<?=$user['user_id']?>">+</button></td>
<?php if($superadmin): ?>
					<td><input type="text" name="password" value="" /></td>
<?php endif; ?>
					<td>
						<button class="save button" data-user="<?=$user['user_id']?>">Save</button>
						<button class="cancel button">Cancel</button>
						<!--<button class="change-password">Change Password</button>-->
					</td>
					</tr>
				<?php endforeach; ?>
			</table>
		</div>
		<div class="modal-overlay"></div>
		<div class="modal-popup"><button class="modal-close">X</button>
			<h1>Add User</h1>
			<hr />
			<div class="modal-message"></div>
			<form id="add-user-form" autocomplete="off" style="display:none;">
				<div class="input-row centered"><input name="display_name" type="text" placeholder="display name" autocomplete="off" /></div>
				<div class="input-row centered"><input name="new_username" type="text" placeholder="username" autocomplete="off" /></div>
				<div class="input-row centered"><input name="new_email" type="text" placeholder="email" autocomplete="off" /></div>
				<div class="input-row centered"><input name="new_password" type="password" placeholder="password" autocomplete="off" /></div>
				<!--<div class="input-row centered"><input name="password_confirm" type="password" placeholder="password (confirm)" /></div>-->
				<div class="input-row centered"><button class="add-user">Add User</button></div>
			</form>
		</div>
	</body>

	<script type="text/javascript">
		document.addEventListener("DOMContentLoaded", function(event) { 
			bindButtons();
<?php if($superadmin): ?>
			superadminNotice();
<?php endif; ?>
		});

		function bindButtons() {
			var addUserModalButton = document.getElementsByClassName("add-user-modal")[0];
			addUserModalButton.addEventListener("click", addUserModalButton_click);

			var addUserButton = document.getElementsByClassName("add-user")[0];
			addUserButton.addEventListener("click", addUserButton_click);

			var editButtons = document.getElementsByClassName("edit");
			for(var i = 0; i < editButtons.length; i++) {
				editButtons[i].addEventListener("click", editButton_click);
			}

			var cancelButtons = document.getElementsByClassName("cancel");
			for(var i = 0; i < cancelButtons.length; i++) {
				cancelButtons[i].addEventListener("click", cancelButton_click);
			}

			var saveButtons = document.getElementsByClassName("save");
			for(var i = 0; i < saveButtons.length; i++) {
				saveButtons[i].addEventListener("click", saveButton_click);
			}

			var addDomainButtons = document.getElementsByClassName("add-domain");
			for(var i = 0; i < addDomainButtons.length; i++) {
				addDomainButtons[i].addEventListener("click", addDomainButton_click);
			}

			var removeDomainButtons = document.getElementsByClassName("remove-domain");
			for(var i = 0; i < removeDomainButtons.length; i++) {
				removeDomainButtons[i].addEventListener("click", removeDomainButton_click);
			}

			var overlay = document.getElementsByClassName("modal-overlay")[0];
			overlay.addEventListener("click", closeModal_click);

			var closeModal = document.getElementsByClassName("modal-close")[0];
			closeModal.addEventListener("click", closeModal_click);
		}

		function addUserModalButton_click(event) {
			var overlay = document.getElementsByClassName("modal-overlay")[0];
			var popup = document.getElementsByClassName("modal-popup")[0];

	//TODO: clear the modal form
	//var modalContent = document.getElementsByClassName("modal-content")[0];
	var addUserForm = document.getElementById("add-user-form");
	addUserForm.style.display = "block";
	//modalContent.innerHTML = addUserForm.innerHTML;

	overlay.classList.add("make-visible");
	popup.classList.add("make-visible");
	
}

function addUserButton_click(event) {
	event.preventDefault();

	var form = this.parentNode.parentNode;
	var inputFields = form.getElementsByTagName("input");
	var username = inputFields.new_username.value;
	var email = inputFields.new_email.value;
	var displayName = inputFields.display_name.value;
	var password = inputFields.new_password.value;
	if(!validateAddUserFields(username, displayName, password, email)) {	
		return;
	}

	var postData = {"username": username, "display_name": displayName, "password": password, "email": email};
	var promise = ajaxPost("/api/adduser", postData);
	promise.success = function(response) {
		var message = document.getElementsByClassName("modal-message")[0];
		if(response.hasOwnProperty("error")) {
			message.innerHTML = response.error;	
			if(response.hasOwnProperty("exception")) {
				console.warn(response.exception);
			}
		} else {
			location.reload();
		}
	};

	promise.failure = function(response) {
		console.warn("Communication failure", response);
	};
}

function validateAddUserFields(username, displayName, password, email) {
	var message = document.getElementsByClassName("modal-message")[0];

	if(username.length < 3) {
		message.innerHTML = "username too short";	
		return false;
	}

	if(username.trim() != username || encodeURIComponent(username) != username) {
		message.innerHTML = "username contains invalid characters";	
		return false;
	}

	if(username == "admin") {
		message.innerHTML = "reserved username";	
		return false;
	}

	if(displayName.length < 3) {
		message.innerHTML = "display name is too short";	
		return false;
	}

	if(displayName.trim() != displayName) {
		message.innerHTML = "display name contains invalid characters";
		return false;
	}

	if(password.length < 8) {
		message.innerHTML = "password must be at least 8 characters long";	
		return false;
	}
	
	return true;
}

function editButton_click(event) {
	this.parentNode.parentNode.style="display: none";
	this.parentNode.parentNode.nextElementSibling.style="display: table-row";
}

function cancelButton_click(event) {
	this.parentNode.parentNode.style="display: none";
	this.parentNode.parentNode.previousElementSibling.style="display: table-row";
}

function saveButton_click(event) {
	this.parentNode.parentNode.style="display: none";
	this.parentNode.parentNode.previousElementSibling.style="display: table-row";

	var userId = this.getAttribute("data-user");

	var inputFields = this.parentNode.parentNode.getElementsByTagName("input");
	var username = inputFields.username.value;
	var displayName = inputFields.display_name.value;
	var email = inputFields.email.value;
<?php if($superadmin): ?>
	var password = inputFields.password.value;
<?php endif; ?>	

	var postData = {};
	postData.user_id = userId;
	postData.username = username;
	postData.display_name = displayName;
	postData.email = email;
<?php if($superadmin): ?>
	postData.password = password;
<?php endif; ?>

	var promise = ajaxPost("/api/edituser", postData);
	promise.success = function(response) {
		//TODO: instead of reload, update display section
		if(response.error) {
			errorMessage(response.error);
		} else {
			location.reload();
		}
	};

	promise.failure = function(response) {
		console.warn("Communication failure", response);
	};
}

function addDomainButton_click(event) {
	var userId = this.getAttribute("data-user");
	var inputFields = this.parentNode.getElementsByTagName("input");
	var subdomain = inputFields.subdomain.value;

	var postData = {"user_id": userId, "subdomain": subdomain};
	var promise = ajaxPost("/api/addusertoaccount", postData);
	promise.success = function(response) {
		location.reload();
	};

	promise.failure = function(response) {
		console.warn("Communication failure", response);
	};
}

function removeDomainButton_click(event) {

	var userId = this.getAttribute("data-user");
	var clientId = this.getAttribute("data-client");

	var postData = {"user_id": userId, "client_id": clientId};
	var promise = ajaxPost("/api/removeuserfromaccount", postData);
	promise.success = function(response) {
		location.reload();
	};

	promise.failure = function(response) {
		console.warn("Communication failure", response);
	};
}

function closeModal_click(event) {
	var overlay = document.getElementsByClassName("modal-overlay")[0];
	var popup = document.getElementsByClassName("modal-popup")[0];

	overlay.classList.remove("make-visible");
	popup.classList.remove("make-visible");
}
</script>
</html>