Dashboard App for ACF

app/acf-util/welcome-html.lsp

@@ -143,7 +143,7 @@ end
 <!-- Dashboard App Block - LINE 1 -->
 <div class="dashboard-main main-block">
 <!-- Dashboard Version Block - BLOCK 1 -->
-	<div style="cursor: pointer;" onclick="window.open('/cgi-bin/acf/alpine-baselayout/health/system', '_blank')" class="dashboard-system dashboard-block">
+	<div class="dashboard-system dashboard-block">
 		<div class="data-block data-system">
 			<h4 class="dashboard-block-title dashboard-title-system">System</h4>
 				<p class="dashboard-infos dash-info-version">
@@ -516,7 +516,7 @@ $(function networkChart() {
 <!-- Dashboard App Block - LINE 4 -->
 <div class="dashboard-main main-block">
 <!-- Dashboard Main Block - DISK & PARTITION 1 -->
-	<div style="cursor: pointer;" onclick="window.open('/cgi-bin/acf/alpine-baselayout/health/storage, '_blank')'" class="dashboard-disk dashboard-block large-block">
+	<div style="cursor: pointer;" onclick="window.open('/cgi-bin/acf/alpine-baselayout/health/storage', '_blank')" class="dashboard-disk dashboard-block large-block">
 		<div class="data-block data-diskpart">
 			<h4 class="dashboard-block-title dashboard-title-disk-viewer">Disk | Partition Viewer</h4>
 				<p class="dashboard-infos dash-info-keys">
@@ -524,12 +524,58 @@ $(function networkChart() {
 					</p>
 						<div class="section-disk" id="disk-partition-view">
 							<div id="partition-table">
+								<!--<% local disklines = format.string_to_table(physicalDisk, "\n") %>-->
 								<%= physicalDisk %> : <%= blocksToSize(tonumber(physicalCapacity) * 1000) %>
+								<% displaydisk = function(disk, name)
+								io.write('<table id="legend-title" style="margin:0px;padding:0px;border:0px;margin-top:5px;">\n')
+								io.write("	<tr>\n")
+								io.write('		<td id="legend-object" width="100px"><b>'..html.html_escape(name)..'</b></td>\n')
+								io.write("	</tr>\n")
+								io.write("</table>\n")
+								io.write('<table class="chart-bar chart-storage">\n')
+								io.write("	<tr>\n")
+								io.write("		<td>0%</td>\n")
+							if tonumber(disk.used) > 0 then
+								io.write('		<td id="capacity-used" class="capacity-used" width="'..html.html_escape(disk.used)..'%" style="')
+							if tonumber(disk.used) < 100 then io.write('')
+							end
+								io.write('"><center><b>')
+							if ( tonumber(disk.used) > 0) then io.write(html.html_escape(disk.used) .. "%") end
+								io.write('</b></center></td>\n')
+							end
+							if tonumber(disk.used) < 100 then
+								io.write('		<td id="capacity-free" class="capacity-free" width="'..(100-tonumber(disk.used))..'%" style="')
+							if tonumber(disk.used) > 0 then io.write('') 
+							end
+								io.write('"><center><b>')
+							if ( 100 > tonumber(disk.used)) then io.write((100-tonumber(disk.used)) .. "%") end
+								io.write('</b></center></td>\n')
+							end
+								io.write('		<td>100%</td>\n')
+								io.write("	</tr>\n")
+								io.write("</table>\n")
+							end
+							if (disk.value.hd) then
+							for name,hd in pairs(disk.value.hd.value) do
+								displaydisk(hd, name)
+							end
+							else %>
+								<p class="error error-txt">No Hard Drive Mounted</p>
+							<% end %>
+							<% if (disk.value.ramdisk) then
+							for name,ramdisk in pairs(disk.value.ramdisk.value) do
+								displaydisk(ramdisk, name)
+							end
+							else %>
+								<p class="error error-txt">No RamDisk Mounted</p>
+							<% end %>
+								</div>
 							</div>
-							</div>
-							<pre>
-							<%= disk.value.partitions.value %>
-							</pre>
+						</div>
+					<pre>
+						<%= disk.value.partitions.value %>
+				</pre>
+			</div>		
 		</div>
 	</div>
 <!-- Dashboard App Block - LINE 4 -->

app/template-html.lsp

@@ -59,7 +59,7 @@ end
 <% if session.userinfo and session.userinfo.userid and viewlibrary and viewlibrary.dispatch_component then %>
 		<title><%= html.html_escape(string.upper(hostname) .. " - " .. string.gsub(pageinfo.controller, "^%l", string.upper) .. " ∣ " .. string.gsub(pageinfo.action, "^%l", string.upper)) %></title>
 <% else %>
-		<title><%= html.html_escape(string.gsub(pageinfo.controller, "^%l", string.upper) .. " ∣ " .. string.gsub(pageinfo.action, "^%l", string.upper)) %></title>
+		<title><%= "Dashboard | " .. html.html_escape(string.gsub(pageinfo.action, "^%l", string.upper)) %></title>
 <% end %>
 		<link rel="icon" href="/skins/dashboard/favicon.ico" />
 		<link rel="stylesheet" type="text/css" href="<%= html.html_escape(pageinfo.wwwprefix..pageinfo.staticdir) %>/reset.css">
@@ -80,9 +80,26 @@ end
 		<script type="application/javascript" src="https://unpkg.com/jquery"></script>
 		<script type="text/javascript" src="<%= html.html_escape(pageinfo.wwwprefix..pageinfo.skin.."/"..posix.basename(pageinfo.skin)..".js") %>"></script>
 		<script type="text/javascript">
+		
 			$(function(){
 				$(":input:not(input[type=button],input[type=submit],button):enabled:not([readonly]):visible:first").focus();
 			});
+			
+			// Show Password on Logon page
+			function showPassword() {
+				var field = document.querySelector('#password input');
+				if (field.type === "password") {
+					field.type = "text";
+					$("#showPass .fa-eye-slash").removeClass("fa-eye-slash");
+					$("#showPass i").addClass("fa-eye");
+					$("#showPass").addClass("corporate");
+				} else {
+					field.type = "password";
+					$("#showPass").removeClass("corporate");
+					$("#showPass .fa-eye").removeClass("fa-eye");
+					$("#showPass i").addClass("fa-eye-slash");
+				}
+				};			
 	
 			$(document).ready(function() {
 				// Login page input placeholder
@@ -92,9 +109,9 @@ end
 					document.querySelector('#userid input').setAttribute('placeholder','🔒 User ID');
 					document.querySelector('#password input').setAttribute('placeholder','🔑 Password');
 					document.querySelector('#login').setAttribute('autocomplete','on');
-				
-					document.querySelector('#password input').setAttribute('autocomplete','off');
+					document.querySelector('#password input').setAttribute('autocomplete','current-password');
 					document.querySelector('.hidden').setAttribute('hidden','');
+					$("#password .right").append("<button id='showPass' type='button' onclick='showPassword()'><i class='fa-regular fa-eye-slash'></i></button>"); 
 			};
 			// Save collapse menu state 
 				var updated = window.localStorage.getItem('nav', updated);	
@@ -117,7 +134,7 @@ end
 				$("#nav").toggleClass(updated);
 				$("#toogle").toggleClass(updated);
 			}
-			});
+			});		
 	
 			// Toogle collapse menu
 			function toogleMenu() {  

css/dashboard-main/logon.css

@@ -77,7 +77,7 @@
 
 #login .left {
     display: none !important;
-} /*REMOVE ME ! ------------------- REMOVE LEFT CONTENT FOR PLACEHOLDER - GO TO readme.md for activate it in /usr/share/lua/5.4/html - Depend of your lua version acf install 20230407*/
+} 
 
 input#password::-webkit-input-placeholder::before {
     font-family: "Font Awesome 6 Free";
@@ -128,7 +128,7 @@ input#password::-webkit-input-placeholder::before {
 }
 
 .logon-logon .item:last-child {
-    margin: 3rem 0 0;
+    margin: 0.5rem 0 0;
 }
 
 #section_logon #error {
@@ -221,4 +221,25 @@ input#password::-webkit-input-placeholder::before {
 
 .logon .header-links {
     padding: 0;
+}
+
+button#showPass {
+    float: right;
+    cursor: pointer;
+    position: relative;
+    top: -2.5rem;
+    height: 2.5rem;
+    right: -0.25rem !important;
+    padding: 0;
+    border: none !important;
+    border-radius: 0 4px 4px 0;
+    width: 2.5rem;
+}
+
+.corporate {
+    background: #006787;
+}
+
+#showPass i.fa-regular.fa-eye {
+    color: white;
 }
\ No newline at end of file

css/dashboard-main/mobile.css

@@ -143,6 +143,10 @@
 	padding: 1.25rem 1.5rem 1.25rem 0.5rem !important;
 	}
 	
+	.logon button#showPass {
+    right: -0.8rem !important;
+	}
+	
 	.icon-header {
     margin: 0 1.5rem 0 0;
 	}