@keycloakify/svelte 0.0.1-rc.1

package/src/account/pages/FederatedIdentity.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+  import type { PageProps } from '@keycloakify/svelte/account/pages/PageProps';
+  import type { KcContext } from '../KcContext';
+  import type { I18n } from '../i18n';
+
+  const {
+    kcContext,
+    i18n,
+    doUseDefaultCss,
+    Template,
+    classes,
+  }: PageProps<Extract<KcContext, { pageId: 'federatedIdentity.ftl' }>, I18n> = $props();
+
+  const { url, federatedIdentity, stateChecker } = kcContext;
+  const { msg } = $i18n;
+</script>
+
+<Template
+  {kcContext}
+  {i18n}
+  {doUseDefaultCss}
+  {classes}
+  active="social"
+>
+  <div class="main-layout social">
+    <div class="row">
+      <div class="col-md-10">
+        <h2>{@render msg('federatedIdentitiesHtmlTitle')()}</h2>
+      </div>
+    </div>
+    <div id="federated-identities">
+      {#each federatedIdentity.identities as identity}
+        <div class="row margin-bottom">
+          <div class="col-sm-2 col-md-2">
+            <label
+              for={identity.providerId}
+              class="control-label"
+            >
+              {identity.displayName}
+            </label>
+          </div>
+          <div class="col-sm-5 col-md-5">
+            <input
+              disabled
+              class="form-control"
+              value={identity.userName}
+            />
+          </div>
+          <div class="col-sm-5 col-md-5">
+            {#if identity.connected}
+              {#if federatedIdentity.removeLinkPossible}
+                <form
+                  action={url.socialUrl}
+                  method="post"
+                  class="form-inline"
+                >
+                  <input
+                    type="hidden"
+                    name="stateChecker"
+                    value={stateChecker}
+                  />
+                  <input
+                    type="hidden"
+                    name="action"
+                    value="remove"
+                  />
+                  <input
+                    type="hidden"
+                    name="providerId"
+                    value={identity.providerId}
+                  />
+                  <button
+                    id={`remove-link-${identity.providerId}`}
+                    class="btn btn-default"
+                  >
+                    {@render msg('doRemove')()}
+                  </button>
+                </form>
+              {/if}
+            {:else}
+              <form
+                action={url.socialUrl}
+                method="post"
+                class="form-inline"
+              >
+                <input
+                  type="hidden"
+                  name="stateChecker"
+                  value={stateChecker}
+                />
+                <input
+                  type="hidden"
+                  name="action"
+                  value="add"
+                />
+                <input
+                  type="hidden"
+                  name="providerId"
+                  value={identity.providerId}
+                />
+                <button
+                  id={`add-link-${identity.providerId}`}
+                  class="btn btn-default"
+                >
+                  {@render msg('doAdd')()}
+                </button>
+              </form>
+            {/if}
+          </div>
+        </div>
+      {/each}
+    </div>
+  </div>
+</Template>

package/src/account/pages/Log.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+  import type { PageProps } from '@keycloakify/svelte/account/pages/PageProps';
+  import type { KcContext } from '../KcContext';
+  import type { I18n } from '../i18n';
+  import { getKcClsx } from 'keycloakify/account/lib/kcClsx';
+
+  const {
+    kcContext,
+    i18n,
+    doUseDefaultCss,
+    Template,
+    classes,
+  }: PageProps<Extract<KcContext, { pageId: 'log.ftl' }>, I18n> = $props();
+
+  const { kcClsx } = getKcClsx({
+    doUseDefaultCss,
+    classes,
+  });
+
+  const { log } = kcContext;
+
+  const { msg } = $i18n;
+</script>
+
+<Template
+  {kcContext}
+  {i18n}
+  {doUseDefaultCss}
+  {classes}
+  active="log"
+>
+  <div class={kcClsx('kcContentWrapperClass')}>
+    <div class="col-md-10">
+      <h2>{@render msg('accountLogHtmlTitle')()}</h2>
+    </div>
+
+    <table class="table table-striped table-bordered">
+      <thead>
+        <tr>
+          <td>{@render msg('date')()}</td>
+          <td>{@render msg('event')()}</td>
+          <td>{@render msg('ip')()}</td>
+          <td>{@render msg('client')()}</td>
+          <td>{@render msg('details')()}</td>
+        </tr>
+      </thead>
+
+      <tbody>
+        {#each log.events as event}
+          <tr>
+            <td>{event.date ? new Date(event.date).toLocaleString() : ''}</td>
+            <td>{event.event}</td>
+            <td>{event.ipAddress}</td>
+            <td>{event.client || ''}</td>
+            <td>
+              {#each event.details as detail, detailIndex}
+                <span>
+                  {`${detail.key} = ${detail.value}`}
+                  {#if detailIndex < event.details.length - 1},&nbsp;{/if}
+                </span>
+              {/each}
+            </td>
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </div>
+</Template>

package/src/account/pages/PageProps.ts

@@ -0,0 +1,11 @@
+import { type ClassKey, type TemplateProps } from '@keycloakify/svelte/account/TemplateProps';
+import type { Component } from 'svelte';
+import type { Readable } from 'svelte/store';
+
+export type PageProps<NarrowedKcContext, I18n> = {
+  Template: Component<TemplateProps<NarrowedKcContext, I18n>>;
+  kcContext: NarrowedKcContext;
+  i18n: Readable<I18n>;
+  doUseDefaultCss: boolean;
+  classes?: Partial<Record<ClassKey, string>>;
+};

package/src/account/pages/Password.svelte

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

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