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

package/src/Recover.svelte

@@ -1,11 +1,13 @@
-{#if clientConfig != null && clientConfig.pwRecovery}
+<svelte:options runes />
+
+{#if $clientConfig != null && $clientConfig.pwRecovery}
   <Dialog
-    use={usePass}
+    {use}
     bind:open
     aria-labelledby="tilmeld-recovery-title"
     aria-describedby="tilmeld-recovery-content"
     surface$class="tilmeld-recover-dialog-surface"
-    {...exclude($$restProps, [
+    {...exclude(restProps, [
       'recoveryTypePassword$',
       'recoveryTypeUsername$',
       'account$',
@@ -27,23 +29,27 @@
         {successRecoveredMessage}
       {:else}
         {#if !hasSentSecret}
-          {#if !clientConfig.emailUsernames}
+          {#if !$clientConfig.emailUsernames}
             <div>
               <FormField style="margin-right: 1em;">
                 <Radio
                   bind:group={recoveryType}
                   value="password"
-                  {...prefixFilter($$restProps, 'recoveryTypePassword$')}
+                  {...prefixFilter(restProps, 'recoveryTypePassword$')}
                 />
-                <span slot="label">I don't know my password.</span>
+                {#snippet label()}
+                  I don't know my password.
+                {/snippet}
               </FormField>
               <FormField style="margin-right: 1em;">
                 <Radio
                   bind:group={recoveryType}
                   value="username"
-                  {...prefixFilter($$restProps, 'recoveryTypeUsername$')}
+                  {...prefixFilter(restProps, 'recoveryTypeUsername$')}
                 />
-                <span slot="label">I don't know my username.</span>
+                {#snippet label()}
+                  I don't know my username.
+                {/snippet}
               </FormField>
             </div>
           {/if}
@@ -51,7 +57,7 @@
           <div>
             {#if recoveryType === 'password'}
               <p>
-                To reset your password, type the {clientConfig.emailUsernames
+                To reset your password, type the {$clientConfig.emailUsernames
                   ? 'email'
                   : 'username'}
                 you use to sign in below.
@@ -69,28 +75,28 @@
             <Textfield
               bind:this={accountElem}
               bind:value={account}
-              label={clientConfig.emailUsernames || recoveryType === 'username'
+              label={$clientConfig.emailUsernames || recoveryType === 'username'
                 ? 'Email Address'
                 : 'Username'}
-              type={clientConfig.emailUsernames || recoveryType === 'username'
+              type={$clientConfig.emailUsernames || recoveryType === 'username'
                 ? 'email'
                 : 'text'}
-              input$autocomplete={clientConfig.emailUsernames ||
+              input$autocomplete={$clientConfig.emailUsernames ||
               recoveryType === 'username'
                 ? 'email'
                 : 'username'}
               input$autocapitalize="off"
               input$spellcheck="false"
-              {...prefixFilter($$restProps, 'account$')}
+              {...prefixFilter(restProps, 'account$')}
             />
           </div>
 
           {#if recoveryType === 'password'}
             <div class="tilmeld-recover-action">
               <a
-                href="javascript:void(0);"
-                on:click={() => (hasSentSecret = 1)}
-                {...prefixFilter($$restProps, 'alreadyGotCodeLink$')}
+                href={'javascript:void(0);'}
+                onclick={() => (hasSentSecret = 1)}
+                {...prefixFilter(restProps, 'alreadyGotCodeLink$')}
               >
                 Already Got a Code?
               </a>
@@ -98,7 +104,7 @@
           {/if}
         {:else}
           <div>
-            <p {...prefixFilter($$restProps, 'codeSentMessage$')}>
+            <p {...prefixFilter(restProps, 'codeSentMessage$')}>
               A code has been sent to you by email. Enter that code here, and a
               new password for your account.
             </p>
@@ -109,16 +115,16 @@
               <Textfield
                 bind:this={accountElem}
                 bind:value={account}
-                label={clientConfig.emailUsernames
+                label={$clientConfig.emailUsernames
                   ? 'Email Address'
                   : 'Username'}
-                type={clientConfig.emailUsernames ? 'email' : 'text'}
-                input$autocomplete={clientConfig.emailUsernames
+                type={$clientConfig.emailUsernames ? 'email' : 'text'}
+                input$autocomplete={$clientConfig.emailUsernames
                   ? 'email'
                   : 'username'}
                 input$autocapitalize="off"
                 input$spellcheck="false"
-                {...prefixFilter($$restProps, 'account$')}
+                {...prefixFilter(restProps, 'account$')}
               />
             </div>
           {/if}
@@ -129,7 +135,7 @@
               label="Recovery Code"
               type="text"
               input$autocomplete="one-time-code"
-              {...prefixFilter($$restProps, 'recoveryCode$')}
+              {...prefixFilter(restProps, 'recoveryCode$')}
             />
           </div>
 
@@ -139,7 +145,7 @@
               label="Password"
               type="password"
               input$autocomplete="new-password"
-              {...prefixFilter($$restProps, 'password$')}
+              {...prefixFilter(restProps, 'password$')}
             />
           </div>
 
@@ -149,15 +155,15 @@
               label="Re-enter Password"
               type="password"
               input$autocomplete="new-password"
-              {...prefixFilter($$restProps, 'password2$')}
+              {...prefixFilter(restProps, 'password2$')}
             />
           </div>
 
           <div class="tilmeld-recover-action">
             <a
-              href="javascript:void(0);"
-              on:click={() => (hasSentSecret = false)}
-              {...prefixFilter($$restProps, 'needCodeLink$')}
+              href={'javascript:void(0);'}
+              onclick={() => (hasSentSecret = false)}
+              {...prefixFilter(restProps, 'needCodeLink$')}
             >
               Need a New Code?
             </a>
@@ -170,35 +176,35 @@
           </div>
         {/if}
 
-        {#if recovering}
+        {#if loading}
           <div class="tilmeld-recover-loading">
             <CircularProgress
               style="height: 24px; width: 24px;"
               indeterminate
-              {...prefixFilter($$restProps, 'progress$')}
+              {...prefixFilter(restProps, 'progress$')}
             />
           </div>
         {/if}
       {/if}
     </Content>
     <Actions>
-      <Button on:click={() => (open = false)} disabled={recovering}>
+      <Button onclick={() => (open = false)} disabled={loading}>
         <Label>{successRecoveredMessage ? 'Close' : 'Cancel'}</Label>
       </Button>
       {#if !successRecoveredMessage}
         {#if !hasSentSecret}
           <Button
-            on:click$preventDefault$stopPropagation={sendRecovery}
-            disabled={recovering}
-            {...prefixFilter($$restProps, 'sendCodeButton$')}
+            onclick={preventDefault(stopPropagation(sendRecovery))}
+            disabled={loading}
+            {...prefixFilter(restProps, 'sendCodeButton$')}
           >
             <Label>Send Recovery</Label>
           </Button>
         {:else}
           <Button
-            on:click$preventDefault$stopPropagation={recover}
-            disabled={recovering}
-            {...prefixFilter($$restProps, 'resetPasswordButton$')}
+            onclick={preventDefault(stopPropagation(recover))}
+            disabled={loading}
+            {...prefixFilter(restProps, 'resetPasswordButton$')}
           >
             <Label>Reset Password</Label>
           </Button>
@@ -209,8 +215,10 @@
 {/if}
 
 <script lang="ts">
+  import type { ComponentProps } from 'svelte';
   import { onMount } from 'svelte';
-  import { get_current_component } from 'svelte/internal';
+  import type { Writable } from 'svelte/store';
+  import { writable } from 'svelte/store';
   import CircularProgress from '@smui/circular-progress';
   import Dialog, { Title, Content, Actions } from '@smui/dialog';
   import Textfield from '@smui/textfield';
@@ -218,53 +226,147 @@
   import FormField from '@smui/form-field';
   import Radio from '@smui/radio';
   import type { ActionArray } from '@smui/common/internal';
-  import {
-    forwardEventsBuilder,
-    exclude,
-    prefixFilter,
-  } from '@smui/common/internal';
+  import { exclude, prefixFilter } from '@smui/common/internal';
+  import { preventDefault, stopPropagation } from '@smui/common/events';
+  import type { SmuiElementPropMap } from '@smui/common';
   import type {
     User as UserClass,
     ClientConfig,
   } from '@nymphjs/tilmeld-client';
 
-  const forwardEvents = forwardEventsBuilder(get_current_component());
-
-  export let use: ActionArray = [];
-  $: usePass = [forwardEvents, ...use] as ActionArray;
-  export let open = false;
-  export let title = 'Recover Your Account';
-  export let clientConfig: ClientConfig | undefined = undefined;
-  export let User: typeof UserClass;
-
-  // Give focus to the account box when the form is ready.
-  export let autofocus = true;
-  export let recoveryType: 'username' | 'password' = 'password';
+  type OwnProps = {
+    /**
+     * An array of Action or [Action, ActionProps] to be applied to the element.
+     */
+    use?: ActionArray;
+    /**
+     * Whether the dialog is open.
+     */
+    open?: boolean;
+    /**
+     * The title of the dialog.
+     */
+    title?: 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;
+    /**
+     * Give focus to the account box when the form is ready.
+     */
+    autofocus?: boolean;
+    /**
+     * The type of recovery being requested.
+     *
+     * User provided. You can bind to it if you need to.
+     */
+    recoveryType?: 'username' | 'password';
+    /**
+     * User provided. You can bind to it if you need to.
+     */
+    account?: string;
+    /**
+     * User provided. You can bind to it if you need to.
+     */
+    secret?: 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;
+  };
+  let {
+    use = [],
+    open = $bindable(false),
+    title = 'Recover Your Account',
+    clientConfig = $bindable(writable(false as unknown as undefined)),
+    User,
+    autofocus = true,
+    recoveryType = $bindable('password'),
+    account = $bindable(''),
+    secret = $bindable(''),
+    password = $bindable(''),
+    password2 = $bindable(''),
+    ...restProps
+  }: OwnProps & {
+    [
+      k in keyof ComponentProps<typeof Radio> as `recoveryTypePassword\$${k}`
+    ]?: ComponentProps<typeof Radio>[k];
+  } & {
+    [
+      k in keyof ComponentProps<typeof Radio> as `recoveryTypeUsername\$${k}`
+    ]?: ComponentProps<typeof Radio>[k];
+  } & {
+    [
+      k in keyof ComponentProps<typeof Textfield> as `account\$${k}`
+    ]?: ComponentProps<typeof Textfield>[k];
+  } & {
+    [
+      k in keyof SmuiElementPropMap['a'] as `alreadyGotCodeLink\$${k}`
+    ]?: SmuiElementPropMap['a'][k];
+  } & {
+    [
+      k in keyof SmuiElementPropMap['p'] as `codeSentMessage\$${k}`
+    ]?: SmuiElementPropMap['p'][k];
+  } & {
+    [
+      k in keyof ComponentProps<typeof Textfield> as `recoveryCode\$${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 SmuiElementPropMap['a'] as `needCodeLink\$${k}`
+    ]?: SmuiElementPropMap['a'][k];
+  } & {
+    [
+      k in keyof ComponentProps<typeof CircularProgress> as `progress\$${k}`
+    ]?: ComponentProps<typeof CircularProgress>[k];
+  } & {
+    [
+      k in keyof ComponentProps<
+        typeof Button<undefined, 'button'>
+      > as `sendCodeButton\$${k}`
+    ]?: ComponentProps<typeof Button<undefined, 'button'>>[k];
+  } & {
+    [
+      k in keyof ComponentProps<
+        typeof Button<undefined, 'button'>
+      > as `resetPasswordButton\$${k}`
+    ]?: ComponentProps<typeof Button<undefined, 'button'>>[k];
+  } = $props();
 
-  /** User provided. You can bind to it if you need to. */
-  export let account = '';
-  /** User provided. You can bind to it if you need to. */
-  export let secret = '';
-  /** 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 = '';
+  let loading = $state(false);
+  let hasSentSecret: number | boolean = $state(false);
+  let accountElem: Textfield | undefined = $state();
+  let failureMessage: string | undefined = $state();
+  let successRecoveredMessage: string | undefined = $state();
 
-  let recovering = false;
-  let hasSentSecret: number | boolean = false;
-  let accountElem: Textfield;
-  let failureMessage: string | undefined = undefined;
-  let successRecoveredMessage: string | undefined = undefined;
-
-  $: {
+  $effect(() => {
     if (open && autofocus && accountElem) {
       accountElem.focus();
     }
-  }
+  });
 
   onMount(async () => {
-    if (clientConfig === undefined) {
-      clientConfig = await User.getClientConfig();
+    if ($clientConfig === (false as unknown as undefined)) {
+      $clientConfig = undefined;
+      $clientConfig = await User.getClientConfig();
     }
   });
 
@@ -272,7 +374,7 @@
     if (account === '') {
       failureMessage =
         'You need to enter ' +
-        (clientConfig?.emailUsernames || recoveryType === 'username'
+        ($clientConfig?.emailUsernames || recoveryType === 'username'
           ? 'an email address'
           : 'a username') +
         '.';
@@ -280,7 +382,7 @@
     }
 
     failureMessage = undefined;
-    recovering = true;
+    loading = true;
 
     try {
       const data = await User.sendRecovery({
@@ -299,14 +401,14 @@
     } catch (e: any) {
       failureMessage = e?.message;
     }
-    recovering = false;
+    loading = false;
   }
 
   async function recover() {
     if (account === '') {
       failureMessage =
         'You need to enter ' +
-        (clientConfig?.emailUsernames || recoveryType === 'username'
+        ($clientConfig?.emailUsernames || recoveryType === 'username'
           ? 'an email address'
           : 'a username') +
         '.';
@@ -322,7 +424,7 @@
     }
 
     failureMessage = undefined;
-    recovering = true;
+    loading = true;
     try {
       const data = await User.recover({
         username: account,
@@ -337,7 +439,7 @@
     } catch (e: any) {
       failureMessage = e?.message;
     }
-    recovering = false;
+    loading = false;
   }
 </script>
 

package/src/RevokeTokens.svelte

@@ -0,0 +1,236 @@
+<svelte:options runes />
+
+{#if $user != null}
+  <Dialog
+    {use}
+    bind:open
+    aria-labelledby="tilmeld-revoke-tokens-title"
+    aria-describedby="tilmeld-revoke-tokens-content"
+    surface$class="tilmeld-revoke-tokens-dialog-surface"
+    {...exclude(restProps, [
+      'password$',
+      'closeButton$',
+      'saveButton$',
+      'progress$',
+    ])}
+  >
+    <!-- Title cannot contain leading whitespace due to mdc-typography-baseline-top() -->
+    <Title id="tilmeld-revoke-tokens-title">{title}</Title>
+    <Content id="tilmeld-revoke-tokens-content">
+      <div>
+        {description}
+      </div>
+
+      <div style="margin-top: 1em;">
+        <Textfield
+          bind:value={password}
+          label="Password"
+          type="password"
+          style="width: 100%;"
+          input$autocomplete="current-password"
+          {...prefixFilter(restProps, 'password$')}
+        />
+      </div>
+
+      {@render additional?.()}
+
+      {#if failureMessage}
+        <div class="tilmeld-revoke-tokens-failure">
+          {failureMessage}
+        </div>
+      {/if}
+
+      {#if loading}
+        <div class="tilmeld-revoke-tokens-loading">
+          <CircularProgress
+            style="height: 24px; width: 24px;"
+            indeterminate
+            {...prefixFilter(restProps, 'progress$')}
+          />
+        </div>
+      {/if}
+    </Content>
+    <Actions>
+      <Button disabled={loading} {...prefixFilter(restProps, 'closeButton$')}>
+        <Label>Close</Label>
+      </Button>
+      <Button
+        onclick={preventDefault(stopPropagation(revokeTokens))}
+        disabled={loading}
+        {...prefixFilter(restProps, 'saveButton$')}
+      >
+        <Label>Log Out Other Sessions</Label>
+      </Button>
+    </Actions>
+  </Dialog>
+{/if}
+
+<script lang="ts">
+  import type { ComponentProps, Snippet } from 'svelte';
+  import { onMount, onDestroy } from 'svelte';
+  import type { Writable } from 'svelte/store';
+  import { writable } from 'svelte/store';
+  import CircularProgress from '@smui/circular-progress';
+  import Dialog, { Title, Content, Actions } from '@smui/dialog';
+  import Textfield from '@smui/textfield';
+  import Button, { Label } from '@smui/button';
+  import type { ActionArray } from '@smui/common/internal';
+  import { exclude, prefixFilter } from '@smui/common/internal';
+  import { preventDefault, stopPropagation } from '@smui/common/events';
+  import type { CurrentUserData } from '@nymphjs/tilmeld-client';
+  import type { User as UserClass } from '@nymphjs/tilmeld-client';
+
+  type OwnProps = {
+    /**
+     * An array of Action or [Action, ActionProps] to be applied to the element.
+     */
+    use?: ActionArray;
+    /**
+     * Whether the dialog is open.
+     */
+    open?: boolean;
+    /**
+     * The title of the dialog.
+     */
+    title?: string;
+    /**
+     * The description of the action given to the user.
+     */
+    description?: string;
+    /**
+     * The User class from Nymph.
+     */
+    User: typeof UserClass;
+    /**
+     * A writable store of the current user.
+     *
+     * It will be retrieved from the server if not provided.
+     */
+    user?: Writable<(UserClass & CurrentUserData) | null | undefined>;
+    /**
+     * User provided. You can bind to it if you need to.
+     */
+    password?: string;
+
+    /**
+     * A spot for additional content.
+     */
+    additional?: Snippet;
+  };
+  let {
+    use = [],
+    open = $bindable(false),
+    title = 'Log Out of Other Sessions',
+    description = 'This will log you out of all other sessions. You can use this if you think your account has been compromised. You will need to log in again on your other devices.',
+    User,
+    user = $bindable(writable(false as unknown as undefined)),
+    password = $bindable(''),
+    additional,
+    ...restProps
+  }: OwnProps & {
+    [
+      k in keyof ComponentProps<typeof Textfield> as `password\$${k}`
+    ]?: ComponentProps<typeof Textfield>[k];
+  } & {
+    [
+      k in keyof ComponentProps<typeof CircularProgress> as `progress\$${k}`
+    ]?: ComponentProps<typeof CircularProgress>[k];
+  } & {
+    [
+      k in keyof ComponentProps<
+        typeof Button<undefined, 'button'>
+      > as `closeButton\$${k}`
+    ]?: ComponentProps<typeof Button<undefined, 'button'>>[k];
+  } & {
+    [
+      k in keyof ComponentProps<
+        typeof Button<undefined, 'button'>
+      > as `saveButton\$${k}`
+    ]?: ComponentProps<typeof Button<undefined, 'button'>>[k];
+  } = $props();
+
+  let loading = $state(false);
+  let failureMessage: string | undefined = $state();
+
+  $effect(() => {
+    if (!open) {
+      loading = false;
+      failureMessage = undefined;
+      password = '';
+    }
+  });
+
+  const onLogin = (currentUser: UserClass & CurrentUserData) => {
+    $user = currentUser;
+  };
+  const onLogout = () => {
+    $user = null;
+  };
+
+  onMount(async () => {
+    User.on('login', onLogin);
+    User.on('logout', onLogout);
+    if ($user === (false as unknown as undefined)) {
+      $user = undefined;
+      $user = await User.current();
+    }
+  });
+
+  onDestroy(() => {
+    User.off('login', onLogin);
+    User.off('logout', onLogout);
+  });
+
+  async function revokeTokens() {
+    if (password === '') {
+      failureMessage = 'You need to enter your password';
+      return;
+    }
+
+    failureMessage = undefined;
+    loading = true;
+
+    // Get the current user again, in case their data has changed.
+    $user = await User.current();
+
+    if ($user == null) {
+      failureMessage = 'You must be logged in.';
+      loading = false;
+      return;
+    }
+
+    try {
+      // Revoke the current tokens.
+      const data = await $user.$revokeCurrentTokens({
+        password,
+      });
+
+      if (!data.result) {
+        failureMessage = data.message;
+      } else {
+        open = false;
+      }
+    } catch (e: any) {
+      failureMessage = e?.message;
+    }
+    loading = false;
+  }
+</script>
+
+<style>
+  :global(
+    .mdc-dialog .mdc-dialog__surface.tilmeld-revoke-tokens-dialog-surface
+  ) {
+    width: 360px;
+    max-width: calc(100vw - 32px);
+  }
+  .tilmeld-revoke-tokens-failure {
+    margin-top: 1em;
+    color: var(--mdc-theme-error, #f00);
+  }
+  .tilmeld-revoke-tokens-loading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+</style>