@keycloakify/svelte 0.0.1-rc.1

package/src/account/Template.useInitialize.ts

@@ -0,0 +1,32 @@
+import { useInsertLinkTags } from '@keycloakify/svelte/tools/useInsertLinkTags';
+import { assert } from 'keycloakify/tools/assert';
+import type { KcContext } from './KcContext';
+
+export type KcContextLike = {
+  url: {
+    resourcesCommonPath: string;
+    resourcesPath: string;
+  };
+};
+
+assert<keyof KcContextLike extends keyof KcContext ? true : false>();
+assert<KcContext extends KcContextLike ? true : false>();
+
+export function useInitialize(params: { kcContext: KcContextLike; doUseDefaultCss: boolean }) {
+  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/src/account/TemplateProps.ts

@@ -0,0 +1,15 @@
+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/src/account/i18n/i18n.ts

@@ -0,0 +1,18 @@
+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/src/account/i18n/i18nBuilder.ts

@@ -0,0 +1,101 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type {
+  LanguageTag as LanguageTag_defaultSet,
+  MessageKey as MessageKey_defaultSet,
+} from 'keycloakify/account/i18n/messages_defaultSet/types';
+import { type ReturnTypeOfCreateUseI18n, createUseI18n } 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
+>;
+
+function createI18nBuilder<
+  ThemeName extends string = never,
+  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]: Record<
+      MessageKey_themeDefined,
+      string | Record<ThemeName, string>
+    >;
+  }>;
+}): I18nBuilder<ThemeName, MessageKey_themeDefined, LanguageTag_notInDefaultSet> {
+  const i18nBuilder: I18nBuilder<ThemeName, MessageKey_themeDefined, LanguageTag_notInDefaultSet> = {
+    withThemeName: () =>
+      createI18nBuilder({
+        extraLanguageTranslations: params.extraLanguageTranslations,
+        messagesByLanguageTag_themeDefined: params.messagesByLanguageTag_themeDefined as any,
+      }),
+    withExtraLanguages: (extraLanguageTranslations) =>
+      createI18nBuilder({
+        extraLanguageTranslations,
+        messagesByLanguageTag_themeDefined: params.messagesByLanguageTag_themeDefined as any,
+      }),
+    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/src/account/i18n/index.ts

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

package/src/account/i18n/useI18n.ts

@@ -0,0 +1,140 @@
+import { useState } from '@keycloakify/svelte/tools/useState';
+import {
+  type LanguageTag as LanguageTag_defaultSet,
+  type MessageKey as MessageKey_defaultSet,
+} from 'keycloakify/account/i18n/messages_defaultSet/types';
+import type { GenericI18n_noJsx } from 'keycloakify/account/i18n/noJsx/GenericI18n_noJsx';
+import { createGetI18n, type KcContextLike } from 'keycloakify/account/i18n/noJsx/getI18n';
+import { createRawSnippet, onMount, type Snippet } from 'svelte';
+import type { Readable } from 'svelte/store';
+import { Reflect } from 'tsafe/Reflect';
+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 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> {
+  const { extraLanguageTranslations, messagesByLanguageTag_themeDefined } = params;
+
+  type LanguageTag = LanguageTag_defaultSet | LanguageTag_notInDefaultSet;
+
+  type MessageKey = MessageKey_defaultSet | MessageKey_themeDefined;
+  type I18n = GenericI18n_svelte<MessageKey, LanguageTag>;
+  type Result = { i18n: Readable<I18n> };
+
+  const { withSvelte } = (() => {
+    const cache = new WeakMap<
+      GenericI18n_noJsx<MessageKey, LanguageTag>,
+      GenericI18n_svelte<MessageKey, LanguageTag>
+    >();
+
+    function renderHtmlString(params: { htmlString: string; msgKey: string }): Snippet {
+      const { htmlString, msgKey } = params;
+      return createRawSnippet(() => ({
+        render: () => `<div data-kc-msg="${msgKey}">${htmlString}</div>`,
+      }));
+    }
+
+    function withSvelte(i18n_noJsx: GenericI18n_noJsx<MessageKey, LanguageTag>): I18n {
+      use_cache: {
+        const i18n = cache.get(i18n_noJsx);
+
+        if (i18n === undefined) {
+          break use_cache;
+        }
+
+        return i18n;
+      }
+
+      const i18n: 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: { kcContext: KcContextLike }): Result {
+    const { kcContext } = params;
+
+    const { i18n, prI18n_currentLanguage } = getI18n({ kcContext });
+
+    const [i18n_toReturn, setI18n_toReturn] = useState<I18n>(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<I18n>() };
+}

package/src/account/index.ts

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

package/src/account/pages/Account.svelte

@@ -0,0 +1,182 @@
+<script lang="ts">
+  import type { PageProps } from '@keycloakify/svelte/account/pages/PageProps';
+  import { getKcClsx } from 'keycloakify/account/lib/kcClsx';
+  import { clsx } from 'keycloakify/tools/clsx';
+  import type { I18n } from '../i18n';
+  import type { KcContext } from '../KcContext';
+
+  const {
+    kcContext,
+    i18n,
+    doUseDefaultCss,
+    Template,
+    ...props
+  }: PageProps<Extract<KcContext, { pageId: 'account.ftl' }>, I18n> = $props();
+
+  const classes = {
+    ...props.classes,
+    kcBodyClass: clsx(props.classes?.kcBodyClass, 'user'),
+  };
+
+  const { kcClsx } = getKcClsx({
+    doUseDefaultCss,
+    classes,
+  });
+
+  const { url, realm, messagesPerField, stateChecker, account, referrer } = kcContext;
+
+  const { msg } = $i18n;
+</script>
+
+<Template
+  {kcContext}
+  {i18n}
+  {doUseDefaultCss}
+  {classes}
+  active="account"
+>
+  <div class="row">
+    <div class="col-md-10">
+      <h2>{@render msg('editAccountHtmlTitle')()}</h2>
+    </div>
+    <div class="col-md-2 subtitle">
+      <span class="subtitle">
+        <span class="required">*</span>
+        {@render msg('requiredFields')()}
+      </span>
+    </div>
+  </div>
+
+  <form
+    action={url.accountUrl}
+    class="form-horizontal"
+    method="post"
+  >
+    <input
+      type="hidden"
+      id="stateChecker"
+      name="stateChecker"
+      value={stateChecker}
+    />
+
+    {#if !realm.registrationEmailAsUsername}
+      <div class={clsx('form-group', messagesPerField.printIfExists('username', 'has-error'))}>
+        <div class="col-sm-2 col-md-2">
+          <label
+            for="username"
+            class="control-label"
+          >
+            {@render msg('username')()}
+          </label>
+          {#if realm.editUsernameAllowed}<span class="required">*</span>{/if}
+        </div>
+
+        <div class="col-sm-10 col-md-10">
+          <input
+            type="text"
+            class="form-control"
+            id="username"
+            name="username"
+            disabled={!realm.editUsernameAllowed}
+            value={account.username ?? ''}
+          />
+        </div>
+      </div>
+    {/if}
+
+    <div class={clsx('form-group', messagesPerField.printIfExists('email', 'has-error'))}>
+      <div class="col-sm-2 col-md-2">
+        <label
+          for="email"
+          class="control-label"
+        >
+          {@render msg('email')()}
+        </label>{' '}
+        <span class="required">*</span>
+      </div>
+
+      <div class="col-sm-10 col-md-10">
+        <!-- svelte-ignore a11y_autofocus -->
+        <input
+          type="text"
+          class="form-control"
+          id="email"
+          name="email"
+          autofocus
+          value={account.email ?? ''}
+        />
+      </div>
+    </div>
+
+    <div class={clsx('form-group', messagesPerField.printIfExists('firstName', 'has-error'))}>
+      <div class="col-sm-2 col-md-2">
+        <label
+          for="firstName"
+          class="control-label"
+        >
+          {@render msg('firstName')()}
+        </label>{' '}
+        <span class="required">*</span>
+      </div>
+
+      <div class="col-sm-10 col-md-10">
+        <input
+          type="text"
+          class="form-control"
+          id="firstName"
+          name="firstName"
+          value={account.firstName ?? ''}
+        />
+      </div>
+    </div>
+
+    <div class={clsx('form-group', messagesPerField.printIfExists('lastName', 'has-error'))}>
+      <div class="col-sm-2 col-md-2">
+        <label
+          for="lastName"
+          class="control-label"
+        >
+          {@render msg('lastName')()}
+        </label>{' '}
+        <span class="required">*</span>
+      </div>
+
+      <div class="col-sm-10 col-md-10">
+        <input
+          type="text"
+          class="form-control"
+          id="lastName"
+          name="lastName"
+          value={account.lastName ?? ''}
+        />
+      </div>
+    </div>
+
+    <div class="form-group">
+      <div
+        id="kc-form-buttons"
+        class="col-md-offset-2 col-md-10 submit"
+      >
+        <div>
+          {#if referrer !== undefined}<a href={referrer?.url}>{@render msg('backToApplication')()}</a>{/if}
+          <button
+            type="submit"
+            class={kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass')}
+            name="submitAction"
+            value="Save"
+          >
+            {@render msg('doSave')()}
+          </button>
+          <button
+            type="submit"
+            class={kcClsx('kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass')}
+            name="submitAction"
+            value="Cancel"
+          >
+            {@render msg('doCancel')()}
+          </button>
+        </div>
+      </div>
+    </div>
+  </form>
+</Template>

package/src/account/pages/Applications.svelte

@@ -0,0 +1,173 @@
+<script lang="ts">
+  import type { PageProps } from '@keycloakify/svelte/account/pages/PageProps';
+  import type { KcContext } from '../KcContext';
+  import type { I18n } from '../i18n';
+  import { getKcClsx } from 'keycloakify/account/lib/kcClsx';
+
+  const {
+    kcContext,
+    i18n,
+    doUseDefaultCss,
+    Template,
+    classes,
+  }: PageProps<Extract<KcContext, { pageId: 'applications.ftl' }>, I18n> = $props();
+
+  const { kcClsx } = getKcClsx({
+    doUseDefaultCss,
+    classes,
+  });
+
+  const {
+    url,
+    applications: { applications },
+    stateChecker,
+  } = kcContext;
+
+  const { msg, advancedMsg } = $i18n;
+
+  function isArrayWithEmptyObject(variable: unknown): boolean {
+    return (
+      Array.isArray(variable) &&
+      variable.length === 1 &&
+      typeof variable[0] === 'object' &&
+      Object.keys(variable[0]).length === 0
+    );
+  }
+</script>
+
+<Template
+  {kcContext}
+  {i18n}
+  {doUseDefaultCss}
+  {classes}
+  active="applications"
+>
+  <div class="row">
+    <div class="col-md-10">
+      <h2>{@render msg('applicationsHtmlTitle')()}</h2>
+    </div>
+
+    <form
+      action={url.applicationsUrl}
+      method="post"
+    >
+      <input
+        type="hidden"
+        id="stateChecker"
+        name="stateChecker"
+        value={stateChecker}
+      />
+      <input
+        type="hidden"
+        id="referrer"
+        name="referrer"
+        value={stateChecker}
+      />
+
+      <table class="table table-striped table-bordered">
+        <thead>
+          <tr>
+            <td>{@render msg('application')()}</td>
+            <td>{@render msg('availableRoles')()}</td>
+            <td>{@render msg('grantedPermissions')()}</td>
+            <td>{@render msg('additionalGrants')()}</td>
+            <td>{@render msg('action')()}</td>
+          </tr>
+        </thead>
+
+        <tbody>
+          {#each applications as application}
+            <tr>
+              <td>
+                {#if application.effectiveUrl}
+                  <a href={application.effectiveUrl}>
+                    {#if application.client.name}
+                      {@render advancedMsg(application.client.name)()}
+                    {:else}
+                      {application.client.clientId}
+                    {/if}
+                  </a>
+                {/if}
+                {#if !application.effectiveUrl && application.client.name}
+                  {@render advancedMsg(application.client.name)()}
+                {:else}
+                  {application.client.clientId}
+                {/if}
+              </td>
+
+              <td>
+                {#if !isArrayWithEmptyObject(application.realmRolesAvailable)}
+                  {#each application.realmRolesAvailable as role, index}
+                    <span>
+                      {@render (role.description ? advancedMsg(role.description) : advancedMsg(role.name))()}
+                      {#if index < application.realmRolesAvailable.length - 1},&nbsp;{/if}
+                    </span>
+                  {/each}
+                  {#if application.resourceRolesAvailable}
+                    {#each Object.keys(application.resourceRolesAvailable) as resource}
+                      <span>
+                        {#if !isArrayWithEmptyObject(application.realmRolesAvailable)},&nbsp;{/if}
+                        {#each application.resourceRolesAvailable[resource] as clientRole}
+                          <span>
+                            {@render (clientRole.roleDescription
+                              ? advancedMsg(clientRole.roleDescription)
+                              : advancedMsg(clientRole.roleName))()}{' '}
+                            {@render msg('inResource')()}{' '}
+                            <strong>
+                              {#if clientRole.clientName}
+                                {@render advancedMsg(clientRole.clientName)()}
+                              {:else}
+                                {clientRole.clientId}
+                              {/if}
+                            </strong>
+                            {#if clientRole !== application.resourceRolesAvailable[resource][application.resourceRolesAvailable[resource].length - 1]},&nbsp;{/if}
+                          </span>
+                        {/each}
+                      </span>
+                    {/each}
+                  {/if}
+                {/if}
+              </td>
+
+              <td>
+                {#if application.client.consentRequired}
+                  {#each application.clientScopesGranted as claim}
+                    <span>
+                      {@render advancedMsg(claim)()}
+                      {#if claim !== application.clientScopesGranted[application.clientScopesGranted.length - 1]},&nbsp;{/if}
+                    </span>
+                  {/each}
+                {:else}
+                  <strong>{@render msg('fullAccess')()}</strong>
+                {/if}
+              </td>
+
+              <td>
+                {#each application.additionalGrants as grant}
+                  <span>
+                    {@render advancedMsg(grant)()}
+                    {#if grant !== application.additionalGrants[application.additionalGrants.length - 1]},&nbsp;{/if}
+                  </span>
+                {/each}
+              </td>
+
+              <td>
+                {#if (application.client.consentRequired && application.clientScopesGranted.length > 0) || application.additionalGrants.length > 0}
+                  <button
+                    type="submit"
+                    class={kcClsx('kcButtonPrimaryClass', 'kcButtonClass')}
+                    id={`revoke-${application.client.clientId}`}
+                    name="clientId"
+                    value={application.client.id}
+                  >
+                    {@render msg('revoke')()}
+                  </button>
+                {/if}
+              </td>
+            </tr>
+          {/each}
+        </tbody>
+      </table>
+    </form>
+  </div>
+</Template>