diff --git a/index.html b/index.html index f4010a1..6c1589e 100755 --- a/index.html +++ b/index.html @@ -46,7 +46,7 @@
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; } +} +