@keycloakify/svelte 0.0.1-rc.1

package/src/login/pages/Login.svelte

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

@@ -0,0 +1,217 @@
+<script lang="ts">
+  import LogoutOtherSessions from '@keycloakify/svelte/login/components/LogoutOtherSessions.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 { KcContext } from '../KcContext';
+  import type { I18n } from '../i18n';
+
+  const {
+    Template,
+    kcContext,
+    i18n,
+    doUseDefaultCss,
+    classes,
+  }: PageProps<Extract<KcContext, { pageId: 'login-config-totp.ftl' }>, I18n> = $props();
+
+  const { kcClsx } = getKcClsx({
+    doUseDefaultCss,
+    classes,
+  });
+
+  const { url, isAppInitiatedAction, totp, mode, messagesPerField } = kcContext;
+
+  const { msg, msgStr, advancedMsg } = $i18n;
+</script>
+
+<Template
+  {kcContext}
+  {i18n}
+  {doUseDefaultCss}
+  {classes}
+  displayMessage={!messagesPerField.existsError('totp', 'userLabel')}
+>
+  {#snippet headerNode()}
+    {@render msg('loginTotpTitle')()}
+  {/snippet}
+  <ol id="kc-totp-settings">
+    <li>
+      <p>{@render msg('loginTotpStep1')()}</p>
+
+      <ul id="kc-totp-supported-apps">
+        {#each totp.supportedApplications as app}
+          <li>{@render advancedMsg(app)()}</li>
+        {/each}
+      </ul>
+    </li>
+    {#if mode === 'manual'}
+      <li>
+        <p>{@render msg('loginTotpManualStep2')()}</p>
+        <p>
+          <span id="kc-totp-secret-key">{totp.totpSecretEncoded}</span>
+        </p>
+        <p>
+          <a
+            href={totp.qrUrl}
+            id="mode-barcode"
+          >
+            {@render msg('loginTotpScanBarcode')()}
+          </a>
+        </p>
+      </li>
+      <li>
+        <p>{@render msg('loginTotpManualStep3')()}</p>
+        <ul>
+          <li id="kc-totp-type">
+            {@render msg('loginTotpType')()}: {@render msg(`loginTotp.${totp.policy.type}`)()}
+          </li>
+          <li id="kc-totp-algorithm">
+            {@render msg('loginTotpAlgorithm')()}: {totp.policy.getAlgorithmKey()}
+          </li>
+          <li id="kc-totp-digits">
+            {@render msg('loginTotpDigits')()}: {totp.policy.digits}
+          </li>
+          {#if totp.policy.type === 'totp'}
+            <li id="kc-totp-period">
+              {@render msg('loginTotpInterval')()}: {totp.policy.period}
+            </li>
+          {:else}
+            <li id="kc-totp-counter">
+              {@render msg('loginTotpCounter')()}: {totp.policy.initialCounter}
+            </li>
+          {/if}
+        </ul>
+      </li>
+    {:else}
+      <li>
+        <p>{@render msg('loginTotpStep2')()}</p>
+        <img
+          id="kc-totp-secret-qr-code"
+          src={`data:image/png;base64, ${totp.totpSecretQrCode}`}
+          alt="Figure: Barcode"
+        />
+        <br />
+        <p>
+          <a
+            href={totp.manualUrl}
+            id="mode-manual"
+          >
+            {@render msg('loginTotpUnableToScan')()}
+          </a>
+        </p>
+      </li>
+    {/if}
+    <li>
+      <p>{@render msg('loginTotpStep3')()}</p>
+      <p>{@render msg('loginTotpStep3DeviceName')()}</p>
+    </li>
+  </ol>
+  <form
+    action={url.loginAction}
+    class={kcClsx('kcFormClass')}
+    id="kc-totp-settings-form"
+    method="post"
+  >
+    <div class={kcClsx('kcFormGroupClass')}>
+      <div class={kcClsx('kcInputWrapperClass')}>
+        <label
+          for="totp"
+          class={kcClsx('kcLabelClass')}
+        >
+          {@render msg('authenticatorCode')()}
+        </label>{' '}
+        <span class="required">*</span>
+      </div>
+      <div class={kcClsx('kcInputWrapperClass')}>
+        <input
+          type="text"
+          id="totp"
+          name="totp"
+          autocomplete="off"
+          class={kcClsx('kcInputClass')}
+          aria-invalid={messagesPerField.existsError('totp')}
+        />
+
+        {#if messagesPerField.existsError('totp')}
+          <span
+            id="input-error-otp-code"
+            class={kcClsx('kcInputErrorMessageClass')}
+            aria-live="polite">{@html kcSanitize(messagesPerField.get('totp'))}</span
+          >
+        {/if}
+      </div>
+      <input
+        type="hidden"
+        id="totpSecret"
+        name="totpSecret"
+        value={totp.totpSecret}
+      />
+      {#if mode}<input
+          type="hidden"
+          id="mode"
+          value={mode}
+        />{/if}
+    </div>
+
+    <div class={kcClsx('kcFormGroupClass')}>
+      <div class={kcClsx('kcInputWrapperClass')}>
+        <label
+          for="userLabel"
+          class={kcClsx('kcLabelClass')}
+        >
+          {@render msg('loginTotpDeviceName')()}
+        </label>{' '}
+        {#if totp.otpCredentials.length >= 1}<span class="required">*</span>{/if}
+      </div>
+      <div class={kcClsx('kcInputWrapperClass')}>
+        <input
+          type="text"
+          id="userLabel"
+          name="userLabel"
+          autocomplete="off"
+          class={kcClsx('kcInputClass')}
+          aria-invalid={messagesPerField.existsError('userLabel')}
+        />
+        {#if messagesPerField.existsError('userLabel')}
+          <span
+            id="input-error-otp-label"
+            class={kcClsx('kcInputErrorMessageClass')}
+            aria-live="polite">{@html kcSanitize(messagesPerField.get('userLabel'))}</span
+          >
+        {/if}
+      </div>
+    </div>
+
+    <div class={kcClsx('kcFormGroupClass')}>
+      <LogoutOtherSessions
+        {kcClsx}
+        {i18n}
+      />
+    </div>
+
+    {#if isAppInitiatedAction}
+      <input
+        type="submit"
+        class={kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass')}
+        id="saveTOTPBtn"
+        value={msgStr('doSubmit')}
+      />
+      <button
+        type="submit"
+        class={kcClsx('kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass', 'kcButtonLargeClass')}
+        id="cancelTOTPBtn"
+        name="cancel-aia"
+        value="true"
+      >
+        {@render msg('doCancel')()}
+      </button>
+    {:else}
+      <input
+        type="submit"
+        class={kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass')}
+        id="saveTOTPBtn"
+        value={msgStr('doSubmit')}
+      />
+    {/if}
+  </form>
+</Template>

package/src/login/pages/LoginIdpLinkConfirm.svelte

@@ -0,0 +1,60 @@
+<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-idp-link-confirm.ftl' }>, I18n> = $props();
+
+  const { kcClsx } = getKcClsx({
+    doUseDefaultCss,
+    classes,
+  });
+
+  const { url, idpAlias } = kcContext;
+
+  const { msg } = $i18n;
+</script>
+
+<Template
+  {kcContext}
+  {i18n}
+  {doUseDefaultCss}
+  {classes}
+>
+  {#snippet headerNode()}
+    {@render msg('confirmLinkIdpTitle')()}
+  {/snippet}
+  <form
+    id="kc-register-form"
+    action={url.loginAction}
+    method="post"
+  >
+    <div class={kcClsx('kcFormGroupClass')}>
+      <button
+        type="submit"
+        class={kcClsx('kcButtonClass', 'kcButtonDefaultClass', 'kcButtonBlockClass', 'kcButtonLargeClass')}
+        name="submitAction"
+        id="updateProfile"
+        value="updateProfile"
+      >
+        {@render msg('confirmLinkIdpReviewProfile')()}
+      </button>
+      <button
+        type="submit"
+        class={kcClsx('kcButtonClass', 'kcButtonDefaultClass', 'kcButtonBlockClass', 'kcButtonLargeClass')}
+        name="submitAction"
+        id="linkAccount"
+        value="linkAccount"
+      >
+        {@render msg('confirmLinkIdpContinue', idpAlias)()}
+      </button>
+    </div>
+  </form>
+</Template>

package/src/login/pages/LoginIdpLinkConfirmOverride.svelte

@@ -0,0 +1,59 @@
+<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-idp-link-confirm-override.ftl' }>, I18n> = $props();
+
+  const { kcClsx } = getKcClsx({
+    doUseDefaultCss,
+    classes,
+  });
+
+  const { url, idpDisplayName } = kcContext;
+
+  const { msg } = $i18n;
+</script>
+
+<Template
+  {kcContext}
+  {i18n}
+  {doUseDefaultCss}
+  {classes}
+>
+  {#snippet headerNode()}
+    {@render msg('confirmOverrideIdpTitle')()}
+  {/snippet}
+
+  <form
+    id="kc-register-form"
+    action={url.loginAction}
+    method="post"
+  >
+    {@render msg('pageExpiredMsg1')()}{' '}
+    <a
+      id="loginRestartLink"
+      href={url.loginRestartFlowUrl}
+    >
+      {@render msg('doClickHere')()}
+    </a>
+    <br />
+    <br />
+    <button
+      type="submit"
+      class={kcClsx('kcButtonClass', 'kcButtonDefaultClass', 'kcButtonBlockClass', 'kcButtonLargeClass')}
+      name="submitAction"
+      id="confirmOverride"
+      value="confirmOverride"
+    >
+      {@render msg('confirmOverrideIdpContinue', idpDisplayName)()}
+    </button>
+  </form>
+</Template>

package/src/login/pages/LoginIdpLinkEmail.svelte

@@ -0,0 +1,50 @@
+<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-idp-link-email.ftl' }>, I18n> = $props();
+
+  const { url, realm, brokerContext, idpAlias } = kcContext;
+
+  const { msg } = $i18n;
+</script>
+
+<Template
+  {kcContext}
+  {i18n}
+  {doUseDefaultCss}
+  {classes}
+  displayMessage={false}
+>
+  {#snippet headerNode()}
+    {@render msg('emailLinkIdpTitle', idpAlias)()}
+  {/snippet}
+
+  <p
+    id="instruction1"
+    class="instruction"
+  >
+    {@render msg('emailLinkIdp1', idpAlias, brokerContext.username, realm.displayName)()}
+  </p>
+  <p
+    id="instruction2"
+    class="instruction"
+  >
+    {@render msg('emailLinkIdp2')()} <a href={url.loginAction}>{@render msg('doClickHere')()}</a>
+    {@render msg('emailLinkIdp3')()}
+  </p>
+  <p
+    id="instruction3"
+    class="instruction"
+  >
+    {@render msg('emailLinkIdp4')()} <a href={url.loginAction}>{@render msg('doClickHere')()}</a>
+    {@render msg('emailLinkIdp5')()}
+  </p>
+</Template>

package/src/login/pages/LoginOauth2DeviceVerifyUserCode.svelte

@@ -0,0 +1,85 @@
+<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-oauth2-device-verify-user-code.ftl' }>, I18n> = $props();
+
+  const { url } = kcContext;
+
+  const { msg, msgStr } = $i18n;
+
+  const { kcClsx } = getKcClsx({
+    doUseDefaultCss,
+    classes,
+  });
+</script>
+
+<Template
+  {kcContext}
+  {i18n}
+  {doUseDefaultCss}
+  {classes}
+>
+  {#snippet headerNode()}
+    {@render msg('oauth2DeviceVerificationTitle')()}
+  {/snippet}
+  <form
+    id="kc-user-verify-device-user-code-form"
+    class={kcClsx('kcFormClass')}
+    action={url.oauth2DeviceVerificationAction}
+    method="post"
+  >
+    <div class={kcClsx('kcFormGroupClass')}>
+      <div class={kcClsx('kcLabelWrapperClass')}>
+        <label
+          for="device-user-code"
+          class={kcClsx('kcLabelClass')}
+        >
+          {@render msg('verifyOAuth2DeviceUserCode')()}
+        </label>
+      </div>
+
+      <div class={kcClsx('kcInputWrapperClass')}>
+        <!-- svelte-ignore a11y_autofocus -->
+        <input
+          id="device-user-code"
+          name="device_user_code"
+          autocomplete="off"
+          type="text"
+          class={kcClsx('kcInputClass')}
+          autofocus
+        />
+      </div>
+    </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')}
+            type="submit"
+            value={msgStr('doSubmit')}
+          />
+        </div>
+      </div>
+    </div>
+  </form>
+</Template>