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

package/src/ChangePassword.svelte

@@ -1,14 +1,17 @@
-{#if user != null}
+<svelte:options runes />
+
+{#if $user != null}
   <Dialog
-    use={usePass}
+    {use}
     bind:open
     aria-labelledby="tilmeld-password-title"
     aria-describedby="tilmeld-password-content"
     surface$class="tilmeld-password-dialog-surface"
-    {...exclude($$restProps, [
+    {...exclude(restProps, [
       'password$',
       'newPassword$',
       'newPassword2$',
+      'revokeTokens$',
       'closeButton$',
       'saveButton$',
       'progress$',
@@ -24,7 +27,7 @@
           type="password"
           style="width: 100%;"
           input$autocomplete="current-password"
-          {...prefixFilter($$restProps, 'password$')}
+          {...prefixFilter(restProps, 'password$')}
         />
       </div>
 
@@ -35,7 +38,7 @@
           type="password"
           style="width: 100%;"
           input$autocomplete="new-password"
-          {...prefixFilter($$restProps, 'newPassword$')}
+          {...prefixFilter(restProps, 'newPassword$')}
         />
       </div>
 
@@ -46,11 +49,28 @@
           type="password"
           style="width: 100%;"
           input$autocomplete="new-password"
-          {...prefixFilter($$restProps, 'newPassword2$')}
+          {...prefixFilter(restProps, 'newPassword2$')}
         />
       </div>
 
-      <slot name="additional" />
+      <div style="margin: 1em 0;">
+        <FormField>
+          <Checkbox
+            bind:checked={revokeCurrentTokens}
+            {...prefixFilter(restProps, 'revokeTokens$')}
+          />
+          {#snippet label()}
+            Log out of all other sessions.
+            <span
+              style="display: block; font-size: 0.7em; height: 0; overflow: visible;"
+            >
+              Use this if you think you've been hacked.
+            </span>
+          {/snippet}
+        </FormField>
+      </div>
+
+      {@render additional?.()}
 
       {#if failureMessage}
         <div class="tilmeld-password-failure">
@@ -58,27 +78,24 @@
         </div>
       {/if}
 
-      {#if changing}
+      {#if loading}
         <div class="tilmeld-password-loading">
           <CircularProgress
             style="height: 24px; width: 24px;"
             indeterminate
-            {...prefixFilter($$restProps, 'progress$')}
+            {...prefixFilter(restProps, 'progress$')}
           />
         </div>
       {/if}
     </Content>
     <Actions>
-      <Button
-        disabled={changing}
-        {...prefixFilter($$restProps, 'closeButton$')}
-      >
+      <Button disabled={loading} {...prefixFilter(restProps, 'closeButton$')}>
         <Label>Close</Label>
       </Button>
       <Button
-        on:click$preventDefault$stopPropagation={changePassword}
-        disabled={changing}
-        {...prefixFilter($$restProps, 'saveButton$')}
+        onclick={preventDefault(stopPropagation(changePassword))}
+        disabled={loading}
+        {...prefixFilter(restProps, 'saveButton$')}
       >
         <Label>Change Password</Label>
       </Button>
@@ -87,62 +104,140 @@
 {/if}
 
 <script lang="ts">
+  import type { ComponentProps, Snippet } from 'svelte';
   import { onMount, onDestroy } 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';
+  import Checkbox from '@smui/checkbox';
+  import FormField from '@smui/form-field';
   import Button, { Label } from '@smui/button';
   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 { CurrentUserData } from '@nymphjs/tilmeld-client';
   import type { User as UserClass } 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 = 'Change Your Password';
-  export let User: typeof UserClass;
-  export let user: (UserClass & CurrentUserData) | undefined = undefined;
+  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 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.
+     */
+    currentPassword?: string;
+    /**
+     * User provided. You can bind to it if you need to.
+     */
+    newPassword?: string;
+    /**
+     * User provided. You can bind to it if you need to.
+     */
+    newPassword2?: string;
+    /**
+     * User provided. You can bind to it if you need to.
+     */
+    revokeCurrentTokens?: boolean;
 
-  let changing = false;
-  let failureMessage: string | undefined = undefined;
+    /**
+     * A spot for additional content.
+     */
+    additional?: Snippet;
+  };
+  let {
+    use = [],
+    open = $bindable(false),
+    title = 'Change Your Password',
+    User,
+    user = $bindable(writable(false as unknown as undefined)),
+    currentPassword = $bindable(''),
+    newPassword = $bindable(''),
+    newPassword2 = $bindable(''),
+    revokeCurrentTokens = $bindable(false),
+    additional,
+    ...restProps
+  }: OwnProps & {
+    [
+      k in keyof ComponentProps<typeof Textfield> as `password\$${k}`
+    ]?: ComponentProps<typeof Textfield>[k];
+  } & {
+    [
+      k in keyof ComponentProps<typeof Textfield> as `newPassword\$${k}`
+    ]?: ComponentProps<typeof Textfield>[k];
+  } & {
+    [
+      k in keyof ComponentProps<typeof Textfield> as `newPassword2\$${k}`
+    ]?: ComponentProps<typeof Textfield>[k];
+  } & {
+    [
+      k in keyof ComponentProps<typeof Checkbox> as `revokeTokens\$${k}`
+    ]?: ComponentProps<typeof Checkbox>[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();
 
-  /** User provided. You can bind to it if you need to. */
-  export let currentPassword = '';
-  /** User provided. You can bind to it if you need to. */
-  export let newPassword = '';
-  /** User provided. You can bind to it if you need to. */
-  export let newPassword2 = '';
+  let loading = $state(false);
+  let failureMessage: string | undefined = $state();
 
-  $: {
+  $effect(() => {
     if (!open) {
-      changing = false;
+      loading = false;
       failureMessage = undefined;
       currentPassword = '';
       newPassword = '';
       newPassword2 = '';
+      revokeCurrentTokens = false;
     }
-  }
+  });
 
   const onLogin = (currentUser: UserClass & CurrentUserData) => {
-    user = currentUser;
+    $user = currentUser;
   };
   const onLogout = () => {
-    user = undefined;
+    $user = null;
   };
 
   onMount(async () => {
     User.on('login', onLogin);
     User.on('logout', onLogout);
-    if (user === undefined) {
-      user = (await User.current()) ?? undefined;
+    if ($user === (false as unknown as undefined)) {
+      $user = undefined;
+      $user = await User.current();
     }
   });
 
@@ -166,22 +261,23 @@
     }
 
     failureMessage = undefined;
-    changing = true;
+    loading = true;
 
     // Get the current user again, in case their data has changed.
-    user = (await User.current()) ?? undefined;
+    $user = await User.current();
 
-    if (user == null) {
+    if ($user == null) {
       failureMessage = 'You must be logged in.';
-      changing = false;
+      loading = false;
       return;
     }
 
     try {
       // Change the user's password.
-      const data = await user.$changePassword({
+      const data = await $user.$changePassword({
         currentPassword,
         newPassword,
+        revokeCurrentTokens,
       });
 
       if (!data.result) {
@@ -192,7 +288,7 @@
     } catch (e: any) {
       failureMessage = e?.message;
     }
-    changing = false;
+    loading = false;
   }
 </script>