diff --git a/build.gradle b/build.gradle index af2499a7473f74081c6a13900f5c73acbb993627..a85111aa20fda831624973f0582e0048cc5e7887 100644 --- 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' diff --git 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 index 074fc314e387021ece0e02305997ba58dd042f04..3119b99b7968d0bfe754d5a243c95d251d938388 100644 --- 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 @@ -15,8 +15,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.springframework.web.servlet.config.annotation.ResourceHandlerRegistry; -import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; +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; @@ -77,22 +76,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() { diff --git a/src/main/resources/static/css/home/home.css b/src/main/resources/static/css/home/home.css index 99ef510b63f459047f704af6f1618991f57b83ff..1694ebbdf2ebaf8a8729a7c1315737c4e3322c58 100644 --- a/src/main/resources/static/css/home/home.css +++ b/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; } diff --git a/src/main/resources/static/css/layout/layout.css b/src/main/resources/static/css/layout/layout.css index 40272e510c948578795e0fd4ac7bfb4a55a5d38d..d5e14947d5224ce34fc41ecd7de8620af43363bb 100644 --- a/src/main/resources/static/css/layout/layout.css +++ b/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 diff --git a/src/main/resources/static/css/login/login.css b/src/main/resources/static/css/login/login.css index b45f963121391a552ad0d7a3cf649ed3c897f8a6..96e7ddcb729e044d795540de7359bd4fa9b29761 100644 --- a/src/main/resources/static/css/login/login.css +++ b/src/main/resources/static/css/login/login.css @@ -1,21 +1,36 @@ * { - 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 diff --git a/src/main/resources/static/js/layout/accountDropdown.js b/src/main/resources/static/js/layout/accountDropdown.js new file mode 100644 index 0000000000000000000000000000000000000000..f7c5077f80078f568727d3bff16a42c80d3a7722 --- /dev/null +++ b/src/main/resources/static/js/layout/accountDropdown.js @@ -0,0 +1,18 @@ +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 diff --git a/src/main/resources/templates/home/home.html b/src/main/resources/templates/home/home.html index 2f8e70b1898dc70e031a5123a8535900a45e785f..7d96e8cf728d88db502d5f68870ece0d5bf41e51 100644 --- a/src/main/resources/templates/home/home.html +++ b/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> diff --git a/src/main/resources/templates/layout/layout.html b/src/main/resources/templates/layout/layout.html index 551413576f822a5295b69b111c05aa30248c5dd4..829aeca235d83698170723c179cdbc3c662c0401 100644 --- a/src/main/resources/templates/layout/layout.html +++ b/src/main/resources/templates/layout/layout.html @@ -1,7 +1,9 @@ <!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