mirror of
https://github.com/KevinMidboe/seasoned.git
synced 2026-05-09 07:35:37 +00:00
Compare commits
49 Commits
feat/admin
...
hallucinat
| Author | SHA1 | Date | |
|---|---|---|---|
| e69f0c52b8 | |||
| 1b99399b4c | |||
| 990dde4d31 | |||
| 493ac02bab | |||
| e8a0598e8f | |||
| 9c6e6938e9 | |||
| b1f1fa8780 | |||
| 7274d0639a | |||
| 01987372dc | |||
| c517349410 | |||
| b3ea60b7fa | |||
| e84ba1c40b | |||
| f7cf2e4508 | |||
| 5bcdcd6568 | |||
| c390fcba47 | |||
| f63e10d28d | |||
| 73d72c634f | |||
| 65ad916df8 | |||
| f98fdb6860 | |||
| 1ed675fcf5 | |||
| 74c0a68aeb | |||
| 64a833c9f8 | |||
| 0c4c30d1a0 | |||
| e0ce0ea6da | |||
| d1578723c4 | |||
| 6c24bc928c | |||
| 720f4e253a | |||
| 017a489b0d | |||
| 5e73b73783 | |||
| 15b6c571d0 | |||
| 46880474d1 | |||
| 8795845acf | |||
| 368ad70096 | |||
| ac591cbebe | |||
| 37ad9ecb7b | |||
| 1813331673 | |||
| 77c89fa520 | |||
| 9c7e0bd3b3 | |||
| 0a2e721cfc | |||
| 7f089c5c48 | |||
| 75aa75dad1 | |||
| c3ef3d968d | |||
| 258b1ef126 | |||
| 6d7ade91ff | |||
| e1aaa3f1ea | |||
| 244895f06a | |||
| d9be15aad0 | |||
| fd842b218b | |||
| 0f774e8f2e |
@@ -13,7 +13,7 @@
|
||||
<!-- Popup that will show above existing rendered content -->
|
||||
<popup />
|
||||
|
||||
<!-- Command Palette for quick navigation -->
|
||||
<!-- Command Palette -->
|
||||
<command-palette />
|
||||
</div>
|
||||
</template>
|
||||
@@ -62,7 +62,6 @@
|
||||
grid-column: 2 / 3;
|
||||
width: calc(100% - var(--header-size));
|
||||
grid-row: 2;
|
||||
z-index: 5;
|
||||
|
||||
@include mobile {
|
||||
grid-column: 1 / 3;
|
||||
|
||||
@@ -1,25 +1,9 @@
|
||||
<template>
|
||||
<li class="cast-card">
|
||||
<a
|
||||
class="cast-card__link"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
:aria-label="ariaLabel"
|
||||
@click="openCastItem"
|
||||
@keydown.enter="openCastItem"
|
||||
>
|
||||
<div class="cast-card__image-wrapper">
|
||||
<img
|
||||
class="cast-card__image"
|
||||
:src="pictureUrl"
|
||||
:alt="imageAltText"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<div class="cast-card__content">
|
||||
<p class="cast-card__name">{{ creditItem.name || creditItem.title }}</p>
|
||||
<p v-if="metaText" class="cast-card__meta">{{ metaText }}</p>
|
||||
</div>
|
||||
<li class="card">
|
||||
<a @click="openCastItem" @keydown.enter="openCastItem">
|
||||
<img :src="pictureUrl" alt="Movie or person poster image" />
|
||||
<p class="name">{{ creditItem.name || creditItem.title }}</p>
|
||||
<p class="meta">{{ creditItem.character || creditItem.year }}</p>
|
||||
</a>
|
||||
</li>
|
||||
</template>
|
||||
@@ -49,139 +33,85 @@
|
||||
return "/assets/no-image_small.svg";
|
||||
});
|
||||
|
||||
const metaText = computed(() => {
|
||||
if ("character" in props.creditItem && props.creditItem.character) {
|
||||
return props.creditItem.character;
|
||||
}
|
||||
if ("job" in props.creditItem && props.creditItem.job) {
|
||||
return props.creditItem.job;
|
||||
}
|
||||
if ("year" in props.creditItem && props.creditItem.year) {
|
||||
return props.creditItem.year;
|
||||
}
|
||||
return "";
|
||||
});
|
||||
|
||||
const imageAltText = computed(() => {
|
||||
const name = props.creditItem.name || (props.creditItem as any).title || "";
|
||||
if ("character" in props.creditItem) {
|
||||
return `${name} as ${props.creditItem.character}`;
|
||||
}
|
||||
if ("job" in props.creditItem) {
|
||||
return `${name}, ${props.creditItem.job}`;
|
||||
}
|
||||
return name ? `Poster for ${name}` : "No image available";
|
||||
});
|
||||
|
||||
const ariaLabel = computed(() => {
|
||||
const name = props.creditItem.name || (props.creditItem as any).title || "";
|
||||
if ("character" in props.creditItem && props.creditItem.character) {
|
||||
return `View ${name}, played ${props.creditItem.character}`;
|
||||
}
|
||||
if ("job" in props.creditItem && props.creditItem.job) {
|
||||
return `View ${name}, ${props.creditItem.job}`;
|
||||
}
|
||||
return `View ${name}`;
|
||||
});
|
||||
|
||||
function openCastItem() {
|
||||
store.dispatch("popup/open", { ...props.creditItem });
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "scss/variables";
|
||||
<style lang="scss">
|
||||
li a p:first-of-type {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.cast-card {
|
||||
list-style: none;
|
||||
margin: 0 10px 10px 0;
|
||||
width: 150px;
|
||||
flex-shrink: 0;
|
||||
li.card p {
|
||||
font-size: 1em;
|
||||
padding: 0 10px;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-height: calc(10px + ((16px * var(--line-height)) * 3));
|
||||
}
|
||||
|
||||
li.card {
|
||||
margin: 10px;
|
||||
margin-right: 4px;
|
||||
padding-bottom: 10px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
|
||||
min-width: 140px;
|
||||
width: 140px;
|
||||
background-color: var(--background-color-secondary);
|
||||
color: var(--text-color);
|
||||
|
||||
transition: all 0.3s ease;
|
||||
transform: scale(0.97) translateZ(0);
|
||||
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
|
||||
&:first-of-type {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cast-card__link {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
background-color: var(
|
||||
--highlight-secondary,
|
||||
var(--background-color-secondary)
|
||||
);
|
||||
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
|
||||
outline: none;
|
||||
&:hover {
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
|
||||
transform: scale(1.03);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--highlight-color);
|
||||
outline-offset: 2px;
|
||||
.name {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.cast-card__image-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
aspect-ratio: 2 / 3;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--background-color) 0%,
|
||||
var(--background-color-secondary) 100%
|
||||
);
|
||||
}
|
||||
.character {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.cast-card__image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
.meta {
|
||||
font-size: 0.9em;
|
||||
color: var(--text-color-70);
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
// margin-top: auto;
|
||||
max-height: calc((0.9em * var(--line-height)) * 1);
|
||||
}
|
||||
|
||||
.cast-card__content {
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
min-height: 60px;
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.cast-card__name {
|
||||
margin: 0;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.3;
|
||||
color: var(--highlight-bg, var(--text-color));
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.cast-card__meta {
|
||||
margin: 0;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.3;
|
||||
color: var(--highlight-bg, var(--text-color-70));
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-height: 210px;
|
||||
background-color: var(--background-color);
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
|
||||
const signinNavigationIcon: INavigationIcon = {
|
||||
title: "Signin",
|
||||
route: "/login",
|
||||
route: "/signin",
|
||||
icon: IconProfileLock
|
||||
};
|
||||
|
||||
|
||||
@@ -9,19 +9,14 @@
|
||||
unclickable: !!!stat.clickable
|
||||
}"
|
||||
@click="
|
||||
stat.clickable &&
|
||||
stat.value?.total > 0 &&
|
||||
!loading &&
|
||||
handleClick(stat.key)
|
||||
stat.clickable && stat.value?.total > 0 && !loading && handleClick(stat.key)
|
||||
"
|
||||
>
|
||||
<div class="stat-icon">
|
||||
<component :is="stat.icon" />
|
||||
</div>
|
||||
<div class="stat-content">
|
||||
<div class="stat-value" v-if="!loading">
|
||||
{{ formatNumber(stat.value?.total) }}
|
||||
</div>
|
||||
<div class="stat-value" v-if="!loading">{{ formatNumber(stat.value?.total) }}</div>
|
||||
<div class="stat-value loading-dots" v-else>...</div>
|
||||
<div class="stat-label">{{ stat.label }}</div>
|
||||
</div>
|
||||
@@ -31,7 +26,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from "vue";
|
||||
import { formatNumber } from "@/utils";
|
||||
import { formatNumber } from '@/utils'
|
||||
import IconMovie from "@/icons/IconMovie.vue";
|
||||
import IconShow from "@/icons/IconShow.vue";
|
||||
import IconMusic from "@/icons/IconMusic.vue";
|
||||
|
||||
@@ -3,14 +3,14 @@
|
||||
<div class="plex-details">
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">
|
||||
<IconServer class="label-icon" style="fill: var(--text-color)" />
|
||||
<IconServer class="label-icon" />
|
||||
Plex server name
|
||||
</span>
|
||||
<span class="detail-value">{{ serverName || "Unknown" }}</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">
|
||||
<IconSync class="label-icon" style="stroke: var(--text-color)" />
|
||||
<IconSync class="label-icon" />
|
||||
Last Sync
|
||||
</span>
|
||||
<span class="detail-value">{{ lastSync || "Never" }}</span>
|
||||
@@ -82,6 +82,7 @@
|
||||
}
|
||||
|
||||
svg {
|
||||
color: var(--text-color-60);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -215,7 +215,8 @@
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const ASSET_URL = "https://image.tmdb.org/t/p/";
|
||||
const COLORS_API = import.meta.env.VITE_SEASONED_COLORS_API || "";
|
||||
// const COLORS_URL = "https://colors.schleppe.cloud/colors";
|
||||
const COLORS_URL = "http://localhost:8080/colors";
|
||||
const ASSET_SIZES = ["w500", "w780", "original"];
|
||||
|
||||
const media: Ref<IMovie | IShow> = ref();
|
||||
@@ -352,7 +353,7 @@
|
||||
}
|
||||
|
||||
async function colorsFromPoster(posterPath: string) {
|
||||
const url = new URL("/colors", COLORS_API);
|
||||
const url = new URL(COLORS_URL);
|
||||
url.searchParams.append("id", posterPath.replace("/", ""));
|
||||
url.searchParams.append("size", "w342");
|
||||
|
||||
|
||||
@@ -24,8 +24,8 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import StorageManager from "./StorageManager.vue";
|
||||
import ExportSection from "./ExportSection.vue";
|
||||
import RequestHistory from "./RequestHistory.vue";
|
||||
import ExportSection from "./ExportSection.vue"
|
||||
import RequestHistory from "./RequestHistory.vue"
|
||||
import DangerZoneAction from "./DangerZoneAction.vue";
|
||||
|
||||
const requestStats = ref({
|
||||
|
||||
@@ -72,6 +72,8 @@
|
||||
function convertToCSV(data: any): string {
|
||||
return `Username,Total Requests,Approved,Pending,Export Date\n${data.username},${data.requests.total},${data.requests.approved},${data.requests.pending},${data.exportDate}`;
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@@ -74,6 +74,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,69 +1,68 @@
|
||||
<template>
|
||||
<div class="torrent-table">
|
||||
<div class="sort-toggle">
|
||||
<span class="sort-label">Sort by:</span>
|
||||
<div class="sort-options">
|
||||
<button
|
||||
v-for="option in sortOptions"
|
||||
:key="option.value"
|
||||
:class="['sort-btn', { active: selectedSort === option.value }]"
|
||||
@click="changeSort(option.value)"
|
||||
<table>
|
||||
<thead class="table__header noselect">
|
||||
<tr>
|
||||
<th
|
||||
v-for="column in visibleColumns"
|
||||
:key="column"
|
||||
:class="column === selectedColumn ? 'active' : null"
|
||||
@click="sortTable(column)"
|
||||
>
|
||||
{{ option.label }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{{ column }}
|
||||
<span v-if="prevCol === column && direction">↑</span>
|
||||
<span v-if="prevCol === column && !direction">↓</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<table>
|
||||
<thead class="table__header noselect">
|
||||
<tr>
|
||||
<th
|
||||
class="name-header"
|
||||
:class="selectedSort === 'name' ? 'active' : null"
|
||||
@click="changeSort('name')"
|
||||
>
|
||||
Name
|
||||
<span v-if="selectedSort === 'name'">{{
|
||||
direction ? "↑" : "↓"
|
||||
}}</span>
|
||||
</th>
|
||||
<th class="add-header">Add</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="torrent in sortedTorrents"
|
||||
:key="torrent.magnet"
|
||||
class="table__content"
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="torrent in torrents"
|
||||
:key="torrent.magnet"
|
||||
class="table__content"
|
||||
>
|
||||
<td
|
||||
class="torrent-info"
|
||||
@click="expand($event, torrent.name)"
|
||||
@keydown.enter="expand($event, torrent.name)"
|
||||
>
|
||||
<td
|
||||
class="torrent-info"
|
||||
@click="expand($event, torrent.name)"
|
||||
@keydown.enter="expand($event, torrent.name)"
|
||||
>
|
||||
<div class="torrent-title">{{ torrent.name }}</div>
|
||||
<div class="torrent-meta">
|
||||
<span class="meta-item">{{ torrent.size }}</span>
|
||||
<span class="meta-separator">•</span>
|
||||
<span class="meta-item">{{ torrent.seed }} seeders</span>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
class="download"
|
||||
@click="() => emit('magnet', torrent)"
|
||||
@keydown.enter="() => emit('magnet', torrent)"
|
||||
>
|
||||
<IconMagnet />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="torrent-title">{{ torrent.name }}</div>
|
||||
<div v-if="isMobile" class="torrent-meta">
|
||||
<span class="meta-item">{{ torrent.size }}</span>
|
||||
<span class="meta-separator">•</span>
|
||||
<span class="meta-item">{{ torrent.seed }} seeders</span>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
v-if="!isMobile"
|
||||
class="torrent-seed"
|
||||
@click="expand($event, torrent.name)"
|
||||
@keydown.enter="expand($event, torrent.name)"
|
||||
>
|
||||
{{ torrent.seed }}
|
||||
</td>
|
||||
<td
|
||||
v-if="!isMobile"
|
||||
class="torrent-size"
|
||||
@click="expand($event, torrent.name)"
|
||||
@keydown.enter="expand($event, torrent.name)"
|
||||
>
|
||||
{{ torrent.size }}
|
||||
</td>
|
||||
<td
|
||||
class="download"
|
||||
@click="() => emit('magnet', torrent)"
|
||||
@keydown.enter="() => emit('magnet', torrent)"
|
||||
>
|
||||
<IconMagnet />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from "vue";
|
||||
import { ref, computed, onMounted, onUnmounted } from "vue";
|
||||
import IconMagnet from "@/icons/IconMagnet.vue";
|
||||
import type { Ref } from "vue";
|
||||
import { sortableSize } from "../../utils";
|
||||
@@ -80,55 +79,31 @@
|
||||
const props = defineProps<Props>();
|
||||
const emit = defineEmits<Emit>();
|
||||
|
||||
const sortOptions = [
|
||||
{ value: "name", label: "Name" },
|
||||
{ value: "size", label: "Size" },
|
||||
{ value: "seed", label: "Seeders" }
|
||||
];
|
||||
const columns: string[] = ["name", "seed", "size", "add"];
|
||||
const windowWidth = ref(window.innerWidth);
|
||||
const isMobile = computed(() => windowWidth.value <= 768);
|
||||
const visibleColumns = computed(() =>
|
||||
isMobile.value ? ["name", "add"] : columns
|
||||
);
|
||||
|
||||
const torrents: Ref<ITorrent[]> = ref(props.torrents);
|
||||
const direction: Ref<boolean> = ref(false);
|
||||
const selectedSort: Ref<string> = ref("size");
|
||||
const prevSort: Ref<string> = ref("");
|
||||
const selectedColumn: Ref<string> = ref(columns[0]);
|
||||
const prevCol: Ref<string> = ref("");
|
||||
|
||||
const sortedTorrents = computed(() => {
|
||||
const sorted = [...torrents.value];
|
||||
|
||||
if (selectedSort.value === "name") {
|
||||
sorted.sort((a, b) =>
|
||||
direction.value
|
||||
? a.name.localeCompare(b.name)
|
||||
: b.name.localeCompare(a.name)
|
||||
);
|
||||
} else if (selectedSort.value === "size") {
|
||||
sorted.sort((a, b) =>
|
||||
direction.value
|
||||
? sortableSize(a.size) - sortableSize(b.size)
|
||||
: sortableSize(b.size) - sortableSize(a.size)
|
||||
);
|
||||
} else if (selectedSort.value === "seed") {
|
||||
sorted.sort((a, b) =>
|
||||
direction.value
|
||||
? parseInt(a.seed, 10) - parseInt(b.seed, 10)
|
||||
: parseInt(b.seed, 10) - parseInt(a.seed, 10)
|
||||
);
|
||||
}
|
||||
|
||||
return sorted;
|
||||
});
|
||||
|
||||
function changeSort(sortBy: string) {
|
||||
if (prevSort.value === sortBy) {
|
||||
direction.value = !direction.value;
|
||||
} else {
|
||||
direction.value = false;
|
||||
selectedSort.value = sortBy;
|
||||
}
|
||||
prevSort.value = sortBy;
|
||||
function handleResize() {
|
||||
windowWidth.value = window.innerWidth;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener("resize", handleResize);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener("resize", handleResize);
|
||||
});
|
||||
|
||||
function expand(event: MouseEvent, text: string) {
|
||||
return;
|
||||
const elementClicked = event.target as HTMLElement;
|
||||
const tableRow = elementClicked.parentElement;
|
||||
const scopedStyleDataVariable = Object.keys(tableRow.dataset)[0];
|
||||
@@ -141,6 +116,8 @@
|
||||
if (existingExpandedElement) {
|
||||
existingExpandedElement.remove();
|
||||
|
||||
// Clicked the same element twice, remove and return
|
||||
// not recreate and collapse
|
||||
if (clickedSameTwice) return;
|
||||
}
|
||||
|
||||
@@ -151,11 +128,59 @@
|
||||
expandedRow.className = "expanded";
|
||||
expandedCol.innerText = text;
|
||||
|
||||
expandedCol.colSpan = 2;
|
||||
// Colspan: 2 on mobile (name + add), 4 on desktop (name + seed + size + add)
|
||||
expandedCol.colSpan = isMobile.value ? 2 : 4;
|
||||
|
||||
expandedRow.appendChild(expandedCol);
|
||||
tableRow.insertAdjacentElement("afterend", expandedRow);
|
||||
}
|
||||
|
||||
function sortName() {
|
||||
const torrentsCopy = [...torrents.value];
|
||||
if (direction.value) {
|
||||
torrents.value = torrentsCopy.sort((a, b) => (a.name < b.name ? 1 : -1));
|
||||
} else {
|
||||
torrents.value = torrentsCopy.sort((a, b) => (a.name > b.name ? 1 : -1));
|
||||
}
|
||||
}
|
||||
|
||||
function sortSeed() {
|
||||
const torrentsCopy = [...torrents.value];
|
||||
if (direction.value) {
|
||||
torrents.value = torrentsCopy.sort(
|
||||
(a, b) => parseInt(a.seed, 10) - parseInt(b.seed, 10)
|
||||
);
|
||||
} else {
|
||||
torrents.value = torrentsCopy.sort(
|
||||
(a, b) => parseInt(b.seed, 10) - parseInt(a.seed, 10)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function sortSize() {
|
||||
const torrentsCopy = [...torrents.value];
|
||||
if (direction.value) {
|
||||
torrents.value = torrentsCopy.sort((a, b) =>
|
||||
sortableSize(a.size) > sortableSize(b.size) ? 1 : -1
|
||||
);
|
||||
} else {
|
||||
torrents.value = torrentsCopy.sort((a, b) =>
|
||||
sortableSize(a.size) < sortableSize(b.size) ? 1 : -1
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function sortTable(col, sameDirection = false) {
|
||||
if (prevCol.value === col && sameDirection === false) {
|
||||
direction.value = !direction.value;
|
||||
}
|
||||
|
||||
if (col === "name") sortName();
|
||||
else if (col === "seed") sortSeed();
|
||||
else if (col === "size") sortSize();
|
||||
|
||||
prevCol.value = col;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@@ -163,58 +188,6 @@
|
||||
@import "scss/media-queries";
|
||||
@import "scss/elements";
|
||||
|
||||
.torrent-table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sort-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.sort-label {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-color-70);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.sort-options {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.sort-btn {
|
||||
border: 1px solid var(--highlight-bg, var(--background-color-40));
|
||||
color: var(--text-color-70);
|
||||
padding: 0.35rem 0.65rem;
|
||||
font-size: 0.8rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
|
||||
&:hover {
|
||||
background: var(--highlight-bg, var(--background-color));
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: var(--highlight-color);
|
||||
color: var(--text-color);
|
||||
border-color: var(--highlight-color, $green);
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
padding: 0.4rem 0.6rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
border-spacing: 0;
|
||||
margin-top: 0.5rem;
|
||||
@@ -222,11 +195,16 @@
|
||||
max-width: 100%;
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
table-layout: auto;
|
||||
table-layout: fixed;
|
||||
|
||||
@include mobile {
|
||||
table-layout: auto;
|
||||
}
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
border: 0.5px solid var(--background-color-40);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
@@ -239,16 +217,16 @@
|
||||
position: relative;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
color: var(--highlight-bg, var(--table-header-text-color));
|
||||
color: var(--table-header-text-color);
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
background-color: var(--highlight-color, var(--highlight-color));
|
||||
background-color: var(--table-background-color);
|
||||
background-color: var(--highlight-color);
|
||||
letter-spacing: 0.8px;
|
||||
font-size: 1rem;
|
||||
|
||||
th:last-of-type {
|
||||
padding: 0 0.4rem;
|
||||
border-left: 1px solid var(--highlight-bg, var(--background-color));
|
||||
padding-right: 0.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -259,7 +237,7 @@
|
||||
padding: 0.5rem 0.6rem;
|
||||
cursor: default;
|
||||
word-break: break-word;
|
||||
border-left: 1px solid var(--highlight-secondary, var(--highlight-color));
|
||||
border-left: 1px solid var(--table-background-color);
|
||||
|
||||
@include mobile {
|
||||
width: 100%;
|
||||
@@ -280,8 +258,8 @@
|
||||
|
||||
.torrent-meta {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-color-60);
|
||||
display: flex;
|
||||
opacity: 70%;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
@@ -297,12 +275,20 @@
|
||||
}
|
||||
}
|
||||
|
||||
// seed and size columns (desktop only)
|
||||
.torrent-seed,
|
||||
.torrent-size {
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
// last column - action
|
||||
tr td:last-of-type {
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
border-right: 1px solid var(--highlight-secondary, var(--highlight-color));
|
||||
max-width: 60px;
|
||||
border-right: 1px solid var(--table-background-color);
|
||||
width: 60px;
|
||||
text-align: center;
|
||||
|
||||
@include mobile {
|
||||
@@ -314,7 +300,7 @@
|
||||
display: block;
|
||||
margin: auto;
|
||||
padding: 0.3rem 0;
|
||||
fill: var(inherit, var(--text-color));
|
||||
fill: var(--text-color);
|
||||
|
||||
@include mobile {
|
||||
width: 18px;
|
||||
@@ -324,30 +310,16 @@
|
||||
|
||||
// alternate background color per row
|
||||
tr {
|
||||
background-color: var(--highlight-bg, var(--background-90));
|
||||
color: var(--text-color);
|
||||
|
||||
td {
|
||||
border-left: 1px solid
|
||||
var(--highlight-secondary, var(--highlight-color));
|
||||
fill: var(--text-color);
|
||||
}
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
tr:nth-child(odd) {
|
||||
background-color: var(--highlight-secondary, var(--background-color));
|
||||
color: var(--highlight-bg, var(--text-color));
|
||||
|
||||
td {
|
||||
fill: var(--highlight-bg, var(--text-color)) !important;
|
||||
}
|
||||
tr:nth-child(even) {
|
||||
background-color: var(--background-70);
|
||||
}
|
||||
|
||||
// last element rounded corner border
|
||||
tr:last-of-type {
|
||||
td {
|
||||
border-bottom: 1px solid
|
||||
var(--highlight-secondary, var(--highlight-color));
|
||||
border-left: 1px solid var(--highlight-bg, var(--text-color));
|
||||
border-bottom: 1px solid var(--table-background-color);
|
||||
}
|
||||
|
||||
td:first-of-type {
|
||||
@@ -363,16 +335,15 @@
|
||||
.expanded {
|
||||
padding: 0.25rem 1rem;
|
||||
max-width: 100%;
|
||||
border-left: 1px solid var(--text-color);
|
||||
border-right: 1px solid var(--text-color);
|
||||
border-bottom: 1px solid var(--text-color);
|
||||
border-left: 1px solid $text-color;
|
||||
border-right: 1px solid $text-color;
|
||||
border-bottom: 1px solid $text-color;
|
||||
|
||||
td {
|
||||
white-space: normal;
|
||||
word-break: break-all;
|
||||
padding: 0.5rem 0.15rem;
|
||||
width: 100%;
|
||||
color: var(--text-color);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -22,9 +22,9 @@ function applyTheme(theme: Theme) {
|
||||
}
|
||||
|
||||
export function useTheme() {
|
||||
const savedTheme = computed(
|
||||
() => (localStorage.getItem("theme-preference") as Theme) || "auto"
|
||||
);
|
||||
const savedTheme = computed(() => {
|
||||
return (localStorage.getItem("theme-preference") as Theme) || "auto";
|
||||
});
|
||||
|
||||
function initTheme() {
|
||||
const theme = savedTheme.value;
|
||||
|
||||
@@ -17,7 +17,7 @@ export interface CookieOptions {
|
||||
* Read a cookie value.
|
||||
*/
|
||||
export function getAuthorizationCookie(): string | null {
|
||||
const key = "authorization";
|
||||
const key = 'authorization';
|
||||
const array = document.cookie.split(";");
|
||||
let match = null;
|
||||
|
||||
|
||||
@@ -257,7 +257,6 @@
|
||||
text-align: center;
|
||||
z-index: 10;
|
||||
padding: 2rem;
|
||||
margin-top: calc(-1 * var(--header-size));
|
||||
|
||||
@include mobile {
|
||||
padding: 1rem;
|
||||
|
||||
@@ -1,107 +1,40 @@
|
||||
<template>
|
||||
<div class="register auth-page">
|
||||
<div class="auth-content auth-content--wide">
|
||||
<div class="auth-header">
|
||||
<h1 class="auth-title">Register new user</h1>
|
||||
<p class="auth-subtitle">Create an account to get started</p>
|
||||
</div>
|
||||
<section>
|
||||
<h1>Register new user</h1>
|
||||
|
||||
<form ref="formElement" class="auth-form" @submit.prevent>
|
||||
<seasoned-input
|
||||
v-model="username"
|
||||
placeholder="Email address"
|
||||
icon="Email"
|
||||
type="email"
|
||||
@keydown.enter="focusOnNextElement"
|
||||
/>
|
||||
<form ref="formElement" class="form">
|
||||
<seasoned-input
|
||||
v-model="username"
|
||||
placeholder="username"
|
||||
icon="Email"
|
||||
type="email"
|
||||
@keydown.enter="focusOnNextElement"
|
||||
/>
|
||||
|
||||
<div class="register__password-section">
|
||||
<div class="password-generator">
|
||||
<button
|
||||
type="button"
|
||||
class="generator-toggle"
|
||||
@click="toggleGenerator"
|
||||
>
|
||||
<IconKey class="toggle-icon" />
|
||||
<span>{{
|
||||
showGenerator
|
||||
? "Hide Password Generator"
|
||||
: "Generate Strong Password"
|
||||
}}</span>
|
||||
</button>
|
||||
<div v-if="showGenerator" class="generator-content">
|
||||
<password-generator
|
||||
@password-generated="handlePasswordGenerated"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<seasoned-input
|
||||
v-model="password"
|
||||
placeholder="password"
|
||||
icon="Keyhole"
|
||||
type="password"
|
||||
@keydown.enter="focusOnNextElement"
|
||||
/>
|
||||
<seasoned-input
|
||||
v-model="passwordRepeat"
|
||||
placeholder="repeat password"
|
||||
icon="Keyhole"
|
||||
type="password"
|
||||
@keydown.enter="submit"
|
||||
/>
|
||||
|
||||
<seasoned-input
|
||||
v-model="password"
|
||||
placeholder="Password"
|
||||
icon="Keyhole"
|
||||
type="password"
|
||||
class="password-input"
|
||||
@keydown.enter="focusOnNextElement"
|
||||
/>
|
||||
<seasoned-button @click="submit">Register</seasoned-button>
|
||||
</form>
|
||||
|
||||
<seasoned-input
|
||||
v-model="passwordRepeat"
|
||||
placeholder="Confirm password"
|
||||
icon="Keyhole"
|
||||
type="password"
|
||||
class="password-input"
|
||||
@keydown.enter="submit"
|
||||
/>
|
||||
</div>
|
||||
<router-link class="link" to="/login"
|
||||
>Have a user? Sign in here</router-link
|
||||
>
|
||||
|
||||
<div v-if="password.length > 0" class="register__password-requirements">
|
||||
<p class="requirements-title">Password must contain:</p>
|
||||
<div class="requirements-grid">
|
||||
<div class="requirement" :class="{ met: password.length >= 8 }">
|
||||
<span class="requirement-icon">{{
|
||||
password.length >= 8 ? "✓" : "✗"
|
||||
}}</span>
|
||||
<span class="requirement-text">At least 8 characters</span>
|
||||
</div>
|
||||
<div class="requirement" :class="{ met: /[A-Z]/.test(password) }">
|
||||
<span class="requirement-icon">{{
|
||||
/[A-Z]/.test(password) ? "✓" : "✗"
|
||||
}}</span>
|
||||
<span class="requirement-text">One uppercase letter</span>
|
||||
</div>
|
||||
<div class="requirement" :class="{ met: /[a-z]/.test(password) }">
|
||||
<span class="requirement-icon">{{
|
||||
/[a-z]/.test(password) ? "✓" : "✗"
|
||||
}}</span>
|
||||
<span class="requirement-text">One lowercase letter</span>
|
||||
</div>
|
||||
<div class="requirement" :class="{ met: /[0-9]/.test(password) }">
|
||||
<span class="requirement-icon">{{
|
||||
/[0-9]/.test(password) ? "✓" : "✗"
|
||||
}}</span>
|
||||
<span class="requirement-text">One number</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<seasoned-button class="auth-button" @click="submit">
|
||||
Create Account
|
||||
</seasoned-button>
|
||||
</form>
|
||||
|
||||
<div class="auth-footer">
|
||||
<p class="auth-footer-text">
|
||||
Already have an account?
|
||||
<router-link class="auth-link" to="/login">
|
||||
Sign in here
|
||||
</router-link>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<seasoned-messages v-model:messages="messages"></seasoned-messages>
|
||||
</div>
|
||||
</div>
|
||||
<seasoned-messages v-model:messages="messages"></seasoned-messages>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@@ -111,8 +44,6 @@
|
||||
import SeasonedButton from "@/components/ui/SeasonedButton.vue";
|
||||
import SeasonedInput from "@/components/ui/SeasonedInput.vue";
|
||||
import SeasonedMessages from "@/components/ui/SeasonedMessages.vue";
|
||||
import PasswordGenerator from "@/components/settings/PasswordGenerator.vue";
|
||||
import IconKey from "@/icons/IconKey.vue";
|
||||
import type { Ref } from "vue";
|
||||
import { register } from "../api";
|
||||
import { focusFirstFormInput, focusOnNextElement } from "../utils";
|
||||
@@ -124,7 +55,6 @@
|
||||
const passwordRepeat: Ref<string> = ref("");
|
||||
const messages: Ref<IErrorMessage[]> = ref([]);
|
||||
const formElement: Ref<HTMLFormElement> = ref(null);
|
||||
const showGenerator = ref(false);
|
||||
|
||||
const store = useStore();
|
||||
const router = useRouter();
|
||||
@@ -140,198 +70,99 @@
|
||||
message,
|
||||
title,
|
||||
type: ErrorMessageTypes.Error
|
||||
});
|
||||
} as IErrorMessage);
|
||||
}
|
||||
|
||||
function addSuccessMessage(message: string, title?: string) {
|
||||
function addWarningMessage(message: string, title?: string) {
|
||||
messages.value.push({
|
||||
message,
|
||||
title,
|
||||
type: ErrorMessageTypes.Success
|
||||
type: ErrorMessageTypes.Warning
|
||||
} as IErrorMessage);
|
||||
}
|
||||
|
||||
function validate(): Promise<boolean> {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (!username.value || username?.value?.length === 0) {
|
||||
addWarningMessage("Missing username", "Validation error");
|
||||
reject();
|
||||
}
|
||||
|
||||
if (!password.value || password?.value?.length === 0) {
|
||||
addWarningMessage("Missing password", "Validation error");
|
||||
reject();
|
||||
}
|
||||
|
||||
if (passwordRepeat.value == null || passwordRepeat.value.length === 0) {
|
||||
addWarningMessage("Missing repeat password", "Validation error");
|
||||
reject();
|
||||
}
|
||||
if (passwordRepeat.value !== password.value) {
|
||||
addWarningMessage("Passwords do not match", "Validation error");
|
||||
reject();
|
||||
}
|
||||
|
||||
resolve(true);
|
||||
});
|
||||
}
|
||||
|
||||
function validate() {
|
||||
const errors = [];
|
||||
|
||||
if (username.value.length === 0) {
|
||||
errors.push("Email must not be empty");
|
||||
}
|
||||
|
||||
if (password.value.length === 0) {
|
||||
errors.push("Password must not be empty");
|
||||
}
|
||||
|
||||
if (password.value.length < 8) {
|
||||
errors.push("Password must be at least 8 characters");
|
||||
}
|
||||
|
||||
if (!/[A-Z]/.test(password.value)) {
|
||||
errors.push("Password must contain at least one uppercase letter");
|
||||
}
|
||||
|
||||
if (!/[a-z]/.test(password.value)) {
|
||||
errors.push("Password must contain at least one lowercase letter");
|
||||
}
|
||||
|
||||
if (!/[0-9]/.test(password.value)) {
|
||||
errors.push("Password must contain at least one number");
|
||||
}
|
||||
|
||||
if (password.value !== passwordRepeat.value) {
|
||||
errors.push("Passwords do not match");
|
||||
}
|
||||
|
||||
if (errors.length > 0) {
|
||||
errors.forEach(error => addErrorMessage(error, "Validation error"));
|
||||
return Promise.reject();
|
||||
}
|
||||
|
||||
return Promise.resolve(true);
|
||||
}
|
||||
|
||||
function createUser() {
|
||||
return register(username.value, password.value)
|
||||
.then(response => {
|
||||
addSuccessMessage(
|
||||
"Account created successfully! Redirecting to login...",
|
||||
"Success"
|
||||
);
|
||||
setTimeout(() => {
|
||||
router.push("/login");
|
||||
}, 2000);
|
||||
return response;
|
||||
function registerUser() {
|
||||
register(username.value, password.value)
|
||||
.then(data => {
|
||||
if (data?.success && store.dispatch("user/login")) {
|
||||
router.push({ name: "profile" });
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
addErrorMessage(error?.message || "Registration failed", "Error");
|
||||
if (error?.status === 401) {
|
||||
addErrorMessage("Incorrect username or password", "Access denied");
|
||||
return null;
|
||||
}
|
||||
|
||||
addErrorMessage(error?.message, "Unexpected error");
|
||||
return null;
|
||||
});
|
||||
}
|
||||
|
||||
function submit() {
|
||||
clearMessages();
|
||||
validate().then(createUser);
|
||||
}
|
||||
|
||||
function handlePasswordGenerated(generatedPassword: string) {
|
||||
password.value = generatedPassword;
|
||||
passwordRepeat.value = generatedPassword;
|
||||
}
|
||||
|
||||
function toggleGenerator() {
|
||||
showGenerator.value = !showGenerator.value;
|
||||
validate().then(registerUser);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "scss/shared-auth";
|
||||
@import "scss/variables";
|
||||
|
||||
.register {
|
||||
// Password inputs use monospace font
|
||||
:deep(.password-input input[type="password"]),
|
||||
:deep(.password-input input[type="text"]) {
|
||||
font-family: "Courier New", monospace;
|
||||
section {
|
||||
padding: 1.3rem;
|
||||
|
||||
@include tablet-min {
|
||||
padding: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.register__password-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
.form > div,
|
||||
input,
|
||||
button {
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.password-generator {
|
||||
.generator-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
padding: 0.875rem 1rem;
|
||||
background: var(--background-ui);
|
||||
border: 1px solid var(--text-color-10);
|
||||
border-radius: 8px;
|
||||
color: var(--text-color);
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background: var(--background-color-secondary);
|
||||
border-color: var(--text-color-20);
|
||||
}
|
||||
|
||||
.toggle-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: var(--highlight-color);
|
||||
&:last-child {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.generator-content {
|
||||
margin-top: 1rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid var(--text-color-10);
|
||||
}
|
||||
}
|
||||
|
||||
.register__password-requirements {
|
||||
background: var(--background-ui);
|
||||
border: 1px solid var(--text-color-10);
|
||||
border-radius: 8px;
|
||||
padding: 1.25rem;
|
||||
margin-top: -0.25rem;
|
||||
|
||||
.requirements-title {
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
h1 {
|
||||
margin: 0;
|
||||
line-height: 16px;
|
||||
color: $text-color;
|
||||
font-weight: 300;
|
||||
margin-bottom: 20px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.requirements-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 0.75rem;
|
||||
|
||||
@include mobile-only {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.requirement {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-color-60);
|
||||
|
||||
&-icon {
|
||||
flex-shrink: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
background: var(--text-color-10);
|
||||
font-size: 0.75rem;
|
||||
font-weight: bold;
|
||||
color: var(--text-color-60);
|
||||
}
|
||||
|
||||
&-text {
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
&.met {
|
||||
color: var(--success-color, #51cf66);
|
||||
|
||||
.requirement-icon {
|
||||
background: var(--success-color, #51cf66);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
.link {
|
||||
display: block;
|
||||
width: max-content;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,44 +1,31 @@
|
||||
<template>
|
||||
<div class="signin auth-page">
|
||||
<div class="auth-content">
|
||||
<div class="auth-header">
|
||||
<h1 class="auth-title">Sign in</h1>
|
||||
<p class="auth-subtitle">Welcome back! Please enter your credentials</p>
|
||||
</div>
|
||||
<section>
|
||||
<h1>Sign in</h1>
|
||||
|
||||
<form ref="formElement" class="auth-form">
|
||||
<seasoned-input
|
||||
v-model="username"
|
||||
placeholder="Email address"
|
||||
icon="Email"
|
||||
type="email"
|
||||
@keydown.enter="focusOnNextElement"
|
||||
/>
|
||||
<seasoned-input
|
||||
v-model="password"
|
||||
placeholder="Password"
|
||||
icon="Keyhole"
|
||||
type="password"
|
||||
@keydown.enter="submit"
|
||||
/>
|
||||
<form ref="formElement" class="form">
|
||||
<seasoned-input
|
||||
v-model="username"
|
||||
placeholder="username"
|
||||
icon="Email"
|
||||
type="email"
|
||||
@keydown.enter="focusOnNextElement"
|
||||
/>
|
||||
<seasoned-input
|
||||
v-model="password"
|
||||
placeholder="password"
|
||||
icon="Keyhole"
|
||||
type="password"
|
||||
@keydown.enter="submit"
|
||||
/>
|
||||
|
||||
<seasoned-button class="auth-button" @click="submit">
|
||||
Sign In
|
||||
</seasoned-button>
|
||||
</form>
|
||||
<seasoned-button @click="submit">sign in</seasoned-button>
|
||||
</form>
|
||||
<router-link class="link" to="/register"
|
||||
>Don't have a user? Register here</router-link
|
||||
>
|
||||
|
||||
<div class="auth-footer">
|
||||
<p class="auth-footer-text">
|
||||
Don't have an account?
|
||||
<router-link class="auth-link" to="/register">
|
||||
Register here
|
||||
</router-link>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<seasoned-messages v-model:messages="messages" />
|
||||
</div>
|
||||
</div>
|
||||
<seasoned-messages v-model:messages="messages" />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@@ -73,38 +60,43 @@
|
||||
message,
|
||||
title,
|
||||
type: ErrorMessageTypes.Error
|
||||
} as IErrorMessage);
|
||||
}
|
||||
|
||||
function addWarningMessage(message: string, title?: string) {
|
||||
messages.value.push({
|
||||
message,
|
||||
title,
|
||||
type: ErrorMessageTypes.Warning
|
||||
} as IErrorMessage);
|
||||
}
|
||||
|
||||
function validate(): Promise<boolean> {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (!username.value || username?.value?.length === 0) {
|
||||
addWarningMessage("Missing username", "Validation error");
|
||||
reject();
|
||||
}
|
||||
|
||||
if (!password.value || password?.value?.length === 0) {
|
||||
addWarningMessage("Missing password", "Validation error");
|
||||
reject();
|
||||
}
|
||||
|
||||
resolve(true);
|
||||
});
|
||||
}
|
||||
|
||||
function validate() {
|
||||
const errors = [];
|
||||
|
||||
if (username.value.length === 0) {
|
||||
errors.push("Username must not be empty");
|
||||
}
|
||||
|
||||
if (password.value.length === 0) {
|
||||
errors.push("Password must not be empty");
|
||||
}
|
||||
|
||||
if (errors.length > 0) {
|
||||
errors.forEach(error => addErrorMessage(error, "Validation error"));
|
||||
return Promise.reject();
|
||||
}
|
||||
|
||||
return Promise.resolve(true);
|
||||
}
|
||||
|
||||
function signin() {
|
||||
return login(username.value, password.value)
|
||||
.then(response => {
|
||||
store.dispatch("user/login", response.user);
|
||||
router.push("/");
|
||||
return response;
|
||||
login(username.value, password.value, true)
|
||||
.then(data => {
|
||||
if (data?.success && store.dispatch("user/login")) {
|
||||
router.push({ name: "profile" });
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
if (error.error === "Incorrect username or password.") {
|
||||
addErrorMessage(error.error, "Authentication failed");
|
||||
if (error?.status === 401) {
|
||||
addErrorMessage("Incorrect username or password", "Access denied");
|
||||
return null;
|
||||
}
|
||||
|
||||
@@ -120,13 +112,28 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "scss/shared-auth";
|
||||
@import "scss/variables";
|
||||
|
||||
.signin {
|
||||
// Password input uses monospace font
|
||||
:deep(input[type="password"]),
|
||||
:deep(input[type="text"][placeholder="Password"]) {
|
||||
font-family: "Courier New", monospace;
|
||||
section {
|
||||
padding: 1.3rem;
|
||||
|
||||
@include tablet-min {
|
||||
padding: 4rem;
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
@@ -1,100 +0,0 @@
|
||||
// Shared styles for authentication pages (signin, register)
|
||||
@import "variables";
|
||||
@import "media-queries";
|
||||
|
||||
// Base auth page layout
|
||||
.auth-page {
|
||||
padding: 3rem;
|
||||
max-width: 100%;
|
||||
|
||||
@include mobile-only {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-content {
|
||||
max-width: 600px;
|
||||
|
||||
@include mobile-only {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
&--wide {
|
||||
max-width: 700px;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-header {
|
||||
margin-bottom: 2.5rem;
|
||||
|
||||
@include mobile-only {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-title {
|
||||
margin: 0 0 0.75rem 0;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 600;
|
||||
color: $text-color;
|
||||
line-height: 1.2;
|
||||
|
||||
@include mobile-only {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-subtitle {
|
||||
margin: 0;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 300;
|
||||
color: var(--text-color-60);
|
||||
line-height: 1.5;
|
||||
|
||||
@include mobile-only {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.auth-button {
|
||||
margin-top: 0.5rem;
|
||||
max-width: 200px;
|
||||
|
||||
@include mobile-only {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-footer {
|
||||
padding-top: 2rem;
|
||||
border-top: 1px solid var(--text-color-10);
|
||||
}
|
||||
|
||||
.auth-footer-text {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
color: var(--text-color-60);
|
||||
|
||||
@include mobile-only {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-link {
|
||||
color: var(--highlight-color);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: opacity 0.2s;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
@@ -89,9 +89,8 @@ export function setUrlQueryParameter(parameter: string, value: string): void {
|
||||
const params = new URLSearchParams();
|
||||
params.append(parameter, value);
|
||||
|
||||
const url = `${window.location.protocol}//${window.location.hostname}${
|
||||
window.location.port ? `:${window.location.port}` : ""
|
||||
}${window.location.pathname}${params.toString().length ? `?${params}` : ""}`;
|
||||
const url = `${window.location.protocol}//${window.location.hostname}${window.location.port ? `:${window.location.port}` : ""
|
||||
}${window.location.pathname}${params.toString().length ? `?${params}` : ""}`;
|
||||
|
||||
window.history.pushState({}, "search", url);
|
||||
}
|
||||
@@ -142,5 +141,5 @@ export function formatBytes(bytes: number): string {
|
||||
const k = 1024;
|
||||
const sizes = ["Bytes", "KB", "MB"];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return `${Math.round((bytes / k ** i) * 100) / 100} ${sizes[i]}`;
|
||||
return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + " " + sizes[i];
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user