KevinMidboe/seasoned
1
0
Fork 0
Code Issues 12 Pull Requests 1 Packages Projects Releases 1 Wiki Activity

Ugraded all pages to vue 3 & typescript

Browse Source
This commit is contained in:
Kevin
2022-08-06 16:10:37 +02:00
parent d12dfc3c8e
commit b7e7fe9c55
10 changed files with 623 additions and 737 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
src/pages/404.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<section class="not-found" :style="background"> <section class="not-found" :style="backgroundImageCSS">
<h1 class="not-found__title">Page Not Found</h1> <h1 class="not-found__title">Page Not Found</h1>
<seasoned-button class="button" @click="goBack"> <seasoned-button class="button" @click="goBack">
go back to previous page go back to previous page
@@ -9,76 +9,68 @@
</div> </div>
</template> </template>
<script> <script setup lang="ts">
import { mapActions, mapGetters } from "vuex"; import { useStore } from "vuex";
import SeasonedButton from "@/components/ui/SeasonedButton"; import SeasonedButton from "@/components/ui/SeasonedButton.vue";
export default { const backgroundImageCSS =
components: { SeasonedButton }, 'background-image: url("/assets/pulp-fiction.jpg")';
data() {
return { const store = useStore();
background: 'background-image: url("/assets/pulp-fiction.jpg")'
}; if (store.getters["popup/isOpen"]) {
}, store.dispatch("popup/close");
computed: { }
...mapGetters("popup", ["isOpen"])
}, function goBack() {
methods: { window.history.go(-2);
...mapActions("popup", ["close"]),
goBack() {
this.$router.go(-1);
}
},
created() {
if (this.isOpen) this.close();
} }
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "src/scss/variables"; @import "src/scss/variables";
@import "src/scss/media-queries"; @import "src/scss/media-queries";
.button { .button {
font-size: 1.2rem; font-size: 1.2rem;
z-index: 10; z-index: 10;
@include mobile { @include mobile {
font-size: 1rem; font-size: 1rem;
width: content; width: content;
} }
} }
.not-found { .not-found {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
height: calc(100vh - var(--header-size)); height: calc(100vh - var(--header-size));
background-size: cover; background-size: cover;
background-position: 50% 50%; background-position: 50% 50%;
background-repeat: no-repeat no-repeat; background-repeat: no-repeat no-repeat;
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
height: calc(100vh - var(--header-size)); height: calc(100vh - var(--header-size));
width: 100%; width: 100%;
pointer-events: none; pointer-events: none;
background: var(--background-40); background: var(--background-40);
} }
&__title { &__title {
font-size: 2.5rem; font-size: 2.5rem;
font-weight: 500; font-weight: 500;
padding: 0 1rem; padding: 0 1rem;
color: var(--text-color); color: var(--text-color);
position: relative; position: relative;
background-color: var(--background-90); background-color: var(--background-90);
@include tablet-min { @include tablet-min {
font-size: 3.5rem; font-size: 3.5rem;
}
} }
} }
}
</style> </style>

54
src/pages/Home.vue
View File

@@ -12,36 +12,28 @@
</section> </section>
</template> </template>
<script> <script setup lang="ts">
import LandingBanner from "@/components/LandingBanner"; import LandingBanner from "@/components/LandingBanner.vue";
import ResultsSection from "@/components/ResultsSection"; import ResultsSection from "@/components/ResultsSection.vue";
import { getRequests, getTmdbMovieListByName } from "@/api"; import { getRequests, getTmdbMovieListByName } from "../api";
import type ISection from "../interfaces/ISection";
export default { const lists: ISection[] = [
name: "home", {
components: { LandingBanner, ResultsSection }, title: "Requests",
data() { apiFunction: getRequests
return { },
imageFile: "/pulp-fiction.jpg", {
lists: [ title: "Now playing",
{ apiFunction: () => getTmdbMovieListByName("now_playing")
title: "Requests", },
apiFunction: getRequests {
}, title: "Upcoming",
{ apiFunction: () => getTmdbMovieListByName("upcoming")
title: "Now playing", },
apiFunction: () => getTmdbMovieListByName("now_playing") {
}, title: "Popular",
{ apiFunction: () => getTmdbMovieListByName("popular")
title: "Upcoming", }
apiFunction: () => getTmdbMovieListByName("upcoming") ];
},
{
title: "Popular",
apiFunction: () => getTmdbMovieListByName("popular")
}
]
};
}
};
</script> </script>

44
src/pages/ListPage.vue
View File

@@ -1,32 +1,30 @@
<template> <template>
<ResultsSection :title="listName" :apiFunction="getTmdbMovieListByName" /> <ResultsSection :title="listName" :apiFunction="_getTmdbMovieListByName" />
</template> </template>
<script> <script setup lang="ts">
import ResultsSection from "@/components/ResultsSection"; import { ref } from "vue";
import { getTmdbMovieListByName } from "@/api"; import type { Ref } from "vue";
import { useRoute } from "vue-router";
import ResultsSection from "@/components/ResultsSection.vue";
import { getTmdbMovieListByName } from "../api";
export default { const route = useRoute();
components: { ResultsSection }, const listName: Ref<string | string[]> = ref(
computed: { route?.params?.name || "List page"
listName() { );
return this.$route.params.name;
} function _getTmdbMovieListByName(page: number) {
}, return getTmdbMovieListByName(listName.value?.toString(), page);
methods: {
getTmdbMovieListByName(page) {
return getTmdbMovieListByName(this.listName, page);
}
} }
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.fullwidth-button { .fullwidth-button {
width: 100%; width: 100%;
margin: 1rem 0; margin: 1rem 0;
padding-bottom: 2rem; padding-bottom: 2rem;
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
</style> </style>

236
src/pages/ProfilePage.vue
View File

@@ -5,10 +5,10 @@
<h2 class="profile__title">{{ emoji }} Welcome {{ username }}</h2> <h2 class="profile__title">{{ emoji }} Welcome {{ username }}</h2>
<div class="button--group"> <div class="button--group">
<seasoned-button @click="toggleSettings">{{ <seasoned-button @click="toggleSettings" :active="showSettings">{{
showSettings ? "hide settings" : "show settings" showSettings ? "hide settings" : "show settings"
}}</seasoned-button> }}</seasoned-button>
<seasoned-button @click="toggleActivity">{{ <seasoned-button @click="toggleActivity" :active="showActivity">{{
showActivity ? "hide activity" : "show activity" showActivity ? "hide activity" : "show activity"
}}</seasoned-button> }}</seasoned-button>
@@ -20,7 +20,7 @@
<activity v-if="showActivity" /> <activity v-if="showActivity" />
<list-header title="User requests" :info="resultCount" /> <page-header title="Your requests" :info="resultCount" />
<results-list v-if="results" :results="results" /> <results-list v-if="results" :results="results" />
</div> </div>
@@ -35,147 +35,131 @@
</section> </section>
</template> </template>
<script> <script setup lang="ts">
import { mapGetters, mapActions } from "vuex"; import { ref, computed } from "vue";
import ListHeader from "@/components/ListHeader"; import { useStore } from "vuex";
import ResultsList from "@/components/ResultsList"; import PageHeader from "@/components/PageHeader.vue";
import Settings from "@/pages/SettingsPage"; import ResultsList from "@/components/ResultsList.vue";
import Activity from "@/pages/ActivityPage"; import Settings from "@/pages/SettingsPage.vue";
import SeasonedButton from "@/components/ui/SeasonedButton"; import Activity from "@/pages/ActivityPage.vue";
import SeasonedButton from "@/components/ui/SeasonedButton.vue";
import { getEmoji, getUserRequests, getSettings, logout } from "../api";
import type { Ref, ComputedRef } from "vue";
import type { ListResults } from "../interfaces/IList";
import { getEmoji, getUserRequests, getSettings, logout } from "@/api"; const emoji: Ref<string> = ref("");
const results: Ref<Array<ListResults>> = ref([]);
const totalResults: Ref<number> = ref(-1);
const showSettings: Ref<boolean> = ref();
const showActivity: Ref<boolean> = ref();
export default { const store = useStore();
components: { ListHeader, ResultsList, Settings, Activity, SeasonedButton },
data() {
return {
emoji: "",
results: undefined,
totalResults: undefined,
showSettings: false,
showActivity: false
};
},
computed: {
...mapGetters("user", ["loggedIn", "username", "settings"]),
resultCount() {
if (this.results === undefined) return;
const loadedResults = this.results.length; const loggedIn: Ref<boolean> = computed(() => store.getters["user/loggedIn"]);
const totalResults = this.totalResults < 10000 ? this.totalResults : "∞"; const username: Ref<string> = computed(() => store.getters["user/username"]);
return `${loadedResults} of ${totalResults} results`; const settings: Ref<object> = computed(() => store.getters["user/settings"]);
}
},
methods: {
...mapActions("user", ["logout", "setSettings"]),
toggleSettings() {
this.showSettings = this.showSettings ? false : true;
this.updateQueryParams("settings", this.showSettings); const resultCount: ComputedRef<number | string> = computed(() => {
}, const currentCount = results?.value?.length || 0;
updateQueryParams(key, value = false) { const totalCount = totalResults.value < 10000 ? totalResults.value : "∞";
const params = new URLSearchParams(window.location.search); return `${currentCount} of ${totalCount} results`;
if (params.has(key)) { });
params.delete(key);
}
if (value) { // Component loaded actions
params.append(key, value); getUserRequests().then(requestResults => {
} if (!requestResults?.results) return;
results.value = requestResults.results;
totalResults.value = requestResults.total_results;
});
window.history.replaceState( getEmoji().then(resp => (emoji.value = resp?.emoji));
{},
"search",
`${window.location.protocol}//${window.location.hostname}${
window.location.port ? `:${window.location.port}` : ""
}${window.location.pathname}${
params.toString().length ? `?${params}` : ""
}`
);
},
toggleActivity() {
this.showActivity = this.showActivity == true ? false : true;
this.updateQueryParams("activity", this.showActivity);
},
_logout() {
logout().then(() => {
this.logout();
this.$router.push("home");
});
}
},
created() {
if (!this.settings) {
getSettings().then(resp => {
const { settings } = resp;
if (settings) this.setSettings(settings);
});
}
if (this.loggedIn) { showSettings.value = window.location.toString().includes("settings=true");
this.showSettings = window.location.toString().includes("settings=true"); showActivity.value = window.location.toString().includes("activity=true");
this.showActivity = window.location.toString().includes("activity=true"); // Component loaded actions end
getUserRequests().then(results => { function toggleSettings() {
this.results = results.results; showSettings.value = !showSettings.value;
this.totalResults = results.total_results; updateQueryParams("settings", showSettings.value);
}); }
getEmoji().then(resp => { function toggleActivity() {
const { emoji } = resp; showActivity.value = !showActivity.value;
this.emoji = emoji; updateQueryParams("activity", showActivity.value);
}); }
}
function _logout() {
store.dispatch("user/logout");
}
function updateQueryParams(key, value = false) {
const params = new URLSearchParams(window.location.search);
if (params.has(key)) {
params.delete(key);
}
if (value) {
params.append(key, `${value}`);
}
window.history.replaceState(
{},
"search",
`${window.location.protocol}//${window.location.hostname}${
window.location.port ? `:${window.location.port}` : ""
}${window.location.pathname}${
params.toString().length ? `?${params}` : ""
}`
);
} }
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "src/scss/variables"; @import "src/scss/variables";
@import "src/scss/media-queries"; @import "src/scss/media-queries";
.button--group { .button--group {
display: flex;
}
// DUPLICATE CODE
.profile {
&__header {
display: flex; display: flex;
align-items: center; }
justify-content: space-between;
padding: 20px;
border-bottom: 1px solid $text-color-5;
@include mobile-only { // DUPLICATE CODE
flex-direction: column; .profile {
align-items: flex-start; &__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
border-bottom: 1px solid $text-color-5;
.button--group { @include mobile-only {
padding-top: 2rem; flex-direction: column;
align-items: flex-start;
.button--group {
padding-top: 2rem;
}
}
@include tablet-min {
padding: 29px 30px;
}
@include tablet-landscape-min {
padding: 29px 50px;
}
@include desktop-min {
padding: 29px 60px;
} }
} }
&__title {
@include tablet-min { margin: 0;
padding: 29px 30px; font-size: 16px;
} line-height: 16px;
@include tablet-landscape-min { color: $text-color;
padding: 29px 50px; font-weight: 300;
} @include tablet-min {
@include desktop-min { font-size: 18px;
padding: 29px 60px; line-height: 18px;
}
} }
} }
&__title {
margin: 0;
font-size: 16px;
line-height: 16px;
color: $text-color;
font-weight: 300;
@include tablet-min {
font-size: 18px;
line-height: 18px;
}
}
}
</style> </style>

217
src/pages/RegisterPage.vue
View File

@@ -2,146 +2,159 @@
<section> <section>
<h1>Register new user</h1> <h1>Register new user</h1>
<div class="form"> <form class="form" ref="formElement">
<seasoned-input <seasoned-input
ref="username"
placeholder="username" placeholder="username"
icon="Email" icon="Email"
type="email" type="email"
:value.sync="username" v-model="username"
@enter="submit" @keydown.enter="focusOnNextElement"
/> />
<seasoned-input <seasoned-input
placeholder="password" placeholder="password"
icon="Keyhole" icon="Keyhole"
type="password" type="password"
:value.sync="password" v-model="password"
@enter="submit" @keydown.enter="focusOnNextElement"
/> />
<seasoned-input <seasoned-input
placeholder="repeat password" placeholder="repeat password"
icon="Keyhole" icon="Keyhole"
type="password" type="password"
:value.sync="passwordRepeat" v-model="passwordRepeat"
@enter="submit" @keydown.enter="submit"
/> />
<seasoned-button @click="submit">Register</seasoned-button> <seasoned-button @click="submit">Register</seasoned-button>
</div> </form>
<router-link class="link" to="/signin" <router-link class="link" to="/signin"
>Have a user? Sign in here</router-link >Have a user? Sign in here</router-link
> >
<seasoned-messages :messages.sync="messages"></seasoned-messages> <seasoned-messages v-model:messages="messages"></seasoned-messages>
</section> </section>
</template> </template>
<script> <script setup lang="ts">
import { mapActions } from "vuex"; import { ref, onMounted } from "vue";
import { register } from "@/api"; import { useStore } from "vuex";
import SeasonedButton from "@/components/ui/SeasonedButton"; import { useRouter } from "vue-router";
import SeasonedInput from "@/components/ui/SeasonedInput"; import SeasonedButton from "@/components/ui/SeasonedButton.vue";
import SeasonedMessages from "@/components/ui/SeasonedMessages"; import SeasonedInput from "@/components/ui/SeasonedInput.vue";
import SeasonedMessages from "@/components/ui/SeasonedMessages.vue";
import { register } from "../api";
import { focusFirstFormInput, focusOnNextElement } from "../utils";
import type { Ref } from "vue";
import type IErrorMessage from "../interfaces/IErrorMessage";
export default { const username: Ref<string> = ref("");
components: { SeasonedButton, SeasonedInput, SeasonedMessages }, const password: Ref<string> = ref("");
data() { const passwordRepeat: Ref<string> = ref("");
return { const messages: Ref<IErrorMessage[]> = ref([]);
messages: [], const formElement: Ref<HTMLFormElement> = ref(null);
username: null,
password: null,
passwordRepeat: null
};
},
methods: {
...mapActions("user", ["login"]),
submit() {
this.messages = [];
let { username, password, passwordRepeat } = this;
if (username == null || username.length == 0) { const store = useStore();
this.messages.push({ type: "error", title: "Missing username" }); const router = useRouter();
return;
} else if (password == null || password.length == 0) { onMounted(() => focusFirstFormInput(formElement.value));
this.messages.push({ type: "error", title: "Missing password" });
return; function clearMessages() {
} else if (passwordRepeat == null || passwordRepeat.length == 0) { messages.value = [];
this.messages.push({ type: "error", title: "Missing repeat password" }); }
return;
} else if (passwordRepeat != password) { function addErrorMessage(message: string, title?: string) {
this.messages.push({ type: "error", title: "Passwords do not match" }); messages.value.push({ message, title, type: "error" });
return; }
function addWarningMessage(message: string, title?: string) {
messages.value.push({ message, title, type: "warning" });
}
function validate(): Promise<boolean> {
return new Promise((resolve, reject) => {
if (!username.value || username?.value?.length === 0) {
addWarningMessage("Missing username", "Validation error");
return reject();
} }
this.registerUser(username, password); if (!password.value || password?.value?.length === 0) {
}, addWarningMessage("Missing password", "Validation error");
registerUser(username, password) { return reject();
register(username, password) }
.then(data => {
if (data.success && this.login()) { if (passwordRepeat.value == null || passwordRepeat.value.length == 0) {
this.$router.push({ name: "profile" }); addWarningMessage("Missing repeat password", "Validation error");
} return reject();
}) }
.catch(error => { if (passwordRepeat != password) {
if (error.status === 401) { addWarningMessage("Passwords do not match", "Validation error");
this.messages.push({ return reject();
type: "error", }
title: "Access denied",
message: "Incorrect username or password" resolve(true);
}); });
} else { }
this.messages.push({
type: "error", function submit() {
title: "Unexpected error", clearMessages();
message: error.message validate().then(registerUser);
}); }
}
}); function registerUser() {
} register(username.value, password.value)
}, .then(data => {
mounted() { if (data?.success && store.dispatch("user/login")) {
try { router.push({ name: "profile" });
this.$refs.username.$el.getElementsByTagName("input")[0].focus(); }
} catch {} })
.catch(error => {
if (error?.status === 401) {
return addErrorMessage(
"Incorrect username or password",
"Access denied"
);
}
addErrorMessage(error?.message, "Unexpected error");
});
} }
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "src/scss/variables"; @import "src/scss/variables";
section { section {
padding: 1.3rem; padding: 1.3rem;
@include tablet-min { @include tablet-min {
padding: 4rem; padding: 4rem;
} }
.form > div, .form > div,
input, input,
button { button {
margin-bottom: 1rem; margin-bottom: 1rem;
&:last-child { &:last-child {
margin-bottom: 0px; margin-bottom: 0px;
}
}
h1 {
margin: 0;
line-height: 16px;
color: $text-color;
font-weight: 300;
margin-bottom: 20px;
text-transform: uppercase;
}
.link {
display: block;
width: max-content;
margin-top: 1rem;
} }
} }
h1 {
margin: 0;
line-height: 16px;
color: $text-color;
font-weight: 300;
margin-bottom: 20px;
text-transform: uppercase;
}
.link {
display: block;
width: max-content;
margin-top: 1rem;
}
}
</style> </style>

27
src/pages/RequestPage.vue
View File

@@ -2,24 +2,17 @@
<ResultsSection title="Requests" :apiFunction="getRequests" /> <ResultsSection title="Requests" :apiFunction="getRequests" />
</template> </template>
<script> <script setup lang="ts">
import ResultsSection from "@/components/ResultsSection"; import ResultsSection from "@/components/ResultsSection.vue";
import { getRequests } from "@/api"; import { getRequests } from "../api";
export default {
components: { ResultsSection },
methods: {
getRequests: getRequests
}
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.fullwidth-button { .fullwidth-button {
width: 100%; width: 100%;
margin: 1rem 0; margin: 1rem 0;
padding-bottom: 2rem; padding-bottom: 2rem;
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
</style> </style>

151
src/pages/SearchPage.vue
View File

@@ -5,93 +5,104 @@
<span>Search filter:</span> <span>Search filter:</span>
<toggle-button <toggle-button
:options="['All', 'movie', 'show', 'person']" :options="toggleOptions"
:selected="mediaType" v-model:selected="mediaType"
@change="toggleChanged" @change="toggleChanged"
/> />
</label> </label>
</div> </div>
<ResultsSection :title="title" :apiFunction="searchTmdb" /> <ResultsSection v-if="query" :title="title" :apiFunction="search" />
<h1 v-else class="no-results">No query found, please search above</h1>
</div> </div>
</template> </template>
<script> <script setup lang="ts">
import { searchTmdb } from "@/api"; import { ref, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { searchTmdb } from "../api";
import ResultsSection from "@/components/ResultsSection"; import ResultsSection from "@/components/ResultsSection.vue";
import ListHeader from "@/components/ListHeader"; import PageHeader from "@/components/PageHeader.vue";
import ToggleButton from "@/components/ui/ToggleButton"; import ToggleButton from "@/components/ui/ToggleButton.vue";
import type { Ref } from "vue";
import { ListTypes } from "../interfaces/IList";
export default { // interface ISearchParams {
components: { ResultsSection, ListHeader, ToggleButton }, // query: string;
data() { // page: string;
return { // adult: string;
query: "", // media_type: string;
page: 1, // }
adult: false,
mediaType: null
};
},
computed: {
title() {
return `Search results: ${this.query}`;
}
},
methods: {
searchTmdb(page = this.page) {
if (this.query && this.query.length)
return searchTmdb(this.query, page, this.adult, this.mediaType);
},
toggleChanged(value) {
if (["movie", "show", "person"].includes(value.toLowerCase())) {
this.mediaType = value.toLowerCase();
} else {
this.mediaType = null;
}
this.updateQueryParams();
},
updateQueryParams() {
const { query, page, adult, media_type } = this.$route.query;
this.$router.push({ const route = useRoute();
path: "search", const router = useRouter();
query: {
...this.$route.query,
media_type: this.mediaType
}
});
}
},
created() {
const { query, page, adult, media_type } = this.$route.query;
if (!query) { const toggleOptions = ["all", ...Object.values(ListTypes)];
// abort const query: Ref<string> = ref(null);
console.error("abort, no query"); const page: Ref<number> = ref(1);
} const adult: Ref<boolean> = ref(false);
this.query = decodeURIComponent(query); const mediaType: Ref<ListTypes> = ref(null);
this.page = page || 1;
this.adult = adult || this.adult;
this.mediaType = media_type || this.mediaType;
// this.searchTmdb(); const title = computed(() => `Search results: ${query.value}`);
const urlQuery = route.query;
if (urlQuery && urlQuery?.query) {
query.value = decodeURIComponent(urlQuery?.query?.toString());
page.value = Number(urlQuery?.page) || 1;
adult.value = Boolean(urlQuery?.adult) || adult.value;
mediaType.value = (urlQuery?.media_type as ListTypes) || mediaType.value;
}
let search = (
_page = page.value || 1,
_mediaType = mediaType.value || "all"
) => {
return searchTmdb(query.value, _page, adult.value, _mediaType);
};
function toggleChanged() {
updateQueryParams();
}
function updateQueryParams() {
const { query, page, adult, media_type } = route.query;
router.push({
path: "search",
query: {
...route.query,
media_type: mediaType.value
}
});
} }
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.filter { @import "src/scss/media-queries";
margin-top: 0.5rem;
margin-left: 1.25rem;
display: inline-flex;
flex-direction: column;
span { .filter {
font-size: 1.1rem; margin-top: 0.5rem;
line-height: 1; margin-left: 1.25rem;
margin: 0.5rem 0; display: inline-flex;
font-weight: 300; flex-direction: column;
span {
font-size: 1.1rem;
line-height: 1;
margin: 0.5rem 0;
font-weight: 300;
}
}
.no-results {
margin-top: 3rem;
display: block;
text-align: center;
@include mobile {
padding: 0 1rem;
font-size: 1.5rem;
}
} }
}
</style> </style>

262
src/pages/SettingsPage.vue
View File

@@ -1,227 +1,77 @@
<template> <template>
<section class="profile"> <section class="settings">
<div class="profile__content" v-if="loggedIn"> <link-plex-account @reload="reloadSettings" />
<section class="settings">
<h3 class="settings__header">Plex account</h3>
<div v-if="!plexId"> <hr class="setting__divider" />
<span class="settings__info"
>Sign in to your plex account to get information about recently
added movies and to see your watch history</span
>
<form class="form"> <change-password />
<seasoned-input
placeholder="plex username"
type="email"
:value.sync="plexUsername"
/>
<seasoned-input
placeholder="plex password"
type="password"
:value.sync="plexPassword"
@enter="authenticatePlex"
>
</seasoned-input>
<seasoned-button @click="authenticatePlex" <hr class="setting__divider" />
>link plex account</seasoned-button
>
</form>
</div>
<div v-else>
<span class="settings__info"
>Awesome, your account is already authenticated with plex! Enjoy
viewing your seasoned search history, plex watch history and
real-time torrent download progress.</span
>
<seasoned-button @click="unauthenticatePlex"
>un-link plex account</seasoned-button
>
</div>
<seasoned-messages :messages.sync="messages" />
<hr class="setting__divider" />
<h3 class="settings__header">Change password</h3>
<form class="form">
<seasoned-input
placeholder="new password"
icon="Keyhole"
type="password"
:value.sync="newPassword"
/>
<seasoned-input
placeholder="repeat new password"
icon="Keyhole"
type="password"
:value.sync="newPasswordRepeat"
/>
<seasoned-button @click="changePassword"
>change password</seasoned-button
>
</form>
<hr class="setting__divider" />
</section>
</div>
<section class="not-found" v-else>
<div class="not-found__content">
<h2 class="not-found__title">Authentication Request Failed</h2>
<router-link :to="{ name: 'signin' }" exact title="Sign in here">
<button class="not-found__button button">Sign In</button>
</router-link>
</div>
</section>
</section> </section>
</template> </template>
<script> <script setup lang="ts">
import { mapGetters, mapActions } from "vuex"; import { useStore } from "vuex";
import SeasonedInput from "@/components/ui/SeasonedInput"; import ChangePassword from "@/components/profile/ChangePassword.vue";
import SeasonedButton from "@/components/ui/SeasonedButton"; import LinkPlexAccount from "@/components/profile/LinkPlexAccount.vue";
import SeasonedMessages from "@/components/ui/SeasonedMessages"; import { getSettings } from "../api";
import { linkPlexAccount, unlinkPlexAccount, getSettings } from "@/api"; const store = useStore();
export default { function reloadSettings() {
components: { SeasonedInput, SeasonedButton, SeasonedMessages }, return getSettings().then(response => {
data() { const { settings } = response;
return { if (!settings) return;
messages: [],
plexUsername: null,
plexPassword: null,
newPassword: null,
newPasswordRepeat: null,
emoji: null
};
},
computed: {
...mapGetters("user", ["loggedIn", "plexId", "settings"])
},
methods: {
...mapActions("user", ["setSettings"]),
changePassword() {
return;
},
created() {
if (!this.settings) this.reloadSettings();
},
reloadSettings() {
return getSettings().then(response => {
const { settings } = response;
if (settings) this.setSettings(settings);
});
},
async authenticatePlex() {
let username = this.plexUsername;
let password = this.plexPassword;
const { success, message } = await linkPlexAccount(username, password); store.dispatch("user/setSettings", settings);
});
if (success) {
this.reloadSettings();
this.plexUsername = "";
this.plexPassword = "";
}
this.messages.push({
type: success ? "success" : "error",
title: success ? "Authenticated with plex" : "Something went wrong",
message: message
});
},
async unauthenticatePlex() {
const response = await unlinkPlexAccount();
if (response.success) this.reloadSettings();
this.messages.push({
type: response.success ? "success" : "error",
title: response.success
? "Unlinked plex account "
: "Something went wrong",
message: response.message
});
}
} }
};
</script> </script>
<style lang="scss" scoped> <style lang="scss">
@import "src/scss/variables"; @import "src/scss/variables";
@import "src/scss/media-queries"; @import "src/scss/media-queries";
a { .settings {
text-decoration: none; padding: 3rem;
}
// DUPLICATE CODE @include mobile-only {
.form { padding: 1rem;
> div, }
input,
button {
margin-bottom: 1rem;
&:last-child { &__header {
margin-bottom: 0px; margin: 0;
line-height: 16px;
color: $text-color;
font-weight: 300;
margin-bottom: 20px;
text-transform: uppercase;
}
&__info {
display: block;
margin-bottom: 25px;
}
hr {
display: block;
height: 1px;
border: 0;
border-bottom: 1px solid $text-color-50;
margin-top: 30px;
margin-bottom: 70px;
margin-left: 20px;
width: 96%;
text-align: left;
}
span {
font-weight: 200;
size: 16px;
} }
} }
&__group { a {
justify-content: unset; text-decoration: none;
&__input-icon {
margin-top: 8px;
height: 22px;
width: 22px;
}
&-input {
padding: 10px 5px 10px 45px;
height: 40px;
font-size: 17px;
width: 75%;
@include desktop-min {
width: 400px;
}
}
} }
}
.settings {
padding: 3rem;
@include mobile-only {
padding: 1rem;
}
&__header {
margin: 0;
line-height: 16px;
color: $text-color;
font-weight: 300;
margin-bottom: 20px;
text-transform: uppercase;
}
&__info {
display: block;
margin-bottom: 25px;
}
hr {
display: block;
height: 1px;
border: 0;
border-bottom: 1px solid $text-color-50;
margin-top: 30px;
margin-bottom: 70px;
margin-left: 20px;
width: 96%;
text-align: left;
}
span {
font-weight: 200;
size: 16px;
}
}
</style> </style>

191
src/pages/SigninPage.vue
View File

@@ -2,135 +2,130 @@
<section> <section>
<h1>Sign in</h1> <h1>Sign in</h1>
<div class="form"> <form class="form" ref="formElement">
<seasoned-input <seasoned-input
ref="username"
placeholder="username" placeholder="username"
icon="Email" icon="Email"
type="email" type="email"
@enter="submit" v-model="username"
:value.sync="username" @keydown.enter="focusOnNextElement"
/> />
<seasoned-input <seasoned-input
placeholder="password" placeholder="password"
icon="Keyhole" icon="Keyhole"
type="password" type="password"
:value.sync="password" v-model="password"
@enter="submit" @keydown.enter="submit"
/> />
<seasoned-button @click="submit">sign in</seasoned-button> <seasoned-button @click="submit">sign in</seasoned-button>
</div> </form>
<router-link class="link" to="/register" <router-link class="link" to="/register"
>Don't have a user? Register here</router-link >Don't have a user? Register here</router-link
> >
<seasoned-messages :messages.sync="messages"></seasoned-messages> <seasoned-messages v-model:messages="messages" />
</section> </section>
</template> </template>
<script> <script setup lang="ts">
import { mapActions } from "vuex"; import { ref, onMounted } from "vue";
import { login } from "@/api"; import { useStore } from "vuex";
import SeasonedInput from "@/components/ui/SeasonedInput"; import { useRouter } from "vue-router";
import SeasonedButton from "@/components/ui/SeasonedButton"; import SeasonedInput from "@/components/ui/SeasonedInput.vue";
import SeasonedMessages from "@/components/ui/SeasonedMessages"; import SeasonedButton from "@/components/ui/SeasonedButton.vue";
import SeasonedMessages from "@/components/ui/SeasonedMessages.vue";
import { login } from "../api";
import { focusFirstFormInput, focusOnNextElement } from "../utils";
import type { Ref } from "vue";
import type IErrorMessage from "../interfaces/IErrorMessage";
export default { const username: Ref<string> = ref("");
components: { SeasonedInput, SeasonedButton, SeasonedMessages }, const password: Ref<string> = ref("");
data() { const messages: Ref<IErrorMessage[]> = ref([]);
return { const formElement: Ref<HTMLFormElement> = ref(null);
messages: [],
username: null,
password: null
};
},
methods: {
...mapActions("user", ["login"]),
submit() {
this.messages = [];
let { username, password } = this;
if (!username || username.length == 0) { const store = useStore();
this.messages.push({ type: "error", title: "Missing username" }); const router = useRouter();
return;
}
if (!password || password.length == 0) { onMounted(() => focusFirstFormInput(formElement.value));
this.messages.push({ type: "error", title: "Missing password" });
return;
}
this.signin(username, password); function clearMessages() {
}, messages.value = [];
signin(username, password) { }
login(username, password, true)
.then(data => { function addErrorMessage(message: string, title?: string) {
if (data.success && this.login()) { messages.value.push({ message, title, type: "error" });
this.$router.push({ name: "profile" }); }
}
}) function addWarningMessage(message: string, title?: string) {
.catch(error => { messages.value.push({ message, title, type: "warning" });
if (error.status === 401) { }
this.messages.push({
type: "error", function validate(): Promise<boolean> {
title: "Access denied", return new Promise((resolve, reject) => {
message: "Incorrect username or password" if (!username.value || username?.value?.length === 0) {
}); addWarningMessage("Missing username", "Validation error");
} else { return reject();
this.messages.push({ }
type: "error",
title: "Unexpected error", if (!password.value || password?.value?.length === 0) {
message: error.message addWarningMessage("Missing password", "Validation error");
}); return reject();
} }
});
} resolve(true);
}, });
created() { }
document.title = `Sign in — ${document.title}`;
}, function submit() {
mounted() { clearMessages();
try { validate().then(signin);
this.$refs.username.$el.getElementsByTagName("input")[0].focus(); }
} catch {}
function signin() {
login(username.value, password.value, true)
.then(data => {
if (data?.success && store.dispatch("user/login")) {
router.push({ name: "profile" });
}
})
.catch(error => {
if (error?.status === 401) {
return addErrorMessage(
"Incorrect username or password",
"Access denied"
);
}
addErrorMessage(error?.message, "Unexpected error");
});
} }
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "src/scss/variables"; @import "src/scss/variables";
section { section {
padding: 1.3rem; padding: 1.3rem;
@include tablet-min { @include tablet-min {
padding: 4rem; padding: 4rem;
} }
.form > div, h1 {
input, margin: 0;
button { line-height: 16px;
margin-bottom: 1rem; color: $text-color;
font-weight: 300;
margin-bottom: 20px;
text-transform: uppercase;
}
&:last-child { .link {
margin-bottom: 0px; display: block;
width: max-content;
margin-top: 1rem;
} }
} }
h1 {
margin: 0;
line-height: 16px;
color: $text-color;
font-weight: 300;
margin-bottom: 20px;
text-transform: uppercase;
}
.link {
display: block;
width: max-content;
margin-top: 1rem;
}
}
</style> </style>

58
src/pages/TorrentsPage.vue Normal file
View File

@@ -0,0 +1,58 @@
<template>
<div>
<page-header title="Torrent search page" />
<section>
<div class="search-input-group">
<seasoned-input
v-model="query"
type="torrents"
@keydown.enter="setTorrentQuery"
placeholder="Search torrents"
/>
<seasoned-button @click="setTorrentQuery">Search</seasoned-button>
</div>
<active-torrents />
<TorrentList :query="torrentQuery" />
</section>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import PageHeader from "@/components/PageHeader.vue";
import SeasonedInput from "@/components/ui/SeasonedInput.vue";
import SeasonedButton from "@/components/ui/SeasonedButton.vue";
import TorrentList from "@/components/torrent/TorrentSearchResults.vue";
import ActiveTorrents from "@/components/torrent/ActiveTorrents.vue";
import { getValueFromUrlQuery, setUrlQueryParameter } from "../utils";
import type { Ref } from "vue";
const urlQuery = getValueFromUrlQuery("query");
const query: Ref<string> = ref(urlQuery || "");
const torrentQuery: Ref<string> = ref(urlQuery);
function setTorrentQuery() {
setUrlQueryParameter("query", query.value);
torrentQuery.value = query.value;
}
</script>
<style lang="scss" scoped>
section {
padding: 1.25rem;
.search-input-group {
display: flex;
margin-bottom: 2rem;
button {
margin-left: 0.5rem;
}
}
}
</style>