@nymphjs/tilmeld-setup 1.0.0-beta.46 → 1.0.0-beta.48

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.0.0-beta.48](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.47...v1.0.0-beta.48) (2023-11-10)
+
+**Note:** Version bump only for package @nymphjs/tilmeld-setup
+
+# [1.0.0-beta.47](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.46...v1.0.0-beta.47) (2023-11-10)
+
+**Note:** Version bump only for package @nymphjs/tilmeld-setup
+
 # [1.0.0-beta.46](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.45...v1.0.0-beta.46) (2023-08-29)
 
 ### Features

package/README.md

@@ -45,7 +45,7 @@ const nymph = new Nymph(
     verifyChangeRedirect: 'http://localhost',
     cancelChangeRedirect: 'http://localhost',
     jwtSecret: 'shhhhh',
-  })
+  }),
 );
 
 // Create your Express app.
@@ -61,8 +61,8 @@ app.use(
     {
       restUrl: 'http://localhost/rest',
     },
-    nymph
-  )
+    nymph,
+  ),
 );
 
 // Do anything else you need to do...

package/app/index.ts

@@ -1,6 +1,10 @@
 import App from './src/App.svelte';
 
-const app = new App({ target: document.getElementById('app') as HTMLElement });
+document.addEventListener('DOMContentLoaded', () => {
+  const app = new App({
+    target: document.getElementById('app') as HTMLElement,
+  });
 
-// Helps with admin and debugging.
-(window as any).app = app;
+  // Helps with admin and debugging.
+  (window as any).app = app;
+});

package/app/src/App.svelte

@@ -1,4 +1,5 @@
 <svelte:window on:resize={setMiniWindow} />
+
 <TopAppBar variant="static" class="tilmeld-top-app-bar">
   <Row>
     <Section>
@@ -19,7 +20,7 @@
         rel="noreferrer"
         title="Nymph/Tilmeld on GitHub"
       >
-        <Icon component={Svg} viewBox="0 0 24 24">
+        <Icon tag="svg" viewBox="0 0 24 24">
           <path fill="currentColor" d={mdiGithub} />
         </Icon>
       </IconButton>
@@ -29,7 +30,7 @@
         rel="noreferrer"
         title="SciActive on Mastodon"
       >
-        <Icon component={Svg} viewBox="0 0 24 24">
+        <Icon tag="svg" viewBox="0 0 24 24">
           <path fill="currentColor" d={mdiMastodon} />
         </Icon>
       </IconButton>
@@ -76,8 +77,10 @@
                 nonInteractive={!('href' in section)}
                 href={'href' in section ? `#${section.href}` : undefined}
                 activated={section.absolute
-                  ? $location === section.href
-                  : $location.startsWith(section.href ?? '!')}
+                  ? `${currentMatch.route.path}/` === section.href
+                  : `${currentMatch.route.path}/`.startsWith(
+                      section.href ?? '!',
+                    )}
                 style={section.indent
                   ? 'margin-left: ' + section.indent * 25 + 'px;'
                   : ''}
@@ -106,11 +109,11 @@
     <main class="tilmeld-main-content" bind:this={mainContent}>
       {#if tilmeldAdmin}
         {#if clientConfig}
-          <Router {routes} />
+          <svelte:component this={CurrentRoute} {router} {params} />
         {:else}
           Loading...
         {/if}
-      {:else if user == null}
+      {:else if user === null}
         <section style="display: flex; justify-content: center;">
           <Login
             {User}
@@ -118,6 +121,8 @@
             showExistingUserToggle={allowRegistration}
           />
         </section>
+      {:else if user === undefined}
+        Loading...
       {:else}
         <section>You don't have permission to access this app.</section>
       {/if}
@@ -127,8 +132,9 @@
 </div>
 
 <script lang="ts">
-  import { onMount, SvelteComponent } from 'svelte';
-  import Router, { location } from 'svelte-spa-router';
+  import type { ComponentType, SvelteComponent } from 'svelte';
+  import { onMount } from 'svelte';
+  import Navigo from 'navigo';
   import type {
     User as UserClass,
     ClientConfig,
@@ -141,7 +147,7 @@
   import IconButton from '@smui/icon-button';
   import List, { Item, Text, Separator } from '@smui/list';
   import Menu from '@smui/menu';
-  import { Icon, Svg } from '@smui/common';
+  import { Icon } from '@smui/common';
 
   import { User } from './nymph';
   import Intro from './routes/Intro.svelte';
@@ -159,18 +165,11 @@
   let drawerOpen = false;
   let accountMenu: any;
   let clientConfig: ClientConfig;
-  let user: (UserClass & CurrentUserData) | undefined = undefined;
+  let user: (UserClass & CurrentUserData) | null | undefined = undefined;
   let userAvatar: string = DEFAULT_AVATAR;
   let tilmeldAdmin: boolean | undefined = undefined;
   let accountOpen = false;
 
-  location.subscribe(() => {
-    if (mainContent) {
-      drawerOpen = false;
-      mainContent.scrollTop = 0;
-    }
-  });
-
   $: if (user) {
     user.$gatekeeper('tilmeld/admin').then((value) => (tilmeldAdmin = value));
     user.$getAvatar().then((value) => (userAvatar = value));
@@ -179,14 +178,65 @@
     userAvatar = DEFAULT_AVATAR;
   }
 
-  const routes = {
-    '/': Intro,
-    '/users/edit/:guid': UserEdit,
-    '/users/:query?': Users,
-    '/groups/edit/:guid': GroupEdit,
-    '/groups/:query?': Groups,
-    '*': NotFound,
-  };
+  const router = new Navigo('/', { hash: true });
+  let CurrentRoute: ComponentType<SvelteComponent> = Intro;
+  let params: any = {};
+
+  router.hooks({
+    before(done, match) {
+      if (mainContent) {
+        drawerOpen = false;
+        mainContent.scrollTop = 0;
+      }
+
+      currentMatch = match;
+
+      done();
+    },
+  });
+
+  router.on({
+    '/': () => {
+      CurrentRoute = Intro;
+      params = {};
+    },
+    '/users/edit/:guid': ({ data }: any) => {
+      CurrentRoute = UserEdit;
+      params = data;
+    },
+    '/users/': () => {
+      CurrentRoute = Users;
+      params = {};
+    },
+    '/users/:query?': ({ data }: any) => {
+      CurrentRoute = Users;
+      params = data;
+    },
+    '/groups/edit/:guid': ({ data }: any) => {
+      CurrentRoute = GroupEdit;
+      params = data;
+    },
+    '/groups/': () => {
+      CurrentRoute = Groups;
+      params = {};
+    },
+    '/groups/:query?': ({ data }: any) => {
+      CurrentRoute = Groups;
+      params = data;
+    },
+  });
+
+  router.notFound(({ hashString }: any) => {
+    if (hashString === '') {
+      router.navigate('/', { historyAPIMethod: 'replaceState' });
+    } else {
+      CurrentRoute = NotFound;
+      params = {};
+    }
+  });
+
+  let currentMatch = router.getCurrentLocation();
+  router.resolve();
 
   const sections: (
     | {
@@ -210,12 +260,12 @@
     },
     {
       name: 'Users',
-      href: '/users/',
+      href: 'users/',
       indent: 0,
     },
     {
       name: 'Groups',
-      href: '/groups/',
+      href: 'groups/',
       indent: 0,
     },
   ];
@@ -224,17 +274,17 @@
     user = currentUser;
   };
   const onLogout = () => {
-    user = undefined;
+    user = null;
   };
 
   onMount(setMiniWindow);
   onMount(async () => {
     User.on('login', onLogin);
     User.on('logout', onLogout);
-    user = (await User.current()) ?? undefined;
-  });
-  onMount(async () => {
+
     clientConfig = await User.getClientConfig();
+
+    user = await User.current();
   });
 
   function setMiniWindow() {

package/app/src/nymph.ts

@@ -6,7 +6,7 @@ import {
 } from '@nymphjs/tilmeld-client';
 
 const nymph = new Nymph(
-  (window as unknown as { nymphOptions: NymphOptions }).nymphOptions
+  (window as unknown as { nymphOptions: NymphOptions }).nymphOptions,
 );
 const User = nymph.addEntityClass(UserClass);
 const Group = nymph.addEntityClass(GroupClass);

package/app/src/routes/GroupEdit.svelte

@@ -6,8 +6,11 @@
   </section>
 {:else}
   <div style="display: flex; align-items: center; padding: 12px;">
-    <IconButton title="Back" on:click={pop}>
-      <Icon component={Svg} viewBox="0 0 24 24">
+    <IconButton
+      title="Back"
+      on:click={() => router.navigate('', { historyAPIMethod: 'back' })}
+    >
+      <Icon tag="svg" viewBox="0 0 24 24">
         <path fill="currentColor" d={mdiArrowLeft} />
       </Icon>
     </IconButton>
@@ -183,7 +186,7 @@
               entity = entity;
             }}
           >
-            <Icon component={Svg} viewBox="0 0 24 24">
+            <Icon tag="svg" viewBox="0 0 24 24">
               <path fill="currentColor" d={mdiMinus} />
             </Icon>
           </IconButton>
@@ -194,7 +197,7 @@
 
       <div class="solo-search-container solo-container">
         <Paper class="solo-paper" elevation={1}>
-          <Icon class="solo-icon" component={Svg} viewBox="0 0 24 24">
+          <Icon class="solo-icon" tag="svg" viewBox="0 0 24 24">
             <path fill="currentColor" d={mdiMagnify} />
           </Icon>
           <Input
@@ -210,7 +213,7 @@
           class="solo-fab"
           title="Search"
         >
-          <Icon component={Svg} viewBox="0 0 24 24">
+          <Icon tag="svg" viewBox="0 0 24 24">
             <path fill="currentColor" d={mdiArrowRight} />
           </Icon>
         </IconButton>
@@ -271,7 +274,7 @@
                     entity = entity;
                   }}
                 >
-                  <Icon component={Svg} viewBox="0 0 24 24">
+                  <Icon tag="svg" viewBox="0 0 24 24">
                     <path fill="currentColor" d={mdiMinus} />
                   </Icon>
                 </IconButton>
@@ -296,7 +299,7 @@
           on:keydown={abilityKeyDown}
         />
         <IconButton on:click={addAbility}>
-          <Icon component={Svg} viewBox="0 0 24 24">
+          <Icon tag="svg" viewBox="0 0 24 24">
             <path fill="currentColor" d={mdiPlus} />
           </Icon>
         </IconButton>
@@ -327,7 +330,7 @@
 
 <script lang="ts">
   import { onMount } from 'svelte';
-  import { pop, replace } from 'svelte-spa-router';
+  import type Navigo from 'navigo';
   import type {
     AdminGroupData,
     ClientConfig,
@@ -358,10 +361,11 @@
   import HelperText from '@smui/textfield/helper-text';
   import IconButton from '@smui/icon-button';
   import Button from '@smui/button';
-  import { Icon, Label, Svg } from '@smui/common';
+  import { Icon, Label } from '@smui/common';
 
   import { nymph, Group, User } from '../nymph';
 
+  export let router: Navigo;
   export let params: { guid: string };
 
   let entity: GroupClass & AdminGroupData;
@@ -562,7 +566,10 @@
         await readyEntity();
         success = true;
         if (newEntity) {
-          replace(`/groups/edit/${encodeURIComponent(entity.guid || '')}`);
+          router.navigate(
+            `/groups/edit/${encodeURIComponent(entity.guid || '')}`,
+            { historyAPIMethod: 'replaceState' },
+          );
         }
         setTimeout(() => {
           success = undefined;
@@ -583,7 +590,7 @@
       saving = true;
       try {
         if (await entity.$delete()) {
-          pop();
+          router.navigate('', { historyAPIMethod: 'back' });
         } else {
           failureMessage = 'An error occurred.';
         }

package/app/src/routes/Groups.svelte

@@ -13,12 +13,12 @@
       class="solo-fab"
       title="New Group"
     >
-      <Icon component={Svg} viewBox="0 0 24 24">
+      <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" component={Svg} viewBox="0 0 24 24">
+      <Icon class="solo-icon" tag="svg" viewBox="0 0 24 24">
         <path fill="currentColor" d={mdiMagnify} />
       </Icon>
       <Input
@@ -36,7 +36,7 @@
       class="solo-fab"
       title="Search"
     >
-      <Icon component={Svg} viewBox="0 0 24 24">
+      <Icon tag="svg" viewBox="0 0 24 24">
         <path fill="currentColor" d={mdiArrowRight} />
       </Icon>
     </Fab>
@@ -71,7 +71,7 @@
                 <Cell
                   ><a
                     href="#/groups/edit/{encodeURIComponent(
-                      curEntity.guid || ''
+                      curEntity.guid || '',
                     )}">{curEntity.groupname}</a
                   ></Cell
                 >
@@ -79,14 +79,14 @@
               <Cell
                 ><a
                   href="#/groups/edit/{encodeURIComponent(
-                    curEntity.guid || ''
+                    curEntity.guid || '',
                   )}">{curEntity.name}</a
                 ></Cell
               >
               <Cell
                 ><a
                   href="#/groups/edit/{encodeURIComponent(
-                    curEntity.guid || ''
+                    curEntity.guid || '',
                   )}">{curEntity.email}</a
                 ></Cell
               >
@@ -107,7 +107,7 @@
 
 <script lang="ts">
   import { onMount } from 'svelte';
-  import { push } from 'svelte-spa-router';
+  import type Navigo from 'navigo';
   import queryParser from '@nymphjs/query-parser';
   import type {
     AdminGroupData,
@@ -124,10 +124,11 @@
   import DataTable, { Head, Body, Row, Cell } from '@smui/data-table';
   import { Input } from '@smui/textfield';
   import Fab from '@smui/fab';
-  import { Icon, Svg } from '@smui/common';
+  import { Icon } from '@smui/common';
 
   import { nymph, Group, User } from '../nymph';
 
+  export let router: Navigo;
   export let params: { query?: string } = {};
 
   let clientConfig: ClientConfig | undefined = undefined;
@@ -177,7 +178,7 @@
   let entitiesSearching = false;
   let entities: (GroupClass & AdminGroupData)[] | undefined = undefined;
   async function searchEntities() {
-    push(`/groups/${encodeURIComponent(entitySearch)}`);
+    router.navigate(`/groups/${encodeURIComponent(entitySearch)}`);
   }
   function entitySearchKeyDown(event: CustomEvent | KeyboardEvent) {
     event = event as KeyboardEvent;

package/app/src/routes/UserEdit.svelte

@@ -6,8 +6,11 @@
   </section>
 {:else}
   <div style="display: flex; align-items: center; padding: 12px;">
-    <IconButton title="Back" on:click={pop}>
-      <Icon component={Svg} viewBox="0 0 24 24">
+    <IconButton
+      title="Back"
+      on:click={() => router.navigate('', { historyAPIMethod: 'back' })}
+    >
+      <Icon tag="svg" viewBox="0 0 24 24">
         <path fill="currentColor" d={mdiArrowLeft} />
       </Icon>
     </IconButton>
@@ -171,7 +174,7 @@
               entity = entity;
             }}
           >
-            <Icon component={Svg} viewBox="0 0 24 24">
+            <Icon tag="svg" viewBox="0 0 24 24">
               <path fill="currentColor" d={mdiMinus} />
             </Icon>
           </IconButton>
@@ -182,7 +185,7 @@
 
       <div class="solo-search-container solo-container">
         <Paper class="solo-paper" elevation={1}>
-          <Icon class="solo-icon" component={Svg} viewBox="0 0 24 24">
+          <Icon class="solo-icon" tag="svg" viewBox="0 0 24 24">
             <path fill="currentColor" d={mdiMagnify} />
           </Icon>
           <Input
@@ -198,7 +201,7 @@
           class="solo-fab"
           title="Search"
         >
-          <Icon component={Svg} viewBox="0 0 24 24">
+          <Icon tag="svg" viewBox="0 0 24 24">
             <path fill="currentColor" d={mdiArrowRight} />
           </Icon>
         </IconButton>
@@ -266,7 +269,7 @@
                   <Cell
                     ><a
                       href="#/groups/edit/{encodeURIComponent(
-                        curEntity.guid || ''
+                        curEntity.guid || '',
                       )}">{curEntity.groupname}</a
                     ></Cell
                   >
@@ -274,14 +277,14 @@
                 <Cell
                   ><a
                     href="#/groups/edit/{encodeURIComponent(
-                      curEntity.guid || ''
+                      curEntity.guid || '',
                     )}">{curEntity.name}</a
                   ></Cell
                 >
                 <Cell
                   ><a
                     href="#/groups/edit/{encodeURIComponent(
-                      curEntity.guid || ''
+                      curEntity.guid || '',
                     )}">{curEntity.email}</a
                   ></Cell
                 >
@@ -293,7 +296,7 @@
                       entity = entity;
                     }}
                   >
-                    <Icon component={Svg} viewBox="0 0 24 24">
+                    <Icon tag="svg" viewBox="0 0 24 24">
                       <path fill="currentColor" d={mdiMinus} />
                     </Icon>
                   </IconButton>
@@ -314,7 +317,7 @@
 
       <div class="solo-search-container solo-container">
         <Paper class="solo-paper" elevation={1}>
-          <Icon class="solo-icon" component={Svg} viewBox="0 0 24 24">
+          <Icon class="solo-icon" tag="svg" viewBox="0 0 24 24">
             <path fill="currentColor" d={mdiMagnify} />
           </Icon>
           <Input
@@ -330,7 +333,7 @@
           class="solo-fab"
           title="Search"
         >
-          <Icon component={Svg} viewBox="0 0 24 24">
+          <Icon tag="svg" viewBox="0 0 24 24">
             <path fill="currentColor" d={mdiArrowRight} />
           </Icon>
         </IconButton>
@@ -395,7 +398,7 @@
                     entity = entity;
                   }}
                 >
-                  <Icon component={Svg} viewBox="0 0 24 24">
+                  <Icon tag="svg" viewBox="0 0 24 24">
                     <path fill="currentColor" d={mdiMinus} />
                   </Icon>
                 </IconButton>
@@ -420,7 +423,7 @@
           on:keydown={abilityKeyDown}
         />
         <IconButton on:click={addAbility}>
-          <Icon component={Svg} viewBox="0 0 24 24">
+          <Icon tag="svg" viewBox="0 0 24 24">
             <path fill="currentColor" d={mdiPlus} />
           </Icon>
         </IconButton>
@@ -651,7 +654,7 @@
           <span>Successfully saved!</span>
         {/if}
       </div>
-      {#if tilmeldSwitchUser && !entity.$is(user)}
+      {#if tilmeldSwitchUser && entity.guid && !entity.$is(user)}
         <div>
           <Button
             on:click={() => {
@@ -687,7 +690,7 @@
     <Button action="cancel">
       <Label>Cancel</Label>
     </Button>
-    <Button action="switch" default>
+    <Button action="switch">
       <Label>Switch</Label>
     </Button>
   </Actions>
@@ -695,7 +698,7 @@
 
 <script lang="ts">
   import { onMount } from 'svelte';
-  import { pop, replace } from 'svelte-spa-router';
+  import type Navigo from 'navigo';
   import type {
     AdminGroupData,
     AdminUserData,
@@ -728,10 +731,11 @@
   import IconButton from '@smui/icon-button';
   import Button from '@smui/button';
   import Dialog, { Title, Content, Actions } from '@smui/dialog';
-  import { Icon, Label, Svg } from '@smui/common';
+  import { Icon, Label } from '@smui/common';
 
   import { User, Group } from '../nymph';
 
+  export let router: Navigo;
   export let params: { guid: string };
 
   let entity: UserClass & AdminUserData;
@@ -881,7 +885,7 @@
       primaryGroups = (await Group.getPrimaryGroups(options, selectors)).filter(
         (group) => {
           return !group.$is(entity.group);
-        }
+        },
       );
     } catch (e: any) {
       failureMessage = e?.message;
@@ -1059,7 +1063,10 @@
         success = true;
         passwordVerify = '';
         if (newEntity) {
-          replace(`/users/edit/${encodeURIComponent(entity.guid || '')}`);
+          router.navigate(
+            `/users/edit/${encodeURIComponent(entity.guid || '')}`,
+            { historyAPIMethod: 'replaceState' },
+          );
         }
         setTimeout(() => {
           success = undefined;
@@ -1080,7 +1087,7 @@
       saving = true;
       try {
         if (await entity.$delete()) {
-          pop();
+          router.navigate('', { historyAPIMethod: 'back' });
         } else {
           failureMessage = 'An error occurred.';
         }
@@ -1092,7 +1099,7 @@
   }
 
   async function switchUserDialogCloseHandler(
-    e: CustomEvent<{ action: string }>
+    e: CustomEvent<{ action: string }>,
   ) {
     if (e.detail.action === 'switch') {
       saving = true;