@aws-amplify/ui-angular 2.0.6 → 2.0.10

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

@@ -88,26 +88,31 @@
         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 machine = ui.createAuthenticatorMachine({
-                initialState: initialState,
-                loginMechanisms: loginMechanisms,
-                services: services,
-                signUpAttributes: signUpAttributes,
-                socialProviders: socialProviders,
+            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,
+                },
             });
-            var authService = xstate.interpret(machine, {
-                devTools: process.env.NODE_ENV === 'development',
-            }).start();
-            this._subscription = authService.subscribe(function (state) {
+            this._machineSubscription = authService.subscribe(function (state) {
                 _this._authState = state;
                 _this._facade = ui.getServiceContextFacade(state);
             });
+            this._hubSubscription = ui.listenToAuthHub(authService.send);
             this._sendEventAliases = ui.getSendEventAliases(authService.send);
             this._authService = authService;
         };
         AuthenticatorService.prototype.ngOnDestroy = function () {
-            if (this._subscription)
-                this._subscription.unsubscribe();
+            if (this._machineSubscription)
+                this._machineSubscription.unsubscribe();
+            if (this._hubSubscription)
+                this._hubSubscription();
         };
         Object.defineProperty(AuthenticatorService.prototype, "error", {
             /**
@@ -703,7 +708,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\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        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"
                 },] }
     ];
     ForceNewPasswordComponent.ctorParameters = function () { return [
@@ -714,6 +719,34 @@
         headerText: [{ type: i0.Input }]
     };
 
+    var ForceNewPasswordFormFieldsComponent = /** @class */ (function () {
+        function ForceNewPasswordFormFieldsComponent(authenticator) {
+            this.authenticator = authenticator;
+        }
+        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"
+                },] }
+    ];
+    ForceNewPasswordFormFieldsComponent.ctorParameters = function () { return [
+        { type: AuthenticatorService }
+    ]; };
+
     var getAttributeMap = function () { return ui.authInputAttributes; };
 
     /**
@@ -741,11 +774,6 @@
                 var state = this.authenticator.authState;
                 var country_code = ui.getActorContext(state).country_code;
                 this.defaultCountryCode = country_code;
-                // TODO: remove this side-effect
-                this.authenticator.updateForm({
-                    name: 'country_code',
-                    value: country_code,
-                });
             }
         };
         Object.defineProperty(FormFieldComponent.prototype, "attributeMap", {
@@ -1190,6 +1218,8 @@
             this.dataAttr = '';
             this.headerText = ui.translate('Setup TOTP');
             this.qrCodeSource = '';
+            this.secretKey = '';
+            this.copyTextLabel = ui.translate('COPY');
             // translated texts
             this.backToSignInText = ui.translate('Back to Sign In');
             this.confirmText = ui.translate('Confirm');
@@ -1206,29 +1236,30 @@
         });
         SetupTotpComponent.prototype.generateQRCode = function () {
             return __awaiter(this, void 0, void 0, function () {
-                var state, actorContext, user, secretKey, issuer, totpCode, _a, err_1;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                var state, actorContext, user, _a, issuer, totpCode, _b, err_1;
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
                         case 0:
                             state = this.authenticator.authState;
                             actorContext = ui.getActorContext(state);
                             user = actorContext.user;
-                            _b.label = 1;
+                            _c.label = 1;
                         case 1:
-                            _b.trys.push([1, 4, , 5]);
+                            _c.trys.push([1, 4, , 5]);
+                            _a = this;
                             return [4 /*yield*/, awsAmplify.Auth.setupTOTP(user)];
                         case 2:
-                            secretKey = _b.sent();
+                            _a.secretKey = _c.sent();
                             issuer = 'AWSCognito';
-                            totpCode = "otpauth://totp/" + issuer + ":" + user.username + "?secret=" + secretKey + "&issuer=" + issuer;
+                            totpCode = "otpauth://totp/" + issuer + ":" + user.username + "?secret=" + this.secretKey + "&issuer=" + issuer;
                             logger.info('totp code was generated:', totpCode);
-                            _a = this;
+                            _b = this;
                             return [4 /*yield*/, QRCode__default["default"].toDataURL(totpCode)];
                         case 3:
-                            _a.qrCodeSource = _b.sent();
+                            _b.qrCodeSource = _c.sent();
                             return [3 /*break*/, 5];
                         case 4:
-                            err_1 = _b.sent();
+                            err_1 = _c.sent();
                             logger.error(err_1);
                             return [3 /*break*/, 5];
                         case 5: return [2 /*return*/];
@@ -1245,12 +1276,16 @@
             event.preventDefault();
             this.authenticator.submitForm();
         };
+        SetupTotpComponent.prototype.copyText = function () {
+            navigator.clipboard.writeText(this.secretKey);
+            this.copyTextLabel = ui.translate('COPIED');
+        };
         return SetupTotpComponent;
     }());
     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      <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        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"
                 },] }
     ];
     SetupTotpComponent.ctorParameters = function () { return [
@@ -1265,7 +1300,10 @@
             this.authenticator = authenticator;
             this.dataAttr = '';
             // translated phrases
-            this.forgotPasswordText = ui.translate('Forgot your password? ');
+            // Support backwards compatibility for legacy key with trailing space
+            this.forgotPasswordText = !ui.hasTranslation('Forgot your password? ')
+                ? ui.translate('Forgot your password?')
+                : ui.translate('Forgot your password? ');
             this.signInButtonText = ui.translate('Sign in');
         }
         Object.defineProperty(SignInComponent.prototype, "context", {
@@ -1794,6 +1832,7 @@
                         FederatedSignInButtonComponent,
                         FederatedSignInComponent,
                         ForceNewPasswordComponent,
+                        ForceNewPasswordFormFieldsComponent,
                         FormFieldComponent,
                         PasswordFieldComponent,
                         PhoneNumberFieldComponent,
@@ -1815,6 +1854,7 @@
                         AuthenticatorComponent,
                         CheckboxComponent,
                         SignUpFormFieldsComponent,
+                        ForceNewPasswordFormFieldsComponent,
                         TextFieldComponent,
                     ],
                 },] }
@@ -1843,6 +1883,7 @@
     exports.FederatedSignInButtonComponent = FederatedSignInButtonComponent;
     exports.FederatedSignInComponent = FederatedSignInComponent;
     exports.ForceNewPasswordComponent = ForceNewPasswordComponent;
+    exports.ForceNewPasswordFormFieldsComponent = ForceNewPasswordFormFieldsComponent;
     exports.FormFieldComponent = FormFieldComponent;
     exports.PasswordFieldComponent = PasswordFieldComponent;
     exports.PhoneNumberFieldComponent = PhoneNumberFieldComponent;
@@ -1860,6 +1901,7 @@
     exports.getAttributeMap = getAttributeMap;
     exports["ɵa"] = AmplifySlotComponent;
     exports["ɵb"] = AuthenticatorComponent;
+    exports["ɵba"] = VerifyUserComponent;
     exports["ɵc"] = ButtonComponent;
     exports["ɵd"] = CheckboxComponent;
     exports["ɵe"] = ConfirmResetPasswordComponent;
@@ -1870,20 +1912,20 @@
     exports["ɵj"] = FederatedSignInButtonComponent;
     exports["ɵk"] = FederatedSignInComponent;
     exports["ɵl"] = ForceNewPasswordComponent;
-    exports["ɵm"] = FormFieldComponent;
-    exports["ɵn"] = PasswordFieldComponent;
-    exports["ɵo"] = PhoneNumberFieldComponent;
-    exports["ɵp"] = ResetPasswordComponent;
-    exports["ɵq"] = SelectComponent;
-    exports["ɵr"] = SetupTotpComponent;
-    exports["ɵs"] = SignInComponent;
-    exports["ɵt"] = SignUpComponent;
-    exports["ɵu"] = SignUpFormFieldsComponent;
-    exports["ɵv"] = TabItemComponent;
-    exports["ɵw"] = TabsComponent;
-    exports["ɵx"] = TextFieldComponent;
-    exports["ɵy"] = UserNameAliasComponent;
-    exports["ɵz"] = VerifyUserComponent;
+    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;
 
     Object.defineProperty(exports, '__esModule', { value: true });