@keycloakify/svelte 0.0.1-rc.6 → 0.1.0

package/keycloakify-svelte/login/pages/DeleteAccountConfirm.svelte.d.ts

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

package/keycloakify-svelte/login/pages/DeleteCredential.svelte

@@ -0,0 +1,58 @@
+<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: 'delete-credential.ftl' }>, I18n> = $props();
+
+  const { msgStr, msg } = $i18n;
+
+  const { kcClsx } = getKcClsx({
+    doUseDefaultCss,
+    classes,
+  });
+
+  const { url, credentialLabel } = kcContext;
+</script>
+
+<Template
+  {kcContext}
+  {i18n}
+  {doUseDefaultCss}
+  {classes}
+  displayMessage={false}
+>
+  {#snippet headerNode()}
+    {@render msg('deleteCredentialTitle', credentialLabel)()}
+  {/snippet}
+
+  <div id="kc-delete-text">{@render msg('deleteCredentialMessage', credentialLabel)()}</div>
+  <form
+    class="form-actions"
+    action={url.loginAction}
+    method="POST"
+  >
+    <input
+      class={kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass')}
+      name="accept"
+      id="kc-accept"
+      type="submit"
+      value={msgStr('doConfirmDelete')}
+    />
+    <input
+      class={kcClsx('kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass')}
+      name="cancel-aia"
+      value={msgStr('doCancel')}
+      id="kc-decline"
+      type="submit"
+    />
+  </form>
+  <div class="clearfix"></div>
+</Template>

package/keycloakify-svelte/login/pages/DeleteCredential.svelte.d.ts

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

package/keycloakify-svelte/login/pages/Error.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import type { PageProps } from './PageProps';
+  import type { KcContext } from '../KcContext';
+  import type { I18n } from '../i18n';
+  import { kcSanitize } from 'keycloakify/lib/kcSanitize';
+
+  const {
+    Template,
+    kcContext,
+    i18n,
+    doUseDefaultCss,
+    classes,
+  }: PageProps<Extract<KcContext, { pageId: 'error.ftl' }>, I18n> = $props();
+
+  const { message, client, skipLink } = kcContext;
+
+  const { msg } = $i18n;
+</script>
+
+<Template
+  {kcContext}
+  {i18n}
+  {doUseDefaultCss}
+  {classes}
+  displayMessage={false}
+>
+  {#snippet headerNode()}
+    {@render msg('errorTitle')()}
+  {/snippet}
+  <div id="kc-error-message">
+    <p class="instruction">{@html kcSanitize(message.summary)}</p>
+    {#if !skipLink && client !== undefined && client.baseUrl !== undefined}
+      <p>
+        <a
+          id="backToApplication"
+          href={client.baseUrl}
+        >
+          {@render msg('backToApplication')()}
+        </a>
+      </p>
+    {/if}
+  </div>
+</Template>

package/keycloakify-svelte/login/pages/Error.svelte.d.ts

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

package/keycloakify-svelte/login/pages/FrontchannelLogout.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import type { PageProps } from './PageProps';
+  import { onMount } from 'svelte';
+  import type { KcContext } from '../KcContext';
+  import type { I18n } from '../i18n';
+
+  const {
+    Template,
+    kcContext,
+    i18n,
+    doUseDefaultCss,
+    classes,
+  }: PageProps<Extract<KcContext, { pageId: 'frontchannel-logout.ftl' }>, I18n> = $props();
+
+  const { logout } = kcContext;
+
+  const { msg, msgStr } = $i18n;
+
+  onMount(() => {
+    if (logout.logoutRedirectUri) {
+      window.location.replace(logout.logoutRedirectUri);
+    }
+  });
+</script>
+
+<Template
+  {kcContext}
+  {i18n}
+  {doUseDefaultCss}
+  {classes}
+  documentTitle={msgStr('frontchannel-logout.title')}
+>
+  {#snippet headerNode()}
+    {@render msg('frontchannel-logout.title')()}
+  {/snippet}
+  <p>{@render msg('frontchannel-logout.message')()}</p>
+  <ul>
+    {#each logout.clients as client}
+      <li>
+        {client.name}
+        <!-- svelte-ignore a11y_missing_attribute -->
+        <iframe
+          src={client.frontChannelLogoutUrl}
+          style:display={'none'}
+        ></iframe>
+      </li>{/each}
+  </ul>
+  {#if logout.logoutRedirectUri}
+    <a
+      id="continue"
+      class="btn btn-primary"
+      href={logout.logoutRedirectUri}
+    >
+      {@render msg('doContinue')()}
+    </a>
+  {/if}
+</Template>

package/keycloakify-svelte/login/pages/FrontchannelLogout.svelte.d.ts

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

package/keycloakify-svelte/login/pages/IdpReviewUserProfile.svelte

@@ -0,0 +1,80 @@
+<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 type { Component } from 'svelte';
+  import type { KcContext } from '../KcContext';
+  import type { I18n } from '../i18n';
+
+  type IdpReviewUserProfileProps = PageProps<Extract<KcContext, { pageId: 'idp-review-user-profile.ftl' }>, I18n> & {
+    UserProfileFormFields: Component<UserProfileFormFieldsProps>;
+    doMakeUserConfirmPassword: boolean;
+  };
+
+  const {
+    kcContext,
+    i18n,
+    doUseDefaultCss,
+    Template,
+    classes,
+    UserProfileFormFields,
+    doMakeUserConfirmPassword,
+  }: IdpReviewUserProfileProps = $props();
+  const { kcClsx } = getKcClsx({
+    doUseDefaultCss,
+    classes,
+  });
+
+  const { msg, msgStr } = $i18n;
+
+  const { url, messagesPerField } = kcContext;
+
+  const [isFomSubmittable, setIsFomSubmittable] = useState(false);
+</script>
+
+<Template
+  {kcContext}
+  {i18n}
+  {doUseDefaultCss}
+  {classes}
+  displayMessage={messagesPerField.exists('global')}
+  displayRequiredFields={true}
+>
+  {#snippet headerNode()}
+    {@render msg('loginIdpReviewProfileTitle')()}
+  {/snippet}
+  <form
+    id="kc-idp-review-profile-form"
+    class={kcClsx('kcFormClass')}
+    action={url.loginAction}
+    method="post"
+  >
+    <UserProfileFormFields
+      {kcContext}
+      {i18n}
+      onIsFormSubmittableValueChange={setIsFomSubmittable}
+      {kcClsx}
+      {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
+          class={kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass')}
+          type="submit"
+          value={msgStr('doSubmit')}
+          disabled={!$isFomSubmittable}
+        />
+      </div>
+    </div>
+  </form>
+</Template>

package/keycloakify-svelte/login/pages/IdpReviewUserProfile.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 { KcContext } from '../KcContext';
+import type { I18n } from '../i18n';
+declare const IdpReviewUserProfile: Component<PageProps<KcContext.IdpReviewUserProfile, I18n> & {
+    UserProfileFormFields: Component<UserProfileFormFieldsProps>;
+    doMakeUserConfirmPassword: boolean;
+}, {}, "">;
+type IdpReviewUserProfile = ReturnType<typeof IdpReviewUserProfile>;
+export default IdpReviewUserProfile;

package/keycloakify-svelte/login/pages/Info.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  import type { PageProps } from './PageProps';
+  import { kcSanitize } from 'keycloakify/lib/kcSanitize';
+  import type { KcContext } from '../KcContext';
+  import type { I18n } from '../i18n';
+
+  const {
+    Template,
+    kcContext,
+    i18n,
+    doUseDefaultCss,
+    classes,
+  }: PageProps<Extract<KcContext, { pageId: 'info.ftl' }>, I18n> = $props();
+
+  const { advancedMsgStr, msg } = $i18n;
+
+  const { messageHeader, message, requiredActions, skipLink, pageRedirectUri, actionUri, client } = kcContext;
+</script>
+
+<Template
+  {kcContext}
+  {i18n}
+  {doUseDefaultCss}
+  {classes}
+  displayMessage={false}
+>
+  {#snippet headerNode()}
+    <span>{@html kcSanitize(messageHeader ?? message.summary)}</span>
+  {/snippet}
+
+  <div id="kc-info-message">
+    <p class="instruction">
+      {@html kcSanitize(
+        (() => {
+          let html = message.summary;
+
+          if (requiredActions) {
+            html += '<b>';
+
+            html += requiredActions
+              .map((requiredAction) => advancedMsgStr(`requiredAction.${requiredAction}`))
+              .join(', ');
+
+            html += '</b>';
+          }
+
+          return html;
+        })(),
+      )}
+    </p>
+    {#if !skipLink}
+      {#if pageRedirectUri}
+        <p>
+          <a href={pageRedirectUri}>{@render msg('backToApplication')()}</a>
+        </p>
+      {:else if actionUri}
+        <p>
+          <a href={actionUri}>{@render msg('proceedWithAction')()}</a>
+        </p>
+      {:else if client.baseUrl}<p>
+          <a href={client.baseUrl}>{@render msg('backToApplication')()}</a>
+        </p>
+      {/if}
+    {/if}
+  </div>
+</Template>

package/keycloakify-svelte/login/pages/Info.svelte.d.ts

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

package/keycloakify-svelte/login/pages/Login.svelte

@@ -0,0 +1,225 @@
+<script lang="ts">
+  import PasswordWrapper from '../components/PasswordWrapper.svelte';
+  import type { PageProps } from './PageProps';
+  import { useState } from '../../tools/useState';
+  import { kcSanitize } from 'keycloakify/lib/kcSanitize';
+  import { getKcClsx } from 'keycloakify/login/lib/kcClsx';
+  import { clsx } from 'keycloakify/tools/clsx';
+  import type { I18n } from '../i18n';
+  import type { KcContext } from '../KcContext';
+  const {
+    kcContext,
+    i18n,
+    doUseDefaultCss,
+    Template,
+    classes,
+  }: PageProps<Extract<KcContext, { pageId: 'login.ftl' }>, I18n> = $props();
+  const { kcClsx } = getKcClsx({
+    doUseDefaultCss,
+    classes,
+  });
+
+  const { social, realm, url, usernameHidden, login, auth, registrationDisabled, messagesPerField } = kcContext;
+
+  const { msg, msgStr } = $i18n;
+
+  const [isLoginButtonDisabled, setIsLoginButtonDisabled] = useState(false);
+</script>
+
+<Template
+  {kcContext}
+  {i18n}
+  {doUseDefaultCss}
+  {classes}
+  displayMessage={!messagesPerField.existsError('username', 'password')}
+  displayInfo={realm.password && realm.registrationAllowed && !registrationDisabled}
+>
+  {#snippet headerNode()}
+    {@render msg('loginAccountTitle')()}
+  {/snippet}
+
+  {#snippet infoNode()}
+    <div id="kc-registration-container">
+      <div id="kc-registration">
+        <span>
+          {@render msg('noAccount')()}{' '}
+          <a
+            tabindex={8}
+            href={url.registrationUrl}
+          >
+            {@render msg('doRegister')()}
+          </a>
+        </span>
+      </div>
+    </div>
+  {/snippet}
+  {#snippet socialProvidersNode()}
+    {@const providers = social?.providers}
+    {#if realm.password && !!providers && !!providers.length}
+      <div
+        id="kc-social-providers"
+        class={kcClsx('kcFormSocialAccountSectionClass')}
+      >
+        <hr />
+        <h2>{@render msg('identity-provider-login-label')()}</h2>
+        <ul class={kcClsx('kcFormSocialAccountListClass', providers.length > 3 && 'kcFormSocialAccountListGridClass')}>
+          {#each providers as p}
+            <li>
+              <a
+                id={`social-${p.alias}`}
+                class={kcClsx(
+                  'kcFormSocialAccountListButtonClass',
+                  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')}
+                  >{@html kcSanitize(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')}
+              >
+                {@render (!realm.loginWithEmailAllowed
+                  ? msg('username')
+                  : !realm.registrationEmailAsUsername
+                    ? msg('usernameOrEmail')
+                    : msg('email'))()}
+              </label>
+              <!-- svelte-ignore a11y_autofocus -->
+              <input
+                tabindex={2}
+                id="username"
+                class={kcClsx('kcInputClass')}
+                name="username"
+                value={login.username ?? ''}
+                type="text"
+                autofocus
+                autocomplete="username"
+                aria-invalid={messagesPerField.existsError('username', 'password')}
+              />
+              {#if messagesPerField.existsError('username', 'password')}
+                <span
+                  id="input-error"
+                  class={kcClsx('kcInputErrorMessageClass')}
+                  aria-live="polite">{@html kcSanitize(messagesPerField.getFirstError('username', 'password'))}</span
+                >
+              {/if}
+            </div>
+          {/if}
+
+          <div class={kcClsx('kcFormGroupClass')}>
+            <label
+              for="password"
+              class={kcClsx('kcLabelClass')}
+            >
+              {@render msg('password')()}
+            </label>
+            <PasswordWrapper
+              {kcClsx}
+              {i18n}
+              passwordInputId="password"
+            >
+              <input
+                tabindex={3}
+                id="password"
+                class={kcClsx('kcInputClass')}
+                name="password"
+                type="password"
+                autocomplete="current-password"
+                aria-invalid={messagesPerField.existsError('username', 'password')}
+              />
+            </PasswordWrapper>
+            {#if usernameHidden && messagesPerField.existsError('username', 'password')}
+              <span
+                id="input-error"
+                class={kcClsx('kcInputErrorMessageClass')}
+                aria-live="polite">{@html kcSanitize(messagesPerField.getFirstError('username', 'password'))}</span
+              >
+            {/if}
+          </div>
+
+          <div class={kcClsx('kcFormGroupClass', 'kcFormSettingClass')}>
+            <div id="kc-form-options">
+              {#if realm.rememberMe && !usernameHidden}
+                <div class="checkbox">
+                  <label>
+                    <input
+                      tabindex={5}
+                      id="rememberMe"
+                      name="rememberMe"
+                      type="checkbox"
+                      checked={!!login.rememberMe}
+                    />{' '}
+                    {@render msg('rememberMe')()}
+                  </label>
+                </div>
+              {/if}
+            </div>
+            <div class={kcClsx('kcFormOptionsWrapperClass')}>
+              {#if realm.resetPasswordAllowed}
+                <span>
+                  <a
+                    tabindex={6}
+                    href={url.loginResetCredentialsUrl}
+                  >
+                    {@render msg('doForgotPassword')()}
+                  </a>
+                </span>
+              {/if}
+            </div>
+          </div>
+
+          <div
+            id="kc-form-buttons"
+            class={kcClsx('kcFormGroupClass')}
+          >
+            <input
+              type="hidden"
+              id="id-hidden-input"
+              name="credentialId"
+              value={auth.selectedCredential}
+            />
+            <input
+              tabindex={7}
+              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/keycloakify-svelte/login/pages/Login.svelte.d.ts

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