christoph/svelte-formula11
1
Fork 0
Code Issues 21 Actions Packages Projects 1 Activity

Profile: Redirect to current page instead of "/" when logging in/out or changing/creating profile

Browse Source
This commit is contained in:
Christoph Urlacher
2024-12-14 15:55:17 +01:00
parent 218e105815
commit dcd1444ba7
2 changed files with 60 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/routes/+layout.svelte
View File

@ -118,6 +118,8 @@
<div class="flex flex-col gap-2 p-2">
<h4 class="h4 select-none">Enter Username and Password</h4>
<form method="POST" class="contents">
<!-- Supply the pathname so the form can redirect to the current page. -->
<input type="hidden" name="redirect_url" value={$page.url.pathname} />
<Input name="username" placeholder="Username" required>
<UserIcon />
</Input>
@ -144,6 +146,8 @@
<div class="flex flex-col gap-2 p-2">
<h4 class="h4 select-none">Edit Profile</h4>
<form method="POST" enctype="multipart/form-data" class="contents">
<!-- Supply the pathname so the form can redirect to the current page. -->
<input type="hidden" name="redirect_url" value={$page.url.pathname} />
<input type="hidden" name="id" value={data.user.id} />
<Input name="username" value={data.user.username} placeholder="Username"><UserIcon /></Input
>
@ -179,15 +183,15 @@
padding="p-2"
>
<svelte:fragment slot="lead">
<!-- Navigation drawer -->
<div class="lg:hidden">
<Button color="primary" onclick={menu_drawer}>
<MenuDrawerIcon />
</Button>
</div>
<div class="flex gap-2">
<!-- Navigation drawer -->
<div class="lg:hidden">
<Button color="primary" onclick={menu_drawer}>
<MenuDrawerIcon />
</Button>
</div>
<!-- Site logo -->
<div class="ml-2 lg:ml-0">
<!-- Site logo -->
<Button href="/" color="primary"><span class="text-xl font-bold">Formula 11</span></Button>
</div>
</svelte:fragment>
@ -202,26 +206,30 @@
</div>
<svelte:fragment slot="trail">
<!-- Data drawer -->
<Button
color="primary"
onclick={data_drawer}
activate={$page.url.pathname.startsWith("/data")}>Data</Button
>
<div class="flex gap-2">
<!-- Data drawer -->
<Button
color="primary"
onclick={data_drawer}
activate={$page.url.pathname.startsWith("/data")}>Data</Button
>
<!-- Login/Profile drawer -->
{#if !data.user}
<Button color="primary" onclick={login_drawer}>Login</Button>
{:else}
<Avatar
id="user_avatar_preview"
src={data.user.avatar_url}
rounded="rounded-full"
width="w-10"
onclick={profile_drawer}
cursor="cursor-pointer"
/>
{/if}
{#if !data.user}
<!-- Login drawer -->
<Button color="primary" onclick={login_drawer}>Login</Button>
{:else}
<!-- Profile drawer -->
<Avatar
id="user_avatar_preview"
src={data.user.avatar_url}
rounded="rounded-full"
width="w-10"
background="bg-primary-50"
onclick={profile_drawer}
cursor="cursor-pointer"
/>
{/if}
</div>
</svelte:fragment>
</AppBar>
</nav>

45
src/routes/profile/+page.server.ts
View File

@ -1,13 +1,14 @@
import { form_data_clean, form_data_ensure_keys, form_data_get_and_remove_id } from "$lib/form";
import { error, redirect } from "@sveltejs/kit";
import type { Actions } from "./$types";
import type { User } from "$lib/schema";
export const actions = {
create_profile: async ({ request, locals }) => {
const data = form_data_clean(await request.formData());
form_data_ensure_keys(data, ["username", "password"]);
create_profile: async ({ request, locals }): Promise<void> => {
const data: FormData = form_data_clean(await request.formData());
form_data_ensure_keys(data, ["username", "password", "redirect_url"]);
// TODO: Errrr passwordConfirm... How to integrate it into the unified login-/register-UI?
// Confirm password lol
const record = await locals.pb.collection("users").create({
username: data.get("username")?.toString(),
password: data.get("password")?.toString(),
@ -20,46 +21,50 @@ export const actions = {
.collection("users")
.authWithPassword(data.get("username")?.toString(), data.get("password")?.toString());
redirect(303, "/");
redirect(303, data.get("redirect_url")?.toString() ?? "/");
},
// TODO: PocketBase API rule: Only the active user should be able to modify itself
update_profile: async ({ request, locals }) => {
const data = form_data_clean(await request.formData());
const id = form_data_get_and_remove_id(data);
update_profile: async ({ request, locals }): Promise<void> => {
const data: FormData = form_data_clean(await request.formData());
form_data_ensure_keys(data, ["redirect_url"]);
const id: string = form_data_get_and_remove_id(data);
const record = await locals.pb.collection("users").update(id, data);
const record: User = await locals.pb.collection("users").update(id, data);
redirect(303, "/");
redirect(303, data.get("redirect_url")?.toString() ?? "/");
},
login: async ({ request, locals }) => {
if (locals.user) {
console.log("Already logged in!");
return;
error(400, "Already logged in!");
}
const data = form_data_clean(await request.formData());
form_data_ensure_keys(data, ["username", "password"]);
const data: FormData = form_data_clean(await request.formData());
form_data_ensure_keys(data, ["username", "password", "redirect_url"]);
try {
await locals.pb
.collection("users")
.authWithPassword(data.get("username")?.toString(), data.get("password")?.toString());
} catch (err) {
console.log(`Failed to login: ${err}`);
error(400, "Failed to login!");
}
// TODO: Would be better to redirect to previous page somehow...
redirect(303, "/");
redirect(303, data.get("redirect_url")?.toString() ?? "/");
},
logout: async ({ locals }) => {
logout: async ({ request, locals }) => {
if (!locals.user) {
error(400, "Not logged in!");
}
const data: FormData = form_data_clean(await request.formData());
form_data_ensure_keys(data, ["redirect_url"]);
locals.pb.authStore.clear();
locals.user = undefined;
// TODO: Would be better to redirect to previous page somehow...
redirect(303, "/");
redirect(303, data.get("redirect_url")?.toString() ?? "/");
},
} satisfies Actions;