6 files changed, 100 insertions, 18 deletions

diff --git a/apps/kit/src/routes/(public)/reset/+page.svelte b/apps/kit/src/routes/(public)/reset/+page.svelte
index 8568234..5092b4b 100644
--- a/apps/kit/src/routes/(public)/reset/+page.svelte
+++ b/apps/kit/src/routes/(public)/reset/+page.svelte
@@ -18,27 +18,19 @@
         title: "",
     } as ErrorResult;
 
-    $: showSuccessAlert =
-        (successData?.text.length ?? 0 + successData?.title.length ?? 0) > 0;
-    const successData = {
-        text: "",
-        title: "",
-    };
-
-    const strings = get(LL);
+    let showSuccessAlert = false;
 
     async function submit() {
         errorData.text = "";
         errorData.title = "";
+        showSuccessAlert = false;
         const request = await create_forgot_password_request(formData.email);
         if (!request.ok) {
-            errorData.text = request.data.text ?? strings.common.tryAgainSoon();
-            errorData.title =
-                request.data.title ?? strings.common.unexpectedError();
+            errorData.text = request.data.text ?? $LL.common.tryAgainSoon();
+            errorData.title = request.data.title ?? $LL.common.unexpectedError();
             return;
         }
-        successData.title = strings.common.success() + "!";
-        successData.text = strings.reset.requestSentMessage();
+        showSuccessAlert = true;
     }
 </script>
 
@@ -75,8 +67,8 @@
 
                 <Alert
                     type="success"
-                    title={successData.title}
-                    message={successData.text}
+                    title={$LL.common.success()}
+                    message={$LL.reset.requestSentMessage()}
                     visible={showSuccessAlert}
                 />
                 <div>
diff --git a/apps/kit/src/routes/+layout.svelte b/apps/kit/src/routes/+layout.svelte
index cbb4856..f8cdf83 100644
--- a/apps/kit/src/routes/+layout.svelte
+++ b/apps/kit/src/routes/+layout.svelte
@@ -15,8 +15,9 @@
         const sessionIsValid = await is_active();
         // TODO: ticket.to can be empty while navigating, so coalesce could probably cause non-public routes to cause a redir to /login...
         const isPublicRoute =
-            ticket.to?.routeId?.startsWith("(public)") ?? true;
-
+            (ticket.to?.routeId?.startsWith("(public)") ?? true) ||
+            ticket.to?.routeId?.startsWith("book");
+        console.log(ticket);
         console.log("redir: ", {
             isPublicRoute,
             sessionIsValid,
diff --git a/apps/kit/src/routes/+page.svelte b/apps/kit/src/routes/+page.svelte
index ca15e44..85a4d2d 100644
--- a/apps/kit/src/routes/+page.svelte
+++ b/apps/kit/src/routes/+page.svelte
@@ -1 +1,2 @@
-<p class="text-bold p-1">Hold on...</p>
\ No newline at end of file
+
+<p class="text-bold p-1">Hold on...</p>
diff --git a/apps/kit/src/routes/book/+layout.svelte b/apps/kit/src/routes/book/+layout.svelte
new file mode 100644
index 0000000..0fcbd51
--- /dev/null
+++ b/apps/kit/src/routes/book/+layout.svelte
@@ -0,0 +1,26 @@
+<script>
+</script>
+
+<div id="wrapper">
+    <nav>
+        <a href="/book/alerts" class="link">Alerts</a>
+    </nav>
+    <main>
+        <slot />
+    </main>
+</div>
+
+<style>
+    #wrapper {
+        display: flex;
+        flex-direction: row;
+    }
+    nav {
+        min-width: 280px;
+        padding: 10px;
+    }
+    main {
+        width: 100%;
+        padding: 5px;
+    }
+</style>
diff --git a/apps/kit/src/routes/book/+page.svelte b/apps/kit/src/routes/book/+page.svelte
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/apps/kit/src/routes/book/+page.svelte
diff --git a/apps/kit/src/routes/book/alerts/+page.svelte b/apps/kit/src/routes/book/alerts/+page.svelte
new file mode 100644
index 0000000..93b4850
--- /dev/null
+++ b/apps/kit/src/routes/book/alerts/+page.svelte
@@ -0,0 +1,62 @@
+<script>
+    import Alert from "$lib/components/alert.svelte";
+</script>
+
+<h1>Alerts</h1>
+<section>
+    <h2>Info</h2>
+    <Alert type="info" message="This is message" title="This is title" />
+</section>
+
+<section>
+    <h2>Warning</h2>
+    <Alert type="warning" message="This is message" title="This is title" />
+</section>
+<section>
+    <h2>Error</h2>
+    <Alert type="error" message="This is message" title="This is title" />
+</section>
+<section>
+    <h2>Success</h2>
+    <Alert type="success" message="This is message" title="This is title" />
+</section>
+<section>
+    <h2>Actions</h2>
+    <Alert
+        type="info"
+        message="This is message"
+        title="This is title"
+        actions={[
+            {
+                id: "confirm",
+                text: "Yes!",
+                color: "green",
+            },
+            {
+                id: "cancel",
+                text: "No!",
+                color: "red",
+            },
+        ]}
+    />
+</section>
+<section>
+    <h2>Right link</h2>
+    <Alert
+        on:rightLinkCliked={() => alert("Right link clicked")}
+        rightLinkText="Link or action"
+        type="info"
+    />
+</section>
+<section>
+    <h2>List</h2>
+    <Alert
+        title="This is title"
+        listItems={["Message 1", "Message 2"]}
+        type="info"
+    />
+</section>
+<section>
+    <h2>Closeable</h2>
+    <Alert message="This is message" closeable type="info" />
+</section>