Load current configuration on "instance_config" view

css/base.php

@@ -40,6 +40,12 @@ body {
 .center { margin: auto }
 .wmax { width: 100vw }
 .hmax { height: 100vh }
+.w100 { width: 100% }
+.h100 { height: 100% }
+.card {
+	border-radius: .5em;
+	box-shadow: 0px 0px .5em #0000004f;
+}
 
 textarea {
 	max-width: -moz-available;
@@ -74,4 +80,22 @@ a {
 	height: 2.5em;
 }
 
+#window-instance_config {
+	background: #d7d7d7;
+}
+#window-instance_config #title {
+	margin-top: 0;
+}
+#window-instance_config form {
+	background: #fff;
+	padding: 2.5em 2em;
+}
+#window-instance_config form .item {
+	margin-bottom: 1em;
+}
+#window-instance_config form .item input[type="text"] {
+	padding: .5em;
+	margin-top: .4em;
+}
+
 </style>

index.php

@@ -14,7 +14,8 @@
 window.consts = {
 	'instance_config': {
 		'mastodon': {
-			'musthave': ['psql_host','psql_port','psql_db','psql_name','psql_pwd','redis_host','redis_port'],
+			'musthave': ['instance_url','psql_host','psql_port','psql_db',
+				'psql_username','psql_password','redis_host','redis_port','api_authkey'],
 		},
 	}
 };

js/base.php

@@ -42,10 +42,21 @@ var E = {
 		}
 	},
 	template: function(_id, cback) {
-		var tpl = E.elemid(_id+'-item').outerHTML;
+		var tpl = E.elemid(_id+'-item');
+		if (tpl !== null) {
+			tpl = tpl.outerHTML;
 			tpl = tpl.replace('id="'+_id+'-item"','class="item"');
 			tpl = tpl.replace('data-src=', 'src=');
-		E.elemid(_id).innerHTML = cback(tpl);
+		}
+		var elem = null;
+		elem = E.elemid(_id);
+		if (elem === null)
+			elem = E.element(_id);
+		if (elem === null)
+			return;
+		if (typeof cback === 'string')
+			elem.innerText = cback;
+		else elem.innerHTML = cback(tpl);
 	},
 };
 
@@ -123,6 +134,17 @@ function parse_hash_arguments(str,by) {
 	return args;
 }
 
+function human_field_name(str) {
+	str = ' '+str+' ';
+	return capitalize(
+		str.replaceAll('_', ' ')
+			.replaceAll(' api ',' API ')
+			.replaceAll(' db ',' DB ')
+			.replaceAll(' url ',' URL ')
+			.replaceAll(' psql ',' Postgres ')
+			.trim()
+	);
+}
 function capitalize(str) { return str[0].toUpperCase() + str.substring(1) }
 function printstack() { console.error(new Error().stack) }
 function uuidv4() {

views/instance_config.php

@@ -1,7 +1,32 @@
 <div class="flex hmax">
+	<form class="center card">
+		<h3 id="title"></h3>
+		<div id="config"></div>
+	</form>
+	<div id="config-item">
+		<label for="{field}">{placeholder}:</label>
+		<input id="config_{field}" name="{field}" class="w100"
+			placeholder="{field}" type="text"/>
+	</div>
 </div>
 
 <script>
+var autofill_fields = {
+	mastodon: function(hargs, config) {
+		const fields = window.consts['instance_config']['mastodon']['musthave'];
+		for (var i = 0; i < fields.length; i++) {
+			if (config[fields[i]] !== undefined)
+				E.elemid(`config_${fields[i]}`).value = config[fields[i]];
+		}
+		if (config['instance_url'] === undefined) {
+			http.get('api/v1/network/resolve-instance?hostname='+hargs['instance'],
+			{}, function(js) {
+				if (js['instance'] !== undefined)
+					E.elemid('config_instance_url').value = js['instance'];
+			});
+		}
+	},
+};
 function title__instance_config() {}
 function load__instance_config(args) {
 	const hargs = parse_hash_arguments(args[1]);
@@ -12,8 +37,21 @@ function load__instance_config(args) {
 	};
 
 	const _paint = function() {
-		console.log(window.vars['current_instance']);
-		console.log('TODO: handle UI and stuff here');
+		E.template('#window-instance_config #title',
+			capitalize(hargs['software']) + ` (${hargs['instance']})`);
+		E.template('config', function(TPL) {
+			var html = '';
+			const fields = window.consts['instance_config'][hargs['software']]['musthave'];
+			for (var i = 0; i < fields.length; i++) {
+				var tpl = TPL;
+				tpl = tpl.replaceAll('{field}',			fields[i]);
+				tpl = tpl.replaceAll('{placeholder}',	human_field_name(fields[i]));
+				html += tpl;
+			}
+			return html;
+		});
+		const config = parse_ini_config(window.vars['current_instance']['config']);
+		window.autofill_fields[hargs['software']](hargs, config);
 	};
 
 	const _main = function() {
@@ -37,8 +75,6 @@ function load__instance_config(args) {
 			return _error400();
 
 		apcontrol_title(`Config (${hargs['instance']})`);
-		const config = parse_ini_config(window.vars['current_instance']['config']);
-		console.log(config);
 		return _paint();
 	};