@keycloakify/svelte 0.0.1-rc.1

package/dist/login/pages/LoginPasskeysConditionalAuthenticate.useScript.js

@@ -0,0 +1,57 @@
+import { useInsertScriptTags } from '../../tools/useInsertScriptTags';
+import { assert } from 'keycloakify/tools/assert';
+import { waitForElementMountedOnDom } from 'keycloakify/tools/waitForElementMountedOnDom';
+import { onMount } from 'svelte';
+assert();
+assert();
+export function useScript(params) {
+    const { authButtonId, kcContext, i18n } = params;
+    const { url, isUserIdentified, challenge, userVerification, rpId, createTimeout } = kcContext;
+    onMount(() => {
+        const unsubscribe = i18n.subscribe(($i18n) => {
+            const { msgStr, isFetchingTranslations } = $i18n;
+            const { insertScriptTags } = useInsertScriptTags({
+                componentOrHookName: 'LoginRecoveryAuthnCodeConfig',
+                scriptTags: [
+                    {
+                        type: 'module',
+                        textContent: () => `
+                    import { authenticateByWebAuthn } from "${url.resourcesPath}/js/webauthnAuthenticate.js";
+                    import { initAuthenticate } from "${url.resourcesPath}/js/passkeysConditionalAuth.js";
+
+                    const authButton = document.getElementById("${authButtonId}");
+                    const input = {
+                        isUserIdentified : ${isUserIdentified},
+                        challenge : ${JSON.stringify(challenge)},
+                        userVerification : ${JSON.stringify(userVerification)},
+                        rpId : ${JSON.stringify(rpId)},
+                        createTimeout : ${createTimeout}
+                    };
+                    authButton.addEventListener("click", () => {
+                        authenticateByWebAuthn({
+                            ...input,
+                            errmsg : ${JSON.stringify(msgStr('webauthn-unsupported-browser-text'))}
+                        });
+                    });
+
+                    initAuthenticate({
+                        ...input,
+                        errmsg : ${JSON.stringify(msgStr('passkey-unsupported-browser-text'))}
+                    });
+                `,
+                    },
+                ],
+            });
+            if (isFetchingTranslations) {
+                return;
+            }
+            (async () => {
+                await waitForElementMountedOnDom({
+                    elementId: authButtonId,
+                });
+                insertScriptTags();
+            })();
+        });
+        return () => unsubscribe();
+    });
+}

package/dist/login/pages/LoginPassword.svelte

@@ -0,0 +1,120 @@
+<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 {
+    Template,
+    kcContext,
+    i18n,
+    doUseDefaultCss,
+    classes,
+  }: PageProps<Extract<KcContext, { pageId: 'login-password.ftl' }>, I18n> = $props();
+
+  const { kcClsx } = getKcClsx({
+    doUseDefaultCss,
+    classes,
+  });
+
+  const { realm, url, messagesPerField } = kcContext;
+
+  const { msg, msgStr } = $i18n;
+
+  const [isLoginButtonDisabled, setIsLoginButtonDisabled] = useState(false);
+</script>
+
+<Template
+  {kcContext}
+  {i18n}
+  {doUseDefaultCss}
+  {classes}
+  displayMessage={!messagesPerField.existsError('password')}
+>
+  {#snippet headerNode()}
+    {@render msg('doLogIn')()}
+  {/snippet}
+
+  <div id="kc-form">
+    <div id="kc-form-wrapper">
+      <form
+        id="kc-form-login"
+        onsubmit={() => {
+          setIsLoginButtonDisabled(true);
+          return true;
+        }}
+        action={url.loginAction}
+        method="post"
+      >
+        <div class={clsx(kcClsx('kcFormGroupClass'), 'no-bottom-margin')}>
+          <hr />
+          <label
+            for="password"
+            class={kcClsx('kcLabelClass')}
+          >
+            {@render msg('password')()}
+          </label>
+
+          <PasswordWrapper
+            {kcClsx}
+            {i18n}
+            passwordInputId="password"
+          >
+            <!-- svelte-ignore a11y_autofocus -->
+            <input
+              tabindex={2}
+              id="password"
+              class={kcClsx('kcInputClass')}
+              name="password"
+              type="password"
+              autofocus
+              autocomplete="on"
+              aria-invalid={messagesPerField.existsError('username', 'password')}
+            />
+          </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 class={kcClsx('kcFormGroupClass', 'kcFormSettingClass')}>
+          <div id="kc-form-options"></div>
+          <div class={kcClsx('kcFormOptionsWrapperClass')}>
+            {#if realm.resetPasswordAllowed}
+              <span>
+                <a
+                  tabindex={5}
+                  href={url.loginResetCredentialsUrl}
+                >
+                  {@render msg('doForgotPassword')()}
+                </a>
+              </span>
+            {/if}
+          </div>
+        </div>
+        <div
+          id="kc-form-buttons"
+          class={kcClsx('kcFormGroupClass')}
+        >
+          <input
+            tabindex={4}
+            class={kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass')}
+            name="login"
+            id="kc-login"
+            type="submit"
+            value={msgStr('doLogIn')}
+            disabled={$isLoginButtonDisabled}
+          />
+        </div>
+      </form>
+    </div>
+  </div>
+</Template>

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

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

package/dist/login/pages/LoginRecoveryAuthnCodeConfig.svelte

@@ -0,0 +1,179 @@
+<script lang="ts">
+  import LogoutOtherSessions from '../components/LogoutOtherSessions.svelte';
+  import { useScript } from './LoginRecoveryAuthnCodeConfig.useScript';
+  import type { PageProps } from './PageProps';
+  import { getKcClsx } from 'keycloakify/login/lib/kcClsx';
+  import { clsx } from 'keycloakify/tools/clsx';
+  import type { I18n } from '../i18n';
+  import type { KcContext } from '../KcContext';
+
+  const {
+    Template,
+    kcContext,
+    i18n,
+    doUseDefaultCss,
+    classes,
+  }: PageProps<Extract<KcContext, { pageId: 'login-recovery-authn-code-config.ftl' }>, I18n> = $props();
+
+  const { kcClsx } = getKcClsx({
+    doUseDefaultCss,
+    classes,
+  });
+
+  const { recoveryAuthnCodesConfigBean, isAppInitiatedAction } = kcContext;
+
+  const { msg, msgStr } = $i18n;
+
+  const olRecoveryCodesListId = 'kc-recovery-codes-list';
+
+  useScript({ olRecoveryCodesListId, i18n });
+</script>
+
+<Template
+  {kcContext}
+  {i18n}
+  {doUseDefaultCss}
+  {classes}
+>
+  {#snippet headerNode()}
+    {@render msg('recovery-code-config-header')()}
+  {/snippet}
+  <div
+    class={clsx('pf-c-alert', 'pf-m-warning', 'pf-m-inline', kcClsx('kcRecoveryCodesWarning'))}
+    aria-label="Warning alert"
+  >
+    <div class="pf-c-alert__icon">
+      <i
+        class="pficon-warning-triangle-o"
+        aria-hidden="true"
+      ></i>
+    </div>
+    <h4 class="pf-c-alert__title">
+      <span class="pf-screen-reader">Warning alert:</span>
+      {@render msg('recovery-code-config-warning-title')()}
+    </h4>
+    <div class="pf-c-alert__description">
+      <p>{@render msg('recovery-code-config-warning-message')()}</p>
+    </div>
+  </div>
+
+  <ol
+    id={olRecoveryCodesListId}
+    class={kcClsx('kcRecoveryCodesList')}
+  >
+    {#each recoveryAuthnCodesConfigBean.generatedRecoveryAuthnCodesList as code, index}
+      <li>
+        <span>{index + 1}:</span>
+        {code.slice(0, 4)}-{code.slice(4, 8)}-{code.slice(8)}
+      </li>
+    {/each}
+  </ol>
+
+  <!-- actions -->
+  <div class={kcClsx('kcRecoveryCodesActions')}>
+    <button
+      id="printRecoveryCodes"
+      class={clsx('pf-c-button', 'pf-m-link')}
+      type="button"
+    >
+      <i
+        class="pficon-print"
+        aria-hidden="true"
+      ></i>
+      {@render msg('recovery-codes-print')()}
+    </button>
+    <button
+      id="downloadRecoveryCodes"
+      class={clsx('pf-c-button', 'pf-m-link')}
+      type="button"
+    >
+      <i
+        class="pficon-save"
+        aria-hidden="true"
+      ></i>
+      {@render msg('recovery-codes-download')()}
+    </button>
+    <button
+      id="copyRecoveryCodes"
+      class={clsx('pf-c-button', 'pf-m-link')}
+      type="button"
+    >
+      <i
+        class="pficon-blueprint"
+        aria-hidden="true"
+      ></i>
+      {@render msg('recovery-codes-copy')()}
+    </button>
+  </div>
+
+  <!-- confirmation checkbox -->
+  <div class={kcClsx('kcFormOptionsClass')}>
+    <input
+      class={kcClsx('kcCheckInputClass')}
+      type="checkbox"
+      id="kcRecoveryCodesConfirmationCheck"
+      name="kcRecoveryCodesConfirmationCheck"
+      onchange={(event) => {
+        //@ts-expect-error: This is inherited from the original code
+        document.getElementById('saveRecoveryAuthnCodesBtn').disabled = !event.currentTarget.checked;
+      }}
+    />
+    <label for="kcRecoveryCodesConfirmationCheck">{@render msg('recovery-codes-confirmation-message')()}</label>
+  </div>
+
+  <form
+    action={kcContext.url.loginAction}
+    class={kcClsx('kcFormGroupClass')}
+    id="kc-recovery-codes-settings-form"
+    method="post"
+  >
+    <input
+      type="hidden"
+      name="generatedRecoveryAuthnCodes"
+      value={recoveryAuthnCodesConfigBean.generatedRecoveryAuthnCodesAsString}
+    />
+    <input
+      type="hidden"
+      name="generatedAt"
+      value={recoveryAuthnCodesConfigBean.generatedAt}
+    />
+    <input
+      type="hidden"
+      id="userLabel"
+      name="userLabel"
+      value={msgStr('recovery-codes-label-default')}
+    />
+
+    <LogoutOtherSessions
+      {kcClsx}
+      {i18n}
+    />
+
+    {#if isAppInitiatedAction}
+      <input
+        type="submit"
+        class={kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass')}
+        id="saveRecoveryAuthnCodesBtn"
+        value={msgStr('recovery-codes-action-complete')}
+        disabled
+      />
+      <button
+        type="submit"
+        class={kcClsx('kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass')}
+        id="cancelRecoveryAuthnCodesBtn"
+        name="cancel-aia"
+        value="true"
+      >
+        {@render msg('recovery-codes-action-cancel')()}
+      </button>
+    {:else}
+      <input
+        type="submit"
+        class={kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass')}
+        id="saveRecoveryAuthnCodesBtn"
+        value={msgStr('recovery-codes-action-complete')}
+        disabled
+      />
+    {/if}
+  </form>
+</Template>

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

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

package/dist/login/pages/LoginRecoveryAuthnCodeConfig.useScript.d.ts

@@ -0,0 +1,10 @@
+import type { Readable } from 'svelte/store';
+type I18nLike = {
+    msgStr: (key: 'recovery-codes-download-file-header' | 'recovery-codes-download-file-description' | 'recovery-codes-download-file-date') => string;
+    isFetchingTranslations: boolean;
+};
+export declare function useScript(params: {
+    olRecoveryCodesListId: string;
+    i18n: Readable<I18nLike>;
+}): void;
+export {};

package/dist/login/pages/LoginRecoveryAuthnCodeConfig.useScript.js

@@ -0,0 +1,141 @@
+import { useInsertScriptTags } from '../../tools/useInsertScriptTags';
+import { waitForElementMountedOnDom } from 'keycloakify/tools/waitForElementMountedOnDom';
+import { onMount } from 'svelte';
+export function useScript(params) {
+    const { olRecoveryCodesListId, i18n } = params;
+    onMount(() => {
+        const unsubscribe = i18n.subscribe(($i18n) => {
+            const { msgStr, isFetchingTranslations } = $i18n;
+            const { insertScriptTags } = useInsertScriptTags({
+                componentOrHookName: 'LoginRecoveryAuthnCodeConfig',
+                scriptTags: [
+                    {
+                        type: 'text/javascript',
+                        textContent: () => `
+    
+                        /* copy recovery codes  */
+                        function copyRecoveryCodes() {
+                            var tmpTextarea = document.createElement("textarea");
+                            var codes = document.querySelectorAll("#${olRecoveryCodesListId} li");
+                            for (i = 0; i < codes.length; i++) {
+                                tmpTextarea.value = tmpTextarea.value + codes[i].innerText + "\\n";
+                            }
+                            document.body.appendChild(tmpTextarea);
+                            tmpTextarea.select();
+                            document.execCommand("copy");
+                            document.body.removeChild(tmpTextarea);
+                        }
+    
+                        var copyButton = document.getElementById("copyRecoveryCodes");
+                        copyButton && copyButton.addEventListener("click", function () {
+                            copyRecoveryCodes();
+                        });
+    
+                        /* download recovery codes  */
+                        function formatCurrentDateTime() {
+                            var dt = new Date();
+                            var options = {
+                                month: 'long',
+                                day: 'numeric',
+                                year: 'numeric',
+                                hour: 'numeric',
+                                minute: 'numeric',
+                                timeZoneName: 'short'
+                            };
+    
+                            return dt.toLocaleString('en-US', options);
+                        }
+    
+                        function parseRecoveryCodeList() {
+                            var recoveryCodes = document.querySelectorAll("#${olRecoveryCodesListId} li");
+                            var recoveryCodeList = "";
+    
+                            for (var i = 0; i < recoveryCodes.length; i++) {
+                                var recoveryCodeLiElement = recoveryCodes[i].innerText;
+                                recoveryCodeList += recoveryCodeLiElement + "\\r\\n";
+                            }
+    
+                            return recoveryCodeList;
+                        }
+    
+                        function buildDownloadContent() {
+                            var recoveryCodeList = parseRecoveryCodeList();
+                            var dt = new Date();
+                            var options = {
+                                month: 'long',
+                                day: 'numeric',
+                                year: 'numeric',
+                                hour: 'numeric',
+                                minute: 'numeric',
+                                timeZoneName: 'short'
+                            };
+    
+                            return fileBodyContent =
+                                ${JSON.stringify(msgStr('recovery-codes-download-file-header'))} + "\\n\\n" +
+                                recoveryCodeList + "\\n" +
+                                ${JSON.stringify(msgStr('recovery-codes-download-file-description'))} + "\\n\\n" +
+                                ${JSON.stringify(msgStr('recovery-codes-download-file-date'))} + " " + formatCurrentDateTime();
+                        }
+    
+                        function setUpDownloadLinkAndDownload(filename, text) {
+                            var el = document.createElement('a');
+                            el.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
+                            el.setAttribute('download', filename);
+                            el.style.display = 'none';
+                            document.body.appendChild(el);
+                            el.click();
+                            document.body.removeChild(el);
+                        }
+    
+                        function downloadRecoveryCodes() {
+                            setUpDownloadLinkAndDownload('kc-download-recovery-codes.txt', buildDownloadContent());
+                        }
+    
+                        var downloadButton = document.getElementById("downloadRecoveryCodes");
+                        downloadButton && downloadButton.addEventListener("click", downloadRecoveryCodes);
+    
+                        /* print recovery codes */
+                        function buildPrintContent() {
+                            var recoveryCodeListHTML = document.getElementById('${olRecoveryCodesListId}').innerHTML;
+                            var styles =
+                                \`@page { size: auto;  margin-top: 0; }
+                                body { width: 480px; }
+                                div { list-style-type: none; font-family: monospace }
+                                p:first-of-type { margin-top: 48px }\`;
+    
+                            return printFileContent =
+                                "<html><style>" + styles + "</style><body>" +
+                                "<title>kc-download-recovery-codes</title>" +
+                                "<p>" + ${JSON.stringify(msgStr('recovery-codes-download-file-header'))} + "</p>" +
+                                "<div>" + recoveryCodeListHTML + "</div>" +
+                                "<p>" + ${JSON.stringify(msgStr('recovery-codes-download-file-description'))} + "</p>" +
+                                "<p>" + ${JSON.stringify(msgStr('recovery-codes-download-file-date'))} + " " + formatCurrentDateTime() + "</p>" +
+                                "</body></html>";
+                        }
+    
+                        function printRecoveryCodes() {
+                            var w = window.open();
+                            w.document.write(buildPrintContent());
+                            w.print();
+                            w.close();
+                        }
+    
+                        var printButton = document.getElementById("printRecoveryCodes");
+                        printButton && printButton.addEventListener("click", printRecoveryCodes);
+                    `,
+                    },
+                ],
+            });
+            if (isFetchingTranslations) {
+                return;
+            }
+            (async () => {
+                await waitForElementMountedOnDom({
+                    elementId: olRecoveryCodesListId,
+                });
+                insertScriptTags();
+            })();
+        });
+        return () => unsubscribe();
+    });
+}

package/dist/login/pages/LoginRecoveryAuthnCodeInput.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+  import type { PageProps } from './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-recovery-authn-code-input.ftl' }>, I18n> = $props();
+
+  const { kcClsx } = getKcClsx({
+    doUseDefaultCss,
+    classes,
+  });
+
+  const { url, messagesPerField, recoveryAuthnCodesInputBean } = kcContext;
+
+  const { msg, msgStr } = $i18n;
+</script>
+
+<Template
+  {kcContext}
+  {i18n}
+  {doUseDefaultCss}
+  {classes}
+  displayMessage={!messagesPerField.existsError('recoveryCodeInput')}
+>
+  {#snippet headerNode()}
+    {@render msg('auth-recovery-code-header')()}
+  {/snippet}
+  <form
+    id="kc-recovery-code-login-form"
+    class={kcClsx('kcFormClass')}
+    action={url.loginAction}
+    method="post"
+  >
+    <div class={kcClsx('kcFormGroupClass')}>
+      <div class={kcClsx('kcLabelWrapperClass')}>
+        <label
+          for="recoveryCodeInput"
+          class={kcClsx('kcLabelClass')}
+        >
+          {@render msg('auth-recovery-code-prompt', `${recoveryAuthnCodesInputBean.codeNumber}`)()}
+        </label>
+      </div>
+      <div class={kcClsx('kcInputWrapperClass')}>
+        <!-- svelte-ignore a11y_autofocus -->
+        <input
+          tabindex={1}
+          id="recoveryCodeInput"
+          name="recoveryCodeInput"
+          aria-invalid={messagesPerField.existsError('recoveryCodeInput')}
+          autocomplete="off"
+          type="text"
+          class={kcClsx('kcInputClass')}
+          autofocus
+        />
+        {#if messagesPerField.existsError('recoveryCodeInput')}
+          <span
+            id="input-error"
+            class={kcClsx('kcInputErrorMessageClass')}
+            aria-live="polite">{@html kcSanitize(messagesPerField.get('recoveryCodeInput'))}</span
+          >
+        {/if}
+      </div>
+    </div>
+
+    <div class={kcClsx('kcFormGroupClass')}>
+      <div
+        id="kc-form-options"
+        class={kcClsx('kcFormOptionsWrapperClass')}
+      >
+        <div class={kcClsx('kcFormOptionsWrapperClass')}></div>
+      </div>
+      <div
+        id="kc-form-buttons"
+        class={kcClsx('kcFormButtonsClass')}
+      >
+        <input
+          class={kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonBlockClass', 'kcButtonLargeClass')}
+          name="login"
+          id="kc-login"
+          type="submit"
+          value={msgStr('doLogIn')}
+        />
+      </div>
+    </div>
+  </form>
+</Template>

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

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