@aws-amplify/ui-angular 2.4.0 → 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", {
             /**
@@ -304,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',
@@ -353,6 +381,8 @@
         AuthenticatorComponent.prototype.ngOnDestroy = function () {
             if (this.unsubscribeMachine)
                 this.unsubscribeMachine();
+            if (this.unsubscribeHub)
+                this.unsubscribeHub();
         };
         Object.defineProperty(AuthenticatorComponent.prototype, "context", {
             /**
@@ -406,7 +436,8 @@
     ];
     AuthenticatorComponent.ctorParameters = function () { return [
         { type: AuthenticatorService },
-        { type: CustomComponentsService }
+        { type: CustomComponentsService },
+        { type: i0.ChangeDetectorRef }
     ]; };
     AuthenticatorComponent.propDecorators = {
         formFields: [{ type: i0.Input }],
@@ -1203,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)];