mirror of
https://github.com/pocket-id/pocket-id.git
synced 2026-02-04 15:39:45 +00:00
104 lines
2.7 KiB
Svelte
104 lines
2.7 KiB
Svelte
<script lang="ts">
|
|
import FormInput from '$lib/components/form/form-input.svelte';
|
|
import ProfilePictureSettings from '$lib/components/form/profile-picture-settings.svelte';
|
|
import { Button } from '$lib/components/ui/button';
|
|
import { m } from '$lib/paraglide/messages';
|
|
import UserService from '$lib/services/user-service';
|
|
import type { UserCreate } from '$lib/types/user.type';
|
|
import { axiosErrorToast } from '$lib/utils/error-util';
|
|
import { createForm } from '$lib/utils/form-util';
|
|
import { BookUser } from 'lucide-svelte';
|
|
import { toast } from 'svelte-sonner';
|
|
import { z } from 'zod';
|
|
|
|
let {
|
|
callback,
|
|
account,
|
|
userId,
|
|
isLdapUser = false
|
|
}: {
|
|
account: UserCreate;
|
|
userId: string;
|
|
callback: (user: UserCreate) => Promise<boolean>;
|
|
isLdapUser?: boolean;
|
|
} = $props();
|
|
|
|
let isLoading = $state(false);
|
|
|
|
const userService = new UserService();
|
|
|
|
const formSchema = z.object({
|
|
firstName: z.string().min(1).max(50),
|
|
lastName: z.string().min(1).max(50),
|
|
username: z
|
|
.string()
|
|
.min(2)
|
|
.max(30)
|
|
.regex(/^[a-z0-9_@.-]+$/, m.username_can_only_contain()),
|
|
email: z.string().email(),
|
|
isAdmin: z.boolean()
|
|
});
|
|
type FormSchema = typeof formSchema;
|
|
|
|
const { inputs, ...form } = createForm<FormSchema>(formSchema, account);
|
|
|
|
async function onSubmit() {
|
|
const data = form.validate();
|
|
if (!data) return;
|
|
isLoading = true;
|
|
await callback(data);
|
|
isLoading = false;
|
|
}
|
|
|
|
async function updateProfilePicture(image: File) {
|
|
await userService
|
|
.updateCurrentUsersProfilePicture(image)
|
|
.then(() => toast.success(m.profile_picture_updated_successfully()))
|
|
.catch(axiosErrorToast);
|
|
}
|
|
|
|
async function resetProfilePicture() {
|
|
await userService
|
|
.resetCurrentUserProfilePicture()
|
|
.then(() => toast.success(m.profile_picture_has_been_reset()))
|
|
.catch(axiosErrorToast);
|
|
}
|
|
</script>
|
|
|
|
<form onsubmit={onSubmit} class="space-y-6">
|
|
<!-- Profile Picture Section -->
|
|
<ProfilePictureSettings
|
|
{userId}
|
|
{isLdapUser}
|
|
updateCallback={updateProfilePicture}
|
|
resetCallback={resetProfilePicture}
|
|
/>
|
|
|
|
<!-- Divider -->
|
|
<hr class="border-border" />
|
|
|
|
<!-- User Information -->
|
|
<div>
|
|
<div class="flex flex-col gap-3 sm:flex-row">
|
|
<div class="w-full">
|
|
<FormInput label={m.first_name()} bind:input={$inputs.firstName} />
|
|
</div>
|
|
<div class="w-full">
|
|
<FormInput label={m.last_name()} bind:input={$inputs.lastName} />
|
|
</div>
|
|
</div>
|
|
<div class="mt-3 flex flex-col gap-3 sm:flex-row">
|
|
<div class="w-full">
|
|
<FormInput label={m.email()} bind:input={$inputs.email} />
|
|
</div>
|
|
<div class="w-full">
|
|
<FormInput label={m.username()} bind:input={$inputs.username} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-end pt-2">
|
|
<Button {isLoading} type="submit">{m.save()}</Button>
|
|
</div>
|
|
</form>
|