Added stash creation. Added dialog framework.
This commit is contained in:
parent
9de289a0fb
commit
68b9658ba6
|
|
@ -23,17 +23,22 @@
|
|||
|
||||
.button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
align-items: stretch;
|
||||
box-sizing: border-box;
|
||||
padding: .5rem 1rem;
|
||||
padding: .5rem 0 .5rem .5rem;
|
||||
border: none;
|
||||
border-radius: .25rem;
|
||||
background: var(--grey-light-30);
|
||||
font-size: 1rem;
|
||||
background: var(--background);
|
||||
box-shadow: 0 0 3px var(--shadow-weak-30);
|
||||
color: var(--shadow-strong-30);
|
||||
font-size: .9rem;
|
||||
font-weight: bold;
|
||||
|
||||
.icon {
|
||||
padding: .5rem;
|
||||
height: auto;
|
||||
padding: 0 .75rem 0 .25rem;
|
||||
fill: var(--shadow-strong-20);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
@ -51,9 +56,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
.button-label {
|
||||
margin-right: .75rem;
|
||||
}
|
||||
|
||||
.button-submit {
|
||||
background: var(--primary-light-10);
|
||||
color: var(--text-light);
|
||||
color: var(--primary);
|
||||
justify-content: center;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: var(--primary);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,98 @@
|
|||
<template>
|
||||
<Teleport to="body">
|
||||
<div
|
||||
class="dialog-container"
|
||||
@click="emit('close')"
|
||||
>
|
||||
<div
|
||||
class="dialog"
|
||||
@click.stop
|
||||
>
|
||||
<div class="dialog-header">
|
||||
<span class="dialog-title ellipsis">{{ title }}</span>
|
||||
|
||||
<Icon
|
||||
icon="cross2"
|
||||
class="dialog-close"
|
||||
@click="emit('close')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted } from 'vue';
|
||||
|
||||
defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['open', 'close']);
|
||||
|
||||
onMounted(() => emit('open'));
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.dialog-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 0 0 .25rem .25rem;
|
||||
background: var(--background);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.dialog-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 900;
|
||||
background: var(--shadow-strong-10);
|
||||
}
|
||||
|
||||
.dialog {
|
||||
border-radius: .25rem;
|
||||
box-shadow: 0 0 3px var(--shadow);
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.dialog-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
background: var(--primary);
|
||||
border-radius: .25rem .25rem 0 0;
|
||||
}
|
||||
|
||||
.dialog-title {
|
||||
padding: .5rem 1rem;
|
||||
color: var(--text-light);
|
||||
font-size: 1.1rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dialog-close {
|
||||
height: auto;
|
||||
padding: 0 .75rem;
|
||||
fill: var(--highlight);
|
||||
|
||||
&:hover {
|
||||
fill: var(--text-light);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -65,6 +65,8 @@ module.exports = {
|
|||
usernamePattern: /^[a-zA-Z0-9_-]+$/,
|
||||
},
|
||||
stashes: {
|
||||
nameLength: [2, 24],
|
||||
namePattern: /^[a-zA-Z0-9_-]+$/,
|
||||
viewRefreshCooldown: 60, // minutes
|
||||
},
|
||||
media: {
|
||||
|
|
|
|||
|
|
@ -1,87 +1,168 @@
|
|||
<template>
|
||||
<div class="profile">
|
||||
<div class="profile-header">
|
||||
<img
|
||||
v-if="profile.avatar"
|
||||
:src="profile.avatar"
|
||||
class="avatar"
|
||||
>
|
||||
<div class="page">
|
||||
<div class="profile">
|
||||
<div class="profile-header">
|
||||
<div class="user">
|
||||
<img
|
||||
v-if="profile.avatar"
|
||||
:src="profile.avatar"
|
||||
class="avatar"
|
||||
>
|
||||
|
||||
<h2 class="username">{{ profile.username }}</h2>
|
||||
</div>
|
||||
|
||||
<ul class="stashes nolist">
|
||||
<li
|
||||
v-for="stash in profile.stashes"
|
||||
:key="`stash-${stash.id}`"
|
||||
>
|
||||
<div class="stash">
|
||||
<div class="stash-header">
|
||||
<a
|
||||
:href="`/stash/${profile.username}/${stash.slug}`"
|
||||
class="stash-name ellipsis nolink"
|
||||
>
|
||||
<span class="ellipsis">{{ stash.name }}</span>
|
||||
|
||||
<Icon
|
||||
v-if="stash.primary"
|
||||
icon="heart7"
|
||||
class="primary"
|
||||
/>
|
||||
</a>
|
||||
|
||||
<Icon
|
||||
v-if="profile.id === user?.id && stash.public"
|
||||
icon="eye"
|
||||
class="public noselect"
|
||||
@click="setStashPublic(stash, false)"
|
||||
/>
|
||||
|
||||
<Icon
|
||||
v-else-if="profile.id === user?.id"
|
||||
icon="eye-blocked"
|
||||
class="public noselect"
|
||||
@click="setStashPublic(stash, true)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="stash-counts">
|
||||
<a
|
||||
:href="`/stash/${profile.username}/${stash.slug}/scenes`"
|
||||
class="stash-count nolink"
|
||||
><Icon icon="clapboard-play" />{{ abbreviateNumber(stash.stashedScenes) }}</a>
|
||||
|
||||
<a
|
||||
:href="`/stash/${profile.username}/${stash.slug}/actors`"
|
||||
class="stash-count nolink"
|
||||
><Icon icon="star" />{{ abbreviateNumber(stash.stashedActors) }}</a>
|
||||
|
||||
<a
|
||||
:href="`/stash/${profile.username}/${stash.slug}/movies`"
|
||||
class="stash-count nolink"
|
||||
><Icon icon="movie" />{{ abbreviateNumber(stash.stashedMovies) }}</a>
|
||||
</div>
|
||||
<h2 class="username ellipsis">{{ profile.username }}</h2>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<span class="age"><Icon icon="cake" />{{ formatDistanceStrict(Date.now(), profile.createdAt) }}</span>
|
||||
</div>
|
||||
|
||||
<section class="profile-section">
|
||||
<div class="section-header">
|
||||
<h3 class="heading">Stashes</h3>
|
||||
|
||||
<button
|
||||
class="button"
|
||||
@click="showStashDialog = true"
|
||||
>
|
||||
<Icon icon="plus3" />
|
||||
<span class="button-label">New stash</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<Dialog
|
||||
v-if="showStashDialog"
|
||||
title="New stash"
|
||||
@close="showStashDialog = false"
|
||||
@open="stashNameInput?.focus()"
|
||||
>
|
||||
<form
|
||||
class="dialog-body"
|
||||
@submit.prevent="createStash"
|
||||
>
|
||||
<input
|
||||
ref="stashNameInput"
|
||||
v-model="stashName"
|
||||
class="input"
|
||||
placeholder="Stash name"
|
||||
>
|
||||
|
||||
<button
|
||||
class="button button-submit"
|
||||
>Create stash</button>
|
||||
</form>
|
||||
</Dialog>
|
||||
|
||||
<ul class="stashes nolist">
|
||||
<li
|
||||
v-for="stash in profile.stashes"
|
||||
:key="`stash-${stash.id}`"
|
||||
>
|
||||
<div class="stash">
|
||||
<div class="stash-header">
|
||||
<a
|
||||
:href="`/stash/${profile.username}/${stash.slug}`"
|
||||
class="stash-name ellipsis nolink"
|
||||
>
|
||||
<span class="ellipsis">{{ stash.name }}</span>
|
||||
|
||||
<Icon
|
||||
v-if="stash.primary"
|
||||
icon="heart7"
|
||||
class="primary"
|
||||
/>
|
||||
</a>
|
||||
|
||||
<Icon
|
||||
v-if="profile.id === user?.id && stash.public"
|
||||
icon="eye"
|
||||
class="public noselect"
|
||||
@click="setStashPublic(stash, false)"
|
||||
/>
|
||||
|
||||
<Icon
|
||||
v-else-if="profile.id === user?.id"
|
||||
icon="eye-blocked"
|
||||
class="public noselect"
|
||||
@click="setStashPublic(stash, true)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="stash-counts">
|
||||
<a
|
||||
:href="`/stash/${profile.username}/${stash.slug}/scenes`"
|
||||
class="stash-count nolink"
|
||||
><Icon icon="clapboard-play" />{{ abbreviateNumber(stash.stashedScenes) }}</a>
|
||||
|
||||
<a
|
||||
:href="`/stash/${profile.username}/${stash.slug}/actors`"
|
||||
class="stash-count nolink"
|
||||
><Icon icon="star" />{{ abbreviateNumber(stash.stashedActors) }}</a>
|
||||
|
||||
<a
|
||||
:href="`/stash/${profile.username}/${stash.slug}/movies`"
|
||||
class="stash-count nolink"
|
||||
><Icon icon="movie" />{{ abbreviateNumber(stash.stashedMovies) }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, inject } from 'vue';
|
||||
import { formatDistanceStrict } from 'date-fns';
|
||||
|
||||
import { get, patch } from '#/src/api.js';
|
||||
import { get, post, patch } from '#/src/api.js';
|
||||
import events from '#/src/events.js';
|
||||
|
||||
import Dialog from '#/components/dialog/dialog.vue';
|
||||
|
||||
const pageContext = inject('pageContext');
|
||||
const profile = ref(pageContext.pageProps.profile);
|
||||
const user = pageContext.user;
|
||||
|
||||
const stashName = ref(null);
|
||||
const stashNameInput = ref(null);
|
||||
|
||||
const done = ref(true);
|
||||
const showStashDialog = ref(false);
|
||||
|
||||
function abbreviateNumber(number) {
|
||||
return number?.toLocaleString('en-US', { notation: 'compact' }) || 0;
|
||||
}
|
||||
|
||||
async function createStash() {
|
||||
if (done.value === false) {
|
||||
return;
|
||||
}
|
||||
|
||||
done.value = false;
|
||||
|
||||
try {
|
||||
await post('/stashes', {
|
||||
name: stashName.value,
|
||||
public: false,
|
||||
});
|
||||
|
||||
profile.value = await get(`/users/${profile.value.id}`);
|
||||
showStashDialog.value = false;
|
||||
|
||||
events.emit('feedback', {
|
||||
type: 'success',
|
||||
message: `Created stash '${stashName.value}'`,
|
||||
});
|
||||
} catch (error) {
|
||||
events.emit('feedback', {
|
||||
type: 'error',
|
||||
message: `Failed to create stash '${stashName.value}': ${error.message}`,
|
||||
});
|
||||
}
|
||||
|
||||
done.value = true;
|
||||
}
|
||||
|
||||
async function setStashPublic(stash, isPublic) {
|
||||
if (done.value === false) {
|
||||
return;
|
||||
|
|
@ -96,8 +177,8 @@ async function setStashPublic(stash, isPublic) {
|
|||
events.emit('feedback', {
|
||||
type: isPublic ? 'success' : 'remove',
|
||||
message: isPublic
|
||||
? `Stash '${stash.name}' is public`
|
||||
: `Stash '${stash.name}' is private`,
|
||||
? `Stash '${stash.name}' set to public`
|
||||
: `Stash '${stash.name}' set to private`,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
|
|
@ -113,12 +194,31 @@ async function setStashPublic(stash, isPublic) {
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
justify-content: center;
|
||||
background: var(--background-base-10);
|
||||
}
|
||||
|
||||
.profile {
|
||||
width: 1200px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.profile-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: .5rem 1rem;
|
||||
color: var(--highlight-strong-30);
|
||||
background: var(--grey-dark-40);
|
||||
border-radius: 0 0 .5rem .5rem;
|
||||
}
|
||||
|
||||
.user {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.username {
|
||||
|
|
@ -126,6 +226,17 @@ async function setStashPublic(stash, isPublic) {
|
|||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.age {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
|
||||
.icon {
|
||||
fill: var(--highlight-strong-20);
|
||||
margin-right: .75rem;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
|
|
@ -133,15 +244,33 @@ async function setStashPublic(stash, isPublic) {
|
|||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: .5rem .5rem .5rem .5rem;
|
||||
|
||||
.button {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.heading {
|
||||
margin: 0;
|
||||
font-size: 1.1rem;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.stashes {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
padding: 0 .5rem 1rem .5rem;
|
||||
}
|
||||
|
||||
.stash {
|
||||
width: 100%;
|
||||
border-radius: .25rem;
|
||||
background: var(--background);
|
||||
box-shadow: 0 0 3px var(--shadow-weak-30);
|
||||
|
||||
|
|
@ -210,4 +339,46 @@ async function setStashPublic(stash, isPublic) {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-body {
|
||||
padding: 1rem;
|
||||
|
||||
.input {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media(--compact) {
|
||||
.profile-header {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
padding: .5rem 1rem .5rem 1rem;
|
||||
}
|
||||
|
||||
.stashes {
|
||||
padding: 0 1rem 1rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media(--small-30) {
|
||||
.section-header {
|
||||
padding: .5rem .5rem .5rem .5rem;
|
||||
}
|
||||
|
||||
.stashes {
|
||||
padding: 0 .5rem 1rem .5rem;
|
||||
}
|
||||
|
||||
.age .icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media(--small-50) {
|
||||
.age {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -61,8 +61,6 @@ onMounted(() => {
|
|||
events.on('scrollUp', () => { content.value.scrollTop = 0; });
|
||||
|
||||
events.on('feedback', async (event) => {
|
||||
console.log(event);
|
||||
|
||||
feedback.value = event;
|
||||
|
||||
await nextTick();
|
||||
|
|
@ -87,7 +85,7 @@ onMounted(() => {
|
|||
opacity: 0,
|
||||
},
|
||||
], {
|
||||
duration: 3000,
|
||||
duration: event.type === 'error' ? 5000 : 3000,
|
||||
easing: 'ease-in-out',
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -47,6 +47,7 @@ export async function login(credentials, userIp) {
|
|||
const { user, stashes } = await fetchUser(credentials.username.trim(), {
|
||||
email: true,
|
||||
raw: true,
|
||||
includeStashes: true,
|
||||
}).catch(() => {
|
||||
throw new HttpError('Username or password incorrect', 401);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -22,9 +22,9 @@ export function curateStash(stash, assets = {}) {
|
|||
primary: stash.primary,
|
||||
public: stash.public,
|
||||
createdAt: stash.created_at,
|
||||
stashedScenes: stash.stashed_scenes || null,
|
||||
stashedMovies: stash.stashed_movies || null,
|
||||
stashedActors: stash.stashed_actors || null,
|
||||
stashedScenes: stash.stashed_scenes ?? null,
|
||||
stashedMovies: stash.stashed_movies ?? null,
|
||||
stashedActors: stash.stashed_actors ?? null,
|
||||
user: assets.user ? {
|
||||
id: assets.user.id,
|
||||
username: assets.user.username,
|
||||
|
|
@ -99,6 +99,22 @@ export async function createStash(newStash, sessionUser) {
|
|||
throw new HttpError('You are not authenthicated', 401);
|
||||
}
|
||||
|
||||
if (!newStash.name) {
|
||||
throw new HttpError('Stash name required', 400);
|
||||
}
|
||||
|
||||
if (newStash.name.length < config.stashes.nameLength[0]) {
|
||||
throw new HttpError('Stash name is too short', 400);
|
||||
}
|
||||
|
||||
if (newStash.name.length > config.stashes.nameLength[1]) {
|
||||
throw new HttpError('Stash name is too long', 400);
|
||||
}
|
||||
|
||||
if (!config.stashes.namePattern.test(newStash.name)) {
|
||||
throw new HttpError('Stash name contains invalid characters', 400);
|
||||
}
|
||||
|
||||
try {
|
||||
const stash = await knex('stashes')
|
||||
.insert(curateStashEntry(newStash, sessionUser))
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ export async function fetchUser(userId, options = {}, reqUser) {
|
|||
const stashes = await knex('stashes')
|
||||
.where('user_id', user.id)
|
||||
.modify((builder) => {
|
||||
if (reqUser?.id !== user.id) {
|
||||
if (reqUser?.id !== user.id && !options.includeStashes) {
|
||||
builder.where('public', true);
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ import {
|
|||
} from './auth.js';
|
||||
|
||||
import {
|
||||
fetchUserApi
|
||||
fetchUserApi,
|
||||
} from './users.js';
|
||||
|
||||
import {
|
||||
|
|
|
|||
Loading…
Reference in New Issue