diff --git a/frontend/src/app.d.ts b/frontend/src/app.d.ts index 7ac40dc5..0663671f 100644 --- a/frontend/src/app.d.ts +++ b/frontend/src/app.d.ts @@ -6,10 +6,17 @@ declare global { interface User { id: string; username: string; + firstName?: string; + lastName?: string; + birthDate?: string; + email?: string; + contact?: string; groups: { name: string; permissions: string[]; }[]; + enabled: boolean; + createdAt: string; } interface Locals { diff --git a/frontend/src/routes/profile/+page.server.ts b/frontend/src/routes/profile/+page.server.ts new file mode 100644 index 00000000..7a14518a --- /dev/null +++ b/frontend/src/routes/profile/+page.server.ts @@ -0,0 +1,54 @@ +import { fail } from '@sveltejs/kit'; +import type { PageServerLoad, Actions } from './$types'; +import { createApiClient } from '$lib/api.server'; +import { getErrorMessage } from '$lib/errors'; + +export const load: PageServerLoad = async ({ locals }) => { + return { user: locals.user }; +}; + +export const actions: Actions = { + updateProfile: async ({ request, fetch }) => { + const formData = await request.formData(); + const body = { + firstName: formData.get('firstName')?.toString().trim() || undefined, + lastName: formData.get('lastName')?.toString().trim() || undefined, + birthDate: (formData.get('birthDate')?.toString() || undefined) as string | undefined, + email: formData.get('email')?.toString().trim() || undefined, + contact: formData.get('contact')?.toString().trim() || undefined + }; + + const api = createApiClient(fetch); + const result = await api.PUT('/api/users/me', { body }); + + if (!result.response.ok) { + const code = (result.error as unknown as { code?: string })?.code; + return fail(result.response.status, { updateError: getErrorMessage(code) }); + } + + return { updateSuccess: true }; + }, + + changePassword: async ({ request, fetch }) => { + const formData = await request.formData(); + const currentPassword = formData.get('currentPassword')?.toString() ?? ''; + const newPassword = formData.get('newPassword')?.toString() ?? ''; + const confirmPassword = formData.get('confirmPassword')?.toString() ?? ''; + + if (newPassword !== confirmPassword) { + return fail(400, { passwordError: 'PASSWORDS_DO_NOT_MATCH' }); + } + + const api = createApiClient(fetch); + const result = await api.POST('/api/users/me/password', { + body: { currentPassword, newPassword } + }); + + if (!result.response.ok) { + const code = (result.error as unknown as { code?: string })?.code; + return fail(result.response.status, { passwordError: getErrorMessage(code) }); + } + + return { passwordSuccess: true }; + } +}; diff --git a/frontend/src/routes/profile/+page.svelte b/frontend/src/routes/profile/+page.svelte new file mode 100644 index 00000000..db9e1ee4 --- /dev/null +++ b/frontend/src/routes/profile/+page.svelte @@ -0,0 +1,204 @@ + + +
+ + + + + + {m.btn_back_to_overview()} + + +

{m.profile_heading()}

+ +
+ +
+

+ {m.profile_section_personal()} +

+ + {#if form?.updateSuccess} +
+ {m.profile_saved()} +
+ {/if} + {#if form?.updateError} +
+ {form.updateError} +
+ {/if} + +
+
+ + + + + + + + + +
+ + +
+
+ + +
+

+ {m.profile_section_password()} +

+ + {#if form?.passwordSuccess} +
+ {m.profile_password_changed()} +
+ {/if} + {#if form?.passwordError} +
+ {#if form.passwordError === 'PASSWORDS_DO_NOT_MATCH'} + {m.profile_password_mismatch()} + {:else} + {form.passwordError} + {/if} +
+ {/if} + +
+
+ + + + + +
+ + +
+
+
+
diff --git a/frontend/src/routes/users/[id]/+page.server.ts b/frontend/src/routes/users/[id]/+page.server.ts new file mode 100644 index 00000000..10c3291c --- /dev/null +++ b/frontend/src/routes/users/[id]/+page.server.ts @@ -0,0 +1,16 @@ +import { error } from '@sveltejs/kit'; +import type { PageServerLoad } from './$types'; +import { createApiClient } from '$lib/api.server'; +import { getErrorMessage } from '$lib/errors'; + +export const load: PageServerLoad = async ({ params, fetch }) => { + const api = createApiClient(fetch); + const result = await api.GET('/api/users/{id}', { params: { path: { id: params.id } } }); + + if (!result.response.ok) { + const code = (result.error as unknown as { code?: string })?.code; + throw error(result.response.status, getErrorMessage(code)); + } + + return { profileUser: result.data! }; +}; diff --git a/frontend/src/routes/users/[id]/+page.svelte b/frontend/src/routes/users/[id]/+page.svelte new file mode 100644 index 00000000..c33a459d --- /dev/null +++ b/frontend/src/routes/users/[id]/+page.svelte @@ -0,0 +1,103 @@ + + +
+ + + + + + Zurück + + +

{m.user_profile_heading()}

+ +
+
+ +
+ {#if initials} +
+ {initials} +
+ {:else} +
+ + + +
+ {/if} +
+ + +
+

{fullName}

+ {#if data.profileUser.firstName || data.profileUser.lastName} +

@{data.profileUser.username}

+ {/if} +
+ + +
+ {#if data.profileUser.email} +
+ E-Mail + {data.profileUser.email} +
+ {/if} + + {#if data.profileUser.contact} +
+ Kontakt + {data.profileUser.contact} +
+ {/if} +
+
+
+