@aws-amplify/ui-svelte 0.0.0-next-b4d0af6-20220107001542 → 0.0.0-next-23d2233-20251017111356

package/dist/components/Authenticator/ConfirmSignUp.svelte

@@ -0,0 +1,127 @@
+<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 Heading from '../primitives/Heading.svelte';
+  import Text from '../primitives/Text.svelte';
+  import FieldSet from '../primitives/FieldSet.svelte';
+  import FormFields from '../primitives/FormFields.svelte';
+  import Footer from '../primitives/Footer.svelte';
+  import Alert from '../primitives/Alert.svelte';
+  import Button from '../controls/Button.svelte';
+
+  interface Props {
+    components?: Components;
+  }
+
+  const { components }: Props = $props();
+
+  const { authenticator } = $derived(useAuthenticator());
+
+  // Text Util
+  const {
+    getDeliveryMethodText,
+    getDeliveryMessageText,
+    getResendCodeText,
+    getConfirmText,
+  } = authenticatorTextUtil;
+
+  // Only two types of delivery methods is EMAIL or SMS
+  const confirmSignUpHeading = $derived.by(() =>
+    getDeliveryMethodText(authenticator.codeDeliveryDetails)
+  );
+
+  // Computed Properties
+  const resendCodeText = $derived.by(() => getResendCodeText());
+  const confirmText = $derived.by(() => getConfirmText());
+  const subtitleText = $derived.by(() =>
+    getDeliveryMessageText(authenticator.codeDeliveryDetails)
+  );
+
+  // Methods
+  const onInput = (e: Event): void => {
+    const { name, value } = e.target as HTMLInputElement;
+    authenticator.updateForm({ name, value });
+  };
+
+  const onConfirmSignUpSubmit = (e: Event): void => {
+    e.preventDefault();
+    submit(e);
+  };
+
+  const submit = (e: Event): void => {
+    authenticator.submitForm(getFormDataFromEvent(e));
+  };
+
+  const onLostCodeClicked = (e: Event): void => {
+    e.preventDefault();
+    authenticator.resendCode();
+  };
+</script>
+
+<Wrapper>
+  <Form oninput={onInput} onsubmit={onConfirmSignUpSubmit}>
+    <Wrapper class="amplify-flex amplify-authenticator__column">
+      {#if components?.Header}
+        {@render components?.Header()}
+      {:else}
+        <Heading
+          class="amplify-heading amplify-authenticator__heading"
+          level="h3"
+        >
+          {confirmSignUpHeading}
+        </Heading>
+      {/if}
+      <Text class="amplify-authenticator__subtitle">
+        {subtitleText}
+      </Text>
+      <FieldSet
+        class="amplify-flex amplify-authenticator__column"
+        disabled={authenticator.isPending}
+      >
+        {#if components?.FormFields}
+          {@render components?.FormFields()}
+        {:else}
+          <FormFields route="confirmSignUp" />
+        {/if}
+      </FieldSet>
+
+      <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}
+          variation="default"
+          style="font-weight: normal"
+          type="button"
+          onclick={onLostCodeClicked}
+        >
+          {resendCodeText}
+        </Button>
+        {@render components?.Footer?.()}
+      </Footer>
+    </Wrapper>
+  </Form>
+</Wrapper>

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

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

package/dist/components/Authenticator/ConfirmVerifyUser.svelte

@@ -0,0 +1,106 @@
+<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());
+
+  // Text Util
+  const { getAccountRecoveryInfoText, getSkipText, getSubmitText } =
+    authenticatorTextUtil;
+
+  // Computed Properties
+  const verifyHeading = $derived.by(() => getAccountRecoveryInfoText());
+  const skipText = $derived.by(() => getSkipText());
+  const submitText = $derived.by(() => getSubmitText());
+
+  // Methods
+  const onInput = (e: Event): void => {
+    const { name, value } = e.target as HTMLInputElement;
+    authenticator.updateForm({ name, value });
+  };
+
+  const onConfirmVerifyUserSubmit = (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();
+  };
+</script>
+
+<Wrapper>
+  <Form oninput={onInput} onsubmit={onConfirmVerifyUserSubmit}>
+    <FieldSet
+      class="amplify-flex amplify-authenticator__column"
+      disabled={authenticator.isPending}
+    >
+      {#if components?.Header}
+        {@render components?.Header()}
+      {:else}
+        <Heading level="h3" class="amplify-heading">
+          {verifyHeading}
+        </Heading>
+      {/if}
+      <Wrapper class="amplify-flex amplify-authenticator__column">
+        {#if components?.FormFields}
+          {@render components?.FormFields()}
+        {:else}
+          <FormFields route="confirmVerifyUser" />
+        {/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}
+          variation="primary"
+          type="submit"
+          disabled={authenticator.isPending}>{submitText}</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/ConfirmVerifyUser.svelte.d.ts

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

package/dist/components/Authenticator/ForceNewPassword.svelte

@@ -0,0 +1,120 @@
+<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());
+
+  // Text Util
+  const { getChangePasswordText, getChangingText, getBackToSignInText } =
+    authenticatorTextUtil;
+
+  // Computed Properties
+  const changePasswordLabel = $derived.by(() => getChangePasswordText());
+  const changingPasswordLabel = $derived.by(() => getChangingText());
+  const backSignInText = $derived.by(() => getBackToSignInText());
+
+  // Methods
+  const onHaveAccountClicked = (e: Event): void => {
+    e.preventDefault();
+    authenticator.toSignIn();
+  };
+
+  const onForceNewPasswordSubmit = (e: Event): void => {
+    e.preventDefault();
+    submit(e);
+  };
+
+  const submit = (e: Event): void => {
+    authenticator.submitForm(getFormDataFromEvent(e));
+  };
+
+  const onInput = (e: Event): void => {
+    const { name, value } = e.target as HTMLInputElement;
+    authenticator.updateForm({ name, value });
+  };
+
+  function onBlur(e: Event) {
+    const { name } = e.target as HTMLInputElement;
+    authenticator.updateBlur({ name });
+  }
+</script>
+
+<Wrapper>
+  <Form
+    data-amplify-authenticator-forcenewpassword
+    oninput={onInput}
+    onblurcapture={onBlur}
+    onsubmit={onForceNewPasswordSubmit}
+  >
+    <FieldSet
+      class="amplify-flex amplify-authenticator__column"
+      disabled={authenticator.isPending}
+    >
+      {#if components?.Header}
+        {@render components?.Header()}
+      {:else}
+        <Heading level="h3" class="amplify-heading">
+          {changePasswordLabel}
+        </Heading>
+      {/if}
+      <Wrapper class="amplify-flex amplify-authenticator__column">
+        {#if components?.FormFields}
+          {@render components?.FormFields()}
+        {:else}
+          <FormFields route="forceNewPassword" />
+        {/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"
+          disabled={authenticator.isPending}
+        >
+          {authenticator.isPending
+            ? `${changingPasswordLabel}…`
+            : changePasswordLabel}
+        </Button>
+        <Button
+          class="amplify-field-group__control amplify-authenticator__font"
+          fullWidth={false}
+          size="small"
+          variation="link"
+          type="button"
+          onclick={onHaveAccountClicked}
+        >
+          {backSignInText}
+        </Button>
+        {@render components?.Footer?.()}
+      </Footer>
+    </FieldSet>
+  </Form>
+</Wrapper>

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

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

package/dist/components/Authenticator/ForgotPassword.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+  import {
+    authenticatorTextUtil,
+    getFormDataFromEvent,
+    translate,
+  } from '@aws-amplify/ui';
+
+  import { useAuthenticator } from '../../stores/authenticator.svelte';
+  import { type Components } from '../../types';
+
+  import Form from '../primitives/Form.svelte';
+  import Wrapper from '../primitives/Wrapper.svelte';
+  import Heading from '../primitives/Heading.svelte';
+  import FieldSet from '../primitives/FieldSet.svelte';
+  import FormFields from '../primitives/FormFields.svelte';
+  import Footer from '../primitives/Footer.svelte';
+  import Alert from '../primitives/Alert.svelte';
+  import Button from '../controls/Button.svelte';
+
+  interface Props {
+    components?: Components;
+  }
+
+  const { components }: Props = $props();
+
+  const { authenticator } = $derived(useAuthenticator());
+
+  // Text Util
+  const { getBackToSignInText, getResetYourPasswordText, getSendCodeText } =
+    authenticatorTextUtil;
+
+  // Computed Properties
+  const backSignInText = $derived.by(() => getBackToSignInText());
+  const resetPasswordHeading = $derived.by(() => getResetYourPasswordText());
+  const sendCodeText = $derived.by(() => getSendCodeText());
+
+  // Methods
+  const onResetPasswordSubmit = (e: Event): void => {
+    e.preventDefault();
+    authenticator.submitForm(getFormDataFromEvent(e));
+  };
+
+  const onInput = (e: Event): void => {
+    const { name, value } = e.target as HTMLInputElement;
+    authenticator.updateForm({ name, value });
+  };
+
+  const onBackToSignInClicked = (e: Event): void => {
+    e.preventDefault();
+    authenticator.toSignIn();
+  };
+</script>
+
+<Form
+  data-amplify-authenticator-forgotpassword
+  oninput={onInput}
+  onsubmit={onResetPasswordSubmit}
+>
+  <Wrapper class="amplify-flex amplify-authenticator__column">
+    {#if components?.Header}
+      {@render components?.Header()}
+    {:else}
+      <Heading class="amplify-heading" level="h3">
+        {resetPasswordHeading}
+      </Heading>
+    {/if}
+    <FieldSet
+      class="amplify-flex amplify-authenticator__column"
+      disabled={authenticator.isPending}
+    >
+      {#if components?.FormFields}
+        {@render components?.FormFields()}
+      {:else}
+        <FormFields route="forgotPassword" />
+      {/if}
+    </FieldSet>
+
+    <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}
+      >
+        {sendCodeText}
+      </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>
+  </Wrapper>
+</Form>

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

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

package/dist/components/Authenticator/SelectMfaType.svelte

@@ -0,0 +1,145 @@
+<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 Heading from '../primitives/Heading.svelte';
+  import Footer from '../primitives/Footer.svelte';
+  import Alert from '../primitives/Alert.svelte';
+  import Label from '../primitives/Label.svelte';
+  import Input from '../primitives/Input.svelte';
+  import Text from '../primitives/Text.svelte';
+
+  interface Props {
+    components?: Omit<Components, 'FormFields'>;
+  }
+
+  const { components }: Props = $props();
+
+  const { authenticator } = $derived(useAuthenticator());
+
+  const random = Math.floor(Math.random() * 999999);
+  const {
+    getBackToSignInText,
+    getConfirmText,
+    getSelectMfaTypeByChallengeName,
+    getMfaTypeLabelByValue,
+    getSelectMfaTypeText,
+  } = authenticatorTextUtil;
+
+  const selectMfaTypeHeading = $derived.by(() =>
+    getSelectMfaTypeByChallengeName(authenticator.challengeName)
+  );
+  const backSignInText = $derived.by(() => getBackToSignInText());
+  const confirmText = $derived.by(() => getConfirmText());
+  const selectMfaTypeText = $derived.by(() => getSelectMfaTypeText());
+
+  const onInput = (e: Event) => {
+    const { name, value } = e.target as HTMLInputElement;
+    authenticator.updateForm({ name, value });
+  };
+
+  const onSelectMfaTypeSubmit = (e: Event) => {
+    e.preventDefault();
+    authenticator.submitForm(getFormDataFromEvent(e));
+  };
+
+  const onBackToSignInClicked = (e: Event) => {
+    e.preventDefault();
+    authenticator.toSignIn();
+  };
+</script>
+
+<Wrapper>
+  <Form
+    data-amplify-authenticator-selectmfatype
+    oninput={onInput}
+    onsubmit={onSelectMfaTypeSubmit}
+  >
+    <FieldSet
+      class="amplify-flex amplify-authenticator__column"
+      disabled={authenticator.isPending}
+    >
+      {#if components?.Header}
+        {@render components?.Header()}
+      {:else}
+        <Heading level="h3" class="amplify-heading">
+          {selectMfaTypeHeading}
+        </Heading>
+      {/if}
+      <Wrapper class="amplify-flex amplify-authenticator__column">
+        <Label
+          class="amplify-visually-hidden amplify-label"
+          id={`amplify-field-${random}`}
+        >
+          {selectMfaTypeText}
+        </Label>
+        <Wrapper
+          class="amplify-flex amplify-field amplify-radiogroupfield amplify-authenticator__column"
+          aria-labelledby={`amplify-field-${random}`}
+        >
+          {#if authenticator.allowedMfaTypes}
+            {#each authenticator.allowedMfaTypes as mfaType, index (mfaType)}
+              <Label
+                class="amplify-flex amplify-radio"
+                data-amplify-selectmfatype-label
+              >
+                <Text class="amplify-text amplify-radio__label">
+                  {getMfaTypeLabelByValue(mfaType)}
+                </Text>
+                <Input
+                  class="amplify-input amplify-field-group__control amplify-visually-hidden amplify-radio__input"
+                  aria-invalid="false"
+                  data-amplify-selectmfatype-input
+                  name="mfa_type"
+                  type="radio"
+                  value={mfaType}
+                  checked={index === 0}
+                ></Input>
+                <Text
+                  class="amplify-flex amplify-radio__button"
+                  aria-hidden="true"
+                />
+              </Label>
+            {/each}
+          {/if}
+        </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}
+          loading={false}
+          variation="primary"
+          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>
+    </FieldSet>
+  </Form>
+</Wrapper>

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

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