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

package/dist/TwoFactor.svelte

@@ -0,0 +1,544 @@
+<svelte:options runes />
+
+{#if $user != null}
+  <Dialog
+    {use}
+    bind:open
+    aria-labelledby="tilmeld-two-factor-title"
+    aria-describedby="tilmeld-two-factor-content"
+    surface$class="tilmeld-two-factor-dialog-surface"
+    {...exclude(restProps, [
+      'password$',
+      'code$',
+      'closeButton$',
+      'setupButton$',
+      'removeButton$',
+      'progress$',
+    ])}
+  >
+    <!-- Title cannot contain leading whitespace due to mdc-typography-baseline-top() -->
+    <Title id="tilmeld-two-factor-title">{title}</Title>
+    {#if hasTOTPSecret === false}
+      <Content id="tilmeld-two-factor-content">
+        {#if totpSecret == null}
+          <p>
+            2 Factor Authentication (2FA) adds an additional layer of security.
+            With 2FA, no one can log in without your authenticator device, even
+            with your password.
+          </p>
+
+          <p>
+            You'll need an authenticator app that supports TOTP codes. Some
+            popular apps are linked here.
+          </p>
+
+          <h6 style="margin-top: 0;">Twilio Authy</h6>
+
+          <ul>
+            <li>
+              <a
+                href="https://play.google.com/store/apps/details?id=com.authy.authy"
+                target="_blank"
+                rel="noopener noreferrer">Google Play Store</a
+              >
+            </li>
+            <li>
+              <a
+                href="https://apps.apple.com/us/app/twilio-authy/id494168017"
+                target="_blank"
+                rel="noopener noreferrer">Apple App Store</a
+              >
+            </li>
+            <li>
+              <a
+                href="https://authy.com/download/"
+                target="_blank"
+                rel="noopener noreferrer">Desktop App</a
+              >
+            </li>
+          </ul>
+
+          <h6 style="margin-top: 0;">Google Authenticator</h6>
+
+          <ul>
+            <li>
+              <a
+                href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2"
+                target="_blank"
+                rel="noopener noreferrer">Google Play Store</a
+              >
+            </li>
+            <li>
+              <a
+                href="https://apps.apple.com/us/app/google-authenticator/id388497605"
+                target="_blank"
+                rel="noopener noreferrer">Apple App Store</a
+              >
+            </li>
+          </ul>
+
+          <h6 style="margin-top: 0;">Microsoft Authenticator</h6>
+
+          <ul>
+            <li>
+              <a
+                href="https://play.google.com/store/apps/details?id=com.azure.authenticator"
+                target="_blank"
+                rel="noopener noreferrer">Google Play Store</a
+              >
+            </li>
+            <li>
+              <a
+                href="https://apps.apple.com/us/app/microsoft-authenticator/id983156458"
+                target="_blank"
+                rel="noopener noreferrer">Apple App Store</a
+              >
+            </li>
+          </ul>
+
+          <p>
+            Once your authenticator app is ready, continue to generate a QR
+            code.
+          </p>
+        {:else}
+          <p>Scan this QR code with your authenticator app:</p>
+
+          <div style="text-align: center;">
+            <img alt="TOTP Set Up QR Code" src={totpSecret.qrcode} />
+          </div>
+
+          <p>Or you can enter this code manually into your app:</p>
+
+          <div style="text-align: center;">
+            <code style="word-break: break-all;">{totpSecret.secret}</code>
+          </div>
+
+          <p>Enter your password to allow this account change:</p>
+
+          <div>
+            <Textfield
+              bind:value={password}
+              label="Password"
+              type="password"
+              style="width: 100%;"
+              input$autocomplete="current-password"
+              {...prefixFilter(restProps, 'password$')}
+            />
+          </div>
+
+          <p>
+            Enter a code generated by your app to confirm the account is
+            configured correctly:
+          </p>
+
+          <div>
+            <Textfield
+              bind:value={code}
+              label="2FA Code"
+              style="width: 100%;"
+              input$maxlength={6}
+              input$minlength={6}
+              {...prefixFilter(restProps, 'code$')}
+            />
+          </div>
+        {/if}
+
+        {#if failureMessage}
+          <div class="tilmeld-two-factor-failure">
+            {failureMessage}
+          </div>
+        {/if}
+
+        {#if loading}
+          <div class="tilmeld-two-factor-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>
+        {#if totpSecret == null}
+          <Button
+            onclick={preventDefault(stopPropagation(beginSetup))}
+            disabled={loading}
+            {...prefixFilter(restProps, 'setupButton$')}
+          >
+            <Label>Set Up 2FA</Label>
+          </Button>
+        {:else}
+          <Button
+            onclick={preventDefault(stopPropagation(enableTOTP))}
+            disabled={loading}
+            {...prefixFilter(restProps, 'setupButton$')}
+          >
+            <Label>Enable 2FA</Label>
+          </Button>
+        {/if}
+      </Actions>
+    {:else if hasTOTPSecret === true}
+      <Content id="tilmeld-two-factor-content">
+        <p>
+          2 Factor Authentication (2FA) is enabled on your account. If you'd
+          like to disable it, you can provide your password and a code generated
+          by your Authenticator app. You can re-enable it by generating a new QR
+          code at any time.
+        </p>
+
+        <div>
+          <Textfield
+            bind:value={password}
+            label="Password"
+            type="password"
+            style="width: 100%;"
+            input$autocomplete="current-password"
+            {...prefixFilter(restProps, 'password$')}
+          />
+        </div>
+
+        <div>
+          <Textfield
+            bind:value={code}
+            label="2FA Code"
+            style="width: 100%;"
+            input$maxlength={6}
+            input$minlength={6}
+            {...prefixFilter(restProps, 'code$')}
+          />
+        </div>
+
+        {@render additional?.()}
+
+        {#if failureMessage}
+          <div class="tilmeld-two-factor-failure">
+            {failureMessage}
+          </div>
+        {/if}
+
+        {#if loading}
+          <div class="tilmeld-two-factor-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(disableTOTP))}
+          disabled={loading}
+          {...prefixFilter(restProps, 'removeButton$')}
+        >
+          <Label>Disable 2FA</Label>
+        </Button>
+      </Actions>
+    {:else}
+      <div class="tilmeld-two-factor-loading">
+        <CircularProgress
+          style="height: 24px; width: 24px;"
+          indeterminate
+          {...prefixFilter(restProps, 'progress$')}
+        />
+      </div>
+    {/if}
+  </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 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>;
+    /**
+     * Server provided. You can bind to it if you need to.
+     */
+    hasTOTPSecret?: boolean | null;
+    /**
+     * Server provided. You can bind to it if you need to.
+     */
+    totpSecret?: {
+      uri: string;
+      qrcode: string;
+      secret: string;
+    } | null;
+    /**
+     * User provided. You can bind to it if you need to.
+     */
+    password?: string;
+    /**
+     * User provided. You can bind to it if you need to.
+     */
+    code?: string;
+
+    /**
+     * A spot for additional content.
+     */
+    additional?: Snippet;
+  };
+  let {
+    use = [],
+    open = $bindable(false),
+    title = 'Manage Two Factor Authentication',
+    User,
+    user = $bindable(writable(false as unknown as undefined)),
+    hasTOTPSecret = $bindable(null),
+    totpSecret = $bindable(null),
+    password = $bindable(''),
+    code = $bindable(''),
+    additional,
+    ...restProps
+  }: OwnProps & {
+    [
+      k in keyof ComponentProps<typeof Textfield> as `password\$${k}`
+    ]?: ComponentProps<typeof Textfield>[k];
+  } & {
+    [
+      k in keyof ComponentProps<typeof Textfield> as `code\$${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 `setupButton\$${k}`
+    ]?: ComponentProps<typeof Button<undefined, 'button'>>[k];
+  } & {
+    [
+      k in keyof ComponentProps<
+        typeof Button<undefined, 'button'>
+      > as `removeButton\$${k}`
+    ]?: ComponentProps<typeof Button<undefined, 'button'>>[k];
+  } = $props();
+
+  let loading = $state(false);
+  let failureMessage: string | undefined = $state();
+
+  $effect(() => {
+    if (!open) {
+      loading = false;
+      failureMessage = undefined;
+      totpSecret = null;
+      password = '';
+      code = '';
+    }
+  });
+
+  const onLogin = (currentUser: UserClass & CurrentUserData) => {
+    $user = currentUser;
+    hasTOTPSecret = null;
+    $user.$hasTOTPSecret().then(
+      (value) => {
+        hasTOTPSecret = value;
+        failureMessage = undefined;
+      },
+      (e) => {
+        hasTOTPSecret = null;
+        failureMessage = e?.message;
+      },
+    );
+  };
+  const onLogout = () => {
+    $user = null;
+    hasTOTPSecret = null;
+  };
+
+  onMount(async () => {
+    User.on('login', onLogin);
+    User.on('logout', onLogout);
+    if ($user === (false as unknown as undefined)) {
+      $user = undefined;
+      $user = await User.current();
+    }
+    if ($user) {
+      try {
+        hasTOTPSecret = await $user.$hasTOTPSecret();
+        failureMessage = undefined;
+      } catch (e: any) {
+        hasTOTPSecret = null;
+        failureMessage = e?.message;
+      }
+    } else {
+      hasTOTPSecret = null;
+    }
+  });
+
+  onDestroy(() => {
+    User.off('login', onLogin);
+    User.off('logout', onLogout);
+  });
+
+  async function beginSetup() {
+    loading = true;
+
+    if ($user == null) {
+      failureMessage = 'You must be logged in.';
+      loading = false;
+      return;
+    }
+
+    try {
+      totpSecret = await $user.$getNewTOTPSecret();
+    } catch (e: any) {
+      failureMessage = e?.message;
+    }
+    loading = false;
+  }
+
+  async function enableTOTP() {
+    if (password === '') {
+      failureMessage = 'You need to enter your current password';
+      return;
+    }
+
+    if (code === '') {
+      failureMessage = 'You need to enter a generated code';
+      return;
+    }
+
+    if (totpSecret == null) {
+      failureMessage = 'TOTP secret is not set';
+      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 {
+      // Save the user's TOTP secret.
+      const data = await $user.$saveTOTPSecret({
+        password,
+        secret: totpSecret.secret,
+        code,
+      });
+
+      if (!data.result) {
+        failureMessage = data.message;
+      } else {
+        open = false;
+        hasTOTPSecret = true;
+      }
+    } catch (e: any) {
+      failureMessage = e?.message;
+    }
+    loading = false;
+  }
+
+  async function disableTOTP() {
+    if (password === '') {
+      failureMessage = 'You need to enter your current password';
+      return;
+    }
+
+    if (code === '') {
+      failureMessage = 'You need to enter a generated code';
+      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 {
+      // Remove the user's TOTP secret.
+      const data = await $user.$removeTOTPSecret({
+        password,
+        code,
+      });
+
+      if (!data.result) {
+        failureMessage = data.message;
+      } else {
+        open = false;
+        hasTOTPSecret = false;
+      }
+    } catch (e: any) {
+      failureMessage = e?.message;
+    }
+    loading = false;
+  }
+</script>
+
+<style>
+  :global(.mdc-dialog .mdc-dialog__surface.tilmeld-two-factor-dialog-surface) {
+    width: 400px;
+    max-width: calc(100vw - 32px);
+  }
+  .tilmeld-two-factor-failure {
+    margin-top: 1em;
+    color: var(--mdc-theme-error, #f00);
+  }
+  .tilmeld-two-factor-loading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+</style>

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+import Account from './Account.svelte';
+import ChangePassword from './ChangePassword.svelte';
+import Login from './Login.svelte';
+import Recover from './Recover.svelte';
+import RevokeTokens from './RevokeTokens.svelte';
+import TwoFactor from './TwoFactor.svelte';
+export { Account, ChangePassword, Login, Recover, RevokeTokens, TwoFactor };

package/dist/index.js

@@ -0,0 +1,8 @@
+import Account from './Account.svelte';
+import ChangePassword from './ChangePassword.svelte';
+import Login from './Login.svelte';
+import Recover from './Recover.svelte';
+import RevokeTokens from './RevokeTokens.svelte';
+import TwoFactor from './TwoFactor.svelte';
+export { Account, ChangePassword, Login, Recover, RevokeTokens, TwoFactor };
+//# sourceMappingURL=index.js.map

package/{lib → dist}/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,kBAAkB,CAAC;AACvC,OAAO,cAAc,MAAM,yBAAyB,CAAC;AACrD,OAAO,KAAK,MAAM,gBAAgB,CAAC;AACnC,OAAO,OAAO,MAAM,kBAAkB,CAAC;AAEvC,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,kBAAkB,CAAC;AACvC,OAAO,cAAc,MAAM,yBAAyB,CAAC;AACrD,OAAO,KAAK,MAAM,gBAAgB,CAAC;AACnC,OAAO,OAAO,MAAM,kBAAkB,CAAC;AACvC,OAAO,YAAY,MAAM,uBAAuB,CAAC;AACjD,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC"}

package/jest.config.js

@@ -0,0 +1,32 @@
+const jestConfig = {
+  extensionsToTreatAsEsm: ['.ts', '.tsx'],
+  testMatch: [
+    '<rootDir>/src/**/__tests__/**/*.{js,ts,jsx,tsx,mjs,mts}',
+    '<rootDir>/src/**/?(*.)(spec|test).{js,ts,jsx,tsx,mjs,mts}',
+  ],
+  transform: {
+    '^.+\\.(ts|tsx|mts)$': [
+      '@swc/jest',
+      {
+        jsc: {
+          parser: {
+            syntax: 'typescript',
+            tsx: true,
+            decorators: true,
+          },
+          target: 'es2024',
+        },
+        module: {
+          type: 'commonjs',
+        },
+      },
+    ],
+  },
+  transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$'],
+  moduleDirectories: ['node_modules', 'src'],
+  moduleNameMapper: {
+    '^(\\.|\\.\\.)\\/(.+)\\.js': '$1/$2',
+  },
+};
+
+export default jestConfig;