fix merge conflict

.vscode/settings.json

@@ -2,6 +2,7 @@
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
   "editor.insertSpaces": true,
+  "editor.tabSize": 2,
   "files.insertFinalNewline": true,
   "prettier.requireConfig": true,
   "typescript.tsdk": "node_modules/typescript/lib",

packages/angular/projects/ui-angular/src/lib/components/amplify-authenticator/amplify-authenticator.component.html

@@ -33,56 +33,54 @@
 <ng-container
   [ngTemplateOutlet]="customComponents.signIn || signIn"
   [ngTemplateOutletContext]="context()"
-  *ngIf="
-    getAuthState().matches('signIn') && !getAuthState().matches('authenticated')
-  "
+  *ngIf="actorState?.matches('signIn')"
 >
 </ng-container>
 
 <!-- signUp component -->
 <ng-container
   [ngTemplateOutlet]="customComponents.signUp || signUp"
   [ngTemplateOutletContext]="context()"
-  *ngIf="getAuthState().matches('signUp')"
+  *ngIf="actorState?.matches('signUp')"
 >
 </ng-container>
 
 <!-- confirmSignUp content -->
 <ng-container
   [ngTemplateOutlet]="customComponents.confirmSignUp || confirmSignUp"
   [ngTemplateOutletContext]="context()"
-  *ngIf="getAuthState().matches('confirmSignUp')"
+  *ngIf="actorState?.matches('confirmSignUp')"
 >
 </ng-container>
 
 <!-- confirmSignIn content -->
 <ng-container
   [ngTemplateOutlet]="customComponents.confirmSignIn || confirmSignIn"
   [ngTemplateOutletContext]="context()"
-  *ngIf="getAuthState().matches('confirmSignIn')"
+  *ngIf="actorState?.matches('confirmSignIn')"
 >
 </ng-container>
 
 <!-- setupTotp content -->
 <ng-container
   [ngTemplateOutlet]="customComponents.setupTOTP || setupTOTP"
   [ngTemplateOutletContext]="context()"
-  *ngIf="getAuthState().matches('setupTOTP')"
+  *ngIf="actorState?.matches('setupTOTP')"
 >
 </ng-container>
 
 <!-- forceNewPassword content -->
 <ng-container
   [ngTemplateOutlet]="customComponents.forceNewPassword || forceNewPassword"
   [ngTemplateOutletContext]="context()"
-  *ngIf="getAuthState().matches('forceNewPassword')"
+  *ngIf="actorState.matches('forceNewPassword')"
 >
 </ng-container>
 
 <!-- signedIn content -->
 <ng-container
   [ngTemplateOutlet]="customComponents.authenticated || authenticated"
   [ngTemplateOutletContext]="context()"
-  *ngIf="getAuthState().matches('authenticated')"
+  *ngIf="authenticatorState.matches('authenticated')"
 >
 </ng-container>

packages/angular/projects/ui-angular/src/lib/components/amplify-authenticator/amplify-authenticator.component.ts

@@ -12,7 +12,7 @@ import { AuthState } from '../../common/types';
 import { AmplifyOverrideDirective } from '../../directives/amplify-override.directive';
 import { StateMachineService, AuthPropService } from '../../services';
 import { CustomComponents } from '../../common';
-import { State } from 'xstate';
+import { getActorState } from '@aws-amplify/ui-core';
 
 @Component({
   selector: 'amplify-authenticator',
@@ -53,8 +53,11 @@ export class AmplifyAuthenticatorComponent implements AfterContentInit {
   /**
    * Class Functions
    */
+  public get actorState() {
+    return getActorState(this.stateMachine.authState);
+  }
 
-  public getAuthState(): State<any> {
+  public get authenticatorState() {
     return this.stateMachine.authState;
   }
 

packages/angular/projects/ui-angular/src/lib/components/amplify-confirm-sign-in/amplify-confirm-sign-in.component.ts

@@ -9,7 +9,14 @@ import {
 import { Logger } from '@aws-amplify/core';
 import { AuthPropService, StateMachineService } from '../../services';
 import { Subscription } from 'xstate';
-import { AuthChallengeNames, AuthMachineState } from '@aws-amplify/ui-core';
+import {
+  AuthChallengeNames,
+  AuthMachineState,
+  getActorContext,
+  getActorState,
+  SignInContext,
+  SignInState,
+} from '@aws-amplify/ui-core';
 
 const logger = new Logger('ConfirmSignIn');
 
@@ -51,7 +58,9 @@ export class AmplifyConfirmSignInComponent
   }
 
   setHeaderText(): void {
-    const { challengeName } = this.stateMachine.context;
+    const state = this.stateMachine.authState;
+    const actorContext: SignInContext = getActorContext(state);
+    const { challengeName } = actorContext;
     switch (challengeName) {
       case AuthChallengeNames.SOFTWARE_TOKEN_MFA:
         // TODO: this string should be centralized and translated from ui-core.
@@ -66,15 +75,16 @@ export class AmplifyConfirmSignInComponent
   }
 
   onStateUpdate(state: AuthMachineState): void {
-    this.remoteError = state.context.remoteError;
-    this.isPending = !state.matches('confirmSignIn.edit');
+    const actorState: SignInState = getActorState(state);
+    this.remoteError = actorState.context.remoteError;
+    this.isPending = !actorState.matches('confirmSignIn.edit');
   }
 
   onInput(event: Event) {
     event.preventDefault();
     const { name, value } = <HTMLInputElement>event.target;
     this.stateMachine.send({
-      type: 'INPUT',
+      type: 'CHANGE',
       data: { name, value },
     });
   }

packages/angular/projects/ui-angular/src/lib/components/amplify-confirm-sign-up/amplify-confirm-sign-up.component.html

@@ -9,7 +9,7 @@
   <form data-amplify-form (submit)="onSubmit($event)" (input)="onInput($event)">
     <fieldset data-amplify-fieldset [disabled]="isPending">
       <amplify-user-name-alias
-        [initialValue]="username"
+        [initialValue]="username ? username : null"
         [disabled]="!!username"
       ></amplify-user-name-alias>
       <amplify-input

packages/angular/projects/ui-angular/src/lib/components/amplify-confirm-sign-up/amplify-confirm-sign-up.component.ts

@@ -1,5 +1,11 @@
 import { Component, HostBinding, TemplateRef } from '@angular/core';
-import { AuthMachineState } from '@aws-amplify/ui-core';
+import {
+  AuthMachineState,
+  getActorContext,
+  getActorState,
+  SignUpContext,
+  SignUpState,
+} from '@aws-amplify/ui-core';
 import { Logger } from '@aws-amplify/core';
 import { Subscription } from 'xstate';
 import { AuthPropService, StateMachineService } from '../../services';
@@ -33,16 +39,14 @@ export class AmplifyConfirmSignUpComponent {
   }
 
   setUsername() {
-    const { user, formValues } = this.stateMachine.context;
-    /**
-     * TODO (cross-framework): look for ways to persist username without
-     * persisting formValues across auth states.
-     */
-    const username = user?.username ?? formValues.username;
+    const state = this.stateMachine.authState;
+    const actorContext: SignUpContext = getActorContext(state);
+    const { user, authAttributes } = actorContext;
+    const username = user?.username ?? authAttributes?.username;
     if (username) {
       this.username = username;
       this.stateMachine.send({
-        type: 'INPUT',
+        type: 'CHANGE',
         data: { name: 'username', value: this.username },
       });
     }
@@ -60,8 +64,9 @@ export class AmplifyConfirmSignUpComponent {
   }
 
   onStateUpdate(state: AuthMachineState): void {
-    this.remoteError = state.context.remoteError;
-    this.isPending = !state.matches('confirmSignUp.edit');
+    const actorState: SignUpState = getActorState(state);
+    this.remoteError = actorState.context.remoteError;
+    this.isPending = !actorState.matches('confirmSignUp.edit');
   }
 
   toSignIn(): void {
@@ -81,15 +86,16 @@ export class AmplifyConfirmSignUpComponent {
     $event.preventDefault();
     const { name, value } = $event.target;
     this.stateMachine.send({
-      type: 'INPUT',
+      type: 'CHANGE',
       data: { name, value },
     });
   }
 
-  async onSubmit(event: Event): Promise<void> {
+  onSubmit(event: Event) {
     event.preventDefault();
-    const formValues = this.stateMachine.context.formValues;
-    // get form data
+    const state = this.stateMachine.authState;
+    const actorContext: SignUpContext = getActorContext(state);
+    const { formValues } = actorContext;
     const { username, confirmation_code } = formValues;
 
     this.stateMachine.send({

packages/angular/projects/ui-angular/src/lib/components/amplify-force-new-password/amplify-force-new-password.component.ts

@@ -9,7 +9,13 @@ import {
 } from '@angular/core';
 import { Subscription } from 'xstate';
 import { Logger } from '@aws-amplify/core';
-import { AuthMachineState } from '@aws-amplify/ui-core';
+import {
+  AuthMachineState,
+  getActorContext,
+  getActorState,
+  SignInContext,
+  SignInState,
+} from '@aws-amplify/ui-core';
 import { AuthPropService, StateMachineService } from '../../services';
 
 const logger = new Logger('ForceNewPassword');
@@ -53,8 +59,9 @@ export class AmplifyForceNewPasswordComponent
   }
 
   onStateUpdate(state: AuthMachineState): void {
-    this.remoteError = state.context.remoteError;
-    this.isPending = !state.matches('forceNewPassword.edit');
+    const actorState: SignInState = getActorState(state);
+    this.remoteError = actorState.context.remoteError;
+    this.isPending = !actorState.matches('forceNewPassword.edit');
   }
 
   toSignIn(): void {
@@ -65,14 +72,17 @@ export class AmplifyForceNewPasswordComponent
     event.preventDefault();
     const { name, value } = <HTMLInputElement>event.target;
     this.stateMachine.send({
-      type: 'INPUT',
+      type: 'CHANGE',
       data: { name, value },
     });
   }
 
   onSubmit(event: Event) {
     event.preventDefault();
-    const formValues = this.stateMachine.context.formValues;
+    // consider stateMachine directly providing actorState / actorContext
+    const state = this.stateMachine.authState;
+    const actorState: SignInContext = getActorContext(state);
+    const { formValues } = actorState;
 
     this.stateMachine.send({
       type: 'SUBMIT',

packages/angular/projects/ui-angular/src/lib/components/amplify-setup-totp/amplify-setup-totp.component.ts

@@ -8,9 +8,12 @@ import {
 } from '@angular/core';
 import { Subscription } from 'xstate';
 import QRCode from 'qrcode';
-import { Logger } from '@aws-amplify/core';
-import { AuthMachineState } from '@aws-amplify/ui-core';
-import Auth from '@aws-amplify/auth';
+import { Auth, Logger } from 'aws-amplify';
+import {
+  AuthMachineState,
+  getActorState,
+  SignInState,
+} from '@aws-amplify/ui-core';
 import { AuthPropService, StateMachineService } from '../../services';
 
 const logger = new Logger('SetupTotp');
@@ -53,8 +56,9 @@ export class AmplifySetupTotpComponent
   }
 
   onStateUpdate(state: AuthMachineState): void {
-    this.remoteError = state.context.remoteError;
-    this.isPending = !state.matches('setupTOTP.edit');
+    const actorState: SignInState = getActorState(state);
+    this.remoteError = actorState.context.remoteError;
+    this.isPending = !actorState.matches('setupTOTP.edit');
   }
 
   async generateQRCode() {
@@ -77,7 +81,7 @@ export class AmplifySetupTotpComponent
     event.preventDefault();
     const { name, value } = <HTMLInputElement>event.target;
     this.stateMachine.send({
-      type: 'INPUT',
+      type: 'CHANGE',
       data: { name, value },
     });
   }

packages/angular/projects/ui-angular/src/lib/components/amplify-sign-in/amplify-sign-in.component.ts

@@ -11,7 +11,11 @@ import {
 } from '@angular/core';
 import { AuthPropService, StateMachineService } from '../../services';
 import { Subscription } from 'xstate';
-import { AuthMachineState } from '@aws-amplify/ui-core';
+import {
+  AuthMachineState,
+  getActorState,
+  SignInState,
+} from '@aws-amplify/ui-core';
 
 const logger = new Logger('SignIn');
 
@@ -54,8 +58,9 @@ export class AmplifySignInComponent
   }
 
   onStateUpdate(state: AuthMachineState): void {
-    this.remoteError = state.context.remoteError;
-    this.isPending = !state.matches('signIn.edit');
+    const actorState: SignInState = getActorState(state);
+    this.remoteError = actorState.context.remoteError;
+    this.isPending = !actorState.matches('signIn.edit');
   }
 
   toSignUp(): void {
@@ -66,18 +71,16 @@ export class AmplifySignInComponent
     event.preventDefault();
     const { name, value } = <HTMLInputElement>event.target;
     this.stateMachine.send({
-      type: 'INPUT',
+      type: 'CHANGE',
       data: { name, value },
     });
   }
 
   async onSubmit(event: Event): Promise<void> {
     event.preventDefault();
-    const formValues = this.stateMachine.context.formValues;
 
     this.stateMachine.send({
       type: 'SUBMIT',
-      data: formValues,
     });
   }
 }

packages/angular/projects/ui-angular/src/lib/components/amplify-sign-up/amplify-sign-up.component.ts

@@ -10,7 +10,12 @@ import {
 } from '@angular/core';
 import { AuthPropService, StateMachineService } from '../../services';
 import { Subscription } from 'xstate';
-import { AuthMachineState, getConfiguredAliases } from '@aws-amplify/ui-core';
+import {
+  AuthMachineState,
+  getActorState,
+  getConfiguredAliases,
+  SignUpState,
+} from '@aws-amplify/ui-core';
 
 const logger = new Logger('SignUp');
 @Component({
@@ -57,10 +62,11 @@ export class AmplifySignUpComponent
   }
 
   private onStateUpdate(state: AuthMachineState): void {
-    this.remoteError = state.context.remoteError;
-    this.isPending = state.matches({
+    const actorState: SignUpState = getActorState(state);
+    this.remoteError = actorState.context.remoteError;
+    this.isPending = !actorState.matches({
       signUp: {
-        submission: 'valid',
+        submission: 'idle',
       },
     });
   }

packages/angular/projects/ui-angular/src/lib/primitives/amplify-input/amplify-input.component.ts

@@ -1,5 +1,9 @@
 import { Component, Input } from '@angular/core';
-import { AuthInputAttributes } from '@aws-amplify/ui-core';
+import {
+  ActorContextWithForms,
+  AuthInputAttributes,
+  getActorContext,
+} from '@aws-amplify/ui-core';
 import { getAttributeMap } from '../../common';
 import { StateMachineService } from '../../services';
 
@@ -29,7 +33,10 @@ export class AmplifyInputComponent {
   }
 
   get error(): string {
-    const { validationError } = this.stateMachine.context;
+    const formContext: ActorContextWithForms = getActorContext(
+      this.stateMachine.authState
+    );
+    const { validationError } = formContext;
     return validationError[this.name];
   }