@aws-amplify/ui-angular 2.0.3 → 2.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/aws-amplify-ui-angular.metadata.json +1 -1
- package/bundles/aws-amplify-ui-angular.umd.js +65 -17
- package/bundles/aws-amplify-ui-angular.umd.js.map +1 -1
- package/bundles/aws-amplify-ui-angular.umd.min.js +1 -1
- package/bundles/aws-amplify-ui-angular.umd.min.js.map +1 -1
- package/esm2015/lib/components/authenticator/components/authenticator/authenticator.component.js +6 -2
- package/esm2015/lib/components/authenticator/components/confirm-sign-up/confirm-sign-up.component.js +18 -2
- package/esm2015/lib/components/authenticator/components/form-field/form-field.component.js +2 -2
- package/esm2015/lib/components/authenticator/components/setup-totp/setup-totp.component.js +10 -4
- package/esm2015/lib/components/authenticator/components/sign-in/sign-in.component.js +7 -4
- package/esm2015/lib/primitives/tab-item/tab-item.component.js +5 -3
- package/esm2015/lib/services/authenticator.service.js +7 -2
- package/fesm2015/aws-amplify-ui-angular.js +45 -10
- package/fesm2015/aws-amplify-ui-angular.js.map +1 -1
- package/lib/components/authenticator/components/authenticator/authenticator.component.d.ts +4 -0
- package/lib/components/authenticator/components/confirm-reset-password/amplify-confirm-reset-password.component.d.ts +3 -0
- package/lib/components/authenticator/components/confirm-sign-in/confirm-sign-in.component.d.ts +3 -0
- package/lib/components/authenticator/components/confirm-sign-up/confirm-sign-up.component.d.ts +5 -0
- package/lib/components/authenticator/components/confirm-verify-user/amplify-confirm-verify-user.component.d.ts +3 -0
- package/lib/components/authenticator/components/force-new-password/force-new-password.component.d.ts +3 -0
- package/lib/components/authenticator/components/reset-password/reset-password.component.d.ts +3 -0
- package/lib/components/authenticator/components/setup-totp/setup-totp.component.d.ts +6 -0
- package/lib/components/authenticator/components/sign-in/sign-in.component.d.ts +3 -0
- package/lib/components/authenticator/components/sign-up/sign-up.component.d.ts +3 -0
- package/lib/components/authenticator/components/verify-user/verify-user.component.d.ts +3 -0
- package/lib/primitives/tab-item/tab-item.component.d.ts +1 -0
- package/lib/services/authenticator.service.d.ts +4 -0
- package/package.json +3 -3
- package/theme.css +12 -0
|
@@ -115,7 +115,7 @@
|
|
|
115
115
|
*/
|
|
116
116
|
get: function () {
|
|
117
117
|
var _a;
|
|
118
|
-
return (_a = this._facade) === null || _a === void 0 ? void 0 : _a.error;
|
|
118
|
+
return ui.translate((_a = this._facade) === null || _a === void 0 ? void 0 : _a.error);
|
|
119
119
|
},
|
|
120
120
|
enumerable: false,
|
|
121
121
|
configurable: true
|
|
@@ -160,6 +160,14 @@
|
|
|
160
160
|
enumerable: false,
|
|
161
161
|
configurable: true
|
|
162
162
|
});
|
|
163
|
+
Object.defineProperty(AuthenticatorService.prototype, "codeDeliveryDetails", {
|
|
164
|
+
get: function () {
|
|
165
|
+
var _a;
|
|
166
|
+
return (_a = this._facade) === null || _a === void 0 ? void 0 : _a.codeDeliveryDetails;
|
|
167
|
+
},
|
|
168
|
+
enumerable: false,
|
|
169
|
+
configurable: true
|
|
170
|
+
});
|
|
163
171
|
Object.defineProperty(AuthenticatorService.prototype, "updateForm", {
|
|
164
172
|
/**
|
|
165
173
|
* Service facades
|
|
@@ -352,6 +360,10 @@
|
|
|
352
360
|
this.authenticator.toSignIn();
|
|
353
361
|
}
|
|
354
362
|
};
|
|
363
|
+
AuthenticatorComponent.prototype.hasTabs = function () {
|
|
364
|
+
var route = this.authenticator.route;
|
|
365
|
+
return route === 'signIn' || route === 'signUp';
|
|
366
|
+
};
|
|
355
367
|
AuthenticatorComponent.prototype.mapCustomComponents = function (componentQuery) {
|
|
356
368
|
if (!componentQuery)
|
|
357
369
|
return {};
|
|
@@ -366,7 +378,7 @@
|
|
|
366
378
|
AuthenticatorComponent.decorators = [
|
|
367
379
|
{ type: i0.Component, args: [{
|
|
368
380
|
selector: 'amplify-authenticator',
|
|
369
|
-
template: "<div data-amplify-authenticator [attr.data-variation]=\"variation\">\n <div data-amplify-container>\n <amplify-slot name=\"header\" [context]=\"context\"></amplify-slot>\n <div
|
|
381
|
+
template: "<div data-amplify-authenticator [attr.data-variation]=\"variation\">\n <div data-amplify-container>\n <amplify-slot name=\"header\" [context]=\"context\"></amplify-slot>\n <div\n data-amplify-router\n [attr.data-amplify-router-content]=\"hasTabs() ? undefined : ''\"\n >\n <amplify-tabs\n (tabChange)=\"onTabChange()\"\n *ngIf=\"route === 'signIn' || route === 'signUp'\"\n >\n <amplify-tab-item\n [title]=\"signInTitle\"\n [active]=\"route === 'signIn'\"\n data-amplify-router-content\n >\n <!-- signIn component -->\n <amplify-slot\n name=\"sign-in\"\n [context]=\"context\"\n *ngIf=\"route === 'signIn'\"\n >\n <amplify-sign-in></amplify-sign-in>\n </amplify-slot>\n </amplify-tab-item>\n <amplify-tab-item\n [title]=\"signUpTitle\"\n [active]=\"route === 'signUp'\"\n data-amplify-router-content\n >\n <!-- signUp component -->\n <amplify-slot\n name=\"sign-up\"\n [context]=\"context\"\n *ngIf=\"route === 'signUp'\"\n >\n <amplify-sign-up></amplify-sign-up>\n </amplify-slot>\n </amplify-tab-item>\n </amplify-tabs>\n\n <!-- confirmSignUp content -->\n <amplify-slot\n name=\"confirm-sign-up\"\n [context]=\"context\"\n *ngIf=\"route === 'confirmSignUp'\"\n >\n <amplify-confirm-sign-up></amplify-confirm-sign-up>\n </amplify-slot>\n\n <!-- confirmSignIn content -->\n <amplify-slot\n name=\"confirm-sign-in\"\n [context]=\"context\"\n *ngIf=\"route === 'confirmSignIn'\"\n >\n <amplify-confirm-sign-in></amplify-confirm-sign-in>\n </amplify-slot>\n\n <!-- setupTotp content -->\n <amplify-slot\n name=\"setup-totp\"\n [context]=\"context\"\n *ngIf=\"route === 'setupTOTP'\"\n >\n <amplify-setup-totp></amplify-setup-totp>\n </amplify-slot>\n\n <!-- forceNewPassword content -->\n <amplify-slot\n name=\"force-new-password\"\n [context]=\"context\"\n *ngIf=\"route === 'forceNewPassword'\"\n >\n <amplify-force-new-password></amplify-force-new-password>\n </amplify-slot>\n\n <!-- resetPassword content -->\n <amplify-slot\n name=\"reset-password\"\n [context]=\"context\"\n *ngIf=\"route === 'resetPassword'\"\n >\n <amplify-reset-password></amplify-reset-password>\n </amplify-slot>\n\n <!-- confirmResetPassword content -->\n <amplify-slot\n name=\"confirm-reset-password\"\n [context]=\"context\"\n *ngIf=\"route === 'confirmResetPassword'\"\n >\n <amplify-confirm-reset-password></amplify-confirm-reset-password>\n </amplify-slot>\n\n <!-- verifyUser content -->\n <amplify-slot\n name=\"verify-user\"\n [context]=\"context\"\n *ngIf=\"route === 'verifyUser'\"\n >\n <amplify-verify-user></amplify-verify-user>\n </amplify-slot>\n\n <!-- confirmVerifyUser content -->\n <amplify-slot\n name=\"confirm-verify-user\"\n [context]=\"context\"\n *ngIf=\"route === 'confirmVerifyUser'\"\n >\n <amplify-confirm-verify-user></amplify-confirm-verify-user>\n </amplify-slot>\n </div>\n\n <amplify-slot name=\"footer\" [context]=\"context\"></amplify-slot>\n </div>\n</div>\n\n<!-- signedIn content is rendered outside authenticator so it's not styled by authenticator -->\n<amplify-slot\n name=\"authenticated\"\n [context]=\"context\"\n *ngIf=\"route === 'authenticated'\"\n>\n <ng-content></ng-content>\n</amplify-slot>\n",
|
|
370
382
|
providers: [CustomComponentsService],
|
|
371
383
|
encapsulation: i0.ViewEncapsulation.None
|
|
372
384
|
},] }
|
|
@@ -500,6 +512,30 @@
|
|
|
500
512
|
enumerable: false,
|
|
501
513
|
configurable: true
|
|
502
514
|
});
|
|
515
|
+
Object.defineProperty(ConfirmSignUpComponent.prototype, "confirmSignUpHeading", {
|
|
516
|
+
get: function () {
|
|
517
|
+
var _a = this.authenticator.codeDeliveryDetails, _b = _a === void 0 ? {} : _a, DeliveryMedium = _b.DeliveryMedium;
|
|
518
|
+
return DeliveryMedium === 'EMAIL'
|
|
519
|
+
? ui.translate('We Emailed You')
|
|
520
|
+
: DeliveryMedium === 'SMS'
|
|
521
|
+
? ui.translate('We Texted You')
|
|
522
|
+
: ui.translate('We Sent A Code');
|
|
523
|
+
},
|
|
524
|
+
enumerable: false,
|
|
525
|
+
configurable: true
|
|
526
|
+
});
|
|
527
|
+
Object.defineProperty(ConfirmSignUpComponent.prototype, "subtitleText", {
|
|
528
|
+
get: function () {
|
|
529
|
+
var _a = this.authenticator.codeDeliveryDetails, _b = _a === void 0 ? {} : _a, DeliveryMedium = _b.DeliveryMedium, Destination = _b.Destination;
|
|
530
|
+
return DeliveryMedium === 'EMAIL'
|
|
531
|
+
? "Your code is on the way. To log in, enter the code we emailed to " + Destination + ". It may take a minute to arrive."
|
|
532
|
+
: DeliveryMedium === 'SMS'
|
|
533
|
+
? "Your code is on the way. To log in, enter the code we texted to " + Destination + ". It may take a minute to arrive."
|
|
534
|
+
: ui.translate("Your code is on the way. To log in, enter the code we sent you. It may take a minute to arrive.");
|
|
535
|
+
},
|
|
536
|
+
enumerable: false,
|
|
537
|
+
configurable: true
|
|
538
|
+
});
|
|
503
539
|
ConfirmSignUpComponent.prototype.onInput = function (event) {
|
|
504
540
|
event.preventDefault();
|
|
505
541
|
var _a = event.target, name = _a.name, value = _a.value;
|
|
@@ -514,7 +550,7 @@
|
|
|
514
550
|
ConfirmSignUpComponent.decorators = [
|
|
515
551
|
{ type: i0.Component, args: [{
|
|
516
552
|
selector: 'amplify-confirm-sign-up',
|
|
517
|
-
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]=\"context.isPending\"\n >\n <amplify-slot name=\"confirm-sign-up-header\" [context]=\"context\">\n <h3 class=\"amplify-heading\"
|
|
553
|
+
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]=\"context.isPending\"\n >\n <amplify-slot name=\"confirm-sign-up-header\" [context]=\"context\">\n <h3 class=\"amplify-heading\" style=\"font-size: 1.5rem\">\n {{ confirmSignUpHeading }}\n </h3>\n </amplify-slot>\n <span style=\"margin-bottom: 1rem\">\n {{ subtitleText }}\n </span>\n <amplify-form-field\n name=\"confirmation_code\"\n autocomplete=\"one-time-code\"\n ></amplify-form-field>\n\n <button amplify-button variation=\"primary\" fullWidth=\"true\" type=\"submit\">\n {{ confirmText }}\n </button>\n <button\n amplify-button\n fontWeight=\"normal\"\n (click)=\"authenticator.resendCode()\"\n >\n {{ resendCodeText }}\n </button>\n </fieldset>\n\n <amplify-error *ngIf=\"context.error\">\n {{ authenticator.error }}\n </amplify-error>\n <amplify-slot\n name=\"confirm-sign-up-footer\"\n [context]=\"context\"\n ></amplify-slot>\n </form>\n</div>\n"
|
|
518
554
|
},] }
|
|
519
555
|
];
|
|
520
556
|
ConfirmSignUpComponent.ctorParameters = function () { return [
|
|
@@ -723,7 +759,7 @@
|
|
|
723
759
|
get: function () {
|
|
724
760
|
var formContext = ui.getActorContext(this.authenticator.authState);
|
|
725
761
|
var validationError = formContext.validationError;
|
|
726
|
-
return validationError[this.name];
|
|
762
|
+
return ui.translate(validationError[this.name]);
|
|
727
763
|
},
|
|
728
764
|
enumerable: false,
|
|
729
765
|
configurable: true
|
|
@@ -1154,6 +1190,8 @@
|
|
|
1154
1190
|
this.dataAttr = '';
|
|
1155
1191
|
this.headerText = ui.translate('Setup TOTP');
|
|
1156
1192
|
this.qrCodeSource = '';
|
|
1193
|
+
this.secretKey = '';
|
|
1194
|
+
this.copyTextLabel = ui.translate('COPY');
|
|
1157
1195
|
// translated texts
|
|
1158
1196
|
this.backToSignInText = ui.translate('Back to Sign In');
|
|
1159
1197
|
this.confirmText = ui.translate('Confirm');
|
|
@@ -1170,29 +1208,30 @@
|
|
|
1170
1208
|
});
|
|
1171
1209
|
SetupTotpComponent.prototype.generateQRCode = function () {
|
|
1172
1210
|
return __awaiter(this, void 0, void 0, function () {
|
|
1173
|
-
var state, actorContext, user,
|
|
1174
|
-
return __generator(this, function (
|
|
1175
|
-
switch (
|
|
1211
|
+
var state, actorContext, user, _a, issuer, totpCode, _b, err_1;
|
|
1212
|
+
return __generator(this, function (_c) {
|
|
1213
|
+
switch (_c.label) {
|
|
1176
1214
|
case 0:
|
|
1177
1215
|
state = this.authenticator.authState;
|
|
1178
1216
|
actorContext = ui.getActorContext(state);
|
|
1179
1217
|
user = actorContext.user;
|
|
1180
|
-
|
|
1218
|
+
_c.label = 1;
|
|
1181
1219
|
case 1:
|
|
1182
|
-
|
|
1220
|
+
_c.trys.push([1, 4, , 5]);
|
|
1221
|
+
_a = this;
|
|
1183
1222
|
return [4 /*yield*/, awsAmplify.Auth.setupTOTP(user)];
|
|
1184
1223
|
case 2:
|
|
1185
|
-
secretKey =
|
|
1224
|
+
_a.secretKey = _c.sent();
|
|
1186
1225
|
issuer = 'AWSCognito';
|
|
1187
|
-
totpCode = "otpauth://totp/" + issuer + ":" + user.username + "?secret=" + secretKey + "&issuer=" + issuer;
|
|
1226
|
+
totpCode = "otpauth://totp/" + issuer + ":" + user.username + "?secret=" + this.secretKey + "&issuer=" + issuer;
|
|
1188
1227
|
logger.info('totp code was generated:', totpCode);
|
|
1189
|
-
|
|
1228
|
+
_b = this;
|
|
1190
1229
|
return [4 /*yield*/, QRCode__default["default"].toDataURL(totpCode)];
|
|
1191
1230
|
case 3:
|
|
1192
|
-
|
|
1231
|
+
_b.qrCodeSource = _c.sent();
|
|
1193
1232
|
return [3 /*break*/, 5];
|
|
1194
1233
|
case 4:
|
|
1195
|
-
err_1 =
|
|
1234
|
+
err_1 = _c.sent();
|
|
1196
1235
|
logger.error(err_1);
|
|
1197
1236
|
return [3 /*break*/, 5];
|
|
1198
1237
|
case 5: return [2 /*return*/];
|
|
@@ -1209,12 +1248,16 @@
|
|
|
1209
1248
|
event.preventDefault();
|
|
1210
1249
|
this.authenticator.submitForm();
|
|
1211
1250
|
};
|
|
1251
|
+
SetupTotpComponent.prototype.copyText = function () {
|
|
1252
|
+
navigator.clipboard.writeText(this.secretKey);
|
|
1253
|
+
this.copyTextLabel = ui.translate('COPIED');
|
|
1254
|
+
};
|
|
1212
1255
|
return SetupTotpComponent;
|
|
1213
1256
|
}());
|
|
1214
1257
|
SetupTotpComponent.decorators = [
|
|
1215
1258
|
{ type: i0.Component, args: [{
|
|
1216
1259
|
selector: 'amplify-setup-totp',
|
|
1217
|
-
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"
|
|
1260
|
+
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"
|
|
1218
1261
|
},] }
|
|
1219
1262
|
];
|
|
1220
1263
|
SetupTotpComponent.ctorParameters = function () { return [
|
|
@@ -1229,7 +1272,10 @@
|
|
|
1229
1272
|
this.authenticator = authenticator;
|
|
1230
1273
|
this.dataAttr = '';
|
|
1231
1274
|
// translated phrases
|
|
1232
|
-
|
|
1275
|
+
// Support backwards compatibility for legacy key with trailing space
|
|
1276
|
+
this.forgotPasswordText = !ui.hasTranslation('Forgot your password? ')
|
|
1277
|
+
? ui.translate('Forgot your password?')
|
|
1278
|
+
: ui.translate('Forgot your password? ');
|
|
1233
1279
|
this.signInButtonText = ui.translate('Sign in');
|
|
1234
1280
|
}
|
|
1235
1281
|
Object.defineProperty(SignInComponent.prototype, "context", {
|
|
@@ -1610,6 +1656,7 @@
|
|
|
1610
1656
|
var TabItemComponent = /** @class */ (function () {
|
|
1611
1657
|
function TabItemComponent() {
|
|
1612
1658
|
this.active = false;
|
|
1659
|
+
this.display = 'block'; // emulate div behavior
|
|
1613
1660
|
}
|
|
1614
1661
|
return TabItemComponent;
|
|
1615
1662
|
}());
|
|
@@ -1624,7 +1671,8 @@
|
|
|
1624
1671
|
active: [{ type: i0.Input }],
|
|
1625
1672
|
id: [{ type: i0.Input }],
|
|
1626
1673
|
labelledById: [{ type: i0.Input }],
|
|
1627
|
-
tabIndex: [{ type: i0.Input }]
|
|
1674
|
+
tabIndex: [{ type: i0.Input }],
|
|
1675
|
+
display: [{ type: i0.HostBinding, args: ['style.display',] }]
|
|
1628
1676
|
};
|
|
1629
1677
|
|
|
1630
1678
|
var TabsComponent = /** @class */ (function () {
|