@aws-amplify/ui-svelte 0.0.0-next-9a4f1cf-20220113211745 → 0.0.0-next-23d2233-20251017111356

package/dist/components/Authenticator/SetupEmail.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+  import {
+    authenticatorTextUtil,
+    getFormDataFromEvent,
+    translate,
+  } from '@aws-amplify/ui';
+  import { useAuthenticator } from '../../stores/authenticator.svelte';
+  import { type Components } from '../../types';
+
+  import Wrapper from '../primitives/Wrapper.svelte';
+  import Form from '../primitives/Form.svelte';
+  import Button from '../controls/Button.svelte';
+  import FieldSet from '../primitives/FieldSet.svelte';
+  import FormFields from '../primitives/FormFields.svelte';
+  import Heading from '../primitives/Heading.svelte';
+  import Footer from '../primitives/Footer.svelte';
+  import Alert from '../primitives/Alert.svelte';
+
+  interface Props {
+    components?: Components;
+  }
+
+  const { components }: Props = $props();
+
+  const { authenticator } = $derived(useAuthenticator());
+  const { getBackToSignInText, getConfirmText, getSetupEmailText } =
+    authenticatorTextUtil;
+  const setupEmailHeading = $derived.by(() => getSetupEmailText());
+  const backSignInText = $derived.by(() => getBackToSignInText());
+  const confirmText = $derived.by(() => getConfirmText());
+
+  const onInput = (e: Event) => {
+    const { name, value } = e.target as HTMLInputElement;
+    authenticator.updateForm({ name, value });
+  };
+
+  const onSetupEmailSubmit = (e: Event) => {
+    e.preventDefault();
+    authenticator.submitForm(getFormDataFromEvent(e));
+  };
+
+  const onBackToSignInClicked = (e: Event) => {
+    e.preventDefault();
+    authenticator.toSignIn();
+  };
+</script>
+
+<Wrapper>
+  <Form
+    data-amplify-authenticator-setupemail
+    oninput={onInput}
+    onsubmit={onSetupEmailSubmit}
+  >
+    <FieldSet
+      class="amplify-flex amplify-authenticator__column"
+      disabled={authenticator.isPending}
+    >
+      {#if components?.Header}
+        {@render components?.Header()}
+      {:else}
+        <Heading level="h3" class="amplify-heading">
+          {setupEmailHeading}
+        </Heading>
+      {/if}
+      <Wrapper class="amplify-flex amplify-authenticator__column">
+        {#if components?.FormFields}
+          {@render components?.FormFields()}
+        {:else}
+          <FormFields route="setupEmail" />
+        {/if}
+      </Wrapper>
+      <Footer class="amplify-flex amplify-authenticator__column">
+        {#if authenticator.error}
+          <Alert>
+            {translate(authenticator.error)}
+          </Alert>
+        {/if}
+        <Button
+          class="amplify-field-group__control amplify-authenticator__font"
+          fullWidth={false}
+          loading={false}
+          variation="primary"
+          fontWeight="normal"
+          disabled={authenticator.isPending}
+        >
+          {confirmText}
+        </Button>
+        <Button
+          class="amplify-field-group__control amplify-authenticator__font"
+          fullWidth={false}
+          size="small"
+          variation="link"
+          fontWeight="normal"
+          type="button"
+          onclick={onBackToSignInClicked}
+        >
+          {backSignInText}
+        </Button>
+        {@render components?.Footer?.()}
+      </Footer>
+    </FieldSet>
+  </Form>
+</Wrapper>

package/dist/components/Authenticator/SetupEmail.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type Components } from '../../types';
+interface Props {
+    components?: Components;
+}
+declare const SetupEmail: import("svelte").Component<Props, {}, "">;
+type SetupEmail = ReturnType<typeof SetupEmail>;
+export default SetupEmail;

package/dist/components/Authenticator/SetupTotp.svelte

@@ -0,0 +1,178 @@
+<script lang="ts">
+  import QRCode from 'qrcode';
+
+  import { ConsoleLogger as Logger } from 'aws-amplify/utils';
+  import {
+    authenticatorTextUtil,
+    getFormDataFromEvent,
+    getTotpCodeURL,
+    translate,
+  } from '@aws-amplify/ui';
+
+  import { useAuthenticator } from '../../stores/authenticator.svelte';
+  import { type Components } from '../../types';
+  import Wrapper from '../primitives/Wrapper.svelte';
+  import Form from '../primitives/Form.svelte';
+  import Button from '../controls/Button.svelte';
+  import FieldSet from '../primitives/FieldSet.svelte';
+  import FormFields from '../primitives/FormFields.svelte';
+  import Heading from '../primitives/Heading.svelte';
+  import Footer from '../primitives/Footer.svelte';
+  import Alert from '../primitives/Alert.svelte';
+  import { onMount } from 'svelte';
+
+  interface Props {
+    components?: Components;
+  }
+
+  const { components }: Props = $props();
+
+  const logger = new Logger('SetupTotp-logger');
+
+  const { authenticator } = $derived(useAuthenticator());
+  const { totpIssuer = 'AWSCognito', totpUsername } = $derived(
+    authenticator.QRFields ?? {}
+  );
+  const totpCodeURL = $derived.by(() =>
+    getTotpCodeURL(
+      totpIssuer,
+      totpUsername || authenticator.username,
+      authenticator.totpSecretCode!
+    )
+  );
+
+  const qrCode = $state({
+    qrCodeImageSource: '',
+    isLoading: true,
+  });
+
+  // Text Util
+  const { getCopyText, getCopiedText, getBackToSignInText, getConfirmText } =
+    authenticatorTextUtil;
+
+  let copyTextLabel = $state(getCopyText());
+
+  function copyText() {
+    if (authenticator.totpSecretCode) {
+      navigator.clipboard.writeText(authenticator.totpSecretCode);
+    }
+    copyTextLabel = getCopiedText();
+  }
+
+  // lifecycle hooks
+  onMount(async () => {
+    try {
+      qrCode.qrCodeImageSource = await QRCode.toDataURL(totpCodeURL);
+    } catch (error) {
+      logger.error(error);
+    } finally {
+      qrCode.isLoading = false;
+    }
+  });
+
+  // Computed Properties
+  const backSignInText = $derived.by(() => getBackToSignInText());
+  const confirmText = $derived.by(() => getConfirmText());
+
+  // Methods
+  const onInput = (e: Event): void => {
+    const { name, value } = e.target as HTMLInputElement;
+    authenticator.updateForm({ name, value });
+  };
+
+  const onSetupTotpSubmit = (e: Event): void => {
+    e.preventDefault();
+    authenticator.submitForm(getFormDataFromEvent(e));
+  };
+
+  const onBackToSignInClicked = (e: Event): void => {
+    e.preventDefault();
+    authenticator.toSignIn();
+  };
+</script>
+
+<Wrapper>
+  <Form
+    data-amplify-authenticator-setup-totp
+    oninput={onInput}
+    onsubmit={onSetupTotpSubmit}
+  >
+    <FieldSet
+      class="amplify-flex amplify-authenticator__column"
+      disabled={authenticator.isPending}
+    >
+      <Wrapper class="amplify-flex amplify-authenticator__column">
+        {#if components?.Header}
+          {@render components?.Header()}
+        {:else}
+          <Heading class="amplify-heading" level="h3">Setup TOTP</Heading>
+        {/if}
+
+        <Wrapper class="amplify-flex amplify-authenticator__column">
+          {#if qrCode.isLoading}
+            <p>Loading...</p>
+          {:else}
+            <img
+              class="amplify-image"
+              data-amplify-qrcode
+              src={qrCode.qrCodeImageSource}
+              alt="qr code"
+              width="228"
+              height="228"
+            />
+          {/if}
+          <Wrapper class="amplify-flex" data-amplify-copy>
+            <div>{authenticator.totpSecretCode}</div>
+            <Wrapper data-amplify-copy-svg onclick={copyText}>
+              <div data-amplify-copy-tooltip>{copyTextLabel}</div>
+              <svg
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1ZM15 5H8C6.9 5 6.01 5.9 6.01 7L6 21C6 22.1 6.89 23 7.99 23H19C20.1 23 21 22.1 21 21V11L15 5ZM8 21V7H14V12H19V21H8Z"
+                />
+              </svg>
+            </Wrapper>
+          </Wrapper>
+
+          {#if components?.FormFields}
+            {@render components?.FormFields()}
+          {:else}
+            <FormFields route="setupTotp" />
+          {/if}
+        </Wrapper>
+        <Footer class="amplify-flex amplify-authenticator__column">
+          {#if authenticator.error}
+            <Alert>
+              {translate(authenticator.error)}
+            </Alert>
+          {/if}
+          <Button
+            class="amplify-field-group__control amplify-authenticator__font"
+            fullWidth={false}
+            loading={false}
+            variation="primary"
+            type="submit"
+            disabled={authenticator.isPending}
+          >
+            {confirmText}
+          </Button>
+          <Button
+            class="amplify-field-group__control amplify-authenticator__font"
+            fullWidth={false}
+            size="small"
+            variation="link"
+            type="button"
+            onclick={onBackToSignInClicked}
+          >
+            {backSignInText}
+          </Button>
+          {@render components?.Footer?.()}
+        </Footer>
+      </Wrapper>
+    </FieldSet>
+  </Form>
+</Wrapper>

package/dist/components/Authenticator/SetupTotp.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type Components } from '../../types';
+interface Props {
+    components?: Components;
+}
+declare const SetupTotp: import("svelte").Component<Props, {}, "">;
+type SetupTotp = ReturnType<typeof SetupTotp>;
+export default SetupTotp;

package/dist/components/Authenticator/SignIn.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+  import {
+    authenticatorTextUtil,
+    getFormDataFromEvent,
+    translate,
+  } from '@aws-amplify/ui';
+
+  import { useAuthenticator } from '../../stores/authenticator.svelte';
+  import { type Components } from '../../types';
+
+  import FormFields from '../primitives/FormFields.svelte';
+  import FieldSet from '../primitives/FieldSet.svelte';
+  import Form from '../primitives/Form.svelte';
+  import Alert from '../primitives/Alert.svelte';
+  import Footer from '../primitives/Footer.svelte';
+  import Wrapper from '../primitives/Wrapper.svelte';
+  import Button from '../controls/Button.svelte';
+  import FederatedSignIn from '../controls/FederatedSignIn.svelte';
+  import { type HTMLAttributes } from 'svelte/elements';
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    components?: Components;
+  }
+
+  const { components, ...rest }: Props = $props();
+
+  const { authenticator } = $derived(useAuthenticator());
+
+  // Text Util
+  const { getForgotPasswordText, getSignInText, getSigningInText } =
+    authenticatorTextUtil;
+
+  // Computed Properties
+  const forgotYourPasswordLink = $derived.by(() => getForgotPasswordText());
+  const signInButtonText = $derived.by(() => getSignInText());
+  const signingInButtonText = $derived.by(() => getSigningInText());
+
+  // Methods
+  const onInput = (e: Event): void => {
+    const { name, value } = e.target as HTMLInputElement;
+    authenticator.updateForm({ name, value });
+  };
+
+  const onSignInSubmit = (e: Event): void => {
+    e.preventDefault();
+    authenticator.submitForm(getFormDataFromEvent(e));
+  };
+
+  const onForgotPasswordClicked = (): void => {
+    authenticator.toForgotPassword();
+  };
+</script>
+
+<div {...rest}>
+  {@render components?.Header?.()}
+  <Wrapper>
+    <Form
+      data-amplify-authenticator-signin
+      oninput={onInput}
+      onsubmit={onSignInSubmit}
+      method="post"
+    >
+      <FederatedSignIn />
+      <Wrapper class="amplify-flex amplify-authenticator__column">
+        <FieldSet
+          disabled={authenticator.isPending}
+          class="amplify-flex amplify-authenticator__column"
+        >
+          <legend class="amplify-visually-hidden">Sign in</legend>
+          {#if components?.FormFields}
+            {@render components?.FormFields()}
+          {:else}
+            <FormFields route="signIn" />
+          {/if}
+        </FieldSet>
+        {#if authenticator.error}
+          <Alert>{translate(authenticator.error)}</Alert>
+        {/if}
+
+        <Button
+          disabled={authenticator.isPending}
+          class="amplify-field-group__control amplify-authenticator__font"
+          fullWidth={true}
+          loading={false}
+          variation="primary"
+        >
+          {authenticator.isPending ? signingInButtonText : signInButtonText}
+        </Button>
+      </Wrapper>
+    </Form>
+  </Wrapper>
+
+  <Footer>
+    {#if components?.Footer}
+      {@render components?.Footer()}
+    {:else}
+      <div data-amplify-footer>
+        <Button
+          onclick={onForgotPasswordClicked}
+          class="amplify-field-group__control amplify-authenticator__font"
+          variation="link"
+          fullWidth={true}
+          size="small"
+          fontWeight="normal"
+          type="button"
+        >
+          {forgotYourPasswordLink}
+        </Button>
+      </div>
+    {/if}
+  </Footer>
+</div>

package/dist/components/Authenticator/SignIn.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type Components } from '../../types';
+import { type HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    components?: Components;
+}
+declare const SignIn: import("svelte").Component<Props, {}, "">;
+type SignIn = ReturnType<typeof SignIn>;
+export default SignIn;

package/dist/components/Authenticator/SignUp.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+  import {
+    authenticatorTextUtil,
+    getFormDataFromEvent,
+    translate,
+  } from '@aws-amplify/ui';
+
+  import { useAuthenticator } from '../../stores/authenticator.svelte';
+  import { type Components } from '../../types';
+
+  import FederatedSignIn from '../controls/FederatedSignIn.svelte';
+  import FormFields from '../primitives/FormFields.svelte';
+  import FieldSet from '../primitives/FieldSet.svelte';
+  import Form from '../primitives/Form.svelte';
+  import Alert from '../primitives/Alert.svelte';
+  import Button from '../controls/Button.svelte';
+  import Wrapper from '../primitives/Wrapper.svelte';
+  import Footer from '../primitives/Footer.svelte';
+  import { type HTMLAttributes } from 'svelte/elements';
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    components?: Components;
+  }
+
+  const { components, ...rest }: Props = $props();
+
+  const { authenticator } = $derived(useAuthenticator());
+
+  // Text Util
+  const { getCreateAccountText } = authenticatorTextUtil;
+
+  // Computed Properties
+  const createAccountLabel = $derived.by(() => getCreateAccountText());
+
+  // Methods
+  const onInput = (e: Event): void => {
+    const { checked, name, type, value } = e.target as HTMLInputElement;
+
+    const isUncheckedCheckbox = type === 'checkbox' && !checked;
+    authenticator.updateForm({
+      name,
+      value: isUncheckedCheckbox ? undefined : (value as string),
+    });
+  };
+
+  function onBlur(e: Event) {
+    const { name } = e.target as HTMLInputElement;
+    authenticator.updateBlur({ name });
+  }
+
+  const onSignUpSubmit = (e: Event): void => {
+    e.preventDefault();
+    authenticator.submitForm(getFormDataFromEvent(e));
+  };
+</script>
+
+<div {...rest}>
+  {@render components?.Header?.()}
+
+  <Wrapper>
+    <Form oninput={onInput} onblurcapture={onBlur} onsubmit={onSignUpSubmit}>
+      <FederatedSignIn />
+
+      <Wrapper class="amplify-flex amplify-authenticator__column">
+        <FieldSet
+          class="amplify-flex amplify-authenticator__column"
+          disabled={authenticator.isPending}
+        >
+          {#if components?.FormFields}
+            {@render components?.FormFields()}
+          {:else}
+            <FormFields route="signUp" />
+          {/if}
+        </FieldSet>
+        {#if authenticator.error}
+          <Alert>
+            {translate(authenticator.error)}
+          </Alert>
+        {/if}
+        <Button
+          class="amplify-field-group__control amplify-authenticator__font"
+          fullWidth={true}
+          loading={false}
+          variation="primary"
+          style="border-radius: 0px; font-weight: normal"
+          disabled={authenticator.isPending ||
+            authenticator.hasValidationErrors}
+        >
+          {createAccountLabel}
+        </Button>
+      </Wrapper>
+    </Form>
+  </Wrapper>
+
+  <Footer>
+    {@render components?.Footer?.()}
+  </Footer>
+</div>

package/dist/components/Authenticator/SignUp.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type Components } from '../../types';
+import { type HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    components?: Components;
+}
+declare const SignUp: import("svelte").Component<Props, {}, "">;
+type SignUp = ReturnType<typeof SignUp>;
+export default SignUp;

package/dist/components/Authenticator/VerifyUser.svelte

@@ -0,0 +1,160 @@
+<script lang="ts">
+  import {
+    authenticatorTextUtil,
+    censorContactMethod,
+    type ContactMethod,
+    defaultFormFieldOptions,
+    getFormDataFromEvent,
+    translate,
+  } from '@aws-amplify/ui';
+
+  import { useAuthenticator } from '../../stores/authenticator.svelte';
+  import { type Components } from '../../types';
+
+  import Wrapper from '../primitives/Wrapper.svelte';
+  import Form from '../primitives/Form.svelte';
+  import Button from '../controls/Button.svelte';
+  import FieldSet from '../primitives/FieldSet.svelte';
+  import Heading from '../primitives/Heading.svelte';
+  import Footer from '../primitives/Footer.svelte';
+  import Alert from '../primitives/Alert.svelte';
+  import Text from '../primitives/Text.svelte';
+  import Label from '../primitives/Label.svelte';
+  import Input from '../primitives/Input.svelte';
+
+  interface Props {
+    components?: Omit<Components, 'FormFields'>;
+  }
+
+  const { components }: Props = $props();
+
+  const { authenticator } = $derived(useAuthenticator());
+
+  // Text Util
+  const {
+    getAccountRecoveryInfoText,
+    getSkipText,
+    getVerifyText,
+    getVerifyContactText,
+  } = authenticatorTextUtil;
+
+  // Computed Properties
+  const verifyHeading = $derived.by(() => getAccountRecoveryInfoText());
+  const skipText = $derived.by(() => getSkipText());
+  const verifyText = $derived.by(() => getVerifyText());
+  const verifyContactText = $derived.by(() => getVerifyContactText());
+
+  // Methods
+  const onInput = (e: Event): void => {
+    const { name, value } = e.target as HTMLInputElement;
+    authenticator.updateForm({ name, value });
+  };
+
+  const onVerifyUserSubmit = (e: Event): void => {
+    e.preventDefault();
+    submit(e);
+  };
+
+  const submit = (e: Event): void => {
+    authenticator.submitForm(getFormDataFromEvent(e));
+  };
+
+  const onSkipClicked = (e: Event): void => {
+    e.preventDefault();
+    authenticator.skipVerification();
+  };
+
+  const getDefaultFormFieldOption = (key: string) => {
+    const k = key as keyof typeof defaultFormFieldOptions;
+    return defaultFormFieldOptions[k] as { label: ContactMethod };
+  };
+</script>
+
+<Wrapper>
+  <Form oninput={onInput} onsubmit={onVerifyUserSubmit}>
+    <FieldSet
+      disabled={authenticator.isPending}
+      class="amplify-flex amplify-authenticator__column"
+    >
+      {#if components?.Header}
+        {@render components?.Header()}
+      {:else}
+        <Heading class="amplify-heading" level="h3">
+          {verifyHeading}
+        </Heading>
+      {/if}
+      <Wrapper
+        class="amplify-flex amplify-field amplify-radiogroupfield amplify-authenticator__column"
+      >
+        <!-- TODO(BREAKING): remove hard coded string 493c -->
+        <Label
+          class="amplify-visually-hidden amplify-label"
+          id="amplify-field-493c"
+        >
+          {verifyContactText}
+        </Label>
+        <Wrapper
+          class="amplify-flex amplify-field amplify-radiogroupfield amplify-authenticator__column"
+          aria-labelledby="amplify-field-493c"
+        >
+          {#each Object.entries(authenticator.unverifiedUserAttributes) as [key, value], index (value)}
+            {#if value}
+              {@const verificationType = getDefaultFormFieldOption(key).label}
+              <Label
+                class="amplify-flex amplify-radio"
+                data-amplify-verify-label
+              >
+                <Text class="amplify-text amplify-radio__label">
+                  {translate(verificationType)}: {censorContactMethod(
+                    verificationType,
+                    value
+                  )}
+                </Text>
+                <Input
+                  class="amplify-input amplify-field-group__control amplify-visually-hidden amplify-radio__input"
+                  aria-invalid="false"
+                  data-amplify-verify-input
+                  name="unverifiedAttr"
+                  type="radio"
+                  checked={index === 0}
+                  value={key}
+                ></Input>
+                <Text
+                  class="amplify-flex amplify-radio__button"
+                  aria-hidden="true"
+                />
+              </Label>
+            {/if}
+          {/each}
+        </Wrapper>
+      </Wrapper>
+      <Footer class="amplify-flex amplify-authenticator__column">
+        {#if authenticator.error}
+          <Alert>
+            {translate(authenticator.error)}
+          </Alert>
+        {/if}
+        <Button
+          class="amplify-field-group__control amplify-authenticator__font"
+          fullWidth={false}
+          variation="primary"
+          type="submit"
+          disabled={authenticator.isPending}
+        >
+          {verifyText}
+        </Button>
+        <Button
+          class="amplify-field-group__control amplify-authenticator__font"
+          fullWidth={false}
+          size="small"
+          variation="link"
+          type="button"
+          onclick={onSkipClicked}
+        >
+          {skipText}
+        </Button>
+        {@render components?.Footer?.()}
+      </Footer>
+    </FieldSet>
+  </Form>
+</Wrapper>

package/dist/components/Authenticator/VerifyUser.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type Components } from '../../types';
+interface Props {
+    components?: Omit<Components, 'FormFields'>;
+}
+declare const VerifyUser: import("svelte").Component<Props, {}, "">;
+type VerifyUser = ReturnType<typeof VerifyUser>;
+export default VerifyUser;