Working on SvelteKit frontend

This commit is contained in:
Andrea Fazzi 2022-10-31 18:56:39 +01:00
parent 522d344372
commit da2b13597a
5 changed files with 41 additions and 17 deletions

View file

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

View file

@ -6,16 +6,19 @@
import Form from "$lib/components/kratos/form.svelte"; import Form from "$lib/components/kratos/form.svelte";
import Messages from "$lib/components/kratos/messages.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> </script>
<!-- --------------------------------------------------------------------------> <!-- -------------------------------------------------------------------------->
<div id="login"> <div id="login">
{#await pr then dm} {#if dm.instanceOf === "KratosForm"} {#await data.pr then dm} {#if dm.instanceOf === "KratosForm"}
<div id="login"> <div id="login">
<h2>Sign in</h2> <h2>Sign in</h2>

View file

@ -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 };
}

View file

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

View file

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