@nymphjs/tilmeld-components 1.0.0-beta.13 → 1.0.0-beta.131

package/src/Login.svelte

@@ -1,8 +1,9 @@
+<svelte:options runes />
+
 <div
   style="width: {width}; {style}"
   use:useActions={use}
-  use:forwardEvents
-  {...exclude($$restProps, [
+  {...exclude(restProps, [
     'successRegisteredMessage$',
     'successLoginMessage$',
     'username$',
@@ -11,6 +12,8 @@
     'name$',
     'email$',
     'phone$',
+    'code$',
+    'codeMessage$',
     'loginButton$',
     'registerButton$',
     'registerLink$',
@@ -20,46 +23,82 @@
     'progress$',
   ])}
 >
-  {#if clientConfig == null || registering || loggingIn}
+  {#if $clientConfig == null || loading}
     <div style="display: flex; justify-content: center; align-items: center;">
       <CircularProgress
         style="height: 32px; width: 32px;"
         indeterminate
-        {...prefixFilter($$restProps, 'progress$')}
+        {...prefixFilter(restProps, 'progress$')}
       />
     </div>
   {:else if successRegisteredMessage}
-    <div {...prefixFilter($$restProps, 'successRegisteredMessage$')}>
+    <div {...prefixFilter(restProps, 'successRegisteredMessage$')}>
       {successRegisteredMessage}
     </div>
   {:else if successLoginMessage}
-    <div {...prefixFilter($$restProps, 'successLoginMessage$')}>
+    <div {...prefixFilter(restProps, 'successLoginMessage$')}>
       {successLoginMessage}
     </div>
+  {:else if totp}
+    <form onsubmit={(e) => e.preventDefault()}>
+      <div {...prefixFilter(restProps, 'codeMessage$')}>
+        Enter the 6-digit 2FA code from your authenticator app.
+      </div>
+
+      <div>
+        <Textfield
+          bind:value={code}
+          label="2FA Code"
+          style="width: 100%;"
+          input$autocomplete="one-time-code"
+          input$name="one-time-code"
+          {...prefixFilter(restProps, 'code$')}
+        />
+      </div>
+
+      {#if failureMessage}
+        <div class="tilmeld-login-failure">
+          {failureMessage}
+        </div>
+      {/if}
+
+      <div class="tilmeld-login-buttons">
+        <Button
+          variant="raised"
+          type="submit"
+          onclick={login}
+          {...prefixFilter(restProps, 'loginButton$')}
+        >
+          <Label>Log In</Label>
+        </Button>
+      </div>
+    </form>
   {:else}
-    <form on:submit|preventDefault>
+    <form onsubmit={(e) => e.preventDefault()}>
       <div>
         <Textfield
           bind:value={username}
           bind:this={usernameElem}
-          label={clientConfig.emailUsernames ? 'Email' : 'Username'}
-          type={clientConfig.emailUsernames ? 'email' : 'text'}
+          label={$clientConfig.emailUsernames ? 'Email' : 'Username'}
+          type={$clientConfig.emailUsernames ? 'email' : 'text'}
           style="width: 100%;"
           helperLine$style="width: 100%;"
           invalid={usernameVerified === false}
-          input$autocomplete={clientConfig.emailUsernames
+          input$autocomplete={$clientConfig.emailUsernames
             ? 'email'
             : 'username'}
-          input$name={clientConfig.emailUsernames ? 'email' : 'username'}
+          input$name={$clientConfig.emailUsernames ? 'email' : 'username'}
           input$autocapitalize="off"
           input$spellcheck="false"
-          {...prefixFilter($$restProps, 'username$')}
+          {...prefixFilter(restProps, 'username$')}
         >
-          <HelperText persistent slot="helper">
-            {#if mode !== 'login'}
-              {usernameVerifiedMessage || ''}
-            {/if}
-          </HelperText>
+          {#snippet helper()}
+            <HelperText persistent>
+              {#if mode !== 'login'}
+                {usernameVerifiedMessage || ''}
+              {/if}
+            </HelperText>
+          {/snippet}
         </Textfield>
       </div>
 
@@ -69,16 +108,16 @@
           label="Password"
           type="password"
           style="width: 100%;"
-          input$autocomplete="{clientConfig.allowRegistration &&
+          input$autocomplete="{$clientConfig.allowRegistration &&
           mode !== 'login'
             ? 'new'
             : 'current'}-password"
           input$name="password"
-          {...prefixFilter($$restProps, 'password$')}
+          {...prefixFilter(restProps, 'password$')}
         />
       </div>
 
-      {#if clientConfig.allowRegistration && mode !== 'login'}
+      {#if $clientConfig.allowRegistration && mode !== 'login'}
         <div>
           <Textfield
             bind:value={password2}
@@ -87,11 +126,11 @@
             style="width: 100%;"
             input$autocomplete="new-password"
             input$name="password2"
-            {...prefixFilter($$restProps, 'password2$')}
+            {...prefixFilter(restProps, 'password2$')}
           />
         </div>
 
-        {#if clientConfig.regFields.indexOf('name') !== -1}
+        {#if $clientConfig.regFields.includes('name')}
           <div>
             <Textfield
               bind:value={name}
@@ -100,12 +139,12 @@
               style="width: 100%;"
               input$autocomplete="name"
               input$name="name"
-              {...prefixFilter($$restProps, 'name$')}
+              {...prefixFilter(restProps, 'name$')}
             />
           </div>
         {/if}
 
-        {#if !clientConfig.emailUsernames && clientConfig.regFields.indexOf('email') !== -1}
+        {#if !$clientConfig.emailUsernames && $clientConfig.regFields.includes('email')}
           <div>
             <Textfield
               bind:value={email}
@@ -116,12 +155,12 @@
               input$name="email"
               input$autocapitalize="off"
               input$spellcheck="false"
-              {...prefixFilter($$restProps, 'email$')}
+              {...prefixFilter(restProps, 'email$')}
             />
           </div>
         {/if}
 
-        {#if clientConfig.regFields.indexOf('phone') !== -1}
+        {#if $clientConfig.regFields.includes('phone')}
           <div>
             <Textfield
               bind:value={phone}
@@ -130,13 +169,13 @@
               style="width: 100%;"
               input$autocomplete="tel"
               input$name="phone"
-              {...prefixFilter($$restProps, 'phone$')}
+              {...prefixFilter(restProps, 'phone$')}
             />
           </div>
         {/if}
       {/if}
 
-      <slot name="additional" />
+      {@render additional?.()}
 
       {#if failureMessage}
         <div class="tilmeld-login-failure">
@@ -149,8 +188,8 @@
           <Button
             variant="raised"
             type="submit"
-            on:click={login}
-            {...prefixFilter($$restProps, 'loginButton$')}
+            onclick={login}
+            {...prefixFilter(restProps, 'loginButton$')}
           >
             <Label>Log In</Label>
           </Button>
@@ -158,29 +197,29 @@
           <Button
             variant="raised"
             type="submit"
-            on:click={register}
-            {...prefixFilter($$restProps, 'registerButton$')}
+            onclick={register}
+            {...prefixFilter(restProps, 'registerButton$')}
           >
             <Label>Create Account</Label>
           </Button>
         {/if}
       </div>
 
-      {#if clientConfig.allowRegistration && showExistingUserToggle}
+      {#if $clientConfig.allowRegistration && showExistingUserToggle}
         <div class="tilmeld-login-action">
           {#if mode === 'login'}
             <a
-              href="javascript:void(0);"
-              on:click={() => (mode = 'register')}
-              {...prefixFilter($$restProps, 'registerLink$')}
+              href={'javascript:void(0);'}
+              onclick={() => (mode = 'register')}
+              {...prefixFilter(restProps, 'registerLink$')}
             >
               Create an account.
             </a>
           {:else}
             <a
-              href="javascript:void(0);"
-              on:click={() => (mode = 'login')}
-              {...prefixFilter($$restProps, 'loginLink$')}
+              href={'javascript:void(0);'}
+              onclick={() => (mode = 'login')}
+              {...prefixFilter(restProps, 'loginLink$')}
             >
               Log in to your account.
             </a>
@@ -188,12 +227,12 @@
         </div>
       {/if}
 
-      {#if !hideRecovery && clientConfig.pwRecovery && mode === 'login'}
+      {#if !hideRecovery && $clientConfig.userFields.includes('email') && $clientConfig.pwRecovery && mode === 'login'}
         <div class="tilmeld-login-action">
           <a
-            href="javascript:void(0);"
-            on:click={() => (recoverOpen = true)}
-            {...prefixFilter($$restProps, 'recoverLink$')}
+            href={'javascript:void(0);'}
+            onclick={() => (recoverOpen = true)}
+            {...prefixFilter(restProps, 'recoverLink$')}
           >
             I can't access my account.
           </a>
@@ -202,7 +241,7 @@
           {User}
           bind:open={recoverOpen}
           bind:clientConfig
-          {...prefixFilter($$restProps, 'recover$')}
+          {...prefixFilter(restProps, 'recover$')}
         />
       {/if}
     </form>
@@ -210,95 +249,253 @@
 </div>
 
 <script lang="ts">
-  import { onMount, createEventDispatcher } from 'svelte';
-  import { get_current_component } from 'svelte/internal';
+  import type { ComponentProps, Snippet } from 'svelte';
+  import { onMount } from 'svelte';
+  import type { Writable } from 'svelte/store';
+  import { writable } from 'svelte/store';
   import CircularProgress from '@smui/circular-progress';
   import Button, { Label } from '@smui/button';
   import Textfield from '@smui/textfield';
   import HelperText from '@smui/textfield/helper-text';
   import type { ActionArray } from '@smui/common/internal';
-  import {
-    forwardEventsBuilder,
-    exclude,
-    prefixFilter,
-    useActions,
-  } from '@smui/common/internal';
+  import { exclude, prefixFilter, useActions } from '@smui/common/internal';
+  import type { SmuiElementPropMap } from '@smui/common';
   import type {
     User as UserClass,
     ClientConfig,
+    UserData,
+    CurrentUserData,
   } from '@nymphjs/tilmeld-client';
   import {
     login as loginAction,
     register as registerAction,
     checkUsername as checkUsernameAction,
+    NeedTOTPError,
   } from '@nymphjs/tilmeld-client';
   import Recover from './Recover.svelte';
 
-  const forwardEvents = forwardEventsBuilder(get_current_component());
-  const dispatch = createEventDispatcher();
-
-  export let use: ActionArray = [];
-  export let style = '';
-  export let clientConfig: ClientConfig | undefined = undefined;
-  export let User: typeof UserClass;
-
-  /** Hide the recovery link that only appears if password recovery is on. */
-  export let hideRecovery = false;
-  /** Give focus to the username box (or email box) when the form is ready. */
-  export let autofocus = true;
-  /** This determines whether the 'Log In' or 'Sign Up' button is activated and which corresponding form is shown. */
-  export let mode: 'login' | 'register' = 'login';
-  /** Whether to show the 'Log In'/'Sign Up' switcher buttons. */
-  export let showExistingUserToggle = true;
-  /** The width of the form. */
-  export let width = '220px';
+  type OwnProps = {
+    /**
+     * An array of Action or [Action, ActionProps] to be applied to the element.
+     */
+    use?: ActionArray;
+    /**
+     * A list of CSS styles.
+     */
+    style?: string;
+    /**
+     * A writable store of the Nymph client config.
+     *
+     * It will be retrieved from the server if not provided.
+     */
+    clientConfig?: Writable<ClientConfig | undefined>;
+    /**
+     * The User class from Nymph.
+     */
+    User: typeof UserClass;
+    /**
+     * Hide the recovery link that only appears if password recovery is on.
+     */
+    hideRecovery?: boolean;
+    /**
+     * Give focus to the username box (or email box) when the form is ready.
+     */
+    autofocus?: boolean;
+    /**
+     * This determines whether the 'Log In' or 'Sign Up' button is activated
+     * and which corresponding form is shown.
+     */
+    mode?: 'login' | 'register';
+    /**
+     * Whether to show the 'Log In'/'Sign Up' switcher buttons.
+     */
+    showExistingUserToggle?: boolean;
+    /**
+     * The width of the form.
+     */
+    width?: string;
+    /**
+     * User provided. You can bind to it if you need to.
+     */
+    username?: string;
+    /**
+     * User provided. You can bind to it if you need to.
+     */
+    password?: string;
+    /**
+     * User provided. You can bind to it if you need to.
+     */
+    password2?: string;
+    /**
+     * User provided. You can bind to it if you need to.
+     */
+    name?: string;
+    /**
+     * User provided. You can bind to it if you need to.
+     */
+    email?: string;
+    /**
+     * User provided. You can bind to it if you need to.
+     */
+    phone?: string;
+    /**
+     * User provided. You can bind to it if you need to.
+     */
+    code?: string;
+    /**
+     * Provide this for anything else that should go up to the server.
+     *
+     * You can look for it in the User events.
+     */
+    additionalData?: { [k: string]: any };
 
-  /** User provided. You can bind to it if you need to. */
-  export let username = '';
-  /** User provided. You can bind to it if you need to. */
-  export let password = '';
-  /** User provided. You can bind to it if you need to. */
-  export let password2 = '';
-  /** User provided. You can bind to it if you need to. */
-  export let name = '';
-  /** User provided. You can bind to it if you need to. */
-  export let email = '';
-  /** User provided. You can bind to it if you need to. */
-  export let phone = '';
+    /**
+     * A spot for additional content.
+     */
+    additional?: Snippet;
 
-  /** Provide this for anything else that should go up to the server. You can look for it in the User events. */
-  export let additionalData: { [k: string]: any } | undefined = undefined;
+    /**
+     * A callback to be called when a user is registered.
+     */
+    onregister?: (details: {
+      user: UserClass & UserData & CurrentUserData;
+    }) => void;
+    /**
+     * A callback to be called when a user is logged in.
+     */
+    onlogin?: (details: {
+      user: UserClass & UserData & CurrentUserData;
+    }) => void;
+  };
+  let {
+    use = [],
+    style = '',
+    clientConfig = $bindable(writable(false as unknown as undefined)),
+    User,
+    hideRecovery = false,
+    autofocus = true,
+    mode = $bindable('login'),
+    showExistingUserToggle = true,
+    width = '220px',
+    username = $bindable(''),
+    password = $bindable(''),
+    password2 = $bindable(''),
+    name = $bindable(''),
+    email = $bindable(''),
+    phone = $bindable(''),
+    code = $bindable(''),
+    additionalData,
+    additional,
+    onregister,
+    onlogin,
+    ...restProps
+  }: OwnProps & {
+    [
+      k in keyof SmuiElementPropMap['div'] as `successRegisteredMessage\$${k}`
+    ]?: SmuiElementPropMap['div'][k];
+  } & {
+    [
+      k in keyof SmuiElementPropMap['div'] as `successLoginMessage\$${k}`
+    ]?: SmuiElementPropMap['div'][k];
+  } & {
+    [
+      k in keyof ComponentProps<typeof Textfield> as `username\$${k}`
+    ]?: ComponentProps<typeof Textfield>[k];
+  } & {
+    [
+      k in keyof ComponentProps<typeof Textfield> as `password\$${k}`
+    ]?: ComponentProps<typeof Textfield>[k];
+  } & {
+    [
+      k in keyof ComponentProps<typeof Textfield> as `password2\$${k}`
+    ]?: ComponentProps<typeof Textfield>[k];
+  } & {
+    [
+      k in keyof ComponentProps<typeof Textfield> as `name\$${k}`
+    ]?: ComponentProps<typeof Textfield>[k];
+  } & {
+    [
+      k in keyof ComponentProps<typeof Textfield> as `email\$${k}`
+    ]?: ComponentProps<typeof Textfield>[k];
+  } & {
+    [
+      k in keyof ComponentProps<typeof Textfield> as `phone\$${k}`
+    ]?: ComponentProps<typeof Textfield>[k];
+  } & {
+    [
+      k in keyof ComponentProps<typeof Textfield> as `code\$${k}`
+    ]?: ComponentProps<typeof Textfield>[k];
+  } & {
+    [
+      k in keyof SmuiElementPropMap['div'] as `codeMessage\$${k}`
+    ]?: SmuiElementPropMap['div'][k];
+  } & {
+    [
+      k in keyof ComponentProps<typeof CircularProgress> as `progress\$${k}`
+    ]?: ComponentProps<typeof CircularProgress>[k];
+  } & {
+    [
+      k in keyof ComponentProps<
+        typeof Button<undefined, 'button'>
+      > as `loginButton\$${k}`
+    ]?: ComponentProps<typeof Button<undefined, 'button'>>[k];
+  } & {
+    [
+      k in keyof ComponentProps<
+        typeof Button<undefined, 'button'>
+      > as `registerButton\$${k}`
+    ]?: ComponentProps<typeof Button<undefined, 'button'>>[k];
+  } & {
+    [
+      k in keyof SmuiElementPropMap['a'] as `registerLink\$${k}`
+    ]?: SmuiElementPropMap['a'][k];
+  } & {
+    [
+      k in keyof SmuiElementPropMap['a'] as `loginLink\$${k}`
+    ]?: SmuiElementPropMap['a'][k];
+  } & {
+    [
+      k in keyof SmuiElementPropMap['a'] as `recoverLink\$${k}`
+    ]?: SmuiElementPropMap['a'][k];
+  } & {
+    [
+      k in keyof ComponentProps<typeof Recover> as `recover\$${k}`
+    ]?: ComponentProps<typeof Recover>[k];
+  } = $props();
 
-  let usernameElem: Textfield;
-  let successLoginMessage: string | undefined = undefined;
-  let successRegisteredMessage: string | undefined = undefined;
-  let failureMessage: string | undefined = undefined;
-  let usernameTimer: NodeJS.Timeout | undefined = undefined;
-  let usernameVerified: boolean | undefined = undefined;
-  let usernameVerifiedMessage: string | undefined = undefined;
-  let registering = false;
-  let loggingIn = false;
-  let recoverOpen = false;
+  let usernameElem: Textfield | undefined = $state();
+  let successLoginMessage: string | undefined = $state();
+  let successRegisteredMessage: string | undefined = $state();
+  let failureMessage: string | undefined = $state();
+  let usernameTimer: number | undefined = undefined;
+  let usernameVerified: boolean | undefined = $state();
+  let usernameVerifiedMessage: string | undefined = $state();
+  let totp = $state(false);
+  let loading = $state(false);
+  let recoverOpen = $state(false);
 
-  $: nameFirst = name?.match(/^(.*?)(?: ([^ ]+))?$/)?.[1] ?? '';
-  $: nameLast = name?.match(/^(.*?)(?: ([^ ]+))?$/)?.[2] ?? '';
+  const nameFirst = $derived(name?.match(/^(.*?)(?: ([^ ]+))?$/)?.[1] ?? '');
+  const nameLast = $derived(name?.match(/^(.*?)(?: ([^ ]+))?$/)?.[2] ?? '');
 
   let _previousMode = mode;
-  $: if (mode !== _previousMode) {
-    failureMessage = '';
-    checkUsername(username);
-    _previousMode = mode;
-  }
+  $effect(() => {
+    if (mode !== _previousMode) {
+      failureMessage = '';
+      checkUsername(username);
+      _previousMode = mode;
+    }
+  });
 
-  $: {
+  $effect(() => {
     checkUsername(username);
-  }
+  });
 
   onMount(async () => {
-    if (clientConfig === undefined) {
-      clientConfig = await User.getClientConfig();
+    if ($clientConfig === (false as unknown as undefined)) {
+      $clientConfig = undefined;
+      $clientConfig = await User.getClientConfig();
     }
-    if (!clientConfig.allowRegistration) {
+    if (!$clientConfig.allowRegistration) {
       mode = 'login';
     }
     if (autofocus && usernameElem) {
@@ -309,22 +506,34 @@
   async function login() {
     successLoginMessage = undefined;
     failureMessage = undefined;
-    loggingIn = true;
+    loading = true;
     try {
-      const data = await loginAction(User, username, password, additionalData);
+      const data = await loginAction(
+        User,
+        username,
+        password,
+        code,
+        additionalData,
+      );
       successLoginMessage = data.message;
-      dispatch('login', { user: data.user });
+      if (data.user) {
+        onlogin?.({ user: data.user });
+      }
     } catch (e: any) {
-      failureMessage = e?.message;
+      if (e instanceof NeedTOTPError) {
+        totp = true;
+      } else {
+        failureMessage = e?.message;
+      }
     }
-    loggingIn = false;
+    loading = false;
   }
 
   async function register() {
     successRegisteredMessage = undefined;
     successLoginMessage = undefined;
     failureMessage = undefined;
-    registering = true;
+    loading = true;
     try {
       const data = await registerAction(User, {
         username,
@@ -338,15 +547,19 @@
         ...(additionalData ? { additionalData } : {}),
       });
       successRegisteredMessage = data.message;
-      dispatch('register', { user: data.user });
+      if (data.user) {
+        onregister?.({ user: data.user });
+      }
       if (data.loggedin) {
         successLoginMessage = data.message;
-        dispatch('login', { user: data.user });
+        if (data.user) {
+          onlogin?.({ user: data.user });
+        }
       }
     } catch (e: any) {
       failureMessage = e?.message;
     }
-    registering = false;
+    loading = false;
   }
 
   function checkUsername(newValue: string) {