feat: Safelist all classes needed for alerts

8 files changed, 112 insertions, 23 deletions

diff --git a/apps/kit/src/app.pcss b/apps/kit/src/app.pcss
index f9c290c..78a8e0b 100644
--- a/apps/kit/src/app.pcss
+++ b/apps/kit/src/app.pcss
@@ -2,6 +2,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
 pre {
     font-family: monospace !important;
 }
diff --git a/apps/kit/src/lib/components/alert.svelte b/apps/kit/src/lib/components/alert.svelte
index 87962cf..53aa783 100644
--- a/apps/kit/src/lib/components/alert.svelte
+++ b/apps/kit/src/lib/components/alert.svelte
@@ -25,12 +25,11 @@
     export let actions: Array<{ id: string; text: string; color?: string }> =
         [];
     // This value is set on a plain anchor tag without any svelte routing,
-    // listen to the right-link-click if you want to intercept the click without navigating
+    // listen to the rightLinkClick if you want to intercept the click without navigating
     export let rightLinkHref = "javascript:void(0)";
     export let visible = true;
 
     const dispatch = createEventDispatcher();
-
     const cooldownStorageKey = "lastseen--" + id;
 
     let iconComponent: any;
@@ -79,6 +78,14 @@
         }
     }
 
+    function rightLinkClicked() {
+        dispatch("rightLinkCliked");
+    }
+
+    function actionClicked(name: string) {
+        dispatch("act-" + name);
+    }
+
     // Manages the state of the alert if cooldown is enabled
     function run_cooldown() {
         if (!cooldownEnabled) {
@@ -160,8 +167,7 @@
                                 <p class="mt-3 text-sm md:mt-0 md:ml-6">
                                     <a
                                         href={rightLinkHref}
-                                        on:click={() =>
-                                            dispatch("right-link-click")}
+                                        on:click={() => rightLinkClicked()}
                                         class="whitespace-nowrap font-medium text-{colorClassPart}-700 hover:text-{colorClassPart}-600"
                                     >
                                         {rightLinkText}
@@ -187,7 +193,7 @@
                             {@const color = action?.color ?? colorClassPart}
                             <button
                                 type="button"
-                                on:click={() => dispatch("act-" + action.id)}
+                                on:click={() => actionClicked(action.id)}
                                 class="rounded-md
                             bg-{color}-50
                             px-2 py-1.5 text-sm font-medium
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>