diff --git a/server/web_app/public/css/about.css b/server/web_app/public/css/about.css
new file mode 100644
index 0000000000000000000000000000000000000000..b386d2f77cef6b5e76b22a40b111d21cae6648fc
--- /dev/null
+++ b/server/web_app/public/css/about.css
@@ -0,0 +1,57 @@
+@import url('global.css');
+
+.about-container {
+ background-color: #f4f4f4;
+ color: #333;
+ padding: 40px;
+ margin: 20px;
+ border-radius: 8px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ max-width: 900px;
+ margin: 50px auto;
+ text-align: center;
+}
+
+h1 {
+ font-size: 2.5rem;
+ color: #007bff;
+ margin-bottom: 20px;
+}
+
+.intro {
+ font-size: 1.1rem;
+ line-height: 1.6;
+ margin-bottom: 40px;
+ color: #555;
+}
+
+.team {
+ display: flex;
+ flex-direction: column;
+ gap: 30px;
+}
+
+.team-member {
+ background-color: #ffffff;
+ padding: 20px;
+ border-radius: 8px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.team-member h3 {
+ font-size: 1.5rem;
+ color: #333;
+}
+
+.team-member p {
+ font-size: 1.1rem;
+ margin: 5px 0;
+ color: #666;
+}
+
+.footer {
+ margin-top: 40px;
+ font-size: 1.2rem;
+ font-weight: bold;
+ color: #444;
+}
diff --git a/server/web_app/public/css/global.css b/server/web_app/public/css/global.css
index 00e58ea931f3eae94bfcc8394a5383d972fbf14e..403e0fcd649843c0e7cef39215e119504c1bb100 100644
--- a/server/web_app/public/css/global.css
+++ b/server/web_app/public/css/global.css
@@ -47,7 +47,7 @@ body {
}
.container {
- margin: var(--padding-space-large);
+ margin: 5rem 2rem;
}
.table-container {
diff --git a/server/web_app/public/css/login.css b/server/web_app/public/css/login.css
index 20d32d76fcd3da6fc04a81066945a287b525a26a..0c4e1ad83fe28ec5839c43844e6c7836ad52e654 100644
--- a/server/web_app/public/css/login.css
+++ b/server/web_app/public/css/login.css
@@ -1 +1,74 @@
@import url('global.css');
+
+html, body {
+ height: 100%;
+ margin: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.login-container {
+ width: 100%;
+ max-width: 400px;
+ background-color: #fff;
+ padding: 40px;
+ border-radius: 8px;
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+ text-align: center;
+}
+
+#login-title {
+ font-size: 1.8rem;
+ color: var(--color-basic);
+ margin-bottom: 20px;
+}
+
+label {
+ display: block;
+ margin-bottom: 5px;
+}
+
+.input-username, .input-password {
+ width: 100%;
+ padding: 12px;
+ margin: 10px 0;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ font-size: 1rem;
+}
+
+.btn-submit {
+ width: 100%;
+ padding: 12px;
+ background-color: var(--color-basic);
+ border: none;
+ color: white;
+ border-radius: 4px;
+ font-size: 1.1rem;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+}
+
+.btn-submit:hover {
+ background-color: var(--color-secondary);
+}
+
+#extra-links {
+ text-align: center;
+ margin-top: 20px;
+ font-size: 0.9rem;
+}
+
+.link-create-account, .link-forgot-password {
+ color: var(--color-basic);
+ text-decoration: none;
+}
+
+.link-create-account:hover, .link-forgot-password:hover {
+ text-decoration: underline;
+}
+
+#extra-links p {
+ margin: 5px 0;
+}
diff --git a/server/web_app/public/css/menu.css b/server/web_app/public/css/menu.css
index f47392a260800e4cb6f68a5b12c2fd563bdba957..5543e311e3afb095055b2879b2652cc797a456b5 100644
--- a/server/web_app/public/css/menu.css
+++ b/server/web_app/public/css/menu.css
@@ -1,36 +1,90 @@
@import url('global.css');
-nav {
- background-color: var(--color-hover);
+header {
+ background-color: var(--color-primary);
+ color: #fff;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ position: absolute;
+ top: 0;
+ right: 0;
width: 100%;
+ z-index: 10;
+}
+
+.menu-toggle {
+ display: none;
+}
+
+.menu-icon {
+ margin: var(--padding-space-normal);
+ width: var(--font-size-big);
+ height: var(--font-size-big);
+ cursor: pointer;
+}
+
+.svg-icon {
+ width: 100%;
+ height: 100%;
}
nav ul {
list-style-type: none;
- padding: 0;
- margin: 0;
- display: flex;
- flex-direction: row;
+ display: none;
+ gap: var(--padding-space-small);
}
-nav ul li {
- margin: var(--margin-space-xsmall) 0;
+.menu-toggle:checked + .menu-icon + nav ul {
+ display: flex;
+ flex-direction: column;
}
nav ul li a {
- color: var(--color-complementary);
- text-decoration: none;
- font-size: var(--font-size-normal);
- display: block;
padding: var(--padding-space-normal);
- border-radius: var(--padding-space-small) var(--border-thick);
- transition: background-color 0.3s, color 0.3s;
+ text-decoration: none;
+ color: var(--color-secondary);
}
-nav ul li a:hover {
- background-color: var(--color-secondary);
+@media (min-width: 767px) {
+
+ nav {
+ background-color: var(--color-hover);
+ width: 100%;
+ }
+
+ nav ul {
+ list-style-type: none;
+ padding: 0;
+ margin: 0;
+ display: flex;
+ flex-direction: row;
+ }
+
+ nav ul li {
+ margin: var(--margin-space-xsmall) 0;
+ }
+
+ nav ul li a {
+ color: var(--color-complementary);
+ text-decoration: none;
+ font-size: var(--font-size-normal);
+ display: block;
+ padding: var(--padding-space-normal);
+ border-radius: var(--padding-space-small) var(--border-thick);
+ transition: background-color 0.3s, color 0.3s;
+ }
+
+ nav ul li a:hover {
+ background-color: var(--color-secondary);
+ }
+
+ .menu-icon {
+ display: none;
+ }
}
+
.login {
margin-left: auto;
}
diff --git a/server/web_app/public/css/wishlist.css b/server/web_app/public/css/wishlist.css
new file mode 100644
index 0000000000000000000000000000000000000000..a5084e6212544572d2c8c94df8a7158edc2b4289
--- /dev/null
+++ b/server/web_app/public/css/wishlist.css
@@ -0,0 +1,21 @@
+@import url('global.css');
+
+button {
+ padding: 6px 12px;
+ margin: var(--margin-space-xsmall);
+ border: none;
+ border-radius: var(--border-thick);
+ color: var(--color-complementary);
+ cursor: pointer;
+ background-color: var(--color-basic);
+}
+
+button:hover {
+ background-color: var(--color-hover);
+ color: var(--color-complementary);
+}
+
+button:disabled {
+ background-color: var(--color-light);
+ color: black;
+}
diff --git a/server/web_app/public/js/wishlist.js b/server/web_app/public/js/wishlist.js
new file mode 100644
index 0000000000000000000000000000000000000000..53b971bb586d8278b1d3fb08244dc7ce4d851d24
--- /dev/null
+++ b/server/web_app/public/js/wishlist.js
@@ -0,0 +1,72 @@
+const ROUTE = 'http://localhost';
+const PORT = '8080';
+
+// Obtener el parámetro `userId` de la URL
+const urlParams = new URLSearchParams(window.location.search);
+
+// Function to fetch wishlists and populate the table
+async function fetchData() {
+ const url = `${ROUTE}:${PORT}/wishLists?userId=${userId}`;
+
+ try {
+ const response = await fetch(url);
+ const data = await response.json();
+ console.log(data)
+ populateTable(data.wishLists); // Populate the table with the fetched data
+ } catch (error) {
+ console.error('Error fetching data:', error);
+ }
+}
+
+// Function to populate the table with the wishlists
+function populateTable(data) {
+ const tableBody = document.getElementById('dataBody');
+ tableBody.innerHTML = ''; // Clear the existing rows
+
+ console.log(data)
+ data.forEach(item => {
+ const row = document.createElement('tr');
+
+ row.innerHTML = `
+ <td>${item.id}</td>
+ <td>${item.name}</td>
+ <td>${item.description}</td>
+ <td>${item.isActive ? 'Active': 'Unactive' }</td>
+ <td>${item.createdAt.date}</td>
+ <td>${item.expirationDate.date}</td>
+ <td>
+ <button onclick="editItem(${item.id})">Edit</button>
+ <button onclick="deleteItem(${item.id})">Delete</button>
+ <button onclick="inviteItem(${item.id})">Invite</button>
+ <button onclick="shareItem(${item.id})">Share</button>
+ <button onclick="detailsItem(${item.id})">Details</button>
+ </td>
+ `;
+
+ tableBody.appendChild(row);
+ });
+}
+
+// Functions for the action buttons (Edit, Delete, Invite, Share, Details)
+function editItem(id) {
+ console.log('Edit item', id);
+}
+
+function deleteItem(id) {
+ console.log('Delete item', id);
+}
+
+function inviteItem(id) {
+ console.log('Invite item', id);
+}
+
+function shareItem(id) {
+ console.log('Share item', id);
+}
+
+function detailsItem(id) {
+ console.log('Item details', id);
+}
+
+// Fetch the wishlists when the page loads
+window.onload = fetchData;
diff --git a/server/web_app/public/svg/menu.svg b/server/web_app/public/svg/menu.svg
new file mode 100644
index 0000000000000000000000000000000000000000..f1d7159d142e1625bd3b5c46347a4d981923c3bf
--- /dev/null
+++ b/server/web_app/public/svg/menu.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" ?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 12 12" enable-background="new 0 0 12 12" id="svg_1" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+
+<g>
+
+<rect fill="#FFFFFF" height="1" width="11" x="0.5" y="5.5"/>
+
+<rect fill="#FFFFFF" height="1" width="11" x="0.5" y="2.5"/>
+
+<rect fill="#FFFFFF" height="1" width="11" x="0.5" y="8.5"/>
+
+</g>
+
+</svg>
\ No newline at end of file
diff --git a/server/web_app/src/Controller/MainController.php b/server/web_app/src/Controller/MainController.php
index 9296ac25c7ebdf365262db70ed8c6d5e1a18e0a8..723f623a31615555b2dad2e0b92d902f0c988f6e 100644
--- a/server/web_app/src/Controller/MainController.php
+++ b/server/web_app/src/Controller/MainController.php
@@ -15,6 +15,24 @@ class MainController extends AbstractController
return $this->render('home.html.twig');
}
+ #[Route('/about', name: 'about')]
+ public function aboutUs(): Response
+ {
+ return $this->render('about.html.twig');
+ }
+
+ #[Route('/myWishLists', name: 'myWishLists')]
+ public function myWishLits(): Response
+ {
+ $user = $this->getUser();
+
+ if ($user) {
+ return $this->render('wishList.html.twig');
+ }
+
+ return $this->redirectToRoute('error');
+ }
+
#[Route('/login', name: 'app_login')]
public function login(AuthenticationUtils $authenticationUtils): Response
{
diff --git a/server/web_app/templates/about.html.twig b/server/web_app/templates/about.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..ef23e32305295729a8815c82bed338a22be0f62d
--- /dev/null
+++ b/server/web_app/templates/about.html.twig
@@ -0,0 +1,37 @@
+{% extends 'base.html.twig' %}
+
+{% block styles %}
+ <link rel="stylesheet" href="{{ asset('css/about.css') }}">
+{% endblock %}
+
+{% block body %}
+ <div class="about-container">
+ <h1>About Us</h1>
+
+ <p class="intro">The project is a web platform designed for users to create and share gift wishlists. Users can register, log in, and manage their wishlists, including adding, editing, and deleting items. Each wishlist can be shared via a unique URL, allowing others to view and purchase gifts. When an item is purchased, the buyer can upload proof, and the item is marked as bought. The platform also includes an administration dashboard for tracking the most valuable gifts and managing user accounts.</p>
+
+ <div class="team">
+ <h2>Teams</h2>
+
+ <div class="team-member">
+ <h3>Team 1: use case 1 - Gift wishlist creation</h3>
+ <p>WANG Lixi</p>
+ <p>ZHANG Chen</p>
+ </div>
+
+ <div class="team-member">
+ <h3>Team 2: use case 2 - Purchasing a gift for someone from that person’s wishlist</h3>
+ <p>XIANG Yuntian</p>
+ <p>ZHU Xinlei</p>
+ </div>
+
+ <div class="team-member">
+ <h3>Team 3: use case 3 - Administration</h3>
+ <p>MIRANDA RODRIGUEZ Anamaria</p>
+ <p>PEREZ RAMIREZ Julian</p>
+ </div>
+ </div>
+
+ <p class="footer">WEBAPP - IMT Atlantique</p>
+ </div>
+{% endblock %}
diff --git a/server/web_app/templates/base.html.twig b/server/web_app/templates/base.html.twig
index 68d3bc31b9010af25e98a9d6b137450d1a8e272f..881ed8b02a51e2d1566df5e9fc9db16d060dbed9 100644
--- a/server/web_app/templates/base.html.twig
+++ b/server/web_app/templates/base.html.twig
@@ -7,7 +7,10 @@
<title>{% block title %}Wishlist app{% endblock %}</title>
</head>
<body>
- {% include 'menu.html.twig' %}
+ <header>
+ {% include 'menu.html.twig' %}
+ </header>
+
{% block body %}{% endblock %}
</body>
</html>
\ No newline at end of file
diff --git a/server/web_app/templates/login.html.twig b/server/web_app/templates/login.html.twig
index 7bb685f0d2a021aec66977f46866fb2e72d8de59..0a862327a564168dcd6286f5c51ca55ab6f2164d 100644
--- a/server/web_app/templates/login.html.twig
+++ b/server/web_app/templates/login.html.twig
@@ -7,20 +7,25 @@
{% endblock %}
{% block body %}
- <form action="{{ path('app_login_check') }}" method="post">
-
- <h3>Please sign in</h3>
- <label for="username">User Name</label>
- <input type="text" value="{{ last_username }}" name="_username" id="username" class="form-control" autocomplete="username" required autofocus>
- <label for="password">Password</label>
- <input type="password" name="_password" id="password" class="form-control" autocomplete="current-password" required>
-
- <input type="hidden" name="_csrf_token"
- value="{{ csrf_token('authenticate') }}"
- >
-
- <button>
- Sign in
- </button>
- </form>
+ <div class="login-container">
+ <form action="{{ path('app_login_check') }}" method="post" id="login-form">
+
+ <div class="form-title" id="login-title">Please sign in</div>
+
+ <label for="username" class="label-username">User Name</label>
+ <input type="text" value="{{ last_username }}" name="_username" id="username" class="input-username" autocomplete="username" required autofocus>
+
+ <label for="password" class="label-password">Password</label>
+ <input type="password" name="_password" id="password" class="input-password" autocomplete="current-password" required>
+
+ <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
+
+ <button type="submit" class="btn-submit">Sign in</button>
+
+ <div class="extra-links" id="extra-links">
+ <p><a href="#" class="link-create-account">Create an account</a></p>
+ <p><a href="#" class="link-forgot-password">You forgot your password? Click here</a></p>
+ </div>
+ </form>
+ </div>
{% endblock %}
diff --git a/server/web_app/templates/menu.html.twig b/server/web_app/templates/menu.html.twig
index 253cf91836820b5bc5c53f8cd8045ef7576e2605..7b593060ecbe8dc2fac74ef37d301f48ffefafcb 100644
--- a/server/web_app/templates/menu.html.twig
+++ b/server/web_app/templates/menu.html.twig
@@ -2,15 +2,21 @@
<link rel="stylesheet" href="{{ asset('css/menu.css') }}">
{% endblock %}
+<input type="checkbox" id="menuToggle" class="menu-toggle">
+
+<label for="menuToggle" class="menu-icon">
+ <img src="{{ asset('svg/menu.svg') }}" class="svg-icon" alt="Menu Icon">
+</label>
+
<nav>
<ul>
- <li><a href=#>My wishlists</a></li>
- <li><a href=#>Shared wishlists</a></li>
+ <li><a href="{{ path('about') }}">About us</a></li>
{% if is_granted('ROLE_ADMIN') %}
<li><a href="{{ path('dashboard') }}">Dashboard </a></li>
{% endif %}
{% if app.user %}
+ <li><a href="{{ path('myWishLists') }}">My wishlists</a></li>
<li class="login"><a href="{{ path('app_logout') }}">Logout</a></li>
{% else %}
<li class="login"><a href="{{ path('app_login') }}">Login</a></li>
diff --git a/server/web_app/templates/wishList.html.twig b/server/web_app/templates/wishList.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..443db77cce5487203d28ef82f5a3aa60b6663989
--- /dev/null
+++ b/server/web_app/templates/wishList.html.twig
@@ -0,0 +1,35 @@
+{% extends 'base.html.twig' %}
+
+{% block styles %}
+ <link rel="stylesheet" href="{{ asset('css/wishlist.css') }}">
+{% endblock %}
+
+{% block body %}
+ <h3>Wishlists</h1>
+
+ <!-- Table to show wishlists -->
+ <section class="container">
+ <table id="wishlistTable">
+ <thead>
+ <tr>
+ <th>ID</th>
+ <th>Name</th>
+ <th>Description</th>
+ <th>Status</th>
+ <th>Created At</th>
+ <th>Expiration Date</th>
+ <th>Actions</th>
+ </tr>
+ </thead>
+ <tbody id="dataBody">
+ <!-- Data will be populated here dynamically -->
+ </tbody>
+ </table>
+ </section>
+
+ <script>
+ const userId = {{ app.user.id }};
+ </script>
+
+ <script src="{{ asset('js/wishlist.js') }}"></script>
+{% endblock %}