Merge branch...

Merge branch '252-as-a-user-i-want-the-option-to-log-out-of-my-account-so-that-my-account-remains-secure' into 'release/Sprint-4'

Resolve "As a user I want the option to log out of my account, so that my account remains secure."

See merge request c24108486/team-11-polish-community-group!56

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'

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;
@@ -74,22 +75,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() {

src/main/resources/static/css/home/home.css

@@ -130,7 +130,7 @@ button:hover {
 }
 
 #eventsTile {
-    background: linear-gradient(135deg, #FF7EB3, #FF758C); 
+    background: linear-gradient(135deg, yellowgreen, #006400);
     color: white;
 }
 

src/main/resources/static/css/layout/layout.css

@@ -216,4 +216,39 @@ nav.sidebar {
 .navText {
     font-size: 14px;
     font-weight: 500;
-}
+}
\ No newline at end of file
+
+
+/* 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

src/main/resources/static/css/login/login.css

 * {
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
+    font-family: "inter", sans-serif;
 }
 
 form {
-    justify-items: end;
-    padding: 10px;
+    justify-items: baseline;
+    padding: 30px;
     max-width: max-content;
+    width: 300px;
     box-sizing: border-box;
-    margin-top: 15px;
-    background-color: #e3afbc;
-    border: 1px solid #ccc;
+    margin: 50px auto;
+    /*margin-top: 15px;*/
+    background-color: var(--secondary-color);
+    border: 1px solid var(--border-color);
     border-radius: 5px;
 
 }
 
-input {
-    background-color: #e3e2df;
-    border: 1px solid #ccc;
+input[type="email"], input[type="password"]{
+    background-color: var(--background-color);
+    border: 1px solid var(--border-color);
     border-radius: 5px;
+    padding: 10px 15px;
+    width: 80%;
+    margin-bottom: 10px;
+}
+input[type="submit"] {
+    background-color: var(--primary-color);
+    color: var(--alternate-text);
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+input[type="submit"]:hover {
+    background-color: #555;
 }
\ No newline at end of file

src/main/resources/static/js/layout/accountDropdown.js

+document.addEventListener('DOMContentLoaded', function() {
+    const accountOptions = document.getElementById('account-options');
+    const dropdownContent = document.getElementsByClassName('dropdown-content');
+
+    accountOptions.addEventListener('click', function (e) {
+            [...dropdownContent].forEach(dropdown => {
+                dropdown.style.display = dropdown.style.display ===
+                'block' ? 'none' : 'block'
+            });
+    });
+
+    //hide dropdown when user clicks outside of element
+    document.addEventListener('click', function(e) {
+        if (!accountOptions.contains(e.target)) {
+            [...dropdownContent].style.display = 'none';
+        }
+    });
+});
\ No newline at end of file

src/main/resources/templates/home/home.html

@@ -63,7 +63,7 @@
     
         <h1 data-translate-key="home.join_community">Join Our Thriving Community Today!</h1>
         <p data-translate-key="home.tagline">Connect with like-minded individuals, share your ideas, and be part of something amazing</p>
-        <button data-translate-key="home.get_started">Get Started</button>
+        <a th:href="@{/register}"><button data-translate-key="home.get_started">Get Started</button></a>
     </section>
     
 

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">
 
@@ -68,14 +70,28 @@
                 </div>
 
                 <!-- Profile -->
-                <a th:href="@{/profile}" class="navLink">
-                    <img src="/assets/navbarImages/profile.png" class="navIcons"><span class="navText"
-                                                                                       data-translate-key="navbar.profile">Profile</span>
-                </a>
-            </div>
-        </nav>
-    </section>
-</header>
+                <div id="account-options">
+                        <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"data-translate-key="navbar.profile">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>
+    </header>
 
 <div class="mainBody">
     <main layout:fragment="content" class="content"></main>
@@ -115,5 +131,6 @@
 </footer>
 <script src="/js/layout/layout.js" defer></script>
 <script th:replace="~{comments/commentFragment::commentScript}"></script>
+    <script src="/js/layout/accountDropdown.js"></script>
 </body>
 </html>
\ No newline at end of file