verben-authentication-ui 0.3.9 → 0.4.0
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/esm2022/lib/components/auth-callback/auth-callback.component.mjs +22 -15
- package/esm2022/lib/components/button/button.component.mjs +3 -6
- package/esm2022/lib/components/mail/mail.component.mjs +1 -1
- package/esm2022/lib/components/o-auth/o-auth.component.mjs +28 -30
- package/esm2022/lib/components/otp-input/otp-input.component.mjs +15 -4
- package/esm2022/lib/components/sign-in/sign-in.component.mjs +27 -30
- package/esm2022/lib/components/sign-up/sign-up.component.mjs +1 -1
- package/esm2022/lib/components/two-factor-auth-otp/two-factor-auth-otp.component.mjs +1 -1
- package/esm2022/lib/components/user-request/user-request.component.mjs +11 -4
- package/esm2022/lib/models/UserRequest.mjs +1 -1
- package/esm2022/lib/models/auth-mechanism.mjs +1 -1
- package/esm2022/lib/models/oauth-resp.mjs +2 -0
- package/fesm2022/verben-authentication-ui.mjs +101 -82
- package/fesm2022/verben-authentication-ui.mjs.map +1 -1
- package/lib/components/auth-callback/auth-callback.component.d.ts +6 -6
- package/lib/components/button/button.component.d.ts +1 -2
- package/lib/components/o-auth/o-auth.component.d.ts +6 -12
- package/lib/components/otp-input/otp-input.component.d.ts +1 -0
- package/lib/components/sign-in/sign-in.component.d.ts +3 -10
- package/lib/components/user-request/user-request.component.d.ts +1 -0
- package/lib/models/UserRequest.d.ts +1 -0
- package/lib/models/auth-mechanism.d.ts +1 -0
- package/lib/models/oauth-resp.d.ts +6 -0
- package/package.json +2 -1
|
@@ -307,22 +307,15 @@ var MechanismType;
|
|
|
307
307
|
})(MechanismType || (MechanismType = {}));
|
|
308
308
|
|
|
309
309
|
class OAuthComponent {
|
|
310
|
-
route;
|
|
311
|
-
server;
|
|
312
|
-
utilService;
|
|
313
310
|
router;
|
|
314
311
|
showGoogle = false;
|
|
315
312
|
showMicrosoft = false;
|
|
316
313
|
showApple = false;
|
|
317
314
|
authMechanisms = null;
|
|
318
|
-
|
|
319
|
-
googleClick = new EventEmitter();
|
|
320
|
-
appleClick = new EventEmitter();
|
|
315
|
+
emitMechanismFn = new EventEmitter();
|
|
321
316
|
page = '';
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
this.server = server;
|
|
325
|
-
this.utilService = utilService;
|
|
317
|
+
type = '';
|
|
318
|
+
constructor(router) {
|
|
326
319
|
this.router = router;
|
|
327
320
|
}
|
|
328
321
|
ngOnInit() {
|
|
@@ -348,6 +341,8 @@ class OAuthComponent {
|
|
|
348
341
|
}
|
|
349
342
|
}
|
|
350
343
|
oAuthWithGoogle(data) {
|
|
344
|
+
this.type = data.AuthMechanism;
|
|
345
|
+
localStorage.setItem('type', JSON.stringify(this.type));
|
|
351
346
|
const redirectUri = encodeURIComponent(data.RedirectUri);
|
|
352
347
|
const scope = encodeURIComponent('openid email profile');
|
|
353
348
|
const responseType = 'code';
|
|
@@ -356,22 +351,31 @@ class OAuthComponent {
|
|
|
356
351
|
window.location.href = authUrl;
|
|
357
352
|
}
|
|
358
353
|
oAuthWithApple() {
|
|
359
|
-
this.appleClick.emit();
|
|
360
354
|
}
|
|
361
|
-
oAuthWithMicrosoft() {
|
|
362
|
-
this.
|
|
355
|
+
oAuthWithMicrosoft(data) {
|
|
356
|
+
this.type = data.AuthMechanism;
|
|
357
|
+
;
|
|
358
|
+
localStorage.setItem('type', JSON.stringify(this.type));
|
|
359
|
+
const redirectUri = encodeURIComponent(data.RedirectUri);
|
|
360
|
+
const scope = encodeURIComponent('openid email profile');
|
|
361
|
+
const responseType = 'code';
|
|
362
|
+
const state = encodeURIComponent(JSON.stringify({ returnTo: this.page }));
|
|
363
|
+
// const authUrl = `https://login.microsoftonline.com/${data.TenantId}/oauth2/v2.0/authorize?client_id=${data.ClientId}&response_type=${responseType}&redirect_uri=${redirectUri}&response_mode=query&state=${state}`;
|
|
364
|
+
const authUrl = `https://login.microsoftonline.com/common/oauth2/v2.0/authorize
|
|
365
|
+
?client_id=${data.ClientId}
|
|
366
|
+
&response_type=${responseType}
|
|
367
|
+
&redirect_uri=${redirectUri}&scope=${scope}
|
|
368
|
+
&response_mode=query&state=${state}`;
|
|
369
|
+
window.location.href = authUrl;
|
|
363
370
|
}
|
|
364
371
|
checkForValue(value) {
|
|
365
372
|
switch (value) {
|
|
366
373
|
case MechanismType.Google:
|
|
367
374
|
return 'google-logo';
|
|
368
|
-
break;
|
|
369
375
|
case MechanismType.Apple:
|
|
370
376
|
return 'apple-logo';
|
|
371
|
-
break;
|
|
372
377
|
case MechanismType.MicrosoftAD:
|
|
373
378
|
return 'microsoft-logo';
|
|
374
|
-
break;
|
|
375
379
|
default:
|
|
376
380
|
return '';
|
|
377
381
|
}
|
|
@@ -385,25 +389,21 @@ class OAuthComponent {
|
|
|
385
389
|
return this.oAuthWithApple();
|
|
386
390
|
break;
|
|
387
391
|
case MechanismType.MicrosoftAD:
|
|
388
|
-
return this.oAuthWithMicrosoft();
|
|
392
|
+
return this.oAuthWithMicrosoft(value);
|
|
389
393
|
break;
|
|
390
394
|
default:
|
|
391
395
|
return '';
|
|
392
396
|
}
|
|
393
397
|
}
|
|
394
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OAuthComponent, deps: [{ token: i1$2.
|
|
395
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: OAuthComponent, selector: "verben-o-auth", inputs: { authMechanisms: "authMechanisms" }, outputs: {
|
|
398
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OAuthComponent, deps: [{ token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
399
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: OAuthComponent, selector: "verben-o-auth", inputs: { authMechanisms: "authMechanisms" }, outputs: { emitMechanismFn: "emitMechanismFn" }, ngImport: i0, template: "<section class=\"oauthWrapper\"> \n <div class=\"OrFlexWrapper\">\n <hr/>\n <span>OR</span>\n <hr/>\n </div>\n <div class=\"btnWrapper\">\n <div *ngFor=\"let btn of authMechanisms, let i = index\"> \n <verbena-button\n [svg]=\"checkForValue(btn.AuthMechanism)\"\n [svgHeight]=\"24\"\n [svgWidth]=\"24\"\n [text]=\"'Continue with ' + btn.AuthMechanism\"\n bgColor=\"white\"\n textColor=\"black\"\n border=\"1px solid #333\"\n borderRadius=\"40px\"\n pd=\"10px 20px\"\n width=\"100%\"\n svgPosition=\"left\"\n buttonClass=\"font-normal text-[24px] leading-[29.05px] text-[#333] mt-2\"\n (click)=\"handleOauthClick(btn)\"\n ></verbena-button>\n </div> \n </div> \n</section>\n", styles: ["hr{height:1px;margin:0;border:1px solid #66666640;flex:1}.OR{margin:0 2px;color:#666}.oauthWrapper{display:flex;flex-direction:column;gap:12px}.btnWrapper{display:flex;flex-direction:column;gap:10px}.OrFlexWrapper{display:flex;align-items:center;gap:8px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "svgPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "styleType", "svg", "svgWidth", "svgHeight", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }] });
|
|
396
400
|
}
|
|
397
401
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OAuthComponent, decorators: [{
|
|
398
402
|
type: Component,
|
|
399
403
|
args: [{ selector: 'verben-o-auth', template: "<section class=\"oauthWrapper\"> \n <div class=\"OrFlexWrapper\">\n <hr/>\n <span>OR</span>\n <hr/>\n </div>\n <div class=\"btnWrapper\">\n <div *ngFor=\"let btn of authMechanisms, let i = index\"> \n <verbena-button\n [svg]=\"checkForValue(btn.AuthMechanism)\"\n [svgHeight]=\"24\"\n [svgWidth]=\"24\"\n [text]=\"'Continue with ' + btn.AuthMechanism\"\n bgColor=\"white\"\n textColor=\"black\"\n border=\"1px solid #333\"\n borderRadius=\"40px\"\n pd=\"10px 20px\"\n width=\"100%\"\n svgPosition=\"left\"\n buttonClass=\"font-normal text-[24px] leading-[29.05px] text-[#333] mt-2\"\n (click)=\"handleOauthClick(btn)\"\n ></verbena-button>\n </div> \n </div> \n</section>\n", styles: ["hr{height:1px;margin:0;border:1px solid #66666640;flex:1}.OR{margin:0 2px;color:#666}.oauthWrapper{display:flex;flex-direction:column;gap:12px}.btnWrapper{display:flex;flex-direction:column;gap:10px}.OrFlexWrapper{display:flex;align-items:center;gap:8px}\n"] }]
|
|
400
|
-
}], ctorParameters: () => [{ type: i1$2.
|
|
404
|
+
}], ctorParameters: () => [{ type: i1$2.Router }], propDecorators: { authMechanisms: [{
|
|
401
405
|
type: Input
|
|
402
|
-
}],
|
|
403
|
-
type: Output
|
|
404
|
-
}], googleClick: [{
|
|
405
|
-
type: Output
|
|
406
|
-
}], appleClick: [{
|
|
406
|
+
}], emitMechanismFn: [{
|
|
407
407
|
type: Output
|
|
408
408
|
}] } });
|
|
409
409
|
|
|
@@ -426,6 +426,7 @@ class UserRequestComponent {
|
|
|
426
426
|
pd = '32px 48px';
|
|
427
427
|
isFormEditable = true;
|
|
428
428
|
apiKey = '';
|
|
429
|
+
hidePassword = false;
|
|
429
430
|
isCode = false;
|
|
430
431
|
text = 'Send Request';
|
|
431
432
|
color = 'black';
|
|
@@ -489,6 +490,7 @@ class UserRequestComponent {
|
|
|
489
490
|
nonNullable: true,
|
|
490
491
|
}),
|
|
491
492
|
TenantId: new FormControl('', { nonNullable: true }),
|
|
493
|
+
Token: new FormControl('', { nonNullable: true }),
|
|
492
494
|
SignUpType: new FormControl(MechanismType.InApp, { nonNullable: true }),
|
|
493
495
|
ServiceName: new FormControl('', { nonNullable: true }),
|
|
494
496
|
ActionBy: new FormControl('', { nonNullable: true }),
|
|
@@ -573,7 +575,6 @@ class UserRequestComponent {
|
|
|
573
575
|
this.utilService.sendBI(false);
|
|
574
576
|
if (res instanceof ErrorResponse) {
|
|
575
577
|
this.onSubmitResponseEnd.emit(res);
|
|
576
|
-
console.log(res);
|
|
577
578
|
}
|
|
578
579
|
else {
|
|
579
580
|
const result = res;
|
|
@@ -605,16 +606,22 @@ class UserRequestComponent {
|
|
|
605
606
|
this.userRequestForm.controls['FirstName'].setValue(res.FirstName);
|
|
606
607
|
this.userRequestForm.controls['LastName'].setValue(res.LastName);
|
|
607
608
|
this.userRequestForm.controls['MailAddress'].setValue(res.Email);
|
|
609
|
+
this.userRequestForm.controls['Token'].setValue(res.AccessToken);
|
|
608
610
|
this.userRequestForm.controls['SignUpType'].setValue(MechanismType.Google);
|
|
611
|
+
this.userRequestForm.controls['Password'].clearValidators();
|
|
612
|
+
this.userRequestForm.controls['Password'].updateValueAndValidity();
|
|
613
|
+
this.userRequestForm.controls['ConfirmPassword'].clearValidators();
|
|
614
|
+
this.userRequestForm.controls['ConfirmPassword'].updateValueAndValidity();
|
|
615
|
+
this.hidePassword = true;
|
|
609
616
|
}
|
|
610
617
|
}
|
|
611
618
|
}
|
|
612
619
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserRequestComponent, deps: [{ token: i1$1.FormBuilder }, { token: HttpWebRequestService }, { token: UtilService }, { token: EnvironmentService }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
|
|
613
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserRequestComponent, selector: "lib-user-request", inputs: { width: "width", headingTitle: "headingTitle", headingClass: "headingClass", customClass: "customClass", bgColor: "bgColor", boxShadow: "boxShadow", border: "border", borderRadius: "borderRadius", textColor: "textColor", height: "height", pd: "pd", text: "text", color: "color", btnBorder: "btnBorder", btnBorderRadius: "btnBorderRadius", btnBgColor: "btnBgColor", btnWidth: "btnWidth", btnPd: "btnPd", termsLink: "termsLink", privacyLink: "privacyLink", routerLink: "routerLink" }, outputs: { formSubmit: "formSubmit", googleClick: "googleClick", onSubmitSuccess: "onSubmitSuccess", appleClick: "appleClick", microsoftClick: "microsoftClick", onSubmitGoogleAuth: "onSubmitGoogleAuth", onSubmitResponseEnd: "onSubmitResponseEnd" }, ngImport: i0, template: "<section [ngStyle]=\"styles\" class=\"{{ customClass }}\">\n <h2 class=\"{{ headingClass }}\">\n {{ headingTitle }}\n </h2>\n\n <form\n [formGroup]=\"userRequestForm\"\n (ngSubmit)=\"submitForm()\"\n class=\"flex flex-col gap-5 mt-3\"\n >\n <verbena-input\n [label]=\"'First Name'\"\n [labelColor]=\"'#666'\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'text'\"\n formControlName=\"FirstName\"\n [showBorder]=\"true\"\n [bgColor]=\"'white'\"\n [border]=\"'1px solid #66666659'\"\n [borderRadius]=\"'12px'\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n <verbena-input\n [label]=\"'Last Name'\"\n [labelColor]=\"'#666'\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'text'\"\n formControlName=\"LastName\"\n [showBorder]=\"true\"\n [bgColor]=\"'white'\"\n [border]=\"'1px solid #66666659'\"\n [borderRadius]=\"'12px'\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n <verbena-input\n [label]=\"'E-mail Address'\"\n [labelColor]=\"'#666'\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'email'\"\n formControlName=\"MailAddress\"\n [showBorder]=\"true\"\n [bgColor]=\"'white'\"\n [border]=\"'1px solid #66666659'\"\n [borderRadius]=\"'12px'\"\n [showErrorMessage]=\"true\"\n [customErrorMessages]=\"{\n required: 'Email address is required',\n email: 'Email address must be valid'\n }\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n\n <verbena-input\n [label]=\"'Password'\"\n [labelColor]=\"'#666'\"\n [placeHolder]=\"''\"\n [passwordToggle]=\"true\"\n formControlName=\"Password\"\n [required]=\"true\"\n [type]=\"'password'\"\n [showBorder]=\"true\"\n [bgColor]=\"'white'\"\n [border]=\"'1px solid #66666659'\"\n [borderRadius]=\"'12px'\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n\n <verbena-input\n [label]=\"'Confirm Password'\"\n [labelColor]=\"'#666'\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'password'\"\n formControlName=\"ConfirmPassword\"\n [showBorder]=\"true\"\n [passwordToggle]=\"true\"\n [bgColor]=\"'white'\"\n [minLength]=\"userRequestForm.controls['Password'].value?.length\"\n [border]=\"'1px solid #66666659'\"\n [borderRadius]=\"'12px'\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [customErrorMessages]=\"{\n minLength:'Confirm Password must match password',\n required: 'Confirm Password is required and must match password',\n password: 'Password does not match',\n }\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n\n <verbena-button\n [class]=\"'mt-6'\"\n [disable]=\"!this.checkForm()\"\n [text]=\"text\"\n [bgColor]=\"btnBgColor\"\n [textColor]=\"color\"\n [buttonClass]=\"'cursor-not-allowed'\"\n [border]=\"btnBorder\"\n [borderRadius]=\"btnBorderRadius\"\n [pd]=\"btnPd\"\n [ngClass]=\"{\n 'cursor-not-allowed':!checkForm()\n }\"\n [width]=\"btnWidth\"\n buttonClass=\"font-medium text-[22px] leading-[33px]\"\n ></verbena-button>\n\n <div *ngIf=\"AuthMechanisms !== null\"> \n <verben-o-auth \n [authMechanisms]=\"AuthMechanisms\"\n (googleClick)=\"handleGoogleAuth()\"\n (appleClick)=\"handleAppleAuth()\"\n (microsoftClick)=\"handleMicrosoft()\"\n ></verben-o-auth>\n </div>\n
|
|
620
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserRequestComponent, selector: "lib-user-request", inputs: { width: "width", headingTitle: "headingTitle", headingClass: "headingClass", customClass: "customClass", bgColor: "bgColor", boxShadow: "boxShadow", border: "border", borderRadius: "borderRadius", textColor: "textColor", height: "height", pd: "pd", text: "text", color: "color", btnBorder: "btnBorder", btnBorderRadius: "btnBorderRadius", btnBgColor: "btnBgColor", btnWidth: "btnWidth", btnPd: "btnPd", termsLink: "termsLink", privacyLink: "privacyLink", routerLink: "routerLink" }, outputs: { formSubmit: "formSubmit", googleClick: "googleClick", onSubmitSuccess: "onSubmitSuccess", appleClick: "appleClick", microsoftClick: "microsoftClick", onSubmitGoogleAuth: "onSubmitGoogleAuth", onSubmitResponseEnd: "onSubmitResponseEnd" }, ngImport: i0, template: "<section [ngStyle]=\"styles\" class=\"{{ customClass }}\">\n <h2 class=\"{{ headingClass }}\">\n {{ headingTitle }}\n </h2>\n\n <form\n [formGroup]=\"userRequestForm\"\n (ngSubmit)=\"submitForm()\"\n class=\"flex flex-col gap-5 mt-3\"\n >\n <verbena-input\n [label]=\"'First Name'\"\n [labelColor]=\"'#666'\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'text'\"\n formControlName=\"FirstName\"\n [showBorder]=\"true\"\n [bgColor]=\"'white'\"\n [border]=\"'1px solid #66666659'\"\n [borderRadius]=\"'12px'\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n <verbena-input\n [label]=\"'Last Name'\"\n [labelColor]=\"'#666'\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'text'\"\n formControlName=\"LastName\"\n [showBorder]=\"true\"\n [bgColor]=\"'white'\"\n [border]=\"'1px solid #66666659'\"\n [borderRadius]=\"'12px'\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n <verbena-input\n [label]=\"'E-mail Address'\"\n [labelColor]=\"'#666'\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'email'\"\n formControlName=\"MailAddress\"\n [showBorder]=\"true\"\n [bgColor]=\"'white'\"\n [border]=\"'1px solid #66666659'\"\n [borderRadius]=\"'12px'\"\n [showErrorMessage]=\"true\"\n [customErrorMessages]=\"{\n required: 'Email address is required',\n email: 'Email address must be valid'\n }\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n\n <verbena-input\n *ngIf=\"!hidePassword\"\n [label]=\"'Password'\"\n [labelColor]=\"'#666'\"\n [placeHolder]=\"''\"\n [passwordToggle]=\"true\"\n formControlName=\"Password\"\n [required]=\"true\"\n [type]=\"'password'\"\n [showBorder]=\"true\"\n [bgColor]=\"'white'\"\n [border]=\"'1px solid #66666659'\"\n [borderRadius]=\"'12px'\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n\n <verbena-input\n *ngIf=\"!hidePassword\"\n [label]=\"'Confirm Password'\"\n [labelColor]=\"'#666'\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'password'\"\n formControlName=\"ConfirmPassword\"\n [showBorder]=\"true\"\n [passwordToggle]=\"true\"\n [bgColor]=\"'white'\"\n [minLength]=\"userRequestForm.controls['Password'].value?.length\"\n [border]=\"'1px solid #66666659'\"\n [borderRadius]=\"'12px'\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [customErrorMessages]=\"{\n minLength:'Confirm Password must match password',\n required: 'Confirm Password is required and must match password',\n password: 'Password does not match',\n }\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n\n <verbena-button\n [class]=\"'mt-6'\"\n [disable]=\"!this.checkForm()\"\n [text]=\"text\"\n [bgColor]=\"btnBgColor\"\n [textColor]=\"color\"\n [buttonClass]=\"'cursor-not-allowed'\"\n [border]=\"btnBorder\"\n [borderRadius]=\"btnBorderRadius\"\n [pd]=\"btnPd\"\n [ngClass]=\"{\n 'cursor-not-allowed':!checkForm()\n }\"\n [width]=\"btnWidth\"\n buttonClass=\"font-medium text-[22px] leading-[33px]\"\n ></verbena-button>\n </form>\n\n <div class=\"mt-2\" *ngIf=\"AuthMechanisms !== null\"> \n <verben-o-auth \n [authMechanisms]=\"AuthMechanisms\"\n (googleClick)=\"handleGoogleAuth()\"\n (appleClick)=\"handleAppleAuth()\"\n (microsoftClick)=\"handleMicrosoft()\"\n ></verben-o-auth>\n </div>\n</section>\n\n", styles: [".flex{display:flex}.items-center{align-items:center}.overflow-hidden{overflow:hidden}.justify-center{justify-content:center}.h-full{height:100%}.text-center{text-align:center}.underline{text-decoration:underline}.gap-5{gap:20px}.mt-4{margin-top:1rem}.space-y-4>:not([hidden])~:not([hidden]){margin-top:1rem}.gap-1>:not([hidden])~:not([hidden]){gap:.25rem}.pt-3{padding-top:.75rem}.mt-5{margin-top:1.25rem}.border{border-width:1px}.rounded-xl{border-radius:.75rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.flex-col{flex-direction:column}.object-cover{object-fit:cover}.w-full{width:100%}.cursor-not-allowed{cursor:not-allowed!important}.accent{accent-color:#000}.OR{color:#666;gap:6px}.OR span{width:150px;border-top:2px solid #6666663d;display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.VerbenaInputComponent, selector: "verbena-input", inputs: ["label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "component", type: i3.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "svgPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "styleType", "svg", "svgWidth", "svgHeight", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: OAuthComponent, selector: "verben-o-auth", inputs: ["authMechanisms"], outputs: ["emitMechanismFn"] }] });
|
|
614
621
|
}
|
|
615
622
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserRequestComponent, decorators: [{
|
|
616
623
|
type: Component,
|
|
617
|
-
args: [{ selector: 'lib-user-request', template: "<section [ngStyle]=\"styles\" class=\"{{ customClass }}\">\n <h2 class=\"{{ headingClass }}\">\n {{ headingTitle }}\n </h2>\n\n <form\n [formGroup]=\"userRequestForm\"\n (ngSubmit)=\"submitForm()\"\n class=\"flex flex-col gap-5 mt-3\"\n >\n <verbena-input\n [label]=\"'First Name'\"\n [labelColor]=\"'#666'\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'text'\"\n formControlName=\"FirstName\"\n [showBorder]=\"true\"\n [bgColor]=\"'white'\"\n [border]=\"'1px solid #66666659'\"\n [borderRadius]=\"'12px'\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n <verbena-input\n [label]=\"'Last Name'\"\n [labelColor]=\"'#666'\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'text'\"\n formControlName=\"LastName\"\n [showBorder]=\"true\"\n [bgColor]=\"'white'\"\n [border]=\"'1px solid #66666659'\"\n [borderRadius]=\"'12px'\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n <verbena-input\n [label]=\"'E-mail Address'\"\n [labelColor]=\"'#666'\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'email'\"\n formControlName=\"MailAddress\"\n [showBorder]=\"true\"\n [bgColor]=\"'white'\"\n [border]=\"'1px solid #66666659'\"\n [borderRadius]=\"'12px'\"\n [showErrorMessage]=\"true\"\n [customErrorMessages]=\"{\n required: 'Email address is required',\n email: 'Email address must be valid'\n }\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n\n <verbena-input\n [label]=\"'Password'\"\n [labelColor]=\"'#666'\"\n [placeHolder]=\"''\"\n [passwordToggle]=\"true\"\n formControlName=\"Password\"\n [required]=\"true\"\n [type]=\"'password'\"\n [showBorder]=\"true\"\n [bgColor]=\"'white'\"\n [border]=\"'1px solid #66666659'\"\n [borderRadius]=\"'12px'\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n\n <verbena-input\n [label]=\"'Confirm Password'\"\n [labelColor]=\"'#666'\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'password'\"\n formControlName=\"ConfirmPassword\"\n [showBorder]=\"true\"\n [passwordToggle]=\"true\"\n [bgColor]=\"'white'\"\n [minLength]=\"userRequestForm.controls['Password'].value?.length\"\n [border]=\"'1px solid #66666659'\"\n [borderRadius]=\"'12px'\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [customErrorMessages]=\"{\n minLength:'Confirm Password must match password',\n required: 'Confirm Password is required and must match password',\n password: 'Password does not match',\n }\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n\n <verbena-button\n [class]=\"'mt-6'\"\n [disable]=\"!this.checkForm()\"\n [text]=\"text\"\n [bgColor]=\"btnBgColor\"\n [textColor]=\"color\"\n [buttonClass]=\"'cursor-not-allowed'\"\n [border]=\"btnBorder\"\n [borderRadius]=\"btnBorderRadius\"\n [pd]=\"btnPd\"\n [ngClass]=\"{\n 'cursor-not-allowed':!checkForm()\n }\"\n [width]=\"btnWidth\"\n buttonClass=\"font-medium text-[22px] leading-[33px]\"\n ></verbena-button>\n\n <div *ngIf=\"AuthMechanisms !== null\"> \n <verben-o-auth \n [authMechanisms]=\"AuthMechanisms\"\n (googleClick)=\"handleGoogleAuth()\"\n (appleClick)=\"handleAppleAuth()\"\n (microsoftClick)=\"handleMicrosoft()\"\n ></verben-o-auth>\n </div>\n
|
|
624
|
+
args: [{ selector: 'lib-user-request', template: "<section [ngStyle]=\"styles\" class=\"{{ customClass }}\">\n <h2 class=\"{{ headingClass }}\">\n {{ headingTitle }}\n </h2>\n\n <form\n [formGroup]=\"userRequestForm\"\n (ngSubmit)=\"submitForm()\"\n class=\"flex flex-col gap-5 mt-3\"\n >\n <verbena-input\n [label]=\"'First Name'\"\n [labelColor]=\"'#666'\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'text'\"\n formControlName=\"FirstName\"\n [showBorder]=\"true\"\n [bgColor]=\"'white'\"\n [border]=\"'1px solid #66666659'\"\n [borderRadius]=\"'12px'\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n <verbena-input\n [label]=\"'Last Name'\"\n [labelColor]=\"'#666'\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'text'\"\n formControlName=\"LastName\"\n [showBorder]=\"true\"\n [bgColor]=\"'white'\"\n [border]=\"'1px solid #66666659'\"\n [borderRadius]=\"'12px'\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n <verbena-input\n [label]=\"'E-mail Address'\"\n [labelColor]=\"'#666'\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'email'\"\n formControlName=\"MailAddress\"\n [showBorder]=\"true\"\n [bgColor]=\"'white'\"\n [border]=\"'1px solid #66666659'\"\n [borderRadius]=\"'12px'\"\n [showErrorMessage]=\"true\"\n [customErrorMessages]=\"{\n required: 'Email address is required',\n email: 'Email address must be valid'\n }\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n\n <verbena-input\n *ngIf=\"!hidePassword\"\n [label]=\"'Password'\"\n [labelColor]=\"'#666'\"\n [placeHolder]=\"''\"\n [passwordToggle]=\"true\"\n formControlName=\"Password\"\n [required]=\"true\"\n [type]=\"'password'\"\n [showBorder]=\"true\"\n [bgColor]=\"'white'\"\n [border]=\"'1px solid #66666659'\"\n [borderRadius]=\"'12px'\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n\n <verbena-input\n *ngIf=\"!hidePassword\"\n [label]=\"'Confirm Password'\"\n [labelColor]=\"'#666'\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'password'\"\n formControlName=\"ConfirmPassword\"\n [showBorder]=\"true\"\n [passwordToggle]=\"true\"\n [bgColor]=\"'white'\"\n [minLength]=\"userRequestForm.controls['Password'].value?.length\"\n [border]=\"'1px solid #66666659'\"\n [borderRadius]=\"'12px'\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [customErrorMessages]=\"{\n minLength:'Confirm Password must match password',\n required: 'Confirm Password is required and must match password',\n password: 'Password does not match',\n }\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n\n <verbena-button\n [class]=\"'mt-6'\"\n [disable]=\"!this.checkForm()\"\n [text]=\"text\"\n [bgColor]=\"btnBgColor\"\n [textColor]=\"color\"\n [buttonClass]=\"'cursor-not-allowed'\"\n [border]=\"btnBorder\"\n [borderRadius]=\"btnBorderRadius\"\n [pd]=\"btnPd\"\n [ngClass]=\"{\n 'cursor-not-allowed':!checkForm()\n }\"\n [width]=\"btnWidth\"\n buttonClass=\"font-medium text-[22px] leading-[33px]\"\n ></verbena-button>\n </form>\n\n <div class=\"mt-2\" *ngIf=\"AuthMechanisms !== null\"> \n <verben-o-auth \n [authMechanisms]=\"AuthMechanisms\"\n (googleClick)=\"handleGoogleAuth()\"\n (appleClick)=\"handleAppleAuth()\"\n (microsoftClick)=\"handleMicrosoft()\"\n ></verben-o-auth>\n </div>\n</section>\n\n", styles: [".flex{display:flex}.items-center{align-items:center}.overflow-hidden{overflow:hidden}.justify-center{justify-content:center}.h-full{height:100%}.text-center{text-align:center}.underline{text-decoration:underline}.gap-5{gap:20px}.mt-4{margin-top:1rem}.space-y-4>:not([hidden])~:not([hidden]){margin-top:1rem}.gap-1>:not([hidden])~:not([hidden]){gap:.25rem}.pt-3{padding-top:.75rem}.mt-5{margin-top:1.25rem}.border{border-width:1px}.rounded-xl{border-radius:.75rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.flex-col{flex-direction:column}.object-cover{object-fit:cover}.w-full{width:100%}.cursor-not-allowed{cursor:not-allowed!important}.accent{accent-color:#000}.OR{color:#666;gap:6px}.OR span{width:150px;border-top:2px solid #6666663d;display:block}\n"] }]
|
|
618
625
|
}], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: HttpWebRequestService }, { type: UtilService }, { type: EnvironmentService }, { type: i1$2.ActivatedRoute }], propDecorators: { width: [{
|
|
619
626
|
type: Input
|
|
620
627
|
}], headingTitle: [{
|
|
@@ -860,17 +867,16 @@ class ButtonComponent {
|
|
|
860
867
|
pd = '10px 20px';
|
|
861
868
|
buttonClass = '';
|
|
862
869
|
disabled = false;
|
|
863
|
-
isLoading;
|
|
864
870
|
buttonClick = new EventEmitter();
|
|
865
871
|
handleClick() {
|
|
866
872
|
this.buttonClick.emit();
|
|
867
873
|
}
|
|
868
874
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
869
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ButtonComponent, selector: "lib-button", inputs: { text: "text", color: "color", border: "border", borderRadius: "borderRadius", bgColor: "bgColor", width: "width", pd: "pd", buttonClass: "buttonClass", disabled: "disabled"
|
|
875
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ButtonComponent, selector: "lib-button", inputs: { text: "text", color: "color", border: "border", borderRadius: "borderRadius", bgColor: "bgColor", width: "width", pd: "pd", buttonClass: "buttonClass", disabled: "disabled" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<verbena-button\n[text]=\"text\"\n[bgColor]=\"bgColor\"\n[textColor]=\"color\"\n[border]=\"border\"\n[borderRadius]=\"borderRadius\"\n[pd]=\"pd\"\n[width]=\"width\"\n[disable]=\"disabled\"\n[ngStyle]=\"{'cursor': disabled ? 'not-allowed' : 'pointer' }\"\nbuttonClass=\"font-medium text-[22px] leading-[33px] {{buttonClass}}\"\n(click)=\"handleClick()\"\n></verbena-button>\n", styles: [".disable-btn{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "svgPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "styleType", "svg", "svgWidth", "svgHeight", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }] });
|
|
870
876
|
}
|
|
871
877
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
872
878
|
type: Component,
|
|
873
|
-
args: [{ selector: 'lib-button', template: "<verbena-button\n[text]=\"text\"\n[bgColor]=\"bgColor\"\n[textColor]=\"color\"\n[border]=\"border\"\n[borderRadius]=\"borderRadius\"\n[pd]=\"pd\"\n[width]=\"width\"\n[disable]=\"disabled\"\n[ngStyle]=\"{'cursor': disabled ? 'not-allowed' : 'pointer' }\"\nbuttonClass=\"font-medium text-[22px] leading-[33px] {{buttonClass}}\"\n(click)=\"handleClick()\"\n
|
|
879
|
+
args: [{ selector: 'lib-button', template: "<verbena-button\n[text]=\"text\"\n[bgColor]=\"bgColor\"\n[textColor]=\"color\"\n[border]=\"border\"\n[borderRadius]=\"borderRadius\"\n[pd]=\"pd\"\n[width]=\"width\"\n[disable]=\"disabled\"\n[ngStyle]=\"{'cursor': disabled ? 'not-allowed' : 'pointer' }\"\nbuttonClass=\"font-medium text-[22px] leading-[33px] {{buttonClass}}\"\n(click)=\"handleClick()\"\n></verbena-button>\n", styles: [".disable-btn{cursor:not-allowed}\n"] }]
|
|
874
880
|
}], propDecorators: { text: [{
|
|
875
881
|
type: Input
|
|
876
882
|
}], color: [{
|
|
@@ -889,8 +895,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
889
895
|
type: Input
|
|
890
896
|
}], disabled: [{
|
|
891
897
|
type: Input
|
|
892
|
-
}], isLoading: [{
|
|
893
|
-
type: Input
|
|
894
898
|
}], buttonClick: [{
|
|
895
899
|
type: Output
|
|
896
900
|
}] } });
|
|
@@ -1034,7 +1038,7 @@ class SignUpComponent {
|
|
|
1034
1038
|
};
|
|
1035
1039
|
}
|
|
1036
1040
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SignUpComponent, deps: [{ token: i1$1.FormBuilder }, { token: HttpWebRequestService }, { token: UtilService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1037
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SignUpComponent, selector: "verben-sign-up", inputs: { headlingText: "headlingText", width: "width", maxWidth: "maxWidth", margin: "margin", pd: "pd", customClass: "customClass", headlingClass: "headlingClass", bgColor: "bgColor", boxShadow: "boxShadow", border: "border", borderRadius: "borderRadius", height: "height", textColor: "textColor", disabled: "disabled", btnClass: "btnClass", btnBgColor: "btnBgColor", btnColor: "btnColor", btnBorder: "btnBorder", btnBorderRadius: "btnBorderRadius", btnPd: "btnPd", btnText: "btnText", inputLabelColor: "inputLabelColor", inputBgColor: "inputBgColor", inputBorder: "inputBorder", inputBorderRadius: "inputBorderRadius", termsLink: "termsLink", privacyLink: "privacyLink", routerLink: "routerLink" }, outputs: { formSubmit: "formSubmit", onSubmitEnd: "onSubmitEnd", googleClick: "googleClick", appleClick: "appleClick" }, ngImport: i0, template: "<section [ngStyle]=\"styles\" class=\"{{ customClass }}\">\n <h2 class=\"{{headlingClass}}\">\n {{headlingText}}\n </h2>\n <form [formGroup]=\"signUpForm\" (ngSubmit)=\"submit()\" class=\"flexWrapper\">\n <verbena-input\n [label]=\"'First name'\"\n [labelColor]=\"inputLabelColor\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'text'\"\n formControlName=\"Firstname\"\n [showBorder]=\"true\"\n [bgColor]=\"inputBgColor\"\n [border]=\"inputBorder\"\n [borderRadius]=\"inputBorderRadius\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n [customErrorMessages]=\"{required:'First name is required'}\"\n ></verbena-input>\n <verbena-input\n [label]=\"'Last name'\"\n [labelColor]=\"inputLabelColor\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'text'\"\n formControlName=\"Lastname\"\n [showBorder]=\"true\"\n [bgColor]=\"inputBgColor\"\n [border]=\"inputBorder\"\n [borderRadius]=\"inputBorderRadius\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n [customErrorMessages]=\"{required:'Last name is required'}\"\n ></verbena-input>\n <verbena-input\n [label]=\"'Email'\"\n [labelColor]=\"inputLabelColor\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'email'\"\n formControlName=\"Email\"\n [showBorder]=\"true\"\n [bgColor]=\"inputBgColor\"\n [border]=\"inputBorder\"\n [borderRadius]=\"inputBorderRadius\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n <verbena-input\n [label]=\"'Password'\"\n [labelColor]=\"inputLabelColor\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'password'\"\n formControlName=\"Password\"\n [showBorder]=\"true\"\n [bgColor]=\"inputBgColor\"\n [border]=\"inputBorder\"\n [borderRadius]=\"inputBorderRadius\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n [passwordToggle]=\"true\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n <div>\n <verbena-input\n [label]=\"'Confirm Password'\"\n [labelColor]=\"inputLabelColor\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'password'\"\n formControlName=\"Confirmpassword\"\n [showBorder]=\"true\"\n [bgColor]=\"inputBgColor\"\n [border]=\"inputBorder\"\n [borderRadius]=\"inputBorderRadius\"\n [showErrorMessage]=\"false\"\n [errorBorderColor]=\"'red'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n <span *ngIf=\"signUpForm.hasError('passwordMismatch') && signUpForm.get('Confirmpassword')?.dirty\">\n <small class=\"error-text\">Passwords do not match.</small>\n </span>\n </div>\n <div>\n <div class=\"checkBoxWrapper\">\n <input type=\"checkbox\" id=\"terms\" formControlName=\"Terms\" class=\"checBoxInput\" />\n <label for=\"terms\"\n class=\"break-all font-normal leading-6\"\n >By creating an account, I agree to our <a [attr.href]=\"termsLink\">Terms of use</a> and\n <a [attr.href]=\"privacyLink\">Privacy Policy</a></label\n >\n </div>\n <p *ngIf=\"signUpForm.controls['Terms'].invalid && signUpForm.controls['Terms'].touched\">\n <small class=\"error-text\">Please agree to the terms of use and privacy policy.</small>\n </p>\n </div>\n <lib-button\n [buttonClass]=\"btnClass\"\n [color]=\"btnColor\"\n [border]=\"btnBorder\"\n [borderRadius]=\"btnBorderRadius\"\n [bgColor]=\"btnBgColor\"\n [pd]=\"btnPd\"\n [text]=\"btnText\"\n type=\"submit\"\n [disabled]=\"!this.checkForm()\"\n [ngStyle]=\"{'margin-top':'10px'}\"\n ></lib-button>\n <verben-o-auth\n (googleClick)=\"handleGoogleAuth()\"\n (appleClick)=\"handleAppleAuth()\"\n ></verben-o-auth>\n <p>\n Already have an account?\n <a [routerLink]=\"routerLink\" class=\"\">Log in</a>\n </p>\n </form>\n </section>\n\n", styles: ["a{text-decoration:underline;cursor:pointer}input[type=checkbox]:checked{accent-color:#111}.flexWrapper{display:flex;flex-direction:column;gap:10px}.checkBoxWrapper{display:flex;align-items:start;gap:2px}.checBoxInput{margin-top:6px}.bigcheckboxWrapper{margin-top:.5rem;margin-bottom:1.5rem}.error-text{color:red}.disable-btn{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "component", type: i3.VerbenaInputComponent, selector: "verbena-input", inputs: ["label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["text", "color", "border", "borderRadius", "bgColor", "width", "pd", "buttonClass", "disabled"
|
|
1041
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SignUpComponent, selector: "verben-sign-up", inputs: { headlingText: "headlingText", width: "width", maxWidth: "maxWidth", margin: "margin", pd: "pd", customClass: "customClass", headlingClass: "headlingClass", bgColor: "bgColor", boxShadow: "boxShadow", border: "border", borderRadius: "borderRadius", height: "height", textColor: "textColor", disabled: "disabled", btnClass: "btnClass", btnBgColor: "btnBgColor", btnColor: "btnColor", btnBorder: "btnBorder", btnBorderRadius: "btnBorderRadius", btnPd: "btnPd", btnText: "btnText", inputLabelColor: "inputLabelColor", inputBgColor: "inputBgColor", inputBorder: "inputBorder", inputBorderRadius: "inputBorderRadius", termsLink: "termsLink", privacyLink: "privacyLink", routerLink: "routerLink" }, outputs: { formSubmit: "formSubmit", onSubmitEnd: "onSubmitEnd", googleClick: "googleClick", appleClick: "appleClick" }, ngImport: i0, template: "<section [ngStyle]=\"styles\" class=\"{{ customClass }}\">\n <h2 class=\"{{headlingClass}}\">\n {{headlingText}}\n </h2>\n <form [formGroup]=\"signUpForm\" (ngSubmit)=\"submit()\" class=\"flexWrapper\">\n <verbena-input\n [label]=\"'First name'\"\n [labelColor]=\"inputLabelColor\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'text'\"\n formControlName=\"Firstname\"\n [showBorder]=\"true\"\n [bgColor]=\"inputBgColor\"\n [border]=\"inputBorder\"\n [borderRadius]=\"inputBorderRadius\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n [customErrorMessages]=\"{required:'First name is required'}\"\n ></verbena-input>\n <verbena-input\n [label]=\"'Last name'\"\n [labelColor]=\"inputLabelColor\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'text'\"\n formControlName=\"Lastname\"\n [showBorder]=\"true\"\n [bgColor]=\"inputBgColor\"\n [border]=\"inputBorder\"\n [borderRadius]=\"inputBorderRadius\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n [customErrorMessages]=\"{required:'Last name is required'}\"\n ></verbena-input>\n <verbena-input\n [label]=\"'Email'\"\n [labelColor]=\"inputLabelColor\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'email'\"\n formControlName=\"Email\"\n [showBorder]=\"true\"\n [bgColor]=\"inputBgColor\"\n [border]=\"inputBorder\"\n [borderRadius]=\"inputBorderRadius\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n <verbena-input\n [label]=\"'Password'\"\n [labelColor]=\"inputLabelColor\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'password'\"\n formControlName=\"Password\"\n [showBorder]=\"true\"\n [bgColor]=\"inputBgColor\"\n [border]=\"inputBorder\"\n [borderRadius]=\"inputBorderRadius\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n [passwordToggle]=\"true\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n <div>\n <verbena-input\n [label]=\"'Confirm Password'\"\n [labelColor]=\"inputLabelColor\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'password'\"\n formControlName=\"Confirmpassword\"\n [showBorder]=\"true\"\n [bgColor]=\"inputBgColor\"\n [border]=\"inputBorder\"\n [borderRadius]=\"inputBorderRadius\"\n [showErrorMessage]=\"false\"\n [errorBorderColor]=\"'red'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n <span *ngIf=\"signUpForm.hasError('passwordMismatch') && signUpForm.get('Confirmpassword')?.dirty\">\n <small class=\"error-text\">Passwords do not match.</small>\n </span>\n </div>\n <div>\n <div class=\"checkBoxWrapper\">\n <input type=\"checkbox\" id=\"terms\" formControlName=\"Terms\" class=\"checBoxInput\" />\n <label for=\"terms\"\n class=\"break-all font-normal leading-6\"\n >By creating an account, I agree to our <a [attr.href]=\"termsLink\">Terms of use</a> and\n <a [attr.href]=\"privacyLink\">Privacy Policy</a></label\n >\n </div>\n <p *ngIf=\"signUpForm.controls['Terms'].invalid && signUpForm.controls['Terms'].touched\">\n <small class=\"error-text\">Please agree to the terms of use and privacy policy.</small>\n </p>\n </div>\n <lib-button\n [buttonClass]=\"btnClass\"\n [color]=\"btnColor\"\n [border]=\"btnBorder\"\n [borderRadius]=\"btnBorderRadius\"\n [bgColor]=\"btnBgColor\"\n [pd]=\"btnPd\"\n [text]=\"btnText\"\n type=\"submit\"\n [disabled]=\"!this.checkForm()\"\n [ngStyle]=\"{'margin-top':'10px'}\"\n ></lib-button>\n <verben-o-auth\n (googleClick)=\"handleGoogleAuth()\"\n (appleClick)=\"handleAppleAuth()\"\n ></verben-o-auth>\n <p>\n Already have an account?\n <a [routerLink]=\"routerLink\" class=\"\">Log in</a>\n </p>\n </form>\n </section>\n\n", styles: ["a{text-decoration:underline;cursor:pointer}input[type=checkbox]:checked{accent-color:#111}.flexWrapper{display:flex;flex-direction:column;gap:10px}.checkBoxWrapper{display:flex;align-items:start;gap:2px}.checBoxInput{margin-top:6px}.bigcheckboxWrapper{margin-top:.5rem;margin-bottom:1.5rem}.error-text{color:red}.disable-btn{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "component", type: i3.VerbenaInputComponent, selector: "verbena-input", inputs: ["label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["text", "color", "border", "borderRadius", "bgColor", "width", "pd", "buttonClass", "disabled"], outputs: ["buttonClick"] }, { kind: "component", type: OAuthComponent, selector: "verben-o-auth", inputs: ["authMechanisms"], outputs: ["emitMechanismFn"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
|
|
1038
1042
|
}
|
|
1039
1043
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SignUpComponent, decorators: [{
|
|
1040
1044
|
type: Component,
|
|
@@ -1189,6 +1193,8 @@ class SignInComponent {
|
|
|
1189
1193
|
secret;
|
|
1190
1194
|
isLoading = false;
|
|
1191
1195
|
code = '';
|
|
1196
|
+
type = '';
|
|
1197
|
+
mechanismType = '';
|
|
1192
1198
|
OauthData = {
|
|
1193
1199
|
AccessToken: '',
|
|
1194
1200
|
Email: '',
|
|
@@ -1218,8 +1224,8 @@ class SignInComponent {
|
|
|
1218
1224
|
await this.getTenantConfig();
|
|
1219
1225
|
this.route.queryParams.subscribe(params => {
|
|
1220
1226
|
this.code = params['code'];
|
|
1227
|
+
this.type = params['type'];
|
|
1221
1228
|
if (this.code) {
|
|
1222
|
-
console.log('Code from URL:', this.code);
|
|
1223
1229
|
this.verifyUserDetails();
|
|
1224
1230
|
}
|
|
1225
1231
|
});
|
|
@@ -1240,7 +1246,7 @@ class SignInComponent {
|
|
|
1240
1246
|
}
|
|
1241
1247
|
async verifyUserDetails() {
|
|
1242
1248
|
if (this.AuthMechanisms !== null && this.apiKey) {
|
|
1243
|
-
const data = this.AuthMechanisms.find(item => item.AuthMechanism.includes(
|
|
1249
|
+
const data = this.AuthMechanisms.find(item => item.AuthMechanism.includes(this.type));
|
|
1244
1250
|
const payload = {
|
|
1245
1251
|
AuthCode: this.code,
|
|
1246
1252
|
APIKey: this.apiKey,
|
|
@@ -1250,7 +1256,7 @@ class SignInComponent {
|
|
|
1250
1256
|
const res = await this.server.post(`Authentication/GetUserDetails`, payload);
|
|
1251
1257
|
this.utilService.sendBI(false);
|
|
1252
1258
|
if (res instanceof ErrorResponse) {
|
|
1253
|
-
|
|
1259
|
+
return;
|
|
1254
1260
|
}
|
|
1255
1261
|
else {
|
|
1256
1262
|
var result = res;
|
|
@@ -1260,8 +1266,7 @@ class SignInComponent {
|
|
|
1260
1266
|
FirstName: result?.FirstName,
|
|
1261
1267
|
LastName: result?.LastName
|
|
1262
1268
|
};
|
|
1263
|
-
this.submit(
|
|
1264
|
-
// this.onSubmitGoogleAuth.emit(result);
|
|
1269
|
+
this.submit(data.AuthMechanism);
|
|
1265
1270
|
}
|
|
1266
1271
|
}
|
|
1267
1272
|
}
|
|
@@ -1274,7 +1279,7 @@ class SignInComponent {
|
|
|
1274
1279
|
Password: '',
|
|
1275
1280
|
LoginType: type,
|
|
1276
1281
|
APIKey: this.apiKey,
|
|
1277
|
-
Secrete:
|
|
1282
|
+
Secrete: this.secret,
|
|
1278
1283
|
Token: ''
|
|
1279
1284
|
};
|
|
1280
1285
|
switch (type) {
|
|
@@ -1282,13 +1287,22 @@ class SignInComponent {
|
|
|
1282
1287
|
if (!this.checkForm()) {
|
|
1283
1288
|
return;
|
|
1284
1289
|
}
|
|
1290
|
+
else {
|
|
1291
|
+
data = {
|
|
1292
|
+
...data,
|
|
1293
|
+
MailAddress: this.loginForm.controls['Email'].value,
|
|
1294
|
+
Password: this.loginForm.controls['Password'].value
|
|
1295
|
+
};
|
|
1296
|
+
}
|
|
1297
|
+
break;
|
|
1298
|
+
case MechanismType.Google:
|
|
1285
1299
|
data = {
|
|
1286
1300
|
...data,
|
|
1287
|
-
MailAddress: this.
|
|
1288
|
-
|
|
1301
|
+
MailAddress: this.OauthData?.Email,
|
|
1302
|
+
Token: this.OauthData?.AccessToken
|
|
1289
1303
|
};
|
|
1290
1304
|
break;
|
|
1291
|
-
case MechanismType.
|
|
1305
|
+
case MechanismType.MicrosoftAD:
|
|
1292
1306
|
data = {
|
|
1293
1307
|
...data,
|
|
1294
1308
|
MailAddress: this.OauthData?.Email,
|
|
@@ -1296,6 +1310,11 @@ class SignInComponent {
|
|
|
1296
1310
|
};
|
|
1297
1311
|
break;
|
|
1298
1312
|
default:
|
|
1313
|
+
data = {
|
|
1314
|
+
...data,
|
|
1315
|
+
MailAddress: '',
|
|
1316
|
+
Token: '',
|
|
1317
|
+
};
|
|
1299
1318
|
break;
|
|
1300
1319
|
}
|
|
1301
1320
|
this.formSubmit.emit(data);
|
|
@@ -1319,24 +1338,6 @@ class SignInComponent {
|
|
|
1319
1338
|
console.error('Error during login:', error);
|
|
1320
1339
|
}
|
|
1321
1340
|
}
|
|
1322
|
-
handleGoogleAuth() {
|
|
1323
|
-
if (this.AuthMechanisms !== null) {
|
|
1324
|
-
const data = this.AuthMechanisms.filter(item => item.AuthMechanism === MechanismType.Google);
|
|
1325
|
-
this.googleClick.emit();
|
|
1326
|
-
}
|
|
1327
|
-
}
|
|
1328
|
-
handleMicrosoft() {
|
|
1329
|
-
if (this.AuthMechanisms !== null) {
|
|
1330
|
-
const data = this.AuthMechanisms.filter(item => item.AuthMechanism === MechanismType.MicrosoftAD);
|
|
1331
|
-
this.microsoftClick.emit();
|
|
1332
|
-
}
|
|
1333
|
-
}
|
|
1334
|
-
handleAppleAuth() {
|
|
1335
|
-
if (this.AuthMechanisms !== null) {
|
|
1336
|
-
const data = this.AuthMechanisms.filter(item => item.AuthMechanism === MechanismType.Apple);
|
|
1337
|
-
this.appleClick.emit();
|
|
1338
|
-
}
|
|
1339
|
-
}
|
|
1340
1341
|
get styles() {
|
|
1341
1342
|
return {
|
|
1342
1343
|
'background-color': this.bgColor,
|
|
@@ -1352,11 +1353,11 @@ class SignInComponent {
|
|
|
1352
1353
|
};
|
|
1353
1354
|
}
|
|
1354
1355
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SignInComponent, deps: [{ token: i1$1.FormBuilder }, { token: HttpWebRequestService }, { token: UtilService }, { token: EnvironmentService }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
|
|
1355
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SignInComponent, selector: "verben-sign-in", inputs: { headlingText: "headlingText", width: "width", maxWidth: "maxWidth", margin: "margin", pd: "pd", customClass: "customClass", headlingClass: "headlingClass", bgColor: "bgColor", boxShadow: "boxShadow", border: "border", borderRadius: "borderRadius", textColor: "textColor", height: "height", forgetPasswordClass: "forgetPasswordClass", requestAccessClass: "requestAccessClass", createAccountClass: "createAccountClass", createAccountLinkClass: "createAccountLinkClass", forgetPasswordLink: "forgetPasswordLink", createAccountLink: "createAccountLink", requestAccessLink: "requestAccessLink", btnClass: "btnClass", btnBgColor: "btnBgColor", btnColor: "btnColor", btnBorder: "btnBorder", btnBorderRadius: "btnBorderRadius", btnPd: "btnPd", btnText: "btnText", inputLabelColor: "inputLabelColor", inputBgColor: "inputBgColor", inputBorder: "inputBorder", inputBorderRadius: "inputBorderRadius", termsErrorText: "termsErrorText" }, outputs: { formSubmit: "formSubmit", onSubmitEnd: "onSubmitEnd", onGoogleAuthResponse: "onGoogleAuthResponse", onSubmitGoogleAuth: "onSubmitGoogleAuth", googleClick: "googleClick", microsoftClick: "microsoftClick", appleClick: "appleClick" }, ngImport: i0, template: "<section\n[ngStyle]=\"styles\"\nclass=\"{{ customClass }}\"\n>\n <h2 class=\"{{headlingClass}}\">{{headlingText}}</h2>\n <form [formGroup]=\"loginForm\" (ngSubmit)=\"submit('InApp')\" class=\"flexWrapper\"> \n <div class=\"formWrapper\" *ngIf=\"showform\"> \n <verbena-input\n [label]=\"'Email'\"\n [labelColor]=\"inputLabelColor\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'email'\"\n formControlName=\"Email\"\n [showBorder]=\"true\"\n [bgColor]=\"inputBgColor\"\n [border]=\"inputBorder\"\n [borderRadius]=\"inputBorderRadius\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n <div> \n <verbena-input\n [label]=\"'Password'\"\n [labelColor]=\"inputLabelColor\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'password'\"\n formControlName=\"Password\"\n [showBorder]=\"true\"\n [bgColor]=\"inputBgColor\"\n [border]=\"inputBorder\"\n [borderRadius]=\"inputBorderRadius\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n [passwordToggle]=\"true\"\n [passLength]=\"5\"\n [customErrorMessages]=\"{\n password:'Password is required'\n }\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n <div class=\"pwdWrapper\"> \n <p clas=\"mb-0\"> <a [routerLink]=\"forgetPasswordLink\" class=\"{{forgetPasswordClass}}\">Forgot password</a></p>\n </div>\n </div>\n <lib-button \n [buttonClass]=\"btnClass\"\n [color]=\"btnColor\"\n [border]=\"btnBorder\"\n [borderRadius]=\"btnBorderRadius\"\n [bgColor]=\"btnBgColor\"\n [pd]=\"btnPd\"\n [text]=\"btnText\" \n type=\"submit\" \n [
|
|
1356
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SignInComponent, selector: "verben-sign-in", inputs: { headlingText: "headlingText", width: "width", maxWidth: "maxWidth", margin: "margin", pd: "pd", customClass: "customClass", headlingClass: "headlingClass", bgColor: "bgColor", boxShadow: "boxShadow", border: "border", borderRadius: "borderRadius", textColor: "textColor", height: "height", forgetPasswordClass: "forgetPasswordClass", requestAccessClass: "requestAccessClass", createAccountClass: "createAccountClass", createAccountLinkClass: "createAccountLinkClass", forgetPasswordLink: "forgetPasswordLink", createAccountLink: "createAccountLink", requestAccessLink: "requestAccessLink", btnClass: "btnClass", btnBgColor: "btnBgColor", btnColor: "btnColor", btnBorder: "btnBorder", btnBorderRadius: "btnBorderRadius", btnPd: "btnPd", btnText: "btnText", inputLabelColor: "inputLabelColor", inputBgColor: "inputBgColor", inputBorder: "inputBorder", inputBorderRadius: "inputBorderRadius", termsErrorText: "termsErrorText" }, outputs: { formSubmit: "formSubmit", onSubmitEnd: "onSubmitEnd", onGoogleAuthResponse: "onGoogleAuthResponse", onSubmitGoogleAuth: "onSubmitGoogleAuth", googleClick: "googleClick", microsoftClick: "microsoftClick", appleClick: "appleClick" }, ngImport: i0, template: "<section\n[ngStyle]=\"styles\"\nclass=\"{{ customClass }}\"\n>\n <h2 class=\"{{headlingClass}}\">{{headlingText}}</h2>\n <form [formGroup]=\"loginForm\" (ngSubmit)=\"submit('InApp')\" class=\"flexWrapper\"> \n <div class=\"formWrapper\" *ngIf=\"showform\"> \n <verbena-input\n [label]=\"'Email'\"\n [labelColor]=\"inputLabelColor\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'email'\"\n formControlName=\"Email\"\n [showBorder]=\"true\"\n [bgColor]=\"inputBgColor\"\n [border]=\"inputBorder\"\n [borderRadius]=\"inputBorderRadius\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n <div> \n <verbena-input\n [label]=\"'Password'\"\n [labelColor]=\"inputLabelColor\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'password'\"\n formControlName=\"Password\"\n [showBorder]=\"true\"\n [bgColor]=\"inputBgColor\"\n [border]=\"inputBorder\"\n [borderRadius]=\"inputBorderRadius\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n [passwordToggle]=\"true\"\n [passLength]=\"5\"\n [customErrorMessages]=\"{\n password:'Password is required'\n }\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n <div class=\"pwdWrapper\"> \n <p clas=\"mb-0\"> <a [routerLink]=\"forgetPasswordLink\" class=\"{{forgetPasswordClass}}\">Forgot password</a></p>\n </div>\n </div>\n <lib-button \n [buttonClass]=\"btnClass\"\n [color]=\"btnColor\"\n [border]=\"btnBorder\"\n [borderRadius]=\"btnBorderRadius\"\n [bgColor]=\"btnBgColor\"\n [pd]=\"btnPd\"\n [text]=\"btnText\" \n type=\"submit\" \n [disabled]=\"!this.checkForm()\"\n ></lib-button>\n </div>\n <div> \n <p *ngIf=\"requestAccessLink\">\n <a [routerLink]=\"requestAccessLink\" class=\"{{requestAccessClass}}\">Click here to request user access</a>\n </p>\n <div> \n <div *ngIf=\"AuthMechanisms !== null\"> \n <verben-o-auth \n [authMechanisms]=\"AuthMechanisms\"\n ></verben-o-auth>\n </div>\n <p class=\"{{createAccountClass}}\" *ngIf=\"createAccountLink\">\n Don't have an account?\n <a [routerLink]=\"createAccountLink\" class=\"{{createAccountLinkClass}}\">Create an account</a>\n </p>\n </div>\n </div>\n </form>\n </section>\n ", styles: ["a{text-decoration:underline}.flexWrapper{display:flex;flex-direction:column;gap:20px;margin-top:12px}.formWrapper{display:flex;flex-direction:column;gap:20px}.pwdWrapper{display:flex;justify-content:flex-end;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "component", type: i3.VerbenaInputComponent, selector: "verbena-input", inputs: ["label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: OAuthComponent, selector: "verben-o-auth", inputs: ["authMechanisms"], outputs: ["emitMechanismFn"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["text", "color", "border", "borderRadius", "bgColor", "width", "pd", "buttonClass", "disabled"], outputs: ["buttonClick"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
|
|
1356
1357
|
}
|
|
1357
1358
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SignInComponent, decorators: [{
|
|
1358
1359
|
type: Component,
|
|
1359
|
-
args: [{ selector: 'verben-sign-in', template: "<section\n[ngStyle]=\"styles\"\nclass=\"{{ customClass }}\"\n>\n <h2 class=\"{{headlingClass}}\">{{headlingText}}</h2>\n <form [formGroup]=\"loginForm\" (ngSubmit)=\"submit('InApp')\" class=\"flexWrapper\"> \n <div class=\"formWrapper\" *ngIf=\"showform\"> \n <verbena-input\n [label]=\"'Email'\"\n [labelColor]=\"inputLabelColor\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'email'\"\n formControlName=\"Email\"\n [showBorder]=\"true\"\n [bgColor]=\"inputBgColor\"\n [border]=\"inputBorder\"\n [borderRadius]=\"inputBorderRadius\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n <div> \n <verbena-input\n [label]=\"'Password'\"\n [labelColor]=\"inputLabelColor\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'password'\"\n formControlName=\"Password\"\n [showBorder]=\"true\"\n [bgColor]=\"inputBgColor\"\n [border]=\"inputBorder\"\n [borderRadius]=\"inputBorderRadius\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n [passwordToggle]=\"true\"\n [passLength]=\"5\"\n [customErrorMessages]=\"{\n password:'Password is required'\n }\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n <div class=\"pwdWrapper\"> \n <p clas=\"mb-0\"> <a [routerLink]=\"forgetPasswordLink\" class=\"{{forgetPasswordClass}}\">Forgot password</a></p>\n </div>\n </div>\n <lib-button \n [buttonClass]=\"btnClass\"\n [color]=\"btnColor\"\n [border]=\"btnBorder\"\n [borderRadius]=\"btnBorderRadius\"\n [bgColor]=\"btnBgColor\"\n [pd]=\"btnPd\"\n [text]=\"btnText\" \n type=\"submit\" \n [
|
|
1360
|
+
args: [{ selector: 'verben-sign-in', template: "<section\n[ngStyle]=\"styles\"\nclass=\"{{ customClass }}\"\n>\n <h2 class=\"{{headlingClass}}\">{{headlingText}}</h2>\n <form [formGroup]=\"loginForm\" (ngSubmit)=\"submit('InApp')\" class=\"flexWrapper\"> \n <div class=\"formWrapper\" *ngIf=\"showform\"> \n <verbena-input\n [label]=\"'Email'\"\n [labelColor]=\"inputLabelColor\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'email'\"\n formControlName=\"Email\"\n [showBorder]=\"true\"\n [bgColor]=\"inputBgColor\"\n [border]=\"inputBorder\"\n [borderRadius]=\"inputBorderRadius\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n <div> \n <verbena-input\n [label]=\"'Password'\"\n [labelColor]=\"inputLabelColor\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'password'\"\n formControlName=\"Password\"\n [showBorder]=\"true\"\n [bgColor]=\"inputBgColor\"\n [border]=\"inputBorder\"\n [borderRadius]=\"inputBorderRadius\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n [passwordToggle]=\"true\"\n [passLength]=\"5\"\n [customErrorMessages]=\"{\n password:'Password is required'\n }\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n <div class=\"pwdWrapper\"> \n <p clas=\"mb-0\"> <a [routerLink]=\"forgetPasswordLink\" class=\"{{forgetPasswordClass}}\">Forgot password</a></p>\n </div>\n </div>\n <lib-button \n [buttonClass]=\"btnClass\"\n [color]=\"btnColor\"\n [border]=\"btnBorder\"\n [borderRadius]=\"btnBorderRadius\"\n [bgColor]=\"btnBgColor\"\n [pd]=\"btnPd\"\n [text]=\"btnText\" \n type=\"submit\" \n [disabled]=\"!this.checkForm()\"\n ></lib-button>\n </div>\n <div> \n <p *ngIf=\"requestAccessLink\">\n <a [routerLink]=\"requestAccessLink\" class=\"{{requestAccessClass}}\">Click here to request user access</a>\n </p>\n <div> \n <div *ngIf=\"AuthMechanisms !== null\"> \n <verben-o-auth \n [authMechanisms]=\"AuthMechanisms\"\n ></verben-o-auth>\n </div>\n <p class=\"{{createAccountClass}}\" *ngIf=\"createAccountLink\">\n Don't have an account?\n <a [routerLink]=\"createAccountLink\" class=\"{{createAccountLinkClass}}\">Create an account</a>\n </p>\n </div>\n </div>\n </form>\n </section>\n ", styles: ["a{text-decoration:underline}.flexWrapper{display:flex;flex-direction:column;gap:20px;margin-top:12px}.formWrapper{display:flex;flex-direction:column;gap:20px}.pwdWrapper{display:flex;justify-content:flex-end;cursor:pointer}\n"] }]
|
|
1360
1361
|
}], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: HttpWebRequestService }, { type: UtilService }, { type: EnvironmentService }, { type: i1$2.ActivatedRoute }], propDecorators: { headlingText: [{
|
|
1361
1362
|
type: Input
|
|
1362
1363
|
}], width: [{
|
|
@@ -1472,9 +1473,10 @@ class OtpInputComponent {
|
|
|
1472
1473
|
return this.otpForm.get('otpArray');
|
|
1473
1474
|
}
|
|
1474
1475
|
handleInput(event, index) {
|
|
1475
|
-
|
|
1476
|
+
let value = event.target.value;
|
|
1476
1477
|
// /\d/.test(value)
|
|
1477
1478
|
if (value.length > 0) {
|
|
1479
|
+
value = value.toUpperCase();
|
|
1478
1480
|
this.otpArray.at(index).setValue(value);
|
|
1479
1481
|
if (index < this.length - 1) {
|
|
1480
1482
|
this.focusNextInput(index);
|
|
@@ -1495,6 +1497,16 @@ class OtpInputComponent {
|
|
|
1495
1497
|
}
|
|
1496
1498
|
}
|
|
1497
1499
|
}
|
|
1500
|
+
handlePaste(event) {
|
|
1501
|
+
event.preventDefault();
|
|
1502
|
+
const pastedData = (event.clipboardData?.getData('text') || '').toUpperCase();
|
|
1503
|
+
const validData = pastedData.slice(0, this.length);
|
|
1504
|
+
validData.split('').forEach((char, index) => {
|
|
1505
|
+
this.otpArray.at(index).setValue(char);
|
|
1506
|
+
});
|
|
1507
|
+
const nextIndex = validData.length < this.length ? validData.length : this.length - 1;
|
|
1508
|
+
this.focusNextInput(nextIndex - 1);
|
|
1509
|
+
}
|
|
1498
1510
|
focusNextInput(index) {
|
|
1499
1511
|
const nextInput = document.getElementById(`otp-input-${index + 1}`);
|
|
1500
1512
|
nextInput?.focus();
|
|
@@ -1508,11 +1520,11 @@ class OtpInputComponent {
|
|
|
1508
1520
|
this.otpChange.emit(otp);
|
|
1509
1521
|
}
|
|
1510
1522
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OtpInputComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
1511
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: OtpInputComponent, selector: "verben-otp-input", inputs: { length: "length", otpClass: "otpClass" }, outputs: { otpChange: "otpChange" }, ngImport: i0, template: "<form [formGroup]=\"otpForm\" >\n <div formArrayName=\"otpArray\" class=\"otp-container\">\n <input\n *ngFor=\"let control of otpArray.controls; let i = index\"\n [id]=\"'otp-input-' + i\"\n class=\"otp-input {{otpClass}}\"\n maxlength=\"1\"\n (input)=\"handleInput($event, i)\"\n (keydown)=\"handleKeydown($event, i)\"\n [formControlName]=\"i\"\n type=\"text\"\n />\n </div>\n</form>\n", styles: [".otp-container{display:flex;gap:15px}.otp-input{width:50px;height:46px;text-align:center;font-size:1.5rem;border:1px solid #66666658;border-radius:12px}.otp-input:focus{border-color:#ffe681;outline:none}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }] });
|
|
1523
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: OtpInputComponent, selector: "verben-otp-input", inputs: { length: "length", otpClass: "otpClass" }, outputs: { otpChange: "otpChange" }, ngImport: i0, template: "<form [formGroup]=\"otpForm\" >\n <div formArrayName=\"otpArray\" class=\"otp-container\">\n <input\n *ngFor=\"let control of otpArray.controls; let i = index\"\n [id]=\"'otp-input-' + i\"\n class=\"otp-input {{otpClass}}\"\n maxlength=\"1\"\n (input)=\"handleInput($event, i)\"\n (keydown)=\"handleKeydown($event, i)\"\n (paste)=\"handlePaste($event)\"\n [formControlName]=\"i\"\n type=\"text\"\n />\n </div>\n</form>\n", styles: [".otp-container{display:flex;gap:15px}.otp-input{width:50px;height:46px;text-align:center;font-size:1.5rem;border:1px solid #66666658;border-radius:12px}.otp-input:focus{border-color:#ffe681;outline:none}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }] });
|
|
1512
1524
|
}
|
|
1513
1525
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OtpInputComponent, decorators: [{
|
|
1514
1526
|
type: Component,
|
|
1515
|
-
args: [{ selector: 'verben-otp-input', template: "<form [formGroup]=\"otpForm\" >\n <div formArrayName=\"otpArray\" class=\"otp-container\">\n <input\n *ngFor=\"let control of otpArray.controls; let i = index\"\n [id]=\"'otp-input-' + i\"\n class=\"otp-input {{otpClass}}\"\n maxlength=\"1\"\n (input)=\"handleInput($event, i)\"\n (keydown)=\"handleKeydown($event, i)\"\n [formControlName]=\"i\"\n type=\"text\"\n />\n </div>\n</form>\n", styles: [".otp-container{display:flex;gap:15px}.otp-input{width:50px;height:46px;text-align:center;font-size:1.5rem;border:1px solid #66666658;border-radius:12px}.otp-input:focus{border-color:#ffe681;outline:none}\n"] }]
|
|
1527
|
+
args: [{ selector: 'verben-otp-input', template: "<form [formGroup]=\"otpForm\" >\n <div formArrayName=\"otpArray\" class=\"otp-container\">\n <input\n *ngFor=\"let control of otpArray.controls; let i = index\"\n [id]=\"'otp-input-' + i\"\n class=\"otp-input {{otpClass}}\"\n maxlength=\"1\"\n (input)=\"handleInput($event, i)\"\n (keydown)=\"handleKeydown($event, i)\"\n (paste)=\"handlePaste($event)\"\n [formControlName]=\"i\"\n type=\"text\"\n />\n </div>\n</form>\n", styles: [".otp-container{display:flex;gap:15px}.otp-input{width:50px;height:46px;text-align:center;font-size:1.5rem;border:1px solid #66666658;border-radius:12px}.otp-input:focus{border-color:#ffe681;outline:none}\n"] }]
|
|
1516
1528
|
}], ctorParameters: () => [{ type: i1$1.FormBuilder }], propDecorators: { length: [{
|
|
1517
1529
|
type: Input
|
|
1518
1530
|
}], otpClass: [{
|
|
@@ -1669,7 +1681,7 @@ class TwoFactorAuthOtpComponent {
|
|
|
1669
1681
|
};
|
|
1670
1682
|
}
|
|
1671
1683
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TwoFactorAuthOtpComponent, deps: [{ token: i1$1.FormBuilder }, { token: HttpWebRequestService }, { token: UtilService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1672
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TwoFactorAuthOtpComponent, selector: "verben-auth-otp", inputs: { customClass: "customClass", headlingClass: "headlingClass", headlingText: "headlingText", paragraphClass: "paragraphClass", resendClass: "resendClass", width: "width", maxWidth: "maxWidth", margin: "margin", pd: "pd", bgColor: "bgColor", boxShadow: "boxShadow", border: "border", borderRadius: "borderRadius", textColor: "textColor", height: "height", length: "length", otpClass: "otpClass", resendOtpData: "resendOtpData", User: "User", OtpData: "OtpData", btnClass: "btnClass", btnBgColor: "btnBgColor", btnColor: "btnColor", btnBorder: "btnBorder", btnBorderRadius: "btnBorderRadius", btnPd: "btnPd", btnText: "btnText" }, outputs: { buttonClick: "buttonClick", otpChange: "otpChange", onSubmitEnd: "onSubmitEnd", resend: "resend" }, ngImport: i0, template: "<section\n[ngStyle]=\"styles\"\nclass=\"{{ customClass }}\"\n>\n <h3 class=\"{{headlingClass}}\">{{headlingText}}</h3>\n <div class=\"otpWrapper\"> \n <p class=\"{{paragraphClass}}\">Enter the {{length}} digit code sent to you</p>\n <verben-otp-input \n [length]=\"length\" \n (otpChange)=\"onOtpChange($event)\"\n [otpClass]=\"otpClass\"\n ></verben-otp-input>\n </div>\n <lib-button \n [buttonClass]=\"btnClass\"\n [color]=\"btnColor\"\n [border]=\"btnBorder\"\n [borderRadius]=\"btnBorderRadius\"\n [bgColor]=\"btnBgColor\"\n [pd]=\"btnPd\"\n [text]=\"btnText\" \n (buttonClick)=\"submitData()\"\n [disabled]=\"!otpForm.valid\"\n ></lib-button>\n <p class=\"resendWrapper\">\n Didn\u2019t get a code?\n <a class=\"{{resendClass}}\" (click)=\"resendOtp()\">Resend</a>\n </p>\n \n</section>", styles: [".otpWrapper{margin-bottom:20px;margin-top:15px}.resendWrapper{margin-top:10px;margin-bottom:0!important}\n"], dependencies: [{ kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["text", "color", "border", "borderRadius", "bgColor", "width", "pd", "buttonClass", "disabled"
|
|
1684
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TwoFactorAuthOtpComponent, selector: "verben-auth-otp", inputs: { customClass: "customClass", headlingClass: "headlingClass", headlingText: "headlingText", paragraphClass: "paragraphClass", resendClass: "resendClass", width: "width", maxWidth: "maxWidth", margin: "margin", pd: "pd", bgColor: "bgColor", boxShadow: "boxShadow", border: "border", borderRadius: "borderRadius", textColor: "textColor", height: "height", length: "length", otpClass: "otpClass", resendOtpData: "resendOtpData", User: "User", OtpData: "OtpData", btnClass: "btnClass", btnBgColor: "btnBgColor", btnColor: "btnColor", btnBorder: "btnBorder", btnBorderRadius: "btnBorderRadius", btnPd: "btnPd", btnText: "btnText" }, outputs: { buttonClick: "buttonClick", otpChange: "otpChange", onSubmitEnd: "onSubmitEnd", resend: "resend" }, ngImport: i0, template: "<section\n[ngStyle]=\"styles\"\nclass=\"{{ customClass }}\"\n>\n <h3 class=\"{{headlingClass}}\">{{headlingText}}</h3>\n <div class=\"otpWrapper\"> \n <p class=\"{{paragraphClass}}\">Enter the {{length}} digit code sent to you</p>\n <verben-otp-input \n [length]=\"length\" \n (otpChange)=\"onOtpChange($event)\"\n [otpClass]=\"otpClass\"\n ></verben-otp-input>\n </div>\n <lib-button \n [buttonClass]=\"btnClass\"\n [color]=\"btnColor\"\n [border]=\"btnBorder\"\n [borderRadius]=\"btnBorderRadius\"\n [bgColor]=\"btnBgColor\"\n [pd]=\"btnPd\"\n [text]=\"btnText\" \n (buttonClick)=\"submitData()\"\n [disabled]=\"!otpForm.valid\"\n ></lib-button>\n <p class=\"resendWrapper\">\n Didn\u2019t get a code?\n <a class=\"{{resendClass}}\" (click)=\"resendOtp()\">Resend</a>\n </p>\n \n</section>", styles: [".otpWrapper{margin-bottom:20px;margin-top:15px}.resendWrapper{margin-top:10px;margin-bottom:0!important}\n"], dependencies: [{ kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["text", "color", "border", "borderRadius", "bgColor", "width", "pd", "buttonClass", "disabled"], outputs: ["buttonClick"] }, { kind: "component", type: OtpInputComponent, selector: "verben-otp-input", inputs: ["length", "otpClass"], outputs: ["otpChange"] }] });
|
|
1673
1685
|
}
|
|
1674
1686
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TwoFactorAuthOtpComponent, decorators: [{
|
|
1675
1687
|
type: Component,
|
|
@@ -1898,7 +1910,7 @@ class MailComponent {
|
|
|
1898
1910
|
};
|
|
1899
1911
|
}
|
|
1900
1912
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1901
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MailComponent, selector: "verben-mail-message", inputs: { customClass: "customClass", headlingClass: "headlingClass", width: "width", maxWidth: "maxWidth", margin: "margin", pd: "pd", bgColor: "bgColor", boxShadow: "boxShadow", border: "border", borderRadius: "borderRadius", textColor: "textColor", height: "height" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<section\n[ngStyle]=\"styles\"\nclass=\"{{ customClass }}\"\n>\n <h3 class=\"{{headlingClass}}\">Your e-mail has been verified!</h3>\n <lib-button \n text=\"Login\" \n buttonClass=\"\"\n (click)=\"goToLogin()\"\n ></lib-button> \n</section>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["text", "color", "border", "borderRadius", "bgColor", "width", "pd", "buttonClass", "disabled"
|
|
1913
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MailComponent, selector: "verben-mail-message", inputs: { customClass: "customClass", headlingClass: "headlingClass", width: "width", maxWidth: "maxWidth", margin: "margin", pd: "pd", bgColor: "bgColor", boxShadow: "boxShadow", border: "border", borderRadius: "borderRadius", textColor: "textColor", height: "height" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<section\n[ngStyle]=\"styles\"\nclass=\"{{ customClass }}\"\n>\n <h3 class=\"{{headlingClass}}\">Your e-mail has been verified!</h3>\n <lib-button \n text=\"Login\" \n buttonClass=\"\"\n (click)=\"goToLogin()\"\n ></lib-button> \n</section>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["text", "color", "border", "borderRadius", "bgColor", "width", "pd", "buttonClass", "disabled"], outputs: ["buttonClick"] }] });
|
|
1902
1914
|
}
|
|
1903
1915
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MailComponent, decorators: [{
|
|
1904
1916
|
type: Component,
|
|
@@ -3926,46 +3938,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
3926
3938
|
|
|
3927
3939
|
class AuthCallbackComponent {
|
|
3928
3940
|
router;
|
|
3941
|
+
route;
|
|
3929
3942
|
code = '';
|
|
3930
3943
|
previousUrl = '';
|
|
3944
|
+
type = '';
|
|
3931
3945
|
redirectText;
|
|
3932
|
-
|
|
3933
|
-
height = 40;
|
|
3934
|
-
color = 'black';
|
|
3935
|
-
constructor(router) {
|
|
3946
|
+
constructor(router, route) {
|
|
3936
3947
|
this.router = router;
|
|
3948
|
+
this.route = route;
|
|
3937
3949
|
}
|
|
3938
3950
|
ngOnInit() {
|
|
3951
|
+
this.getType();
|
|
3939
3952
|
this.handleRedirect();
|
|
3940
3953
|
}
|
|
3954
|
+
getType() {
|
|
3955
|
+
const data = localStorage.getItem('type');
|
|
3956
|
+
if (data) {
|
|
3957
|
+
this.type = JSON.parse(data);
|
|
3958
|
+
}
|
|
3959
|
+
}
|
|
3941
3960
|
handleRedirect() {
|
|
3942
3961
|
const params = new URLSearchParams(window.location.search);
|
|
3943
3962
|
const code = params.get('code');
|
|
3944
3963
|
const stateParam = params.get('state');
|
|
3964
|
+
// const type = params.get('type');
|
|
3945
3965
|
if (code && stateParam) {
|
|
3946
3966
|
try {
|
|
3947
3967
|
const state = JSON.parse(decodeURIComponent(stateParam));
|
|
3948
3968
|
const returnTo = state.returnTo || '/';
|
|
3949
|
-
|
|
3969
|
+
const queryParams = { code };
|
|
3970
|
+
if (this.type) {
|
|
3971
|
+
queryParams.type = this.type;
|
|
3972
|
+
}
|
|
3973
|
+
this.router.navigate([returnTo], { queryParams });
|
|
3974
|
+
// this.router.navigate([returnTo], { queryParams: { code } });
|
|
3950
3975
|
}
|
|
3951
3976
|
catch (e) {
|
|
3952
3977
|
const msg = e;
|
|
3953
3978
|
}
|
|
3954
3979
|
}
|
|
3955
3980
|
}
|
|
3956
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuthCallbackComponent, deps: [{ token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
3957
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AuthCallbackComponent, selector: "verben-auth-callback", inputs: { redirectText: "redirectText"
|
|
3981
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuthCallbackComponent, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
|
|
3982
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AuthCallbackComponent, selector: "verben-auth-callback", inputs: { redirectText: "redirectText" }, ngImport: i0, template: "<section class=\"wrapper\"> \n <div class=\"flexWrapper\"> \n <p class=\"{{redirectText}}\">Redirecting ...</p>\n <div class=\"loader\"></div>\n </div>\n</section>", styles: [".wrapper{width:100%;min-height:100%;display:flex;align-items:center;justify-content:center}.flexWrapper{display:flex;align-items:center;justify-content:center}.loader{border:2px solid white;border-radius:50%;border-top:2px solid black;width:40px;height:40px;-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] });
|
|
3958
3983
|
}
|
|
3959
3984
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuthCallbackComponent, decorators: [{
|
|
3960
3985
|
type: Component,
|
|
3961
3986
|
args: [{ selector: 'verben-auth-callback', template: "<section class=\"wrapper\"> \n <div class=\"flexWrapper\"> \n <p class=\"{{redirectText}}\">Redirecting ...</p>\n <div class=\"loader\"></div>\n </div>\n</section>", styles: [".wrapper{width:100%;min-height:100%;display:flex;align-items:center;justify-content:center}.flexWrapper{display:flex;align-items:center;justify-content:center}.loader{border:2px solid white;border-radius:50%;border-top:2px solid black;width:40px;height:40px;-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
3962
|
-
}], ctorParameters: () => [{ type: i1$2.Router }], propDecorators: { redirectText: [{
|
|
3963
|
-
type: Input
|
|
3964
|
-
}], width: [{
|
|
3965
|
-
type: Input
|
|
3966
|
-
}], height: [{
|
|
3967
|
-
type: Input
|
|
3968
|
-
}], color: [{
|
|
3987
|
+
}], ctorParameters: () => [{ type: i1$2.Router }, { type: i1$2.ActivatedRoute }], propDecorators: { redirectText: [{
|
|
3969
3988
|
type: Input
|
|
3970
3989
|
}] } });
|
|
3971
3990
|
|