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

package/app/src/App.svelte

@@ -1,12 +1,12 @@
-<svelte:window on:resize={setMiniWindow} />
+<svelte:window onresize={setMiniWindow} />
+
 <TopAppBar variant="static" class="tilmeld-top-app-bar">
   <Row>
     <Section>
       {#if miniWindow}
-        <IconButton
-          class="material-icons"
-          on:click={() => (drawerOpen = !drawerOpen)}>menu</IconButton
-        >
+        <IconButton onclick={() => (drawerOpen = !drawerOpen)}>
+          <Icon class="material-icons">menu</Icon>
+        </IconButton>
       {/if}
       <Title style={miniWindow ? 'padding-left: 0;' : ''}>
         {miniWindow ? 'Tilmeld Setup' : 'Tilmeld Setup App'}
@@ -14,13 +14,13 @@
     </Section>
     <Section align="end" toolbar style="color: var(--mdc-on-surface, #000);">
       <IconButton
-        href="https://github.com/sciactive/nymphjs"
+        href="https://forge.sciactive.com/sciactive/nymphjs"
         target="_blank"
         rel="noreferrer"
-        title="Nymph/Tilmeld on GitHub"
+        title="Nymph/Tilmeld on SciActive Forge"
       >
-        <Icon component={Svg} viewBox="0 0 24 24">
-          <path fill="currentColor" d={mdiGithub} />
+        <Icon tag="svg" viewBox="0 0 24 24">
+          <path fill="currentColor" d={mdiGit} />
         </Icon>
       </IconButton>
       <IconButton
@@ -29,34 +29,24 @@
         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"
-          on:click={() => user != null && accountMenu.setOpen(true)}
+          onclick={() => $user != null && accountMenu.setOpen(true)}
         >
           <Icon tag="img" src={userAvatar} />
         </IconButton>
         <Menu bind:this={accountMenu} anchorCorner="BOTTOM_LEFT">
           <List>
-            <Item on:SMUI:action={() => (accountOpen = true)}>
+            <Item onSMUIAction={() => (accountOpen = true)}>
               <Text>Account Details</Text>
             </Item>
             <Separator />
-            <Item on:SMUI:action={() => user?.$logout()}>
+            <Item onSMUIAction={() => $user?.$logout()}>
               <Text>Logout</Text>
             </Item>
           </List>
@@ -74,7 +64,7 @@
       : 'hide-initial-small'}"
   >
     <Content>
-      <List>
+      <List tag="div">
         {#if tilmeldAdmin}
           {#each sections as section (section.name)}
             {#if 'separator' in section}
@@ -82,13 +72,13 @@
             {: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"
+                use={[link]}
+                nonInteractive={!('href' in section)}
+                href={'href' in section ? section.href : undefined}
+                activated={section.absolute
+                  ? `${currentRoute}` === section.href
+                  : `${currentRoute}/`.startsWith(section.href ?? '!')}
                 style={section.indent
                   ? 'margin-left: ' + section.indent * 25 + 'px;'
                   : ''}
@@ -97,12 +87,12 @@
               </Item>
             {/if}
           {/each}
-        {:else if user == null}
-          <Item on:click={() => (drawerOpen = false)} activated>
+        {:else if $user == null}
+          <Item tag="span" onclick={() => (drawerOpen = false)} activated>
             <Text class="mdc-theme--on-secondary">Login</Text>
           </Item>
         {:else}
-          <Item on:click={() => (drawerOpen = false)} activated>
+          <Item tag="span" onclick={() => (drawerOpen = false)} activated>
             <Text class="mdc-theme--on-secondary">Forbidden</Text>
           </Item>
         {/if}
@@ -116,83 +106,124 @@
   <AppContent class="tilmeld-app-content">
     <main class="tilmeld-main-content" bind:this={mainContent}>
       {#if tilmeldAdmin}
-        {#if clientConfig}
-          <svelte:component this={active} />
+        {#if $clientConfig}
+          {#key currentLocation}
+            <Router {routes} {onRouteLoaded} />
+          {/key}
         {: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}
-      <Account bind:open={accountOpen} {User} {clientConfig} />
+      <Account bind:open={accountOpen} {User} {user} {clientConfig} />
     </main>
   </AppContent>
 </div>
 
 <script lang="ts">
-  import { onMount, SvelteComponent } from 'svelte';
+  import type { Component } from 'svelte';
+  import { onMount, setContext } from 'svelte';
+  import type { Writable } from 'svelte/store';
+  import { writable } from 'svelte/store';
+  import Router, { link, type RouteDetailLoaded } from 'svelte-spa-router';
   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 { mdiGit, 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 { User } from './nymph';
-  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.js';
+  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 miniWindow = $state(false);
+  let drawerOpen = $state(false);
   let accountMenu: any;
-  let active: typeof SvelteComponentDev = Intro;
-  let clientConfig: ClientConfig;
-  let user: (UserClass & CurrentUserData) | undefined = undefined;
-  let userAvatar: string = DEFAULT_AVATAR;
-  let tilmeldAdmin: boolean | undefined = undefined;
-  let accountOpen = false;
-
-  $: if (active && mainContent) {
-    drawerOpen = false;
-    mainContent.scrollTop = 0;
-  }
+  let clientConfig: Writable<ClientConfig | undefined> = writable();
+  let user: Writable<(UserClass & CurrentUserData) | null | undefined> =
+    writable();
+  let userAvatar: string = $state(DEFAULT_AVATAR);
+  let tilmeldAdmin: boolean | undefined = $state();
+  let accountOpen = $state(false);
+
+  setContext('clientConfigStore', clientConfig);
+  setContext('userStore', user);
 
-  $: if (user) {
-    user.$gatekeeper('tilmeld/admin').then((value) => (tilmeldAdmin = value));
-    user.$getAvatar().then((value) => (userAvatar = value));
-  } else {
-    tilmeldAdmin = undefined;
-    userAvatar = DEFAULT_AVATAR;
+  $effect(() => {
+    if ($user) {
+      $user
+        .$gatekeeper('tilmeld/admin')
+        .then((value) => (tilmeldAdmin = value));
+      $user.$getAvatar().then((value) => (userAvatar = value));
+    } else {
+      tilmeldAdmin = undefined;
+      userAvatar = DEFAULT_AVATAR;
+    }
+  });
+
+  let currentRoute = $state('/');
+  let currentLocation = $state('/');
+
+  const routes = {
+    '/': Intro,
+    '/users/edit/:guid': UserEdit,
+    '/users/:query?': Users,
+    '/groups/edit/:guid': GroupEdit,
+    '/groups/:query?': Groups,
+    '*': NotFound,
+  };
+
+  function onRouteLoaded(detail: RouteDetailLoaded) {
+    if (mainContent) {
+      drawerOpen = false;
+      mainContent.scrollTop = 0;
+    }
+
+    currentRoute = `${detail?.route ?? '/'}`;
+    currentLocation = `${detail?.location ?? '/'}`;
   }
 
   const sections: (
     | {
         name: string;
         indent: number;
-        route?: typeof SvelteComponentDev;
-        component?: SvelteComponent;
+        href?: string;
+        absolute?: boolean;
+        component?: ReturnType<Component<any>>;
       }
     | { name: string; separator: true }
   )[] = [
     {
       name: 'Introduction',
-      route: Intro,
+      href: '/',
+      absolute: true,
       indent: 0,
     },
     {
@@ -201,31 +232,37 @@
     },
     {
       name: 'Users',
-      route: Users,
+      href: '/users/',
       indent: 0,
     },
     {
       name: 'Groups',
-      route: Groups,
+      href: '/groups/',
       indent: 0,
     },
   ];
 
   const onLogin = (currentUser: UserClass & CurrentUserData) => {
-    user = currentUser;
+    $user = currentUser;
+    // Helps with admin and debugging.
+    (window as any).user = currentUser;
   };
   const onLogout = () => {
-    user = undefined;
+    $user = null;
+    // Helps with admin and debugging.
+    (window as any).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();
+
+    $clientConfig = await User.getClientConfig();
+
+    $user = await User.current();
+    // Helps with admin and debugging.
+    (window as any).user = $user;
   });
 
   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);