Feature/new.html

src/main/java/com/makersacademy/acebook/config/SecurityConfig.java

@@ -12,6 +12,8 @@
 import org.springframework.security.web.SecurityFilterChain;
 
 @EnableWebSecurity
+
+
 @Configuration
 public class SecurityConfig {
 
@@ -30,7 +32,7 @@ public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Excepti
                 .cors().and()
                 .authorizeRequests(authorizeRequests ->
                         authorizeRequests
-                                .antMatchers("/", "/login", "/register","/images/**", "/users","/error/**", "/styles/**", "/search", "/events", "/events/attend/**", "/oauth2/**", "/assets/**", "/events/details/**").permitAll()
+                                .antMatchers("/", "/login", "/register","/images/**", "/users","/error/**", "/styles/**", "/search", "/events", "/oauth2/**", "/assets/**","/events/details/**","/events/third-party-events").permitAll()
                                 .anyRequest().authenticated()
                 )
                 .formLogin(formLogin ->

src/main/java/com/makersacademy/acebook/controller/LandingPageController.java

@@ -1,14 +1,15 @@
 package com.makersacademy.acebook.controller;
 
+import com.makersacademy.acebook.model.Attendee;
 import com.makersacademy.acebook.model.Event;
 import com.makersacademy.acebook.model.User;
 import com.makersacademy.acebook.repository.AttendeesRepository;
 import com.makersacademy.acebook.repository.EventRepository;
 import com.makersacademy.acebook.repository.UserRepository;
+import com.makersacademy.acebook.service.AttendeesService;
 import com.makersacademy.acebook.service.SearchService;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.format.annotation.DateTimeFormat;
-import org.springframework.security.core.Authentication;
 import org.springframework.security.core.annotation.AuthenticationPrincipal;
 import org.springframework.security.core.userdetails.UserDetails;
 import org.springframework.security.oauth2.core.user.OAuth2User;
@@ -20,12 +21,8 @@
 import org.springframework.web.bind.annotation.RequestParam;
 import org.springframework.web.servlet.view.RedirectView;
 
-import com.makersacademy.acebook.model.Attendee;
-import com.makersacademy.acebook.service.AttendeesService;
-
 import java.util.Date;
 import java.util.List;
-import java.util.Optional;
 
 @CrossOrigin
 @Controller
@@ -74,14 +71,14 @@ public String userEvents(Model model,
         } else if (minScheduledDate != null && maxScheduledDate != null) {
             events = eventRepository.findByScheduledDateBetween(minScheduledDate, maxScheduledDate);
         } else {
-            events = eventRepository.findAllByOrderByScheduledDate();
+            events = eventRepository.findAllByOrderByScheduledDateDesc();
         }
 
         User user = userRepository.findByUsername(username);
         for (Event event: events) {
             event.setAttendees(attendeesRepository.countByEvent(event));
-            Attendee userAttendee = attendeesRepository.findByUserAndEvent(user, event);
-            event.setUserAttending(userAttendee != null);
+            List<Attendee> userAttendees = attendeesRepository.findByUserAndEvent(user, event);
+            event.setUserAttending(!userAttendees.isEmpty());
         }
 
         List<User> users = userRepository.findAll();

src/main/java/com/makersacademy/acebook/controller/LoginController.java

@@ -13,6 +13,6 @@ public String login() {
 
     @GetMapping("/loginSuccess")
     public String loginSuccess() {
-        return "redirect:/ ";
+        return "redirect:/";
     }
 }

src/main/java/com/makersacademy/acebook/controller/UserController.java

@@ -15,34 +15,42 @@
 import org.springframework.web.servlet.mvc.support.RedirectAttributes;
 
 @Controller
-@RequestMapping("/account")
 public class UserController {
 
     @Autowired
     private UserService userService;
 
 
-    @GetMapping
+    @GetMapping("/account")
     public String accountPage(@AuthenticationPrincipal Object principal, Model model) {
         User user = null;
+//        boolean isAuthenticated = false;
+
 
         if (principal instanceof UserDetails) {
             UserDetails currentUser = (UserDetails) principal;
             user = userService.findByUsername(currentUser.getUsername());
+//            isAuthenticated = true;
+
         } else if (principal instanceof OAuth2User) {
             OAuth2User oauthUser = (OAuth2User) principal;
             String email = oauthUser.getAttribute("email");
             user = userService.findByEmail(email);
+//            isAuthenticated = true;
+
         }
+
         if (user != null) {
             model.addAttribute("user", user);
+//            model.addAttribute("isAuthenticated", isAuthenticated);
+
             return "/account";
         } else {
             return "redirect:/login";
         }
     }
 
-    @PostMapping
+    @PostMapping("/account")
     public String updateAccount(@AuthenticationPrincipal Object principal, User updatedUser, RedirectAttributes redirectAttributes) {
         User user = null;
 
@@ -93,7 +101,7 @@ public String updateAccount(@AuthenticationPrincipal Object principal, User upda
         return "redirect:/account";
     }
 
-    @GetMapping("/password")
+    @GetMapping("/account/password")
     public String passwordPage(@AuthenticationPrincipal Object principal, RedirectAttributes redirectAttributes, Model model) {
         User user = null;
 
@@ -121,7 +129,7 @@ public String passwordPage(@AuthenticationPrincipal Object principal, RedirectAt
         return "updatePassword";
     }
 
-    @PostMapping("/password")
+    @PostMapping("/account/password")
     public String changePassword(@AuthenticationPrincipal Object principal, String newPassword, String confirmPassword, RedirectAttributes redirectAttributes) {
         User user = null;
 
@@ -155,7 +163,7 @@ public String changePassword(@AuthenticationPrincipal Object principal, String n
         return "redirect:/account";
     }
 
-    @GetMapping("/login/oauth2/code/google")
+    @GetMapping("/account/login/oauth2/code/google")
     public String handleGoogleLogin(OAuth2AuthenticationToken token, RedirectAttributes redirectAttributes) {
         OAuth2User oauthUser = token.getPrincipal();
         String email = oauthUser.getAttribute("email");

src/main/java/com/makersacademy/acebook/repository/AttendeesRepository.java

@@ -9,5 +9,6 @@
 
 public interface AttendeesRepository extends CrudRepository<Attendee, Long> {
     public Long countByEvent (Event event);
-    public Attendee findByUserAndEvent(User user, Event event);
+    // Modify this method to return a List of attendees
+    List<Attendee> findByUserAndEvent(User user, Event event);
 }

src/main/java/com/makersacademy/acebook/repository/EventRepository.java

@@ -10,12 +10,12 @@
 
 public interface EventRepository extends CrudRepository<Event, Long> {
 
-    // Method to fetch all events ordered by scheduledDate
-    List<Event> findAllByOrderByScheduledDate();
+
 
     // Method to find events by a specific scheduledDate
     List<Event> findByScheduledDateBetween(Date minScheduledDate, Date maxScheduledDate);
-
+    // Searching term
     @Query("SELECT e FROM Event e WHERE LOWER(e.title) LIKE LOWER(CONCAT('%', :keyword, '%')) OR LOWER(e.user.username) LIKE LOWER(CONCAT('%', :keyword, '%')) OR LOWER(e.location) LIKE LOWER(CONCAT('%', :keyword, '%'))")
     List<Event> searchEventsByTitleOrUsernameOrLocation(@Param("keyword") String keyword);
-}
+    // Method to fetch all events ordered by scheduledDate in descending order
+    List<Event> findAllByOrderByScheduledDateDesc();}

src/main/java/com/makersacademy/acebook/repository/UserRepository.java

@@ -4,13 +4,10 @@
 import org.springframework.data.jpa.repository.JpaRepository;
 import org.springframework.stereotype.Repository;
 
-import java.util.List;
-
 @Repository
 public interface UserRepository extends JpaRepository<User, Long> {
     User findByUsername(String username);
     User findIdByUsername(String name);
     User findByEmail(String email);
-    List<User> findByUsernameContaining(String username);
 
 }

src/main/resources/templates/events/details.html

@@ -28,19 +28,7 @@ <h1>Event Details</h1>
         <strong>Host:</strong> <span th:text="${event.user.username}"></span>
     </div>
 
-    <form action="#" th:action="@{/events/details/{id}/comments/new(id=${{event.id}})}" th:object="${comment}" method="post">
-        <p>Comment: <input type="text" th:field="*{content}" /></p>
-        <p><input type="submit" value="Submit" /> <input type="reset" value="Reset" /></p>
-    </form>
 
-    <h5 th:text="${comments.isEmpty}? 'No comments yet' : 'Comments'"></h5>
-    <ul>
-        <li th:each="comment : ${comments}">
-            <p th:text="${comment.user.username}"></p>
-            <p th:text="${comment.formattedCreatedAt}"></p>
-            <p th:text="${comment.content}"></p>
-        </li>
-    </ul>
 
 
 </body>

src/main/resources/templates/fragments/dark-mode.html

@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+<head>
+    <style>
+        /* Light Mode Styles */
+        .light-mode {
+            background-color: #f7fafc; /* Tailwind light mode bg-gray-100 */
+            color: #1a202c; /* Tailwind light mode text-gray-900 */
+        }
+
+        /* Dark Mode Styles */
+        .dark-mode {
+            background-color: #1a202c; /* Tailwind dark mode bg-gray-900 */
+            color: #cbd5e0; /* Tailwind dark mode text-gray-300 */
+        }
+
+        /* Additional Styles for Body Element */
+        body.light-mode {
+            background-color: #f7fafc;
+            color: #1a202c;
+        }
+
+        body.dark-mode {
+            background-color: #1a202c;
+            color: #cbd5e0;
+        }
+    </style>
+</head>
+<body>
+<div th:fragment="dark-mode">
+    <!-- Dark Mode Toggle Button -->
+    <button id="dark-mode-toggle" class="p-2 bg-gray-200 dark:bg-gray-800 rounded ml-4 text-gray-800 dark:text-gray-200">
+        <i id="dark-mode-icon" class="fas fa-moon"></i>
+    </button>
+
+    <!-- Dark Mode Script -->
+    <script>
+        document.addEventListener("DOMContentLoaded", function() {
+            const toggleButton = document.getElementById('dark-mode-toggle');
+            const darkModeIcon = document.getElementById('dark-mode-icon');
+            const bodyElement = document.body;
+            const currentTheme = localStorage.getItem('theme');
+
+            if (currentTheme === 'dark') {
+                bodyElement.classList.remove('light-mode');
+                bodyElement.classList.add('dark-mode');
+                darkModeIcon.classList.remove('fa-moon');
+                darkModeIcon.classList.add('fa-sun');
+            }
+
+            toggleButton.addEventListener('click', function() {
+                if (bodyElement.classList.contains('dark-mode')) {
+                    bodyElement.classList.remove('dark-mode');
+                    bodyElement.classList.add('light-mode');
+                    localStorage.setItem('theme', 'light');
+                    darkModeIcon.classList.remove('fa-sun');
+                    darkModeIcon.classList.add('fa-moon');
+                } else {
+                    bodyElement.classList.remove('light-mode');
+                    bodyElement.classList.add('dark-mode');
+                    localStorage.setItem('theme', 'dark');
+                    darkModeIcon.classList.remove('fa-moon');
+                    darkModeIcon.classList.add('fa-sun');
+                }
+            });
+        });
+    </script>
+</div>
+</body>
+</html>

src/main/resources/templates/fragments/loyout.html

@@ -1,21 +1,15 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>My Application</title>
-    <link rel="stylesheet" th:href="@{/css/styles.css}">
+    <title th:fragment="title">My Website</title>
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
 </head>
-<body>
-<!-- Navigation Bar -->
+<body class="light-mode">
+<!-- Include Navbar -->
 <div th:replace="fragments/navbar :: navbar"></div>
 
 <!-- Main Content -->
 <div th:fragment="content">
-    <p>Content goes here...</p>
-</div>
-
-<!-- Footer -->
-<div th:replace="fragments/footer :: footer"></div>
-</body>
-</html>
+    <!-- Page-specific content

src/main/resources/templates/fragments/navbar.html

@@ -3,6 +3,8 @@
 <head>
     <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
     <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
+
     <style>
         .rounded-circle {
             border-radius: 9999px;
@@ -17,7 +19,6 @@
         }
     </style>
 </head>
-
 <body>
 <div th:fragment="navbar">
     <nav class="flex w-full items-center border-b border-border-primary bg-background-primary lg:min-h-18 lg:px-[5%]">
@@ -56,10 +57,12 @@
                             <a href="/register" class="block py-3 text-md focus-visible:outline-none lg:px-4 lg:py-2 lg:text-base">Signup</a>
                         </button>
                     </div>
+                    <!-- Include Dark Mode Fragment -->
+                    <div th:replace="fragments/dark-mode :: dark-mode"></div>
                 </div>
             </div>
         </div>
     </nav>
 </div>
 </body>
-</html>
+</html>

src/main/resources/templates/landingpage.html

@@ -3,9 +3,13 @@
 <head>
     <title>Website-Hosted Events</title>
     <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
-    <script src="https://cdn.tailwindcss.com"></script></head>
-<body>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+</head>
+<body class="light-mode">
 <div th:replace="fragments/navbar :: navbar"></div>
+
+
 <form action="/" method="get" class="p-4 bg-gray-100 rounded-lg mb-8">
     <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
         <div>
@@ -16,36 +20,111 @@
             <label for="maxScheduledDate" class="block text-lg font-medium text-gray-700">End Date</label>
             <input type="date" id="maxScheduledDate" name="maxScheduledDate" placeholder="End Date" class="mt-1 p-2 border border-gray-300 rounded-md w-full">
         </div>
-        <!--        searching keyword-->
         <div>
             <label for="keyword" class="block text-lg font-medium text-gray-700">Search Keyword</label>
             <input type="text" id="keyword" name="keyword" placeholder="Search events by title, location, or username" class="mt-1 p-2 border border-gray-300 rounded-md w-full">
         </div>
-
         <div class="flex items-end">
-            <button type="submit" class="px-4 py-2 bg-gray-500 text-white font-bold rounded-md hover:bg-gray-700">Search</button>        </div>
+            <button type="submit" class="px-4 py-2 bg-gray-500 text-white font-bold rounded-md hover:bg-gray-700">Search</button>
+        </div>
     </div>
 </form>
 
+<section class="px-[5%] py-8 md:py-12 lg:py-16">
+    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-8 lg:grid-cols-8 gap-8 text-center">
+        <div>
+            <a href="https://open.spotify.com/" class="block text-gray-700 hover:text-blue-500 flex flex-col items-center">
+                <div class="flex items-center justify-center w-16 h-16 rounded-full border-2 border-gray-300 mt-4 mb-4">
+                    <i class="fas fa-music text-4xl"></i>
+                </div>
+                <p>Music</p>
+            </a>
+        </div>
+        <div>
+            <a href="https://www.timeout.com/london/nightlife" class="block text-gray-700 hover:text-blue-500 flex flex-col items-center">
+                <div class="flex items-center justify-center w-16 h-16 rounded-full border-2 border-gray-300 mt-4 mb-4">
+                    <i class="fas fa-glass-cheers text-4xl"></i>
+                </div>
+                <p>Nightlife</p>
+            </a>
+        </div>
+        <div>
+            <a href="https://tinder.com/en-GB" class="block text-gray-700 hover:text-blue-500 flex flex-col items-center">
+                <div class="flex items-center justify-center w-16 h-16 rounded-full border-2 border-gray-300 mt-4 mb-4">
+                    <i class="fas fa-heart text-4xl"></i>
+                </div>
+                <p>Dating</p>
+            </a>
+        </div>
+        <div>
+            <a href="https://www.burlapandblue.com/list-of-hobbies/" class="block text-gray-700 hover:text-blue-500 flex flex-col items-center">
+                <div class="flex items-center justify-center w-16 h-16 rounded-full border-2 border-gray-300 mt-4 mb-4">
+                    <i class="fas fa-gamepad text-4xl"></i>
+                </div>
+                <p>Hobbies</p>
+            </a>
+        </div>
+        <div>
+            <a href="https://www.eventbrite.co.uk/d/united-kingdom--london/free--business--events/" class="block text-gray-700 hover:text-blue-500 flex flex-col items-center">
+                <div class="flex items-center justify-center w-16 h-16 rounded-full border-2 border-gray-300 mt-4 mb-4">
+                    <i class="fas fa-briefcase text-4xl"></i>
+                </div>
+                <p>Business</p>
+            </a>
+        </div>
+        <div>
+            <a href="https://www.timeout.com/london/food-drink" class="block text-gray-700 hover:text-blue-500 flex flex-col items-center">
+                <div class="flex items-center justify-center w-16 h-16 rounded-full border-2 border-gray-300 mt-4 mb-4">
+                    <i class="fas fa-utensils text-4xl"></i>
+                </div>
+                <p>Food & Drink</p>
+            </a>
+        </div>
+        <div>
+            <a href="https://www.battersea.org.uk/" class="block text-gray-700 hover:text-blue-500 flex flex-col items-center">
+                <div class="flex items-center justify-center w-16 h-16 rounded-full border-2 border-gray-300 mt-4 mb-4">
+                    <i class="fas fa-paw text-4xl"></i>
+                </div>
+                <p>Pets</p>
+            </a>
+        </div>
+        <div>
+            <a href="https://www.houseplant.co.uk/collections/house-plants-indoor-plants" class="block text-gray-700 hover:text-blue-500 flex flex-col items-center">
+                <div class="flex items-center justify-center w-16 h-16 rounded-full border-2 border-gray-300 mt-4 mb-4">
+                    <i class="fas fa-seedling text-4xl"></i>
+                </div>
+                <p>Plants</p>
+            </a>
+        </div>
+    </div>
+</section>
+
 <section class="px-[5%] py-16 md:py-24 lg:py-28">
-    <h1 class="text-3xl font-bold md:text-7xl lg:text-8xl mb-8">Events</h1>
+    <h3 class="text-3xl font-bold md:text-7xl lg:text-8xl mb-8">Events</h3>
     <ul>
         <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
             <li th:each="event : ${events}" class="mb-4 p-4 bg-white rounded-lg shadow-md">
                 <a th:href="@{/events/details/{eventId}(eventId=${event.id})}">
+                    <div class="text-lg">
+                        <img th:src="${event.eventImageUrl}" th:if="${event.eventImageUrl}" alt="Event Image" class="mt-2 rounded-lg w-full h-auto"/>
+                        <img th:src="@{/images/default_image.jpeg}" th:unless="${event.eventImageUrl}" alt="Default Event Image" class="mt-2 rounded-lg w-full h-auto"/>
+                    </div>
                     <div class="text-lg"><strong>Title:</strong> <span th:text="${event.title}"></span></div>
                     <div class="text-lg"><strong>Description:</strong> <span th:text="${event.description}"></span></div>
                     <div class="text-lg"><strong>Date:</strong> <span th:text="${#dates.format(event.scheduledDate, 'yyyy-MM-dd')}"></span></div>
                     <div class="text-lg"><strong>Time:</strong> <span th:text="${event.scheduledStartTime}"></span></div>
                 </a>
                 <form th:if="${!event.userAttending}" th:action="@{/events/attend/{id}(id=${event.id})}" method="post">
-                    <p><input type="submit" value="I'm Attending!" /></p>
+                    <button type="submit" class="mt-2 px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-blue-700">
+                        Attend this Event
+                    </button>
                 </form>
                 <p th:if="${event.userAttending}">You are attending this event!</p>
                 <p th:text="'Current number of attendees: ' + ${event.attendees}" ></p>
             </li>
         </div>
     </ul>
 </section>
+
 </body>
-</html>
+</html>

tailwind.config.js

@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  darkMode: 'class', // Enable class-based dark mode
   content: [
     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
@@ -10,11 +11,10 @@ module.exports = {
     extend: {
       backgroundImage: {
         "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+        "gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
       },
     },
   },
   presets: [require("@relume_io/relume-tailwind")],
   plugins: [],
-};
+};