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 34029e3e1f9f3bc064cd7be86809ac353bb14b27..5e34e5bce4bccdcb56396e834fe27875175a3fc9 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
@@ -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() {
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