pref-users edit: use client dialog

1 files changed, 80 insertions, 4 deletions

diff --git a/js/PrefUsers.js b/js/PrefUsers.js
index e5c281811..1fe4db150 100644
--- a/js/PrefUsers.js
+++ b/js/PrefUsers.js
@@ -1,7 +1,7 @@
 'use strict'
 
 /* global __  */
-/* global xhrPost, dojo, dijit, Notify, Tables, fox */
+/* global xhrPost, xhrJson, dojo, dijit, Notify, Tables, App, fox */
 
 const	Users = {
 	reload: function(sort) {
@@ -27,7 +27,10 @@ const	Users = {
 		}
 	},
 	edit: function(id) {
-		xhrPost('backend.php', {op: 'pref-users', method: 'edit', id: id}, (transport) => {
+		xhrJson('backend.php', {op: 'pref-users', method: 'edit', id: id}, (reply) => {
+			const user = reply.user;
+			const is_disabled = (user.id == 1) ? "disabled='disabled'" : '';
+
 			const dialog = new fox.SingleUseDialog({
 				id: "userEditDlg",
 				title: __("User Editor"),
@@ -35,13 +38,86 @@ const	Users = {
 					if (this.validate()) {
 						Notify.progress("Saving data...", true);
 
-						xhrPost("backend.php", dojo.formToObject("user_edit_form"), (/* transport */) => {
+						xhrPost("backend.php", this.attr('value'), () => {
 							dialog.hide();
 							Users.reload();
 						});
 					}
 				},
-				content: transport.responseText
+				content: `
+					<form onsubmit='return false'>
+
+						${App.FormFields.hidden('id', user.id.toString())}
+						${App.FormFields.hidden('op', 'pref-users')}
+						${App.FormFields.hidden('method', 'editSave')}
+
+						<div dojoType="dijit.layout.TabContainer" style="height : 400px">
+							<div dojoType="dijit.layout.ContentPane" title="${__('Edit user')}">
+
+								<header>${__("User")}</header>
+
+								<section>
+									<fieldset>
+										<label>${__("Login:")}</label>
+										<input style='font-size : 16px'
+											${is_disabled}
+											dojoType='dijit.form.ValidationTextBox' required='1'
+											name='login' value="${App.escapeHtml(user.login)}">
+
+										${is_disabled ? App.FormFields.hidden("login", user.login) : ''}
+									</fieldset>
+								</section>
+
+								<header>${__("Authentication")}</header>
+
+								<section>
+									<fieldset>
+										<label>${__('Access level: ')}</label>
+										${App.FormFields.select_hash("access_level",
+											user.access_level, reply.access_level_names, is_disabled)}
+
+										${is_disabled ? App.FormFields.hidden("access_level",
+											user.access_level.toString()) : ''}
+									</fieldset>
+									<fieldset>
+										<label>${__("New password:")}</label>
+										<input dojoType='dijit.form.TextBox' type='password' size='20'
+											placeholder='${__("Change password")}' name='password'>
+									</fieldset>
+								</section>
+
+								<header>${__("Options")}</header>
+
+								<section>
+									<fieldset>
+										<label>${__("E-mail:")}</label>
+										<input dojoType='dijit.form.TextBox' size='30' name='email'
+											value="${App.escapeHtml(user.email)}">
+									</fieldset>
+								</section>
+							</div>
+							<div dojoType="dijit.layout.ContentPane" title="${__('User details')}">
+								<script type='dojo/method' event='onShow' args='evt'>
+									if (this.domNode.querySelector('.loading')) {
+										xhrPost("backend.php", {op: 'pref-users', method: 'userdetails', id: ${user.id}}, (transport) => {
+											this.attr('content', transport.responseText);
+										});
+									}
+								</script>
+								<span class='loading'>${__("Loading, please wait...")}</span>
+							</div>
+						</div>
+
+						<footer>
+							<button dojoType='dijit.form.Button' class='alt-primary' type='submit' onclick='App.dialogOf(this).execute()'>
+								${__('Save')}
+							</button>
+							<button dojoType='dijit.form.Button' onclick='App.dialogOf(this).hide()'>
+								${__('Cancel')}
+							</button>
+						</footer>
+					</form>
+				`
 			});
 
 			dialog.show();