1
0
mirror of https://github.com/pocket-id/pocket-id.git synced 2026-03-24 03:20:08 +00:00

feat: add user display name field (#898)

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

View File

@@ -1,12 +1,13 @@
<script lang="ts">
import SwitchWithLabel from '$lib/components/form/switch-with-label.svelte';
import FormInput from '$lib/components/form/form-input.svelte';
import SwitchWithLabel from '$lib/components/form/switch-with-label.svelte';
import { Button } from '$lib/components/ui/button';
import { m } from '$lib/paraglide/messages';
import appConfigStore from '$lib/stores/application-configuration-store';
import type { User, UserCreate } from '$lib/types/user.type';
import { preventDefault } from '$lib/utils/event-util';
import { createForm } from '$lib/utils/form-util';
import { emptyToUndefined } from '$lib/utils/zod-util';
import { z } from 'zod/v4';
let {
@@ -19,10 +20,12 @@
let isLoading = $state(false);
let inputDisabled = $derived(!!existingUser?.ldapId && $appConfigStore.ldapEnabled);
let hasManualDisplayNameEdit = $state(!!existingUser?.displayName);
const user = {
firstName: existingUser?.firstName || '',
lastName: existingUser?.lastName || '',
displayName: existingUser?.displayName || '',
email: existingUser?.email || '',
username: existingUser?.username || '',
isAdmin: existingUser?.isAdmin || false,
@@ -31,7 +34,8 @@
const formSchema = z.object({
firstName: z.string().min(1).max(50),
lastName: z.string().max(50),
lastName: emptyToUndefined(z.string().max(50).optional()),
displayName: z.string().max(100),
username: z
.string()
.min(2)
@@ -53,15 +57,29 @@
if (success && !existingUser) form.reset();
isLoading = false;
}
function onNameInput() {
if (!hasManualDisplayNameEdit) {
$inputs.displayName.value = `${$inputs.firstName.value}${
$inputs.lastName?.value ? ' ' + $inputs.lastName.value : ''
}`;
}
}
</script>
<form onsubmit={preventDefault(onSubmit)}>
<fieldset disabled={inputDisabled}>
<div class="grid grid-cols-1 items-start gap-5 md:grid-cols-2">
<FormInput label={m.first_name()} bind:input={$inputs.firstName} />
<FormInput label={m.last_name()} bind:input={$inputs.lastName} />
<FormInput label={m.first_name()} oninput={onNameInput} bind:input={$inputs.firstName} />
<FormInput label={m.last_name()} oninput={onNameInput} bind:input={$inputs.lastName} />
<FormInput
label={m.display_name()}
oninput={() => (hasManualDisplayNameEdit = true)}
bind:input={$inputs.displayName}
/>
<FormInput label={m.username()} bind:input={$inputs.username} />
<FormInput label={m.email()} bind:input={$inputs.email} />
</div>
<div class="mt-5 grid grid-cols-1 items-start gap-5 md:grid-cols-2">
<SwitchWithLabel
id="admin-privileges"
label={m.admin_privileges()}