@keycloakify/svelte 0.0.1-rc.1

package/dist/login/pages/LoginVerifyEmail.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import type { PageProps } from './PageProps';
+  import type { KcContext } from '../KcContext';
+  import type { I18n } from '../i18n';
+
+  const {
+    Template,
+    kcContext,
+    i18n,
+    doUseDefaultCss,
+    classes,
+  }: PageProps<Extract<KcContext, { pageId: 'login-verify-email.ftl' }>, I18n> = $props();
+
+  const { msg } = $i18n;
+
+  const { url, user } = kcContext;
+</script>
+
+<Template
+  {kcContext}
+  {i18n}
+  {doUseDefaultCss}
+  {classes}
+  displayInfo={true}
+>
+  {#snippet headerNode()}
+    {@render msg('emailVerifyTitle')()}
+  {/snippet}
+  {#snippet infoNode()}
+    <p class="instruction">
+      {@render msg('emailVerifyInstruction2')()}
+      <br />
+      <a href={url.loginAction}>{@render msg('doClickHere')()}</a>
+      &nbsp;
+      {@render msg('emailVerifyInstruction3')()}
+    </p>
+  {/snippet}
+  <p class="instruction">{@render msg('emailVerifyInstruction1', user?.email ?? '')()}</p>
+</Template>

package/dist/login/pages/LoginVerifyEmail.svelte.d.ts

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

package/dist/login/pages/LoginX509Info.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+  import type { PageProps } from './PageProps';
+  import { getKcClsx } from 'keycloakify/login/lib/kcClsx';
+  import type { KcContext } from '../KcContext';
+  import type { I18n } from '../i18n';
+
+  const {
+    Template,
+    kcContext,
+    i18n,
+    doUseDefaultCss,
+    classes,
+  }: PageProps<Extract<KcContext, { pageId: 'login-x509-info.ftl' }>, I18n> = $props();
+
+  const { kcClsx } = getKcClsx({
+    doUseDefaultCss,
+    classes,
+  });
+
+  const { url, x509 } = kcContext;
+
+  const { msg, msgStr } = $i18n;
+</script>
+
+<Template
+  {kcContext}
+  {i18n}
+  {doUseDefaultCss}
+  {classes}
+>
+  {#snippet headerNode()}
+    {@render msg('doLogIn')()}
+  {/snippet}
+  <form
+    id="kc-x509-login-info"
+    class={kcClsx('kcFormClass')}
+    action={url.loginAction}
+    method="post"
+  >
+    <div class={kcClsx('kcFormGroupClass')}>
+      <div class={kcClsx('kcLabelWrapperClass')}>
+        <label
+          for="certificate_subjectDN"
+          class={kcClsx('kcLabelClass')}
+        >
+          {@render msg('clientCertificate')()}
+        </label>
+      </div>
+      {#if x509.formData.subjectDN}
+        <div class={kcClsx('kcLabelWrapperClass')}>
+          <!-- svelte-ignore a11y_label_has_associated_control -->
+          <label
+            id="certificate_subjectDN"
+            class={kcClsx('kcLabelClass')}
+          >
+            {x509.formData.subjectDN}
+          </label>
+        </div>
+      {:else}
+        <div class={kcClsx('kcLabelWrapperClass')}>
+          <label
+            id="certificate_subjectDN"
+            class={kcClsx('kcLabelClass')}
+          >
+            {@render msg('noCertificate')()}
+          </label>
+        </div>
+      {/if}
+    </div>
+    <div class={kcClsx('kcFormGroupClass')}>
+      {#if x509.formData.isUserEnabled}
+        <div class={kcClsx('kcLabelWrapperClass')}>
+          <label
+            for="username"
+            class={kcClsx('kcLabelClass')}
+          >
+            {msg('doX509Login')}
+          </label>
+        </div>
+        <div class={kcClsx('kcLabelWrapperClass')}>
+          <!-- svelte-ignore a11y_label_has_associated_control -->
+          <label
+            id="username"
+            class={kcClsx('kcLabelClass')}
+          >
+            {x509.formData.username}
+          </label>
+        </div>
+      {/if}
+    </div>
+    <div class={kcClsx('kcFormGroupClass')}>
+      <div
+        id="kc-form-options"
+        class={kcClsx('kcFormOptionsClass')}
+      >
+        <div class={kcClsx('kcFormOptionsWrapperClass')}></div>
+      </div>
+      <div
+        id="kc-form-buttons"
+        class={kcClsx('kcFormButtonsClass')}
+      >
+        <div class={kcClsx('kcFormButtonsWrapperClass')}>
+          <input
+            class={kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass')}
+            name="login"
+            id="kc-login"
+            type="submit"
+            value={msgStr('doContinue')}
+          />
+          {#if x509.formData.isUserEnabled}
+            <input
+              class={kcClsx('kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass')}
+              name="cancel"
+              id="kc-cancel"
+              type="submit"
+              value={msgStr('doIgnore')}
+            />
+          {/if}
+        </div>
+      </div>
+    </div>
+  </form>
+</Template>

package/dist/login/pages/LoginX509Info.svelte.d.ts

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

package/dist/login/pages/LogoutConfirm.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+  import type { PageProps } from './PageProps';
+  import { getKcClsx } from 'keycloakify/login/lib/kcClsx';
+  import type { KcContext } from '../KcContext';
+  import type { I18n } from '../i18n';
+
+  const {
+    Template,
+    kcContext,
+    i18n,
+    doUseDefaultCss,
+    classes,
+  }: PageProps<Extract<KcContext, { pageId: 'logout-confirm.ftl' }>, I18n> = $props();
+
+  const { kcClsx } = getKcClsx({
+    doUseDefaultCss,
+    classes,
+  });
+
+  const { url, client, logoutConfirm } = kcContext;
+
+  const { msg, msgStr } = $i18n;
+</script>
+
+<Template
+  {kcContext}
+  {i18n}
+  {doUseDefaultCss}
+  {classes}
+>
+  {#snippet headerNode()}
+    {@render msg('logoutConfirmTitle')()}
+  {/snippet}
+
+  <div
+    id="kc-logout-confirm"
+    class="content-area"
+  >
+    <p class="instruction">{@render msg('logoutConfirmHeader')()}</p>
+    <form
+      class="form-actions"
+      action={url.logoutConfirmAction}
+      method="POST"
+    >
+      <input
+        type="hidden"
+        name="session_code"
+        value={logoutConfirm.code}
+      />
+      <div class={kcClsx('kcFormGroupClass')}>
+        <div id="kc-form-options">
+          <div class={kcClsx('kcFormOptionsWrapperClass')}></div>
+        </div>
+        <div
+          id="kc-form-buttons"
+          class={kcClsx('kcFormGroupClass')}
+        >
+          <input
+            tabindex={4}
+            class={kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass')}
+            name="confirmLogout"
+            id="kc-logout"
+            type="submit"
+            value={msgStr('doLogout')}
+          />
+        </div>
+      </div>
+    </form>
+    <div id="kc-info-message">
+      {#if !logoutConfirm.skipLink && client.baseUrl}
+        <p>
+          <a href={client.baseUrl}>{@render msg('backToApplication')()}</a>
+        </p>
+      {/if}
+    </div>
+  </div>
+</Template>

package/dist/login/pages/LogoutConfirm.svelte.d.ts

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

package/dist/login/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/login/pages/PageProps.js

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

package/dist/login/pages/Register.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+  import type { UserProfileFormFieldsProps } from '../components/UserProfileFormFieldsProps';
+  import type { PageProps } from './PageProps';
+  import { useState } from '../../tools/useState';
+  import { getKcClsx } from 'keycloakify/login/lib/kcClsx';
+  import { clsx } from 'keycloakify/tools/clsx';
+  import type { Component } from 'svelte';
+  import TermsAcceptance from '../components/TermsAcceptance.svelte';
+  import type { I18n } from '../i18n';
+  import type { KcContext } from '../KcContext';
+
+  type RegisterProps = PageProps<Extract<KcContext, { pageId: 'register.ftl' }>, I18n> & {
+    UserProfileFormFields: Component<UserProfileFormFieldsProps>;
+    doMakeUserConfirmPassword: boolean;
+  };
+  const props: RegisterProps = $props();
+  const { kcContext, i18n, doUseDefaultCss, Template, classes, UserProfileFormFields, doMakeUserConfirmPassword } =
+    props;
+  const { kcClsx } = getKcClsx({
+    doUseDefaultCss,
+    classes,
+  });
+
+  const {
+    messageHeader,
+    url,
+    messagesPerField,
+    recaptchaRequired,
+    recaptchaVisible,
+    recaptchaSiteKey,
+    recaptchaAction,
+    termsAcceptanceRequired,
+  } = kcContext;
+
+  const { msg, msgStr, advancedMsg } = $i18n;
+
+  const [isFormSubmittable, setIsFormSubmittable] = useState(false);
+  const [areTermsAccepted, setAreTermsAccepted] = useState(false);
+</script>
+
+<Template
+  {kcContext}
+  {i18n}
+  {doUseDefaultCss}
+  {classes}
+  displayMessage={messagesPerField.exists('global')}
+  displayRequiredFields={true}
+>
+  {#snippet headerNode()}
+    {#if messageHeader !== undefined}
+      {@render advancedMsg(messageHeader)()}
+    {:else}
+      {@render msg('registerTitle')()}
+    {/if}
+  {/snippet}
+  <form
+    id="kc-register-form"
+    class={kcClsx('kcFormClass')}
+    action={url.registrationAction}
+    method="post"
+  >
+    <UserProfileFormFields
+      {kcContext}
+      {i18n}
+      {kcClsx}
+      onIsFormSubmittableValueChange={setIsFormSubmittable}
+      {doMakeUserConfirmPassword}
+    />
+    {#if termsAcceptanceRequired}
+      <TermsAcceptance
+        {i18n}
+        {kcClsx}
+        {messagesPerField}
+        areTermsAccepted={$areTermsAccepted}
+        onAreTermsAcceptedValueChange={setAreTermsAccepted}
+      />
+    {/if}
+    {#if recaptchaRequired && (recaptchaVisible || recaptchaAction === undefined)}
+      <div class="form-group">
+        <div class={kcClsx('kcInputWrapperClass')}>
+          <div
+            class="g-recaptcha"
+            data-size="compact"
+            data-sitekey={recaptchaSiteKey}
+            data-action={recaptchaAction}
+          ></div>
+        </div>
+      </div>
+    {/if}
+    <div class={kcClsx('kcFormGroupClass')}>
+      <div
+        id="kc-form-options"
+        class={kcClsx('kcFormOptionsClass')}
+      >
+        <div class={kcClsx('kcFormOptionsWrapperClass')}>
+          <span>
+            <a href={url.loginUrl}>{@render msg('backToLogin')()}</a>
+          </span>
+        </div>
+      </div>
+      {#if recaptchaRequired && !recaptchaVisible && recaptchaAction !== undefined}
+        <div
+          id="kc-form-buttons"
+          class={kcClsx('kcFormButtonsClass')}
+        >
+          <button
+            class={clsx(
+              kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass'),
+              'g-recaptcha',
+            )}
+            data-sitekey={recaptchaSiteKey}
+            data-callback={() => {
+              (document.getElementById('kc-register-form') as HTMLFormElement).submit();
+            }}
+            data-action={recaptchaAction}
+            type="submit"
+          >
+            {@render msg('doRegister')()}
+          </button>
+        </div>
+      {:else}
+        <div
+          id="kc-form-buttons"
+          class={kcClsx('kcFormButtonsClass')}
+        >
+          <input
+            disabled={!$isFormSubmittable || (termsAcceptanceRequired && !$areTermsAccepted)}
+            class={kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass')}
+            type="submit"
+            value={msgStr('doRegister')}
+          />
+        </div>
+      {/if}
+    </div>
+  </form>
+</Template>

package/dist/login/pages/Register.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { UserProfileFormFieldsProps } from '../components/UserProfileFormFieldsProps';
+import type { PageProps } from './PageProps';
+import type { Component } from 'svelte';
+import type { I18n } from '../i18n';
+import type { KcContext } from '../KcContext';
+declare const Register: Component<PageProps<KcContext.Register, I18n> & {
+    UserProfileFormFields: Component<UserProfileFormFieldsProps>;
+    doMakeUserConfirmPassword: boolean;
+}, {}, "">;
+type Register = ReturnType<typeof Register>;
+export default Register;

package/dist/login/pages/SamlPostForm.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  import type { PageProps } from './PageProps';
+  import type { KcContext } from '../KcContext';
+  import type { I18n } from '../i18n';
+
+  const {
+    Template,
+    kcContext,
+    i18n,
+    doUseDefaultCss,
+    classes,
+  }: PageProps<Extract<KcContext, { pageId: 'saml-post-form.ftl' }>, I18n> = $props();
+
+  const { msgStr, msg } = $i18n;
+
+  const { samlPost } = kcContext;
+
+  let htmlFormElement: HTMLFormElement | null = $state(null);
+
+  $effect(() => {
+    if (htmlFormElement === null) {
+      return;
+    }
+
+    // Storybook
+    if (samlPost.url === '#') {
+      alert('In a real Keycloak the user would be redirected immediately');
+      return;
+    }
+
+    htmlFormElement.submit();
+  });
+</script>
+
+<Template
+  {kcContext}
+  {i18n}
+  {doUseDefaultCss}
+  {classes}
+>
+  {#snippet headerNode()}
+    {@render msg('saml.post-form.title')()}
+  {/snippet}
+  <p>{@render msg('saml.post-form.message')()}</p>
+  <form
+    name="saml-post-binding"
+    method="post"
+    action={samlPost.url}
+    bind:this={htmlFormElement}
+  >
+    {#if samlPost.SAMLRequest}
+      <input
+        type="hidden"
+        name="SAMLRequest"
+        value={samlPost.SAMLRequest}
+      />
+    {/if}
+    {#if samlPost.SAMLResponse}
+      <input
+        type="hidden"
+        name="SAMLResponse"
+        value={samlPost.SAMLResponse}
+      />
+    {/if}
+    {#if samlPost.relayState}
+      <input
+        type="hidden"
+        name="RelayState"
+        value={samlPost.relayState}
+      />
+    {/if}
+    <noscript>
+      <p>{@render msg('saml.post-form.js-disabled')()}</p>
+      <input
+        type="submit"
+        value={msgStr('doContinue')}
+      />
+    </noscript>
+  </form>
+</Template>

package/dist/login/pages/SamlPostForm.svelte.d.ts

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

package/dist/login/pages/SelectAuthenticator.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import type { PageProps } from './PageProps';
+  import { getKcClsx } from 'keycloakify/login/lib/kcClsx';
+  import type { KcContext } from '../KcContext';
+  import type { I18n } from '../i18n';
+
+  const {
+    Template,
+    kcContext,
+    i18n,
+    doUseDefaultCss,
+    classes,
+  }: PageProps<Extract<KcContext, { pageId: 'select-authenticator.ftl' }>, I18n> = $props();
+  const { url, auth } = kcContext;
+
+  const { kcClsx } = getKcClsx({ doUseDefaultCss, classes });
+  const { msg, advancedMsg } = $i18n;
+</script>
+
+<Template
+  {kcContext}
+  {i18n}
+  {doUseDefaultCss}
+  {classes}
+  displayMessage={false}
+>
+  {#snippet headerNode()}
+    {@render msg('loginChooseAuthenticator')()}
+  {/snippet}
+  <form
+    id="kc-select-credential-form"
+    class={kcClsx('kcFormClass')}
+    action={url.loginAction}
+    method="post"
+  >
+    <div class={kcClsx('kcSelectAuthListClass')}>
+      {#each auth.authenticationSelections as authenticationSelection}
+        <button
+          class={kcClsx('kcSelectAuthListItemClass')}
+          type="submit"
+          name="authenticationExecution"
+          value={authenticationSelection.authExecId}
+        >
+          <div class={kcClsx('kcSelectAuthListItemIconClass')}>
+            <i class={kcClsx('kcSelectAuthListItemIconPropertyClass', authenticationSelection.iconCssClass)}></i>
+          </div>
+          <div class={kcClsx('kcSelectAuthListItemBodyClass')}>
+            <div class={kcClsx('kcSelectAuthListItemHeadingClass')}>
+              {@render advancedMsg(authenticationSelection.displayName)()}
+            </div>
+            <div class={kcClsx('kcSelectAuthListItemDescriptionClass')}>
+              {@render advancedMsg(authenticationSelection.helpText)()}
+            </div>
+          </div>
+          <div class={kcClsx('kcSelectAuthListItemFillClass')}></div>
+          <div class={kcClsx('kcSelectAuthListItemArrowClass')}>
+            <i class={kcClsx('kcSelectAuthListItemArrowIconClass')}></i>
+          </div>
+        </button>
+      {/each}
+    </div>
+  </form>
+</Template>

package/dist/login/pages/SelectAuthenticator.svelte.d.ts

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

package/dist/login/pages/Terms.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import type { PageProps } from './PageProps';
+  import { getKcClsx } from 'keycloakify/login/lib/kcClsx';
+  import type { KcContext } from '../KcContext';
+  import type { I18n } from '../i18n';
+
+  const {
+    Template,
+    kcContext,
+    i18n,
+    doUseDefaultCss,
+    classes,
+  }: PageProps<Extract<KcContext, { pageId: 'terms.ftl' }>, I18n> = $props();
+
+  const { kcClsx } = getKcClsx({
+    doUseDefaultCss,
+    classes,
+  });
+
+  const { msg, msgStr } = $i18n;
+
+  const { url } = kcContext;
+</script>
+
+<Template
+  {kcContext}
+  {i18n}
+  {doUseDefaultCss}
+  {classes}
+  displayMessage={false}
+>
+  {#snippet headerNode()}
+    {@render msg('termsTitle')()}
+  {/snippet}
+  <div id="kc-terms-text">{msg('termsText')}</div>
+  <form
+    class="form-actions"
+    action={url.loginAction}
+    method="POST"
+  >
+    <input
+      class={kcClsx('kcButtonClass', 'kcButtonClass', 'kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass')}
+      name="accept"
+      id="kc-accept"
+      type="submit"
+      value={msgStr('doAccept')}
+    />
+    <input
+      class={kcClsx('kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass')}
+      name="cancel"
+      id="kc-decline"
+      type="submit"
+      value={msgStr('doDecline')}
+    />
+  </form>
+  <div class="clearfix"></div>
+</Template>

package/dist/login/pages/Terms.svelte.d.ts

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