fix sveltekit load / preload bug on logout

This commit is contained in:
JCEEE
2026-09-08 19:05:04 +01:00
parent de6047f406
commit 6ed1805884
3 changed files with 62 additions and 15 deletions
@@ -68,10 +68,19 @@
<div class="sidebar-footer"> <div class="sidebar-footer">
{#each footerItems as item} {#each footerItems as item}
{#if item.href === '/logout'}
<form method="POST" action="/logout" class="nav-item-form">
<button type="submit" class="nav-item nav-item-button" aria-label="Log out">
{@html item.icon}
<span class="nav-label">{item.label}</span>
</button>
</form>
{:else}
<a href={item.href} class="nav-item"> <a href={item.href} class="nav-item">
{@html item.icon} {@html item.icon}
<span class="nav-label">{item.label}</span> <span class="nav-label">{item.label}</span>
</a> </a>
{/if}
{/each} {/each}
</div> </div>
</aside> </aside>
@@ -143,6 +152,18 @@
background: #3730a3; background: #3730a3;
color: #e0e7ff; color: #e0e7ff;
} }
.nav-item-form {
margin: 0 0.3rem;
}
.nav-item-button {
font-family: inherit;
background: none;
border: none;
box-sizing: border-box;
text-align: left;
cursor: pointer;
width: 100%;
}
.nav-item.active { .nav-item.active {
background: #4338ca; background: #4338ca;
color: #fff; color: #fff;
+37 -6
View File
@@ -6,13 +6,44 @@
<div class="error-page"> <div class="error-page">
<h1>Something went wrong</h1> <h1>Something went wrong</h1>
<p>{error?.message || 'An unexpected error occurred.'}</p> <p>{error?.message || 'An unexpected error occurred.'}</p>
<p class="hint">Try <a href="/logout">logging out</a> and signing in again.</p> <div class="hint">
Try
<form method="POST" action="/logout" class="inline-form">
<button type="submit" class="link-button">logging out</button>
</form>
and signing in again.
</div>
</div> </div>
<style> <style>
.error-page { max-width: 480px; margin: 4rem auto; text-align: center; padding: 2rem; } .error-page {
h1 { font-size: 1.5rem; color: #111827; margin-bottom: 0.5rem; } max-width: 480px;
p { color: #6b7280; } margin: 4rem auto;
.hint { margin-top: 1.5rem; font-size: 0.9rem; } text-align: center;
a { color: #6366f1; } padding: 2rem;
}
h1 {
font-size: 1.5rem;
color: #111827;
margin-bottom: 0.5rem;
}
p {
color: #6b7280;
}
.hint {
margin-top: 1.5rem;
font-size: 0.9rem;
}
.inline-form {
display: inline-block;
}
.link-button {
background: none;
border: none;
padding: 0;
font: inherit;
color: #6366f1;
text-decoration: underline;
cursor: pointer;
}
</style> </style>
@@ -6,11 +6,6 @@ function signOut(event: { cookies: any }) {
clearLegacyCookies(event.cookies); clearLegacyCookies(event.cookies);
} }
export function load(event) {
signOut(event);
throw redirect(303, '/');
}
export const actions = { export const actions = {
default: (event) => { default: (event) => {
signOut(event); signOut(event);