@aws-amplify/ui-angular 2.0.4 → 2.0.8

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

@@ -1190,6 +1190,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 +1208,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 +1248,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 +1272,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", {