astria
/
3RESIT
1
0
Fork 0
Code Issues Pull Requests 1 Projects 1 Releases 6 Wiki Activity
Browse Source

Merge pull request 'features/delete' (#10) from features/delete into developpement 

Reviewed-on: #10
pull/12/head
astria 4 months ago
parent
f7f1ccbb3a 492529f846
commit
196ec84a60
27 changed files with 2283 additions and 496 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 18
      backend/app/controllers/channel.controller.js
  2. 10
      backend/app/controllers/comment.controller.js
  3. 6
      backend/app/controllers/oauth.controller.js
  4. 42
      backend/app/controllers/playlist.controller.js
  5. 82
      backend/app/controllers/recommendation.controller.js
  6. 4
      backend/app/controllers/search.controller.js
  7. 190
      backend/app/controllers/user.controller.js
  8. 34
      backend/app/controllers/video.controller.js
  9. 94
      backend/app/middlewares/channel.middleware.js
  10. 36
      backend/app/middlewares/comment.middleware.js
  11. 68
      backend/app/middlewares/playlist.middleware.js
  12. 74
      backend/app/middlewares/user.middleware.js
  13. 132
      backend/app/middlewares/video.middleware.js
  14. 10
      backend/app/routes/user.route.js
  15. 35
      backend/app/utils/database.js
  16. 1335
      backend/logs/access.log
  17. 21
      backend/tools.js
  18. 2
      frontend/src/components/Navbar.jsx
  19. 2
      frontend/src/modals/VerificationModal.jsx
  20. 215
      frontend/src/pages/Account.jsx
  21. 126
      frontend/src/pages/ManageChannel.jsx
  22. 23
      frontend/src/pages/ManageVideo.jsx
  23. 95
      frontend/src/pages/Subscription.jsx
  24. 9
      frontend/src/routes/routes.jsx
  25. 24
      frontend/src/services/channel.service.js
  26. 65
      frontend/src/services/user.service.js
  27. 23
      frontend/src/services/video.service.js

18
backend/app/controllers/channel.controller.js
View File

@ -18,7 +18,7 @@ export async function create(req, res) {
logger.action("try to create new channel with owner " + channel.owner + " and name " + channel.name);
logger.write("Successfully created new channel with name " + channel.name, 200);
client.end();
client.release();
res.status(200).json(channel);
}
@ -87,7 +87,7 @@ export async function getById(req, res) {
result.rows[0].videos = videoReturn;
logger.write("Successfully get channel with id " + id, 200);
client.end();
client.release();
res.status(200).json(result.rows[0]);
}
@ -123,7 +123,7 @@ export async function getAll(req, res) {
})
logger.write("Successfully get all channels", 200);
client.end();
client.release();
res.status(200).json(result);
}
@ -147,7 +147,7 @@ export async function update(req, res) {
const nameResult = await client.query(nameQuery, [channel.name]);
if (nameResult.rows.length > 0) {
logger.write("failed to update channel because name already taken", 400);
client.end();
client.release();
res.status(400).json({error: 'Name already used'});
return
}
@ -156,7 +156,7 @@ export async function update(req, res) {
const updateQuery = `UPDATE channels SET name = $1, description = $2 WHERE id = $3`;
await client.query(updateQuery, [channel.name, channel.description, id]);
logger.write("Successfully updated channel", 200);
client.end();
client.release();
res.status(200).json(channel);
}
@ -169,7 +169,7 @@ export async function del(req, res) {
const query = `DELETE FROM channels WHERE id = $1`;
await client.query(query, [id]);
logger.write("Successfully deleted channel", 200);
client.end();
client.release();
res.status(200).json({message: 'Successfully deleted'});
}
@ -194,7 +194,7 @@ export async function toggleSubscription(req, res) {
const remainingSubscriptions = countResult.rows[0].count;
logger.write("Successfully unsubscribed from channel", 200);
client.end();
client.release();
res.status(200).json({message: 'Unsubscribed successfully', subscriptions: remainingSubscriptions});
} else {
// Subscribe
@ -207,7 +207,7 @@ export async function toggleSubscription(req, res) {
const totalSubscriptions = countResult.rows[0].count;
logger.write("Successfully subscribed to channel", 200);
client.end();
client.release();
res.status(200).json({message: 'Subscribed successfully', subscriptions: totalSubscriptions});
}
}
@ -233,7 +233,7 @@ export async function getStats(req, res) {
const client = await getClient();
const result = await client.query(request, [id]);
logger.write("Successfully get stats", 200);
client.end();
client.release();
res.status(200).json(result.rows[0]);
} catch (error) {
console.log(error);

10
backend/app/controllers/comment.controller.js
View File

@ -39,7 +39,7 @@ export async function upload(req, res) {
createdAt: createdAt
}
client.end();
client.release();
res.status(200).json(responseComment);
}
@ -52,7 +52,7 @@ export async function getByVideo(req, res) {
const query = `SELECT * FROM comments WHERE video = $1`;
const result = await client.query(query, [videoId]);
logger.write("successfully get comment", 200);
client.end()
client.release()
res.status(200).json(result.rows);
}
@ -64,7 +64,7 @@ export async function getById(req, res) {
const query = `SELECT * FROM comments WHERE id = $1`;
const result = await client.query(query, [id]);
logger.write("successfully get comment", 200);
client.end();
client.release();
res.status(200).json(result.rows[0]);
}
@ -76,7 +76,7 @@ export async function update(req, res) {
const query = `UPDATE comments SET content = $1 WHERE id = $2`;
const result = await client.query(query, [req.body.content, id]);
logger.write("successfully update comment", 200);
client.end();
client.release();
res.status(200).json(result.rows[0]);
}
@ -88,6 +88,6 @@ export async function del(req, res) {
const query = `DELETE FROM comments WHERE id = $1`;
const result = await client.query(query, [id]);
logger.write("successfully deleted comment", 200);
client.end();
client.release();
res.status(200).json(result.rows[0]);
}

6
backend/app/controllers/oauth.controller.js
View File

@ -102,7 +102,7 @@ export async function callback(req, res, next) {
await client.query(playlistQuery, [dbUser.id]);
}
client.end();
client.release();
// Generate JWT token
const payload = {
@ -145,11 +145,11 @@ export async function getUserInfo(req, res) {
const result = await client.query(query, [decoded.id]);
if (!result.rows[0]) {
client.end();
client.release();
return res.status(404).json({ error: "User not found" });
}
client.end();
client.release();
res.status(200).json({ user: result.rows[0] });
} catch (error) {

42
backend/app/controllers/playlist.controller.js
View File

@ -14,11 +14,11 @@ export async function create(req, res) {
try {
const result = await client.query(query, [name, userId]);
logger.write("Playlist created with id " + result.rows[0].id, 200);
client.end()
client.release()
res.status(200).json({ id: result.rows[0].id });
} catch (error) {
logger.write("Error creating playlist: " + error.message, 500);
client.end();
client.release();
res.status(500).json({ error: "Internal server error" });
}
}
@ -33,11 +33,11 @@ export async function addVideo(req, res) {
try {
const result = await client.query(query, [video, id]);
logger.write("Video added to playlist with id " + id, 200);
client.end();
client.release();
res.status(200).json({id: result.rows[0].id});
} catch (error) {
logger.write("Error adding video to playlist: " + error.message, 500);
client.end();
client.release();
res.status(500).json({error: "Internal server error"});
}
}
@ -64,16 +64,16 @@ export async function getByUser(req, res) {
const result = await client.query(query, [id]);
if (result.rows.length === 0) {
logger.write("No playlists found for user with id " + id, 404);
client.end();
client.release();
res.status(404).json({ error: "No playlists found" });
return;
}
logger.write("Playlists retrieved for user with id " + id, 200);
client.end();
client.release();
res.status(200).json(result.rows);
} catch (error) {
logger.write("Error retrieving playlists: " + error.message, 500);
client.end();
client.release();
res.status(500).json({ error: "Internal server error" });
}
}
@ -145,16 +145,16 @@ export async function getById(req, res) {
const result = await client.query(query, [id]);
if (result.rows.length === 0) {
logger.write("No playlist found with id " + id, 404);
client.end();
client.release();
res.status(404).json({ error: "Playlist not found" });
return;
}
logger.write("Playlist retrieved with id " + id, 200);
client.end();
client.release();
res.status(200).json(result.rows[0]);
} catch (error) {
logger.write("Error retrieving playlist: " + error.message, 500);
client.end();
client.release();
res.status(500).json({ error: "Internal server error" });
}
}
@ -171,16 +171,16 @@ export async function update(req, res) {
const result = await client.query(query, [name, id]);
if (result.rows.length === 0) {
logger.write("No playlist found with id " + id, 404);
client.end();
client.release();
res.status(404).json({ error: "Playlist not found", result: result.rows, query: query });
return;
}
logger.write("Playlist updated with id " + result.rows[0].id, 200);
client.end();
client.release();
res.status(200).json({ id: result.rows[0].id });
} catch (error) {
logger.write("Error updating playlist: " + error.message, 500);
client.end();
client.release();
res.status(500).json({ error: "Internal server error" });
}
}
@ -196,16 +196,16 @@ export async function deleteVideo(req, res) {
const result = await client.query(query, [videoId, id]);
if (result.rows.length === 0) {
logger.write("No video found in playlist with id " + id, 404);
client.end();
client.release();
res.status(404).json({ error: "Video not found in playlist" });
return;
}
logger.write("Video deleted from playlist with id " + id, 200);
client.end();
client.release();
res.status(200).json({ id: result.rows[0].id });
} catch (error) {
logger.write("Error deleting video from playlist: " + error.message, 500);
client.end();
client.release();
res.status(500).json({ error: "Internal server error" });
}
}
@ -220,11 +220,11 @@ export async function del(req, res) {
try {
const result = await client.query(query, [id]);
logger.write("Playlist deleted", 200);
client.end()
client.release()
res.status(200).json({ "message": "playlist deleted" });
} catch (error) {
logger.write("Error deleting playlist: " + error.message, 500);
client.end();
client.release();
res.status(500).json({ error: "Internal server error" });
}
}
@ -286,16 +286,16 @@ export async function getSeeLater(req, res) {
const result = await client.query(query, [userId]);
if (result.rows.length === 0) {
logger.write("No 'See Later' playlist found for user with id " + userId, 404);
client.end();
client.release();
res.status(404).json({ error: "'See Later' playlist not found" });
return;
}
logger.write("'See Later' playlist retrieved for user with id " + userId, 200);
client.end();
client.release();
res.status(200).json(result.rows[0].videos);
} catch (error) {
logger.write("Error retrieving 'See Later' playlist: " + error.message, 500);
client.end();
client.release();
res.status(500).json({ error: "Internal server error" });
}

82
backend/app/controllers/recommendation.controller.js
View File

@ -188,68 +188,73 @@ export async function getRecommendations(req, res) {
let result = await client.query(query, [claims.id]);
client.end()
client.release()
res.status(200).json(result.rows);
}
}
export async function getTrendingVideos(req, res) {
const client = await getClient();
try {
// GET 10 VIDEOS WITH THE MOST LIKES AND COMMENTS
let client = await getClient();
// Optimized single query to get all trending video data
let queryTrendingVideos = `
SELECT v.id, v.title, v.description, v.release_date, v.thumbnail, v.visibility,
COUNT(DISTINCT l.id) AS like_count, COUNT(DISTINCT c.id) AS comment_count
SELECT
v.id,
v.title,
v.description,
v.release_date,
v.thumbnail,
v.visibility,
COUNT(DISTINCT l.id) AS like_count,
COUNT(DISTINCT c.id) AS comment_count,
COUNT(DISTINCT h.id) AS views,
ch.id AS creator_id,
ch.name AS creator_name,
u.picture AS creator_profile_picture
FROM videos v
LEFT JOIN likes l ON v.id = l.video
LEFT JOIN comments c ON v.id = c.video
LEFT JOIN history h ON v.id = h.video
LEFT JOIN channels ch ON v.channel = ch.id
LEFT JOIN users u ON ch.owner = u.id
WHERE v.visibility = 'public'
GROUP BY v.id
ORDER BY like_count DESC, comment_count DESC
GROUP BY v.id, ch.id, ch.name, u.picture
ORDER BY like_count DESC, comment_count DESC, views DESC
LIMIT 10
`;
let result = await client.query(queryTrendingVideos);
const trendingVideos = result.rows;
for (let video of trendingVideos) {
// Get the number of views for each video
let viewsQuery = `SELECT COUNT(*) AS view_count FROM history WHERE video = $1;`;
let viewsResult = await client.query(viewsQuery, [video.id]);
video.views = viewsResult.rows[0].view_count;
// Get the creator of each video
let creatorQuery = `SELECT c.id, c.name FROM channels c JOIN videos v ON c.id = v.channel WHERE v.id = $1;`;
let creatorResult = await client.query(creatorQuery, [video.id]);
if (creatorResult.rows.length > 0) {
video.creator = creatorResult.rows[0];
} else {
video.creator = {id: null, name: "Unknown"};
}
`;
// GET THE PROFILE PICTURE OF THE CREATOR
let profilePictureQuery = `SELECT u.picture FROM users u JOIN channels c ON u.id = c.owner WHERE c.id = $1;`;
let profilePictureResult = await client.query(profilePictureQuery, [video.creator.id]);
if (profilePictureResult.rows.length > 0) {
video.creator.profilePicture = profilePictureResult.rows[0].picture;
} else {
video.creator.profilePicture = null; // Default or placeholder image can be set here
let result = await client.query(queryTrendingVideos);
const trendingVideos = result.rows.map(video => ({
id: video.id,
title: video.title,
description: video.description,
release_date: video.release_date,
thumbnail: video.thumbnail,
visibility: video.visibility,
like_count: video.like_count,
comment_count: video.comment_count,
views: video.views,
creator: {
id: video.creator_id,
name: video.creator_name,
profilePicture: video.creator_profile_picture
}
}));
}
client.end();
res.status(200).json(trendingVideos);
} catch (error) {
console.error("Error fetching trending videos:", error);
res.status(500).json({error: "Internal server error while fetching trending videos."});
} finally {
client.release();
}
}
export async function getTopCreators(req, res) {
const client = await getClient();
try {
// GET TOP 5 CREATORS BASED ON NUMBER OF SUBSCRIBERS
let client = await getClient();
let queryTopCreators = `
SELECT c.id, c.name, c.description, u.picture AS profilePicture, COUNT(s.id) AS subscriber_count
FROM channels c
@ -258,14 +263,15 @@ export async function getTopCreators(req, res) {
GROUP BY c.id, u.picture
ORDER BY subscriber_count DESC
LIMIT 10;
`;
`;
let result = await client.query(queryTopCreators);
const topCreators = result.rows;
client.end();
res.status(200).json(topCreators);
} catch (error) {
console.error("Error fetching top creators:", error);
res.status(500).json({error: "Internal server error while fetching top creators."});
} finally {
client.release();
}
}

4
backend/app/controllers/search.controller.js
View File

@ -54,7 +54,7 @@ export async function search(req, res) {
videoResults.push(video);
}
client.end()
client.release()
return res.status(200).json(videoResults);
@ -83,7 +83,7 @@ export async function search(req, res) {
channelResults.push(channel);
}
client.end()
client.release()
return res.status(200).json(channelResults);

190
backend/app/controllers/user.controller.js
View File

@ -121,15 +121,16 @@ export async function register(req, res) {
const insertQuery = `INSERT INTO email_verification (email, token, expires_at) VALUES ($1, $2, $3)`;
await client.query(insertQuery, [user.email, token, expirationDate]);
client.end();
console.log("Successfully registered");
client.end();
logger.write("successfully registered", 200);
res.status(200).send({ user: user });
} catch (err) {
console.log(err);
logger?.write("failed to register user", 500);
res.status(500).json({ error: "Internal server error" });
} finally {
client.release();
}
}
@ -165,7 +166,7 @@ export async function verifyEmail(req, res) {
logger.write("failed to verify email for " + email, 500);
res.status(500).json({ error: "Internal server error" });
} finally {
client.end();
client.release();
}
}
@ -180,43 +181,49 @@ export async function login(req, res) {
const client = await getClient();
let query = `SELECT id, username, email, picture, password FROM users WHERE username = $1`;
const result = await client.query(query, [user.username]);
const userInBase = result.rows[0];
try {
let query = `SELECT id, username, email, picture, password FROM users WHERE username = $1`;
const result = await client.query(query, [user.username]);
if (!userInBase) {
logger.write("failed to login", 401)
res.status(401).json({ error: "Invalid credentials" });
return
}
const userInBase = result.rows[0];
const isPasswordValid = await bcrypt.compare(req.body.password, userInBase.password);
if (!userInBase) {
logger.write("failed to login", 401)
res.status(401).json({ error: "Invalid credentials" });
return
}
if (!isPasswordValid) {
logger.write("failed to login", 401)
res.status(401).json({ error: "Invalid credentials" });
return
}
const isPasswordValid = await bcrypt.compare(req.body.password, userInBase.password);
const payload = {
id: userInBase.id,
username: userInBase.username,
}
if (!isPasswordValid) {
logger.write("failed to login", 401)
res.status(401).json({ error: "Invalid credentials" });
return
}
const token = jwt.sign(payload, process.env.JWT_SECRET);
const payload = {
id: userInBase.id,
username: userInBase.username,
}
const userData = {
id: userInBase.id,
username: userInBase.username,
email: userInBase.email,
picture: userInBase.picture
}
const token = jwt.sign(payload, process.env.JWT_SECRET);
logger.write("Successfully logged in", 200);
client.end();
res.status(200).json({ token: token, user: userData });
const userData = {
id: userInBase.id,
username: userInBase.username,
email: userInBase.email,
picture: userInBase.picture
}
logger.write("Successfully logged in", 200);
res.status(200).json({ token: token, user: userData });
} catch (err) {
console.log(err);
logger?.write("failed to login", 500);
res.status(500).json({ error: "Internal server error" });
} finally {
client.release();
}
}
export async function getById(req, res) {
@ -230,7 +237,7 @@ export async function getById(req, res) {
const result = await client.query(query, [id]);
if (!result.rows[0]) {
logger.write("failed to retrieve user " + id + " because it doesn't exist", 404);
client.end()
client.release()
res.status(404).json({ error: "Not Found" });
return
}
@ -249,12 +256,12 @@ export async function getByUsername(req, res) {
const result = await client.query(query, [username]);
if (!result.rows[0]) {
logger.write("failed to retrieve user " + username + " because it doesn't exist", 404);
client.end()
client.release()
res.status(404).json({ error: "Not Found" });
return
}
logger.write("successfully retrieved user " + username, 200);
client.end();
client.release();
return res.status(200).json({ user: result.rows[0] });
}
@ -282,7 +289,7 @@ export async function update(req, res) {
const emailResult = await client.query(emailQuery, [user.email]);
if (emailResult.rows[0]) {
logger.write("failed to update because email is already used", 400)
client.end();
client.release();
res.status(400).json({ error: "Email already exists" });
}
}
@ -292,7 +299,7 @@ export async function update(req, res) {
const usernameResult = await client.query(usernameQuery, [user.username]);
if (usernameResult.rows[0]) {
logger.write("failed to update because username is already used", 400)
client.end();
client.release();
res.status(400).json({ error: "Username already exists" });
}
}
@ -329,11 +336,11 @@ export async function update(req, res) {
const updateQuery = `UPDATE users SET email = $1, username = $2, password = $3, picture = $4 WHERE id = $5 RETURNING id, email, username, picture`;
const result = await client.query(updateQuery, [user.email, user.username, user.password, profilePicture, id]);
logger.write("successfully updated user " + id, 200);
client.end();
client.release();
res.status(200).json(result.rows[0]);
} catch (err) {
console.log(err);
client.end()
client.release()
res.status(500).json({ error: err });
}
@ -347,7 +354,7 @@ export async function deleteUser(req, res) {
const query = `DELETE FROM users WHERE id = $1`;
await client.query(query, [id]);
logger.write("successfully deleted user " + id);
client.end();
client.release();
res.status(200).json({ message: 'User deleted' });
}
@ -362,13 +369,13 @@ export async function getChannel(req, res) {
if (!result.rows[0]) {
logger.write("failed to retrieve channel of user " + id + " because it doesn't exist", 404);
client.end();
client.release();
res.status(404).json({ error: "Channel Not Found" });
return;
}
logger.write("successfully retrieved channel of user " + id, 200);
client.end();
client.release();
res.status(200).json({ channel: result.rows[0] });
}
@ -415,12 +422,12 @@ export async function getHistory(req, res) {
if (!result.rows[0]) {
logger.write("failed to retrieve history of user " + id + " because it doesn't exist", 404);
res.status(404).json({ error: "History Not Found" });
client.end();
client.release();
return;
}
logger.write("successfully retrieved history of user " + id, 200);
client.end();
client.release();
res.status(200).json(videos);
}
@ -439,11 +446,11 @@ export async function isSubscribed(req, res) {
if (result.rows[0]) {
logger.write(`user ${userId} is subscribed to channel ${channelId}`, 200);
client.end();
client.release();
return res.status(200).json({ subscribed: true });
} else {
logger.write(`user ${userId} is not subscribed to channel ${channelId}`, 200);
client.end();
client.release();
return res.status(200).json({ subscribed: false });
}
}
@ -459,11 +466,96 @@ export async function searchByUsername(req, res) {
if (result.rows.length === 0) {
logger.write("no user found with username " + username, 404);
client.end();
client.release();
return res.status(404).json({ error: "User Not Found" });
}
logger.write("successfully found user with username " + username, 200);
client.end();
client.release();
res.status(200).json(result.rows);
}
export async function getAllSubscriptions(req,res) {
const userId = req.params.id;
const client = await getClient();
const logger = req.body.logger;
logger.action("try to retrieve all subscriptions of user " + userId);
const query = `
SELECT
subscriptions.id,
channels.id AS channel_id,
channels.name AS channel_name,
users.picture
FROM
subscriptions
LEFT JOIN channels ON subscriptions.channel = channels.id
LEFT JOIN users ON channels.owner = users.id
WHERE
subscriptions.owner = $1
`;
const result = await client.query(query, [userId]);
if (result.rows.length === 0) {
logger.write("no subscriptions found for user " + userId, 404);
client.release();
return res.status(404).json({ error: "No Subscriptions Found" });
}
logger.write("successfully retrieved all subscriptions of user " + userId, 200);
client.release();
res.status(200).json(result.rows);
}
export async function getAllSubscriptionVideos(req, res) {
const userId = req.params.id;
const client = await getClient();
const logger = req.body.logger;
logger.action("try to retrieve all subscriptions of user " + userId);
const query = `
SELECT
videos.id,
videos.title,
videos.thumbnail,
channels.id AS channel,
videos.visibility,
videos.file,
videos.format,
videos.release_date,
channels.id AS channel_id,
channels.owner,
COUNT(history.id) AS views,
JSON_BUILD_OBJECT(
'name', channels.name,
'profilePicture', users.picture,
'description', channels.description
) AS creator
FROM
subscriptions
LEFT JOIN channels ON subscriptions.channel = channels.id
LEFT JOIN users ON channels.owner = users.id
LEFT JOIN videos ON channels.id = videos.channel
LEFT JOIN history ON videos.id = history.video
WHERE
subscriptions.owner = $1
GROUP BY
videos.id,
channels.id,
users.id;
`;
const result = await client.query(query, [userId]);
if (result.rows.length === 0) {
logger.write("no subscriptions found for user " + userId, 404);
client.release();
return res.status(404).json({ error: "No Subscriptions Found" });
}
logger.write("successfully retrieved all subscriptions of user " + userId, 200);
client.release();
res.status(200).json(result.rows);
}

34
backend/app/controllers/video.controller.js
View File

@ -23,7 +23,7 @@ export async function upload(req, res) {
const query = `SELECT * FROM videos WHERE slug = $1`;
const result = await client.query(query, [hex]);
client.end();
client.release();
if (result.rows.length === 0) {
isGenerate = true;
req.body.slug = hex;
@ -157,7 +157,7 @@ export async function upload(req, res) {
}
logger.write("successfully uploaded video", 200);
await client.end()
await client.release()
res.status(200).json({ "message": "Successfully uploaded video", "id": id });
}
@ -181,7 +181,7 @@ export async function uploadThumbnail(req, res) {
const updateQuery = `UPDATE videos SET thumbnail = $1 WHERE id = $2`;
await client.query(updateQuery, [file, req.body.video]);
logger.write("successfully uploaded thumbnail", 200);
await client.end();
await client.release();
res.status(200).json({ "message": "Successfully uploaded thumbnail" });
}
@ -234,7 +234,7 @@ export async function getById(req, res) {
video.authorizedUsers = authorizedUsersResult.rows;
logger.write("successfully get video " + id, 200);
client.end()
client.release()
res.status(200).json(video);
}
@ -246,7 +246,7 @@ export async function getByChannel(req, res) {
const query = `SELECT * FROM videos WHERE channel = $1`;
const result = await client.query(query, [id]);
logger.write("successfully get video from channel " + id, 200);
client.end()
client.release()
res.status(200).json(result.rows);
}
@ -297,7 +297,7 @@ export async function update(req, res) {
`;
const result = await client.query(resultQuery, [id]);
logger.write("successfully updated video", 200);
client.end()
client.release()
res.status(200).json(result.rows[0]);
}
@ -315,7 +315,7 @@ export async function updateVideo(req, res) {
fs.unlink(pathToDelete, (error) => {
if (error) {
logger.write(error, 500);
client.end()
client.release()
res.status(500).json({ "message": "Failed to delete video" });
return
}
@ -327,7 +327,7 @@ export async function updateVideo(req, res) {
fs.writeFileSync(destinationPath, fileBuffer);
logger.write("successfully updated video", 200);
client.end()
client.release()
res.status(200).json({ "message": "Successfully updated video" });
})
@ -349,7 +349,7 @@ export async function del(req, res) {
fs.unlink(pathToDelete, (error) => {
if (error) {
logger.write(error, 500);
client.end()
client.release()
res.status(500).json({ "message": "Failed to delete video" });
return
}
@ -364,7 +364,7 @@ export async function del(req, res) {
const query = `DELETE FROM videos WHERE id = $1`;
await client.query(query, [id]);
logger.write("successfully deleted video", 200);
client.end()
client.release()
res.status(200).json({ "message": "Successfully deleted video" });
})
})
@ -395,7 +395,7 @@ export async function toggleLike(req, res) {
const likesCount = likesCountResult.rows[0].like_count;
logger.write("no likes found adding likes for video " + id, 200);
client.end();
client.release();
res.status(200).json({ "message": "Successfully added like", "likes": likesCount });
} else {
const query = `DELETE FROM likes WHERE owner = $1 AND video = $2`;
@ -407,7 +407,7 @@ export async function toggleLike(req, res) {
const likesCount = likesCountResult.rows[0].like_count;
logger.write("likes found, removing like for video " + id, 200);
client.end();
client.release();
res.status(200).json({ "message": "Successfully removed like", "likes": likesCount });
}
@ -462,7 +462,7 @@ export async function addTags(req, res) {
const updatedTags = updatedTagsResult.rows;
logger.write("successfully added tags to video " + videoId, 200);
await client.end();
await client.release();
res.status(200).json({ "message": "Successfully added tags to video", "tags": updatedTags.map(tag => tag.name) });
}
@ -522,7 +522,7 @@ export async function getSimilarVideos(req, res) {
}
logger.write("successfully get similar videos for video " + id, 200);
await client.end();
await client.release();
res.status(200).json(result.rows);
}
@ -573,7 +573,7 @@ export async function getLikesPerDay(req, res) {
logger.write("Error retrieving likes per day: " + error.message, 500);
res.status(500).json({ error: "Internal server error" });
} finally {
await client.end();
await client.release();
}
}
@ -596,7 +596,7 @@ export async function addViews(req, res) {
}
logger.write("successfully added views for video " + id, 200);
await client.end();
await client.release();
res.status(200).json({ "message": "Successfully added views" });
}
@ -631,6 +631,6 @@ export async function updateAuthorizedUsers(req, res) {
logger.write("Error updating authorized users: " + error.message, 500);
res.status(500).json({ error: "Internal server error" });
} finally {
await client.end();
await client.release();
}
}

94
backend/app/middlewares/channel.middleware.js
View File

@ -22,55 +22,70 @@ export const ChannelCreate = {
export async function doUserHaveChannel(req, res, next) {
const client = await getClient();
const logger = req.body.logger;
const query = `SELECT id FROM channels WHERE owner = ${req.body.owner}`;
const result = await client.query(query);
try {
const query = `SELECT id FROM channels WHERE owner = $1`;
const result = await client.query(query, [req.body.owner]);
if (result.rows[0]) {
logger.write("failed because user already has a channel", 400);
res.status(400).json({error: "User already own a channel"})
} else {
next()
if (result.rows[0]) {
logger.write("failed because user already has a channel", 400);
res.status(400).json({error: "User already own a channel"})
} else {
next()
}
} finally {
client.release();
}
}
export async function doChannelNameExists(req, res, next) {
const client = await getClient();
const logger = req.body.logger;
const query = `SELECT * FROM channels WHERE name = '${req.body.name}'`;
const result = await client.query(query);
try {
const query = `SELECT * FROM channels WHERE name = $1`;
const result = await client.query(query, [req.body.name]);
if (result.rows[0]) {
logger.write("failed because channel name already exist", 400)
res.status(400).json({error: "Channel name already used"})
} else {
next()
if (result.rows[0]) {
logger.write("failed because channel name already exist", 400)
res.status(400).json({error: "Channel name already used"})
} else {
next()
}
} finally {
client.release();
}
}
export async function doChannelExists(req, res, next) {
const client = await getClient();
const logger = req.body.logger;
const query = `SELECT id FROM channels WHERE id = '${req.params.id}'`;
const result = await client.query(query);
if (result.rows[0]) {
next()
} else {
logger.write("failed to retrieve channel because it doesn't exist", 404);
res.status(404).json({error: "Not Found"})
try {
const query = `SELECT id FROM channels WHERE id = $1`;
const result = await client.query(query, [req.params.id]);
if (result.rows[0]) {
next()
} else {
logger.write("failed to retrieve channel because it doesn't exist", 404);
res.status(404).json({error: "Not Found"})
}
} finally {
client.release();
}
}
export async function doChannelExistBody(req, res, next) {
const client = await getClient();
const logger = req.body.logger;
const query = `SELECT id FROM channels WHERE id = ${req.body.channel}`;
const result = await client.query(query);
if (result.rows[0]) {
next()
} else {
logger.write("failed to retrieve channel because it doesn't exist", 404);
res.status(404).json({error: "Not Found"})
try {
const query = `SELECT id FROM channels WHERE id = $1`;
const result = await client.query(query, [req.body.channel]);
if (result.rows[0]) {
next()
} else {
logger.write("failed to retrieve channel because it doesn't exist", 404);
res.status(404).json({error: "Not Found"})
}
} finally {
client.release();
}
}
@ -83,14 +98,17 @@ export async function isOwner(req, res, next) {
const logger = req.body.logger;
const client = await getClient();
const query = `SELECT id, owner FROM channels WHERE id = ${id}`;
const result = await client.query(query);
const channel = result.rows[0];
if (channel.owner != claims.id) {
logger.write("failed because user do not own the channel", 403);
res.status(403).json({error: "You're not the owner of the channel"})
} else {
next()
try {
const query = `SELECT id, owner FROM channels WHERE id = $1`;
const result = await client.query(query, [id]);
const channel = result.rows[0];
if (channel.owner != claims.id) {
logger.write("failed because user do not own the channel", 403);
res.status(403).json({error: "You're not the owner of the channel"})
} else {
next()
}
} finally {
client.release();
}
}

36
backend/app/middlewares/comment.middleware.js
View File

@ -20,14 +20,18 @@ export async function doCommentExists(req, res, next) {
const logger = req.body.logger;
const client = await getClient();
const query = `SELECT * FROM comments WHERE id = ${id}`;
const result = await client.query(query);
if (result.rows.length === 0) {
logger.write("comment not found", 404);
res.status(404).json({error: "comment not found"});
return
try {
const query = `SELECT * FROM comments WHERE id = $1`;
const result = await client.query(query, [id]);
if (result.rows.length === 0) {
logger.write("comment not found", 404);
res.status(404).json({error: "comment not found"});
return
}
next()
} finally {
client.release();
}
next()
}
export async function isAuthor(req, res, next) {
@ -37,12 +41,16 @@ export async function isAuthor(req, res, next) {
const userId = claims.id;
const logger = req.body.logger;
const client = await getClient();
const query = `SELECT * FROM comments WHERE id = ${id}`;
const result = await client.query(query);
if (userId !== result.rows[0].author) {
logger.write("is not author of the comment", 403);
res.status(403).json({error: "You do not have permission"});
return
try {
const query = `SELECT * FROM comments WHERE id = $1`;
const result = await client.query(query, [id]);
if (userId !== result.rows[0].author) {
logger.write("is not author of the comment", 403);
res.status(403).json({error: "You do not have permission"});
return
}
next()
} finally {
client.release();
}
next()
}

68
backend/app/middlewares/playlist.middleware.js
View File

@ -16,20 +16,23 @@ export async function doPlaylistExists(req, res, next) {
const logger = req.body.logger;
const client = await getClient();
const query = `SELECT id FROM playlists WHERE id = ${id}`;
try {
var result = await client.query(query);
const query = `SELECT id FROM playlists WHERE id = $1`;
const result = await client.query(query, [id]);
if (result.rows.length === 0) {
logger.write("No playlist with id " + id, 404);
res.status(404).json({error: "Playlist not found"});
return;
}
next();
} catch (error) {
logger.write("Error checking playlist existence: " + error.message, 500);
res.status(500).json({error: error});
return;
} finally {
client.release();
}
if (result.rows.length === 0) {
logger.write("No playlist with id " + id, 404);
res.status(404).json({error: "Playlist not found"});
return;
}
next();
}
export async function isOwner(req, res, next) {
@ -41,18 +44,20 @@ export async function isOwner(req, res, next) {
const logger = req.body.logger;
const client = await getClient();
const query = `SELECT owner FROM playlists WHERE id = ${id}`;
const result = await client.query(query);
if(result.rows[0].owner !== userId) {
logger.write("user not the owner of the playlist with id " + id, 403);
res.status(403).json({error: "You do not have permission"});
return;
try {
const query = `SELECT owner FROM playlists WHERE id = $1`;
const result = await client.query(query, [id]);
if(result.rows[0].owner !== userId) {
logger.write("user not the owner of the playlist with id " + id, 403);
res.status(403).json({error: "You do not have permission"});
return;
}
next();
} finally {
client.release();
}
next();
}
export async function isVideoInPlaylist(req, res, next) {
@ -61,22 +66,23 @@ export async function isVideoInPlaylist(req, res, next) {
const videoId = req.params.videoId;
const logger = req.body.logger;
const client = await getClient();
const query = `SELECT id FROM playlist_elements WHERE video = ${videoId} AND playlist = ${id}`;
try {
var result = await client.query(query);
const query = `SELECT id FROM playlist_elements WHERE video = $1 AND playlist = $2`;
const result = await client.query(query, [videoId, id]);
if(result.rows.length === 0) {
logger.write("video " + videoId + "not found in playlist with id " + id, 404 );
res.status(404).json({error: "Video " + videoId + "not found"});
return;
}
next();
} catch (error) {
logger.write("Error checking video in playlist: " + query, 500);
logger.write("Error checking video in playlist: " + error.message, 500);
res.status(500).json({error: error });
return;
} finally {
client.release();
}
if(result.rows.length === 0) {
logger.write("video " + videoId + "not found in playlist with id " + id, 404 );
res.status(404).json({error: "Video " + videoId + "not found"});
return;
}
next();
}

74
backend/app/middlewares/user.middleware.js
View File

@ -44,55 +44,69 @@ export const UserSearch = {
export async function doEmailExists(req, res, next) {
const client = await getClient();
const logger = req.body.logger;
const query = `SELECT * FROM users WHERE email = '${req.body.email}'`;
const result = await client.query(query);
try {
const query = `SELECT * FROM users WHERE email = $1`;
const result = await client.query(query, [req.body.email]);
if (result.rows.length > 0) {
logger.write("failed because email already exists", 400)
res.status(400).send({error: "Email already exists"})
} else {
next()
if (result.rows.length > 0) {
logger.write("failed because email already exists", 400)
res.status(400).send({error: "Email already exists"})
} else {
next()
}
} finally {
client.release();
}
}
export async function doUsernameExists(req, res, next) {
const client = await getClient();
const logger = req.body.logger;
const query = `SELECT * FROM users WHERE username = '${req.body.username}'`;
const result = await client.query(query);
if (result.rows.length > 0) {
logger.write("failed because username already exists", 400)
res.status(400).send({error: "Username already exists"})
} else {
next()
try {
const query = `SELECT * FROM users WHERE username = $1`;
const result = await client.query(query, [req.body.username]);
if (result.rows.length > 0) {
logger.write("failed because username already exists", 400)
res.status(400).send({error: "Username already exists"})
} else {
next()
}
} finally {
client.release();
}
}
export async function doUserExists(req, res, next) {
const client = await getClient();
const logger = req.body.logger;
const query = `SELECT id FROM users WHERE id = ${req.params.id}`;
const result = await client.query(query);
if (result.rows.length > 0) {
next()
}else{
logger.write("failed because user doesn't exists", 404)
res.status(404).json({error: "Not Found"})
try {
const query = `SELECT id FROM users WHERE id = $1`;
const result = await client.query(query, [req.params.id]);
if (result.rows.length > 0) {
next()
}else{
logger.write("failed because user doesn't exists", 404)
res.status(404).json({error: "Not Found"})
}
} finally {
client.release();
}
}
export async function doUserExistsBody(req, res, next) {
const client = await getClient();
const logger = req.body.logger;
const query = `SELECT id FROM users WHERE id = ${req.body.owner}`;
const result = await client.query(query);
if (result.rows.length > 0) {
next()
}else{
logger.write("failed because user doesn't exists", 404)
res.status(404).json({error: "Not Found"})
try {
const query = `SELECT id FROM users WHERE id = $1`;
const result = await client.query(query, [req.body.owner]);
if (result.rows.length > 0) {
next()
}else{
logger.write("failed because user doesn't exists", 404)
res.status(404).json({error: "Not Found"})
}
} finally {
client.release();
}
}

132
backend/app/middlewares/video.middleware.js
View File

@ -50,15 +50,19 @@ export async function isOwner(req, res, next) {
const token = req.headers.authorization.split(' ')[1];
const claims = jwt.decode(token);
const client = await getClient();
const channelQuery = `SELECT owner FROM channels WHERE id = '${channelId}'`;
const channelResult = await client.query(channelQuery);
const channelInBase = channelResult.rows[0];
if (channelInBase.owner !== claims.id) {
logger.write("failed because user is not owner", 403);
res.status(403).json({error: "Not authorized"});
return
try {
const channelQuery = `SELECT owner FROM channels WHERE id = $1`;
const channelResult = await client.query(channelQuery, [channelId]);
const channelInBase = channelResult.rows[0];
if (channelInBase.owner !== claims.id) {
logger.write("failed because user is not owner", 403);
res.status(403).json({error: "Not authorized"});
return
}
next()
} finally {
client.release();
}
next()
}
export async function doVideoExists(req, res, next) {
@ -66,16 +70,19 @@ export async function doVideoExists(req, res, next) {
const videoId = req.body.video;
const client = await getClient();
const query = `SELECT * FROM videos WHERE id = ${videoId}`;
const result = await client.query(query);
const videos = result.rows;
if (videos.length === 0) {
logger.write("failed because video not found", 404);
res.status(404).json({error: "Not Found"});
return
try {
const query = `SELECT * FROM videos WHERE id = $1`;
const result = await client.query(query, [videoId]);
const videos = result.rows;
if (videos.length === 0) {
logger.write("failed because video not found", 404);
res.status(404).json({error: "Not Found"});
return
}
next()
} finally {
client.release();
}
next()
}
export async function doVideoExistsParam(req, res, next) {
@ -83,16 +90,19 @@ export async function doVideoExistsParam(req, res, next) {
const videoId = req.params.id;
const client = await getClient();
const query = `SELECT * FROM videos WHERE id = ${videoId}`;
const result = await client.query(query);
const video = result.rows[0];
if (!video) {
logger.write("failed because video not found", 404);
res.status(404).json({error: "Not Found"});
return
try {
const query = `SELECT * FROM videos WHERE id = $1`;
const result = await client.query(query, [videoId]);
const video = result.rows[0];
if (!video) {
logger.write("failed because video not found", 404);
res.status(404).json({error: "Not Found"});
return
}
next()
} finally {
client.release();
}
next()
}
export async function doAuthorizedUserExists(req, res, next) {
@ -112,16 +122,19 @@ export async function doAuthorizedUserExists(req, res, next) {
if (authorizedUsers && Array.isArray(authorizedUsers) && authorizedUsers.length > 0) {
const client = await getClient();
for (const userId of authorizedUsers) {
const query = `SELECT id FROM users WHERE id = $1`;
const result = await client.query(query, [userId]);
const foundUser = result.rows[0];
if (!foundUser) {
logger.write("failed because authorized user not found", 404);
res.status(404).json({error: "Not Found"});
return
try {
for (const userId of authorizedUsers) {
const query = `SELECT id FROM users WHERE id = $1`;
const result = await client.query(query, [userId]);
const foundUser = result.rows[0];
if (!foundUser) {
logger.write("failed because authorized user not found", 404);
res.status(404).json({error: "Not Found"});
return
}
}
} finally {
client.release();
}
}
next()
@ -132,34 +145,37 @@ export async function hasAccess(req, res, next) {
const videoId = req.params.id;
const client = await getClient();
const videoQuery = "SELECT visibility FROM videos WHERE id = $1";
const videoResult = await client.query(videoQuery, [videoId]);
const video = videoResult.rows[0];
try {
const videoQuery = "SELECT visibility FROM videos WHERE id = $1";
const videoResult = await client.query(videoQuery, [videoId]);
const video = videoResult.rows[0];
console.log(video);
console.log(video);
if (video.visibility === 'private') {
const token = req.headers.authorization?.split(" ")[1];
if (video.visibility === 'private') {
const token = req.headers.authorization?.split(" ")[1];
if (!req.headers.authorization || !token) {
logger.write("failed because no token provided", 401);
res.status(401).json({error: "Unauthorized"});
return;
}
if (!req.headers.authorization || !token) {
logger.write("failed because no token provided", 401);
res.status(401).json({error: "Unauthorized"});
return;
}
const claims = jwt.decode(token);
const userId = claims.id;
const query = `SELECT * FROM video_authorized_users WHERE video_id = $1 AND user_id = $2`;
const result = await client.query(query, [videoId, userId]);
const isAuthorized = result.rows.length > 0;
const claims = jwt.decode(token);
const userId = claims.id;
const query = `SELECT * FROM video_authorized_users WHERE video_id = $1 AND user_id = $2`;
const result = await client.query(query, [videoId, userId]);
const isAuthorized = result.rows.length > 0;
if (!isAuthorized) {
logger.write("failed because user is not authorized", 403);
res.status(403).json({error: "Not authorized"});
return;
if (!isAuthorized) {
logger.write("failed because user is not authorized", 403);
res.status(403).json({error: "Not authorized"});
return;
}
}
}
next();
next();
} finally {
client.release();
}
}

10
backend/app/routes/user.route.js
View File

@ -9,7 +9,9 @@ import {
getChannel, getHistory,
isSubscribed,
verifyEmail,
searchByUsername
searchByUsername,
getAllSubscriptions,
getAllSubscriptionVideos
} from "../controllers/user.controller.js";
import {
UserRegister,
@ -63,4 +65,10 @@ router.get("/:id/channel/subscribed", [addLogger, isTokenValid, User.id, Channel
// VERIFY EMAIL
router.post("/verify-email", [addLogger, validator], verifyEmail);
// GET ALL SUBSCRIPTIONS
router.get("/:id/subscriptions", [addLogger, isTokenValid, User.id, validator, doUserExists], getAllSubscriptions);
// GET ALL SUBSCRIPTIONS VIDEOS
router.get("/:id/subscriptions/videos", [addLogger, isTokenValid, User.id, validator, doUserExists], getAllSubscriptionVideos);
export default router;

35
backend/app/utils/database.js
View File

@ -1,18 +1,31 @@
import pg from "pg";
// Create a connection pool instead of individual connections
const pool = new pg.Pool({
user: process.env.POSTGRES_USER,
password: process.env.POSTGRES_PASSWORD,
host: process.env.POSTGRES_HOST,
database: process.env.POSTGRES_DB,
port: 5432,
max: 30, // Increased maximum number of connections in the pool
idleTimeoutMillis: 30000, // Close idle connections after 30 seconds
connectionTimeoutMillis: 10000, // Increased timeout to 10 seconds
acquireTimeoutMillis: 10000, // Wait up to 10 seconds for a connection
});
export async function getClient() {
const client = new pg.Client({
user: process.env.POSTGRES_USER,
password: process.env.POSTGRES_PASSWORD,
host: process.env.POSTGRES_HOST,
database: process.env.POSTGRES_DB,
port: 5432
})
await client.connect();
return client;
// Use pool.connect() instead of creating new clients
return await pool.connect();
}
// Graceful shutdown
process.on('SIGINT', () => {
pool.end(() => {
console.log('Pool has ended');
process.exit(0);
});
});
export async function initDb() {
const client = await getClient();
@ -143,7 +156,7 @@ export async function initDb() {
} catch (e) {
console.error("Error initializing database:", e);
} finally {
client.end();
client.release();
}
}

1335
backend/logs/access.log
View File

File diff suppressed because it is too large

21
backend/tools.js
View File

@ -17,14 +17,13 @@ async function flushDatabase() {
port: 5432
});
await client.connect();
await client.query('TRUNCATE TABLE users CASCADE', (err, res) => {
if (err) {
console.error('Error flushing database:', err);
} else {
console.log('Database flushed successfully.');
}
});}
try {
await client.connect();
await client.query('TRUNCATE TABLE users CASCADE');
console.log('Database flushed successfully.');
} catch (err) {
console.error('Error flushing database:', err);
} finally {
await client.end();
}
}

2
frontend/src/components/Navbar.jsx
View File

@ -52,7 +52,7 @@ export default function Navbar({ isSearchPage = false, alerts = [], onCloseAlert
<li><a href="/">Accueil</a></li>
{isAuthenticated ? (
<>
<li><a href="/">Abonnements</a></li>
<li><a href="/subscriptions">Abonnements</a></li>
<li>
<a href="/profile" className="flex items-center space-x-4">
<span className="text-2xl">{user?.username}</span>

2
frontend/src/modals/VerificationModal.jsx
View File

@ -4,7 +4,7 @@ export default function VerificationModal({title, onConfirm, onCancel, isOpen})
if (!isOpen) return null;
return (
<div className="fixed inset-0 flex items-center justify-center px-5 lg:px-0">
<div className="fixed z-40 inset-0 flex items-center justify-center px-5 lg:px-0">
<div className="glassmorphism w-full lg:w-auto p-6">
<h2 className="text-lg text-white font-semibold mb-4">{title}</h2>
<div className="flex justify-start lg:justify-end">

215
frontend/src/pages/Account.jsx
View File

@ -5,7 +5,8 @@ import VideoCard from "../components/VideoCard.jsx";
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";
import { getChannel, getUserHistory, getPlaylists, updateUser, deleteUser } from "../services/user.service.js";
import VerificationModal from "../modals/VerificationModal.jsx";
export default function Account() {
@ -24,6 +25,7 @@ export default function Account() {
const [isModalOpen, setIsModalOpen] = useState(false);
const [isCreatePlaylistModalOpen, setIsCreatePlaylistModalOpen] = useState(false);
const [alerts, setAlerts] = useState([]);
const [isVerificationModalOpen, setIsVerificationModalOpen] = useState(false);
const navigation = useNavigate();
@ -90,6 +92,11 @@ export default function Account() {
setIsCreatePlaylistModalOpen(false);
fetchUserPlaylists();
}
const onDeleteAccount = async () => {
await deleteUser(user.id, token, addAlert);
localStorage.removeItem("user");
navigation("/login");
}
return (
<div className="min-w-screen min-h-screen bg-linear-to-br from-left-gradient to-right-gradient">
@ -99,110 +106,120 @@ export default function Account() {
{/* Left side */}
{/* Profile / Edit profile */}
<form className="glassmorphism lg:w-1/3 p-10">
<div className="relative w-1/3 aspect-square overflow-hidden mb-3 mx-auto" onMouseEnter={() => setIsPictureEditActive(true)} onMouseLeave={() => setIsPictureEditActive(false)} >
<label htmlFor="image">
<img
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"} `} >
<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} />
</div>
<label htmlFor="name" className="text-xl lg:text-2xl text-white mb-1 block font-montserrat">
Nom d'utilisateur
</label>
<input
type="text"
id="name"
value={username}
className={(editMode ? editModeClasses : nonEditModeClasses)}
onChange={(e) => setUsername(e.target.value)}
placeholder="Nom d'utilisateur"
disabled={!editMode}
/>
<label htmlFor="email" className="text-xl lg:text-2xl text-white mb-1 mt-4 block font-montserrat">
Adresse e-mail
</label>
<input
type="email"
id="email"
value={email}
className={(editMode ? editModeClasses : nonEditModeClasses)}
onChange={(e) => setEmail(e.target.value)}
placeholder="Adresse mail"
disabled={!editMode}
/>
{editMode && (
<>
<label htmlFor="password" className="text-xl lg:text-2xl text-white mb-1 mt-4 block font-montserrat">
Mot de passe
</label>
<input
type="password"
id="password"
value={password}
className={(editMode ? editModeClasses : nonEditModeClasses)}
onChange={(e) => setPassword(e.target.value)}
placeholder="**************"
disabled={!editMode}
/>
<label htmlFor="confirm-password" className="text-xl lg:text-2xl text-white mb-1 mt-4 block font-montserrat">
Confirmer le mot de passe
<div className=" lg:w-1/3 ">
<form className="glassmorphism p-10">
<div className="relative w-1/3 aspect-square overflow-hidden mb-3 mx-auto" onMouseEnter={() => setIsPictureEditActive(true)} onMouseLeave={() => setIsPictureEditActive(false)} >
<label htmlFor="image">
<img
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"} `} >
<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="password"
id="confirm-password"
value={confirmPassword}
className={(editMode ? editModeClasses : nonEditModeClasses)}
onChange={(e) => setConfirmPassword(e.target.value)}
placeholder=""
disabled={!editMode}
/>
</>
)
}
<div className="flex justify-center mt-5">
{
editMode ? (
<div>
<button
type="button"
className="bg-primary p-3 rounded-sm text-white font-montserrat text-lg text-2xl font-black cursor-pointer"
onClick={handleUpdateUser}
>
Enregistrer
</button>
<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-xl lg:text-2xl text-white mb-1 block font-montserrat">
Nom d'utilisateur
</label>
<input
type="text"
id="name"
value={username}
className={(editMode ? editModeClasses : nonEditModeClasses)}
onChange={(e) => setUsername(e.target.value)}
placeholder="Nom d'utilisateur"
disabled={!editMode}
/>
<label htmlFor="email" className="text-xl lg:text-2xl text-white mb-1 mt-4 block font-montserrat">
Adresse e-mail
</label>
<input
type="email"
id="email"
value={email}
className={(editMode ? editModeClasses : nonEditModeClasses)}
onChange={(e) => setEmail(e.target.value)}
placeholder="Adresse mail"
disabled={!editMode}
/>
{editMode && (
<>
<label htmlFor="password" className="text-xl lg:text-2xl text-white mb-1 mt-4 block font-montserrat">
Mot de passe
</label>
<input
type="password"
id="password"
value={password}
className={(editMode ? editModeClasses : nonEditModeClasses)}
onChange={(e) => setPassword(e.target.value)}
placeholder="**************"
disabled={!editMode}
/>
<label htmlFor="confirm-password" className="text-xl lg:text-2xl text-white mb-1 mt-4 block font-montserrat">
Confirmer le mot de passe
</label>
<input
type="password"
id="confirm-password"
value={confirmPassword}
className={(editMode ? editModeClasses : nonEditModeClasses)}
onChange={(e) => setConfirmPassword(e.target.value)}
placeholder=""
disabled={!editMode}
/>
</>
)
}
<div className="flex justify-center mt-5">
{
editMode ? (
<div>
<button
type="button"
className="bg-primary p-3 rounded-sm text-white font-montserrat text-lg text-2xl font-black cursor-pointer"
onClick={handleUpdateUser}
>
Enregistrer
</button>
<button
type="button"
className="bg-red-500 p-3 rounded-sm text-white font-montserrat text-lg lg:text-2xl font-bold cursor-pointer ml-3"
onClick={() => setEditMode(!editMode)}
>
Annuler
</button>
</div>
) : (
<button
type="button"
className="bg-red-500 p-3 rounded-sm text-white font-montserrat text-lg lg:text-2xl font-bold cursor-pointer ml-3"
className="bg-primary p-3 rounded-sm text-white font-montserrat text-lg lg:text-2xl font-bold cursor-pointer"
onClick={() => setEditMode(!editMode)}
>
Annuler
Modifier le profil
</button>
</div>
) : (
<button
type="button"
className="bg-primary p-3 rounded-sm text-white font-montserrat text-lg lg:text-2xl font-bold cursor-pointer"
onClick={() => setEditMode(!editMode)}
>
Modifier le profil
</button>
)
}
</div>
</form>
)
}
</div>
</form>
<button
className="bg-red-500 p-3 rounded-sm text-white font-montserrat text-lg lg:text-2xl font-bold cursor-pointer mt-4 w-full"
onClick={() => setIsVerificationModalOpen(true)}
>
Supprimer le compte
</button>
<VerificationModal
title="Confirmer la suppression du compte"
isOpen={isVerificationModalOpen}
onCancel={() => setIsVerificationModalOpen(false)}
onConfirm={() => onDeleteAccount()}
/>
</div>
{ /* Right side */}

126
frontend/src/pages/ManageChannel.jsx
View File

@ -3,7 +3,8 @@ import {useEffect, useState} from "react";
import {useNavigate, useParams} from "react-router-dom";
import {useAuth} from "../contexts/AuthContext.jsx";
import VideoStatListElement from "../components/VideoStatListElement.jsx";
import {fetchChannelDetails, fetchChannelStats, updateChannel} from "../services/channel.service.js";
import {fetchChannelDetails, fetchChannelStats, updateChannel, deleteChannel} from "../services/channel.service.js";
import VerificationModal from "../modals/VerificationModal.jsx";
export default function ManageChannel() {
@ -18,6 +19,7 @@ export default function ManageChannel() {
const [description, setDescription] = useState(null);
const [editMode, setEditMode] = useState(false);
const [alerts, setAlerts] = useState([]);
const [isVerificationModalOpen, setIsVerificationModalOpen] = useState(false);
const token = localStorage.getItem("token");
const nonEditModeClasses = "text-2xl font-bold text-white p-2 focus:text-white focus:outline-none w-full font-montserrat resizable-none text-center";
@ -64,6 +66,11 @@ export default function ManageChannel() {
setAlerts([...alerts, newAlert]);
};
const onDeleteChannel = async () => {
await deleteChannel(id, token, addAlert);
navigate("/profile");
}
return (
<div className="min-w-screen min-h-screen bg-linear-to-br from-left-gradient to-right-gradient">
<Navbar isSearchPage={false} alerts={alerts} onCloseAlert={onCloseAlert} />
@ -71,64 +78,75 @@ export default function ManageChannel() {
<main className="pt-[48px] lg:pt-[118px] px-5 lg:px-36 lg:flex pb-10">
{/* LEFT SIDE */}
<form className="glassmorphism lg:w-1/3 py-10 px-4 h-max">
<img src={user.picture} className="w-1/3 aspect-square object-cover rounded-full mx-auto" alt=""/>
<label htmlFor="name" className={`text-2xl text-white mb-1 block font-montserrat ${editMode ? "block" : "hidden"} `}>
Nom de chaine
</label>
<input
type="text"
id="name"
value={channelName || channelName === "" ? channelName : channel ? channel.name : "Chargement"}
className={(editMode ? editModeClasses : nonEditModeClasses)}
onChange={(e) => setChannelName(e.target.value)}
placeholder="Nom d'utilisateur"
disabled={!editMode}
/>
<label htmlFor="name" className={`text-2xl text-white mb-1 block font-montserrat`}>
Description
</label>
<textarea
name="description"
id=""
className={(editMode ? editModeClassesTextArea : nonEditModeClassesTextArea)}
value={description || description === "" ? description : channel ? channel.description : "Chargement"}
onChange={(e) => setDescription(e.target.value)}
placeholder="Description de votre chaine"
disabled={!editMode}
></textarea>
{
editMode ? (
<div className="mt-4">
<button
type="button"
className="bg-primary p-3 rounded-sm text-white font-montserrat text-2xl font-black cursor-pointer"
onClick={handleUpdateChannel}
>
Enregistrer
</button>
<div className="lg:w-1/3">
<form className="glassmorphism py-10 px-4 h-max">
<img src={user.picture} className="w-1/3 aspect-square object-cover rounded-full mx-auto" alt=""/>
<label htmlFor="name" className={`text-2xl text-white mb-1 block font-montserrat ${editMode ? "block" : "hidden"} `}>
Nom de chaine
</label>
<input
type="text"
id="name"
value={channelName || channelName === "" ? channelName : channel ? channel.name : "Chargement"}
className={(editMode ? editModeClasses : nonEditModeClasses)}
onChange={(e) => setChannelName(e.target.value)}
placeholder="Nom d'utilisateur"
disabled={!editMode}
/>
<label htmlFor="name" className={`text-2xl text-white mb-1 block font-montserrat`}>
Description
</label>
<textarea
name="description"
id=""
className={(editMode ? editModeClassesTextArea : nonEditModeClassesTextArea)}
value={description || description === "" ? description : channel ? channel.description : "Chargement"}
onChange={(e) => setDescription(e.target.value)}
placeholder="Description de votre chaine"
disabled={!editMode}
></textarea>
{
editMode ? (
<div className="mt-4">
<button
type="button"
className="bg-primary p-3 rounded-sm text-white font-montserrat text-2xl font-black cursor-pointer"
onClick={handleUpdateChannel}
>
Enregistrer
</button>
<button
type="button"
className="bg-red-500 p-3 rounded-sm text-white font-montserrat text-2xl font-black cursor-pointer ml-3"
onClick={() => setEditMode(!editMode)}
>
Annuler
</button>
</div>
) : (
<button
type="button"
className="bg-red-500 p-3 rounded-sm text-white font-montserrat text-2xl font-black cursor-pointer ml-3"
className="bg-primary p-3 rounded-sm text-white font-montserrat text-2xl font-black cursor-pointer mt-4"
onClick={() => setEditMode(!editMode)}
>
Annuler
Modifier
</button>
</div>
) : (
<button
type="button"
className="bg-primary p-3 rounded-sm text-white font-montserrat text-2xl font-black cursor-pointer mt-4"
onClick={() => setEditMode(!editMode)}
>
Modifier
</button>
)
}
</form>
)
}
</form>
<button
className="bg-red-500 p-3 rounded-sm text-white font-montserrat text-2xl font-black cursor-pointer mt-4 w-full"
onClick={() => setIsVerificationModalOpen(true)}
>
Supprimer la chaîne
</button>
<VerificationModal
title="Êtes-vous sûr de vouloir supprimer cette chaîne ?"
isOpen={isVerificationModalOpen}
onCancel={() => setIsVerificationModalOpen(false)}
onConfirm={onDeleteChannel}
/>
</div>
{/* RIGHT SIDE */}
<div className="lg:w-2/3 lg:pl-10 mt-4 lg:mt-0" >

23
frontend/src/pages/ManageVideo.jsx
View File

@ -6,8 +6,10 @@ import LinearGraph from "../components/LinearGraph.jsx";
import Comment from "../components/Comment.jsx";
import Tag from "../components/Tag.jsx";
import UserCard from "../components/UserCard.jsx";
import {getVideoById, getLikesPerDay, updateVideo, updateVideoFile, uploadThumbnail, uploadTags, updateAuthorizedUsers} from "../services/video.service.js";
import {getVideoById, getLikesPerDay, updateVideo, updateVideoFile, uploadThumbnail, uploadTags, updateAuthorizedUsers, deleteVideo} from "../services/video.service.js";
import {searchByUsername} from "../services/user.service.js";
import VerificationModal from "../modals/VerificationModal.jsx";
import {useNavigate} from "react-router-dom";
export default function ManageVideo() {
@ -15,6 +17,7 @@ export default function ManageVideo() {
const { user } = useAuth();
const token = localStorage.getItem("token");
const {id} = useParams();
const navigate = useNavigate();
const [video, setVideo] = useState(null);
const [likesPerDay, setLikesPerDay] = useState([]);
@ -28,6 +31,7 @@ export default function ManageVideo() {
const [alerts, setAlerts] = useState([]);
const [searchUser, setSearchUser] = useState("");
const [searchResults, setSearchResults] = useState([]);
const [isVerificationModalOpen, setIsVerificationModalOpen] = useState(false);
const nonEditModeClasses = "text-md font-normal text-white p-2 focus:text-white focus:outline-none w-full font-montserrat resizable-none";
const editModeClasses = nonEditModeClasses + " glassmorphism";
@ -198,6 +202,11 @@ export default function ManageVideo() {
addAlert('success', "Utilisateur supprimé avec succès.");
}
const onDeleteVideo = async () => {
await deleteVideo(id, video.channel, token, addAlert);
navigate("/manage-channel/" + video.channel);
}
return (
<div className="min-w-screen min-h-screen bg-linear-to-br from-left-gradient to-right-gradient">
@ -385,6 +394,18 @@ export default function ManageVideo() {
)
}
<button
className="bg-red-600 p-3 rounded-sm text-white font-montserrat text-2xl font-black cursor-pointer mt-4 w-full"
onClick={() => setIsVerificationModalOpen(true)}
>
Supprimer la vidéo
</button>
<VerificationModal
title="Êtes-vous sûr de vouloir supprimer cette vidéo ?"
isOpen={isVerificationModalOpen}
onCancel={() => setIsVerificationModalOpen(false)}
onConfirm={onDeleteVideo}
/>
</div>

95
frontend/src/pages/Subscription.jsx
View File

@ -0,0 +1,95 @@
import React from "react";
import Navbar from "../components/Navbar";
import { useEffect, useState } from "react";
import { getAllUserSubscriptions, getAllUserSubscriptionVideos } from "../services/user.service.js";
import { useAuth } from "../contexts/AuthContext.jsx";
import VideoCard from "../components/VideoCard.jsx";
import { useNavigate } from "react-router-dom";
export default function Subscription() {
const navigate = useNavigate();
const [alerts, setAlerts] = useState([]);
const [subscriptions, setSubscriptions] = React.useState([]);
const [videos, setVideos] = useState([]);
const {user, isAuth} = useAuth();
useEffect(() => {
fetchSubscriptions();
fetchSubscriptionVideos();
}, []);
const fetchSubscriptions = async () => {
const token = localStorage.getItem('token');
if (!token) {
addAlert('error', "User not authenticated");
return;
}
const data = await getAllUserSubscriptions(user.id, token, addAlert);
if (data) {
setSubscriptions(data);
}
};
const fetchSubscriptionVideos = async () => {
const token = localStorage.getItem('token');
if (!token) {
addAlert('error', "User not authenticated");
return;
}
const data = await getAllUserSubscriptionVideos(user.id, token, addAlert);
if (data) {
setVideos(data);
}
};
const addAlert = (type, message) => {
const newAlert = { type, message, id: Date.now() }; // Add unique ID
setAlerts([...alerts, newAlert]);
};
const onCloseAlert = (alertToRemove) => {
setAlerts(alerts.filter(alert => alert !== alertToRemove));
};
return (
<div className="min-w-screen min-h-screen bg-linear-to-br from-left-gradient to-right-gradient">
<Navbar isSearchPage={false} alerts={alerts} onCloseAlert={onCloseAlert} />
<main className="px-5 lg:px-36 w-full pt-[48px] lg:pt-[118px] lg:flex gap-8">
{/* LEFT SIDE (subscription list) */}
<div className="w-full lg:w-1/4 border-b border-gray-200 lg:border-b-0 mb-8 lg:mb-0 pb-2 lg:pb-0">
<h2 className="text-2xl text-white font-montserrat font-semibold mb-4">Mes Abonnements</h2>
<ul className="space-y-2">
{subscriptions.map(subscription => (
<li
key={subscription.id}
className="p-2 flex items-center lg:border-r lg:border-gray-200 glassmorphism w-max lg:w-auto"
onClick={() => navigate(`/channel/${subscription.channel_id}`)}
>
<img
src={subscription.picture}
alt={subscription.channel_name}
className="w-14 aspect-square rounded-full inline-block mr-2 align-middle"
/>
<p className="text-white text-lg font-montserrat font-medium" >{subscription.channel_name}</p>
</li>
))}
</ul>
</div>
{/* RIGHT SIDE (videos from subscriptions) */}
<div className="flex-1 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
{videos.map(video => (
<VideoCard key={video.id} video={video} />
))}
</div>
</main>
</div>
);
}

9
frontend/src/routes/routes.jsx
View File

@ -11,6 +11,7 @@ import Search from "../pages/Search.jsx";
import Channel from "../pages/Channel.jsx";
import Playlist from "../pages/Playlist.jsx";
import LoginSuccess from '../pages/LoginSuccess.jsx'
import Subscriptions from '../pages/Subscription.jsx'
const routes = [
{ path: "/", element: <Home/> },
@ -95,6 +96,14 @@ const routes = [
element: (
<LoginSuccess/>
)
},
{
path: "/subscriptions",
element: (
<ProtectedRoute requireAuth={true}>
<Subscriptions/>
</ProtectedRoute>
)
}
]

24
frontend/src/services/channel.service.js
View File

@ -98,3 +98,27 @@ export async function createChannel(body, token, addAlert) {
const data = await request.json();
return data;
}
export async function deleteChannel(channelId, token, addAlert) {
try {
const response = await fetch(`/api/channels/${channelId}`, {
method: "DELETE",
headers: {
"Authorization": `Bearer ${token}`
}
});
if (response.ok) {
addAlert('success', 'Chaîne supprimée avec succès');
return true;
} else {
const errorData = await response.json();
addAlert('error', errorData.message || 'Erreur lors de la suppression de la chaîne');
return false;
}
} catch (error) {
console.error("Error deleting channel:", error);
addAlert('error', 'Erreur lors de la suppression de la chaîne');
return false;
}
}

65
frontend/src/services/user.service.js
View File

@ -150,3 +150,68 @@ export async function searchByUsername(username, token, addAlert) {
addAlert('error', error.message || "Erreur lors de la recherche de l'utilisateur.");
}
}
export async function deleteUser(userId, token, addAlert) {
try {
const response = await fetch(`/api/users/${userId}`, {
method: "DELETE",
headers: {
"Authorization": `Bearer ${token}`,
}
});
if (!response.ok) {
throw new Error("Failed to delete user");
}
const data = await response.json();
return data;
} catch (error) {
console.error("Error deleting user:", error);
addAlert('error', "Erreur lors de la suppression de l'utilisateur.");
}
}
export async function getAllUserSubscriptions(userId, token ,addAlert) {
if (!userId || !token) {
console.warn("User ID or token missing, skipping subscriptions fetch");
return;
}
try {
const response = await fetch(`/api/users/${userId}/subscriptions`, {
method: "GET",
headers: {
"Authorization": `Bearer ${token}`,
}
});
if (!response.ok) {
throw new Error("Failed to fetch user subscriptions");
}
const data = await response.json();
return data;
} catch (error) {
console.error("Error fetching user subscriptions:", error);
addAlert('error', "Erreur lors de la récupération des abonnements de l'utilisateur.");
}
}
export async function getAllUserSubscriptionVideos(userId, token ,addAlert) {
if (!userId || !token) {
console.warn("User ID or token missing, skipping subscription videos fetch");
return;
}
try {
const response = await fetch(`/api/users/${userId}/subscriptions/videos`, {
method: "GET",
headers: {
"Authorization": `Bearer ${token}`,
}
});
if (!response.ok) {
throw new Error("Failed to fetch user subscription videos");
}
const data = await response.json();
return data;
} catch (error) {
console.error("Error fetching user subscription videos:", error);
addAlert('error', "Erreur lors de la récupération des vidéos des abonnements de l'utilisateur.");
}
}

23
frontend/src/services/video.service.js
View File

@ -241,3 +241,26 @@ export async function updateAuthorizedUsers(id, body, token, addAlert) {
addAlert('error', 'Erreur lors de la mise à jour des utilisateurs autorisés');
}
}
export async function deleteVideo(id, channel, token, addAlert) {
try {
const request = await fetch(`/api/videos/${id}`, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`
},
body: JSON.stringify({ channel })
});
if (!request.ok) {
const errorData = await request.json();
console.error("Backend validation errors:", errorData);
addAlert('error', 'Erreur lors de la suppression de la vidéo');
return;
}
return request;
} catch (error) {
console.error("Error deleting video:", error);
addAlert('error', 'Erreur lors de la suppression de la vidéo');
}
}
Write Preview
Loading…
Cancel
Save