diff --git a/package.json b/package.json index 93b4fce..f428d2b 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "prettier-plugin-svelte": "^2.7.0", "svelte": "^3.44.0", "svelte-check": "^2.7.1", + "svelte-feather-icons": "^4.0.0", "svelte-preprocess": "^4.10.7", "tailwindcss": "^3.1.5", "tslib": "^2.3.1", diff --git a/src/app.postcss b/src/app.postcss index 1a7b7cf..74f8004 100644 --- a/src/app.postcss +++ b/src/app.postcss @@ -2,3 +2,8 @@ @tailwind base; @tailwind components; @tailwind utilities; + +:root, +body { + height: 100%; +} diff --git a/src/lib/KratosForm.svelte b/src/lib/KratosForm.svelte index 88df0d9..dad4ab4 100644 --- a/src/lib/KratosForm.svelte +++ b/src/lib/KratosForm.svelte @@ -1,5 +1,6 @@ - + +
+ +
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 24712a7..b808c29 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -3,7 +3,7 @@ export let data: PageData; -
+
diff --git a/src/routes/consent/+page.svelte b/src/routes/consent/+page.svelte index 7b43af8..b5ac557 100644 --- a/src/routes/consent/+page.svelte +++ b/src/routes/consent/+page.svelte @@ -4,7 +4,7 @@ export let data: PageData; -
+
Hello {data.username}! diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte index 973aa05..be72206 100644 --- a/src/routes/login/+page.svelte +++ b/src/routes/login/+page.svelte @@ -4,7 +4,7 @@ export let data: PageData; -
+

{data.title}

{#if data.subtitle} diff --git a/src/routes/logout/+page.svelte b/src/routes/logout/+page.svelte index 448cf64..8bc240e 100644 --- a/src/routes/logout/+page.svelte +++ b/src/routes/logout/+page.svelte @@ -3,7 +3,7 @@ export let data: PageData; -
+
Hello {data.username}! diff --git a/src/routes/recovery/+page.svelte b/src/routes/recovery/+page.svelte index 34935e3..297d5c2 100644 --- a/src/routes/recovery/+page.svelte +++ b/src/routes/recovery/+page.svelte @@ -5,7 +5,7 @@ export let data: PageData; -
+
-
+

{data.title}

{#if data.subtitle} diff --git a/src/routes/settings/+page.server.ts b/src/routes/settings/+page.server.ts new file mode 100644 index 0000000..ec416b5 --- /dev/null +++ b/src/routes/settings/+page.server.ts @@ -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 + }; +}; diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte new file mode 100644 index 0000000..83dde13 --- /dev/null +++ b/src/routes/settings/+page.svelte @@ -0,0 +1,87 @@ + + +
+
+

Account Settings

+ {data.sessionText} +
+ {#each tabs as tab, index} + + {/each} +
+ {#each tabs as tab, index} +
+ +
+ {/each} +
+
diff --git a/src/routes/verification/+page.svelte b/src/routes/verification/+page.svelte index ae6e49e..baa2c2b 100644 --- a/src/routes/verification/+page.svelte +++ b/src/routes/verification/+page.svelte @@ -4,7 +4,7 @@ export let data: PageData; -
+

Verify Account

diff --git a/yarn.lock b/yarn.lock index 6452613..fc9b281 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2347,6 +2347,13 @@ svelte-check@^2.7.1: svelte-preprocess "^4.0.0" typescript "*" +svelte-feather-icons@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/svelte-feather-icons/-/svelte-feather-icons-4.0.0.tgz#fdffcce3a81782008f7e621cb37a29d041630aef" + integrity sha512-4ieUsjp+VYa1r6y80jDt9zRiRUZyJNbESpRdHdJJhiBubyuXX96A7f1UZSK4olxzP6Qsg5ZAuyZlnmvD+/swAA== + dependencies: + svelte "^3.38.2" + svelte-hmr@^0.15.1: version "0.15.1" resolved "https://registry.yarnpkg.com/svelte-hmr/-/svelte-hmr-0.15.1.tgz#d11d878a0bbb12ec1cba030f580cd2049f4ec86b" @@ -2376,7 +2383,7 @@ svelte-preprocess@^4.0.0, svelte-preprocess@^4.10.7: sorcery "^0.10.0" strip-indent "^3.0.0" -svelte@^3.44.0: +svelte@^3.38.2, svelte@^3.44.0: version "3.53.1" resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.53.1.tgz#db9d7df7a8f570e8e22547444c149208b1914442" integrity sha512-Q4/hHkktZogGhN5iqxqSi9sjEVoe/NbIxX4hXEHoasTxj+TxEQVAq66LnDMdAZxjmsodkoI5F3slqsS68U7FNw==