Add logout function and add different account links in header for logged in vs not

6a09657e · Beth Davies · 077b2f45 · 6a09657e · 6a09657e · 6a09657e
Commit 6a09657e authored 9 months ago by Beth Davies
--- a/build.gradle
+++ b/build.gradle
@@ -27,8 +27,7 @@ repositories {
 dependencies {

    implementation 'org.springframework.boot:spring-boot-starter-thymeleaf' // Thymeleaf dependency
-
-	implementation 'org.springframework.boot:spring-boot-starter-thymeleaf' // Thymeleaf dependency
+    implementation 'org.thymeleaf.extras:thymeleaf-extras-springsecurity6:3.1.2.RELEASE'

    implementation 'org.springframework.boot:spring-boot-starter-web'
    implementation 'org.springframework.boot:spring-boot-starter-json'

--- a/src/main/java/polish_community_group_11/polish_community/security/WebSecurityConfig.java
+++ b/src/main/java/polish_community_group_11/polish_community/security/WebSecurityConfig.java
@@ -14,6 +14,7 @@ import org.springframework.security.core.userdetails.UsernameNotFoundException;
 import org.springframework.security.provisioning.InMemoryUserDetailsManager;
 import org.springframework.security.web.SecurityFilterChain;
 import org.springframework.web.cors.CorsConfiguration;
+import org.thymeleaf.extras.springsecurity6.dialect.SpringSecurityDialect;
 import polish_community_group_11.polish_community.register.models.User;
 import polish_community_group_11.polish_community.register.services.UserService;
 import polish_community_group_11.polish_community.register.models.Role;
@@ -70,22 +71,10 @@ public class WebSecurityConfig {
        return http.build();
    }

-
-    //Use in memory userDetailsManager to store & access login details
-//    @Bean
-//    public UserDetailsService userDetailsService() {
-//        UserDetails user =
-//                User.withDefaultPasswordEncoder()
-//                        .username("user@example.com") //use email as username
-//                        .password("password")
-//                        .roles("USER")
-//                        .build();
-//
-//        //can extend create more users here when needed (admin, super-admin etc)
-//
-//        return new InMemoryUserDetailsManager(user);
-//    }
-//}
+    @Bean
+    public SpringSecurityDialect springSecurityDialect() {
+        return new SpringSecurityDialect();
+    }

    @Bean
    public UserDetailsService userDetailsService() {

--- a/src/main/resources/static/css/layout/layout.css
+++ b/src/main/resources/static/css/layout/layout.css
@@ -217,3 +217,38 @@ nav.sidebar {
    font-size: 14px;
    font-weight: 500;
 }
+
+
+/* ACCOUNT OPTIONS STYLING */
+/* Dropdown styles */
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+}
+
+.dropdown-content a {
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+}
+
+.dropdown-content a:hover {
+    background-color: #f1f1f1;
+}
+
+.dropdown:hover .dropdown-content {
+    display: block;
+}
+
+
+/* ACCOUNT OPTIONS STYLING END */
\ No newline at end of file
--- a/src/main/resources/static/js/layout/layout.js
+++ b/src/main/resources/static/js/layout/layout.js
+document.addEventListener('DOMContentLoaded', function() {
+    const accountOptions = document.getElementsByClassName('account-options');
+    const dropdownContent = document.getElementsByClassName('dropdown-content');
+
+    accountOptions.addEventListener('click', function (e) {
+        if (window.innerWidth <= 768) {
+            e.preventDefault();
+            dropdownContent.style.display = dropdownContent.style.display ===
+            'block' ? 'none' : 'block';
+        }
+    });
+    document.addEventListener('click', function(e) {
+        if (!accountOptions.contains(e.target)) {
+            dropdownContent.style.display = 'none';
+        }
+    });
+    window.addEventListener('resize', function() {
+        if (window.innerWidth > 768) {
+            dropdownContent.style.display = '';
+        }
+    });
+
+});
\ No newline at end of file
--- a/src/main/resources/templates/layout/layout.html
+++ b/src/main/resources/templates/layout/layout.html
 <!DOCTYPE html>
 <html lang="en">
 <html xmlns:th="http://www.thymeleaf.org"
-      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
+      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
+      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity6">
+
 <head>
    <meta name="viewport" CHARSET="UTF-8" content="width=device-width, initial-scale=1">

@@ -60,9 +62,24 @@
                    </div>

                    <!-- Profile -->
-                    <a th:href="@{/profile}" class="navLink">
-                        <img src="/assets/navbarImages/profile.png" class="navIcons"><span class="navText">Profile</span>
-                    </a>
+                    <div class="account-options" id="dropdown">
+                        <div sec:authorize="isAnonymous()">
+                            <img src="/assets/navbarImages/profile.png" class="navIcons anonymous">
+                            <span class="navText">Sign in</span>
+                            <div class="dropdown-content">
+                                <a class="dropdown-nav-link" th:href="@{/login}">Login</a>
+                                <a class="dropdown-nav-link" th:href="@{/register}">Sign up</a>
+                            </div>
+                        </div>
+                        <div sec:authorize="isAuthenticated()">
+                            <img src="/assets/navbarImages/profile.png" class="navIcons authenticated">
+                            <span class="navText">Profile</span>
+                            <div class="dropdown-content">
+                                <a class="navLink" th:href="@{/profile}">View profile</a>
+                                <a class="navLink" th:href="@{/logout}">Logout</a>
+                        </div>
+                    </div>
+
                </div>
            </nav>
        </section>
@@ -106,6 +123,6 @@
        </div>
    </footer>
    <script th:replace="~{comments/commentFragment::commentScript}"></script>
-
+    <script src="/js/layout/layout.js"></script>
 </body>
 </html>
\ No newline at end of file