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

package/dist/Recover.svelte

@@ -0,0 +1,463 @@
+<svelte:options runes />
+
+{#if $clientConfig != null && $clientConfig.pwRecovery}
+  <Dialog
+    {use}
+    bind:open
+    aria-labelledby="tilmeld-recovery-title"
+    aria-describedby="tilmeld-recovery-content"
+    surface$class="tilmeld-recover-dialog-surface"
+    {...exclude(restProps, [
+      'recoveryTypePassword$',
+      'recoveryTypeUsername$',
+      'account$',
+      'alreadyGotCodeLink$',
+      'codeSentMessage$',
+      'recoveryCode$',
+      'password$',
+      'password2$',
+      'needCodeLink$',
+      'sendCodeButton$',
+      'resetPasswordButton$',
+      'progress$',
+    ])}
+  >
+    <!-- Title cannot contain leading whitespace due to mdc-typography-baseline-top() -->
+    <Title id="tilmeld-recovery-title">{title}</Title>
+    <Content id="tilmeld-recovery-content">
+      {#if successRecoveredMessage}
+        {successRecoveredMessage}
+      {:else}
+        {#if !hasSentSecret}
+          {#if !$clientConfig.emailUsernames}
+            <div>
+              <FormField style="margin-right: 1em;">
+                <Radio
+                  bind:group={recoveryType}
+                  value="password"
+                  {...prefixFilter(restProps, 'recoveryTypePassword$')}
+                />
+                {#snippet label()}
+                  I don't know my password.
+                {/snippet}
+              </FormField>
+              <FormField style="margin-right: 1em;">
+                <Radio
+                  bind:group={recoveryType}
+                  value="username"
+                  {...prefixFilter(restProps, 'recoveryTypeUsername$')}
+                />
+                {#snippet label()}
+                  I don't know my username.
+                {/snippet}
+              </FormField>
+            </div>
+          {/if}
+
+          <div>
+            {#if recoveryType === 'password'}
+              <p>
+                To reset your password, type the {$clientConfig.emailUsernames
+                  ? 'email'
+                  : 'username'}
+                you use to sign in below.
+              </p>
+            {/if}
+            {#if recoveryType === 'username'}
+              <p>
+                To get your username, type your email as you entered it when
+                creating your account.
+              </p>
+            {/if}
+          </div>
+
+          <div>
+            <Textfield
+              bind:this={accountElem}
+              bind:value={account}
+              label={$clientConfig.emailUsernames || recoveryType === 'username'
+                ? 'Email Address'
+                : 'Username'}
+              type={$clientConfig.emailUsernames || recoveryType === 'username'
+                ? 'email'
+                : 'text'}
+              input$autocomplete={$clientConfig.emailUsernames ||
+              recoveryType === 'username'
+                ? 'email'
+                : 'username'}
+              input$autocapitalize="off"
+              input$spellcheck="false"
+              {...prefixFilter(restProps, 'account$')}
+            />
+          </div>
+
+          {#if recoveryType === 'password'}
+            <div class="tilmeld-recover-action">
+              <a
+                href={'javascript:void(0);'}
+                onclick={() => (hasSentSecret = 1)}
+                {...prefixFilter(restProps, 'alreadyGotCodeLink$')}
+              >
+                Already Got a Code?
+              </a>
+            </div>
+          {/if}
+        {:else}
+          <div>
+            <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>
+          </div>
+
+          {#if hasSentSecret === 1}
+            <div>
+              <Textfield
+                bind:this={accountElem}
+                bind:value={account}
+                label={$clientConfig.emailUsernames
+                  ? 'Email Address'
+                  : 'Username'}
+                type={$clientConfig.emailUsernames ? 'email' : 'text'}
+                input$autocomplete={$clientConfig.emailUsernames
+                  ? 'email'
+                  : 'username'}
+                input$autocapitalize="off"
+                input$spellcheck="false"
+                {...prefixFilter(restProps, 'account$')}
+              />
+            </div>
+          {/if}
+
+          <div>
+            <Textfield
+              bind:value={secret}
+              label="Recovery Code"
+              type="text"
+              input$autocomplete="one-time-code"
+              {...prefixFilter(restProps, 'recoveryCode$')}
+            />
+          </div>
+
+          <div>
+            <Textfield
+              bind:value={password}
+              label="Password"
+              type="password"
+              input$autocomplete="new-password"
+              {...prefixFilter(restProps, 'password$')}
+            />
+          </div>
+
+          <div>
+            <Textfield
+              bind:value={password2}
+              label="Re-enter Password"
+              type="password"
+              input$autocomplete="new-password"
+              {...prefixFilter(restProps, 'password2$')}
+            />
+          </div>
+
+          <div class="tilmeld-recover-action">
+            <a
+              href={'javascript:void(0);'}
+              onclick={() => (hasSentSecret = false)}
+              {...prefixFilter(restProps, 'needCodeLink$')}
+            >
+              Need a New Code?
+            </a>
+          </div>
+        {/if}
+
+        {#if failureMessage}
+          <div class="tilmeld-recover-failure">
+            {failureMessage}
+          </div>
+        {/if}
+
+        {#if loading}
+          <div class="tilmeld-recover-loading">
+            <CircularProgress
+              style="height: 24px; width: 24px;"
+              indeterminate
+              {...prefixFilter(restProps, 'progress$')}
+            />
+          </div>
+        {/if}
+      {/if}
+    </Content>
+    <Actions>
+      <Button onclick={() => (open = false)} disabled={loading}>
+        <Label>{successRecoveredMessage ? 'Close' : 'Cancel'}</Label>
+      </Button>
+      {#if !successRecoveredMessage}
+        {#if !hasSentSecret}
+          <Button
+            onclick={preventDefault(stopPropagation(sendRecovery))}
+            disabled={loading}
+            {...prefixFilter(restProps, 'sendCodeButton$')}
+          >
+            <Label>Send Recovery</Label>
+          </Button>
+        {:else}
+          <Button
+            onclick={preventDefault(stopPropagation(recover))}
+            disabled={loading}
+            {...prefixFilter(restProps, 'resetPasswordButton$')}
+          >
+            <Label>Reset Password</Label>
+          </Button>
+        {/if}
+      {/if}
+    </Actions>
+  </Dialog>
+{/if}
+
+<script lang="ts">
+  import type { ComponentProps } from 'svelte';
+  import { onMount } 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 FormField from '@smui/form-field';
+  import Radio from '@smui/radio';
+  import type { ActionArray } 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';
+
+  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();
+
+  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();
+
+  $effect(() => {
+    if (open && autofocus && accountElem) {
+      accountElem.focus();
+    }
+  });
+
+  onMount(async () => {
+    if ($clientConfig === (false as unknown as undefined)) {
+      $clientConfig = undefined;
+      $clientConfig = await User.getClientConfig();
+    }
+  });
+
+  async function sendRecovery() {
+    if (account === '') {
+      failureMessage =
+        'You need to enter ' +
+        ($clientConfig?.emailUsernames || recoveryType === 'username'
+          ? 'an email address'
+          : 'a username') +
+        '.';
+      return;
+    }
+
+    failureMessage = undefined;
+    loading = true;
+
+    try {
+      const data = await User.sendRecovery({
+        recoveryType,
+        account,
+      });
+      if (!data.result) {
+        failureMessage = data.message;
+      } else {
+        if (recoveryType === 'username') {
+          successRecoveredMessage = data.message;
+        } else if (recoveryType === 'password') {
+          hasSentSecret = true;
+        }
+      }
+    } catch (e: any) {
+      failureMessage = e?.message;
+    }
+    loading = false;
+  }
+
+  async function recover() {
+    if (account === '') {
+      failureMessage =
+        'You need to enter ' +
+        ($clientConfig?.emailUsernames || recoveryType === 'username'
+          ? 'an email address'
+          : 'a username') +
+        '.';
+      return;
+    }
+    if (password !== password2) {
+      failureMessage = 'Your passwords do not match.';
+      return;
+    }
+    if (password === '') {
+      failureMessage = 'You need to enter a password.';
+      return;
+    }
+
+    failureMessage = undefined;
+    loading = true;
+    try {
+      const data = await User.recover({
+        username: account,
+        secret,
+        password,
+      });
+      if (!data.result) {
+        failureMessage = data.message;
+      } else {
+        successRecoveredMessage = data.message;
+      }
+    } catch (e: any) {
+      failureMessage = e?.message;
+    }
+    loading = false;
+  }
+</script>
+
+<style>
+  :global(.mdc-dialog .mdc-dialog__surface.tilmeld-recover-dialog-surface) {
+    width: 540px;
+    max-width: calc(100vw - 32px);
+  }
+  .tilmeld-recover-action {
+    margin-top: 1em;
+  }
+  .tilmeld-recover-failure {
+    margin-top: 1em;
+    color: var(--mdc-theme-error, #f00);
+  }
+  .tilmeld-recover-loading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+</style>

package/dist/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>