Styles

src/main/java/org/example/sweater/controller/SessionInterceptor.java

@@ -15,7 +15,8 @@ public class SessionInterceptor implements HandlerInterceptor {
     public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
         Principal principal = request.getUserPrincipal();
         if (principal != null) {
-            User user = (User) ((Authentication) principal).getPrincipal();
+            Authentication authentication = (Authentication) principal;
+            User user = (User) authentication.getPrincipal();
             request.setAttribute("user", user);
         }
 

src/main/resources/templates/feed.ftl

@@ -1,60 +1,111 @@
 <#import "parts/common.ftl" as common>
-<#import "parts/login.ftl" as login>
 
 <@common.page>
-    <h1>Sweater</h1>
-    <nav>
-        <a href="/user">Users</a>
-    </nav>
-    <@login.logout />
-    <form method="post" enctype="multipart/form-data">
-        <label for="message_text">Message text:</label>
-        <input id="message_text" type="text" required name="text" />
-        <label for="message_tag">Tag:</label>
-        <input id="message_tag" type="text" name="tag" required />
-        <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
-        <input type="file" name="file" />
-        <button type="submit">Send</button>
-    </form>
-    <h2>Messages</h2>
-    <#if tag?has_content>
-        <p>by tag <strong>${tag}</strong></p>
-    </#if>
-    <#if search?has_content>
-        <p>that starts with <strong>${search}</strong></p>
-    </#if>
+    <div class="mb-2">
+        <h2>Messages</h2>
+        <#if tag?has_content>
+            <p>by tag <strong>${tag}</strong></p>
+        </#if>
+        <#if search?has_content>
+            <p>that starts with <strong>${search}</strong></p>
+        </#if>
+    </div>
 
-    <form method="get" action="/feed">
-        <label for="filter_tag">Tag:</label>
-        <input type="text" id="filter_tag" placeholder="Tag" name="tag" value="${tag!}" />
-        <button type="submit">Search</button>
-    </form>
-    <form method="get" action="/feed">
-        <label for="search_tag">Search:</label>
-        <input type="search" id="search_tag" placeholder="Text" value="${search!}" name="prefix" />
-        <button type="submit">Search</button>
-    </form>
-    <ul>
-        <#list messages as message>
-            <li>
-                <strong>${message.id}</strong>
-                <p>${message.text}</p>
-                <i>${message.tag}</i>
-                <strong>${message.authorName}</strong>
-                <#if message.filename??>
-                    <div>
-                        <img alt="Image" src="/img/${message.filename}" />
-                    </div>
-                </#if>
+    <div class="d-inline-flex gap-1 mb-2">
+        <button
+                class="btn btn-primary"
+                type="button"
+                data-bs-toggle="collapse"
+                data-bs-target="#createMessage"
+                aria-expanded="false"
+                aria-controls="createMessage"
+        >
+            New sweat
+        </button>
+        <button
+                class="btn btn-secondary"
+                type="button"
+                data-bs-toggle="collapse"
+                data-bs-target="#searchForms"
+                aria-expanded="false"
+                aria-controls="searchForms"
+        >
+            Search
+        </button>
+    </div>
 
-                <form action="/feed/delete" method="post">
-                    <input type="hidden" value="${message.id}" name="message" />
+    <div class="container mt-5 collapse" id="searchForms">
+        <div class="row justify-content-center">
+            <div class="col-md-6">
+                <form method="get" action="/feed">
+                    <div class="form-group mb-3">
+                        <label for="search_text">Search by Message Text</label>
+                        <input type="search" id="search_text" class="form-control" placeholder="Enter message text" value="${search!}" name="prefix" />
+                    </div>
+                </form>
+                <form method="get" action="/feed">
+                    <div class="form-group mb-3">
+                        <label for="filter_tag">Search by Tag</label>
+                        <input type="text" class="form-control" id="filter_tag" name="tag" value="${tag!}" placeholder="Enter tag name">
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+    <div class="container mt-5 collapse" id="createMessage">
+        <div class="row justify-content-center">
+            <div class="col-md-6">
+                <form method="post" enctype="multipart/form-data">
                     <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
-                    <button type="submit">Remove</button>
+                    <div class="form-group mb-3">
+                        <label for="messageText">Message Text</label>
+                        <input type="text" class="form-control" id="messageText" name="text" placeholder="Enter message text" required>
+                    </div>
+                    <div class="form-group mb-3">
+                        <label for="category">Category</label>
+                        <input type="text" class="form-control" id="category" name="tag" placeholder="Enter category" required>
+                    </div>
+                    <div class="form-group mb-3">
+                        <label for="file">Attach File</label>
+                        <input type="file" class="form-control" id="file" name="file">
+                    </div>
+                    <div class="form-group mb-3">
+                        <button type="submit" class="btn btn-primary w-100">Sweat</button>
+                    </div>
                 </form>
-            </li>
-        <#else>
-            <li>Empty</li>
-        </#list>
-    </ul>
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-12 col-sm-6">
+            <div class="vstack gap-3">
+                <#list messages as message>
+                    <div class="card">
+                        <#if message.filename??>
+                            <img class="card-img-top" alt="Image" src="/img/${message.filename}" />
+                        </#if>
+                        <div class="card-body">
+                            <h5 class="card-subtitle mb-2 text-body-secondary">${message.authorName}</h5>
+                            <p class="card-text">${message.text}</p>
+                        </div>
+                        <div class="card-footer">
+                            <div class="d-flex justify-content-between align-items-center">
+                                <div>${message.tag}</div>
+                                <form action="/feed/delete" method="post">
+                                    <input type="hidden" value="${message.id}" name="message" />
+                                    <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
+                                    <button type="submit" class="btn btn-danger">Remove</button>
+                                </form>
+                            </div>
+                        </div>
+                    </div>
+                <#else>
+                    <div>Empty</div>
+                </#list>
+            </div>
+
+        </div>
+
+    </div>
 </@common.page>

src/main/resources/templates/login.ftl

@@ -2,6 +2,5 @@
 <#import "parts/login.ftl" as login>
 
 <@common.page>
-    <@login.login "/login" />
-    <a href="/registration">Register</a>
+    <@login.login "/login" false />
 </@common.page>

src/main/resources/templates/parts/login.ftl

@@ -1,17 +1,47 @@
-<#macro login action>
-    <form action="${action}" method="post">
-        <label for="username">Username: </label>
-        <input name="username" id="username" type="text" required />
-        <label for="password">Password: </label>
-        <input name="password" id="password" type="password" required />
-        <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
-        <button type="submit">Login</button>
-    </form>
+<#macro login action isRegistration>
+    <div class="container mt-5">
+        <div class="row justify-content-center">
+            <div class="col-md-4">
+                <#if !isRegistration>
+                    <h2 class="text-center">Log in to Sweater</h2>
+                <#else>
+                    <h2 class="text-center">Sign up to Sweater</h2>
+                </#if>
+
+                <form action="${action}" method="post">
+                    <div class="form-group mb-3">
+                        <label for="username">Username</label>
+                        <input name="username" class="form-control" id="username" type="text" required placeholder="Username" />
+                    </div>
+                    <div class="form-group mb-3">
+                        <label for="password">Password</label>
+                        <input name="password" id="password" class="form-control" type="password" placeholder="Password" required />
+                    </div>
+                    <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
+                    <div class="form-group mb-3">
+                        <button type="submit" class="btn btn-primary">
+                            <#if isRegistration>
+                                Sign up
+                            <#else>
+                                Log in
+                            </#if>
+                        </button>
+                    </div>
+                    <#if !isRegistration>
+                        <div class="form-group text-center">
+                            <a href="/registration">Sign up for Switter</a>
+                        </div>
+                    </#if>
+                </form>
+            </div>
+        </div>
+    </div>
+
 </#macro>
 
 <#macro logout>
     <form action="/logout" method="post">
         <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
-        <button type="submit">Logout</button>
+        <button type="submit" class="btn btn-link">Logout</button>
     </form>
 </#macro>

src/main/resources/templates/parts/navbar.ftl

@@ -1,4 +1,5 @@
 <#include "security.ftl">
+<#import "login.ftl" as login>
 
 <nav class="navbar navbar-expand-lg bg-body-tertiary">
     <div class="container-fluid">
@@ -7,19 +8,25 @@
             <span class="navbar-toggler-icon"></span>
         </button>
         <div class="collapse navbar-collapse" id="navbarNav">
-            <ul class="navbar-nav">
+            <ul class="navbar-nav me-auto">
                 <li class="nav-item">
                     <a class="nav-link" aria-current="page" href="/">Home</a>
                 </li>
                 <li class="nav-item">
                     <a class="nav-link" aria-current="page" href="/feed">Messages</a>
                 </li>
-                <li class="nav-item">
-                    <a class="nav-link" aria-current="page" href="/user">Users</a>
-                </li>
+                <#if isAdmin>
+                    <li class="nav-item">
+                        <a class="nav-link" aria-current="page" href="/user">Users</a>
+                    </li>
+                </#if>
             </ul>
 
-            <div class="navbar-text">${name}</div>
+
+            <#if user??>
+                <div class="navbar-text">${name}</div>
+                <@login.logout />
+            </#if>
         </div>
     </div>
 </nav>

src/main/resources/templates/registration.ftl

@@ -2,7 +2,6 @@
 <#import "parts/login.ftl" as login>
 
 <@common.page>
-    <h1>Register</h1>
     ${message!}
-    <@login.login "/registration" />
-</@common.page>
+    <@login.login "/registration" true />
+</@common.page>