login page refactoring

* drop jQuery * merge styles * show login error message
author: Vitaly Takmazov 2021-03-25 16:32:55 +0300
committer: Vitaly Takmazov 2021-03-25 16:32:55 +0300
commit: b4608708f6f0f2e0d8ae846da3c490cf894d2b46 (patch)
tree: e283025479df86cb0ae301efd3bbf4742216d3d2 /src/main
parent: 2181b5c3259bc2312513fdc384456d3392a82931 (diff)
2 files changed, 47 insertions, 17 deletions
diff --git a/src/main/java/com/juick/www/controllers/Login.java b/src/main/java/com/juick/www/controllers/Login.java
index 8f3e9e9a..33fcc011 100644
--- a/src/main/java/com/juick/www/controllers/Login.java
+++ b/src/main/java/com/juick/www/controllers/Login.java
@@ -19,12 +19,16 @@ package com.juick.www.controllers;
 import com.juick.model.User;
 import com.juick.service.UserService;
 import com.juick.service.security.annotation.Visitor;
+
+import org.springframework.security.core.AuthenticationException;
+import org.springframework.security.web.WebAttributes;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.ModelMap;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.RequestParam;
 
 import javax.inject.Inject;
+import javax.servlet.http.HttpSession;
 
 /**
  * @author Ugnich Anton
@@ -35,14 +39,21 @@ public class Login {
     private UserService userService;
 
     @GetMapping("/login")
-    public String getloginForm(
-            @Visitor User visitor,
-            @RequestParam(required = false, defaultValue = "true") boolean redirect) {
+    public String getloginForm(@Visitor User visitor, HttpSession session,
+            @RequestParam(required = false, defaultValue = "true") boolean redirect, ModelMap model) {
         if (!visitor.isAnonymous()) {
             return redirect ? "redirect:/" : "redirect:/login/success";
         }
-        return "views/login";
+        AuthenticationException authEx = (AuthenticationException) session
+                .getAttribute(WebAttributes.AUTHENTICATION_EXCEPTION);
+
+        if (authEx != null) {
+            model.addAttribute("authErrorMessage", authEx.getLocalizedMessage());
+        }
+
+        return "layouts/login";
     }
+
     @GetMapping("/login/success")
     public String getSuccessLogin(@Visitor User visitor, ModelMap model) {
         model.addAttribute("hash", userService.getHashByUID(visitor.getUid()));
diff --git a/src/main/resources/templates/views/login.html b/src/main/resources/templates/layouts/login.html
index 2f6cc741..4a3be9b8 100644
--- a/src/main/resources/templates/views/login.html
+++ b/src/main/resources/templates/layouts/login.html
@@ -3,20 +3,35 @@
 
 <head>
     <title>Juick</title>
-    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"
-        defer="defer"></script>
+    <link rel="stylesheet" type="text/css" href="{{ beans.webApp.styleUrl }}" />
+    <script>
+        function showLoginForm() {
+            var form = document.getElementById('signinform');
+            form.style.display = 'block';
+            var nick = document.getElementById('nickinput');
+            nick.focus();
+            return false;
+        }
+        function ready(fn) {
+            if (document.readyState != 'loading') {
+                fn();
+            } else {
+                document.addEventListener('DOMContentLoaded', fn);
+            }
+        }
+        ready(function() {
+            var params = new URLSearchParams(window.location.search);
+            if (params.has('error')) {
+                showLoginForm();
+            }
+        });
+    </script>
     <style>
         * {
             margin: 0;
             padding: 0;
         }
 
-        html {
-            font-family: sans-serif;
-            font-size: 12pt;
-            background: #f8f8f8;
-        }
-
         body {
             margin: 100px auto 0 auto;
             width: 1000px;
@@ -74,12 +89,12 @@
             padding-top: 25px;
         }
 
-        #signup > div {
+        #signup>div {
             width: 100%;
             margin: 15px 0;
         }
 
-        #signup > div > a {
+        #signup>div>a {
             display: block;
             width: 100%;
             height: 32px;
@@ -99,7 +114,7 @@
             background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAAXNSR0IArs4c6QAAAHJQTFRFbY+zbo+zbpCzb5C0cpO1c5O2dZW3dpa4e5m6gJ29gZ69lq/In7bNo7jPrcDUs8XXvs3dv87dy9fkztnlz9rm0Nrm093o1N7o1+Dq3OTt3ubu4Ofv5Orw7fH27vL28PP38vX49Pb5+vv8+/z9/Pz9////2jSYlQAAAG5JREFUOMvtkEcOgDAMBE3vvXdIyP+/iMMRKfYHmMtcRtE6AD8f1Is8pyKgAs0RGYO2HSWqMQaoBHVRgYsS3AsrtyFlrqgdJlCLb95gxQO6IkZCqL+KCjz0TQU5ejOf2a3aJXPF7BOB2PvMhp8PDzGRFgEe7xvEAAAAAElFTkSuQmCC") no-repeat #6d8fb3;
         }
 
-        #xmpp > a {
+        #xmpp>a {
             color: #333;
             background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAAXNSR0IArs4c6QAAAt9QTFRFBj5rCUFoFz5mDEFuDUNqGUJkGUNgAEprEkVtGkRhHURnHEZjAE+BIElmEEx/HEx0PUdTHE5wMEtfO0laJk5sFlN6Nk1cKFBuIlJ1R0pYRExTGF2KMVh1OFhxDGSQT1deNlx6TVhkIGKPUlphKWOFU1tiOmB+Vl1kmlAuNmaDQGpaIG6ba2Q2SGeBN2uUNW+LF3mGRmyLV3BAL3xWgmVJ2VAa2lEb0VYX11UafWlmam9mam5xy1km3lUea29y2VccvF8obHBz21gd4VcXS3ebPoVG1lwl5FkaU3iYYHaH2F0ejHFIx2Iv4V0aP4o+02As218g4l4bPYtFX351KZFaymU43mIrVYoz5mEfT4w0xGsrSo82eXqDw2s+z2k1OZVAT4SoPZU5RZM4NJVYbYc8VoSiWY43WItbuXBK52gYOI20TpM6YYSYfX98T5Q7foB9aYSZSZc8Ro21cYxH7GwdT46e0HFGeopO2HA8V5ZEf4s8528l1HM7UJs5UI+xXoyrWZhGY4ylyHdMwXhXQZS7XpdNU5tH4XJBYJZZcIuhbpJk0HdPU588kohqOZ2pVZS30XpX6XcxSaFrz4FIUqVWWqVCYZm23YBGxYRrZZ2QXpy/5YFC7IA+6oBRb6ZUcKZn44ZSgKJu54hHmJqXbbBNfKh3cq5nYqrMpJyVdrBjx5WCo56diamAjaWdyZeE8JFV8ZJWnqOlaK/Sd7Zh7pVdgbN6x52N8JdfwqCU8ZhgZLbXb7a5grtTmK+UxKKWtqahq6qhd7bHqauop6yvqqyp755pbbzRrK6rwamgib53qq+xra+sobSg86Jza8PJsLKujMVctrGwqLapv7Crr7Wr8ad1srSxj8R9uLOys7WyubSztLazkcZ/sre6tbe0r7m0tri1t7m2vri3uLq3v7m4ubu4nc9mpNBvos2UptJxtNWXtteFuNmbuNyQud2Rut6SwN+aweCbwuGdw+KeweKkF4OfHQAAAadJREFUOMtjeEoAMAwfBQ9vYJO68RCu4BYDq1bXmr2XHoMlnlzet2qGpTgX8y2EFWwensEdrW2FbUAlJ2zDKsqaYwo6eZHcIGzoor/s5IdPSfefPt3nf3Xn3HZpPU8xJAXWIvU88VOffcm78vTptrijJe4OfAmy1kgKzjMlaIfUPvvQcObp03U120ucTZQaGc8je1NZrd8g8cL7eUufPp0wfX2mvVydripKONzkTG1JXvL6TuXTR/Zb5gR6F+Vw30QNqNUss/pqn3/MvrTD7Wy1V9Y0jtXoIZnLv2nSnrfzF3bP3hDRu1wwHzOo1VWOTXn5yi/q7MTJuxTUscTFQyHNc5vfbU1btOCgjNBDbJH1UF5i9/XP6VVrJRUfYo/Nx3YcpS/euOo4Pn6MqeDx44f3LoY2SYnOXBlUfPPug8cwRQxQ6Qf39sda+HqZaQiwGydFlx+4eQ+qAqrg4b3bPqbmNhkrNm5cbGUUHply7d6Dh8hWPH744Oa186eOHDl06NDh46fP33zwEMUEiCMe3L13GwjuPbj38PHTx9jT5OPHj5G9MFQyDgA8riWAv9eLFAAAAABJRU5ErkJggg==") no-repeat #BBB;
         }
@@ -135,12 +150,15 @@
             margin: 3px 0;
             padding: 3px;
         }
+
+        .err {
+            color: red;
+        }
     </style>
     <link rel="icon" href="//i.juick.com/favicon.png" />
 </head>
 
 <body>
-
     <ul id="tags">
         <li><a href="/tag/juick" style="left: 359px; top: 120px; width: 311px; height: 99px;">juick</a></li>
         <li><a href="/tag/linux" style="left: 201px; top: 100px; width: 98px; height: 35px;">linux</a></li>
@@ -242,11 +260,12 @@
         </div>
     </div>
     <div id="signin">
-        <a href="#" onclick="$('#signinform').toggle(); $('#nickinput').focus(); return false">
+        <a href="#" onclick="return showLoginForm();">
             {{ i18n("messages","question.areRegistered") }}
         </a>
         <div id="signinform">
             <form action="/login" method="POST">
+                <p class="err">{{ authErrorMessage | default('') }}</p>
                 <input class="txt" type="text" name="username" placeholder='{{ i18n("messages","label.username") }}'
                     id="nickinput" />
                 <input class="txt" type="password" name="password"
author	Vitaly Takmazov	2021-03-25 16:32:55 +0300
committer	Vitaly Takmazov	2021-03-25 16:32:55 +0300
commit	b4608708f6f0f2e0d8ae846da3c490cf894d2b46 (patch)
tree	e283025479df86cb0ae301efd3bbf4742216d3d2 /src/main
parent	2181b5c3259bc2312513fdc384456d3392a82931 (diff)