|
|
@@ -7,6 +7,7 @@
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
|
|
<title>VSees Login</title>
|
|
|
<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>
|
|
|
<style type="text/css">
|
|
|
html,body{
|
|
|
@@ -185,7 +186,17 @@
|
|
|
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;
|
|
|
@@ -211,6 +222,11 @@
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
+ #login_button:disabled {
|
|
|
+ background-color: #ccc; /* 灰色背景 */
|
|
|
+ cursor: not-allowed; /* 禁用指针样式 */
|
|
|
+ }
|
|
|
+
|
|
|
#b_div{
|
|
|
width: 100%;
|
|
|
/*height: 120px;*/
|
|
|
@@ -218,6 +234,17 @@
|
|
|
background-color:#66677C;
|
|
|
|
|
|
}
|
|
|
+ #loading_icon{
|
|
|
+ position: absolute;
|
|
|
+ right: 89px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .loading-icon {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .loading-icon.visible {
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
|
|
|
</style>
|
|
|
<body marginheight="0px" marginwidth="0px">
|
|
|
@@ -240,9 +267,15 @@
|
|
|
<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;"/>
|
|
|
+ <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>
|
|
|
<!--阴影部分-->
|
|
|
@@ -255,10 +288,39 @@
|
|
|
</div>
|
|
|
|
|
|
<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() {
|
|
|
var user = document.getElementById("user_text");
|
|
|
var pwd = document.getElementById("password_text");
|
|
|
if (user.value.length > 0) {
|
|
|
+ showLoadingIcon();
|
|
|
//console.log("user: " + user.value);
|
|
|
//console.log("pwd: " + pwd.value);
|
|
|
|
|
|
@@ -274,7 +336,7 @@
|
|
|
}else{
|
|
|
alert(data['msg'])
|
|
|
}
|
|
|
-
|
|
|
+ hideLoadingIcon();
|
|
|
});
|
|
|
} else {
|
|
|
alert("please input user and password");
|
