@resolveio/client-lib-core 15.1.10 → 15.1.11

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.
@@ -3023,7 +3023,7 @@ DialogLoginContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
3023
3023
  }
3024
3024
 
3025
3025
  .log-box {
3026
- padding-top: 26px;
3026
+ padding-top: 0px;
3027
3027
  padding-bottom: 26px;
3028
3028
  }
3029
3029
  .loginform .form-control, .register-form .form-control {
@@ -3086,6 +3086,53 @@ DialogLoginContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
3086
3086
  button.btn.sign-btn:hover {
3087
3087
  background: #1668e2;
3088
3088
  }
3089
+
3090
+ .login-card {
3091
+ margin-bottom: 20px;
3092
+ padding: 20px;
3093
+ padding-top: 10px;
3094
+ border-radius: 8px;
3095
+ box-shadow: 0 4px 8px rgba(0,0,0,0.2), 0 6px 20px rgba(0,0,0,0.19); /* Enhanced shadow */
3096
+ background-color: #FFFFFF;
3097
+ }
3098
+
3099
+ .login-header {
3100
+ font-size: 20px;
3101
+ font-weight: bold;
3102
+ color: #333;
3103
+ margin-bottom: 15px;
3104
+ text-align: center;
3105
+ }
3106
+
3107
+ .employee-login-btn {
3108
+ background-color: #0078D4; /* Microsoft Blue */
3109
+ color: white;
3110
+ padding: 10px 20px; /* Larger size */
3111
+ font-size: 16px; /* Larger text */
3112
+ border-radius: 5px; /* Rounded corners */
3113
+ width: 100%; /* Full width */
3114
+ box-sizing: border-box; /* Include padding and border in the element's width and height */
3115
+ }
3116
+
3117
+ .third-party-login-btn {
3118
+ background-color: #28a745; /* Bootstrap success green */
3119
+ color: white;
3120
+ border-radius: 5px; /* Rounded corners */
3121
+ width: 100%; /* Full width */
3122
+ box-sizing: border-box; /* Include padding and border in the element's width and height */
3123
+ margin-top: 10px;
3124
+ }
3125
+
3126
+ .third-party-login-section {
3127
+ background-color: #F3F4F6; /* Optional: Light grey background for contrast */
3128
+ border-radius: 8px; /* Optional: Rounded corners for the input form */
3129
+ }
3130
+
3131
+ .employee-login-section, .third-party-login-section {
3132
+ text-align: center;
3133
+ }
3134
+
3135
+
3089
3136
  </style>
3090
3137
  <form [formGroup]="form" novalidate>
3091
3138
  <div class="modal-header">
@@ -3109,22 +3156,59 @@ DialogLoginContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
3109
3156
  </div>
3110
3157
  <div class="col-lg-6">
3111
3158
  <div class="log-box">
3112
- <div class="loginform">
3113
- <div class="form-group">
3114
- <label>Username/Email</label>
3115
- <em *ngIf="form.controls.username.hasError('required')">- Required</em>
3116
- <input type="email" [ngClass]="['form-control', form.controls.username.valid ? 'is-valid' : 'is-invalid']" formControlName="username" [autofocus]="true" [focus]="true" aria-describedby="emailHelp" placeholder="Your Username/Email" autocomplete="username">
3117
- </div>
3118
- <div class="form-group">
3119
- <label>Password</label>
3120
- <em *ngIf="form.controls.password.hasError('required')">- Required</em>
3121
- <input type="password" [ngClass]="['form-control', form.controls.password.enabled ? (form.controls.password.valid ? 'is-valid' : 'is-invalid') : '']" formControlName="password" placeholder="Your Password" autocomplete="current-password">
3122
- </div>
3123
- <div class="form-check text-right">
3124
- <label class="form-check-label"><a href="javascript:void(0)" (click)="toggleForgotPassword()"> {{!form.controls.forgotPassword.value ? 'Forgot Password?' : 'Enter Password'}} </a></label>
3125
- </div>
3126
- <button type="submit" class="btn loginbtn" (click)="close('ResolveIO')">{{!form.controls.forgotPassword.value ? 'Login' : 'Submit'}}</button>
3127
- <button *ngIf="msAllowed" type="submit" class="btn login365btn" (click)="close('MS')">Microsoft Single-Sign-On</button>
3159
+ <div class="loginform" style="margin: 0px;">
3160
+ <ng-container *ngIf="!msAllowed">
3161
+ <div class="login-card">
3162
+ <h3 class="login-header">Employee/Customer Login</h3>
3163
+ <div class="third-party-login-section">
3164
+ <div class="form-group">
3165
+ <label>Username/Email</label>
3166
+ <em *ngIf="form.controls.username.hasError('required')">- Required</em>
3167
+ <input type="email" [ngClass]="['form-control', form.controls.username.valid ? 'is-valid' : 'is-invalid']" formControlName="username" [autofocus]="true" [focus]="true" aria-describedby="emailHelp" placeholder="Your Username/Email" autocomplete="username">
3168
+ </div>
3169
+ <div class="form-group">
3170
+ <label>Password</label>
3171
+ <em *ngIf="form.controls.password.hasError('required')">- Required</em>
3172
+ <input type="password" [ngClass]="['form-control', form.controls.password.enabled ? (form.controls.password.valid ? 'is-valid' : 'is-invalid') : '']" formControlName="password" placeholder="Your Password" autocomplete="current-password">
3173
+ </div>
3174
+ <div class="form-check text-right">
3175
+ <label class="form-check-label"><a href="javascript:void(0)" (click)="toggleForgotPassword()"> {{!form.controls.forgotPassword.value ? 'Forgot Password?' : 'Enter Password'}} </a></label>
3176
+ </div>
3177
+ <button type="submit" class="btn third-party-login-btn" (click)="close('ResolveIO')">{{!form.controls.forgotPassword.value ? 'Login' : 'Submit'}}</button>
3178
+ </div>
3179
+ </div>
3180
+ </ng-container>
3181
+ <ng-container *ngIf="msAllowed">
3182
+ <!-- Employee Login Section -->
3183
+ <div class="login-card">
3184
+ <h3 class="login-header">Employee Login</h3>
3185
+ <div class="employee-login-section">
3186
+ <button type="submit" class="btn employee-login-btn" (click)="close('MS')">Employee Login</button>
3187
+ </div>
3188
+ </div>
3189
+
3190
+ <!-- Third Party Login Section -->
3191
+ <div class="login-card">
3192
+ <h3 class="login-header">Third Party Login</h3>
3193
+ <div class="third-party-login-section">
3194
+ <div class="form-group">
3195
+ <label>Username/Email</label>
3196
+ <em *ngIf="form.controls.username.hasError('required')">- Required</em>
3197
+ <input type="email" [ngClass]="['form-control', form.controls.username.valid ? 'is-valid' : 'is-invalid']" formControlName="username" [autofocus]="true" [focus]="true" aria-describedby="emailHelp" placeholder="Your Username/Email" autocomplete="username">
3198
+ </div>
3199
+ <div class="form-group">
3200
+ <label>Password</label>
3201
+ <em *ngIf="form.controls.password.hasError('required')">- Required</em>
3202
+ <input type="password" [ngClass]="['form-control', form.controls.password.enabled ? (form.controls.password.valid ? 'is-valid' : 'is-invalid') : '']" formControlName="password" placeholder="Your Password" autocomplete="current-password">
3203
+ </div>
3204
+ <div class="form-check text-right">
3205
+ <label class="form-check-label"><a href="javascript:void(0)" (click)="toggleForgotPassword()"> {{!form.controls.forgotPassword.value ? 'Forgot Password?' : 'Enter Password'}} </a></label>
3206
+ </div>
3207
+ <button type="submit" class="btn third-party-login-btn" (click)="close('ResolveIO')">{{!form.controls.forgotPassword.value ? 'Login' : 'Submit'}}</button>
3208
+ </div>
3209
+ </div>
3210
+ </ng-container>
3211
+
3128
3212
  </div>
3129
3213
  </div>
3130
3214
  </div>
@@ -3138,7 +3222,7 @@ DialogLoginContent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
3138
3222
  </responsive-button-group>
3139
3223
  </div>
3140
3224
  </form>
3141
- `, isInline: true, styles: ["\n\t\t\tcollapse-table {\n\t\t\t\twidth: 100%;\n\t\t\t}\n\n\t\t\t.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {\n\t\t\t\tcolor: #0b4499;\n\t\t\t}\n\t\t\t.navbar-light .navbar-nav .nav-link {\n\t\t\t\tcolor:#333;\n\t\t\t}\n\t\t\ta.nav-link.loginreg {\n\t\t\t\tbackground-color: #0b4499;\n\t\t\t\tcolor: #fff !important;\n\t\t\t\tborder-radius: 40px;\n\t\t\t}\n\t\t\ta.nav-link.loginreg:hover {\n\t\t\t\tbackground: #1668e2;\n\t\t\t}\n\t\t\t.nav-link {\n\t\t\t\tcolor: #333333;\n\t\t\t\tfont-size: 150%\n\t\t\t}\n\t\t\t.nav-item a.nav-link.active {\n\t\t\t\tcolor: #0b4499;\n\t\t\t}\n\t\t\t.contactimg>img{\n\t\t\t\twidth: 100%;\n\t\t\t}\n\n\t\t\t.log-box {\n\t\t\t\tpadding-top: 26px;\n\t\t\t\tpadding-bottom: 26px;\n\t\t\t}\n\t\t\t.loginform .form-control, .register-form .form-control {\n\t\t\t\tcolor: #000;\n\t\t\t\theight: 52px;\n\t\t\t}\n\t\t\t.loginform {\n\t\t\t\tmargin-top: 35px;\n\t\t\t}\n\t\t\t.loginform label {\n\t\t\t\tfont-size: 18px;\n\t\t\t\tfont-weight: 600;\n\t\t\t}\n\n\t\t\t.loginbtn {\n\t\t\t\tbackground: #0b4499;\n\t\t\t\twidth: 100%;\n\t\t\t\tmargin-top: 44px;\n\t\t\t\theight: 52px;\n\t\t\t\tfont-size: 22px;\n\t\t\t\tborder-radius: 2px;\n\t\t\t\tcolor: #fff !important;\n\t\t\t}\n\n\t\t\t.login365btn {\n\t\t\t\tbackground: orange;\n\t\t\t\twidth: 100%;\n\t\t\t\tmargin-top: 44px;\n\t\t\t\theight: 52px;\n\t\t\t\tfont-size: 22px;\n\t\t\t\tborder-radius: 2px;\n\t\t\t\tcolor: #fff !important;\n\t\t\t}\n\n\t\t\t.contactimg {\n\t\t\t\tposition: relative;\n\t\t\t}\n\t\t\t.login-logo {\n\t\t\t\tmargin-bottom: 20px;\n\t\t\t}\n\n\t\t\t.textbox {\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: 50%;\n\t\t\t\tcolor: #fff;\n\t\t\t\tpadding: 40px;\n\t\t\t\ttransform: translate(0%, -50%);\n\t\t\t\ttext-align: center;\n\t\t\t}\n\t\t\t.sign-btn {\n\t\t\t\tbackground: #0b4499;\n\t\t\t\twidth: 100%;\n\t\t\t\tmargin-top: 14px;\n\t\t\t\theight: 52px;\n\t\t\t\tfont-size: 22px;\n\t\t\t\tborder-radius: 2px;\n\t\t\t\tcolor: #fff !important;\n\t\t\t}\n\n\t\t\tbutton.btn.sign-btn:hover {\n\t\t\t\tbackground: #1668e2;\n\t\t\t}\n\t\t"], dependencies: [{ kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ResponsiveButtonGroupComponent, selector: "responsive-button-group", inputs: ["collapseSize"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: FocusDirective, selector: "[focus]", inputs: ["focus"] }] });
3225
+ `, isInline: true, styles: ["\n\t\t\tcollapse-table {\n\t\t\t\twidth: 100%;\n\t\t\t}\n\n\t\t\t.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {\n\t\t\t\tcolor: #0b4499;\n\t\t\t}\n\t\t\t.navbar-light .navbar-nav .nav-link {\n\t\t\t\tcolor:#333;\n\t\t\t}\n\t\t\ta.nav-link.loginreg {\n\t\t\t\tbackground-color: #0b4499;\n\t\t\t\tcolor: #fff !important;\n\t\t\t\tborder-radius: 40px;\n\t\t\t}\n\t\t\ta.nav-link.loginreg:hover {\n\t\t\t\tbackground: #1668e2;\n\t\t\t}\n\t\t\t.nav-link {\n\t\t\t\tcolor: #333333;\n\t\t\t\tfont-size: 150%\n\t\t\t}\n\t\t\t.nav-item a.nav-link.active {\n\t\t\t\tcolor: #0b4499;\n\t\t\t}\n\t\t\t.contactimg>img{\n\t\t\t\twidth: 100%;\n\t\t\t}\n\n\t\t\t.log-box {\n\t\t\t\tpadding-top: 0px;\n\t\t\t\tpadding-bottom: 26px;\n\t\t\t}\n\t\t\t.loginform .form-control, .register-form .form-control {\n\t\t\t\tcolor: #000;\n\t\t\t\theight: 52px;\n\t\t\t}\n\t\t\t.loginform {\n\t\t\t\tmargin-top: 35px;\n\t\t\t}\n\t\t\t.loginform label {\n\t\t\t\tfont-size: 18px;\n\t\t\t\tfont-weight: 600;\n\t\t\t}\n\n\t\t\t.loginbtn {\n\t\t\t\tbackground: #0b4499;\n\t\t\t\twidth: 100%;\n\t\t\t\tmargin-top: 44px;\n\t\t\t\theight: 52px;\n\t\t\t\tfont-size: 22px;\n\t\t\t\tborder-radius: 2px;\n\t\t\t\tcolor: #fff !important;\n\t\t\t}\n\n\t\t\t.login365btn {\n\t\t\t\tbackground: orange;\n\t\t\t\twidth: 100%;\n\t\t\t\tmargin-top: 44px;\n\t\t\t\theight: 52px;\n\t\t\t\tfont-size: 22px;\n\t\t\t\tborder-radius: 2px;\n\t\t\t\tcolor: #fff !important;\n\t\t\t}\n\n\t\t\t.contactimg {\n\t\t\t\tposition: relative;\n\t\t\t}\n\t\t\t.login-logo {\n\t\t\t\tmargin-bottom: 20px;\n\t\t\t}\n\n\t\t\t.textbox {\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: 50%;\n\t\t\t\tcolor: #fff;\n\t\t\t\tpadding: 40px;\n\t\t\t\ttransform: translate(0%, -50%);\n\t\t\t\ttext-align: center;\n\t\t\t}\n\t\t\t.sign-btn {\n\t\t\t\tbackground: #0b4499;\n\t\t\t\twidth: 100%;\n\t\t\t\tmargin-top: 14px;\n\t\t\t\theight: 52px;\n\t\t\t\tfont-size: 22px;\n\t\t\t\tborder-radius: 2px;\n\t\t\t\tcolor: #fff !important;\n\t\t\t}\n\n\t\t\tbutton.btn.sign-btn:hover {\n\t\t\t\tbackground: #1668e2;\n\t\t\t}\n\t\t\t\n\t\t\t.login-card {\n\t\t\t\tmargin-bottom: 20px;\n\t\t\t\tpadding: 20px;\n\t\t\t\tpadding-top: 10px;\n\t\t\t\tborder-radius: 8px;\n\t\t\t\tbox-shadow: 0 4px 8px rgba(0,0,0,0.2), 0 6px 20px rgba(0,0,0,0.19); /* Enhanced shadow */\n\t\t\t\tbackground-color: #FFFFFF;\n\t\t\t}\n\t\t\t\n\t\t\t.login-header {\n\t\t\t\tfont-size: 20px;\n\t\t\t\tfont-weight: bold;\n\t\t\t\tcolor: #333;\n\t\t\t\tmargin-bottom: 15px;\n\t\t\t\ttext-align: center;\n\t\t\t}\n\t\t\t\n\t\t\t.employee-login-btn {\n\t\t\t\tbackground-color: #0078D4; /* Microsoft Blue */\n\t\t\t\tcolor: white;\n\t\t\t\tpadding: 10px 20px; /* Larger size */\n\t\t\t\tfont-size: 16px; /* Larger text */\n\t\t\t\tborder-radius: 5px; /* Rounded corners */\n\t\t\t\twidth: 100%; /* Full width */\n\t\t\t\tbox-sizing: border-box; /* Include padding and border in the element's width and height */\n\t\t\t}\n\t\t\t\n\t\t\t.third-party-login-btn {\n\t\t\t\tbackground-color: #28a745; /* Bootstrap success green */\n\t\t\t\tcolor: white;\n\t\t\t\tborder-radius: 5px; /* Rounded corners */\n\t\t\t\twidth: 100%; /* Full width */\n\t\t\t\tbox-sizing: border-box; /* Include padding and border in the element's width and height */\n\t\t\t\tmargin-top: 10px;\n\t\t\t}\n\t\t\t\n\t\t\t.third-party-login-section {\n\t\t\t\tbackground-color: #F3F4F6; /* Optional: Light grey background for contrast */\n\t\t\t\tborder-radius: 8px; /* Optional: Rounded corners for the input form */\n\t\t\t}\n\t\t\t\n\t\t\t.employee-login-section, .third-party-login-section {\n\t\t\t\ttext-align: center;\n\t\t\t}\n\t\t\t\n\t\t\t\n\t\t"], dependencies: [{ kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ResponsiveButtonGroupComponent, selector: "responsive-button-group", inputs: ["collapseSize"] }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: FocusDirective, selector: "[focus]", inputs: ["focus"] }] });
3142
3226
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialogLoginContent, decorators: [{
3143
3227
  type: Component,
3144
3228
  args: [{
@@ -3174,7 +3258,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
3174
3258
  }
3175
3259
 
3176
3260
  .log-box {
3177
- padding-top: 26px;
3261
+ padding-top: 0px;
3178
3262
  padding-bottom: 26px;
3179
3263
  }
3180
3264
  .loginform .form-control, .register-form .form-control {
@@ -3237,6 +3321,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
3237
3321
  button.btn.sign-btn:hover {
3238
3322
  background: #1668e2;
3239
3323
  }
3324
+
3325
+ .login-card {
3326
+ margin-bottom: 20px;
3327
+ padding: 20px;
3328
+ padding-top: 10px;
3329
+ border-radius: 8px;
3330
+ box-shadow: 0 4px 8px rgba(0,0,0,0.2), 0 6px 20px rgba(0,0,0,0.19); /* Enhanced shadow */
3331
+ background-color: #FFFFFF;
3332
+ }
3333
+
3334
+ .login-header {
3335
+ font-size: 20px;
3336
+ font-weight: bold;
3337
+ color: #333;
3338
+ margin-bottom: 15px;
3339
+ text-align: center;
3340
+ }
3341
+
3342
+ .employee-login-btn {
3343
+ background-color: #0078D4; /* Microsoft Blue */
3344
+ color: white;
3345
+ padding: 10px 20px; /* Larger size */
3346
+ font-size: 16px; /* Larger text */
3347
+ border-radius: 5px; /* Rounded corners */
3348
+ width: 100%; /* Full width */
3349
+ box-sizing: border-box; /* Include padding and border in the element's width and height */
3350
+ }
3351
+
3352
+ .third-party-login-btn {
3353
+ background-color: #28a745; /* Bootstrap success green */
3354
+ color: white;
3355
+ border-radius: 5px; /* Rounded corners */
3356
+ width: 100%; /* Full width */
3357
+ box-sizing: border-box; /* Include padding and border in the element's width and height */
3358
+ margin-top: 10px;
3359
+ }
3360
+
3361
+ .third-party-login-section {
3362
+ background-color: #F3F4F6; /* Optional: Light grey background for contrast */
3363
+ border-radius: 8px; /* Optional: Rounded corners for the input form */
3364
+ }
3365
+
3366
+ .employee-login-section, .third-party-login-section {
3367
+ text-align: center;
3368
+ }
3369
+
3370
+
3240
3371
  </style>
3241
3372
  <form [formGroup]="form" novalidate>
3242
3373
  <div class="modal-header">
@@ -3260,22 +3391,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
3260
3391
  </div>
3261
3392
  <div class="col-lg-6">
3262
3393
  <div class="log-box">
3263
- <div class="loginform">
3264
- <div class="form-group">
3265
- <label>Username/Email</label>
3266
- <em *ngIf="form.controls.username.hasError('required')">- Required</em>
3267
- <input type="email" [ngClass]="['form-control', form.controls.username.valid ? 'is-valid' : 'is-invalid']" formControlName="username" [autofocus]="true" [focus]="true" aria-describedby="emailHelp" placeholder="Your Username/Email" autocomplete="username">
3268
- </div>
3269
- <div class="form-group">
3270
- <label>Password</label>
3271
- <em *ngIf="form.controls.password.hasError('required')">- Required</em>
3272
- <input type="password" [ngClass]="['form-control', form.controls.password.enabled ? (form.controls.password.valid ? 'is-valid' : 'is-invalid') : '']" formControlName="password" placeholder="Your Password" autocomplete="current-password">
3273
- </div>
3274
- <div class="form-check text-right">
3275
- <label class="form-check-label"><a href="javascript:void(0)" (click)="toggleForgotPassword()"> {{!form.controls.forgotPassword.value ? 'Forgot Password?' : 'Enter Password'}} </a></label>
3276
- </div>
3277
- <button type="submit" class="btn loginbtn" (click)="close('ResolveIO')">{{!form.controls.forgotPassword.value ? 'Login' : 'Submit'}}</button>
3278
- <button *ngIf="msAllowed" type="submit" class="btn login365btn" (click)="close('MS')">Microsoft Single-Sign-On</button>
3394
+ <div class="loginform" style="margin: 0px;">
3395
+ <ng-container *ngIf="!msAllowed">
3396
+ <div class="login-card">
3397
+ <h3 class="login-header">Employee/Customer Login</h3>
3398
+ <div class="third-party-login-section">
3399
+ <div class="form-group">
3400
+ <label>Username/Email</label>
3401
+ <em *ngIf="form.controls.username.hasError('required')">- Required</em>
3402
+ <input type="email" [ngClass]="['form-control', form.controls.username.valid ? 'is-valid' : 'is-invalid']" formControlName="username" [autofocus]="true" [focus]="true" aria-describedby="emailHelp" placeholder="Your Username/Email" autocomplete="username">
3403
+ </div>
3404
+ <div class="form-group">
3405
+ <label>Password</label>
3406
+ <em *ngIf="form.controls.password.hasError('required')">- Required</em>
3407
+ <input type="password" [ngClass]="['form-control', form.controls.password.enabled ? (form.controls.password.valid ? 'is-valid' : 'is-invalid') : '']" formControlName="password" placeholder="Your Password" autocomplete="current-password">
3408
+ </div>
3409
+ <div class="form-check text-right">
3410
+ <label class="form-check-label"><a href="javascript:void(0)" (click)="toggleForgotPassword()"> {{!form.controls.forgotPassword.value ? 'Forgot Password?' : 'Enter Password'}} </a></label>
3411
+ </div>
3412
+ <button type="submit" class="btn third-party-login-btn" (click)="close('ResolveIO')">{{!form.controls.forgotPassword.value ? 'Login' : 'Submit'}}</button>
3413
+ </div>
3414
+ </div>
3415
+ </ng-container>
3416
+ <ng-container *ngIf="msAllowed">
3417
+ <!-- Employee Login Section -->
3418
+ <div class="login-card">
3419
+ <h3 class="login-header">Employee Login</h3>
3420
+ <div class="employee-login-section">
3421
+ <button type="submit" class="btn employee-login-btn" (click)="close('MS')">Employee Login</button>
3422
+ </div>
3423
+ </div>
3424
+
3425
+ <!-- Third Party Login Section -->
3426
+ <div class="login-card">
3427
+ <h3 class="login-header">Third Party Login</h3>
3428
+ <div class="third-party-login-section">
3429
+ <div class="form-group">
3430
+ <label>Username/Email</label>
3431
+ <em *ngIf="form.controls.username.hasError('required')">- Required</em>
3432
+ <input type="email" [ngClass]="['form-control', form.controls.username.valid ? 'is-valid' : 'is-invalid']" formControlName="username" [autofocus]="true" [focus]="true" aria-describedby="emailHelp" placeholder="Your Username/Email" autocomplete="username">
3433
+ </div>
3434
+ <div class="form-group">
3435
+ <label>Password</label>
3436
+ <em *ngIf="form.controls.password.hasError('required')">- Required</em>
3437
+ <input type="password" [ngClass]="['form-control', form.controls.password.enabled ? (form.controls.password.valid ? 'is-valid' : 'is-invalid') : '']" formControlName="password" placeholder="Your Password" autocomplete="current-password">
3438
+ </div>
3439
+ <div class="form-check text-right">
3440
+ <label class="form-check-label"><a href="javascript:void(0)" (click)="toggleForgotPassword()"> {{!form.controls.forgotPassword.value ? 'Forgot Password?' : 'Enter Password'}} </a></label>
3441
+ </div>
3442
+ <button type="submit" class="btn third-party-login-btn" (click)="close('ResolveIO')">{{!form.controls.forgotPassword.value ? 'Login' : 'Submit'}}</button>
3443
+ </div>
3444
+ </div>
3445
+ </ng-container>
3446
+
3279
3447
  </div>
3280
3448
  </div>
3281
3449
  </div>