Add some example with routing and context

Author: kevinpiac

frontend/src/lib/components/common/loading-frame/LoadingFrame.svelte

@@ -0,0 +1,9 @@
+<script>
+	import AgentLabsLogo from "$lib/components/common/logo/AgentLabsLogo.svelte";
+</script>
+
+<div class="min-h-screen bg-background-primary flex items-center justify-center">
+	<div class="flex flex-col animate-pulse">
+		<AgentLabsLogo />
+	</div>
+</div>

frontend/src/lib/context/AuthContext.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { writable } from "svelte/store";
+	import { setContext } from "svelte";
+
+	const userStore = writable<{ name: string; email: string } | null>(null);
+
+	// const auth = onUserStateChanged()...
+
+	const login = (email: string, password: string) => {
+		// mocked
+		userStore.set({
+			name: "John",
+			email: email
+		});
+	};
+
+	const logout = () => {
+		userStore.set(null);
+	};
+
+	setContext("Auth", { currentUser: userStore, login, logout });
+</script>
+
+<slot />

frontend/src/lib/gates/AuthOnly.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+	import { getContext } from "svelte";
+	import { goto } from "$app/navigation";
+	import LoadingFrame from "$lib/components/common/loading-frame/LoadingFrame.svelte";
+	const { currentUser } = getContext("Auth");
+
+	const redirect = "/login";
+
+	let loading = true;
+
+	onMount(async () => {
+		console.log("ICI", $currentUser);
+		if (!$currentUser) {
+			await goto(redirect);
+		}
+		loading = false;
+	});
+</script>
+
+{#if !loading}
+	<slot />
+{:else}
+	<LoadingFrame />
+{/if}

frontend/src/lib/services/.gitkeep

@@ -1,17 +1,16 @@
 <script lang="ts">
 	import type { LayoutData } from "./$types";
 	import "../app.css";
-	import AgentLabsLogo from "$lib/components/common/logo/AgentLabsLogo.svelte";
+	import AuthContext from "$lib/context/AuthContext.svelte";
+	import LoadingFrame from "$lib/components/common/loading-frame/LoadingFrame.svelte";
 
 	export let data: LayoutData;
 </script>
 
 {#await data.lazy.context}
-	<div class="min-h-screen bg-background-primary flex items-center justify-center">
-		<div class="flex flex-col animate-pulse">
-			<AgentLabsLogo />
-		</div>
-	</div>
+	<LoadingFrame />
 {:then context}
-	<slot />
+	<AuthContext>
+		<slot />
+	</AuthContext>
 {/await}

frontend/src/routes/+layout.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import LoadingFrame from "$lib/components/common/loading-frame/LoadingFrame.svelte";
+	import { onMount } from "svelte";
+	import { goto } from "$app/navigation";
+	export const csr = true;
+
+	onMount(() => {
+		goto("/main");
+	});
+</script>
+
+<LoadingFrame />

frontend/src/routes/+page.svelte

@@ -4,6 +4,10 @@
 	import AuthProviderButton from "$lib/components/auth/button/AuthProviderButton.svelte";
 	import { z } from "zod";
 
+	import { getContext } from "svelte";
+	import { goto } from "$app/navigation";
+	const { login, currentUser } = getContext("Auth");
+
 	const form = {
 		email: {
 			value: "",
@@ -19,7 +23,9 @@
 
 	let isLoading = false;
 
-	const onSubmit = () => {
+	const onSubmit = async (event) => {
+		event.preventDefault();
+
 		isLoading = true;
 		const result = formSchema.safeParse({
 			email: form.email.value
@@ -28,6 +34,9 @@
 		if (!result.success) {
 			form.email.error = result.error.errors[0].message;
 		} else {
+			login("John Doe", "pass");
+			console.log("goto!", $currentUser);
+			await goto("/main");
 			form.email.error = "";
 		}
 		isLoading = false;