@nymphjs/tilmeld-setup 1.0.0-beta.13 → 1.0.0-beta.130

package/app/src/routes/Users.svelte

@@ -0,0 +1,203 @@
+{#if $clientConfig == null || $user == null}
+  <section>
+    <div style="display: flex; justify-content: center; align-items: center;">
+      <CircularProgress style="height: 45px; width: 45px;" indeterminate />
+    </div>
+  </section>
+{:else}
+  <div class="solo-search-container solo-container">
+    <Fab
+      href="/users/edit/+"
+      use={[link]}
+      color="primary"
+      mini
+      class="solo-fab"
+      title="New User"
+    >
+      <Icon tag="svg" viewBox="0 0 24 24">
+        <path fill="currentColor" d={mdiPlus} />
+      </Icon>
+    </Fab>
+    <Paper class="solo-paper" elevation={6}>
+      <Icon class="solo-icon" tag="svg" viewBox="0 0 24 24">
+        <path fill="currentColor" d={mdiMagnify} />
+      </Icon>
+      <Input
+        bind:value={entitySearch}
+        onkeydown={entitySearchKeyDown}
+        placeholder="User Search"
+        class="solo-input"
+      />
+    </Paper>
+    <Fab
+      onclick={searchEntities}
+      disabled={entitySearch === ''}
+      color="primary"
+      mini
+      class="solo-fab"
+      title="Search"
+    >
+      <Icon tag="svg" viewBox="0 0 24 24">
+        <path fill="currentColor" d={mdiArrowRight} />
+      </Icon>
+    </Fab>
+  </div>
+  <section>
+    {#if failureMessage}
+      <div class="tilmeld-failure">
+        {failureMessage}
+      </div>
+    {/if}
+
+    {#if entitiesSearching}
+      <div style="display: flex; justify-content: center; align-items: center;">
+        <CircularProgress style="height: 32px; width: 32px;" indeterminate />
+      </div>
+    {:else if entities != null}
+      <DataTable table$aria-label="User list" style="width: 100%;">
+        <Head>
+          <Row>
+            {#if !$clientConfig.emailUsernames}
+              <Cell>Username</Cell>
+            {/if}
+            {#if $clientConfig.userFields.includes('name')}
+              <Cell>Name</Cell>
+            {/if}
+            {#if $clientConfig.userFields.includes('email')}
+              <Cell>Email</Cell>
+            {/if}
+            <Cell>Enabled</Cell>
+          </Row>
+        </Head>
+        <Body>
+          {#each entities as curEntity (curEntity.guid)}
+            <Row>
+              {#if !$clientConfig.emailUsernames}
+                <Cell
+                  ><a
+                    href="/users/edit/{encodeURIComponent(
+                      curEntity.guid || '',
+                    )}"
+                    use:link>{curEntity.username}</a
+                  ></Cell
+                >
+              {/if}
+              {#if $clientConfig.userFields.includes('name')}
+                <Cell
+                  ><a
+                    href="/users/edit/{encodeURIComponent(
+                      curEntity.guid || '',
+                    )}"
+                    use:link>{curEntity.name}</a
+                  ></Cell
+                >
+              {/if}
+              {#if $clientConfig.userFields.includes('email')}
+                <Cell
+                  ><a
+                    href="/users/edit/{encodeURIComponent(
+                      curEntity.guid || '',
+                    )}"
+                    use:link>{curEntity.email}</a
+                  ></Cell
+                >
+              {/if}
+              <Cell>{curEntity.enabled ? 'Yes' : 'No'}</Cell>
+            </Row>
+          {:else}
+            <Row>
+              <Cell
+                colspan={1 +
+                  (!$clientConfig.emailUsernames ? 1 : 0) +
+                  ($clientConfig.userFields.includes('name') ? 1 : 0) +
+                  ($clientConfig.userFields.includes('email') ? 1 : 0)}
+                >None found.</Cell
+              >
+            </Row>
+          {/each}
+        </Body>
+      </DataTable>
+    {/if}
+  </section>
+{/if}
+
+<script lang="ts">
+  import type { Writable } from 'svelte/store';
+  import { getContext } from 'svelte';
+  import { link, push } from 'svelte-spa-router';
+  import queryParser from '@nymphjs/query-parser';
+  import type {
+    AdminUserData,
+    ClientConfig,
+    CurrentUserData,
+  } from '@nymphjs/tilmeld-client';
+  import type {
+    Group as GroupClass,
+    User as UserClass,
+  } from '@nymphjs/tilmeld-client';
+  import { mdiMagnify, mdiArrowRight, mdiPlus } from '@mdi/js';
+  import CircularProgress from '@smui/circular-progress';
+  import Paper from '@smui/paper';
+  import DataTable, { Head, Body, Row, Cell } from '@smui/data-table';
+  import { Input } from '@smui/textfield';
+  import Fab from '@smui/fab';
+  import { Icon } from '@smui/common';
+
+  import { nymph, User, Group } from '../nymph.js';
+
+  let { params }: { params: { query?: string } } = $props();
+
+  let entitySearch = $derived(params.query ?? '');
+  let failureMessage: string | undefined = $state();
+
+  const clientConfig =
+    getContext<Writable<ClientConfig | undefined>>('clientConfigStore');
+  const user =
+    getContext<Writable<(UserClass & CurrentUserData) | null | undefined>>(
+      'userStore',
+    );
+
+  $effect(() => {
+    if (params) {
+      handleSearchParam();
+    }
+  });
+
+  async function handleSearchParam() {
+    if (params.query && params.query !== '') {
+      entitiesSearching = true;
+      failureMessage = undefined;
+      try {
+        const query = queryParser({
+          query: params.query,
+          entityClass: User,
+          defaultFields: ['username', 'name', 'email'],
+          qrefMap: {
+            User: {
+              class: User,
+              defaultFields: ['username', 'name', 'email'],
+            },
+            Group: {
+              class: Group,
+              defaultFields: ['groupname', 'name', 'email'],
+            },
+          },
+        });
+        entities = await nymph.getEntities(...query);
+      } catch (e: any) {
+        failureMessage = e?.message;
+      }
+      entitiesSearching = false;
+    }
+  }
+
+  let entitiesSearching = $state(false);
+  let entities: (UserClass & AdminUserData)[] | undefined = $state();
+  async function searchEntities() {
+    push(`/users/${encodeURIComponent(entitySearch)}`);
+  }
+  function entitySearchKeyDown(event: CustomEvent | KeyboardEvent) {
+    event = event as KeyboardEvent;
+    if (event.key === 'Enter') searchEntities();
+  }
+</script>

package/app/theme/_smui-theme.scss

@@ -1,8 +1,8 @@
 @use 'sass:color';
 
-@use '@material/theme/color-palette';
+@use '@smui/common/theme/color-palette';
 
-@use '@material/theme/index' as theme with (
+@use '@smui/common/theme/index' as theme with (
   $primary: #4260a6,
   $secondary: #f8d153,
   $surface: #fff,
@@ -12,7 +12,7 @@
 
 // Typography mixins.
 @use './helpers';
-@use '@material/typography/index' as typography with (
+@use '@smui/common/typography/index' as typography with (
   $styles-headline1: (
     font-size: helpers.px-to-rem(60px),
     line-height: helpers.px-to-rem(60px),
@@ -40,10 +40,10 @@
 );
 
 // Import all the typography styles for the classes.
-@use '@material/typography/mdc-typography';
+@use '@smui/common/typography/mdc-typography';
 
 // Main Top App Bar styling.
-@use '@material/top-app-bar/index' as top-app-bar;
+@use '@smui/top-app-bar/styles' as top-app-bar;
 .mdc-top-app-bar.tilmeld-top-app-bar {
   // Position it above the drawer.
   z-index: 7;

package/dist/app/index.css

@@ -0,0 +1,105 @@
+
+  .mdc-dialog .mdc-dialog__surface.tilmeld-password-dialog-surface {
+    width: 360px;
+    max-width: calc(100vw - 32px);
+  }
+  .tilmeld-password-failure.svelte-1oizvng {
+    margin-top: 1em;
+    color: var(--mdc-theme-error, #f00);
+  }
+  .tilmeld-password-loading.svelte-1oizvng {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+
+  
+    .mdc-dialog .mdc-dialog__surface.tilmeld-revoke-tokens-dialog-surface
+   {
+    width: 360px;
+    max-width: calc(100vw - 32px);
+  }
+  .tilmeld-revoke-tokens-failure.svelte-1llryk7 {
+    margin-top: 1em;
+    color: var(--mdc-theme-error, #f00);
+  }
+  .tilmeld-revoke-tokens-loading.svelte-1llryk7 {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+
+  .mdc-dialog .mdc-dialog__surface.tilmeld-two-factor-dialog-surface {
+    width: 400px;
+    max-width: calc(100vw - 32px);
+  }
+  .tilmeld-two-factor-failure.svelte-1bkes2m {
+    margin-top: 1em;
+    color: var(--mdc-theme-error, #f00);
+  }
+  .tilmeld-two-factor-loading.svelte-1bkes2m {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+
+  .mdc-dialog .mdc-dialog__surface.tilmeld-account-dialog-surface {
+    width: 360px;
+    max-width: calc(100vw - 32px);
+  }
+  .tilmeld-account-failure.svelte-1g5qls0 {
+    margin-top: 1em;
+    color: var(--mdc-theme-error, #f00);
+  }
+  .tilmeld-account-action.svelte-1g5qls0 {
+    margin-top: 1em;
+  }
+  .tilmeld-account-loading.svelte-1g5qls0 {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+
+  .mdc-dialog .mdc-dialog__surface.tilmeld-recover-dialog-surface {
+    width: 540px;
+    max-width: calc(100vw - 32px);
+  }
+  .tilmeld-recover-action.svelte-1b72kkn {
+    margin-top: 1em;
+  }
+  .tilmeld-recover-failure.svelte-1b72kkn {
+    margin-top: 1em;
+    color: var(--mdc-theme-error, #f00);
+  }
+  .tilmeld-recover-loading.svelte-1b72kkn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+
+  .tilmeld-login-buttons.svelte-1nt1tpa {
+    display: flex;
+    flex-direction: row;
+    justify-content: start;
+    align-items: center;
+    margin-top: 1em;
+  }
+  .tilmeld-login-action.svelte-1nt1tpa {
+    margin-top: 1em;
+  }
+  .tilmeld-login-failure.svelte-1nt1tpa {
+    margin-top: 1em;
+    color: var(--mdc-theme-error, #f00);
+  }
+
+
+  @media (max-width: 720px) {
+    * > .hide-initial-small {
+      display: none;
+    }
+  }