Merge pull request #14022 from mtsymbarov-del/fix/email-validation

Fixed validation for "Email" fields

ui-ngx/src/app/core/utils.ts

@@ -33,8 +33,10 @@ import {
 } from '@shared/models/js-function.models';
 import { DomSanitizer } from '@angular/platform-browser';
 import { SecurityContext } from '@angular/core';
+import { AbstractControl, ValidationErrors, Validators } from '@angular/forms';
 
 const varsRegex = /\${([^}]*)}/g;
+const emailRegex = /^[A-Z0-9_!#$%&'*+/=?`{|}~^.-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
 
 export function onParentScrollOrWindowResize(el: Node): Observable<Event> {
   const scrollSubject = new Subject<Event>();
@@ -988,3 +990,8 @@ export const trimDefaultValues = (input: Record<string, any>, defaults: Record<s
 
   return result;
 }
+
+export const validateEmail = (control: AbstractControl): ValidationErrors | null => {
+  return emailRegex.test(control.value) ? null : {email: true};
+};
+

ui-ngx/src/app/modules/home/components/entity/contact-based.component.ts

@@ -24,6 +24,7 @@ import { EntityComponent } from './entity.component';
 import { EntityTableConfig } from '@home/models/entity/entities-table-config.models';
 import { CountryData } from '@shared/models/country.models';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { validateEmail } from '@app/core/utils';
 
 @Directive()
 export abstract class ContactBasedComponent<T extends ContactBased<HasId>> extends EntityComponent<T> implements AfterViewInit {
@@ -50,7 +51,7 @@ export abstract class ContactBasedComponent<T extends ContactBased<HasId>> exten
     entityForm.addControl('address', this.fb.control(entity ? entity.address : '', []));
     entityForm.addControl('address2', this.fb.control(entity ? entity.address2 : '', []));
     entityForm.addControl('phone', this.fb.control(entity ? entity.phone : '', [Validators.maxLength(255)]));
-    entityForm.addControl('email', this.fb.control(entity ? entity.email : '', [Validators.email]));
+    entityForm.addControl('email', this.fb.control(entity ? entity.email : '', [validateEmail]));
     return entityForm;
   }
 

ui-ngx/src/app/modules/home/pages/admin/security-settings.component.html

@@ -45,6 +45,9 @@
             <mat-label translate>admin.user-lockout-notification-email</mat-label>
             <input matInput type="email"
                    formControlName="userLockoutNotificationEmail"/>
+            <mat-error *ngIf="securitySettingsFormGroup.get('userLockoutNotificationEmail').invalid">
+              {{ 'login.invalid-email-format' | translate }}
+            </mat-error>
           </mat-form-field>
           <mat-form-field class="mat-block">
             <mat-label translate>admin.user-activation-token-ttl</mat-label>

ui-ngx/src/app/modules/home/pages/admin/security-settings.component.ts

@@ -32,7 +32,7 @@ import { JwtSettings, SecuritySettings } from '@shared/models/settings.models';
 import { AdminService } from '@core/http/admin.service';
 import { HasConfirmForm } from '@core/guards/confirm-on-exit.guard';
 import { mergeMap, tap } from 'rxjs/operators';
-import { randomAlphanumeric } from '@core/utils';
+import { randomAlphanumeric, validateEmail } from '@core/utils';
 import { AuthService } from '@core/auth/auth.service';
 import { DialogService } from '@core/services/dialog.service';
 import { TranslateService } from '@ngx-translate/core';
@@ -76,7 +76,7 @@ export class SecuritySettingsComponent extends PageComponent implements HasConfi
   buildSecuritySettingsForm() {
     this.securitySettingsFormGroup = this.fb.group({
       maxFailedLoginAttempts: [null, [Validators.min(0)]],
-      userLockoutNotificationEmail: ['', []],
+      userLockoutNotificationEmail: ['', [validateEmail]],
       userActivationTokenTtl: [24, [Validators.required, Validators.min(1), Validators.max(24)]],
       passwordResetTokenTtl: [24, [Validators.required, Validators.min(1), Validators.max(24)]],
       mobileSecretKeyLength: [null, [Validators.min(1)]],

ui-ngx/src/app/modules/home/pages/profile/profile.component.html

@@ -37,7 +37,7 @@
         <fieldset [disabled]="isLoading$ | async">
           <mat-form-field class="mat-block">
             <mat-label translate>user.email</mat-label>
-            <input matInput type="email" formControlName="email" required/>
+            <input matInput type="email" formControlName="email"/>
             <mat-error *ngIf="profile.get('email').hasError('required')">
               {{ 'user.email-required' | translate }}
             </mat-error>

ui-ngx/src/app/modules/home/pages/profile/profile.component.ts

@@ -28,7 +28,7 @@ import { environment as env } from '@env/environment';
 import { TranslateService } from '@ngx-translate/core';
 import { ActionSettingsChangeLanguage } from '@core/settings/settings.actions';
 import { ActivatedRoute } from '@angular/router';
-import { isDefinedAndNotNull, isNotEmptyStr } from '@core/utils';
+import { isDefinedAndNotNull, isNotEmptyStr, validateEmail } from '@core/utils';
 import { getCurrentAuthUser } from '@core/auth/auth.selectors';
 import { AuthService } from '@core/auth/auth.service';
 import { UnitSystem, UnitSystems } from '@shared/models/unit.models';
@@ -66,7 +66,7 @@ export class ProfileComponent extends PageComponent implements OnInit, HasConfir
 
   private buildProfileForm() {
     this.profile = this.fb.group({
-      email: ['', [Validators.required, Validators.email]],
+      email: ['', [Validators.required, validateEmail]],
       firstName: [''],
       lastName: [''],
       phone: [''],

ui-ngx/src/app/modules/home/pages/security/authentication-dialog/email-auth-dialog.component.html

@@ -39,7 +39,7 @@
         <div class="flex flex-row items-center justify-between gap-2">
           <mat-form-field class="mat-block input-container flex-1">
             <input matInput formControlName="email"
-                   type="email" required
+                   type="email"
                    placeholder="{{ 'security.2fa.dialog.email-step-label' | translate }}" />
             <mat-error *ngIf="emailConfigForm.get('email').hasError('required')">
               {{ 'user.email-required' | translate }}

ui-ngx/src/app/modules/home/pages/security/authentication-dialog/email-auth-dialog.component.ts

@@ -28,6 +28,7 @@ import {
   TwoFactorAuthProviderType
 } from '@shared/models/two-factor-auth.models';
 import { MatStepper } from '@angular/material/stepper';
+import { validateEmail } from '@app/core/utils';
 
 export interface EmailAuthDialogData {
   email: string;
@@ -57,7 +58,7 @@ export class EmailAuthDialogComponent extends DialogComponent<EmailAuthDialogCom
     super(store, router, dialogRef);
 
     this.emailConfigForm = this.fb.group({
-      email: [this.data.email, [Validators.required, Validators.email]]
+      email: [this.data.email, [Validators.required, validateEmail]]
     });
 
     this.emailVerificationForm = this.fb.group({

ui-ngx/src/app/modules/home/pages/user/user.component.html

@@ -76,7 +76,7 @@
     <fieldset [disabled]="(isLoading$ | async) || !isEdit">
       <mat-form-field class="mat-block">
         <mat-label translate>user.email</mat-label>
-        <input matInput type="email" formControlName="email" required>
+        <input matInput type="email" formControlName="email">
         <mat-error *ngIf="entityForm.get('email').hasError('email')">
           {{ 'user.invalid-email-format' | translate }}
         </mat-error>

ui-ngx/src/app/modules/home/pages/user/user.component.ts

@@ -23,7 +23,7 @@ import { User } from '@shared/models/user.model';
 import { selectAuth } from '@core/auth/auth.selectors';
 import { map } from 'rxjs/operators';
 import { Authority } from '@shared/models/authority.enum';
-import { isDefinedAndNotNull } from '@core/utils';
+import { isDefinedAndNotNull, validateEmail } from '@core/utils';
 import { EntityTableConfig } from '@home/models/entity/entities-table-config.models';
 import { ActionNotificationShow } from '@app/core/notification/notification.actions';
 import { TranslateService } from '@ngx-translate/core';
@@ -33,7 +33,7 @@ import { TranslateService } from '@ngx-translate/core';
   templateUrl: './user.component.html',
   styleUrls: ['./user.component.scss']
 })
-export class UserComponent extends EntityComponent<User> {
+export class UserComponent extends EntityComponent<User>{
 
   authority = Authority;
 
@@ -70,7 +70,7 @@ export class UserComponent extends EntityComponent<User> {
   buildForm(entity: User): UntypedFormGroup {
     return this.fb.group(
       {
-        email: [entity ? entity.email : '', [Validators.required, Validators.email]],
+        email: [entity ? entity.email : '', [Validators.required, validateEmail]],
         firstName: [entity ? entity.firstName : ''],
         lastName: [entity ? entity.lastName : ''],
         phone: [entity ? entity.phone : ''],

ui-ngx/src/app/modules/login/pages/login/login.component.html

@@ -43,7 +43,7 @@
             </div>
             <mat-form-field class="tb-appearance-transparent">
               <mat-label translate>login.username</mat-label>
-              <input id="username-input" matInput type="email" autofocus formControlName="username" email required/>
+              <input id="username-input" matInput type="email" autofocus formControlName="username"/>
               <mat-icon matPrefix>email</mat-icon>
               <mat-error *ngIf="loginFormGroup.get('username').invalid">
                 {{ 'login.invalid-email-format' | translate }}

ui-ngx/src/app/modules/login/pages/login/login.component.ts

@@ -19,11 +19,12 @@ import { AuthService } from '@core/auth/auth.service';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { PageComponent } from '@shared/components/page.component';
-import { UntypedFormBuilder } from '@angular/forms';
+import { UntypedFormBuilder, Validators } from '@angular/forms';
 import { HttpErrorResponse } from '@angular/common/http';
 import { Constants } from '@shared/models/constants';
 import { Router } from '@angular/router';
 import { OAuth2ClientLoginInfo } from '@shared/models/oauth2.models';
+import { validateEmail } from '@app/core/utils';
 
 @Component({
   selector: 'tb-login',
@@ -35,8 +36,8 @@ export class LoginComponent extends PageComponent implements OnInit {
   passwordViolation = false;
 
   loginFormGroup = this.fb.group({
-    username: '',
+    username: ['', [Validators.required, validateEmail]],
-    password: ''
+    password: ['']
   });
   oauth2Clients: Array<OAuth2ClientLoginInfo> = null;
 

ui-ngx/src/app/modules/login/pages/login/reset-password-request.component.html

@@ -33,7 +33,7 @@
             <span style="height: 50px;"></span>
             <mat-form-field class="mat-block tb-appearance-transparent" hideRequiredMarker>
               <mat-label translate>login.email</mat-label>
-              <input matInput type="email" autofocus formControlName="email" email required/>
+              <input matInput type="email" autofocus formControlName="email"/>
               <mat-icon class="material-icons" matPrefix>email</mat-icon>
               <mat-error *ngIf="requestPasswordRequest.get('email').invalid">
                 {{ 'user.invalid-email-format' | translate }}

ui-ngx/src/app/modules/login/pages/login/reset-password-request.component.ts

@@ -22,6 +22,7 @@ import { PageComponent } from '@shared/components/page.component';
 import { UntypedFormBuilder, Validators } from '@angular/forms';
 import { ActionNotificationShow } from '@core/notification/notification.actions';
 import { TranslateService } from '@ngx-translate/core';
+import { validateEmail } from '@app/core/utils';
 
 @Component({
   selector: 'tb-reset-password-request',
@@ -33,7 +34,7 @@ export class ResetPasswordRequestComponent extends PageComponent implements OnIn
   clicked: boolean = false;
 
   requestPasswordRequest = this.fb.group({
-    email: ['', [Validators.email, Validators.required]]
+    email: ['', [Validators.required, validateEmail]],
   }, {updateOn: 'submit'});
 
   constructor(protected store: Store<AppState>,