ctucx.git: mqtt-webui

webui.js: add option to disable mqtt authentication

diff --git a/src/webui.js b/src/webui.js
@@ -325,16 +325,28 @@ const scrollHandler = (event) => {
 window.addEventListener('hashchange', goToPage);
 window.addEventListener("scroll", scrollHandler);
 window.addEventListener('DOMContentLoaded', async (event) => {
-	const instanceId = localStorage.getItem('instanceId') ?? Math.random().toString(36).slice(2);
-	const username   = localStorage.getItem('username')   ?? prompt("userame:");
-	const password   = localStorage.getItem('password')   ?? prompt("password:");
-	const config     = await getConfig();
-	const topics     = new Set();
+	const config      = await getConfig();
+	const topics      = new Set();
+	const mqttUrl     = 'ws' + (location.protocol === 'https:' ? 's' : '') + '://' + location.hostname + ((location.port === '') ? '' : ':' + location.port) + '/mqtt';
+	const mqttOptions = {
+		clientId: localStorage.getItem('instanceId') ?? 'mqtt-webui_' + Math.random().toString(36).slice(2)
+	};
 
-	localStorage.setItem('instanceId', instanceId);
-	localStorage.setItem('username',   username);
-	localStorage.setItem('password',   password);
+	localStorage.setItem('instanceId', mqttOptions.clientId);
 
+	// create UI
+	render(renderPages(config), document.body);
+	document.getElementById("loading").style.display = 'none';
+	goToPage();
+
+	if (!config.disableAuth) {
+		mqttOptions.username = localStorage.getItem('username') ?? prompt("username:");
+		mqttOptions.password = localStorage.getItem('password') ?? prompt("password:");
+
+		localStorage.setItem('username',   mqttOptions.username);
+		localStorage.setItem('password',   mqttOptions.password);
+	}
+	
 	if (navigator.serviceWorker) {
 		navigator.serviceWorker.register('sw.js', {
 			scope: './'

@@ -353,38 +365,29 @@ window.addEventListener('DOMContentLoaded', async (event) => {
 		})
 	})
 
-	// create UI
-	render(renderPages(config), document.body);
-	document.getElementById("loading").style.display = 'none';
-	goToPage();
-
 	// MQTT
-	const mqttUrl = 'ws' + (location.protocol === 'https:' ? 's' : '') + '://' + location.hostname + ((location.port === '') ? '' : ':' + location.port) + '/mqtt';
-
 	console.log('MQTT conencting to', mqttUrl);
-	client = connect(mqttUrl, {
-		clientId: 'webui_' + instanceId,
-		username: username,
-		password: password
-	});
+	client = connect(mqttUrl, mqttOptions);
 
 	client.on('connect', () => {
-	    console.log('Connected to mqtt-server!')
+		console.log('Connected to mqtt-server!')
 		document.querySelectorAll('.connectionStatus').forEach((element) => element.innerHTML = connectedSvg);
 	});
 
 	client.on('reconnect', () => console.log('Trying reconnect to mqtt-server!'));
 
 	client.on('offline', () => {
-	    console.log('Disconnected from mqtt-server!')
+		console.log('Disconnected from mqtt-server!')
 		document.querySelectorAll('.connectionStatus').forEach((element) => element.innerHTML = disconnectedSvg);
 	});
 
 	client.on('error', (error) => {
 		if (error.message === 'Connection refused: Not authorized') {
 			alert('Authentication failed!');
-			localStorage.setItem('username', prompt('username:') ?? localStorage.getItem('username'));
-			localStorage.setItem('password', prompt('password:') ?? localStorage.getItem('password'));
+			if (!config.disableAuth) {
+				localStorage.setItem('username', prompt('username:') ?? localStorage.getItem('username'));
+				localStorage.setItem('password', prompt('password:') ?? localStorage.getItem('password'));
+			}
 		}
 
 		location.reload()

@@ -393,5 +396,4 @@ window.addEventListener('DOMContentLoaded', async (event) => {
 	client.on('message', onMessage);
 
 	client.subscribe([...topics])
-
 });