Remove login popup

6 files changed, 166 insertions, 380 deletions

diff --git a/src/main/assets/scripts.js b/src/main/assets/scripts.js
index cc811808..8d201438 100644
--- a/src/main/assets/scripts.js
+++ b/src/main/assets/scripts.js
@@ -416,29 +416,6 @@ function checkUsername() {
 
 /******************************************************************************/
 
-function openDialogLogin() {
-    const token = document.body.getAttribute('data-token');
-    let html = `
-        <div class="dialoglogin">
-            <p>${i18n('loginDialog.pleaseIntroduceYourself')}:</p>
-            <a href="mailto:juick@juick.com?subject=LOGIN" id="signemail">${evilIcon('ei-envelope')}${i18n('loginDialog.email')}</a>
-            <a href="/_fblogin" id="signfb">${evilIcon('ei-sc-facebook')}${i18n('loginDialog.facebook')}</a>
-            <a href="/_vklogin" id="signvk">${evilIcon('ei-sc-vk')}${i18n('loginDialog.vk')}</a>
-            <a href="/_apple" id="signapple"><img src="https://appleid.cdn-apple.com/appleid/button"></a>
-            <p>${i18n('loginDialog.registeredAlready')}</p>
-            <form action="/login" method="POST">
-                <input type="hidden" name="_csrf" value="${token}" />
-                <input class="signinput" type="text" name="username" placeholder="${i18n('loginDialog.username')}" autocomplete="username" /><br/>
-                <input class="signinput" type="password" name="password" placeholder="${i18n('loginDialog.password')}" autocomplete="current-password" /><br/>
-                <input class="signsubmit Button" type="submit" value="OK"/>
-            </form>
-        </div>`;
-    openDialog(html);
-    return false;
-}
-
-/******************************************************************************/
-
 function resultMessage(str) {
     var result = document.createElement('p');
     result.textContent = str;
@@ -711,12 +688,6 @@ ready(() => {
             e.preventDefault();
         });
     });
-    Array.from(document.querySelectorAll('.a-login')).forEach(function(el) {
-        el.addEventListener('click', function(e) {
-            openDialogLogin();
-            e.preventDefault();
-        });
-    });
     var unfoldall = document.getElementById('unfoldall');
     if (unfoldall) {
         unfoldall.addEventListener('click', function(e) {
diff --git a/src/main/assets/style.css b/src/main/assets/style.css
index 0842b492..ab00fab7 100644
--- a/src/main/assets/style.css
+++ b/src/main/assets/style.css
@@ -1,4 +1,4 @@
-@import "../../../node_modules/evil-icons/assets/evil-icons.css";
+@import url("../../../node_modules/evil-icons/assets/evil-icons.css");
 @custom-media --viewport-desktop (width >=62.5rem);
 @custom-media --viewport-mobile (width < 62.5rem);
 
@@ -991,6 +991,81 @@ article p {
     }
 }
 
+#signup,
+#signin {
+    width: 250px;
+}
+
+#signup {
+    padding-top: 25px;
+}
+
+#signup>div {
+    width: 100%;
+    margin: 15px 0;
+}
+
+#signup>div>a {
+    display: block;
+    width: 100%;
+    height: 32px;
+    line-height: 32px;
+    text-indent: 37px;
+    text-decoration: none;
+    overflow: hidden;
+}
+
+#facebook a {
+    color: #FFF;
+    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAAXNSR0IArs4c6QAAADNQTFRFO1edX3ewl6bLnKrOoK3QrrrYvMXe2N7r3OLu3+Tv5urz7O/29vf6+Pn7+vv9/Pz9////ykQjsQAAAEZJREFUOMtjYBgFuAATO68ADxdOaUYuATDAqYBbAL8CFgECCjiBcqz4XMiPz3oQEKCtAgEkwEdIAQchBWyEFDAPkDdHsAIAhZkIwz/VK/UAAAAASUVORK5CYII=") no-repeat #3A569C;
+}
+
+#vk a {
+    color: #FFF;
+    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAAXNSR0IArs4c6QAAAHJQTFRFbY+zbo+zbpCzb5C0cpO1c5O2dZW3dpa4e5m6gJ29gZ69lq/In7bNo7jPrcDUs8XXvs3dv87dy9fkztnlz9rm0Nrm093o1N7o1+Dq3OTt3ubu4Ofv5Orw7fH27vL28PP38vX49Pb5+vv8+/z9/Pz9////2jSYlQAAAG5JREFUOMvtkEcOgDAMBE3vvXdIyP+/iMMRKfYHmMtcRtE6AD8f1Is8pyKgAs0RGYO2HSWqMQaoBHVRgYsS3AsrtyFlrqgdJlCLb95gxQO6IkZCqL+KCjz0TQU5ejOf2a3aJXPF7BOB2PvMhp8PDzGRFgEe7xvEAAAAAElFTkSuQmCC") no-repeat #6d8fb3;
+}
+
+#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;
+}
+
+#xmppinfo {
+    background: #FFF;
+    padding: 10px;
+    display: none;
+}
+
+#signin {
+    text-align: center;
+    font-size: small;
+}
+
+#signinform {
+    background: #FFF;
+    padding: 10px 15px;
+    margin-top: 15px;
+    display: none;
+}
+
+input.txt {
+    width: 212px;
+    border: 1px solid #CCC;
+    margin: 3px 0;
+    padding: 3px;
+}
+
+input.submit {
+    width: 70px;
+    border: 1px solid #CCC;
+    margin: 3px 0;
+    padding: 3px;
+}
+
+.err {
+    color: red;
+}
+
 @media (--viewport-desktop) {
     @supports (position: sticky) {
         #column {
diff --git a/src/main/java/com/juick/www/controllers/Login.java b/src/main/java/com/juick/www/controllers/Login.java
deleted file mode 100644
index f78ccef0..00000000
--- a/src/main/java/com/juick/www/controllers/Login.java
+++ /dev/null
@@ -1,69 +0,0 @@
-/*
- * Copyright (C) 2008-2020, Juick
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-package com.juick.www.controllers;
-
-import com.juick.model.User;
-import com.juick.service.UserService;
-import com.juick.service.security.annotation.Visitor;
-
-import jakarta.servlet.http.HttpSession;
-
-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;
-
-/**
- * @author Ugnich Anton
- */
-@Controller
-public class Login {
-    @Inject
-    private UserService userService;
-
-    @GetMapping("/login")
-    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";
-        }
-        AuthenticationException authEx = (AuthenticationException) session
-                .getAttribute(WebAttributes.AUTHENTICATION_EXCEPTION);
-
-        if (authEx != null) {
-            model.addAttribute("authErrorMessage", authEx.getLocalizedMessage());
-        }
-
-        String socialLoginError = (String) session.getAttribute(SocialLogin.AUTH_ERROR);
-
-        if (socialLoginError != null) {
-            model.addAttribute("authErrorMessage", socialLoginError);
-        }
-
-        return "layouts/login";
-    }
-
-    @GetMapping("/login/success")
-    public String getSuccessLogin(@Visitor User visitor, ModelMap model) {
-        model.addAttribute("hash", userService.getHashByUID(visitor.getUid()));
-        return "views/login_success";
-    }
-}
diff --git a/src/main/java/com/juick/www/controllers/Site.java b/src/main/java/com/juick/www/controllers/Site.java
index 46440b2b..a0b8c5b0 100644
--- a/src/main/java/com/juick/www/controllers/Site.java
+++ b/src/main/java/com/juick/www/controllers/Site.java
@@ -26,6 +26,7 @@ import com.juick.util.WebUtils;
 import com.juick.www.WebApp;
 
 import jakarta.servlet.http.HttpServletRequest;
+import jakarta.servlet.http.HttpSession;
 
 import com.juick.service.*;
 import com.juick.service.security.annotation.Visitor;
@@ -36,6 +37,8 @@ import org.apache.commons.text.StringEscapeUtils;
 import org.springframework.http.HttpStatus;
 import org.springframework.http.MediaType;
 import org.springframework.http.ResponseEntity;
+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.CookieValue;
@@ -92,6 +95,36 @@ public class Site {
                         .map(t -> t.getTag().getName()).collect(Collectors.toList()));
     }
 
+    @GetMapping("/login")
+    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";
+        }
+        model.addAttribute("visitor", visitor);
+        model.addAttribute("tags", tagService.getPopularTags());
+        AuthenticationException authEx = (AuthenticationException) session
+                .getAttribute(WebAttributes.AUTHENTICATION_EXCEPTION);
+
+        if (authEx != null) {
+            model.addAttribute("authErrorMessage", authEx.getLocalizedMessage());
+        }
+
+        String socialLoginError = (String) session.getAttribute(SocialLogin.AUTH_ERROR);
+
+        if (socialLoginError != null) {
+            model.addAttribute("authErrorMessage", socialLoginError);
+        }
+
+        return "views/login";
+    }
+
+    @GetMapping("/login/success")
+    public String getSuccessLogin(@Visitor User visitor, ModelMap model) {
+        model.addAttribute("hash", userService.getHashByUID(visitor.getUid()));
+        return "views/login_success";
+    }
+
     @GetMapping("/")
     protected String doGet(@Visitor User visitor, Locale locale, @RequestParam(required = false) String tag,
             @RequestParam(name = "show", required = false) String paramShow,
diff --git a/src/main/resources/templates/layouts/login.html b/src/main/resources/templates/layouts/login.html
deleted file mode 100644
index 86eb45fa..00000000
--- a/src/main/resources/templates/layouts/login.html
+++ /dev/null
@@ -1,281 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-    <title>Juick</title>
-    <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;
-        }
-
-        body {
-            margin: 100px auto 0 auto;
-            width: 1000px;
-        }
-
-        a {
-            color: #069;
-        }
-
-        ul {
-            float: left;
-            width: 700px;
-            height: 350px;
-            list-style-type: none;
-            background: url(/tagscloud.png) no-repeat;
-            position: relative;
-            box-shadow: 0 0 3px rgba(0, 0, 0, 0.16);
-        }
-
-        ul a {
-            position: absolute;
-            display: block;
-            text-indent: 100%;
-            white-space: nowrap;
-            overflow: hidden;
-        }
-
-        #bottom1 {
-            position: absolute;
-            left: 0;
-            bottom: 10px;
-            width: 100%;
-            text-align: center;
-            color: #555;
-        }
-
-        #bottom2 {
-            position: absolute;
-            left: 0;
-            bottom: -50px;
-            width: 100%;
-            padding-bottom: 20px;
-            text-align: center;
-            font-size: small;
-            color: #777;
-        }
-
-        #signup,
-        #signin {
-            margin-left: 730px;
-            width: 250px;
-        }
-
-        #signup {
-            padding-top: 25px;
-        }
-
-        #signup>div {
-            width: 100%;
-            margin: 15px 0;
-        }
-
-        #signup>div>a {
-            display: block;
-            width: 100%;
-            height: 32px;
-            line-height: 32px;
-            text-indent: 37px;
-            text-decoration: none;
-            overflow: hidden;
-        }
-
-        #facebook a {
-            color: #FFF;
-            background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAAXNSR0IArs4c6QAAADNQTFRFO1edX3ewl6bLnKrOoK3QrrrYvMXe2N7r3OLu3+Tv5urz7O/29vf6+Pn7+vv9/Pz9////ykQjsQAAAEZJREFUOMtjYBgFuAATO68ADxdOaUYuATDAqYBbAL8CFgECCjiBcqz4XMiPz3oQEKCtAgEkwEdIAQchBWyEFDAPkDdHsAIAhZkIwz/VK/UAAAAASUVORK5CYII=") no-repeat #3A569C;
-        }
-
-        #vk a {
-            color: #FFF;
-            background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAAXNSR0IArs4c6QAAAHJQTFRFbY+zbo+zbpCzb5C0cpO1c5O2dZW3dpa4e5m6gJ29gZ69lq/In7bNo7jPrcDUs8XXvs3dv87dy9fkztnlz9rm0Nrm093o1N7o1+Dq3OTt3ubu4Ofv5Orw7fH27vL28PP38vX49Pb5+vv8+/z9/Pz9////2jSYlQAAAG5JREFUOMvtkEcOgDAMBE3vvXdIyP+/iMMRKfYHmMtcRtE6AD8f1Is8pyKgAs0RGYO2HSWqMQaoBHVRgYsS3AsrtyFlrqgdJlCLb95gxQO6IkZCqL+KCjz0TQU5ejOf2a3aJXPF7BOB2PvMhp8PDzGRFgEe7xvEAAAAAElFTkSuQmCC") no-repeat #6d8fb3;
-        }
-
-        #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;
-        }
-
-        #xmppinfo {
-            background: #FFF;
-            padding: 10px;
-            display: none;
-        }
-
-        #signin {
-            text-align: center;
-            font-size: small;
-        }
-
-        #signinform {
-            background: #FFF;
-            padding: 10px 15px;
-            margin-top: 15px;
-            display: none;
-        }
-
-        input.txt {
-            width: 212px;
-            border: 1px solid #CCC;
-            margin: 3px 0;
-            padding: 3px;
-        }
-
-        input.submit {
-            width: 70px;
-            border: 1px solid #CCC;
-            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>
-        <li><a href="/tag/android" style="left: 314px; top: 42px; width: 45px; height: 158px;">android</a></li>
-        <li><a href="/tag/работа" style="left: 149px; top: 138px; width: 165px; height: 41px;">работа</a></li>
-        <li><a href="/tag/music" style="left: 119px; top: 249px; width: 124px; height: 32px;">music</a></li>
-        <li><a href="/tag/windows" style="left: 448px; top: 234px; width: 186px; height: 32px;">windows</a></li>
-        <li><a href="/tag/google" style="left: 244px; top: 252px; width: 134px; height: 41px;">google</a></li>
-        <li><a href="/tag/кино" style="left: 68px; top: 83px; width: 97px; height: 28px;">кино</a></li>
-        <li><a href="/tag/фото" style="left: 400px; top: 266px; width: 101px; height: 29px;">фото</a></li>
-        <li><a href="/tag/жизнь" style="left: 554px; top: 266px; width: 125px; height: 27px;">жизнь</a></li>
-        <li><a href="/tag/еда" style="left: 46px; top: 196px; width: 71px; height: 32px;">еда</a></li>
-        <li><a href="/tag/музыка" style="left: 61px; top: 111px; width: 139px; height: 27px;">музыка</a></li>
-        <li><a href="/tag/прекрасное" style="left: 152px; top: 200px; width: 205px; height: 32px;">прекрасное</a></li>
-        <li><a href="/tag/книги" style="left: 148px; top: 293px; width: 103px; height: 25px;">книги</a></li>
-        <li><a href="/tag/цитата" style="left: 325px; top: 301px; width: 126px; height: 27px;">цитата</a></li>
-        <li><a href="/tag/games" style="left: 117px; top: 142px; width: 30px; height: 104px;">games</a></li>
-        <li><a href="/tag/ubuntu" style="left: 503px; top: 2px; width: 28px; height: 102px;">ubuntu</a></li>
-        <li><a href="/tag/котэ" style="left: 534px; top: 27px; width: 76px; height: 28px;">котэ</a></li>
-        <li><a href="/tag/ВНЕЗАПНО" style="left: 501px; top: 293px; width: 146px; height: 23px;">ВНЕЗАПНО</a></li>
-        <li><a href="/tag/юмор" style="left: 73px; top: 53px; width: 84px; height: 28px;">юмор</a></li>
-        <li><a href="/tag/мысли" style="left: 202px; top: 179px; width: 102px; height: 21px;">мысли</a></li>
-        <li><a href="/tag/pic" style="left: 400px; top: 78px; width: 33px; height: 38px;">pic</a></li>
-        <li><a href="/tag/политота" style="left: 531px; top: 60px; width: 130px; height: 24px;">политота</a></li>
-        <li><a href="/tag/WOT" style="left: 159px; top: 63px; width: 48px; height: 20px;">WOT</a></li>
-        <li><a href="/tag/fail" style="left: 8px; top: 170px; width: 34px; height: 27px;">fail</a></li>
-        <li><a href="/tag/погода" style="left: 670px; top: 126px; width: 24px; height: 93px;">погода</a></li>
-        <li><a href="/tag/apple" style="left: 42px; top: 167px; width: 64px; height: 29px;">apple</a></li>
-        <li><a href="/tag/jabber" style="left: 436px; top: 43px; width: 25px; height: 75px;">jabber</a></li>
-        <li><a href="/tag/тян" style="left: 532px; top: 94px; width: 47px; height: 21px;">тян</a></li>
-        <li><a href="/tag/work" style="left: 359px; top: 55px; width: 58px; height: 23px;">work</a></li>
-        <li><a href="/tag/Python" style="left: 240px; top: 63px; width: 74px; height: 23px;">Python</a></li>
-        <li><a href="/tag/Видео" style="left: 266px; top: 232px; width: 76px; height: 20px;">Видео</a></li>
-        <li><a href="/tag/авто" style="left: 359px; top: 30px; width: 58px; height: 24px;">авто</a></li>
-        <li><a href="/tag/Anime" style="left: 360px; top: 328px; width: 66px; height: 21px;">Anime</a></li>
-        <li><a href="/tag/игры" style="left: 378px; top: 242px; width: 22px; height: 58px;">игры</a></li>
-        <li><a href="/tag/вело" style="left: 176px; top: 9px; width: 18px; height: 54px;">вело</a></li>
-        <li><a href="/tag/web" style="left: 661px; top: 219px; width: 22px; height: 47px;">web</a></li>
-        <li><a href="/tag/YouTube" style="left: 498px; top: 316px; width: 81px; height: 24px;">YouTube</a></li>
-        <li><a href="/tag/Вопрос" style="left: 208px; top: 18px; width: 22px; height: 72px;">Вопрос</a></li>
-        <li><a href="/tag/железо" style="left: 159px; top: 318px; width: 75px; height: 16px;">железо</a></li>
-        <li><a href="/tag/Microsoft" style="left: 20px; top: 146px; width: 86px; height: 21px;">Microsoft</a></li>
-        <li><a href="/tag/video" style="left: 616px; top: 101px; width: 51px; height: 19px;">video</a></li>
-        <li><a href="/tag/Россия" style="left: 32px; top: 242px; width: 68px; height: 16px;">Россия</a></li>
-        <li><a href="/tag/java" style="left: 409px; top: 226px; width: 39px; height: 22px;">java</a></li>
-        <li><a href="/tag/новости" style="left: 39px; top: 67px; width: 21px; height: 79px;">новости</a></li>
-        <li><a href="/tag/интернет" style="left: 100px; top: 233px; width: 17px; height: 85px;">интернет</a></li>
-        <li><a href="/tag/steam" style="left: 14px; top: 228px; width: 52px; height: 13px;">steam</a></li>
-        <li><a href="/tag/слова" style="left: 501px; top: 272px; width: 51px; height: 18px;">слова</a></li>
-        <li><a href="/tag/почта" style="left: 477px; top: 27px; width: 17px; height: 56px;">почта</a></li>
-        <li><a href="/tag/help" style="left: 123px; top: 281px; width: 21px; height: 35px;">help</a></li>
-        <li><a href="/tag/skype" style="left: 110px; top: 320px; width: 49px; height: 20px;">skype</a></li>
-        <li><a href="/tag/debian" style="left: 461px; top: 47px; width: 16px; height: 51px;">debian</a></li>
-        <li><a href="/tag/win" style="left: 505px; top: 104px; width: 27px; height: 16px;">win</a></li>
-        <li><a href="/tag/Религия" style="left: 33px; top: 281px; width: 67px; height: 17px;">Религия</a></li>
-        <li><a href="/tag/soft" style="left: 286px; top: 86px; width: 28px; height: 14px;">soft</a></li>
-        <li><a href="/tag/Политика" style="left: 144px; top: 281px; width: 75px; height: 12px;">Политика</a></li>
-        <li><a href="/tag/сны" style="left: 426px; top: 328px; width: 33px; height: 13px;">сны</a></li>
-        <li><a href="/tag/Питер" style="left: 146px; top: 233px; width: 50px; height: 16px;">Питер</a></li>
-        <li><a href="/tag/bash" style="left: 451px; top: 311px; width: 38px; height: 16px;">bash</a></li>
-        <li><a href="/tag/code" style="left: 279px; top: 310px; width: 39px; height: 16px;">code</a></li>
-        <li><a href="/tag/yandex" style="left: 19px; top: 263px; width: 56px; height: 18px;">yandex</a></li>
-        <li><a href="/tag/firefox" style="left: 452px; top: 295px; width: 48px; height: 16px;">firefox</a></li>
-        <li><a href="/tag/hardware" style="left: 230px; top: 40px; width: 67px; height: 18px;">hardware</a></li>
-        <li><a href="/tag/git" style="left: 78px; top: 258px; width: 20px; height: 19px;">git</a></li>
-        <li><a href="/tag/dev" style="left: 165px; top: 88px; width: 31px; height: 19px;">dev</a></li>
-        <li><a href="/tag/mobile" style="left: 421px; top: 24px; width: 15px; height: 47px;">mobile</a></li>
-        <li><a href="/tag/люди" style="left: 151px; top: 184px; width: 43px; height: 15px;">люди</a></li>
-        <li><a href="/tag/php" style="left: 149px; top: 24px; width: 27px; height: 18px;">php</a></li>
-        <li><a href="/tag/haskell" style="left: 271px; top: 293px; width: 48px; height: 16px;">haskell</a></li>
-        <li><a href="/tag/стихи" style="left: 135px; top: 42px; width: 41px; height: 11px;">стихи</a></li>
-        <li><a href="/tag/photo" style="left: 639px; top: 219px; width: 20px; height: 39px;">photo</a></li>
-        <li><a href="/tag/чай" style="left: 448px; top: 220px; width: 27px; height: 14px;">чай</a></li>
-        <li><a href="/tag/Опрос" style="left: 297px; top: 22px; width: 14px; height: 41px;">Опрос</a></li>
-        <li><a href="/tag/Chrome" style="left: 311px; top: 25px; width: 48px; height: 17px;">Chrome</a></li>
-        <li><a href="/tag/life" style="left: 255px; top: 311px; width: 23px; height: 16px;">life</a></li>
-        <li><a href="/tag/opera" style="left: 226px; top: 232px; width: 38px; height: 14px;">opera</a></li>
-        <li><a href="/tag/programming" style="left: 234px; top: 327px; width: 81px; height: 14px;">programming</a></li>
-        <li><a href="/tag/дети" style="left: 15px; top: 197px; width: 31px; height: 13px;">дети</a></li>
-        <li><a href="/tag/сериалы" style="left: 575px; top: 219px; width: 61px; height: 13px;">сериалы</a></li>
-        <li><a href="/tag/учеба" style="left: 616px; top: 84px; width: 43px; height: 17px;">учеба</a></li>
-    </ul>
-
-    <div id="bottom1">juick.com &copy; 2008-2022 &nbsp; <a href="/help/ru/contacts" rel="nofollow">Контакты</a> &middot;
-        <a href="/help/" rel="nofollow">Помощь</a>
-    </div>
-
-    <div id="signup">
-        {{ i18n("messages","label.register") }}:
-        <div id="facebook"><a href="/_fblogin" rel="nofollow">Facebook</a></div>
-        <div id="vk"><a href="/_vklogin" rel="nofollow">ВКонтакте</a></div>
-        <div id="tg">
-            <script async src="https://telegram.org/js/telegram-widget.js?3" data-telegram-login="Juick_bot"
-                data-size="medium" data-radius="0" data-auth-url="https://juick.com/_tglogin"
-                data-request-access="write"></script>
-        </div>
-        <div id="apple">
-            <a href="/_apple" rel="nofollow"><img src="https://appleid.cdn-apple.com/appleid/button" /></a>
-        </div>
-    </div>
-    <div id="signin">
-        <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 type="hidden" name="{{_csrf.parameterName}}" value="{{_csrf.token}}" />
-                <input class="txt" type="text" name="username" placeholder='{{ i18n("messages","label.username") }}'
-                    id="nickinput" autocomplete="username" />
-                <input class="txt" type="password" name="password"
-                    placeholder='{{ i18n("messages","label.password") }}' autocomplete="current-password" />
-                <input class="submit" type="submit" value="OK" />
-            </form>
-        </div>
-    </div>
-
-</body>
-
-</html>
diff --git a/src/main/resources/templates/views/login.html b/src/main/resources/templates/views/login.html
new file mode 100644
index 00000000..f61853e8
--- /dev/null
+++ b/src/main/resources/templates/views/login.html
@@ -0,0 +1,57 @@
+{% extends "layouts/default" %}
+{% block content %}
+    <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>
+    <div id="signup">
+        {{ i18n("messages","label.register") }}:
+        <div id="facebook"><a href="/_fblogin" rel="nofollow">Facebook</a></div>
+        <div id="vk"><a href="/_vklogin" rel="nofollow">ВКонтакте</a></div>
+        <div id="tg">
+            <script async src="https://telegram.org/js/telegram-widget.js?3" data-telegram-login="Juick_bot"
+                data-size="medium" data-radius="0" data-auth-url="https://juick.com/_tglogin"
+                data-request-access="write"></script>
+        </div>
+        <div id="apple">
+            <a href="/_apple" rel="nofollow"><img src="https://appleid.cdn-apple.com/appleid/button" /></a>
+        </div>
+    </div>
+    <div id="signin">
+        <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 type="hidden" name="{{_csrf.parameterName}}" value="{{_csrf.token}}" />
+                <input class="txt" type="text" name="username" placeholder='{{ i18n("messages","label.username") }}'
+                    id="nickinput" autocomplete="username" />
+                <input class="txt" type="password" name="password"
+                    placeholder='{{ i18n("messages","label.password") }}' autocomplete="current-password" />
+                <input class="submit" type="submit" value="OK" />
+            </form>
+        </div>
+    </div>
+{% endblock %}
+{% block "column" %}
+{% include "views/partial/homecolumn" %}
+{% endblock %}