fait un peu bo les pages compte film personne accueil

frontend/src/components/Person.vue

@@ -5,7 +5,6 @@ const props = defineProps(['person']);
 <template>
   <router-link :to="{ name: 'person', params: { id: person.nconst } }" class="person">
 
-    <img :src="person" :alt="person.title" />
     <h3>{{ person.prenom + ' ' + person.nom.toUpperCase() }}</h3>
     <h4>{{ person.birthYear }} {{ person.deathYear }}</h4>
     <h4>{{ person.roles }}</h4>

frontend/src/views/Accueil.vue

@@ -35,10 +35,16 @@ const films = [
 <template>
   <Header>
   </Header>
-  <h1>Recherchez votre film</h1>
-  <SearchBar></SearchBar>
-  <FilmRow :films="films"></FilmRow>
+  <div>
+    <h1>Recherchez votre film</h1>
+    <SearchBar></SearchBar>
+    <FilmRow :films="films"></FilmRow>
+  </div>
 </template>
 
 <style scoped>
+div {
+  margin: 20px;
+  padding: 5px;
+}
 </style>

frontend/src/views/MonCompte.vue

@@ -32,7 +32,7 @@ function getUserInfo() {
 
 
 async function fetchSeenMovies() {
-    
+
     try {
         const response = await fetch('http://localhost:3000/user/seenMovies', { credentials: 'include' });
 
@@ -62,23 +62,30 @@ onMounted(() => {
     <Header>
 
     </Header>
-
-    <div>
-        <h1>Mes informations</h1>
-        <p>Nom : {{ lastname }}</p>
-        <p>Prénom : {{ firstname }}</p>
-        <p>Date de naissance : {{ new Date(birthdate).toLocaleDateString() }}</p>
-        <br>
-        <button>Changer de nom d'utilisateur</button>
-        <button>Changer de mot de passe</button>
+    <div class="container">
+        <div class="infoUtilisateur">
+            <h1>Mes informations</h1>
+            <p>Nom : {{ lastname }}</p>
+            <p>Prénom : {{ firstname }}</p>
+            <p>Date de naissance : {{ new Date(birthdate).toLocaleDateString() }}</p>
+            <br>
+            <button>Changer de nom d'utilisateur</button>
+            <button>Changer de mot de passe</button>
+        </div>
+
+        <h1>Films préférés :</h1>
+        <FilmRow :films="mesFilmsVus"></FilmRow>
     </div>
-    <h1>Films préférés :</h1>
-    <FilmRow :films="mesFilmsVus"></FilmRow>
 </template>
 
 <style scoped>
-div {
-    margin: 50px;
+div.container {
+    margin: 20px;
+    padding: 5px;
+}
+
+div.infoUtilisateur {
+    margin: 10px;
     padding: 20px;
     border: 1px solid #e6007e;
     border-radius: 25px;

frontend/src/views/PageFilm.vue

@@ -3,7 +3,7 @@ import StarRating from 'vue-star-rating';
 import Header from '@/components/Header.vue';
 import CastRow from '@/components/CastRow.vue';
 import { ref, onMounted, watch } from 'vue';
-import {useRoute} from 'vue-router';
+import { useRoute } from 'vue-router';
 import router from '@/router/index.js'
 
 const route = useRoute();
@@ -15,9 +15,9 @@ let annee = ref('');
 let duree = ref('');
 let note = ref('');
 let nbNotes = ref('');
-let rating = ref(); 
+let rating = ref();
 
-async function getRateUser(){
+async function getRateUser() {
     const params = new URLSearchParams({ id: route.params.id });
     try {
         const response = await fetch(`http://localhost:3000/movies/getMovieNote?${params.toString()}`, { credentials: 'include' });
@@ -39,13 +39,13 @@ async function getRateUser(){
 }
 
 
-watch(rating,async (rating) => {
+watch(rating, async (rating) => {
     console.log(rating);
-    const params = new URLSearchParams({ id: route.params.id, note : rating });
+    const params = new URLSearchParams({ id: route.params.id, note: rating });
     try {
         const response = await fetch(`http://localhost:3000/movies/addmovienote?${params.toString()}`, { credentials: 'include' });
 
-        if (! response.ok) {
+        if (!response.ok) {
             const errorData = await response.json();
             console.error('Error:', response.status, errorData);
             router.push('/connexion');
@@ -115,17 +115,46 @@ async function getCast() {
 <template>
     <Header>
     </Header>
+    <div class="tout">
+        <div class="container">
+            <div class="infoFilm">
+                <h1> {{ frTitle || originalTitle }}</h1>
+                <h2>Date de sortie : {{ annee }}</h2>
+                <h2>Durée : {{ duree }} minutes</h2>
+                <h2>Note : {{ note }}</h2>
+                <h2>Votre note :</h2>
+                <div class="etoile">
+                    <star-rating v-model:rating="rating" />
+                </div>
+
+            </div>
+        </div>
+        <h2>Distribution : </h2>
+        <CastRow :cast="cast"></CastRow>
+    </div>
+</template>
 
-    <h1> {{ frTitle || originalTitle }}</h1>
-    <h2>Date de sortie : {{ annee }}</h2>
-    <h2>Durée : {{ duree }} minutes</h2>
-    <h2>Note : {{ note }}</h2>
-    <h2>Votre note :</h2>
-    <star-rating  v-model:rating="rating"/>
-    <h2>Distribution : </h2>
-    <CastRow :cast="cast"></CastRow>
-
+<style scoped>
+div.tout {
+    margin: 20px;
+    padding: 10px;
+}
+div.container {
+    display: flex;
+    justify-content: center;
+}
 
-</template>
+div.infoFilm {
+    margin: 10px;
+    padding: 20px;
+    border: 1px solid #e6007e;
+    border-radius: 25px;
+    text-align: center;
+}
 
-<style scoped></style>
+div.etoile {
\ No newline at end of file
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+</style>

frontend/src/views/PagePersonne.vue

@@ -2,7 +2,7 @@
 import Header from '@/components/Header.vue'
 import FilmRow from '@/components/FilmRow.vue'
 import { ref, onMounted } from 'vue';
-import {useRoute} from 'vue-router';
+import { useRoute } from 'vue-router';
 
 const route = useRoute();
 
@@ -71,13 +71,37 @@ async function getMovieByPerson() {
 <template>
     <Header>
     </Header>
-
-    <h1> {{ prenom }} {{ nom.toUpperCase() }}</h1>
-    <h2>Date de naissance : {{ birthYear }}</h2>
-    <h2 v-if="deathYear">Date de décès : {{ deathYear }} </h2>
-    <h2>Profession : {{ profession }}</h2>
-    <h2>Film avec {{ prenom }} {{ nom.toUpperCase() }} :</h2>
-    <FilmRow :films="movies"></FilmRow>
+    <div class="tout">
+        <div class="container">
+            <div class="infoPersonne">
+                <h1> {{ prenom }} {{ nom.toUpperCase() }}</h1>
+                <h2>Date de naissance : {{ birthYear }}</h2>
+                <h2 v-if="deathYear">Date de décès : {{ deathYear }} </h2>
+                <h2>Profession : {{ profession }}</h2>
+            </div>
+
+        </div>
+
+        <h2>Film avec {{ prenom }} {{ nom.toUpperCase() }} :</h2>
+        <FilmRow :films="movies"></FilmRow>
+    </div>
 </template>
 
-<style scoped></style>
+<style scoped>
\ No newline at end of file
+div.tout {
+    margin: 20px;
+    padding: 10px;
+}
+div.container {
+    display: flex;
+    justify-content: center;
+}
+
+div.infoPersonne {
+    margin: 10px;
+    padding: 20px;
+    border: 1px solid #e6007e;
+    border-radius: 25px;
+    text-align: center;
+}
+</style>
\ No newline at end of file