feat: Initial setup facilitating testing

6 files changed, 31 insertions, 4 deletions

diff --git a/apps/kit/src/lib/components/alert.svelte b/apps/kit/src/lib/components/alert.svelte
index 31e7357..fd57105 100644
--- a/apps/kit/src/lib/components/alert.svelte
+++ b/apps/kit/src/lib/components/alert.svelte
@@ -2,6 +2,7 @@
     import { random_string } from "$lib/helpers";
     import { createEventDispatcher } from "svelte";
     import { onMount } from "svelte";
+    import pwKey from "$actions/pwKey";
     import { Temporal } from "temporal-polyfill";
     import { ExclamationTriangleIcon, CheckCircleIcon, InformationCircleIcon, XCircleIcon, XMarkIcon } from "./icons";
 
@@ -61,10 +62,12 @@
     $: cooldownEnabled =
         id.indexOf(noCooldownSetting) === -1 && closeable && (closeableCooldown === "~" || parseInt(closeableCooldown) > 0);
     /**
-     * Sets this alerts visibility state, when this is false it is removed from the dom using svelte a {#if} block.
+     * Sets this alerts visibility state, when this is false it is removed from the dom using an {#if} block.
      */
     export let visible = closeableCooldown === "~" || parseInt(closeableCooldown) > 0 ? false : true;
 
+    export let _pwKey: string | undefined = undefined;
+
     const cooldownStorageKey = "lastseen--" + id;
 
     $: switch (type) {
@@ -160,7 +163,7 @@
 </script>
 
 {#if visible}
-    <div class="rounded-md bg-{colorClassPart}-50 p-4 {$$restProps.class ?? ''}">
+    <div class="rounded-md bg-{colorClassPart}-50 p-4 {$$restProps.class ?? ''}" use:pwKey={_pwKey}>
         <div class="flex">
             <div class="flex-shrink-0">
                 <svelte:component this={iconComponent} class="text-{colorClassPart}-400" />
diff --git a/apps/kit/src/lib/components/button.svelte b/apps/kit/src/lib/components/button.svelte
index d345b37..cbc09e2 100644
--- a/apps/kit/src/lib/components/button.svelte
+++ b/apps/kit/src/lib/components/button.svelte
@@ -4,6 +4,8 @@
 </script>
 
 <script lang="ts">
+    import pwKey from "$actions/pwKey";
+
     import { SpinnerIcon } from "./icons";
 
     export let kind = "primary" as ButtonKind;
@@ -18,6 +20,7 @@
     export let text: string;
     export let loading = false;
     export let fullWidth = false;
+    export let _pwKey: string | undefined = undefined;
 
     let sizeClasses = "";
     let kindClasses = "";
@@ -70,9 +73,9 @@
 
 {#if href}
     <a
+        use:pwKey={_pwKey}
         {...shared_props}
         {href}
-        on:click
         class="{sizeClasses} {kindClasses} {loading ? 'disabled:' : ''} {$$restProps.class ?? ''} {fullWidth
             ? 'w-full justify-center'
             : ''} inline-flex items-center border font-medium rounded shadow-sm focus:outline-none focus:ring-2"
@@ -84,8 +87,11 @@
     </a>
 {:else}
     <button
+        use:pwKey={_pwKey}
         {...shared_props}
-        class="{sizeClasses} {kindClasses} {$$restProps.class ?? ''} {fullWidth
+        on:click
+        class="{sizeClasses} {kindClasses} {$$restProps.class ?? ''}
+        {fullWidth
             ? 'w-full justify-center'
             : ''} inline-flex items-center border font-medium rounded shadow-sm focus:outline-none focus:ring-2"
     >
diff --git a/apps/kit/src/lib/components/checkbox.svelte b/apps/kit/src/lib/components/checkbox.svelte
index 311d154..b2fcddb 100644
--- a/apps/kit/src/lib/components/checkbox.svelte
+++ b/apps/kit/src/lib/components/checkbox.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import pwKey from "$actions/pwKey";
     import { random_string } from "$lib/helpers";
 
     export let label: string;
@@ -6,11 +7,13 @@
     export let name: string | undefined = undefined;
     export let disabled: boolean | null = null;
     export let checked: boolean;
+    export let _pwKey: string | undefined = undefined;
 </script>
 
 <div class="flex items-center">
     <input
         {name}
+        use:pwKey={_pwKey}
         {disabled}
         {id}
         type="checkbox"
diff --git a/apps/kit/src/lib/components/input.svelte b/apps/kit/src/lib/components/input.svelte
index 999c565..c0ed654 100644
--- a/apps/kit/src/lib/components/input.svelte
+++ b/apps/kit/src/lib/components/input.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import pwKey from "$actions/pwKey";
     import { random_string } from "$lib/helpers";
     import { ExclamationCircleIcon } from "./icons";
 
@@ -18,6 +19,7 @@
     export let addon: string | undefined = undefined;
     export let value: string | undefined;
     export let wrapperClass: string | undefined = undefined;
+    export let _pwKey: string | undefined = undefined;
 
     $: ariaErrorDescribedBy = id + "__" + "error";
     $: attributes = {
@@ -70,6 +72,7 @@
         {/if}
         <input
             use:typeAction
+            use:pwKey={_pwKey}
             {name}
             {id}
             {...attributes}
diff --git a/apps/kit/src/lib/components/locale-switcher.svelte b/apps/kit/src/lib/components/locale-switcher.svelte
index 2e2d339..f880bfb 100644
--- a/apps/kit/src/lib/components/locale-switcher.svelte
+++ b/apps/kit/src/lib/components/locale-switcher.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import pwKey from "$actions/pwKey";
     import { browser } from "$app/environment";
     import { page } from "$app/stores";
     import { CookieNames } from "$lib/configuration";
@@ -8,6 +9,8 @@
     import { loadLocaleAsync } from "$lib/i18n/i18n-util.async";
     import Cookies from "js-cookie";
 
+    export let _pwKey: string | undefined = undefined;
+
     async function switch_locale(newLocale: Locales) {
         if (!newLocale || $locale === newLocale) return;
         await loadLocaleAsync(newLocale);
@@ -42,6 +45,7 @@
 </script>
 
 <select
+    use:pwKey={_pwKey}
     on:change={on_change}
     class="mt-1 mr-1 block border-none py-2 pl-3 pr-10 text-base rounded-md right-0 absolute focus:outline-none focus:ring-teal-500 sm:text-sm"
 >
diff --git a/apps/kit/src/lib/components/switch.svelte b/apps/kit/src/lib/components/switch.svelte
index c958b0f..16da23a 100644
--- a/apps/kit/src/lib/components/switch.svelte
+++ b/apps/kit/src/lib/components/switch.svelte
@@ -3,12 +3,17 @@
 </script>
 
 <script lang="ts">
+    import pwKey from "$actions/pwKey";
+
+
     export let enabled = false;
     export let type: SwitchType = "default";
     export let srText = "Use setting";
     export let label: string | undefined = undefined;
     export let description: string | undefined = undefined;
     export let rightAlignedLabelDescription = false;
+    export let _pwKey:string|undefined = undefined;
+
     $: colorClass = enabled
         ? "bg-teal-600 focus:ring-teal-500"
         : "bg-gray-200 focus:ring-teal-500";
@@ -41,6 +46,7 @@
             class="group relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2"
             role="switch"
             aria-checked={enabled}
+            use:pwKey={_pwKey}
             on:click={toggle}
         >
             <span class="sr-only">{srText}</span>
@@ -63,6 +69,7 @@
             class="{colorClass} relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2"
             role="switch"
             aria-checked={enabled}
+            use:pwKey={_pwKey}
             on:click={toggle}
         >
             <span class="sr-only">{srText}</span>
@@ -113,6 +120,7 @@
             class="{colorClass} relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2"
             role="switch"
             aria-checked={enabled}
+            use:pwKey={_pwKey}
             on:click={toggle}
         >
             <span class="sr-only">{srText}</span>