verben-authentication-ui 0.0.1 → 0.0.3
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/mail/mail.component.mjs +69 -0
- package/esm2022/lib/components/mail/mail.module.mjs +21 -0
- package/esm2022/lib/components/otp-input/otp-input.component.mjs +68 -0
- package/esm2022/lib/components/otp-input/otp-input.module.mjs +23 -0
- package/esm2022/lib/components/sign-in/sign-in.component.mjs +120 -0
- package/esm2022/lib/components/sign-in/sign-in.module.mjs +24 -0
- package/esm2022/lib/components/sign-up/sign-up.component.mjs +7 -4
- package/esm2022/lib/components/two-factor-auth-otp/two-factor-auth-otp.component.mjs +100 -0
- package/esm2022/lib/components/two-factor-auth-otp/two-factor-auth-otp.module.mjs +22 -0
- package/esm2022/lib/components/two-factor-auth-setup/two-factor-auth-setup.component.mjs +87 -0
- package/esm2022/lib/components/two-factor-auth-setup/two-factor-auth-setup.module.mjs +19 -0
- package/esm2022/lib/components/user-request/user-request.component.mjs +67 -26
- package/esm2022/lib/models/log-in.mjs +2 -0
- package/esm2022/public-api.mjs +14 -1
- package/fesm2022/verben-authentication-ui.mjs +561 -34
- package/fesm2022/verben-authentication-ui.mjs.map +1 -1
- package/lib/components/mail/mail.component.d.ts +32 -0
- package/lib/components/mail/mail.module.d.ts +11 -0
- package/lib/components/otp-input/otp-input.component.d.ts +19 -0
- package/lib/components/otp-input/otp-input.module.d.ts +13 -0
- package/lib/components/sign-in/sign-in.component.d.ts +45 -0
- package/lib/components/sign-in/sign-in.module.d.ts +13 -0
- package/lib/components/sign-up/sign-up.component.d.ts +2 -1
- package/lib/components/two-factor-auth-otp/two-factor-auth-otp.component.d.ts +43 -0
- package/lib/components/two-factor-auth-otp/two-factor-auth-otp.module.d.ts +12 -0
- package/lib/components/two-factor-auth-setup/two-factor-auth-setup.component.d.ts +38 -0
- package/lib/components/two-factor-auth-setup/two-factor-auth-setup.module.d.ts +9 -0
- package/lib/components/user-request/user-request.component.d.ts +18 -7
- package/lib/models/log-in.d.ts +4 -0
- package/package.json +1 -1
- package/public-api.d.ts +8 -0
|
@@ -2,9 +2,9 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/forms';
|
|
4
4
|
import { FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
5
|
-
import * as
|
|
6
|
-
import { VerbenaInputModule, VerbenaButtonModule } from 'verben-ng-ui';
|
|
7
|
-
import * as i2 from '@angular/common';
|
|
5
|
+
import * as i2 from 'verben-ng-ui';
|
|
6
|
+
import { VerbenaInputModule, VerbenaButtonModule, SvgModule } from 'verben-ng-ui';
|
|
7
|
+
import * as i2$1 from '@angular/common';
|
|
8
8
|
import { CommonModule } from '@angular/common';
|
|
9
9
|
import * as i4 from '@angular/router';
|
|
10
10
|
import { RouterLink } from '@angular/router';
|
|
@@ -61,7 +61,7 @@ class ResetPasswordComponent {
|
|
|
61
61
|
this.onSubmit.emit(data);
|
|
62
62
|
}
|
|
63
63
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ResetPasswordComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
64
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: ResetPasswordComponent, selector: "verben-reset-password", inputs: { title: "title", subTitle: "subTitle", buttonCaption: "buttonCaption", buttonTextColor: "buttonTextColor", buttonBackgroundColor: "buttonBackgroundColor", showOldPassword: "showOldPassword" }, outputs: { onSubmit: "onSubmit" }, ngImport: i0, template: "<div [formGroup]=\"this.resetPasswordForm\" class=\"reset-password-container flex flex-col\">\n <div class=\"reset-password-header flex flex-col\">\n <div class=\"reset-password-title\">{{title}}</div>\n <div class=\"reset-password-subtitle\">{{subTitle}}</div>\n </div>\n <div *ngIf=\"showOldPassword\" class=\"form-field flex flex-col\">\n <div class=\"form-field-caption\">Old Password</div>\n <verbena-input borderRadius=\"12px\" formControlName=\"OldPassword\" type=\"password\"></verbena-input>\n </div>\n <div class=\"form-field flex flex-col\">\n <div class=\"form-field-caption\">New Password</div>\n <verbena-input borderRadius=\"12px\" formControlName=\"Password\" type=\"password\"></verbena-input>\n </div>\n <div class=\"form-field flex flex-col\">\n <div class=\"form-field-caption\">Confirm Password</div>\n <verbena-input borderRadius=\"12px\" formControlName=\"ConfirmPassword\" type=\"password\"></verbena-input>\n </div>\n <verbena-button fontWeight=\"700\" (click)=\"submit()\" [text]=\"buttonCaption\" width=\"100%\" [textColor]=\"buttonTextColor\"\n [bgColor]=\"buttonBackgroundColor\" borderRadius=\"25px\" [disable]=\"!this.checkForm()\"></verbena-button>\n\n</div>", styles: ["*{font-family:sans-serif;font-size:16px}.flex{display:flex}.flex-col{flex-direction:column}.font-bold{font-weight:700}.justify-center{justify-content:center}.justify-end{justify-content:end}.align-items-center{align-items:center}.grid{display:grid}.verben-error-message{font-size:.8rem;color:red}.verben-input{border:1px solid #cbd5e1;outline:none;border-radius:5px;color:#334155;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s,outline-color .2s}.verben-input::placeholder{color:#64748b}.verben-input:hover{border:1px solid #697e97}.verben-input.disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input:disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input.focused{border-color:#3b82f6;outline:none}.verben-input:focus{border-color:#3b82f6;outline:none}.verben-input.ng-invalid{border-color:red}.verben-button{padding:8px 15px;border-radius:4px;border:none;text-align:center}.verben-button.primary{background-color:#ffe681}.verben-button.secondary{background-color:#d9d9d940}.reset-password-container{gap:25px;padding:50px;border:1px solid rgba(102,102,102,.5);box-shadow:4px 4px 4px #00000040;border-radius:24px}.reset-password-title{font-size:30px;font-weight:700}.reset-password-subtitle{font-size:14px;font-weight:500;color:#666}.form-field{gap:5px}.form-field-caption{color:#666}\n"], dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type:
|
|
64
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: ResetPasswordComponent, selector: "verben-reset-password", inputs: { title: "title", subTitle: "subTitle", buttonCaption: "buttonCaption", buttonTextColor: "buttonTextColor", buttonBackgroundColor: "buttonBackgroundColor", showOldPassword: "showOldPassword" }, outputs: { onSubmit: "onSubmit" }, ngImport: i0, template: "<div [formGroup]=\"this.resetPasswordForm\" class=\"reset-password-container flex flex-col\">\n <div class=\"reset-password-header flex flex-col\">\n <div class=\"reset-password-title\">{{title}}</div>\n <div class=\"reset-password-subtitle\">{{subTitle}}</div>\n </div>\n <div *ngIf=\"showOldPassword\" class=\"form-field flex flex-col\">\n <div class=\"form-field-caption\">Old Password</div>\n <verbena-input borderRadius=\"12px\" formControlName=\"OldPassword\" type=\"password\"></verbena-input>\n </div>\n <div class=\"form-field flex flex-col\">\n <div class=\"form-field-caption\">New Password</div>\n <verbena-input borderRadius=\"12px\" formControlName=\"Password\" type=\"password\"></verbena-input>\n </div>\n <div class=\"form-field flex flex-col\">\n <div class=\"form-field-caption\">Confirm Password</div>\n <verbena-input borderRadius=\"12px\" formControlName=\"ConfirmPassword\" type=\"password\"></verbena-input>\n </div>\n <verbena-button fontWeight=\"700\" (click)=\"submit()\" [text]=\"buttonCaption\" width=\"100%\" [textColor]=\"buttonTextColor\"\n [bgColor]=\"buttonBackgroundColor\" borderRadius=\"25px\" [disable]=\"!this.checkForm()\"></verbena-button>\n\n</div>", styles: ["*{font-family:sans-serif;font-size:16px}.flex{display:flex}.flex-col{flex-direction:column}.font-bold{font-weight:700}.justify-center{justify-content:center}.justify-end{justify-content:end}.align-items-center{align-items:center}.grid{display:grid}.verben-error-message{font-size:.8rem;color:red}.verben-input{border:1px solid #cbd5e1;outline:none;border-radius:5px;color:#334155;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s,outline-color .2s}.verben-input::placeholder{color:#64748b}.verben-input:hover{border:1px solid #697e97}.verben-input.disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input:disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input.focused{border-color:#3b82f6;outline:none}.verben-input:focus{border-color:#3b82f6;outline:none}.verben-input.ng-invalid{border-color:red}.verben-button{padding:8px 15px;border-radius:4px;border:none;text-align:center}.verben-button.primary{background-color:#ffe681}.verben-button.secondary{background-color:#d9d9d940}.reset-password-container{gap:25px;padding:50px;border:1px solid rgba(102,102,102,.5);box-shadow:4px 4px 4px #00000040;border-radius:24px}.reset-password-title{font-size:30px;font-weight:700}.reset-password-subtitle{font-size:14px;font-weight:500;color:#666}.form-field{gap:5px}.form-field-caption{color:#666}\n"], dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.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", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "inputWrapperClass", "customErrorMessages"], 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"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
65
65
|
}
|
|
66
66
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ResetPasswordComponent, decorators: [{
|
|
67
67
|
type: Component,
|
|
@@ -111,12 +111,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
111
111
|
}] });
|
|
112
112
|
|
|
113
113
|
class UserRequestComponent {
|
|
114
|
+
fb;
|
|
114
115
|
width = '500px';
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
email = '';
|
|
118
|
-
pwd = '';
|
|
119
|
-
cPwd = '';
|
|
116
|
+
headingTitle = "Request an account";
|
|
117
|
+
headingClass = "font-medium text-[2rem] leading-[48px] text-[#333]";
|
|
120
118
|
customClass = '';
|
|
121
119
|
bgColor = '#fff';
|
|
122
120
|
boxShadow = '4px 4px 4px rgba(0, 0, 0, 0.25)';
|
|
@@ -133,7 +131,32 @@ class UserRequestComponent {
|
|
|
133
131
|
btnBgColor = '#FFE681';
|
|
134
132
|
btnWidth = '100%';
|
|
135
133
|
btnPd = '10px 20px';
|
|
134
|
+
termsLink = '';
|
|
135
|
+
privacyLink = '';
|
|
136
|
+
routerLink = '';
|
|
136
137
|
formSubmit = new EventEmitter();
|
|
138
|
+
googleClick = new EventEmitter();
|
|
139
|
+
appleClick = new EventEmitter();
|
|
140
|
+
userRequestForm;
|
|
141
|
+
constructor(fb) {
|
|
142
|
+
this.fb = fb;
|
|
143
|
+
this.userRequestForm = this.fb.group({
|
|
144
|
+
FirstName: [null, [Validators.required]],
|
|
145
|
+
LastName: [null, [Validators.required]],
|
|
146
|
+
MailAddress: [null, [Validators.required, Validators.email]],
|
|
147
|
+
Password: [null, [Validators.required, Validators.minLength(8)]],
|
|
148
|
+
ConfirmPassword: [null, [Validators.required]],
|
|
149
|
+
Terms: [new FormControl(false, [Validators.requiredTrue]),]
|
|
150
|
+
}, { validators: this.passwordMatchValidator });
|
|
151
|
+
}
|
|
152
|
+
passwordMatchValidator(control) {
|
|
153
|
+
const password = control.get('Password')?.value;
|
|
154
|
+
const confirmPassword = control.get('ConfirmPassword')?.value;
|
|
155
|
+
return password === confirmPassword ? null : { passwordMismatch: true };
|
|
156
|
+
}
|
|
157
|
+
get passwordMismatchError() {
|
|
158
|
+
return this.userRequestForm.hasError('passwordMismatch');
|
|
159
|
+
}
|
|
137
160
|
get styles() {
|
|
138
161
|
return {
|
|
139
162
|
'background-color': this.bgColor,
|
|
@@ -142,37 +165,43 @@ class UserRequestComponent {
|
|
|
142
165
|
'border-radius': this.borderRadius,
|
|
143
166
|
'color': this.textColor,
|
|
144
167
|
'max-width': this.width,
|
|
145
|
-
'margin': '0 auto',
|
|
146
168
|
'height': this.height,
|
|
147
169
|
'padding': this.pd,
|
|
148
170
|
};
|
|
149
171
|
}
|
|
172
|
+
checkForm() {
|
|
173
|
+
return this.userRequestForm.valid;
|
|
174
|
+
}
|
|
175
|
+
handleGoogleAuth() {
|
|
176
|
+
this.googleClick.emit();
|
|
177
|
+
}
|
|
178
|
+
handleAppleAuth() {
|
|
179
|
+
this.appleClick.emit();
|
|
180
|
+
}
|
|
150
181
|
submitForm() {
|
|
182
|
+
if (!this.checkForm()) {
|
|
183
|
+
return;
|
|
184
|
+
}
|
|
151
185
|
this.formSubmit.emit({
|
|
152
|
-
FirstName: this.
|
|
153
|
-
LastName: this.
|
|
154
|
-
MailAddress: this.
|
|
155
|
-
Password: this.
|
|
156
|
-
ConfirmPassword: this.
|
|
186
|
+
FirstName: this.userRequestForm.controls["FirstName"].value,
|
|
187
|
+
LastName: this.userRequestForm.controls["LastName"].value,
|
|
188
|
+
MailAddress: this.userRequestForm.controls["MailAddress"].value,
|
|
189
|
+
Password: this.userRequestForm.controls["Password"].value,
|
|
190
|
+
ConfirmPassword: this.userRequestForm.controls["ConfirmPassword"].value,
|
|
191
|
+
Terms: this.userRequestForm.controls["terms"].value
|
|
157
192
|
});
|
|
158
193
|
}
|
|
159
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: UserRequestComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
160
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: UserRequestComponent, selector: "lib-user-request", inputs: { width: "width",
|
|
194
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: UserRequestComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
195
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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", appleClick: "appleClick" }, 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 [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 [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 <p class=\"text-[#666666] text-sm\">\n <input class=\"accent\" type=\"checkbox\" />\n By creating an account, I agree to our<br />\n <a [attr.href]=\"termsLink\" class=\"text-black text-sm font-[500] underline\"\n >Terms of use</a\n >\n and\n <a [attr.href]=\"privacyLink\" class=\"text-black font-[500] text-sm underline\"\n >Privacy Policy\n </a>\n <p *ngIf=\"userRequestForm.controls['Terms'].invalid && userRequestForm.controls['Terms'].touched\">\n <small class=\"error-text\">Please agree to the terms of use and privacy policy.</small>\n </p>\n \n <verbena-button\n [disable]=\"!this.checkForm()\"\n [text]=\"text\"\n [bgColor]=\"btnBgColor\"\n [textColor]=\"color\"\n [border]=\"btnBorder\"\n [borderRadius]=\"btnBorderRadius\"\n [pd]=\"btnPd\"\n (click)=\"submitForm()\"\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%}.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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.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", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "inputWrapperClass", "customErrorMessages"], 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"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
161
196
|
}
|
|
162
197
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: UserRequestComponent, decorators: [{
|
|
163
198
|
type: Component,
|
|
164
|
-
args: [{ selector: 'lib-user-request', template: "<section [ngStyle]=\"styles\" class=\"{{ customClass }}\">\n <h2 class=\"
|
|
165
|
-
}], propDecorators: { width: [{
|
|
166
|
-
type: Input
|
|
167
|
-
}], fName: [{
|
|
168
|
-
type: Input
|
|
169
|
-
}], lName: [{
|
|
170
|
-
type: Input
|
|
171
|
-
}], email: [{
|
|
199
|
+
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 [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 [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 <p class=\"text-[#666666] text-sm\">\n <input class=\"accent\" type=\"checkbox\" />\n By creating an account, I agree to our<br />\n <a [attr.href]=\"termsLink\" class=\"text-black text-sm font-[500] underline\"\n >Terms of use</a\n >\n and\n <a [attr.href]=\"privacyLink\" class=\"text-black font-[500] text-sm underline\"\n >Privacy Policy\n </a>\n <p *ngIf=\"userRequestForm.controls['Terms'].invalid && userRequestForm.controls['Terms'].touched\">\n <small class=\"error-text\">Please agree to the terms of use and privacy policy.</small>\n </p>\n \n <verbena-button\n [disable]=\"!this.checkForm()\"\n [text]=\"text\"\n [bgColor]=\"btnBgColor\"\n [textColor]=\"color\"\n [border]=\"btnBorder\"\n [borderRadius]=\"btnBorderRadius\"\n [pd]=\"btnPd\"\n (click)=\"submitForm()\"\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%}.accent{accent-color:#000}.OR{color:#666;gap:6px}.OR span{width:150px;border-top:2px solid #6666663d;display:block}\n"] }]
|
|
200
|
+
}], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { width: [{
|
|
172
201
|
type: Input
|
|
173
|
-
}],
|
|
202
|
+
}], headingTitle: [{
|
|
174
203
|
type: Input
|
|
175
|
-
}],
|
|
204
|
+
}], headingClass: [{
|
|
176
205
|
type: Input
|
|
177
206
|
}], customClass: [{
|
|
178
207
|
type: Input
|
|
@@ -204,8 +233,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
204
233
|
type: Input
|
|
205
234
|
}], btnPd: [{
|
|
206
235
|
type: Input
|
|
236
|
+
}], termsLink: [{
|
|
237
|
+
type: Input
|
|
238
|
+
}], privacyLink: [{
|
|
239
|
+
type: Input
|
|
240
|
+
}], routerLink: [{
|
|
241
|
+
type: Input
|
|
207
242
|
}], formSubmit: [{
|
|
208
243
|
type: Output
|
|
244
|
+
}], googleClick: [{
|
|
245
|
+
type: Output
|
|
246
|
+
}], appleClick: [{
|
|
247
|
+
type: Output
|
|
209
248
|
}] } });
|
|
210
249
|
|
|
211
250
|
class UserRequestModule {
|
|
@@ -291,7 +330,7 @@ class MailValidationComponent {
|
|
|
291
330
|
this.login.emit();
|
|
292
331
|
}
|
|
293
332
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: MailValidationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
294
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: MailValidationComponent, selector: "lib-mail-validation", inputs: { customClass: "customClass", bgColor: "bgColor", boxShadow: "boxShadow", border: "border", borderRadius: "borderRadius", textColor: "textColor", height: "height", pd: "pd", width: "width", text: "text", textAlign: "textAlign", color: "color", textSize: "textSize", btnBorder: "btnBorder", btnBorderRadius: "btnBorderRadius", btnBgColor: "btnBgColor", btnWidth: "btnWidth", btnPd: "btnPd" }, outputs: { resendOtp: "resendOtp", proceedToNextStep: "proceedToNextStep", login: "login" }, ngImport: i0, template: "<section [ngStyle]=\"styles\" class=\"{{ customClass }}\">\n <div *ngIf=\"currentStep === 'linkSent'\">\n <p [style.color]=\"textColor\" [style.font-size]=\"textSize\">\n Follow the link sent to your e-mail to verify your e-mail address\n </p>\n <p class=\"mt-4\" (click)=\"handleResendOtp()\">\n Didn't get a link? <a href=\"#\" class=\"underline resend\">Resend</a>\n </p>\n </div>\n\n <div *ngIf=\"currentStep === 'verified'\">\n <p [style.color]=\"textColor\" [style.font-size]=\"textSize\">\n Your e-mail has been verified! You will be notified when your access has\n been authorized\n </p>\n </div>\n\n <div *ngIf=\"currentStep === 'accessGranted'\">\n <p [style.color]=\"textColor\" [style.font-size]=\"textSize\">\n Your e-mail has been verified!\n </p>\n <div class=\"mt-4\">\n <verbena-button\n [text]=\"text\"\n [bgColor]=\"btnBgColor\"\n [textColor]=\"color\"\n [border]=\"btnBorder\"\n [borderRadius]=\"btnBorderRadius\"\n [pd]=\"btnPd\"\n (click)=\"handleLogin()\"\n [width]=\"btnWidth\"\n textSize=\"'22px'\"\n buttonClass=\"font-medium text-[22px] leading-[33px]\"\n ></verbena-button>\n </div>\n </div>\n</section>\n", styles: [".flex{display:flex}.overflow-hidden{overflow:hidden}.h-full{height:100%}.underline{text-decoration:underline}.mt-4{margin-top:1rem}.resend{color:#00f}.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}.w-full{width:100%}\n"], dependencies: [{ kind: "component", type:
|
|
333
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: MailValidationComponent, selector: "lib-mail-validation", inputs: { customClass: "customClass", bgColor: "bgColor", boxShadow: "boxShadow", border: "border", borderRadius: "borderRadius", textColor: "textColor", height: "height", pd: "pd", width: "width", text: "text", textAlign: "textAlign", color: "color", textSize: "textSize", btnBorder: "btnBorder", btnBorderRadius: "btnBorderRadius", btnBgColor: "btnBgColor", btnWidth: "btnWidth", btnPd: "btnPd" }, outputs: { resendOtp: "resendOtp", proceedToNextStep: "proceedToNextStep", login: "login" }, ngImport: i0, template: "<section [ngStyle]=\"styles\" class=\"{{ customClass }}\">\n <div *ngIf=\"currentStep === 'linkSent'\">\n <p [style.color]=\"textColor\" [style.font-size]=\"textSize\">\n Follow the link sent to your e-mail to verify your e-mail address\n </p>\n <p class=\"mt-4\" (click)=\"handleResendOtp()\">\n Didn't get a link? <a href=\"#\" class=\"underline resend\">Resend</a>\n </p>\n </div>\n\n <div *ngIf=\"currentStep === 'verified'\">\n <p [style.color]=\"textColor\" [style.font-size]=\"textSize\">\n Your e-mail has been verified! You will be notified when your access has\n been authorized\n </p>\n </div>\n\n <div *ngIf=\"currentStep === 'accessGranted'\">\n <p [style.color]=\"textColor\" [style.font-size]=\"textSize\">\n Your e-mail has been verified!\n </p>\n <div class=\"mt-4\">\n <verbena-button\n [text]=\"text\"\n [bgColor]=\"btnBgColor\"\n [textColor]=\"color\"\n [border]=\"btnBorder\"\n [borderRadius]=\"btnBorderRadius\"\n [pd]=\"btnPd\"\n (click)=\"handleLogin()\"\n [width]=\"btnWidth\"\n textSize=\"'22px'\"\n buttonClass=\"font-medium text-[22px] leading-[33px]\"\n ></verbena-button>\n </div>\n </div>\n</section>\n", styles: [".flex{display:flex}.overflow-hidden{overflow:hidden}.h-full{height:100%}.underline{text-decoration:underline}.mt-4{margin-top:1rem}.resend{color:#00f}.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}.w-full{width:100%}\n"], dependencies: [{ 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"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
295
334
|
}
|
|
296
335
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: MailValidationComponent, decorators: [{
|
|
297
336
|
type: Component,
|
|
@@ -383,7 +422,7 @@ class ButtonComponent {
|
|
|
383
422
|
this.buttonClick.emit();
|
|
384
423
|
}
|
|
385
424
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
386
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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:
|
|
425
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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"] }] });
|
|
387
426
|
}
|
|
388
427
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
389
428
|
type: Component,
|
|
@@ -421,7 +460,7 @@ class OAuthComponent {
|
|
|
421
460
|
this.appleClick.emit();
|
|
422
461
|
}
|
|
423
462
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: OAuthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
424
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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 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]\"\n (click)=\"oAuthWithGoogle()\"\n ></verbena-button>\n \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</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: "component", type:
|
|
463
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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 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]\"\n (click)=\"oAuthWithGoogle()\"\n ></verbena-button>\n \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</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: "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"] }] });
|
|
425
464
|
}
|
|
426
465
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: OAuthComponent, decorators: [{
|
|
427
466
|
type: Component,
|
|
@@ -434,6 +473,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
434
473
|
|
|
435
474
|
class SignUpComponent {
|
|
436
475
|
fb;
|
|
476
|
+
headlingText = 'Create an account';
|
|
437
477
|
width = '';
|
|
438
478
|
maxWidth = '';
|
|
439
479
|
margin = '';
|
|
@@ -509,12 +549,14 @@ class SignUpComponent {
|
|
|
509
549
|
};
|
|
510
550
|
}
|
|
511
551
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SignUpComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
512
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: SignUpComponent, selector: "verben-sign-up", inputs: { width: "width", maxWidth: "maxWidth", margin: "margin", pd: "pd", customClass: "customClass", headlingClass: "headlingClass", bgColor: "bgColor", boxShadow: "boxShadow", border: "border", borderRadius: "borderRadius", height: "height", priColor: "priColor", textColor: "textColor", disabled: "disabled", termsLink: "termsLink", privacyLink: "privacyLink", routerLink: "routerLink" }, outputs: { formSubmit: "formSubmit", googleClick: "googleClick", appleClick: "appleClick" }, ngImport: i0, template: "<section [ngStyle]=\"styles\" class=\"{{ customClass }}\">\n <h2 class=\"{{headlingClass}}\">\n
|
|
552
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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", priColor: "priColor", textColor: "textColor", disabled: "disabled", termsLink: "termsLink", privacyLink: "privacyLink", routerLink: "routerLink" }, outputs: { formSubmit: "formSubmit", 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]=\"'#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]=\"'Email'\"\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 [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]=\"'#666'\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'password'\"\n formControlName=\"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 <div> \n <div class=\"checkBoxWrapper\">\n <input type=\"checkbox\" id=\"terms\" formControlName=\"Terms\" class=\"checBoxInput\" />\n <label for=\"terms\" 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 <p [ngStyle]=\"{'margin-bottom':'5px'}\"></p>\n <lib-button \n text=\"Create an account\" \n type=\"submit\"\n [disabled]=\"!this.checkForm()\"\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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.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", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "inputWrapperClass", "customErrorMessages"], outputs: ["valueChange"] }, { kind: "directive", type: i4.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.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
|
|
513
553
|
}
|
|
514
554
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SignUpComponent, decorators: [{
|
|
515
555
|
type: Component,
|
|
516
|
-
args: [{ selector: 'verben-sign-up', template: "<section [ngStyle]=\"styles\" class=\"{{ customClass }}\">\n <h2 class=\"{{headlingClass}}\">\n
|
|
517
|
-
}], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: {
|
|
556
|
+
args: [{ selector: 'verben-sign-up', 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]=\"'#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]=\"'Email'\"\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 [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]=\"'#666'\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'password'\"\n formControlName=\"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 <div> \n <div class=\"checkBoxWrapper\">\n <input type=\"checkbox\" id=\"terms\" formControlName=\"Terms\" class=\"checBoxInput\" />\n <label for=\"terms\" 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 <p [ngStyle]=\"{'margin-bottom':'5px'}\"></p>\n <lib-button \n text=\"Create an account\" \n type=\"submit\"\n [disabled]=\"!this.checkForm()\"\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"] }]
|
|
557
|
+
}], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { headlingText: [{
|
|
558
|
+
type: Input
|
|
559
|
+
}], width: [{
|
|
518
560
|
type: Input
|
|
519
561
|
}], maxWidth: [{
|
|
520
562
|
type: Input
|
|
@@ -598,6 +640,491 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
598
640
|
}]
|
|
599
641
|
}] });
|
|
600
642
|
|
|
643
|
+
class SignInComponent {
|
|
644
|
+
fb;
|
|
645
|
+
headlingText = 'Create an account';
|
|
646
|
+
width = '';
|
|
647
|
+
maxWidth = '';
|
|
648
|
+
margin = '';
|
|
649
|
+
pd = '';
|
|
650
|
+
customClass = '';
|
|
651
|
+
bgColor = '#fff';
|
|
652
|
+
boxShadow = '4px 4px 4px rgba(0, 0, 0, 0.25)';
|
|
653
|
+
border = '1px solid #66666680';
|
|
654
|
+
borderRadius = '24px';
|
|
655
|
+
textColor = '#333';
|
|
656
|
+
height = 'auto';
|
|
657
|
+
routerLink = '';
|
|
658
|
+
forgetPasswordClass = '';
|
|
659
|
+
headlingClass = '';
|
|
660
|
+
formSubmit = new EventEmitter();
|
|
661
|
+
googleClick = new EventEmitter();
|
|
662
|
+
appleClick = new EventEmitter();
|
|
663
|
+
loginForm;
|
|
664
|
+
constructor(fb) {
|
|
665
|
+
this.fb = fb;
|
|
666
|
+
this.loginForm = this.fb.group({
|
|
667
|
+
Email: new FormControl(null, [
|
|
668
|
+
Validators.required,
|
|
669
|
+
Validators.email,
|
|
670
|
+
]),
|
|
671
|
+
Password: new FormControl(null, [
|
|
672
|
+
Validators.required,
|
|
673
|
+
Validators.minLength(8),
|
|
674
|
+
]),
|
|
675
|
+
});
|
|
676
|
+
}
|
|
677
|
+
checkForm() {
|
|
678
|
+
return this.loginForm.valid;
|
|
679
|
+
}
|
|
680
|
+
submit() {
|
|
681
|
+
if (!this.checkForm()) {
|
|
682
|
+
return;
|
|
683
|
+
}
|
|
684
|
+
const data = {
|
|
685
|
+
Email: this.loginForm.controls['Email'].value,
|
|
686
|
+
Password: this.loginForm.controls['Password'].value,
|
|
687
|
+
};
|
|
688
|
+
this.formSubmit.emit(data);
|
|
689
|
+
}
|
|
690
|
+
handleGoogleAuth() {
|
|
691
|
+
this.googleClick.emit();
|
|
692
|
+
}
|
|
693
|
+
handleAppleAuth() {
|
|
694
|
+
this.appleClick.emit();
|
|
695
|
+
}
|
|
696
|
+
get styles() {
|
|
697
|
+
return {
|
|
698
|
+
'background-color': this.bgColor,
|
|
699
|
+
'box-shadow': this.boxShadow,
|
|
700
|
+
'border': this.border,
|
|
701
|
+
'border-radius': this.borderRadius,
|
|
702
|
+
'color': this.textColor,
|
|
703
|
+
'width': this.width,
|
|
704
|
+
'max-width': this.maxWidth,
|
|
705
|
+
'margin': this.margin,
|
|
706
|
+
'height': this.height,
|
|
707
|
+
'padding': this.pd
|
|
708
|
+
};
|
|
709
|
+
}
|
|
710
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SignInComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
711
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: SignInComponent, selector: "verben-sign-in", inputs: { headlingText: "headlingText", width: "width", maxWidth: "maxWidth", margin: "margin", pd: "pd", customClass: "customClass", bgColor: "bgColor", boxShadow: "boxShadow", border: "border", borderRadius: "borderRadius", textColor: "textColor", height: "height", routerLink: "routerLink", forgetPasswordClass: "forgetPasswordClass", headlingClass: "headlingClass" }, outputs: { formSubmit: "formSubmit", 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 <verbena-input\n [label]=\"'Email'\"\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 [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]=\"'#666'\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'password'\"\n formControlName=\"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 <div class=\"pwdWrapper\"> \n <p clas=\"mb-0\"> <a [routerLink]=\"routerLink\" class=\"{{forgetPasswordClass}}\">Forgot password</a></p>\n </div>\n </div>\n\n <lib-button text=\"Login\" \n type=\"submit\" \n [disabled]=\"!this.checkForm()\"\n ></lib-button>\n <verben-o-auth \n (googleClick)=\"handleGoogleAuth()\"\n (appleClick)=\"handleAppleAuth()\"\n ></verben-o-auth>\n </form>\n </section>\n ", styles: ["a{text-decoration:underline}.flexWrapper{display:flex;flex-direction:column;gap:20px;margin-top:12px}.pwdWrapper{display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.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", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "inputWrapperClass", "customErrorMessages"], outputs: ["valueChange"] }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: OAuthComponent, selector: "verben-o-auth", outputs: ["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.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
|
|
712
|
+
}
|
|
713
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SignInComponent, decorators: [{
|
|
714
|
+
type: Component,
|
|
715
|
+
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 <verbena-input\n [label]=\"'Email'\"\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 [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]=\"'#666'\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'password'\"\n formControlName=\"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 <div class=\"pwdWrapper\"> \n <p clas=\"mb-0\"> <a [routerLink]=\"routerLink\" class=\"{{forgetPasswordClass}}\">Forgot password</a></p>\n </div>\n </div>\n\n <lib-button text=\"Login\" \n type=\"submit\" \n [disabled]=\"!this.checkForm()\"\n ></lib-button>\n <verben-o-auth \n (googleClick)=\"handleGoogleAuth()\"\n (appleClick)=\"handleAppleAuth()\"\n ></verben-o-auth>\n </form>\n </section>\n ", styles: ["a{text-decoration:underline}.flexWrapper{display:flex;flex-direction:column;gap:20px;margin-top:12px}.pwdWrapper{display:flex;justify-content:flex-end}\n"] }]
|
|
716
|
+
}], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { headlingText: [{
|
|
717
|
+
type: Input
|
|
718
|
+
}], width: [{
|
|
719
|
+
type: Input
|
|
720
|
+
}], maxWidth: [{
|
|
721
|
+
type: Input
|
|
722
|
+
}], margin: [{
|
|
723
|
+
type: Input
|
|
724
|
+
}], pd: [{
|
|
725
|
+
type: Input
|
|
726
|
+
}], customClass: [{
|
|
727
|
+
type: Input
|
|
728
|
+
}], bgColor: [{
|
|
729
|
+
type: Input
|
|
730
|
+
}], boxShadow: [{
|
|
731
|
+
type: Input
|
|
732
|
+
}], border: [{
|
|
733
|
+
type: Input
|
|
734
|
+
}], borderRadius: [{
|
|
735
|
+
type: Input
|
|
736
|
+
}], textColor: [{
|
|
737
|
+
type: Input
|
|
738
|
+
}], height: [{
|
|
739
|
+
type: Input
|
|
740
|
+
}], routerLink: [{
|
|
741
|
+
type: Input
|
|
742
|
+
}], forgetPasswordClass: [{
|
|
743
|
+
type: Input
|
|
744
|
+
}], headlingClass: [{
|
|
745
|
+
type: Input
|
|
746
|
+
}], formSubmit: [{
|
|
747
|
+
type: Output
|
|
748
|
+
}], googleClick: [{
|
|
749
|
+
type: Output
|
|
750
|
+
}], appleClick: [{
|
|
751
|
+
type: Output
|
|
752
|
+
}] } });
|
|
753
|
+
|
|
754
|
+
class SignInModule {
|
|
755
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SignInModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
756
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: SignInModule, declarations: [SignInComponent], imports: [CommonModule, FormsModule, VerbenaInputModule, VerbenaButtonModule, RouterLink, OAuthModule, ButtonModule, ReactiveFormsModule], exports: [SignInComponent] });
|
|
757
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SignInModule, imports: [CommonModule, FormsModule, VerbenaInputModule, VerbenaButtonModule, OAuthModule, ButtonModule, ReactiveFormsModule] });
|
|
758
|
+
}
|
|
759
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SignInModule, decorators: [{
|
|
760
|
+
type: NgModule,
|
|
761
|
+
args: [{
|
|
762
|
+
declarations: [SignInComponent],
|
|
763
|
+
imports: [CommonModule, FormsModule, VerbenaInputModule, VerbenaButtonModule, RouterLink, OAuthModule, ButtonModule, ReactiveFormsModule],
|
|
764
|
+
exports: [SignInComponent]
|
|
765
|
+
}]
|
|
766
|
+
}] });
|
|
767
|
+
|
|
768
|
+
class OtpInputComponent {
|
|
769
|
+
fb;
|
|
770
|
+
length = 6;
|
|
771
|
+
otpChange = new EventEmitter();
|
|
772
|
+
otpForm;
|
|
773
|
+
constructor(fb) {
|
|
774
|
+
this.fb = fb;
|
|
775
|
+
}
|
|
776
|
+
ngOnInit() {
|
|
777
|
+
this.otpForm = this.fb.group({
|
|
778
|
+
otpArray: this.fb.array(Array(this.length).fill('').map(() => new FormControl('')))
|
|
779
|
+
});
|
|
780
|
+
this.otpArray.valueChanges.subscribe(() => {
|
|
781
|
+
this.emitOtp();
|
|
782
|
+
});
|
|
783
|
+
}
|
|
784
|
+
get otpArray() {
|
|
785
|
+
return this.otpForm.get('otpArray');
|
|
786
|
+
}
|
|
787
|
+
handleInput(event, index) {
|
|
788
|
+
const value = event.target.value;
|
|
789
|
+
if (/\d/.test(value)) {
|
|
790
|
+
this.otpArray.at(index).setValue(value);
|
|
791
|
+
if (index < this.length - 1) {
|
|
792
|
+
this.focusNextInput(index);
|
|
793
|
+
}
|
|
794
|
+
}
|
|
795
|
+
else {
|
|
796
|
+
this.otpArray.at(index).setValue('');
|
|
797
|
+
}
|
|
798
|
+
}
|
|
799
|
+
handleKeydown(event, index) {
|
|
800
|
+
if (event.key === 'Backspace') {
|
|
801
|
+
this.otpArray.at(index).setValue('');
|
|
802
|
+
if (index > 0) {
|
|
803
|
+
this.focusPreviousInput(index);
|
|
804
|
+
}
|
|
805
|
+
}
|
|
806
|
+
}
|
|
807
|
+
focusNextInput(index) {
|
|
808
|
+
const nextInput = document.getElementById(`otp-input-${index + 1}`);
|
|
809
|
+
nextInput?.focus();
|
|
810
|
+
}
|
|
811
|
+
focusPreviousInput(index) {
|
|
812
|
+
const prevInput = document.getElementById(`otp-input-${index - 1}`);
|
|
813
|
+
prevInput?.focus();
|
|
814
|
+
}
|
|
815
|
+
emitOtp() {
|
|
816
|
+
const otp = this.otpArray.value.join('');
|
|
817
|
+
this.otpChange.emit(otp);
|
|
818
|
+
}
|
|
819
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: OtpInputComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
820
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: OtpInputComponent, selector: "verben-otp-input", inputs: { length: "length" }, 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\"\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$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }] });
|
|
821
|
+
}
|
|
822
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: OtpInputComponent, decorators: [{
|
|
823
|
+
type: Component,
|
|
824
|
+
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\"\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"] }]
|
|
825
|
+
}], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { length: [{
|
|
826
|
+
type: Input
|
|
827
|
+
}], otpChange: [{
|
|
828
|
+
type: Output
|
|
829
|
+
}] } });
|
|
830
|
+
|
|
831
|
+
class TwoFactorAuthOtpComponent {
|
|
832
|
+
fb;
|
|
833
|
+
customClass = '';
|
|
834
|
+
headlingClass = '';
|
|
835
|
+
paragraphClass = '';
|
|
836
|
+
resendClass = '';
|
|
837
|
+
width = '';
|
|
838
|
+
maxWidth = '';
|
|
839
|
+
margin = '';
|
|
840
|
+
pd = '';
|
|
841
|
+
bgColor = '#fff';
|
|
842
|
+
boxShadow = '4px 4px 4px rgba(0, 0, 0, 0.25)';
|
|
843
|
+
border = '1px solid #66666680';
|
|
844
|
+
borderRadius = '24px';
|
|
845
|
+
textColor = '#333';
|
|
846
|
+
height = 'auto';
|
|
847
|
+
otpValue = '';
|
|
848
|
+
otpForm;
|
|
849
|
+
buttonClick = new EventEmitter();
|
|
850
|
+
resend = new EventEmitter();
|
|
851
|
+
constructor(fb) {
|
|
852
|
+
this.fb = fb;
|
|
853
|
+
}
|
|
854
|
+
ngOnInit() {
|
|
855
|
+
this.otpForm = this.fb.group({
|
|
856
|
+
otpValue: ['', [Validators.required, Validators.minLength(6)]]
|
|
857
|
+
});
|
|
858
|
+
}
|
|
859
|
+
onOtpChange(value) {
|
|
860
|
+
this.otpForm.get('otpValue')?.setValue(value);
|
|
861
|
+
}
|
|
862
|
+
emitFormData() {
|
|
863
|
+
if (this.otpForm.valid) {
|
|
864
|
+
this.buttonClick.emit(this.otpForm.get('otpValue')?.value);
|
|
865
|
+
}
|
|
866
|
+
}
|
|
867
|
+
resendOtp() {
|
|
868
|
+
this.resend.emit();
|
|
869
|
+
}
|
|
870
|
+
get styles() {
|
|
871
|
+
return {
|
|
872
|
+
'background-color': this.bgColor,
|
|
873
|
+
'box-shadow': this.boxShadow,
|
|
874
|
+
'border': this.border,
|
|
875
|
+
'border-radius': this.borderRadius,
|
|
876
|
+
'color': this.textColor,
|
|
877
|
+
'width': this.width,
|
|
878
|
+
'max-width': this.maxWidth,
|
|
879
|
+
'margin': this.margin,
|
|
880
|
+
'height': this.height,
|
|
881
|
+
'padding': this.pd
|
|
882
|
+
};
|
|
883
|
+
}
|
|
884
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TwoFactorAuthOtpComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
885
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: TwoFactorAuthOtpComponent, selector: "verben-auth-otp", inputs: { customClass: "customClass", headlingClass: "headlingClass", paragraphClass: "paragraphClass", resendClass: "resendClass", width: "width", maxWidth: "maxWidth", margin: "margin", pd: "pd", bgColor: "bgColor", boxShadow: "boxShadow", border: "border", borderRadius: "borderRadius", textColor: "textColor", height: "height" }, outputs: { buttonClick: "buttonClick", resend: "resend" }, ngImport: i0, template: "<section\n[ngStyle]=\"styles\"\nclass=\"{{ customClass }}\"\n>\n <h3 class=\"{{headlingClass}}\">Two Factor Authentication</h3>\n <div class=\"otpWrapper\"> \n <p class=\"{{paragraphClass}}\">Enter the 6 digit code sent to your phone number</p>\n <verben-otp-input [length]=\"6\" (otpChange)=\"onOtpChange($event)\"></verben-otp-input>\n </div>\n <lib-button \n text=\"Submit\" \n (buttonClick)=\"emitFormData()\"\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$1.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"], outputs: ["otpChange"] }] });
|
|
886
|
+
}
|
|
887
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TwoFactorAuthOtpComponent, decorators: [{
|
|
888
|
+
type: Component,
|
|
889
|
+
args: [{ selector: 'verben-auth-otp', template: "<section\n[ngStyle]=\"styles\"\nclass=\"{{ customClass }}\"\n>\n <h3 class=\"{{headlingClass}}\">Two Factor Authentication</h3>\n <div class=\"otpWrapper\"> \n <p class=\"{{paragraphClass}}\">Enter the 6 digit code sent to your phone number</p>\n <verben-otp-input [length]=\"6\" (otpChange)=\"onOtpChange($event)\"></verben-otp-input>\n </div>\n <lib-button \n text=\"Submit\" \n (buttonClick)=\"emitFormData()\"\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"] }]
|
|
890
|
+
}], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { customClass: [{
|
|
891
|
+
type: Input
|
|
892
|
+
}], headlingClass: [{
|
|
893
|
+
type: Input
|
|
894
|
+
}], paragraphClass: [{
|
|
895
|
+
type: Input
|
|
896
|
+
}], resendClass: [{
|
|
897
|
+
type: Input
|
|
898
|
+
}], width: [{
|
|
899
|
+
type: Input
|
|
900
|
+
}], maxWidth: [{
|
|
901
|
+
type: Input
|
|
902
|
+
}], margin: [{
|
|
903
|
+
type: Input
|
|
904
|
+
}], pd: [{
|
|
905
|
+
type: Input
|
|
906
|
+
}], bgColor: [{
|
|
907
|
+
type: Input
|
|
908
|
+
}], boxShadow: [{
|
|
909
|
+
type: Input
|
|
910
|
+
}], border: [{
|
|
911
|
+
type: Input
|
|
912
|
+
}], borderRadius: [{
|
|
913
|
+
type: Input
|
|
914
|
+
}], textColor: [{
|
|
915
|
+
type: Input
|
|
916
|
+
}], height: [{
|
|
917
|
+
type: Input
|
|
918
|
+
}], buttonClick: [{
|
|
919
|
+
type: Output
|
|
920
|
+
}], resend: [{
|
|
921
|
+
type: Output
|
|
922
|
+
}] } });
|
|
923
|
+
|
|
924
|
+
class OtpInputModule {
|
|
925
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: OtpInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
926
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: OtpInputModule, declarations: [OtpInputComponent], imports: [CommonModule, FormsModule, VerbenaInputModule, RouterLink, ButtonModule, OAuthModule, ReactiveFormsModule], exports: [OtpInputComponent] });
|
|
927
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: OtpInputModule, imports: [CommonModule, FormsModule, VerbenaInputModule, ButtonModule, OAuthModule, ReactiveFormsModule] });
|
|
928
|
+
}
|
|
929
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: OtpInputModule, decorators: [{
|
|
930
|
+
type: NgModule,
|
|
931
|
+
args: [{
|
|
932
|
+
declarations: [OtpInputComponent],
|
|
933
|
+
imports: [CommonModule, FormsModule, VerbenaInputModule, RouterLink, ButtonModule, OAuthModule, ReactiveFormsModule],
|
|
934
|
+
exports: [OtpInputComponent]
|
|
935
|
+
}]
|
|
936
|
+
}] });
|
|
937
|
+
|
|
938
|
+
class TwoFactorAuthOtpModule {
|
|
939
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TwoFactorAuthOtpModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
940
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: TwoFactorAuthOtpModule, declarations: [TwoFactorAuthOtpComponent], imports: [CommonModule, ButtonModule, OtpInputModule, RouterLink, ReactiveFormsModule], exports: [TwoFactorAuthOtpComponent] });
|
|
941
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TwoFactorAuthOtpModule, imports: [CommonModule, ButtonModule, OtpInputModule, ReactiveFormsModule] });
|
|
942
|
+
}
|
|
943
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TwoFactorAuthOtpModule, decorators: [{
|
|
944
|
+
type: NgModule,
|
|
945
|
+
args: [{
|
|
946
|
+
declarations: [TwoFactorAuthOtpComponent],
|
|
947
|
+
imports: [CommonModule, ButtonModule, OtpInputModule, RouterLink, ReactiveFormsModule],
|
|
948
|
+
exports: [TwoFactorAuthOtpComponent]
|
|
949
|
+
}]
|
|
950
|
+
}] });
|
|
951
|
+
|
|
952
|
+
class TwoFactorAuthSetupComponent {
|
|
953
|
+
customClass = '';
|
|
954
|
+
headlingClass = '';
|
|
955
|
+
paragraphClass = '';
|
|
956
|
+
buttonClass = '';
|
|
957
|
+
width = '';
|
|
958
|
+
maxWidth = '';
|
|
959
|
+
margin = '';
|
|
960
|
+
pd = '';
|
|
961
|
+
bgColor = '#fff';
|
|
962
|
+
boxShadow = '4px 4px 4px rgba(0, 0, 0, 0.25)';
|
|
963
|
+
border = '1px solid #66666680';
|
|
964
|
+
borderRadius = '24px';
|
|
965
|
+
textColor = '#333';
|
|
966
|
+
height = '';
|
|
967
|
+
smsClick = new EventEmitter();
|
|
968
|
+
mailClick = new EventEmitter();
|
|
969
|
+
skipClick = new EventEmitter();
|
|
970
|
+
continueWithSMS() {
|
|
971
|
+
this.smsClick.emit();
|
|
972
|
+
}
|
|
973
|
+
continueWithMail() {
|
|
974
|
+
this.mailClick.emit();
|
|
975
|
+
}
|
|
976
|
+
handleSkip() {
|
|
977
|
+
this.skipClick.emit();
|
|
978
|
+
}
|
|
979
|
+
get styles() {
|
|
980
|
+
return {
|
|
981
|
+
'background-color': this.bgColor,
|
|
982
|
+
'box-shadow': this.boxShadow,
|
|
983
|
+
'border': this.border,
|
|
984
|
+
'border-radius': this.borderRadius,
|
|
985
|
+
'color': this.textColor,
|
|
986
|
+
'width': this.width,
|
|
987
|
+
'max-width': this.maxWidth,
|
|
988
|
+
'margin': this.margin,
|
|
989
|
+
'height': this.height,
|
|
990
|
+
'padding': this.pd
|
|
991
|
+
};
|
|
992
|
+
}
|
|
993
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TwoFactorAuthSetupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
994
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: TwoFactorAuthSetupComponent, selector: "verben-two-factor-auth-setup", inputs: { customClass: "customClass", headlingClass: "headlingClass", paragraphClass: "paragraphClass", buttonClass: "buttonClass", width: "width", maxWidth: "maxWidth", margin: "margin", pd: "pd", bgColor: "bgColor", boxShadow: "boxShadow", border: "border", borderRadius: "borderRadius", textColor: "textColor", height: "height" }, outputs: { smsClick: "smsClick", mailClick: "mailClick", skipClick: "skipClick" }, ngImport: i0, template: "<section\n[ngStyle]=\"styles\"\nclass=\"{{ customClass }}\"\n>\n <h3 class=\"{{headlingClass}}\">Set Up Two Factor Authentication</h3>\n <div class=\"setUpBtnWrapper\">\n <verbena-button\n svg=\"2fa-sms\"\n [svgHeight]=\"24\"\n [svgWidth]=\"24\"\n text=\"Continue with SMS\"\n bgColor=\"white\"\n textColor=\"#333333\"\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 (click)=\"continueWithSMS()\"\n ></verbena-button>\n <p [ngStyle]=\"{'margin-top':'5px'}\"></p>\n <verbena-button\n svg=\"2fa-mail\"\n [svgHeight]=\"16\"\n [svgWidth]=\"20\"\n text=\"Continue with Mail\"\n bgColor=\"white\"\n textColor=\"#333333\"\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 (click)=\"continueWithMail()\"\n ></verbena-button>\n <div class=\"iconWrapper\" (click)=\"handleSkip()\"> \n <p class=\"{{paragraphClass}}\">Skip for now</p>\n <verben-svg \n icon=\"skip-forward\"\n [height]=\"24\"\n [width]=\"24\"\n />\n </div>\n</div>\n</section>", styles: [".setUpBtnWrapper{display:flex;flex-direction:column;gap:12px;margin-top:40px}.iconWrapper{display:flex;cursor:pointer;align-items:center;justify-content:end;gap:12px;margin-bottom:50px}.custom-button{font-weight:500}\n"], dependencies: [{ kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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"] }, { kind: "component", type: i2.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "size"] }] });
|
|
995
|
+
}
|
|
996
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TwoFactorAuthSetupComponent, decorators: [{
|
|
997
|
+
type: Component,
|
|
998
|
+
args: [{ selector: 'verben-two-factor-auth-setup', template: "<section\n[ngStyle]=\"styles\"\nclass=\"{{ customClass }}\"\n>\n <h3 class=\"{{headlingClass}}\">Set Up Two Factor Authentication</h3>\n <div class=\"setUpBtnWrapper\">\n <verbena-button\n svg=\"2fa-sms\"\n [svgHeight]=\"24\"\n [svgWidth]=\"24\"\n text=\"Continue with SMS\"\n bgColor=\"white\"\n textColor=\"#333333\"\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 (click)=\"continueWithSMS()\"\n ></verbena-button>\n <p [ngStyle]=\"{'margin-top':'5px'}\"></p>\n <verbena-button\n svg=\"2fa-mail\"\n [svgHeight]=\"16\"\n [svgWidth]=\"20\"\n text=\"Continue with Mail\"\n bgColor=\"white\"\n textColor=\"#333333\"\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 (click)=\"continueWithMail()\"\n ></verbena-button>\n <div class=\"iconWrapper\" (click)=\"handleSkip()\"> \n <p class=\"{{paragraphClass}}\">Skip for now</p>\n <verben-svg \n icon=\"skip-forward\"\n [height]=\"24\"\n [width]=\"24\"\n />\n </div>\n</div>\n</section>", styles: [".setUpBtnWrapper{display:flex;flex-direction:column;gap:12px;margin-top:40px}.iconWrapper{display:flex;cursor:pointer;align-items:center;justify-content:end;gap:12px;margin-bottom:50px}.custom-button{font-weight:500}\n"] }]
|
|
999
|
+
}], propDecorators: { customClass: [{
|
|
1000
|
+
type: Input
|
|
1001
|
+
}], headlingClass: [{
|
|
1002
|
+
type: Input
|
|
1003
|
+
}], paragraphClass: [{
|
|
1004
|
+
type: Input
|
|
1005
|
+
}], buttonClass: [{
|
|
1006
|
+
type: Input
|
|
1007
|
+
}], width: [{
|
|
1008
|
+
type: Input
|
|
1009
|
+
}], maxWidth: [{
|
|
1010
|
+
type: Input
|
|
1011
|
+
}], margin: [{
|
|
1012
|
+
type: Input
|
|
1013
|
+
}], pd: [{
|
|
1014
|
+
type: Input
|
|
1015
|
+
}], bgColor: [{
|
|
1016
|
+
type: Input
|
|
1017
|
+
}], boxShadow: [{
|
|
1018
|
+
type: Input
|
|
1019
|
+
}], border: [{
|
|
1020
|
+
type: Input
|
|
1021
|
+
}], borderRadius: [{
|
|
1022
|
+
type: Input
|
|
1023
|
+
}], textColor: [{
|
|
1024
|
+
type: Input
|
|
1025
|
+
}], height: [{
|
|
1026
|
+
type: Input
|
|
1027
|
+
}], smsClick: [{
|
|
1028
|
+
type: Output
|
|
1029
|
+
}], mailClick: [{
|
|
1030
|
+
type: Output
|
|
1031
|
+
}], skipClick: [{
|
|
1032
|
+
type: Output
|
|
1033
|
+
}] } });
|
|
1034
|
+
|
|
1035
|
+
class TwoFactorAuthSetupModule {
|
|
1036
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TwoFactorAuthSetupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1037
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: TwoFactorAuthSetupModule, declarations: [TwoFactorAuthSetupComponent], imports: [CommonModule, VerbenaButtonModule, SvgModule], exports: [TwoFactorAuthSetupComponent] });
|
|
1038
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TwoFactorAuthSetupModule, imports: [CommonModule, VerbenaButtonModule, SvgModule] });
|
|
1039
|
+
}
|
|
1040
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TwoFactorAuthSetupModule, decorators: [{
|
|
1041
|
+
type: NgModule,
|
|
1042
|
+
args: [{
|
|
1043
|
+
declarations: [TwoFactorAuthSetupComponent],
|
|
1044
|
+
imports: [CommonModule, VerbenaButtonModule, SvgModule],
|
|
1045
|
+
exports: [TwoFactorAuthSetupComponent]
|
|
1046
|
+
}]
|
|
1047
|
+
}] });
|
|
1048
|
+
|
|
1049
|
+
class MailComponent {
|
|
1050
|
+
customClass = '';
|
|
1051
|
+
headlingClass = '';
|
|
1052
|
+
width = '';
|
|
1053
|
+
maxWidth = '';
|
|
1054
|
+
margin = '';
|
|
1055
|
+
pd = '';
|
|
1056
|
+
bgColor = '#fff';
|
|
1057
|
+
boxShadow = '4px 4px 4px rgba(0, 0, 0, 0.25)';
|
|
1058
|
+
border = '1px solid #66666680';
|
|
1059
|
+
borderRadius = '24px';
|
|
1060
|
+
textColor = '#333';
|
|
1061
|
+
height = 'auto';
|
|
1062
|
+
buttonClick = new EventEmitter();
|
|
1063
|
+
goToLogin() {
|
|
1064
|
+
this.buttonClick.emit();
|
|
1065
|
+
}
|
|
1066
|
+
get styles() {
|
|
1067
|
+
return {
|
|
1068
|
+
'background-color': this.bgColor,
|
|
1069
|
+
'box-shadow': this.boxShadow,
|
|
1070
|
+
'border': this.border,
|
|
1071
|
+
'border-radius': this.borderRadius,
|
|
1072
|
+
'color': this.textColor,
|
|
1073
|
+
'width': this.width,
|
|
1074
|
+
'max-width': this.maxWidth,
|
|
1075
|
+
'margin': this.margin,
|
|
1076
|
+
'height': this.height,
|
|
1077
|
+
'padding': this.pd
|
|
1078
|
+
};
|
|
1079
|
+
}
|
|
1080
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: MailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1081
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["text", "color", "border", "borderRadius", "bgColor", "width", "pd", "buttonClass", "disabled"], outputs: ["buttonClick"] }] });
|
|
1082
|
+
}
|
|
1083
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: MailComponent, decorators: [{
|
|
1084
|
+
type: Component,
|
|
1085
|
+
args: [{ selector: 'verben-mail-message', 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" }]
|
|
1086
|
+
}], propDecorators: { customClass: [{
|
|
1087
|
+
type: Input
|
|
1088
|
+
}], headlingClass: [{
|
|
1089
|
+
type: Input
|
|
1090
|
+
}], width: [{
|
|
1091
|
+
type: Input
|
|
1092
|
+
}], maxWidth: [{
|
|
1093
|
+
type: Input
|
|
1094
|
+
}], margin: [{
|
|
1095
|
+
type: Input
|
|
1096
|
+
}], pd: [{
|
|
1097
|
+
type: Input
|
|
1098
|
+
}], bgColor: [{
|
|
1099
|
+
type: Input
|
|
1100
|
+
}], boxShadow: [{
|
|
1101
|
+
type: Input
|
|
1102
|
+
}], border: [{
|
|
1103
|
+
type: Input
|
|
1104
|
+
}], borderRadius: [{
|
|
1105
|
+
type: Input
|
|
1106
|
+
}], textColor: [{
|
|
1107
|
+
type: Input
|
|
1108
|
+
}], height: [{
|
|
1109
|
+
type: Input
|
|
1110
|
+
}], buttonClick: [{
|
|
1111
|
+
type: Output
|
|
1112
|
+
}] } });
|
|
1113
|
+
|
|
1114
|
+
class MailModule {
|
|
1115
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: MailModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1116
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: MailModule, declarations: [MailComponent], imports: [CommonModule, FormsModule, RouterLink, ButtonModule], exports: [MailComponent] });
|
|
1117
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: MailModule, imports: [CommonModule, FormsModule, ButtonModule] });
|
|
1118
|
+
}
|
|
1119
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: MailModule, decorators: [{
|
|
1120
|
+
type: NgModule,
|
|
1121
|
+
args: [{
|
|
1122
|
+
declarations: [MailComponent],
|
|
1123
|
+
imports: [CommonModule, FormsModule, RouterLink, ButtonModule],
|
|
1124
|
+
exports: [MailComponent]
|
|
1125
|
+
}]
|
|
1126
|
+
}] });
|
|
1127
|
+
|
|
601
1128
|
/*
|
|
602
1129
|
* Public API Surface of verben-ng-ui
|
|
603
1130
|
*/
|
|
@@ -609,5 +1136,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
609
1136
|
* Generated bundle index. Do not edit.
|
|
610
1137
|
*/
|
|
611
1138
|
|
|
612
|
-
export { MailValidationComponent, MailValidationModule, ResetPasswordComponent, ResetPasswordModule, SignUpComponent, SignUpModule, UserRequestComponent, UserRequestModule };
|
|
1139
|
+
export { MailComponent, MailModule, MailValidationComponent, MailValidationModule, ResetPasswordComponent, ResetPasswordModule, SignInComponent, SignInModule, SignUpComponent, SignUpModule, TwoFactorAuthOtpComponent, TwoFactorAuthOtpModule, TwoFactorAuthSetupComponent, TwoFactorAuthSetupModule, UserRequestComponent, UserRequestModule };
|
|
613
1140
|
//# sourceMappingURL=verben-authentication-ui.mjs.map
|