mirror of
https://github.com/KevinMidboe/seasoned.git
synced 2026-05-12 17:15:42 +00:00
Feat/settings page redesign (#104)
* include credentials on login fetch requests, allows set header response * Add theme composable and utility improvements - Create useTheme composable for centralized theme management - Update main.ts to use useTheme for initialization - Generalize getCookie utility in user module - Add utility functions for data formatting * Add Plex integration composables and icons - Create usePlexAuth composable for Plex OAuth flow - Create usePlexApi composable for Plex API interactions - Create useRandomWords composable for password generation - Add Plex-related icons (IconPlex, IconServer, IconSync) - Add Plex helper utilities - Update API with Plex-related endpoints * Add storage management components for data & privacy section - Create StorageManager component for browser storage overview - Create StorageSectionBrowser for localStorage/sessionStorage/cookies - Create StorageSectionServer for server-side data (mock) - Create ExportSection for data export functionality - Refactor DataExport component with modular sections - Add storage icons (IconCookie, IconDatabase, IconTimer) - Implement collapsible sections with visual indicators - Add colored borders per storage type - Display item counts and total size in headers * Add theme, password, and security settings components - Create ThemePreferences with visual theme selector - Create PasswordGenerator with passphrase and random modes - Create SecuritySettings wrapper for password management - Update ChangePassword to work with new layout - Implement improved slider UX with visual feedback - Add theme preview cards with gradients - Standardize component styling and typography * Add Plex settings and authentication components - Create PlexSettings component for Plex account management - Create PlexAuthButton with improved OAuth flow - Create PlexServerInfo for server details display - Use icon components instead of inline SVGs - Add sync and unlink functionality - Implement user-friendly authentication flow * Redesign settings page with two-column layout and ProfileHero - Create ProfileHero component with avatar and user info - Create RequestHistory component for Plex requests (placeholder) - Redesign SettingsPage with modern two-column grid layout - Add shared-settings.scss for consistent styling - Organize sections: Appearance, Security, Integrations, Data & Privacy - Implement responsive mobile layout - Standardize typography (h2: 1.5rem, 700 weight) - Add compact modifier for tighter sections
This commit is contained in:
GitHub
143
src/components/plex/PlexAuthButton.vue
Normal file
143
src/components/plex/PlexAuthButton.vue
Normal file
@@ -0,0 +1,143 @@
|
||||
<template>
|
||||
<div class="plex-connect">
|
||||
<div class="info-box">
|
||||
<IconInfo class="info-icon" />
|
||||
<p>
|
||||
Sign in to your Plex account to get information about recently added
|
||||
movies and to see your watch history
|
||||
</p>
|
||||
</div>
|
||||
<div class="signin-container">
|
||||
<button @click="handleAuth" :disabled="loading" class="plex-signin-btn">
|
||||
{{ loading ? "Connecting..." : "Sign in with Plex" }}
|
||||
|
||||
<IconPlex v-if="!loading" class="plex-icon" />
|
||||
</button>
|
||||
<p class="popup-note">A popup window will open for authentication</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { usePlexAuth } from "@/composables/usePlexAuth";
|
||||
import IconInfo from "@/icons/IconInfo.vue";
|
||||
import IconPlex from "@/icons/IconPlex.vue";
|
||||
|
||||
const emit = defineEmits<{
|
||||
authSuccess: [token: string];
|
||||
authError: [message: string];
|
||||
}>();
|
||||
|
||||
const { loading, openAuthPopup } = usePlexAuth();
|
||||
|
||||
function handleAuth() {
|
||||
openAuthPopup(
|
||||
token => emit("authSuccess", token),
|
||||
error => emit("authError", error)
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "scss/variables";
|
||||
@import "scss/media-queries";
|
||||
|
||||
.info-box {
|
||||
display: flex;
|
||||
gap: 0.65rem;
|
||||
padding: 0.65rem;
|
||||
background-color: var(--background-ui);
|
||||
border-radius: 0.25rem;
|
||||
margin-bottom: 0.85rem;
|
||||
border-left: 3px solid var(--highlight-color);
|
||||
|
||||
@include mobile-only {
|
||||
padding: 0.6rem;
|
||||
gap: 0.55rem;
|
||||
margin-bottom: 0.7rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.4;
|
||||
|
||||
@include mobile-only {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
fill: var(--highlight-color);
|
||||
flex-shrink: 0;
|
||||
|
||||
@include mobile-only {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.signin-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.plex-signin-btn {
|
||||
padding: 1rem 1.75rem;
|
||||
background-color: #c87818;
|
||||
color: $white;
|
||||
border: none;
|
||||
border-radius: 0.75rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.75rem;
|
||||
align-self: flex-start;
|
||||
box-shadow: 0 4px 12px rgba(200, 120, 24, 0.25);
|
||||
letter-spacing: -0.01em;
|
||||
|
||||
@include mobile-only {
|
||||
width: 100%;
|
||||
padding: 0.9rem 1.4rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: #b36a15;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(200, 120, 24, 0.4);
|
||||
}
|
||||
|
||||
&:active:not(:disabled) {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 4px 12px rgba(200, 120, 24, 0.3);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.plex-icon {
|
||||
flex-shrink: 0;
|
||||
--size: 24px;
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
fill: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-note {
|
||||
margin: 0;
|
||||
font-size: 0.85rem;
|
||||
opacity: 0.65;
|
||||
}
|
||||
</style>
|
||||
230
src/components/plex/PlexLibraryItem.vue
Normal file
230
src/components/plex/PlexLibraryItem.vue
Normal file
@@ -0,0 +1,230 @@
|
||||
<template>
|
||||
<a
|
||||
v-if="item.plexUrl"
|
||||
:href="item.plexUrl"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="plex-library-item"
|
||||
>
|
||||
<figure :class="`item-poster ${item.type}`">
|
||||
<img
|
||||
v-if="item.poster"
|
||||
:src="item.poster"
|
||||
:alt="item.title"
|
||||
class="poster-image"
|
||||
@error="handleImageError"
|
||||
/>
|
||||
<div v-else class="poster-fallback">
|
||||
<component :is="fallbackIconComponent" />
|
||||
</div>
|
||||
</figure>
|
||||
|
||||
<div class="item-details">
|
||||
<p class="item-title">{{ item.title }}</p>
|
||||
<div class="item-meta">
|
||||
<span v-if="item.year" class="item-year">{{ item.year }}</span>
|
||||
<span v-if="item.rating" class="item-rating">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
|
||||
<polygon
|
||||
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
|
||||
/>
|
||||
</svg>
|
||||
{{ item.rating }}
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="showExtras" class="item-extras">
|
||||
<span v-if="item.artist">{{ item.artist }}</span>
|
||||
<span v-if="item.episodes">{{ item.episodes }} episodes</span>
|
||||
<span v-if="item.tracks">{{ item.tracks }} tracks</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<div v-else class="plex-library-item plex-library-item--no-link">
|
||||
<figure class="item-poster">
|
||||
<img
|
||||
v-if="item.poster"
|
||||
:src="item.poster"
|
||||
:alt="item.title"
|
||||
class="poster-image"
|
||||
@error="handleImageError"
|
||||
/>
|
||||
<div v-else class="poster-fallback">
|
||||
<component :is="fallbackIconComponent" />
|
||||
</div>
|
||||
</figure>
|
||||
|
||||
<div class="item-details">
|
||||
<p class="item-title">{{ item.title }}</p>
|
||||
<div class="item-meta">
|
||||
<span v-if="item.year" class="item-year">{{ item.year }}</span>
|
||||
<span v-if="item.rating" class="item-rating">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
|
||||
<polygon
|
||||
points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
|
||||
/>
|
||||
</svg>
|
||||
{{ item.rating }}
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="showExtras" class="item-extras">
|
||||
<span v-if="item.artist">{{ item.artist }}</span>
|
||||
<span v-if="item.episodes">{{ item.episodes }} episodes</span>
|
||||
<span v-if="item.tracks">{{ item.tracks }} tracks</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from "vue";
|
||||
import IconMovie from "@/icons/IconMovie.vue";
|
||||
import IconShow from "@/icons/IconShow.vue";
|
||||
import IconMusic from "@/icons/IconMusic.vue";
|
||||
|
||||
interface LibraryItem {
|
||||
title: string;
|
||||
poster?: string;
|
||||
fallbackIcon?: string;
|
||||
year?: number;
|
||||
rating?: number;
|
||||
artist?: string;
|
||||
episodes?: number;
|
||||
tracks?: number;
|
||||
plexUrl?: string | null;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
item: LibraryItem;
|
||||
showExtras?: boolean;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const fallbackIconComponent = computed(() => {
|
||||
if (props.item.fallbackIcon === "🎬") return IconMovie;
|
||||
if (props.item.fallbackIcon === "📺") return IconShow;
|
||||
if (props.item.fallbackIcon === "🎵") return IconMusic;
|
||||
return IconMovie; // Default fallback
|
||||
});
|
||||
|
||||
function handleImageError(event: Event) {
|
||||
const target = event.target as HTMLImageElement;
|
||||
target.style.display = "none";
|
||||
}
|
||||
</script>
|
||||
|
||||
<style style="scss" scoped>
|
||||
.plex-library-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.plex-library-item:hover {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.plex-library-item--no-link {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.plex-library-item--no-link:hover {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.item-poster {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
aspect-ratio: 2 / 3;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background: #333;
|
||||
margin: 0;
|
||||
|
||||
&.music {
|
||||
aspect-ratio: 1/1;
|
||||
}
|
||||
}
|
||||
|
||||
.poster-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.poster-fallback {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #333 0%, #222 100%);
|
||||
padding: 20%;
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
fill: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.item-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
line-height: 1.3;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.item-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.item-year {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.item-rating {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #fbbf24;
|
||||
}
|
||||
|
||||
.item-extras {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
font-size: 11px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.item-title {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.item-meta {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
382
src/components/plex/PlexLibraryModal.vue
Normal file
382
src/components/plex/PlexLibraryModal.vue
Normal file
@@ -0,0 +1,382 @@
|
||||
<template>
|
||||
<div class="modal-overlay library-modal-overlay" @click="emit('close')">
|
||||
<div class="library-modal-content" @click.stop>
|
||||
<div class="library-modal-header">
|
||||
<div class="library-header-title">
|
||||
<div class="library-icon-large">
|
||||
<component :is="libraryIconComponent" />
|
||||
</div>
|
||||
<div>
|
||||
<h3>{{ getLibraryTitle(libraryType) }}</h3>
|
||||
<p class="library-subtitle">{{ details.total }} items</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="close-btn" @click="emit('close')">
|
||||
<IconClose />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="library-modal-body">
|
||||
<!-- Stats Overview -->
|
||||
<div class="library-stats-overview">
|
||||
<div class="overview-stat">
|
||||
<span class="overview-label">Total Items</span>
|
||||
<span class="overview-value">{{
|
||||
formatNumber(details.total)
|
||||
}}</span>
|
||||
</div>
|
||||
|
||||
<div class="overview-stat" v-if="libraryType === 'tv shows'">
|
||||
<span class="overview-label">Seasons</span>
|
||||
<span class="overview-value">{{
|
||||
formatNumber(details?.childCount)
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="overview-stat" v-if="libraryType === 'tv shows'">
|
||||
<span class="overview-label">Episodes</span>
|
||||
<span class="overview-value">{{
|
||||
formatNumber(details?.leafCount)
|
||||
}}</span>
|
||||
</div>
|
||||
|
||||
<div class="overview-stat" v-if="libraryType === 'music'">
|
||||
<span class="overview-label">Tracks</span>
|
||||
<span class="overview-value">{{ details?.totalTracks }}</span>
|
||||
</div>
|
||||
<div class="overview-stat">
|
||||
<span class="overview-label">Duration</span>
|
||||
<span class="overview-value">{{
|
||||
convertSecondsToHumanReadable(details?.duration / 1000)
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recently Added -->
|
||||
<div class="library-section">
|
||||
<h4 class="section-title">Recently Added</h4>
|
||||
<div class="recent-items-grid">
|
||||
<PlexLibraryItem
|
||||
v-for="(item, index) in recentlyAdded"
|
||||
:key="index"
|
||||
:item="item"
|
||||
:show-extras="
|
||||
libraryType === 'music' || libraryType === 'tv shows'
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Top Genres -->
|
||||
<div class="library-section">
|
||||
<h4 class="section-title">Top Genres</h4>
|
||||
<div class="genre-list">
|
||||
<div
|
||||
v-for="(genre, index) in details.genres"
|
||||
:key="index"
|
||||
class="genre-item"
|
||||
>
|
||||
<span class="genre-name">{{ genre.name }}</span>
|
||||
<div class="genre-bar-container">
|
||||
<div
|
||||
class="genre-bar"
|
||||
:style="{
|
||||
width: (genre.count / details.total) * 100 + '%'
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
<span class="genre-count">{{ genre.count }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, onBeforeUnmount, ref } from "vue";
|
||||
import IconClose from "@/icons/IconClose.vue";
|
||||
import IconMovie from "@/icons/IconMovie.vue";
|
||||
import IconShow from "@/icons/IconShow.vue";
|
||||
import IconMusic from "@/icons/IconMusic.vue";
|
||||
import PlexLibraryItem from "@/components/plex/PlexLibraryItem.vue";
|
||||
import { getLibraryTitle } from "@/utils/plexHelpers";
|
||||
import { plexRecentlyAddedInLibrary } from "@/api";
|
||||
import { processLibraryItem } from "@/utils/plexHelpers";
|
||||
import { formatNumber, convertSecondsToHumanReadable } from "@/utils";
|
||||
import { usePlexAuth } from "@/composables/usePlexAuth";
|
||||
|
||||
const { getPlexAuthCookie } = usePlexAuth();
|
||||
const authToken = getPlexAuthCookie();
|
||||
|
||||
interface LibraryDetails {
|
||||
id: number;
|
||||
title: string;
|
||||
total: number;
|
||||
childCount?: number;
|
||||
leafCount?: number;
|
||||
duration: number;
|
||||
genres: Array<{
|
||||
name: string;
|
||||
count: number;
|
||||
}>;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
libraryType: string;
|
||||
details: LibraryDetails;
|
||||
serverUrl: string;
|
||||
serverMachineId: string;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
let recentlyAdded = ref([]);
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: "close"): void;
|
||||
}>();
|
||||
|
||||
const libraryIconComponent = computed(() => {
|
||||
if (props.libraryType === "movies") return IconMovie;
|
||||
if (props.libraryType === "tv shows") return IconShow;
|
||||
if (props.libraryType === "music") return IconMusic;
|
||||
return IconMovie;
|
||||
});
|
||||
|
||||
function fetchRecentlyAdded() {
|
||||
plexRecentlyAddedInLibrary(props.details.id).then(added => {
|
||||
recentlyAdded.value = added?.MediaContainer?.Metadata.map(el =>
|
||||
processLibraryItem(
|
||||
el,
|
||||
props.libraryType,
|
||||
authToken,
|
||||
props.serverUrl,
|
||||
props.serverMachineId
|
||||
)
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
function checkEventForEscapeKey(event: KeyboardEvent) {
|
||||
if (event.key !== "Escape") return;
|
||||
emit("close");
|
||||
}
|
||||
|
||||
window.addEventListener("keyup", checkEventForEscapeKey);
|
||||
|
||||
onMounted(() => {
|
||||
fetchRecentlyAdded();
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener("keyup", checkEventForEscapeKey);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "scss/media-queries.scss";
|
||||
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
backdrop-filter: blur(4px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
padding: 20px;
|
||||
|
||||
@include mobile {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.library-modal-content {
|
||||
background: #1a1a1a;
|
||||
border-radius: 12px;
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
max-height: 90vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
|
||||
|
||||
@include mobile {
|
||||
max-height: 100vh;
|
||||
border-radius: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.library-modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
padding: 24px;
|
||||
border-bottom: 1px solid #333;
|
||||
}
|
||||
|
||||
.library-header-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.library-icon-large {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
fill: var(--highlight-color);
|
||||
}
|
||||
}
|
||||
|
||||
.library-modal-header h3 {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.library-subtitle {
|
||||
margin: 4px 0 0;
|
||||
font-size: 14px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
--size: 2.4rem;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #888;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
height: var(--size);
|
||||
width: var(--size);
|
||||
border-radius: 6px;
|
||||
fill: white;
|
||||
transition: all 0.2s;
|
||||
|
||||
@include mobile {
|
||||
margin: auto 0;
|
||||
}
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
background: #333;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.library-modal-body {
|
||||
padding: 24px;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.library-stats-overview {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 16px;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.overview-stat {
|
||||
background: #252525;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.overview-label {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.overview-value {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.library-section {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin: 0 0 16px;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.recent-items-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.genre-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.genre-item {
|
||||
display: grid;
|
||||
grid-template-columns: 120px 1fr 60px;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.genre-name {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.genre-bar-container {
|
||||
height: 8px;
|
||||
background: #333;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.genre-bar {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #e5a00d 0%, #ffbf3f 100%);
|
||||
border-radius: 4px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.genre-count {
|
||||
font-size: 14px;
|
||||
color: #888;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.library-stats-overview {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.recent-items-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.genre-item {
|
||||
grid-template-columns: 100px 1fr 50px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
214
src/components/plex/PlexLibraryStats.vue
Normal file
214
src/components/plex/PlexLibraryStats.vue
Normal file
@@ -0,0 +1,214 @@
|
||||
<template>
|
||||
<div class="library-stats">
|
||||
<div
|
||||
v-for="stat in displayStats"
|
||||
:key="stat.key"
|
||||
class="stat-card"
|
||||
:class="{
|
||||
disabled: stat.value === undefined || stat.value === 0 || loading,
|
||||
unclickable: !!!stat.clickable
|
||||
}"
|
||||
@click="
|
||||
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 loading-dots" v-else>...</div>
|
||||
<div class="stat-label">{{ stat.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from "vue";
|
||||
import { formatNumber } from '@/utils'
|
||||
import IconMovie from "@/icons/IconMovie.vue";
|
||||
import IconShow from "@/icons/IconShow.vue";
|
||||
import IconMusic from "@/icons/IconMusic.vue";
|
||||
import IconClock from "@/icons/IconClock.vue";
|
||||
|
||||
interface LibraryStat {
|
||||
id: number;
|
||||
title: string;
|
||||
total: number;
|
||||
childCount?: number;
|
||||
leafCount?: number;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
movies: LibraryStat;
|
||||
shows: LibraryStat;
|
||||
music: LibraryStat;
|
||||
watchtime: number;
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
openLibrary: [type: string];
|
||||
}>();
|
||||
|
||||
const displayStats = computed(() => [
|
||||
{
|
||||
key: "movies",
|
||||
icon: IconMovie,
|
||||
value: props.movies,
|
||||
label: "Movies",
|
||||
clickable: true
|
||||
},
|
||||
{
|
||||
key: "tv shows",
|
||||
icon: IconShow,
|
||||
value: props.shows,
|
||||
label: "TV Shows",
|
||||
clickable: true
|
||||
},
|
||||
{
|
||||
key: "music",
|
||||
icon: IconMusic,
|
||||
value: props.music,
|
||||
label: "Albums",
|
||||
clickable: true
|
||||
},
|
||||
{
|
||||
key: "watchtime",
|
||||
icon: IconClock,
|
||||
value: props.watchtime,
|
||||
label: "Hours Watched",
|
||||
clickable: false
|
||||
}
|
||||
]);
|
||||
|
||||
function handleClick(type: string) {
|
||||
emit("openLibrary", type);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "scss/variables";
|
||||
@import "scss/media-queries";
|
||||
|
||||
.library-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 0.85rem;
|
||||
|
||||
@include tablet-only {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
@include mobile-only {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 0.65rem;
|
||||
}
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background-color: var(--background-ui);
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
transition: all 0.2s ease;
|
||||
border: 1px solid transparent;
|
||||
|
||||
@include mobile-only {
|
||||
padding: 0.85rem 0.75rem;
|
||||
}
|
||||
|
||||
&:hover:not(.disabled, .unclickable) {
|
||||
background-color: var(--background-40);
|
||||
border-color: var(--highlight-color);
|
||||
cursor: pointer;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.6;
|
||||
|
||||
&:hover {
|
||||
transform: none;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@include mobile-only {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
fill: var(--highlight-color);
|
||||
transition: fill 0.2s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.stat-card:hover:not(.disabled) .stat-icon svg {
|
||||
fill: var(--color-green-90);
|
||||
}
|
||||
|
||||
.stat-content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-color);
|
||||
line-height: 1;
|
||||
margin-bottom: 0.25rem;
|
||||
|
||||
@include mobile-only {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-color-60);
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
|
||||
@include mobile-only {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-dots {
|
||||
animation: loadingDots 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes loadingDots {
|
||||
0%,
|
||||
20% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
309
src/components/plex/PlexProfileCard.vue
Normal file
309
src/components/plex/PlexProfileCard.vue
Normal file
@@ -0,0 +1,309 @@
|
||||
<template>
|
||||
<div v-if="username" class="plex-profile-card">
|
||||
<div class="profile-header">
|
||||
<img
|
||||
v-if="userData?.thumb"
|
||||
:src="userData.thumb"
|
||||
alt="Profile"
|
||||
class="profile-avatar"
|
||||
/>
|
||||
<div v-else class="profile-avatar-placeholder">
|
||||
{{ username.charAt(0).toUpperCase() }}
|
||||
</div>
|
||||
<div class="profile-info">
|
||||
<div class="username-row">
|
||||
<h3 class="profile-username">{{ username }}</h3>
|
||||
<svg
|
||||
class="connected-checkmark"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="3"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<polyline points="20 6 9 17 4 12"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
<div v-if="userData?.email" class="profile-email">
|
||||
{{ userData.email }}
|
||||
</div>
|
||||
<div class="profile-badges">
|
||||
<div
|
||||
v-if="userData?.subscription?.active"
|
||||
class="profile-badge plex-pass"
|
||||
>
|
||||
<svg
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 256 256"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M128 0C57.3 0 0 57.3 0 128s57.3 128 128 128 128-57.3 128-128S198.7 0 128 0zm0 230.4C66.9 230.4 25.6 189.1 25.6 128S66.9 25.6 128 25.6 230.4 66.9 230.4 128 189.1 230.4 128 230.4z"
|
||||
/>
|
||||
</svg>
|
||||
Plex Pass
|
||||
</div>
|
||||
<div v-if="userData?.joined_at" class="profile-badge member-since">
|
||||
{{ formatMemberSince(userData.joined_at) }}
|
||||
</div>
|
||||
<div
|
||||
v-if="userData?.two_factor_enabled"
|
||||
class="profile-badge two-factor"
|
||||
>
|
||||
<svg
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2.5"
|
||||
>
|
||||
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
|
||||
<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
|
||||
</svg>
|
||||
2FA
|
||||
</div>
|
||||
<div
|
||||
v-if="userData?.experimental_features"
|
||||
class="profile-badge experimental"
|
||||
>
|
||||
<svg
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2.5"
|
||||
>
|
||||
<path
|
||||
d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"
|
||||
></path>
|
||||
</svg>
|
||||
Labs
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
username: string;
|
||||
userData: any;
|
||||
}
|
||||
|
||||
defineProps<Props>();
|
||||
|
||||
function formatMemberSince(dateString: string) {
|
||||
try {
|
||||
const date = new Date(dateString);
|
||||
const now = new Date();
|
||||
const years = now.getFullYear() - date.getFullYear();
|
||||
|
||||
if (years === 0) return "New Member";
|
||||
if (years === 1) return "1 Year";
|
||||
return `${years} Years`;
|
||||
} catch {
|
||||
return "Member";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "scss/variables";
|
||||
@import "scss/media-queries";
|
||||
|
||||
.plex-profile-card {
|
||||
background-color: var(--background-ui);
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem;
|
||||
margin-bottom: 0.85rem;
|
||||
border: 1px solid var(--background-40);
|
||||
|
||||
@include mobile-only {
|
||||
padding: 0.85rem;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-header {
|
||||
display: flex;
|
||||
gap: 0.85rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.profile-avatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 2px solid var(--highlight-color);
|
||||
flex-shrink: 0;
|
||||
|
||||
@include mobile-only {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-avatar-placeholder {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--highlight-color),
|
||||
var(--background-40)
|
||||
);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-color);
|
||||
flex-shrink: 0;
|
||||
|
||||
@include mobile-only {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.username-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.profile-username {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-color);
|
||||
|
||||
@include mobile-only {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.connected-checkmark {
|
||||
color: var(--color-success-highlight);
|
||||
flex-shrink: 0;
|
||||
animation: checkmarkPop 0.3s ease-out;
|
||||
|
||||
@include mobile-only {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes checkmarkPop {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-email {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-color-60);
|
||||
margin-bottom: 0.4rem;
|
||||
word-break: break-all;
|
||||
|
||||
@include mobile-only {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-badges {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
|
||||
.profile-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
padding: 0.25rem 0.65rem;
|
||||
border-radius: 1rem;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
|
||||
@include mobile-only {
|
||||
font-size: 0.65rem;
|
||||
padding: 0.2rem 0.55rem;
|
||||
}
|
||||
|
||||
&.plex-pass {
|
||||
background-color: #cc7b19;
|
||||
color: $white;
|
||||
text-transform: uppercase;
|
||||
|
||||
svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
|
||||
@include mobile-only {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.member-since {
|
||||
background-color: var(--background-40);
|
||||
color: var(--text-color-70);
|
||||
}
|
||||
|
||||
&.two-factor {
|
||||
background-color: var(--color-success);
|
||||
color: $white;
|
||||
|
||||
svg {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
|
||||
@include mobile-only {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.experimental {
|
||||
background-color: #8b5cf6;
|
||||
color: $white;
|
||||
|
||||
svg {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
|
||||
@include mobile-only {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
127
src/components/plex/PlexServerInfo.vue
Normal file
127
src/components/plex/PlexServerInfo.vue
Normal file
@@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<div class="plex-server-info">
|
||||
<div class="plex-details">
|
||||
<div class="detail-row">
|
||||
<span class="detail-label">
|
||||
<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" />
|
||||
Last Sync
|
||||
</span>
|
||||
<span class="detail-value">{{ lastSync || "Never" }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="plex-actions">
|
||||
<seasoned-button @click="$emit('sync')" :disabled="syncing">
|
||||
<IconSync v-if="!syncing" class="button-icon" />
|
||||
{{ syncing ? "Syncing..." : "Sync Library" }}
|
||||
</seasoned-button>
|
||||
<seasoned-button @click="$emit('unlink')">
|
||||
Unlink Account
|
||||
</seasoned-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import SeasonedButton from "@/components/ui/SeasonedButton.vue";
|
||||
import IconServer from "@/icons/IconServer.vue";
|
||||
import IconSync from "@/icons/IconSync.vue";
|
||||
|
||||
interface Props {
|
||||
serverName: string;
|
||||
lastSync: string;
|
||||
syncing?: boolean;
|
||||
}
|
||||
|
||||
defineProps<Props>();
|
||||
defineEmits<{
|
||||
sync: [];
|
||||
unlink: [];
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "scss/variables";
|
||||
@import "scss/media-queries";
|
||||
|
||||
.plex-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
margin-bottom: 0.85rem;
|
||||
}
|
||||
|
||||
.detail-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0.55rem 0.65rem;
|
||||
background-color: var(--background-ui);
|
||||
border-radius: 0.25rem;
|
||||
|
||||
@include mobile-only {
|
||||
padding: 0.5rem 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
|
||||
@include mobile-only {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
svg {
|
||||
color: var(--text-color-60);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.label-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
font-size: 0.95rem;
|
||||
|
||||
@include mobile-only {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
.plex-actions {
|
||||
display: flex;
|
||||
gap: 0.65rem;
|
||||
|
||||
@include mobile-only {
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
|
||||
svg {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.button-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
152
src/components/plex/PlexUnlinkModal.vue
Normal file
152
src/components/plex/PlexUnlinkModal.vue
Normal file
@@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<div class="modal-overlay" @click="emit('cancel')">
|
||||
<div class="modal-content" @click.stop>
|
||||
<div class="modal-header">
|
||||
<h3>Unlink Plex Account</h3>
|
||||
<button class="close-btn" @click="emit('cancel')">
|
||||
<IconClose />
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>
|
||||
Are you sure you want to unlink your Plex account? You will lose
|
||||
access to:
|
||||
</p>
|
||||
<ul>
|
||||
<li>Watch history tracking</li>
|
||||
<li>Recently added content notifications</li>
|
||||
<li>Real-time download progress</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="cancel-btn" @click="emit('cancel')">Cancel</button>
|
||||
<button class="confirm-btn" @click="emit('confirm')">
|
||||
Unlink Account
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import IconClose from "@/icons/IconClose.vue";
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: "confirm"): void;
|
||||
(e: "cancel"): void;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
backdrop-filter: blur(4px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: #1a1a1a;
|
||||
border-radius: 12px;
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 24px;
|
||||
border-bottom: 1px solid #333;
|
||||
}
|
||||
|
||||
.modal-header h3 {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #888;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
background: #333;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.modal-body p {
|
||||
margin: 0 0 16px;
|
||||
color: #ccc;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.modal-body ul {
|
||||
margin: 0;
|
||||
padding-left: 20px;
|
||||
color: #aaa;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.modal-body li {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid #333;
|
||||
}
|
||||
|
||||
.cancel-btn,
|
||||
.confirm-btn {
|
||||
padding: 10px 20px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
background: #333;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.cancel-btn:hover {
|
||||
background: #444;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
background: #dc2626;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.confirm-btn:hover {
|
||||
background: #b91c1c;
|
||||
}
|
||||
</style>
|
||||
@@ -1,31 +1,46 @@
|
||||
<template>
|
||||
<div>
|
||||
<h3 class="settings__header">Change password</h3>
|
||||
<form class="form">
|
||||
<seasoned-input
|
||||
v-model="oldPassword"
|
||||
placeholder="old password"
|
||||
icon="Keyhole"
|
||||
type="password"
|
||||
/>
|
||||
<div class="change-password">
|
||||
<div class="password-card">
|
||||
<form class="password-form" @submit.prevent>
|
||||
<seasoned-input
|
||||
v-model="oldPassword"
|
||||
placeholder="Current password"
|
||||
icon="Keyhole"
|
||||
type="password"
|
||||
/>
|
||||
|
||||
<seasoned-input
|
||||
v-model="newPassword"
|
||||
placeholder="new password"
|
||||
icon="Keyhole"
|
||||
type="password"
|
||||
/>
|
||||
<div class="password-generator">
|
||||
<button class="generator-toggle" @click="toggleGenerator">
|
||||
<IconKey class="toggle-icon" />
|
||||
<span>{{
|
||||
showGenerator ? "Hide" : "Generate Strong Password"
|
||||
}}</span>
|
||||
</button>
|
||||
<div v-if="showGenerator">
|
||||
<password-generator @password-generated="handleGeneratedPassword" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<seasoned-input
|
||||
v-model="newPasswordRepeat"
|
||||
placeholder="repeat new password"
|
||||
icon="Keyhole"
|
||||
type="password"
|
||||
/>
|
||||
<seasoned-input
|
||||
v-model="newPassword"
|
||||
placeholder="New password"
|
||||
icon="Keyhole"
|
||||
type="password"
|
||||
/>
|
||||
|
||||
<seasoned-button @click="changePassword">change password</seasoned-button>
|
||||
</form>
|
||||
<seasoned-messages v-model:messages="messages" />
|
||||
<seasoned-input
|
||||
v-model="newPasswordRepeat"
|
||||
placeholder="Confirm new password"
|
||||
icon="Keyhole"
|
||||
type="password"
|
||||
/>
|
||||
|
||||
<seasoned-button @click="changePassword" :disabled="loading">
|
||||
{{ loading ? "Updating..." : "Change Password" }}
|
||||
</seasoned-button>
|
||||
</form>
|
||||
<seasoned-messages v-model:messages="messages" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -34,65 +49,99 @@
|
||||
import SeasonedInput from "@/components/ui/SeasonedInput.vue";
|
||||
import SeasonedButton from "@/components/ui/SeasonedButton.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 { ErrorMessageTypes } from "../../interfaces/IErrorMessage";
|
||||
import type { IErrorMessage } from "../../interfaces/IErrorMessage";
|
||||
|
||||
// interface ResetPasswordPayload {
|
||||
// old_password: string;
|
||||
// new_password: string;
|
||||
// }
|
||||
|
||||
const showGenerator = ref(false);
|
||||
const oldPassword: Ref<string> = ref("");
|
||||
const newPassword: Ref<string> = ref("");
|
||||
const newPasswordRepeat: Ref<string> = ref("");
|
||||
const messages: Ref<IErrorMessage[]> = ref([]);
|
||||
const loading = ref(false);
|
||||
|
||||
function addWarningMessage(message: string, title?: string) {
|
||||
messages.value.push({
|
||||
message,
|
||||
title,
|
||||
type: ErrorMessageTypes.Warning
|
||||
} as IErrorMessage);
|
||||
function handleGeneratedPassword(password: string) {
|
||||
newPassword.value = password;
|
||||
newPasswordRepeat.value = password;
|
||||
}
|
||||
|
||||
function validate() {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (!oldPassword.value || oldPassword?.value?.length === 0) {
|
||||
addWarningMessage("Missing old password!", "Validation error");
|
||||
reject();
|
||||
}
|
||||
|
||||
if (!newPassword.value || newPassword?.value?.length === 0) {
|
||||
addWarningMessage("Missing new password!", "Validation error");
|
||||
reject();
|
||||
}
|
||||
|
||||
if (newPassword.value !== newPasswordRepeat.value) {
|
||||
addWarningMessage(
|
||||
"Password and password repeat do not match!",
|
||||
"Validation error"
|
||||
);
|
||||
reject();
|
||||
}
|
||||
|
||||
resolve(true);
|
||||
});
|
||||
}
|
||||
|
||||
// TODO seasoned-api /user/password-reset
|
||||
async function changePassword() {
|
||||
async function changePassword(event: CustomEvent) {
|
||||
try {
|
||||
validate();
|
||||
messages.value.push({
|
||||
message: "Password change is currently disabled",
|
||||
title: "Feature Disabled",
|
||||
type: ErrorMessageTypes.Warning
|
||||
} as IErrorMessage);
|
||||
|
||||
// Clear form
|
||||
oldPassword.value = "";
|
||||
newPassword.value = "";
|
||||
newPasswordRepeat.value = "";
|
||||
|
||||
loading.value = false;
|
||||
} catch (error) {
|
||||
console.log("not valid! error:", error); // eslint-disable-line no-console
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// const body: ResetPasswordPayload = {
|
||||
// old_password: oldPassword.value,
|
||||
// new_password: newPassword.value
|
||||
// };
|
||||
// const options = {};
|
||||
// fetch()
|
||||
function toggleGenerator() {
|
||||
showGenerator.value = !showGenerator.value;
|
||||
/*
|
||||
if (showGenerator.value && !generatedPassword.value) {
|
||||
generateWordsPassword();
|
||||
}
|
||||
*/
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "scss/variables";
|
||||
@import "scss/media-queries";
|
||||
|
||||
.password-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
.password-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
.generator-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem;
|
||||
background-color: var(--background-ui);
|
||||
border: 1px solid var(--background-40);
|
||||
border-radius: 0.5rem;
|
||||
color: $text-color;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
font-size: 0.9rem;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--background-40);
|
||||
border-color: var(--highlight-color);
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
fill: var(--highlight-color);
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: currentColor;
|
||||
}
|
||||
</style>
|
||||
|
||||
72
src/components/settings/DangerZoneAction.vue
Normal file
72
src/components/settings/DangerZoneAction.vue
Normal file
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<div class="danger-zone">
|
||||
<h3 class="danger-zone__title">{{ title }}</h3>
|
||||
<p class="danger-zone__description">
|
||||
{{ description }}
|
||||
</p>
|
||||
<button class="danger-zone__button" @click="$emit('action')">
|
||||
{{ buttonText }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
title: string;
|
||||
description: string;
|
||||
buttonText: string;
|
||||
}
|
||||
|
||||
interface Emit {
|
||||
(e: "action"): void;
|
||||
}
|
||||
|
||||
defineProps<Props>();
|
||||
defineEmits<Emit>();
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "scss/variables";
|
||||
@import "scss/media-queries";
|
||||
|
||||
.danger-zone {
|
||||
padding: 1.25rem;
|
||||
background: rgba(220, 48, 35, 0.1);
|
||||
border: 1px solid var(--color-error-highlight);
|
||||
border-radius: 0.5rem;
|
||||
|
||||
@include mobile-only {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-error-highlight);
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-color-70);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
&__button {
|
||||
padding: 0.625rem 1.25rem;
|
||||
background: var(--color-error);
|
||||
color: white;
|
||||
border: 1px solid var(--color-error-highlight);
|
||||
border-radius: 0.375rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background: var(--color-error-highlight);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
53
src/components/settings/DataExport.vue
Normal file
53
src/components/settings/DataExport.vue
Normal file
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div class="data-export">
|
||||
<div class="export-options">
|
||||
<!-- Request History Card -->
|
||||
<RequestHistory :data="requestStats" />
|
||||
|
||||
<!-- Export Data Card -->
|
||||
<ExportSection :data="requestStats" />
|
||||
|
||||
<!-- Local Storage Items -->
|
||||
<StorageManager />
|
||||
|
||||
<!-- Delete Account -->
|
||||
<DangerZoneAction
|
||||
title="Delete Account"
|
||||
description="Permanently delete your account and all associated data. This action cannot be undone."
|
||||
button-text="Delete My Account"
|
||||
@action="confirmDelete"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import StorageManager from "./StorageManager.vue";
|
||||
import ExportSection from "./ExportSection.vue"
|
||||
import RequestHistory from "./RequestHistory.vue"
|
||||
import DangerZoneAction from "./DangerZoneAction.vue";
|
||||
|
||||
const requestStats = ref({
|
||||
total: 45,
|
||||
approved: 38,
|
||||
pending: 7
|
||||
});
|
||||
|
||||
function confirmDelete() {
|
||||
const confirmed = confirm(
|
||||
"Are you sure you want to *permanently delete* your account and all associated data? This action cannot be undone."
|
||||
);
|
||||
|
||||
if (!confirmed) return;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.export-options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.65rem;
|
||||
gap: 2rem;
|
||||
}
|
||||
</style>
|
||||
127
src/components/settings/ExportSection.vue
Normal file
127
src/components/settings/ExportSection.vue
Normal file
@@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<div class="settings-section-card">
|
||||
<div class="settings-section-header">
|
||||
<h2>Export Your Data</h2>
|
||||
<p>
|
||||
Download a copy of your account data including requests, watch history,
|
||||
and preferences.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Export to JSON & CSV section -->
|
||||
<div class="export-actions">
|
||||
<button
|
||||
class="export-btn"
|
||||
@click="() => exportData('json')"
|
||||
:disabled="exporting"
|
||||
>
|
||||
<IconActivity v-if="exporting" class="spin" />
|
||||
<span v-else>Export as JSON</span>
|
||||
</button>
|
||||
<button
|
||||
class="export-btn"
|
||||
@click="() => exportData('csv')"
|
||||
:disabled="exporting"
|
||||
>
|
||||
<IconActivity v-if="exporting" class="spin" />
|
||||
<span v-else>Export as CSV</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, defineProps } from "vue";
|
||||
import IconActivity from "@/icons/IconActivity.vue";
|
||||
|
||||
interface Props {
|
||||
data: any;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const exporting = ref(false);
|
||||
|
||||
async function exportData(format: "json" | "csv") {
|
||||
exporting.value = true;
|
||||
|
||||
// Mock export
|
||||
await new Promise(resolve => setTimeout(resolve, 1500));
|
||||
|
||||
const data = {
|
||||
username: "user123",
|
||||
requests: props?.data,
|
||||
exportDate: new Date().toISOString()
|
||||
};
|
||||
|
||||
const blob = new Blob(
|
||||
[format === "json" ? JSON.stringify(data, null, 2) : convertToCSV(data)],
|
||||
{ type: format === "json" ? "application/json" : "text/csv" }
|
||||
);
|
||||
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement("a");
|
||||
link.href = url;
|
||||
link.download = `seasoned-data-export.${format}`;
|
||||
link.click();
|
||||
URL.revokeObjectURL(url);
|
||||
|
||||
exporting.value = false;
|
||||
}
|
||||
|
||||
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>
|
||||
@import "scss/media-queries";
|
||||
@import "scss/shared-settings";
|
||||
|
||||
.export-actions {
|
||||
display: flex;
|
||||
gap: 0.55rem;
|
||||
|
||||
@include mobile-only {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.export-btn {
|
||||
flex: 1;
|
||||
padding: 0.55rem 0.85rem;
|
||||
background-color: var(--highlight-color);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.35rem;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background-color: var(--color-green-90);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: white;
|
||||
|
||||
&.spin {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
597
src/components/settings/PasswordGenerator.vue
Normal file
597
src/components/settings/PasswordGenerator.vue
Normal file
@@ -0,0 +1,597 @@
|
||||
<template>
|
||||
<div class="password-generator">
|
||||
<div class="generator-panel">
|
||||
<div class="generator-tabs">
|
||||
<button
|
||||
:class="['tab', { 'tab--active': mode === 'words' }]"
|
||||
@click="mode = 'words'"
|
||||
>
|
||||
Passphrase
|
||||
</button>
|
||||
<button
|
||||
:class="['tab', { 'tab--active': mode === 'chars' }]"
|
||||
@click="mode = 'chars'"
|
||||
>
|
||||
Random
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="mode === 'words'" class="generator-content">
|
||||
<div class="generator-header">
|
||||
<h4>Passphrase Generator</h4>
|
||||
<p>Create a memorable password using random words</p>
|
||||
</div>
|
||||
|
||||
<div class="password-display" @click="copyPassword">
|
||||
<span class="password-text password-text--mono">{{
|
||||
generatedPassword
|
||||
}}</span>
|
||||
<button
|
||||
class="copy-btn"
|
||||
:title="copied ? 'Copied!' : 'Click to copy'"
|
||||
>
|
||||
{{ copied ? "✓" : "📋" }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="generator-options">
|
||||
<div class="option-row">
|
||||
<div class="slider-header">
|
||||
<label>Words</label>
|
||||
<span class="slider-value">{{ wordCount }}</span>
|
||||
</div>
|
||||
<input
|
||||
v-model.number="wordCount"
|
||||
type="range"
|
||||
min="3"
|
||||
max="7"
|
||||
class="slider"
|
||||
@input="generateWordsPassword"
|
||||
/>
|
||||
<div class="slider-labels">
|
||||
<span>3</span>
|
||||
<span>7</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="generator-content">
|
||||
<div class="generator-header">
|
||||
<h4>Random Password Generator</h4>
|
||||
<p>Generate a secure random password</p>
|
||||
</div>
|
||||
|
||||
<div class="password-display" @click="copyPassword">
|
||||
<span class="password-text password-text--mono">{{
|
||||
generatedPassword
|
||||
}}</span>
|
||||
<button
|
||||
class="copy-btn"
|
||||
:title="copied ? 'Copied!' : 'Click to copy'"
|
||||
>
|
||||
{{ copied ? "✓" : "📋" }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="generator-options">
|
||||
<div class="option-row">
|
||||
<div class="slider-header">
|
||||
<label>Length</label>
|
||||
<span class="slider-value">{{ charLength }}</span>
|
||||
</div>
|
||||
<input
|
||||
v-model.number="charLength"
|
||||
type="range"
|
||||
min="12"
|
||||
max="46"
|
||||
class="slider"
|
||||
@input="generateCharsPassword"
|
||||
/>
|
||||
<div class="slider-labels">
|
||||
<span>12</span>
|
||||
<span>46</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="option-row checkbox-row">
|
||||
<label>
|
||||
<input
|
||||
v-model="includeUppercase"
|
||||
type="checkbox"
|
||||
@change="generateCharsPassword"
|
||||
/>
|
||||
Uppercase (A-Z)
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
v-model="includeLowercase"
|
||||
type="checkbox"
|
||||
@change="generateCharsPassword"
|
||||
/>
|
||||
Lowercase (a-z)
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
v-model="includeNumbers"
|
||||
type="checkbox"
|
||||
@change="generateCharsPassword"
|
||||
/>
|
||||
Numbers (0-9)
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
v-model="includeSymbols"
|
||||
type="checkbox"
|
||||
@change="generateCharsPassword"
|
||||
/>
|
||||
Symbols (!@#$)
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="generator-actions">
|
||||
<button class="action-btn action-btn--secondary" @click="regenerate">
|
||||
<IconActivity class="btn-icon" />
|
||||
Regenerate
|
||||
</button>
|
||||
<button class="action-btn action-btn--primary" @click="usePassword">
|
||||
Use This Password
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch, onMounted } from "vue";
|
||||
import IconActivity from "@/icons/IconActivity.vue";
|
||||
import { useRandomWords } from "@/composables/useRandomWords";
|
||||
|
||||
interface Emit {
|
||||
(e: "passwordGenerated", password: string): void;
|
||||
}
|
||||
|
||||
const emit = defineEmits<Emit>();
|
||||
|
||||
const mode = ref<"words" | "chars">("words");
|
||||
const generatedPassword = ref("");
|
||||
const copied = ref(false);
|
||||
|
||||
// Words mode options
|
||||
const wordCount = ref(4);
|
||||
const separator = ref("-");
|
||||
|
||||
// Chars mode options
|
||||
const charLength = ref(16);
|
||||
const includeUppercase = ref(true);
|
||||
const includeLowercase = ref(true);
|
||||
const includeNumbers = ref(true);
|
||||
const includeSymbols = ref(true);
|
||||
|
||||
const { getRandomWords } = useRandomWords();
|
||||
|
||||
async function generateWordsPassword() {
|
||||
const words = await getRandomWords(wordCount.value);
|
||||
const password = words.join(separator.value);
|
||||
generatedPassword.value = password;
|
||||
}
|
||||
|
||||
function generateCharsPassword() {
|
||||
let charset = "";
|
||||
|
||||
if (includeUppercase.value) charset += "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
|
||||
if (includeLowercase.value) charset += "abcdefghijklmnopqrstuvwxyz";
|
||||
if (includeNumbers.value) charset += "0123456789";
|
||||
if (includeSymbols.value) charset += "!@#$%^&*()_+-=[]{}|;:,.<>?";
|
||||
|
||||
if (charset === "") charset = "abcdefghijklmnopqrstuvwxyz";
|
||||
|
||||
let password = "";
|
||||
for (let i = 0; i < charLength.value; i++) {
|
||||
password += charset.charAt(Math.floor(Math.random() * charset.length));
|
||||
}
|
||||
|
||||
generatedPassword.value = password;
|
||||
}
|
||||
|
||||
async function regenerate() {
|
||||
if (mode.value === "words") {
|
||||
await generateWordsPassword();
|
||||
} else {
|
||||
generateCharsPassword();
|
||||
}
|
||||
}
|
||||
|
||||
async function copyPassword() {
|
||||
try {
|
||||
await navigator.clipboard.writeText(generatedPassword.value);
|
||||
copied.value = true;
|
||||
setTimeout(() => {
|
||||
copied.value = false;
|
||||
}, 2000);
|
||||
} catch (err) {
|
||||
console.error("Failed to copy:", err);
|
||||
}
|
||||
}
|
||||
|
||||
function usePassword() {
|
||||
emit("passwordGenerated", generatedPassword.value);
|
||||
// TODO: emit
|
||||
// showGenerator.value = false;
|
||||
}
|
||||
|
||||
watch(mode, async () => {
|
||||
if (mode.value === "words") {
|
||||
await generateWordsPassword();
|
||||
} else {
|
||||
generateCharsPassword();
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(generateWordsPassword);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "scss/variables";
|
||||
@import "scss/media-queries";
|
||||
|
||||
.password-generator {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.generator-panel {
|
||||
margin-top: 0.75rem;
|
||||
padding: 1rem;
|
||||
background-color: var(--background-ui);
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid var(--background-40);
|
||||
|
||||
@include mobile-only {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.generator-tabs {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.tab {
|
||||
flex: 1;
|
||||
padding: 0.65rem 1rem;
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--background-40);
|
||||
border-radius: 0.25rem;
|
||||
color: $text-color-70;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
font-size: 0.9rem;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--background-40);
|
||||
}
|
||||
|
||||
&--active {
|
||||
background-color: var(--highlight-color);
|
||||
border-color: var(--highlight-color);
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.generator-content {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.generator-header {
|
||||
margin-bottom: 0.75rem;
|
||||
|
||||
h4 {
|
||||
margin: 0 0 0.15rem 0;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
color: $text-color;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
font-size: 0.8rem;
|
||||
color: $text-color-70;
|
||||
line-height: 1.3;
|
||||
}
|
||||
}
|
||||
|
||||
.password-display {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
background-color: var(--background-color);
|
||||
border: 2px solid var(--highlight-color);
|
||||
border-radius: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--background-40);
|
||||
}
|
||||
|
||||
@include mobile-only {
|
||||
padding: 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.password-text {
|
||||
flex: 1;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 500;
|
||||
color: var(--highlight-color);
|
||||
user-select: all;
|
||||
word-break: break-all;
|
||||
word-break: break-word;
|
||||
-webkit-hyphens: auto;
|
||||
hyphens: auto;
|
||||
|
||||
@include mobile-only {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
&--mono {
|
||||
font-family: "Courier New", monospace;
|
||||
|
||||
@include mobile-only {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.25rem;
|
||||
cursor: pointer;
|
||||
padding: 0.25rem;
|
||||
transition: transform 0.2s;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
.generator-options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.option-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
|
||||
label {
|
||||
font-size: 0.95rem;
|
||||
color: $text-color;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
&.checkbox-row {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
|
||||
@include mobile-only {
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
|
||||
input[type="checkbox"] {
|
||||
cursor: pointer;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slider-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.slider-value {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: var(--highlight-color);
|
||||
min-width: 2.5rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.slider-labels {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 0.75rem;
|
||||
color: $text-color-50;
|
||||
margin-top: 0.25rem;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
|
||||
.slider {
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
border-radius: 5px;
|
||||
background: var(--background-40);
|
||||
outline: none;
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
margin: 0.5rem 0;
|
||||
|
||||
@include mobile-only {
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--background-40);
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
appearance: none;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background: var(--highlight-color);
|
||||
cursor: grab;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
transition: all 0.2s;
|
||||
margin-top: -7px;
|
||||
|
||||
@include mobile-only {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin-top: -8px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
&:active {
|
||||
cursor: grabbing;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background: var(--highlight-color);
|
||||
cursor: grab;
|
||||
border: none;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
transition: all 0.2s;
|
||||
|
||||
@include mobile-only {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
&:active {
|
||||
cursor: grabbing;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
&::-webkit-slider-runnable-track {
|
||||
height: 10px;
|
||||
border-radius: 5px;
|
||||
|
||||
@include mobile-only {
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
height: 10px;
|
||||
border-radius: 5px;
|
||||
background: var(--background-40);
|
||||
|
||||
@include mobile-only {
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.separator-input {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid var(--background-40);
|
||||
border-radius: 0.25rem;
|
||||
background-color: var(--background-color);
|
||||
color: $text-color;
|
||||
font-size: 0.85rem;
|
||||
font-family: "Courier New", monospace;
|
||||
text-align: center;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--highlight-color);
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: $text-color-50;
|
||||
font-family: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.generator-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
|
||||
@include mobile-only {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
padding: 0.6rem 1rem;
|
||||
border: none;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.4rem;
|
||||
|
||||
&--secondary {
|
||||
background-color: var(--background-color);
|
||||
color: $text-color;
|
||||
border: 1px solid var(--background-40);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--background-40);
|
||||
}
|
||||
}
|
||||
|
||||
&--primary {
|
||||
background-color: var(--highlight-color);
|
||||
color: $white;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-green-90);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: currentColor;
|
||||
}
|
||||
</style>
|
||||
349
src/components/settings/PlexSettings.vue
Normal file
349
src/components/settings/PlexSettings.vue
Normal file
@@ -0,0 +1,349 @@
|
||||
<template>
|
||||
<div class="plex-settings">
|
||||
<!-- Unconnected state -->
|
||||
<PlexAuthButton
|
||||
v-if="!showPlexInformation"
|
||||
@auth-success="handleAuthSuccess"
|
||||
@auth-error="handleAuthError"
|
||||
/>
|
||||
|
||||
<!-- Connected state -->
|
||||
<div v-else class="plex-connected">
|
||||
<PlexProfileCard
|
||||
v-if="plexUsername"
|
||||
:username="plexUsername"
|
||||
:userData="plexUserData"
|
||||
/>
|
||||
|
||||
<PlexLibraryStats
|
||||
:movies="libraryStats?.movies"
|
||||
:shows="libraryStats?.['tv shows']"
|
||||
:music="libraryStats?.music"
|
||||
:watchtime="libraryStats?.watchtime || 0"
|
||||
:loading="syncingLibrary"
|
||||
@open-library="showLibraryDetails"
|
||||
/>
|
||||
|
||||
<PlexServerInfo
|
||||
:serverName="plexServer"
|
||||
:lastSync="lastSync"
|
||||
:syncing="syncingServer"
|
||||
@sync="syncLibrary"
|
||||
@unlink="() => (showUnlinkModal = true)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Messages -->
|
||||
<SeasonedMessages v-model:messages="messages" />
|
||||
|
||||
<!-- Unlink Confirmation Modal -->
|
||||
<PlexUnlinkModal
|
||||
v-if="showUnlinkModal"
|
||||
@confirm="unauthenticatePlex"
|
||||
@cancel="() => (showUnlinkModal = false)"
|
||||
/>
|
||||
|
||||
<!-- Library Details Modal -->
|
||||
<PlexLibraryModal
|
||||
v-if="showLibraryModal && selectedLibrary"
|
||||
:libraryType="selectedLibrary"
|
||||
:details="libraryStats[selectedLibrary]"
|
||||
:serverUrl="plexServerUrl"
|
||||
:serverMachineId="plexMachineId"
|
||||
@close="closeLibraryModal"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
import SeasonedMessages from "@/components/ui/SeasonedMessages.vue";
|
||||
import PlexAuthButton from "@/components/plex/PlexAuthButton.vue";
|
||||
import PlexProfileCard from "@/components/plex/PlexProfileCard.vue";
|
||||
import PlexLibraryStats from "@/components/plex/PlexLibraryStats.vue";
|
||||
import PlexServerInfo from "@/components/plex/PlexServerInfo.vue";
|
||||
import PlexUnlinkModal from "@/components/plex/PlexUnlinkModal.vue";
|
||||
import PlexLibraryModal from "@/components/plex/PlexLibraryModal.vue";
|
||||
import { usePlexAuth } from "@/composables/usePlexAuth";
|
||||
import {
|
||||
fetchPlexServers,
|
||||
fetchPlexUserData,
|
||||
fetchLibraryDetails
|
||||
} from "@/composables/usePlexApi";
|
||||
import type { Ref } from "vue";
|
||||
import { ErrorMessageTypes } from "../../interfaces/IErrorMessage";
|
||||
import type { IErrorMessage } from "../../interfaces/IErrorMessage";
|
||||
|
||||
const messages: Ref<IErrorMessage[]> = ref([]);
|
||||
const syncingServer = ref(false);
|
||||
const syncingLibrary = ref(false);
|
||||
const showUnlinkModal = ref(false);
|
||||
const plexUsername = ref<string>("");
|
||||
const plexUserData = ref<any>(null);
|
||||
const showPlexInformation = ref<boolean>(false);
|
||||
const hasLocalStorageData = ref<boolean>(false);
|
||||
const showLibraryModal = ref<boolean>(false);
|
||||
const selectedLibrary = ref<string>("");
|
||||
|
||||
const plexServer = ref("");
|
||||
const plexServerUrl = ref("");
|
||||
const plexMachineId = ref("");
|
||||
const lastSync = ref(sessionStorage.getItem("plex_library_last_sync"));
|
||||
const libraryStats = ref({
|
||||
movies: 0,
|
||||
shows: 0,
|
||||
music: 0,
|
||||
watchtime: 0
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: "reload"): void;
|
||||
}>();
|
||||
|
||||
// Composables
|
||||
const { getPlexAuthCookie, setPlexAuthCookie, cleanup } = usePlexAuth();
|
||||
|
||||
// ----- Connection check -----
|
||||
function checkPlexConnection() {
|
||||
const authToken = getPlexAuthCookie();
|
||||
showPlexInformation.value = !!authToken;
|
||||
return showPlexInformation.value;
|
||||
}
|
||||
|
||||
// ----- Library loading -----
|
||||
async function loadPlexServer() {
|
||||
// return cached value from sessionStorage if exists
|
||||
const cacheKey = "plex_server_data";
|
||||
const cachedData = sessionStorage.getItem(cacheKey);
|
||||
if (cachedData) {
|
||||
const server = JSON.parse(cachedData);
|
||||
plexServer.value = server?.name;
|
||||
plexServerUrl.value = server?.url;
|
||||
plexMachineId.value = server?.machineIdentifier;
|
||||
return;
|
||||
}
|
||||
|
||||
// get token from cookie
|
||||
const authToken = getPlexAuthCookie();
|
||||
if (!authToken) return;
|
||||
|
||||
// make api call for data
|
||||
syncingServer.value = true;
|
||||
const server = await fetchPlexServers(authToken);
|
||||
|
||||
if (server) {
|
||||
// set server name & id
|
||||
plexServer.value = server?.name;
|
||||
plexServerUrl.value = server?.url;
|
||||
plexMachineId.value = server?.machineIdentifier;
|
||||
// cache in sessionStorage
|
||||
sessionStorage.setItem(cacheKey, JSON.stringify(server));
|
||||
|
||||
// set last-sync date
|
||||
const now = new Date().toLocaleString();
|
||||
lastSync.value = now;
|
||||
sessionStorage.setItem("plex_library_last_sync", now);
|
||||
} else {
|
||||
console.log("unable to load plex server informmation");
|
||||
}
|
||||
|
||||
syncingServer.value = false;
|
||||
}
|
||||
|
||||
// ----- User data loading -----
|
||||
async function loadPlexUserData() {
|
||||
// return cached value from sessionStorage if exists
|
||||
const cacheKey = "plex_user_data";
|
||||
const cachedData = sessionStorage.getItem(cacheKey);
|
||||
hasLocalStorageData.value = !!cachedData;
|
||||
if (cachedData) {
|
||||
plexUserData.value = JSON.parse(cachedData);
|
||||
plexUsername.value = plexUserData.value.username;
|
||||
return;
|
||||
}
|
||||
|
||||
// get token from cookie
|
||||
const authToken = getPlexAuthCookie();
|
||||
if (!authToken) return;
|
||||
|
||||
// make api call for data
|
||||
const userData = await fetchPlexUserData(authToken);
|
||||
|
||||
if (userData) {
|
||||
// set plex user data
|
||||
plexUserData.value = userData;
|
||||
plexUsername.value = userData?.username;
|
||||
|
||||
// cache in sessionStorage
|
||||
sessionStorage.setItem(cacheKey, JSON.stringify(userData));
|
||||
} else {
|
||||
console.log("unable to load user data from plex");
|
||||
}
|
||||
}
|
||||
|
||||
// ----- Load plex libary details -----
|
||||
async function loadPlexLibraries() {
|
||||
// return cached value from sessionStorage if exists
|
||||
const cacheKey = "plex_library_data";
|
||||
const cachedData = sessionStorage.getItem(cacheKey);
|
||||
hasLocalStorageData.value = !!cachedData;
|
||||
if (cachedData) {
|
||||
libraryStats.value = JSON.parse(cachedData);
|
||||
return;
|
||||
}
|
||||
|
||||
// get token from cookie
|
||||
const authToken = getPlexAuthCookie();
|
||||
if (!authToken) return;
|
||||
|
||||
// make api call for data
|
||||
syncingLibrary.value = true;
|
||||
const library = await fetchLibraryDetails();
|
||||
|
||||
if (library) {
|
||||
libraryStats.value = library;
|
||||
// cache in sessionStorage
|
||||
sessionStorage.setItem(cacheKey, JSON.stringify(library));
|
||||
} else {
|
||||
console.log("unable to load plex library details");
|
||||
}
|
||||
|
||||
syncingLibrary.value = false;
|
||||
}
|
||||
|
||||
// ----- OAuth flow (handlers for PlexAuthButton events) -----
|
||||
async function handleAuthSuccess(authToken: string) {
|
||||
setPlexAuthCookie(authToken);
|
||||
checkPlexConnection();
|
||||
const success = await loadAll();
|
||||
|
||||
if (success) {
|
||||
messages.value.push({
|
||||
type: ErrorMessageTypes.Success,
|
||||
title: "Authenticated with Plex",
|
||||
message: "Successfully connected your Plex account"
|
||||
} as IErrorMessage);
|
||||
} else {
|
||||
console.error("[PlexSettings] Error in handleAuthSuccess:");
|
||||
|
||||
messages.value.push({
|
||||
type: ErrorMessageTypes.Error,
|
||||
title: "Authentication failed",
|
||||
message: "An error occurred while connecting to Plex"
|
||||
} as IErrorMessage);
|
||||
}
|
||||
}
|
||||
|
||||
function handleAuthError(errorMessage: string) {
|
||||
messages.value.push({
|
||||
type: ErrorMessageTypes.Error,
|
||||
title: "Authentication failed",
|
||||
message: errorMessage
|
||||
} as IErrorMessage);
|
||||
}
|
||||
|
||||
// ----- Unlink flow -----
|
||||
async function unauthenticatePlex() {
|
||||
showUnlinkModal.value = false;
|
||||
sessionStorage.removeItem("plex_user_data");
|
||||
sessionStorage.removeItem("plex_server_data");
|
||||
sessionStorage.removeItem("plex_library_data");
|
||||
sessionStorage.removeItem("plex_library_last_sync");
|
||||
document.cookie =
|
||||
"plex_auth_token=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC; SameSite=Strict";
|
||||
plexUserData.value = null;
|
||||
plexUsername.value = "";
|
||||
showPlexInformation.value = false;
|
||||
emit("reload");
|
||||
|
||||
messages.value.push({
|
||||
type: ErrorMessageTypes.Success,
|
||||
title: "Unlinked Plex account",
|
||||
message: "All browser storage has been clear of plex account"
|
||||
} as IErrorMessage);
|
||||
}
|
||||
|
||||
// ----- Library modal -----
|
||||
function showLibraryDetails(type: string) {
|
||||
selectedLibrary.value = type;
|
||||
document.getElementsByTagName("body")[0].classList.add("no-scroll");
|
||||
showLibraryModal.value = true;
|
||||
}
|
||||
function closeLibraryModal() {
|
||||
showLibraryModal.value = false;
|
||||
document.getElementsByTagName("body")[0].classList.remove("no-scroll");
|
||||
selectedLibrary.value = "";
|
||||
}
|
||||
|
||||
// ----- Sync -----
|
||||
async function syncLibrary() {
|
||||
const authToken = getPlexAuthCookie();
|
||||
if (!authToken) {
|
||||
messages.value.push({
|
||||
type: ErrorMessageTypes.Error,
|
||||
title: "Sync failed",
|
||||
message: "No authentication token found"
|
||||
} as IErrorMessage);
|
||||
return;
|
||||
}
|
||||
|
||||
sessionStorage.removeItem("plex_user_data");
|
||||
sessionStorage.removeItem("plex_server_data");
|
||||
sessionStorage.removeItem("plex_library_data");
|
||||
|
||||
const success = await loadAll();
|
||||
|
||||
if (success) {
|
||||
messages.value.push({
|
||||
type: ErrorMessageTypes.Success,
|
||||
title: "Library synced",
|
||||
message: "Your Plex library has been successfully synced"
|
||||
} as IErrorMessage);
|
||||
} else {
|
||||
messages.value.push({
|
||||
type: ErrorMessageTypes.Error,
|
||||
title: "Sync failed",
|
||||
message: "An error occurred while syncing your library"
|
||||
} as IErrorMessage);
|
||||
}
|
||||
}
|
||||
|
||||
// ---- Helper load all ----
|
||||
async function loadAll() {
|
||||
let success = false;
|
||||
|
||||
try {
|
||||
await Promise.all([
|
||||
loadPlexServer(),
|
||||
loadPlexUserData(),
|
||||
loadPlexLibraries()
|
||||
]);
|
||||
|
||||
success = true;
|
||||
} catch (error) {
|
||||
console.log("loadall error, some info might be missing");
|
||||
}
|
||||
|
||||
checkPlexConnection();
|
||||
return success;
|
||||
}
|
||||
|
||||
// ---- Lifecycle functions ----
|
||||
onMounted(loadAll);
|
||||
|
||||
onUnmounted(() => {
|
||||
cleanup();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.plex-settings {
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.plex-connected {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
</style>
|
||||
233
src/components/settings/ProfileHero.vue
Normal file
233
src/components/settings/ProfileHero.vue
Normal file
@@ -0,0 +1,233 @@
|
||||
<template>
|
||||
<div class="profile-hero">
|
||||
<div class="profile-hero__main">
|
||||
<div class="profile-hero__avatar">
|
||||
<div class="avatar-large">{{ userInitials }}</div>
|
||||
</div>
|
||||
<div class="profile-hero__info">
|
||||
<h1 class="profile-hero__name">{{ username }}</h1>
|
||||
<span :class="['profile-hero__badge', `badge--${userRole}`]">
|
||||
<a v-if="userRole === 'admin'" href="/admin">{{ userRole }}</a>
|
||||
<span v-else>{{ userRole }}</span>
|
||||
</span>
|
||||
<p class="profile-hero__member">Member since {{ memberSince }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="profile-hero__stats">
|
||||
<div class="stat-large">
|
||||
<span class="stat-large__value">{{ stats.totalRequests }}</span>
|
||||
<span class="stat-large__label">Requests</span>
|
||||
</div>
|
||||
<div class="stat-divider"></div>
|
||||
<div class="stat-large">
|
||||
<span class="stat-large__value">{{ stats.magnetsAdded }}</span>
|
||||
<span class="stat-large__label">Magnets Added</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from "vue";
|
||||
import { useStore } from "vuex";
|
||||
|
||||
const store = useStore();
|
||||
|
||||
const username = computed(() => store.getters["user/username"] || "User");
|
||||
const userRole = computed(() =>
|
||||
store.getters["user/admin"] ? "admin" : "user"
|
||||
);
|
||||
|
||||
const userInitials = computed(() => {
|
||||
return username.value.slice(0, 2).toUpperCase();
|
||||
});
|
||||
|
||||
const memberSince = computed(() => {
|
||||
const date = new Date();
|
||||
date.setMonth(date.getMonth() - 6);
|
||||
return date.toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
year: "numeric"
|
||||
});
|
||||
});
|
||||
|
||||
const stats = {
|
||||
totalRequests: 45,
|
||||
magnetsAdded: 127
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "scss/media-queries";
|
||||
|
||||
.profile-hero {
|
||||
background-color: var(--background-color-secondary);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.5rem;
|
||||
border: 1px solid var(--background-40);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 2rem;
|
||||
|
||||
@include mobile-only {
|
||||
flex-direction: column;
|
||||
padding: 1.5rem 1.25rem;
|
||||
border-radius: 0.5rem;
|
||||
text-align: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
&__main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
|
||||
@include mobile-only {
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
|
||||
@include mobile-only {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
&__name {
|
||||
margin: 0;
|
||||
font-size: 1.75rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.1;
|
||||
|
||||
@include mobile-only {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__badge {
|
||||
display: inline-block;
|
||||
padding: 0.25rem 0.7rem;
|
||||
border-radius: 2rem;
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
width: fit-content;
|
||||
|
||||
@include mobile-only {
|
||||
padding: 0.2rem 0.6rem;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
&.badge--admin {
|
||||
background-color: var(--color-warning);
|
||||
color: black;
|
||||
}
|
||||
|
||||
&.badge--user {
|
||||
background-color: var(--background-40);
|
||||
}
|
||||
}
|
||||
|
||||
&__member {
|
||||
margin: 0;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-color-70);
|
||||
|
||||
@include mobile-only {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__stats {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.75rem;
|
||||
padding-left: 1.75rem;
|
||||
border-left: 1px solid var(--background-40);
|
||||
|
||||
@include mobile-only {
|
||||
width: 100%;
|
||||
padding: 1rem 0 0 0;
|
||||
border-left: none;
|
||||
border-top: 1px solid var(--background-40);
|
||||
justify-content: center;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-large {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--highlight-color),
|
||||
var(--color-green-70)
|
||||
);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
|
||||
|
||||
@include mobile-only {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.stat-large {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
|
||||
&__value {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
color: var(--highlight-color);
|
||||
line-height: 1;
|
||||
|
||||
@include mobile-only {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-color-70);
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.5px;
|
||||
|
||||
@include mobile-only {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stat-divider {
|
||||
width: 1px;
|
||||
height: 45px;
|
||||
background-color: var(--background-40);
|
||||
|
||||
@include mobile-only {
|
||||
height: 45px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
103
src/components/settings/RequestHistory.vue
Normal file
103
src/components/settings/RequestHistory.vue
Normal file
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div class="export-card">
|
||||
<div class="settings-section-header">
|
||||
<h2>Request History</h2>
|
||||
<p>View and download your complete request history.</p>
|
||||
</div>
|
||||
|
||||
<div class="stats-grid">
|
||||
<div class="stat-mini">
|
||||
<span class="stat-mini__value">{{ data.total }}</span>
|
||||
<span class="stat-mini__label">Total</span>
|
||||
</div>
|
||||
<div class="stat-mini">
|
||||
<span class="stat-mini__value">{{ data.approved }}</span>
|
||||
<span class="stat-mini__label">Approved</span>
|
||||
</div>
|
||||
<div class="stat-mini">
|
||||
<span class="stat-mini__value">{{ data.pending }}</span>
|
||||
<span class="stat-mini__label">Pending</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="view-btn" @click="viewHistory">View Full History</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineProps } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
interface Props {
|
||||
data: any;
|
||||
}
|
||||
|
||||
defineProps<Props>();
|
||||
const router = useRouter();
|
||||
|
||||
function viewHistory() {
|
||||
router.push({ name: "profile" });
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "scss/media-queries";
|
||||
@import "scss/shared-settings";
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.65rem;
|
||||
}
|
||||
|
||||
.stat-mini {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 0.5rem 0.4rem;
|
||||
background-color: var(--background-color);
|
||||
border-radius: 0.25rem;
|
||||
|
||||
@include mobile-only {
|
||||
padding: 0.45rem 0.35rem;
|
||||
}
|
||||
|
||||
&__value {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
color: var(--highlight-color);
|
||||
|
||||
@include mobile-only {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-size: 0.7rem;
|
||||
text-transform: uppercase;
|
||||
margin-top: 0.15rem;
|
||||
|
||||
@include mobile-only {
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.view-btn {
|
||||
width: 100%;
|
||||
padding: 0.55rem 0.85rem;
|
||||
background-color: var(--background-color);
|
||||
border: 1px solid var(--background-40);
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
color: var(--text-color);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--background-40);
|
||||
border-color: var(--highlight-color);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
46
src/components/settings/SecuritySettings.vue
Normal file
46
src/components/settings/SecuritySettings.vue
Normal file
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<div class="security-settings">
|
||||
<div class="security-settings__intro">
|
||||
<h2 class="security-settings__title">Security</h2>
|
||||
<p class="security-settings__description">
|
||||
Keep your account safe by using a strong, unique password. We recommend
|
||||
using a passphrase or generated password that's hard to guess.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<change-password />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import ChangePassword from "@/components/profile/ChangePassword.vue";
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "scss/variables";
|
||||
@import "scss/media-queries";
|
||||
|
||||
.security-settings {
|
||||
&__intro {
|
||||
margin-bottom: 1rem;
|
||||
|
||||
@include mobile-only {
|
||||
margin-bottom: 0.85rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin: 0;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.6;
|
||||
color: var(--text-color-70);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
215
src/components/settings/StorageManager.vue
Normal file
215
src/components/settings/StorageManager.vue
Normal file
@@ -0,0 +1,215 @@
|
||||
<template>
|
||||
<div class="storage-manager">
|
||||
<StorageSectionBrowser
|
||||
:sections="storageSections"
|
||||
@clear-item="clearItem"
|
||||
/>
|
||||
|
||||
<DangerZoneAction
|
||||
title="Clear All Browser Data"
|
||||
description="Remove all locally stored data at once. This includes preferences, history, and cached information."
|
||||
button-text="Clear All Data"
|
||||
@action="clearAllData"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, inject } from "vue";
|
||||
import IconCookie from "@/icons/IconCookie.vue";
|
||||
import IconDatabase from "@/icons/IconDatabase.vue";
|
||||
import IconTimer from "@/icons/IconTimer.vue";
|
||||
import StorageSectionBrowser from "./StorageSectionBrowser.vue";
|
||||
import DangerZoneAction from "./DangerZoneAction.vue";
|
||||
import { formatBytes } from "../../utils";
|
||||
|
||||
interface StorageItem {
|
||||
key: string;
|
||||
description: string;
|
||||
size: string;
|
||||
type: "local" | "session" | "cookie";
|
||||
}
|
||||
|
||||
const notifications: {
|
||||
success: (options: {
|
||||
title: string;
|
||||
description?: string;
|
||||
timeout?: number;
|
||||
}) => void;
|
||||
error: (options: {
|
||||
title: string;
|
||||
description?: string;
|
||||
timeout?: number;
|
||||
}) => void;
|
||||
} = inject("notifications");
|
||||
|
||||
const dict = {
|
||||
commandPalette_stats: "Usage statistics for command palette navigation",
|
||||
"theme-preference": "Your selected color theme",
|
||||
plex_user_data: "Cached Plex account information",
|
||||
plex_library_data: "Cached Plex library details per section",
|
||||
plex_server_data: "Cached Plex server information",
|
||||
plex_library_last_sync: "UTC time string for last synced Plex data",
|
||||
plex_auth_token: "Authorized token from Plex.tv",
|
||||
authorization: "This sites user login token"
|
||||
};
|
||||
|
||||
const storageItems = computed<StorageItem[]>(() => {
|
||||
const items: StorageItem[] = [];
|
||||
|
||||
// local storage
|
||||
Object.keys(localStorage).map(key => {
|
||||
items.push({
|
||||
key,
|
||||
description: dict[key] ?? "",
|
||||
size: formatBytes(localStorage[key]?.length || 0),
|
||||
type: "local"
|
||||
});
|
||||
});
|
||||
|
||||
// session storage
|
||||
Object.keys(sessionStorage).map(key => {
|
||||
items.push({
|
||||
key,
|
||||
description: dict[key] ?? "",
|
||||
size: formatBytes(sessionStorage[key]?.length || 0),
|
||||
type: "session"
|
||||
});
|
||||
});
|
||||
|
||||
// cookies
|
||||
if (document.cookie) {
|
||||
document.cookie.split(";").forEach(cookie => {
|
||||
const [key, _] = cookie.trim().split("=");
|
||||
if (key) {
|
||||
items.push({
|
||||
key,
|
||||
description: dict[key] ?? "",
|
||||
size: formatBytes(cookie.length || 0),
|
||||
type: "cookie"
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return items;
|
||||
});
|
||||
|
||||
const getTotalSize = (items: StorageItem[]) => {
|
||||
const totalBytes = items.reduce((acc, item) => {
|
||||
const match = item.size.match(/^([\d.]+)\s*(\w+)$/);
|
||||
if (!match) return acc;
|
||||
const value = parseFloat(match[1]);
|
||||
const unit = match[2];
|
||||
return (
|
||||
acc +
|
||||
(unit === "KB"
|
||||
? value * 1024
|
||||
: unit === "MB"
|
||||
? value * 1024 * 1024
|
||||
: value)
|
||||
);
|
||||
}, 0);
|
||||
return formatBytes(totalBytes);
|
||||
};
|
||||
|
||||
const storageSections = computed(() => [
|
||||
{
|
||||
type: "local" as const,
|
||||
title: "LocalStorage",
|
||||
iconComponent: IconDatabase,
|
||||
description:
|
||||
"LocalStorage keeps data permanently on your device, even after closing your browser. It's used to remember your preferences and settings between visits.",
|
||||
items: storageItems.value.filter(item => item.type === "local"),
|
||||
get totalSize() {
|
||||
return getTotalSize(this.items);
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "session" as const,
|
||||
title: "SessionStorage",
|
||||
iconComponent: IconTimer,
|
||||
description:
|
||||
"SessionStorage keeps data temporarily while you browse. It's automatically cleared when you close your browser tab or window.",
|
||||
items: storageItems.value.filter(item => item.type === "session"),
|
||||
get totalSize() {
|
||||
return getTotalSize(this.items);
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "cookie" as const,
|
||||
title: "Cookies",
|
||||
iconComponent: IconCookie,
|
||||
description:
|
||||
"Cookies are small text files stored by your browser. They can be temporary (session cookies) or persistent, and are often used for authentication and tracking your activity.",
|
||||
items: storageItems.value.filter(item => item.type === "cookie"),
|
||||
get totalSize() {
|
||||
return getTotalSize(this.items);
|
||||
}
|
||||
}
|
||||
]);
|
||||
|
||||
function clearItem(key: string, type: "local" | "session" | "cookie") {
|
||||
try {
|
||||
if (type === "local") {
|
||||
localStorage.removeItem(key);
|
||||
} else if (type === "session") {
|
||||
sessionStorage.removeItem(key);
|
||||
} else if (type === "cookie") {
|
||||
document.cookie = `${key}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
|
||||
}
|
||||
|
||||
notifications.success({
|
||||
title: "Data Cleared",
|
||||
description: `${key} has been cleared`,
|
||||
timeout: 3000
|
||||
});
|
||||
|
||||
// Force re-render
|
||||
storageItems.value;
|
||||
} catch (error) {
|
||||
notifications.error({
|
||||
title: "Error",
|
||||
description: `Failed to clear ${key}`,
|
||||
timeout: 5000
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function clearAllData() {
|
||||
const confirmed = confirm(
|
||||
"Are you sure you want to clear all locally stored data? This action cannot be undone."
|
||||
);
|
||||
|
||||
if (!confirmed) return;
|
||||
|
||||
try {
|
||||
localStorage.clear();
|
||||
sessionStorage.clear();
|
||||
document.cookie.split(";").forEach(cookie => {
|
||||
const eqPos = cookie.indexOf("=");
|
||||
const name = eqPos > -1 ? cookie.substring(0, eqPos) : cookie;
|
||||
document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT";
|
||||
});
|
||||
|
||||
notifications.success({
|
||||
title: "All Data Cleared",
|
||||
description: "All locally stored data has been removed",
|
||||
timeout: 3000
|
||||
});
|
||||
} catch (error) {
|
||||
notifications.error({
|
||||
title: "Error",
|
||||
description: "Failed to clear all data",
|
||||
timeout: 5000
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.storage-manager {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
366
src/components/settings/StorageSectionBrowser.vue
Normal file
366
src/components/settings/StorageSectionBrowser.vue
Normal file
@@ -0,0 +1,366 @@
|
||||
<template>
|
||||
<div class="browser-storage">
|
||||
<div class="settings-section-header">
|
||||
<h2>Browser Storage</h2>
|
||||
<p>
|
||||
Your browser stores data locally to make this site faster and remember
|
||||
your settings. View what's saved on this device and remove items
|
||||
anytime.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="storage-sections">
|
||||
<div
|
||||
v-for="section in sections"
|
||||
:key="section.type"
|
||||
:class="`storage-section storage-section--${section.type}`"
|
||||
>
|
||||
<button
|
||||
class="storage-section__header"
|
||||
@click="
|
||||
expandedSections[section.type] = !expandedSections[section.type]
|
||||
"
|
||||
>
|
||||
<div class="storage-section__header-content">
|
||||
<component :is="section.iconComponent" class="section-icon" />
|
||||
<h3 class="storage-section__title">{{ section.title }}</h3>
|
||||
<span class="storage-section__count">{{
|
||||
section.items.length
|
||||
}}</span>
|
||||
<span class="storage-section__size">{{ section.totalSize }}</span>
|
||||
</div>
|
||||
<svg
|
||||
class="storage-section__chevron"
|
||||
:class="{
|
||||
'storage-section__chevron--expanded':
|
||||
expandedSections[section.type]
|
||||
}"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<polyline points="6 9 12 15 18 9" />
|
||||
</svg>
|
||||
</button>
|
||||
<div
|
||||
v-if="expandedSections[section.type]"
|
||||
class="storage-section__content"
|
||||
>
|
||||
<p class="storage-section__description">{{ section.description }}</p>
|
||||
<div class="storage-items">
|
||||
<div
|
||||
v-for="item in section.items"
|
||||
:key="item.key"
|
||||
:class="`storage-item storage-item--${section.type}`"
|
||||
>
|
||||
<component :is="section.iconComponent" class="type-icon" />
|
||||
<div class="storage-item__info">
|
||||
<h4 class="storage-item__title">{{ item.key }}</h4>
|
||||
<p class="storage-item__description">
|
||||
<span v-if="item.description">{{ item.description }} · </span>
|
||||
<span class="storage-item__size">{{ item.size }}</span>
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
class="storage-item__delete"
|
||||
@click="$emit('clear-item', item.key, section.type)"
|
||||
:title="`Clear ${item.key}`"
|
||||
>
|
||||
<IconClose />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import IconClose from "@/icons/IconClose.vue";
|
||||
|
||||
interface StorageItem {
|
||||
key: string;
|
||||
description: string;
|
||||
size: string;
|
||||
type: "local" | "session" | "cookie";
|
||||
}
|
||||
|
||||
interface StorageSection {
|
||||
type: "local" | "session" | "cookie";
|
||||
title: string;
|
||||
description: string;
|
||||
iconComponent: any;
|
||||
items: StorageItem[];
|
||||
totalSize: string;
|
||||
}
|
||||
|
||||
defineProps<{
|
||||
sections: StorageSection[];
|
||||
}>();
|
||||
|
||||
defineEmits<{
|
||||
"clear-item": [key: string, type: "local" | "session" | "cookie"];
|
||||
}>();
|
||||
|
||||
const expandedSections = ref<Record<string, boolean>>({
|
||||
local: false,
|
||||
session: false,
|
||||
cookie: false
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "scss/variables";
|
||||
@import "scss/media-queries";
|
||||
@import "scss/shared-settings";
|
||||
|
||||
.browser-storage {
|
||||
&__intro {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.storage-sections {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.storage-section {
|
||||
border-radius: 0.5rem;
|
||||
background: var(--background-ui);
|
||||
overflow: hidden;
|
||||
border: 2px solid transparent;
|
||||
transition: border-color 0.2s ease;
|
||||
|
||||
&--local {
|
||||
border-color: rgba(139, 92, 246, 0.2);
|
||||
.section-icon,
|
||||
.type-icon {
|
||||
stroke: #8b5cf6;
|
||||
}
|
||||
}
|
||||
&--session {
|
||||
border-color: rgba(245, 158, 11, 0.2);
|
||||
.section-icon,
|
||||
.type-icon {
|
||||
stroke: #f59e0b;
|
||||
}
|
||||
}
|
||||
&--cookie {
|
||||
border-color: rgba(236, 72, 153, 0.2);
|
||||
.section-icon,
|
||||
.type-icon {
|
||||
fill: #ec4899;
|
||||
}
|
||||
}
|
||||
|
||||
&__header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 1.25rem;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
&:hover {
|
||||
background: var(--background-40);
|
||||
}
|
||||
}
|
||||
|
||||
&__header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
.section-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin: 0;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-color);
|
||||
}
|
||||
&__count {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 24px;
|
||||
height: 24px;
|
||||
padding: 0 0.5rem;
|
||||
background: var(--background-40);
|
||||
border-radius: 12px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-color-70);
|
||||
}
|
||||
&__size {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-color-50);
|
||||
font-family: monospace;
|
||||
}
|
||||
&__chevron {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
stroke: var(--text-color-70);
|
||||
transition: transform 0.2s ease;
|
||||
&--expanded {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
&__content {
|
||||
border-top: 1px solid var(--background-40);
|
||||
}
|
||||
&__description {
|
||||
margin: 0;
|
||||
padding: 1rem 1.25rem;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.6;
|
||||
color: var(--text-color-70);
|
||||
background: var(--background-color);
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
.storage-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem 1rem 1rem 1rem;
|
||||
}
|
||||
|
||||
.storage-item {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
background: var(--background-color);
|
||||
border-radius: 0.25rem;
|
||||
overflow: hidden;
|
||||
transition: all 0.2s ease;
|
||||
border-left: 3px solid;
|
||||
|
||||
&--local {
|
||||
border-color: #8b5cf6;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(139, 92, 246, 0.1),
|
||||
var(--background-color)
|
||||
);
|
||||
}
|
||||
&--session {
|
||||
border-color: #f59e0b;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(245, 158, 11, 0.1),
|
||||
var(--background-color)
|
||||
);
|
||||
}
|
||||
&--cookie {
|
||||
border-color: #ec4899;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(236, 72, 153, 0.1),
|
||||
var(--background-color)
|
||||
);
|
||||
}
|
||||
|
||||
&:hover .storage-item__delete {
|
||||
background: var(--color-error-highlight);
|
||||
}
|
||||
&:hover .type-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.type-icon {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
opacity: 0.6;
|
||||
transition: opacity 0.2s;
|
||||
margin: auto 1.5rem;
|
||||
@include mobile-only {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
margin: auto 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__info {
|
||||
min-width: 0;
|
||||
padding: 0.85rem 0.85rem 0.85rem 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
@include mobile-only {
|
||||
padding: 0.75rem 0.75rem 0.75rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin: 0 0 0.3rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-color);
|
||||
@include mobile-only {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
&__description {
|
||||
margin: 0;
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-color-70);
|
||||
line-height: 1.4;
|
||||
@include mobile-only {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
&__size {
|
||||
color: var(--text-color-50);
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
&__delete {
|
||||
width: 70px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--color-error);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
@include mobile-only {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
fill: white;
|
||||
transition: transform 0.2s;
|
||||
@include mobile-only {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background: var(--color-error-highlight);
|
||||
svg {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
&:active svg {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
462
src/components/settings/StorageSectionServer.vue
Normal file
462
src/components/settings/StorageSectionServer.vue
Normal file
@@ -0,0 +1,462 @@
|
||||
<template>
|
||||
<div class="server-storage">
|
||||
<div class="server-storage__intro">
|
||||
<h2 class="server-storage__title">Server Storage</h2>
|
||||
<p class="server-storage__description">
|
||||
Data stored on our servers to sync across your devices and provide
|
||||
personalized features.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="server-sections">
|
||||
<div
|
||||
v-for="section in serverSections"
|
||||
:key="section.type"
|
||||
:class="`server-section server-section--${section.type}`"
|
||||
>
|
||||
<button
|
||||
class="server-section__header"
|
||||
@click="
|
||||
expandedSections[section.type] = !expandedSections[section.type]
|
||||
"
|
||||
>
|
||||
<div class="server-section__header-content">
|
||||
<component :is="section.iconComponent" class="section-icon" />
|
||||
<h3 class="server-section__title">{{ section.title }}</h3>
|
||||
<span class="server-section__count">{{
|
||||
section.items.length
|
||||
}}</span>
|
||||
<span class="server-section__size">{{ section.totalSize }}</span>
|
||||
</div>
|
||||
<svg
|
||||
class="server-section__chevron"
|
||||
:class="{
|
||||
'server-section__chevron--expanded':
|
||||
expandedSections[section.type]
|
||||
}"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<polyline points="6 9 12 15 18 9" />
|
||||
</svg>
|
||||
</button>
|
||||
<div
|
||||
v-if="expandedSections[section.type]"
|
||||
class="server-section__content"
|
||||
>
|
||||
<p class="server-section__description">{{ section.description }}</p>
|
||||
<div class="server-items">
|
||||
<div
|
||||
v-for="item in section.items"
|
||||
:key="item.key"
|
||||
:class="`server-item server-item--${section.type}`"
|
||||
>
|
||||
<component :is="section.iconComponent" class="type-icon" />
|
||||
<div class="server-item__info">
|
||||
<h4 class="server-item__title">{{ item.key }}</h4>
|
||||
<p class="server-item__description">
|
||||
<span v-if="item.description">{{ item.description }} · </span>
|
||||
<span class="server-item__size">{{ item.size }}</span>
|
||||
<span v-if="item.lastSynced" class="server-item__synced">
|
||||
· Last synced: {{ item.lastSynced }}</span
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
class="server-item__delete"
|
||||
@click="$emit('clear-item', item.key, section.type)"
|
||||
:title="`Delete ${item.key}`"
|
||||
>
|
||||
<IconClose />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from "vue";
|
||||
import IconClose from "@/icons/IconClose.vue";
|
||||
import IconProfile from "@/icons/IconProfile.vue";
|
||||
import IconSettings from "@/icons/IconSettings.vue";
|
||||
import IconActivity from "@/icons/IconActivity.vue";
|
||||
|
||||
interface ServerItem {
|
||||
key: string;
|
||||
description: string;
|
||||
size: string;
|
||||
lastSynced?: string;
|
||||
}
|
||||
|
||||
defineEmits<{
|
||||
"clear-item": [key: string, type: string];
|
||||
}>();
|
||||
|
||||
const expandedSections = ref<Record<string, boolean>>({
|
||||
profile: false,
|
||||
preferences: false,
|
||||
activity: false
|
||||
});
|
||||
|
||||
// Mock server data
|
||||
const serverSections = computed(() => [
|
||||
{
|
||||
type: "profile",
|
||||
title: "Profile Data",
|
||||
iconComponent: IconProfile,
|
||||
description:
|
||||
"Your account information, settings, and preferences stored on our servers.",
|
||||
items: [
|
||||
{
|
||||
key: "user_profile",
|
||||
description: "User account details",
|
||||
size: "2.4 KB",
|
||||
lastSynced: "2 hours ago"
|
||||
},
|
||||
{
|
||||
key: "avatar_image",
|
||||
description: "Profile picture",
|
||||
size: "145 KB",
|
||||
lastSynced: "1 day ago"
|
||||
},
|
||||
{
|
||||
key: "email_preferences",
|
||||
description: "Notification settings",
|
||||
size: "512 Bytes",
|
||||
lastSynced: "3 days ago"
|
||||
}
|
||||
],
|
||||
totalSize: "147.9 KB"
|
||||
},
|
||||
{
|
||||
type: "preferences",
|
||||
title: "Synced Preferences",
|
||||
iconComponent: IconSettings,
|
||||
description:
|
||||
"Settings that sync across all your devices when you sign in.",
|
||||
items: [
|
||||
{
|
||||
key: "theme_settings",
|
||||
description: "Color theme and appearance",
|
||||
size: "1.1 KB",
|
||||
lastSynced: "5 hours ago"
|
||||
},
|
||||
{
|
||||
key: "playback_settings",
|
||||
description: "Video and audio preferences",
|
||||
size: "856 Bytes",
|
||||
lastSynced: "1 day ago"
|
||||
},
|
||||
{
|
||||
key: "library_filters",
|
||||
description: "Saved filters and sorting",
|
||||
size: "2.3 KB",
|
||||
lastSynced: "2 days ago"
|
||||
}
|
||||
],
|
||||
totalSize: "4.3 KB"
|
||||
},
|
||||
{
|
||||
type: "activity",
|
||||
title: "Activity History",
|
||||
iconComponent: IconActivity,
|
||||
description:
|
||||
"Your viewing history and watch progress stored on our servers.",
|
||||
items: [
|
||||
{
|
||||
key: "watch_history",
|
||||
description: "Recently watched items",
|
||||
size: "12.5 KB",
|
||||
lastSynced: "1 hour ago"
|
||||
},
|
||||
{
|
||||
key: "watch_progress",
|
||||
description: "Playback positions",
|
||||
size: "8.2 KB",
|
||||
lastSynced: "30 minutes ago"
|
||||
},
|
||||
{
|
||||
key: "favorites",
|
||||
description: "Starred and favorited content",
|
||||
size: "3.7 KB",
|
||||
lastSynced: "6 hours ago"
|
||||
}
|
||||
],
|
||||
totalSize: "24.4 KB"
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "scss/variables";
|
||||
@import "scss/media-queries";
|
||||
|
||||
.server-storage {
|
||||
&__intro {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin: 0;
|
||||
color: var(--text-color-70);
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
|
||||
.server-sections {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.server-section {
|
||||
border-radius: 0.5rem;
|
||||
background: var(--background-ui);
|
||||
overflow: hidden;
|
||||
border: 2px solid transparent;
|
||||
transition: border-color 0.2s ease;
|
||||
|
||||
&--profile {
|
||||
border-color: rgba(59, 130, 246, 0.2);
|
||||
.section-icon,
|
||||
.type-icon {
|
||||
fill: #3b82f6;
|
||||
}
|
||||
}
|
||||
&--preferences {
|
||||
border-color: rgba(16, 185, 129, 0.2);
|
||||
.section-icon,
|
||||
.type-icon {
|
||||
fill: #10b981;
|
||||
}
|
||||
}
|
||||
&--activity {
|
||||
border-color: rgba(245, 158, 11, 0.2);
|
||||
.section-icon,
|
||||
.type-icon {
|
||||
fill: #f59e0b;
|
||||
}
|
||||
}
|
||||
|
||||
&__header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 1.25rem;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
&:hover {
|
||||
background: var(--background-40);
|
||||
}
|
||||
}
|
||||
|
||||
&__header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
.section-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin: 0;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-color);
|
||||
}
|
||||
&__count {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 24px;
|
||||
height: 24px;
|
||||
padding: 0 0.5rem;
|
||||
background: var(--background-40);
|
||||
border-radius: 12px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-color-70);
|
||||
}
|
||||
&__size {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-color-50);
|
||||
font-family: monospace;
|
||||
}
|
||||
&__chevron {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
stroke: var(--text-color-70);
|
||||
transition: transform 0.2s ease;
|
||||
&--expanded {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
&__content {
|
||||
border-top: 1px solid var(--background-40);
|
||||
}
|
||||
&__description {
|
||||
margin: 0;
|
||||
padding: 1rem 1.25rem;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.6;
|
||||
color: var(--text-color-70);
|
||||
background: var(--background-color);
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
.server-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem 1rem 1rem 1rem;
|
||||
}
|
||||
|
||||
.server-item {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
background: var(--background-color);
|
||||
border-radius: 0.25rem;
|
||||
overflow: hidden;
|
||||
transition: all 0.2s ease;
|
||||
border-left: 3px solid;
|
||||
|
||||
&--profile {
|
||||
border-color: #3b82f6;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(59, 130, 246, 0.1),
|
||||
var(--background-color)
|
||||
);
|
||||
}
|
||||
&--preferences {
|
||||
border-color: #10b981;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(16, 185, 129, 0.1),
|
||||
var(--background-color)
|
||||
);
|
||||
}
|
||||
&--activity {
|
||||
border-color: #f59e0b;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(245, 158, 11, 0.1),
|
||||
var(--background-color)
|
||||
);
|
||||
}
|
||||
|
||||
&:hover .server-item__delete {
|
||||
background: var(--color-error-highlight);
|
||||
}
|
||||
&:hover .type-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.type-icon {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
opacity: 0.6;
|
||||
transition: opacity 0.2s;
|
||||
margin: auto 1.5rem;
|
||||
@include mobile-only {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
margin: auto 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__info {
|
||||
min-width: 0;
|
||||
padding: 0.85rem 0.85rem 0.85rem 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
@include mobile-only {
|
||||
padding: 0.75rem 0.75rem 0.75rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
margin: 0 0 0.3rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-color);
|
||||
@include mobile-only {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
&__description {
|
||||
margin: 0;
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-color-70);
|
||||
line-height: 1.4;
|
||||
@include mobile-only {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
&__size {
|
||||
color: var(--text-color-50);
|
||||
font-family: monospace;
|
||||
}
|
||||
&__synced {
|
||||
color: var(--text-color-50);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
&__delete {
|
||||
width: 70px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--color-error);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
@include mobile-only {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
fill: white;
|
||||
transition: transform 0.2s;
|
||||
@include mobile-only {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background: var(--color-error-highlight);
|
||||
svg {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
&:active svg {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
355
src/components/settings/ThemePreferences.vue
Normal file
355
src/components/settings/ThemePreferences.vue
Normal file
@@ -0,0 +1,355 @@
|
||||
<template>
|
||||
<div class="theme-preferences">
|
||||
<div class="current-theme">
|
||||
<div class="theme-display">
|
||||
<div class="theme-icon" :data-theme="selectedTheme">
|
||||
<div class="icon-inner"></div>
|
||||
</div>
|
||||
<div class="theme-info">
|
||||
<span class="theme-label">Current Theme</span>
|
||||
<h3 class="theme-name">{{ currentThemeName }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="theme-grid">
|
||||
<button
|
||||
v-for="theme in themes"
|
||||
:key="theme.value"
|
||||
:class="['theme-card', { active: selectedTheme === theme.value }]"
|
||||
@click="selectTheme(theme.value)"
|
||||
>
|
||||
<div class="theme-card__preview" :data-theme="theme.value">
|
||||
<div class="preview-circle"></div>
|
||||
</div>
|
||||
<span class="theme-card__name">{{ theme.label }}</span>
|
||||
<div v-if="selectedTheme === theme.value" class="theme-card__badge">
|
||||
Active
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted } from "vue";
|
||||
import { useTheme } from "@/composables/useTheme";
|
||||
|
||||
const themes = [
|
||||
{ value: "auto", label: "Auto" },
|
||||
{ value: "light", label: "Light" },
|
||||
{ value: "dark", label: "Dark" },
|
||||
{ value: "ocean", label: "Ocean" },
|
||||
{ value: "nordic", label: "Nordic" },
|
||||
{ value: "halloween", label: "Halloween" }
|
||||
] as const;
|
||||
|
||||
const { currentTheme, savedTheme, setTheme } = useTheme();
|
||||
const selectedTheme = currentTheme;
|
||||
|
||||
const currentThemeName = computed(
|
||||
() => themes.find(t => t.value === selectedTheme.value)?.label ?? "Auto"
|
||||
);
|
||||
|
||||
function selectTheme(theme: string) {
|
||||
setTheme(theme as any);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
selectedTheme.value = savedTheme.value;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "scss/variables";
|
||||
@import "scss/media-queries";
|
||||
|
||||
.current-theme {
|
||||
margin-bottom: 2rem;
|
||||
padding: 1rem 2rem;
|
||||
background-color: var(--background-ui);
|
||||
border-radius: 1rem;
|
||||
border: 2px solid var(--background-40);
|
||||
|
||||
@include mobile-only {
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
|
||||
.theme-display {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
|
||||
@include mobile-only {
|
||||
gap: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.theme-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
|
||||
@include mobile-only {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.icon-inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
border: 3px solid;
|
||||
}
|
||||
|
||||
&[data-theme="light"] .icon-inner {
|
||||
background: linear-gradient(135deg, #f8f8f8, #e8e8e8);
|
||||
border-color: #01d277;
|
||||
}
|
||||
&[data-theme="dark"] .icon-inner {
|
||||
background: linear-gradient(135deg, #1a1a1a, #0a0a0a);
|
||||
border-color: #01d277;
|
||||
}
|
||||
&[data-theme="ocean"] .icon-inner {
|
||||
background: linear-gradient(135deg, #0f2027, #2c5364);
|
||||
border-color: #00d4ff;
|
||||
}
|
||||
&[data-theme="nordic"] .icon-inner {
|
||||
background: linear-gradient(135deg, #f5f0e8, #d8cdb9);
|
||||
border-color: #3d6e4e;
|
||||
}
|
||||
&[data-theme="halloween"] .icon-inner {
|
||||
background: linear-gradient(135deg, #1a0e2e, #2d1b3d);
|
||||
border-color: #ff6600;
|
||||
}
|
||||
&[data-theme="auto"] .icon-inner {
|
||||
background: conic-gradient(#f8f8f8 0deg 180deg, #1a1a1a 180deg);
|
||||
border-color: #01d277;
|
||||
}
|
||||
}
|
||||
|
||||
.theme-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 0.85rem;
|
||||
color: $text-color-70;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
font-weight: 500;
|
||||
|
||||
@include mobile-only {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
|
||||
@include mobile-only {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.theme-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1.25rem;
|
||||
|
||||
@include mobile-only {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.theme-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
padding: 1rem;
|
||||
background-color: var(--background-ui);
|
||||
border-radius: 0.75rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
border: 2px solid transparent;
|
||||
text-align: center;
|
||||
|
||||
@include mobile-only {
|
||||
padding: 0.85rem;
|
||||
border-radius: 0.5rem;
|
||||
&:hover {
|
||||
transform: none;
|
||||
}
|
||||
&:active {
|
||||
transform: scale(0.97);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--highlight-color);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: var(--highlight-color);
|
||||
background-color: var(--background-40);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
&__preview {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
margin-bottom: 0.75rem;
|
||||
position: relative;
|
||||
border: 1px solid var(--background-40);
|
||||
|
||||
@include mobile-only {
|
||||
height: 100px;
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
|
||||
.preview-circle {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
left: 8px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
height: 20px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid;
|
||||
}
|
||||
}
|
||||
|
||||
&__preview[data-theme="light"] {
|
||||
background: #f8f8f8;
|
||||
.preview-circle {
|
||||
background: #01d277;
|
||||
}
|
||||
&::before {
|
||||
background: #fff;
|
||||
border-color: rgba(8, 28, 36, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&__preview[data-theme="dark"] {
|
||||
background: #111;
|
||||
.preview-circle {
|
||||
background: #01d277;
|
||||
}
|
||||
&::before {
|
||||
background: #060708;
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&__preview[data-theme="ocean"] {
|
||||
background: #0f2027;
|
||||
.preview-circle {
|
||||
background: #00d4ff;
|
||||
}
|
||||
&::before {
|
||||
background: #203a43;
|
||||
border-color: rgba(0, 212, 255, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
&__preview[data-theme="nordic"] {
|
||||
background: #f5f0e8;
|
||||
.preview-circle {
|
||||
background: #3d6e4e;
|
||||
}
|
||||
&::before {
|
||||
background: #fffef9;
|
||||
border-color: rgba(61, 110, 78, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
&__preview[data-theme="halloween"] {
|
||||
background: #1a0e2e;
|
||||
.preview-circle {
|
||||
background: #ff6600;
|
||||
}
|
||||
&::before {
|
||||
background: #2d1b3d;
|
||||
border-color: rgba(255, 102, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
&__preview[data-theme="auto"] {
|
||||
border-color: black;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
#f8f8f8 0%,
|
||||
#f8f8f8 50%,
|
||||
#111 50%,
|
||||
#111 100%
|
||||
);
|
||||
.preview-circle {
|
||||
left: auto;
|
||||
right: 8px;
|
||||
background: #01d277;
|
||||
}
|
||||
&::before {
|
||||
right: auto;
|
||||
width: calc(50% - 10px);
|
||||
background: #fff;
|
||||
border-color: rgba(8, 28, 36, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&__name {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
color: var(--text-color);
|
||||
@include mobile-only {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__badge {
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
background-color: var(--highlight-color);
|
||||
color: white;
|
||||
border-radius: 1rem;
|
||||
font-size: 0.65rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
|
||||
@include mobile-only {
|
||||
top: 0.4rem;
|
||||
right: 0.4rem;
|
||||
padding: 0.2rem 0.4rem;
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user