[locationinfo] Generate credentials in server-settings server side

There's no need to generate parameters server side that get passed to
the template engine which generates javascript code that generates
html snippets in the browser.
We now generate everything server side right away.

7 files changed, 181 insertions, 212 deletions

diff --git a/modules-available/locationinfo/inc/coursebackend.inc.php b/modules-available/locationinfo/inc/coursebackend.inc.php
index 3e95a170..447a5598 100644
--- a/modules-available/locationinfo/inc/coursebackend.inc.php
+++ b/modules-available/locationinfo/inc/coursebackend.inc.php
@@ -323,4 +323,43 @@ class BackendProperty {
 		$this->type = $type;
 		$this->default = $default;
 	}
+
+	/**
+	 * Initialize additional fields of this class that are only required
+	 * for rendering the server configuration dialog.
+	 *
+	 * @param string $backendId target backend id
+	 * @param mixed $current current value of this property.
+	 */
+	public function initForRender($current = null) {
+		if (is_array($this->type)) {
+			$this->template = 'dropdown';
+			$this->select_list = [];
+			foreach ($this->type as $item) {
+				$this->select_list[] = [
+					'option' => $item,
+					'active' => $item == $current,
+				];
+			}
+		} elseif ($this->type === 'bool') {
+			$this->template = $this->type;
+		} else {
+			$this->template = 'generic';
+		}
+		if ($this->type === 'string') {
+			$this->inputtype = 'text';
+		} elseif ($this->type === 'int') {
+			$this->inputtype = 'number';
+		} elseif ($this->type === 'password') {
+			$this->inputtype = Property::getPasswordFieldType();
+		}
+		$this->currentvalue = $current === null ? $this->default : $current;
+	}
+	public $inputtype;
+	public $template;
+	public $title;
+	public $helptext;
+	public $currentvalue;
+	public $select_list;
+	public $credentialsHtml;
 }
diff --git a/modules-available/locationinfo/page.inc.php b/modules-available/locationinfo/page.inc.php
index 209de473..eb50193e 100644
--- a/modules-available/locationinfo/page.inc.php
+++ b/modules-available/locationinfo/page.inc.php
@@ -123,10 +123,8 @@ class Page_LocationInfo extends Page
 		$tmptypeArray = $backend->getCredentialDefinitions();
 
 		$credentialsJson = array();
-		$counter = 0;
 		foreach ($tmptypeArray as $cred) {
-			$credentialsJson[$cred->property] = Request::post($counter);
-			$counter++;
+			$credentialsJson[$cred->property] = Request::post('prop-' . $cred->property);
 		}
 		$params = array(
 			'name' => $servername,
@@ -443,89 +441,43 @@ class Page_LocationInfo extends Page
 	 */
 	private function ajaxServerSettings($id)
 	{
-		$dbresult = Database::queryFirst('SELECT servername, servertype, credentials
+		$oldConfig = Database::queryFirst('SELECT servername, servertype, credentials
 				FROM `locationinfo_coursebackend` WHERE serverid = :id', array('id' => $id));
 
 		// Credentials stuff.
-		$dbcredentials = json_decode($dbresult['credentials'], true);
+		if ($oldConfig !== false) {
+			$oldCredentials = json_decode($oldConfig['credentials'], true);
+		} else {
+			$oldCredentials = array();
+		}
 
 		// Get a list of all the backend types.
 		$serverBackends = array();
 		$s_list = CourseBackend::getList();
 		foreach ($s_list as $s) {
-			$backend['typ'] = $s;
 			$backendInstance = CourseBackend::getInstance($s);
-			$backend['display'] = $backendInstance->getDisplayName();
-
-			if ($backend['typ'] == $dbresult['servertype']) {
-				$backend['active'] = true;
-			} else {
-				$backend['active'] = false;
-			}
-
-			$credentials = $backendInstance->getCredentialDefinitions();
-			$backend['credentials'] = array();
-
-			$counter = 0;
-			foreach ($credentials as $cred) {
-				$credential['uid'] = $counter;
-				$credential['name'] = Dictionary::translateFile($s, $cred->property, true);
-				$credential['type'] = $cred->type;
-				$credential['title'] = Dictionary::translateFile($s, $cred->property . "_title");
-
-				if (Property::getPasswordFieldType() === 'text') {
-					$credential['mask'] = false;
-				} else {
-					if ($cred->type === "password") {
-						$credential['mask'] = true;
-					}
-				}
-
-				if ($backend['typ'] == $dbresult['servertype'] && isset($dbcredentials[$cred->property])) {
-					$credential['value'] = $dbcredentials[$cred->property];
+			$backend = array(
+				'backendtype' => $s,
+				'display' => $backendInstance->getDisplayName(),
+				'active' => ($oldConfig !== false && $s === $oldConfig['servertype']),
+			);
+			$backend['credentials'] = $backendInstance->getCredentialDefinitions();
+			foreach ($backend['credentials'] as $cred) {
+				if ($backend['active'] && isset($oldCredentials[$cred->property])) {
+					$cred->initForRender($oldCredentials[$cred->property]);
 				} else {
-					$credential['value'] = $cred->default;
+					$cred->initForRender();
 				}
-
-				$selection = array();
-
-				if (is_array($cred->type)) {
-
-					$selfirst = true;
-					foreach ($cred->type as $opt) {
-						$option['option'] = $opt;
-						if (isset($credential['value'])) {
-							if ($opt == $credential['value']) {
-								$option['active'] = true;
-							} else {
-								$option['active'] = false;
-							}
-						} else {
-							if ($selfirst) {
-								$option['active'] = true;
-								$selfirst = false;
-							} else {
-								$option['active'] = false;
-							}
-						}
-
-						$selection[] = $option;
-					}
-					$credential['type'] = "array";
-					$credential['array'] = $selection;
-				}
-
-				$backend['credentials'][] = $credential;
-
-				$counter++;
+				$cred->title = Dictionary::translateFile('backend-' . $s, $cred->property, true);
+				$cred->helptext = Dictionary::translateFile('backend-' . $s, $cred->property . "_helptext");
+				$cred->credentialsHtml = Render::parse('server-prop-' . $cred->template, (array)$cred);
 			}
 			$serverBackends[] = $backend;
 		}
-
 		echo Render::parse('server-settings', array('id' => $id,
-			'name' => $dbresult['servername'],
-			'servertype' => $dbresult['servertype'],
-			'backendList' => array_values($serverBackends)));
+			'name' => $oldConfig['servername'],
+			'currentbackend' => $oldConfig['servertype'],
+			'backendList' => $serverBackends));
 	}
 
 	/**
diff --git a/modules-available/locationinfo/templates/location-info.html b/modules-available/locationinfo/templates/location-info.html
index c2242241..8af29df0 100644
--- a/modules-available/locationinfo/templates/location-info.html
+++ b/modules-available/locationinfo/templates/location-info.html
@@ -178,7 +178,6 @@
 	 */
 	function loadServerSettingsModal(serverid) {
 		$('#myModalHeader').text("{{lang_locationSettings}}").css("font-weight", "Bold");
-		$('#myModalSubmitButton').attr("form", "settingsForm");
 		$('#myModal .modal-dialog').css('width', '');
 		$('#myModal').modal('show');
 		$('#myModalBody').load("?do=locationinfo&action=serverSettings&id=" + serverid);
diff --git a/modules-available/locationinfo/templates/server-prop-bool.html b/modules-available/locationinfo/templates/server-prop-bool.html
new file mode 100644
index 00000000..f430d02c
--- /dev/null
+++ b/modules-available/locationinfo/templates/server-prop-bool.html
@@ -0,0 +1,16 @@
+<div class="list-group-item">
+	<div class="row">
+		<div class="col-md-3"><label for="prop-{{property}}">{{title}}</label></div>
+		<div class="col-md-7">
+			<input class="settings-bs-switch" id="prop-{{property}}" type="checkbox" name="prop-{{property}}" value="1"
+					 {{#currentvalue}}checked{{/currentvalue}}>
+		</div>
+		<div class="col-md-2">
+			{{#helptext}}
+				<a class="btn btn-default" title="{{helptext}}">
+					<span class="glyphicon glyphicon-question-sign"></span>
+				</a>
+			{{/helptext}}
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/modules-available/locationinfo/templates/server-prop-dropdown.html b/modules-available/locationinfo/templates/server-prop-dropdown.html
new file mode 100644
index 00000000..80667766
--- /dev/null
+++ b/modules-available/locationinfo/templates/server-prop-dropdown.html
@@ -0,0 +1,19 @@
+<div class="list-group-item">
+	<div class="row">
+		<div class="col-md-3"><label for="prop-{{property}}">{{title}}</label></div>
+		<div class="col-md-7">
+			<select class="form-control" id="prop-{{property}}" name="prop-{{property}}">
+				{{#select_list}}
+					<option {{#active}}selected{{/active}}>{{option}}</option>
+				{{/select_list}}
+			</select>
+		</div>
+		<div class="col-md-2">
+			{{#helptext}}
+				<a class="btn btn-default" title="{{helptext}}">
+					<span class="glyphicon glyphicon-question-sign"></span>
+				</a>
+			{{/helptext}}
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/modules-available/locationinfo/templates/server-prop-generic.html b/modules-available/locationinfo/templates/server-prop-generic.html
new file mode 100644
index 00000000..9e94c23d
--- /dev/null
+++ b/modules-available/locationinfo/templates/server-prop-generic.html
@@ -0,0 +1,16 @@
+<div class="list-group-item">
+	<div class="row">
+		<div class="col-md-3"><label for="prop-{{property}}">{{title}}</label></div>
+		<div class="col-md-7">
+			<input class="form-control" id="prop-{{property}}" type="{{inputtype}}" name="prop-{{property}}"
+					 value="{{currentvalue}}">
+		</div>
+		<div class="col-md-2">
+			{{#helptext}}
+				<a class="btn btn-default" title="{{helptext}}">
+					<span class="glyphicon glyphicon-question-sign"></span>
+				</a>
+			{{/helptext}}
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/modules-available/locationinfo/templates/server-settings.html b/modules-available/locationinfo/templates/server-settings.html
index 09b3870c..c9b713e6 100644
--- a/modules-available/locationinfo/templates/server-settings.html
+++ b/modules-available/locationinfo/templates/server-settings.html
@@ -1,163 +1,91 @@
-<div>
-	<form method="post" action="?do=locationinfo" id="settingsForm">
+<div class="panel panel-default">
+	<div class="panel-heading">{{lang_general}}</div>
+	<div class="panel-body">
+		<div class="list-group">
+			<div class="list-group-item">
+				<div class="row">
+					<div class="col-md-3">
+						<label>{{lang_entryName}}</label>
+					</div>
+					<div class="col-md-7">
+						<input required class="form-control" name="name" type="text" value="{{name}}" id="name-input"
+								 form="form-{{currentbackend}}">
+					</div>
+					<div class="col-md-2">
+						<a class="btn btn-default" title="{{lang_nameTooltip}}">
+							<span class="glyphicon glyphicon-question-sign"></span>
+						</a>
+					</div>
+				</div>
+			</div>
+			<div class="list-group-item">
+				<div class="row">
+					<div class="col-md-3">
+						<label>{{lang_serverType}}</label>
+					</div>
+					<div class="col-md-7">
+						<select class="form-control" onchange="servertype_changed(this.value)">
+							{{#backendList}}
+								<option value="{{backendtype}}" {{#active}}selected{{/active}}>{{display}}</option>
+							{{/backendList}}
+						</select>
+					</div>
+					<div class="col-md-2">
+						<a class="btn btn-default" id="help-type" title="{{lang_typeTooltip}}">
+							<span class="glyphicon glyphicon-question-sign"></span>
+						</a>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+
+{{#backendList}}
+<div id="formwrapper-{{backendtype}}" {{^active}}class="collapse"{{/active}}>
+	<form method="post" action="?do=locationinfo" id="form-{{backendtype}}">
 		<input type="hidden" name="token" value="{{token}}">
 		<input type="hidden" name="action" value="updateServerSettings">
 		<input type="hidden" name="id" value="{{id}}">
+		<input type="hidden" name="type" value="{{backendtype}}">
 
 
 		<div class="panel panel-default">
-			<div class="panel-heading">{{lang_general}}</div>
+			<div class="panel-heading">{{lang_credentials}}</div>
 			<div class="panel-body">
 				<div class="list-group">
-
-					<div class="list-group-item">
-						<div class="row">
-							<div class="col-md-3">
-								<label>{{lang_locationName}}</label>
-							</div>
-							<div class="col-md-7">
-								<input required class="form-control" id="input-name-{{id}}" name="name" type="text"
-										 value="{{name}}">
-							</div>
-							<div class="col-md-2">
-								<a class="btn btn-default" id="help-name" title="{{lang_nameTooltip}}">
-									<span class="glyphicon glyphicon-question-sign"></span>
-								</a>
-							</div>
-						</div>
-					</div>
-
-					<div class="list-group-item">
-						<div class="row">
-							<div class="col-md-3">
-								<label>{{lang_serverType}}</label>
-							</div>
-							<div class="col-md-7">
-								<select class="form-control" id="input-type-{{id}}" name="type" value="{{typ}}"
-										  onchange="servertype_changed(this.value);">
-									{{#backendList}}
-									<option id="{{typ}}" value="{{typ}}" {{#active}}selected{{/active}}>{{display}}
-									{{/backendList}}
-								</select>
-							</div>
-							<div class="col-md-2">
-								<a class="btn btn-default" id="help-type" title="{{lang_typeTooltip}}">
-									<span class="glyphicon glyphicon-question-sign"></span>
-								</a>
-							</div>
-						</div>
-					</div>
-
+					{{#credentials}}
+					{{{credentialsHtml}}}
+					{{/credentials}}
 				</div>
 			</div>
 		</div>
-
-		<div class="panel panel-default" id="credentials-div">
-			<div class="panel-heading">{{lang_credentials}}</div>
-			<div class="panel-body">
-				<div class="list-group" id="credentials-list"></div>
-			</div>
-		</div>
-		<div id="credentials" class="list-group"></div>
 	</form>
 </div>
+{{/backendList}}
 <script type="text/javascript">
-	var type = "{{servertype}}";
-	if (type == "") {
-		type = $('#input-type-{{id}}').val();
-	}
-
-	loadCredentials(true);
-	initalizeBootstrap();
-
-	/**
-	 * Initialize the bootstrap elements.
-	 */
-	function initalizeBootstrap() {
-		$('#help-name').tooltip();
-		$('#help-type').tooltip();
-	}
+	var currentBackend = "{{currentbackend}}";
 
 	/**
-	 * Loads the dynamic credentials forms.
+	 * Show proper form after switching backend type
 	 *
-	 * @param {bool} useValue If false the form elements will be empty. Default = true.
-	 */
-	function loadCredentials(useValue) {
-		// {{name}} name of auth {{type}} type of auth (string, int etc.) {{value}} value from the db
-		{{#backendList}}
-		if (type == "{{typ}}") {
-			{{#credentials}}
-			$('#credentials-div').fadeIn('fast');
-
-			if ("{{type}}" == "string") {
-				$("#credentials-list").append('<div class="list-group-item"><div class="row">\
-				<div class="col-md-3"><label>{{name}}</label></div>\
-				<div class="col-md-7">\
-				<input required class="form-control" id="input-{{uid}}" type="text" name="{{uid}}" value="{{value}}" form="settingsForm"></div>\
-				<div class="col-md-2"><a class="btn btn-default" id="help-{{uid}}" title="{{title}}"><span class="glyphicon glyphicon-question-sign"></span></a></div>\
-				</div></div>');
-			} else if ("{{type}}" == "int") {
-				$("#credentials-list").append('<div class="list-group-item"><div class="row">\
-				<div class="col-md-3"><label>{{name}}</label></div>\
-				<div class="col-md-7">\
-				<input required class="form-control" id="input-{{uid}}" type="number" name="{{uid}}" value="{{value}}" form="settingsForm"></div>\
-				<div class="col-md-2"><a class="btn btn-default" id="help-{{uid}}" title="{{title}}"><span class="glyphicon glyphicon-question-sign"></span></a></div>\
-				</div></div>');
-			} else if ("{{type}}" == "password") {
-				$("#credentials-list").append('<div class="list-group-item"><div class="row">\
-				<div class="col-md-3"><label>{{name}}</label></div>\
-				<div class="col-md-7">\
-				<input required class="form-control" id="input-{{uid}}" {{#mask}}type="password"{{/mask}}{{^mask}}type="text"{{/mask}} name="{{uid}}" value="{{value}}" form="settingsForm"></div>\
-				<div class="col-md-2"><a class="btn btn-default" id="help-{{uid}}" title="{{title}}"><span class="glyphicon glyphicon-question-sign"></span></a></div>\
-				</div></div>');
-			} else if ("{{type}}" == "bool") {
-				$("#credentials-list").append('<div class="list-group-item"><div class="row">\
-				<div class="col-md-3"><label>{{name}}</label></div>\
-				<div class="col-md-7">\
-				<input class="bs-switch" id="input-{{uid}}" type="checkbox" name="{{uid}}" value="true" form="settingsForm" {{#value}}checked{{/value}}></div>\
-				<div class="col-md-2"><a class="btn btn-default" id="help-{{uid}}" title="{{title}}"><span class="glyphicon glyphicon-question-sign"></span></a></div>\
-				</div></div>');
-				$('#input-{{uid}}').bootstrapSwitch({
-					size: "small"
-				});
-			} else if ("{{type}}" == "array") {
-				$("#credentials-list").append('<div class="list-group-item"><div class="row">\
-				<div class="col-md-3"><label>{{name}}</label></div>\
-				<div class="col-md-7">\
-				<select class="form-control" id="input-selection-{{uid}}" name="{{uid}}" form="settingsForm">\
-				{{#array}}\
-				<option value="{{option}}" {{#active}}selected{{/active}}>{{option}}</option>\
-				{{/array}}\
-				</select></div>\
-				<div class="col-md-2"><a class="btn btn-default" id="help-{{uid}}" title="{{title}}"><span class="glyphicon glyphicon-question-sign"></span></a></div>\
-				</div></div>');
-			}
-
-			$('#help-{{uid}}').tooltip();
-			if (!useValue) {
-				$('#input-{{uid}}').val("");
-			}
-			{{/credentials}}
-			{{^credentials}}
-			$('#credentials-div').hide();
-			{{/credentials}}
-		}
-		{{/backendList}}
-
-	}
-
-	/**
-	 * After the servertype switch changed, the new credentials needs to be loaded.
-	 *
-	 * @param {string} value The new type of the server which credentials needs to be loaded.
+	 * @param {string} value The new currentBackend of the server which credentials needs to be loaded.
 	 */
 	function servertype_changed(value) {
-		type = value;
-		$('#credentials-div').fadeOut('fast', function() {
-			$('#credentials-list').empty();
-			loadCredentials(false);
+		if (value === currentBackend)
+			return;
+		var newBackend = value;
+		console.log('From ' + currentBackend + ' to ' + value);
+		$('#formwrapper-' + currentBackend).fadeOut('fast', function() {
+			console.log('Fading in ' + newBackend);
+			$('#formwrapper-' + newBackend).fadeIn('fast');
+			$('#myModalSubmitButton, #name-input').attr('form', 'form-' + newBackend);
 		});
+		currentBackend = value;
 	}
 
+	$('a.btn[title]').tooltip();
+	$('#myModalSubmitButton').attr('form', 'form-' + currentBackend);
+	$('.settings-bs-switch').bootstrapSwitch({size:'small'});
+
 </script>