hooked up all items on the list settings section
This commit is contained in:
parent
53df349d9f
commit
91173021b2
32 changed files with 578 additions and 178 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
32
app/pages/auth/register.vue
Normal file
32
app/pages/auth/register.vue
Normal file
|
|
@ -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>
|
||||
30
app/pages/auth/reset-password/[token].vue
Normal file
30
app/pages/auth/reset-password/[token].vue
Normal file
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
62
app/pages/invitations/[token]/accept.vue
Normal file
62
app/pages/invitations/[token]/accept.vue
Normal file
|
|
@ -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>
|
||||
11
app/pages/invitations/[token]/decline.vue
Normal file
11
app/pages/invitations/[token]/decline.vue
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<script lang="ts" setup>
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue