@nymphjs/tilmeld-setup 1.0.0-beta.7 → 1.0.0-beta.70

package/CHANGELOG.md

@@ -3,6 +3,292 @@
 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.70](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.69...v1.0.0-beta.70) (2024-09-20)
+
+**Note:** Version bump only for package @nymphjs/tilmeld-setup
+
+# [1.0.0-beta.69](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.68...v1.0.0-beta.69) (2024-09-19)
+
+**Note:** Version bump only for package @nymphjs/tilmeld-setup
+
+# [1.0.0-beta.68](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.67...v1.0.0-beta.68) (2024-09-19)
+
+**Note:** Version bump only for package @nymphjs/tilmeld-setup
+
+# [1.0.0-beta.67](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.66...v1.0.0-beta.67) (2024-09-03)
+
+**Note:** Version bump only for package @nymphjs/tilmeld-setup
+
+# [1.0.0-beta.66](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.65...v1.0.0-beta.66) (2024-08-06)
+
+**Note:** Version bump only for package @nymphjs/tilmeld-setup
+
+# [1.0.0-beta.65](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.64...v1.0.0-beta.65) (2024-08-05)
+
+**Note:** Version bump only for package @nymphjs/tilmeld-setup
+
+# [1.0.0-beta.64](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.63...v1.0.0-beta.64) (2024-08-04)
+
+**Note:** Version bump only for package @nymphjs/tilmeld-setup
+
+# [1.0.0-beta.63](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.62...v1.0.0-beta.63) (2024-06-18)
+
+### Bug Fixes
+
+- undo ts compilation to module change ([84be6d4](https://github.com/sciactive/nymphjs/commit/84be6d434be29f8afd53907d15be2eb77d1736ce))
+
+### Features
+
+- export data iterator ([b86aa19](https://github.com/sciactive/nymphjs/commit/b86aa19fc77d744b5a683046dfb697fc4746df5c))
+
+# [1.0.0-beta.62](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.61...v1.0.0-beta.62) (2024-06-15)
+
+### Bug Fixes
+
+- assign generated and default groups to users created through admin app ([7ea0baa](https://github.com/sciactive/nymphjs/commit/7ea0baaf3a2c1285a63ee95ec153f38c169af6b6))
+
+# [1.0.0-beta.61](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.60...v1.0.0-beta.61) (2024-06-14)
+
+**Note:** Version bump only for package @nymphjs/tilmeld-setup
+
+# [1.0.0-beta.60](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.59...v1.0.0-beta.60) (2024-06-14)
+
+**Note:** Version bump only for package @nymphjs/tilmeld-setup
+
+# [1.0.0-beta.59](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.58...v1.0.0-beta.59) (2024-06-14)
+
+**Note:** Version bump only for package @nymphjs/tilmeld-setup
+
+# [1.0.0-beta.58](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.57...v1.0.0-beta.58) (2024-06-12)
+
+**Note:** Version bump only for package @nymphjs/tilmeld-setup
+
+# [1.0.0-beta.57](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.56...v1.0.0-beta.57) (2024-06-12)
+
+**Note:** Version bump only for package @nymphjs/tilmeld-setup
+
+# [1.0.0-beta.56](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.55...v1.0.0-beta.56) (2024-06-11)
+
+**Note:** Version bump only for package @nymphjs/tilmeld-setup
+
+# [1.0.0-beta.55](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.54...v1.0.0-beta.55) (2024-05-26)
+
+**Note:** Version bump only for package @nymphjs/tilmeld-setup
+
+# [1.0.0-beta.54](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.53...v1.0.0-beta.54) (2024-05-26)
+
+**Note:** Version bump only for package @nymphjs/tilmeld-setup
+
+# [1.0.0-beta.53](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.52...v1.0.0-beta.53) (2024-05-26)
+
+**Note:** Version bump only for package @nymphjs/tilmeld-setup
+
+# [1.0.0-beta.52](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.51...v1.0.0-beta.52) (2024-05-25)
+
+### Bug Fixes
+
+- support setup app and users and groups when userFields is limited ([20e25a2](https://github.com/sciactive/nymphjs/commit/20e25a2bcc35f96b3146fd9d973e34083a85f854))
+
+# [1.0.0-beta.51](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.50...v1.0.0-beta.51) (2024-04-12)
+
+**Note:** Version bump only for package @nymphjs/tilmeld-setup
+
+# [1.0.0-beta.50](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.49...v1.0.0-beta.50) (2024-04-08)
+
+**Note:** Version bump only for package @nymphjs/tilmeld-setup
+
+# [1.0.0-beta.49](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.48...v1.0.0-beta.49) (2024-03-04)
+
+**Note:** Version bump only for package @nymphjs/tilmeld-setup
+
+# [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
+
+- enable tilmeld admins to remove totp secret from users ([18455b3](https://github.com/sciactive/nymphjs/commit/18455b3edbbfa1188f8cf317438bbfa028ba8f47))
+
+# [1.0.0-beta.45](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.44...v1.0.0-beta.45) (2023-07-17)
+
+**Note:** Version bump only for package @nymphjs/tilmeld-setup
+
+# [1.0.0-beta.44](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.43...v1.0.0-beta.44) (2023-07-13)
+
+**Note:** Version bump only for package @nymphjs/tilmeld-setup
+
+# [1.0.0-beta.43](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.42...v1.0.0-beta.43) (2023-07-12)
+
+**Note:** Version bump only for package @nymphjs/tilmeld-setup
+
+# [1.0.0-beta.42](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.41...v1.0.0-beta.42) (2023-07-12)
+
+**Note:** Version bump only for package @nymphjs/tilmeld-setup
+
+# [1.0.0-beta.41](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.40...v1.0.0-beta.41) (2023-07-12)
+
+### Features
+
+- remove synchronous database queries ([b579fb2](https://github.com/sciactive/nymphjs/commit/b579fb2eacd96cdd1b386a62c5c00cdbb2438f6e))
+- rewrite server side async api to match client side api ([9c537a8](https://github.com/sciactive/nymphjs/commit/9c537a8be49e9b989af0822a4c2236e8c2d20f87))
+
+# [1.0.0-beta.40](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.39...v1.0.0-beta.40) (2023-07-10)
+
+**Note:** Version bump only for package @nymphjs/tilmeld-setup
+
+# [1.0.0-beta.39](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.38...v1.0.0-beta.39) (2023-07-09)
+
+**Note:** Version bump only for package @nymphjs/tilmeld-setup
+
+# [1.0.0-beta.38](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.37...v1.0.0-beta.38) (2023-07-09)
+
+**Note:** Version bump only for package @nymphjs/tilmeld-setup
+
+# [1.0.0-beta.37](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.36...v1.0.0-beta.37) (2023-07-09)
+
+**Note:** Version bump only for package @nymphjs/tilmeld-setup
+
+# [1.0.0-beta.36](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.35...v1.0.0-beta.36) (2023-07-09)
+
+**Note:** Version bump only for package @nymphjs/tilmeld-setup
+
+# [1.0.0-beta.35](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.34...v1.0.0-beta.35) (2023-06-14)
+
+**Note:** Version bump only for package @nymphjs/tilmeld-setup
+
+# [1.0.0-beta.34](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.33...v1.0.0-beta.34) (2023-05-13)
+
+**Note:** Version bump only for package @nymphjs/tilmeld-setup
+
+# [1.0.0-beta.33](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.32...v1.0.0-beta.33) (2023-05-13)
+
+**Note:** Version bump only for package @nymphjs/tilmeld-setup
+
+# [1.0.0-beta.32](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.31...v1.0.0-beta.32) (2023-05-13)
+
+**Note:** Version bump only for package @nymphjs/tilmeld-setup
+
+# [1.0.0-beta.31](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.30...v1.0.0-beta.31) (2023-05-12)
+
+**Note:** Version bump only for package @nymphjs/tilmeld-setup
+
+# [1.0.0-beta.30](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.29...v1.0.0-beta.30) (2023-05-12)
+
+**Note:** Version bump only for package @nymphjs/tilmeld-setup
+
+# [1.0.0-beta.29](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.28...v1.0.0-beta.29) (2023-05-08)
+
+**Note:** Version bump only for package @nymphjs/tilmeld-setup
+
+# [1.0.0-beta.28](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.27...v1.0.0-beta.28) (2023-05-05)
+
+**Note:** Version bump only for package @nymphjs/tilmeld-setup
+
+# [1.0.0-beta.27](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.26...v1.0.0-beta.27) (2023-05-04)
+
+**Note:** Version bump only for package @nymphjs/tilmeld-setup
+
+# [1.0.0-beta.26](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.25...v1.0.0-beta.26) (2023-05-04)
+
+### Features
+
+- update packages and migrate to mysql2 ([72ad611](https://github.com/sciactive/nymphjs/commit/72ad611bd2bf7bf85c3ba8a3486503d9b50c49d6))
+
+# [1.0.0-beta.25](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.24...v1.0.0-beta.25) (2023-05-04)
+
+**Note:** Version bump only for package @nymphjs/tilmeld-setup
+
+# [1.0.0-beta.24](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.23...v1.0.0-beta.24) (2023-05-02)
+
+**Note:** Version bump only for package @nymphjs/tilmeld-setup
+
+# [1.0.0-beta.23](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.22...v1.0.0-beta.23) (2023-05-02)
+
+**Note:** Version bump only for package @nymphjs/tilmeld-setup
+
+# [1.0.0-beta.22](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.21...v1.0.0-beta.22) (2023-05-01)
+
+**Note:** Version bump only for package @nymphjs/tilmeld-setup
+
+# [1.0.0-beta.21](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.20...v1.0.0-beta.21) (2023-05-01)
+
+**Note:** Version bump only for package @nymphjs/tilmeld-setup
+
+# [1.0.0-beta.20](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.19...v1.0.0-beta.20) (2023-04-30)
+
+### Features
+
+- let the user revoke all current auth tokens ([63af3b9](https://github.com/sciactive/nymphjs/commit/63af3b9a31c6c221ab40c2c8a69231675f4634a2))
+
+# [1.0.0-beta.19](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.18...v1.0.0-beta.19) (2023-04-29)
+
+**Note:** Version bump only for package @nymphjs/tilmeld-setup
+
+# [1.0.0-beta.18](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.17...v1.0.0-beta.18) (2023-04-27)
+
+### Bug Fixes
+
+- small type issues ([b91579c](https://github.com/sciactive/nymphjs/commit/b91579c9c1e96500d903332648f5a93c9a7e7d9b))
+
+### Features
+
+- add enforceTilmeld function ([130faf1](https://github.com/sciactive/nymphjs/commit/130faf151dcdfbfacd6814833868907dca037d24))
+- add the ability to switch to a user without their password ([ca4466a](https://github.com/sciactive/nymphjs/commit/ca4466af1704d68905ac087350a8cf151c1072d9))
+
+# [1.0.0-beta.17](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.16...v1.0.0-beta.17) (2023-04-24)
+
+### Features
+
+- add spa router to user admin app ([25bb344](https://github.com/sciactive/nymphjs/commit/25bb344f4d358eeb2254df98782f1cba229b5f50))
+
+# [1.0.0-beta.16](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.15...v1.0.0-beta.16) (2023-03-31)
+
+### Features
+
+- add ability to tell tilmeld to log in a specific user during authentication ([922e145](https://github.com/sciactive/nymphjs/commit/922e1452adae44bed2aa9655be16e19796acb39b))
+
+# [1.0.0-beta.15](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.14...v1.0.0-beta.15) (2023-03-23)
+
+**Note:** Version bump only for package @nymphjs/tilmeld-setup
+
+# [1.0.0-beta.14](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.13...v1.0.0-beta.14) (2023-03-17)
+
+**Note:** Version bump only for package @nymphjs/tilmeld-setup
+
+# [1.0.0-beta.13](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.12...v1.0.0-beta.13) (2023-03-16)
+
+**Note:** Version bump only for package @nymphjs/tilmeld-setup
+
+# [1.0.0-beta.12](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.11...v1.0.0-beta.12) (2023-03-04)
+
+### Bug Fixes
+
+- make sure all default exports are also named exports ([06da9a6](https://github.com/sciactive/nymphjs/commit/06da9a61d444860f70b7f5b95b824547d9880500))
+
+# [1.0.0-beta.11](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.10...v1.0.0-beta.11) (2023-02-27)
+
+**Note:** Version bump only for package @nymphjs/tilmeld-setup
+
+# [1.0.0-beta.10](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.9...v1.0.0-beta.10) (2023-01-19)
+
+**Note:** Version bump only for package @nymphjs/tilmeld-setup
+
+# [1.0.0-beta.9](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.8...v1.0.0-beta.9) (2023-01-09)
+
+**Note:** Version bump only for package @nymphjs/tilmeld-setup
+
+# [1.0.0-beta.8](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.7...v1.0.0-beta.8) (2023-01-09)
+
+### Features
+
+- make entities in nymph client instance specific too ([1029f06](https://github.com/sciactive/nymphjs/commit/1029f061a1ad193e4a8a2dab0186b9a4b517f646))
+
 # [1.0.0-beta.7](https://github.com/sciactive/nymphjs/compare/v1.0.0-beta.6...v1.0.0-beta.7) (2023-01-05)
 
 **Note:** Version bump only for package @nymphjs/tilmeld-setup

package/README.md

@@ -45,7 +45,7 @@ const nymph = new Nymph(
     verifyChangeRedirect: 'http://localhost',
     cancelChangeRedirect: 'http://localhost',
     jwtSecret: 'shhhhh',
-  })
+  }),
 );
 
 // Create your Express app.
@@ -53,15 +53,16 @@ const app = express();
 
 // Use the REST server.
 app.use('/rest', createServer(nymph));
-// Use the Tilmeld Setup App, passing in the Nymph Client Config.
+
+// Create Tilmeld setup app.
 app.use(
   '/user',
   setup(
     {
       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,20 +30,10 @@
         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>
-      <IconButton
-        href="https://twitter.com/SciActive"
-        target="_blank"
-        rel="noreferrer"
-        title="SciActive on Twitter"
-      >
-        <Icon component={Svg} viewBox="0 0 24 24">
-          <path fill="currentColor" d={mdiTwitter} />
-        </Icon>
-      </IconButton>
       <div>
         <IconButton
           title="Account"
@@ -74,7 +65,7 @@
       : 'hide-initial-small'}"
   >
     <Content>
-      <List>
+      <List tag="div">
         {#if tilmeldAdmin}
           {#each sections as section (section.name)}
             {#if 'separator' in section}
@@ -82,13 +73,14 @@
             {:else}
               <Item
                 bind:this={section.component}
-                nonInteractive={!('route' in section)}
-                on:click={() => {
-                  if ('route' in section) {
-                    active = section.route ?? Intro;
-                  }
-                }}
-                activated={active === section.route}
+                tag="a"
+                nonInteractive={!('href' in section)}
+                href={'href' in section ? `#${section.href}` : undefined}
+                activated={section.absolute
+                  ? `${currentMatch.route.path}/` === section.href
+                  : `${currentMatch.route.path}/`.startsWith(
+                      section.href ?? '!',
+                    )}
                 style={section.indent
                   ? 'margin-left: ' + section.indent * 25 + 'px;'
                   : ''}
@@ -98,11 +90,11 @@
             {/if}
           {/each}
         {:else if user == null}
-          <Item on:click={() => (drawerOpen = false)} activated>
+          <Item tag="span" on:click={() => (drawerOpen = false)} activated>
             <Text class="mdc-theme--on-secondary">Login</Text>
           </Item>
         {:else}
-          <Item on:click={() => (drawerOpen = false)} activated>
+          <Item tag="span" on:click={() => (drawerOpen = false)} activated>
             <Text class="mdc-theme--on-secondary">Forbidden</Text>
           </Item>
         {/if}
@@ -117,14 +109,20 @@
     <main class="tilmeld-main-content" bind:this={mainContent}>
       {#if tilmeldAdmin}
         {#if clientConfig}
-          <svelte:component this={active} />
+          <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} {clientConfig} />
+          <Login
+            {User}
+            {clientConfig}
+            showExistingUserToggle={allowRegistration}
+          />
         </section>
+      {:else if user === undefined}
+        Loading...
       {:else}
         <section>You don't have permission to access this app.</section>
       {/if}
@@ -134,41 +132,44 @@
 </div>
 
 <script lang="ts">
-  import { onMount, SvelteComponent } from 'svelte';
-  import type { ClientConfig, CurrentUserData } from '@nymphjs/tilmeld-client';
-  import { User } from '@nymphjs/tilmeld-client';
+  import type { ComponentType, SvelteComponent } from 'svelte';
+  import { onMount } from 'svelte';
+  import Navigo from 'navigo';
+  import type {
+    User as UserClass,
+    ClientConfig,
+    CurrentUserData,
+  } from '@nymphjs/tilmeld-client';
   import { Login, Account } from '@nymphjs/tilmeld-components';
-  import { mdiGithub, mdiMastodon, mdiTwitter } from '@mdi/js';
+  import { mdiGithub, mdiMastodon } from '@mdi/js';
   import TopAppBar, { Row, Section, Title } from '@smui/top-app-bar';
   import Drawer, { Content, Scrim, AppContent } from '@smui/drawer';
   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 Intro from './Intro.svelte';
-  import Users from './Users.svelte';
-  import Groups from './Groups.svelte';
-  import type { SvelteComponentDev } from 'svelte/internal';
+  import { User } from './nymph';
+  import Intro from './routes/Intro.svelte';
+  import Users from './routes/Users.svelte';
+  import UserEdit from './routes/UserEdit.svelte';
+  import Groups from './routes/Groups.svelte';
+  import GroupEdit from './routes/GroupEdit.svelte';
+  import NotFound from './routes/NotFound.svelte';
 
   const DEFAULT_AVATAR = 'https://secure.gravatar.com/avatar/?d=mm&s=40';
+  const allowRegistration = (window as any).allowRegistration;
 
   let mainContent: HTMLElement;
   let miniWindow = false;
   let drawerOpen = false;
   let accountMenu: any;
-  let active: typeof SvelteComponentDev = Intro;
   let clientConfig: ClientConfig;
-  let user: (User & CurrentUserData) | undefined = undefined;
+  let user: (UserClass & CurrentUserData) | null | undefined = undefined;
   let userAvatar: string = DEFAULT_AVATAR;
   let tilmeldAdmin: boolean | undefined = undefined;
   let accountOpen = false;
 
-  $: if (active && mainContent) {
-    drawerOpen = false;
-    mainContent.scrollTop = 0;
-  }
-
   $: if (user) {
     user.$gatekeeper('tilmeld/admin').then((value) => (tilmeldAdmin = value));
     user.$getAvatar().then((value) => (userAvatar = value));
@@ -177,18 +178,80 @@
     userAvatar = DEFAULT_AVATAR;
   }
 
+  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: (
     | {
         name: string;
         indent: number;
-        route?: typeof SvelteComponentDev;
+        href?: string;
+        absolute?: boolean;
         component?: SvelteComponent;
       }
     | { name: string; separator: true }
   )[] = [
     {
       name: 'Introduction',
-      route: Intro,
+      href: '/',
+      absolute: true,
       indent: 0,
     },
     {
@@ -197,31 +260,31 @@
     },
     {
       name: 'Users',
-      route: Users,
+      href: 'users/',
       indent: 0,
     },
     {
       name: 'Groups',
-      route: Groups,
+      href: 'groups/',
       indent: 0,
     },
   ];
 
-  const onLogin = (currentUser: User & CurrentUserData) => {
+  const onLogin = (currentUser: UserClass & CurrentUserData) => {
     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/{nymph.ts → src/nymph.ts}

@@ -1,17 +1,21 @@
 import type { NymphOptions } from '@nymphjs/client';
 import { Entity, Nymph } from '@nymphjs/client';
-import { User, Group } from '@nymphjs/tilmeld-client';
+import {
+  User as UserClass,
+  Group as GroupClass,
+} from '@nymphjs/tilmeld-client';
 
 const nymph = new Nymph(
-  (window as unknown as { nymphOptions: NymphOptions }).nymphOptions
+  (window as unknown as { nymphOptions: NymphOptions }).nymphOptions,
 );
-nymph.addEntityClass(User);
-nymph.addEntityClass(Group);
-
-export default nymph;
+const User = nymph.addEntityClass(UserClass);
+const Group = nymph.addEntityClass(GroupClass);
+User.init(nymph);
 
 // Helps with admin and debugging.
 (window as any).Entity = Entity;
 (window as any).User = User;
 (window as any).Group = Group;
 (window as any).nymph = nymph;
+
+export { nymph, User, Group };