squid/blog
squid/blog
1
2
Fork 0
Code Issues 7 Pull Requests Actions Projects 1 Releases 7 Wiki Activity

BLOG-136 Dashboard route and frontend authentication #137

Merged
squid merged 10 commits from BLOG-136_create_dashboard_route into main 2025-10-13 20:33:36 +08:00
Conversation 3 Commits 10 Files Changed 40 +28 -18
3 changed files with 28 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit f228a9bb4a - Show all commits

14
frontend/src/lib/common/framework/ui/ErrorPage.svelte Normal file
View File

@ -0,0 +1,14 @@
<div
class="min-h-content-height mx-auto flex max-w-screen-xl flex-col items-center justify-center px-4 md:px-6"
>
<div class="flex flex-row items-end gap-x-4 md:gap-x-6">
<h1 class="text-5xl font-extrabold text-gray-800 underline md:text-7xl">404</h1>
<h2 class="flex flex-row items-center gap-x-2 text-2xl font-bold md:gap-x-2.5 md:text-3xl">
<div class="h-7 w-1.5 bg-gray-800 md:h-9 md:w-2"></div>
<div class="rounded-md bg-blue-600 px-1 py-px md:px-1.5 md:py-0.5">
<span class="text-white">Not</span>
</div>
<span class="text-gray-800">Found.</span>
</h2>
</div>
</div>

19
frontend/src/routes/+error.svelte
View File

@ -1,14 +1,5 @@
<div
class="mx-auto flex min-h-content-height max-w-screen-xl flex-col items-center justify-center px-4 md:px-6"
>
<div class="flex flex-row items-end gap-x-4 md:gap-x-6">
<h1 class="text-5xl font-extrabold text-gray-800 underline md:text-7xl">404</h1>
<h2 class="flex flex-row items-center gap-x-2 text-2xl font-bold md:gap-x-2.5 md:text-3xl">
<div class="h-7 w-1.5 bg-gray-800 md:h-9 md:w-2"></div>
<div class="rounded-md bg-blue-600 px-1 py-px md:px-1.5 md:py-0.5">
<span class="text-white">Not</span>
</div>
<span class="text-gray-800">Found.</span>
</h2>
</div>
</div>
<script>
import ErrorPage from '$lib/common/framework/ui/ErrorPage.svelte';
</script>
<ErrorPage />

13
frontend/src/routes/dashboard/+layout.svelte
View File

@ -8,6 +8,7 @@
import { onMount, setContext } from 'svelte';
import type { LayoutProps } from './$types';
import { StatusType } from '$lib/common/adapter/presenter/asyncState';
import ErrorPage from '$lib/common/framework/ui/ErrorPage.svelte';
const { children }: LayoutProps = $props();
@ -18,10 +19,12 @@
setContext(AuthBloc.name, authBloc);
const authState = $derived($authBloc);
onMount(() => authBloc.dispatch({ event: AuthEventType.CurrentUserLoadedEvent }));
const authState = $derived($authBloc);
const isLoading = $derived.by(
() => authState.status === StatusType.Loading || authState.status === StatusType.Idle
);
const hasError = $derived.by(() => {
if (authState.status === StatusType.Error) {
return true;
@ -33,8 +36,10 @@
});
</script>
{#if hasError}
<div>Error</div>
{#if isLoading}
<div></div>
{:else if hasError}
<ErrorPage />
{:else}
{@render children()}
{/if}