config: show loaded values on page

README.md

@@ -6,8 +6,8 @@ This will be a dashboard hosted on my homeserver with self-hosted stuff. But, fo
 
 #### Still to do before prod:
 
-- [ ] External config loaded with XHR (app list)
-- [ ] Apply config for the rest stuff (data shown in More page, default user settings)
+- [x] External config loaded with XHR (app list)
+- [x] Apply config for the rest stuff (data shown in More page, default user settings)
 - [ ] Make 'Security' module functional
 - [ ] Security screen on/off
 - [ ] CSS global color variables for easier theming

config/defaults.json

@@ -4,7 +4,7 @@
 		"desc": "Nice and sweet place for all your self-hosted services.",
 		"icon": "img/icon.png",
 		"wallpaper": "img/background.jpg",
-		"wallpaper_dark": "img/background_dark.jpg",
+		"wallpaper_dark": "img/background-dark.jpg",
 		"dark_mode": false,
 		"open_new_tab": false,
 		"hosted_by": "somebody",

index.html

@@ -19,9 +19,9 @@
 		<div class="page home hidden" id="page-home">
 			<div class="wrapper">
 				<div class="home">
-					<img src="img/icon.png" class="appicon">
-					<div class="appname">honey</div>
-					<div class="appdesc">Nice and sweet place for all your self-hosted services.</div>
+					<img class="appicon" id="app-icon">
+					<div class="appname" id="app-name"></div>
+					<div class="appdesc" id="app-desc"></div>
 				</div>
 				<div class="buttons">
 					<div onclick="switch_theme()">
@@ -73,9 +73,7 @@
 								<div class="text">6 out of 7 listed services use secure connections</div>
 							</div>
 						</div>
-						<div class="hostedby">
-							<div>All services hosted by <b>nobody</b></div>
-						</div>
+						<div class="hostedby">All services hosted by <b id="app-hostedby"></b></div>
 						<div class="boxes static">
 							<div class="box">
 								<div class="icon" style="--color: 144deg">lock</div>

js/dom.js

@@ -2,6 +2,10 @@ function get(id) {
 	return document.getElementById(id);
 }
 
+function set(id, text) {
+	get(id).innerText = text;
+}
+
 function get_class(class_name, parent) {
 	if (!parent) parent = document;
 	return parent.getElementsByClassName(class_name);
@@ -56,3 +60,14 @@ function config(key, value) {
 function get_bool(key) {
 	return config(key) == "true";
 }
+
+function load_config(conf) {
+	CONFIG = JSON.parse(conf);
+	let ui = CONFIG.ui;
+	set("app-name", ui.name);
+	set("app-desc", ui.desc);
+	get("app-icon").src = ui.icon;
+	if (ui.hosted_by) set("app-hostedby", ui.hosted_by);
+	else get("app-hostedby").parentNode.style.display = "none";
+	load_apps();
+}

js/main.js

@@ -2,12 +2,11 @@ function onload() {
 	let xhr = new XMLHttpRequest();
 	xhr.open("GET", "config/config.json");
 	xhr.onload = function() {
-		CONFIG = JSON.parse(this.responseText);
+		load_config(this.responseText);
 		for_all("back", (btn) => {
 			btn.onclick = show;
 		});
 		switch_theme(config("dark_mode") == "true");
-		load_apps();
 		setTimeout(() => {
 			show();
 			document.body.classList.remove("init");
@@ -41,13 +40,13 @@ function switch_theme(value) {
 		setting.classList.add("checked");
 		icon.innerText = "dark_mode";
 		bg.add("dark");
-		get_background().src = "img/background-dark.jpg";
+		get_background().src = CONFIG.ui.wallpaper_dark;
 	}
 	else {
 		setting.classList.remove("checked");
 		icon.innerText = "light_mode";
 		bg.remove("dark");
-		get_background().src = "img/background.jpg";
+		get_background().src = CONFIG.ui.wallpaper;
 	}
 }