feat: invite only events

This commit is contained in:
Levente Orban
2025-10-26 16:47:51 +01:00
parent c9c78d0ea6
commit 93b0bac48a
8 changed files with 103 additions and 92 deletions

View File

@@ -31,6 +31,7 @@
$: event = data.event;
$: rsvps = data.rsvps;
$: currentUserId = data.userId;
$: isEventCreator = event.user_id === currentUserId;
// Create calendar event object when event data changes
$: if (event && browser) {
@@ -77,7 +78,7 @@
const eventId = $page.params.id || '';
const copyEventLink = () => {
if (browser) {
if (browser && isEventCreator) {
const url = `${$page.url.origin}/event/${eventId}`;
navigator.clipboard.writeText(url).then(() => {
toastType = 'copy';
@@ -442,12 +443,17 @@
<!-- Action Buttons -->
<div class="max-w-2xl space-y-3">
<button
on:click={copyEventLink}
class="hover:bg-violet-400/70' w-full rounded-sm border-2 border-violet-500 bg-violet-400/20 px-4 py-3 py-4 font-bold font-medium font-semibold text-white shadow-lg transition-all duration-200 hover:scale-105"
>
{t('event.copyLinkButton')}
</button>
{#if event.visibility !== 'invite-only'}
<button
on:click={copyEventLink}
disabled={!isEventCreator}
class="w-full rounded-sm border-2 px-4 py-3 py-4 font-bold font-medium font-semibold text-white shadow-lg transition-all duration-200 hover:scale-105 {isEventCreator
? 'border-violet-500 bg-violet-400/20 hover:bg-violet-400/70'
: 'cursor-not-allowed border-gray-500 bg-gray-600/20 hover:bg-gray-600/30'}"
>
{t('event.copyLinkButton')}
</button>
{/if}
<button
on:click={openCalendarModal}
class="hover:bg-violet-400/70' w-full rounded-sm border-2 border-violet-500 bg-violet-400/20 px-4 py-3 py-4 font-bold font-medium font-semibold text-white shadow-lg transition-all duration-200 hover:scale-105"

View File

@@ -45,7 +45,8 @@ export const load: PageServerLoad = async ({ params, cookies }) => {
return {
event: event[0],
inviteToken
inviteToken,
userId
};
};

View File

@@ -23,7 +23,8 @@
let isSubmitting = false;
let inviteToken = data.inviteToken;
let inviteLinkCopied = false;
let showInviteLinkToast = false;
let toastHideTimer: number | null = null;
// Get today's date in YYYY-MM-DD format for min attribute
const today = new Date().toISOString().split('T')[0];
@@ -76,9 +77,12 @@
const inviteUrl = `${window.location.origin}/event/${data.event.id}/invite/${inviteToken.token}`;
try {
await navigator.clipboard.writeText(inviteUrl);
inviteLinkCopied = true;
setTimeout(() => {
inviteLinkCopied = false;
showInviteLinkToast = true;
// Auto-hide toast after 3 seconds
if (toastHideTimer) clearTimeout(toastHideTimer);
toastHideTimer = window.setTimeout(() => {
showInviteLinkToast = false;
}, 3000);
} catch (err) {
console.error('Failed to copy invite link:', err);
@@ -375,8 +379,8 @@
</fieldset>
</div>
<!-- Invite Link Section (only for invite-only events) -->
{#if eventData.visibility === 'invite-only' && inviteToken}
<!-- Invite Link Section (only for invite-only events and event creator) -->
{#if eventData.visibility === 'invite-only' && inviteToken && data.event.userId === data.userId}
<div class="rounded-sm border border-amber-500/30 bg-amber-900/20 p-4">
<div class="mb-3 flex items-center justify-between">
<h3 class="text-lg font-semibold text-amber-400">Invite Link</h3>
@@ -395,7 +399,7 @@
on:click={copyInviteLink}
class="rounded-sm border border-amber-300 bg-amber-200 px-3 py-2 text-sm font-medium text-amber-900 hover:bg-amber-300"
>
{inviteLinkCopied ? t('common.success') : t('common.copyLink')}
{t('event.copyInviteLinkButton')}
</button>
</div>
<p class="text-xs text-amber-300">
@@ -436,3 +440,12 @@
</div>
</div>
</div>
<!-- Invite Link Toast -->
{#if showInviteLinkToast}
<div
class="fixed right-4 bottom-4 z-40 w-128 rounded-sm border border-yellow-500/30 bg-yellow-900/20 p-4 text-yellow-400"
>
{t('event.inviteLinkCopied')}
</div>
{/if}

View File

@@ -27,6 +27,7 @@
$: event = data.event;
$: rsvps = data.rsvps;
$: currentUserId = data.userId;
$: isEventCreator = event.user_id === currentUserId;
// Create calendar event object when event data changes
$: if (event && browser) {
@@ -58,7 +59,7 @@
const token = $page.params.token || '';
const copyInviteLink = () => {
if (browser) {
if (browser && isEventCreator) {
const url = `${$page.url.origin}/event/${eventId}/invite/${token}`;
navigator.clipboard.writeText(url).then(() => {
success = 'Invite link copied to clipboard!';
@@ -415,7 +416,10 @@
<div class="max-w-2xl space-y-3">
<button
on:click={copyInviteLink}
class="hover:bg-violet-400/70' w-full rounded-sm border-2 border-violet-500 bg-violet-400/20 px-4 py-3 py-4 font-bold font-medium font-semibold text-white shadow-lg transition-all duration-200 hover:scale-105"
disabled={!isEventCreator}
class="w-full rounded-sm border-2 px-4 py-3 py-4 font-bold font-medium font-semibold text-white shadow-lg transition-all duration-200 hover:scale-105 {isEventCreator
? 'border-violet-500 bg-violet-400/20 hover:bg-violet-400/70'
: 'cursor-not-allowed border-gray-500 bg-gray-600/20 hover:bg-gray-600/30'}"
>
{t('event.copyInviteLinkButton')}
</button>