@aws-amplify/ui-angular 2.4.17 → 2.4.20

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

@@ -536,10 +536,10 @@
             var actorContext = ui.getActorContext(state);
             var challengeName = actorContext.challengeName;
             switch (challengeName) {
-                case ui.AuthChallengeNames.SOFTWARE_TOKEN_MFA:
+                case 'SOFTWARE_TOKEN_MFA':
                     this.headerText = ui.translate('Confirm TOTP Code');
                     break;
-                case ui.AuthChallengeNames.SMS_MFA:
+                case 'SMS_MFA':
                     this.headerText = ui.translate('Confirm SMS Code');
                     break;
                 default:
@@ -1240,7 +1240,16 @@
             this.confirmText = ui.translate('Confirm');
         }
         SetupTotpComponent.prototype.ngOnInit = function () {
-            this.generateQRCode();
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
+                        case 0: return [4 /*yield*/, this.generateQRCode()];
+                        case 1:
+                            _c.sent();
+                            return [2 /*return*/];
+                    }
+                });
+            });
         };
         Object.defineProperty(SetupTotpComponent.prototype, "context", {
             get: function () {
@@ -1250,33 +1259,32 @@
             configurable: true
         });
         SetupTotpComponent.prototype.generateQRCode = function () {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b;
             return __awaiter(this, void 0, void 0, function () {
-                var state, actorContext, user, _g, issuer, username, totpCode, _h, err_1;
-                return __generator(this, function (_j) {
-                    switch (_j.label) {
+                var state, actorContext, user, formFields, _c, _d, totpIssuer, _e, totpUsername, _f, totpCode, _g, err_1;
+                return __generator(this, function (_h) {
+                    switch (_h.label) {
                         case 0:
                             state = this.authenticator.authState;
                             actorContext = ui.getActorContext(state);
-                            user = actorContext.user;
-                            _j.label = 1;
+                            user = actorContext.user, formFields = actorContext.formFields;
+                            _c = (_b = (_a = formFields === null || formFields === void 0 ? void 0 : formFields.setupTOTP) === null || _a === void 0 ? void 0 : _a.QR) !== null && _b !== void 0 ? _b : {}, _d = _c.totpIssuer, totpIssuer = _d === void 0 ? 'AWSCognito' : _d, _e = _c.totpUsername, totpUsername = _e === void 0 ? user === null || user === void 0 ? void 0 : user.username : _e;
+                            _h.label = 1;
                         case 1:
-                            _j.trys.push([1, 4, , 5]);
-                            _g = this;
+                            _h.trys.push([1, 4, , 5]);
+                            _f = this;
                             return [4 /*yield*/, awsAmplify.Auth.setupTOTP(user)];
                         case 2:
-                            _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 = encodeURI("otpauth://totp/" + issuer + ":" + username + "?secret=" + this.secretKey + "&issuer=" + issuer);
+                            _f.secretKey = _h.sent();
+                            totpCode = ui.getTotpCode(totpIssuer, totpUsername, this.secretKey);
                             logger.info('totp code was generated:', totpCode);
-                            _h = this;
+                            _g = this;
                             return [4 /*yield*/, QRCode__default["default"].toDataURL(totpCode)];
                         case 3:
-                            _h.qrCodeSource = _j.sent();
+                            _g.qrCodeSource = _h.sent();
                             return [3 /*break*/, 5];
                         case 4:
-                            err_1 = _j.sent();
+                            err_1 = _h.sent();
                             logger.error(err_1);
                             return [3 /*break*/, 5];
                         case 5: return [2 /*return*/];
@@ -1286,7 +1294,7 @@
         };
         SetupTotpComponent.prototype.onInput = function (event) {
             event.preventDefault();
-            var _g = event.target, name = _g.name, value = _g.value;
+            var _c = event.target, name = _c.name, value = _c.value;
             this.authenticator.updateForm({ name: name, value: value });
         };
         SetupTotpComponent.prototype.onSubmit = function (event) {
@@ -1625,7 +1633,7 @@
     ErrorComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'amplify-error',
-                    template: "<div\n  class=\"amplify-flex amplify-alert amplify-alert--error\"\n  data-variation=\"error\"\n  style=\"align-items: center; justify-content: space-between\"\n  *ngIf=\"isVisible\"\n  role=\"alert\"\n>\n  <div class=\"amplify-flex\" style=\"align-items: center\">\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"amplify-icon\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n    >\n      <path\n        d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"\n      ></path>\n    </svg>\n    <div><ng-content></ng-content></div>\n  </div>\n  <button\n    amplify-button\n    class=\"amplify-field-group__control amplify-alert__dismiss\"\n    [attr.aria-label]=\"dismissAriaLabel\"\n    variation=\"link\"\n    [fullWidth]=\"false\"\n    (click)=\"close()\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"amplify-icon\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n    >\n      <path\n        d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"\n      ></path>\n    </svg>\n  </button>\n</div>\n"
+                    template: "<div\n  class=\"amplify-flex amplify-alert amplify-alert--error\"\n  data-variation=\"error\"\n  style=\"align-items: center; justify-content: space-between\"\n  *ngIf=\"isVisible\"\n  role=\"alert\"\n>\n  <div class=\"amplify-flex\" style=\"align-items: center\">\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"amplify-icon\"\n      [attr.aria-hidden]=\"true\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n    >\n      <path\n        d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"\n      ></path>\n    </svg>\n    <div><ng-content></ng-content></div>\n  </div>\n  <button\n    amplify-button\n    class=\"amplify-field-group__control amplify-alert__dismiss\"\n    [attr.aria-label]=\"dismissAriaLabel\"\n    variation=\"link\"\n    [fullWidth]=\"false\"\n    (click)=\"close()\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      class=\"amplify-icon\"\n      [attr.aria-hidden]=\"true\"\n      viewBox=\"0 0 24 24\"\n      fill=\"currentColor\"\n    >\n      <path\n        d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"\n      ></path>\n    </svg>\n  </button>\n</div>\n"
                 },] }
     ];
 
@@ -1696,7 +1704,7 @@
     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]=\"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    [autocomplete]=\"autocomplete\"\n    [attr.disabled]=\"disabled ? '' : null\"\n    [attr.aria-invalid]=\"hasError ? 'true' : 'false'\"\n    [attr.aria-describedby]=\"describedBy\"\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\n        amplify-field\n        amplify-selectfield\n        amplify-countrycodeselect\n        amplify-dialcodeselect\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    [autocomplete]=\"autocomplete\"\n    [attr.disabled]=\"disabled ? '' : null\"\n    [attr.aria-invalid]=\"hasError ? 'true' : 'false'\"\n    [attr.aria-describedby]=\"describedBy\"\n  />\n</div>\n"
                 },] }
     ];
     PhoneNumberFieldComponent.propDecorators = {