Merge branch 'test-vue'

backend/src/controllers/movieController.js

+const db = require('../models/db');
+
+exports.getMovieInformations = (req, res, next) => {
+    let filmId = req.params.id;
+
+    db.query('SELECT * FROM Film WHERE tconst = ?',
+        [filmId], function (error, results, fields) {
+
+            if (error) {
+                res.status(500).json({ error });
+            } else {
+                let infos = results[0];
+                res.status(200).json(infos);
+            }
+        })
+};
+
+exports.searchMovie = (req, res, next) => {
+    let search = req.query.title;
+
+    db.query('SELECT * FROM Film WHERE primaryTitle LIKE CONCAT("%",?,"%") OR titleFR LIKE CONCAT("%",?,"%")',
+        [search, search], function (error, results, fields) {
+            if(error) {
+                res.status(500).json({error});
+            }
+            else {
+                let searchResults = results;
+                res.status(200).json(searchResults);
+            }
+        })
+
+};
+
+exports.getRecentlyReleasedMovies = (req, res, next) => {
+    const numberOfMovies = req.query.numberOfMovies || 20;
+
+    db.query('SELECT * FROM Film WHERE releaseDate <= CURDATE() ORDER BY releaseDate DESC LIMIT ?',
+        [parseInt(numberOfMovies)], (error, results, fields) => {
+            if (error) {
+                res.status(500).json({ error });
+            } else {
+                res.status(200).json(results);
+            }
+        });
+};
\ No newline at end of file

backend/src/controllers/personController.js

+const db = require('../models/db');
+
+exports.getPersonInformations = (req, res, next) => {
+    let personId = req.params.id;
+
+    db.query('SELECT * FROM Personne WHERE nconst = ?',
+        [personId], function (error, results, fields) {
+
+            if (error) {
+                res.status(500).json({ error });
+            } else {
+                let infos = results[0];
+                res.status(200).json(infos);
+            }
+        })
+};
\ No newline at end of file

backend/src/controllers/userController.js

@@ -91,3 +91,91 @@ exports.getUserInformations = (req,res,next) => {
         }
     })
 };
+
+
+
+exports.changeUserInfos = async (req, res, next) => {
+    try {
+        const { newUsername, newPassword } = req.params;
+        const currentUsername = req.session.username; // Supposant que le nom d'utilisateur actuel est stocké dans la session
+
+        console.log(req.params);
+        console.log(req.body);
+        console.log(newUsername );
+        if (!newUsername && !newPassword) {
+            return res.status(400).json({ message: 'Aucune information à mettre à jour' });
+        }
+
+        // Vérification si le nouvel utilisateur existe déjà
+        if (newUsername) {
+            const userExists = await checkUserExists(newUsername);
+            if (userExists) {
+                return res.status(409).json({ message: 'Le nouvel utilisateur existe déjà' });
+            }
+        }
+
+        // Mise à jour du nom d'utilisateur et/ou du mot de passe dans la base de données
+        const updateResult = await updateUserInfo(currentUsername, newUsername, newPassword);
+
+        // Vérification si la mise à jour a réussi
+        if (updateResult) {
+            req.session.username = newUsername || currentUsername; // Mettre à jour le nom d'utilisateur dans la session si applicable
+            res.status(200).json({ message: 'Informations utilisateur mises à jour avec succès' });
+        } else {
+            res.status(500).json({ message: 'Échec de la mise à jour des informations utilisateur' });
+        }
+    } catch (error) {
+        console.error('Erreur lors de la mise à jour des informations utilisateur :', error);
+        res.status(500).json({ error });
+    }
+};
+
+// Fonction pour vérifier si un utilisateur existe déjà dans la base de données
+async function checkUserExists(username) {
+    const queryResult = await new Promise((resolve, reject) => {
+        db.query('SELECT COUNT(*) c FROM Utilisateur WHERE login=?', [username], (error, results, fields) => {
+            if (error) {
+                reject(error);
+            } else {
+                resolve(results[0].c > 0);
+            }
+        });
+    });
+    return queryResult;
+}
+
+// Fonction pour mettre à jour le nom d'utilisateur et/ou le mot de passe dans la base de données
+async function updateUserInfo(currentUsername, newUsername, newPassword) {
+    const updateResult = await new Promise((resolve, reject) => {
+        let updateQuery = 'UPDATE Utilisateur SET';
+        const updateParams = [];
+
+        if (newUsername) {
+            updateQuery += ' login=?,';
+            updateParams.push(newUsername);
+        }
+
+        if (newPassword) {
+            updateQuery += ' mdp=?,';
+            const hash = bcrypt.hashSync(newPassword, 10);
+            updateParams.push(hash);
+        }
+
+        // Supprimer la virgule finale de la requête
+        updateQuery = updateQuery.replace(/,$/, '');
+
+        // Ajouter la clause WHERE pour le nom d'utilisateur actuel
+        updateQuery += ' WHERE login=?';
+        updateParams.push(currentUsername);
+
+        // Exécution de la mise à jour
+        db.query(updateQuery, updateParams, (error, results, fields) => {
+            if (error) {
+                reject(error);
+            } else {
+                resolve(true);
+            }
+        });
+    });
+    return updateResult;
+}

backend/src/routes/movies.js

+const express = require('express');
+const router = express.Router();
+const controller = require('../controllers/movieController');
+
+router.get('/:id(tt\\d+)',controller.getMovieInformations);
+router.get('/search',controller.searchMovie);
+router.get('/recent',controller.getRecentlyReleasedMovies);
+
+
+
+module.exports = router;
\ No newline at end of file

backend/src/routes/person.js

+const express = require('express');
+const router = express.Router();
+const controller = require('../controllers/personController');
+
+router.get('/:id(nm\\d+)',controller.getPersonInformations);
+
+
+
+module.exports = router;
\ No newline at end of file

backend/src/routes/user.js

@@ -11,5 +11,7 @@ router.post('/signup', controller.signup);
 
 router.get('/logout',auth.auth,controller.logout);
 
+router.put('/',auth.auth,controller.changeUserInfos);
+
 
 module.exports = router;
\ No newline at end of file

backend/src/server.js

@@ -16,6 +16,10 @@ app.use(express.urlencoded({ extended: true }));
 app.use(cors({origin: 'http://localhost:5173', credentials : true}));
 const userRoutes = require('./routes/user');
 app.use('/user', userRoutes);
+const moviesRoutes = require('./routes/movies');
+app.use('/movies',moviesRoutes);
+const personRoutes = require('./routes/person');
+app.use('/person',personRoutes);
 
 app.listen(port, () => {
   console.log(`Serveur en cours d'exécution sur le port ${port}`);

frontend/README.md

-# frontend
+n# frontend
 
 This template should help get you started developing with Vue 3 in Vite.
 

frontend/src/assets/main.css

 @import './base.css';
 
 #app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
+  /* max-width: 1280px; */
+  /* margin: 0 auto; */
+  /* padding: 2rem; */
 
   font-weight: normal;
 }
@@ -23,13 +23,14 @@ a,
 
 @media (min-width: 1024px) {
   body {
-    display: flex;
+    /* display: flex; */
     place-items: center;
   }
 
   #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
+    /* display: grid; */
+    /* grid-template-columns: 1fr 1fr; */
+    /* padding: 0 2rem; */
   }
+
 }

frontend/src/components/Header.vue

@@ -47,17 +47,64 @@ onMounted(() => {
 
 <template>
     <header>
-        <router-link to="/">
-            <div>Projet S5</div>
-        </router-link>
+
         <nav>
-            <router-link v-if="!isConnected" to="/inscription">Inscription</router-link>
-            <router-link v-if="!isConnected" to="/connexion">Connexion</router-link>
-            <router-link v-if="isConnected" to="/account">Mon compte : {{ firstname }} </router-link>
-            <button v-if="isConnected" @click="logout">Déconnexion</button>
+            <ul>
+                <li class = "gauche"> <router-link to="/">
+                        Projet S5
+                    </router-link></li>
+                <li class = "droite"><router-link v-if="!isConnected" to="/inscription">Inscription</router-link></li>
+                <li class = "droite"><router-link v-if="!isConnected" to="/connexion">Connexion</router-link></li>
+                <li class = "droite"><router-link v-if="isConnected" to="/account">Mon compte : {{ firstname }} </router-link></li>
+                <li class = "droite"><a v-if="isConnected" @click="logout">Déconnexion</a></li>
+            </ul>
+
 
         </nav>
     </header>
 </template>
 
-<style scoped></style>
+<style scoped>
\ No newline at end of file
+header {
+    padding: 0;
+    margin: auto;
+}
+
+ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    background-color: #333;
+}
+
+li.gauche {
+    float: left;
+}
+li.droite {
+    float: right;
+}
+li.gauche a {
+    font-weight: bold;
+}
+
+li a {
+    display: block;
+    color: white;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+}
+
+/* Change the link color to #111 (black) on hover */
+li a:hover {
+    background-color: #111;
+}
+button {
+    display: block;
+    color: white;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+}
+</style>
\ No newline at end of file

frontend/src/components/SearchBar.vue

+<script setup>
+import { ref, onMounted } from 'vue';
+import router from '@/router/index.js'
+
+const searchQuery = ref('');
+
+async function searchMovies() {
+    router.push({ path: '/search', query: { q: searchQuery.value } });
+
+}
+
+</script>
+
+<template>
+    <form @submit.prevent="searchMovies">
+        <input v-model="searchQuery" type="text" placeholder="Exemple : Cars">
+        <button>Rechercher</button>
+    </form>
+</template>
+
+<style scoped>
+input {
+    display: block;
+    padding: 10px;
+    font-size: 20px;
+    border: none;
+    outline: none;
+    background-color: var(--color-background);
+    color: var(--color-text);
+    flex-grow: 2;
+    border-radius: 5px;
+}
+
+
+form {
+    margin: 10px auto;
+    width: 45%;
+    display: flex;
+    flex-direction: row;
+    border: 1px solid #e6007e;
+    border-radius: 5px;
+}
+
+
+input:focus {
+    outline: none;
+}
+
+form:focus-within {
+    outline: none;
+}
+
+button {
+    border: 1px solid #e6007e;
+    background: #e6007e;
+    /* color: var(--color-text); */
+    border-radius: 0 4px 4px 0;
+}
+</style>
\ No newline at end of file

frontend/src/router/index.js

@@ -3,6 +3,9 @@ import Accueil from '../views/Accueil.vue'
 import Connexion from '../views/Connexion.vue'
 import Inscription from '../views/Inscription.vue'
 import MonCompte from '../views/MonCompte.vue'
+import PageFilm from '../views/PageFilm.vue'
+import SearchResults from '../views/SearchResults.vue'
+import PagePersonne from '../views/PagePersonne.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -26,7 +29,22 @@ const router = createRouter({
       path: '/account',
       name: 'account',
       component: MonCompte
-    }
+    },
+    {
+      path: '/movie/:id',
+      name: 'movie',
+      component: PageFilm
+    },
+    {
+      path: '/search',
+      name: 'search',
+      component: SearchResults
+    },
+    {
+      path: '/person/:id',
+      name: 'person',
+      component: PagePersonne
+    },
   ]
 })
 

frontend/src/views/Accueil.vue

@@ -33,3 +33,13 @@ onMounted(() => {
   <h2>Le plus beau site du monde</h2>
   <FilmRow :films="films"></FilmRow>
 </template>
+
+<style scoped>
+
+.film-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  /* Espacement entre les films */
+}
+</style>

frontend/src/views/Connexion.vue

@@ -29,21 +29,71 @@ function submit() {
 <template>
     <Header>
     </Header>
+    <div class="container">
+        <div class="formulaire">
+            <h1>Se connecter</h1>
+            <form @submit.prevent="submit">
+                <label for="login">Nom d'utilisateur : </label>
+                <input type="text" placeholder="Nom d'utilisateur" id="login" v-model="login">
+                <br>
 
-    <h1>Se connecter</h1>
-    <div>
-        <form @submit.prevent="submit">
-            <label for="login">Nom d'utilisateur :</label>
-            <input type="text" placeholder="Nom d'utilisateur" id="login" v-model="login">
-            <br>
+                <label for="password">Mot de passe : </label>
+                <input type="password" placeholder="Mot de passe" id="password" v-model="password">
+                <br>
 
-            <label for="password">Mot de passe</label>
-            <input type="password" placeholder="Mot de passe" id="password" v-model="password">
-            <br>
-
-            <button type="submit" name="submit">Se connecter</button>
-        </form>
+                <button type="submit" name="submit">Se connecter</button>
+            </form>
+        </div>
     </div>
 </template>
 
-<style scoped></style>
+<style scoped>
\ No newline at end of file
+.container {
+    display: flex;
+    justify-content: center;
+}
+
+.formulaire {
+    margin: 50px;
+    padding: 20px;
+    border: 1px solid #e6007e;
+    border-radius: 25px;
+}
+
+
+form label {
+    display: block;
+    margin: 10px 0;
+    font-size: 20px;
+
+}
+
+form input {
+    display: block;
+    margin: 10px auto;
+    padding: 10px;
+    font-size: 20px;
+    border: 1px solid #e6007e;
+    border-radius: 5px;
+    outline: none;
+    background-color: var(--color-background);
+    color: var(--color-text);
+}
+
+
+form button {
+    display: block;
+    margin: 10px auto;
+    padding: 10px;
+    font-size: 20px;
+    border-radius: 5px;
+    border: 1px solid #e6007e;
+    background-color: var(--color-background);
+    color: var(--color-text);
+}
+
+form button:hover {
+    background-color: var(--color-background-soft);
+
+}
+</style>
\ No newline at end of file

frontend/src/views/Inscription.vue

@@ -16,11 +16,12 @@ function submit() {
         },
         credentials: 'include',
         body: JSON.stringify({
-             username: username,
-             firstname: firstname,
-             lastname: lastname,
-             birthdate: birthdate,
-             password: password })
+            username: username,
+            firstname: firstname,
+            lastname: lastname,
+            birthdate: birthdate,
+            password: password
+        })
     }).then(response => {
         if (response.status == 201) {
             router.push('/connexion');
@@ -34,30 +35,83 @@ function submit() {
 <template>
     <Header>
     </Header>
-    <h1>S'inscrire</h1>
-    <form @submit.prevent="submit">
-        <label for="username">Nom d'utilisateur :</label>
-        <input type="text" placeholder="Nom d'utilisateur" id="username" v-model="username">
-        <br>
-
-        <label for="firstname">Prénom : </label>
-        <input type="text" placeholder="Prénom" id="firstname" v-model="firstname">
-        <br>
-
-        <label for="lastname">Nom : </label>
-        <input type="text" placeholder="Nom" id="lastname" v-model="lastname">
-        <br>
-
-        <label for="birthdate">Date de naissance</label>
-        <input type="date" placeholder="a" id="birthdate" v-model="birthdate">
-        <br>
-
-        <label for="password">Mot de passe</label>
-        <input type="password" placeholder="Mot de passe" id="password" v-model="password">
-        <br>
-
-        <button type="submit" name="submit">S'inscrire</button>
-    </form>
+    <div class="container">
+        <div class="formulaire">
+            <h1>S'inscrire</h1>
+            <form @submit.prevent="submit">
+                <label for="username">Nom d'utilisateur : </label>
+                <input type="text" placeholder="Nom d'utilisateur" id="username" v-model="username">
+                <br>
+
+                <label for="firstname">Prénom : </label>
+                <input type="text" placeholder="Prénom" id="firstname" v-model="firstname">
+                <br>
+
+                <label for="lastname">Nom : </label>
+                <input type="text" placeholder="Nom" id="lastname" v-model="lastname">
+                <br>
+
+                <label for="birthdate">Date de naissance : </label>
+                <input type="date" placeholder="a" id="birthdate" v-model="birthdate">
+                <br>
+
+                <label for="password">Mot de passe : </label>
+                <input type="password" placeholder="Mot de passe" id="password" v-model="password">
+                <br>
+
+                <button type="submit" name="submit">S'inscrire</button>
+            </form>
+        </div>
+    </div>
 </template>
 
-<style scoped></style>
+<style scoped>
\ No newline at end of file
+.container {
+    display: flex;
+    justify-content: center;
+}
+
+.formulaire {
+    margin: 50px;
+    padding: 20px;
+    border: 1px solid #e6007e;
+    border-radius: 25px;
+}
+
+
+form label {
+    display: block;
+    margin: 10px 0;
+    font-size: 20px;
+
+}
+
+form input {
+    display: block;
+    margin: 10px auto;
+    padding: 10px;
+    font-size: 20px;
+    border: 1px solid #e6007e;
+    border-radius: 5px;
+    outline: none;
+    background-color: var(--color-background);
+    color: var(--color-text);
+}
+
+
+form button {
+    display: block;
+    margin: 10px auto;
+    padding: 10px;
+    font-size: 20px;
+    border-radius: 5px;
+    border: 1px solid #e6007e;
+    background-color: var(--color-background);
+    color: var(--color-text);
+}
+
+form button:hover {
+    background-color: var(--color-background-soft);
+
+}
+</style>
\ No newline at end of file

frontend/src/views/MonCompte.vue

@@ -39,17 +39,46 @@ onMounted(() => {
 
     </Header>
 
-    <h1>Mes informations</h1>
-    <h3>Personnelles :</h3>
-    <h5>Nom :{{ lastname }}</h5>
-    <h5>Prénom :{{ firstname }}</h5>
-    <h5>Date de naissance : {{ birthdate }}</h5>
-    <h3>Films préférés :</h3>
-    <h3>Sécurité :</h3>
-    <button>Changer de mot de login</button>
-    <br>
-    <br>
-    <button>Changer de mot de passe</button>
+    <div>
+        <h1>Mes informations</h1>
+        <p>Nom : {{ lastname }}</p>
+        <p>Prénom : {{ firstname }}</p>
+        <p>Date de naissance : {{ birthdate }}</p>
+        <br>
+        <button>Changer de nom d'utilisateur</button>
+        <button>Changer de mot de passe</button>
+    </div>
+        <h1>Films préférés :</h1>
+
+    
 </template>
 
-<style scoped></style>
+<style scoped>
\ No newline at end of file
+div {
+    margin: 50px;
+    padding: 20px;
+    border: 1px solid #e6007e;
+    border-radius: 25px;
+    text-align: center;
+}
+
+button {
+    display: block;
+    margin: 10px auto;
+    padding: 10px;
+    font-size: 20px;
+    border-radius: 5px;
+    border: 1px solid #e6007e;
+    background-color: var(--color-background);
+    color: var(--color-text);
+}
+
+button:hover {
+    background-color: var(--color-background-soft);
+
+}
+
+p {
+    font-size: 20px;
+}
+</style>
\ No newline at end of file

frontend/src/views/PageFilm.vue

+<script setup>
+import Header from '@/components/Header.vue'
+import { ref, onMounted } from 'vue';
+import {useRoute} from 'vue-router';
+
+const route = useRoute();
+
+
+let originalTitle = ref('');
+let frTitle = ref('');
+let annee = ref('');
+let duree = ref('');
+let note = ref('');
+let nbNotes = ref('');
+
+
+async function getFilmInfo() {
+
+    try {
+        const response = await fetch('http://localhost:3000/movies/' + route.params.id, { credentials: 'include' });
+
+        if (response.ok) {
+            const data = await response.json();
+
+            if (data) {
+                originalTitle.value = data.primaryTitle;
+                frTitle.value = data.titleFR;
+                annee.value = data.startYear;
+                duree.value = data.runtimeMinutes;
+                note.value = data.averageRating;
+                nbNotes.value = data.numVotes;
+            }
+        } else {
+            const errorData = await response.json();
+            console.error('Error:', response.status, errorData);
+        }
+    } catch (error) {
+        console.error('Error during API call:', error);
+    }
+}
+
+onMounted(() => {
+    getFilmInfo();
+});
+
+</script>
+
+<template>
+    <Header>
+    </Header>
+
+    <h1> {{ frTitle || originalTitle }}</h1>
+    <h2>Date de sortie : {{ annee }}</h2>
+    <h2>Durée : {{ duree }} minutes</h2>
+    <h2>Note : {{ note }}</h2>
+</template>
+
+<style scoped></style>
\ No newline at end of file

frontend/src/views/PagePersonne.vue

+<script setup>
+import Header from '@/components/Header.vue'
+import { ref, onMounted } from 'vue';
+import {useRoute} from 'vue-router';
+
+const route = useRoute();
+
+
+let nom = ref('');
+let prenom = ref('');
+let birthYear = ref('');
+let deathYear = ref('');
+let profession = ref('');
+
+
+async function getPersonInfo() {
+
+    try {
+        const response = await fetch('http://localhost:3000/person/' + route.params.id, { credentials: 'include' });
+
+        if (response.ok) {
+            const data = await response.json();
+
+            if (data) {
+                nom.value = data.nom;
+                prenom.value = data.prenom;
+                birthYear.value = data.birthYear;
+                deathYear.value = data.deathYear;
+                profession.value = data.primaryProfession;
+            }
+        } else {
+            const errorData = await response.json();
+            console.error('Error:', response.status, errorData);
+        }
+    } catch (error) {
+        console.error('Error during API call:', error);
+    }
+}
+
+onMounted(() => {
+    getPersonInfo();
+});
+
+</script>
+
+<template>
+    <Header>
+    </Header>
+
+    <h1> {{ nom }} {{ prenom }}</h1>
+    <h2>Date de naissance : {{ birthYear }}</h2>
+    <h2 v-if="deathYear">Date de décès : {{ deathYear }} </h2>
+    <h2>Profession : {{ profession }}</h2>
+</template>
+
+<style scoped></style>
\ No newline at end of file

frontend/src/views/SearchResults.vue

+<script setup>
+import { ref, onMounted } from 'vue';
+import Header from '../components/Header.vue';
+import SearchBar from '../components/SearchBar.vue';
+import { useRoute } from 'vue-router';
+const route = useRoute();
+
+onMounted(() => {
+    fetchSearchResults();
+});
+
+async function fetchSearchResults() {
+    const searchTitle = route.query.q
+    const params = new URLSearchParams({ title: searchTitle });
+    try {
+        const response = await fetch(`http://localhost:3000/movies/search?${params.toString()}`, { credentials: 'include' });
+
+        if (response.ok) {
+            const data = await response.json();
+
+            if (data) {
+                console.log(data);
+            }
+        } else {
+            const errorData = await response.json();
+            console.error('Error:', response.status, errorData);
+        }
+    } catch (error) {
+        console.error('Error during API call:', error);
+    }
+}
+
+
+</script>
+
+<template>
+    <Header>
+    </Header>
+    <SearchBar>
+
+    </SearchBar>
+</template>
+
+<style scoped>
+</style>
\ No newline at end of file

lancer le site.txt

+ouvrir un terminal puis taper:
+node backend/src/server.js
+
+ouvrir un deuxieme terminal puis taper:
+cd.frontend
+npm run dev
\ No newline at end of file