From 0919a135b266713f30a99935c0ad6082d1628edc Mon Sep 17 00:00:00 2001
From: Sergey-V Markov <sergey@markow.su>
Date: Sat, 22 Oct 2022 15:39:37 +0300
Subject: [PATCH] fix behaviour if password is incorrect

---
 index.html |  2 +-
 main.js    | 32 ++++++++++++++++++++++----------
 style.css  | 11 +++++++++++
 3 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/index.html b/index.html
index f4010a1..6c1589e 100755
--- a/index.html
+++ b/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>
diff --git a/main.js b/main.js
index 2b7d4fb..b488d7d 100755
--- a/main.js
+++ b/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.show_prompt.connect((text, type) => {
-	  lightdm.respond(password);
-	})
-	lightdm.authentication_complete.connect(() => {
-	  lightdm.start_session(session);
-	})
+	lightdm.cancel_authentication();
 
 	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)
diff --git a/style.css b/style.css
index 31c2a3f..582b48c 100755
--- a/style.css
+++ b/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; }
+}
+