@aws-amplify/ui-angular 2.1.3 → 2.2.0

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

@@ -87,7 +87,7 @@
         }
         AuthenticatorService.prototype.startMachine = function (_b) {
             var _this = this;
-            var initialState = _b.initialState, loginMechanisms = _b.loginMechanisms, services = _b.services, signUpAttributes = _b.signUpAttributes, socialProviders = _b.socialProviders;
+            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({
@@ -98,6 +98,7 @@
                     socialProviders: socialProviders,
                     signUpAttributes: signUpAttributes,
                     services: services,
+                    formFields: formFields,
                 },
             });
             this._machineSubscription = authService.subscribe(function (state) {
@@ -317,13 +318,14 @@
             this.signUpTitle = ui.translate('Create Account');
         }
         AuthenticatorComponent.prototype.ngOnInit = function () {
-            var _a = this, initialState = _a.initialState, loginMechanisms = _a.loginMechanisms, services = _a.services, signUpAttributes = _a.signUpAttributes, socialProviders = _a.socialProviders;
+            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,
             });
             /**
              * handling translations after content init, because authenticator and its
@@ -393,6 +395,7 @@
         { type: CustomComponentsService }
     ]; };
     AuthenticatorComponent.propDecorators = {
+        formFields: [{ type: i0.Input }],
         initialState: [{ type: i0.Input }],
         loginMechanisms: [{ type: i0.Input }],
         services: [{ type: i0.Input }],
@@ -413,6 +416,18 @@
             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;
@@ -422,7 +437,7 @@
         });
         ConfirmResetPasswordComponent.prototype.onInput = function (event) {
             event.preventDefault();
-            var _a = event.target, name = _a.name, value = _a.value;
+            var _d = event.target, name = _d.name, value = _d.value;
             this.authenticator.updateForm({ name: name, value: value });
         };
         ConfirmResetPasswordComponent.prototype.onSubmit = function (event) {
@@ -434,7 +449,7 @@
     ConfirmResetPasswordComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'amplify-confirm-reset-password',
-                    template: "<div data-amplify-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]=\"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        type=\"number\"\n        autocomplete=\"one-time-code\"\n      ></amplify-form-field>\n      <amplify-form-field\n        name=\"password\"\n        label=\"New password\"\n        autocomplete=\"new-password\"\n      ></amplify-form-field>\n      <amplify-form-field\n        name=\"confirm_password\"\n        label=\"Confirm Password\"\n        type=\"password\"\n        autocomplete=\"new-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</div>\n"
+                    template: "<div data-amplify-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]=\"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        type=\"number\"\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</div>\n"
                 },] }
     ];
     ConfirmResetPasswordComponent.ctorParameters = function () { return [
@@ -455,6 +470,16 @@
         }
         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 () {
@@ -480,7 +505,7 @@
         };
         ConfirmSignInComponent.prototype.onInput = function (event) {
             event.preventDefault();
-            var _a = event.target, name = _a.name, value = _a.value;
+            var _d = event.target, name = _d.name, value = _d.value;
             this.authenticator.updateForm({ name: name, value: value });
         };
         ConfirmSignInComponent.prototype.onSubmit = function (event) {
@@ -492,7 +517,7 @@
     ConfirmSignInComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'amplify-confirm-sign-in',
-                    template: "<div data-amplify-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]=\"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        type=\"text\"\n        autocomplete=\"one-time-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</div>\n"
+                    template: "<div data-amplify-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]=\"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        type=\"text\"\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</div>\n"
                 },] }
     ];
     ConfirmSignInComponent.ctorParameters = function () { return [
@@ -515,6 +540,18 @@
             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;
@@ -524,7 +561,7 @@
         });
         Object.defineProperty(ConfirmSignUpComponent.prototype, "confirmSignUpHeading", {
             get: function () {
-                var _a = this.authenticator.codeDeliveryDetails, _b = _a === void 0 ? {} : _a, DeliveryMedium = _b.DeliveryMedium;
+                var _d = this.authenticator.codeDeliveryDetails, _e = _d === void 0 ? {} : _d, DeliveryMedium = _e.DeliveryMedium;
                 return DeliveryMedium === 'EMAIL'
                     ? ui.translate('We Emailed You')
                     : DeliveryMedium === 'SMS'
@@ -536,7 +573,7 @@
         });
         Object.defineProperty(ConfirmSignUpComponent.prototype, "subtitleText", {
             get: function () {
-                var _a = this.authenticator.codeDeliveryDetails, _b = _a === void 0 ? {} : _a, DeliveryMedium = _b.DeliveryMedium, Destination = _b.Destination;
+                var _d = this.authenticator.codeDeliveryDetails, _e = _d === void 0 ? {} : _d, DeliveryMedium = _e.DeliveryMedium, Destination = _e.Destination;
                 return DeliveryMedium === 'EMAIL'
                     ? this.emailMessage + " " + Destination + ". " + this.minutesMessage
                     : DeliveryMedium === 'SMS'
@@ -548,7 +585,7 @@
         });
         ConfirmSignUpComponent.prototype.onInput = function (event) {
             event.preventDefault();
-            var _a = event.target, name = _a.name, value = _a.value;
+            var _d = event.target, name = _d.name, value = _d.value;
             this.authenticator.updateForm({ name: name, value: value });
         };
         ConfirmSignUpComponent.prototype.onSubmit = function (event) {
@@ -560,7 +597,7 @@
     ConfirmSignUpComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'amplify-confirm-sign-up',
-                    template: "<div data-amplify-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      ></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</div>\n"
+                    template: "<div data-amplify-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</div>\n"
                 },] }
     ];
     ConfirmSignUpComponent.ctorParameters = function () { return [
@@ -580,6 +617,18 @@
             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;
@@ -589,7 +638,7 @@
         });
         ConfirmVerifyUserComponent.prototype.onInput = function (event) {
             event.preventDefault();
-            var _a = event.target, name = _a.name, value = _a.value;
+            var _d = event.target, name = _d.name, value = _d.value;
             this.authenticator.updateForm({ name: name, value: value });
         };
         ConfirmVerifyUserComponent.prototype.onSubmit = function (event) {
@@ -601,7 +650,7 @@
     ConfirmVerifyUserComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'amplify-confirm-verify-user',
-                    template: "<div data-amplify-container>\n  <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        type=\"number\"\n        autocomplete=\"one-time-code\"\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</div>\n"
+                    template: "<div data-amplify-container>\n  <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        type=\"number\"\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</div>\n"
                 },] }
     ];
     ConfirmVerifyUserComponent.ctorParameters = function () { return [
@@ -692,6 +741,9 @@
             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;
@@ -699,9 +751,18 @@
             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 _a = event.target, name = _a.name, value = _a.value;
+            var _d = event.target, name = _d.name, value = _d.value;
             this.authenticator.updateForm({ name: name, value: value });
         };
         ForceNewPasswordComponent.prototype.onSubmit = function (event) {
@@ -713,7 +774,7 @@
     ForceNewPasswordComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'amplify-force-new-password',
-                    template: "<div data-amplify-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]=\"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        name=\"password\"\n        type=\"password\"\n        autocomplete=\"new-password\"\n      ></amplify-form-field>\n\n      <amplify-form-field\n        name=\"confirm_password\"\n        label=\"Confirm Password\"\n        type=\"password\"\n        autocomplete=\"new-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</div>\n"
+                    template: "<div data-amplify-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]=\"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</div>\n"
                 },] }
     ];
     ForceNewPasswordComponent.ctorParameters = function () { return [
@@ -771,14 +832,15 @@
             this.disabled = false;
             this.autocomplete = '';
             this.labelHidden = true;
-            this.countryDialCodes = ui.countryDialCodes;
+            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.defaultCountryCode = country_code;
+                this.defaultCountryCodeValue = (_a = this.defaultCountryCode) !== null && _a !== void 0 ? _a : country_code;
             }
         };
         Object.defineProperty(FormFieldComponent.prototype, "attributeMap", {
@@ -833,7 +895,7 @@
     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]=\"defaultCountryCode\"\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    [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"
                 },] }
     ];
     FormFieldComponent.ctorParameters = function () { return [
@@ -848,7 +910,9 @@
         initialValue: [{ type: i0.Input }],
         disabled: [{ type: i0.Input }],
         autocomplete: [{ type: i0.Input }],
-        labelHidden: [{ type: i0.Input }]
+        labelHidden: [{ type: i0.Input }],
+        defaultCountryCode: [{ type: i0.Input }],
+        dialCodeList: [{ type: i0.Input }]
     };
 
     var ResetPasswordComponent = /** @class */ (function () {
@@ -865,6 +929,16 @@
             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 () {
@@ -875,7 +949,7 @@
         });
         ResetPasswordComponent.prototype.onInput = function (event) {
             event.preventDefault();
-            var _a = event.target, name = _a.name, value = _a.value;
+            var _d = event.target, name = _d.name, value = _d.value;
             this.authenticator.updateForm({ name: name, value: value });
         };
         ResetPasswordComponent.prototype.onSubmit = function (event) {
@@ -887,7 +961,7 @@
     ResetPasswordComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'amplify-reset-password',
-                    template: "<div data-amplify-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]=\"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        [placeholder]=\"labelText\"\n        [label]=\"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</div>\n"
+                    template: "<div data-amplify-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]=\"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</div>\n"
                 },] }
     ];
     ResetPasswordComponent.ctorParameters = function () { return [
@@ -1231,6 +1305,16 @@
         }
         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 () {
@@ -1240,31 +1324,33 @@
             configurable: true
         });
         SetupTotpComponent.prototype.generateQRCode = function () {
+            var _a, _b, _c, _d, _e, _f;
             return __awaiter(this, void 0, void 0, function () {
-                var state, actorContext, user, _a, issuer, totpCode, _b, err_1;
-                return __generator(this, function (_c) {
-                    switch (_c.label) {
+                var state, actorContext, user, _g, issuer, username, totpCode, _h, err_1;
+                return __generator(this, function (_j) {
+                    switch (_j.label) {
                         case 0:
                             state = this.authenticator.authState;
                             actorContext = ui.getActorContext(state);
                             user = actorContext.user;
-                            _c.label = 1;
+                            _j.label = 1;
                         case 1:
-                            _c.trys.push([1, 4, , 5]);
-                            _a = this;
+                            _j.trys.push([1, 4, , 5]);
+                            _g = this;
                             return [4 /*yield*/, awsAmplify.Auth.setupTOTP(user)];
                         case 2:
-                            _a.secretKey = _c.sent();
-                            issuer = 'AWSCognito';
-                            totpCode = "otpauth://totp/" + issuer + ":" + user.username + "?secret=" + this.secretKey + "&issuer=" + issuer;
+                            _g.secretKey = _j.sent();
+                            issuer = (_c = (_b = (_a = this.formOverrides) === null || _a === void 0 ? void 0 : _a['QR']) === null || _b === void 0 ? void 0 : _b.totpIssuer) !== null && _c !== void 0 ? _c : 'AWSCognito';
+                            username = (_f = (_e = (_d = this.formOverrides) === null || _d === void 0 ? void 0 : _d['QR']) === null || _e === void 0 ? void 0 : _e.totpUsername) !== null && _f !== void 0 ? _f : user.username;
+                            totpCode = "otpauth://totp/" + issuer + ":" + username + "?secret=" + this.secretKey + "&issuer=" + issuer;
                             logger.info('totp code was generated:', totpCode);
-                            _b = this;
+                            _h = this;
                             return [4 /*yield*/, QRCode__default["default"].toDataURL(totpCode)];
                         case 3:
-                            _b.qrCodeSource = _c.sent();
+                            _h.qrCodeSource = _j.sent();
                             return [3 /*break*/, 5];
                         case 4:
-                            err_1 = _c.sent();
+                            err_1 = _j.sent();
                             logger.error(err_1);
                             return [3 /*break*/, 5];
                         case 5: return [2 /*return*/];
@@ -1274,7 +1360,7 @@
         };
         SetupTotpComponent.prototype.onInput = function (event) {
             event.preventDefault();
-            var _a = event.target, name = _a.name, value = _a.value;
+            var _g = event.target, name = _g.name, value = _g.value;
             this.authenticator.updateForm({ name: name, value: value });
         };
         SetupTotpComponent.prototype.onSubmit = function (event) {
@@ -1290,7 +1376,7 @@
     SetupTotpComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'amplify-setup-totp',
-                    template: "<div data-amplify-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]=\"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            fill=\"none\"\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              fill=\"black\"\n            />\n          </svg>\n        </div>\n      </div>\n\n      <amplify-form-field\n        name=\"confirmation_code\"\n        label=\"Code *\"\n        type=\"text\"\n        autocomplete=\"one-time-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</div>\n"
+                    template: "<div data-amplify-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]=\"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            fill=\"none\"\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              fill=\"black\"\n            />\n          </svg>\n        </div>\n      </div>\n\n      <amplify-form-field\n        name=\"confirmation_code\"\n        type=\"text\"\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</div>\n"
                 },] }
     ];
     SetupTotpComponent.ctorParameters = function () { return [
@@ -1311,6 +1397,26 @@
                 : 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;
@@ -1320,7 +1426,7 @@
         });
         SignInComponent.prototype.onInput = function (event) {
             event.preventDefault();
-            var _a = event.target, name = _a.name, value = _a.value;
+            var _e = event.target, name = _e.name, value = _e.value;
             this.authenticator.updateForm({ name: name, value: value });
         };
         SignInComponent.prototype.onSubmit = function (event) {
@@ -1332,7 +1438,7 @@
     SignInComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'amplify-sign-in',
-                    template: "<div data-amplify-container>\n  <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></amplify-user-name-alias>\n      <amplify-form-field\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</div>\n",
+                    template: "<div data-amplify-container>\n  <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</div>\n",
                     encapsulation: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -1390,7 +1496,7 @@
         }
         SignUpFormFieldsComponent.prototype.ngOnInit = function () {
             var context = this.authenticator.context;
-            var _a = context.config, loginMechanisms = _a.loginMechanisms, signUpAttributes = _a.signUpAttributes;
+            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];
@@ -1401,13 +1507,31 @@
             });
             // 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();
+        };
+        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  <amplify-user-name-alias [name]=\"loginMechanism\"></amplify-user-name-alias>\n  <amplify-form-field\n    name=\"password\"\n    autocomplete=\"new-password\"\n  ></amplify-form-field>\n  <amplify-form-field\n    name=\"confirm_password\"\n    label=\"Confirm Password\"\n    type=\"password\"\n    autocomplete=\"new-password\"\n  ></amplify-form-field>\n\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  <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      <amplify-form-field\n        *ngSwitchCase=\"'password'\"\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      <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"
                 },] }
     ];
     SignUpFormFieldsComponent.ctorParameters = function () { return [
@@ -1423,18 +1547,20 @@
             this.required = true;
         }
         UserNameAliasComponent.prototype.ngOnInit = function () {
+            var _a, _b, _c;
             var context = this.authenticator.context;
-            var _a = ui.getAliasInfoFromContext(context), label = _a.label, type = _a.type;
-            this.label = label;
+            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.placeholder = label;
+            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  [label]=\"label\"\n  [type]=\"type\"\n  [placeholder]=\"placeholder\"\n  [initialValue]=\"initialValue\"\n  [disabled]=\"disabled\"\n  [required]=\"required\"\n  autocomplete=\"username\"\n>\n</amplify-form-field>\n"
+                    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 [
@@ -1444,7 +1570,12 @@
         name: [{ type: i0.Input }],
         disabled: [{ type: i0.Input }],
         initialValue: [{ type: i0.Input }],
-        required: [{ 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 VerifyUserComponent = /** @class */ (function () {
@@ -1641,14 +1772,17 @@
             this.required = true;
             this.labelHidden = false;
             this.display = 'contents';
-            this.countryDialCodes = ui.countryDialCodes;
         }
+        PhoneNumberFieldComponent.prototype.ngOnInit = function () {
+            var _a;
+            this.countryDialCodesValues = (_a = this.dialCodeList) !== null && _a !== void 0 ? _a : ui.countryDialCodes;
+        };
         return PhoneNumberFieldComponent;
     }());
     PhoneNumberFieldComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'amplify-phone-number-field',
-                    template: "<label\n  class=\"amplify-label\"\n  [class.amplify-visually-hidden]=\"labelHidden\"\n  [for]=\"textFieldId\"\n>\n  {{ label }}\n</label>\n<div\n  class=\"amplify-flex amplify-phonenumberfield\"\n  amplify-field-group\n  style=\"gap: 0px\"\n>\n  <div class=\"amplify-field-group__outer-start\">\n    <div\n      class=\"\n        amplify-flex amplify-field amplify-selectfield amplify-countrycodeselect\n      \"\n      style=\"flex-direction: column\"\n    >\n      <amplify-form-select\n        name=\"country_code\"\n        label=\"Country Code\"\n        [id]=\"selectFieldId\"\n        [items]=\"countryDialCodes\"\n        [defaultValue]=\"defaultCountryCode\"\n      ></amplify-form-select>\n    </div>\n  </div>\n\n  <input\n    class=\"amplify-input\"\n    [id]=\"textFieldId\"\n    [type]=\"type\"\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [required]=\"required\"\n    [value]=\"initialValue\"\n    [attr.disabled]=\"disabled ? '' : null\"\n    [autocomplete]=\"autocomplete\"\n  />\n</div>\n"
+                    template: "<label\n  class=\"amplify-label\"\n  [class.amplify-visually-hidden]=\"labelHidden\"\n  [for]=\"textFieldId\"\n>\n  {{ label }}\n</label>\n<div\n  class=\"amplify-flex amplify-phonenumberfield\"\n  amplify-field-group\n  style=\"gap: 0px\"\n>\n  <div class=\"amplify-field-group__outer-start\">\n    <div\n      class=\"\n        amplify-flex amplify-field amplify-selectfield amplify-countrycodeselect\n      \"\n      style=\"flex-direction: column\"\n    >\n      <amplify-form-select\n        name=\"country_code\"\n        label=\"Country Code\"\n        [id]=\"selectFieldId\"\n        [items]=\"countryDialCodesValues\"\n        [defaultValue]=\"defaultCountryCode\"\n      ></amplify-form-select>\n    </div>\n  </div>\n\n  <input\n    class=\"amplify-input\"\n    [id]=\"textFieldId\"\n    [type]=\"type\"\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [required]=\"required\"\n    [value]=\"initialValue\"\n    [attr.disabled]=\"disabled ? '' : null\"\n    [autocomplete]=\"autocomplete\"\n  />\n</div>\n"
                 },] }
     ];
     PhoneNumberFieldComponent.propDecorators = {
@@ -1664,6 +1798,7 @@
         required: [{ type: i0.Input }],
         type: [{ type: i0.Input }],
         labelHidden: [{ type: i0.Input }],
+        dialCodeList: [{ type: i0.Input }],
         display: [{ type: i0.HostBinding, args: ['style.display',] }]
     };