Эхлэл Бүгдийг харах Тусламж
Бүртгүүлэх Нэвтрэх
locky
/
ASJAzoauth
1
0
Салаа 0
Файлууд Асуудлууд 0 Хуулах хүсэлтүүд 0 Мэдлэгийн сан
Эх сурвалжийг харах

优化登录页面

locky 1 жил өмнө
parent
9623470553
commit
c61f3f1429
3 өөрчлөгдсөн 416 нэмэгдсэн , 246 устгасан
Өөрчлөллтийг нэгтгэж харах Өөрчлөлтийн статистик харах
  1. 64 2
      templates/login.html
  2. 288 242
      templates/login_anlapus.html
  3. 64 2
      templates/login_loocam.html

+ 64 - 2
templates/login.html
Файл харах 

@@ -7,6 +7,7 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
 
     <title>Zosi smart Login</title>
 
     <title>Zosi smart Login</title>
 
     <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
 
     <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
 
+		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-..." crossorigin="anonymous" />
 
 </head>
 
 </head>
 
 <style type="text/css">
 
 <style type="text/css">
 
 	html,body{
 
 	html,body{
 
@@ -185,7 +186,17 @@
 
 	    display: inline-block;
 
 	    display: inline-block;
 
 		font-family: "微软雅黑";
 
 		font-family: "微软雅黑";
 
 	}
 
 	}
 
+	#password_icon {
 
+		position: absolute; 
+		top: 8px; 
+		right: 10px; 
+		cursor: pointer;
 
+	}
 
+	
 	#c_center_div4{
 
 	#c_center_div4{
 
+		display: flex;
 
+    align-items: center;
 
+    justify-content: center;
 
 		width: 100%;
 
 		width: 100%;
 
 		height: 16%;
 
 		height: 16%;
 
 		text-align: center;
 
 		text-align: center;
 
@@ -211,6 +222,11 @@
 
 		cursor: pointer;
 
 		cursor: pointer;
 
 	}
 
 	}
 
 
 
+	#login_button:disabled {
 
+    background-color: #ccc; /* 灰色背景 */
 
+    cursor: not-allowed; /* 禁用指针样式 */
 
+  }
 
+
 
 	#b_div{
 
 	#b_div{
 
 		width: 100%;
 
 		width: 100%;
 
 		/*height: 120px;*/
 
 		/*height: 120px;*/
 
@@ -218,6 +234,17 @@
 
 		background-color:#66677C;
 
 		background-color:#66677C;
 
 
 
 	}
 
 	}
 
+	#loading_icon{
 
+		position: absolute;
 
+		right: 89px;
 
+		color: #fff;
 
+	}
 
+	.loading-icon {
 
+    display: none;
 
+  }
 
+  .loading-icon.visible {
 
+    display: inline-block;
 
+  }
 
 
 
 </style>
 
 </style>
 
 <body marginheight="0px" marginwidth="0px">
 
 <body marginheight="0px" marginwidth="0px">
 
@@ -240,9 +267,15 @@
 
 		<div id="c_center_div2">
 
 		<div id="c_center_div2">
 
 			<!--<img src="img/密码.png"/>-->
 
 			<!--<img src="img/密码.png"/>-->
 
 			<input id="password_text" type="password" placeholder="Password"/>
 
 			<input id="password_text" type="password" placeholder="Password"/>
 
+			<i
 
+      	id="password_icon"
 
+      	class="far fa-eye-slash"
 
+     	 	onclick="togglePasswordVisibility()"
 
+    ></i>
 
 		</div>
 
 		</div>
 
 		<div id="c_center_div4">
 
 		<div id="c_center_div4">
 
-			<input type="button" id="login_button" value="LOGIN" onclick="Login();return false;"/>
 
+			<input type="button" id="login_button" value="LOGIN" onclick="Login();return false"/>
 
+			<i id="loading_icon" class="fas fa-spinner fa-spin loading-icon"></i>
 
 		</div>
 
 		</div>
 
 	</div>
 
 	</div>
 
 	<!--阴影部分-->
 
 	<!--阴影部分-->
 
@@ -255,10 +288,39 @@
 
 </div>
 
 </div>
 
 
 
 <script type="text/javascript">
 
 <script type="text/javascript">
 
+		function showLoadingIcon() {
 
+      var loginButton = document.getElementById("login_button");
 
+      var loadingIcon = document.getElementById("loading_icon");
 
+      loginButton.disabled = true;
 
+      loadingIcon.classList.add("visible");
 
+    }
 
+
 
+    function hideLoadingIcon() {
 
+      var loginButton = document.getElementById("login_button");
 
+      var loadingIcon = document.getElementById("loading_icon");
 
+      loginButton.disabled = false;
 
+      loadingIcon.classList.remove("visible");
 
+    }
 
+
 
+		function togglePasswordVisibility() {
 
+      var passwordInput = document.getElementById("password_text");
 
+      var passwordIcon = document.getElementById("password_icon");
 
+      if (passwordInput.type === "password") {
 
+        passwordInput.type = "text";
 
+        passwordIcon.classList.remove("fa-eye-slash");
 
+        passwordIcon.classList.add("fa-eye");
 
+      } else {
 
+        passwordInput.type = "password";
 
+        passwordIcon.classList.remove("fa-eye");
 
+        passwordIcon.classList.add("fa-eye-slash");
 
+      }
 
+    }
 
+
 
     function Login() {
 
     function Login() {
 
         var user = document.getElementById("user_text");
 
         var user = document.getElementById("user_text");
 
         var pwd = document.getElementById("password_text");
 
         var pwd = document.getElementById("password_text");
 
         if (user.value.length > 0) {
 
         if (user.value.length > 0) {
 
+						showLoadingIcon();
 
             //console.log("user: " + user.value);
 
             //console.log("user: " + user.value);
 
             //console.log("pwd: " + pwd.value);
 
             //console.log("pwd: " + pwd.value);
 
 
 
@@ -274,7 +336,7 @@
 
                 }else{
 
                 }else{
 
                     alert(data['msg'])
 
                     alert(data['msg'])
 
                 }
 
                 }
 
-
 
+								hideLoadingIcon();
 
             });
 
             });
 
         } else {
 
         } else {
 
             alert("please input user and password");
 
             alert("please input user and password");

+ 288 - 242
templates/login_anlapus.html
Файл харах 

@@ -5,127 +5,119 @@
 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
     <meta name="viewport" content="width=device-width">
 
     <meta name="viewport" content="width=device-width">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
 
-    <title>Anlapus smart Login</title>
 
+    <title>Anlapus Login</title>
 
     <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
 
     <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
 
+		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-..." crossorigin="anonymous" />
 
 </head>
 
 </head>
 
 <style type="text/css">
 
 <style type="text/css">
 
-    html, body {
 
-        width: 100%;
 
-        height: 100%;
 
-        margin: 0px;
 
-    }
 
-
 
-    * {
 
-        margin: 0px;
 
-        padding: 0px;
 
-        box-sizing: border-box;
 
-    }
 
-
 
-    #t_div {
 
-        width: 100%;
 
-        /*height: 200px;*/
 
-        height: 25%;
 
-        background-color: #66677C;
 
-        margin-top: 0px;
 
-        margin-bottom: -20px;
 
-        /*border-bottom: solid 1px red;*/
 
-    }
 
-
 
-    #c_div {
 
-        width: 100%;
 
-        /*height: 430px ;*/
 
-        height: 50%;
 
-        margin-top: 0px;
 
-        margin-bottom: 0px;
 
-        border-top: solid 1px #66677C;
 
-        position: relative;
 
-        background-color: yellow;
 
-
 
-    }
 
-
 
-    #c_leftdiv {
 
-        width: 50%;
 
-        /*height: 430px;*/
 
-        height: 100%;
 
-        margin: 0px;
 
-        background-color: #7ab6b6;
 
-        float: left;
 
-        /*position: relative;*/
 
-        /*left: 50px;
 
-        top: 100px;*/
 
-    }
 
-
 
-    #c_rightdiv {
 
-        width: 50%;
 
-        /*height: 430px;*/
 
-        height: 100%;
 
-        margin: 0px;
 
-        background-color: #e5cfaa;
 
-        float: left;
 
-    }
 
-
 
-    /*阴影部分*/
 
-    /*#c_centerdiv-shadow{
 
-        width: 350px;
 
-        height: 390px;
 
-        background-color: #a09177;
 
-        position: absolute;
 
-        left: 0;
 
-        right: 0;
 
-        margin-left: 37.3%;
 
-        margin-top: 3.5%;
 
-        z-index: 1;
 
-    }*/
 
-
 
-    #c_centerdiv > p {
 
-        font-size: 20px;
 
-        font-weight: 100;
 
-        margin-left: 100px;
 
-        margin: 10px auto;
 
-        text-align: center;
 
-    }
 
-
 
-    #c_centerdiv > img {
 
-        margin-left: 10px;
 
-    }
 
-
 
-    #password_text {
 
-        width: 90%;
 
-        height: 50px;
 
-        line-height: 30px;
 
-        /*background-color: red;*/
 
-        font-size: 40px;
 
-
 
-    }
 
-
 
-    #c_centerdiv > img {
 
-        display: block;
 
-        position: relative;
 
-        left: 0px;
 
-        top: 10px;
 
-        padding: 0px;
 
-    }
 
-
 
-    #c_centerdiv {
 
-        background-color: #fff;
 
-        position: absolute;
 
-        left: 0;
 
-        right: 0;
 
-        margin-left: auto;
 
-        margin-right: auto;
 
-        top: 50%;
 
-        margin-top: -193px;
 
-        /*margin-top: -15.1%;*/
 
-        z-index: 10;
 
-    }
 
-
 
-    #c_centerdiv {
 
-        width: 350px;
 
-        height: 390px;
 
-        padding: 50px 30px;
 
-    }
 
-
 
-    #c_center_title {
 
+	html,body{
 
+		width: 100%;
 
+		height: 100%;
 
+		margin: 0px;
 
+	}
 
+	*{
 
+		margin: 0px;
 
+		padding: 0px;
 
+		box-sizing: border-box;
 
+	}
 
+	#t_div{
 
+		width: 100%;
 
+		/*height: 200px;*/
 
+		height: 25%;
 
+		background-color:#66677C;
 
+		margin-top: 0px;
 
+		margin-bottom: -20px;
 
+		/*border-bottom: solid 1px red;*/
 
+	}
 
+	#c_div{
 
+		width: 100%;
 
+		/*height: 430px ;*/
 
+		height: 50%;
 
+		margin-top: 0px;
 
+		margin-bottom: 0px;
 
+		border-top: solid 1px #66677C;
 
+		position: relative;
 
+		background-color: yellow;
 
+
 
+	}
 
+	#c_leftdiv{
 
+		width: 50%;
 
+		/*height: 430px;*/
 
+		height: 100%;
 
+		margin: 0px;
 
+		background-color: #7ab6b6;
 
+		float: left;
 
+		/*position: relative;*/
 
+		/*left: 50px;
 
+		top: 100px;*/
 
+	}
 
+	#c_rightdiv{
 
+		width: 50%;
 
+		/*height: 430px;*/
 
+		height: 100%;
 
+		margin: 0px;
 
+		background-color: #e5cfaa;
 
+		float: left;
 
+	}
 
+	/*阴影部分*/
 
+	/*#c_centerdiv-shadow{
 
+		width: 350px;
 
+		height: 390px;
 
+		background-color: #a09177;
 
+		position: absolute;
 
+		left: 0;
 
+		right: 0;
 
+		margin-left: 37.3%;
 
+		margin-top: 3.5%;
 
+		z-index: 1;
 
+	}*/
 
+
 
+	#c_centerdiv > p{
 
+		font-size: 20px;
 
+		font-weight: 100;
 
+		margin-left: 100px;
 
+		margin: 10px auto;
 
+		text-align: center;
 
+	}
 
+
 
+	#c_centerdiv > img{
 
+		margin-left: 10px;
 
+	}
 
+
 
+	#password_text{
 
+		width: 90%;
 
+		height: 50px;
 
+		line-height: 30px;
 
+		/*background-color: red;*/
 
+		font-size: 40px;
 
+
 
+	}
 
+	#c_centerdiv > img{
 
+		display: block;
 
+		position: relative;
 
+		left: 0px;
 
+		top: 10px;
 
+		padding: 0px;
 
+	}
 
+
 
+	#c_centerdiv{
 
+		background-color: #fff;
 
+		position: absolute;
 
+		left: 0;
 
+		right: 0;
 
+		margin-left: auto;
 
+		margin-right: auto;
 
+		top: 50%;
 
+		margin-top: -193px;
 
+		/*margin-top: -15.1%;*/
 
+		z-index: 10;
 
+	}
 
+	#c_centerdiv{
 
+		width: 350px;
 
+		height: 390px;
 
+		padding: 50px 30px;
 
+	}
 
+    #c_center_title{
 
         width: 100%;
 
         width: 100%;
 
         height: 19%;
 
         height: 19%;
 
         /*height: 55px;*/
 
         /*height: 55px;*/
 
@@ -136,161 +128,215 @@
 
         text-align: center;
 
         text-align: center;
 
         /*background-color: red;*/
 
         /*background-color: red;*/
 
     }
 
     }
 
-
 
-    #c_center_div1 {
 
-        width: 100%;
 
-        height: 19%;
 
-        /*height: 55px;*/
 
-        color: #555;
 
-        font-size: 10px;
 
-        font-weight: 600;
 
-        font-family: 'Arimo', sans-serif;
 
-        text-align: center;
 
-        /*background-color: red;*/
 
-    }
 
-
 
-    #c_center_div2 {
 
-        width: 100%;
 
-        height: 13.8%;
 
-        text-align: center;
 
-        padding: 0px;
 
-        position: relative;
 
-        /*background-color: yellow;*/
 
-        margin-top: 0px;
 
-        margin-top: 30px;
 
-    }
 
-
 
-    /*图片*/
 
-    #c_center_div2 > img {
 
-        position: absolute;
 
-        left: 0px;
 
-        top: 0px;
 
-    }
 
-
 
-    #user_text {
 
-        width: 100%;
 
-        /*width: 80%;*/
 
-        height: 40px;
 
-        float: right;
 
-        background-color: #fff;
 
-        font-size: 17px;
 
-        letter-spacing: 1px;
 
-        box-shadow: 0 0 0 0 transparent;
 
-        border: none;
 
-        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 
-        border-radius: 0;
 
-        display: inline-block;
 
-        font-family: "微软雅黑";
 
-    }
 
-
 
-    #password_text {
 
-        width: 100%;
 
-        /*width: 80%;*/
 
-        height: 40px;
 
-        float: right;
 
-        background-color: #fff;
 
-        font-size: 17px;
 
-        letter-spacing: 1px;
 
-        box-shadow: 0 0 0 0 transparent;
 
-        border: none;
 
-        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 
-        border-radius: 0;
 
-        display: inline-block;
 
-        font-family: "微软雅黑";
 
-    }
 
-
 
-    #c_center_div4 {
 
-        width: 100%;
 
-        height: 16%;
 
-        text-align: center;
 
-        padding: 0px;
 
-        position: relative;
 
-        /*	    background-color: yellow;*/
 
-        margin-top: 0px;
 
-        margin-top: 30px;
 
-    }
 
-
 
-    #login_button {
 
-        width: 50.7%;
 
-        height: 100%;
 
-        /*background-image: url(img/按钮初始界面.png);*/
 
-        outline: none;
 
-        border: none;
 
-        background-color: #7ab6b6;
 
-        border-radius: 30px;
 
-        font-size: large;
 
-        color: white;
 
-        font-family: Arial;
 
-    }
 
-
 
-    #login_button:hover {
 
-        cursor: pointer;
 
-    }
 
-
 
-    #b_div {
 
-        width: 100%;
 
-        /*height: 120px;*/
 
-        height: 27.2%;
 
-        background-color: #66677C;
 
-
 
-    }
 
+	#c_center_div1{
 
+		width: 100%;
 
+		height: 19%;
 
+		/*height: 55px;*/
 
+	    color: #555;
 
+	    font-size: 10px;
 
+	    font-weight: 600;
 
+	    font-family: 'Arimo', sans-serif;
 
+		text-align: center;
 
+	    /*background-color: red;*/
 
+	}
 
+	#c_center_div2{
 
+		width: 100%;
 
+		height: 13.8%;
 
+		text-align: center;
 
+	    padding: 0px;
 
+	    position: relative;
 
+	    /*background-color: yellow;*/
 
+	    margin-top: 0px;
 
+	    margin-top: 30px;
 
+	}
 
+	/*图片*/
 
+	#c_center_div2 > img{
 
+		position: absolute;
 
+		left: 0px;
 
+		top: 0px;
 
+	}
 
+	#user_text{
 
+		width: 100%;
 
+		/*width: 80%;*/
 
+		height: 40px;
 
+		float: right;
 
+		background-color: #fff;
 
+	    font-size: 17px;
 
+	    letter-spacing: 1px;
 
+	    box-shadow: 0 0 0 0 transparent;
 
+	    border: none;
 
+	    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 
+	    border-radius: 0;
 
+	    display: inline-block;
 
+		font-family: "微软雅黑";
 
+	}
 
+
 
+	#password_text{
 
+		width: 100%;
 
+		/*width: 80%;*/
 
+		height: 40px;
 
+		float: right;
 
+		background-color: #fff;
 
+	    font-size: 17px;
 
+	    letter-spacing: 1px;
 
+	    box-shadow: 0 0 0 0 transparent;
 
+	    border: none;
 
+	    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 
+	    border-radius: 0;
 
+	    display: inline-block;
 
+		font-family: "微软雅黑";
 
+	}
 
+	#password_icon {
 
+		position: absolute; 
+		top: 8px; 
+		right: 10px; 
+		cursor: pointer;
 
+	}
 
+	
+	#c_center_div4{
 
+		display: flex;
 
+    align-items: center;
 
+    justify-content: center;
 
+		width: 100%;
 
+		height: 16%;
 
+		text-align: center;
 
+	    padding: 0px;
 
+	    position: relative;
 
+/*	    background-color: yellow;*/
 
+	    margin-top: 0px;
 
+	    margin-top: 30px;
 
+	}
 
+	#login_button{
 
+		width: 50.7%;
 
+		height: 100%;
 
+		/*background-image: url(img/按钮初始界面.png);*/
 
+		outline:none;
 
+		border:none;
 
+		background-color: #7ab6b6;
 
+		border-radius:30px;
 
+		font-size: large;
 
+		color: white;
 
+		font-family: Arial;
 
+	}
 
+	#login_button:hover{
 
+		cursor: pointer;
 
+	}
 
+
 
+	#login_button:disabled {
 
+    background-color: #ccc; /* 灰色背景 */
 
+    cursor: not-allowed; /* 禁用指针样式 */
 
+  }
 
+
 
+	#b_div{
 
+		width: 100%;
 
+		/*height: 120px;*/
 
+		height: 27.2%;
 
+		background-color:#66677C;
 
+
 
+	}
 
+	#loading_icon{
 
+		position: absolute;
 
+		right: 89px;
 
+		color: #fff;
 
+	}
 
+	.loading-icon {
 
+    display: none;
 
+  }
 
+  .loading-icon.visible {
 
+    display: inline-block;
 
+  }
 
 
 
 </style>
 
 </style>
 
 <body marginheight="0px" marginwidth="0px">
 
 <body marginheight="0px" marginwidth="0px">
 
 <div id="t_div">
 
 <div id="t_div">
 
 </div>
 
 </div>
 
 <div id="c_div">
 
 <div id="c_div">
 
-    <div id="c_leftdiv"></div>
 
-    <div id="c_rightdiv"></div>
 
-    <div id="c_centerdiv">
 
+	<div id="c_leftdiv"></div>
 
+	<div id="c_rightdiv"></div>
 
+	<div id="c_centerdiv">
 
         <div id="c_center_title">
 
         <div id="c_center_title">
 
-            ANLAPUS
 
+            Anlapus
 
         </div>
 
         </div>
 
-        <div id="c_center_div1">
 
+		<div id="c_center_div1">
 
             Please enter your Anlapus account for association
 
             Please enter your Anlapus account for association
 
-        </div>
 
-        <div id="c_center_div2">
 
-            <!--<img src="img/用户.png"/>-->
 
-            <input id="user_text" type="text" placeholder="Account"/>
 
-        </div>
 
-        <div id="c_center_div2">
 
-            <!--<img src="img/密码.png"/>-->
 
-            <input id="password_text" type="password" placeholder="Password"/>
 
-        </div>
 
-        <div id="c_center_div4">
 
-            <input type="button" id="login_button" value="LOGIN" onclick="Login();return false;"/>
 
-        </div>
 
-    </div>
 
-    <!--阴影部分-->
 
-    <!--	<div id="c_centerdiv-shadow">-->
 
-
 
-</div>
 
+		</div>
 
+		<div id="c_center_div2">
 
+			<!--<img src="img/用户.png"/>-->
 
+			<input id="user_text" type="text" placeholder="Account"/>
 
+		</div>
 
+		<div id="c_center_div2">
 
+			<!--<img src="img/密码.png"/>-->
 
+			<input id="password_text" type="password" placeholder="Password"/>
 
+			<i
 
+      	id="password_icon"
 
+      	class="far fa-eye-slash"
 
+     	 	onclick="togglePasswordVisibility()"
 
+    ></i>
 
+		</div>
 
+		<div id="c_center_div4">
 
+			<input type="button" id="login_button" value="LOGIN" onclick="Login();return false"/>
 
+			<i id="loading_icon" class="fas fa-spinner fa-spin loading-icon"></i>
 
+		</div>
 
+	</div>
 
+	<!--阴影部分-->
 
+<!--	<div id="c_centerdiv-shadow">-->
 
+
 
+	</div>
 
 </div>
 
 </div>
 
 <div id="b_div">
 
 <div id="b_div">
 
 
 
 </div>
 
 </div>
 
 
 
 <script type="text/javascript">
 
 <script type="text/javascript">
 
+		function showLoadingIcon() {
 
+      var loginButton = document.getElementById("login_button");
 
+      var loadingIcon = document.getElementById("loading_icon");
 
+      loginButton.disabled = true;
 
+      loadingIcon.classList.add("visible");
 
+    }
 
+
 
+    function hideLoadingIcon() {
 
+      var loginButton = document.getElementById("login_button");
 
+      var loadingIcon = document.getElementById("loading_icon");
 
+      loginButton.disabled = false;
 
+      loadingIcon.classList.remove("visible");
 
+    }
 
+
 
+		function togglePasswordVisibility() {
 
+      var passwordInput = document.getElementById("password_text");
 
+      var passwordIcon = document.getElementById("password_icon");
 
+      if (passwordInput.type === "password") {
 
+        passwordInput.type = "text";
 
+        passwordIcon.classList.remove("fa-eye-slash");
 
+        passwordIcon.classList.add("fa-eye");
 
+      } else {
 
+        passwordInput.type = "password";
 
+        passwordIcon.classList.remove("fa-eye");
 
+        passwordIcon.classList.add("fa-eye-slash");
 
+      }
 
+    }
 
+
 
     function Login() {
 
     function Login() {
 
         var user = document.getElementById("user_text");
 
         var user = document.getElementById("user_text");
 
         var pwd = document.getElementById("password_text");
 
         var pwd = document.getElementById("password_text");
 
         if (user.value.length > 0) {
 
         if (user.value.length > 0) {
 
+						showLoadingIcon();
 
             //console.log("user: " + user.value);
 
             //console.log("user: " + user.value);
 
             //console.log("pwd: " + pwd.value);
 
             //console.log("pwd: " + pwd.value);
 
 
 
             var params = ("user=" + user.value + "&pwd=" + pwd.value + "&state={{ state }}" + "&client_id={{ client_id }}"
 
             var params = ("user=" + user.value + "&pwd=" + pwd.value + "&state={{ state }}" + "&client_id={{ client_id }}"
 
-                + "&response_type={{ response_type }}" + "&scope={{ scope }}" + "&redirect_uri={{ redirect_uri }}
 
+                + "&response_type={{ response_type }}" + "&scope={{ scope }}" + "&redirect_uri={{ redirect_uri }}"
 
                 + "&skill_name={{ skill_name }}");
 
                 + "&skill_name={{ skill_name }}");
 
             $.get("/oa2/login", params, function (reUrl) {
 
             $.get("/oa2/login", params, function (reUrl) {
 
                 //alert(reUrl);
 
                 //alert(reUrl);
 
                 let data = JSON.parse(reUrl)
 
                 let data = JSON.parse(reUrl)
 
-                if (data['code'] === 0) {
 
+                if(data['code']===0){
 
                     console.log('request start')
 
                     console.log('request start')
 
                     window.location = data['res'];
 
                     window.location = data['res'];
 
-                } else {
 
+                }else{
 
                     alert(data['msg'])
 
                     alert(data['msg'])
 
                 }
 
                 }
 
-
 
+								hideLoadingIcon();
 
             });
 
             });
 
         } else {
 
         } else {
 
             alert("please input user and password");
 
             alert("please input user and password");

+ 64 - 2
templates/login_loocam.html
Файл харах 

@@ -7,6 +7,7 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
 
     <title>Loocam Login</title>
 
     <title>Loocam Login</title>
 
     <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
 
     <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
 
+		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-..." crossorigin="anonymous" />
 
 </head>
 
 </head>
 
 <style type="text/css">
 
 <style type="text/css">
 
 	html,body{
 
 	html,body{
 
@@ -185,7 +186,17 @@
 
 	    display: inline-block;
 
 	    display: inline-block;
 
 		font-family: "微软雅黑";
 
 		font-family: "微软雅黑";
 
 	}
 
 	}
 
+	#password_icon {
 
+		position: absolute; 
+		top: 8px; 
+		right: 10px; 
+		cursor: pointer;
 
+	}
 
+	
 	#c_center_div4{
 
 	#c_center_div4{
 
+		display: flex;
 
+    align-items: center;
 
+    justify-content: center;
 
 		width: 100%;
 
 		width: 100%;
 
 		height: 16%;
 
 		height: 16%;
 
 		text-align: center;
 
 		text-align: center;
 
@@ -211,6 +222,11 @@
 
 		cursor: pointer;
 
 		cursor: pointer;
 
 	}
 
 	}
 
 
 
+	#login_button:disabled {
 
+    background-color: #ccc; /* 灰色背景 */
 
+    cursor: not-allowed; /* 禁用指针样式 */
 
+  }
 
+
 
 	#b_div{
 
 	#b_div{
 
 		width: 100%;
 
 		width: 100%;
 
 		/*height: 120px;*/
 
 		/*height: 120px;*/
 
@@ -218,6 +234,17 @@
 
 		background-color:#66677C;
 
 		background-color:#66677C;
 
 
 
 	}
 
 	}
 
+	#loading_icon{
 
+		position: absolute;
 
+		right: 89px;
 
+		color: #fff;
 
+	}
 
+	.loading-icon {
 
+    display: none;
 
+  }
 
+  .loading-icon.visible {
 
+    display: inline-block;
 
+  }
 
 
 
 </style>
 
 </style>
 
 <body marginheight="0px" marginwidth="0px">
 
 <body marginheight="0px" marginwidth="0px">
 
@@ -240,9 +267,15 @@
 
 		<div id="c_center_div2">
 
 		<div id="c_center_div2">
 
 			<!--<img src="img/密码.png"/>-->
 
 			<!--<img src="img/密码.png"/>-->
 
 			<input id="password_text" type="password" placeholder="Password"/>
 
 			<input id="password_text" type="password" placeholder="Password"/>
 
+			<i
 
+      	id="password_icon"
 
+      	class="far fa-eye-slash"
 
+     	 	onclick="togglePasswordVisibility()"
 
+    ></i>
 
 		</div>
 
 		</div>
 
 		<div id="c_center_div4">
 
 		<div id="c_center_div4">
 
-			<input type="button" id="login_button" value="LOGIN" onclick="Login();return false;"/>
 
+			<input type="button" id="login_button" value="LOGIN" onclick="Login();return false"/>
 
+			<i id="loading_icon" class="fas fa-spinner fa-spin loading-icon"></i>
 
 		</div>
 
 		</div>
 
 	</div>
 
 	</div>
 
 	<!--阴影部分-->
 
 	<!--阴影部分-->
 
@@ -255,10 +288,39 @@
 
 </div>
 
 </div>
 
 
 
 <script type="text/javascript">
 
 <script type="text/javascript">
 
+		function showLoadingIcon() {
 
+      var loginButton = document.getElementById("login_button");
 
+      var loadingIcon = document.getElementById("loading_icon");
 
+      loginButton.disabled = true;
 
+      loadingIcon.classList.add("visible");
 
+    }
 
+
 
+    function hideLoadingIcon() {
 
+      var loginButton = document.getElementById("login_button");
 
+      var loadingIcon = document.getElementById("loading_icon");
 
+      loginButton.disabled = false;
 
+      loadingIcon.classList.remove("visible");
 
+    }
 
+
 
+		function togglePasswordVisibility() {
 
+      var passwordInput = document.getElementById("password_text");
 
+      var passwordIcon = document.getElementById("password_icon");
 
+      if (passwordInput.type === "password") {
 
+        passwordInput.type = "text";
 
+        passwordIcon.classList.remove("fa-eye-slash");
 
+        passwordIcon.classList.add("fa-eye");
 
+      } else {
 
+        passwordInput.type = "password";
 
+        passwordIcon.classList.remove("fa-eye");
 
+        passwordIcon.classList.add("fa-eye-slash");
 
+      }
 
+    }
 
+
 
     function Login() {
 
     function Login() {
 
         var user = document.getElementById("user_text");
 
         var user = document.getElementById("user_text");
 
         var pwd = document.getElementById("password_text");
 
         var pwd = document.getElementById("password_text");
 
         if (user.value.length > 0) {
 
         if (user.value.length > 0) {
 
+						showLoadingIcon();
 
             //console.log("user: " + user.value);
 
             //console.log("user: " + user.value);
 
             //console.log("pwd: " + pwd.value);
 
             //console.log("pwd: " + pwd.value);
 
 
 
@@ -274,7 +336,7 @@
 
                 }else{
 
                 }else{
 
                     alert(data['msg'])
 
                     alert(data['msg'])
 
                 }
 
                 }
 
-
 
+								hideLoadingIcon();
 
             });
 
             });
 
         } else {
 
         } else {
 
             alert("please input user and password");
 
             alert("please input user and password");