changes, fixes

Dockerfile

@@ -69,17 +69,12 @@ RUN apk --no-cache add php${PHP_VERSION} \
     rm -rf /var/cache/apk/*
 
 COPY nginx.conf /etc/nginx/nginx.conf
-
 RUN mkdir -p /usr/share/nginx/html
-COPY index.html    /usr/share/nginx/html
-COPY scan.html   /usr/share/nginx/html
-COPY manage.html   /usr/share/nginx/html
-COPY scan.php   /usr/share/nginx/html
-COPY letsencrypt_log.php   /usr/share/nginx/html
-COPY functions.php   /usr/share/nginx/html
-COPY install.html  /usr/share/nginx/html
-COPY install.php   /usr/share/nginx/html
-COPY installer.css /usr/share/nginx/html
+COPY *.html    /usr/share/nginx/html
+COPY *.php   /usr/share/nginx/html
+COPY *.css /usr/share/nginx/html
+COPY *.js /usr/share/nginx/html
+COPY img /usr/share/nginx/html/img
 RUN chown -R nginx:nginx /usr/share/nginx/html
 
 RUN mkdir -p /usr/share/nginx/html/shared

common.js

@@ -0,0 +1,580 @@
+function check_deployments() {
+  var url  = 'scan.php?op=check_deployments';
+  jQuery.get(url, function(data) {
+      console.log('check_deployments: '+data);
+      if (data=="WAIT" || data=="") {
+	  setTimeout(check_deployments, 1000);
+      }
+      else {
+	// manage2
+	apps.length = 0; // reset
+	apps.push(...JSON.parse(data)); // push each element
+	console.log(apps);
+	document.getElementById('installAppsBtn').click();
+
+	// manage
+	html_data = '';
+	data = jQuery.parseJSON(data);
+	for (var k in data) {
+		console.log(data[k]);
+		service_name = data[k].name;
+		orig_service_name = data[k].orig_name;
+		version = data[k].version;
+		subtitle = data[k].subtitle;
+		installed = data[k].installed;
+		if (installed=='true') {
+			html_data += '<div><a href="#" onclick="reinstall(\''+service_name+'\',\''+service_name+'\')">'+orig_service_name+'</a> - '+version+' - INSTALLED</div>';
+		}
+		else {
+			html_data += '<div><a href="#" onclick="load_template(\''+service_name+'\',\''+service_name+'\')">'+orig_service_name+'</a> - '+version+'</div>';
+		}
+		html_data += '<div id="'+service_name+'" class="deployment"></div>';
+	}
+	jQuery("#deployments").html(html_data);
+
+      }
+  });
+}
+
+function get_deployments() {
+  var url  = 'scan.php?op=deployments';
+  jQuery.get(url, function(data) {
+  	console.log('deployments: '+data);
+	if (data=="OK") {
+      		setTimeout(check_deployments, 1000);
+	}
+	else jQuery("#deployments").html(data);
+  });
+}
+
+function check_system() {
+  var url  = 'scan.php?op=check_system&services=1';
+  jQuery.get(url, function(data) {
+    console.log('check_system: '+data);
+      if (data=="WAIT" || data=="") {
+        setTimeout(check_system, 1000);
+      }
+      else {
+        jQuery("#system").html(data);
+      }
+  });
+}
+
+function get_system() {
+  var url  = 'scan.php?op=system';
+  jQuery.get(url, function(data) {
+    console.log('system: '+data);
+	  if (data=="OK") {
+      		setTimeout(check_system, 1000);
+	  }
+	  else alert(data);
+  });
+}
+
+function check_repositories() {
+  var url  = 'scan.php?op=check_repositories';
+  jQuery.get(url, function(data) {
+      console.log('check_repositories: '+data);
+      if (data=="WAIT" || data=="") {
+		setTimeout(check_repositories, 500);
+      }
+      else {
+		jQuery("#repositories").html(data);
+      }
+  });
+}
+
+function get_repositories() {
+  var url  = 'scan.php?op=repositories';
+  jQuery.get(url, function(data) {
+	console.log('repositories: '+data);
+	if (data=="OK") {
+		setTimeout(check_repositories, 500);
+		//get_deployments();
+	}
+	else alert(data);
+  });
+}
+
+function add_repository() {
+  var url  = 'scan.php?op=add_repository&repo='+jQuery('#repository').val();
+  jQuery.get(url, function(data) {
+	console.log('add_repository: '+data);
+	  if (data=="OK") {
+	  }
+	get_repositories();
+  });
+}
+
+function check_vpn() {
+  var url  = 'scan.php?op=check_vpn';
+  jQuery.get(url, function(data) {
+        console.log('check_vpn: '+data);
+        if (data=="1") { // save_vpn has finished
+	  const vpn_div = document.getElementById("vpn");
+	  console.log(vpn_div);
+	  if (vpn_div) {
+	  	vpn_div.innerHTML = 'VPN start process has finished';
+		//document.getElementById('installAppsBtn').click();
+	  }
+	}
+	else if (data=="2") {
+		document.getElementById('vpnToggle').checked = true;
+  		document.querySelector(".switch-label").textContent = "ON";
+          $('#vpn_off').hide();
+          $('#vpn_on').show();
+          $('#pro_off').hide();
+          $('#pro_on').show();
+        }
+        else {
+		document.getElementById('vpnToggle').checked = false;
+  		document.querySelector(".switch-label").textContent = "OFF";
+          $('#vpn_on').hide();
+          $('#vpn_off').show();
+          $('#pro_on').hide();
+          $('#pro_off').show();
+        }
+        setTimeout(check_vpn, 10000);
+  });
+}
+
+function save_vpn() {
+  var url  = 'scan.php?op=save_vpn&vpn_domain='+jQuery('#vpn_domain').val()+'&vpn_pass='+jQuery('#vpn_pass').val()+'&letsencrypt_mail='+jQuery('#letsencrypt_mail').val()+'&letsencrypt_servername='+jQuery('#letsencrypt_servername').val();
+
+  jQuery.get(url, function(data) {
+	console.log('save_vpn: '+data);
+	  if (data=="OK") {
+		check_vpn();
+	  }
+	//get_vpn();
+  });
+}
+
+function check_updates() {
+  var url  = 'scan.php?op=check_updates';
+  jQuery.get(url, function(data) {
+	console.log('check_updates: '+data);
+      if (data=="WAIT" || data=="") {
+        setTimeout(check_updates, 1000);
+      }
+      else {
+        jQuery("#updates").html(data);
+      }
+  });
+}
+
+function get_updates() {
+  var url  = 'scan.php?op=updates';
+  jQuery.get(url, function(data) {
+	console.log('updates: '+data);
+	  if (data=="ERROR") {
+        	jQuery("#updates").html('Searching for updates is in progress...');
+	  }
+      	setTimeout(check_updates, 1000);
+  });
+}
+
+function check_upgrade(service) {
+  var url  = 'scan.php?op=check_upgrade&service='+service;
+  jQuery.get(url, function(data) {
+        console.log('check_upgrade '+service+': '+data);
+      if (data!="") {
+              jQuery("#status_"+service).html(data);
+      }
+      if (data!="OK") {
+              setTimeout(check_upgrade, 1000, service);
+      }
+      else {
+          console.log('upgrade end: '+service);
+	  jQuery("#status_"+service).html('Upgrade has finished');
+	  //get_updates();
+      }
+  });
+
+}
+
+function upgrade(service) {
+  var url  = 'scan.php?op=upgrade&service='+service;
+  jQuery("#status_"+service).html('Upgrade has started');
+  console.log('upgrade start: '+service);
+  jQuery.get(url, function(data) {
+          console.log('check_upgrade '+service+': '+data);
+          if (data=="OK") {
+                setTimeout(check_upgrade, 1000, service);
+          }
+	  else jQuery("#status_"+service).html(data);
+  });
+}
+
+function load_template(additional, block) {
+
+  jQuery("div.deployment").each(function(index) {
+        $(this).html('');
+  });
+  jQuery("#"+block).html('Loading '+additional+' template...');
+  var url  = 'scan.php?op=deployment&additional='+additional;
+  jQuery.get(url, function(data) {
+	console.log('load_template: '+data);
+	  if (data=="OK") {
+      		setTimeout(check_deployment, 1000, additional);
+	  }
+  });
+}
+
+function check_reinstall(additional) {
+  var url  = 'scan.php?op=check_reinstall';
+  jQuery.get(url, function(data) {
+	console.log('check_reinstall: '+data);
+      if (data!="") {
+	      jQuery("#"+additional).html(data);
+	      jQuery("#popupText").html(data); // manage2
+      }
+      else setTimeout(check_reinstall, 1000, additional);
+  });
+}
+
+function reinstall(additional, block) {
+  jQuery("div.deployment").each(function(index) {
+        $(this).html('');
+  });
+  jQuery("#"+block).html('Loading '+additional+' template...');
+  var url  = 'scan.php?op=reinstall&additional='+additional;
+  jQuery.get(url, function(data) {
+	console.log('reinstall '+additional+': '+data);
+	  if (data=="OK") {
+      		setTimeout(check_reinstall, 1000, additional);
+	  }
+  });
+}
+
+function check_uninstall(additional) {
+  var url  = 'scan.php?op=check_uninstall&additional='+additional;
+  jQuery.get(url, function(data) {
+        console.log('check_uninstall '+additional+': '+data);
+      if (data!="") {
+              jQuery("#"+additional).html(data);
+	      jQuery("#popupText").html(data); // manage2
+      }
+      if (data!="OK") {
+              setTimeout(check_uninstall, 1000, additional);
+      }
+      else {
+	  jQuery("#popupText").html('Uninstall has finished'); // manage2
+	  jQuery("#"+additional).html('Uninstall has finished');
+	  get_deployments();
+      }
+  });
+}
+
+function uninstall(additional) {
+
+  jQuery("div.deployment").each(function(index) {
+        $(this).html('');
+  });
+	data = '<fieldset><form action="#" method="post"><div class="row">YOU ARE GOING TO UNINSTALL '+additional.toUpperCase()+'.<br>ARE YOU SURE? IF YES, PLEASE CLICK ON THE BUTTON BELOW.<br><br></div><div class="row"><div class="mb-3"><button class="btn btn-lg btn-primary btn-block" type="button" onclick="confirm_uninstall(\''+additional+'\')">Uninstall</button></div></div></form></fieldset>';
+	jQuery("#"+additional).html(data);
+	jQuery("#popupText").html(data); // manage2
+}
+
+function confirm_uninstall(additional) {
+  jQuery("#"+additional).html('Loading...');
+  jQuery("#popupText").html('Loading'); // manage2
+  var url  = 'scan.php?op=uninstall&additional='+additional;
+  jQuery.get(url, function(data) {
+        console.log('uninstall '+additional+': '+data);
+          if (data!="") {
+                jQuery("#"+additional).html(data);
+	        jQuery("#popupText").html(data); // manage2
+                setTimeout(check_uninstall, 1000, additional);
+          }
+  });
+}
+
+function update_deployment(additional) {
+  //jQuery("#"+additional).html('Loading...');
+  pars = '';
+  jQuery('input.additional_'+additional).each(function(index) {
+	console.log('Field ' + $(this).attr('name') + ': ' + $(this).val());
+	//pars += '&'+$(this).attr('id') + '=' + $(this).val();
+	pars += '&'+$(this).attr('name') + '=' + $(this).val();
+  });
+  //console.log(pars);
+  var url  = 'scan.php?op=edit&additional='+additional+pars;
+  jQuery.get(url, function(data) {
+        console.log('edit '+additional+': '+data);
+          if (data!="") {
+                jQuery("#"+additional).html(data);
+	        jQuery("#popupText").html(data); // manage2
+                setTimeout(check_deployment, 1000, additional);
+          }
+  });
+}
+
+function request_letsencrypt(domain) {
+  var url  = 'scan.php?op=request_letsencrypt&domain='+domain;
+  jQuery.get(url, function(data) {
+      console.log('letsencrypt '+domain);
+      if (data!="") {
+          jQuery("#letsencrypt").html(data);
+      }
+      setTimeout(check_letsencrypt, 2000, domain);
+  });
+}
+
+function check_letsencrypt(domain) {
+  var url  = 'scan.php?op=check_letsencrypt&domain='+domain;
+  jQuery.get(url, function(data) {
+      console.log('check_letsencrypt '+domain);
+      if (data!="") {
+          jQuery("#letsencrypt").html(data);
+      }
+      //setTimeout(check_letsencrypt, 1500, domain);
+  });
+}
+
+function check_deployment(additional) {
+  var url  = 'scan.php?op=check_deployment&additional='+additional;
+  jQuery.get(url, function(data) {
+      console.log('check_deployment '+additional);
+      console.log('check_deployment data: '+data);
+      if (data!="") {
+	      jQuery("#"+additional).html(data);
+	      jQuery("#popupText").html(data); // manage2
+      }
+      else setTimeout(check_deployment, 1000, additional);
+  });
+}
+
+function deploy(additional) {
+  pars = '';
+  jQuery('input.additional_'+additional).each(function(index) {
+	console.log('Field ' + $(this).attr('name') + ': ' + $(this).val());
+	//pars += '&'+$(this).attr('id') + '=' + $(this).val();
+	pars += '&'+$(this).attr('name') + '=' + $(this).val();
+  });
+  //console.log(pars);
+  var url  = 'scan.php?op=deploy&additional='+additional+pars;
+  jQuery.get(url, function(data) {
+	console.log('deploy '+additional+': '+data);
+	  if (data!="") {
+	        jQuery("#"+additional).html(data);
+	        jQuery("#popupText").html(data); // manage2
+      		setTimeout(check_deployment, 1000, additional);
+	  }
+  });
+}
+
+function redeploy(additional) {
+  pars = '';
+  jQuery('input.additional_'+additional).each(function(index) {
+	console.log('Field ' + $(this).attr('name') + ': ' + $(this).val());
+	//pars += '&'+$(this).attr('id') + '=' + $(this).val();
+	pars += '&'+$(this).attr('name') + '=' + $(this).val();
+  });
+  //console.log(pars);
+  var url  = 'scan.php?op=redeploy&additional='+additional+pars;
+  jQuery.get(url, function(data) {
+	console.log('redeploy '+additional+': '+data);
+	  if (data!="") {
+	        jQuery("#"+additional).html(data);
+		jQuery("#popupText").html(data); // manage2
+      		setTimeout(check_deployment, 1000, additional);
+	  }
+  });
+}
+
+function check_services() {
+  var url  = 'scan.php?op=check_services';
+  jQuery.get(url, function(data) {
+	console.log('check_services: '+data);
+      if (data=="WAIT" || data=="") {
+        setTimeout(check_services, 1000);
+      }
+      else {
+	jQuery("#services").html(data);
+      }
+  });
+}
+
+function get_services() {
+  var url  = 'scan.php?op=services';
+  jQuery.get(url, function(data) {
+	console.log('services: '+data);
+  	setTimeout(check_services, 1000);
+  });
+}
+
+function get_proxy_html() {
+        proxy_html = `
+	<fieldset>
+	<legend>Enable proxy</legend>
+        <div class="input-group">
+	<form class="form-install" action="#" method="post" id="save_vpn">
+		<div class="row">
+		    <div class="mb-3">
+				<label for="vpn_domain">Please add domain url to download the VPN hash from (default: https://portal.safebox.network):</label>
+				<input type="text" class="form-control" name="VPN_DOMAIN" id="vpn_domain" value="https://portal.safebox.network">
+				<div class="invalid-feedback">
+				Please enter a valid domain.
+				</div>
+		    </div>
+		</div>
+		<div class="row">
+		    <div class="mb-3">
+				<label for="vpn_pass">Please type in the generated VPN passkey (8 digits):</label>
+				<input type="text" class="form-control" name="VPN_PASS" id="vpn_pass" value="" maxlength="8" size="10">
+		    </div>
+		</div>
+		<div class="row">
+		    <div class="mb-3">
+				<label for="letsencrypt_mail">Please add the letsencrypt mail address:</label>
+				<input type="email" class="form-control" name="LETSENCRYPT_MAIL" id="letsencrypt_mail" value="">
+				<div class="invalid-feedback">
+				Please enter a valid email.
+				</div>
+		    </div>
+		</div>
+		<div class="row">
+		    <div class="mb-3">
+				<label for="letsencrypt_servername">Please add letsencrypt server name (default is letsencrypt but you can add zerossl too):</label>
+				<input type="text" class="form-control" name="LETSENCRYPT_SERVERNAME" id="letsencrypt_servername" value="letsencrypt">
+		    </div>
+		</div>
+		<div class="row buttons">
+		    <div class="mb-3">
+			<button class="btn btn-lg btn-primary btn-block" type="button" id="vpn_save_btn"> Save </button>
+		    </div>
+		</div>
+	</form>
+	</div>
+	</fieldset>
+	<script>
+	jQuery('#vpn_save_btn').click(function() {
+		console.log('vpn save');
+		save_vpn();
+		jQuery('#vpn').html('VPN start process in progress. Please wait...');
+	});
+	</script>
+        `;
+	jQuery("#vpn").html(proxy_html);
+}
+
+function check_containers() {
+  var url  = 'scan.php?op=check_containers';
+  jQuery.get(url, function(data) {
+	console.log('check_containers: '+data);
+      if (data!="") {
+	      jQuery("#containers").html(data);
+      }
+      else setTimeout(check_containers, 1000);
+  });
+}
+
+function get_containers() {
+  var url  = 'scan.php?op=containers';
+  jQuery.get(url, function(data) {
+	console.log('containers: '+data);
+	  if (data=="OK") {
+      		setTimeout(check_containers, 1000);
+	  }
+  });
+}
+
+jQuery(document).ready(function(){
+
+	get_repositories();
+	get_deployments();
+	get_system();
+	check_vpn();
+
+	jQuery('#deployments_btn').click(function() {
+		jQuery('#services').hide();
+		jQuery('#deployments').toggle();
+	});
+
+	jQuery('#services_btn').click(function() {
+		get_services();
+		jQuery('#deployments').hide();
+		jQuery('#services').toggle();
+	});
+
+	jQuery('#settings_btn').click(function() {
+		jQuery('#settings').toggle();
+		jQuery('#default').toggle();
+		jQuery('#vpn').hide();
+	});
+
+	jQuery('#vpn_btn').click(function() {
+		jQuery('#vpn').toggle();
+		jQuery('#settings').hide();
+	});
+
+	jQuery('#vpn_cancel_btn').click(function() {
+		jQuery('#vpn').hide();
+	});
+
+	jQuery('#update_btn').click(function() {
+		jQuery('#updates').html('Looking for updates... Please wait...');
+		get_updates();
+	});
+
+	jQuery('#add_repo').submit(function() {
+		jQuery('#repositories').html('Loading...');
+		add_repository();
+		return false;
+	});
+
+	jQuery('#save_vpn').submit(function() {
+		save_vpn();
+		jQuery('#vpn').html('Loading...');
+		return false;
+	});
+
+	jQuery('select#smarthost').click(function() {
+		if (jQuery(this).val()=='yes') jQuery('#div_smarthost').show();
+		else jQuery('#div_smarthost').hide();
+
+		if (jQuery("#smarthost").val()=='no' && jQuery("#localproxy").val()=='yes') {
+			alert("Warning! Local proxy will not work without smarthost proxy service.");
+		}
+	});
+	jQuery('select#vpn').click(function() {
+		if (jQuery(this).val()=='yes') jQuery('#div_vpn').show();
+		else jQuery('#div_vpn').hide();
+	});
+/*
+	jQuery('select#discovery').click(function() {
+		if (jQuery(this).val()=='yes') jQuery('#div_discover').show();
+		else jQuery('#div_discover').hide();
+	});
+	jQuery('select#additionals').click(function() {
+		if (jQuery(this).val()=='yes') jQuery('#div_additionals').show();
+		else jQuery('#div_additionals').hide();
+	});
+	jQuery('select#nextcloud').click(function() {
+		if (jQuery(this).val()=='Y') jQuery('#div_nextcloud').show();
+		else jQuery('#div_nextcloud').hide();
+	});
+	jQuery('select#bitwarden').click(function() {
+		if (jQuery(this).val()=='Y') jQuery('#div_bitwarden').show();
+		else jQuery('#div_bitwarden').hide();
+	});
+	jQuery('select#bitwarden_smtp').click(function() {
+		if (jQuery(this).val()=='3') jQuery('#div_bitwarden_smtp').show();
+		else jQuery('#div_bitwarden_smtp').hide();
+	});
+	jQuery('select#guacamole').click(function() {
+		if (jQuery(this).val()=='Y') jQuery('#div_guacamole').show();
+		else jQuery('#div_guacamole').hide();
+	});
+	jQuery('select#smtp_server').click(function() {
+		if (jQuery(this).val()=='Y') jQuery('#div_smtp_server').show();
+		else jQuery('#div_smtp_server').hide();
+	});
+	jQuery('select#roundcube').click(function() {
+		if (jQuery(this).val()=='Y') jQuery('#div_roundcube').show();
+		else jQuery('#div_roundcube').hide();
+	});
+*/
+});
+

functions.php

@@ -140,28 +140,41 @@ function show_service($name, $containers) {
 	echo $str;
 }
 
-function show_service_update($name, $update, $uptodate) {
-	$str = '<table id="update_'.$name.'">';
-	$str .= "<tr><th>{$name}</th></tr>";
+function show_service_update($name, $update, $uptodate, $error) {
 
+	$str = "";
 	$update = trim($update);
 	if (!empty($update)) {
 		$arr = explode(" ",$update);
 		foreach ($arr as $container) {
-			$str .= "<tr><td>&nbsp;</td><td>".$container."</td><td>UPDATE AVAILABLE</td><td><a href=\"#\" onclick=\"upgrade('{$name}')\">UPDATE</a></td></tr>";
+			$str .= "<tr><td>&nbsp;</td><td>".$container."</td><td><div id=\"status_".$name."\">UPDATE AVAILABLE</div></td><td>&nbsp;</td></tr>";
 		}
+		$update_str = "<a href=\"javascript:void(0)\" onclick=\"upgrade('{$name}')\">UPDATE</a>";
 	}
 
 	$uptodate = trim($uptodate);
 	if (!empty($uptodate)) {
 		$arr = explode(" ",$uptodate);
 		foreach ($arr as $container) {
-			$str .= "<tr><td>&nbsp;</td><td>".$container."</td><td>Already up to date</td><td></td></tr>";
+			$str .= "<tr><td>&nbsp;</td><td>".$container."</td><td><div id=\"status_".$name."\">Already up to date</div></td><td>&nbsp;</td></tr>";
 		}
+		$update_str = "<a href=\"javacript:void(0)\" onclick=\"upgrade('{$name}')\">FORCE UPDATE</a>";
 	}
-	$str .= '</table>';
 
+        $error = trim($error);
+        if (!empty($error)) {
+                $arr = explode(" ",$error);
+                foreach ($arr as $container) {
+                        //$str .= "<tr><td>&nbsp;</td><td>".$container."</td><td>N/A</td><td></td></tr>";
+                        $str .= "<tr><td>&nbsp;</td><td>".$container."</td><td><div id=\"status_".$name."\">N/A</div></td><td>&nbsp;</td></tr>";
+                }
+		$update_str = "<a href=\"javascript:void(0)\" onclick=\"upgrade('{$name}')\">TRY UPDATE</a>";
+        }
+
+	echo '<table id="update_'.$name.'">';
+	echo "<tr><th>{$name}</th><th>&nbsp;</th><th>&nbsp;</th><th>{$update_str}</th></tr>";
 	echo $str;
+	echo '</table>';
 }
 
 // not in use
@@ -267,7 +280,8 @@ function set_output($op,$output) {
 		redis_set($op,$output);
 	}
 	else {
-		file_put_contents($SHARED_DIR."/input/".$op.".json",$output);
+		if (file_exists($SHARED_DIR."/input/".$op.".json")) return false;
+		else file_put_contents($SHARED_DIR."/input/".$op.".json",$output);
 	}
 
 	return true;
@@ -294,6 +308,18 @@ function check_files($dir,$key) {
 	return $result;
 }
 
+function show_letsencrypt($letsencrypt, $domain) {
+	if (!empty($letsencrypt[$domain])) {
+		echo "LETSENCRYPT: ".$letsencrypt[$domain]["status"]." - ".$letsencrypt[$domain]["date"];
+		echo " - <a href=\"letsencrypt_log.php?domain={$domain}\" target=\"_blank\">LOG</a>";
+		if (date("Y-m-d",time()-60*24*3600)>substr($letsencrypt[$domain]["date"],0,10) || $letsencrypt[$domain]["status"]=="failed") {
+			echo " - <a href=\"#\" onclick=\"request_letsencrypt('{$domain}')\">Request new certificate</a>";
+		}
+		echo "<br><br>";
+	}
+	else echo "LETSENCRYPT in progress for {$domain}.<script>check_letsencrypt('{$domain}')</script>";
+}
+
 function check_letsencrypt() {
 
 	global $SHARED_DIR;
@@ -303,8 +329,7 @@ function check_letsencrypt() {
 		$json_data = file_get_contents($input_file);
 		$data = json_decode($json_data,true);
 		if ($data === null) {
-			echo "JSON read error...";
-			// TODO json error
+			return "ERROR";
 		}
 		else {
                         foreach ($data as $domain => $domain_data) {
@@ -354,7 +379,7 @@ function remove_response($key) {
 	}
 	else {
 		copy($SHARED_DIR."/output/".$key.".json",$SHARED_DIR."/".$key.".json"); // DEBUG - last json
-		unlink($SHARED_DIR."/output/".$key.".json");
+		if (!unlink($SHARED_DIR."/output/".$key.".json")) echo "UNLINK ERROR";
 	}	
 }
 

img/apps1.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.9998 13.2999C11.8698 13.2999 11.7398 13.2699 11.6198 13.1999L2.78985 8.0899C2.42985 7.8799 2.30983 7.41987 2.51983 7.05987C2.72983 6.69987 3.17983 6.57985 3.54983 6.78985L11.9998 11.6799L20.3998 6.81988C20.7598 6.60988 21.2198 6.7399 21.4298 7.0899C21.6398 7.4499 21.5098 7.90987 21.1598 8.11987L12.3899 13.1999C12.2599 13.2599 12.1298 13.2999 11.9998 13.2999Z" fill="#7C7D81"/>
+<path d="M12 22.36C11.59 22.36 11.25 22.02 11.25 21.61V12.54C11.25 12.13 11.59 11.79 12 11.79C12.41 11.79 12.75 12.13 12.75 12.54V21.61C12.75 22.02 12.41 22.36 12 22.36Z" fill="#7C7D81"/>
+<path d="M12.0001 22.75C11.1201 22.75 10.2501 22.56 9.56012 22.18L4.22012 19.21C2.77012 18.41 1.64014 16.48 1.64014 14.82V9.16998C1.64014 7.50998 2.77012 5.59002 4.22012 4.78002L9.56012 1.82C10.9301 1.06 13.0701 1.06 14.4401 1.82L19.7801 4.78997C21.2301 5.58997 22.3601 7.51999 22.3601 9.17999V14.83C22.3601 16.49 21.2301 18.41 19.7801 19.22L14.4401 22.18C13.7501 22.56 12.8801 22.75 12.0001 22.75ZM12.0001 2.74999C11.3701 2.74999 10.7501 2.88 10.2901 3.13L4.95013 6.09997C3.99013 6.63997 3.14014 8.06999 3.14014 9.17999V14.83C3.14014 15.93 3.99013 17.37 4.95013 17.91L10.2901 20.88C11.2001 21.39 12.8001 21.39 13.7101 20.88L19.0501 17.91C20.0101 17.37 20.8601 15.94 20.8601 14.83V9.17999C20.8601 8.07999 20.0101 6.63997 19.0501 6.09997L13.7101 3.13C13.2501 2.88 12.6301 2.74999 12.0001 2.74999Z" fill="#7C7D81"/>
+<path d="M17.0002 13.9905C16.5902 13.9905 16.2502 13.6505 16.2502 13.2405V10.0206L7.13018 4.76055C6.77018 4.55055 6.65016 4.09054 6.86016 3.74054C7.07016 3.38054 7.52018 3.26052 7.88018 3.47052L17.3702 8.95056C17.6002 9.08056 17.7502 9.33052 17.7502 9.60052V13.2606C17.7502 13.6506 17.4102 13.9905 17.0002 13.9905Z" fill="#7C7D81"/>
+</svg>

img/apps2.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.9998 13.2999C11.8698 13.2999 11.7398 13.2699 11.6198 13.1999L2.78985 8.0899C2.42985 7.8799 2.30983 7.41987 2.51983 7.05987C2.72983 6.69987 3.17983 6.57985 3.54983 6.78985L11.9998 11.6799L20.3998 6.81988C20.7598 6.60988 21.2198 6.7399 21.4298 7.0899C21.6398 7.4499 21.5098 7.90987 21.1598 8.11987L12.3899 13.1999C12.2599 13.2599 12.1298 13.2999 11.9998 13.2999Z" fill="#101010"/>
+<path d="M12 22.36C11.59 22.36 11.25 22.02 11.25 21.61V12.54C11.25 12.13 11.59 11.79 12 11.79C12.41 11.79 12.75 12.13 12.75 12.54V21.61C12.75 22.02 12.41 22.36 12 22.36Z" fill="#101010"/>
+<path d="M12.0001 22.75C11.1201 22.75 10.2501 22.56 9.56012 22.18L4.22012 19.21C2.77012 18.41 1.64014 16.48 1.64014 14.82V9.16998C1.64014 7.50998 2.77012 5.59002 4.22012 4.78002L9.56012 1.82C10.9301 1.06 13.0701 1.06 14.4401 1.82L19.7801 4.78997C21.2301 5.58997 22.3601 7.51999 22.3601 9.17999V14.83C22.3601 16.49 21.2301 18.41 19.7801 19.22L14.4401 22.18C13.7501 22.56 12.8801 22.75 12.0001 22.75ZM12.0001 2.74999C11.3701 2.74999 10.7501 2.88 10.2901 3.13L4.95013 6.09997C3.99013 6.63997 3.14014 8.06999 3.14014 9.17999V14.83C3.14014 15.93 3.99013 17.37 4.95013 17.91L10.2901 20.88C11.2001 21.39 12.8001 21.39 13.7101 20.88L19.0501 17.91C20.0101 17.37 20.8601 15.94 20.8601 14.83V9.17999C20.8601 8.07999 20.0101 6.63997 19.0501 6.09997L13.7101 3.13C13.2501 2.88 12.6301 2.74999 12.0001 2.74999Z" fill="#101010"/>
+<path d="M17.0002 13.9905C16.5902 13.9905 16.2502 13.6505 16.2502 13.2405V10.0206L7.13018 4.76055C6.77018 4.55055 6.65016 4.09054 6.86016 3.74054C7.07016 3.38054 7.52018 3.26052 7.88018 3.47052L17.3702 8.95056C17.6002 9.08056 17.7502 9.33052 17.7502 9.60052V13.2606C17.7502 13.6506 17.4102 13.9905 17.0002 13.9905Z" fill="#101010"/>
+</svg>

img/backup1.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.32 12.7504H15C12.51 12.7504 11.25 11.3404 11.25 8.55045V5.68045C11.25 4.66045 11.37 3.20045 12.43 2.40045C13.32 1.74045 14.6 1.69045 16.49 2.24045C18.97 2.96045 21.04 5.03045 21.76 7.51045C22.31 9.39045 22.26 10.6804 21.6 11.5604C20.8 12.6304 19.34 12.7504 18.32 12.7504ZM14.28 3.36045C13.87 3.36045 13.55 3.44045 13.34 3.60045C12.95 3.89045 12.76 4.57045 12.76 5.68045V8.56045C12.76 10.8004 13.62 11.2604 15.01 11.2604H18.33C19.43 11.2604 20.11 11.0704 20.41 10.6804C20.76 10.2204 20.73 9.30045 20.34 7.95045C19.76 5.98045 18.06 4.27045 16.09 3.70045C15.35 3.47045 14.75 3.36045 14.28 3.36045Z" fill="#7C7D81"/>
+<path d="M11.0699 22.7503C10.5399 22.7503 9.99988 22.7103 9.45988 22.6203C5.36988 21.9603 2.03988 18.6403 1.37988 14.5503C0.529883 9.29032 3.91988 4.33032 9.10988 3.27032C9.51988 3.19032 9.90988 3.45032 9.99988 3.85032C10.0799 4.26032 9.81988 4.65032 9.41988 4.74032C5.02988 5.64032 2.14988 9.84032 2.87988 14.3103C3.43988 17.7703 6.24988 20.5803 9.70988 21.1403C14.1999 21.8603 18.3899 18.9703 19.2799 14.5603C19.3599 14.1503 19.7599 13.8903 20.1599 13.9703C20.5699 14.0503 20.8299 14.4503 20.7499 14.8503C19.7999 19.5203 15.7199 22.7503 11.0699 22.7503Z" fill="#7C7D81"/>
+</svg>

img/backup2.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.05105 10.4495C1.05105 15.5708 5.03278 19.5654 10.0865 19.6166C15.1913 19.6166 19.2241 15.6732 19.2241 10.5519C19.2241 5.43059 15.2423 1.38477 10.1886 1.38477C5.13487 1.38477 1.05105 5.32816 1 10.5007L1.05105 10.4495Z" stroke="#101010" stroke-width="1.5" stroke-miterlimit="10"/>
+<path d="M12.0262 6.45442C11.5158 7.1714 11.4647 7.99081 12.0262 8.50293C12.5367 9.06628 13.3535 9.06628 14.1702 8.50293C14.936 9.78326 14.8849 12.3951 12.9451 13.9315C11.2095 15.3143 8.55498 15.1606 6.97249 13.6242C5.39001 12.0366 5.23687 9.42477 6.61516 7.63231C8.14659 5.68622 10.75 5.68622 12.0262 6.4032V6.45442Z" fill="#101010"/>
+</svg>

img/disk1.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.32 12.7504H15C12.51 12.7504 11.25 11.3404 11.25 8.55045V5.68045C11.25 4.66045 11.37 3.20045 12.43 2.40045C13.32 1.74045 14.6 1.69045 16.49 2.24045C18.97 2.96045 21.04 5.03045 21.76 7.51045C22.31 9.39045 22.26 10.6804 21.6 11.5604C20.8 12.6304 19.34 12.7504 18.32 12.7504ZM14.28 3.36045C13.87 3.36045 13.55 3.44045 13.34 3.60045C12.95 3.89045 12.76 4.57045 12.76 5.68045V8.56045C12.76 10.8004 13.62 11.2604 15.01 11.2604H18.33C19.43 11.2604 20.11 11.0704 20.41 10.6804C20.76 10.2204 20.73 9.30045 20.34 7.95045C19.76 5.98045 18.06 4.27045 16.09 3.70045C15.35 3.47045 14.75 3.36045 14.28 3.36045Z" fill="#7C7D81"/>
+<path d="M11.0699 22.7503C10.5399 22.7503 9.99988 22.7103 9.45988 22.6203C5.36988 21.9603 2.03988 18.6403 1.37988 14.5503C0.529883 9.29032 3.91988 4.33032 9.10988 3.27032C9.51988 3.19032 9.90988 3.45032 9.99988 3.85032C10.0799 4.26032 9.81988 4.65032 9.41988 4.74032C5.02988 5.64032 2.14988 9.84032 2.87988 14.3103C3.43988 17.7703 6.24988 20.5803 9.70988 21.1403C14.1999 21.8603 18.3899 18.9703 19.2799 14.5603C19.3599 14.1503 19.7599 13.8903 20.1599 13.9703C20.5699 14.0503 20.8299 14.4503 20.7499 14.8503C19.7999 19.5203 15.7199 22.7503 11.0699 22.7503Z" fill="#7C7D81"/>
+</svg>

img/disk2.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.32 12.7504H15C12.51 12.7504 11.25 11.3404 11.25 8.55045V5.68045C11.25 4.66045 11.37 3.20045 12.43 2.40045C13.32 1.74045 14.6 1.69045 16.49 2.24045C18.97 2.96045 21.04 5.03045 21.76 7.51045C22.31 9.39045 22.26 10.6804 21.6 11.5604C20.8 12.6304 19.34 12.7504 18.32 12.7504ZM14.28 3.36045C13.87 3.36045 13.55 3.44045 13.34 3.60045C12.95 3.89045 12.76 4.57045 12.76 5.68045V8.56045C12.76 10.8004 13.62 11.2604 15.01 11.2604H18.33C19.43 11.2604 20.11 11.0704 20.41 10.6804C20.76 10.2204 20.73 9.30045 20.34 7.95045C19.76 5.98045 18.06 4.27045 16.09 3.70045C15.35 3.47045 14.75 3.36045 14.28 3.36045Z" fill="#101010"/>
+<path d="M11.0699 22.7503C10.5399 22.7503 9.99988 22.7103 9.45988 22.6203C5.36988 21.9603 2.03988 18.6403 1.37988 14.5503C0.529883 9.29032 3.91988 4.33032 9.10988 3.27032C9.51988 3.19032 9.90988 3.45032 9.99988 3.85032C10.0799 4.26032 9.81988 4.65032 9.41988 4.74032C5.02988 5.64032 2.14988 9.84032 2.87988 14.3103C3.43988 17.7703 6.24988 20.5803 9.70988 21.1403C14.1999 21.8603 18.3899 18.9703 19.2799 14.5603C19.3599 14.1503 19.7599 13.8903 20.1599 13.9703C20.5699 14.0503 20.8299 14.4503 20.7499 14.8503C19.7999 19.5203 15.7199 22.7503 11.0699 22.7503Z" fill="#101010"/>
+</svg>

img/monitor1.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.05105 10.4495C1.05105 15.5708 5.03278 19.5654 10.0865 19.6166C15.1913 19.6166 19.2241 15.6732 19.2241 10.5519C19.2241 5.43059 15.2423 1.38477 10.1886 1.38477C5.13487 1.38477 1.05105 5.32816 1 10.5007L1.05105 10.4495Z" stroke="#7C7D81" stroke-width="1.5" stroke-miterlimit="10"/>
+<path d="M12.0262 6.45442C11.5158 7.1714 11.4647 7.99081 12.0262 8.50293C12.5367 9.06628 13.3535 9.06628 14.1702 8.50293C14.936 9.78326 14.8849 12.3951 12.9451 13.9315C11.2095 15.3143 8.55498 15.1606 6.97249 13.6242C5.39001 12.0366 5.23687 9.42477 6.61516 7.63231C8.14659 5.68622 10.75 5.68622 12.0262 6.4032V6.45442Z" fill="#7C7D81"/>
+</svg>

img/monitor2.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.05105 10.4495C1.05105 15.5708 5.03278 19.5654 10.0865 19.6166C15.1913 19.6166 19.2241 15.6732 19.2241 10.5519C19.2241 5.43059 15.2423 1.38477 10.1886 1.38477C5.13487 1.38477 1.05105 5.32816 1 10.5007L1.05105 10.4495Z" stroke="#101010" stroke-width="1.5" stroke-miterlimit="10"/>
+<path d="M12.0262 6.45442C11.5158 7.1714 11.4647 7.99081 12.0262 8.50293C12.5367 9.06628 13.3535 9.06628 14.1702 8.50293C14.936 9.78326 14.8849 12.3951 12.9451 13.9315C11.2095 15.3143 8.55498 15.1606 6.97249 13.6242C5.39001 12.0366 5.23687 9.42477 6.61516 7.63231C8.14659 5.68622 10.75 5.68622 12.0262 6.4032V6.45442Z" fill="#101010"/>
+</svg>

img/settings1.svg

@@ -0,0 +1,4 @@
+<svg width="19" height="21" viewBox="0 0 19 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.0632 10.6142C18.0632 11.7655 18.0632 12.8209 18.0632 13.9722C18.0632 15.4113 17.5238 16.4667 16.3551 17.1383C14.5571 18.2896 12.6693 19.4409 10.8713 20.4963C9.70261 21.1679 8.53391 21.1679 7.36523 20.4963C5.56726 19.345 3.76928 18.2896 1.97131 17.1383C0.80263 16.3708 0.17334 15.3154 0.17334 13.8763C0.17334 11.6696 0.17334 9.46292 0.17334 7.16031C0.17334 5.72118 0.80263 4.66579 1.97131 3.89825C3.76928 2.74694 5.56726 1.69158 7.36523 0.540273C8.53391 -0.131322 9.70261 -0.227264 10.8713 0.540273C12.6693 1.69158 14.5571 2.74694 16.3551 3.89825C17.5238 4.56985 18.0632 5.72118 18.0632 7.16031C18.0632 8.31162 18.0632 9.36698 18.0632 10.5183V10.6142ZM16.7147 10.6142C16.7147 9.4629 16.7147 8.31159 16.7147 7.25623C16.7147 6.39275 16.3551 5.72115 15.7258 5.33738C13.9279 4.18608 12.0399 3.03479 10.1521 1.88349C9.43288 1.49972 8.80365 1.49972 8.08446 1.88349C6.28649 3.03479 4.48843 4.09016 2.60056 5.24147C1.88137 5.72118 1.52182 6.39275 1.52182 7.25623C1.52182 9.4629 1.52182 11.7655 1.52182 13.9722C1.52182 14.8357 1.88137 15.5072 2.60056 15.9869C4.39853 17.1383 6.19659 18.1936 8.08446 19.3449C8.80365 19.8246 9.52275 19.7287 10.2419 19.3449C12.0399 18.1936 13.838 17.1383 15.7258 15.9869C16.445 15.5072 16.8046 14.9316 16.8046 14.0681C16.8046 12.9168 16.8046 11.8614 16.8046 10.7101L16.7147 10.6142Z" fill="#7C7D81"/>
+<path d="M9.16305 14.7404C7.00548 14.7404 5.29736 12.9174 5.29736 10.6148C5.29736 8.31221 7.00548 6.48926 9.16305 6.48926C11.3206 6.48926 13.0287 8.31221 13.0287 10.6148C13.0287 12.9174 11.3206 14.7404 9.16305 14.7404ZM11.6803 10.6148C11.6803 9.17569 10.6014 7.92839 9.16305 7.92839C7.81457 7.92839 6.64584 9.07974 6.64584 10.6148C6.64584 12.054 7.72467 13.3012 9.16305 13.3012C10.5115 13.3012 11.6803 12.1499 11.6803 10.6148Z" fill="#7C7D81"/>
+</svg>

img/settings2.svg

@@ -0,0 +1,4 @@
+<svg width="19" height="21" viewBox="0 0 19 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.0632 10.6142C18.0632 11.7655 18.0632 12.8209 18.0632 13.9722C18.0632 15.4113 17.5238 16.4667 16.3551 17.1383C14.5571 18.2896 12.6693 19.4409 10.8713 20.4963C9.70261 21.1679 8.53391 21.1679 7.36523 20.4963C5.56726 19.345 3.76928 18.2896 1.97131 17.1383C0.80263 16.3708 0.17334 15.3154 0.17334 13.8763C0.17334 11.6696 0.17334 9.46292 0.17334 7.16031C0.17334 5.72118 0.80263 4.66579 1.97131 3.89825C3.76928 2.74694 5.56726 1.69158 7.36523 0.540273C8.53391 -0.131322 9.70261 -0.227264 10.8713 0.540273C12.6693 1.69158 14.5571 2.74694 16.3551 3.89825C17.5238 4.56985 18.0632 5.72118 18.0632 7.16031C18.0632 8.31162 18.0632 9.36698 18.0632 10.5183V10.6142ZM16.7147 10.6142C16.7147 9.4629 16.7147 8.31159 16.7147 7.25623C16.7147 6.39275 16.3551 5.72115 15.7258 5.33738C13.9279 4.18608 12.0399 3.03479 10.1521 1.88349C9.43288 1.49972 8.80365 1.49972 8.08446 1.88349C6.28649 3.03479 4.48843 4.09016 2.60056 5.24147C1.88137 5.72118 1.52182 6.39275 1.52182 7.25623C1.52182 9.4629 1.52182 11.7655 1.52182 13.9722C1.52182 14.8357 1.88137 15.5072 2.60056 15.9869C4.39853 17.1383 6.19659 18.1936 8.08446 19.3449C8.80365 19.8246 9.52275 19.7287 10.2419 19.3449C12.0399 18.1936 13.838 17.1383 15.7258 15.9869C16.445 15.5072 16.8046 14.9316 16.8046 14.0681C16.8046 12.9168 16.8046 11.8614 16.8046 10.7101L16.7147 10.6142Z" fill="#101010"/>
+<path d="M9.16305 14.7404C7.00548 14.7404 5.29736 12.9174 5.29736 10.6148C5.29736 8.31221 7.00548 6.48926 9.16305 6.48926C11.3206 6.48926 13.0287 8.31221 13.0287 10.6148C13.0287 12.9174 11.3206 14.7404 9.16305 14.7404ZM11.6803 10.6148C11.6803 9.17569 10.6014 7.92839 9.16305 7.92839C7.81457 7.92839 6.64584 9.07974 6.64584 10.6148C6.64584 12.054 7.72467 13.3012 9.16305 13.3012C10.5115 13.3012 11.6803 12.1499 11.6803 10.6148Z" fill="#101010"/>
+</svg>

installer.css

@@ -1,5 +1,5 @@
 .hidden {display:none}
-fieldset {border: 1px solid  #049dff; padding-left: 40px; padding-right: 20px}
+fieldset {border: 1px solid  #049dff; padding-left: 40px; padding-right: 20px; border-radius: 10px; width: 100%}
 legend {width: auto;text-align: left !important; padding: 10px; color: #049dff;}
 fieldset.sub_block {border: 1px solid black; margin:-20px 0px 20px -15px}
 fieldset.sub_block legend {color: black}
@@ -132,3 +132,55 @@ body#scan{
     transform: rotate(135deg);
   }
 }
+
+    .info-container {
+      position: relative;
+      display: inline-block;
+      font-family: Arial, sans-serif;
+    }
+
+    .info-icon {
+      background-color: #007BFF;
+      color: white;
+      border-radius: 50%;
+      padding: 4px 8px;
+      cursor: pointer;
+      font-weight: bold;
+      font-size: 14px;
+      text-align: center;
+      line-height: 1;
+      display: inline-block;
+    }
+
+    .tooltip {
+      visibility: hidden;
+      background-color: #333;
+      color: #fff;
+      text-align: left;
+      border-radius: 4px;
+      padding: 8px;
+      position: absolute;
+      z-index: 1;
+      bottom: 125%; /* above the icon */
+      left: 50%;
+      transform: translateX(-50%);
+      opacity: 0;
+      transition: opacity 0.3s;
+      white-space: nowrap;
+    }
+
+    .tooltip::after {
+      content: "";
+      position: absolute;
+      top: 100%; /* bottom of tooltip */
+      left: 50%;
+      margin-left: -5px;
+      border-width: 5px;
+      border-style: solid;
+      border-color: #333 transparent transparent transparent;
+    }
+
+    .info-container:hover .tooltip {
+      visibility: visible;
+      opacity: 1;
+    }

manage2.html

@@ -0,0 +1,832 @@
+<!DOCTYPE html>
+<html lang="hu">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Safebox</title>
+    <style>
+        :root {
+            --bg-color: #ffffff;
+            --text-color: #000000;
+            --app-bg: #f0f0f0;
+            --button-border: #000000;
+        }
+        [data-theme="dark"] {
+            --bg-color: #1a1a1a;
+            --text-color: #ffffff;
+            --app-bg: #2c2c2c;
+            --button-border: #ffffff;
+        }
+        body {
+            margin: 0;
+            font-family: Arial, sans-serif;
+            background-color: var(--bg-color);
+            color: var(--text-color);
+            display: flex;
+            flex-direction: column;
+            min-height: 100vh;
+        }
+        header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 10px 20px;
+        }
+	table {border: 1px solid orange; width:100%;}
+	table th {padding-left: 20px; text-align: left; color: orange; width: 25%;}
+	table td {padding-left: 20px; text-align:left; width: 25%;}
+
+	label {text-align: left !important;}
+	a, a:hover, a:visited {color: orange}
+
+	fieldset {border: 1px solid  #ffffff; padding-left: 20px; padding-right: 20px; border-radius: 10px;}
+	legend {width: auto;text-align: left !important; padding: 10px; color: #ffffff;}
+
+        .profile {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            font-weight: bold;
+            gap: 5px;
+            cursor: pointer;
+        }
+        .profile img {
+            width: 50px;
+            height: 50px;
+            object-fit: cover;
+            border-radius: 50%;
+        }
+        .settings {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            font-weight: bold;
+            gap: 5px;
+        }
+        .logo {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        .logo img {
+            width: 50px;
+            height: 50px;
+        }
+        .logo div {
+            margin: 0;
+            padding: 0;
+        }
+        .logo h1 {
+            margin: 0;
+            padding: 0;
+            font-size: 24px;
+	    color: var(--text-color);
+        }
+        .toggle {
+            cursor: pointer;
+            width: 40px;
+            height: 20px;
+            border: 1px solid var(--button-border);
+            border-radius: 10px;
+            position: relative;
+        }
+        .toggle::after {
+            content: '';
+            position: absolute;
+            top: 2px;
+            left: 2px;
+            width: 16px;
+            height: 16px;
+            background: var(--button-border);
+            border-radius: 50%;
+            transition: 0.3s;
+        }
+        .toggle.active::after {
+            transform: translateX(20px);
+        }
+        div#themeToggle {
+		position: fixed;
+		top: 10px;
+		right: 10px;
+        }
+        .buttons {
+            display: flex;
+            justify-content: center;
+            gap: 10px;
+            margin: 20px 0;
+            cursor: pointer;
+        }
+        .buttons button {
+            min-width: 150px;
+            padding: 10px 10px;
+            background: none;
+            border: 1px solid var(--button-border);
+            border-radius: 10px;
+            cursor: pointer;
+            color: var(--text-color);
+        }
+        .buttons button.active, .buttons button:hover {
+		color: orange;
+            	border: 1px solid orange;
+        }
+        .left-buttons {
+            display: flex;
+            justify-content: center;
+            gap: 10px;
+            margin: 20px 0;
+            cursor: pointer;
+        }
+        .left-buttons button {
+            min-width: 120px;
+            padding: 5px 5px;
+            background: none;
+            border: 1px solid var(--button-border);
+            border-radius: 10px;
+            cursor: pointer;
+            color: var(--text-color);
+        }
+        .container-frame {
+		border: 1px solid;
+            	border-radius: 10px;
+		padding: 0px;
+		margin: 5px;
+		height: 98vh;
+        }
+        .container {
+		clear:both;
+		float:none;
+		padding-bottom: 10px;
+		margin: 5px;
+		height: 88vh;
+        }
+        .leftside {
+		float:left;
+		width:10%;
+        }
+        .rightside {
+		float:right;
+		width:90%;
+		display: flex;
+		flex-direction: column;
+		height: 88vh;
+        }
+        .my-apps {
+            flex: 1;
+            background-color: var(--app-bg);
+            padding: 40px;
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: flex-start;
+            align-items: flex-start;
+            gap: 40px;
+            min-width: 96%;
+            max-width: 96%;
+            margin: 0 auto;
+            border-radius: 10px;
+            box-sizing: border-box;
+        }
+        .my-apps-container {
+            width:100%;
+            display: flex;
+            flex-wrap: wrap;
+        }
+        .app {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            width: 120px;
+            cursor: pointer;
+        }
+        .app img {
+            width: 80px;
+            height: 80px;
+            object-fit: contain;
+            margin-bottom: 10px;
+        }
+        .innerDiv {
+            width:100%;
+        }
+        footer {
+	    position: fixed;
+	    bottom: 0;
+	    left: 0;
+	    width: 97%;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 20px;
+            font-size: 14px;
+	    z-index: 1000;
+	}
+        .footer-links {
+            display: flex;
+            gap: 15px;
+        }
+        .footer-links a {
+            color: black;
+            text-decoration: none;
+            font-weight: bold;
+        }
+        .footer-center {
+            text-align: center;
+        }
+        .footer-center p {
+            margin: 5px 0;
+        }
+        .footer-center strong {
+            font-size: 18px;
+        }
+        .footer-center a {
+            color: var(--text-color);
+            text-decoration: none;
+            font-weight: bold;
+        }
+        .footer-center a:hover {
+            text-decoration: underline;
+        }
+        .footer-social {
+            display: flex;
+            gap: 15px;
+        }
+        .footer-social a {
+            color: black;
+            text-decoration: none;
+            font-weight: bold;
+        }
+        .hidden {
+            display: none;
+        }
+
+        .popup.hidden {
+            display: none;
+        }
+
+        .popup {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0,0,0,0.5);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 999;
+        }
+
+        .popup-content {
+            background: var(--bg-color);
+            padding: 30px;
+            border-radius: 15px;
+            width: 80%;
+            text-align: left;
+            position: relative;
+            animation: fadeIn 0.3s ease;
+        }
+
+        .popup-content .close {
+            position: absolute;
+            top: 10px;
+            right: 15px;
+            font-size: 24px;
+            cursor: pointer;
+        }
+
+        [data-theme="dark"] .footer-links a,
+        [data-theme="dark"] .footer-social a {
+            color: white;
+        }
+
+        [data-theme="dark"] .footer-links a:hover,
+        [data-theme="dark"] .footer-social a:hover {
+            text-decoration: underline;
+        }
+
+        @keyframes fadeIn {
+            from { opacity: 0; transform: scale(0.9); }
+            to { opacity: 1; transform: scale(1); }
+        }
+
+        .input-group {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 10px;
+            margin: 20px 0;
+        }
+
+        .input-group input {
+		min-width:260px;
+            margin-top: 5px;
+            margin-bottom: 5px;
+            padding: 5px;
+            border: 1px solid var(--button-border);
+            border-radius: 10px;
+            background: none;
+            color: var(--text-color);
+            outline: none;
+        }
+
+        .input-group button {
+            padding: 10px 20px;
+            background: none;
+            border: 1px solid var(--button-border);
+            border-radius: 10px;
+            color: var(--text-color);
+            cursor: pointer;
+        }
+
+        .checkbox-container {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  font-size: 16px;
+  user-select: none;
+  color: var(--text-color);
+  position: relative;
+}
+
+.checkbox-container input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+
+.checkmark {
+  position: relative;
+  height: 24px;
+  width: 24px;
+  background-color: var(--app-bg);
+  border: 2px solid var(--button-border);
+  border-radius: 6px;
+  box-sizing: border-box;
+  transition: background-color 0.3s, border-color 0.3s;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* Ha be van pipálva: sötét hátteret és világos szegélyt */
+.checkbox-container input:checked ~ .checkmark {
+  background-color: var(--button-border);
+  border-color: var(--button-border);
+}
+
+/* A pipa - kisebb és középen */
+.checkmark::after {
+  content: "";
+  display: block;
+  width: 10px;
+  height: 6px;
+  border: solid var(--bg-color);
+  border-width: 0 0 3px 3px;
+  transform: rotate(-45deg);
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+/* Ha be van jelölve: megjelenik a pipa */
+.checkbox-container input:checked ~ .checkmark::after {
+  opacity: 1;
+}
+
+/* Dark mode variációk */
+[data-theme="dark"] {
+  --bg-color: #1a1a1a;
+  --text-color: #f0f0f0;
+  --app-bg: #2c2c2c;
+  --button-border: #e0e0e0;
+}
+
+
+        .custom-select {
+            padding: 10px;
+            border: 1px solid var(--button-border);
+            border-radius: 10px;
+            background-color: var(--app-bg);
+            color: var(--text-color);
+            font-size: 16px;
+            appearance: none;
+            background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpolyline points='1 1 7 7 13 1' style='fill:none;stroke:black;stroke-width:2' /%3E%3C/svg%3E");
+            background-repeat: no-repeat;
+            background-position: right 10px center;
+            background-size: 12px;
+        }
+
+        [data-theme="dark"] .custom-select {
+            background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpolyline points='1 1 7 7 13 1' style='fill:none;stroke:white;stroke-width:2' /%3E%3C/svg%3E");
+        }
+
+
+        #popup .input-group {
+            display: block;
+        }
+
+        #popup .row {
+            display: flex;
+        }
+
+	.info-container {
+		position: relative;
+		display: inline-block;
+		font-family: Arial, sans-serif;
+		margin: 5px 0px 0px 5px;
+	}
+
+    .info-icon {
+      background-color: #007BFF;
+      color: white;
+      border-radius: 50%;
+      padding: 4px 8px;
+      cursor: pointer;
+      font-weight: bold;
+      font-size: 14px;
+      text-align: center;
+      line-height: 1;
+      display: inline-block;
+    }
+
+    .tooltip {
+      visibility: hidden;
+      background-color: #333;
+      color: #fff;
+      text-align: left;
+      border-radius: 4px;
+      padding: 8px;
+      position: absolute;
+      z-index: 1;
+      bottom: 125%; /* above the icon */
+      left: 50%;
+      transform: translateX(-50%);
+      opacity: 0;
+      transition: opacity 0.3s;
+      white-space: nowrap;
+    }
+
+    .tooltip::after {
+      content: "";
+      position: absolute;
+      top: 100%; /* bottom of tooltip */
+      left: 50%;
+      margin-left: -5px;
+      border-width: 5px;
+      border-style: solid;
+      border-color: #333 transparent transparent transparent;
+    }
+
+    .info-container:hover .tooltip {
+      visibility: visible;
+      opacity: 1;
+    }
+
+        @media (max-width: 768px) {
+            header {
+                flex-direction: column;
+                gap: 10px;
+            }
+
+            .buttons {
+                flex-direction: column;
+                align-items: center;
+            }
+
+            .buttons button {
+                width: 80%;
+            }
+
+            .my-apps {
+                min-width: 75%;
+                max-width: 75%;
+                padding: 20px;
+                justify-content: center;
+                flex-direction: column;
+                text-align: center;
+                align-items: center;
+            }
+
+            .app {
+                width: 80px;
+            }
+
+            footer {
+                flex-direction: column;
+                gap: 10px;
+                text-align: center;
+            }
+
+            .footer-links, .footer-social {
+                justify-content: center;
+            }
+            .input-group {
+                flex-direction: column;
+                align-items: stretch;
+            }
+            
+            .input-group input,
+            .input-group button,
+            .input-group select,
+            .checkbox-container {
+                width: 100%;
+            }
+        }
+    </style>
+</head>
+<body>
+
+<div class="container-frame">
+<div class="container">
+<div class="leftside">
+    <div class="logo">
+        <img src="image.png" alt="Logo">
+        <div>
+		<h1>Safebox</h1>
+	</div>
+    </div>
+    <div class="profile" id="profileSection">
+	<!--<img src="image.png" alt="Profilkép">-->
+        <div id="vpnBtn">Pro</div>
+    </div>
+    <div style="text-align:center">
+	Proxy&nbsp;status
+	<span id="vpn_on" class="hidden green"><b>ON</b></span>
+	<span id="vpn_off" class="hidden red"><b>OFF</b></span>
+    </div>
+	<div class="left-buttons">
+	 	<button id="servicesBtn">Services</button>
+	</div>
+    	<div class="settings">Settings</div>
+	<div class="left-buttons">
+		<button id="repositoriesBtn">Repositories</button>
+	</div>
+	<div class="left-buttons">
+		<button id="systemservicesBtn">System services</button>
+	</div>
+	<br>
+	<br>
+		<div style="text-align:center;">
+		<a href="manage2.html" id="refresh_btn">REFRESH</a>
+		<br>
+		<br>
+		<a href="manage.html" id="old_btn">OLD DESIGN</a>
+		</div>
+</div>
+
+<div class="rightside">
+	<div class="buttons">
+	    <button id="myAppsBtn">My Apps</button>
+	    <button id="installAppsBtn">Install Apps</button>
+	    <button id="updatesBtn">Updates</button>
+	    <button id="backupBtn">Backup</button>
+	    <button id="diskBtn">Disk Management</button>
+	    <button id="monitorBtn">Monitor</button>
+	    <div class="toggle" id="themeToggle"></div>
+	</div>
+
+	<div class="my-apps"><div id="myAppsContainer" class="my-apps-container"></div></div>
+</div>
+</div>
+
+<div id="popup" class="popup hidden">
+  <div class="popup-content">
+    <span class="close">&times;</span>
+    <div class="input-group">
+    <div id="popupText" class="deployment">Load app template here</div>
+    </div>
+  </div>
+</div>
+<footer>
+    <div class="footer-links">
+        <a href="#">Help</a>
+        <a href="#">Docs</a>
+        <a href="#">Report</a>
+    </div>
+
+    <div class="footer-center">
+        <p>Want to access your services remotely?</p>
+        <p class="hidden" id="pro_off"><strong><a href="#">Get Pro!</a></strong></p>
+        <p class="hidden" id="pro_on"><strong><a href="#">Pro settings</a></strong></p>
+    </div>
+
+    <div class="footer-social">
+        <a href="#">Discord</a>
+        <a href="#">X</a>
+    </div>
+</footer>
+
+</div>
+
+<script>
+    const toggle = document.getElementById('themeToggle');
+    toggle.addEventListener('click', () => {
+        const currentTheme = document.documentElement.getAttribute('data-theme');
+        if (currentTheme === 'dark') {
+            document.documentElement.removeAttribute('data-theme');
+        } else {
+            document.documentElement.setAttribute('data-theme', 'dark');
+        }
+        toggle.classList.toggle('active');
+    });
+    // default dark
+    document.documentElement.setAttribute('data-theme', 'dark');
+</script>
+
+<script>
+    // apps array beállítása common.js-ben
+    const apps = []; // GLOBAL VARIABLE
+
+    document.addEventListener('DOMContentLoaded', function() {
+
+    const myAppsBtn = document.getElementById('myAppsBtn');
+    const installAppsBtn = document.getElementById('installAppsBtn');
+    const backupBtn = document.getElementById('backupBtn');
+    const diskBtn = document.getElementById('diskBtn');
+    const monitorBtn = document.getElementById('monitorBtn');
+
+    const vpnBtn = document.getElementById('vpnBtn');
+    const servicesBtn = document.getElementById('servicesBtn');
+    const updatesBtn = document.getElementById('updatesBtn');
+    const repositoriesBtn = document.getElementById('repositoriesBtn');
+    const systemservicesBtn = document.getElementById('systemservicesBtn');
+
+    const myAppsContainer = document.getElementById('myAppsContainer');
+    const popup = document.getElementById('popup');
+    const popupText = document.getElementById('popupText');
+    const closeBtn = document.querySelector('.close');
+
+    //Appok betöltése
+    function renderApps(all) {
+        myAppsContainer.innerHTML = '';
+        apps.forEach(app => {
+	    if ((all==false && app.installed=='true') || (all==true && app.installed!='true')) {
+		    const appDiv = document.createElement('div');
+		    appDiv.className = 'app';
+		    appDiv.innerHTML = `
+			<img src="${app.image}" alt="${app.name}" title="${app.orig_name} ${app.version}">${app.orig_name}
+		    `;
+		    appDiv.addEventListener('click', () => {
+			    popupText.textContent = `You clicked on ${app.name} ${app.version}!`;
+			if (app.installed=='true') reinstall(app.name, 'popupText');
+			else load_template(app.name,'popupText');
+			popup.classList.remove('hidden');
+		    });
+		    myAppsContainer.appendChild(appDiv);
+            }
+        });
+    }
+
+    //TODO: Ilyen függvényeket kell csinálni és a listenerekhez adni az egyes részeket
+    function renderText(title) {
+        //TODO: itt kell a buttont editálni és így kell hozzáadni hozzá mindent
+        myAppsContainer.innerHTML = `
+            <h1 style="text-align: center;">${title}</h1>
+
+            <div class="input-group">
+                <input type="text" placeholder="Írj be valamit..." id="textInput">
+                <button id="submitButton">Küldés</button>
+
+                <select id="myComboBox" class="custom-select">
+                    <option value="">Válassz egy lehetőséget...</option>
+                    <option value="1">Első opció</option>
+                    <option value="2">Második opció</option>
+                    <option value="3">Harmadik opció</option>
+                </select>
+
+                <label class="checkbox-container">
+                    <input type="checkbox" id="myCheckbox">
+                    <span class="checkmark"></span>
+                    Elfogadom a feltételeket
+                </label>
+            </div>
+        `;
+
+        const submitButton = document.getElementById('submitButton');
+        const textInput = document.getElementById('textInput');
+
+        if (submitButton && textInput) {
+            submitButton.addEventListener('click', () => {
+                const value = textInput.value.trim();
+                if (value) {
+                    alert(`Beírt szöveg: ${value}`);
+                    textInput.value = '';
+                } else {
+                    alert('Kérlek írj be valamit!');
+                }
+            });
+        }
+    }
+
+    function renderVPN() {
+        myAppsContainer.innerHTML = `
+            <div id="vpn" class="innerDiv">
+	    Loading...
+            </div>
+        `;
+	get_proxy_html();
+    }
+
+    function renderServices() {
+        myAppsContainer.innerHTML = `
+            <div id="services" class="innerDiv">
+	    Loading...
+            </div>
+        `;
+	get_services();
+    }
+
+    function renderUpdates() {
+        myAppsContainer.innerHTML = `
+            <div id="updates" class="innerDiv">
+	    Looking for updates... Please wait...
+            </div>
+        `;
+	get_updates();
+    }
+
+    function renderRepositories() {
+        myAppsContainer.innerHTML = `
+        <div class="input-group">
+	<fieldset>
+	<legend>Repositories</legend>
+		<div id="repositories" style="text-align:left">Loading...</div>
+
+		<hr>
+		<form class="form-install" action="#" method="post" id="add_repo">
+		<div class="row">
+		    <div class="mb-3" style="text-align:left">
+			<label for="registry">Please add a new GIT repository URL: </label>
+			<input type="registry" class="form-control" name="repository" id="repository" size="100" value="" required>
+			<div class="invalid-feedback">
+			Please enter a valid repository url.
+			</div>
+		    </div>
+		</div>
+		<div class="row">
+		    <div class="mb-3">
+			<button class="btn btn-lg btn-primary btn-block" type="submit" id="repo_add_btn"> Add </button>
+		    </div>
+		</div>
+		</form>
+	</fieldset>
+	</div>
+        `;
+    }
+
+    function renderSystemServices() {
+        myAppsContainer.innerHTML = `
+            <div id="system">
+	    Loading...
+            </div>
+        `;
+	get_system();
+    }
+
+	function activate(btn) {
+		myAppsBtn.classList.remove('active');
+		installAppsBtn.classList.remove('active');
+		btn.classList.add('active');
+	}
+
+    myAppsBtn.addEventListener('click', () => {renderApps(false); activate(myAppsBtn);});
+    installAppsBtn.addEventListener('click', () => {renderApps(true); activate(installAppsBtn);});
+    backupBtn.addEventListener('click', () => renderText('Backup'));
+    diskBtn.addEventListener('click', () => renderText('Disk Management'));
+    monitorBtn.addEventListener('click', () => renderText('Monitor'));
+
+    vpnBtn.addEventListener('click', () => renderVPN());
+    servicesBtn.addEventListener('click', () => renderServices());
+    updatesBtn.addEventListener('click', () => renderUpdates());
+    repositoriesBtn.addEventListener('click', () => renderRepositories());
+    systemservicesBtn.addEventListener('click', () => renderSystemServices());
+
+    closeBtn.addEventListener('click', () => {
+        popup.classList.add('hidden');
+    });
+
+    popup.addEventListener('click', (event) => {
+        if (event.target === popup) {
+            popup.classList.add('hidden');
+        }
+    });
+
+    renderApps(false);
+});
+</script>
+
+<script>
+    const profileSection = document.getElementById('profileSection');
+    profileSection.addEventListener('click', () => {
+        //TODO: profile szekcióra kattintott
+    });
+</script>
+
+<!-- Optional JavaScript -->
+<!-- jQuery first, then Popper.js, then Bootstrap JS -->
+<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.6/dist/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
+<script src="common.js?t=9"></script>
+</body>
+</html>

manage_old.html

@@ -0,0 +1,157 @@
+<!doctype html>
+<html lang="en">
+<head>
+<!-- Required meta tags -->
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+<title>INSTALLER TOOL</title>
+<!-- Bootstrap CSS -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
+<!-- Custom styles for this template -->
+<link href="installer.css?t=7" rel="stylesheet">
+</head>
+<body id="manage" class="text-center">
+<div class="container-fluid">
+<div class="col-md-12">
+
+<h1>Found deployed environment</h1>
+
+<div style="text-align:left;float:left;width:33%">
+	<a href="javascript:void()" id="vpn_btn">VPN</a>
+        Status:
+	<span id="vpn_on" class="hidden green"><b>ON</b></span>
+	<span id="vpn_off" class="hidden red"><b>OFF</b></span>
+</div>
+<div style="text-align:center;float:left;width:34%">
+        <a href="manage.html" id="refresh_btn">REFRESH</a>
+        /
+	<a href="manage2.html" id="new_btn">NEW DESIGN</a>
+</div>
+<div style="text-align:right;float:right">
+	<a href="javascript:void()" id="settings_btn">SETTINGS</a>
+</div>
+<div style="float:none;clear:both"/>
+
+<div id="vpn" class="hidden">
+	<fieldset>
+	<legend>Enable proxy</legend>
+	<form class="form-install" action="#" method="post" id="save_vpn">
+		<div class="row">
+		    <div class="mb-3">
+				<label for="vpn_domain">Please add domain url to download the VPN hash from (default: https://portal.safebox.network):</label>
+				<input type="text" class="form-control" name="VPN_DOMAIN" id="vpn_domain" value="https://portal.safebox.network">
+				<div class="invalid-feedback">
+				Please enter a valid domain.
+				</div>
+		    </div>
+		</div>
+		<div class="row">
+		    <div class="mb-3">
+				<label for="vpn_pass">Please type in the generated VPN passkey (8 digits):</label>
+				<input type="text" class="form-control" name="VPN_PASS" id="vpn_pass" value="" maxlength="8" size="10">
+		    </div>
+		</div>
+		<div class="row">
+		    <div class="mb-3">
+				<label for="letsencrypt_mail">Please add the letsencrypt mail address:</label>
+				<input type="email" class="form-control" name="LETSENCRYPT_MAIL" id="letsencrypt_mail" value="">
+				<div class="invalid-feedback">
+				Please enter a valid email.
+				</div>
+		    </div>
+		</div>
+		<div class="row">
+		    <div class="mb-3">
+				<label for="letsencrypt_servername">Please add letsencrypt server name (default is letsencrypt but you can add zerossl too):</label>
+				<input type="text" class="form-control" name="LETSENCRYPT_SERVERNAME" id="letsencrypt_servername" value="letsencrypt">
+		    </div>
+		</div>
+		<div class="row">
+		    <div class="mb-3">
+			<button class="btn btn-lg btn-primary btn-block" type="submit" id="vpn_save_btn"> Save </button> &nbsp;
+			<button class="btn btn-lg btn-primary btn-block" type="button" id="vpn_cancel_btn"> Cancel </button>
+		    </div>
+		</div>
+	</form>
+	</fieldset>
+	<br>
+</div>
+
+<div id="settings" class="hidden">
+	<fieldset>
+	<legend>Repositories</legend>
+		<div id="repositories" style="text-align:left">Loading...</div>
+
+		<hr>
+		<form class="form-install" action="#" method="post" id="add_repo">
+		<div class="row">
+		    <div class="mb-3" style="text-align:left">
+			<label for="registry">Please add a new GIT repository URL: </label>
+			<input type="registry" class="form-control" name="repository" id="repository" size="100" value="" required>
+			<div class="invalid-feedback">
+			Please enter a valid repository url.
+			</div>
+		    </div>
+		</div>
+		<div class="row">
+		    <div class="mb-3">
+			<button class="btn btn-lg btn-primary btn-block" type="submit" id="repo_add_btn"> Add </button>
+		    </div>
+		</div>
+		</form>
+	</fieldset>
+
+	<fieldset>
+	<legend>System services</legend>
+	<div id="system" style="text-align:left">Loading...</div>
+	</fieldset>
+	
+	<fieldset>
+	<legend>Updates</legend>
+	<div style="text-align:left">
+		<a href="javascript:void()" id="update_btn">Search for updates</a>
+	</div>
+	<div id="updates" style="text-align:left">
+	</div>
+	</fieldset>
+	<br>
+</div>
+
+<div id="default">
+
+	<fieldset>
+	<legend><a href="javascript:void()" id="deployments_btn">Deployments</a></legend>
+	<div id="deployments" style="text-align:left">Loading...</div>
+	</fieldset>
+
+	<fieldset>
+	<legend><a href="javascript:void()" id="services_btn">Services</a></legend>
+	<div id="services" style="text-align:left;display:none;">Loading...</div>
+	</fieldset>
+
+	<fieldset>
+	<legend>Disk management</legend>
+	</fieldset>
+
+	<fieldset>
+	<legend>Monitor</legend>
+	</fieldset>
+
+</div>
+
+</div>
+</div>
+<br>
+<br>
+<script>
+    // apps array beállítása common.js-ben
+    const apps = []; // GLOBAL VARIABLE
+</script>
+<!-- Optional JavaScript -->
+<!-- jQuery first, then Popper.js, then Bootstrap JS -->
+<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.6/dist/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
+<script src="common.js?t=5"></script>
+</body>
+</html>

scan.php

@@ -116,7 +116,7 @@ switch ($_GET["op"]) {
 					if ($data["INSTALL_STATUS"]==1) {
 						echo "<table><tr><td><b>Service/Container</b></td><td><b>Image</b></td><td><b>Status</b></td><td><b>Action</b></td></tr></table>";
 						foreach ($data["INSTALLED_SERVICES"] as $service_name => $object) {
-							show_service_update($service_name, trim($object["update"]), trim($object["uptodate"]));
+							show_service_update($service_name, trim($object["update"]), trim($object["uptodate"]), trim($object["error"]));
 						}
 						echo "<br>";
 					}
@@ -134,46 +134,37 @@ switch ($_GET["op"]) {
 		else echo "ERROR";
 	break;
 	case "check_deployments":
+		$deployments = "";
 		$arr = check_response("deployments");
 		if (!empty($arr)) {
 			foreach ($arr as $key=>$data) {
 				if ($key=="deployments") {
 					if (count($data["DEPLOYMENTS"])) {
-						if ($data["DEPLOYMENTS"]["deployments"]=="NONE") echo "There are no deployments.<br>";
+						if ($data["DEPLOYMENTS"]["deployments"]=="NONE") $deployments = "There are no deployments.";
 						else {
 							foreach ($data["DEPLOYMENTS"] as $service_name => $content) {
                                                                 $orig_service_name = $service_name;
-                                                                $service_name = strtolower($service_name);
-                                                                //echo base64_decode($content);
-								if (array_key_exists($service_name,$data["INSTALLED_SERVICES"])) {
-                                                                        echo '<div><a href="#" onclick="reinstall(\''.$service_name.'\')">'.$orig_service_name.'</a> - '.$content.' - INSTALLED</div>';
-								}
-								else echo '<div><a href="#" onclick="load_template(\''.$service_name.'\')">'.$orig_service_name.'</a> - '.$content.'</div>';
-								echo '<div id="'.$service_name.'" class="deployment"></div>';
+								$service_name = strtolower($service_name);
+								$version = $content["version"];
+								$subtitle = $content["subtitle"];
+								if (empty($subtitle) || $subtitle == "null") $subtitle = "";
+								$icon = $content["icon"];
+								if (empty($icon) || $icon == "null") $icon = "img/default_logo.png"; // default icon image
+								if (array_key_exists($service_name,$data["INSTALLED_SERVICES"])) $installed = "true";
+								else $installed = "false";
+								if (!empty($deployments)) $deployments .= ", ";
+								$deployments .= '{"name": "'.$service_name.'", "orig_name": "'.$orig_service_name.'", "image": "'.$icon.'", "version": "'.$version.'", "subtitle": "'.$subtitle.'", "installed": "'.$installed.'"}';
 							}
+							if (!empty($deployments)) $deployments = "[{$deployments}]";
 						}
 					}
-					else echo "There are no deployments.";
-					echo "<br>";
-/*
-					if (count($data["INSTALLED_SERVICES"])) {
-						echo "<br>Installed services:<br>";
-						if ($data["INSTALLED_SERVICES"]["services"]=="NONE") echo "There are no installed services.<br>";
-						else {
-							foreach ($data["INSTALLED_SERVICES"] as $service_name => $content) {
-								//echo base64_decode($content);
-								echo $service_name."<br>";
-							}
-							echo "<br>";
-						}
-					}
-					else echo "There are no installed services.<br>";
-*/
+					else $deployments = "There are no deployments.";
 					remove_response("$key");
 				}
 			}
 		}
-		else echo "WAIT";
+		else $deployments = "WAIT";
+		echo $deployments;
 	break;
 	case "deployment":
 		$arr = array("NAME" => $_GET["additional"], "ACTION" => "ask");
@@ -191,39 +182,77 @@ switch ($_GET["op"]) {
 				if ($key=="deployment") {
 					if ($data["STATUS"]=="0") { // ask
 						$template = json_decode(base64_decode($data["TEMPLATE"]));
-						echo "<fieldset><form action=\"#\" method=\"post\" id=\"deploy_{$template->name}_form\"><br>";
+
+						echo '
+						<div class="app-details">
+							<div class="header-block">
+							  <div class="logo-and-text">
+							    <div class="applogo">
+								<img src="'.$template->icon.'">
+							    </div>
+							    <div class="text-content">
+							      <h1 class="title">'.$template->name.'</h1>
+							      <h2 class="subtitle">'.$template->subtitle.'</h2>
+							      <p class="description">'.$template->description.'</p>
+							    </div>
+							  </div>
+							  <button id="updatesBtn" class="notification-btn"><i class="fas fa-bell"></i> Notification</button>
+							</div>
+						';
 						if ($reinstall) {
+							echo '<div id="letsencrypt">';
 							//var_dump($template);
-                                                        //var_dump($template);
                                                         $letsencrypt = check_letsencrypt();
-							if (empty($letsencrypt)) echo "LETSENCRYPT in progress...";
+							if (empty($letsencrypt)) echo "LETSENCRYPT file doesn't exists...<br><br>";
+							elseif ($letsencrypt=="ERROR") echo "LETSENCRYPT file: read JSON error...<br><br>";
 							else {
+								$domain = "";
 								foreach ($template->fields as $field) {
-									if ($field->key=="DOMAIN") {
-										if (!empty($letsencrypt[$field->value])) {
-											echo "LETSENCRYPT: ".$letsencrypt[$field->value]["status"]." - ".$letsencrypt[$field->value]["date"];
-											echo " - <a href=\"letsencrypt_log.php?domain={$field->value}\" target=\"_blank\">LOG</a><br><br>";
-										}
-										else echo "LETSENCRYPT in progress for {$field->value}.";
-									}
+									if ($field->key=="DOMAIN") $domain = $field->value;
 								}
+								if (!empty($domain)) show_letsencrypt($letsencrypt, $domain);
 							}
+							echo '</div>';
 						}
+						echo "<form action=\"#\" method=\"post\" id=\"deploy_{$template->name}_form\">";
+						echo "<div class=\"app-fields\">";
 						foreach ($template->fields as $field) {
+							echo "<div class=\"app-field ".($field->advanced ? "advanced" : "")."\">";
+							if (!empty($field->title)) echo "<div class=\"row\"><h3>".$field->title."</h3></div>";
 							if (isset($field->generated)) {
-								echo "<input type=\"hidden\" value=\"generated:{$field->generated}\" name=\"{$field->key}\" id=\"{$template->name}_{$field->key}\" class=\"additional_{$template->name}\">";
+								echo "<input type=\"hidden\" value=\"generated:{$field->generated}:{$field->value}\" name=\"{$field->key}\" id=\"{$template->name}_{$field->key}\" class=\"additional_{$template->name}\">";
 							}
 							else {
-							echo "<div class=\"row\"><div class=\"mb-3\"><label>".$field->description."</label>
-								<input ".($field->required=="true" ? "required" : "")." type=\"".(!empty($field->type) ? $field->type : "text")."\" value=\"{$field->value}\" name=\"{$field->key}\" id=\"{$template->name}_{$field->key}\" class=\"additional_{$template->name}\">
-							</div></div>";
+								echo "<div class=\"row\">";
+								echo "<label>".$field->description."</label>
+								<div class=\"input-container\"><input ".($field->required=="true" ? "required" : "")." type=\"".(!empty($field->type) ? $field->type : "text")."\" value=\"{$field->value}\" name=\"{$field->key}\" id=\"{$template->name}_{$field->key}\" class=\"additional_{$template->name}\"></div>
+								<div class=\"info-container\">
+								";
+								if (!empty($field->info)) echo "
+									  <span class=\"info-icon\">i</span>
+									  <div class=\"tooltip\">{$field->info}</div>
+								";
+								echo "</div>";
+								echo "</div>";
+								if (!empty($field->details)) echo "<div class=\"row\"><i>".$field->details."</i></div>";
 							}
+							echo "</div>";
 						}
+						echo "</div>";
 
-
-                                                echo "
-                                                <div class=\"row\">
-                                                <div class=\"mb-3\">
+                                                echo "<div class=\"row buttons\">";
+						echo "
+						<div class=\"mb-3\">
+						<button class=\"btn btn-lg btn-primary btn-block\" type=\"button\" id=\"more_{$template->name}_btn\">More</button>
+						</div>";
+						if ($reinstall) {
+							echo "
+                                                	<div class=\"mb-3\" style=\"margin-left:30px;\">
+							<button class=\"btn btn-lg btn-primary btn-block\" type=\"submit\" id=\"update_{$template->name}_btn\" onclick=\"update_deployment('{$template->name}')\">Update</button>
+							</div>";
+						}
+						echo "
+                                                <div class=\"mb-3\" style=\"margin-left:30px;\">
                                                 <button class=\"btn btn-lg btn-primary btn-block\" type=\"submit\" id=\"deploy_{$template->name}_btn\">".($reinstall ? "Reinstall" : "Install")."</button>
                                                 </div>";
 						if ($reinstall) {
@@ -232,19 +261,30 @@ switch ($_GET["op"]) {
 							<button class=\"btn btn-lg btn-primary btn-block\" type=\"button\" id=\"uninstall_{$template->name}_btn\" onclick=\"uninstall('{$template->name}')\">Uninstall</button>
 							</div>";
 						}
-						echo "<div class=\"mb-3\" style=\"margin-left:30px;\">
+						echo "<div class=\"mb-3\" style=\"margin-left:230px;float:\">
 						<button class=\"btn btn-lg btn-primary btn-block\" type=\"button\" id=\"cancel_{$template->name}_btn\">Cancel</button>
-						</div>";
+						</div>"; // buttons
                                                 echo "
                                                 </div>
-                                                </form></fieldset>
+						</form>
+						</div>
 <script>
+        jQuery('.advanced').each(function() {
+                jQuery(this).hide();
+        });
+        jQuery('#more_{$template->name}_btn').click(function() {
+		jQuery('.advanced').each(function() {
+			jQuery(this).toggle();
+		});
+        });
 	jQuery('#deploy_{$template->name}_form').submit(function() {
 		".($reinstall ? "redeploy" : "deploy")."('{$template->name}');
 		return false;
 	});
         jQuery('#cancel_{$template->name}_btn').click(function() {
-                $('div#{$template->name}').html('');
+                jQuery('div#{$template->name}').html('');
+    		document.getElementById('myAppsContainer').classList.remove('hidden'); // manage3
+    		document.getElementById('popup').classList.add('hidden'); // manage2
         });
 </script>
 						";
@@ -277,6 +317,24 @@ switch ($_GET["op"]) {
 			else echo ""; // no deployment, finished
 		}
 	break;
+	case "request_letsencrypt":
+		$domain = $_GET["domain"];
+		$arr = array($domain => array("date" => date("Y-m-d H:i:s"), "status" => "requested"));
+		$json = json_encode($arr, JSON_UNESCAPED_SLASHES|JSON_PRETTY_PRINT);
+
+		if (set_output("request_letsencrypt",$json)) echo "LETSENCRYPT in progress for {$domain}.<br><br>";
+		else echo "ERROR";
+	break;
+	case "check_letsencrypt":
+		$domain = $_GET["domain"];
+		$letsencrypt = check_letsencrypt();
+		if (empty($letsencrypt)) echo "LETSENCRYPT file doesn't exists...";
+		elseif ($letsencrypt=="ERROR") echo "LETSENCRYPT file: read JSON error...";
+		else {
+			show_letsencrypt($letsencrypt, $domain);
+		}
+	break;
+	case "edit": // update deployment after edit
 	case "redeploy":
 	case "deploy":
 		if ($key=check_deploy($_GET["additional"])) { 
@@ -291,6 +349,11 @@ switch ($_GET["op"]) {
 			foreach ($fields as $field_key => $field_value) {
 				$field_arr = explode(":",$field_value);
 				if ($field_arr[0]=="generated") {
+					if ($_GET["op"]=="edit") {
+						$fields[$field_key] = $field_arr[2]; // replace with previously stored value
+						continue; // do NOT regenerate values
+					}
+
 					if (intval($field_arr[3])==0) $len = 10; // default length
 					else $len = $field_arr[3];
 
@@ -377,23 +440,51 @@ switch ($_GET["op"]) {
                 echo $text;
         break;
         case "check_upgrade":
-                $arr = check_response("upgrade");
-                if (!empty($arr)) {
+                $arr = check_deploy($_GET["service"]);
+                if (!empty($arr)) { // deployment in progress
                         foreach ($arr as $key=>$data) {
-                                if ($key=="upgrade") {
-                                        var_dump($arr);
-                                        //remove_response("$key");
+                                if ($key=="deploy-".$_GET["service"]) {
+                                        if ($data["STATUS"]=="1") {
+                                                echo "Install in progress... You can't uninstall while in progress...";
+                                        }
+                                        elseif ($data["STATUS"]=="2") {
+                                                echo "Install has finished... You can upgrade now.";
+						//echo "<script>get_deployments();</script>";
+                                                remove_response("$key");
+                                        }
                                 }
                         }
                 }
-                else echo "WAIT";
+		else { // no upgrade in progress -> upgrade
+                        $key = "upgrade-".$_GET["service"];
+                        $arr = check_response($key);
+                        if (!empty($arr)) {
+                                $data = $arr[$key];
+                                if ($data["STATUS"]=="1") {
+                                        echo "Upgrade in progress... Please wait... ".date("Y-m-d H:i:s");
+                                }
+                                elseif ($data["STATUS"]=="2") {
+                                        echo "OK";
+                                        remove_response("$key");
+                                }
+                        }
+                        else echo "Upgrade in progress... Please wait...";
+                }
         break;
         case "upgrade":
-                $arr = array("NAME" => $_GET["service"], "ACTION" => "upgrade");
-                $json = json_encode($arr, JSON_UNESCAPED_SLASHES|JSON_PRETTY_PRINT);
+                if ($key=check_deploy($_GET["service"])) {
+                        $text="Deploy/uninstall of {$_GET["service"]} has started. Please wait...";
+                }
+                else {
+                        //$text="Deploy/uninstall of {$_GET["service"]} in progress... Please wait...";
 
-                if (set_output("upgrade",$json)) echo "OK";
-                else echo "ERROR";
+			$arr = array("NAME" => $_GET["service"], "ACTION" => "upgrade");
+			$json = json_encode($arr, JSON_UNESCAPED_SLASHES|JSON_PRETTY_PRINT);
+
+			if (set_output("upgrade",$json)) $text = "OK";
+			else $text = "ERROR";
+                }
+                echo $text;
         break;
 	case "repositories":
 		$arr = array("STATUS" => 0);
@@ -428,21 +519,29 @@ switch ($_GET["op"]) {
 		else echo "ERROR";
 	break;
         case "check_vpn":
-                $key = "check_vpn";
-                $arr = array("STATUS" => 0);
-                $json = json_encode($arr, JSON_UNESCAPED_SLASHES|JSON_PRETTY_PRINT);
-                set_output($key,$json);
-                sleep(1);
-                $arr = check_response($key);
-                if (!empty($arr)) {
-                        $data = $arr[$key];
-                        echo $data["STATUS"];
-                        remove_response("$key");
-                }
-                else echo "NO";
+                $arr = check_response("save_vpn");
+		if (!empty($arr)) {
+			$data = $arr["save_vpn"];
+			echo $data["STATUS"];
+			if ($data["STATUS"]=="1") remove_response("save_vpn"); // vpn start has finished
+		}
+		else {
+			$key = "check_vpn";
+			$arr = array("STATUS" => 0);
+			$json = json_encode($arr, JSON_UNESCAPED_SLASHES|JSON_PRETTY_PRINT);
+			set_output($key,$json);
+			sleep(1);
+			$arr = check_response($key);
+			if (!empty($arr)) {
+				$data = $arr[$key];
+				echo $data["STATUS"];
+				remove_response("$key");
+			}
+			else echo "NO";
+		}
         break;
 	case "save_vpn":
-		remove_response("save_repository");
+		//remove_response("save_repository"); // ???
 
 		$arr = array(
 			"VPN_DOMAIN" => $_GET["vpn_domain"],