trev/trevstack
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Releases 9 Activity

feat: file uploads

Browse Source
This commit is contained in:
trev
2025-03-16 06:50:11 -04:00
parent 50c8d18df9
commit f6d75964c1
25 changed files with 1393 additions and 320 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/src/app.html
View File

@ -4,6 +4,7 @@
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>TrevStack</title>
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="tap" class="min-h-screen bg-base text-text">

182
client/src/lib/services/user/v1/user_pb.ts
View File

@ -10,12 +10,69 @@ import type { Message } from "@bufbuild/protobuf";
* Describes the file user/v1/user.proto.
*/
export const file_user_v1_user: GenFile = /*@__PURE__*/
fileDesc("ChJ1c2VyL3YxL3VzZXIucHJvdG8SB3VzZXIudjEiXQoVQ2hhbmdlUGFzc3dvcmRSZXF1ZXN0EhQKDG9sZF9wYXNzd29yZBgBIAEoCRIUCgxuZXdfcGFzc3dvcmQYAiABKAkSGAoQY29uZmlybV9wYXNzd29yZBgDIAEoCSIYChZDaGFuZ2VQYXNzd29yZFJlc3BvbnNlIjsKDUFQSUtleVJlcXVlc3QSEAoIcGFzc3dvcmQYASABKAkSGAoQY29uZmlybV9wYXNzd29yZBgCIAEoCSIdCg5BUElLZXlSZXNwb25zZRILCgNrZXkYASABKAkynwEKC1VzZXJTZXJ2aWNlElMKDkNoYW5nZVBhc3N3b3JkEh4udXNlci52MS5DaGFuZ2VQYXNzd29yZFJlcXVlc3QaHy51c2VyLnYxLkNoYW5nZVBhc3N3b3JkUmVzcG9uc2UiABI7CgZBUElLZXkSFi51c2VyLnYxLkFQSUtleVJlcXVlc3QaFy51c2VyLnYxLkFQSUtleVJlc3BvbnNlIgBCnQEKC2NvbS51c2VyLnYxQglVc2VyUHJvdG9QAVpGZ2l0aHViLmNvbS9zcG90ZGVtbzQvdHJldnN0YWNrL3NlcnZlci9pbnRlcm5hbC9zZXJ2aWNlcy91c2VyL3YxO3VzZXJ2MaICA1VYWKoCB1VzZXIuVjHKAgdVc2VyXFYx4gITVXNlclxWMVxHUEJNZXRhZGF0YeoCCFVzZXI6OlYxYgZwcm90bzM");
fileDesc("ChJ1c2VyL3YxL3VzZXIucHJvdG8SB3VzZXIudjEiVgoEVXNlchIKCgJpZBgBIAEoDRIQCgh1c2VybmFtZRgCIAEoCRIcCg9wcm9maWxlX3BpY3R1cmUYAyABKAlIAIgBAUISChBfcHJvZmlsZV9waWN0dXJlIhAKDkdldFVzZXJSZXF1ZXN0Ii4KD0dldFVzZXJSZXNwb25zZRIbCgR1c2VyGAEgASgLMg0udXNlci52MS5Vc2VyIl0KFVVwZGF0ZVBhc3N3b3JkUmVxdWVzdBIUCgxvbGRfcGFzc3dvcmQYASABKAkSFAoMbmV3X3Bhc3N3b3JkGAIgASgJEhgKEGNvbmZpcm1fcGFzc3dvcmQYAyABKAkiNQoWVXBkYXRlUGFzc3dvcmRSZXNwb25zZRIbCgR1c2VyGAEgASgLMg0udXNlci52MS5Vc2VyIj4KEEdldEFQSUtleVJlcXVlc3QSEAoIcGFzc3dvcmQYASABKAkSGAoQY29uZmlybV9wYXNzd29yZBgCIAEoCSIgChFHZXRBUElLZXlSZXNwb25zZRILCgNrZXkYASABKAkiPgobVXBkYXRlUHJvZmlsZVBpY3R1cmVSZXF1ZXN0EhEKCWZpbGVfbmFtZRgBIAEoCRIMCgRkYXRhGAIgASgMIjsKHFVwZGF0ZVByb2ZpbGVQaWN0dXJlUmVzcG9uc2USGwoEdXNlchgBIAEoCzINLnVzZXIudjEuVXNlcjLPAgoLVXNlclNlcnZpY2USPgoHR2V0VXNlchIXLnVzZXIudjEuR2V0VXNlclJlcXVlc3QaGC51c2VyLnYxLkdldFVzZXJSZXNwb25zZSIAElMKDlVwZGF0ZVBhc3N3b3JkEh4udXNlci52MS5VcGRhdGVQYXNzd29yZFJlcXVlc3QaHy51c2VyLnYxLlVwZGF0ZVBhc3N3b3JkUmVzcG9uc2UiABJECglHZXRBUElLZXkSGS51c2VyLnYxLkdldEFQSUtleVJlcXVlc3QaGi51c2VyLnYxLkdldEFQSUtleVJlc3BvbnNlIgASZQoUVXBkYXRlUHJvZmlsZVBpY3R1cmUSJC51c2VyLnYxLlVwZGF0ZVByb2ZpbGVQaWN0dXJlUmVxdWVzdBolLnVzZXIudjEuVXBkYXRlUHJvZmlsZVBpY3R1cmVSZXNwb25zZSIAQp0BCgtjb20udXNlci52MUIJVXNlclByb3RvUAFaRmdpdGh1Yi5jb20vc3BvdGRlbW80L3RyZXZzdGFjay9zZXJ2ZXIvaW50ZXJuYWwvc2VydmljZXMvdXNlci92MTt1c2VydjGiAgNVWFiqAgdVc2VyLlYxygIHVXNlclxWMeICE1VzZXJcVjFcR1BCTWV0YWRhdGHqAghVc2VyOjpWMWIGcHJvdG8z");
/**
* @generated from message user.v1.ChangePasswordRequest
* @generated from message user.v1.User
*/
export type ChangePasswordRequest = Message<"user.v1.ChangePasswordRequest"> & {
export type User = Message<"user.v1.User"> & {
/**
* @generated from field: uint32 id = 1;
*/
id: number;
/**
* @generated from field: string username = 2;
*/
username: string;
/**
* @generated from field: optional string profile_picture = 3;
*/
profilePicture?: string;
};
/**
* Describes the message user.v1.User.
* Use `create(UserSchema)` to create a new message.
*/
export const UserSchema: GenMessage<User> = /*@__PURE__*/
messageDesc(file_user_v1_user, 0);
/**
* @generated from message user.v1.GetUserRequest
*/
export type GetUserRequest = Message<"user.v1.GetUserRequest"> & {
};
/**
* Describes the message user.v1.GetUserRequest.
* Use `create(GetUserRequestSchema)` to create a new message.
*/
export const GetUserRequestSchema: GenMessage<GetUserRequest> = /*@__PURE__*/
messageDesc(file_user_v1_user, 1);
/**
* @generated from message user.v1.GetUserResponse
*/
export type GetUserResponse = Message<"user.v1.GetUserResponse"> & {
/**
* @generated from field: user.v1.User user = 1;
*/
user?: User;
};
/**
* Describes the message user.v1.GetUserResponse.
* Use `create(GetUserResponseSchema)` to create a new message.
*/
export const GetUserResponseSchema: GenMessage<GetUserResponse> = /*@__PURE__*/
messageDesc(file_user_v1_user, 2);
/**
* @generated from message user.v1.UpdatePasswordRequest
*/
export type UpdatePasswordRequest = Message<"user.v1.UpdatePasswordRequest"> & {
/**
* @generated from field: string old_password = 1;
*/
@ -33,29 +90,33 @@ export type ChangePasswordRequest = Message<"user.v1.ChangePasswordRequest"> & {
};
/**
* Describes the message user.v1.ChangePasswordRequest.
* Use `create(ChangePasswordRequestSchema)` to create a new message.
* Describes the message user.v1.UpdatePasswordRequest.
* Use `create(UpdatePasswordRequestSchema)` to create a new message.
*/
export const ChangePasswordRequestSchema: GenMessage<ChangePasswordRequest> = /*@__PURE__*/
messageDesc(file_user_v1_user, 0);
export const UpdatePasswordRequestSchema: GenMessage<UpdatePasswordRequest> = /*@__PURE__*/
messageDesc(file_user_v1_user, 3);
/**
* @generated from message user.v1.ChangePasswordResponse
* @generated from message user.v1.UpdatePasswordResponse
*/
export type ChangePasswordResponse = Message<"user.v1.ChangePasswordResponse"> & {
export type UpdatePasswordResponse = Message<"user.v1.UpdatePasswordResponse"> & {
/**
* @generated from field: user.v1.User user = 1;
*/
user?: User;
};
/**
* Describes the message user.v1.ChangePasswordResponse.
* Use `create(ChangePasswordResponseSchema)` to create a new message.
* Describes the message user.v1.UpdatePasswordResponse.
* Use `create(UpdatePasswordResponseSchema)` to create a new message.
*/
export const ChangePasswordResponseSchema: GenMessage<ChangePasswordResponse> = /*@__PURE__*/
messageDesc(file_user_v1_user, 1);
export const UpdatePasswordResponseSchema: GenMessage<UpdatePasswordResponse> = /*@__PURE__*/
messageDesc(file_user_v1_user, 4);
/**
* @generated from message user.v1.APIKeyRequest
* @generated from message user.v1.GetAPIKeyRequest
*/
export type APIKeyRequest = Message<"user.v1.APIKeyRequest"> & {
export type GetAPIKeyRequest = Message<"user.v1.GetAPIKeyRequest"> & {
/**
* @generated from field: string password = 1;
*/
@ -68,16 +129,16 @@ export type APIKeyRequest = Message<"user.v1.APIKeyRequest"> & {
};
/**
* Describes the message user.v1.APIKeyRequest.
* Use `create(APIKeyRequestSchema)` to create a new message.
* Describes the message user.v1.GetAPIKeyRequest.
* Use `create(GetAPIKeyRequestSchema)` to create a new message.
*/
export const APIKeyRequestSchema: GenMessage<APIKeyRequest> = /*@__PURE__*/
messageDesc(file_user_v1_user, 2);
export const GetAPIKeyRequestSchema: GenMessage<GetAPIKeyRequest> = /*@__PURE__*/
messageDesc(file_user_v1_user, 5);
/**
* @generated from message user.v1.APIKeyResponse
* @generated from message user.v1.GetAPIKeyResponse
*/
export type APIKeyResponse = Message<"user.v1.APIKeyResponse"> & {
export type GetAPIKeyResponse = Message<"user.v1.GetAPIKeyResponse"> & {
/**
* @generated from field: string key = 1;
*/
@ -85,31 +146,86 @@ export type APIKeyResponse = Message<"user.v1.APIKeyResponse"> & {
};
/**
* Describes the message user.v1.APIKeyResponse.
* Use `create(APIKeyResponseSchema)` to create a new message.
* Describes the message user.v1.GetAPIKeyResponse.
* Use `create(GetAPIKeyResponseSchema)` to create a new message.
*/
export const APIKeyResponseSchema: GenMessage<APIKeyResponse> = /*@__PURE__*/
messageDesc(file_user_v1_user, 3);
export const GetAPIKeyResponseSchema: GenMessage<GetAPIKeyResponse> = /*@__PURE__*/
messageDesc(file_user_v1_user, 6);
/**
* @generated from message user.v1.UpdateProfilePictureRequest
*/
export type UpdateProfilePictureRequest = Message<"user.v1.UpdateProfilePictureRequest"> & {
/**
* @generated from field: string file_name = 1;
*/
fileName: string;
/**
* @generated from field: bytes data = 2;
*/
data: Uint8Array;
};
/**
* Describes the message user.v1.UpdateProfilePictureRequest.
* Use `create(UpdateProfilePictureRequestSchema)` to create a new message.
*/
export const UpdateProfilePictureRequestSchema: GenMessage<UpdateProfilePictureRequest> = /*@__PURE__*/
messageDesc(file_user_v1_user, 7);
/**
* @generated from message user.v1.UpdateProfilePictureResponse
*/
export type UpdateProfilePictureResponse = Message<"user.v1.UpdateProfilePictureResponse"> & {
/**
* @generated from field: user.v1.User user = 1;
*/
user?: User;
};
/**
* Describes the message user.v1.UpdateProfilePictureResponse.
* Use `create(UpdateProfilePictureResponseSchema)` to create a new message.
*/
export const UpdateProfilePictureResponseSchema: GenMessage<UpdateProfilePictureResponse> = /*@__PURE__*/
messageDesc(file_user_v1_user, 8);
/**
* @generated from service user.v1.UserService
*/
export const UserService: GenService<{
/**
* @generated from rpc user.v1.UserService.ChangePassword
* @generated from rpc user.v1.UserService.GetUser
*/
changePassword: {
getUser: {
methodKind: "unary";
input: typeof ChangePasswordRequestSchema;
output: typeof ChangePasswordResponseSchema;
input: typeof GetUserRequestSchema;
output: typeof GetUserResponseSchema;
},
/**
* @generated from rpc user.v1.UserService.APIKey
* @generated from rpc user.v1.UserService.UpdatePassword
*/
aPIKey: {
updatePassword: {
methodKind: "unary";
input: typeof APIKeyRequestSchema;
output: typeof APIKeyResponseSchema;
input: typeof UpdatePasswordRequestSchema;
output: typeof UpdatePasswordResponseSchema;
},
/**
* @generated from rpc user.v1.UserService.GetAPIKey
*/
getAPIKey: {
methodKind: "unary";
input: typeof GetAPIKeyRequestSchema;
output: typeof GetAPIKeyResponseSchema;
},
/**
* @generated from rpc user.v1.UserService.UpdateProfilePicture
*/
updateProfilePicture: {
methodKind: "unary";
input: typeof UpdateProfilePictureRequestSchema;
output: typeof UpdateProfilePictureResponseSchema;
},
}> = /*@__PURE__*/
serviceDesc(file_user_v1_user, 0);

29
client/src/lib/ui/Button.svelte Normal file
View File

@ -0,0 +1,29 @@
<script lang="ts">
import { Button } from 'bits-ui';
import { cn } from '$lib/utils';
import type { MouseEventHandler } from 'svelte/elements';
import type { Snippet } from 'svelte';
let {
className,
type,
onclick,
children
}: {
className?: string;
type?: 'submit' | 'reset' | 'button' | null;
onclick?: () => MouseEventHandler<HTMLButtonElement> | null | undefined;
children?: Snippet<[]>;
} = $props();
</script>
<Button.Root
{type}
class={cn(
'bg-sky text-crust hover:brightness-120 w-fit cursor-pointer rounded p-2 px-4 text-sm font-medium transition-all',
className
)}
{onclick}
>
{@render children?.()}
</Button.Root>

2
client/src/lib/ui/Modal.svelte
View File

@ -7,7 +7,7 @@
trigger,
content,
open = $bindable(false)
}: { trigger: Snippet; content: Snippet; open: boolean } = $props();
}: { trigger: Snippet; content: Snippet; open?: boolean } = $props();
</script>
<Dialog.Root bind:open>

67
client/src/routes/(app)/+layout.svelte
View File

@ -9,17 +9,21 @@
House,
type Icon as IconType
} from '@lucide/svelte';
import { NavigationMenu, Popover, Separator, Dialog } from 'bits-ui';
import { fly, slide } from 'svelte/transition';
import { NavigationMenu, Popover, Separator, Dialog, Avatar } from 'bits-ui';
import { fade, fly, slide } from 'svelte/transition';
import { toast } from 'svelte-sonner';
import { goto } from '$app/navigation';
import { AuthClient } from '$lib/transport';
import { AuthClient, UserClient } from '$lib/transport';
import { page } from '$app/state';
import { cn } from '$lib/utils';
let { children } = $props();
const username = localStorage.getItem('username');
let user = UserClient.getUser({}).then((res) => {
return res.user;
});
let sidebarOpen = $state(false);
let popupOpen = $state(false);
type MenuItem = {
name: string;
@ -46,14 +50,17 @@
async function logout() {
await AuthClient.logout({});
localStorage.removeItem('username');
await goto('/auth');
toast.success('logged out successfully');
if (sidebarOpen) {
sidebarOpen = false;
}
}
</script>
<header
class="border-surface-0 bg-mantle fixed flex h-[50px] w-full items-center justify-between border-b p-2 px-6 drop-shadow-md"
class="border-surface-0 bg-mantle fixed z-50 flex h-[50px] w-full items-center justify-between border-b p-2 px-6 drop-shadow-md"
>
<div class="flex items-center gap-4">
<Dialog.Root bind:open={sidebarOpen}>
@ -61,7 +68,20 @@
<Menu />
</Dialog.Trigger>
<Dialog.Portal>
<Dialog.Overlay class="fixed inset-0 z-50 mt-[50px] bg-black/50" />
<Dialog.Overlay forceMount>
{#snippet child({ props, open })}
{#if open}
<div
{...props}
transition:fade={{
duration: 150
}}
>
<div class="fixed inset-0 z-50 mt-[50px] bg-black/50"></div>
</div>
{/if}
{/snippet}
</Dialog.Overlay>
<Dialog.Content forceMount>
{#snippet child({ props, open })}
{#if open}
@ -73,7 +93,9 @@
}}
>
<NavigationMenu.Root orientation="vertical">
<NavigationMenu.List class="flex w-full flex-col gap-2 overflow-y-scroll p-2">
<NavigationMenu.List
class="flex w-full flex-col gap-2 overflow-y-auto overflow-x-hidden p-2"
>
{#each menuItems as item}
{@const Icon = item.icon}
<NavigationMenu.Item>
@ -83,7 +105,7 @@
page.url.pathname === item.href && 'bg-surface-0'
)}
href={item.href}
onclick={() => {
onSelect={() => {
if (sidebarOpen) {
sidebarOpen = false;
}
@ -101,6 +123,11 @@
<a
href="/settings"
class="hover:bg-surface-0 flex select-none items-center gap-2 rounded-lg p-2 transition-all"
onclick={() => {
if (sidebarOpen) {
sidebarOpen = false;
}
}}
>
<Settings />
<span>Settings</span>
@ -146,24 +173,36 @@
<NavigationMenu.Viewport class="absolute" />
</NavigationMenu.Root>
<Popover.Root>
<Popover.Root bind:open={popupOpen}>
<Popover.Trigger
class="border-surface-2 hover:bg-surface-0 cursor-pointer rounded border p-1 px-4 text-sm transition-all"
class="outline-surface-2 hover:brightness-120 bg-text text-crust h-9 w-9 cursor-pointer rounded-full outline outline-offset-2 text-sm transition-all"
>
{username}
{#await user then user}
<Avatar.Root class="flex h-full w-full items-center justify-center">
<Avatar.Image src={user?.profilePicture} alt={`${user?.username}'s avatar`} class="rounded-full" />
<Avatar.Fallback class="font-medium uppercase"
>{user?.username.substring(0, 2)}</Avatar.Fallback
>
</Avatar.Root>
{/await}
</Popover.Trigger>
<Popover.Content forceMount>
{#snippet child({ wrapperProps, props, open })}
{#if open}
<div {...wrapperProps}>
<div
class="bg-mantle border-surface-0 z-50 mt-1 rounded border drop-shadow-md transition-all"
class="bg-mantle border-surface-0 m-1 rounded border drop-shadow-md transition-all"
{...props}
transition:fly
>
<a
class="hover:bg-surface-0 flex items-center gap-1 p-3 px-4 text-sm"
href="/settings"
onclick={() => {
if (popupOpen) {
popupOpen = false;
}
}}
>
<Settings size="20" />
Settings
@ -184,6 +223,6 @@
</Popover.Root>
</header>
<div class="pt-[50px]">
<div class="pt-[50px] overflow-auto">
{@render children()}
</div>

13
client/src/routes/(app)/+page.svelte
View File

@ -1,2 +1,11 @@
<h1>Welcome to TrevStack</h1>
<p>Visit <a href="https://github.com/spotdemo4/trevstack">github.com/spotdemo4/trevstack</a> to read the documentation</p>
<div class="flex h-[calc(100vh-50px)]">
<div class="m-auto flex flex-col gap-2 p-4">
<h1 class="decoration-sky text-4xl font-bold underline underline-offset-4">
Welcome to TrevStack
</h1>
<p>
Visit <a href="https://github.com/spotdemo4/trevstack">github.com/spotdemo4/trevstack</a> to read
the documentation
</p>
</div>
</div>

76
client/src/routes/(app)/items/+page.svelte
View File

@ -2,11 +2,10 @@
import { ItemClient } from '$lib/transport';
import { Plus, Trash, Pencil } from '@lucide/svelte';
import { timestampFromDate, timestampDate } from '@bufbuild/protobuf/wkt';
import { Dialog, Button } from 'bits-ui';
import { fade } from 'svelte/transition';
import { toast } from 'svelte-sonner';
import { ConnectError } from '@connectrpc/connect';
import Modal from '$lib/ui/Modal.svelte';
import Button from '$lib/ui/Button.svelte';
import { SvelteMap } from 'svelte/reactivity';
// Config
@ -67,6 +66,7 @@
<td class="px-6 py-3"><div class="bg-surface-2 m-2 h-3 animate-pulse rounded"></div></td>
<td class="px-6 py-3"><div class="bg-surface-2 m-2 h-3 animate-pulse rounded"></div></td>
<td class="px-6 py-3"><div class="bg-surface-2 m-2 h-3 animate-pulse rounded"></div></td>
<td class="w-8"></td>
</tr>
{:then items}
{#each items as item}
@ -80,16 +80,19 @@
<td class="px-6 py-3">{item.quantity}</td>
<td class="pr-2">
<div class="flex gap-2">
<Modal bind:open={
() => editsOpen.has(item.id!) ? editsOpen.get(item.id!)! : editsOpen.set(item.id!, false) && editsOpen.get(item.id!)!,
(value) => editsOpen.set(item.id!, value)
}>
<Modal
bind:open={
() =>
editsOpen.has(item.id!)
? editsOpen.get(item.id!)!
: editsOpen.set(item.id!, false) && editsOpen.get(item.id!)!,
(value) => editsOpen.set(item.id!, value)
}
>
{#snippet trigger()}
<button
class="bg-text text-crust hover:brightness-120 block cursor-pointer rounded p-2 drop-shadow-md"
>
<Button className="bg-text">
<Pencil />
</button>
</Button>
{/snippet}
{#snippet content()}
@ -119,7 +122,7 @@
if (response.item && item.id) {
toast.success(`item "${name}" saved`);
editsOpen.set(item.id, false)
editsOpen.set(item.id, false);
await updateItems();
}
} catch (err) {
@ -169,27 +172,25 @@
value={item.quantity}
/>
</div>
<Button.Root
type="submit"
class="bg-sky text-crust hover:brightness-120 w-20 cursor-pointer rounded p-2 px-4 text-sm transition-all"
>
Submit
</Button.Root>
<Button type="submit">Submit</Button>
</div>
</form>
{/snippet}
</Modal>
<Modal bind:open={
() => deletesOpen.has(item.id!) ? deletesOpen.get(item.id!)! : deletesOpen.set(item.id!, false) && deletesOpen.get(item.id!)!,
(value) => deletesOpen.set(item.id!, value)
}>
<Modal
bind:open={
() =>
deletesOpen.has(item.id!)
? deletesOpen.get(item.id!)!
: deletesOpen.set(item.id!, false) && deletesOpen.get(item.id!)!,
(value) => deletesOpen.set(item.id!, value)
}
>
{#snippet trigger()}
<button
class="bg-red text-crust hover:brightness-120 block cursor-pointer rounded p-2 drop-shadow-md"
>
<Button className="bg-red">
<Trash />
</button>
</Button>
{/snippet}
{#snippet content()}
@ -206,7 +207,7 @@
});
toast.success(`item "${item.name}" deleted`);
deletesOpen.set(item.id!, false);
deletesOpen.set(item.id!, false);
await updateItems();
} catch (err) {
const error = ConnectError.from(err);
@ -215,15 +216,11 @@
}}
>
<div class="flex flex-col gap-4 p-3">
<span class="text-center">Are you sure you want to delete "{item.name}"?</span
<span class="text-center"
>Are you sure you want to delete "{item.name}"?</span
>
<div class="flex justify-center gap-4">
<Button.Root
type="submit"
class="bg-sky text-crust hover:brightness-120 cursor-pointer rounded p-2 px-4 text-sm transition-all"
>
Confirm
</Button.Root>
<Button type="submit">Submit</Button>
</div>
</div>
</form>
@ -241,11 +238,9 @@
<div class="mx-4 mt-1 flex justify-end">
<Modal bind:open={addedOpen}>
{#snippet trigger()}
<button
class="bg-sky text-crust hover:brightness-120 cursor-pointer rounded p-2 px-4 drop-shadow-md"
>
<Button className="bg-sky">
<Plus />
</button>
</Button>
{/snippet}
{#snippet content()}
@ -319,12 +314,7 @@
class="border-surface-0 rounded border p-2 text-sm"
/>
</div>
<Button.Root
type="submit"
class="bg-sky text-crust hover:brightness-120 w-fit cursor-pointer rounded p-2 px-4 text-sm transition-all"
>
Submit
</Button.Root>
<Button type="submit">Submit</Button>
</div>
</form>
{/snippet}

210
client/src/routes/(app)/settings/+page.svelte Normal file
View File

@ -0,0 +1,210 @@
<script lang="ts">
import { UserClient } from '$lib/transport';
import Button from '$lib/ui/Button.svelte';
import Modal from '$lib/ui/Modal.svelte';
import { ConnectError } from '@connectrpc/connect';
import { Avatar, Separator } from 'bits-ui';
import { toast } from 'svelte-sonner';
let user = UserClient.getUser({}).then((res) => {
return res.user;
});
let key = $state('');
</script>
<div class="flex h-[calc(100vh-50px)]">
<div class="m-auto flex w-96 flex-col gap-4 p-4">
{#await user then user}
<div class="flex items-center justify-center gap-4">
<div
class="outline-surface-2 bg-text text-crust h-9 w-9 select-none rounded-full outline outline-offset-2 text-sm"
>
<Avatar.Root class="flex h-full w-full items-center justify-center">
<Avatar.Image src={user?.profilePicture} alt={`${user?.username}'s avatar`} class="rounded-full" />
<Avatar.Fallback class="font-medium uppercase"
>{user?.username.substring(0, 2)}</Avatar.Fallback
>
</Avatar.Root>
</div>
<h1 class="overflow-x-hidden text-2xl font-medium">{user?.username}</h1>
</div>
{/await}
<Separator.Root class="bg-surface-0 h-px" />
<div class="flex justify-around gap-2">
<Modal>
{#snippet trigger()}
<Button className="bg-text">Generate API Key</Button>
{/snippet}
{#snippet content()}
<h1 class="border-surface-0 border-b py-3 text-center text-xl font-bold">
Generate API Key
</h1>
{#if key == ''}
<form
onsubmit={async (e) => {
e.preventDefault();
const form = e.target as HTMLFormElement;
const formData = new FormData(form);
try {
const response = await UserClient.getAPIKey({
password: formData.get('password')?.toString(),
confirmPassword: formData.get('confirm-password')?.toString()
});
if (response.key) {
key = response.key;
form.reset();
}
} catch (err) {
const error = ConnectError.from(err);
toast.error(error.rawMessage);
}
}}
>
<div class="flex flex-col gap-4 p-3">
<div class="flex flex-col gap-1">
<label for="password" class="text-sm">Password</label>
<input
id="password"
name="password"
type="password"
class="border-surface-0 rounded border p-2 text-sm"
/>
</div>
<div class="flex flex-col gap-1">
<label for="confirm-password" class="text-sm">Confirm Password</label>
<input
id="confirm-password"
name="confirm-password"
type="password"
class="border-surface-0 rounded border p-2 text-sm"
/>
</div>
<Button type="submit">Submit</Button>
</div>
</form>
{:else}
<div class="p-3">
<span class="text-wrap break-all">{key}</span>
</div>
{/if}
{/snippet}
</Modal>
<Modal>
{#snippet trigger()}
<Button className="bg-text">Change Profile Picture</Button>
{/snippet}
{#snippet content()}
<h1 class="border-surface-0 border-b py-3 text-center text-xl font-bold">
Change Profile Picture
</h1>
<form
onsubmit={async (e) => {
e.preventDefault();
const form = e.target as HTMLFormElement;
let fileInput = document.getElementById('file') as HTMLInputElement;
let file = fileInput.files?.[0];
if (!file) {
toast.error('No file selected');
return;
}
const data = await file.bytes();
try {
const response = await UserClient.updateProfilePicture({
fileName: file.name,
data: data,
});
if (response.user) {
toast.success('Profile picture updated');
form.reset();
}
} catch (err) {
const error = ConnectError.from(err);
toast.error(error.rawMessage);
}
}}
>
<div class="flex flex-col gap-4 p-3">
<div class="flex flex-col gap-1">
<label for="file" class="text-sm">Profile Picture</label>
<input
id="file"
name="file"
type="file"
class="border-surface-0 rounded border p-2 text-sm"
/>
</div>
<Button type="submit">Submit</Button>
</div>
</form>
{/snippet}
</Modal>
</div>
<form
onsubmit={async (e) => {
e.preventDefault();
const form = e.target as HTMLFormElement;
const formData = new FormData(form);
try {
await UserClient.updatePassword({
oldPassword: formData.get('old-password')?.toString(),
newPassword: formData.get('new-password')?.toString(),
confirmPassword: formData.get('confirm-password')?.toString()
});
toast.success('password updated successfully');
form.reset();
} catch (err) {
const error = ConnectError.from(err);
toast.error(error.rawMessage);
}
}}
class="bg-mantle border-surface-0 rounded border p-4 drop-shadow-md"
>
<div class="flex flex-col gap-4">
<div class="flex flex-col gap-1">
<label for="old-password" class="text-sm">Old Password</label>
<input
id="old-password"
name="old-password"
type="password"
class="border-surface-0 rounded border p-2 text-sm"
/>
</div>
<div class="flex flex-col gap-1">
<label for="new-password" class="text-sm">New Password</label>
<input
id="new-password"
name="new-password"
type="password"
class="border-surface-0 rounded border p-2 text-sm"
/>
</div>
<div class="flex flex-col gap-1">
<label for="confirm-password" class="text-sm">Confirm New Password</label>
<input
id="confirm-password"
name="confirm-password"
type="password"
class="border-surface-0 rounded border p-2 text-sm"
/>
</div>
<Button type="submit">Submit</Button>
</div>
</form>
</div>
</div>

18
client/src/routes/auth/+page.svelte
View File

@ -1,10 +1,11 @@
<script lang="ts">
import { Tabs, Button } from 'bits-ui';
import { Tabs } from 'bits-ui';
import { cn } from '$lib/utils';
import { AuthClient } from '$lib/transport';
import { goto } from '$app/navigation';
import { ConnectError } from '@connectrpc/connect';
import { toast } from 'svelte-sonner';
import Button from '$lib/ui/Button.svelte';
let tab = $state('login');
</script>
@ -47,7 +48,6 @@
});
if (response.token && username) {
localStorage.setItem('username', username);
goto('/');
}
} catch (err) {
@ -75,12 +75,7 @@
class="border-surface-0 rounded border p-2 text-sm"
/>
</div>
<Button.Root
type="submit"
class="bg-sky text-crust hover:brightness-120 w-20 cursor-pointer rounded p-2 px-4 text-sm transition-all"
>
Submit
</Button.Root>
<Button type="submit">Submit</Button>
</div>
</form>
</Tabs.Content>
@ -138,12 +133,7 @@
class="border-surface-0 rounded border p-2 text-sm"
/>
</div>
<Button.Root
type="submit"
class="bg-sky text-crust hover:brightness-120 w-20 cursor-pointer rounded p-2 px-4 text-sm transition-all"
>
Submit
</Button.Root>
<Button type="submit">Submit</Button>
</div>
</form>
</Tabs.Content>