@aws-amplify/ui-svelte 0.0.0-next-5fb24a8-20220106211328 → 0.0.0-next-9a4f1cf-20220113211745

package/dist/components/AmplifySignUpFormFields.svelte

@@ -0,0 +1,41 @@
+<script >import { onMount } from 'svelte';
+import { authState } from './authStore';
+import { authInputAttributes, } from '@aws-amplify/ui';
+import AmplifyFormField from '../components/primitives/AmplifyFormField.svelte';
+import UserNameAlias from './UserNameAlias.svelte';
+let fieldNames = [];
+let loginMechanism;
+onMount(() => {
+    const context = $authState.context;
+    const { loginMechanisms, signUpAttributes } = context.config;
+    fieldNames = Array.from(new Set([...loginMechanisms, ...signUpAttributes]));
+    fieldNames = fieldNames.filter((fieldName) => {
+        const hasDefaultField = !!authInputAttributes[fieldName];
+        if (!hasDefaultField) {
+            console.debug(`Authenticator does not have a default implementation for ${fieldName}. Customize Authenticator.SignUp.FormFields to add your own.`);
+        }
+        return hasDefaultField;
+    });
+    // Only 1 is supported, so `['email', 'phone_number']` will only show `email`
+    loginMechanism = fieldNames.shift();
+});
+</script>
+
+<div class="amplify-flex" style="flex-direction: column" data-amplify-fieldset>
+  <UserNameAlias name={loginMechanism} />
+  <AmplifyFormField
+    name="password"
+    type="password"
+    autocomplete="new-password"
+  />
+  <AmplifyFormField
+    name="confirm_password"
+    label="Confirm Password"
+    type="password"
+    autocomplete="new-password"
+  />
+
+  {#each fieldNames as field}
+    <AmplifyFormField name={field} type="text" labelHidden={false} />
+  {/each}
+</div>

package/dist/components/AmplifySignUpFormFields.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type AmplifySignUpFormFieldsProps = typeof __propDef.props;
+export declare type AmplifySignUpFormFieldsEvents = typeof __propDef.events;
+export declare type AmplifySignUpFormFieldsSlots = typeof __propDef.slots;
+export default class AmplifySignUpFormFields extends SvelteComponentTyped<AmplifySignUpFormFieldsProps, AmplifySignUpFormFieldsEvents, AmplifySignUpFormFieldsSlots> {
+}
+export {};

package/dist/components/Authenticator.svelte

@@ -1,7 +1,8 @@
 <script >import { onDestroy } from 'svelte';
 import { setupMachine, route, toSignIn } from './authStore';
-import SignIn from './SignIn.svelte';
 import AmplifyTabs from './primitives/AmplifyTabs.svelte';
+import AmplifyTabItem from './primitives/AmplifyTabItem.svelte';
+import ConfirmSignUp from './ConfirmSignUp.svelte';
 export let initialState = undefined;
 export let loginMechanisms = undefined;
 export let services = undefined;
@@ -20,20 +21,26 @@ onDestroy(() => {
       <!--Slot header goes here-->
       <div data-amplify-router>
         {#if $route === 'signIn' || $route === 'signUp'}
-          <AmplifyTabs />
-        {/if}
-
-        {#if $route === 'signIn'}
-          <SignIn />
-        {/if}
-        {#if $route === 'signUp'}
-          <p>Sign Up</p>
-          <button on:click={toSignIn}>To Sign In</button>
+          <AmplifyTabs let:tabs>
+            {#each tabs as tab}
+              <AmplifyTabItem
+                active={tab.active}
+                id={tab.id}
+                labelledById={tab.labelledById}
+                tabIndex={tab.tabIndex}
+              >
+                <svelte:component this={tab.component} />
+              </AmplifyTabItem>
+            {/each}
+          </AmplifyTabs>
         {/if}
         {#if $route === 'resetPassword'}
           <p>reset password</p>
           <button on:click={toSignIn}>To Sign In</button>
         {/if}
+        {#if $route === 'confirmSignUp'}
+          <ConfirmSignUp />
+        {/if}
       </div>
     </div>
   </div>

package/dist/components/ConfirmSignUp.svelte

@@ -0,0 +1,87 @@
+<script >import { codeDeliveryDetails, updateForm, submitForm, resendCode, error, isPending, } from './authStore';
+import { translate } from '@aws-amplify/ui';
+import AmplifyFormField from './primitives/AmplifyFormField.svelte';
+import AmplifyButton from './primitives/AmplifyButton.svelte';
+import AmplifyError from './primitives/AmplifyError.svelte';
+// translated texts
+const resendCodeText = translate('Resend Code');
+const confirmText = translate('Confirm');
+let confirmSignUpHeading = '';
+let subtitleText = '';
+$: {
+    const { DeliveryMedium = {} } = $codeDeliveryDetails;
+    confirmSignUpHeading =
+        DeliveryMedium === 'EMAIL'
+            ? translate('We Emailed You')
+            : DeliveryMedium === 'SMS'
+                ? translate('We Texted You')
+                : translate('We Sent A Code');
+}
+$: {
+    const { DeliveryMedium, Destination } = $codeDeliveryDetails;
+    subtitleText =
+        DeliveryMedium === 'EMAIL'
+            ? `Your code is on the way. To log in, enter the code we emailed to ${Destination}. It may take a minute to arrive.`
+            : DeliveryMedium === 'SMS'
+                ? `Your code is on the way. To log in, enter the code we texted to ${Destination}. It may take a minute to arrive.`
+                : translate(`Your code is on the way. To log in, enter the code we sent you. It may take a minute to arrive.`);
+}
+function onInput(event) {
+    event.preventDefault();
+    const { name, value } = event.target;
+    updateForm({ name, value });
+}
+function onSubmit(event) {
+    event.preventDefault();
+    submitForm();
+}
+</script>
+
+<div data-amplify-container>
+  <form
+    data-amplify-form
+    on:submit|preventDefault={onSubmit}
+    on:input={onInput}
+  >
+    <fieldset
+      class="amplify-flex"
+      style="flex-direction: column"
+      data-amplify-fieldset
+      disabled={$isPending}
+    >
+      <h3 class="amplify-heading" style="font-size: 1.5rem">
+        {confirmSignUpHeading}
+      </h3>
+      <span style="margin-bottom: 1rem">
+        {subtitleText}
+      </span>
+      <AmplifyFormField
+        name="confirmation_code"
+        type="text"
+        autocomplete="one-time-code"
+      />
+
+      {#if $error}
+        <AmplifyError>
+          {$error}
+        </AmplifyError>
+      {/if}
+
+      <AmplifyButton
+        amplify-AmplifyButton
+        variation="primary"
+        fullWidth="true"
+        type="submit"
+      >
+        {confirmText}
+      </AmplifyButton>
+      <AmplifyButton
+        amplify-button
+        fontWeight="normal"
+        on:click={() => resendCode()}
+      >
+        {resendCodeText}
+      </AmplifyButton>
+    </fieldset>
+  </form>
+</div>

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

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type ConfirmSignUpProps = typeof __propDef.props;
+export declare type ConfirmSignUpEvents = typeof __propDef.events;
+export declare type ConfirmSignUpSlots = typeof __propDef.slots;
+export default class ConfirmSignUp extends SvelteComponentTyped<ConfirmSignUpProps, ConfirmSignUpEvents, ConfirmSignUpSlots> {
+}
+export {};

package/dist/components/FederatedSignIn.svelte.d.ts

@@ -0,0 +1,19 @@
+/** @typedef {typeof __propDef.props}  FederatedSignInProps */
+/** @typedef {typeof __propDef.events}  FederatedSignInEvents */
+/** @typedef {typeof __propDef.slots}  FederatedSignInSlots */
+export default class FederatedSignIn extends SvelteComponentTyped<{}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type FederatedSignInProps = typeof __propDef.props;
+export type FederatedSignInEvents = typeof __propDef.events;
+export type FederatedSignInSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/components/SignUp.svelte

@@ -0,0 +1,45 @@
+<script >import { updateForm, submitForm, error, isPending, hasValidationErrors, } from './authStore';
+import AmplifyError from './primitives/AmplifyError.svelte';
+import AmplifyButton from './primitives/AmplifyButton.svelte';
+import AmplifySignUpFormFields from './AmplifySignUpFormFields.svelte';
+import { translate } from '@aws-amplify/ui';
+const createAccountText = translate('Create Account');
+function onInput(event) {
+    let { checked, name, type, value } = event.target;
+    if (type === 'checkbox' && !checked)
+        value = undefined;
+    updateForm({ name, value });
+}
+function onSubmit(event) {
+    submitForm();
+}
+</script>
+
+<form data-amplify-form on:submit|preventDefault={onSubmit} on:input={onInput}>
+  <div class="amplify-flex" style="flex-direction: column">
+    <div class="amplify-flex" style="flex-direction: column">
+      <fieldset
+        class="amplify-flex"
+        style="flex-direction: column"
+        disabled={$isPending}
+      >
+        <AmplifySignUpFormFields />
+      </fieldset>
+      {#if $error}
+        <AmplifyError>
+          {$error}
+        </AmplifyError>
+      {/if}
+    </div>
+
+    <AmplifyButton
+      disabled={$isPending || $hasValidationErrors}
+      amplify-button
+      variation="primary"
+      fullWidth="true"
+      type="submit"
+    >
+      {createAccountText}
+    </AmplifyButton>
+  </div>
+</form>

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

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type SignUpProps = typeof __propDef.props;
+export declare type SignUpEvents = typeof __propDef.events;
+export declare type SignUpSlots = typeof __propDef.slots;
+export default class SignUp extends SvelteComponentTyped<SignUpProps, SignUpEvents, SignUpSlots> {
+}
+export {};

package/dist/components/authStore.js

@@ -1,4 +1,4 @@
-import { createAuthenticatorMachine, getServiceContextFacade, getSendEventAliases, translate, } from '@aws-amplify/ui';
+import { createAuthenticatorMachine, getSendEventAliases, translate, getServiceContextFacade, } from '@aws-amplify/ui';
 import { interpret } from 'xstate';
 import { writable, get } from 'svelte/store';
 let _facade = writable(null);
@@ -10,6 +10,7 @@ export const user = writable(null);
 export const validationErrors = writable(null);
 export const codeDeliveryDetails = writable(null);
 const _sendEventAliases = writable(null);
+const contextFacade = getServiceContextFacade;
 /** @deprecated For internal use only */
 export const authState = writable(null);
 export function setupMachine(initialState, loginMechanisms, services, signUpAttributes, socialProviders) {
@@ -25,7 +26,7 @@ export function setupMachine(initialState, loginMechanisms, services, signUpAttr
     }).start();
     const subscription = authService.subscribe((state) => {
         authState.update(() => state);
-        _facade.update(() => getServiceContextFacade(state));
+        _facade.update(() => contextFacade(state));
         setError();
         setRoute();
         setHasValidationErrors();

package/dist/components/primitives/AmplifyTabItem.svelte

@@ -0,0 +1,19 @@
+<script >import 'svelte';
+export let active = false;
+export let id;
+export let labelledById;
+export let tabIndex;
+</script>
+
+<div
+  data-orientation="horizontal"
+  role="tabpanel"
+  {id}
+  aria-labelledby={labelledById}
+  data-state={active ? 'active' : 'inactive'}
+  tabindex={tabIndex}
+>
+  {#if active}
+    <slot />
+  {/if}
+</div>

package/dist/components/primitives/AmplifyTabItem.svelte.d.ts

@@ -1,19 +1,21 @@
-/** @typedef {typeof __propDef.props}  AmplifyTabItemProps */
-/** @typedef {typeof __propDef.events}  AmplifyTabItemEvents */
-/** @typedef {typeof __propDef.slots}  AmplifyTabItemSlots */
-export default class AmplifyTabItem extends SvelteComponentTyped<{}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type AmplifyTabItemProps = typeof __propDef.props;
-export type AmplifyTabItemEvents = typeof __propDef.events;
-export type AmplifyTabItemSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: {
+        active?: boolean;
+        id: string;
+        labelledById: string;
+        tabIndex: number;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
+export declare type AmplifyTabItemProps = typeof __propDef.props;
+export declare type AmplifyTabItemEvents = typeof __propDef.events;
+export declare type AmplifyTabItemSlots = typeof __propDef.slots;
+export default class AmplifyTabItem extends SvelteComponentTyped<AmplifyTabItemProps, AmplifyTabItemEvents, AmplifyTabItemSlots> {
+}
 export {};

package/dist/components/primitives/AmplifyTabs.svelte

@@ -1,50 +1,72 @@
-<script >//tab list
-const tabs = [
+<script >import SignIn from '../SignIn.svelte';
+import SignUp from '../SignUp.svelte';
+import { toSignIn, toSignUp } from '../authStore';
+//tab list
+let tabs = [
     {
         active: true,
         labelledById: '1',
         id: '1',
-        title: 'Sign In'
+        title: 'Sign In',
+        tabIndex: 0,
+        component: SignIn,
     },
     {
         active: false,
         labelledById: '2',
         id: '2',
-        title: 'Sign Up'
-    }
+        title: 'Sign Up',
+        tabIndex: -1,
+        component: SignUp,
+    },
 ];
 function handleTabClick(e) {
-    // future
+    if (e.id === '1') {
+        toSignIn();
+    }
+    else {
+        toSignUp();
+    }
+    tabs = tabs.map((tab) => {
+        if (tab.id === e.id) {
+            return { ...tab, active: true };
+        }
+        else {
+            return { ...tab, active: false };
+        }
+    });
 }
 </script>
 
 <div
-	tabindex="0"
-	aria-orientation="horizontal"
-	data-orientation="horizontal"
-	role="tablist"
-	style="outline: none"
+  tabindex="0"
+  aria-orientation="horizontal"
+  data-orientation="horizontal"
+  role="tablist"
+  style="outline: none"
 >
-	<div
-		class="amplify-flex amplify-tabs"
-		data-indicator-position="top"
-		style="gap: 0px; justify-content: center"
-	>
-		{#each tabs as tab}
-			<div
-				class="amplify-tabs-item"
-				data-spacing="equal"
-				data-orientation="horizontal"
-				role="tab"
-				id={tab.labelledById}
-				tabindex={tab.active ? 0 : 1}
-				aria-selected={tab.active}
-				aria-controls={tab.id}
-				data-state={tab.active ? 'active' : 'inactive'}
-				on:click={() => handleTabClick(tab)}
-			>
-				{tab.title}
-			</div>
-		{/each}
-	</div>
+  <div
+    class="amplify-flex amplify-tabs"
+    data-indicator-position="top"
+    style="gap: 0px; justify-content: center"
+  >
+    {#each tabs as tab}
+      <div
+        class="amplify-tabs-item"
+        data-spacing="equal"
+        data-orientation="horizontal"
+        role="tab"
+        id={tab.labelledById}
+        tabindex={tab.active ? 0 : 1}
+        aria-selected={tab.active}
+        aria-controls={tab.id}
+        data-state={tab.active ? 'active' : 'inactive'}
+        on:click={() => handleTabClick(tab)}
+      >
+        {tab.title}
+      </div>
+    {/each}
+  </div>
 </div>
+
+<slot {tabs} />

package/dist/components/primitives/AmplifyTabs.svelte.d.ts

@@ -1,10 +1,22 @@
 import { SvelteComponentTyped } from "svelte";
+import SignIn from '../SignIn.svelte';
 declare const __propDef: {
     props: {};
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {
+            tabs: {
+                active: boolean;
+                labelledById: string;
+                id: string;
+                title: string;
+                tabIndex: number;
+                component: typeof SignIn;
+            }[];
+        };
+    };
 };
 export declare type AmplifyTabsProps = typeof __propDef.props;
 export declare type AmplifyTabsEvents = typeof __propDef.events;

package/dist/package.json

@@ -6,8 +6,12 @@
   "svelte": "dist/index.js",
   "exports": {
     "./package.json": "./package.json",
+    "./components/AmplifySignUpFormFields.svelte": "./components/AmplifySignUpFormFields.svelte",
     "./components/Authenticator.svelte": "./components/Authenticator.svelte",
+    "./components/ConfirmSignUp.svelte": "./components/ConfirmSignUp.svelte",
+    "./components/FederatedSignIn.svelte": "./components/FederatedSignIn.svelte",
     "./components/SignIn.svelte": "./components/SignIn.svelte",
+    "./components/SignUp.svelte": "./components/SignUp.svelte",
     "./components/UserNameAlias.svelte": "./components/UserNameAlias.svelte",
     "./components/authStore": "./components/authStore.js",
     "./components/primitives/AmplifyButton.svelte": "./components/primitives/AmplifyButton.svelte",
@@ -55,7 +59,7 @@
     "aws-amplify": "^4.2.2"
   },
   "dependencies": {
-    "@aws-amplify/ui": "^3.0.5",
+    "@aws-amplify/ui": "3.0.6",
     "@rollup/plugin-replace": "^3.0.0",
     "nanoid": "^3.1.30",
     "qrcode": "^1.5.0",

package/dist/styles.css

@@ -3,7 +3,7 @@
  */
 /**
  * Do not edit directly
- * Generated on Thu, 06 Jan 2022 21:11:37 GMT
+ * Generated on Thu, 13 Jan 2022 21:15:54 GMT
  */
 :root, [data-amplify-theme] {
   --amplify-transforms-slide-x-large: translateX(2em);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-svelte",
-  "version": "0.0.0-next-5fb24a8-20220106211328",
+  "version": "0.0.0-next-9a4f1cf-20220113211745",
   "type": "module",
   "main": "dist/index.js",
   "svelte": "dist/index.js",
@@ -53,7 +53,7 @@
     "aws-amplify": "^4.2.2"
   },
   "dependencies": {
-    "@aws-amplify/ui": "^0.0.0-next-5fb24a8-20220106211328",
+    "@aws-amplify/ui": "0.0.0-next-9a4f1cf-20220113211745",
     "@rollup/plugin-replace": "^3.0.0",
     "nanoid": "^3.1.30",
     "qrcode": "^1.5.0",