added role support

app/app.vue

@@ -12,6 +12,7 @@
 <style>
 body {
   background-color: #f5f5f5;
+  font-family: var(--font-body), serif;
 }
 
 .content {

app/assets/css/variables.css

@@ -1,4 +1,5 @@
 :root {
     --color-primary: #000;
     --color-surface: #fff;
-}
+    --font-body: 'Ubuntu', serif;
+}

app/components/forms/auth/new-password-form.vue

@@ -24,12 +24,12 @@ const handlePasswordReset = () => {
   <form class="password-form" @submit.prevent="handlePasswordReset">
     <div class="form-group">
       <label for="password">Password</label>
-      <input id="password" v-model="password" type="password"/>
+      <input id="password" v-model="password" autocomplete="new-password" type="password"/>
     </div>
 
     <div class="form-group">
       <label for="new-password">Confirm Password</label>
-      <input id="confirm-password" v-model="passwordConfirmation" type="password"/>
+      <input id="confirm-password" v-model="passwordConfirmation" autocomplete="new-password" type="password"/>
     </div>
 
     <button type="submit">Submit</button>

app/components/header.vue

@@ -28,7 +28,8 @@
   flex-direction: column;
   align-items: center;
   gap: 1rem;
-  font: bold 1.5rem sans-serif;
+  font-size: 1.5rem;
+  font-weight: bold;
   justify-content: center;
   margin-bottom: 2rem;
   border-bottom: 1px solid rgba(0, 0, 0, 0.3);

app/components/list-settings.vue

@@ -2,20 +2,17 @@
 import type {MovieList} from "~/types/movie-list";
 import Card from "~/components/common/card.vue";
 import InputAction from "~/components/common/input-action.vue";
+import type {Role} from "~/types/role";
+import type {ResourceResponse} from "~/types/api";
+import type {User} from "~/types/user";
 
-defineEmits(['back-to-list', 'update-list'])
+const emits = defineEmits(['back-to-list', 'update-list'])
 const props = defineProps<{
   list: MovieList
 }>()
 
 const localName = ref(props.list.name)
 
-const availableRoles = [
-  {id: 1, name: 'viewer'},
-  {id: 2, name: 'editor'},
-  {id: 3, name: 'admin'}
-]
-
 const collaboratorInvites = ref("");
 const responseMessage = ref("");
 type BasicResponse = {
@@ -34,6 +31,17 @@ const sendInvites = () => {
   })
 }
 
+const updateCollaboratorRole = (collaborator: User) => {
+  $api<ResourceResponse<MovieList>>(`/api/movielists/${props.list.id}/collaborators/${collaborator.id}/`, {
+    method: 'PATCH',
+    body: {
+      role_id: collaborator.role
+    }
+  }).then((response) => {
+    emits('update-list', response.data)
+  })
+}
+
 const deleteList = () => {
   if (!confirm("Are you sure you want to delete this list?")) return
 
@@ -43,6 +51,20 @@ const deleteList = () => {
     navigateTo('/lists')
   })
 }
+
+const roles = ref<Role[]>([])
+
+const getRoles = () => {
+  return $api<ResourceResponse<Role[]>>(`/api/roles`, {
+    method: 'GET'
+  }).then((response) => {
+    roles.value = response.data
+  }).catch((error) => {
+    alert(error.message)
+  })
+}
+
+getRoles()
 </script>
 
 <template>
@@ -74,28 +96,23 @@ const deleteList = () => {
         <span>Collaborators</span>
         <details>
           <summary>Permission levels</summary>
-
           <ul>
-            <li>Viewer: Can view the list, but cannot make any changes.</li>
-            <li>Editor: Can add/remove movies from the list.</li>
-            <li>Admin: Can make any changes to the list including deleting it. Can also invite other users to
-              collaborate
-              on
-              this list.
+            <li v-for="role in roles">
+              {{ role.display_name }}: {{ role.description }}
             </li>
           </ul>
         </details>
 
-        <div v-if="!list.collaborators.length">No collaborators found</div>
+        <div v-if="!list.collaborators?.length">No collaborators found</div>
         <ul v-else class="collaborators">
           <li v-for="collaborator in list.collaborators" :key="collaborator.id">
             <span>{{ collaborator.username }}</span>
-            <select v-model="collaborator.role">
+            <select v-model="collaborator.role" @change="updateCollaboratorRole(collaborator)">
               <option
-                  v-for="role in availableRoles"
-                  :value="role.name"
+                  v-for="role in roles"
+                  :value="role.id"
               >
-                {{ role.name }}
+                {{ role.display_name }}
               </option>
             </select>
           </li>

app/components/movie-list.vue

@@ -8,7 +8,8 @@ type SortDirection = 'asc' | 'desc'
 type SortOption = { field: SortField, direction: SortDirection }
 
 const props = defineProps<{
-  movies: Movie[]
+  movies: Movie[],
+  canEdit: boolean,
 }>()
 
 const emit = defineEmits<{
@@ -117,7 +118,7 @@ const isSortActive = (field: SortField, direction: SortDirection): boolean => {
           </ul>
         </div>
       </div>
-      <button class="add-movie-button" @click="emit('add-movie')">Add Movie</button>
+      <button v-if="canEdit" class="add-movie-button" @click="emit('add-movie')">Add Movie</button>
     </div>
     <div v-if="filteredMovies.length === 0" class="movie-quote">
       <span class="quote">"You complete me."</span>
@@ -126,12 +127,13 @@ const isSortActive = (field: SortField, direction: SortDirection): boolean => {
     <ul v-else class="movie-list">
       <li v-for="movie in filteredMovies" :key="movie.id" class="movie" @click="emit('movie-clicked', movie)">
         <div class="movie-poster-container">
-          <img
+          <NuxtImg
               :class="{ 'movie-poster-error': imageErrors.has(movie.id) }"
               :src="movie.poster"
               alt=""
               class="movie-poster"
-              @error="(e) => handleImageError(e, movie.id)"
+              loading="lazy"
+              @error="(e: ErrorEvent) => handleImageError(e, movie.id)"
           />
           <div v-if="imageErrors.has(movie.id)" class="movie-title-overlay">
             {{ movie.title }}

app/components/panels/movie-details.vue

@@ -5,6 +5,7 @@ import posterPlaceholder from "~/assets/img/poster-placeholder.svg";
 
 const props = defineProps<{
   selectedMovie: Movie;
+  canEdit: boolean;
 }>();
 
 const emit = defineEmits(['remove-movie']);
@@ -56,7 +57,7 @@ const criticScores = computed(() => {
       </div>
     </dl>
 
-    <button type="button" @click="emit('remove-movie', selectedMovie.id)">Remove From List</button>
+    <button v-if="canEdit" type="button" @click="emit('remove-movie', selectedMovie.id)">Remove From List</button>
   </div>
 </template>
 

app/pages/lists/[id].vue

@@ -28,6 +28,9 @@ const {data: listResponse} = await useApiData<ResourceResponse<MovieList>>(`/api
   }
 });
 
+const isAdmin = computed(() => ['ADMIN', 'OWNER'].includes(listResponse.value.data.role));
+const canEdit = computed(() => listResponse.value.data.role === 'EDITOR' || isAdmin.value);
+
 const refreshList = (updatedList: MovieList) => {
   listResponse.value = {data: updatedList};
 }
@@ -61,7 +64,7 @@ const removeMovieFromList = (movieId: number) => {
   <div v-if="listResponse" class="content">
     <div class="page-header">
       <PageTitle :title="listResponse.data.name"/>
-      <Icon class="settings-icon" name="solar:settings-bold" @click="toggleSettings"/>
+      <Icon v-if="isAdmin" class="settings-icon" name="solar:settings-bold" @click="toggleSettings"/>
     </div>
 
     <ListSettings
@@ -73,6 +76,7 @@ const removeMovieFromList = (movieId: number) => {
 
     <MovieList
         v-else
+        :can-edit="canEdit"
         :movies="listResponse.data.movies"
         @movie-clicked="selectedMovie = $event"
         @add-movie="toggleMovieSearch"
@@ -81,7 +85,8 @@ const removeMovieFromList = (movieId: number) => {
 
   <!-- MOVIE DETAILS SLIDEOUT -->
   <SlideoutPanel :open="!!selectedMovie" @close="selectedMovie = null">
-    <MovieDetails v-if="selectedMovie" :selectedMovie="selectedMovie" @remove-movie="removeMovieFromList"/>
+    <MovieDetails v-if="selectedMovie" :can-edit="canEdit" :selectedMovie="selectedMovie"
+                  @remove-movie="removeMovieFromList"/>
   </SlideoutPanel>
 
   <!-- MOVIE SEARCH SLIDEOUT -->

app/types/role.ts

@@ -1,5 +1,6 @@
 export type Role = {
     id: number,
-    name: string
+    display_name: string
+    description: string
 }