Working on SvelteKit frontend

frontend/src/lib/kratos/index.ts

@@ -36,10 +36,10 @@ export async function getIdentity(): Promise<KratosIdentity> {
 // -----------------------------------------------------------------------------
 export async function getDataModels(
   flow: string,
-  flowId: string,
+  flowId: string
 ): Promise<KratosForm | KratosError> {
   if (!flowId) throw new Error("no flowId");
-  if (!browser) throw new Error("no browser environment");
+  // if (!browser) throw new Error("no browser environment");
 
   const url = `${KRATOS}/self-service/${flow}/flows?id=${flowId}`;
   const res = await get(url);

frontend/src/routes/auth/login/+page.svelte

@@ -6,16 +6,19 @@
   import Form from "$lib/components/kratos/form.svelte";
   import Messages from "$lib/components/kratos/messages.svelte";
 
-  const flowId = getFlowId($page.url.search);
+  // const flowId = getFlowId($page.url.search); -->
-  if (browser && !flowId)
+  // if (browser && !flowId) -->
-    window.location.href = `${KRATOS}/self-service/login/browser`;
+  // window.location.href = `${KRATOS}/self-service/login/browser`; -->
 
-  const pr = getDataModels("login", flowId);
+  // const pr = getDataModels("login", flowId); -->
+
+  export let data: PageData;
+  $: pr = data.pr;
 </script>
 
 <!-- -------------------------------------------------------------------------->
 <div id="login">
-  {#await pr then dm} {#if dm.instanceOf === "KratosForm"}
+  {#await data.pr then dm} {#if dm.instanceOf === "KratosForm"}
   <div id="login">
     <h2>Sign in</h2>
 

frontend/src/routes/auth/login/+page.ts

@@ -0,0 +1,16 @@
+import { getFlowId, getDataModels } from "$lib/kratos";
+import { page } from "$app/stores";
+import { browser } from "$app/environment";
+import { KRATOS } from "$lib/config";
+
+/** @type {import('./$types').PageLoad} */
+export async function load({ url }) {
+  const flowId = getFlowId(url.search);
+
+  if (browser && !flowId)
+    window.location.href = `${KRATOS}/self-service/login/browser`;
+
+  const pr = getDataModels("login", flowId);
+
+  return { pr: pr };
+}

frontend/src/routes/dashboard/+page.server.ts

@@ -1,3 +1,6 @@
+import { get } from "svelte/store";
+import identity from "$lib/stores/kratos/identity";
+
 type Question = {
   text: string;
 };
@@ -14,11 +17,13 @@ type Quiz = {
 
 /** @type {import('./$types').PageLoad} */
 export async function load() {
-  const res = await fetch("http://localhost:8080/quizzes");
+  const _identity = get(identity);
-  const response = await res.json();
+  if (_identity) {
+    const res = await fetch("http://localhost:8080/quizzes");
+    const response = await res.json();
 
-  console.log(response);
+    if (response.status === "success") {
-  if (response.status === "success") {
+      return { quizzes: (await response.content) as Quiz[] };
-    return { quizzes: (await response.content) as Quiz[] };
+    }
   }
 }

frontend/src/routes/dashboard/+page.svelte

@@ -1,21 +1,21 @@
 <script lang="ts">
   import { APP } from "$lib/config";
-  import { get } from "svelte/store";
+//  import { get } from "svelte/store";
-  import identity from "$lib/stores/kratos/identity";
+//  import identity from "$lib/stores/kratos/identity";
   import CodeMirror, { basicSetup } from "$lib/components/codemirror/codemirror.svelte";
   import type { PageData } from './$types';
   
   export let data: PageData;
   $: quizzes = data.quizzes;
   
-  const _identity = get(identity);
+  // const _identity = get(identity);
   let email = "";
   let store: any;
   
-  if (_identity && _identity.traits) email = _identity.traits.email;
+  // if (_identity && _identity.traits) email = _identity.traits.email;
 
   function changeHandler({ detail: {tr: any} }) {
-    console.log('change', tr.changes.toJSON())
+   console.log('change', tr.changes.toJSON())
   }
   
 </script>