verben-authentication-ui 0.3.2 → 0.3.4
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/o-auth/o-auth.component.mjs +27 -7
- package/esm2022/lib/components/reset-password/reset-password.component.mjs +1 -1
- package/esm2022/lib/components/sign-in/sign-in.component.mjs +32 -6
- 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 +31 -4
- package/esm2022/lib/components/user-request/user-request.component.mjs +3 -3
- package/esm2022/lib/models/auth-mechanism.mjs +8 -0
- package/esm2022/lib/models/resend-otp-data.mjs +2 -0
- package/esm2022/lib/services/http-web-request.service.mjs +8 -9
- package/fesm2022/verben-authentication-ui.mjs +100 -23
- package/fesm2022/verben-authentication-ui.mjs.map +1 -1
- package/lib/components/o-auth/o-auth.component.d.ts +11 -3
- package/lib/components/sign-in/sign-in.component.d.ts +6 -2
- package/lib/components/two-factor-auth-otp/two-factor-auth-otp.component.d.ts +5 -3
- package/lib/models/auth-mechanism.d.ts +13 -0
- package/lib/models/resend-otp-data.d.ts +8 -0
- package/lib/services/http-web-request.service.d.ts +2 -2
- package/package.json +1 -1
|
@@ -57,10 +57,9 @@ class HttpWebRequestService {
|
|
|
57
57
|
this.notificationService = notificationService;
|
|
58
58
|
this.isProd = this.envSvc.environment.production;
|
|
59
59
|
}
|
|
60
|
-
buildHeaders(
|
|
60
|
+
buildHeaders() {
|
|
61
61
|
return {
|
|
62
62
|
'Content-Type': 'application/json',
|
|
63
|
-
'APIKey': apiKey,
|
|
64
63
|
};
|
|
65
64
|
}
|
|
66
65
|
buildUrl(url, baseUrl) {
|
|
@@ -73,9 +72,9 @@ class HttpWebRequestService {
|
|
|
73
72
|
this.notificationService.error(msg, { timeout: 3000 });
|
|
74
73
|
return new ErrorResponse(msg);
|
|
75
74
|
}
|
|
76
|
-
request(method, url, body, baseUrl = this.envSvc.environment.AuthenticationAPI
|
|
75
|
+
request(method, url, body, baseUrl = this.envSvc.environment.AuthenticationAPI) {
|
|
77
76
|
const options = {
|
|
78
|
-
headers: this.buildHeaders(
|
|
77
|
+
headers: this.buildHeaders(),
|
|
79
78
|
};
|
|
80
79
|
const requestUrl = this.buildUrl(url, baseUrl);
|
|
81
80
|
switch (method) {
|
|
@@ -95,11 +94,11 @@ class HttpWebRequestService {
|
|
|
95
94
|
return this.http.delete(requestUrl, options);
|
|
96
95
|
}
|
|
97
96
|
}
|
|
98
|
-
get(url, baseUrl
|
|
99
|
-
return this.request('GET', url, undefined, baseUrl
|
|
97
|
+
get(url, baseUrl) {
|
|
98
|
+
return this.request('GET', url, undefined, baseUrl);
|
|
100
99
|
}
|
|
101
|
-
post(url, body, baseUrl
|
|
102
|
-
return this.request('POST', url, JSON.stringify(body), baseUrl
|
|
100
|
+
post(url, body, baseUrl) {
|
|
101
|
+
return this.request('POST', url, JSON.stringify(body), baseUrl);
|
|
103
102
|
}
|
|
104
103
|
postFile(url, formData, baseUrl) {
|
|
105
104
|
return new Promise((resolve) => this.http.post(this.buildUrl(url, baseUrl || this.envSvc.environment.AuthenticationAPI), formData).subscribe({
|
|
@@ -431,11 +430,11 @@ class UserRequestComponent {
|
|
|
431
430
|
}
|
|
432
431
|
}
|
|
433
432
|
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 }], target: i0.ɵɵFactoryTarget.Component });
|
|
434
|
-
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", 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=\"Email\"\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 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 [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 <div class=\"flex justify-center items-center OR\">\n <span></span>\n OR\n <span></span>\n </div>\n\n <verbena-button\n svg=\"google-logo\"\n [svgHeight]=\"24\"\n [svgWidth]=\"24\"\n (click)=\"handleGoogleAuth()\"\n text=\"Continue with Google\"\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]\"\n ></verbena-button>\n\n <verbena-button\n svg=\"apple-logo\"\n (click)=\"handleAppleAuth()\"\n [svgHeight]=\"24\"\n [svgWidth]=\"24\"\n text=\"Continue with Apple\"\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 ></verbena-button>\n </form>\n</section>\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: i2.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", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "component", type: i2.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: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
433
|
+
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", 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=\"Email\"\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 <div class=\"flex justify-center items-center OR\">\n <span></span>\n OR\n <span></span>\n </div>\n\n <verbena-button\n svg=\"google-logo\"\n [svgHeight]=\"24\"\n [svgWidth]=\"24\"\n (click)=\"handleGoogleAuth()\"\n text=\"Continue with Google\"\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]\"\n ></verbena-button>\n\n <verbena-button\n svg=\"apple-logo\"\n (click)=\"handleAppleAuth()\"\n [svgHeight]=\"24\"\n [svgWidth]=\"24\"\n text=\"Continue with Apple\"\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 ></verbena-button>\n </form>\n</section>\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: i2.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", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "component", type: i2.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: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
435
434
|
}
|
|
436
435
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserRequestComponent, decorators: [{
|
|
437
436
|
type: Component,
|
|
438
|
-
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=\"Email\"\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 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 [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 <div class=\"flex justify-center items-center OR\">\n <span></span>\n OR\n <span></span>\n </div>\n\n <verbena-button\n svg=\"google-logo\"\n [svgHeight]=\"24\"\n [svgWidth]=\"24\"\n (click)=\"handleGoogleAuth()\"\n text=\"Continue with Google\"\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]\"\n ></verbena-button>\n\n <verbena-button\n svg=\"apple-logo\"\n (click)=\"handleAppleAuth()\"\n [svgHeight]=\"24\"\n [svgWidth]=\"24\"\n text=\"Continue with Apple\"\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 ></verbena-button>\n </form>\n</section>\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"] }]
|
|
437
|
+
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=\"Email\"\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 <div class=\"flex justify-center items-center OR\">\n <span></span>\n OR\n <span></span>\n </div>\n\n <verbena-button\n svg=\"google-logo\"\n [svgHeight]=\"24\"\n [svgWidth]=\"24\"\n (click)=\"handleGoogleAuth()\"\n text=\"Continue with Google\"\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]\"\n ></verbena-button>\n\n <verbena-button\n svg=\"apple-logo\"\n (click)=\"handleAppleAuth()\"\n [svgHeight]=\"24\"\n [svgWidth]=\"24\"\n text=\"Continue with Apple\"\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 ></verbena-button>\n </form>\n</section>\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"] }]
|
|
439
438
|
}], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: HttpWebRequestService }, { type: UtilService }, { type: EnvironmentService }], propDecorators: { width: [{
|
|
440
439
|
type: Input
|
|
441
440
|
}], headingTitle: [{
|
|
@@ -692,23 +691,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
692
691
|
type: Output
|
|
693
692
|
}] } });
|
|
694
693
|
|
|
694
|
+
var MechanismType;
|
|
695
|
+
(function (MechanismType) {
|
|
696
|
+
MechanismType["InApp"] = "InApp";
|
|
697
|
+
MechanismType["Google"] = "Google";
|
|
698
|
+
MechanismType["Apple"] = "Apple";
|
|
699
|
+
MechanismType["MicrosoftAD"] = "MicrosoftAD";
|
|
700
|
+
})(MechanismType || (MechanismType = {}));
|
|
701
|
+
|
|
695
702
|
class OAuthComponent {
|
|
703
|
+
showGoogle = false;
|
|
704
|
+
showMicrosoft = false;
|
|
705
|
+
showApple = false;
|
|
706
|
+
authMechanisms = null;
|
|
707
|
+
microsoftClick = new EventEmitter();
|
|
696
708
|
googleClick = new EventEmitter();
|
|
697
709
|
appleClick = new EventEmitter();
|
|
710
|
+
ngOnInit() {
|
|
711
|
+
if (this.authMechanisms !== null) {
|
|
712
|
+
this.showMicrosoft = this.authMechanisms.some(item => item.AuthMechanism.includes(MechanismType.MicrosoftAD));
|
|
713
|
+
this.showGoogle = this.authMechanisms.some(item => item.AuthMechanism.includes(MechanismType.Google));
|
|
714
|
+
this.showApple = this.authMechanisms.some(item => item.AuthMechanism.includes(MechanismType.Apple));
|
|
715
|
+
}
|
|
716
|
+
}
|
|
717
|
+
oAuthWithMicrosoft() {
|
|
718
|
+
this.microsoftClick.emit();
|
|
719
|
+
}
|
|
698
720
|
oAuthWithGoogle() {
|
|
699
721
|
this.googleClick.emit();
|
|
700
722
|
}
|
|
701
|
-
;
|
|
702
723
|
oAuthWithApple() {
|
|
703
724
|
this.appleClick.emit();
|
|
704
725
|
}
|
|
705
726
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OAuthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
706
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: OAuthComponent, selector: "verben-o-auth", outputs: { googleClick: "googleClick", appleClick: "appleClick" }, ngImport: i0, template: "<section class=\"oauthWrapper\"> \n <div class=\"OrFlexWrapper\">\n <hr/>\n <span>OR</span>\n <hr/>\n </div>\n <verbena-button\n
|
|
727
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: OAuthComponent, selector: "verben-o-auth", inputs: { authMechanisms: "authMechanisms" }, outputs: { microsoftClick: "microsoftClick", googleClick: "googleClick", appleClick: "appleClick" }, ngImport: i0, template: "<section class=\"oauthWrapper\"> \n <div class=\"OrFlexWrapper\">\n <hr/>\n <span>OR</span>\n <hr/>\n </div>\n <span *ngIf=\"showMicrosoft\"> \n <verbena-button\n svg=\"microsoft-logo\"\n [svgHeight]=\"24\"\n [svgWidth]=\"24\"\n text=\"Continue with Microsoft\"\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)=\"oAuthWithMicrosoft()\"\n ></verbena-button>\n </span> \n\n <span *ngIf=\"showGoogle\"> \n <verbena-button\n svg=\"google-logo\"\n [svgHeight]=\"24\"\n [svgWidth]=\"24\"\n text=\"Continue with Google\"\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)=\"oAuthWithGoogle()\"\n ></verbena-button>\n </span>\n \n <span *ngIf=\"showApple\"> \n <verbena-button\n svg=\"apple-logo\"\n [svgHeight]=\"24\"\n [svgWidth]=\"24\"\n text=\"Continue with Apple\"\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)=\"oAuthWithApple()\"\n ></verbena-button>\n </span>\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}.OrFlexWrapper{display:flex;align-items:center;gap:8px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.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"] }] });
|
|
707
728
|
}
|
|
708
729
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OAuthComponent, decorators: [{
|
|
709
730
|
type: Component,
|
|
710
|
-
args: [{ selector: 'verben-o-auth', template: "<section class=\"oauthWrapper\"> \n <div class=\"OrFlexWrapper\">\n <hr/>\n <span>OR</span>\n <hr/>\n </div>\n <verbena-button\n
|
|
711
|
-
}], propDecorators: {
|
|
731
|
+
args: [{ selector: 'verben-o-auth', template: "<section class=\"oauthWrapper\"> \n <div class=\"OrFlexWrapper\">\n <hr/>\n <span>OR</span>\n <hr/>\n </div>\n <span *ngIf=\"showMicrosoft\"> \n <verbena-button\n svg=\"microsoft-logo\"\n [svgHeight]=\"24\"\n [svgWidth]=\"24\"\n text=\"Continue with Microsoft\"\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)=\"oAuthWithMicrosoft()\"\n ></verbena-button>\n </span> \n\n <span *ngIf=\"showGoogle\"> \n <verbena-button\n svg=\"google-logo\"\n [svgHeight]=\"24\"\n [svgWidth]=\"24\"\n text=\"Continue with Google\"\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)=\"oAuthWithGoogle()\"\n ></verbena-button>\n </span>\n \n <span *ngIf=\"showApple\"> \n <verbena-button\n svg=\"apple-logo\"\n [svgHeight]=\"24\"\n [svgWidth]=\"24\"\n text=\"Continue with Apple\"\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)=\"oAuthWithApple()\"\n ></verbena-button>\n </span>\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}.OrFlexWrapper{display:flex;align-items:center;gap:8px}\n"] }]
|
|
732
|
+
}], propDecorators: { authMechanisms: [{
|
|
733
|
+
type: Input
|
|
734
|
+
}], microsoftClick: [{
|
|
735
|
+
type: Output
|
|
736
|
+
}], googleClick: [{
|
|
712
737
|
type: Output
|
|
713
738
|
}], appleClick: [{
|
|
714
739
|
type: Output
|
|
@@ -853,7 +878,7 @@ class SignUpComponent {
|
|
|
853
878
|
};
|
|
854
879
|
}
|
|
855
880
|
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 });
|
|
856
|
-
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: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.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: i2.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", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "directive", type: i6.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", outputs: ["googleClick", "appleClick"] }, { 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"] }] });
|
|
881
|
+
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: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.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: i2.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", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "directive", type: i6.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: ["microsoftClick", "googleClick", "appleClick"] }, { 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"] }] });
|
|
857
882
|
}
|
|
858
883
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SignUpComponent, decorators: [{
|
|
859
884
|
type: Component,
|
|
@@ -1009,9 +1034,11 @@ class SignInComponent {
|
|
|
1009
1034
|
formSubmit = new EventEmitter();
|
|
1010
1035
|
onSubmitEnd = new EventEmitter();
|
|
1011
1036
|
googleClick = new EventEmitter();
|
|
1037
|
+
microsoftClick = new EventEmitter();
|
|
1012
1038
|
appleClick = new EventEmitter();
|
|
1013
1039
|
tenantDetails = null;
|
|
1014
1040
|
AuthMechanisms = null;
|
|
1041
|
+
showform = false;
|
|
1015
1042
|
loginForm;
|
|
1016
1043
|
apiKey;
|
|
1017
1044
|
secret;
|
|
@@ -1040,6 +1067,15 @@ class SignInComponent {
|
|
|
1040
1067
|
const res = await this.server.get(`Tenant/GetTenantConfigByKey/${this.apiKey}`);
|
|
1041
1068
|
this.tenantDetails = res;
|
|
1042
1069
|
this.AuthMechanisms = this.tenantDetails?.AuthMechanisms;
|
|
1070
|
+
if (!this.tenantDetails?.AuthMechanism && this.tenantDetails?.AuthMechanism !== MechanismType.InApp) {
|
|
1071
|
+
this.showform = false;
|
|
1072
|
+
}
|
|
1073
|
+
else if (this.tenantDetails?.AuthMechanism === MechanismType.InApp) {
|
|
1074
|
+
this.showform = true;
|
|
1075
|
+
}
|
|
1076
|
+
else if (this.AuthMechanisms !== null) {
|
|
1077
|
+
this.showform = this.AuthMechanisms.some(item => item.AuthMechanism.includes(MechanismType.InApp));
|
|
1078
|
+
}
|
|
1043
1079
|
}
|
|
1044
1080
|
checkForm() {
|
|
1045
1081
|
return this.loginForm.valid;
|
|
@@ -1053,7 +1089,7 @@ class SignInComponent {
|
|
|
1053
1089
|
Password: this.loginForm.controls['Password'].value,
|
|
1054
1090
|
LoginType: this.tenantDetails?.AuthMechanism,
|
|
1055
1091
|
APIKey: this.apiKey,
|
|
1056
|
-
Secrete:
|
|
1092
|
+
Secrete: this.secret
|
|
1057
1093
|
};
|
|
1058
1094
|
this.formSubmit.emit(data);
|
|
1059
1095
|
this.utilService.sendBI(true);
|
|
@@ -1068,10 +1104,22 @@ class SignInComponent {
|
|
|
1068
1104
|
}
|
|
1069
1105
|
}
|
|
1070
1106
|
handleGoogleAuth() {
|
|
1071
|
-
this.
|
|
1107
|
+
if (this.AuthMechanisms !== null) {
|
|
1108
|
+
const data = this.AuthMechanisms.filter(item => item.AuthMechanism === MechanismType.Google);
|
|
1109
|
+
this.googleClick.emit();
|
|
1110
|
+
}
|
|
1111
|
+
}
|
|
1112
|
+
handleMicrosoft() {
|
|
1113
|
+
if (this.AuthMechanisms !== null) {
|
|
1114
|
+
const data = this.AuthMechanisms.filter(item => item.AuthMechanism === MechanismType.MicrosoftAD);
|
|
1115
|
+
this.microsoftClick.emit();
|
|
1116
|
+
}
|
|
1072
1117
|
}
|
|
1073
1118
|
handleAppleAuth() {
|
|
1074
|
-
this.
|
|
1119
|
+
if (this.AuthMechanisms !== null) {
|
|
1120
|
+
const data = this.AuthMechanisms.filter(item => item.AuthMechanism === MechanismType.Apple);
|
|
1121
|
+
this.appleClick.emit();
|
|
1122
|
+
}
|
|
1075
1123
|
}
|
|
1076
1124
|
get styles() {
|
|
1077
1125
|
return {
|
|
@@ -1088,11 +1136,11 @@ class SignInComponent {
|
|
|
1088
1136
|
};
|
|
1089
1137
|
}
|
|
1090
1138
|
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 }], target: i0.ɵɵFactoryTarget.Component });
|
|
1091
|
-
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", googleClick: "googleClick", appleClick: "appleClick" }, ngImport: i0, template: "<section\n[ngStyle]=\"styles\"\nclass=\"{{ customClass }}\"\n>\n <h2 class=\"{{headlingClass}}\">{{headlingText}}</h2>\n <form [formGroup]=\"loginForm\" (ngSubmit)=\"submit()\" class=\"flexWrapper\"> \n
|
|
1139
|
+
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", 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()\" 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 [customErrorMessages]=\"{\n password:'length must be 5 characters'\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 (googleClick)=\"handleGoogleAuth()\"\n (appleClick)=\"handleAppleAuth()\"\n (microsoftClick)=\"handleMicrosoft()\"\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: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.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: i2.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", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "directive", type: i6.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: ["microsoftClick", "googleClick", "appleClick"] }, { 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"] }] });
|
|
1092
1140
|
}
|
|
1093
1141
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SignInComponent, decorators: [{
|
|
1094
1142
|
type: Component,
|
|
1095
|
-
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()\" class=\"flexWrapper\"> \n
|
|
1143
|
+
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()\" 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 [customErrorMessages]=\"{\n password:'length must be 5 characters'\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 (googleClick)=\"handleGoogleAuth()\"\n (appleClick)=\"handleAppleAuth()\"\n (microsoftClick)=\"handleMicrosoft()\"\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"] }]
|
|
1096
1144
|
}], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: HttpWebRequestService }, { type: UtilService }, { type: EnvironmentService }], propDecorators: { headlingText: [{
|
|
1097
1145
|
type: Input
|
|
1098
1146
|
}], width: [{
|
|
@@ -1163,6 +1211,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1163
1211
|
type: Output
|
|
1164
1212
|
}], googleClick: [{
|
|
1165
1213
|
type: Output
|
|
1214
|
+
}], microsoftClick: [{
|
|
1215
|
+
type: Output
|
|
1166
1216
|
}], appleClick: [{
|
|
1167
1217
|
type: Output
|
|
1168
1218
|
}] } });
|
|
@@ -1272,6 +1322,14 @@ class TwoFactorAuthOtpComponent {
|
|
|
1272
1322
|
height = 'auto';
|
|
1273
1323
|
length = 6;
|
|
1274
1324
|
otpClass = '';
|
|
1325
|
+
resendOtpData = {
|
|
1326
|
+
MailAddress: "verbena@gmail.com",
|
|
1327
|
+
Password: "Default",
|
|
1328
|
+
LoginType: "InApp",
|
|
1329
|
+
APIKey: "PDLTC6",
|
|
1330
|
+
Secrete: "$White360$",
|
|
1331
|
+
RedirectUri: "/auth/otp"
|
|
1332
|
+
};
|
|
1275
1333
|
User = {
|
|
1276
1334
|
Code: '024',
|
|
1277
1335
|
TenantId: '53b1c579bdf3de74f76bdac9',
|
|
@@ -1356,8 +1414,25 @@ class TwoFactorAuthOtpComponent {
|
|
|
1356
1414
|
}
|
|
1357
1415
|
}
|
|
1358
1416
|
}
|
|
1359
|
-
resendOtp() {
|
|
1360
|
-
|
|
1417
|
+
async resendOtp() {
|
|
1418
|
+
const data = {
|
|
1419
|
+
MailAddress: this.resendOtpData?.MailAddress,
|
|
1420
|
+
Password: this.resendOtpData?.Password,
|
|
1421
|
+
LoginType: this.resendOtpData?.LoginType,
|
|
1422
|
+
APIKey: this.resendOtpData?.APIKey,
|
|
1423
|
+
Secrete: this.resendOtpData?.Secrete,
|
|
1424
|
+
RedirectUri: this.resendOtpData?.RedirectUri
|
|
1425
|
+
};
|
|
1426
|
+
this.utilService.sendBI(true);
|
|
1427
|
+
const res = await this.server.post(`Authentication/ResendOTP`, data);
|
|
1428
|
+
this.utilService.sendBI(false);
|
|
1429
|
+
if (res instanceof ErrorResponse) {
|
|
1430
|
+
this.resend.emit(res);
|
|
1431
|
+
}
|
|
1432
|
+
else {
|
|
1433
|
+
var result = res;
|
|
1434
|
+
this.resend.emit(result);
|
|
1435
|
+
}
|
|
1361
1436
|
}
|
|
1362
1437
|
get styles() {
|
|
1363
1438
|
return {
|
|
@@ -1374,7 +1449,7 @@ class TwoFactorAuthOtpComponent {
|
|
|
1374
1449
|
};
|
|
1375
1450
|
}
|
|
1376
1451
|
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 });
|
|
1377
|
-
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", 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: i1$2.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"] }] });
|
|
1452
|
+
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: i1$2.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"] }] });
|
|
1378
1453
|
}
|
|
1379
1454
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TwoFactorAuthOtpComponent, decorators: [{
|
|
1380
1455
|
type: Component,
|
|
@@ -1413,6 +1488,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1413
1488
|
type: Input
|
|
1414
1489
|
}], otpClass: [{
|
|
1415
1490
|
type: Input
|
|
1491
|
+
}], resendOtpData: [{
|
|
1492
|
+
type: Input
|
|
1416
1493
|
}], User: [{
|
|
1417
1494
|
type: Input
|
|
1418
1495
|
}], OtpData: [{
|