@@ -28,5 +60,4 @@ export default function Navbar(isSearchPage) {
)
-
}
\ No newline at end of file
diff --git a/frontend/src/components/ProtectedRoute.jsx b/frontend/src/components/ProtectedRoute.jsx
new file mode 100644
index 0000000..379bcd2
--- /dev/null
+++ b/frontend/src/components/ProtectedRoute.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Navigate } from 'react-router-dom';
+import { useAuth } from '../contexts/AuthContext';
+
+const ProtectedRoute = ({ children, requireAuth = true }) => {
+ const { isAuthenticated, loading } = useAuth();
+
+ if (loading) {
+ return (
+
+ );
+ }
+
+ if (requireAuth && !isAuthenticated) {
+ return
;
+ }
+
+ return children;
+};
+
+export default ProtectedRoute;
diff --git a/frontend/src/components/Recommendations.jsx b/frontend/src/components/Recommendations.jsx
index 22157d1..108ce3f 100644
--- a/frontend/src/components/Recommendations.jsx
+++ b/frontend/src/components/Recommendations.jsx
@@ -1,6 +1,6 @@
-export default function Recommendations() {
+export default function Recommendations({videos}) {
return (
diff --git a/frontend/src/contexts/AuthContext.jsx b/frontend/src/contexts/AuthContext.jsx
new file mode 100644
index 0000000..087df4d
--- /dev/null
+++ b/frontend/src/contexts/AuthContext.jsx
@@ -0,0 +1,112 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+
+const AuthContext = createContext();
+
+export const useAuth = () => {
+ const context = useContext(AuthContext);
+ if (!context) {
+ throw new Error('useAuth must be used within an AuthProvider');
+ }
+ return context;
+};
+
+export const AuthProvider = ({ children }) => {
+ const [user, setUser] = useState(null);
+ const [loading, setLoading] = useState(true);
+
+ // Check if user is logged in on app start
+ useEffect(() => {
+ const token = localStorage.getItem('token');
+ const userData = localStorage.getItem('user');
+
+ if (token && userData) {
+ setUser(JSON.parse(userData));
+ }
+ setLoading(false);
+ }, []);
+
+ const login = async (username, password) => {
+ try {
+ const response = await fetch('/api/users/login', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({ username, password }),
+ });
+
+ const data = await response.json();
+
+ if (!response.ok) {
+ throw new Error(data.message || 'Erreur de connexion');
+ }
+
+ // Store token and user data
+ localStorage.setItem('token', data.token);
+ localStorage.setItem('user', JSON.stringify(data.user));
+ setUser(data.user);
+
+ return data;
+ } catch (error) {
+ throw error;
+ }
+ };
+
+ const register = async (email, username, password, profileImage) => {
+ try {
+ const formData = new FormData();
+ formData.append('email', email);
+ formData.append('username', username);
+ formData.append('password', password);
+
+ if (profileImage) {
+ formData.append('profile', profileImage);
+ }
+
+ const response = await fetch('/api/users/', {
+ method: 'POST',
+ body: formData,
+ });
+
+ const data = await response.json();
+
+ if (!response.ok) {
+ throw new Error(data.message || 'Erreur lors de la création du compte');
+ }
+
+ // After successful registration, log the user in
+ await login(username, password);
+
+ return data;
+ } catch (error) {
+ throw error;
+ }
+ };
+
+ const logout = () => {
+ localStorage.removeItem('token');
+ localStorage.removeItem('user');
+ setUser(null);
+ };
+
+ const getAuthHeaders = () => {
+ const token = localStorage.getItem('token');
+ return token ? { Authorization: `Bearer ${token}` } : {};
+ };
+
+ const value = {
+ user,
+ login,
+ register,
+ logout,
+ getAuthHeaders,
+ isAuthenticated: !!user,
+ loading
+ };
+
+ return (
+
+ {children}
+
+ );
+};
diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx
index f96fcaf..c8afa3c 100644
--- a/frontend/src/pages/Home.jsx
+++ b/frontend/src/pages/Home.jsx
@@ -1,29 +1,31 @@
import Navbar from '../components/Navbar.jsx';
import HeroImage from '../assets/img/hero.png';
import Recommendations from "../components/Recommendations.jsx";
-import {useState} from "react";
+import {useState, useEffect} from "react";
+import { useAuth } from '../contexts/AuthContext';
export default function Home() {
-
+ const { isAuthenticated, user } = useAuth();
const [recommendations, setRecommendations] = useState([]);
const [loading, setLoading] = useState(true);
const [topCreators, setTopCreators] = useState([]);
const [trendingVideos, setTrendingVideos] = useState([]);
- // Fetch recommendations, top creators, and trending videos
- const fetchData = async () => {
- try {
- const response = await fetch('/api/home');
- const data = await response.json();
- setRecommendations(data.recommendations);
- setTopCreators(data.topCreators);
- setTrendingVideos(data.trendingVideos);
- } catch (error) {
- console.error('Error fetching data:', error);
- } finally {
- setLoading(false);
- }
- };
+ useEffect(() => {
+ // Fetch recommendations, top creators, and trending videos
+ const fetchData = async () => {
+ try {
+ const response = await fetch('/api/recommendations');
+ const data = await response.json();
+ setRecommendations(data.recommendations);
+ } catch (error) {
+ console.error('Error fetching data:', error);
+ } finally {
+ setLoading(false);
+ }
+ };
+ fetchData();
+ }, []);
return (
@@ -32,25 +34,33 @@ export default function Home() {
-
Regarder des vidéos comme jamais auparavant
-
-
+ {isAuthenticated ? (
+
+ Bienvenue {user?.username} !
+
+ ) : (
+ <>
+
+ Regarder des vidéos comme jamais auparavant
+
+
+
+ )}
- )
-
+ );
}
\ No newline at end of file
diff --git a/frontend/src/pages/Login.jsx b/frontend/src/pages/Login.jsx
new file mode 100644
index 0000000..d111c7d
--- /dev/null
+++ b/frontend/src/pages/Login.jsx
@@ -0,0 +1,107 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../contexts/AuthContext';
+import Navbar from '../components/Navbar';
+
+export default function Login() {
+ const [formData, setFormData] = useState({
+ username: '',
+ password: ''
+ });
+ const [error, setError] = useState('');
+ const [loading, setLoading] = useState(false);
+
+ const navigate = useNavigate();
+ const { login } = useAuth();
+
+ const handleChange = (e) => {
+ setFormData({
+ ...formData,
+ [e.target.name]: e.target.value
+ });
+ };
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ setError('');
+ setLoading(true);
+
+ try {
+ await login(formData.username, formData.password);
+ navigate('/');
+ } catch (err) {
+ setError(err.message || 'Erreur de connexion');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ return (
+
+
+
+
+
+
Connexion
+
+ {error && (
+
+ {error}
+
+ )}
+
+
+
+
+
+
+
+ );
+}
diff --git a/frontend/src/pages/Register.jsx b/frontend/src/pages/Register.jsx
new file mode 100644
index 0000000..bf74d9e
--- /dev/null
+++ b/frontend/src/pages/Register.jsx
@@ -0,0 +1,195 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../contexts/AuthContext';
+import Navbar from '../components/Navbar';
+
+export default function Register() {
+ const [formData, setFormData] = useState({
+ email: '',
+ username: '',
+ password: '',
+ confirmPassword: '',
+ profile: null
+ });
+ const [error, setError] = useState('');
+ const [loading, setLoading] = useState(false);
+ const [previewImage, setPreviewImage] = useState(null);
+
+ const navigate = useNavigate();
+ const { register } = useAuth();
+
+ const handleChange = (e) => {
+ if (e.target.name === 'profile') {
+ const file = e.target.files[0];
+ setFormData({
+ ...formData,
+ profile: file
+ });
+
+ // Create preview
+ if (file) {
+ const reader = new FileReader();
+ reader.onload = (e) => setPreviewImage(e.target.result);
+ reader.readAsDataURL(file);
+ } else {
+ setPreviewImage(null);
+ }
+ } else {
+ setFormData({
+ ...formData,
+ [e.target.name]: e.target.value
+ });
+ }
+ };
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ setError('');
+
+ // Validation
+ if (formData.password !== formData.confirmPassword) {
+ setError('Les mots de passe ne correspondent pas');
+ return;
+ }
+
+ if (formData.password.length < 6) {
+ setError('Le mot de passe doit contenir au moins 6 caractères');
+ return;
+ }
+
+ setLoading(true);
+
+ try {
+ await register(formData.email, formData.username, formData.password, formData.profile);
+ navigate('/');
+ } catch (err) {
+ setError(err.message || 'Erreur lors de la création du compte');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ return (
+
+
+
+
+
+
Créer un compte
+
+ {error && (
+
+ {error}
+
+ )}
+
+
+
+
+
+
+
+ );
+}
diff --git a/frontend/src/routes/routes.jsx b/frontend/src/routes/routes.jsx
index 43fc69b..3d75fc9 100644
--- a/frontend/src/routes/routes.jsx
+++ b/frontend/src/routes/routes.jsx
@@ -1,7 +1,26 @@
import Home from '../pages/Home.jsx'
+import Login from '../pages/Login.jsx'
+import Register from '../pages/Register.jsx'
+import ProtectedRoute from '../components/ProtectedRoute.jsx'
const routes = [
{ path: "/", element:
},
+ {
+ path: "/login",
+ element: (
+
+
+
+ )
+ },
+ {
+ path: "/register",
+ element: (
+
+
+
+ )
+ },
]
export default routes;
\ No newline at end of file
diff --git a/nginx/default.conf b/nginx/default.conf
index a3d207b..9a7f5ef 100644
--- a/nginx/default.conf
+++ b/nginx/default.conf
@@ -4,4 +4,26 @@ server {
root /usr/share/nginx/html;
index index.html index.htm;
+
+ # API routes - proxy to backend (MUST come before static file rules)
+ location /api/ {
+ proxy_pass http://127.0.0.1:8000;
+ proxy_set_header Host $host;
+ proxy_set_header X-Real-IP $remote_addr;
+ proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+ proxy_set_header X-Forwarded-Proto $scheme;
+ proxy_buffering off;
+ }
+
+ # Static assets caching (only for frontend assets, not API)
+ location ~* ^/(?!api/).*\.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
+ expires 1y;
+ add_header Cache-Control "public, immutable";
+ try_files $uri =404;
+ }
+
+ # Handle React Router - all other routes should serve index.html
+ location / {
+ try_files $uri $uri/ /index.html;
+ }
}
\ No newline at end of file