[FA-55] Finished aside from deactivation/integration events
This commit is contained in:
gamer147
@@ -44,6 +44,12 @@
|
||||
<div
|
||||
class="absolute right-0 z-50 mt-2 w-48 rounded-md bg-white p-2 shadow-lg dark:bg-gray-800"
|
||||
>
|
||||
<a
|
||||
href="/settings"
|
||||
class="flex w-full items-center justify-start rounded-md px-4 py-2 text-sm font-medium hover:bg-gray-100 dark:hover:bg-gray-700"
|
||||
>
|
||||
Settings
|
||||
</a>
|
||||
<Button variant="ghost" class="w-full justify-start" onclick={handleLogout}>
|
||||
Sign out
|
||||
</Button>
|
||||
|
||||
211
fictionarchive-web-astro/src/lib/components/SettingsPage.svelte
Normal file
211
fictionarchive-web-astro/src/lib/components/SettingsPage.svelte
Normal file
@@ -0,0 +1,211 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { client } from '$lib/graphql/client';
|
||||
import {
|
||||
GetSettingsPageDataDocument,
|
||||
InviteUserDocument,
|
||||
type GetSettingsPageDataQuery
|
||||
} from '$lib/graphql/__generated__/graphql';
|
||||
import * as Tabs from '$lib/components/ui/tabs';
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import { Input } from '$lib/components/ui/input';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card';
|
||||
import { Badge } from '$lib/components/ui/badge';
|
||||
|
||||
let currentUser: GetSettingsPageDataQuery['currentUser'] | null = $state(null);
|
||||
let fetching = $state(true);
|
||||
let error: string | null = $state(null);
|
||||
|
||||
// Form state
|
||||
let email = $state('');
|
||||
let username = $state('');
|
||||
let submitting = $state(false);
|
||||
let formError: string | null = $state(null);
|
||||
let formSuccess = $state(false);
|
||||
|
||||
const availableInvites = $derived(currentUser?.availableInvites ?? 0);
|
||||
const canInvite = $derived(availableInvites > 0 && !submitting && !formSuccess);
|
||||
|
||||
async function fetchData() {
|
||||
fetching = true;
|
||||
error = null;
|
||||
|
||||
try {
|
||||
const result = await client.query(GetSettingsPageDataDocument, {}).toPromise();
|
||||
|
||||
if (result.error) {
|
||||
error = result.error.message;
|
||||
return;
|
||||
}
|
||||
|
||||
if (result.data) {
|
||||
currentUser = result.data.currentUser;
|
||||
}
|
||||
} catch (e) {
|
||||
error = e instanceof Error ? e.message : 'Unknown error';
|
||||
} finally {
|
||||
fetching = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleInvite(e: Event) {
|
||||
e.preventDefault();
|
||||
|
||||
if (!email.trim() || !username.trim()) {
|
||||
formError = 'Please fill in all fields';
|
||||
return;
|
||||
}
|
||||
|
||||
submitting = true;
|
||||
formError = null;
|
||||
|
||||
try {
|
||||
const result = await client
|
||||
.mutation(InviteUserDocument, {
|
||||
input: { email: email.trim(), username: username.trim() }
|
||||
})
|
||||
.toPromise();
|
||||
|
||||
if (result.error) {
|
||||
formError = result.error.message;
|
||||
return;
|
||||
}
|
||||
|
||||
if (result.data?.inviteUser?.errors?.length) {
|
||||
formError = result.data.inviteUser.errors[0].message;
|
||||
return;
|
||||
}
|
||||
|
||||
if (result.data?.inviteUser?.userDto) {
|
||||
formSuccess = true;
|
||||
// Refresh data to update invite count and list
|
||||
await fetchData();
|
||||
// Reset form after delay
|
||||
setTimeout(() => {
|
||||
email = '';
|
||||
username = '';
|
||||
formSuccess = false;
|
||||
}, 2000);
|
||||
}
|
||||
} catch (e) {
|
||||
formError = e instanceof Error ? e.message : 'Unknown error occurred';
|
||||
} finally {
|
||||
submitting = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
fetchData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold">Settings</h1>
|
||||
<p class="text-muted-foreground">Manage your account settings</p>
|
||||
</div>
|
||||
|
||||
{#if fetching}
|
||||
<div class="flex items-center justify-center py-12">
|
||||
<div class="text-muted-foreground">Loading...</div>
|
||||
</div>
|
||||
{:else if error}
|
||||
<Card>
|
||||
<CardContent class="py-6">
|
||||
<p class="text-destructive">{error}</p>
|
||||
<Button class="mt-4" onclick={fetchData}>Try Again</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{:else}
|
||||
<Tabs.Root value="invites">
|
||||
<Tabs.List class="mb-6">
|
||||
<Tabs.Trigger value="invites">Invites</Tabs.Trigger>
|
||||
</Tabs.List>
|
||||
|
||||
<Tabs.Content value="invites" class="space-y-6">
|
||||
<!-- Invite Form -->
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle class="flex items-center gap-3">
|
||||
Invite a User
|
||||
<Badge variant={availableInvites > 0 ? 'default' : 'secondary'}>
|
||||
{availableInvites} remaining
|
||||
</Badge>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onsubmit={handleInvite} class="space-y-4">
|
||||
<div class="grid gap-4 sm:grid-cols-2">
|
||||
<div class="space-y-2">
|
||||
<label for="invite-email" class="text-sm font-medium">Email</label>
|
||||
<Input
|
||||
id="invite-email"
|
||||
type="email"
|
||||
placeholder="user@example.com"
|
||||
bind:value={email}
|
||||
disabled={!canInvite}
|
||||
/>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label for="invite-username" class="text-sm font-medium">Username</label>
|
||||
<Input
|
||||
id="invite-username"
|
||||
type="text"
|
||||
placeholder="username"
|
||||
bind:value={username}
|
||||
disabled={!canInvite}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if formError}
|
||||
<p class="text-destructive text-sm">{formError}</p>
|
||||
{/if}
|
||||
|
||||
{#if formSuccess}
|
||||
<p class="text-green-600 dark:text-green-400 text-sm">
|
||||
Invitation sent successfully! The user will receive an email to set up their account.
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
<Button type="submit" disabled={!canInvite || !email.trim() || !username.trim()}>
|
||||
{#if submitting}
|
||||
Sending...
|
||||
{:else if formSuccess}
|
||||
Sent!
|
||||
{:else}
|
||||
Send Invite
|
||||
{/if}
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<!-- Invited Users List -->
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Invited Users</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{#if !currentUser?.invitedUsers?.length}
|
||||
<p class="text-muted-foreground text-sm">
|
||||
You haven't invited anyone yet.
|
||||
</p>
|
||||
{:else}
|
||||
<div class="divide-y">
|
||||
{#each currentUser.invitedUsers as user}
|
||||
<div class="flex items-center justify-between py-3 first:pt-0 last:pb-0">
|
||||
<div>
|
||||
<p class="font-medium">{user.username}</p>
|
||||
<p class="text-muted-foreground text-sm">{user.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Tabs.Content>
|
||||
</Tabs.Root>
|
||||
{/if}
|
||||
</div>
|
||||
Reference in New Issue
Block a user