@aws-amplify/ui-angular 2.3.0 → 2.3.3

package/bundles/aws-amplify-ui-angular.umd.js

@@ -84,23 +84,9 @@
      */
     var AuthenticatorService = /** @class */ (function () {
         function AuthenticatorService() {
-        }
-        AuthenticatorService.prototype.startMachine = function (_b) {
             var _this = this;
-            var initialState = _b.initialState, loginMechanisms = _b.loginMechanisms, services = _b.services, signUpAttributes = _b.signUpAttributes, socialProviders = _b.socialProviders, formFields = _b.formFields;
             var machine = ui.createAuthenticatorMachine();
             var authService = xstate.interpret(machine).start();
-            authService.send({
-                type: 'INIT',
-                data: {
-                    initialState: initialState,
-                    loginMechanisms: loginMechanisms,
-                    socialProviders: socialProviders,
-                    signUpAttributes: signUpAttributes,
-                    services: services,
-                    formFields: formFields,
-                },
-            });
             this._machineSubscription = authService.subscribe(function (state) {
                 _this._authState = state;
                 _this._facade = ui.getServiceContextFacade(state);
@@ -108,7 +94,7 @@
             this._hubSubscription = ui.listenToAuthHub(authService.send);
             this._sendEventAliases = ui.getSendEventAliases(authService.send);
             this._authService = authService;
-        };
+        }
         AuthenticatorService.prototype.ngOnDestroy = function () {
             if (this._machineSubscription)
                 this._machineSubscription.unsubscribe();
@@ -307,6 +293,7 @@
                     providedIn: 'root',
                 },] }
     ];
+    AuthenticatorService.ctorParameters = function () { return []; };
 
     var AuthenticatorComponent = /** @class */ (function () {
         function AuthenticatorComponent(authenticator, contextService) {
@@ -316,17 +303,32 @@
             // translated texts
             this.signInTitle = ui.translate('Sign In');
             this.signUpTitle = ui.translate('Create Account');
+            this.hasInitialized = false;
         }
         AuthenticatorComponent.prototype.ngOnInit = function () {
+            var _this = this;
             var _a = this, initialState = _a.initialState, loginMechanisms = _a.loginMechanisms, services = _a.services, signUpAttributes = _a.signUpAttributes, socialProviders = _a.socialProviders, formFields = _a.formFields;
-            this.authenticator.startMachine({
-                initialState: initialState,
-                loginMechanisms: loginMechanisms,
-                services: services,
-                signUpAttributes: signUpAttributes,
-                socialProviders: socialProviders,
-                formFields: formFields,
-            });
+            /**
+             * Subscribes to state machine changes and sends INIT event
+             * once machine reaches 'setup' state.
+             */
+            this.unsubscribeMachine = this.authenticator.subscribe(function () {
+                var route = _this.authenticator.route;
+                if (!_this.hasInitialized && route === 'setup') {
+                    _this.authenticator.send({
+                        type: 'INIT',
+                        data: {
+                            initialState: initialState,
+                            loginMechanisms: loginMechanisms,
+                            services: services,
+                            signUpAttributes: signUpAttributes,
+                            socialProviders: socialProviders,
+                            formFields: formFields,
+                        },
+                    });
+                    _this.hasInitialized = true;
+                }
+            }).unsubscribe;
             /**
              * handling translations after content init, because authenticator and its
              * translations might be initialized before the main app's `ngOnInit` is run.
@@ -340,6 +342,10 @@
         AuthenticatorComponent.prototype.ngAfterContentInit = function () {
             this.contextService.customComponents = this.mapCustomComponents(this.customComponentQuery);
         };
+        AuthenticatorComponent.prototype.ngOnDestroy = function () {
+            if (this.unsubscribeMachine)
+                this.unsubscribeMachine();
+        };
         Object.defineProperty(AuthenticatorComponent.prototype, "context", {
             /**
              * Class Functions
@@ -416,18 +422,6 @@
             this.backToSignInText = ui.translate('Back to Sign In');
             this.resendCodeText = ui.translate('Resend Code');
         }
-        ConfirmResetPasswordComponent.prototype.ngOnInit = function () {
-            this.setFormFields();
-        };
-        ConfirmResetPasswordComponent.prototype.setFormFields = function () {
-            var _a, _b;
-            var _state = this.authenticator.authState;
-            this.formOverrides = (_b = (_a = ui.getActorState(_state).context) === null || _a === void 0 ? void 0 : _a.formFields) === null || _b === void 0 ? void 0 : _b.confirmResetPassword;
-        };
-        ConfirmResetPasswordComponent.prototype.grabField = function (name, field, defaultV) {
-            var _a, _b, _c;
-            return (_c = (_b = (_a = this.formOverrides) === null || _a === void 0 ? void 0 : _a[name]) === null || _b === void 0 ? void 0 : _b[field]) !== null && _c !== void 0 ? _c : defaultV;
-        };
         Object.defineProperty(ConfirmResetPasswordComponent.prototype, "context", {
             get: function () {
                 return this.authenticator.slotContext;
@@ -437,7 +431,7 @@
         });
         ConfirmResetPasswordComponent.prototype.onInput = function (event) {
             event.preventDefault();
-            var _d = event.target, name = _d.name, value = _d.value;
+            var _a = event.target, name = _a.name, value = _a.value;
             this.authenticator.updateForm({ name: name, value: value });
         };
         ConfirmResetPasswordComponent.prototype.onSubmit = function (event) {
@@ -449,7 +443,7 @@
     ConfirmResetPasswordComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'amplify-confirm-reset-password',
-                    template: "<form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n  <fieldset\n    class=\"amplify-flex\"\n    style=\"flex-direction: column\"\n    data-amplify-fieldset\n    [disabled]=\"authenticator.isPending\"\n  >\n    <amplify-slot name=\"confirm-reset-password-header\" [context]=\"context\">\n      <h3 class=\"amplify-heading\">{{ headerText }}</h3>\n    </amplify-slot>\n    <amplify-form-field\n      name=\"confirmation_code\"\n      autocomplete=\"one-time-code\"\n      [labelHidden]=\"grabField('confirmation_code', 'labelHidden', true)\"\n      [placeholder]=\"grabField('confirmation_code', 'placeholder', null)\"\n      [required]=\"grabField('confirmation_code', 'required', true)\"\n      [label]=\"grabField('confirmation_code', 'label', null)\"\n    ></amplify-form-field>\n    <amplify-form-field\n      name=\"password\"\n      label=\"New password\"\n      autocomplete=\"new-password\"\n      [labelHidden]=\"grabField('password', 'labelHidden', true)\"\n      [placeholder]=\"grabField('password', 'placeholder', null)\"\n      [required]=\"grabField('password', 'required', true)\"\n      [label]=\"grabField('password', 'label', 'New password')\"\n    ></amplify-form-field>\n    <amplify-form-field\n      name=\"confirm_password\"\n      type=\"password\"\n      autocomplete=\"new-password\"\n      [labelHidden]=\"grabField('confirm_password', 'labelHidden', true)\"\n      [placeholder]=\"grabField('confirm_password', 'placeholder', null)\"\n      [required]=\"grabField('confirm_password', 'required', true)\"\n      [label]=\"grabField('confirm_password', 'label', 'Confirm Password')\"\n    ></amplify-form-field>\n\n    <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n      {{ sendCodeText }}\n    </button>\n\n    <button\n      amplify-button\n      size=\"small\"\n      variation=\"link\"\n      fontWeight=\"normal\"\n      fullWidth=\"true\"\n      type=\"button\"\n      (click)=\"authenticator.resendCode()\"\n    >\n      {{ resendCodeText }}\n    </button>\n\n    <amplify-error *ngIf=\"authenticator.error\">\n      {{ authenticator.error }}\n    </amplify-error>\n  </fieldset>\n  <amplify-slot name=\"confirm-reset-password-footer\" [context]=\"context\">\n  </amplify-slot>\n</form>\n"
+                    template: "<form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n  <fieldset\n    class=\"amplify-flex\"\n    style=\"flex-direction: column\"\n    data-amplify-fieldset\n    [disabled]=\"authenticator.isPending\"\n  >\n    <amplify-slot name=\"confirm-reset-password-header\" [context]=\"context\">\n      <h3 class=\"amplify-heading\">{{ headerText }}</h3>\n    </amplify-slot>\n\n    <amplify-base-form-fields\n      route=\"confirmResetPassword\"\n    ></amplify-base-form-fields>\n\n    <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n      {{ sendCodeText }}\n    </button>\n\n    <button\n      amplify-button\n      size=\"small\"\n      variation=\"link\"\n      fontWeight=\"normal\"\n      fullWidth=\"true\"\n      type=\"button\"\n      (click)=\"authenticator.resendCode()\"\n    >\n      {{ resendCodeText }}\n    </button>\n\n    <amplify-error *ngIf=\"authenticator.error\">\n      {{ authenticator.error }}\n    </amplify-error>\n  </fieldset>\n  <amplify-slot name=\"confirm-reset-password-footer\" [context]=\"context\">\n  </amplify-slot>\n</form>\n"
                 },] }
     ];
     ConfirmResetPasswordComponent.ctorParameters = function () { return [
@@ -470,16 +464,6 @@
         }
         ConfirmSignInComponent.prototype.ngOnInit = function () {
             this.setHeaderText();
-            this.setFormFields();
-        };
-        ConfirmSignInComponent.prototype.setFormFields = function () {
-            var _a, _b;
-            var _state = this.authenticator.authState;
-            this.formOverrides = (_b = (_a = ui.getActorState(_state).context) === null || _a === void 0 ? void 0 : _a.formFields) === null || _b === void 0 ? void 0 : _b.confirmSignIn;
-        };
-        ConfirmSignInComponent.prototype.grabField = function (name, field, defaultV) {
-            var _a, _b, _c;
-            return (_c = (_b = (_a = this.formOverrides) === null || _a === void 0 ? void 0 : _a[name]) === null || _b === void 0 ? void 0 : _b[field]) !== null && _c !== void 0 ? _c : defaultV;
         };
         Object.defineProperty(ConfirmSignInComponent.prototype, "context", {
             get: function () {
@@ -505,7 +489,7 @@
         };
         ConfirmSignInComponent.prototype.onInput = function (event) {
             event.preventDefault();
-            var _d = event.target, name = _d.name, value = _d.value;
+            var _a = event.target, name = _a.name, value = _a.value;
             this.authenticator.updateForm({ name: name, value: value });
         };
         ConfirmSignInComponent.prototype.onSubmit = function (event) {
@@ -517,7 +501,7 @@
     ConfirmSignInComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'amplify-confirm-sign-in',
-                    template: "<form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n  <fieldset\n    class=\"amplify-flex\"\n    style=\"flex-direction: column\"\n    data-amplify-fieldset\n    [disabled]=\"authenticator.isPending\"\n  >\n    <amplify-slot name=\"confirm-sign-in-header\" [context]=\"context\">\n      <h3 class=\"amplify-heading\">{{ headerText }}</h3>\n    </amplify-slot>\n    <amplify-form-field\n      name=\"confirmation_code\"\n      label=\"Code *\"\n      autocomplete=\"one-time-code\"\n      [labelHidden]=\"grabField('confirmation_code', 'labelHidden', true)\"\n      [placeholder]=\"grabField('confirmation_code', 'placeholder', null)\"\n      [required]=\"grabField('confirmation_code', 'required', true)\"\n      [label]=\"grabField('confirmation_code', 'label', 'Code *')\"\n    ></amplify-form-field>\n\n    <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n      {{ confirmText }}\n    </button>\n    <button\n      amplify-button\n      size=\"small\"\n      variation=\"link\"\n      fontWeight=\"normal\"\n      fullWidth=\"true\"\n      (click)=\"authenticator.toSignIn()\"\n    >\n      {{ backToSignInText }}\n    </button>\n    <amplify-error *ngIf=\"authenticator.error\">\n      {{ authenticator.error }}\n    </amplify-error>\n  </fieldset>\n  <amplify-slot\n    name=\"confirm-sign-in-footer\"\n    [context]=\"context\"\n  ></amplify-slot>\n</form>\n"
+                    template: "<form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n  <fieldset\n    class=\"amplify-flex\"\n    style=\"flex-direction: column\"\n    data-amplify-fieldset\n    [disabled]=\"authenticator.isPending\"\n  >\n    <amplify-slot name=\"confirm-sign-in-header\" [context]=\"context\">\n      <h3 class=\"amplify-heading\">{{ headerText }}</h3>\n    </amplify-slot>\n    <amplify-base-form-fields route=\"confirmSignIn\"></amplify-base-form-fields>\n\n    <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n      {{ confirmText }}\n    </button>\n    <button\n      amplify-button\n      size=\"small\"\n      variation=\"link\"\n      fontWeight=\"normal\"\n      fullWidth=\"true\"\n      (click)=\"authenticator.toSignIn()\"\n    >\n      {{ backToSignInText }}\n    </button>\n    <amplify-error *ngIf=\"authenticator.error\">\n      {{ authenticator.error }}\n    </amplify-error>\n  </fieldset>\n  <amplify-slot\n    name=\"confirm-sign-in-footer\"\n    [context]=\"context\"\n  ></amplify-slot>\n</form>\n"
                 },] }
     ];
     ConfirmSignInComponent.ctorParameters = function () { return [
@@ -540,18 +524,6 @@
             this.defaultMessage = ui.translate('Your code is on the way. To log in, enter the code we sent you. It may take a minute to arrive.');
             this.minutesMessage = ui.translate('It may take a minute to arrive.');
         }
-        ConfirmSignUpComponent.prototype.ngOnInit = function () {
-            this.setFormFields();
-        };
-        ConfirmSignUpComponent.prototype.setFormFields = function () {
-            var _a, _b;
-            var _state = this.authenticator.authState;
-            this.formOverrides = (_b = (_a = ui.getActorState(_state).context) === null || _a === void 0 ? void 0 : _a.formFields) === null || _b === void 0 ? void 0 : _b.confirmSignUp;
-        };
-        ConfirmSignUpComponent.prototype.grabField = function (name, field, defaultV) {
-            var _a, _b, _c;
-            return (_c = (_b = (_a = this.formOverrides) === null || _a === void 0 ? void 0 : _a[name]) === null || _b === void 0 ? void 0 : _b[field]) !== null && _c !== void 0 ? _c : defaultV;
-        };
         Object.defineProperty(ConfirmSignUpComponent.prototype, "context", {
             get: function () {
                 return this.authenticator.slotContext;
@@ -561,7 +533,7 @@
         });
         Object.defineProperty(ConfirmSignUpComponent.prototype, "confirmSignUpHeading", {
             get: function () {
-                var _d = this.authenticator.codeDeliveryDetails, _e = _d === void 0 ? {} : _d, DeliveryMedium = _e.DeliveryMedium;
+                var _a = this.authenticator.codeDeliveryDetails, _b = _a === void 0 ? {} : _a, DeliveryMedium = _b.DeliveryMedium;
                 return DeliveryMedium === 'EMAIL'
                     ? ui.translate('We Emailed You')
                     : DeliveryMedium === 'SMS'
@@ -573,7 +545,7 @@
         });
         Object.defineProperty(ConfirmSignUpComponent.prototype, "subtitleText", {
             get: function () {
-                var _d = this.authenticator.codeDeliveryDetails, _e = _d === void 0 ? {} : _d, DeliveryMedium = _e.DeliveryMedium, Destination = _e.Destination;
+                var _a = this.authenticator.codeDeliveryDetails, _b = _a === void 0 ? {} : _a, DeliveryMedium = _b.DeliveryMedium, Destination = _b.Destination;
                 return DeliveryMedium === 'EMAIL'
                     ? this.emailMessage + " " + Destination + ". " + this.minutesMessage
                     : DeliveryMedium === 'SMS'
@@ -585,7 +557,7 @@
         });
         ConfirmSignUpComponent.prototype.onInput = function (event) {
             event.preventDefault();
-            var _d = event.target, name = _d.name, value = _d.value;
+            var _a = event.target, name = _a.name, value = _a.value;
             this.authenticator.updateForm({ name: name, value: value });
         };
         ConfirmSignUpComponent.prototype.onSubmit = function (event) {
@@ -597,7 +569,7 @@
     ConfirmSignUpComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'amplify-confirm-sign-up',
-                    template: "<ng-container>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <fieldset\n      class=\"amplify-flex\"\n      style=\"flex-direction: column\"\n      data-amplify-fieldset\n      [disabled]=\"context.isPending\"\n    >\n      <amplify-slot name=\"confirm-sign-up-header\" [context]=\"context\">\n        <h3 class=\"amplify-heading\" style=\"font-size: 1.5rem\">\n          {{ confirmSignUpHeading }}\n        </h3>\n      </amplify-slot>\n      <span style=\"margin-bottom: 1rem\">\n        {{ subtitleText }}\n      </span>\n      <amplify-form-field\n        name=\"confirmation_code\"\n        autocomplete=\"one-time-code\"\n        [labelHidden]=\"grabField('confirmation_code', 'labelHidden', true)\"\n        [placeholder]=\"grabField('confirmation_code', 'placeholder', null)\"\n        [required]=\"grabField('confirmation_code', 'required', true)\"\n        [label]=\"grabField('confirmation_code', 'label', null)\"\n      ></amplify-form-field>\n\n      <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n        {{ confirmText }}\n      </button>\n      <button\n        amplify-button\n        fontWeight=\"normal\"\n        (click)=\"authenticator.resendCode()\"\n      >\n        {{ resendCodeText }}\n      </button>\n    </fieldset>\n\n    <amplify-error *ngIf=\"context.error\">\n      {{ authenticator.error }}\n    </amplify-error>\n    <amplify-slot\n      name=\"confirm-sign-up-footer\"\n      [context]=\"context\"\n    ></amplify-slot>\n  </form>\n</ng-container>\n"
+                    template: "<ng-container>\n  <form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n    <fieldset\n      class=\"amplify-flex\"\n      style=\"flex-direction: column\"\n      data-amplify-fieldset\n      [disabled]=\"context.isPending\"\n    >\n      <amplify-slot name=\"confirm-sign-up-header\" [context]=\"context\">\n        <h3 class=\"amplify-heading\" style=\"font-size: 1.5rem\">\n          {{ confirmSignUpHeading }}\n        </h3>\n      </amplify-slot>\n      <span style=\"margin-bottom: 1rem\">\n        {{ subtitleText }}\n      </span>\n      <amplify-base-form-fields\n        route=\"confirmSignUp\"\n      ></amplify-base-form-fields>\n\n      <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n        {{ confirmText }}\n      </button>\n      <button\n        amplify-button\n        fontWeight=\"normal\"\n        (click)=\"authenticator.resendCode()\"\n      >\n        {{ resendCodeText }}\n      </button>\n    </fieldset>\n\n    <amplify-error *ngIf=\"context.error\">\n      {{ authenticator.error }}\n    </amplify-error>\n    <amplify-slot\n      name=\"confirm-sign-up-footer\"\n      [context]=\"context\"\n    ></amplify-slot>\n  </form>\n</ng-container>\n"
                 },] }
     ];
     ConfirmSignUpComponent.ctorParameters = function () { return [
@@ -617,18 +589,6 @@
             this.skipText = ui.translate('Skip');
             this.submitText = ui.translate('Submit');
         }
-        ConfirmVerifyUserComponent.prototype.ngOnInit = function () {
-            this.setFormFields();
-        };
-        ConfirmVerifyUserComponent.prototype.setFormFields = function () {
-            var _a, _b;
-            var _state = this.authenticator.authState;
-            this.formOverrides = (_b = (_a = ui.getActorState(_state).context) === null || _a === void 0 ? void 0 : _a.formFields) === null || _b === void 0 ? void 0 : _b.confirmVerifyUser;
-        };
-        ConfirmVerifyUserComponent.prototype.grabField = function (name, field, defaultV) {
-            var _a, _b, _c;
-            return (_c = (_b = (_a = this.formOverrides) === null || _a === void 0 ? void 0 : _a[name]) === null || _b === void 0 ? void 0 : _b[field]) !== null && _c !== void 0 ? _c : defaultV;
-        };
         Object.defineProperty(ConfirmVerifyUserComponent.prototype, "context", {
             get: function () {
                 return this.authenticator.slotContext;
@@ -638,7 +598,7 @@
         });
         ConfirmVerifyUserComponent.prototype.onInput = function (event) {
             event.preventDefault();
-            var _d = event.target, name = _d.name, value = _d.value;
+            var _a = event.target, name = _a.name, value = _a.value;
             this.authenticator.updateForm({ name: name, value: value });
         };
         ConfirmVerifyUserComponent.prototype.onSubmit = function (event) {
@@ -650,7 +610,7 @@
     ConfirmVerifyUserComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'amplify-confirm-verify-user',
-                    template: "<form data-amplify-form (input)=\"onInput($event)\" (submit)=\"onSubmit($event)\">\n  <fieldset\n    class=\"amplify-flex\"\n    style=\"flex-direction: column\"\n    data-amplify-fieldset\n    [disabled]=\"authenticator.isPending\"\n  >\n    <amplify-slot name=\"confirm-verify-user-header\" [context]=\"context\">\n      <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\n    </amplify-slot>\n    <amplify-form-field\n      name=\"confirmation_code\"\n      autocomplete=\"one-time-code\"\n      [labelHidden]=\"grabField('confirmation_code', 'labelHidden', true)\"\n      [placeholder]=\"grabField('confirmation_code', 'placeholder', null)\"\n      [required]=\"grabField('confirmation_code', 'required', true)\"\n      [label]=\"grabField('confirmation_code', 'label', null)\"\n    ></amplify-form-field>\n    <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n      {{ submitText }}\n    </button>\n\n    <button\n      amplify-button\n      size=\"small\"\n      variation=\"link\"\n      fontWeight=\"normal\"\n      fullWidth=\"true\"\n      (click)=\"authenticator.skipVerification()\"\n    >\n      {{ skipText }}\n    </button>\n    <amplify-error *ngIf=\"authenticator.error\">\n      {{ authenticator.error }}\n    </amplify-error>\n  </fieldset>\n  <amplify-slot name=\"confirm-verify-user-footer\" [context]=\"context\">\n  </amplify-slot>\n</form>\n"
+                    template: "<form data-amplify-form (input)=\"onInput($event)\" (submit)=\"onSubmit($event)\">\n  <fieldset\n    class=\"amplify-flex\"\n    style=\"flex-direction: column\"\n    data-amplify-fieldset\n    [disabled]=\"authenticator.isPending\"\n  >\n    <amplify-slot name=\"confirm-verify-user-header\" [context]=\"context\">\n      <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\n    </amplify-slot>\n    <amplify-base-form-fields\n      route=\"confirmVerifyUser\"\n    ></amplify-base-form-fields>\n    <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n      {{ submitText }}\n    </button>\n\n    <button\n      amplify-button\n      size=\"small\"\n      variation=\"link\"\n      fontWeight=\"normal\"\n      fullWidth=\"true\"\n      (click)=\"authenticator.skipVerification()\"\n    >\n      {{ skipText }}\n    </button>\n    <amplify-error *ngIf=\"authenticator.error\">\n      {{ authenticator.error }}\n    </amplify-error>\n  </fieldset>\n  <amplify-slot name=\"confirm-verify-user-footer\" [context]=\"context\">\n  </amplify-slot>\n</form>\n"
                 },] }
     ];
     ConfirmVerifyUserComponent.ctorParameters = function () { return [
@@ -741,9 +701,6 @@
             this.changePasswordText = ui.translate('Change Password');
             this.backToSignInText = ui.translate('Back to Sign In');
         }
-        ForceNewPasswordComponent.prototype.ngOnInit = function () {
-            this.setFormFields();
-        };
         Object.defineProperty(ForceNewPasswordComponent.prototype, "context", {
             get: function () {
                 return this.authenticator.slotContext;
@@ -751,18 +708,9 @@
             enumerable: false,
             configurable: true
         });
-        ForceNewPasswordComponent.prototype.setFormFields = function () {
-            var _a, _b;
-            var _state = this.authenticator.authState;
-            this.formOverrides = (_b = (_a = ui.getActorState(_state).context) === null || _a === void 0 ? void 0 : _a.formFields) === null || _b === void 0 ? void 0 : _b.forceNewPassword;
-        };
-        ForceNewPasswordComponent.prototype.grabField = function (name, field, defaultV) {
-            var _a, _b, _c;
-            return (_c = (_b = (_a = this.formOverrides) === null || _a === void 0 ? void 0 : _a[name]) === null || _b === void 0 ? void 0 : _b[field]) !== null && _c !== void 0 ? _c : defaultV;
-        };
         ForceNewPasswordComponent.prototype.onInput = function (event) {
             event.preventDefault();
-            var _d = event.target, name = _d.name, value = _d.value;
+            var _a = event.target, name = _a.name, value = _a.value;
             this.authenticator.updateForm({ name: name, value: value });
         };
         ForceNewPasswordComponent.prototype.onSubmit = function (event) {
@@ -774,7 +722,7 @@
     ForceNewPasswordComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'amplify-force-new-password',
-                    template: "<form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n  <fieldset\n    class=\"amplify-flex\"\n    style=\"flex-direction: column\"\n    data-amplify-fieldset\n    [disabled]=\"authenticator.isPending\"\n  >\n    <amplify-slot name=\"force-new-password-header\" [context]=\"context\">\n      <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\n    </amplify-slot>\n    <amplify-form-field\n      [labelHidden]=\"grabField('password', 'labelHidden', true)\"\n      [placeholder]=\"grabField('password', 'placeholder', null)\"\n      [required]=\"grabField('password', 'required', true)\"\n      [label]=\"grabField('password', 'label', null)\"\n      name=\"password\"\n      type=\"password\"\n      autocomplete=\"new-password\"\n    ></amplify-form-field>\n\n    <amplify-form-field\n      name=\"confirm_password\"\n      type=\"password\"\n      autocomplete=\"new-password\"\n      [labelHidden]=\"grabField('confirm_password', 'labelHidden', true)\"\n      [placeholder]=\"grabField('confirm_password', 'placeholder', null)\"\n      [required]=\"grabField('confirm_password', 'required', true)\"\n      [label]=\"grabField('confirm_password', 'label', 'Confirm Password')\"\n    ></amplify-form-field>\n    <amplify-slot name=\"force-new-form-fields\" [context]=\"context\">\n      <amplify-force-new-password-form-fields></amplify-force-new-password-form-fields>\n    </amplify-slot>\n\n    <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n      {{ changePasswordText }}\n    </button>\n\n    <button\n      amplify-button\n      size=\"small\"\n      variation=\"link\"\n      fontWeight=\"normal\"\n      fullWidth=\"true\"\n      (click)=\"authenticator.toSignIn()\"\n    >\n      {{ backToSignInText }}\n    </button>\n    <amplify-error *ngIf=\"authenticator.error\">\n      {{ authenticator.error }}\n    </amplify-error>\n  </fieldset>\n  <amplify-slot name=\"force-new-password-footer\" [context]=\"context\">\n  </amplify-slot>\n</form>\n"
+                    template: "<form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n  <fieldset\n    class=\"amplify-flex\"\n    style=\"flex-direction: column\"\n    data-amplify-fieldset\n    [disabled]=\"authenticator.isPending\"\n  >\n    <amplify-slot name=\"force-new-password-header\" [context]=\"context\">\n      <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\n    </amplify-slot>\n\n    <amplify-slot name=\"force-new-form-fields\" [context]=\"context\">\n      <amplify-force-new-password-form-fields></amplify-force-new-password-form-fields>\n    </amplify-slot>\n\n    <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n      {{ changePasswordText }}\n    </button>\n\n    <button\n      amplify-button\n      size=\"small\"\n      variation=\"link\"\n      fontWeight=\"normal\"\n      fullWidth=\"true\"\n      (click)=\"authenticator.toSignIn()\"\n    >\n      {{ backToSignInText }}\n    </button>\n    <amplify-error *ngIf=\"authenticator.error\">\n      {{ authenticator.error }}\n    </amplify-error>\n  </fieldset>\n  <amplify-slot name=\"force-new-password-footer\" [context]=\"context\">\n  </amplify-slot>\n</form>\n"
                 },] }
     ];
     ForceNewPasswordComponent.ctorParameters = function () { return [
@@ -786,75 +734,26 @@
     };
 
     var ForceNewPasswordFormFieldsComponent = /** @class */ (function () {
-        function ForceNewPasswordFormFieldsComponent(authenticator) {
-            this.authenticator = authenticator;
+        function ForceNewPasswordFormFieldsComponent() {
         }
-        ForceNewPasswordFormFieldsComponent.prototype.ngOnInit = function () {
-            var state = this.authenticator.authState;
-            var actorContext = ui.getActorContext(state);
-            var requiredAttributes = actorContext.requiredAttributes;
-            this.fieldNames = requiredAttributes.filter(function (fieldName) {
-                var hasDefaultField = !!ui.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;
-            });
-        };
         return ForceNewPasswordFormFieldsComponent;
     }());
     ForceNewPasswordFormFieldsComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'amplify-force-new-password-form-fields',
-                    template: "<div class=\"amplify-flex\" style=\"flex-direction: column\" data-amplify-fieldset>\n  <ng-container *ngFor=\"let field of fieldNames\">\n    <amplify-form-field\n      [name]=\"field\"\n      [labelHidden]=\"false\"\n    ></amplify-form-field>\n  </ng-container>\n</div>\n"
+                    template: "<div class=\"amplify-flex\" style=\"flex-direction: column\" data-amplify-fieldset>\n  <amplify-base-form-fields route=\"forceNewPassword\"></amplify-base-form-fields>\n</div>\n"
                 },] }
     ];
-    ForceNewPasswordFormFieldsComponent.ctorParameters = function () { return [
-        { type: AuthenticatorService }
-    ]; };
 
-    var getAttributeMap = function () { return ui.authInputAttributes; };
-
-    /**
-     * Input interface opinionated for authenticator usage.
-     *
-     * TODO: Separate this component out to two parts -- 1) amplify-auth-input that
-     * contains authenticator opinionated logic and 2) amplify-text-field primitive
-     * that does not make any auth-related inference.
-     */
     var FormFieldComponent = /** @class */ (function () {
         function FormFieldComponent(authenticator) {
             this.authenticator = authenticator;
-            this.required = true;
-            this.placeholder = '';
-            this.label = '';
-            this.initialValue = '';
-            this.disabled = false;
-            this.autocomplete = '';
-            this.labelHidden = true;
             this.countryDialCodesValue = ui.countryDialCodes;
         }
-        FormFieldComponent.prototype.ngOnInit = function () {
-            var _a;
-            // TODO: consider better default handling mechanisms across frameworks
-            if (this.isPhoneField()) {
-                var state = this.authenticator.authState;
-                var country_code = ui.getActorContext(state).country_code;
-                this.defaultCountryCodeValue = (_a = this.defaultCountryCode) !== null && _a !== void 0 ? _a : country_code;
-            }
-        };
-        Object.defineProperty(FormFieldComponent.prototype, "attributeMap", {
-            get: function () {
-                return getAttributeMap();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(FormFieldComponent.prototype, "error", {
+        Object.defineProperty(FormFieldComponent.prototype, "errors", {
             get: function () {
-                var formContext = ui.getActorContext(this.authenticator.authState);
-                var validationError = formContext.validationError;
-                return ui.translate(validationError[this.name]);
+                var validationErrors = this.authenticator.validationErrors;
+                return ui.getErrors(validationErrors[this.name]);
             },
             enumerable: false,
             configurable: true
@@ -863,39 +762,21 @@
             var name = $event.target.name;
             this.authenticator.updateBlur({ name: name });
         };
-        FormFieldComponent.prototype.inferLabel = function () {
-            var _a;
-            var label = this.label || ((_a = this.attributeMap[this.name]) === null || _a === void 0 ? void 0 : _a.label);
-            return ui.translate(label);
-        };
-        FormFieldComponent.prototype.inferPlaceholder = function () {
-            var _a;
-            var placeholder = this.placeholder || ((_a = this.attributeMap[this.name]) === null || _a === void 0 ? void 0 : _a.placeholder) ||
-                this.inferLabel();
-            return ui.translate(placeholder);
-        };
-        // infers what the `type` of underlying input element should be.
-        FormFieldComponent.prototype.inferType = function () {
-            var _a, _b, _c;
-            return (_c = (_a = this.type) !== null && _a !== void 0 ? _a : (_b = this.attributeMap[this.name]) === null || _b === void 0 ? void 0 : _b.type) !== null && _c !== void 0 ? _c : 'text';
-        };
-        FormFieldComponent.prototype.inferAutocomplete = function () {
-            var _a;
-            return this.autocomplete || ((_a = this.attributeMap[this.name]) === null || _a === void 0 ? void 0 : _a.autocomplete);
-        };
-        // TODO(enhancement): use enum to differentiate special field types
         FormFieldComponent.prototype.isPasswordField = function () {
-            return this.inferType() === 'password';
+            return this.formField.type === 'password';
         };
         FormFieldComponent.prototype.isPhoneField = function () {
-            return this.inferType() === 'tel';
+            return this.formField.type === 'tel';
+        };
+        FormFieldComponent.prototype.translate = function (phrase) {
+            return ui.translate(phrase);
         };
         return FormFieldComponent;
     }());
     FormFieldComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'amplify-form-field',
-                    template: "<div class=\"amplify-flex amplify-field\" style=\"flex-direction: column\">\n  <!-- Country code field -->\n  <amplify-phone-number-field\n    *ngIf=\"isPhoneField()\"\n    [defaultCountryCode]=\"defaultCountryCodeValue\"\n    [dialCodeList]=\"dialCodeList\"\n    [type]=\"inferType()\"\n    [name]=\"name\"\n    [label]=\"inferLabel()\"\n    [placeholder]=\"inferPlaceholder()\"\n    [required]=\"required\"\n    [initialValue]=\"initialValue\"\n    [disabled]=\"disabled\"\n    [labelHidden]=\"labelHidden\"\n    [autocomplete]=\"inferAutocomplete()\"\n  ></amplify-phone-number-field>\n\n  <amplify-password-field\n    *ngIf=\"isPasswordField()\"\n    [name]=\"name\"\n    [label]=\"inferLabel()\"\n    [placeholder]=\"inferPlaceholder()\"\n    [required]=\"required\"\n    [initialValue]=\"initialValue\"\n    [disabled]=\"disabled\"\n    [labelHidden]=\"labelHidden\"\n    [autocomplete]=\"inferAutocomplete()\"\n    (setBlur)=\"onBlur($event)\"\n  ></amplify-password-field>\n\n  <amplify-text-field\n    *ngIf=\"!isPasswordField() && !isPhoneField()\"\n    [type]=\"inferType()\"\n    [name]=\"name\"\n    [label]=\"inferLabel()\"\n    [placeholder]=\"inferPlaceholder()\"\n    [required]=\"required\"\n    [initialValue]=\"initialValue\"\n    [disabled]=\"disabled\"\n    [labelHidden]=\"labelHidden\"\n    [autocomplete]=\"inferAutocomplete()\"\n  ></amplify-text-field>\n\n  <amplify-error *ngIf=\"error\">\n    {{ error }}\n  </amplify-error>\n</div>\n"
+                    template: "<div class=\"amplify-flex amplify-field\" style=\"flex-direction: column\">\n  <!-- Country code field -->\n  <amplify-phone-number-field\n    *ngIf=\"isPhoneField()\"\n    [name]=\"name\"\n    [label]=\"formField.label\"\n    [defaultCountryCode]=\"formField.dialCode\"\n    [dialCodeList]=\"formField.dialCodeList\"\n    [placeholder]=\"formField.placeholder\"\n    [required]=\"formField.isRequired\"\n    [labelHidden]=\"formField.labelHidden\"\n    [autocomplete]=\"formField.autocomplete\"\n    type=\"tel\"\n  ></amplify-phone-number-field>\n\n  <amplify-password-field\n    *ngIf=\"isPasswordField()\"\n    [name]=\"name\"\n    [label]=\"formField.label\"\n    [placeholder]=\"formField.placeholder\"\n    [required]=\"formField.isRequired\"\n    [labelHidden]=\"formField.labelHidden\"\n    [autocomplete]=\"formField.autocomplete\"\n    (setBlur)=\"onBlur($event)\"\n  ></amplify-password-field>\n\n  <amplify-text-field\n    *ngIf=\"!isPasswordField() && !isPhoneField()\"\n    [name]=\"name\"\n    [label]=\"formField.label\"\n    [placeholder]=\"formField.placeholder\"\n    [required]=\"formField.isRequired\"\n    [labelHidden]=\"formField.labelHidden\"\n    [autocomplete]=\"formField.autocomplete\"\n    [type]=\"formField.type\"\n  ></amplify-text-field>\n  <div data-amplify-sign-up-errors *ngIf=\"errors?.length > 0\">\n    <div\n      class=\"amplify-text\"\n      data-variation=\"error\"\n      *ngFor=\"let error of errors\"\n    >\n      {{ translate(error) }}\n    </div>\n  </div>\n</div>\n"
                 },] }
     ];
     FormFieldComponent.ctorParameters = function () { return [
@@ -903,16 +784,7 @@
     ]; };
     FormFieldComponent.propDecorators = {
         name: [{ type: i0.Input }],
-        type: [{ type: i0.Input }],
-        required: [{ type: i0.Input }],
-        placeholder: [{ type: i0.Input }],
-        label: [{ type: i0.Input }],
-        initialValue: [{ type: i0.Input }],
-        disabled: [{ type: i0.Input }],
-        autocomplete: [{ type: i0.Input }],
-        labelHidden: [{ type: i0.Input }],
-        defaultCountryCode: [{ type: i0.Input }],
-        dialCodeList: [{ type: i0.Input }]
+        formField: [{ type: i0.Input }]
     };
 
     var ResetPasswordComponent = /** @class */ (function () {
@@ -923,23 +795,7 @@
             // translated texts
             this.sendCodeText = ui.translate('Send Code');
             this.backToSignInText = ui.translate('Back to Sign In');
-            this.labelText = ui.translate('Username');
         }
-        ResetPasswordComponent.prototype.ngOnInit = function () {
-            var authState = this.authenticator.authState;
-            var label = ui.getAliasInfoFromContext(authState.context).label;
-            this.labelText = "Enter your " + label.toLowerCase();
-            this.setFormFields();
-        };
-        ResetPasswordComponent.prototype.setFormFields = function () {
-            var _a, _b;
-            var _state = this.authenticator.authState;
-            this.formOverrides = (_b = (_a = ui.getActorState(_state).context) === null || _a === void 0 ? void 0 : _a.formFields) === null || _b === void 0 ? void 0 : _b.resetPassword;
-        };
-        ResetPasswordComponent.prototype.grabField = function (name, field, defaultV) {
-            var _a, _b, _c;
-            return (_c = (_b = (_a = this.formOverrides) === null || _a === void 0 ? void 0 : _a[name]) === null || _b === void 0 ? void 0 : _b[field]) !== null && _c !== void 0 ? _c : defaultV;
-        };
         Object.defineProperty(ResetPasswordComponent.prototype, "context", {
             get: function () {
                 return this.authenticator.slotContext;
@@ -949,7 +805,7 @@
         });
         ResetPasswordComponent.prototype.onInput = function (event) {
             event.preventDefault();
-            var _d = event.target, name = _d.name, value = _d.value;
+            var _a = event.target, name = _a.name, value = _a.value;
             this.authenticator.updateForm({ name: name, value: value });
         };
         ResetPasswordComponent.prototype.onSubmit = function (event) {
@@ -961,7 +817,7 @@
     ResetPasswordComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'amplify-reset-password',
-                    template: "<form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n  <fieldset\n    class=\"amplify-flex\"\n    style=\"flex-direction: column\"\n    data-amplify-fieldset\n    [disabled]=\"authenticator.isPending\"\n  >\n    <amplify-slot\n      class=\"amplify-flex\"\n      name=\"reset-password-header\"\n      [context]=\"context\"\n    >\n      <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\n    </amplify-slot>\n\n    <amplify-form-field\n      name=\"username\"\n      type=\"username\"\n      autocomplete=\"username\"\n      [labelHidden]=\"grabField('username', 'labelHidden', true)\"\n      [required]=\"grabField('username', 'required', true)\"\n      [label]=\"grabField('username', 'label', labelText)\"\n      [placeholder]=\"grabField('username', 'placeholder', labelText)\"\n    ></amplify-form-field>\n    <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n      {{ sendCodeText }}\n    </button>\n    <button\n      amplify-button\n      size=\"small\"\n      variation=\"link\"\n      fontWeight=\"normal\"\n      fullWidth=\"true\"\n      (click)=\"authenticator.toSignIn()\"\n    >\n      {{ backToSignInText }}\n    </button>\n    <amplify-error *ngIf=\"authenticator.error\">\n      {{ authenticator.error }}\n    </amplify-error>\n  </fieldset>\n\n  <amplify-slot name=\"reset-password-footer\" [context]=\"context\">\n  </amplify-slot>\n</form>\n"
+                    template: "<form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n  <fieldset\n    class=\"amplify-flex\"\n    style=\"flex-direction: column\"\n    data-amplify-fieldset\n    [disabled]=\"authenticator.isPending\"\n  >\n    <amplify-slot\n      class=\"amplify-flex\"\n      name=\"reset-password-header\"\n      [context]=\"context\"\n    >\n      <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\n    </amplify-slot>\n\n    <amplify-base-form-fields route=\"resetPassword\"></amplify-base-form-fields>\n    <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n      {{ sendCodeText }}\n    </button>\n    <button\n      amplify-button\n      size=\"small\"\n      variation=\"link\"\n      fontWeight=\"normal\"\n      fullWidth=\"true\"\n      (click)=\"authenticator.toSignIn()\"\n    >\n      {{ backToSignInText }}\n    </button>\n    <amplify-error *ngIf=\"authenticator.error\">\n      {{ authenticator.error }}\n    </amplify-error>\n  </fieldset>\n\n  <amplify-slot name=\"reset-password-footer\" [context]=\"context\">\n  </amplify-slot>\n</form>\n"
                 },] }
     ];
     ResetPasswordComponent.ctorParameters = function () { return [
@@ -1305,16 +1161,6 @@
         }
         SetupTotpComponent.prototype.ngOnInit = function () {
             this.generateQRCode();
-            this.setFormFields();
-        };
-        SetupTotpComponent.prototype.setFormFields = function () {
-            var _a, _b;
-            var _state = this.authenticator.authState;
-            this.formOverrides = (_b = (_a = ui.getActorState(_state).context) === null || _a === void 0 ? void 0 : _a.formFields) === null || _b === void 0 ? void 0 : _b.setupTOTP;
-        };
-        SetupTotpComponent.prototype.grabField = function (name, field, defaultV) {
-            var _a, _b, _c;
-            return (_c = (_b = (_a = this.formOverrides) === null || _a === void 0 ? void 0 : _a[name]) === null || _b === void 0 ? void 0 : _b[field]) !== null && _c !== void 0 ? _c : defaultV;
         };
         Object.defineProperty(SetupTotpComponent.prototype, "context", {
             get: function () {
@@ -1376,7 +1222,7 @@
     SetupTotpComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'amplify-setup-totp',
-                    template: "<form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n  <fieldset\n    class=\"amplify-flex\"\n    style=\"flex-direction: column\"\n    data-amplify-fieldset\n    [disabled]=\"authenticator.isPending\"\n  >\n    <amplify-slot name=\"setup-totp-header\" [context]=\"context\">\n      <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\n    </amplify-slot>\n    <p *ngIf=\"!qrCodeSource\">Loading...</p>\n    <img\n      *ngIf=\"qrCodeSource\"\n      [src]=\"qrCodeSource\"\n      alt=\"qr code\"\n      data-amplify-qrcode\n      width=\"228\"\n      height=\"228\"\n    />\n    <div class=\"amplify-flex\" data-amplify-copy>\n      <div>{{ secretKey }}</div>\n      <div data-amplify-copy-svg (click)=\"copyText()\">\n        <div data-amplify-copy-tooltip>{{ copyTextLabel }}</div>\n        <svg\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            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\"\n          />\n        </svg>\n      </div>\n    </div>\n\n    <amplify-form-field\n      name=\"confirmation_code\"\n      autocomplete=\"one-time-code\"\n      [labelHidden]=\"grabField('confirmation_code', 'labelHidden', true)\"\n      [placeholder]=\"grabField('confirmation_code', 'placeholder', null)\"\n      [required]=\"grabField('confirmation_code', 'required', true)\"\n      [label]=\"grabField('confirmation_code', 'label', 'Code *')\"\n    ></amplify-form-field>\n    <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n      {{ confirmText }}\n    </button>\n    <button\n      amplify-button\n      size=\"small\"\n      variation=\"link\"\n      fontWeight=\"normal\"\n      fullWidth=\"true\"\n      (click)=\"authenticator.toSignIn()\"\n    >\n      {{ backToSignInText }}\n    </button>\n    <amplify-error *ngIf=\"authenticator.error\">\n      {{ authenticator.error }}\n    </amplify-error>\n  </fieldset>\n  <amplify-slot name=\"setup-totp-footer\" [context]=\"context\"> </amplify-slot>\n</form>\n"
+                    template: "<form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n  <fieldset\n    class=\"amplify-flex\"\n    style=\"flex-direction: column\"\n    data-amplify-fieldset\n    [disabled]=\"authenticator.isPending\"\n  >\n    <amplify-slot name=\"setup-totp-header\" [context]=\"context\">\n      <h3 class=\"amplify-heading\">{{ this.headerText }}</h3>\n    </amplify-slot>\n    <p *ngIf=\"!qrCodeSource\">Loading...</p>\n    <img\n      *ngIf=\"qrCodeSource\"\n      [src]=\"qrCodeSource\"\n      alt=\"qr code\"\n      data-amplify-qrcode\n      width=\"228\"\n      height=\"228\"\n    />\n    <div class=\"amplify-flex\" data-amplify-copy>\n      <div>{{ secretKey }}</div>\n      <div data-amplify-copy-svg (click)=\"copyText()\">\n        <div data-amplify-copy-tooltip>{{ copyTextLabel }}</div>\n        <svg\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            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\"\n          />\n        </svg>\n      </div>\n    </div>\n\n    <amplify-base-form-fields route=\"setupTOTP\"></amplify-base-form-fields>\n    <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n      {{ confirmText }}\n    </button>\n    <button\n      amplify-button\n      size=\"small\"\n      variation=\"link\"\n      fontWeight=\"normal\"\n      fullWidth=\"true\"\n      (click)=\"authenticator.toSignIn()\"\n    >\n      {{ backToSignInText }}\n    </button>\n    <amplify-error *ngIf=\"authenticator.error\">\n      {{ authenticator.error }}\n    </amplify-error>\n  </fieldset>\n  <amplify-slot name=\"setup-totp-footer\" [context]=\"context\"> </amplify-slot>\n</form>\n"
                 },] }
     ];
     SetupTotpComponent.ctorParameters = function () { return [
@@ -1397,26 +1243,6 @@
                 : ui.translate('Forgot your password? ');
             this.signInButtonText = ui.translate('Sign in');
         }
-        SignInComponent.prototype.ngOnInit = function () {
-            this.setFormFields();
-        };
-        SignInComponent.prototype.setFormFields = function () {
-            var _a, _b, _c, _d;
-            var _state = this.authenticator.authState;
-            this.formOverrides = (_b = (_a = ui.getActorState(_state).context) === null || _a === void 0 ? void 0 : _a.formFields) === null || _b === void 0 ? void 0 : _b.signIn;
-            this.userOverrides = (_c = this.formOverrides) === null || _c === void 0 ? void 0 : _c['username'];
-            this.passwordOR = (_d = this.formOverrides) === null || _d === void 0 ? void 0 : _d['password'];
-        };
-        SignInComponent.prototype.labelHidden = function (name, defaultV) {
-            if (defaultV === void 0) { defaultV = true; }
-            var _a, _b, _c;
-            return (_c = (_b = (_a = this.formOverrides) === null || _a === void 0 ? void 0 : _a[name]) === null || _b === void 0 ? void 0 : _b.labelHidden) !== null && _c !== void 0 ? _c : defaultV;
-        };
-        SignInComponent.prototype.required = function (name, defaultV) {
-            if (defaultV === void 0) { defaultV = true; }
-            var _a, _b, _c;
-            return (_c = (_b = (_a = this.formOverrides) === null || _a === void 0 ? void 0 : _a[name]) === null || _b === void 0 ? void 0 : _b.required) !== null && _c !== void 0 ? _c : defaultV;
-        };
         Object.defineProperty(SignInComponent.prototype, "context", {
             get: function () {
                 return this.authenticator.slotContext;
@@ -1426,7 +1252,7 @@
         });
         SignInComponent.prototype.onInput = function (event) {
             event.preventDefault();
-            var _e = event.target, name = _e.name, value = _e.value;
+            var _a = event.target, name = _a.name, value = _a.value;
             this.authenticator.updateForm({ name: name, value: value });
         };
         SignInComponent.prototype.onSubmit = function (event) {
@@ -1438,7 +1264,7 @@
     SignInComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'amplify-sign-in',
-                    template: "<amplify-slot name=\"sign-in-header\" [context]=\"context\"></amplify-slot>\n\n<form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n  <amplify-federated-sign-in></amplify-federated-sign-in>\n  <fieldset\n    class=\"amplify-flex\"\n    style=\"flex-direction: column\"\n    data-amplify-fieldset\n    [disabled]=\"authenticator.isPending\"\n  >\n    <amplify-user-name-alias\n      [labelHidden]=\"labelHidden('username')\"\n      [placeholder]=\"userOverrides?.placeholder\"\n      [required]=\"required('username')\"\n      [label]=\"userOverrides?.label\"\n      [dialCode]=\"userOverrides?.dialCode\"\n      [dialCodeList]=\"userOverrides?.dialCodeList\"\n    ></amplify-user-name-alias>\n    <amplify-form-field\n      [labelHidden]=\"labelHidden('password')\"\n      [placeholder]=\"passwordOR?.placeholder\"\n      [required]=\"required('password')\"\n      [label]=\"passwordOR?.label\"\n      data-amplify-password\n      name=\"password\"\n      type=\"password\"\n      autocomplete=\"current-password\"\n    ></amplify-form-field>\n    <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n      {{ signInButtonText }}\n    </button>\n\n    <amplify-error *ngIf=\"authenticator.error\">\n      {{ authenticator.error }}\n    </amplify-error>\n  </fieldset>\n</form>\n\n<amplify-slot name=\"sign-in-footer\" [context]=\"context\">\n  <div data-amplify-footer>\n    <button\n      amplify-button\n      fontWeight=\"normal\"\n      size=\"small\"\n      variation=\"link\"\n      fullWidth=\"true\"\n      (click)=\"authenticator.toResetPassword()\"\n    >\n      {{ forgotPasswordText }}\n    </button>\n  </div>\n</amplify-slot>\n",
+                    template: "<amplify-slot name=\"sign-in-header\" [context]=\"context\"></amplify-slot>\n\n<form data-amplify-form (submit)=\"onSubmit($event)\" (input)=\"onInput($event)\">\n  <amplify-federated-sign-in></amplify-federated-sign-in>\n  <fieldset class=\"amplify-flex\" style=\"flex-direction: column\" data-amplify-fieldset\n    [disabled]=\"authenticator.isPending\">\n    <legend class=\"amplify-visually-hidden\">Sign in</legend>\n    <amplify-base-form-fields route=\"signIn\"></amplify-base-form-fields>\n    <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n      {{ signInButtonText }}\n    </button>\n\n    <amplify-error *ngIf=\"authenticator.error\">\n      {{ authenticator.error }}\n    </amplify-error>\n  </fieldset>\n</form>\n\n<amplify-slot name=\"sign-in-footer\" [context]=\"context\">\n  <div data-amplify-footer>\n    <button amplify-button fontWeight=\"normal\" size=\"small\" variation=\"link\" fullWidth=\"true\"\n      (click)=\"authenticator.toResetPassword()\">\n      {{ forgotPasswordText }}\n    </button>\n  </div>\n</amplify-slot>\n",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -1489,104 +1315,18 @@
     };
 
     var SignUpFormFieldsComponent = /** @class */ (function () {
-        function SignUpFormFieldsComponent(authenticator) {
-            this.authenticator = authenticator;
-            this.primaryAlias = '';
-            this.secondaryAliases = [];
-            this.translate = ui.translate;
+        function SignUpFormFieldsComponent() {
         }
-        SignUpFormFieldsComponent.prototype.ngOnInit = function () {
-            var context = this.authenticator.context;
-            var _d = context.config, loginMechanisms = _d.loginMechanisms, signUpAttributes = _d.signUpAttributes;
-            this.fieldNames = Array.from(new Set(__spread(loginMechanisms, signUpAttributes)));
-            this.fieldNames = this.fieldNames.filter(function (fieldName) {
-                var hasDefaultField = !!ui.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`
-            this.loginMechanism = this.fieldNames.shift();
-            var common = [
-                this.loginMechanism,
-                'password',
-                'confirm_password',
-            ];
-            this.fieldNamesCombined = __spread(common, this.fieldNames);
-            this.setFormFields();
-        };
-        Object.defineProperty(SignUpFormFieldsComponent.prototype, "errors", {
-            get: function () {
-                var formContext = ui.getActorContext(this.authenticator.authState);
-                var validationError = formContext.validationError;
-                return validationError['password'];
-            },
-            enumerable: false,
-            configurable: true
-        });
-        SignUpFormFieldsComponent.prototype.setFormFields = function () {
-            var _a, _b, _c;
-            var _state = this.authenticator.authState;
-            this.formOverrides = (_b = (_a = ui.getActorState(_state).context) === null || _a === void 0 ? void 0 : _a.formFields) === null || _b === void 0 ? void 0 : _b.signUp;
-            this.userOverrides = (_c = this.formOverrides) === null || _c === void 0 ? void 0 : _c[this.loginMechanism];
-            this.order = ui.setFormOrder(this.formOverrides, this.fieldNamesCombined);
-        };
-        SignUpFormFieldsComponent.prototype.grabField = function (name, field, defaultV) {
-            var _a, _b, _c;
-            return (_c = (_b = (_a = this.formOverrides) === null || _a === void 0 ? void 0 : _a[name]) === null || _b === void 0 ? void 0 : _b[field]) !== null && _c !== void 0 ? _c : defaultV;
-        };
         return SignUpFormFieldsComponent;
     }());
     SignUpFormFieldsComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'amplify-sign-up-form-fields',
-                    template: "<div class=\"amplify-flex\" style=\"flex-direction: column\" data-amplify-fieldset>\n  <ng-container *ngFor=\"let field of order\">\n    <ng-container [ngSwitch]=\"field\">\n      <amplify-user-name-alias\n        *ngSwitchCase=\"loginMechanism\"\n        [name]=\"loginMechanism\"\n        [labelHidden]=\"grabField(loginMechanism, 'labelHidden', true)\"\n        [placeholder]=\"userOverrides?.placeholder\"\n        [required]=\"grabField(loginMechanism, 'required', true)\"\n        [label]=\"userOverrides?.label\"\n        [dialCode]=\"userOverrides?.dialCode\"\n        [dialCodeList]=\"userOverrides?.dialCodeList\"\n      ></amplify-user-name-alias>\n      <ng-container *ngSwitchCase=\"'password'\">\n        <amplify-form-field\n          [labelHidden]=\"grabField('password', 'labelHidden', true)\"\n          [placeholder]=\"grabField('password', 'placeholder', null)\"\n          [required]=\"grabField('password', 'required', true)\"\n          [label]=\"grabField('password', 'label', null)\"\n          name=\"password\"\n          autocomplete=\"new-password\"\n        ></amplify-form-field>\n        <div data-amplify-sign-up-errors *ngIf=\"errors\">\n          <!-- TODO: add amplify-alert reusable component -->\n          <div\n            class=\"amplify-text\"\n            data-variation=\"error\"\n            *ngFor=\"let error of errors\"\n          >\n            {{ translate(error) }}\n          </div>\n        </div>\n      </ng-container>\n      <amplify-form-field\n        *ngSwitchCase=\"'confirm_password'\"\n        [labelHidden]=\"grabField('confirm_password', 'labelHidden', true)\"\n        [placeholder]=\"\n          grabField('confirm_password', 'placeholder', 'Confirm Password')\n        \"\n        [required]=\"grabField('confirm_password', 'required', true)\"\n        [label]=\"grabField('confirm_password', 'label', 'Confirm Password')\"\n        name=\"confirm_password\"\n        type=\"password\"\n        autocomplete=\"new-password\"\n      ></amplify-form-field>\n\n      <amplify-form-field\n        *ngSwitchDefault\n        [name]=\"field\"\n        [labelHidden]=\"grabField(field, 'labelHidden', false)\"\n        [placeholder]=\"grabField(field, 'placeholder', null)\"\n        [required]=\"grabField(field, 'required', true)\"\n        [label]=\"grabField(field, 'label', null)\"\n        [defaultCountryCode]=\"grabField(field, 'dialCode', null)\"\n        [dialCodeList]=\"grabField(field, 'dialCodeList', null)\"\n      ></amplify-form-field>\n    </ng-container>\n  </ng-container>\n</div>\n"
+                    template: "<div class=\"amplify-flex\" style=\"flex-direction: column\" data-amplify-fieldset>\n  <amplify-base-form-fields route=\"signUp\"></amplify-base-form-fields>\n</div>\n"
                 },] }
     ];
-    SignUpFormFieldsComponent.ctorParameters = function () { return [
-        { type: AuthenticatorService }
-    ]; };
 
-    var UserNameAliasComponent = /** @class */ (function () {
-        function UserNameAliasComponent(authenticator) {
-            this.authenticator = authenticator;
-            this.name = 'username';
-            this.disabled = false;
-            this.initialValue = '';
-            this.required = true;
-        }
-        UserNameAliasComponent.prototype.ngOnInit = function () {
-            var _a, _b, _c;
-            var context = this.authenticator.context;
-            var _d = ui.getAliasInfoFromContext(context), lbl = _d.label, type = _d.type;
-            this.labelValue = (_a = this.label) !== null && _a !== void 0 ? _a : lbl;
-            this.type = type;
-            this.placeholderValue = (_b = this.placeholder) !== null && _b !== void 0 ? _b : lbl;
-            this.requiredValue = (_c = this.required) !== null && _c !== void 0 ? _c : true;
-        };
-        return UserNameAliasComponent;
-    }());
-    UserNameAliasComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'amplify-user-name-alias',
-                    template: "<amplify-form-field\n  data-amplify-usernamealias\n  [name]=\"name\"\n  [labelHidden]=\"labelHidden\"\n  [label]=\"labelValue\"\n  [placeholder]=\"placeholderValue\"\n  [required]=\"requiredValue\"\n  [defaultCountryCode]=\"dialCode\"\n  [dialCodeList]=\"dialCodeList\"\n  [type]=\"type\"\n  [initialValue]=\"initialValue\"\n  [disabled]=\"disabled\"\n  autocomplete=\"username\"\n>\n</amplify-form-field>\n"
-                },] }
-    ];
-    UserNameAliasComponent.ctorParameters = function () { return [
-        { type: AuthenticatorService }
-    ]; };
-    UserNameAliasComponent.propDecorators = {
-        name: [{ type: i0.Input }],
-        disabled: [{ type: i0.Input }],
-        initialValue: [{ type: i0.Input }],
-        required: [{ type: i0.Input }],
-        labelHidden: [{ type: i0.Input }],
-        label: [{ type: i0.Input }],
-        placeholder: [{ type: i0.Input }],
-        dialCode: [{ type: i0.Input }],
-        dialCodeList: [{ type: i0.Input }]
-    };
+    var getAttributeMap = function () { return ui.defaultFormFieldOptions; };
 
     var VerifyUserComponent = /** @class */ (function () {
         function VerifyUserComponent(authenticator) {
@@ -1642,6 +1382,58 @@
         headerText: [{ type: i0.Input }]
     };
 
+    /**
+     * Sorts the given formFields, then renders them in order.
+     */
+    var BaseFormFieldsComponent = /** @class */ (function () {
+        function BaseFormFieldsComponent(authenticator) {
+            this.authenticator = authenticator;
+            this.display = 'contents';
+            this.formFields = [];
+        }
+        BaseFormFieldsComponent.prototype.ngOnInit = function () {
+            var state = this.authenticator.authState;
+            this.formFields = ui.getSortedFormFields(this.route, state);
+            if (this.route === 'confirmSignUp') {
+                this.handleConfirmSignUp();
+            }
+        };
+        BaseFormFieldsComponent.prototype.handleConfirmSignUp = function () {
+            /**
+             * @todo(breaking): Angular `confirmSignUp` has different placholder here from other frameworks.
+             *
+             * Translating here in a backwards-compatible manner, but should be resolved in next major version.
+             */
+            var _a;
+            var state = this.authenticator.authState;
+            // backwards compatible placeholder text
+            var placeholder = !ui.hasTranslation('Confirmation Code')
+                ? ui.translate('Enter your code') // prioritize new placeholder
+                : ui.translate('Confirmation Code'); // legacy placeholder
+            var defaultFormFields = ui.getDefaultFormFields(this.route, state);
+            if (defaultFormFields.confirmation_code.placeholder) {
+                defaultFormFields.confirmation_code.placeholder = placeholder;
+            }
+            var customFormFields = ((_a = ui.getActorContext(state).formFields) === null || _a === void 0 ? void 0 : _a.confirmSignUp) || {};
+            var newFormFields = ui.applyDefaults(defaultFormFields, customFormFields);
+            this.formFields = ui.sortFormFields(newFormFields);
+        };
+        return BaseFormFieldsComponent;
+    }());
+    BaseFormFieldsComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'amplify-base-form-fields',
+                    template: "<ng-container *ngFor=\"let formField of formFields\">\n  <amplify-form-field\n    [name]=\"formField[0]\"\n    [formField]=\"formField[1]\"\n  ></amplify-form-field>\n</ng-container>\n"
+                },] }
+    ];
+    BaseFormFieldsComponent.ctorParameters = function () { return [
+        { type: AuthenticatorService }
+    ]; };
+    BaseFormFieldsComponent.propDecorators = {
+        route: [{ type: i0.Input }],
+        display: [{ type: i0.HostBinding, args: ['style.display',] }]
+    };
+
     var ButtonComponent = /** @class */ (function () {
         function ButtonComponent() {
             this.type = 'button';
@@ -1972,6 +1764,7 @@
                         AmplifySlotComponent,
                         AmplifySlotDirective,
                         AuthenticatorComponent,
+                        BaseFormFieldsComponent,
                         ButtonComponent,
                         CheckboxComponent,
                         ConfirmResetPasswordComponent,
@@ -1995,7 +1788,6 @@
                         TabItemComponent,
                         TabsComponent,
                         TextFieldComponent,
-                        UserNameAliasComponent,
                         VerifyUserComponent,
                     ],
                     imports: [common.CommonModule],
@@ -2026,6 +1818,7 @@
     exports.AmplifySlotDirective = AmplifySlotDirective;
     exports.AuthenticatorComponent = AuthenticatorComponent;
     exports.AuthenticatorService = AuthenticatorService;
+    exports.BaseFormFieldsComponent = BaseFormFieldsComponent;
     exports.ButtonComponent = ButtonComponent;
     exports.CheckboxComponent = CheckboxComponent;
     exports.ConfirmResetPasswordComponent = ConfirmResetPasswordComponent;
@@ -2050,36 +1843,35 @@
     exports.TabItemComponent = TabItemComponent;
     exports.TabsComponent = TabsComponent;
     exports.TextFieldComponent = TextFieldComponent;
-    exports.UserNameAliasComponent = UserNameAliasComponent;
     exports.VerifyUserComponent = VerifyUserComponent;
     exports.getAttributeMap = getAttributeMap;
     exports["ɵa"] = AmplifySlotComponent;
     exports["ɵb"] = AuthenticatorComponent;
     exports["ɵba"] = VerifyUserComponent;
-    exports["ɵc"] = ButtonComponent;
-    exports["ɵd"] = CheckboxComponent;
-    exports["ɵe"] = ConfirmResetPasswordComponent;
-    exports["ɵf"] = ConfirmSignInComponent;
-    exports["ɵg"] = ConfirmSignUpComponent;
-    exports["ɵh"] = ConfirmVerifyUserComponent;
-    exports["ɵi"] = ErrorComponent;
-    exports["ɵj"] = FederatedSignInButtonComponent;
-    exports["ɵk"] = FederatedSignInComponent;
-    exports["ɵl"] = ForceNewPasswordComponent;
-    exports["ɵm"] = ForceNewPasswordFormFieldsComponent;
-    exports["ɵn"] = FormFieldComponent;
-    exports["ɵo"] = PasswordFieldComponent;
-    exports["ɵp"] = PhoneNumberFieldComponent;
-    exports["ɵq"] = ResetPasswordComponent;
-    exports["ɵr"] = SelectComponent;
-    exports["ɵs"] = SetupTotpComponent;
-    exports["ɵt"] = SignInComponent;
-    exports["ɵu"] = SignUpComponent;
-    exports["ɵv"] = SignUpFormFieldsComponent;
-    exports["ɵw"] = TabItemComponent;
-    exports["ɵx"] = TabsComponent;
-    exports["ɵy"] = TextFieldComponent;
-    exports["ɵz"] = UserNameAliasComponent;
+    exports["ɵc"] = BaseFormFieldsComponent;
+    exports["ɵd"] = ButtonComponent;
+    exports["ɵe"] = CheckboxComponent;
+    exports["ɵf"] = ConfirmResetPasswordComponent;
+    exports["ɵg"] = ConfirmSignInComponent;
+    exports["ɵh"] = ConfirmSignUpComponent;
+    exports["ɵi"] = ConfirmVerifyUserComponent;
+    exports["ɵj"] = ErrorComponent;
+    exports["ɵk"] = FederatedSignInButtonComponent;
+    exports["ɵl"] = FederatedSignInComponent;
+    exports["ɵm"] = ForceNewPasswordComponent;
+    exports["ɵn"] = ForceNewPasswordFormFieldsComponent;
+    exports["ɵo"] = FormFieldComponent;
+    exports["ɵp"] = PasswordFieldComponent;
+    exports["ɵq"] = PhoneNumberFieldComponent;
+    exports["ɵr"] = ResetPasswordComponent;
+    exports["ɵs"] = SelectComponent;
+    exports["ɵt"] = SetupTotpComponent;
+    exports["ɵu"] = SignInComponent;
+    exports["ɵv"] = SignUpComponent;
+    exports["ɵw"] = SignUpFormFieldsComponent;
+    exports["ɵx"] = TabItemComponent;
+    exports["ɵy"] = TabsComponent;
+    exports["ɵz"] = TextFieldComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });