From 91173021b2026a0693bf82cade23e7090ba3e9f9 Mon Sep 17 00:00:00 2001
From: "Edward Tirado Jr." <ed@etdevelopment.net>
Date: Sun, 5 Apr 2026 00:36:20 -0500
Subject: [PATCH] hooked up all items on the list settings section

---
 app/app.vue                                   |   7 +
 app/assets/css/variables.css                  |   2 +-
 app/components/common/card.vue                |   4 +-
 app/components/common/page-title.vue          |   1 -
 .../forms/auth/new-password-form.vue          |  56 ++++++
 .../forms/auth/registration-form.vue          |  45 +++++
 app/components/forms/create-list-form.vue     |  13 +-
 app/components/header.vue                     |   1 -
 app/components/list-settings.vue              | 175 +++++++++++-------
 app/components/movie-list.vue                 |   9 +-
 app/components/panels/movie-details.vue       |  16 +-
 app/components/panels/movie-search.vue        |   7 +-
 app/composables/$api.ts                       |   4 +-
 app/composables/useAuth.ts                    |  50 ++++-
 app/layouts/auth.vue                          |   3 +-
 app/middleware/auth.global.ts                 |  10 +-
 app/pages/account.vue                         |  24 +--
 app/pages/auth/login.vue                      |  13 +-
 app/pages/auth/register.vue                   |  32 ++++
 app/pages/auth/reset-password/[token].vue     |  30 +++
 app/pages/index.vue                           |   3 +-
 app/pages/invitations/[token]/accept.vue      |  62 +++++++
 app/pages/invitations/[token]/decline.vue     |  11 ++
 app/pages/lists/[id].vue                      |  60 +++---
 app/pages/lists/index.vue                     |  78 ++++----
 app/types/api.ts                              |   2 +
 app/types/collaborator.ts                     |   6 -
 app/types/movie-list-group.ts                 |   7 +
 app/types/movie-list-settings.ts              |   4 +-
 app/types/movie-list.ts                       |   8 +-
 app/types/movie.ts                            |   6 +-
 app/types/user.ts                             |   7 +
 32 files changed, 578 insertions(+), 178 deletions(-)
 create mode 100644 app/components/forms/auth/new-password-form.vue
 create mode 100644 app/components/forms/auth/registration-form.vue
 create mode 100644 app/pages/auth/register.vue
 create mode 100644 app/pages/auth/reset-password/[token].vue
 create mode 100644 app/pages/invitations/[token]/accept.vue
 create mode 100644 app/pages/invitations/[token]/decline.vue
 create mode 100644 app/types/api.ts
 delete mode 100644 app/types/collaborator.ts
 create mode 100644 app/types/movie-list-group.ts
 create mode 100644 app/types/user.ts

diff --git a/app/app.vue b/app/app.vue
index b7f3694..763eb3c 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -14,6 +14,13 @@ body {
   background-color: #f5f5f5;
 }
 
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin: 1rem 0;
+}
+
 /* sm */
 @media (min-width: 640px) {
 }
diff --git a/app/assets/css/variables.css b/app/assets/css/variables.css
index eb0d4a8..21b5ea4 100644
--- a/app/assets/css/variables.css
+++ b/app/assets/css/variables.css
@@ -1,4 +1,4 @@
 :root {
     --color-primary: #000;
     --color-surface: #fff;
-}
\ No newline at end of file
+}
diff --git a/app/components/common/card.vue b/app/components/common/card.vue
index d00eeae..32bc1ff 100644
--- a/app/components/common/card.vue
+++ b/app/components/common/card.vue
@@ -11,8 +11,10 @@
 
 <style scoped>
 .card {
-  padding: 1rem;
+  padding: 2rem;
   background-color: lightgray;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  border-radius: 0.5rem;
 }
 
 </style>
\ No newline at end of file
diff --git a/app/components/common/page-title.vue b/app/components/common/page-title.vue
index 8103f99..ed38462 100644
--- a/app/components/common/page-title.vue
+++ b/app/components/common/page-title.vue
@@ -13,6 +13,5 @@ const props = defineProps<{
 h1 {
   font-size: 2rem;
   font-weight: bold;
-  margin-bottom: 1rem;
 }
 </style>
\ No newline at end of file
diff --git a/app/components/forms/auth/new-password-form.vue b/app/components/forms/auth/new-password-form.vue
new file mode 100644
index 0000000..a98eccc
--- /dev/null
+++ b/app/components/forms/auth/new-password-form.vue
@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+const props = defineProps<{
+  token: string,
+  email: string
+}>();
+
+const {resetPassword} = useAuth();
+const password = ref("");
+const passwordConfirmation = ref("");
+const tokenExpired = ref(false);
+
+const handlePasswordReset = () => {
+  try {
+    resetPassword(password.value, passwordConfirmation.value, props.token, props.email);
+  } catch (error: unknown) {
+    if (error instanceof Error && error.message === "TOKEN_EXPIRED")
+      tokenExpired.value = true;
+  }
+}
+</script>
+
+<template>
+  <p v-show="tokenExpired" class="error">Your password reset token has expired. Please submit a new request.</p>
+  <form class="password-form" @submit.prevent="handlePasswordReset">
+    <div class="form-group">
+      <label for="password">Password</label>
+      <input id="password" v-model="password" type="password"/>
+    </div>
+
+    <div class="form-group">
+      <label for="new-password">Confirm Password</label>
+      <input id="confirm-password" v-model="passwordConfirmation" type="password"/>
+    </div>
+
+    <button type="submit">Submit</button>
+  </form>
+</template>
+
+<style scoped>
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.error {
+  color: red;
+  padding: 2em;
+}
+</style>
\ No newline at end of file
diff --git a/app/components/forms/auth/registration-form.vue b/app/components/forms/auth/registration-form.vue
new file mode 100644
index 0000000..2c16f70
--- /dev/null
+++ b/app/components/forms/auth/registration-form.vue
@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+
+const emits = defineEmits(['registered']);
+const {register} = useAuth();
+
+const username = ref("");
+const email = ref("");
+
+const handleRegistration = () => {
+  register(email.value, username.value);
+}
+
+</script>
+
+<template>
+  <form class="password-form" @submit.prevent="handleRegistration">
+    <div class="form-group">
+      <label for="username">Username</label>
+      <input id="username" v-model="username" type="text"/>
+    </div>
+
+    <div class="form-group">
+      <label for="email">Email</label>
+      <input id="email" v-model="email" type="email"/>
+    </div>
+
+    <button type="submit">Submit</button>
+  </form>
+</template>
+
+<style scoped>
+.password-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  max-width: 50rem;
+  margin: 0 auto;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+</style>
\ No newline at end of file
diff --git a/app/components/forms/create-list-form.vue b/app/components/forms/create-list-form.vue
index a92539d..c3d657a 100644
--- a/app/components/forms/create-list-form.vue
+++ b/app/components/forms/create-list-form.vue
@@ -21,7 +21,7 @@ const createList = () => {
 <template>
   <form @submit.prevent="createList">
     <label for="list_name">Add MovieList</label>
-    <div>
+    <div class="form-group">
       <input v-model="listName"
              name="list_name"
              placeholder="MovieList Name"
@@ -31,6 +31,13 @@ const createList = () => {
   </form>
 </template>
 <style scoped>
+
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
 button {
   background-color: #4caf50;
   color: white;
@@ -46,4 +53,8 @@ input {
   border-radius: 4px 0 0 4px;
 }
 
+label {
+  font-weight: bold;
+}
+
 </style>
\ No newline at end of file
diff --git a/app/components/header.vue b/app/components/header.vue
index 077a9be..095f01e 100644
--- a/app/components/header.vue
+++ b/app/components/header.vue
@@ -28,7 +28,6 @@
   gap: 1rem;
   font: bold 1.5rem sans-serif;
   justify-content: center;
-  margin-bottom: 2rem;
 }
 
 .links {
diff --git a/app/components/list-settings.vue b/app/components/list-settings.vue
index f5252c4..b50429f 100644
--- a/app/components/list-settings.vue
+++ b/app/components/list-settings.vue
@@ -1,91 +1,123 @@
 <script lang="ts" setup>
 import type {MovieList} from "~/types/movie-list";
-import {type MovieListSettings} from "~/types/movie-list-settings";
+import Card from "~/components/common/card.vue";
 
-const emit = defineEmits(['back-to-list'])
+const emit = defineEmits(['back-to-list', 'update-list'])
 const props = defineProps<{
   list: MovieList
 }>()
 
-const listSettings: MovieListSettings = {
-  listName: 'My MovieList',
-  isPublic: true,
-  collaborators: [
-    {id: 1, name: 'Ed', role: 3},
-    {id: 2, name: 'Bob', role: 2}
-  ],
-  roles: [
-    {id: 1, name: 'Viewer'},
-    {id: 2, name: 'Editor'},
-    {id: 3, name: 'Admin'}
-  ]
+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 = {
+  message: string
+}
+const sendInvites = () => {
+  $api<BasicResponse>(`/api/invitations/`, {
+    method: 'POST',
+    body: {
+      emails: collaboratorInvites.value.split(',').map(email => email.trim()),
+      movie_list_id: props.list.id
+    }
+  }).then((response) => {
+    collaboratorInvites.value = "";
+    responseMessage.value = response.message;
+  })
+}
+
+const deleteList = () => {
+  if (!confirm("Are you sure you want to delete this list?")) return
+
+  $api(`/api/movielists/${props.list.id}`, {
+    method: 'DELETE',
+  }).then(() => {
+    navigateTo('/lists')
+  })
 }
 </script>
 
 <template>
-  <div class="settings-header">
-    <div @click="$emit('back-to-list')">
-      <Icon name="solar:arrow-left-linear"/>
-      <span>Back to MovieList</span>
+  <Card>
+    <div class="settings-header">
+      <div @click="$emit('back-to-list')">
+        <Icon name="solar:arrow-left-linear"/>
+        <span class="back-to-list">Back to MovieList</span>
+      </div>
     </div>
-  </div>
 
-  <ul class="settings-list">
-    <li class="list-setting">
-      <label for="list-name-input">MovieList Name</label>
+    <ul class="settings-list">
+      <li class="list-setting">
+        <label for="list-name-input">MovieList Name</label>
 
-      <div>
-        <input id="list-name-input" :value="listSettings.listName" type="text"/>
-        <button>Save</button>
-      </div>
-    </li>
-    <li class="list-setting">
-      <div>
+        <div>
+          <input id="list-name-input" v-model="localName" type="text"/>
+          <button @click="$emit('update-list', { ...list, name: localName })">Save</button>
+        </div>
+      </li>
+      <li class="list-setting-row">
         <label for="make-list-public">Make list public</label>
-        <input id="make-list-public" :checked="listSettings.isPublic" type="checkbox"/>
-      </div>
-    </li>
-    <li class="list-setting collaborator-list">
-      <span>Collaborators</span>
-      <details>
-        <summary>Permission levels</summary>
+        <input id="make-list-public" :checked="list.is_public" type="checkbox"
+               @change="$emit('update-list', { ...list, is_public: ($event.target as HTMLInputElement).checked })"/>
+      </li>
+      <li class="list-setting collaborator-list">
+        <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.
+          <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>
+          </ul>
+        </details>
+
+        <ul class="collaborators">
+          <li v-for="collaborator in list.collaborators" :key="collaborator.id">
+            <span>{{ collaborator.username }}</span>
+            <select v-model="collaborator.role">
+              <option
+                  v-for="role in availableRoles"
+                  :value="role.name"
+              >
+                {{ role.name }}
+              </option>
+            </select>
           </li>
         </ul>
-      </details>
-
-      <ul class="collaborators">
-        <li v-for="collaborator in listSettings.collaborators" :key="collaborator.id">
-          <span>{{ collaborator.name }}</span>
-          <select v-model="collaborator.role">
-            <option
-                v-for="role in listSettings.roles"
-                :value="role.id"
-            >
-              {{ role.name }}
-            </option>
-          </select>
-        </li>
-      </ul>
-    </li>
-    <li class="list-setting">
-      <label for="invite-collaborators-input">Invite Collaborators</label>
-      <textarea name="invite-collaborators-input" type="text"></textarea>
-    </li>
-    <li class="list-setting">
-      <label for="delete-list-button">Delete MovieList</label>
-      <button name="delete-list-button">Delete</button>
-    </li>
-  </ul>
+      </li>
+      <li class="list-setting">
+        <form class="list-setting" @submit.prevent="sendInvites">
+          <label for="invite-collaborators-input">Invite Collaborators</label>
+          <textarea v-model="collaboratorInvites" name="invite-collaborators-input" type="text"></textarea>
+          <button>Send Invites</button>
+          <span v-if="responseMessage">{{ responseMessage }}</span>
+        </form>
+      </li>
+      <li class="list-setting">
+        <label for="delete-list-button">Delete MovieList</label>
+        <button name="delete-list-button" @click="deleteList">Delete</button>
+      </li>
+    </ul>
+  </Card>
 </template>
 
 <style scoped>
+.back-to-list:hover {
+  text-decoration: underline;
+}
+
 .collaborator-list {
   gap: 1rem;
 }
@@ -101,10 +133,15 @@ const listSettings: MovieListSettings = {
   gap: 1rem;
 }
 
+.list-setting-row {
+  display: flex;
+  gap: 1rem;
+}
+
 .settings-header {
   display: flex;
   justify-content: space-between;
-  padding: 1rem 0;
+  padding-bottom: 1rem;
   cursor: pointer;
 }
 
@@ -121,7 +158,7 @@ const listSettings: MovieListSettings = {
 
 .settings-list > li {
   display: flex;
-  border: gray 1px solid;
+  border: rgba(0, 0, 0, 0.2) 1px solid;
   padding: 1rem;
 }
 
diff --git a/app/components/movie-list.vue b/app/components/movie-list.vue
index 883533e..3c04303 100644
--- a/app/components/movie-list.vue
+++ b/app/components/movie-list.vue
@@ -16,12 +16,11 @@ const emit = defineEmits<{
   'add-movie': []
 }>()
 
-const filteredMovies = ref<Movie[]>(props.movies);
 const searchQuery = ref('');
 const imageErrors = ref<Set<number>>(new Set());
 const sortMenuOpen = ref(false);
 const sortMenuRef = ref<HTMLElement | null>(null);
-const currentSort = ref<SortOption | null>(null);
+const currentSort = ref<SortOption>({field: 'title', direction: 'asc'});
 
 const sortMovies = (movies: Movie[]): Movie[] => {
   if (!currentSort.value) return movies;
@@ -42,6 +41,8 @@ const sortMovies = (movies: Movie[]): Movie[] => {
   });
 }
 
+const filteredMovies = ref<Movie[]>(sortMovies(props.movies));
+
 const applySort = (field: SortField, direction: SortDirection) => {
   currentSort.value = {field, direction};
   filteredMovies.value = sortMovies(filteredMovies.value);
@@ -192,7 +193,8 @@ const isSortActive = (field: SortField, direction: SortDirection): boolean => {
 
 .movie-list {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(max(140px, 20%), 1fr));
+  /*grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));*/
+  grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
   gap: 1rem;
 }
 
@@ -212,6 +214,7 @@ const isSortActive = (field: SortField, direction: SortDirection): boolean => {
   object-fit: fill;
   width: 100%;
   height: 100%;
+  max-height: 25rem;
 }
 
 .movie img.movie-poster-error {
diff --git a/app/components/panels/movie-details.vue b/app/components/panels/movie-details.vue
index 320162e..9938156 100644
--- a/app/components/panels/movie-details.vue
+++ b/app/components/panels/movie-details.vue
@@ -10,13 +10,12 @@ const props = defineProps<{
 const emit = defineEmits(['remove-movie']);
 
 const criticScores = computed(() => {
-  const scores = JSON.parse(props.selectedMovie.critic_scores)
-  const parsedScores: MovieCriticScore[] = []
-  scores.map((score: MovieCriticScore) => {
-    parsedScores.push({Value: score.Value, Source: score.Source})
+  const scores: MovieCriticScore[] = []
+  props.selectedMovie.critic_scores.map((score: MovieCriticScore) => {
+    scores.push({Value: score.Value, Source: score.Source})
   })
 
-  return parsedScores
+  return scores
 })
 </script>
 
@@ -49,10 +48,11 @@ const criticScores = computed(() => {
       </div>
       <div class="movie-detail">
         <dt class="detail-title">Critic Scores:</dt>
-        <div v-for="score in criticScores" :key="score.Source">
+        <div v-for="score in criticScores" v-if="criticScores && criticScores.length > 0" :key="score.Source">
           <dd class="critic-score-source">{{ score.Source }}</dd>
           <dd>{{ score.Value }}</dd>
         </div>
+        <dd v-else>No critic scores available</dd>
       </div>
     </dl>
 
@@ -84,7 +84,8 @@ dt {
 }
 
 .movie-details img {
-  max-width: 15em;
+  max-width: 20em;
+  max-height: 25em;
   margin: 2rem auto;
 }
 
@@ -96,6 +97,7 @@ dt {
   display: flex;
   flex-direction: column;
   gap: 1rem;
+  margin: 2em 0;
 }
 
 
diff --git a/app/components/panels/movie-search.vue b/app/components/panels/movie-search.vue
index f53e4d0..58fa3c5 100644
--- a/app/components/panels/movie-search.vue
+++ b/app/components/panels/movie-search.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type {MovieSearchResult} from "~/types/movie-search-results";
 import type {MovieList} from "~/types/movie-list";
+import type {ResourceResponse} from "~/types/api";
 
 const emit = defineEmits(['add-movie']);
 const props = defineProps<{
@@ -21,13 +22,13 @@ const searchMovies = () => {
 }
 
 const addMovieToList = (movie: MovieSearchResult) => {
-  $api<MovieList>(`/api/movielists/${props.movieListId}/movies`, {
+  $api<ResourceResponse<MovieList>>(`/api/movielists/${props.movieListId}/movies`, {
     body: {
       movie: movie
     },
     method: "POST"
   }).then((list) => {
-    emit('add-movie', list);
+    emit('add-movie', list.data);
   }).catch((error) => {
     alert(error.message)
   });
@@ -89,7 +90,7 @@ const addMovieToList = (movie: MovieSearchResult) => {
 
 .movie-result img {
   height: 10rem;
-  max-width: 7rem;
+  width: 10rem;
 }
 
 </style>
\ No newline at end of file
diff --git a/app/composables/$api.ts b/app/composables/$api.ts
index 1145da3..abfd25b 100644
--- a/app/composables/$api.ts
+++ b/app/composables/$api.ts
@@ -13,8 +13,8 @@ export const $api = <T>(
             ...(xsrfToken.value ? {'X-XSRF-TOKEN': xsrfToken.value} : {}),
         },
         onResponseError({response}) {
-            if (response.status === 401) {
-                navigateTo('/auth/login')
+            if (response.status === 401 || response.status === 419) {
+                useAuth().logout()
             }
         },
         ...options,
diff --git a/app/composables/useAuth.ts b/app/composables/useAuth.ts
index d362854..222f0ca 100644
--- a/app/composables/useAuth.ts
+++ b/app/composables/useAuth.ts
@@ -10,10 +10,54 @@ export const useAuth = () => {
         await navigateTo('/')
     }
 
-    const logout = async () => {
-        await $api('/api/logout', {method: 'POST'})
+    const register = async (email: string, username: string) => {
+        await $fetch('/sanctum/csrf-cookie', {
+            baseURL: config.public.apiBase,
+            credentials: 'include',
+        })
+        await $api('/api/register', {method: 'POST', body: {email, username}})
         await navigateTo('/auth/login')
     }
 
-    return {login, logout}
+    const resetPassword = async (password: string, passwordConfirmation: string, token: string, email: string) => {
+        await $fetch('/sanctum/csrf-cookie', {
+            baseURL: config.public.apiBase,
+            credentials: 'include',
+        })
+        await $api('/api/reset-password', {
+            method: 'POST',
+            body: {
+                password,
+                password_confirmation: passwordConfirmation,
+                token,
+                email
+            },
+            onResponseError: (context) => {
+                if (context.response.status === 401) {
+                    throw new Error('TOKEN_EXPIRED')
+                }
+            }
+        })
+        await navigateTo('/lists')
+    }
+
+    const xsrfToken = useCookie('XSRF-TOKEN')
+
+    const logout = async () => {
+        await $fetch('/api/logout', {
+            baseURL: config.public.apiBase,
+            method: 'POST',
+            credentials: 'include',
+            headers: {
+                ...(xsrfToken.value ? {'X-XSRF-TOKEN': xsrfToken.value} : {}),
+            },
+        }).catch(() => {
+            alert("Failed to logout. Please try again.")
+        })
+
+        useCookie('XSRF-TOKEN').value = ''
+        navigateTo('/auth/login')
+    }
+
+    return {login, register, resetPassword, logout}
 }
diff --git a/app/layouts/auth.vue b/app/layouts/auth.vue
index 864a55c..bf617ce 100644
--- a/app/layouts/auth.vue
+++ b/app/layouts/auth.vue
@@ -10,6 +10,7 @@
   justify-content: center;
   align-items: center;
   min-height: 100vh;
-  padding: 1rem;
+  flex-direction: column;
+  gap: 3rem;
 }
 </style>
diff --git a/app/middleware/auth.global.ts b/app/middleware/auth.global.ts
index 3212b86..b329c1f 100644
--- a/app/middleware/auth.global.ts
+++ b/app/middleware/auth.global.ts
@@ -1,6 +1,12 @@
 export default defineNuxtRouteMiddleware((to) => {
-    const publicRoutes = ['/auth/login']
-    if (publicRoutes.includes(to.path)) return
+    const publicRoutes = [
+        'auth-login',
+        'auth-register',
+        'auth-reset-password',
+        'invitations-token-accept',
+        'invitations-token-decline',
+    ]
+    if (publicRoutes.includes(String(to.name))) return
 
     const xsrfToken = useCookie('XSRF-TOKEN')
     if (!xsrfToken.value) {
diff --git a/app/pages/account.vue b/app/pages/account.vue
index de2f29c..4fb9e74 100644
--- a/app/pages/account.vue
+++ b/app/pages/account.vue
@@ -6,22 +6,24 @@ import ProfileForm from "~/components/forms/profile-form.vue";
 </script>
 
 <template>
-  <PageTitle title="Account Settings"/>
+  <div>
+    <PageTitle title="Account Settings"/>
 
-  <div class="password-settings settings-section">
-    <h2>Reset Password</h2>
-    <PasswordResetForm/>
+    <div class="password-settings settings-section">
+      <h2>Reset Password</h2>
+      <PasswordResetForm/>
 
 
-  </div>
-
-  <div class="profile-settings settings-section">
-    <div class="profile-header">
-      <h2>Profile</h2>
-      <span class="public-profile-link">View Public Profile</span>
     </div>
 
-    <ProfileForm/>
+    <div class="profile-settings settings-section">
+      <div class="profile-header">
+        <h2>Profile</h2>
+        <span class="public-profile-link">View Public Profile</span>
+      </div>
+
+      <ProfileForm/>
+    </div>
   </div>
 
 </template>
diff --git a/app/pages/auth/login.vue b/app/pages/auth/login.vue
index 6f800ce..42ca645 100644
--- a/app/pages/auth/login.vue
+++ b/app/pages/auth/login.vue
@@ -7,10 +7,21 @@ definePageMeta({
 </script>
 
 <template>
-  <login-form/>
+  <div class="content">
+    <h1>Log in</h1>
+    <login-form/>
+  </div>
 
 </template>
 
 <style scoped>
+.content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  gap: 2rem;
+}
 
 </style>
\ No newline at end of file
diff --git a/app/pages/auth/register.vue b/app/pages/auth/register.vue
new file mode 100644
index 0000000..e6f22ec
--- /dev/null
+++ b/app/pages/auth/register.vue
@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+
+import RegistrationForm from "~/components/forms/auth/registration-form.vue";
+
+const showForm = ref(true);
+
+definePageMeta({
+  layout: 'auth'
+})
+
+const onRegistered = () => {
+  showForm.value = false;
+}
+</script>
+
+<template>
+  <div class="content">
+    <h1>Register</h1>
+    <registration-form v-if="showForm" @registered="onRegistered"/>
+    <div v-else>Registration successful! Check your email to set your password and log in.</div>
+  </div>
+
+</template>
+
+<style scoped>
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+</style>
\ No newline at end of file
diff --git a/app/pages/auth/reset-password/[token].vue b/app/pages/auth/reset-password/[token].vue
new file mode 100644
index 0000000..35c34f5
--- /dev/null
+++ b/app/pages/auth/reset-password/[token].vue
@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import NewPasswordForm from "~/components/forms/auth/new-password-form.vue";
+
+definePageMeta({
+  layout: 'auth'
+})
+
+const route = useRoute();
+
+const passwordResetToken = route.params.token as string;
+const email = route.query.email as string;
+</script>
+
+<template>
+  <div class="content">
+    <h1>Reset Your Password</h1>
+    <new-password-form :email="email" :token="passwordResetToken"/>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 100vh;
+  gap: 2rem;
+}
+
+</style>
\ No newline at end of file
diff --git a/app/pages/index.vue b/app/pages/index.vue
index b00cc92..86101b4 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -6,9 +6,8 @@ const welcomeMessage = computed(() => `Welcome, ${user}!`)
 </script>
 
 <template>
-  <PageTitle :title="welcomeMessage"/>
-
   <div class="content">
+    <PageTitle :title="welcomeMessage"/>
     <div>
       <h2>Next up</h2>
       <span>Nothing Scheduled :(</span>
diff --git a/app/pages/invitations/[token]/accept.vue b/app/pages/invitations/[token]/accept.vue
new file mode 100644
index 0000000..c8bcafc
--- /dev/null
+++ b/app/pages/invitations/[token]/accept.vue
@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+
+const route = useRoute();
+
+const token = route.params.token as string;
+let isAuthorized = ref(false);
+let isProcessed = ref(false);
+let failed = ref(false);
+
+enum InviteStatusEnum {
+  PENDING = "pending",
+  ACCEPTED = "accepted",
+  DECLINED = "declined",
+  NOT_FOUND = "not_found",
+  FAILED = "failed",
+}
+
+type InviteStatus = {
+  message: string
+  status: InviteStatusEnum
+}
+
+// check if the email from the invite has an existing user
+const acceptInvitation = () => {
+  $api<InviteStatus>(`/api/invitations/${token}/accept`, {
+    method: "GET",
+    onResponseError({response}) {
+      if (response.status === 401) {
+        isAuthorized.value = false
+        isProcessed.value = true
+        return;
+      }
+
+      failed.value = true;
+      return;
+    }
+  }).then((invitationStatus) => {
+    navigateTo('/lists')
+  })
+}
+
+acceptInvitation();
+</script>
+
+<template>
+
+  <div v-if="!isAuthorized && !isProcessed  && !failed">
+    <span>Processing...</span>
+  </div>
+  <div v-else-if="!isAuthorized && isProcessed && !failed">
+    <span>You need to <NuxtLink to="/auth/login">log in</NuxtLink> or <NuxtLink
+        to="/auth/register">create an account</NuxtLink></span>
+  </div>
+
+  <div v-show="failed">
+    <span>An error occurred while accepting the request.</span>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/app/pages/invitations/[token]/decline.vue b/app/pages/invitations/[token]/decline.vue
new file mode 100644
index 0000000..27324a8
--- /dev/null
+++ b/app/pages/invitations/[token]/decline.vue
@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/app/pages/lists/[id].vue b/app/pages/lists/[id].vue
index ad92ee6..6a905bf 100644
--- a/app/pages/lists/[id].vue
+++ b/app/pages/lists/[id].vue
@@ -4,6 +4,7 @@ import {type Movie} from "~/types/movie";
 import {type MovieList} from "~/types/movie-list";
 import MovieDetails from "~/components/panels/movie-details.vue";
 import MovieSearch from "~/components/panels/movie-search.vue";
+import type {ResourceResponse} from "~/types/api";
 
 const route = useRoute();
 
@@ -15,65 +16,78 @@ const toggleMovieSearch = () => movieSearchActive.value = !movieSearchActive.val
 
 const selectedMovie = ref<Movie | null>(null);
 
-const {data: list} = await useApiData<MovieList>(`/api/movielists/${movieListId}`);
+const {data: listResponse} = await useApiData<ResourceResponse<MovieList>>(`/api/movielists/${movieListId}`, {
+  onResponseError: (error) => {
+    if (error.response.status === 401) {
+      navigateTo('/auth/login')
+    }
+
+    if (error.response.status === 403 || error.response.status === 404) {
+      navigateTo('/lists')
+    }
+  }
+});
+
+const refreshList = (updatedList: MovieList) => {
+  listResponse.value = {data: updatedList};
+}
 
 const updateList = (updatedList: MovieList) => {
-  list.value = updatedList;
+  $api<ResourceResponse<MovieList>>(`/api/movielists/${route.params.id}`, {
+    method: "PUT",
+    body: updatedList
+  }).then((response) => {
+    listResponse.value = {data: response.data};
+  }).catch((error) => {
+    alert(error.message)
+  });
+
 }
 
 const removeMovieFromList = (movieId: number) => {
-  $api<MovieList>(`/api/movielists/${list.value.id}/movies/${movieId}`, {
+  $api<ResourceResponse<MovieList>>(`/api/movielists/${listResponse.value.data.id}/movies/${movieId}`, {
     method: "DELETE"
-  }).then((data) => {
+  }).then((response) => {
     selectedMovie.value = null;
-    list.value = data;
+    listResponse.value.data = response.data;
   }).catch((error) => {
     alert(error.message)
   });
 }
-///const list: MovieList = {
-///  id: 1,
-///  name: 'MovieList Name',
-///  isPublic: true,
-///  listSettings: {
-///    listName: 'MovieList Name',
-///    isPublic: true,
-///    collaborators: [],
-///    roles: []
-///  }
-///};
 
-const movies: Movie[] = []
 </script>
 
 <template>
-  <div v-if="list">
+  <div v-if="listResponse" class="content">
     <div class="page-header">
-      <PageTitle :title="list.name"/>
+      <PageTitle :title="listResponse.data.name"/>
       <Icon class="settings-icon" name="solar:settings-bold" @click="toggleSettings"/>
     </div>
 
     <ListSettings
         v-if="settingsActive"
-        :list="list"
-        v-on:back-to-list="toggleSettings"
+        :list="listResponse.data"
+        @back-to-list="toggleSettings"
+        @update-list="updateList"
     />
 
     <MovieList
         v-else
-        :movies="list.movies"
+        :movies="listResponse.data.movies"
         @movie-clicked="selectedMovie = $event"
         @add-movie="toggleMovieSearch"
     />
   </div>
 
+  <!-- MOVIE DETAILS SLIDEOUT -->
   <SlideoutPanel :open="!!selectedMovie" @close="selectedMovie = null">
     <MovieDetails v-if="selectedMovie" :selectedMovie="selectedMovie" @remove-movie="removeMovieFromList"/>
   </SlideoutPanel>
 
+  <!-- MOVIE SEARCH SLIDEOUT -->
   <SlideoutPanel :open="movieSearchActive"
                  @close="movieSearchActive = false">
-    <MovieSearch v-if="movieListId" :movie-list-id="movieListId" @add-movie="updateList"/>
+    <MovieSearch v-if="movieListId" :movie-list-id="movieListId" @add-movie="refreshList"/>
   </SlideoutPanel>
 
 </template>
diff --git a/app/pages/lists/index.vue b/app/pages/lists/index.vue
index 5b62bb8..0e66185 100644
--- a/app/pages/lists/index.vue
+++ b/app/pages/lists/index.vue
@@ -2,9 +2,10 @@
 
 import PageTitle from "~/components/common/page-title.vue";
 import CreateListForm from "~/components/forms/create-list-form.vue";
-import type {MovieList} from "~/types/movie-list";
+import Card from "~/components/common/card.vue";
+import type {MovieListGroup} from "~/types/movie-list-group";
 
-const {data: lists, refresh, error} = await useApiData<MovieList[]>("/api/movielists")
+const {data: listGroup, refresh, error} = await useApiData<MovieListGroup>("/api/movielists")
 if (error.value) {
   alert(error.value)
 }
@@ -16,54 +17,62 @@ const refreshLists = () => {
 </script>
 
 <template>
-  <PageTitle title="Lists"/>
-
   <div class="content">
-    <CreateListForm @refreshLists="refreshLists"/>
+    <PageTitle title="Lists"/>
+    <Card class="card">
+      <CreateListForm @refreshLists="refreshLists"/>
 
-    <div class="w-full flex flex-col gap-5">
-      <h2 class="text-2xl font-bold">Your Lists</h2>
-      <ul class="movie-list">
-        <li v-for="list in lists"
-            :key="list.id"
-        >
-          <NuxtLink :to="`/lists/${list.id}`" class="movielist-details">
-            <span>{{ list.name }}</span>
-            <span>{{ list.is_public ? 'Public' : 'Private' }}</span>
-          </NuxtLink>
-        </li>
-      </ul>
-    </div>
+      <div class="w-full flex flex-col gap-5">
+        <h2 class="text-2xl font-bold">Your Lists</h2>
+        <span v-if="!listGroup?.movie_lists?.length" class="not-found-message">No lists found.</span>
+        <ul v-else class="movie-list">
+          <li v-for="list in listGroup?.movie_lists"
+              :key="list.id"
+          >
+            <NuxtLink :to="`/lists/${list.id}`" class="movielist-details">
+              <span>{{ list.name }}</span>
+              <span>{{ list.is_public ? 'Public' : 'Private' }}</span>
+            </NuxtLink>
+          </li>
+        </ul>
+      </div>
 
-    <!-- <div class="w-full flex flex-col gap-5">
-      <h2 class="text-2xl font-bold">Shared With You</h2>
-      <ul class="w-full flex flex-col gap-3">
-        <li class="flex justify-between items-center p-4 bg-gray-700/50 rounded-lg hover:bg-gray-600/50 transition-colors">
-          <NuxtLink to="lists/2">Bob's MovieList</NuxtLink>
-        </li>
-      </ul>
-    </div>
-    -->
+      <div class="w-full flex flex-col gap-5">
+        <h2 class="text-2xl font-bold">Shared With You</h2>
+        <span v-if="!listGroup?.shared_lists?.length" class="not-found-message">No shared lists found.</span>
+        <ul v-else class="movie-list">
+          <li v-for="list in listGroup?.shared_lists"
+              :key="list.id"
+          >
+            <NuxtLink :to="`/lists/${list.id}`" class="movielist-details">
+              <span>{{ list.name }}</span>
+              <span>{{ list.is_public ? 'Public' : 'Private' }}</span>
+            </NuxtLink>
+          </li>
+        </ul>
+      </div>
+    </Card>
   </div>
 
 </template>
 
 <style scoped>
-.content {
+.card {
   display: flex;
   flex-direction: column;
-  gap: 2rem;
+  gap: 1rem;
 }
 
 .movie-list {
   display: grid;
-  gap: 1rem;
 }
 
 .movie-list li {
   display: flex;
   justify-content: space-between;
-  padding: 1rem 0;
+  margin: 0 -1rem;
+  border-radius: 0.5rem;
+  padding: 1rem;
 }
 
 .movielist-details {
@@ -75,8 +84,11 @@ const refreshLists = () => {
 
 .movie-list li:hover {
   background-color: #eee;
-  padding: 1rem 0;
-  border-radius: 0.5rem;
+}
+
+.not-found-message {
+  display: block;
+  padding: 1em 0;
 }
 
 </style>
\ No newline at end of file
diff --git a/app/types/api.ts b/app/types/api.ts
new file mode 100644
index 0000000..ac7991c
--- /dev/null
+++ b/app/types/api.ts
@@ -0,0 +1,2 @@
+export type ResourceResponse<T> = { data: T }
+//export type PaginatedResponse<T> = { data: T[]; meta: PaginationMeta; links: Links }
\ No newline at end of file
diff --git a/app/types/collaborator.ts b/app/types/collaborator.ts
deleted file mode 100644
index 76415b1..0000000
--- a/app/types/collaborator.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export type Collaborator = {
-    id: number,
-    name: string
-    role: number
-}
-
diff --git a/app/types/movie-list-group.ts b/app/types/movie-list-group.ts
new file mode 100644
index 0000000..a866edd
--- /dev/null
+++ b/app/types/movie-list-group.ts
@@ -0,0 +1,7 @@
+import type {MovieList} from "~/types/movie-list";
+
+export type MovieListGroup = {
+    movie_lists: MovieList[]
+    shared_lists: MovieList[]
+}
+
diff --git a/app/types/movie-list-settings.ts b/app/types/movie-list-settings.ts
index 4263788..98f6b95 100644
--- a/app/types/movie-list-settings.ts
+++ b/app/types/movie-list-settings.ts
@@ -1,9 +1,9 @@
-import type {Collaborator} from "~/types/collaborator";
+import type {User} from "~/types/user";
 import type {Role} from "~/types/role";
 
 export type MovieListSettings = {
     listName: string,
     isPublic: boolean,
-    collaborators: Collaborator[],
+    collaborators: User[],
     roles: Role[]
 }
diff --git a/app/types/movie-list.ts b/app/types/movie-list.ts
index ce4f3f8..8f59f79 100644
--- a/app/types/movie-list.ts
+++ b/app/types/movie-list.ts
@@ -1,11 +1,13 @@
-import {type MovieListSettings} from "~/types/movie-list-settings";
 import type {Movie} from "~/types/movie";
+import type {User} from "~/types/user";
 
 export type MovieList = {
-    id: number,
+    id: number
     name: string
     is_public: boolean
-    movieListSettings: MovieListSettings
+    owner: string
+    role: string
     movies: Movie[]
+    collaborators: User[]
 }
 
diff --git a/app/types/movie.ts b/app/types/movie.ts
index 220f57c..3cc1e6e 100644
--- a/app/types/movie.ts
+++ b/app/types/movie.ts
@@ -1,5 +1,7 @@
+import type {MovieCriticScore} from "~/types/movie-critic-score";
+
 export type Movie = {
-    id: number,
+    id: number
     title: string
     year: number
     imdb_id: string
@@ -8,7 +10,7 @@ export type Movie = {
     plot: string
     genre: string
     mpaa_rating: string
-    critic_scores: string
+    critic_scores: Array<MovieCriticScore>
     poster: string
     added_by: number
 }
diff --git a/app/types/user.ts b/app/types/user.ts
new file mode 100644
index 0000000..d7b6cb9
--- /dev/null
+++ b/app/types/user.ts
@@ -0,0 +1,7 @@
+export type User = {
+    id: number,
+    username: string
+    email: string
+    role: number
+}
+