首頁 探索 說明
登入
TC
/
arozos
1
0
複刻 0
檔案 問題管理 0 合併請求 0 Wiki
瀏覽代碼

Migrated login and iot hub away from Tocas UI

Toby Chui 3 年之前
父節點
ad175e9783
當前提交
71aeb451d6
共有 5 個文件被更改，包括 106 次插入 和 91 次删除
統一視圖 顯示文件統計
  1. 0 4
      mediaServer.go
  2. 1 0
      mod/share/share.go
  3. 66 67
      web/SystemAO/iot/hub/index.html
  4. 0 2
      web/SystemAO/utilities/audio.html
  5. 39 18
      web/login.system

+ 0 - 4
mediaServer.go
查看文件 

@@ -24,12 +24,8 @@ Example usage:
 
 This will serve / download the file located at files/users/{username}/Desktop/test/02.Orchestra- エミール (Addendum version).mp3
 
 This will serve / download the file located at files/users/{username}/Desktop/test/02.Orchestra- エミール (Addendum version).mp3
 
 
 
 PLEASE ALWAYS USE URLENCODE IN THE LINK PASSED INTO THE /media ENDPOINT
 
 PLEASE ALWAYS USE URLENCODE IN THE LINK PASSED INTO THE /media ENDPOINT
 
-
 
-
 
 */
 
 */
 
 
 
-//
 
-
 
 func mediaServer_init() {
 
 func mediaServer_init() {
 
 	if *enable_gzip {
 
 	if *enable_gzip {
 
 		http.HandleFunc("/media/", gzipmiddleware.CompressFunc(serverMedia))
 
 		http.HandleFunc("/media/", gzipmiddleware.CompressFunc(serverMedia))

+ 1 - 0
mod/share/share.go
查看文件 

@@ -145,6 +145,7 @@ func (s *Manager) HandleShareAccess(w http.ResponseWriter, r *http.Request) {
 
 			redirectURL = "./download/" + id + "/"
 
 			redirectURL = "./download/" + id + "/"
 
 		}
 
 		}
 
 		http.Redirect(w, r, redirectURL, http.StatusTemporaryRedirect)
 
 		http.Redirect(w, r, redirectURL, http.StatusTemporaryRedirect)
 
+		return
 
 	}
 
 	}
 
 
 
 	//Check if id exists
 
 	//Check if id exists

+ 66 - 67
web/SystemAO/iot/hub/index.html
查看文件 

@@ -4,10 +4,10 @@
 
     <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
 
     <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
     <title>ArozOS IoT Hub</title>
 
     <title>ArozOS IoT Hub</title>
 
-    <link rel="stylesheet" href="../../../script/tocas/tocas.css">
 
+    <link rel="stylesheet" href="../../../script/semantic/semantic.min.css">
 
     <link rel="manifest" href="manifest.json">
 
     <link rel="manifest" href="manifest.json">
 
-    <script src="../../../script/tocas/tocas.js"></script>
 
-    <script src="../../../script/jquery.min.js"></script>
 
+	<script src="../../../script/jquery.min.js"></script>
 
+    <script src="../../../script/semantic/semantic.min.js"></script>
 
     <script src="../../../script/ao_module.js"></script>
 
     <script src="../../../script/ao_module.js"></script>
 
     <style>
 
     <style>
 
         .ultrasmall.image{
 
         .ultrasmall.image{
 
@@ -64,9 +64,9 @@
 
 
 
 
 
 <body>
 
 <body>
 
-	<div class="ts right sidebar overlapped vertical menu">
 
+	<div id="sidemenu" class="ui right vertical menu sidebar">
 
 	   <div class="item">
 
 	   <div class="item">
 
-		  <div class="ts header">
 
+		  <div class="ui header">
 
 			 ArozOS IoT Hub
 
 			 ArozOS IoT Hub
 
 			 <div class="sub header">Universal IoT Controller</div>
 
 			 <div class="sub header">Universal IoT Controller</div>
 
 		  </div>
 
 		  </div>
 
@@ -82,17 +82,17 @@
 
 	   </div>
 
 	   </div>
 
 	</div>
 
 	</div>
 
 	<div class="pusher">
 
 	<div class="pusher">
 
-	   <div class="ts menu">
 
-		  <a class="item noborder" href="index.html"><img class="ts ultrasmall circular image" src="img/main_icon.png"> IoT Hub</a>
 
+	   <div class="ui menu">
 
+		  <a class="item noborder" href="index.html"><img class="ui ultrasmall circular image" src="img/main_icon.png"> IoT Hub</a>
 
 		  <a class="right item" onClick="toggleSideMenu();"><i class="content icon"></i></a>
 
 		  <a class="right item" onClick="toggleSideMenu();"><i class="content icon"></i></a>
 
 	   </div>
 
 	   </div>
 
-	   <div id="devList" class="ts container">
 
-			<div class="ts basic segment HDSDev">
 
-				<div class="ts grid">
 
-					<div class="four wide column"><img class="ts tiny devIcon image" src="img/system/loading.gif"></div>
 
+	   <div id="devList" class="ui container">
 
+			<div class="ui basic segment HDSDev">
 
+				<div class="ui grid">
 
+					<div class="four wide column"><img class="ui tiny devIcon image" src="img/system/loading.gif"></div>
 
 					<div class="twelve wide column">
 
 					<div class="twelve wide column">
 
-						<div class="ts container">
 
-							<div class="ts header">
 
+						<div class="ui container">
 
+							<div class="ui header">
 
 								<span class="devHeader">Scanning</span>
 
 								<span class="devHeader">Scanning</span>
 
 								<div class="sub devProperty header">IoT Hub take a while to scan your network for the first startup.</div>
 
 								<div class="sub devProperty header">IoT Hub take a while to scan your network for the first startup.</div>
 
 							</div>
 
 							</div>
 
@@ -105,15 +105,15 @@
 
 	</div>
 
 	</div>
 
 
 
 	<!-- Show more information about thsi device-->
 
 	<!-- Show more information about thsi device-->
 
-	<div id="moreInfoInterface" class="ts active dimmer" style="display:none;">
 
+	<div id="moreInfoInterface" class="ui active dimmer" style="display:none;">
 
 	   <div style="position:absolute;width:100%;height:100%;left:0px;top:0px;" onClick='$("#moreInfoInterface").fadeOut("fast");'>
 
 	   <div style="position:absolute;width:100%;height:100%;left:0px;top:0px;" onClick='$("#moreInfoInterface").fadeOut("fast");'>
 
 	   </div>
 
 	   </div>
 
-	   <div id="informationItnerface" class="ts segment mainUI popupInterface">
 
-		  <div class="ts header">
 
+	   <div id="informationItnerface" class="ui segment mainUI popupInterface" style="text-align: left;">
 
+		  <div class="ui header">
 
 			 Device Properties
 
 			 Device Properties
 
 		  </div>
 
 		  </div>
 
 		  <br>
 
 		  <br>
 
-		  <div class="ts horizontal form">
 
+		  <div class="ui horizontal form">
 
 			 <div class="field">
 
 			 <div class="field">
 
 				<label>Device UUID</label>
 
 				<label>Device UUID</label>
 
 				<input id="duid" type="text" readonly="true">
 
 				<input id="duid" type="text" readonly="true">
 
@@ -136,60 +136,60 @@
 
 			 </div>
 
 			 </div>
 
 		  </div>
 
 		  </div>
 
 		  <br>
 
 		  <br>
 
-		  <button class="ts primary button"  onClick='$("#moreInfoInterface").fadeOut("fast");'>Close</button>
 
+		  <button class="ui primary button"  onClick='$("#moreInfoInterface").fadeOut("fast");'>Close</button>
 
 		  <br><br>
 
 		  <br><br>
 
 	   </div>
 
 	   </div>
 
 	</div>
 
 	</div>
 
 
 
 	<!-- Editing can be done on this device -->
 
 	<!-- Editing can be done on this device -->
 
-	<div id="editInterface" class="ts active dimmer" style="display:none;">
 
+	<div id="editInterface" class="ui active dimmer" style="display:none;">
 
 		<div style="position:absolute;width:100%;height:100%;left:0px;top:0px;" onClick='$("#editInterface").fadeOut("fast");'>
 
 		<div style="position:absolute;width:100%;height:100%;left:0px;top:0px;" onClick='$("#editInterface").fadeOut("fast");'>
 
 		</div>
 
 		</div>
 
-		<div class="ts segment mainUI popupInterface" >
 
-			<div class="ts header">
 
+		<div class="ui segment mainUI popupInterface" >
 
+			<div class="ui header">
 
 				Edit Device Records
 
 				Edit Device Records
 
 			</div>
 
 			</div>
 
 			<p>Set Device Nickname</p>
 
 			<p>Set Device Nickname</p>
 
-			<div class="ts action fluid small input">
 
+			<div class="ui action fluid small input">
 
 				<input class="deviceNickname" type="text" uuid="" placeholder="New Nickname" autocomplete="off">
 
 				<input class="deviceNickname" type="text" uuid="" placeholder="New Nickname" autocomplete="off">
 
-				<button class="ts positive button" onclick="setNickName(this)">Update</button>
 
+				<button class="ui positive button" onclick="setNickName(this)">Update</button>
 
 			</div>
 
 			</div>
 
-			<div class="ts inverted positive segment nicnameSetConfirm" style="display:none;">
 
+			<div class="ui inverted positive segment nicnameSetConfirm" style="display:none;">
 
 				<p><i class="checkmark icon"></i> Device Nickname Updated</p>
 
 				<p><i class="checkmark icon"></i> Device Nickname Updated</p>
 
 			</div>
 
 			</div>
 
 
 
-			<div class="ts divider"></div>
 
+			<div class="ui divider"></div>
 
 			<br>
 
 			<br>
 
-			<button class="ts primary button"  onClick='$("#editInterface").fadeOut("fast");'>Close</button>
 
+			<button class="ui primary button"  onClick='$("#editInterface").fadeOut("fast");'>Close</button>
 
 			<br><br>
 
 			<br><br>
 
 
 
 		</div>
 
 		</div>
 
 	</div>
 
 	</div>
 
 
 
 	<!-- Action can be done on this device -->
 
 	<!-- Action can be done on this device -->
 
-	<div id="actioninterface" class="ts active dimmer" style="display:none;">
 
+	<div id="actioninterface" class="ui active dimmer" style="display:none;">
 
 		<div style="position:absolute;width:100%;height:100%;left:0px;top:0px;" onClick='$("#actioninterface").fadeOut("fast");'>
 
 		<div style="position:absolute;width:100%;height:100%;left:0px;top:0px;" onClick='$("#actioninterface").fadeOut("fast");'>
 
 		</div>
 
 		</div>
 
-		<div id="informationItnerface" class="ts segment mainUI popupInterface">
 
-		   <div class="ts header">
 
+		<div id="informationItnerface" class="ui segment mainUI popupInterface" style="text-align: left;">
 
+		   <div class="ui header">
 
 			  Device Actions
 
 			  Device Actions
 
 		   </div>
 
 		   </div>
 
 		   <br>
 
 		   <br>
 
-		   <div class="ts horizontal form" id="statusList">
 
-				<h3>No Status</h3>
 
+		   <div class="ui form" id="statusList">
 
+				<h3><i class="ui loading spinner icon"></i> Loading</h3>
 
 		   </div>
 
 		   </div>
 
-		   <div class="ts divider"></div>
 
-		   <div class="ts horizontal form" id="actionForm">
 
+		   <div class="ui divider"></div>
 
+		   <div class="ui horizontal form" id="actionForm">
 
 
 
 			</div>
 
 			</div>
 
 			<br>
 
 			<br>
 
-			<button class="ts primary button"  onClick='$("#actioninterface").fadeOut("fast");'>Close</button>
 
+			<button class="ui primary button"  onClick='$("#actioninterface").fadeOut("fast");'>Close</button>
 
 			<br><br>
 
 			<br><br>
 
 		</div>
 
 		</div>
 
 	</div>
 
 	</div>
 
 
 
-	<div id="loadingMask" class="ts active dimmer" style="display:none;">
 
-	   <div class="ts text loader">Scanning in Progress</div>
 
+	<div id="loadingMask" class="ui active dimmer" style="display:none;">
 
+	   <div class="ui text loader">Scanning in Progress</div>
 
 	</div> 
 	</div> 
 	<script>
 
 	<script>
 
 		var currentlyViewingDevices = "";
 
 		var currentlyViewingDevices = "";
 
@@ -226,7 +226,7 @@
 
 
 
 
 
 		function hideSideMenu(){
 
 		function hideSideMenu(){
 
-			ts('.right.sidebar').sidebar('hide');
 
+			$('.right.sidebar').sidebar('hide');
 
 		}
 
 		}
 
 
 
 		function showMore(object){
 
 		function showMore(object){
 
@@ -253,12 +253,12 @@
 
 				}else{
 
 				}else{
 
 					data.forEach(device => {
 
 					data.forEach(device => {
 
 						var deviceData = encodeURIComponent(JSON.stringify(device));
 
 						var deviceData = encodeURIComponent(JSON.stringify(device));
 
-						$("#devList").append(`<div class="ts segment HDSDev" devicedata="${deviceData}" uuid="${device.DeviceUUID}" devIp="${device.IPAddr}" port="${device.Port}" location="local">
 
-							<div class="ts grid">
 
-								<div class="four wide column"><img class="ts tiny devIcon image" src="../../../system/iot/icon?devid=${device.DeviceUUID}"></div>
 
+						$("#devList").append(`<div class="ui segment HDSDev" devicedata="${deviceData}" uuid="${device.DeviceUUID}" devIp="${device.IPAddr}" port="${device.Port}" location="local">
 
+							<div class="ui grid">
 
+								<div class="four wide column"><img class="ui tiny devIcon image" src="../../../system/iot/icon?devid=${device.DeviceUUID}"></div>
 
 								<div class="twelve wide column">
 
 								<div class="twelve wide column">
 
-									<div class="ts container">
 
-										<div class="ts header">
 
+									<div class="ui container">
 
+										<div class="ui header">
 
 											<span class="devHeader">${device.Name}</span>
 
 											<span class="devHeader">${device.Name}</span>
 
 											<div class="sub devProperty header">${device.Model}</div>
 
 											<div class="sub devProperty header">${device.Model}</div>
 
 										</div>
 
 										</div>
 
@@ -266,21 +266,21 @@
 
 								</div>
 
 								</div>
 
 							</div>
 
 							</div>
 
 							<div class="controlBtn infoMount">
 
 							<div class="controlBtn infoMount">
 
-								<button class="ts icon basic button" onClick="edit(this);"><i class="edit icon"></i></button>
 
-								<button class="ts icon button" onClick="showMore(this);"><i class="notice icon"></i></button>
 
-								<button class="ts primary icon button" onClick="action(this);"><i class="options icon"></i></button>
 
+								<button class="ui icon button" title="Edit Device Nickname" onClick="edit(this);"><i class="edit icon"></i></button>
 
+								<button class="ui icon button" title="Show More" onClick="showMore(this);"><i class="info circle icon"></i></button>
 
+								<button class="ui primary icon button" title="Actions" onClick="action(this);"><i class="options icon"></i></button>
 
 							</div>
 
 							</div>
 
 						</div>`);
 
 						</div>`);
 
 					});
 
 					});
 
 
 
 					if (data.length == 0){
 
 					if (data.length == 0){
 
 						//No device found
 
 						//No device found
 
-						$("#devList").html(`<div class="ts basic segment HDSDev">
 
-							<div class="ts grid">
 
-								<div class="four wide column"><img class="ts tiny devIcon image" src="img/system/not-found.svg"></div>
 
+						$("#devList").html(`<div class="ui basic segment HDSDev">
 
+							<div class="ui grid">
 
+								<div class="four wide column"><img class="ui tiny devIcon image" src="img/system/not-found.svg"></div>
 
 								<div class="twelve wide column">
 
 								<div class="twelve wide column">
 
-									<div class="ts container">
 
-										<div class="ts header">
 
+									<div class="ui container">
 
+										<div class="ui header">
 
 											<span class="devHeader">No Device Found</span>
 
 											<span class="devHeader">No Device Found</span>
 
 											<div class="sub devProperty header">Want to create your own IoT devices with ESP8266 & Arduino IDE? <br>Check out the <a href="https://github.com/tobychui/Home-Dynamic" target="_blank">HomeDynamic</a> System!</div>
 
 											<div class="sub devProperty header">Want to create your own IoT devices with ESP8266 & Arduino IDE? <br>Check out the <a href="https://github.com/tobychui/Home-Dynamic" target="_blank">HomeDynamic</a> System!</div>
 
 										</div>
 
 										</div>
 
@@ -292,7 +292,7 @@
 
 
 
 					//Load the nickname of each device if it exists
 
 					//Load the nickname of each device if it exists
 
 					$(".HDSDev").each(function(){
 
 					$(".HDSDev").each(function(){
 
-						//Get its nickname 
+						//Get iui nickname 
 						var devUUID = $(this).attr("uuid");
 
 						var devUUID = $(this).attr("uuid");
 
 						var targetDOMElement = $(this);
 
 						var targetDOMElement = $(this);
 
 						$.ajax({
 
 						$.ajax({
 
@@ -314,8 +314,7 @@
 
 		}
 
 		}
 
 
 
 		function toggleSideMenu(){
 
 		function toggleSideMenu(){
 
-			//$("#sideMenu").toggle();
 
-			ts('.right.sidebar').sidebar('toggle');
 
+			$("#sidemenu").sidebar('toggle');
 
 		}
 
 		}
 
 
 
 		function setNickName(input){
 
 		function setNickName(input){
 
@@ -423,13 +422,13 @@
 
 			//Clear the action form
 
 			//Clear the action form
 
 			$("#actionForm").html("");
 
 			$("#actionForm").html("");
 
 
 
-			//Generate the list of endpoints from the device data
 
+			//Generate the list of endpoinui from the device data
 
 			var device = $(object).parent().parent();
 
 			var device = $(object).parent().parent();
 
 			var deviceData = device.attr("devicedata");
 
 			var deviceData = device.attr("devicedata");
 
 			deviceData = JSON.parse(decodeURIComponent(deviceData));
 
 			deviceData = JSON.parse(decodeURIComponent(deviceData));
 
 
 
 			var epts = deviceData.ControlEndpoints;
 
 			var epts = deviceData.ControlEndpoints;
 
-			if (epts == null || epts.length == 0){
 
+			if (epts == null || typeof(epts) == undefined || epts.length == 0 ){
 
 				//This device has no control endpoints. Show status info only.
 
 				//This device has no control endpoints. Show status info only.
 
 				updateStatus(deviceData.DeviceUUID);
 
 				updateStatus(deviceData.DeviceUUID);
 
 			}else{
 
 			}else{
 
@@ -441,9 +440,9 @@
 
 					if (ept.Type == "string"){
 
 					if (ept.Type == "string"){
 
 						$("#actionForm").append(`<div name="${ept.Name}" devid="${deviceID}" epd="${encodedEptData}" class="field">
 
 						$("#actionForm").append(`<div name="${ept.Name}" devid="${deviceID}" epd="${encodedEptData}" class="field">
 
 							<label>${ept.Desc}</label>
 
 							<label>${ept.Desc}</label>
 
-							<div class="ts action input">
 
+							<div class="ui action input">
 
 								<input type="text" placeholder="${name}">
 
 								<input type="text" placeholder="${name}">
 
-								<button class="ts primary icon button" title="Send" onclick="executeEndpoint(this.parentNode.parentNode, this.parentNode.parentNode.getElementsByTagName('input')[0].value)"><i class="send icon"></i></button>
 
+								<button class="ui primary icon button" title="Send" onclick="executeEndpoint(this.parentNode.parentNode, this.parentNode.parentNode.getElementsByTagName('input')[0].value)"><i class="send icon"></i></button>
 
 							</div>
 
 							</div>
 
 						</div>`);
 
 						</div>`);
 
 					}else if (ept.Type == "integer"){
 
 					}else if (ept.Type == "integer"){
 
@@ -459,9 +458,9 @@
 
 
 
 						$("#actionForm").append(`<div name="${ept.Name}" devid="${deviceID}" epd="${encodedEptData}" class="field">
 
 						$("#actionForm").append(`<div name="${ept.Name}" devid="${deviceID}" epd="${encodedEptData}" class="field">
 
 							<label>${ept.Desc}</label>
 
 							<label>${ept.Desc}</label>
 
-							<div class="ts action input">
 
+							<div class="ui action input">
 
 								<input type="number" min="${min}" max="${max}" placeholder="${name}">
 
 								<input type="number" min="${min}" max="${max}" placeholder="${name}">
 
-								<button class="ts primary icon button" title="Send" onclick="executeEndpoint(this.parentNode.parentNode, this.parentNode.parentNode.getElementsByTagName('input')[0].value)"><i class="send icon"></i></button>
 
+								<button class="ui primary icon button" title="Send" onclick="executeEndpoint(this.parentNode.parentNode, this.parentNode.parentNode.getElementsByTagName('input')[0].value)"><i class="send icon"></i></button>
 
 							</div>
 
 							</div>
 
 						</div>`);
 
 						</div>`);
 
 					}else if (ept.Type == "float"){
 
 					}else if (ept.Type == "float"){
 
@@ -482,14 +481,14 @@
 
 
 
 						$("#actionForm").append(`<div name="${ept.Name}" devid="${deviceID}" epd="${encodedEptData}" class="field">
 
 						$("#actionForm").append(`<div name="${ept.Name}" devid="${deviceID}" epd="${encodedEptData}" class="field">
 
 							<label>${ept.Desc}</label>
 
 							<label>${ept.Desc}</label>
 
-							<div class="ts action input">
 
+							<div class="ui action input">
 
 								<input type="number" min="${min}" max="${max}" step="${step}" placeholder="${name}">
 
 								<input type="number" min="${min}" max="${max}" step="${step}" placeholder="${name}">
 
-								<button class="ts primary icon button" onclick="executeEndpoint(this.parentNode.parentNode, this.parentNode.parentNode.getElementsByTagName('input')[0].value)" title="Send"><i class="send icon"></i></button>
 
+								<button class="ui primary icon button" onclick="executeEndpoint(this.parentNode.parentNode, this.parentNode.parentNode.getElementsByTagName('input')[0].value)" title="Send"><i class="send icon"></i></button>
 
 							</div>
 
 							</div>
 
 						</div>`);
 
 						</div>`);
 
 					}else if (ept.Type == "bool"){
 
 					}else if (ept.Type == "bool"){
 
 						$("#actionForm").append(`<div name="${ept.Name}" devid="${deviceID}" epd="${encodedEptData}" class="field">
 
 						$("#actionForm").append(`<div name="${ept.Name}" devid="${deviceID}" epd="${encodedEptData}" class="field">
 
-							<div class="ts toggle checkbox">
 
+							<div class="ui toggle checkbox">
 
 								<input type="checkbox" id="${encodeURIComponent(ept.Name)}" onchange="executeEndpoint(this.parentNode.parentNode, this.checked);">
 
 								<input type="checkbox" id="${encodeURIComponent(ept.Name)}" onchange="executeEndpoint(this.parentNode.parentNode, this.checked);">
 
 								<label for="${encodeURIComponent(ept.Name)}">${ept.Name}</label>
 
 								<label for="${encodeURIComponent(ept.Name)}">${ept.Name}</label>
 
 						</div></div>`);
 
 						</div></div>`);
 
@@ -497,7 +496,7 @@
 
 					}else if (ept.Type == "none"){
 
 					}else if (ept.Type == "none"){
 
 						//No action. (aka just a GET request endpoint)
 
 						//No action. (aka just a GET request endpoint)
 
 						$("#actionForm").append(`<div devid="${deviceID}" epd="${encodedEptData}" class="field">
 
 						$("#actionForm").append(`<div devid="${deviceID}" epd="${encodedEptData}" class="field">
 
-							<button class="ts info fluid button" title="${ept.Desc}" onclick="executeEndpoint(this.parentNode);">${name}</button>
 
+							<button class="ui info fluid button" title="${ept.Desc}" onclick="executeEndpoint(this.parentNode);">${name}</button>
 
 						</div>`);
 
 						</div>`);
 
 					}
 
 					}
 
 				});
 
 				});
 
@@ -511,7 +510,7 @@
 
 		}
 
 		}
 
 
 
 		function updateStatus(deviceUUID){
 
 		function updateStatus(deviceUUID){
 
-			//Get its status
 
+			//Get iui status
 
 			$.ajax({
 
 			$.ajax({
 
 					url: "../../../system/iot/status",
 
 					url: "../../../system/iot/status",
 
 					data: {devid: deviceUUID},
 
 					data: {devid: deviceUUID},
 
@@ -527,7 +526,7 @@
 
 								$("#actionForm").find(".field").each(function(){
 
 								$("#actionForm").find(".field").each(function(){
 
 									var thisName = $(this).attr("name");
 
 									var thisName = $(this).attr("name");
 
 									if (thisName == key){
 
 									if (thisName == key){
 
-										//Set its value
 
+										//Set iui value
 
 										var targetInput = $(this).find("input");
 
 										var targetInput = $(this).find("input");
 
 										if (targetInput.attr('type') == "checkbox"){
 
 										if (targetInput.attr('type') == "checkbox"){
 
 											//For handling checkbox
 
 											//For handling checkbox
 
@@ -547,9 +546,9 @@
 
 
 
 								if (found == false){
 
 								if (found == false){
 
 									//Append to status field
 
 									//Append to status field
 
-									$("#statusList").append(`<div class="ts header">
 
+									$("#statusList").append(`<div class="ui header">
 
 										${data[key]}
 
 										${data[key]}
 
-										<div class="sub header"><i class="marker icon"></i> ${key}</div>
 
+										<div class="sub header">${key}</div>
 
 									</div>`);
 
 									</div>`);
 
 								}
 
 								}
 
 							}
 
 							}

+ 0 - 2
web/SystemAO/utilities/audio.html
查看文件 

@@ -79,8 +79,6 @@ body {
 
 				
 				
 
 
 			</div>
 
 			</div>
 
-			
-			<!-- <button class="ts button" onclick="Show_Audio_Attrubute()">Show HTML5 Attrubute</button> -->
 
 			</div>
 
 			</div>
 
 		</div>
 
 		</div>
 
     </div>
 
     </div>

+ 39 - 18
web/login.system
查看文件 

@@ -6,10 +6,11 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
     <link rel="author" href="humans.txt"/>
 
     <link rel="author" href="humans.txt"/>
 
     <title>ArozOS - Login</title>
 
     <title>ArozOS - Login</title>
 
-    <link rel="stylesheet" href="script/tocas/tocas.css">
 
+    <link rel="stylesheet" href="script/semantic/semantic.min.css">
 
     <link rel="stylesheet" href="script/ao.css">
 
     <link rel="stylesheet" href="script/ao.css">
 
-    <script type="application/javascript" src="script/tocas/tocas.js"></script>
 
     <script type="application/javascript" src="script/jquery.min.js"></script>
 
     <script type="application/javascript" src="script/jquery.min.js"></script>
 
+    <script type="application/javascript" src="script/semantic/semantic.min.js"></script>
 
+    
     <style>
 
     <style>
 
     @media only screen and (max-height: 1000px) {
 
     @media only screen and (max-height: 1000px) {
 
         .leftPictureFrame {
 
         .leftPictureFrame {
 
@@ -72,12 +73,22 @@
 
 
 
     .themecolor{
 
     .themecolor{
 
         background-color: #5fa0d9 !important;
 
         background-color: #5fa0d9 !important;
 
+        transition: background-color 0.1s;
 
     }
 
     }
 
 
 
-    .subthemecolor{
 
+    .themecolor:hover{
 
         background-color: #99d0f2 !important;
 
         background-color: #99d0f2 !important;
 
     }
 
     }
 
 
 
+    .subthemecolor{
 
+        background-color: #405673 !important;
 
+        transition: background-color 0.1s;
 
+    }
 
+
 
+    .subthemecolor:hover{
 
+        background-color: #5d7aa0 !important;
 
+    }
 
+
 
     .loginbtn{
 
     .loginbtn{
 
         color:white !important;
 
         color:white !important;
 
         margin-top:4em;
 
         margin-top:4em;
 
@@ -96,32 +107,35 @@
 
         </div>
 
         </div>
 
         <div id="loginInterface" class="rightLoginFrame">
 
         <div id="loginInterface" class="rightLoginFrame">
 
             <br><br><br>
 
             <br><br><br>
 
-            <img class="ts medium image" src="data:image/png;base64, {{service_logo}}">
 
+            <img class="ui medium image" src="data:image/png;base64, {{service_logo}}">
 
 
 
-            <div class="ts borderless basic segment">
 
+            <div class="ui borderless basic segment">
 
                 <p><i class="key icon"></i> Sign in <span class="hostname">ArozOS</span> with your username and password</p>
 
                 <p><i class="key icon"></i> Sign in <span class="hostname">ArozOS</span> with your username and password</p>
 
-                <div class="oauthonly" style="display:none;">
 
-                    <a class="ts fluid small button oauthbtn subthemecolor" href="system/auth/oauth/login">Sign In via OAuth 2.0</a><br>
 
-                </div>
 
-                <div class="ldaponly" style="display:none;">
 
-                    <a class="ts fluid small button oauthbtn subthemecolor" href="ldapLogin.system">Sign In via LDAP</a><br>
 
-                </div>
 
-                <br>
 
-                <div class="ts fluid input textbox">
 
+                
+               
+                
+                <div class="ui fluid input textbox">
 
                     <input id="username" type="text" placeholder="Username">
 
                     <input id="username" type="text" placeholder="Username">
 
                 </div>
 
                 </div>
 
-                <div class="ts fluid input textbox">
 
+                <div class="ui fluid input textbox">
 
                     <input id="magic" type="password" placeholder="Password">
 
                     <input id="magic" type="password" placeholder="Password">
 
                 </div>
 
                 </div>
 
 
 
-                <div class="ts checkbox">
 
+                <div class="ui checkbox">
 
                     <input id="rmbme" type="checkbox">
 
                     <input id="rmbme" type="checkbox">
 
                     <label for="rmbme">Remember Me</label>
 
                     <label for="rmbme">Remember Me</label>
 
                 </div>
 
                 </div>
 
                 
                 
+                <br><br>
 
+                <button id="loginbtn" class="ui button loginbtn themecolor" style="display:inline-block;">Sign In</button>
 
+                <div class="oauthonly" style="display:inline-block;">
 
+                    <a class="ui button oauthbtn subthemecolor" href="system/auth/oauth/login">Sign In via OAuth 2.0</a><br>
 
+                </div>
 
+                <div class="ldaponly" style="display:inline-block;">
 
+                    <a class="ui button oauthbtn subthemecolor" href="ldapLogin.system">Sign In via LDAP</a><br>
 
+                </div>
 
                 <br>
 
                 <br>
 
-                <button id="loginbtn" class="ts button loginbtn themecolor">Sign In</button><br>
 
-                <div class="ts breadcrumb" style="margin-top:12px;">
 
+                <div class="ui breadcrumb" style="margin-top:12px;">
 
                     <a class="section signup" style="cursor:pointer; display:none;" href="public/register/register.system">Sign Up</a>
 
                     <a class="section signup" style="cursor:pointer; display:none;" href="public/register/register.system">Sign Up</a>
 
                     <div class="divider signup"> / </div>
 
                     <div class="divider signup"> / </div>
 
                     <a  id="forgetpw" class="section" style="cursor:pointer" href="reset.system">Forgot Password</a>
 
                     <a  id="forgetpw" class="section" style="cursor:pointer" href="reset.system">Forgot Password</a>
 
@@ -148,6 +162,8 @@
 
             isMobile = true;
 
             isMobile = true;
 
         }  
         }  
 
 
+
 
+
 
         if (isMobile){
 
         if (isMobile){
 
             //Full screen the login panel
 
             //Full screen the login panel
 
             $("#loginInterface").css("width","100%");
 
             $("#loginInterface").css("width","100%");
 
@@ -158,6 +174,10 @@
 
             window.location.href = "/user.system";
 
             window.location.href = "/user.system";
 
         }
 
         }
 
 
 
+        //Hide elements by default
 
+        $(".ldaponly").hide();
 
+        $(".oauthonly").hide();
 
+        
         $(document).ready(function(){
 
         $(document).ready(function(){
 
             var currentdate = new Date(); 
             var currentdate = new Date(); 
             var datetime = currentdate.getDate() + "/"
 
             var datetime = currentdate.getDate() + "/"
 
@@ -167,6 +187,7 @@
 
                 + currentdate.getMinutes() + ":" 
                 + currentdate.getMinutes() + ":" 
                 + currentdate.getSeconds();
 
                 + currentdate.getSeconds();
 
             $("#requestTime").text(datetime);
 
             $("#requestTime").text(datetime);
 
+            $(".ui.checkbox").checkbox();
 
             //Check if the user already logged in
 
             //Check if the user already logged in
 
             $.get("system/auth/checkLogin",function(data){
 
             $.get("system/auth/checkLogin",function(data){
 
                 try{
 
                 try{
 
@@ -216,7 +237,7 @@
 
                     if(document.referrer != window.location.origin + "/desktop.system" && document.referrer != window.location.origin + "/mobile.system" && path.origin + path.pathname !=  window.location.origin + "/system/auth/oauth/authorize"){
 
                     if(document.referrer != window.location.origin + "/desktop.system" && document.referrer != window.location.origin + "/mobile.system" && path.origin + path.pathname !=  window.location.origin + "/system/auth/oauth/authorize"){
 
                         $(".ts.borderless.basic.segment").attr("style","display: none;");
 
                         $(".ts.borderless.basic.segment").attr("style","display: none;");
 
                         $(".ts.borderless.basic.segment").attr("id","aoLogin");
 
                         $(".ts.borderless.basic.segment").attr("id","aoLogin");
 
-                        $(".ts.borderless.basic.segment").after('<div id="autoRedirectSegment" class="ts borderless basic segment"><p><i class="key icon"></i>Redirecting to organization sign-in page in 5 seconds...</p><br><a style="cursor: pointer;" onclick="stopAutoRedirect()">Cancel</a></div>');
 
+                        $(".ts.borderless.basic.segment").after('<div id="autoRedirectSegment" class="ui borderless basic segment"><p><i class="key icon"></i>Redirecting to organization sign-in page in 5 seconds...</p><br><a style="cursor: pointer;" onclick="stopAutoRedirect()">Cancel</a></div>');
 
                         autoRedirectTimer = setTimeout(function(){
 
                         autoRedirectTimer = setTimeout(function(){
 
                             window.location.href = "system/auth/oauth/login?redirect=" + redirectionAddress;
 
                             window.location.href = "system/auth/oauth/login?redirect=" + redirectionAddress;
 
                         }, 3000);
 
                         }, 3000);