andrea/probo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add frontend folder

Browse source
This commit is contained in:
Andrea Fazzi 2022-09-23 10:24:03 +02:00
parent 2e79c6595f
commit 84b475671f
37 changed files with 6840 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/.gitignore vendored Normal file
View file

@ -0,0 +1 @@
node_modules

70
frontend/README.md Normal file
View file

@ -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`

5904
frontend/package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

33
frontend/package.json Normal file
View file

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

9
frontend/src/app.d.ts vendored Normal file
View file

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

16
frontend/src/app.html Normal file
View file

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

29
frontend/src/lib/components/kratos/fieldset-email.svelte Normal file
View file

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

10
frontend/src/lib/components/kratos/fieldset-hidden.svelte Normal file
View file

@ -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 ?? ""} />

74
frontend/src/lib/components/kratos/fieldset-password-toggle.svelte Normal file
View file

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

26
frontend/src/lib/components/kratos/fieldset-password.svelte Normal file
View file

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

16
frontend/src/lib/components/kratos/fieldset-submit.svelte Normal file
View file

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

24
frontend/src/lib/components/kratos/fieldset-text.svelte Normal file
View file

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

27
frontend/src/lib/components/kratos/fieldsets.svelte Normal file
View file

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

16
frontend/src/lib/components/kratos/form.svelte Normal file
View file

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

14
frontend/src/lib/components/kratos/messages.svelte Normal file
View file

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

2
frontend/src/lib/config.ts Normal file
View file

@ -0,0 +1,2 @@
export const KRATOS = "http://localhost:4433";
export const APP = "http://localhost:3000";

11
frontend/src/lib/http/index.ts Normal file
View file

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

82
frontend/src/lib/kratos/index.ts Normal file
View file

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

109
frontend/src/lib/kratos/types.ts Normal file
View file

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

4
frontend/src/lib/stores/kratos/identity.ts Normal file
View file

@ -0,0 +1,4 @@
import { writable } from "svelte/store";
import type { KratosIdentity } from "$lib/kratos/types";
export default writable({} as KratosIdentity);

19
frontend/src/routes/+layout.svelte Normal file
View file

@ -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 />

16
frontend/src/routes/+layout.ts Normal file
View file

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

18
frontend/src/routes/+page.svelte Normal file
View file

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

16
frontend/src/routes/dashboard/+layout.svelte Normal file
View file

@ -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 />

19
frontend/src/routes/dashboard/+page.svelte Normal file
View file

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

39
frontend/src/routes/login/+page.svelte Normal file
View file

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

0
frontend/src/routes/logout/+page.svelte Normal file
View file

15
frontend/src/routes/logout/+page.ts Normal file
View file

@ -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("/");
}
}

33
frontend/src/routes/recovery/+page.svelte Normal file
View file

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

38
frontend/src/routes/registration/+page.svelte Normal file
View file

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

35
frontend/src/routes/settings/+page.svelte Normal file
View file

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

42
frontend/src/routes/verification/+page.svelte Normal file
View file

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

BIN
frontend/static/favicon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

16
frontend/svelte.config.js Normal file
View file

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

26
frontend/tmux.bash Executable file
View file

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

18
frontend/tsconfig.json Normal file
View file

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

13
frontend/vite.config.ts Normal file
View file

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