parent
29807d104c
commit
237b1dd368
GPG Key ID:
0104BC05F41B77B8
@ -0,0 +1,23 @@
|
||||
import type { LayoutServerLoad } from './$types';
|
||||
import { KratosPublicApi } from '$lib/server/APIClients.js';
|
||||
|
||||
export const load: LayoutServerLoad = async ({ request }) => {
|
||||
try {
|
||||
const current_user = await KratosPublicApi.toSession(
|
||||
undefined,
|
||||
request.headers.get('Cookie') ?? undefined
|
||||
);
|
||||
return {
|
||||
logged_in: true,
|
||||
logout_url: (
|
||||
await KratosPublicApi.createSelfServiceLogoutFlowUrlForBrowsers(
|
||||
request.headers.get('Cookie') ?? undefined
|
||||
)
|
||||
).data.logout_url
|
||||
};
|
||||
} catch (error) {
|
||||
return {
|
||||
logged_in: false
|
||||
};
|
||||
}
|
||||
};
|
||||
@ -1,6 +1,48 @@
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import { MenuIcon } from 'svelte-feather-icons';
|
||||
import type { PageData } from './$types';
|
||||
export let data: PageData;
|
||||
|
||||
import '../app.postcss';
|
||||
import '../app.postcss';
|
||||
</script>
|
||||
|
||||
<slot />
|
||||
<div class="navbar bg-base-100 fixed h-16 z-10">
|
||||
<div class="navbar-start">
|
||||
<div class="dropdown">
|
||||
<button tabindex="0" class="btn btn-ghost lg:hidden">
|
||||
<MenuIcon class="h-5 w-5" />
|
||||
</button>
|
||||
<ul
|
||||
tabindex="0"
|
||||
class="menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52"
|
||||
role="menu"
|
||||
>
|
||||
{#if data.logged_in}
|
||||
<li><a href="/settings">Account Settings</a></li>
|
||||
<li><a href="/verification">Email Verification</a></li>
|
||||
<li><a href={data.logout_url}>Log Out</a></li>
|
||||
{:else}
|
||||
<li><a href="/login">Log In</a></li>
|
||||
<li><a href="/registration">Sign Up</a></li>
|
||||
{/if}
|
||||
</ul>
|
||||
</div>
|
||||
<a class="btn btn-ghost normal-case text-xl" href="/">ørkesløs</a>
|
||||
</div>
|
||||
<div class="navbar-end hidden lg:flex">
|
||||
<ul class="menu menu-horizontal p-0">
|
||||
{#if data.logged_in}
|
||||
<li><a href="/settings">Account Settings</a></li>
|
||||
<li><a href="/verification">Email Verification</a></li>
|
||||
<li><a href={data.logout_url}>Log Out</a></li>
|
||||
{:else}
|
||||
<li><a href="/login">Log In</a></li>
|
||||
<li><a href="/registration">Sign Up</a></li>
|
||||
{/if}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-16 h-full">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,57 @@
|
||||
import type { PageServerLoad } from './$types';
|
||||
import { KratosAdminApi, KratosPublicApi } from '$lib/server/APIClients.js';
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
import { KRATOS_PUBLIC_URL } from '$lib/server/config';
|
||||
import type { SelfServiceLoginFlow, SelfServiceSettingsFlow } from '@ory/client';
|
||||
|
||||
export const load: PageServerLoad = async ({ url, request }) => {
|
||||
const flow = url.searchParams.get('flow');
|
||||
const return_to = url.searchParams.get('return_to') ?? '';
|
||||
|
||||
const initFlowUrl = `${KRATOS_PUBLIC_URL.replace(
|
||||
/\/$/,
|
||||
''
|
||||
)}/self-service/settings/browser?${new URLSearchParams({
|
||||
return_to: return_to.toString()
|
||||
}).toString()}`;
|
||||
if (flow == undefined) {
|
||||
throw redirect(303, initFlowUrl);
|
||||
}
|
||||
|
||||
const { data: session } = await KratosPublicApi.toSession(
|
||||
undefined,
|
||||
request.headers.get('Cookie') ?? undefined
|
||||
);
|
||||
|
||||
const logoutUrl =
|
||||
(
|
||||
await KratosAdminApi.createSelfServiceLogoutFlowUrlForBrowsers(
|
||||
request.headers.get('Cookie') ?? undefined
|
||||
).catch(() => ({ data: { logout_url: '' } }))
|
||||
).data.logout_url || '';
|
||||
|
||||
const identityCredentialTrait =
|
||||
session.identity.traits.username || session.identity.traits.email || '';
|
||||
|
||||
const sessionText =
|
||||
identityCredentialTrait !== ''
|
||||
? `You are currently logged in as ${identityCredentialTrait} `
|
||||
: '';
|
||||
|
||||
const { data: settings_flow }: { data: SelfServiceSettingsFlow } =
|
||||
await KratosPublicApi.getSelfServiceSettingsFlow(
|
||||
flow,
|
||||
undefined,
|
||||
request.headers.get('Cookie') ?? undefined
|
||||
).catch((e) => {
|
||||
console.log(e);
|
||||
throw redirect(303, initFlowUrl);
|
||||
});
|
||||
|
||||
return {
|
||||
KRATOS_PUBLIC_URL: KRATOS_PUBLIC_URL,
|
||||
flow: settings_flow,
|
||||
sessionText: sessionText,
|
||||
logoutURL: logoutUrl
|
||||
};
|
||||
};
|
||||
@ -0,0 +1,87 @@
|
||||
<script lang="ts">
|
||||
import KratosForm from '$lib/KratosForm.svelte';
|
||||
import { filterNodesByGroups } from '@ory/integrations/ui';
|
||||
import type { PageData } from './$types';
|
||||
export let data: PageData;
|
||||
|
||||
export let profile_ui = {
|
||||
...data.flow.ui,
|
||||
nodes: filterNodesByGroups({
|
||||
nodes: data.flow.ui.nodes,
|
||||
groups: 'profile'
|
||||
})
|
||||
};
|
||||
|
||||
export let password_ui = {
|
||||
...data.flow.ui,
|
||||
nodes: filterNodesByGroups({
|
||||
nodes: data.flow.ui.nodes,
|
||||
groups: 'password'
|
||||
})
|
||||
};
|
||||
|
||||
export let oidc_ui = {
|
||||
...data.flow.ui,
|
||||
nodes: filterNodesByGroups({
|
||||
nodes: data.flow.ui.nodes,
|
||||
groups: 'oidc'
|
||||
})
|
||||
};
|
||||
|
||||
export let lookup_secret_ui = {
|
||||
...data.flow.ui,
|
||||
nodes: filterNodesByGroups({
|
||||
nodes: data.flow.ui.nodes,
|
||||
groups: 'lookup_secret'
|
||||
})
|
||||
};
|
||||
|
||||
export let webauthn_ui = {
|
||||
...data.flow.ui,
|
||||
nodes: filterNodesByGroups({
|
||||
nodes: data.flow.ui.nodes,
|
||||
groups: 'webauthn'
|
||||
})
|
||||
};
|
||||
|
||||
export let totp_ui = {
|
||||
...data.flow.ui,
|
||||
nodes: filterNodesByGroups({
|
||||
nodes: data.flow.ui.nodes,
|
||||
groups: 'totp'
|
||||
})
|
||||
};
|
||||
|
||||
let tabs = [
|
||||
{ name: 'Profile', ui: profile_ui },
|
||||
{ name: 'Password', ui: password_ui },
|
||||
{ name: 'OpenID', ui: oidc_ui },
|
||||
{ name: 'Recovery Codes', ui: lookup_secret_ui },
|
||||
{ name: 'Security Keys', ui: webauthn_ui },
|
||||
{ name: 'Authenticator Apps', ui: totp_ui }
|
||||
].filter((e) => {
|
||||
return e.ui.nodes.filter((node) => node.group != 'default').length != 0;
|
||||
});
|
||||
let activeTab = 0;
|
||||
</script>
|
||||
|
||||
<div class="flex h-full justify-center">
|
||||
<div class="place-self-center space-y-2 max-w-xl">
|
||||
<h1 class="text-lg font-bold">Account Settings</h1>
|
||||
{data.sessionText}
|
||||
<div class="tabs">
|
||||
{#each tabs as tab, index}
|
||||
<button
|
||||
class="tab tab-bordered"
|
||||
class:tab-active={activeTab == index}
|
||||
on:click={() => (activeTab = index)}>{tab.name}</button
|
||||
>
|
||||
{/each}
|
||||
</div>
|
||||
{#each tabs as tab, index}
|
||||
<div class="card" class:hidden={activeTab != index}>
|
||||
<KratosForm ui={tab.ui} />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in new issue