Add frontend folder

2022-09-23 10:24:03 +02:00 · 2022-09-23 10:24:03 +02:00 · 84b475671f
commit 84b475671f
parent 2e79c6595f
37 changed files with 6840 additions and 0 deletions
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@ -0,0 +1 @@
+node_modules
--- a/frontend/README.md
+++ b/frontend/README.md
@ -0,0 +1,70 @@
+# kratos-selfservice-svelte-node
+
+Self-service [Svelte](https://svelte.dev/) node for
+[Ory Kratos](https://github.com/ory/kratos). It has no style or decoration.
+Apply your custom style according to your application.
+
+## Install
+
+```bash
+git clone https://github.com/emrahcom/kratos-selfservice-svelte-node.git
+
+cd kratos-selfservice-svelte-node
+npm install
+```
+
+## Config
+
+Change `src/lib/config.ts` according to your environment.
+
+```javascript
+export const KRATOS = "https://___KRATOS_FQDN___";
+export const APP = "https://___APP_FQDN___";
+```
+
+## Run (dev)
+
+```bash
+npm run dev -- --host --port 3000
+```
+
+## Run (prod)
+
+```bash
+npm run build
+node build/index.js
+```
+
+## Pages
+
+- Landing page
+
+  `/`
+
+- Secure dashboard
+
+  `/dashboard`
+
+- Registration
+
+  `/registration`
+
+- Login
+
+  `/login`
+
+- Settings
+
+  `/settings`
+
+- Recovery
+
+  `/recovery`
+
+- Verification
+
+  `/verification`
+
+- Logout
+
+  `/logout`
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@ -0,0 +1,33 @@
+{
+  "name": "kratos-svelte-ui",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --plugin-search-dir . --check . && eslint .",
+    "format": "prettier --plugin-search-dir . --write ."
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "next",
+    "@sveltejs/adapter-node": "^1.0.0-next.94",
+    "@sveltejs/kit": "next",
+    "@typescript-eslint/eslint-plugin": "^5.27.0",
+    "@typescript-eslint/parser": "^5.27.0",
+    "eslint": "^8.16.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-svelte3": "^4.0.0",
+    "prettier": "^2.6.2",
+    "prettier-plugin-svelte": "^2.7.0",
+    "svelte": "^3.44.0",
+    "svelte-check": "^2.7.1",
+    "svelte-preprocess": "^4.10.6",
+    "tslib": "^2.3.1",
+    "typescript": "^4.7.4",
+    "vite": "^3.1.0"
+  },
+  "type": "module"
+}
--- a/frontend/src/app.d.ts
+++ b/frontend/src/app.d.ts
@ -0,0 +1,9 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+// and what to do when importing types
+declare namespace App {
+  // interface Locals {}
+  // interface PageData {}
+  // interface PageError {}
+  // interface Platform {}
+}
--- a/frontend/src/app.html
+++ b/frontend/src/app.html
@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"
+    />
+    <meta name="viewport" content="width=device-width" />
+    %sveltekit.head%
+  </head>
+  <body>
+    <div>%sveltekit.body%</div>
+  </body>
+</html>
--- a/frontend/src/lib/components/kratos/fieldset-email.svelte
+++ b/frontend/src/lib/components/kratos/fieldset-email.svelte
@ -0,0 +1,29 @@
+<script lang="ts">
+  import Messages from "$lib/components/kratos/messages.svelte";
+  import type { Node } from "$lib/kratos/types";
+
+  export let node: Node;
+
+  const attr = node.attributes;
+  let labelText: string;
+
+  labelText = attr.name;
+  if (node.meta && node.meta.label) labelText = node.meta.label.text;
+</script>
+
+<!-- -------------------------------------------------------------------------->
+<fieldset>
+  <label>
+    <span>{labelText}</span>
+    <input
+      type="email"
+      name={attr.name}
+      value={attr.value ?? ""}
+      placeholder={labelText}
+      disabled={attr.disabled}
+      required={attr.required}
+    />
+  </label>
+</fieldset>
+
+<Messages messages={node.messages} />
--- a/frontend/src/lib/components/kratos/fieldset-hidden.svelte
+++ b/frontend/src/lib/components/kratos/fieldset-hidden.svelte
@ -0,0 +1,10 @@
+<script lang="ts">
+  import type { Node } from "$lib/kratos/types";
+
+  export let node: Node;
+
+  const attr = node.attributes;
+</script>
+
+<!-- -------------------------------------------------------------------------->
+<input type="hidden" name={attr.name} value={attr.value ?? ""} />
--- a/frontend/src/lib/components/kratos/fieldset-password-toggle.svelte
+++ b/frontend/src/lib/components/kratos/fieldset-password-toggle.svelte
@ -0,0 +1,74 @@
+<script lang="ts">
+  export let isHidden: boolean;
+
+  const toggleVisibility = () => {
+    isHidden = !isHidden;
+  };
+</script>
+
+<!-- -------------------------------------------------------------------------->
+<svg class="password-visibility-toggle" on:click={toggleVisibility}>
+  {#if isHidden}
+    <path
+      d="M8 2.36365
+      C 4.36364 2.36365 1.25818 4.62547 0 7.81819
+      C 1.25818 11.0109 4.36364 13.2727 8 13.2727
+      C 11.6364 13.2727 14.7418 11.0109 16 7.81819
+      C 14.7418 4.62547 11.6364 2.36365 8 2.36365
+      Z
+      M8 11.4546
+      C 5.99273 11.4546 4.36364 9.82547 4.36364 7.81819
+      C 4.36364 5.81092 5.99273 4.18183 8 4.18183
+      C 10.0073 4.18183 11.6364 5.81092 11.6364 7.81819
+      C 11.6364 9.82547 10.0073 11.4546 8 11.4546
+      Z
+      M8 5.63637
+      C 6.79273 5.63637 5.81818 6.61092 5.81818 7.81819
+      C 5.81818 9.02547 6.79273 10 8 10
+      C 9.20727 10 10.1818 9.02547 10.1818 7.81819
+      C 10.1818 6.61092 9.20727 5.63637 8 5.63637
+      Z"
+    />
+  {:else}
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M14.8222 1.85355
+      C 15.0175 1.65829 15.0175 1.34171 14.8222 1.14645
+      C 14.627 0.951184 14.3104 0.951184 14.1151 1.14645
+      L 12.005 3.25653
+      C 10.8901 2.482 9.56509 1.92505 8.06 1.92505
+      C 3 1.92505 0 7.92505 0 7.92505
+      C 0 7.92505 1.16157 10.2482 3.25823 12.0033
+      L 1.19366 14.0679
+      C 0.998396 14.2632 0.998396 14.5798 1.19366 14.775
+      C 1.38892 14.9703 1.7055 14.9703 1.90076 14.775
+      L 14.8222 1.85355
+      Z
+      M 4.85879 10.4028
+      L 6.29159 8.96998
+      C 6.10643 8.66645 6 8.3089 6 7.92505
+      C 6 6.81505 6.89 5.92505 8 5.92505
+      C 8.38385 5.92505 8.7414 6.03148 9.04493 6.21664
+      L 10.4777 4.78384
+      C 9.79783 4.24654 8.93821 3.92505 8 3.92505
+      C 5.8 3.92505 4 5.72505 4 7.92505
+      C 4 8.86326 4.32149 9.72288 4.85879 10.4028
+      Z
+      M 11.8644 6.88906
+      L 13.8567 4.8968
+      C 15.2406 6.40616 16 7.92505 16 7.92505
+      C 16 7.92505 13 13.925 8.06 13.925
+      C 7.09599 13.925 6.20675 13.7073 5.39878 13.3547
+      L 6.96401 11.7895
+      C 7.29473 11.8779 7.64207 11.925 8 11.925
+      C 10.22 11.925 12 10.145 12 7.92505
+      C 12 7.56712 11.9529 7.21978 11.8644 6.88906
+      Z
+      M 9.33847 9.41501
+      L 9.48996 9.26352
+      C 9.44222 9.31669 9.39164 9.36726 9.33847 9.41501
+      Z"
+    />
+  {/if}
+</svg>
--- a/frontend/src/lib/components/kratos/fieldset-password.svelte
+++ b/frontend/src/lib/components/kratos/fieldset-password.svelte
@ -0,0 +1,26 @@
+<script lang="ts">
+  import Messages from "$lib/components/kratos/messages.svelte";
+  import PasswordToggle from "$lib/components/kratos/fieldset-password-toggle.svelte";
+  import type { Node } from "$lib/kratos/types";
+
+  export let node: Node;
+
+  const attr = node.attributes;
+  let isHidden = true;
+  let labelText: string;
+
+  labelText = attr.name;
+  if (node.meta && node.meta.label) labelText = node.meta.label.text;
+</script>
+
+<!-- -------------------------------------------------------------------------->
+<input
+  type={isHidden ? "password" : "text"}
+  name={attr.name}
+  value={attr.value ?? ""}
+  placeholder={labelText}
+  disabled={attr.disabled}
+  required={attr.required}
+/>
+
+<Messages messages={node.messages} />
--- a/frontend/src/lib/components/kratos/fieldset-submit.svelte
+++ b/frontend/src/lib/components/kratos/fieldset-submit.svelte
@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { Node } from "$lib/kratos/types";
+
+  export let node: Node;
+
+  const attr = node.attributes;
+  let labelText: string;
+
+  labelText = "Submit";
+  if (node.meta && node.meta.label) labelText = node.meta.label.text;
+</script>
+
+<!-- -------------------------------------------------------------------------->
+<button type="submit" name={attr.name} value={attr.value}>
+  {labelText}
+</button>
--- a/frontend/src/lib/components/kratos/fieldset-text.svelte
+++ b/frontend/src/lib/components/kratos/fieldset-text.svelte
@ -0,0 +1,24 @@
+<script lang="ts">
+  import Messages from "$lib/components/kratos/messages.svelte";
+  import type { Node } from "$lib/kratos/types";
+
+  export let node: Node;
+
+  const attr = node.attributes;
+  let labelText: string;
+
+  labelText = attr.name;
+  if (node.meta && node.meta.label) labelText = node.meta.label.text;
+</script>
+
+<!-- -------------------------------------------------------------------------->
+<input
+  type="text"
+  name={attr.name}
+  value={attr.value ?? ""}
+  placeholder={labelText}
+  disabled={attr.disabled}
+  required={attr.required}
+/>
+
+<Messages messages={node.messages} />
--- a/frontend/src/lib/components/kratos/fieldsets.svelte
+++ b/frontend/src/lib/components/kratos/fieldsets.svelte
@ -0,0 +1,27 @@
+<script lang="ts">
+  import Hidden from "$lib/components/kratos/fieldset-hidden.svelte";
+  import Password from "$lib/components/kratos/fieldset-password.svelte";
+  import Text from "$lib/components/kratos/fieldset-text.svelte";
+  import Email from "$lib/components/kratos/fieldset-email.svelte";
+  import Submit from "$lib/components/kratos/fieldset-submit.svelte";
+  import type { Node } from "$lib/kratos/types";
+
+  export let nodes: Node[];
+</script>
+
+<!-- -------------------------------------------------------------------------->
+{#each nodes as node}
+  {#if node.attributes.type === "hidden"}
+    <Hidden {node} />
+  {:else if node.attributes.type === "password"}
+    <Password {node} />
+  {:else if node.attributes.type === "text"}
+    <Text {node} />
+  {:else if node.attributes.type === "email"}
+    <Email {node} />
+  {:else if node.attributes.type === "submit"}
+    <Submit {node} />
+  {:else}
+    unknow type
+  {/if}
+{/each}
--- a/frontend/src/lib/components/kratos/form.svelte
+++ b/frontend/src/lib/components/kratos/form.svelte
@ -0,0 +1,16 @@
+<script lang="ts">
+  import Fieldsets from "$lib/components/kratos/fieldsets.svelte";
+  import type { KratosForm } from "$lib/kratos/types";
+
+  export let dm: KratosForm;
+  export let groups: string[];
+
+  const nodes = dm.ui.nodes.filter(
+    (n) => n.type === "input" && groups.includes(n.group),
+  );
+</script>
+
+<!-- -------------------------------------------------------------------------->
+<form action={dm.ui.action} method={dm.ui.method}>
+  <Fieldsets {nodes} />
+</form>
--- a/frontend/src/lib/components/kratos/messages.svelte
+++ b/frontend/src/lib/components/kratos/messages.svelte
@ -0,0 +1,14 @@
+<script lang="ts">
+  import type { Message } from "$lib/kratos/types";
+
+  export let messages: Message[];
+</script>
+
+<!-- -------------------------------------------------------------------------->
+{#if messages}
+  {#each messages as msg}
+    {msg.id} -
+    {msg.type} -
+    {msg.text}<br />
+  {/each}
+{/if}
--- a/frontend/src/lib/config.ts
+++ b/frontend/src/lib/config.ts
@ -0,0 +1,2 @@
+export const KRATOS = "http://localhost:4433";
+export const APP = "http://localhost:3000";
--- a/frontend/src/lib/http/index.ts
+++ b/frontend/src/lib/http/index.ts
@ -0,0 +1,11 @@
+export async function get(url: string) {
+  const res = await fetch(url, {
+    credentials: "include",
+    headers: {
+      "Accept": "application/json",
+    },
+    mode: "cors",
+  });
+
+  return res;
+}
--- a/frontend/src/lib/kratos/index.ts
+++ b/frontend/src/lib/kratos/index.ts
@ -0,0 +1,82 @@
+import { browser } from "$app/environment";
+import { KRATOS } from "$lib/config";
+import { get } from "$lib/http";
+import type {
+  KratosError,
+  KratosForm,
+  KratosIdentity,
+  KratosLogout,
+} from "$lib/kratos/types";
+
+// -----------------------------------------------------------------------------
+export function getFlowId(urlSearch: string): string {
+  const qs = new URLSearchParams(urlSearch);
+  const flowId = qs.get("flow");
+
+  if (flowId) return flowId;
+
+  return "";
+}
+
+// -----------------------------------------------------------------------------
+export async function getIdentity(): Promise<KratosIdentity> {
+  if (!browser) throw new Error("no browser environment");
+
+  const url = `${KRATOS}/sessions/whoami`;
+  const res = await get(url);
+
+  if (res.status !== 200) {
+    throw new Error("no identity");
+  }
+
+  const dm = await res.json();
+  return dm.identity;
+}
+
+// -----------------------------------------------------------------------------
+export async function getDataModels(
+  flow: string,
+  flowId: string,
+): Promise<KratosForm | KratosError> {
+  if (!flowId) throw new Error("no flowId");
+  if (!browser) throw new Error("no browser environment");
+
+  const url = `${KRATOS}/self-service/${flow}/flows?id=${flowId}`;
+  const res = await get(url);
+  const dm = await res.json();
+
+  if (dm.error) {
+    dm.instanceOf = "KratosError";
+
+    if (dm.error.details && dm.error.details.redirect_to) {
+      window.location.href = dm.error.details.redirect_to;
+    }
+  } else if (dm.ui) {
+    dm.instanceOf = "KratosForm";
+  } else {
+    throw new Error("unexpected Kratos object");
+  }
+
+  return dm;
+}
+
+// -----------------------------------------------------------------------------
+export async function getLogoutDataModels(): Promise<
+  KratosLogout | KratosError
+> {
+  if (!browser) throw new Error("no browser environment");
+
+  const url = `${KRATOS}/self-service/logout/browser`;
+  const res = await get(url);
+  const dm = await res.json();
+
+  if (dm.error) {
+    dm.instanceOf = "KratosError";
+  } else if (dm.logout_url) {
+    dm.instanceOf = "KratosLogout";
+  } else {
+    throw new Error("unexpected Kratos object");
+  }
+
+  return dm;
+}
--- a/frontend/src/lib/kratos/types.ts
+++ b/frontend/src/lib/kratos/types.ts
@ -0,0 +1,109 @@
+// -----------------------------------------------------------------------------
+export interface Attributes {
+  name: string;
+  type: string;
+  value?: string;
+  disabled: boolean;
+  required?: boolean;
+}
+
+// -----------------------------------------------------------------------------
+export interface Label {
+  id: number;
+  type: string;
+  text: string;
+  context?: unknown;
+}
+
+// -----------------------------------------------------------------------------
+export interface Message {
+  id: number;
+  type: string;
+  text: string;
+  context?: unknown;
+}
+
+// -----------------------------------------------------------------------------
+export interface Meta {
+  label?: Label;
+}
+
+// -----------------------------------------------------------------------------
+export interface Node {
+  type: string;
+  group: string;
+  attributes: Attributes;
+  messages: Message[];
+  meta: Meta;
+}
+
+// -----------------------------------------------------------------------------
+export interface UI {
+  action: string;
+  method: string;
+  messages?: Message[];
+  nodes: Node[];
+  "updated_at": string;
+}
+
+// -----------------------------------------------------------------------------
+export interface KratosForm {
+  instanceOf: "KratosForm";
+  id: string;
+  type: string;
+  forced?: boolean;
+  ui: UI;
+  "created_at"?: string;
+  "expires_at": string;
+  "issued_at": string;
+  "updated_at"?: string;
+  "request_url": string;
+}
+
+// -----------------------------------------------------------------------------
+export interface KratosError {
+  instanceOf: "KratosError";
+  error: {
+    code: number;
+    message: string;
+    status: string;
+    reason?: string;
+    details?: {
+      docs: string;
+      hint: string;
+      "redirect_to": string;
+      "reject_reason": string;
+    };
+  };
+}
+
+// -----------------------------------------------------------------------------
+export interface KratosLogout {
+  instanceOf: "KratosLogout";
+  "logout_url": string;
+}
+
+// -----------------------------------------------------------------------------
+export interface KratosIdentity {
+  id: string;
+  traits: {
+    email: string;
+  };
+  state: string;
+  "created_at": string;
+  "updated_at": string;
+}
+
+// -----------------------------------------------------------------------------
+export interface KratosLoad {
+  status?: number;
+  redirect?: string;
+  props?: {
+    [key: string]:
+      | string
+      | KratosError
+      | KratosForm
+      | KratosIdentity
+      | KratosLogout;
+  };
+}
--- a/frontend/src/lib/stores/kratos/identity.ts
+++ b/frontend/src/lib/stores/kratos/identity.ts
@ -0,0 +1,4 @@
+import { writable } from "svelte/store";
+import type { KratosIdentity } from "$lib/kratos/types";
+
+export default writable({} as KratosIdentity);
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@ -0,0 +1,19 @@
+<script lang="ts">
+  import { browser } from "$app/environment";
+  import { get } from "svelte/store";
+  import identity from "$lib/stores/kratos/identity";
+
+  const _identity = get(identity);
+
+  if (browser) {
+    if (_identity.id) {
+      console.log("signed in");
+      console.log(_identity);
+    } else {
+      console.log("not signed in");
+    }
+  }
+</script>
+
+<!-- -------------------------------------------------------------------------->
+<slot />
--- a/frontend/src/routes/+layout.ts
+++ b/frontend/src/routes/+layout.ts
@ -0,0 +1,16 @@
+import { getIdentity } from "$lib/kratos";
+import identity from "$lib/stores/kratos/identity";
+
+// ---------------------------Q--------------------------------------------------
+export const csr = true;
+export const prerender = false;
+
+export async function load() {
+  await getIdentity()
+    .then((_identity) => {
+      identity.set(_identity);
+    })
+    .catch(() => {
+      //no identity
+    });
+}
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@ -0,0 +1,18 @@
+<script lang="ts">
+  import { APP } from "$lib/config";
+  import { get } from "svelte/store";
+  import identity from "$lib/stores/kratos/identity";
+
+  const _identity = get(identity);
+</script>
+
+<!-- -------------------------------------------------------------------------->
+<section id="welcome">
+  <h2>welcome</h2>
+
+  {#if !_identity.id}
+    <p><a href="{APP}/login">login</a></p>
+  {:else}
+    <p><a href="{APP}/dashboard">Dashboard</a></p>
+  {/if}
+</section>
--- a/frontend/src/routes/dashboard/+layout.svelte
+++ b/frontend/src/routes/dashboard/+layout.svelte
@ -0,0 +1,16 @@
+<script lang="ts">
+  import { browser } from "$app/environment";
+  import { KRATOS } from "$lib/config";
+  import { get } from "svelte/store";
+  import identity from "$lib/stores/kratos/identity";
+
+  const _identity = get(identity);
+
+  if (browser && !_identity.id) {
+    const loginUrl = `${KRATOS}/self-service/login/browser`;
+    window.location.replace(loginUrl);
+  }
+</script>
+
+<!-- -------------------------------------------------------------------------->
+<slot />
--- a/frontend/src/routes/dashboard/+page.svelte
+++ b/frontend/src/routes/dashboard/+page.svelte
@ -0,0 +1,19 @@
+<script lang="ts">
+  import { APP } from "$lib/config";
+  import { get } from "svelte/store";
+  import identity from "$lib/stores/kratos/identity";
+
+  const _identity = get(identity);
+  let email = "";
+
+  if (_identity && _identity.traits) email = _identity.traits.email;
+</script>
+
+<!-- -------------------------------------------------------------------------->
+<section id="dashboard">
+  <h2>Dashboard</h2>
+
+  <p>Hello {email}</p>
+  <p><a href="{APP}/settings">Settings</a></p>
+  <p><a href="{APP}/logout">Logout</a></p>
+</section>
--- a/frontend/src/routes/login/+page.svelte
+++ b/frontend/src/routes/login/+page.svelte
@ -0,0 +1,39 @@
+<script lang="ts">
+  import { APP, KRATOS } from "$lib/config";
+  import { page } from "$app/stores";
+  import { browser } from "$app/environment";
+  import { getFlowId, getDataModels } from "$lib/kratos";
+  import Form from "$lib/components/kratos/form.svelte";
+  import Messages from "$lib/components/kratos/messages.svelte";
+
+  const flowId = getFlowId($page.url.search);
+  if (browser && !flowId)
+    window.location.href = `${KRATOS}/self-service/login/browser`;
+
+  const pr = getDataModels("login", flowId);
+</script>
+
+<!-- -------------------------------------------------------------------------->
+<div id="login">
+  {#await pr then dm}
+    {#if dm.instanceOf === "KratosForm"}
+      <div id="login">
+        <h2>Sign in</h2>
+
+        {#if dm.ui.messages}
+          <Messages messages={dm.ui.messages} />
+        {/if}
+        <Form {dm} groups={["default", "password"]} />
+
+        <hr />
+
+        <div>
+          <p><a href="{APP}/recovery">Forget password?</a></p>
+          <p><a href="{APP}/registration">Don't have an account?</a></p>
+        </div>
+      </div>
+    {:else}
+      <p>Something went wrong</p>
+    {/if}
+  {/await}
+</div>
--- a/frontend/src/routes/logout/+page.svelte
+++ b/frontend/src/routes/logout/+page.svelte
--- a/frontend/src/routes/logout/+page.ts
+++ b/frontend/src/routes/logout/+page.ts
@ -0,0 +1,15 @@
+import { browser } from "$app/environment";
+import { getLogoutDataModels } from "$lib/kratos";
+
+// -----------------------------------------------------------------------------
+export async function load() {
+  if (!browser) return {};
+
+  const dm = await getLogoutDataModels();
+
+  if (dm.instanceOf === "KratosLogout") {
+    window.location.replace(dm.logout_url);
+  } else {
+    window.location.replace("/");
+  }
+}
--- a/frontend/src/routes/recovery/+page.svelte
+++ b/frontend/src/routes/recovery/+page.svelte
@ -0,0 +1,33 @@
+<script lang="ts">
+  import { KRATOS } from "$lib/config";
+  import { page } from "$app/stores";
+  import { browser } from "$app/environment";
+  import { getFlowId, getDataModels } from "$lib/kratos";
+  import Form from "$lib/components/kratos/form.svelte";
+  import Messages from "$lib/components/kratos/messages.svelte";
+
+  const flowId = getFlowId($page.url.search);
+  if (browser && !flowId)
+    window.location.href = `${KRATOS}/self-service/recovery/browser`;
+
+  const pr = getDataModels("recovery", flowId);
+</script>
+
+<!-- -------------------------------------------------------------------------->
+<section id="recovery">
+  {#await pr then dm}
+    {#if dm.instanceOf === "KratosForm"}
+      <div class="container" id="recovery">
+        <h2 class="subheading">recovery</h2>
+
+        {#if dm.ui.messages}
+          <Messages messages={dm.ui.messages} />
+        {:else}
+          <Form {dm} groups={["default", "link"]} />
+        {/if}
+      </div>
+    {:else}
+      <p>Something went wrong</p>
+    {/if}
+  {/await}
+</section>
--- a/frontend/src/routes/registration/+page.svelte
+++ b/frontend/src/routes/registration/+page.svelte
@ -0,0 +1,38 @@
+<script lang="ts">
+  import { APP, KRATOS } from "$lib/config";
+  import { page } from "$app/stores";
+  import { browser } from "$app/environment";
+  import { getFlowId, getDataModels } from "$lib/kratos";
+  import Form from "$lib/components/kratos/form.svelte";
+  import Messages from "$lib/components/kratos/messages.svelte";
+
+  const flowId = getFlowId($page.url.search);
+  if (browser && !flowId)
+    window.location.href = `${KRATOS}/self-service/registration/browser`;
+
+  const pr = getDataModels("registration", flowId);
+</script>
+
+<!-- -------------------------------------------------------------------------->
+<section id="registration">
+  {#await pr then dm}
+    {#if dm.instanceOf === "KratosForm"}
+      <div class="container" id="registration">
+        <h2 class="subheading">Registration</h2>
+
+        {#if dm.ui.messages}
+          <Messages messages={dm.ui.messages} />
+        {/if}
+        <Form {dm} groups={["default", "password"]} />
+
+        <hr class="divider" />
+
+        <section class="alternative-actions">
+          <p><a href="{APP}/login">Already have an account?</a></p>
+        </section>
+      </div>
+    {:else}
+      <p>Something went wrong</p>
+    {/if}
+  {/await}
+</section>
--- a/frontend/src/routes/settings/+page.svelte
+++ b/frontend/src/routes/settings/+page.svelte
@ -0,0 +1,35 @@
+<script lang="ts">
+  import { KRATOS } from "$lib/config";
+  import { page } from "$app/stores";
+  import { browser } from "$app/environment";
+  import { getFlowId, getDataModels } from "$lib/kratos";
+  import Form from "$lib/components/kratos/form.svelte";
+  import Messages from "$lib/components/kratos/messages.svelte";
+
+  const flowId = getFlowId($page.url.search);
+  if (browser && !flowId)
+    window.location.href = `${KRATOS}/self-service/settings/browser`;
+
+  const pr = getDataModels("settings", flowId);
+</script>
+
+<!-- -------------------------------------------------------------------------->
+<section id="settings">
+  {#await pr then dm}
+    {#if dm.instanceOf === "KratosForm"}
+      <div class="container" id="settings">
+        <h2 class="subheading">Settings</h2>
+
+        {#if dm.ui.messages}
+          <Messages messages={dm.ui.messages} />
+        {:else}
+          <Form {dm} groups={["default", "profile"]} />
+          <hr class="divider" />
+          <Form {dm} groups={["default", "password"]} />
+        {/if}
+      </div>
+    {:else}
+      <p>Something went wrong</p>
+    {/if}
+  {/await}
+</section>
--- a/frontend/src/routes/verification/+page.svelte
+++ b/frontend/src/routes/verification/+page.svelte
@ -0,0 +1,42 @@
+<script lang="ts">
+  import { KRATOS } from "$lib/config";
+  import { page } from "$app/stores";
+  import { browser } from "$app/environment";
+  import { get } from "svelte/store";
+  import { getFlowId, getDataModels } from "$lib/kratos";
+  import identity from "$lib/stores/kratos/identity";
+  import Form from "$lib/components/kratos/form.svelte";
+  import Messages from "$lib/components/kratos/messages.svelte";
+
+  const _identity = get(identity);
+  const flowId = getFlowId($page.url.search);
+
+  if (browser) {
+    if (!_identity) {
+      window.location.href = `${KRATOS}/self-service/login/browser`;
+    } else if (!flowId) {
+      window.location.href = `${KRATOS}/self-service/verification/browser`;
+    }
+  }
+
+  const pr = getDataModels("verification", flowId);
+</script>
+
+<!-- -------------------------------------------------------------------------->
+<section id="verification">
+  {#await pr then dm}
+    {#if dm.instanceOf === "KratosForm"}
+      <div class="container" id="verification">
+        <h2 class="subheading">verification</h2>
+
+        {#if dm.ui.messages}
+          <Messages messages={dm.ui.messages} />
+        {:else}
+          <Form {dm} groups={["default", "link"]} />
+        {/if}
+      </div>
+    {:else}
+      <p>Something went wrong</p>
+    {/if}
+  {/await}
+</section>
--- a/frontend/static/favicon.png
+++ b/frontend/static/favicon.png
--- a/frontend/svelte.config.js
+++ b/frontend/svelte.config.js
@ -0,0 +1,16 @@
+//import adapter from '@sveltejs/adapter-auto';
+import adapter from "@sveltejs/adapter-node";
+import preprocess from "svelte-preprocess";
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  // Consult https://github.com/sveltejs/svelte-preprocess
+  // for more information about preprocessors
+  preprocess: preprocess(),
+
+  kit: {
+    adapter: adapter(),
+  },
+};
+
+export default config;
--- a/frontend/tmux.bash
+++ b/frontend/tmux.bash
@ -0,0 +1,26 @@
+#!/bin/bash
+
+# Set Session Name
+SESSION="kratos-svelte-login"
+SESSIONEXISTS=$(tmux list-sessions | grep $SESSION)
+
+# Only create tmux session if it doesn't already exist
+if [ "$SESSIONEXISTS" = "" ]
+then
+    # Start New Session with our name
+    tmux new-session -d -s $SESSION
+
+    # Name first Pane and start zsh
+    tmux rename-window -t 0 'src'
+
+    # Create and setup pane for running the backend
+#    tmux send-keys -t 'Main' 'bash' C-m 'clear' C-m 'cd backend && go build -o backend . && ./backend' C-m
+    tmux send-keys -t 'src' 'cd src && npm run dev' C-m
+
+    # Create an horizontal pane for terminal commands
+    tmux split-window -vf -l 1
+    tmux send-keys 'emacs src/routes/+page.svelte &' Enter
+fi
+
+# Attach Session, on the Main window
+tmux attach-session -t $SESSION:0
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@ -0,0 +1,18 @@
+{
+  "extends": "./.svelte-kit/tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true
+  }
+  // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+  //
+  // If you want to overwrite includes/excludes, make sure to copy over the
+  // relevant includes/excludes from the referenced tsconfig.json
+  // TypeScript does not merge them in
+}
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@ -0,0 +1,13 @@
+import { sveltekit } from "@sveltejs/kit/vite";
+import type { UserConfig } from "vite";
+
+const config: UserConfig = {
+  plugins: [sveltekit()],
+  server: {
+    hmr: {
+      clientPort: 3000,
+    },
+  },
+};
+
+export default config;