@nymphjs/tilmeld-components 1.0.0-alpha.2

package/src/Login.svelte

@@ -0,0 +1,314 @@
+{#if clientConfig == null || registering || loggingIn}
+  <CircularProgress style="height: 32px; width: 32px;" indeterminate />
+{:else}
+  <div style="width: {width};">
+    {#if successRegisteredMessage}
+      <div>
+        {successRegisteredMessage}
+      </div>
+    {:else if successLoginMessage}
+      <div>
+        {successLoginMessage}
+      </div>
+    {:else}
+      <form on:submit|preventDefault>
+        <div>
+          <Textfield
+            bind:value={username}
+            bind:this={usernameElem}
+            label={clientConfig.emailUsernames ? 'Email' : 'Username'}
+            type={clientConfig.emailUsernames ? 'email' : 'text'}
+            style="width: 100%;"
+            helperLine$style="width: 100%;"
+            invalid={usernameVerified === false}
+            input$autocomplete={clientConfig.emailUsernames
+              ? 'email'
+              : 'username'}
+            input$name={clientConfig.emailUsernames ? 'email' : 'username'}
+            input$autocapitalize="off"
+            input$spellcheck="false"
+          >
+            <HelperText persistent slot="helper">
+              {#if !existingUser}
+                {usernameVerifiedMessage ?? ''}
+              {/if}
+            </HelperText>
+          </Textfield>
+        </div>
+
+        <div>
+          <Textfield
+            bind:value={password}
+            label="Password"
+            type="password"
+            style="width: 100%;"
+            input$autocomplete="{clientConfig.allowRegistration && !existingUser
+              ? 'new'
+              : 'current'}-password"
+            input$name="password"
+          />
+        </div>
+
+        {#if clientConfig.allowRegistration && !existingUser}
+          <div>
+            <Textfield
+              bind:value={password2}
+              label="Re-enter Password"
+              type="password"
+              style="width: 100%;"
+              input$autocomplete="new-password"
+              input$name="password2"
+            />
+          </div>
+
+          {#if clientConfig.regFields.indexOf('name') !== -1}
+            <div>
+              <Textfield
+                bind:value={name}
+                label="Name"
+                type="text"
+                style="width: 100%;"
+                input$autocomplete="name"
+                input$name="name"
+              />
+            </div>
+          {/if}
+
+          {#if !clientConfig.emailUsernames && clientConfig.regFields.indexOf('email') !== -1}
+            <div>
+              <Textfield
+                bind:value={email}
+                label="Email"
+                type="email"
+                style="width: 100%;"
+                input$autocomplete="email"
+                input$name="email"
+                input$autocapitalize="off"
+                input$spellcheck="false"
+              />
+            </div>
+          {/if}
+
+          {#if clientConfig.regFields.indexOf('phone') !== -1}
+            <div>
+              <Textfield
+                bind:value={phone}
+                label="Phone Number"
+                type="tel"
+                style="width: 100%;"
+                input$autocomplete="tel"
+                input$name="phone"
+              />
+            </div>
+          {/if}
+        {/if}
+
+        {#if failureMessage}
+          <div class="tilmeld-login-failure">
+            {failureMessage}
+          </div>
+        {/if}
+
+        <div class="tilmeld-login-buttons">
+          {#if existingUser}
+            <Button variant="raised" type="submit" on:click={login}>
+              <Label>Log In</Label>
+            </Button>
+          {:else}
+            <Button variant="raised" type="submit" on:click={register}>
+              <Label>Create Account</Label>
+            </Button>
+          {/if}
+        </div>
+
+        {#if clientConfig.allowRegistration && showExistingUserToggle}
+          <div class="tilmeld-login-action">
+            {#if existingUser}
+              <a
+                href="javascript:void(0);"
+                on:click={() => (existingUser = false)}
+              >
+                Create an account.
+              </a>
+            {:else}
+              <a
+                href="javascript:void(0);"
+                on:click={() => (existingUser = true)}
+              >
+                Log in to your account.
+              </a>
+            {/if}
+          </div>
+        {/if}
+
+        {#if !hideRecovery && clientConfig.pwRecovery && existingUser}
+          <div class="tilmeld-login-action">
+            <a href="javascript:void(0);" on:click={() => (recoverOpen = true)}>
+              I can't access my account.
+            </a>
+          </div>
+          <Recover bind:open={recoverOpen} />
+        {/if}
+      </form>
+    {/if}
+  </div>
+{/if}
+
+<script lang="ts">
+  import { onMount, createEventDispatcher } from 'svelte';
+  import CircularProgress from '@smui/circular-progress';
+  import Button, { Label } from '@smui/button';
+  import Textfield, { TextfieldComponentDev } from '@smui/textfield';
+  import HelperText from '@smui/textfield/helper-text/index';
+  import {
+    getClientConfig,
+    login as loginAction,
+    register as registerAction,
+    checkUsername as checkUsernameAction,
+    ClientConfig,
+  } from '@nymphjs/tilmeld-client';
+  import Recover from './Recover.svelte';
+
+  const dispatch = createEventDispatcher();
+
+  /** 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 existingUser = true;
+  /** Whether to show the 'Log In'/'Sign Up' switcher buttons. */
+  export let showExistingUserToggle = true;
+  /** The width of the form. */
+  export let width = '220px';
+
+  /** 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 = '';
+
+  let clientConfig: ClientConfig | undefined = undefined;
+  let usernameElem: TextfieldComponentDev;
+  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;
+
+  $: nameFirst = name?.match(/^(.*?)(?: ([^ ]+))?$/)?.[1] ?? '';
+  $: nameLast = name?.match(/^(.*?)(?: ([^ ]+))?$/)?.[2] ?? '';
+
+  let _previousExistingUser = existingUser;
+  $: if (existingUser !== _previousExistingUser) {
+    failureMessage = '';
+    checkUsername(username);
+    _previousExistingUser = existingUser;
+  }
+
+  $: {
+    checkUsername(username);
+  }
+
+  onMount(async () => {
+    clientConfig = await getClientConfig();
+    if (!clientConfig.allowRegistration) {
+      existingUser = true;
+    }
+    if (autofocus && usernameElem) {
+      usernameElem.focus();
+    }
+  });
+
+  async function login() {
+    successLoginMessage = undefined;
+    failureMessage = undefined;
+    loggingIn = true;
+    try {
+      const data = await loginAction(username, password);
+      successLoginMessage = data.message;
+      dispatch('login', { user: data.user });
+    } catch (e: any) {
+      failureMessage = e?.message;
+    }
+    loggingIn = false;
+  }
+
+  async function register() {
+    successRegisteredMessage = undefined;
+    successLoginMessage = undefined;
+    failureMessage = undefined;
+    registering = true;
+    try {
+      const data = await registerAction({
+        username,
+        usernameVerified: !!usernameVerified,
+        password,
+        password2,
+        email,
+        nameFirst,
+        nameLast,
+        phone,
+      });
+      successRegisteredMessage = data.message;
+      dispatch('register', { user: data.user });
+      if (data.loggedin) {
+        successLoginMessage = data.message;
+        dispatch('login', { user: data.user });
+      }
+    } catch (e: any) {
+      failureMessage = e?.message;
+    }
+    registering = false;
+  }
+
+  function checkUsername(newValue: string) {
+    usernameVerified = undefined;
+    usernameVerifiedMessage = undefined;
+    if (usernameTimer) {
+      clearTimeout(usernameTimer);
+      usernameTimer = undefined;
+    }
+    if (newValue === '' || existingUser) {
+      return;
+    }
+    usernameTimer = setTimeout(async () => {
+      try {
+        const data = await checkUsernameAction(newValue);
+        usernameVerified = true;
+        usernameVerifiedMessage = data.message;
+      } catch (e: any) {
+        usernameVerified = false;
+        usernameVerifiedMessage = e?.message;
+      }
+    }, 400);
+  }
+</script>
+
+<style>
+  .tilmeld-login-buttons {
+    display: flex;
+    flex-direction: row;
+    justify-content: start;
+    align-items: center;
+    margin-top: 1em;
+  }
+  .tilmeld-login-action {
+    margin-top: 1em;
+  }
+  .tilmeld-login-failure {
+    margin-top: 1em;
+    color: var(--mdc-theme-error, #f00);
+  }
+</style>

package/src/Recover.svelte

@@ -0,0 +1,309 @@
+{#if clientConfig != null && clientConfig.pwRecovery}
+  <Dialog
+    bind:open
+    aria-labelledby="tilmeld-recovery-title"
+    aria-describedby="tilmeld-recovery-content"
+    surface$class="tilmeld-recover-dialog-surface"
+  >
+    <!-- Title cannot contain leading whitespace due to mdc-typography-baseline-top() -->
+    <Title id="tilmeld-recovery-title">Recover Your Account</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" />
+                <span slot="label">I don't know my password.</span>
+              </FormField>
+              <FormField style="margin-right: 1em;">
+                <Radio bind:group={recoveryType} value="username" />
+                <span slot="label">I don't know my username.</span>
+              </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"
+            />
+          </div>
+
+          {#if recoveryType === 'password'}
+            <div class="tilmeld-recover-action">
+              <a
+                href="javascript:void(0);"
+                on:click={() => (hasSentSecret = 1)}
+              >
+                Already Got a Code?
+              </a>
+            </div>
+          {/if}
+        {:else}
+          <div>
+            <p>
+              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"
+              />
+            </div>
+          {/if}
+
+          <div>
+            <Textfield
+              bind:value={secret}
+              label="Recovery Code"
+              type="text"
+              input$autocomplete="one-time-code"
+            />
+          </div>
+
+          <div>
+            <Textfield
+              bind:value={password}
+              label="Password"
+              type="password"
+              input$autocomplete="new-password"
+            />
+          </div>
+
+          <div>
+            <Textfield
+              bind:value={password2}
+              label="Re-enter Password"
+              type="password"
+              input$autocomplete="new-password"
+            />
+          </div>
+
+          <div class="tilmeld-recover-action">
+            <a
+              href="javascript:void(0);"
+              on:click={() => (hasSentSecret = false)}
+            >
+              Need a New Code?
+            </a>
+          </div>
+        {/if}
+
+        {#if failureMessage}
+          <div class="tilmeld-recover-failure">
+            {failureMessage}
+          </div>
+        {/if}
+
+        {#if recovering}
+          <div class="tilmeld-recover-loading">
+            <CircularProgress
+              style="height: 24px; width: 24px;"
+              indeterminate
+            />
+          </div>
+        {/if}
+      {/if}
+    </Content>
+    <Actions>
+      <Button on:click={() => (open = false)} disabled={recovering}>
+        <Label>{successRecoveredMessage ? 'Close' : 'Cancel'}</Label>
+      </Button>
+      {#if !successRecoveredMessage}
+        {#if !hasSentSecret}
+          <Button
+            on:click$preventDefault$stopPropagation={sendRecovery}
+            disabled={recovering}
+          >
+            <Label>Send Recovery</Label>
+          </Button>
+        {:else}
+          <Button
+            on:click$preventDefault$stopPropagation={recover}
+            disabled={recovering}
+          >
+            <Label>Reset Password</Label>
+          </Button>
+        {/if}
+      {/if}
+    </Actions>
+  </Dialog>
+{/if}
+
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import CircularProgress from '@smui/circular-progress';
+  import Dialog, { Title, Content, Actions } from '@smui/dialog';
+  import Textfield, { TextfieldComponentDev } from '@smui/textfield';
+  import Button, { Label } from '@smui/button';
+  import FormField from '@smui/form-field';
+  import Radio from '@smui/radio';
+  import { ClientConfig, User } from '@nymphjs/tilmeld-client';
+
+  export let open = false;
+  // Give focus to the account box when the form is ready.
+  export let autofocus = true;
+  export let recoveryType: 'username' | 'password' = 'password';
+
+  /** 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 clientConfig: ClientConfig | undefined = undefined;
+  let recovering = false;
+  let hasSentSecret: number | boolean = false;
+  let accountElem: TextfieldComponentDev;
+  let failureMessage: string | undefined = undefined;
+  let successRecoveredMessage: string | undefined = undefined;
+
+  $: {
+    if (open && autofocus && accountElem) {
+      accountElem.focus();
+    }
+  }
+
+  onMount(async () => {
+    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;
+    recovering = 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;
+    }
+    recovering = 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;
+    recovering = 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;
+    }
+    recovering = 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/src/global.d.ts

@@ -0,0 +1 @@
+/// <reference types="svelte" />

package/src/index.d.ts

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

package/src/index.ts

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

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+
+  "compilerOptions": {
+    "noImplicitAny": true,
+    "strict": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules/*"]
+}

package/webpack.config.js

@@ -0,0 +1,35 @@
+const path = require('path');
+const sveltePreprocess = require('svelte-preprocess');
+
+module.exports = {
+  mode: 'production',
+  devtool: 'source-map',
+  entry: {
+    TilmeldComponents: './src/index.ts',
+  },
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'index.js',
+  },
+  resolve: {
+    extensions: ['.mjs', '.js', '.ts', '.svelte'],
+    mainFields: ['svelte', 'browser', 'module', 'main'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.svelte$/,
+        use: {
+          loader: 'svelte-loader',
+          options: {
+            preprocess: sveltePreprocess(),
+          },
+        },
+      },
+      {
+        test: /\.ts$/,
+        loader: 'ts-loader',
+      },
+    ],
+  },
+};