Added create playlist modal & create playlist logic

backend/logs/access.log

@@ -5536,3 +5536,121 @@
 [2025-08-14 20:16:05.601] [undefined] GET(/:id/stats): Successfully get stats with status 200
 [2025-08-14 20:16:09.229] [undefined] PUT(/:id): try to update channel with id 4
 [2025-08-14 20:16:09.234] [undefined] PUT(/:id): Successfully updated channel with status 200
+[2025-08-14 20:19:48.593] [undefined] POST(/login): try to login with username 'sacha2'
+[2025-08-14 20:19:48.645] [undefined] POST(/login): Successfully logged in with status 200
+[2025-08-14 20:19:50.397] [undefined] GET(/:id/channel): try to retrieve channel of user 2
+[2025-08-14 20:19:50.401] [undefined] GET(/:id/channel): successfully retrieved channel of user 2 with status 200
+[2025-08-14 20:19:50.404] [undefined] GET(/:id/history): try to retrieve history of user 2
+[2025-08-14 20:19:50.409] [undefined] GET(/:id/history): successfully retrieved history of user 2 with status 200
+[2025-08-14 20:19:50.416] [undefined] GET(/user/:id): Playlists retrieved for user with id 2 with status 200
+[2025-08-14 20:19:52.573] [undefined] GET(/:id): try to get channel with id 1
+[2025-08-14 20:19:52.582] [undefined] GET(/:id/stats): try to get stats
+[2025-08-14 20:19:52.586] [undefined] GET(/:id): Successfully get channel with id 1 with status 200
+[2025-08-14 20:19:52.596] [undefined] GET(/:id/stats): Successfully get stats with status 200
+[2025-08-14 20:19:57.515] [undefined] GET(/:id/channel): try to retrieve channel of user 2
+[2025-08-14 20:19:57.518] [undefined] GET(/:id/channel): successfully retrieved channel of user 2 with status 200
+[2025-08-14 20:19:59.762] [undefined] GET(/:id): try to get channel with id 1
+[2025-08-14 20:19:59.773] [undefined] GET(/:id/stats): try to get stats
+[2025-08-14 20:19:59.777] [undefined] GET(/:id): Successfully get channel with id 1 with status 200
+[2025-08-14 20:19:59.785] [undefined] GET(/:id/stats): Successfully get stats with status 200
+[2025-08-14 20:20:00.371] [undefined] GET(/:id/channel): try to retrieve channel of user 2
+[2025-08-14 20:20:00.375] [undefined] GET(/:id/channel): successfully retrieved channel of user 2 with status 200
+[2025-08-14 20:20:00.377] [undefined] GET(/:id/history): try to retrieve history of user 2
+[2025-08-14 20:20:00.382] [undefined] GET(/:id/history): successfully retrieved history of user 2 with status 200
+[2025-08-14 20:20:00.389] [undefined] GET(/user/:id): Playlists retrieved for user with id 2 with status 200
+[2025-08-14 20:23:01.532] [undefined] GET(/:id/channel): try to retrieve channel of user 2
+[2025-08-14 20:23:01.536] [undefined] GET(/:id/channel): successfully retrieved channel of user 2 with status 200
+[2025-08-14 20:23:01.538] [undefined] GET(/:id/history): try to retrieve history of user 2
+[2025-08-14 20:23:01.544] [undefined] GET(/:id/history): successfully retrieved history of user 2 with status 200
+[2025-08-14 20:23:01.551] [undefined] GET(/user/:id): Playlists retrieved for user with id 2 with status 200
+[2025-08-14 20:31:39.192] [undefined] GET(/:id/channel): try to retrieve channel of user 2
+[2025-08-14 20:31:39.195] [undefined] GET(/:id/channel): successfully retrieved channel of user 2 with status 200
+[2025-08-14 20:31:39.198] [undefined] GET(/:id/history): try to retrieve history of user 2
+[2025-08-14 20:31:39.204] [undefined] GET(/:id/history): successfully retrieved history of user 2 with status 200
+[2025-08-14 20:31:39.211] [undefined] GET(/user/:id): Playlists retrieved for user with id 2 with status 200
+[2025-08-14 20:31:53.915] [undefined] GET(/:id/channel): try to retrieve channel of user 2
+[2025-08-14 20:31:53.918] [undefined] GET(/:id/channel): successfully retrieved channel of user 2 with status 200
+[2025-08-14 20:31:53.942] [undefined] GET(/:id/history): try to retrieve history of user 2
+[2025-08-14 20:31:53.947] [undefined] GET(/:id/history): successfully retrieved history of user 2 with status 200
+[2025-08-14 20:31:53.956] [undefined] GET(/user/:id): Playlists retrieved for user with id 2 with status 200
+[2025-08-14 20:31:56.423] [undefined] GET(/:id/channel): try to retrieve channel of user 2
+[2025-08-14 20:31:56.426] [undefined] GET(/:id/history): try to retrieve history of user 2
+[2025-08-14 20:31:56.428] [undefined] GET(/:id/channel): successfully retrieved channel of user 2 with status 200
+[2025-08-14 20:31:56.434] [undefined] GET(/:id/history): successfully retrieved history of user 2 with status 200
+[2025-08-14 20:31:56.442] [undefined] GET(/user/:id): Playlists retrieved for user with id 2 with status 200
+[2025-08-14 20:32:02.387] [undefined] GET(/:id/channel): try to retrieve channel of user 2
+[2025-08-14 20:32:02.390] [undefined] GET(/:id/channel): successfully retrieved channel of user 2 with status 200
+[2025-08-14 20:32:02.393] [undefined] GET(/:id/history): try to retrieve history of user 2
+[2025-08-14 20:32:02.399] [undefined] GET(/:id/history): successfully retrieved history of user 2 with status 200
+[2025-08-14 20:32:02.406] [undefined] GET(/user/:id): Playlists retrieved for user with id 2 with status 200
+[2025-08-14 20:32:11.988] [undefined] GET(/:id/channel): try to retrieve channel of user 2
+[2025-08-14 20:32:11.992] [undefined] GET(/:id/channel): successfully retrieved channel of user 2 with status 200
+[2025-08-14 20:32:11.994] [undefined] GET(/:id/history): try to retrieve history of user 2
+[2025-08-14 20:32:11.999] [undefined] GET(/:id/history): successfully retrieved history of user 2 with status 200
+[2025-08-14 20:32:12.007] [undefined] GET(/user/:id): Playlists retrieved for user with id 2 with status 200
+[2025-08-14 20:32:12.840] [undefined] GET(/:id): try to get channel with id 1
+[2025-08-14 20:32:12.850] [undefined] GET(/:id/stats): try to get stats
+[2025-08-14 20:32:12.854] [undefined] GET(/:id): Successfully get channel with id 1 with status 200
+[2025-08-14 20:32:12.862] [undefined] GET(/:id/stats): Successfully get stats with status 200
+[2025-08-14 20:32:13.944] [undefined] GET(/:id/channel): try to retrieve channel of user 2
+[2025-08-14 20:32:13.947] [undefined] GET(/:id/history): try to retrieve history of user 2
+[2025-08-14 20:32:13.950] [undefined] GET(/:id/channel): successfully retrieved channel of user 2 with status 200
+[2025-08-14 20:32:13.953] [undefined] GET(/:id/history): successfully retrieved history of user 2 with status 200
+[2025-08-14 20:32:13.961] [undefined] GET(/user/:id): Playlists retrieved for user with id 2 with status 200
+[2025-08-14 20:32:50.173] [undefined] POST(/): try to register a user with username: test4 and email: test4@gmail.com
+[2025-08-14 20:32:50.223] [undefined] POST(/): successfully registered with status 200
+[2025-08-14 20:32:50.230] [undefined] POST(/login): try to login with username 'test4'
+[2025-08-14 20:32:50.281] [undefined] POST(/login): Successfully logged in with status 200
+[2025-08-14 20:32:51.673] [undefined] GET(/:id/history): try to retrieve history of user 6
+[2025-08-14 20:32:51.677] [undefined] GET(/:id/channel): try to retrieve channel of user 6
+[2025-08-14 20:32:51.679] [undefined] GET(/:id/history): failed to retrieve history of user 6 because it doesn't exist with status 404
+[2025-08-14 20:32:51.682] [undefined] GET(/:id/channel): failed to retrieve channel of user 6 because it doesn't exist with status 404
+[2025-08-14 20:32:51.691] [undefined] GET(/user/:id): Playlists retrieved for user with id 6 with status 200
+[2025-08-14 20:33:07.906] [undefined] GET(/:id/channel): try to retrieve channel of user 6
+[2025-08-14 20:33:07.909] [undefined] GET(/:id/history): try to retrieve history of user 6
+[2025-08-14 20:33:07.911] [undefined] GET(/:id/channel): failed to retrieve channel of user 6 because it doesn't exist with status 404
+[2025-08-14 20:33:07.914] [undefined] GET(/:id/history): failed to retrieve history of user 6 because it doesn't exist with status 404
+[2025-08-14 20:33:07.924] [undefined] GET(/user/:id): Playlists retrieved for user with id 6 with status 200
+[2025-08-14 20:33:16.345] [undefined] GET(/:id/channel): try to retrieve channel of user 6
+[2025-08-14 20:33:16.348] [undefined] GET(/:id/history): try to retrieve history of user 6
+[2025-08-14 20:33:16.351] [undefined] GET(/:id/channel): failed to retrieve channel of user 6 because it doesn't exist with status 404
+[2025-08-14 20:33:16.354] [undefined] GET(/:id/history): failed to retrieve history of user 6 because it doesn't exist with status 404
+[2025-08-14 20:33:16.363] [undefined] GET(/user/:id): Playlists retrieved for user with id 6 with status 200
+[2025-08-14 20:34:21.620] [undefined] GET(/:id/channel): try to retrieve channel of user 6
+[2025-08-14 20:34:21.624] [undefined] GET(/:id/channel): failed to retrieve channel of user 6 because it doesn't exist with status 404
+[2025-08-14 20:34:21.627] [undefined] GET(/:id/history): try to retrieve history of user 6
+[2025-08-14 20:34:21.631] [undefined] GET(/:id/history): failed to retrieve history of user 6 because it doesn't exist with status 404
+[2025-08-14 20:34:21.639] [undefined] GET(/user/:id): Playlists retrieved for user with id 6 with status 200
+[2025-08-14 20:34:36.364] [undefined] GET(/:id/channel): try to retrieve channel of user 6
+[2025-08-14 20:34:36.367] [undefined] GET(/:id/history): try to retrieve history of user 6
+[2025-08-14 20:34:36.369] [undefined] GET(/:id/channel): failed to retrieve channel of user 6 because it doesn't exist with status 404
+[2025-08-14 20:34:36.372] [undefined] GET(/:id/history): failed to retrieve history of user 6 because it doesn't exist with status 404
+[2025-08-14 20:34:36.381] [undefined] GET(/user/:id): Playlists retrieved for user with id 6 with status 200
+[2025-08-14 20:34:55.418] [undefined] GET(/:id/channel): try to retrieve channel of user 6
+[2025-08-14 20:34:55.422] [undefined] GET(/:id/channel): failed to retrieve channel of user 6 because it doesn't exist with status 404
+[2025-08-14 20:34:55.425] [undefined] GET(/:id/history): try to retrieve history of user 6
+[2025-08-14 20:34:55.428] [undefined] GET(/:id/history): failed to retrieve history of user 6 because it doesn't exist with status 404
+[2025-08-14 20:34:55.436] [undefined] GET(/user/:id): Playlists retrieved for user with id 6 with status 200
+[2025-08-14 20:35:04.997] [undefined] GET(/:id/channel): try to retrieve channel of user 6
+[2025-08-14 20:35:05.000] [undefined] GET(/:id/channel): failed to retrieve channel of user 6 because it doesn't exist with status 404
+[2025-08-14 20:35:05.004] [undefined] GET(/:id/history): try to retrieve history of user 6
+[2025-08-14 20:35:05.008] [undefined] GET(/:id/history): failed to retrieve history of user 6 because it doesn't exist with status 404
+[2025-08-14 20:35:05.015] [undefined] GET(/user/:id): Playlists retrieved for user with id 6 with status 200
+[2025-08-14 20:36:01.767] [undefined] PUT(/:id): try to update user 6
+[2025-08-14 20:36:01.772] [undefined] PUT(/:id): successfully updated user 6 with status 200
+[2025-08-14 20:36:03.230] [undefined] GET(/:id/history): try to retrieve history of user 6
+[2025-08-14 20:36:03.233] [undefined] GET(/:id/channel): try to retrieve channel of user 6
+[2025-08-14 20:36:03.236] [undefined] GET(/:id/history): failed to retrieve history of user 6 because it doesn't exist with status 404
+[2025-08-14 20:36:03.239] [undefined] GET(/:id/channel): failed to retrieve channel of user 6 because it doesn't exist with status 404
+[2025-08-14 20:36:03.248] [undefined] GET(/user/:id): Playlists retrieved for user with id 6 with status 200
+[2025-08-14 20:41:31.791] [undefined] GET(/:id/channel): try to retrieve channel of user 6
+[2025-08-14 20:41:31.794] [undefined] GET(/:id/history): try to retrieve history of user 6
+[2025-08-14 20:41:31.797] [undefined] GET(/:id/channel): failed to retrieve channel of user 6 because it doesn't exist with status 404
+[2025-08-14 20:41:31.800] [undefined] GET(/:id/history): failed to retrieve history of user 6 because it doesn't exist with status 404
+[2025-08-14 20:41:31.808] [undefined] GET(/user/:id): Playlists retrieved for user with id 6 with status 200
+[2025-08-14 20:41:50.529] [undefined] GET(/:id/channel): try to retrieve channel of user 6
+[2025-08-14 20:41:50.532] [undefined] GET(/:id/history): try to retrieve history of user 6
+[2025-08-14 20:41:50.535] [undefined] GET(/:id/channel): failed to retrieve channel of user 6 because it doesn't exist with status 404
+[2025-08-14 20:41:50.539] [undefined] GET(/:id/history): failed to retrieve history of user 6 because it doesn't exist with status 404
+[2025-08-14 20:41:50.550] [undefined] GET(/user/:id): Playlists retrieved for user with id 6 with status 200
+[2025-08-14 20:41:53.692] [undefined] POST(/): Playlist created with id 7 with status 200

frontend/src/modals/CreatePlaylistModal.jsx

@@ -0,0 +1,46 @@
+import { useState } from "react";
+import { createPlaylist } from "../services/playlist.service.js";
+
+export default function CreatePlaylistModal({ isOpen, onClose, addAlert }) {
+
+    const [name, setName] = useState('');
+
+    const onSubmit = async (e) => {
+        e.preventDefault();
+        const token = localStorage.getItem("token");
+        const body = { name };
+        await createPlaylist(body, token, addAlert);
+        onClose();
+    };
+
+    return isOpen && (
+
+        <div className="bg-[#00000080] fixed top-0 left-0 w-screen h-screen flex flex-col items-center justify-center" >
+            <div className="glassmorphism p-4 w-1/4" >
+                <h2 className="text-2xl text-white font-montserrat font-bold" >Créer une playlist</h2>
+                <label htmlFor="name" className="block text-xl text-white font-montserrat font-semibold mt-2" >Nom de la playlist</label>
+                <input
+                    type="text"
+                    id="name"
+                    name="name"
+                    placeholder="Nom de la playlist"
+                    className="block glassmorphism text-lg text-white font-inter w-full py-3 px-2 focus:outline-none"
+                    onChange={(e) => setName(e.target.value)}
+                    value={name}
+                />
+                <button
+                    className="bg-primary mt-2 py-2 px-3 rounded-sm text-white font-montserrat text-2xl font-semibold cursor-pointer"
+                    onClick={(e) => onSubmit(e) }
+                >
+                    Valider
+                </button>
+                <button
+                    className="bg-red-500 ml-2 mt-2 py-2 px-3 rounded-sm text-white font-montserrat text-2xl font-semibold cursor-pointer"
+                    onClick={onClose}
+                >
+                    Annuler
+                </button>
+            </div>
+        </div>
+    )
+}

frontend/src/pages/Account.jsx

@@ -1,9 +1,10 @@
 import Navbar from "../components/Navbar.jsx";
-import {useEffect, useState} from "react";
+import { useEffect, useState } from "react";
 import PlaylistCard from "../components/PlaylistCard.jsx";
 import VideoCard from "../components/VideoCard.jsx";
-import {useNavigate} from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import CreateChannelModal from "../modals/CreateChannelModal.jsx";
+import CreatePlaylistModal from "../modals/CreatePlaylistModal.jsx";
 import { getChannel, getUserHistory, getPlaylists, updateUser } from "../services/user.service.js";
 
 
@@ -21,6 +22,7 @@ export default function Account() {
     const [userPlaylists, setUserPlaylists] = useState([]);
     const [userChannel, setUserChannel] = useState(null);
     const [isModalOpen, setIsModalOpen] = useState(false);
+    const [isCreatePlaylistModalOpen, setIsCreatePlaylistModalOpen] = useState(false);
     const [alerts, setAlerts] = useState([]);
 
     const navigation = useNavigate();
@@ -100,13 +102,13 @@ export default function Account() {
                                 src={user.picture}
                                 className="w-full aspect-square rounded-full object-cover"
                             />
-                                <div className={`absolute w-full h-full bg-[#000000EF] flex items-center justify-center top-0 left-0 rounded-full ${(isPictureEditActive && editMode) ? "opacity-100 cursor-pointer" : "opacity-0 cursor-default"} ` } >
+                            <div className={`absolute w-full h-full bg-[#000000EF] flex items-center justify-center top-0 left-0 rounded-full ${(isPictureEditActive && editMode) ? "opacity-100 cursor-pointer" : "opacity-0 cursor-default"} `} >
                                 <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" className="fill-white" viewBox="0 0 24 24">
                                     <path d="M19.045 7.401c.378-.378.586-.88.586-1.414s-.208-1.036-.586-1.414l-1.586-1.586c-.378-.378-.88-.586-1.414-.586s-1.036.208-1.413.585L4 13.585V18h4.413L19.045 7.401zm-3-3 1.587 1.585-1.59 1.584-1.586-1.585 1.589-1.584zM6 16v-1.585l7.04-7.018 1.586 1.586L7.587 16H6zm-2 4h16v2H4z"></path>
                                 </svg>
                             </div>
                         </label>
-                            <input type="file" accept="image/*" id="image" className="absolute inset-0 w-full h-full opacity-0 cursor-pointer" disabled={!editMode}/>
+                        <input type="file" accept="image/*" id="image" className="absolute inset-0 w-full h-full opacity-0 cursor-pointer" disabled={!editMode} />
                     </div>
                     <label htmlFor="name" className="text-2xl text-white mb-1 block font-montserrat">
                         Nom d'utilisateur
@@ -134,7 +136,7 @@ export default function Account() {
                         disabled={!editMode}
                     />
 
-                        { editMode && (
+                    {editMode && (
                         <>
                             <label htmlFor="password" className="text-2xl text-white mb-1 mt-4 block font-montserrat">
                                 Mot de passe
@@ -223,7 +225,12 @@ export default function Account() {
                         </div>
                     )}
                     {/* Playlists */}
-                        <h2 className="font-montserrat font-bold text-3xl text-white mt-10" >Playlists</h2>
+                    <div className="flex justify-between items-center w-full mt-10">
+                        <h2 className="font-montserrat font-bold text-3xl text-white" >Playlists</h2>
+                        <button onClick={() => setIsCreatePlaylistModalOpen(true)} className="bg-primary p-3 rounded-sm text-white font-montserrat text-lg font-semibold cursor-pointer">
+                            Créer une playlist
+                        </button>
+                    </div>
                     <div className="w-full mt-5 flex flex-wrap" >
                         {
                             userPlaylists && userPlaylists.map((playlist, index) => (
@@ -237,7 +244,7 @@ export default function Account() {
                         {
                             userHistory && userHistory.map((video, index) => (
                                 <div className="w-1/3" key={index}>
-                                        <VideoCard video={video}/>
+                                    <VideoCard video={video} />
                                 </div>
                             ))
                         }
@@ -246,6 +253,7 @@ export default function Account() {
 
             </main>
             <CreateChannelModal isOpen={isModalOpen} onClose={() => closeModal()} addAlert={addAlert} />
+            <CreatePlaylistModal isOpen={isCreatePlaylistModalOpen} onClose={() => setIsCreatePlaylistModalOpen(false)} addAlert={addAlert} />
         </div>
     )
 

frontend/src/services/playlist.service.js

@@ -0,0 +1,23 @@
+
+export async function createPlaylist(body, token, addAlert) {
+    try {
+        const response = await fetch(`https://localhost/api/playlists`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${token}`
+            },
+            body: JSON.stringify(body)
+        });
+
+        if (!response.ok) {
+            throw new Error('Failed to create playlist');
+        }
+
+        const data = await response.json();
+        addAlert('success', 'Playlist created successfully');
+        return data;
+    } catch (error) {
+        addAlert('error', error.message);
+    }
+}