@keycloakify/svelte 0.0.1-rc.1

package/dist/account/pages/Account.svelte

@@ -0,0 +1,182 @@
+<script lang="ts">
+  import type { PageProps } from './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/dist/account/pages/Account.svelte.d.ts

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

package/dist/account/pages/Applications.svelte

@@ -0,0 +1,173 @@
+<script lang="ts">
+  import type { PageProps } from './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>

package/dist/account/pages/Applications.svelte.d.ts

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

package/dist/account/pages/FederatedIdentity.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+  import type { PageProps } from './PageProps';
+  import type { KcContext } from '../KcContext';
+  import type { I18n } from '../i18n';
+
+  const {
+    kcContext,
+    i18n,
+    doUseDefaultCss,
+    Template,
+    classes,
+  }: PageProps<Extract<KcContext, { pageId: 'federatedIdentity.ftl' }>, I18n> = $props();
+
+  const { url, federatedIdentity, stateChecker } = kcContext;
+  const { msg } = $i18n;
+</script>
+
+<Template
+  {kcContext}
+  {i18n}
+  {doUseDefaultCss}
+  {classes}
+  active="social"
+>
+  <div class="main-layout social">
+    <div class="row">
+      <div class="col-md-10">
+        <h2>{@render msg('federatedIdentitiesHtmlTitle')()}</h2>
+      </div>
+    </div>
+    <div id="federated-identities">
+      {#each federatedIdentity.identities as identity}
+        <div class="row margin-bottom">
+          <div class="col-sm-2 col-md-2">
+            <label
+              for={identity.providerId}
+              class="control-label"
+            >
+              {identity.displayName}
+            </label>
+          </div>
+          <div class="col-sm-5 col-md-5">
+            <input
+              disabled
+              class="form-control"
+              value={identity.userName}
+            />
+          </div>
+          <div class="col-sm-5 col-md-5">
+            {#if identity.connected}
+              {#if federatedIdentity.removeLinkPossible}
+                <form
+                  action={url.socialUrl}
+                  method="post"
+                  class="form-inline"
+                >
+                  <input
+                    type="hidden"
+                    name="stateChecker"
+                    value={stateChecker}
+                  />
+                  <input
+                    type="hidden"
+                    name="action"
+                    value="remove"
+                  />
+                  <input
+                    type="hidden"
+                    name="providerId"
+                    value={identity.providerId}
+                  />
+                  <button
+                    id={`remove-link-${identity.providerId}`}
+                    class="btn btn-default"
+                  >
+                    {@render msg('doRemove')()}
+                  </button>
+                </form>
+              {/if}
+            {:else}
+              <form
+                action={url.socialUrl}
+                method="post"
+                class="form-inline"
+              >
+                <input
+                  type="hidden"
+                  name="stateChecker"
+                  value={stateChecker}
+                />
+                <input
+                  type="hidden"
+                  name="action"
+                  value="add"
+                />
+                <input
+                  type="hidden"
+                  name="providerId"
+                  value={identity.providerId}
+                />
+                <button
+                  id={`add-link-${identity.providerId}`}
+                  class="btn btn-default"
+                >
+                  {@render msg('doAdd')()}
+                </button>
+              </form>
+            {/if}
+          </div>
+        </div>
+      {/each}
+    </div>
+  </div>
+</Template>

package/dist/account/pages/FederatedIdentity.svelte.d.ts

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

package/dist/account/pages/Log.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+  import type { PageProps } from './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: 'log.ftl' }>, I18n> = $props();
+
+  const { kcClsx } = getKcClsx({
+    doUseDefaultCss,
+    classes,
+  });
+
+  const { log } = kcContext;
+
+  const { msg } = $i18n;
+</script>
+
+<Template
+  {kcContext}
+  {i18n}
+  {doUseDefaultCss}
+  {classes}
+  active="log"
+>
+  <div class={kcClsx('kcContentWrapperClass')}>
+    <div class="col-md-10">
+      <h2>{@render msg('accountLogHtmlTitle')()}</h2>
+    </div>
+
+    <table class="table table-striped table-bordered">
+      <thead>
+        <tr>
+          <td>{@render msg('date')()}</td>
+          <td>{@render msg('event')()}</td>
+          <td>{@render msg('ip')()}</td>
+          <td>{@render msg('client')()}</td>
+          <td>{@render msg('details')()}</td>
+        </tr>
+      </thead>
+
+      <tbody>
+        {#each log.events as event}
+          <tr>
+            <td>{event.date ? new Date(event.date).toLocaleString() : ''}</td>
+            <td>{event.event}</td>
+            <td>{event.ipAddress}</td>
+            <td>{event.client || ''}</td>
+            <td>
+              {#each event.details as detail, detailIndex}
+                <span>
+                  {`${detail.key} = ${detail.value}`}
+                  {#if detailIndex < event.details.length - 1},&nbsp;{/if}
+                </span>
+              {/each}
+            </td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </div>
+</Template>

package/dist/account/pages/Log.svelte.d.ts

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

package/dist/account/pages/PageProps.d.ts

@@ -0,0 +1,10 @@
+import { type ClassKey, type TemplateProps } from '../TemplateProps';
+import type { Component } from 'svelte';
+import type { Readable } from 'svelte/store';
+export type PageProps<NarrowedKcContext, I18n> = {
+    Template: Component<TemplateProps<NarrowedKcContext, I18n>>;
+    kcContext: NarrowedKcContext;
+    i18n: Readable<I18n>;
+    doUseDefaultCss: boolean;
+    classes?: Partial<Record<ClassKey, string>>;
+};

package/dist/account/pages/PageProps.js

@@ -0,0 +1 @@
+import {} from '../TemplateProps';