Add username validator.

npm/ng-packs/packages/core/src/lib/utils/common-utils.ts

@@ -11,6 +11,10 @@ export function isNullOrUndefined(obj) {
   return obj === null || obj === undefined;
 }
 
+export function isNullOrEmpty(obj){
+  return obj === null || obj === undefined || obj === '';
+}
+
 export function exists(obj) {
   return !isNullOrUndefined(obj);
 }

npm/ng-packs/packages/core/src/lib/validators/index.ts

@@ -5,6 +5,7 @@ import { validateRange } from './range.validator';
 import { validateRequired } from './required.validator';
 import { validateStringLength } from './string-length.validator';
 import { validateUrl } from './url.validator';
+import { validateUsername } from './username.validator';
 export * from './age.validator';
 export * from './credit-card.validator';
 export * from './range.validator';
@@ -20,4 +21,5 @@ export const AbpValidators = {
   required: validateRequired,
   stringLength: validateStringLength,
   url: validateUrl,
+  username: validateUsername,
 };

npm/ng-packs/packages/core/src/lib/validators/url.validator.ts

@@ -1,4 +1,5 @@
 import { AbstractControl, ValidatorFn } from '@angular/forms';
+import { isNullOrUndefined } from '../utils';
 
 export interface UrlError {
   url: true;
@@ -6,11 +7,11 @@ export interface UrlError {
 
 export function validateUrl(): ValidatorFn {
   return (control: AbstractControl): UrlError | null => {
-    if (['', null, undefined].indexOf(control.value) > -1) return null;
+    if (isNullOrUndefined(control.value)) return null;
 
     return isValidUrl(control.value) ? null : { url: true };
   };
-}
+}  
 
 function isValidUrl(value: string): boolean {
   if (/^http(s)?:\/\/[^/]/.test(value) || /^ftp:\/\/[^/]/.test(value)) {

npm/ng-packs/packages/core/src/lib/validators/username.validator.ts

@@ -0,0 +1,29 @@
+import {AbstractControl, ValidatorFn} from '@angular/forms';
+import { isNullOrEmpty } from '../utils';
+
+export interface UsernamePatternError {
+  usernamePattern: {
+    actualValue:string;
+  };
+}
+
+export interface UsernameOptions {
+  pattern?: RegExp;
+}
+
+const onlyLetterAndNumberRegex = /^[a-zA-Z0-9]+$/;
+
+export function validateUsername(
+  {pattern}: UsernameOptions = {pattern: onlyLetterAndNumberRegex},
+): ValidatorFn {
+  return (control: AbstractControl): UsernamePatternError | null => {
+    const isValid = isValidUserName(control.value, pattern);
+    return isValid ? null : {usernamePattern: {actualValue: control.value}};
+  };
+}
+
+function isValidUserName(value: any, pattern: RegExp): boolean {
+  if (isNullOrEmpty(value)) return true;
+
+  return pattern.test(value);
+}

npm/ng-packs/packages/identity/src/lib/components/users/users.component.html

@@ -39,7 +39,7 @@
       ><div class="text-center"><i class="fa fa-pulse fa-spinner"></i></div
     ></ng-template>
 
-    <form *ngIf="form; else loaderRef" [blueprints]="blueprints" [formGroup]="form" (ngSubmit)="save()">
+    <form *ngIf="form; else loaderRef" [formGroup]="form" (ngSubmit)="save()">
       <ul ngbNav #nav="ngbNav" class="nav-tabs">
         <li ngbNavItem>
           <a ngbNavLink>{{ 'AbpIdentity::UserInformations' | abpLocalization }}</a>

npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts

@@ -61,9 +61,6 @@ export class UsersComponent implements OnInit {
 
   entityDisplayName: string;
 
-  blueprints = { pattern: 'AbpIdentity::Volo.Abp.Identity:InvalidUserName[{{ actualValue }}]' };
-
-
   trackByFn: TrackByFunction<AbstractControl> = (index, item) => Object.keys(item)[0] || index;
 
   onVisiblePermissionChange = event => {

npm/ng-packs/packages/identity/src/lib/defaults/default-users-form-props.ts

@@ -1,9 +1,9 @@
 import { IdentityUserDto } from '@abp/ng.identity/proxy';
 import { getPasswordValidators } from '@abp/ng.theme.shared';
 import { ePropType, FormProp } from '@abp/ng.theme.shared/extensions';
-import { Validators } from '@angular/forms';
+import { Validators } from '@angular/forms'
+import { AbpValidators } from '@abp/ng.core';
 
-const onlyLetterAndNumberRegex = /^[a-zA-Z0-9]+$/;
 
 export const DEFAULT_USERS_CREATE_FORM_PROPS = FormProp.createMany<IdentityUserDto>([
   {
@@ -11,7 +11,7 @@ export const DEFAULT_USERS_CREATE_FORM_PROPS = FormProp.createMany<IdentityUserD
     name: 'userName',
     displayName: 'AbpIdentity::UserName',
     id: 'user-name',
-    validators: () => [Validators.required, Validators.maxLength(256), Validators.pattern(onlyLetterAndNumberRegex)],
+    validators: () => [Validators.required, Validators.maxLength(256), AbpValidators.username()],
   },
   {
     type: ePropType.Password,

npm/ng-packs/packages/theme-shared/src/lib/constants/validation.ts

@@ -17,4 +17,5 @@ export const DEFAULT_VALIDATION_BLUEPRINTS = {
   passwordRequiresUpper: 'AbpIdentity::Volo.Abp.Identity:PasswordRequiresUpper',
   passwordRequiresDigit: 'AbpIdentity::Volo.Abp.Identity:PasswordRequiresDigit',
   passwordRequiresNonAlphanumeric: 'AbpIdentity::Volo.Abp.Identity:PasswordRequiresNonAlphanumeric',
+  usernamePattern: 'AbpIdentity::Volo.Abp.Identity:InvalidUserName[{{ actualValue }}]',
 };