fix behaviour if password is incorrect

index.html

@@ -46,7 +46,7 @@
 						<p id="user" />
 						<form onSubmit="doLogin()">
 						<table>
-							<tr><td colspan="2"><div id="underline"><input type="password" name="password" id="password" class="input" 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 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><select name="sessions" id="sessions" /></td><td align="right"><button type="submit" id="submit" class='input_submit'>Поехали!</button></td></tr>
 						</table>
 						</form>

main.js

@@ -49,20 +49,12 @@ function selectItemByValue(elmnt, value){
 function doLogin() {
     event.preventDefault();
 	var user = document.getElementById("user").textContent
-	var password = document.getElementById("password").value
 	var session = document.getElementById("sessions").value
-	if (!user || !password || !session) {
+	if (!user || !session) {
 		return false;
 	}
 
-	lightdm.cancel_authentication()
+	lightdm.cancel_authentication();
-
-	lightdm.show_prompt.connect((text, type) => {
-	  lightdm.respond(password);
-	})
-	lightdm.authentication_complete.connect(() => {
-	  lightdm.start_session(session);
-	})
 
 	updateDefaults(user, session);
 	lightdm.authenticate(user)
@@ -136,6 +128,26 @@ function initGreeter() {
 
 	document.getElementById("date").textContent=dateFormat(theme_utils.get_current_localized_date());
 	document.getElementById("time").textContent=theme_utils.get_current_localized_time();
+
+	lightdm.show_prompt.connect((text, type) => {
+	  var password = document.getElementById("password").value
+	  lightdm.respond(password);
+	});
+	lightdm.authentication_complete.connect(() => {
+		if (lightdm.is_authenticated) {
+            var session = document.getElementById("sessions").value
+			lightdm.start_session(session);
+		} else {
+			var password = document.getElementById("password")
+			// Add a class that defines an animation
+            password.classList.add('error');
+          
+            // remove the class after the animation completes
+            setTimeout(function() {
+                password.classList.remove('error');
+            }, 300);
+		}
+	});
 }
 
 window.addEventListener("GreeterReady", initGreeter)

style.css

@@ -222,3 +222,14 @@ table, tr, td {
   background-color: #00A4BD;
 }
 
+.error {
+    position: relative;
+    animation: shake .1s linear;
+    animation-iteration-count: 3;
+}
+
+@keyframes shake {
+    0% { left: -5px; }
+    100% { right: -5px; }
+}
+