@aws-amplify/ui-angular 2.3.14 → 2.4.1

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

@@ -91,15 +91,12 @@
                 _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._machineSubscription)
                 this._machineSubscription.unsubscribe();
-            if (this._hubSubscription)
-                this._hubSubscription();
         };
         Object.defineProperty(AuthenticatorService.prototype, "error", {
             /**
@@ -136,6 +133,14 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(AuthenticatorService.prototype, "authStatus", {
+            get: function () {
+                var _a;
+                return (_a = this._facade) === null || _a === void 0 ? void 0 : _a.authStatus;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(AuthenticatorService.prototype, "user", {
             get: function () {
                 var _a;
@@ -296,24 +301,55 @@
     AuthenticatorService.ctorParameters = function () { return []; };
 
     var AuthenticatorComponent = /** @class */ (function () {
-        function AuthenticatorComponent(authenticator, contextService) {
+        function AuthenticatorComponent(authenticator, contextService, changeDetector) {
             this.authenticator = authenticator;
             this.contextService = contextService;
+            this.changeDetector = changeDetector;
             this.customComponentQuery = null;
             // translated texts
             this.signInTitle = ui.translate('Sign In');
             this.signUpTitle = ui.translate('Create Account');
             this.hasInitialized = false;
+            this.isHandlingHubEvent = 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.unsubscribeHub = ui.listenToAuthHub(function (event) {
+                /**
+                 * Hub events aren't properly caught by Angular, because they are
+                 * synchronous events. Angular tracks async network events and
+                 * html events, but not synchronous events like hub.
+                 *
+                 * On any notable hub events, we run change detection manually.
+                 */
+                var state = _this.authenticator.authService.send(event);
+                _this.changeDetector.detectChanges();
+                /**
+                 * Hub events that we handle can lead to multiple state changes:
+                 * e.g. `authenticated` -> `signOut` -> initialState.
+                 *
+                 * We want to ensure change detection runs all the way, until
+                 * we reach back to the initial state. Setting the below flag
+                 * to true to until we reach initial state.
+                 */
+                _this.isHandlingHubEvent = true;
+                return state;
+            });
             /**
              * 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.isHandlingHubEvent) {
+                    _this.changeDetector.detectChanges();
+                    var initialStateWithDefault = initialState !== null && initialState !== void 0 ? initialState : 'signIn';
+                    // We can stop manual change detection if we're back to the initial state
+                    if (route === initialStateWithDefault) {
+                        _this.isHandlingHubEvent = false;
+                    }
+                }
                 if (!_this.hasInitialized && route === 'setup') {
                     _this.authenticator.send({
                         type: 'INIT',
@@ -345,6 +381,8 @@
         AuthenticatorComponent.prototype.ngOnDestroy = function () {
             if (this.unsubscribeMachine)
                 this.unsubscribeMachine();
+            if (this.unsubscribeHub)
+                this.unsubscribeHub();
         };
         Object.defineProperty(AuthenticatorComponent.prototype, "context", {
             /**
@@ -398,7 +436,8 @@
     ];
     AuthenticatorComponent.ctorParameters = function () { return [
         { type: AuthenticatorService },
-        { type: CustomComponentsService }
+        { type: CustomComponentsService },
+        { type: i0.ChangeDetectorRef }
     ]; };
     AuthenticatorComponent.propDecorators = {
         formFields: [{ type: i0.Input }],
@@ -418,9 +457,16 @@
             this.dataAttr = '';
             this.headerText = ui.translate('Reset your password');
             // translated strings
-            this.sendCodeText = ui.translate('Send Code');
             this.backToSignInText = ui.translate('Back to Sign In');
             this.resendCodeText = ui.translate('Resend Code');
+            /**
+             * Support backwards compatibility for erroneous 'Send Code' text
+             * See https://github.com/aws-amplify/amplify-ui/issues/1784
+             * TODO: Remove support for 'Send Code' translation in next Major release
+             */
+            this.submitText = ui.hasTranslation('Submit')
+                ? ui.translate('Submit')
+                : ui.translate('Send Code');
         }
         Object.defineProperty(ConfirmResetPasswordComponent.prototype, "context", {
             get: function () {
@@ -443,7 +489,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\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"
+                    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      {{ submitText }}\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 [
@@ -1188,7 +1234,7 @@
                             _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;
+                            totpCode = encodeURI("otpauth://totp/" + issuer + ":" + username + "?secret=" + this.secretKey + "&issuer=" + issuer);
                             logger.info('totp code was generated:', totpCode);
                             _h = this;
                             return [4 /*yield*/, QRCode__default["default"].toDataURL(totpCode)];