@keycloakify/svelte 0.0.1-rc.1

package/src/login/pages/LoginResetPassword.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+  import type { PageProps } from '@keycloakify/svelte/login/pages/PageProps';
+  import { kcSanitize } from 'keycloakify/lib/kcSanitize';
+  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-reset-password.ftl' }>, I18n> = $props();
+
+  const { kcClsx } = getKcClsx({
+    doUseDefaultCss,
+    classes,
+  });
+
+  const { url, realm, auth, messagesPerField } = kcContext;
+
+  const { msg, msgStr } = $i18n;
+</script>
+
+<Template
+  {kcContext}
+  {i18n}
+  {doUseDefaultCss}
+  {classes}
+  displayInfo={true}
+  displayMessage={!messagesPerField.existsError('username')}
+>
+  {#snippet headerNode()}
+    {@render msg('emailForgotTitle')()}
+  {/snippet}
+  {#snippet infoNode()}
+    {#if realm.duplicateEmailsAllowed}
+      {@render msg('emailInstructionUsername')()}
+    {:else}
+      {@render msg('emailInstruction')()}
+    {/if}
+  {/snippet}
+  <form
+    id="kc-reset-password-form"
+    class={kcClsx('kcFormClass')}
+    action={url.loginAction}
+    method="post"
+  >
+    <div class={kcClsx('kcFormGroupClass')}>
+      <div class={kcClsx('kcLabelWrapperClass')}>
+        <label
+          for="username"
+          class={kcClsx('kcLabelClass')}
+        >
+          {#if !realm.loginWithEmailAllowed}
+            {@render msg('username')()}
+          {:else if !realm.registrationEmailAsUsername}
+            {@render msg('usernameOrEmail')()}
+          {:else}
+            {@render msg('email')()}
+          {/if}
+        </label>
+      </div>
+      <div class={kcClsx('kcInputWrapperClass')}>
+        <!-- svelte-ignore a11y_autofocus -->
+        <input
+          type="text"
+          id="username"
+          name="username"
+          class={kcClsx('kcInputClass')}
+          autofocus
+          value={auth.attemptedUsername ?? ''}
+          aria-invalid={messagesPerField.existsError('username')}
+        />
+        {#if messagesPerField.existsError('username')}
+          <span
+            id="input-error-username"
+            class={kcClsx('kcInputErrorMessageClass')}
+            aria-live="polite">{@html kcSanitize(messagesPerField.get('username'))}</span
+          >
+        {/if}
+      </div>
+    </div>
+    <div class={kcClsx('kcFormGroupClass', 'kcFormSettingClass')}>
+      <div
+        id="kc-form-options"
+        class={kcClsx('kcFormOptionsClass')}
+      >
+        <div class={kcClsx('kcFormOptionsWrapperClass')}>
+          <span>
+            <a href={url.loginUrl}>{@render msg('backToLogin')()}</a>
+          </span>
+        </div>
+      </div>
+
+      <div
+        id="kc-form-buttons"
+        class={kcClsx('kcFormButtonsClass')}
+      >
+        <input
+          class={kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass')}
+          type="submit"
+          value={msgStr('doSubmit')}
+        />
+      </div>
+    </div>
+  </form>
+</Template>

package/src/login/pages/LoginUpdatePassword.svelte

@@ -0,0 +1,149 @@
+<script lang="ts">
+  import LogoutOtherSessions from '@keycloakify/svelte/login/components/LogoutOtherSessions.svelte';
+  import PasswordWrapper from '@keycloakify/svelte/login/components/PasswordWrapper.svelte';
+  import type { PageProps } from '@keycloakify/svelte/login/pages/PageProps';
+  import { kcSanitize } from 'keycloakify/lib/kcSanitize';
+  import { getKcClsx } from 'keycloakify/login/lib/kcClsx';
+  import type { I18n } from '../i18n';
+  import type { KcContext } from '../KcContext';
+
+  const {
+    Template,
+    kcContext,
+    i18n,
+    doUseDefaultCss,
+    classes,
+  }: PageProps<Extract<KcContext, { pageId: 'login-update-password.ftl' }>, I18n> = $props();
+
+  const { kcClsx } = getKcClsx({
+    doUseDefaultCss,
+    classes,
+  });
+
+  const { msg, msgStr } = $i18n;
+
+  const { url, messagesPerField, isAppInitiatedAction } = kcContext;
+</script>
+
+<Template
+  {kcContext}
+  {i18n}
+  {doUseDefaultCss}
+  {classes}
+  displayMessage={!messagesPerField.existsError('password', 'password-confirm')}
+>
+  {#snippet headerNode()}
+    {@render msg('updatePasswordTitle')()}
+  {/snippet}
+  <form
+    id="kc-passwd-update-form"
+    class={kcClsx('kcFormClass')}
+    action={url.loginAction}
+    method="post"
+  >
+    <div class={kcClsx('kcFormGroupClass')}>
+      <div class={kcClsx('kcLabelWrapperClass')}>
+        <label
+          for="password-new"
+          class={kcClsx('kcLabelClass')}
+        >
+          {@render msg('passwordNew')()}
+        </label>
+      </div>
+      <div class={kcClsx('kcInputWrapperClass')}>
+        <PasswordWrapper
+          {kcClsx}
+          {i18n}
+          passwordInputId="password-new"
+        >
+          <!-- svelte-ignore a11y_autofocus -->
+          <input
+            type="password"
+            id="password-new"
+            name="password-new"
+            class={kcClsx('kcInputClass')}
+            autofocus
+            autocomplete="new-password"
+            aria-invalid={messagesPerField.existsError('password', 'password-confirm')}
+          />
+        </PasswordWrapper>
+
+        {#if messagesPerField.existsError('password')}
+          <span
+            id="input-error-password"
+            class={kcClsx('kcInputErrorMessageClass')}
+            aria-live="polite">{@html kcSanitize(messagesPerField.get('password'))}</span
+          >
+        {/if}
+      </div>
+    </div>
+
+    <div class={kcClsx('kcFormGroupClass')}>
+      <div class={kcClsx('kcLabelWrapperClass')}>
+        <label
+          for="password-confirm"
+          class={kcClsx('kcLabelClass')}
+        >
+          {@render msg('passwordConfirm')()}
+        </label>
+      </div>
+      <div class={kcClsx('kcInputWrapperClass')}>
+        <PasswordWrapper
+          {kcClsx}
+          {i18n}
+          passwordInputId="password-confirm"
+        >
+          <!-- svelte-ignore a11y_autofocus -->
+          <input
+            type="password"
+            id="password-confirm"
+            name="password-confirm"
+            class={kcClsx('kcInputClass')}
+            autofocus
+            autocomplete="new-password"
+            aria-invalid={messagesPerField.existsError('password', 'password-confirm')}
+          />
+        </PasswordWrapper>
+
+        {#if messagesPerField.existsError('password-confirm')}
+          <span
+            id="input-error-password-confirm"
+            class={kcClsx('kcInputErrorMessageClass')}
+            aria-live="polite">{@html kcSanitize(messagesPerField.get('password-confirm'))}</span
+          >
+        {/if}
+      </div>
+    </div>
+    <div class={kcClsx('kcFormGroupClass')}>
+      <LogoutOtherSessions
+        {kcClsx}
+        {i18n}
+      />
+      <div
+        id="kc-form-buttons"
+        class={kcClsx('kcFormButtonsClass')}
+      >
+        <input
+          class={kcClsx(
+            'kcButtonClass',
+            'kcButtonPrimaryClass',
+            !isAppInitiatedAction && 'kcButtonBlockClass',
+            'kcButtonLargeClass',
+          )}
+          type="submit"
+          value={msgStr('doSubmit')}
+        />
+        {#if isAppInitiatedAction}
+          <button
+            class={kcClsx('kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass')}
+            type="submit"
+            name="cancel-aia"
+            value="true"
+          >
+            {@render msg('doCancel')()}
+          </button>
+        {/if}
+      </div>
+    </div>
+  </form>
+</Template>

package/src/login/pages/LoginUpdateProfile.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+  import type { UserProfileFormFieldsProps } from '@keycloakify/svelte/login/components/UserProfileFormFieldsProps';
+  import type { PageProps } from '@keycloakify/svelte/login/pages/PageProps';
+  import { useState } from '@keycloakify/svelte/tools/useState';
+  import { getKcClsx } from 'keycloakify/login/lib/kcClsx';
+  import type { Component } from 'svelte';
+  import type { I18n } from '../i18n';
+  import type { KcContext } from '../KcContext';
+
+  type LoginUpdateProfileProps = PageProps<Extract<KcContext, { pageId: 'login-update-profile.ftl' }>, I18n> & {
+    UserProfileFormFields: Component<UserProfileFormFieldsProps>;
+    doMakeUserConfirmPassword: boolean;
+  };
+
+  const {
+    Template,
+    kcContext,
+    i18n,
+    doUseDefaultCss,
+    classes,
+    UserProfileFormFields,
+    doMakeUserConfirmPassword,
+  }: LoginUpdateProfileProps = $props();
+
+  const { kcClsx } = getKcClsx({
+    doUseDefaultCss,
+    classes,
+  });
+
+  const { messagesPerField, url, isAppInitiatedAction } = kcContext;
+
+  const { msg, msgStr } = $i18n;
+
+  const [isFormSubmittable, setIsFormSubmittable] = useState(false);
+</script>
+
+<Template
+  {kcContext}
+  {i18n}
+  {doUseDefaultCss}
+  {classes}
+  displayRequiredFields={true}
+  displayMessage={messagesPerField.exists('global')}
+>
+  {#snippet headerNode()}
+    {@render msg('loginProfileTitle')()}
+  {/snippet}
+
+  <form
+    id="kc-update-profile-form"
+    class={kcClsx('kcFormClass')}
+    action={url.loginAction}
+    method="post"
+  >
+    <UserProfileFormFields
+      {kcContext}
+      {i18n}
+      {kcClsx}
+      onIsFormSubmittableValueChange={setIsFormSubmittable}
+      {doMakeUserConfirmPassword}
+    />
+    <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')}
+      >
+        <input
+          disabled={!$isFormSubmittable}
+          class={kcClsx(
+            'kcButtonClass',
+            'kcButtonPrimaryClass',
+            !isAppInitiatedAction && 'kcButtonBlockClass',
+            'kcButtonLargeClass',
+          )}
+          type="submit"
+          value={msgStr('doSubmit')}
+        />
+        {#if isAppInitiatedAction}
+          <button
+            class={kcClsx('kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass')}
+            type="submit"
+            name="cancel-aia"
+            value="true"
+            formnovalidate
+          >
+            {@render msg('doCancel')()}
+          </button>
+        {/if}
+      </div>
+    </div>
+  </form>
+</Template>

package/src/login/pages/LoginUsername.svelte

@@ -0,0 +1,182 @@
+<script lang="ts">
+  import type { PageProps } from '@keycloakify/svelte/login/pages/PageProps';
+  import { useState } from '@keycloakify/svelte/tools/useState';
+  import { getKcClsx } from 'keycloakify/login/lib/kcClsx';
+  import { clsx } from 'keycloakify/tools/clsx';
+  import type { KcContext } from '../KcContext';
+  import type { I18n } from '../i18n';
+
+  const {
+    Template,
+    kcContext,
+    i18n,
+    doUseDefaultCss,
+    classes,
+  }: PageProps<Extract<KcContext, { pageId: 'login-username.ftl' }>, I18n> = $props();
+
+  const { kcClsx } = getKcClsx({
+    doUseDefaultCss,
+    classes,
+  });
+
+  const { social, realm, url, usernameHidden, login, registrationDisabled, messagesPerField } = kcContext;
+
+  const { msg, msgStr } = $i18n;
+
+  const [isLoginButtonDisabled, setIsLoginButtonDisabled] = useState(false);
+</script>
+
+<Template
+  {kcContext}
+  {i18n}
+  {doUseDefaultCss}
+  {classes}
+  displayMessage={!messagesPerField.existsError('username')}
+  displayInfo={realm.password && realm.registrationAllowed && !registrationDisabled}
+>
+  {#snippet headerNode()}
+    {@render msg('doLogIn')()}
+  {/snippet}
+  {#snippet infoNode()}
+    <div id="kc-registration">
+      <span>
+        {@render msg('noAccount')()}
+        <a
+          tabindex={6}
+          href={url.registrationUrl}
+        >
+          {@render msg('doRegister')()}
+        </a>
+      </span>
+    </div>
+  {/snippet}
+  {#snippet socialProvidersNode()}
+    {#if realm.password && social?.providers !== undefined && social.providers.length !== 0}
+      <div
+        id="kc-social-providers"
+        class={kcClsx('kcFormSocialAccountSectionClass')}
+      >
+        <hr />
+        <h2>{@render msg('identity-provider-login-label')()}</h2>
+        <ul
+          class={kcClsx(
+            'kcFormSocialAccountListClass',
+            social.providers.length > 3 && 'kcFormSocialAccountListGridClass',
+          )}
+        >
+          {#each social.providers as p}
+            <li>
+              <a
+                id={`social-${p.alias}`}
+                class={kcClsx(
+                  'kcFormSocialAccountListButtonClass',
+                  social.providers.length > 3 && 'kcFormSocialAccountGridItem',
+                )}
+                type="button"
+                href={p.loginUrl}
+              >
+                {#if p.iconClasses}
+                  <i
+                    class={clsx(kcClsx('kcCommonLogoIdP'), p.iconClasses)}
+                    aria-hidden="true"
+                  ></i>
+                {/if}
+                <span class={clsx(kcClsx('kcFormSocialAccountNameClass'), p.iconClasses && 'kc-social-icon-text')}>
+                  {p.displayName}
+                </span>
+              </a>
+            </li>
+          {/each}
+        </ul>
+      </div>
+    {/if}
+  {/snippet}
+
+  <div id="kc-form">
+    <div id="kc-form-wrapper">
+      {#if realm.password}
+        <form
+          id="kc-form-login"
+          onsubmit={() => {
+            setIsLoginButtonDisabled(true);
+            return true;
+          }}
+          action={url.loginAction}
+          method="post"
+        >
+          {#if !usernameHidden}
+            <div class={kcClsx('kcFormGroupClass')}>
+              <label
+                for="username"
+                class={kcClsx('kcLabelClass')}
+              >
+                {#if !realm.loginWithEmailAllowed}
+                  {@render msg('username')()}
+                {:else if !realm.registrationEmailAsUsername}
+                  {@render msg('usernameOrEmail')()}
+                {:else}
+                  {@render msg('email')()}
+                {/if}
+              </label>
+              <!-- svelte-ignore a11y_autofocus -->
+              <input
+                tabindex={2}
+                id="username"
+                class={kcClsx('kcInputClass')}
+                name="username"
+                value={login.username ?? ''}
+                type="text"
+                autofocus
+                autocomplete="off"
+                aria-invalid={messagesPerField.existsError('username')}
+              />
+              {#if messagesPerField.existsError('username')}
+                <span
+                  id="input-error"
+                  class={kcClsx('kcInputErrorMessageClass')}
+                  aria-live="polite"
+                >
+                  {messagesPerField.getFirstError('username')}
+                </span>
+              {/if}
+            </div>
+          {/if}
+
+          <div class={kcClsx('kcFormGroupClass', 'kcFormSettingClass')}>
+            <div id="kc-form-options">
+              {#if realm.rememberMe && !usernameHidden}
+                <div class="checkbox">
+                  <label>
+                    <input
+                      tabindex={3}
+                      id="rememberMe"
+                      name="rememberMe"
+                      type="checkbox"
+                      checked={!!login.rememberMe}
+                    />{' '}
+                    {@render msg('rememberMe')()}
+                  </label>
+                </div>
+              {/if}
+            </div>
+          </div>
+
+          <div
+            id="kc-form-buttons"
+            class={kcClsx('kcFormGroupClass')}
+          >
+            <input
+              tabindex={4}
+              disabled={$isLoginButtonDisabled}
+              class={kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass')}
+              name="login"
+              id="kc-login"
+              type="submit"
+              value={msgStr('doLogIn')}
+            />
+          </div>
+        </form>
+      {/if}
+    </div>
+  </div>
+</Template>

package/src/login/pages/LoginVerifyEmail.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import type { PageProps } from '@keycloakify/svelte/login/pages/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/src/login/pages/LoginX509Info.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+  import type { PageProps } from '@keycloakify/svelte/login/pages/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>