CopperWire
/
daktylos


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
							<html>
<?php include("header.php") ?>
<div class="sidebar">
	<button class="add-account-modal button"><i class="fa fa-plus"></i> Add New Account</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;">Subdomain</th>
			<th style="width: 120px;">Actions</th>
		</tr>
		<?php foreach($accounts as $account) : ?>
			<tr class="display-row">
				<td><?=$account['client_id']?></td>
				<td><?=$account['display_name']?></td>
				<td><?=$account['subdomain']?></td>
				<td><button class="edit button" data-client="<?=$account['client_id']?>">Edit</button></td>
			</tr>

			<tr class="edit-row">
				<td><?=$account['client_id']?></td>
				<td><input type="text" name="display_name" value="<?=$account['display_name']?>" /></td>
				<td><input type="text" name="subdomain" value="<?=$account['subdomain']?>" /></td>
				<td>
					<button class="save button" data-client="<?=$account['client_id']?>">Save</button>
					<button class="cancel button">Cancel</button>
				</td>
			</tr>
		<?php endforeach; ?>
	</table>
</div>

<div class="modal-overlay"></div>
<div class="modal-popup"><button class="modal-close">X</button>
	<h1>Add Account</h1>
	<hr />
	<div class="modal-message"></div>
	<form autocomplete="off">
		<div class="input-row centered"><input name="display_name" type="text" placeholder="display name" autocomplete="off" /></div>
		<div class="input-row centered"><input name="subdomain" type="text" placeholder="subdomain" 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-account">Add Account</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-account-modal")[0];
		addUserModalButton.addEventListener("click", addAccountModalButton_click);

		var addAccountButton = document.getElementsByClassName("add-account")[0];
		addAccountButton.addEventListener("click", addAccountButton_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 overlay = document.getElementsByClassName("modal-overlay")[0];
		overlay.addEventListener("click", closeModal_click);

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

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

	//TODO: clear the modal form

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

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

function addAccountButton_click(event) {
	event.preventDefault();
	var form = this.parentNode.parentNode;
	var inputFields = form.getElementsByTagName("input");
	var subdomain = inputFields.subdomain.value;
	var displayName = inputFields.display_name.value;

	if(!validateAddAccountFields(subdomain, displayName)) {	
		return;
	}

	var postData = {};
	postData.subdomain = subdomain;
	postData.display_name = displayName;

	var promise = ajaxPost("/api/addaccount", 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 validateAddAccountFields(subdomain, displayName) {
	var message = document.getElementsByClassName("modal-message")[0];

	re = new RegExp(/^((?:(?:(?:\w[\-\+]?)*)\w)+)((?:(?:(?:\w[\-\+]?){0,62})\w)+)$/); 
    if(subdomain.trim() != subdomain || encodeURIComponent(subdomain) != subdomain || !subdomain.match(re)) {
		message.innerHTML = "subdomain contains invalid characters";	
		return false;
    }

	if(subdomain == "admin") {
		message.innerHTML = "reserved subdomain";	
		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;
	}

	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 clientId = this.getAttribute("data-client");

 var inputFields = this.parentNode.parentNode.getElementsByTagName("input");
 console.log(this.parentNode.parentNode);
 var subdomain = inputFields.subdomain.value;
 var displayName = inputFields.display_name.value;

 var postData = {};
 postData.client_id = clientId;
 postData.subdomain = subdomain;
 postData.display_name = displayName;

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

	promise.failure = function(response) {
		console.warn("Communication failure", response);
	};
}
</script>
</html>