@keycloakify/svelte 0.0.1-rc.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 GitHub user u/luca-peruzzo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,50 @@
+<p align="center">
+    <img src="https://github.com/user-attachments/assets/28b68619-6a35-4c4a-a7c3-a62521bd2002">  
+</p>
+<p align="center">
+    <i>🔏 Svelte Component Library for Keycloakify 🔏</i>
+    <br>
+    <br>
+    <a href="https://github.com/keycloakify/keycloakify-svelte/actions">
+      <img src="https://github.com/keycloakify/keycloakify/workflows/ci/badge.svg?branch=main">
+    </a>
+    <a href="https://www.npmjs.com/package/@keycloakify/svelte">
+      <img src="https://img.shields.io/npm/dm/@keycloakify/svelte">
+    </a>
+    <a href="https://github.com/keycloakify/keycloakify/blob/main/LICENSE">
+      <img src="https://img.shields.io/npm/l/@keycloakify/svelte">
+    </a>
+    <p align="center">
+      Check out our discord server!<br/>
+      <a href="https://discord.gg/mJdYJSdcm4">
+        <img src="https://dcbadge.limes.pink/api/server/kYFZG7fQmn"/>
+      </a>
+    </p>
+    <p align="center">
+        <a href="https://www.keycloakify.dev">Home</a>
+        -
+        <a href="https://docs.keycloakify.dev">Documentation</a>
+        -
+        <a href="https://github.com/keycloakify/keycloakify-starter-svelte">Starter Project Svelte + Vite</a>
+    </p>
+</p>
+
+## Using the library
+
+Don't it's not ready yet. Subscribe to alerts on the repo to get notified when it is.
+
+## Contributing
+
+> **Note:**: This is **not** for using the library, but for contributing to it.
+
+```bash
+git clone https://github.com/keycloakify/keycloakify-svelte
+git clone https://github.com/keycloakify/keycloakify-starter-svelte
+
+cd keycloakify-svelte
+yarn install
+yarn link-in-starter # When prompted select the starter you want to link into
+
+# At this point you can navigate to the starter you've picked.
+# The changes in the library will be reflected live in the starter.
+```

package/dist/account/DefaultPage.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import type { PageProps } from './pages/PageProps';
+  import type { I18n } from './i18n';
+  import type { KcContext } from './KcContext';
+
+  const props: PageProps<KcContext, I18n> = $props();
+  const { kcContext: kcContext, ...rest } = props;
+  const loadComponent = () => {
+    switch (kcContext.pageId) {
+      case 'password.ftl':
+        return import('./pages/Password.svelte');
+
+      case 'sessions.ftl':
+        return import('./pages/Sessions.svelte');
+
+      case 'account.ftl':
+        return import('./pages/Account.svelte');
+
+      case 'totp.ftl':
+        return import('./pages/Totp.svelte');
+
+      case 'applications.ftl':
+        return import('./pages/Applications.svelte');
+
+      case 'log.ftl':
+        return import('./pages/Log.svelte');
+
+      case 'federatedIdentity.ftl':
+        return import('./pages/FederatedIdentity.svelte');
+    }
+  };
+  const lazyComponent = loadComponent();
+</script>
+
+{#if lazyComponent}
+  {#await lazyComponent then { default: LazyComponent }}
+    <LazyComponent
+      kcContext={kcContext as never}
+      {...rest}
+    />
+  {/await}
+{/if}

package/dist/account/DefaultPage.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { PageProps } from './pages/PageProps';
+import type { I18n } from './i18n';
+import type { KcContext } from './KcContext';
+declare const DefaultPage: import("svelte").Component<PageProps<KcContext, I18n>, {}, "">;
+type DefaultPage = ReturnType<typeof DefaultPage>;
+export default DefaultPage;

package/dist/account/KcContext/KcContext.d.ts

@@ -0,0 +1 @@
+export type { ExtendKcContext, KcContext } from 'keycloakify/account/KcContext';

package/dist/account/KcContext/KcContext.js

@@ -0,0 +1 @@
+export {};

package/dist/account/KcContext/index.d.ts

@@ -0,0 +1 @@
+export * from './KcContext';

package/dist/account/KcContext/index.js

@@ -0,0 +1 @@
+export * from './KcContext';

package/dist/account/Template.svelte

@@ -0,0 +1,143 @@
+<script lang="ts">
+  import { useInitialize } from './Template.useInitialize';
+  import type { TemplateProps } from './TemplateProps';
+  import { useSetClassName } from '../tools/useSetClassName';
+  import { getKcClsx } from 'keycloakify/account/lib/kcClsx';
+  import { clsx } from 'keycloakify/tools/clsx';
+  import { onMount } from 'svelte';
+  import type { I18n } from './i18n';
+  import type { KcContext } from './KcContext';
+  import { kcSanitize } from 'keycloakify/lib/kcSanitize';
+
+  const { kcContext, i18n, doUseDefaultCss, active, classes, children }: TemplateProps<KcContext, I18n> = $props();
+  const { kcClsx } = getKcClsx({ doUseDefaultCss, classes });
+
+  const { msg, msgStr, currentLanguage, enabledLanguages } = $i18n;
+
+  const { url, features, realm, message, referrer } = kcContext;
+
+  onMount(() => {
+    document.title = msgStr('accountManagementTitle');
+  });
+
+  useSetClassName({
+    qualifiedName: 'html',
+    className: kcClsx('kcHtmlClass'),
+  });
+
+  useSetClassName({
+    qualifiedName: 'body',
+    className: clsx('admin-console', 'user', kcClsx('kcBodyClass')),
+  });
+
+  const { isReadyToRender } = useInitialize({ kcContext, doUseDefaultCss });
+</script>
+
+{#if $isReadyToRender}
+  <header class="navbar navbar-default navbar-pf navbar-main header">
+    <!-- svelte-ignore a11y_no_redundant_roles -->
+    <nav
+      class="navbar"
+      role="navigation"
+    >
+      <div class="navbar-header">
+        <div class="container">
+          <h1 class="navbar-title">Keycloak</h1>
+        </div>
+      </div>
+      <div class="navbar-collapse navbar-collapse-1">
+        <div class="container">
+          <ul class="nav navbar-nav navbar-utility">
+            {#if enabledLanguages.length}
+              <li>
+                <div
+                  class="kc-dropdown"
+                  id="kc-locale-dropdown"
+                >
+                  <!-- svelte-ignore a11y_invalid_attribute -->
+                  <a
+                    href="#"
+                    id="kc-current-locale-link"
+                  >
+                    {currentLanguage.label}
+                  </a>
+                  <ul>
+                    {#each enabledLanguages as { label, href }}
+                      <li class="kc-dropdown-item">
+                        <a {href}>{label}</a>
+                      </li>
+                    {/each}
+                  </ul>
+                </div>
+              </li>
+            {/if}
+            {#if referrer?.url}
+              <li>
+                <a
+                  href={referrer.url}
+                  id="referrer"
+                >
+                  {@render msg('backTo', referrer.name)()}
+                </a>
+              </li>
+            {/if}
+            <li>
+              <a href={url.getLogoutUrl()}>{@render msg('doSignOut')()}</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+  </header>
+
+  <div class="container">
+    <div class="bs-sidebar col-sm-3">
+      <ul>
+        <li class={clsx(active === 'account' && 'active')}>
+          <a href={url.accountUrl}>{@render msg('account')()}</a>
+        </li>
+        {#if features.passwordUpdateSupported}
+          <li class={clsx(active === 'password' && 'active')}>
+            <a href={url.passwordUrl}>{@render msg('password')()}</a>
+          </li>
+        {/if}
+        <li class={clsx(active === 'totp' && 'active')}>
+          <a href={url.totpUrl}>{@render msg('authenticator')()}</a>
+        </li>
+        {#if features.identityFederation}
+          <li class={clsx(active === 'social' && 'active')}>
+            <a href={url.socialUrl}>{@render msg('federatedIdentity')()}</a>
+          </li>
+        {/if}
+        <li class={clsx(active === 'sessions' && 'active')}>
+          <a href={url.sessionsUrl}>{@render msg('sessions')()}</a>
+        </li>
+        <li class={clsx(active === 'applications' && 'active')}>
+          <a href={url.applicationsUrl}>{@render msg('applications')()}</a>
+        </li>
+        {#if features.log}
+          <li class={clsx(active === 'log' && 'active')}>
+            <a href={url.logUrl}>{@render msg('log')()}</a>
+          </li>
+        {/if}
+        {#if realm.userManagedAccessAllowed && features.authorization}
+          <li class={clsx(active === 'authorization' && 'active')}>
+            <a href={url.resourceUrl}>{@render msg('myResources')()}</a>
+          </li>
+        {/if}
+      </ul>
+    </div>
+
+    <div class="col-sm-9 content-area">
+      {#if message !== undefined}
+        <div class={clsx('alert', `alert-${message.type}`)}>
+          {#if message.type === 'success'}<span class="pficon pficon-ok"></span>{/if}
+          {#if message.type === 'error'}<span class="pficon pficon-error-circle-o"></span>{/if}
+          <span class="kc-feedback-text">{@html kcSanitize(message.summary)}</span>
+        </div>
+      {/if}
+
+      {@render children?.()}
+    </div>
+  </div>
+{/if}

package/dist/account/Template.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { TemplateProps } from './TemplateProps';
+import type { I18n } from './i18n';
+import type { KcContext } from './KcContext';
+declare const Template: import("svelte").Component<TemplateProps<KcContext, I18n>, {}, "">;
+type Template = ReturnType<typeof Template>;
+export default Template;

package/dist/account/Template.useInitialize.d.ts

@@ -0,0 +1,12 @@
+export type KcContextLike = {
+    url: {
+        resourcesCommonPath: string;
+        resourcesPath: string;
+    };
+};
+export declare function useInitialize(params: {
+    kcContext: KcContextLike;
+    doUseDefaultCss: boolean;
+}): {
+    isReadyToRender: import("svelte/store").Readable<boolean>;
+};

package/dist/account/Template.useInitialize.js

@@ -0,0 +1,19 @@
+import { useInsertLinkTags } from '../tools/useInsertLinkTags';
+import { assert } from 'keycloakify/tools/assert';
+assert();
+assert();
+export function useInitialize(params) {
+    const { kcContext, doUseDefaultCss } = params;
+    const { url } = kcContext;
+    const { areAllStyleSheetsLoaded } = useInsertLinkTags({
+        componentOrHookName: 'Template',
+        hrefs: !doUseDefaultCss
+            ? []
+            : [
+                `${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly.min.css`,
+                `${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly-additions.min.css`,
+                `${url.resourcesPath}/css/account.css`,
+            ],
+    });
+    return { isReadyToRender: areAllStyleSheetsLoaded };
+}

package/dist/account/TemplateProps.d.ts

@@ -0,0 +1,12 @@
+import type { ClassKey } from 'keycloakify/account/lib/kcClsx';
+import type { Snippet } from 'svelte';
+import type { Readable } from 'svelte/store';
+export type TemplateProps<KcContext, I18n> = {
+    kcContext: KcContext;
+    i18n: Readable<I18n>;
+    doUseDefaultCss: boolean;
+    classes?: Partial<Record<ClassKey, string>>;
+    children: Snippet;
+    active: string;
+};
+export type { ClassKey };

package/dist/account/TemplateProps.js

@@ -0,0 +1 @@
+export {};

package/dist/account/i18n/i18n.d.ts

@@ -0,0 +1,15 @@
+import type { GenericI18n_noJsx } from 'keycloakify/account/i18n/noJsx/GenericI18n_noJsx';
+import { type MessageKey as MessageKey_defaultSet } from 'keycloakify/account/i18n/messages_defaultSet/types';
+import type { Snippet } from 'svelte';
+/** INTERNAL: DO NOT IMPORT THIS */
+export type GenericI18n_svelte<MessageKey extends string, LanguageTag extends string> = GenericI18n_noJsx<MessageKey, LanguageTag> & {
+    /**
+     * Same as msgStr but returns a Snippet with the html string rendered as html.
+     */
+    msg: (key: MessageKey_defaultSet, ...args: (string | undefined)[]) => Snippet;
+    /**
+     * Same as advancedMsgStr but returns a Snippet with the html string rendered as html.
+     */
+    advancedMsg: (key: string, ...args: (string | undefined)[]) => Snippet;
+};
+export type I18n = GenericI18n_svelte<MessageKey_defaultSet, string>;

package/dist/account/i18n/i18n.js

@@ -0,0 +1 @@
+import {} from 'keycloakify/account/i18n/messages_defaultSet/types';

package/dist/account/i18n/i18nBuilder.d.ts

@@ -0,0 +1,18 @@
+import type { LanguageTag as LanguageTag_defaultSet, MessageKey as MessageKey_defaultSet } from 'keycloakify/account/i18n/messages_defaultSet/types';
+import { type ReturnTypeOfCreateUseI18n } from './useI18n';
+export type I18nBuilder<ThemeName extends string = never, MessageKey_themeDefined extends string = never, LanguageTag_notInDefaultSet extends string = never, ExcludedMethod extends 'withThemeName' | 'withExtraLanguages' | 'withCustomTranslations' = never> = Omit<{
+    withThemeName: <ThemeName extends string>() => I18nBuilder<ThemeName, MessageKey_themeDefined, LanguageTag_notInDefaultSet, ExcludedMethod | 'withThemeName'>;
+    withExtraLanguages: <LanguageTag_notInDefaultSet extends string>(extraLanguageTranslations: {
+        [LanguageTag in LanguageTag_notInDefaultSet]: {
+            label: string;
+            getMessages: () => Promise<{
+                default: Record<MessageKey_defaultSet, string>;
+            }>;
+        };
+    }) => I18nBuilder<ThemeName, MessageKey_themeDefined, LanguageTag_notInDefaultSet, ExcludedMethod | 'withExtraLanguages'>;
+    withCustomTranslations: <MessageKey_themeDefined extends string>(messagesByLanguageTag_themeDefined: Partial<{
+        [LanguageTag in LanguageTag_defaultSet | LanguageTag_notInDefaultSet]: Record<MessageKey_themeDefined, string | Record<ThemeName, string>>;
+    }>) => I18nBuilder<ThemeName, MessageKey_themeDefined, LanguageTag_notInDefaultSet, ExcludedMethod | 'withCustomTranslations'>;
+    build: () => ReturnTypeOfCreateUseI18n<MessageKey_themeDefined, LanguageTag_notInDefaultSet>;
+}, ExcludedMethod>;
+export declare const i18nBuilder: I18nBuilder<never, never, never, never>;

package/dist/account/i18n/i18nBuilder.js

@@ -0,0 +1,26 @@
+import { createUseI18n } from './useI18n';
+function createI18nBuilder(params) {
+    const i18nBuilder = {
+        withThemeName: () => createI18nBuilder({
+            extraLanguageTranslations: params.extraLanguageTranslations,
+            messagesByLanguageTag_themeDefined: params.messagesByLanguageTag_themeDefined,
+        }),
+        withExtraLanguages: (extraLanguageTranslations) => createI18nBuilder({
+            extraLanguageTranslations,
+            messagesByLanguageTag_themeDefined: params.messagesByLanguageTag_themeDefined,
+        }),
+        withCustomTranslations: (messagesByLanguageTag_themeDefined) => createI18nBuilder({
+            extraLanguageTranslations: params.extraLanguageTranslations,
+            messagesByLanguageTag_themeDefined,
+        }),
+        build: () => createUseI18n({
+            extraLanguageTranslations: params.extraLanguageTranslations,
+            messagesByLanguageTag_themeDefined: params.messagesByLanguageTag_themeDefined,
+        }),
+    };
+    return i18nBuilder;
+}
+export const i18nBuilder = createI18nBuilder({
+    extraLanguageTranslations: {},
+    messagesByLanguageTag_themeDefined: {},
+});

package/dist/account/i18n/index.d.ts

@@ -0,0 +1 @@
+export * from './i18n';

package/dist/account/i18n/index.js

@@ -0,0 +1 @@
+export * from './i18n';

package/dist/account/i18n/useI18n.d.ts

@@ -0,0 +1,28 @@
+import { type LanguageTag as LanguageTag_defaultSet, type MessageKey as MessageKey_defaultSet } from 'keycloakify/account/i18n/messages_defaultSet/types';
+import { type KcContextLike } from 'keycloakify/account/i18n/noJsx/getI18n';
+import type { Readable } from 'svelte/store';
+import type { GenericI18n_svelte } from './i18n';
+export type ReturnTypeOfCreateUseI18n<MessageKey_themeDefined extends string, LanguageTag_notInDefaultSet extends string> = {
+    useI18n: (params: {
+        kcContext: KcContextLike;
+    }) => {
+        i18n: Readable<GenericI18n_svelte<MessageKey_defaultSet | MessageKey_themeDefined, LanguageTag_defaultSet | LanguageTag_notInDefaultSet>>;
+    };
+    ofTypeI18n: GenericI18n_svelte<MessageKey_defaultSet | MessageKey_themeDefined, LanguageTag_defaultSet | LanguageTag_notInDefaultSet>;
+};
+export type { KcContextLike };
+export declare function createUseI18n<ThemeName extends string = string, MessageKey_themeDefined extends string = never, LanguageTag_notInDefaultSet extends string = never>(params: {
+    extraLanguageTranslations: {
+        [languageTag in LanguageTag_notInDefaultSet]: {
+            label: string;
+            getMessages: () => Promise<{
+                default: Record<MessageKey_defaultSet, string>;
+            }>;
+        };
+    };
+    messagesByLanguageTag_themeDefined: Partial<{
+        [languageTag in LanguageTag_defaultSet | LanguageTag_notInDefaultSet]: {
+            [key in MessageKey_themeDefined]: string | Record<ThemeName, string>;
+        };
+    }>;
+}): ReturnTypeOfCreateUseI18n<MessageKey_themeDefined, LanguageTag_notInDefaultSet>;

package/dist/account/i18n/useI18n.js

@@ -0,0 +1,65 @@
+import { useState } from '../../tools/useState';
+import {} from 'keycloakify/account/i18n/messages_defaultSet/types';
+import { createGetI18n } from 'keycloakify/account/i18n/noJsx/getI18n';
+import { createRawSnippet, onMount } from 'svelte';
+import { Reflect } from 'tsafe/Reflect';
+export function createUseI18n(params) {
+    const { extraLanguageTranslations, messagesByLanguageTag_themeDefined } = params;
+    const { withSvelte } = (() => {
+        const cache = new WeakMap();
+        function renderHtmlString(params) {
+            const { htmlString, msgKey } = params;
+            return createRawSnippet(() => ({
+                render: () => `<div data-kc-msg="${msgKey}">${htmlString}</div>`,
+            }));
+        }
+        function withSvelte(i18n_noJsx) {
+            use_cache: {
+                const i18n = cache.get(i18n_noJsx);
+                if (i18n === undefined) {
+                    break use_cache;
+                }
+                return i18n;
+            }
+            const i18n = {
+                ...i18n_noJsx,
+                msg: (msgKey, ...args) => renderHtmlString({ htmlString: i18n_noJsx.msgStr(msgKey, ...args), msgKey }),
+                advancedMsg: (msgKey, ...args) => renderHtmlString({ htmlString: i18n_noJsx.advancedMsgStr(msgKey, ...args), msgKey }),
+            };
+            cache.set(i18n_noJsx, i18n);
+            return i18n;
+        }
+        return { withSvelte };
+    })();
+    add_style: {
+        const attributeName = 'data-kc-i18n';
+        // Check if already exists in head
+        if (document.querySelector(`style[${attributeName}]`) !== null) {
+            break add_style;
+        }
+        const styleElement = document.createElement('style');
+        styleElement.attributes.setNamedItem(document.createAttribute(attributeName));
+        styleElement.textContent = `[data-kc-msg] { display: inline-block; }`;
+        document.head.prepend(styleElement);
+    }
+    const { getI18n } = createGetI18n({ extraLanguageTranslations, messagesByLanguageTag_themeDefined });
+    function useI18n(params) {
+        const { kcContext } = params;
+        const { i18n, prI18n_currentLanguage } = getI18n({ kcContext });
+        const [i18n_toReturn, setI18n_toReturn] = useState(withSvelte(i18n));
+        onMount(() => {
+            let isActive = true;
+            prI18n_currentLanguage?.then((i18n) => {
+                if (!isActive) {
+                    return;
+                }
+                setI18n_toReturn(withSvelte(i18n));
+            });
+            return () => {
+                isActive = false;
+            };
+        });
+        return { i18n: i18n_toReturn };
+    }
+    return { useI18n, ofTypeI18n: Reflect() };
+}

package/dist/account/index.d.ts

@@ -0,0 +1,2 @@
+export type { ExtendKcContext } from './KcContext';
+export { i18nBuilder } from './i18n/i18nBuilder';

package/dist/account/index.js

@@ -0,0 +1 @@
+export { i18nBuilder } from './i18n/i18nBuilder';