2 files changed, 16 insertions, 3 deletions
diff --git a/src/main/resources/js/login.js b/src/main/resources/js/login.js
new file mode 100644
index 0000000..f4e2bce
--- /dev/null
+++ b/src/main/resources/js/login.js
@@ -0,0 +1,7 @@
+const tryAgain = document.getElementById("tryAgain");
+const countdown = document.getElementById("counter");
+
+setInterval(() => {
+    if (Number(countdown.innerText) === 0) tryAgain.style.display = "none";
+    countdown.innerText = Number(countdown.innerText) - 1;
+}, 1000);
diff --git a/src/main/resources/views/login.rocker.html b/src/main/resources/views/login.rocker.html
index 66d9ba2..23a9aff 100644
--- a/src/main/resources/views/login.rocker.html
+++ b/src/main/resources/views/login.rocker.html
@@ -1,12 +1,17 @@
-@args (String message)
+@args (String message, Integer counter)
 
+@js => {
+<script>const counter = @counter;</script>
+<script src="/js/login.js"></script>
+}
 
-@layout.template("Login", RockerContent.NONE, RockerContent.NONE) -> {
+@layout.template("Login", RockerContent.NONE, js) -> {
 <form action="login" id="login-form" method="post">
     <div>
         <label for="username">Username:</label>
         <input id="username" name="username" type="text"/>
-
+    </div>
+    <div>
         <label for="password">Password:</label>
         <input id="password" name="password" type="password"/>
     </div>
@@ -15,6 +20,7 @@
 
     @if(message.length() > 0) {
     <small>@message</small>
+    <small id="tryAgain">Please try again in <span id="counter">@counter</span> seconds.</small>
     }
 </form>
 }