new waiting state while authentificating

index.html

@@ -46,7 +46,9 @@
 						<p id="user" />
 						<form onSubmit="doLogin()">
 						<table>
-							<tr><td colspan="2"><div id="underline"><input type="password" name="password" id="password" autocomplete="off" placeholder="Введите пароль" autofocus /><img src="images/eye.png" id="eye" onClick="togglePasswordVisibility()" style="width:18px;height:18px;vertical-align: middle" /></div></td></tr>
+							<tr><td colspan="2"><div class="view_port"><div id="underline"><input type="password" name="password" id="password" autocomplete="off" placeholder="Введите пароль" autofocus /><img src="images/eye.png" id="eye" onClick="togglePasswordVisibility()" style="width:18px;height:18px;vertical-align: middle" /></div>
+							<div id="cylon_eye"/></div>
+							</td></tr>
 							<tr><td><select name="sessions" id="sessions" /></td><td align="right"><button type="submit" id="submit" class='input_submit'>Поехали!</button></td></tr>
 						</table>
 						</form>

main.js

@@ -2,6 +2,7 @@ const DEFAULT_USER = "defaultUser";
 const DEFAULT_SESSION = "defaultSession";
 const DEFAULT_WALLPAPPER = "defaultWallpapper";
 const WALLPAPPER_ELEMENT = "wallpappers";
+const WAITING_CLASS = "waiting";
 
 function togglePasswordVisibility() {
   var passwd = document.getElementById("password");
@@ -15,6 +16,21 @@ function togglePasswordVisibility() {
   }
 }
 
+function toggleWaitingState(waiting) {
+  var cylon_eye = document.getElementById("cylon_eye");
+  var passwd = document.getElementById("password");
+  passwd.disabled = waiting;
+
+  var submit = document.getElementById("submit");
+//  submit.disabled = waiting;
+
+  if (waiting) {
+	  cylon_eye.classList.add(WAITING_CLASS);
+  } else {
+	  cylon_eye.classList.remove(WAITING_CLASS);
+  }
+}
+
 function updateDefaults(user, session) {
 
 	localStorage.setItem(DEFAULT_USER, user)
@@ -57,6 +73,8 @@ function doLogin() {
 	lightdm.cancel_authentication();
 
 	updateDefaults(user, session);
+
+	toggleWaitingState(true);
 	lightdm.authenticate(user)
 	return false;
 }
@@ -134,6 +152,7 @@ function initGreeter() {
 	  lightdm.respond(password);
 	});
 	lightdm.authentication_complete.connect(() => {
+		toggleWaitingState(false);
 		if (lightdm.is_authenticated) {
             var session = document.getElementById("sessions").value
 			lightdm.start_session(session);

style.css

@@ -4,6 +4,7 @@
 	--btbg: gray;
 	--opacity: 0.9;
 	--color: white;
+	--color-wait : gray;
 }
 
 html, body {
@@ -14,7 +15,7 @@ html, body {
 body {
 	background-image: url("wallpappers/Rosatomflot.jpg");
 	background-repeat: no-repeat;
-  background-size: 100% 100%;
+	background-size: 100% 100%;
 }
 
 #submit {
@@ -233,3 +234,25 @@ table, tr, td {
     100% { right: -5px; }
 }
 
+.view_port {
+  overflow: hidden;
+}
+
+#cylon_eye {
+	position: relative;
+	top: -7px; 
+	left: 0px;
+	color: white;
+  	height: 2px;
+  	width: 30%;
+}
+
+.waiting {
+	background-color: var(--color-wait);
+	background-image: linear-gradient(to right, var(--color) 15%, var(--color-wait) 50%, var(--color) 85%);
+
+	animation: 4s linear 0s infinite alternate move_eye;
+}
+
+@keyframes move_eye { from { margin-left:-30%; } to { margin-left:100%; }  }
+

web-greeter-theme-basealt.spec

@@ -1,8 +1,8 @@
 %define shortname basealt
 
 Name: web-greeter-theme-basealt
-Version:  1.0.2
-Release:  alt3
+Version:  1.0.3
+Release:  alt1
 
 Summary:  A theme for web-greeter on AltLinux
 License:  MIT
@@ -34,6 +34,9 @@ rsync -rv --exclude-from=./.copyignore ./* %buildroot%_datadir/web-greeter/theme
 %_datadir/web-greeter/themes/%shortname/*
 
 %changelog
+* Tue Oct 25 2022 Sergey-V Markov <sergey@markow.su> 1.0.3-alt1
+- New feature to wait authentication
+
 * Sat Oct 22 2022 Sergey-V Markov <sergey@markow.su> 1.0.2-alt3
 - Add shortname usage