sendnrw/pocket-id
2
0
Fork 0
mirror of https://github.com/pocket-id/pocket-id.git synced 2026-04-02 04:36:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add user display name field (#898)

Browse Source 
Co-authored-by: Elias Schneider <login@eliasschneider.com>
This commit is contained in:
Kyle Mendell
2025-09-17 10:18:27 -05:00
committed by GitHub
parent 2d6d5df0e7
commit 68373604dd
32 changed files with 280 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
frontend/src/routes/settings/account/account-form.svelte
View File

@@ -8,6 +8,7 @@
import { axiosErrorToast } from '$lib/utils/error-util';
import { preventDefault } from '$lib/utils/event-util';
import { createForm } from '$lib/utils/form-util';
import { emptyToUndefined } from '$lib/utils/zod-util';
import { toast } from 'svelte-sonner';
import { z } from 'zod/v4';
@@ -26,12 +27,14 @@
} = $props();
let isLoading = $state(false);
let hasManualDisplayNameEdit = $state(!!account.displayName);
const userService = new UserService();
const formSchema = z.object({
firstName: z.string().min(1).max(50),
lastName: z.string().max(50).optional(),
lastName: emptyToUndefined(z.string().max(50).optional()),
displayName: z.string().max(100),
username: z
.string()
.min(2)
@@ -44,6 +47,14 @@
const { inputs, ...form } = createForm<FormSchema>(formSchema, account);
function onNameInput() {
if (!hasManualDisplayNameEdit) {
$inputs.displayName.value = `${$inputs.firstName.value}${
$inputs.lastName?.value ? ' ' + $inputs.lastName.value : ''
}`;
}
}
async function onSubmit() {
const data = form.validate();
if (!data) return;
@@ -68,7 +79,6 @@
</script>
<form onsubmit={preventDefault(onSubmit)} class="space-y-6">
<!-- Profile Picture Section -->
<ProfilePictureSettings
{userId}
{isLdapUser}
@@ -76,31 +86,32 @@
resetCallback={resetProfilePicture}
/>
<!-- Divider -->
<hr class="border-border" />
<!-- User Information -->
<fieldset disabled={userInfoInputDisabled}>
<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 class="grid grid-cols-1 gap-3 sm:grid-cols-2">
<div>
<FormInput label={m.first_name()} bind:input={$inputs.firstName} onInput={onNameInput} />
</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>
<FormInput label={m.last_name()} bind:input={$inputs.lastName} onInput={onNameInput} />
</div>
<div>
<FormInput
label={m.display_name()}
bind:input={$inputs.displayName}
onInput={() => (hasManualDisplayNameEdit = true)}
/>
</div>
<div>
<FormInput label={m.username()} bind:input={$inputs.username} />
</div>
<div>
<FormInput label={m.email()} bind:input={$inputs.email} />
</div>
</div>
<div class="flex justify-end pt-2">
<div class="flex justify-end pt-4">
<Button {isLoading} type="submit">{m.save()}</Button>
</div>
</fieldset>