@keycloakify/svelte 0.0.1-rc.1

package/dist/account/pages/Password.svelte

@@ -0,0 +1,233 @@
+<script lang="ts">
+  import type { PageProps } from './PageProps';
+  import { useState } from '../../tools/useState';
+  import { getKcClsx } from 'keycloakify/account/lib/kcClsx';
+  import { clsx } from 'keycloakify/tools/clsx';
+  import type { KcContext } from '../KcContext';
+  import type { I18n } from '../i18n';
+
+  const {
+    kcContext,
+    i18n,
+    doUseDefaultCss,
+    Template,
+    ...props
+  }: PageProps<Extract<KcContext, { pageId: 'password.ftl' }>, I18n> = $props();
+
+  const classes = {
+    ...props.classes,
+    kcBodyClass: clsx(props.classes?.kcBodyClass, 'password'),
+  };
+
+  const { kcClsx } = getKcClsx({
+    doUseDefaultCss,
+    classes,
+  });
+  const { url, password, account, stateChecker } = kcContext;
+
+  const { msgStr, msg } = $i18n;
+
+  const [currentPassword, setCurrentPassword] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+  const [newPasswordConfirm, setNewPasswordConfirm] = useState('');
+  const [newPasswordError, setNewPasswordError] = useState('');
+  const [newPasswordConfirmError, setNewPasswordConfirmError] = useState('');
+  const [hasNewPasswordBlurred, setHasNewPasswordBlurred] = useState(false);
+  const [hasNewPasswordConfirmBlurred, setHasNewPasswordConfirmBlurred] = useState(false);
+
+  const checkNewPassword = (newPassword: string, $currentPassword: string) => {
+    if (!password.passwordSet) {
+      return;
+    }
+
+    if (newPassword === $currentPassword) {
+      setNewPasswordError(msgStr('newPasswordSameAsOld'));
+    } else {
+      setNewPasswordError('');
+    }
+  };
+
+  const checkNewPasswordConfirm = (newPasswordConfirm: string, $newPassword: string) => {
+    if (newPasswordConfirm === '') {
+      return;
+    }
+
+    if ($newPassword !== newPasswordConfirm) {
+      setNewPasswordConfirmError(msgStr('passwordConfirmNotMatch'));
+    } else {
+      setNewPasswordConfirmError('');
+    }
+  };
+</script>
+
+<!-- check message reactivity -->
+<Template
+  kcContext={{
+    ...kcContext,
+    message: (() => {
+      if ($newPasswordError !== '') {
+        return {
+          type: 'error',
+          summary: $newPasswordError,
+        };
+      }
+
+      if ($newPasswordConfirmError !== '') {
+        return {
+          type: 'error',
+          summary: $newPasswordConfirmError,
+        };
+      }
+
+      return kcContext.message;
+    })(),
+  }}
+  {i18n}
+  {doUseDefaultCss}
+  {classes}
+  active="password"
+>
+  <div class="row">
+    <div class="col-md-10">
+      <h2>{@render msg('changePasswordHtmlTitle')()}</h2>
+    </div>
+    <div class="col-md-2 subtitle">
+      <span class="subtitle">{@render msg('allFieldsRequired')()}</span>
+    </div>
+  </div>
+
+  <form
+    action={url.passwordUrl}
+    class="form-horizontal"
+    method="post"
+  >
+    <input
+      type="text"
+      id="username"
+      name="username"
+      value={account.username ?? ''}
+      autocomplete="username"
+      readonly
+      style:display={'none'}
+    />
+
+    {#if password.passwordSet}
+      <div class="form-group">
+        <div class="col-sm-2 col-md-2">
+          <label
+            for="password"
+            class="control-label"
+          >
+            {@render msg('password')()}
+          </label>
+        </div>
+        <div class="col-sm-10 col-md-10">
+          <!-- svelte-ignore a11y_autofocus -->
+          <input
+            type="password"
+            class="form-control"
+            id="password"
+            name="password"
+            autofocus
+            autocomplete="current-password"
+            value={$currentPassword}
+            onchange={(event) => setCurrentPassword(event.currentTarget.value)}
+          />
+        </div>
+      </div>
+    {/if}
+
+    <input
+      type="hidden"
+      id="stateChecker"
+      name="stateChecker"
+      value={stateChecker}
+    />
+
+    <div class="form-group">
+      <div class="col-sm-2 col-md-2">
+        <label
+          for="password-new"
+          class="control-label"
+        >
+          {@render msg('passwordNew')()}
+        </label>
+      </div>
+      <div class="col-sm-10 col-md-10">
+        <input
+          type="password"
+          class="form-control"
+          id="password-new"
+          name="password-new"
+          autocomplete="new-password"
+          value={$newPassword}
+          onchange={(event) => {
+            const newPassword = event.currentTarget.value;
+
+            setNewPassword(newPassword);
+            if ($hasNewPasswordBlurred) {
+              checkNewPassword(newPassword, $currentPassword);
+            }
+          }}
+          onblur={() => {
+            setHasNewPasswordBlurred(true);
+            checkNewPassword($newPassword, $currentPassword);
+          }}
+        />
+      </div>
+    </div>
+
+    <div class="form-group">
+      <div class="col-sm-2 col-md-2">
+        <label
+          for="password-confirm"
+          class="control-label two-lines"
+        >
+          {@render msg('passwordConfirm')()}
+        </label>
+      </div>
+
+      <div class="col-sm-10 col-md-10">
+        <input
+          type="password"
+          class="form-control"
+          id="password-confirm"
+          name="password-confirm"
+          autocomplete="new-password"
+          value={$newPasswordConfirm}
+          onchange={(event) => {
+            const newPasswordConfirm = event.currentTarget.value;
+
+            setNewPasswordConfirm(newPasswordConfirm);
+            if ($hasNewPasswordConfirmBlurred) {
+              checkNewPasswordConfirm(newPasswordConfirm, $newPassword);
+            }
+          }}
+          onblur={() => {
+            setHasNewPasswordConfirmBlurred(true);
+            checkNewPasswordConfirm($newPasswordConfirm, $newPassword);
+          }}
+        />
+      </div>
+    </div>
+
+    <div class="form-group">
+      <div
+        id="kc-form-buttons"
+        class="col-md-offset-2 col-md-10 submit"
+      >
+        <div>
+          <button
+            disabled={$newPasswordError !== '' || $newPasswordConfirmError !== ''}
+            type="submit"
+            class={kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass')}
+            name="submitAction"
+            value="Save"
+          >
+            {@render msg('doSave')()}
+          </button>
+        </div>
+      </div>
+    </div>
+  </form>
+</Template>

package/dist/account/pages/Password.svelte.d.ts

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

package/dist/account/pages/Sessions.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+  import type { PageProps } from './PageProps';
+  import { getKcClsx } from 'keycloakify/account/lib/kcClsx';
+  import type { KcContext } from '../KcContext';
+  import type { I18n } from '../i18n';
+
+  const {
+    kcContext,
+    i18n,
+    doUseDefaultCss,
+    Template,
+    classes,
+  }: PageProps<Extract<KcContext, { pageId: 'sessions.ftl' }>, I18n> = $props();
+
+  const { kcClsx } = getKcClsx({
+    doUseDefaultCss,
+    classes,
+  });
+
+  const { url, stateChecker, sessions } = kcContext;
+
+  const { msg } = $i18n;
+</script>
+
+<Template
+  {kcContext}
+  {i18n}
+  {doUseDefaultCss}
+  {classes}
+  active="sessions"
+>
+  <div class={kcClsx('kcContentWrapperClass')}>
+    <div class="col-md-10">
+      <h2>{@render msg('sessionsHtmlTitle')()}</h2>
+    </div>
+  </div>
+
+  <table class="table table-striped table-bordered">
+    <thead>
+      <tr>
+        <th>{@render msg('ip')()}</th>
+        <th>{@render msg('started')()}</th>
+        <th>{@render msg('lastAccess')()}</th>
+        <th>{@render msg('expires')()}</th>
+        <th>{@render msg('clients')()}</th>
+      </tr>
+    </thead>
+
+    <!-- svelte-ignore a11y_no_redundant_roles -->
+    <tbody role="rowgroup">
+      {#each sessions.sessions as session}
+        <tr>
+          <td>{session.ipAddress}</td>
+          <td>{session?.started}</td>
+          <td>{session?.lastAccess}</td>
+          <td>{session?.expires}</td>
+          <td>
+            {#each session.clients as client}
+              <div>
+                {client}
+                <br />
+              </div>
+            {/each}
+          </td>
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+
+  <form
+    action={url.sessionsUrl}
+    method="post"
+  >
+    <input
+      type="hidden"
+      id="stateChecker"
+      name="stateChecker"
+      value={stateChecker}
+    />
+    <button
+      id="logout-all-sessions"
+      type="submit"
+      class={kcClsx('kcButtonDefaultClass', 'kcButtonClass')}
+    >
+      {@render msg('doLogOutAllSessions')()}
+    </button>
+  </form>
+</Template>

package/dist/account/pages/Sessions.svelte.d.ts

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

package/dist/account/pages/Totp.svelte

@@ -0,0 +1,287 @@
+<script lang="ts">
+  import type { PageProps } from './PageProps';
+  import type { KcContext } from '../KcContext';
+  import type { I18n } from '../i18n';
+  import { getKcClsx } from 'keycloakify/account/lib/kcClsx';
+  import { kcSanitize } from 'keycloakify/lib/kcSanitize';
+  import { clsx } from 'keycloakify/tools/clsx';
+
+  const {
+    kcContext,
+    i18n,
+    doUseDefaultCss,
+    Template,
+    classes,
+  }: PageProps<Extract<KcContext, { pageId: 'totp.ftl' }>, I18n> = $props();
+
+  const { kcClsx } = getKcClsx({
+    doUseDefaultCss,
+    classes,
+  });
+
+  const { totp, mode, url, messagesPerField, stateChecker } = kcContext;
+
+  const { msg, msgStr, advancedMsg } = $i18n;
+</script>
+
+<Template
+  {kcContext}
+  {i18n}
+  {doUseDefaultCss}
+  {classes}
+  active="totp"
+>
+  <div class="row">
+    <div class="col-md-10">
+      <h2>{@render msg('authenticatorTitle')()}</h2>
+    </div>
+    {#if totp.otpCredentials.length === 0}
+      <div class="subtitle col-md-2">
+        <span class="required">*</span>
+        {@render msg('requiredFields')()}
+      </div>
+    {/if}
+  </div>
+  {#if totp.enabled}
+    <table class="table table-bordered table-striped">
+      <thead>
+        {#if totp.otpCredentials.length > 1}
+          <tr>
+            <th colspan={4}>{@render msg('configureAuthenticators')()}</th>
+          </tr>
+        {:else}
+          <tr>
+            <th colspan={3}>{@render msg('configureAuthenticators')()}</th>
+          </tr>
+        {/if}
+      </thead>
+      <tbody>
+        {#each totp.otpCredentials as credential, index}
+          <tr>
+            <td class="provider">{@render msg('mobile')()}</td>
+            {#if totp.otpCredentials.length > 1}<td class="provider">{credential.id}</td>{/if}
+            <td class="provider">{credential.userLabel || ''}</td>
+            <td class="action">
+              <form
+                action={url.totpUrl}
+                method="post"
+                class="form-inline"
+              >
+                <input
+                  type="hidden"
+                  id="stateChecker"
+                  name="stateChecker"
+                  value={stateChecker}
+                />
+                <input
+                  type="hidden"
+                  id="submitAction"
+                  name="submitAction"
+                  value="Delete"
+                />
+                <input
+                  type="hidden"
+                  id="credentialId"
+                  name="credentialId"
+                  value={credential.id}
+                />
+                <button
+                  id={`remove-mobile-${index}`}
+                  class="btn btn-default"
+                  aria-label="delete"
+                >
+                  <i class="pficon pficon-delete"></i>
+                </button>
+              </form>
+            </td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  {/if}
+  {#if !totp.enabled}
+    <div>
+      <hr />
+      <ol id="kc-totp-settings">
+        <li>
+          <p>{@render msg('totpStep1')()}</p>
+
+          <ul id="kc-totp-supported-apps">
+            {#each totp.supportedApplications as app}
+              <li>{@render advancedMsg(app)()}</li>
+            {/each}
+          </ul>
+        </li>
+
+        {#if mode && mode == 'manual'}
+          <li>
+            <p>{@render msg('totpManualStep2')()}</p>
+            <p>
+              <span id="kc-totp-secret-key">{totp.totpSecretEncoded}</span>
+            </p>
+            <p>
+              <a
+                href={totp.qrUrl}
+                id="mode-barcode"
+              >
+                {@render msg('totpScanBarcode')()}
+              </a>
+            </p>
+          </li>
+          <li>
+            <p>{@render msg('totpManualStep3')()}</p>
+            <ul>
+              <li id="kc-totp-type">
+                {@render msg('totpType')()}: {@render msg(`totp.${totp.policy.type}`)()}
+              </li>
+              <li id="kc-totp-algorithm">
+                {@render msg('totpAlgorithm')()}: {totp.policy.getAlgorithmKey()}
+              </li>
+              <li id="kc-totp-digits">
+                {@render msg('totpDigits')()}: {totp.policy.digits}
+              </li>
+              {#if totp.policy.type === 'totp'}
+                <li id="kc-totp-period">
+                  {@render msg('totpInterval')()}: {totp.policy.period}
+                </li>
+              {:else}
+                <li id="kc-totp-counter">
+                  {@render msg('totpCounter')()}: {totp.policy.initialCounter}
+                </li>
+              {/if}
+            </ul>
+          </li>
+        {:else}
+          <li>
+            <p>{@render msg('totpStep2')()}</p>
+            <p>
+              <img
+                id="kc-totp-secret-qr-code"
+                src={`data:image/png;base64, ${totp.totpSecretQrCode}`}
+                alt="Figure: Barcode"
+              />
+            </p>
+            <p>
+              <a
+                href={totp.manualUrl}
+                id="mode-manual"
+              >
+                {@render msg('totpUnableToScan')()}
+              </a>
+            </p>
+          </li>
+        {/if}
+        <li>
+          <p>{@render msg('totpStep3')()}</p>
+          <p>{@render msg('totpStep3DeviceName')()}</p>
+        </li>
+      </ol>
+      <hr />
+      <form
+        action={url.totpUrl}
+        class={kcClsx('kcFormClass')}
+        id="kc-totp-settings-form"
+        method="post"
+      >
+        <input
+          type="hidden"
+          id="stateChecker"
+          name="stateChecker"
+          value={stateChecker}
+        />
+        <div class={kcClsx('kcFormGroupClass')}>
+          <div class="col-sm-2 col-md-2">
+            <label
+              for="totp"
+              class="control-label"
+            >
+              {@render msg('authenticatorCode')()}
+            </label>
+            <span class="required">*</span>
+          </div>
+          <div class="col-sm-10 col-md-10">
+            <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="col-sm-2 col-md-2">
+            <label
+              for="userLabel"
+              class={kcClsx('kcLabelClass')}
+            >
+              {@render msg('totpDeviceName')()}
+            </label>
+            {#if totp.otpCredentials.length >= 1}<span class="required">*</span>{/if}
+          </div>
+          <div class="col-sm-10 col-md-10">
+            <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
+          id="kc-form-buttons"
+          class={clsx(kcClsx('kcFormGroupClass'), 'text-right')}
+        >
+          <div class={kcClsx('kcInputWrapperClass')}>
+            <input
+              type="submit"
+              class={kcClsx('kcButtonClass', 'kcButtonPrimaryClass', 'kcButtonLargeClass')}
+              id="saveTOTPBtn"
+              value={msgStr('doSave')}
+            />
+            <button
+              type="submit"
+              class={kcClsx('kcButtonClass', 'kcButtonDefaultClass', 'kcButtonLargeClass', 'kcButtonLargeClass')}
+              id="cancelTOTPBtn"
+              name="submitAction"
+              value="Cancel"
+            >
+              {@render msg('doCancel')()}
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+  {/if}
+</Template>

package/dist/account/pages/Totp.svelte.d.ts

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

package/dist/additional-svelte-typings.d.ts

@@ -0,0 +1,6 @@
+declare namespace svelteHTML {
+  // enhance attributes
+  interface HTMLAttributes {
+    'no-bottom-margin'?: boolean;
+  }
+}

package/dist/bin/197.index.js

@@ -0,0 +1,13 @@
+export const id = 197;
+export const ids = [197];
+export const modules = {
+
+/***/ 197:
+/***/ ((module) => {
+
+module.exports = eval("require")("./add-story");
+
+
+/***/ })
+
+};

package/dist/bin/381.index.js

@@ -0,0 +1,13 @@
+export const id = 381;
+export const ids = [381];
+export const modules = {
+
+/***/ 381:
+/***/ ((module) => {
+
+module.exports = eval("require")("./eject-page");
+
+
+/***/ })
+
+};

package/dist/bin/504.index.js

@@ -0,0 +1,13 @@
+export const id = 504;
+export const ids = [504];
+export const modules = {
+
+/***/ 504:
+/***/ ((module) => {
+
+module.exports = eval("require")("./initialize-account-theme");
+
+
+/***/ })
+
+};

package/dist/bin/87.index.js

@@ -0,0 +1,13 @@
+export const id = 87;
+export const ids = [87];
+export const modules = {
+
+/***/ 87:
+/***/ ((module) => {
+
+module.exports = eval("require")("./update-kc-gen");
+
+
+/***/ })
+
+};