From 7f93fd261e69a0998e896418856e976e784f203b Mon Sep 17 00:00:00 2001
From: Mahmut Gundogdu <mahmutgundogdu@hotmail.com.tr>
Date: Mon, 15 Aug 2022 17:34:53 +0300
Subject: [PATCH 01/13] Add Custom Component Feature to ExtensibleForm.

---
 .../account/src/lib/account-routing.module.ts |  4 +-
 .../account/src/lib/account.module.ts         | 13 +++-
 ...xtensible-personal-settings.component.html |  5 ++
 ...xtensible-personal-settings.component.scss |  0
 ...nsible-personal-settings.component.spec.ts | 24 +++++++
 .../extensible-personal-settings.component.ts | 42 +++++++++++
 .../lib/components/hello/hello.component.ts   | 15 ++++
 .../default-personal-settings-form-props.ts   | 15 ++++
 .../src/lib/guards/extensions.guard.ts        | 42 +++++++++++
 .../packages/account/src/lib/guards/index.ts  |  1 +
 .../account/src/lib/models/config-options.ts  | 11 +++
 .../src/lib/tokens/extensions.token.ts        | 17 +++++
 .../packages/account/src/lib/tokens/index.ts  |  1 +
 .../extensible-form-prop.component.html       |  6 ++
 .../extensible-form-prop.component.ts         | 71 ++++++++++++-------
 .../extensible-table.component.ts             |  9 +--
 .../extensions/src/lib/models/form-props.ts   |  2 +
 .../extensions/src/lib/models/props.ts        |  1 +
 .../src/lib/tokens/extensions.token.ts        |  3 +
 19 files changed, 250 insertions(+), 32 deletions(-)
 create mode 100644 npm/ng-packs/packages/account/src/lib/components/extensible-personal-settings/extensible-personal-settings.component.html
 create mode 100644 npm/ng-packs/packages/account/src/lib/components/extensible-personal-settings/extensible-personal-settings.component.scss
 create mode 100644 npm/ng-packs/packages/account/src/lib/components/extensible-personal-settings/extensible-personal-settings.component.spec.ts
 create mode 100644 npm/ng-packs/packages/account/src/lib/components/extensible-personal-settings/extensible-personal-settings.component.ts
 create mode 100644 npm/ng-packs/packages/account/src/lib/components/hello/hello.component.ts
 create mode 100644 npm/ng-packs/packages/account/src/lib/defaults/default-personal-settings-form-props.ts
 create mode 100644 npm/ng-packs/packages/account/src/lib/guards/extensions.guard.ts
 create mode 100644 npm/ng-packs/packages/account/src/lib/tokens/extensions.token.ts

diff --git a/npm/ng-packs/packages/account/src/lib/account-routing.module.ts b/npm/ng-packs/packages/account/src/lib/account-routing.module.ts
index c09dede3cb..e4b18a717b 100644
--- a/npm/ng-packs/packages/account/src/lib/account-routing.module.ts
+++ b/npm/ng-packs/packages/account/src/lib/account-routing.module.ts
@@ -13,6 +13,8 @@ import { RegisterComponent } from './components/register/register.component';
 import { ResetPasswordComponent } from './components/reset-password/reset-password.component';
 import { eAccountComponents } from './enums/components';
 import { AuthenticationFlowGuard } from './guards/authentication-flow.guard';
+import { AccountExtensionsGuard } from './guards';
+
 
 const routes: Routes = [
   { path: '', pathMatch: 'full', redirectTo: 'login' },
@@ -68,7 +70,7 @@ const routes: Routes = [
       {
         path: 'manage',
         component: ReplaceableRouteContainerComponent,
-        canActivate: [AuthGuard],
+        canActivate: [AuthGuard, AccountExtensionsGuard],
         data: {
           replaceableComponent: {
             key: eAccountComponents.ManageProfile,
diff --git a/npm/ng-packs/packages/account/src/lib/account.module.ts b/npm/ng-packs/packages/account/src/lib/account.module.ts
index bfa37d4bfa..26f71ef150 100644
--- a/npm/ng-packs/packages/account/src/lib/account.module.ts
+++ b/npm/ng-packs/packages/account/src/lib/account.module.ts
@@ -15,6 +15,11 @@ import { accountConfigOptionsFactory } from './utils/factory-utils';
 import { AuthenticationFlowGuard } from './guards/authentication-flow.guard';
 import { ForgotPasswordComponent } from './components/forgot-password/forgot-password.component';
 import { ResetPasswordComponent } from './components/reset-password/reset-password.component';
+import { ExtensiblePersonalSettingsComponent } from './components/extensible-personal-settings/extensible-personal-settings.component';
+import { UiExtensionsModule } from '@abp/ng.theme.shared/extensions';
+import { ACCOUNT_EDIT_FORM_PROP_CONTRIBUTORS } from './tokens/extensions.token';
+import { AccountExtensionsGuard } from './guards/extensions.guard';
+import { HelloComponent } from './components/hello/hello.component';
 
 const declarations = [
   LoginComponent,
@@ -27,13 +32,14 @@ const declarations = [
 ];
 
 @NgModule({
-  declarations: [...declarations],
+  declarations: [...declarations, ExtensiblePersonalSettingsComponent, HelloComponent],
   imports: [
     CoreModule,
     AccountRoutingModule,
     ThemeSharedModule,
     NgbDropdownModule,
     NgxValidateCoreModule,
+    UiExtensionsModule,
   ],
   exports: [...declarations],
 })
@@ -49,6 +55,11 @@ export class AccountModule {
           useFactory: accountConfigOptionsFactory,
           deps: [ACCOUNT_CONFIG_OPTIONS],
         },
+        {
+          provide: ACCOUNT_EDIT_FORM_PROP_CONTRIBUTORS,
+          useValue: options.editFormPropContributors,
+        },
+        AccountExtensionsGuard,
       ],
     };
   }
diff --git a/npm/ng-packs/packages/account/src/lib/components/extensible-personal-settings/extensible-personal-settings.component.html b/npm/ng-packs/packages/account/src/lib/components/extensible-personal-settings/extensible-personal-settings.component.html
new file mode 100644
index 0000000000..5b17770996
--- /dev/null
+++ b/npm/ng-packs/packages/account/src/lib/components/extensible-personal-settings/extensible-personal-settings.component.html
@@ -0,0 +1,5 @@
+<p>extensible-personal-settings works!</p>
+
+<form [formGroup]="form" (ngSubmit)="save()" validateOnSubmit>
+  <abp-extensible-form [selectedRecord]="selected"></abp-extensible-form>
+</form>
diff --git a/npm/ng-packs/packages/account/src/lib/components/extensible-personal-settings/extensible-personal-settings.component.scss b/npm/ng-packs/packages/account/src/lib/components/extensible-personal-settings/extensible-personal-settings.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/npm/ng-packs/packages/account/src/lib/components/extensible-personal-settings/extensible-personal-settings.component.spec.ts b/npm/ng-packs/packages/account/src/lib/components/extensible-personal-settings/extensible-personal-settings.component.spec.ts
new file mode 100644
index 0000000000..e2a2102e5a
--- /dev/null
+++ b/npm/ng-packs/packages/account/src/lib/components/extensible-personal-settings/extensible-personal-settings.component.spec.ts
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ExtensiblePersonalSettingsComponent } from './extensible-personal-settings.component';
+
+describe('ExtensiblePersonalSettingsComponent', () => {
+  let component: ExtensiblePersonalSettingsComponent;
+  let fixture: ComponentFixture<ExtensiblePersonalSettingsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ExtensiblePersonalSettingsComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ExtensiblePersonalSettingsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/npm/ng-packs/packages/account/src/lib/components/extensible-personal-settings/extensible-personal-settings.component.ts b/npm/ng-packs/packages/account/src/lib/components/extensible-personal-settings/extensible-personal-settings.component.ts
new file mode 100644
index 0000000000..0b54672cab
--- /dev/null
+++ b/npm/ng-packs/packages/account/src/lib/components/extensible-personal-settings/extensible-personal-settings.component.ts
@@ -0,0 +1,42 @@
+import {Component, Injector, OnInit} from '@angular/core';
+import {EXTENSIONS_IDENTIFIER, FormPropData, generateFormFromProps} from "@abp/ng.theme.shared/extensions";
+import { eAccountComponents } from '../../enums/components';
+import {FormBuilder, FormGroup} from "@angular/forms";
+import {ProfileService} from "@abp/ng.account.core/proxy";
+
+@Component({
+  selector: 'abp-extensible-personal-settings',
+  templateUrl: './extensible-personal-settings.component.html',
+  styleUrls: ['./extensible-personal-settings.component.scss'],
+  providers:[
+    {
+      provide: EXTENSIONS_IDENTIFIER,
+      useValue: eAccountComponents.PersonalSettings,
+    },
+  ]
+})
+export class ExtensiblePersonalSettingsComponent implements  OnInit {
+  selected = {a: 1};// hacky for triggering 'edit' mode of extensible-form
+
+  form: FormGroup;
+
+  constructor(
+    private profileService: ProfileService,
+    protected fb: FormBuilder,
+    protected injector: Injector,
+  ) {}
+
+
+  buildForm() {
+    const data = new FormPropData(this.injector, this.selected);
+    this.form = generateFormFromProps(data);
+  }
+
+  ngOnInit(): void {
+    this.buildForm()
+  }
+
+  save() {
+
+  }
+}
diff --git a/npm/ng-packs/packages/account/src/lib/components/hello/hello.component.ts b/npm/ng-packs/packages/account/src/lib/components/hello/hello.component.ts
new file mode 100644
index 0000000000..2fc59314aa
--- /dev/null
+++ b/npm/ng-packs/packages/account/src/lib/components/hello/hello.component.ts
@@ -0,0 +1,15 @@
+import {Component, Inject } from '@angular/core';
+import {FORM_PROP_DATA_STREAM, FormProp} from "@abp/ng.theme.shared/extensions";
+
+@Component({
+  selector: 'abp-hello',
+  template: `<p>hello works! {{name | abpLocalization}}</p>`,
+  styles: [],
+})
+export class HelloComponent  {
+  name:string;
+  constructor(@Inject(FORM_PROP_DATA_STREAM) private propData:FormProp) {
+    this.name = propData.displayName
+  }
+
+}
diff --git a/npm/ng-packs/packages/account/src/lib/defaults/default-personal-settings-form-props.ts b/npm/ng-packs/packages/account/src/lib/defaults/default-personal-settings-form-props.ts
new file mode 100644
index 0000000000..0624e074d3
--- /dev/null
+++ b/npm/ng-packs/packages/account/src/lib/defaults/default-personal-settings-form-props.ts
@@ -0,0 +1,15 @@
+import {ePropType, FormProp} from "@abp/ng.theme.shared/extensions";
+import {UpdateProfileDto} from "@abp/ng.account.core/proxy";
+import {Validators} from "@angular/forms";
+import {HelloComponent} from "../components/hello/hello.component";
+
+export const DEFAULT_PERSONAL_SETTINGS_UPDATE_FORM_PROPS = FormProp.createMany<UpdateProfileDto>([
+  {
+    type: ePropType.String,
+    name: 'userName',
+    displayName: 'Account::UserName',
+    id: 'user-name',
+    validators: () => [Validators.required, Validators.maxLength(256)],
+    template: HelloComponent
+  },
+])
diff --git a/npm/ng-packs/packages/account/src/lib/guards/extensions.guard.ts b/npm/ng-packs/packages/account/src/lib/guards/extensions.guard.ts
new file mode 100644
index 0000000000..20c4269977
--- /dev/null
+++ b/npm/ng-packs/packages/account/src/lib/guards/extensions.guard.ts
@@ -0,0 +1,42 @@
+import {Injectable, Injector} from "@angular/core";
+import {CanActivate} from "@angular/router";
+import {Observable} from "rxjs";
+import {
+  ExtensionsService,
+  getObjectExtensionEntitiesFromStore,
+  mapEntitiesToContributors, mergeWithDefaultProps
+} from "@abp/ng.theme.shared/extensions";
+ import {ConfigStateService} from "@abp/ng.core";
+import {tap, map, mapTo} from "rxjs/operators";
+import {ACCOUNT_EDIT_FORM_PROP_CONTRIBUTORS, DEFAULT_ACCOUNT_FORM_PROPS} from '../tokens/extensions.token';
+import { AccountEditFormPropContributors } from '../models/config-options';
+import { eAccountComponents } from '../enums/components';
+
+@Injectable()
+export class AccountExtensionsGuard implements CanActivate {
+  constructor(private injector: Injector) {}
+
+  canActivate(): Observable<boolean> {
+    const extensions: ExtensionsService = this.injector.get(ExtensionsService);
+
+    const editFormContributors: AccountEditFormPropContributors =
+      this.injector.get(ACCOUNT_EDIT_FORM_PROP_CONTRIBUTORS, null) || {};
+
+    const configState = this.injector.get(ConfigStateService);
+    return getObjectExtensionEntitiesFromStore(configState, 'Account').pipe(
+      map(entities => ({
+        [eAccountComponents.PersonalSettings]: entities.PersonalSettings,
+       })),
+      mapEntitiesToContributors(configState, 'AbpAccount'),
+      tap(objectExtensionContributors => {
+        mergeWithDefaultProps(
+          extensions.editFormProps,
+          DEFAULT_ACCOUNT_FORM_PROPS,
+          objectExtensionContributors.editForm,
+          editFormContributors,
+        );
+      }),
+      mapTo(true),
+    );
+  }
+}
diff --git a/npm/ng-packs/packages/account/src/lib/guards/index.ts b/npm/ng-packs/packages/account/src/lib/guards/index.ts
index 382170b2b1..275cd2f8e8 100644
--- a/npm/ng-packs/packages/account/src/lib/guards/index.ts
+++ b/npm/ng-packs/packages/account/src/lib/guards/index.ts
@@ -1 +1,2 @@
 export * from './authentication-flow.guard';
+export * from './extensions.guard';
diff --git a/npm/ng-packs/packages/account/src/lib/models/config-options.ts b/npm/ng-packs/packages/account/src/lib/models/config-options.ts
index 898021b04e..f2e603ab32 100644
--- a/npm/ng-packs/packages/account/src/lib/models/config-options.ts
+++ b/npm/ng-packs/packages/account/src/lib/models/config-options.ts
@@ -1,3 +1,14 @@
+import {eAccountComponents} from "../enums";
+import { EditFormPropContributorCallback } from '@abp/ng.theme.shared/extensions';
+import {UpdateProfileDto} from "@abp/ng.account.core/proxy";
+
 export interface AccountConfigOptions {
   redirectUrl?: string;
 }
+export type AccountEditFormPropContributors = Partial<{
+  [eAccountComponents.PersonalSettings]:  EditFormPropContributorCallback<UpdateProfileDto>[];
+}>;
+
+export interface AccountConfigOptions {
+  editFormPropContributors?: AccountEditFormPropContributors;
+}
diff --git a/npm/ng-packs/packages/account/src/lib/tokens/extensions.token.ts b/npm/ng-packs/packages/account/src/lib/tokens/extensions.token.ts
new file mode 100644
index 0000000000..6d95db8b6d
--- /dev/null
+++ b/npm/ng-packs/packages/account/src/lib/tokens/extensions.token.ts
@@ -0,0 +1,17 @@
+import {eAccountComponents} from "../enums";
+import {DEFAULT_PERSONAL_SETTINGS_UPDATE_FORM_PROPS} from "../defaults/default-personal-settings-form-props";
+import {InjectionToken} from "@angular/core";
+import {EditFormPropContributorCallback} from "@abp/ng.theme.shared/extensions";
+import {UpdateProfileDto} from "@abp/ng.account.core/proxy";
+
+export const DEFAULT_ACCOUNT_FORM_PROPS = {
+  [eAccountComponents.PersonalSettings]: DEFAULT_PERSONAL_SETTINGS_UPDATE_FORM_PROPS,
+};
+
+export const ACCOUNT_EDIT_FORM_PROP_CONTRIBUTORS = new InjectionToken<EditFormPropContributors>(
+  'ACCOUNT_EDIT_FORM_PROP_CONTRIBUTORS',
+);
+
+type EditFormPropContributors = Partial<{
+  [eAccountComponents.PersonalSettings]: EditFormPropContributorCallback<UpdateProfileDto>[];
+}>;
diff --git a/npm/ng-packs/packages/account/src/lib/tokens/index.ts b/npm/ng-packs/packages/account/src/lib/tokens/index.ts
index 0a88318130..4381d1bc77 100644
--- a/npm/ng-packs/packages/account/src/lib/tokens/index.ts
+++ b/npm/ng-packs/packages/account/src/lib/tokens/index.ts
@@ -1 +1,2 @@
 export * from './config-options.token';
+export * from './extensions.token';
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html
index 4367bd098a..67b0022be8 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html
@@ -3,6 +3,12 @@
   *abpPermission="prop.permission; runChangeDetection: false"
   [ngSwitch]="getComponent(prop)"
 >
+
+  <ng-template ngSwitchCase="template">
+    <ng-container *ngComponentOutlet="prop.template;injector:injectorForCustomComponent" >
+    </ng-container>
+  </ng-template>
+
   <ng-template ngSwitchCase="input">
     <ng-template [ngTemplateOutlet]="label"></ng-template>
     <input
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts
index fa679d3dbd..49257f34c9 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts
@@ -1,10 +1,10 @@
-import { ABP, AbpValidators, ConfigStateService, TrackByService } from '@abp/ng.core';
+import {ABP, AbpValidators, ConfigStateService, TrackByService} from '@abp/ng.core';
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
-  ElementRef,
+  ElementRef, Injector,
   Input,
   OnChanges,
   Optional,
@@ -19,17 +19,18 @@ import {
   ValidatorFn,
   Validators,
 } from '@angular/forms';
-import { NgbDateAdapter, NgbTimeAdapter } from '@ng-bootstrap/ng-bootstrap';
-import { Observable, of } from 'rxjs';
-import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
-import { DateAdapter } from '../../adapters/date.adapter';
-import { TimeAdapter } from '../../adapters/time.adapter';
-import { EXTRA_PROPERTIES_KEY } from '../../constants/extra-properties';
-import { ePropType } from '../../enums/props.enum';
-import { FormProp } from '../../models/form-props';
-import { PropData } from '../../models/props';
-import { selfFactory } from '../../utils/factory.util';
-import { addTypeaheadTextSuffix } from '../../utils/typeahead.util';
+import {NgbDateAdapter, NgbTimeAdapter} from '@ng-bootstrap/ng-bootstrap';
+import {Observable, of} from 'rxjs';
+import {debounceTime, distinctUntilChanged, switchMap} from 'rxjs/operators';
+import {DateAdapter} from '../../adapters/date.adapter';
+import {TimeAdapter} from '../../adapters/time.adapter';
+import {EXTRA_PROPERTIES_KEY} from '../../constants/extra-properties';
+import {ePropType} from '../../enums/props.enum';
+import {FormProp} from '../../models/form-props';
+import {PropData} from '../../models/props';
+import {selfFactory} from '../../utils/factory.util';
+import {addTypeaheadTextSuffix} from '../../utils/typeahead.util';
+import {FORM_PROP_DATA_STREAM} from "../../tokens/extensions.token";
 
 @Component({
   selector: 'abp-extensible-form-prop',
@@ -41,8 +42,8 @@ import { addTypeaheadTextSuffix } from '../../utils/typeahead.util';
       useFactory: selfFactory,
       deps: [[new Optional(), new SkipSelf(), ControlContainer]],
     },
-    { provide: NgbDateAdapter, useClass: DateAdapter },
-    { provide: NgbTimeAdapter, useClass: TimeAdapter },
+    {provide: NgbDateAdapter, useClass: DateAdapter},
+    {provide: NgbTimeAdapter, useClass: TimeAdapter},
   ],
 })
 export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
@@ -54,6 +55,8 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
 
   @ViewChild('field') private fieldRef!: ElementRef<HTMLElement>;
 
+  public injectorForCustomComponent: Injector
+
   asterisk = '';
 
   options$: Observable<ABP.Option<any>[]> = of([]);
@@ -62,15 +65,16 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
 
   readonly!: boolean;
 
-  disabledFn = (data:PropData) => false;
-  
-  get disabled() {
-      return this.disabledFn(this.data)
-  }
+  typeaheadModel: any;
 
   private readonly form: FormGroup;
 
-  typeaheadModel: any;
+  disabledFn = (data: PropData) => false;
+
+  get disabled() {
+    return this.disabledFn(this.data)
+  }
+
 
   setTypeaheadValue(selectedOption: ABP.Option<string>) {
     this.typeaheadModel = selectedOption || { key: null, value: null };
@@ -108,12 +112,13 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
     public readonly track: TrackByService,
     protected configState: ConfigStateService,
     groupDirective: FormGroupDirective,
+    private injector: Injector
   ) {
     this.form = groupDirective.form;
   }
 
   private getTypeaheadControls() {
-    const { name } = this.prop;
+    const {name} = this.prop;
     const extraPropName = `${EXTRA_PROPERTIES_KEY}.${name}`;
     const keyControl =
       this.form.get(addTypeaheadTextSuffix(extraPropName)) ||
@@ -133,6 +138,9 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
   }
 
   getComponent(prop: FormProp): string {
+    if (prop.template) {
+      return 'template'
+    }
     switch (prop.type) {
       case ePropType.Boolean:
         return 'checkbox';
@@ -173,13 +181,24 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
     }
   }
 
-  ngOnChanges({ prop }: SimpleChanges) {
-    const currentProp = prop?.currentValue;
-    const { options, readonly, disabled, validators } = currentProp || {};
+  ngOnChanges({prop}: SimpleChanges) {
+    const currentProp = prop?.currentValue as FormProp;
+    const {options, readonly, disabled, validators, template} = currentProp || {};
+    if (template) {
+      this.injectorForCustomComponent = Injector.create({
+        providers: [
+          {
+            provide: FORM_PROP_DATA_STREAM,
+            useValue: currentProp
+          }
+        ],
+        parent: this.injector,
+      });
+    }
 
     if (options) this.options$ = options(this.data);
     if (readonly) this.readonly = readonly(this.data);
-     
+
     if (disabled) {
       this.disabledFn = disabled;
     }
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-table/extensible-table.component.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-table/extensible-table.component.ts
index 9682188638..d3c58f0c93 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-table/extensible-table.component.ts
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-table/extensible-table.component.ts
@@ -158,15 +158,16 @@ export class ExtensibleTableComponent<R = any> implements OnChanges {
           value,
         };
         if (prop.value.component) {
-          const injector = Injector.create(
-            [
+
+          const injector = Injector.create({
+            providers: [
               {
                 provide: PROP_DATA_STREAM,
                 useValue: value,
               },
             ],
-            this.injector,
-          );
+            parent: this.injector,
+          });
           record[propKey].injector = injector;
           record[propKey].component = prop.value.component;
         }
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/form-props.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/form-props.ts
index 44b309d0c2..b607e4cb6e 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/form-props.ts
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/form-props.ts
@@ -38,6 +38,7 @@ export class FormProp<R = any> extends Prop<R> {
   readonly defaultValue: boolean | number | string | Date;
   readonly options: PropCallback<R, Observable<ABP.Option<any>[]>> | undefined;
   readonly id: string | undefined;
+  readonly template? : Type<any>
 
   constructor(options: FormPropOptions<R>) {
     super(
@@ -47,6 +48,7 @@ export class FormProp<R = any> extends Prop<R> {
       options.permission,
       options.visible,
       options.isExtra,
+      options.template
     );
 
     this.asyncValidators = options.asyncValidators || (_ => []);
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/props.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/props.ts
index 66fc4f2c67..0b26512dbc 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/props.ts
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/props.ts
@@ -33,6 +33,7 @@ export abstract class Prop<R = any> {
     public readonly permission: string,
     public readonly visible: PropPredicate<R> = _ => true,
     public readonly isExtra = false,
+    public readonly template? : Type<any>
   ) {
     this.displayName = this.displayName || this.name;
   }
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/tokens/extensions.token.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/tokens/extensions.token.ts
index d2cbbe87bd..28f26317d8 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/tokens/extensions.token.ts
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/tokens/extensions.token.ts
@@ -3,6 +3,7 @@ import { ActionCallback, ReadonlyActionData as ActionData } from '../models/acti
 import { ExtensionsService } from '../services/extensions.service';
 import { Observable } from 'rxjs';
 import { ePropType } from '../enums/props.enum';
+ import {FormProp} from "../models/form-props";
 
 export const EXTENSIONS_IDENTIFIER = new InjectionToken<string>('EXTENSIONS_IDENTIFIER');
 export type ActionKeys = Extract<'entityActions' | 'toolbarActions', keyof ExtensionsService>;
@@ -24,3 +25,5 @@ export const ENTITY_PROP_TYPE_CLASSES = new InjectionToken<EntityPropTypeClass>(
     factory: () => ({} as EntityPropTypeClass),
   },
 );
+
+export const FORM_PROP_DATA_STREAM = new InjectionToken<FormProp>('FORM_PROP_DATA_STREAM');

From 4a421e0da7dec84da25470473ad050ff840104db Mon Sep 17 00:00:00 2001
From: Mahmut Gundogdu <mahmutgundogdu@hotmail.com.tr>
Date: Tue, 16 Aug 2022 09:05:14 +0300
Subject: [PATCH 02/13] Move extensible form to personal settings component

---
 .../account/src/lib/account.module.ts         |   8 +-
 ...xtensible-personal-settings.component.html |   5 -
 ...xtensible-personal-settings.component.scss |   0
 ...nsible-personal-settings.component.spec.ts |  24 --
 .../extensible-personal-settings.component.ts |  42 ---
 .../half-row/half-row.component.ts            |  33 +++
 .../name-surname/name-surname.component.ts    |  30 +++
 .../personal-settings.component.html          |  50 +---
 .../personal-settings.component.ts            |  47 ++--
 .../default-personal-settings-form-props.ts   |  40 ++-
 .../extensible-form-prop.component.html       | 241 +++++++++---------
 .../extensible-form-prop.component.ts         |  17 +-
 12 files changed, 267 insertions(+), 270 deletions(-)
 delete mode 100644 npm/ng-packs/packages/account/src/lib/components/extensible-personal-settings/extensible-personal-settings.component.html
 delete mode 100644 npm/ng-packs/packages/account/src/lib/components/extensible-personal-settings/extensible-personal-settings.component.scss
 delete mode 100644 npm/ng-packs/packages/account/src/lib/components/extensible-personal-settings/extensible-personal-settings.component.spec.ts
 delete mode 100644 npm/ng-packs/packages/account/src/lib/components/extensible-personal-settings/extensible-personal-settings.component.ts
 create mode 100644 npm/ng-packs/packages/account/src/lib/components/personal-settings/half-row/half-row.component.ts
 create mode 100644 npm/ng-packs/packages/account/src/lib/components/personal-settings/name-surname/name-surname.component.ts

diff --git a/npm/ng-packs/packages/account/src/lib/account.module.ts b/npm/ng-packs/packages/account/src/lib/account.module.ts
index 26f71ef150..d8c88055d9 100644
--- a/npm/ng-packs/packages/account/src/lib/account.module.ts
+++ b/npm/ng-packs/packages/account/src/lib/account.module.ts
@@ -15,11 +15,11 @@ import { accountConfigOptionsFactory } from './utils/factory-utils';
 import { AuthenticationFlowGuard } from './guards/authentication-flow.guard';
 import { ForgotPasswordComponent } from './components/forgot-password/forgot-password.component';
 import { ResetPasswordComponent } from './components/reset-password/reset-password.component';
-import { ExtensiblePersonalSettingsComponent } from './components/extensible-personal-settings/extensible-personal-settings.component';
 import { UiExtensionsModule } from '@abp/ng.theme.shared/extensions';
 import { ACCOUNT_EDIT_FORM_PROP_CONTRIBUTORS } from './tokens/extensions.token';
 import { AccountExtensionsGuard } from './guards/extensions.guard';
-import { HelloComponent } from './components/hello/hello.component';
+import { HalfRowComponent } from './components/personal-settings/half-row/half-row.component';
+import { NameSurnameComponent } from './components/personal-settings/name-surname/name-surname.component';
 
 const declarations = [
   LoginComponent,
@@ -29,10 +29,12 @@ const declarations = [
   PersonalSettingsComponent,
   ForgotPasswordComponent,
   ResetPasswordComponent,
+  HalfRowComponent,
+  NameSurnameComponent
 ];
 
 @NgModule({
-  declarations: [...declarations, ExtensiblePersonalSettingsComponent, HelloComponent],
+  declarations: [...declarations],
   imports: [
     CoreModule,
     AccountRoutingModule,
diff --git a/npm/ng-packs/packages/account/src/lib/components/extensible-personal-settings/extensible-personal-settings.component.html b/npm/ng-packs/packages/account/src/lib/components/extensible-personal-settings/extensible-personal-settings.component.html
deleted file mode 100644
index 5b17770996..0000000000
--- a/npm/ng-packs/packages/account/src/lib/components/extensible-personal-settings/extensible-personal-settings.component.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<p>extensible-personal-settings works!</p>
-
-<form [formGroup]="form" (ngSubmit)="save()" validateOnSubmit>
-  <abp-extensible-form [selectedRecord]="selected"></abp-extensible-form>
-</form>
diff --git a/npm/ng-packs/packages/account/src/lib/components/extensible-personal-settings/extensible-personal-settings.component.scss b/npm/ng-packs/packages/account/src/lib/components/extensible-personal-settings/extensible-personal-settings.component.scss
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/npm/ng-packs/packages/account/src/lib/components/extensible-personal-settings/extensible-personal-settings.component.spec.ts b/npm/ng-packs/packages/account/src/lib/components/extensible-personal-settings/extensible-personal-settings.component.spec.ts
deleted file mode 100644
index e2a2102e5a..0000000000
--- a/npm/ng-packs/packages/account/src/lib/components/extensible-personal-settings/extensible-personal-settings.component.spec.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ExtensiblePersonalSettingsComponent } from './extensible-personal-settings.component';
-
-describe('ExtensiblePersonalSettingsComponent', () => {
-  let component: ExtensiblePersonalSettingsComponent;
-  let fixture: ComponentFixture<ExtensiblePersonalSettingsComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ExtensiblePersonalSettingsComponent],
-    }).compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ExtensiblePersonalSettingsComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/npm/ng-packs/packages/account/src/lib/components/extensible-personal-settings/extensible-personal-settings.component.ts b/npm/ng-packs/packages/account/src/lib/components/extensible-personal-settings/extensible-personal-settings.component.ts
deleted file mode 100644
index 0b54672cab..0000000000
--- a/npm/ng-packs/packages/account/src/lib/components/extensible-personal-settings/extensible-personal-settings.component.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import {Component, Injector, OnInit} from '@angular/core';
-import {EXTENSIONS_IDENTIFIER, FormPropData, generateFormFromProps} from "@abp/ng.theme.shared/extensions";
-import { eAccountComponents } from '../../enums/components';
-import {FormBuilder, FormGroup} from "@angular/forms";
-import {ProfileService} from "@abp/ng.account.core/proxy";
-
-@Component({
-  selector: 'abp-extensible-personal-settings',
-  templateUrl: './extensible-personal-settings.component.html',
-  styleUrls: ['./extensible-personal-settings.component.scss'],
-  providers:[
-    {
-      provide: EXTENSIONS_IDENTIFIER,
-      useValue: eAccountComponents.PersonalSettings,
-    },
-  ]
-})
-export class ExtensiblePersonalSettingsComponent implements  OnInit {
-  selected = {a: 1};// hacky for triggering 'edit' mode of extensible-form
-
-  form: FormGroup;
-
-  constructor(
-    private profileService: ProfileService,
-    protected fb: FormBuilder,
-    protected injector: Injector,
-  ) {}
-
-
-  buildForm() {
-    const data = new FormPropData(this.injector, this.selected);
-    this.form = generateFormFromProps(data);
-  }
-
-  ngOnInit(): void {
-    this.buildForm()
-  }
-
-  save() {
-
-  }
-}
diff --git a/npm/ng-packs/packages/account/src/lib/components/personal-settings/half-row/half-row.component.ts b/npm/ng-packs/packages/account/src/lib/components/personal-settings/half-row/half-row.component.ts
new file mode 100644
index 0000000000..76c741459b
--- /dev/null
+++ b/npm/ng-packs/packages/account/src/lib/components/personal-settings/half-row/half-row.component.ts
@@ -0,0 +1,33 @@
+import {Component, Inject} from '@angular/core';
+import {FORM_PROP_DATA_STREAM, FormProp} from "@abp/ng.theme.shared/extensions";
+import {ControlContainer, FormGroup, FormGroupDirective} from "@angular/forms";
+
+@Component({
+  selector: 'abp-half-row',
+  template: `
+    <div class="col col-md-6">
+      <div class="mb-3 form-group"  >
+        <label for="surname" class="form-label">{{
+          displayName | abpLocalization
+          }}
+          {{name}}
+        </label>
+        <input type="text" [attr.id]="id" class="form-control"  [attr.name]="name" [formControlName]="name"/>
+      </div>
+    </div>`,
+  styles: [],
+  viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }]
+
+})
+export class HalfRowComponent {
+  public displayName: string;
+  public name: string;
+  public id: string;
+  public formGroup: FormGroup
+
+  constructor(@Inject(FORM_PROP_DATA_STREAM) private propData: FormProp) {
+    this.displayName = propData.displayName
+    this.name = propData.name
+    this.id = propData.id
+  }
+}
diff --git a/npm/ng-packs/packages/account/src/lib/components/personal-settings/name-surname/name-surname.component.ts b/npm/ng-packs/packages/account/src/lib/components/personal-settings/name-surname/name-surname.component.ts
new file mode 100644
index 0000000000..7701f4567f
--- /dev/null
+++ b/npm/ng-packs/packages/account/src/lib/components/personal-settings/name-surname/name-surname.component.ts
@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+import {ControlContainer, FormGroupDirective} from "@angular/forms";
+
+@Component({
+  selector: 'abp-name-surname',
+  template: `<div class="row">
+    <div class="col col-md-6">
+      <div class="mb-3 form-group">
+        <label for="name" class="form-label">{{
+          'AbpIdentity::DisplayName:Name' | abpLocalization
+          }}</label
+        ><input type="text" id="name" class="form-control" formControlName="name" />
+      </div>
+    </div>
+    <div class="col col-md-6">
+      <div class="mb-3 form-group">
+        <label for="surname" class="form-label">{{
+          'AbpIdentity::DisplayName:Surname' | abpLocalization
+          }}</label
+        ><input type="text" id="surname" class="form-control" formControlName="surname" />
+      </div>
+    </div>
+  </div>`,
+  styles: [],
+  viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }]
+
+})
+export class NameSurnameComponent  {
+  constructor() {}
+}
diff --git a/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings.component.html b/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings.component.html
index 0b70ad41e8..42a323e5ca 100644
--- a/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings.component.html
+++ b/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings.component.html
@@ -1,49 +1,7 @@
-<form validateOnSubmit *ngIf="form" [formGroup]="form" (ngSubmit)="submit()">
-  <div class="mb-3 form-group">
-    <label for="username" class="form-label">{{
-      'AbpIdentity::DisplayName:UserName' | abpLocalization
-    }}</label
-    ><span> * </span
-    ><input
-      type="text"
-      id="username"
-      class="form-control"
-      formControlName="userName"
-      autofocus
-      (keydown.space)="$event.preventDefault()"
-    />
-  </div>
-  <div class="row">
-    <div class="col col-md-6">
-      <div class="mb-3 form-group">
-        <label for="name" class="form-label">{{
-          'AbpIdentity::DisplayName:Name' | abpLocalization
-        }}</label
-        ><input type="text" id="name" class="form-control" formControlName="name" />
-      </div>
-    </div>
-    <div class="col col-md-6">
-      <div class="mb-3 form-group">
-        <label for="surname" class="form-label">{{
-          'AbpIdentity::DisplayName:Surname' | abpLocalization
-        }}</label
-        ><input type="text" id="surname" class="form-control" formControlName="surname" />
-      </div>
-    </div>
-  </div>
-  <div class="mb-3 form-group">
-    <label for="email-address" class="form-label">{{
-      'AbpIdentity::DisplayName:Email' | abpLocalization
-    }}</label
-    ><span> * </span
-    ><input type="text" id="email-address" class="form-control" formControlName="email" />
-  </div>
-  <div class="mb-3 form-group">
-    <label for="phone-number" class="form-label">{{
-      'AbpIdentity::DisplayName:PhoneNumber' | abpLocalization
-    }}</label
-    ><input type="text" id="phone-number" class="form-control" formControlName="phoneNumber" />
-  </div>
+<h1>Thor</h1>
+<form [formGroup]="form"   *ngIf="form"  (ngSubmit)="submit()" validateOnSubmit>
+  <abp-extensible-form [selectedRecord]="selected"></abp-extensible-form>
+
   <abp-button
     buttonType="submit"
     iconClass="fa fa-check"
diff --git a/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings.component.ts b/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings.component.ts
index d15df99878..c4a8422291 100644
--- a/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings.component.ts
+++ b/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings.component.ts
@@ -1,17 +1,24 @@
-import { ProfileService } from '@abp/ng.account.core/proxy';
-import { ToasterService } from '@abp/ng.theme.shared';
-import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { finalize } from 'rxjs/operators';
-import { Account } from '../../models/account';
-import { ManageProfileStateService } from '../../services/manage-profile.state.service';
+import {ProfileDto, ProfileService} from '@abp/ng.account.core/proxy';
+import {ToasterService} from '@abp/ng.theme.shared';
+import {Component, Injector, OnInit, ViewEncapsulation} from '@angular/core';
+import {FormBuilder, FormGroup} from '@angular/forms';
+import {finalize} from 'rxjs/operators';
+import {Account} from '../../models/account';
+import {ManageProfileStateService} from '../../services/manage-profile.state.service';
+import {EXTENSIONS_IDENTIFIER, FormPropData, generateFormFromProps} from "@abp/ng.theme.shared/extensions";
+import {eAccountComponents} from "../../enums";
 
-const { maxLength, required, email } = Validators;
 
 @Component({
   selector: 'abp-personal-settings-form',
   templateUrl: './personal-settings.component.html',
   exportAs: 'abpPersonalSettingsForm',
+  providers:[
+    {
+      provide: EXTENSIONS_IDENTIFIER,
+      useValue: eAccountComponents.PersonalSettings,
+    },
+  ]
 })
 export class PersonalSettingsComponent
   implements
@@ -19,6 +26,8 @@ export class PersonalSettingsComponent
     Account.PersonalSettingsComponentInputs,
     Account.PersonalSettingsComponentOutputs
 {
+  selected:ProfileDto
+
   form: FormGroup;
 
   inProgress: boolean;
@@ -28,21 +37,21 @@ export class PersonalSettingsComponent
     private toasterService: ToasterService,
     private profileService: ProfileService,
     private manageProfileState: ManageProfileStateService,
+    protected injector: Injector,
   ) {}
 
-  ngOnInit() {
-    this.buildForm();
-  }
 
   buildForm() {
-    const profile = this.manageProfileState.getProfile();
-    this.form = this.fb.group({
-      userName: [profile.userName, [required, maxLength(256)]],
-      email: [profile.email, [required, email, maxLength(256)]],
-      name: [profile.name || '', [maxLength(64)]],
-      surname: [profile.surname || '', [maxLength(64)]],
-      phoneNumber: [profile.phoneNumber || '', [maxLength(16)]],
-    });
+    this.selected = this.manageProfileState.getProfile();
+    if(!this.selected){
+      return
+    }
+    const data = new FormPropData(this.injector, this.selected);
+    this.form = generateFormFromProps(data);
+  }
+
+  ngOnInit(): void {
+    this.buildForm()
   }
 
   submit() {
diff --git a/npm/ng-packs/packages/account/src/lib/defaults/default-personal-settings-form-props.ts b/npm/ng-packs/packages/account/src/lib/defaults/default-personal-settings-form-props.ts
index 0624e074d3..6a1038e64a 100644
--- a/npm/ng-packs/packages/account/src/lib/defaults/default-personal-settings-form-props.ts
+++ b/npm/ng-packs/packages/account/src/lib/defaults/default-personal-settings-form-props.ts
@@ -1,15 +1,45 @@
 import {ePropType, FormProp} from "@abp/ng.theme.shared/extensions";
 import {UpdateProfileDto} from "@abp/ng.account.core/proxy";
 import {Validators} from "@angular/forms";
-import {HelloComponent} from "../components/hello/hello.component";
+ import {NameSurnameComponent} from "../components/personal-settings/name-surname/name-surname.component";
 
+const { maxLength, required, email } = Validators;
 export const DEFAULT_PERSONAL_SETTINGS_UPDATE_FORM_PROPS = FormProp.createMany<UpdateProfileDto>([
   {
     type: ePropType.String,
     name: 'userName',
-    displayName: 'Account::UserName',
-    id: 'user-name',
-    validators: () => [Validators.required, Validators.maxLength(256)],
-    template: HelloComponent
+    displayName: 'AbpIdentity::DisplayName:UserName',
+    id: 'username',
+    validators: () => [required,maxLength(256)],
+  },
+  {
+    type: ePropType.String,
+    name: 'name',
+    displayName: 'AbpIdentity::DisplayName:Name',
+    id: 'name',
+    validators: () => [maxLength(64),required],
+    template:NameSurnameComponent
+  },
+  {
+    type: ePropType.String,
+    name: 'surname',
+    displayName: 'AbpIdentity::DisplayName:Surname',
+    id: 'surname',
+    validators: () => [maxLength(64),required],
+    visible:() => false
+  },
+  {
+    type: ePropType.String,
+    name: 'email',
+    displayName: 'AbpIdentity::DisplayName:Email',
+    id: 'email-address',
+    validators: () =>  [required, email, maxLength(256)],
+  },
+  {
+    type: ePropType.String,
+    name: 'phoneNumber',
+    displayName: 'AbpIdentity::DisplayName:PhoneNumber',
+    id: 'phone-number',
+    validators: () => [maxLength(16)],
   },
 ])
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html
index 67b0022be8..239882a498 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html
@@ -1,148 +1,153 @@
-<div
-  class="mb-3 form-group"
-  *abpPermission="prop.permission; runChangeDetection: false"
-  [ngSwitch]="getComponent(prop)"
->
+<ng-container [ngSwitch]="getComponent(prop)"
+              *abpPermission="prop.permission; runChangeDetection: false">
 
   <ng-template ngSwitchCase="template">
-    <ng-container *ngComponentOutlet="prop.template;injector:injectorForCustomComponent" >
+    <ng-container
+       [formControlName]="prop.name"
+      *ngComponentOutlet="prop.template;injector:injectorForCustomComponent">
     </ng-container>
   </ng-template>
 
-  <ng-template ngSwitchCase="input">
-    <ng-template [ngTemplateOutlet]="label"></ng-template>
-    <input
-      #field
-      [id]="prop.id"
-      [formControlName]="prop.name"
-      [autocomplete]="prop.autocomplete"
-      [type]="getType(prop)"
-      [abpDisabled]="disabled"
-      [readonly]="readonly"
-      class="form-control"
-    />
-  </ng-template>
-
-  <ng-template ngSwitchCase="hidden">
-    <input [formControlName]="prop.name" type="hidden" />
-  </ng-template>
+  <div
+    class="mb-3 form-group"
+  >
 
-  <ng-template ngSwitchCase="checkbox">
-    <div class="form-check" validationTarget>
+    <ng-template ngSwitchCase="input">
+      <ng-template [ngTemplateOutlet]="label"></ng-template>
       <input
         #field
         [id]="prop.id"
         [formControlName]="prop.name"
+        [autocomplete]="prop.autocomplete"
+        [type]="getType(prop)"
         [abpDisabled]="disabled"
-        type="checkbox"
-        class="form-check-input"
+        [readonly]="readonly"
+        class="form-control"
       />
-      <ng-template
-        [ngTemplateOutlet]="label"
-        [ngTemplateOutletContext]="{ $implicit: 'form-check-label' }"
-      ></ng-template>
-    </div>
-  </ng-template>
+    </ng-template>
 
-  <ng-template ngSwitchCase="select">
-    <ng-template [ngTemplateOutlet]="label"></ng-template>
-    <select
-      #field
-      [id]="prop.id"
-      [formControlName]="prop.name"
-      [abpDisabled]="disabled"
-      class="form-select form-control"
-    >
-      <option
-        *ngFor="let option of options$ | async; trackBy: track.by('value')"
-        [ngValue]="option.value"
-      >
-        {{ option.key }}
-      </option>
-    </select>
-  </ng-template>
+    <ng-template ngSwitchCase="hidden">
+      <input [formControlName]="prop.name" type="hidden"/>
+    </ng-template>
 
-  <ng-template ngSwitchCase="multiselect">
-    <ng-template [ngTemplateOutlet]="label"></ng-template>
-    <select
-      #field
-      [id]="prop.id"
-      [formControlName]="prop.name"
-      [abpDisabled]="disabled"
-      multiple="multiple"
-      class="form-select form-control"
-    >
-      <option
-        *ngFor="let option of options$ | async; trackBy: track.by('value')"
-        [ngValue]="option.value"
+    <ng-template ngSwitchCase="checkbox">
+      <div class="form-check" validationTarget>
+        <input
+          #field
+          [id]="prop.id"
+          [formControlName]="prop.name"
+          [abpDisabled]="disabled"
+          type="checkbox"
+          class="form-check-input"
+        />
+        <ng-template
+          [ngTemplateOutlet]="label"
+          [ngTemplateOutletContext]="{ $implicit: 'form-check-label' }"
+        ></ng-template>
+      </div>
+    </ng-template>
+
+    <ng-template ngSwitchCase="select">
+      <ng-template [ngTemplateOutlet]="label"></ng-template>
+      <select
+        #field
+        [id]="prop.id"
+        [formControlName]="prop.name"
+        [abpDisabled]="disabled"
+        class="form-select form-control"
       >
-        {{ option.key }}
-      </option>
-    </select>
-  </ng-template>
+        <option
+          *ngFor="let option of options$ | async; trackBy: track.by('value')"
+          [ngValue]="option.value"
+        >
+          {{ option.key }}
+        </option>
+      </select>
+    </ng-template>
 
-  <ng-template ngSwitchCase="typeahead">
-    <ng-template [ngTemplateOutlet]="label"></ng-template>
-    <div #typeahead class="position-relative" validationStyle validationTarget>
-      <input
+    <ng-template ngSwitchCase="multiselect">
+      <ng-template [ngTemplateOutlet]="label"></ng-template>
+      <select
         #field
         [id]="prop.id"
-        [autocomplete]="prop.autocomplete"
+        [formControlName]="prop.name"
         [abpDisabled]="disabled"
-        [ngbTypeahead]="search"
-        [editable]="false"
-        [inputFormatter]="typeaheadFormatter"
-        [resultFormatter]="typeaheadFormatter"
-        [ngModelOptions]="{ standalone: true }"
-        [(ngModel)]="typeaheadModel"
-        (selectItem)="setTypeaheadValue($event.item)"
-        (blur)="setTypeaheadValue(typeaheadModel)"
-        [class.is-invalid]="typeahead.classList.contains('is-invalid')"
+        multiple="multiple"
+        class="form-select form-control"
+      >
+        <option
+          *ngFor="let option of options$ | async; trackBy: track.by('value')"
+          [ngValue]="option.value"
+        >
+          {{ option.key }}
+        </option>
+      </select>
+    </ng-template>
+
+    <ng-template ngSwitchCase="typeahead">
+      <ng-template [ngTemplateOutlet]="label"></ng-template>
+      <div #typeahead class="position-relative" validationStyle validationTarget>
+        <input
+          #field
+          [id]="prop.id"
+          [autocomplete]="prop.autocomplete"
+          [abpDisabled]="disabled"
+          [ngbTypeahead]="search"
+          [editable]="false"
+          [inputFormatter]="typeaheadFormatter"
+          [resultFormatter]="typeaheadFormatter"
+          [ngModelOptions]="{ standalone: true }"
+          [(ngModel)]="typeaheadModel"
+          (selectItem)="setTypeaheadValue($event.item)"
+          (blur)="setTypeaheadValue(typeaheadModel)"
+          [class.is-invalid]="typeahead.classList.contains('is-invalid')"
+          class="form-control"
+        />
+        <input [formControlName]="prop.name" type="hidden"/>
+      </div>
+    </ng-template>
+
+    <ng-template ngSwitchCase="date">
+      <ng-template [ngTemplateOutlet]="label"></ng-template>
+      <input
+        [id]="prop.id"
+        [formControlName]="prop.name"
+        (click)="datepicker.open()"
+        (keyup.space)="datepicker.open()"
+        ngbDatepicker
+        #datepicker="ngbDatepicker"
+        type="text"
         class="form-control"
       />
-      <input [formControlName]="prop.name" type="hidden" />
-    </div>
-  </ng-template>
+    </ng-template>
 
-  <ng-template ngSwitchCase="date">
-    <ng-template [ngTemplateOutlet]="label"></ng-template>
-    <input
-      [id]="prop.id"
-      [formControlName]="prop.name"
-      (click)="datepicker.open()"
-      (keyup.space)="datepicker.open()"
-      ngbDatepicker
-      #datepicker="ngbDatepicker"
-      type="text"
-      class="form-control"
-    />
-  </ng-template>
+    <ng-template ngSwitchCase="time">
+      <ng-template [ngTemplateOutlet]="label"></ng-template>
+      <ngb-timepicker [formControlName]="prop.name"></ngb-timepicker>
+    </ng-template>
 
-  <ng-template ngSwitchCase="time">
-    <ng-template [ngTemplateOutlet]="label"></ng-template>
-    <ngb-timepicker [formControlName]="prop.name"></ngb-timepicker>
-  </ng-template>
+    <ng-template ngSwitchCase="dateTime">
+      <ng-template [ngTemplateOutlet]="label"></ng-template>
+      <abp-date-time-picker [prop]="prop" [meridian]="meridian"></abp-date-time-picker>
+    </ng-template>
 
-  <ng-template ngSwitchCase="dateTime">
-    <ng-template [ngTemplateOutlet]="label"></ng-template>
-    <abp-date-time-picker [prop]="prop" [meridian]="meridian"></abp-date-time-picker>
-  </ng-template>
+    <ng-template ngSwitchCase="textarea">
+      <ng-template [ngTemplateOutlet]="label"></ng-template>
+      <textarea
+        #field
+        [id]="prop.id"
+        [formControlName]="prop.name"
+        [abpDisabled]="disabled"
+        [readonly]="readonly"
+        class="form-control"
+      ></textarea>
+    </ng-template>
+  </div>
 
-  <ng-template ngSwitchCase="textarea">
-    <ng-template [ngTemplateOutlet]="label"></ng-template>
-    <textarea
-      #field
-      [id]="prop.id"
-      [formControlName]="prop.name"
-      [abpDisabled]="disabled"
-      [readonly]="readonly"
-      class="form-control"
-    ></textarea>
-  </ng-template>
-</div>
+</ng-container>
 
 <ng-template #label let-classes>
   <label [htmlFor]="prop.id" [ngClass]="classes || 'form-label'"
-    >{{ prop.displayName | abpLocalization }} {{ asterisk }}</label
+  >{{ prop.displayName | abpLocalization }} {{ asterisk }}</label
   >
 </ng-template>
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts
index 49257f34c9..efa894cf55 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts
@@ -77,8 +77,8 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
 
 
   setTypeaheadValue(selectedOption: ABP.Option<string>) {
-    this.typeaheadModel = selectedOption || { key: null, value: null };
-    const { key, value } = this.typeaheadModel;
+    this.typeaheadModel = selectedOption || {key: null, value: null};
+    const {key, value} = this.typeaheadModel;
     const [keyControl, valueControl] = this.getTypeaheadControls();
     if (valueControl?.value && !value) valueControl.markAsDirty();
     keyControl?.setValue(key);
@@ -88,10 +88,10 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
   search = (text$: Observable<string>) =>
     text$
       ? text$.pipe(
-          debounceTime(300),
-          distinctUntilChanged(),
-          switchMap(text => this.prop.options(this.data, text)),
-        )
+        debounceTime(300),
+        distinctUntilChanged(),
+        switchMap(text => this.prop.options(this.data, text)),
+      )
       : of([]);
 
   typeaheadFormatter = (option: ABP.Option<any>) => option.key;
@@ -190,7 +190,8 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
           {
             provide: FORM_PROP_DATA_STREAM,
             useValue: currentProp
-          }
+          },
+
         ],
         parent: this.injector,
       });
@@ -209,7 +210,7 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
 
     const [keyControl, valueControl] = this.getTypeaheadControls();
     if (keyControl && valueControl)
-      this.typeaheadModel = { key: keyControl.value, value: valueControl.value };
+      this.typeaheadModel = {key: keyControl.value, value: valueControl.value};
   }
 }
 

From 30a2120cdbcba2741848306cf71a714888ec4b4b Mon Sep 17 00:00:00 2001
From: Mahmut Gundogdu <mahmutgundogdu@hotmail.com.tr>
Date: Tue, 16 Aug 2022 14:48:08 +0300
Subject: [PATCH 03/13] Implement update profile with Extensible-form

---
 .../account/src/lib/account.module.ts         |  3 --
 .../half-row/half-row.component.ts            |  5 ++--
 .../name-surname/name-surname.component.ts    | 30 -------------------
 .../personal-settings.component.html          |  1 -
 .../default-personal-settings-form-props.ts   | 12 ++++----
 .../extensible-form-prop.component.html       |  1 -
 .../extensible-form-prop.component.ts         |  2 +-
 .../extensible-form.component.html            |  4 +--
 .../extensible-form.component.ts              |  5 +++-
 .../extensions/src/lib/models/form-props.ts   |  4 ++-
 .../extensions/src/lib/models/props.ts        |  3 +-
 11 files changed, 21 insertions(+), 49 deletions(-)
 delete mode 100644 npm/ng-packs/packages/account/src/lib/components/personal-settings/name-surname/name-surname.component.ts

diff --git a/npm/ng-packs/packages/account/src/lib/account.module.ts b/npm/ng-packs/packages/account/src/lib/account.module.ts
index d8c88055d9..3929963665 100644
--- a/npm/ng-packs/packages/account/src/lib/account.module.ts
+++ b/npm/ng-packs/packages/account/src/lib/account.module.ts
@@ -19,8 +19,6 @@ import { UiExtensionsModule } from '@abp/ng.theme.shared/extensions';
 import { ACCOUNT_EDIT_FORM_PROP_CONTRIBUTORS } from './tokens/extensions.token';
 import { AccountExtensionsGuard } from './guards/extensions.guard';
 import { HalfRowComponent } from './components/personal-settings/half-row/half-row.component';
-import { NameSurnameComponent } from './components/personal-settings/name-surname/name-surname.component';
-
 const declarations = [
   LoginComponent,
   RegisterComponent,
@@ -30,7 +28,6 @@ const declarations = [
   ForgotPasswordComponent,
   ResetPasswordComponent,
   HalfRowComponent,
-  NameSurnameComponent
 ];
 
 @NgModule({
diff --git a/npm/ng-packs/packages/account/src/lib/components/personal-settings/half-row/half-row.component.ts b/npm/ng-packs/packages/account/src/lib/components/personal-settings/half-row/half-row.component.ts
index 76c741459b..a0f0ead029 100644
--- a/npm/ng-packs/packages/account/src/lib/components/personal-settings/half-row/half-row.component.ts
+++ b/npm/ng-packs/packages/account/src/lib/components/personal-settings/half-row/half-row.component.ts
@@ -5,12 +5,11 @@ import {ControlContainer, FormGroup, FormGroupDirective} from "@angular/forms";
 @Component({
   selector: 'abp-half-row',
   template: `
-    <div class="col col-md-6">
+    <div class="w-50 d-inline">
       <div class="mb-3 form-group"  >
-        <label for="surname" class="form-label">{{
+        <label [attr.for]="name" class="form-label">{{
           displayName | abpLocalization
           }}
-          {{name}}
         </label>
         <input type="text" [attr.id]="id" class="form-control"  [attr.name]="name" [formControlName]="name"/>
       </div>
diff --git a/npm/ng-packs/packages/account/src/lib/components/personal-settings/name-surname/name-surname.component.ts b/npm/ng-packs/packages/account/src/lib/components/personal-settings/name-surname/name-surname.component.ts
deleted file mode 100644
index 7701f4567f..0000000000
--- a/npm/ng-packs/packages/account/src/lib/components/personal-settings/name-surname/name-surname.component.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Component } from '@angular/core';
-import {ControlContainer, FormGroupDirective} from "@angular/forms";
-
-@Component({
-  selector: 'abp-name-surname',
-  template: `<div class="row">
-    <div class="col col-md-6">
-      <div class="mb-3 form-group">
-        <label for="name" class="form-label">{{
-          'AbpIdentity::DisplayName:Name' | abpLocalization
-          }}</label
-        ><input type="text" id="name" class="form-control" formControlName="name" />
-      </div>
-    </div>
-    <div class="col col-md-6">
-      <div class="mb-3 form-group">
-        <label for="surname" class="form-label">{{
-          'AbpIdentity::DisplayName:Surname' | abpLocalization
-          }}</label
-        ><input type="text" id="surname" class="form-control" formControlName="surname" />
-      </div>
-    </div>
-  </div>`,
-  styles: [],
-  viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }]
-
-})
-export class NameSurnameComponent  {
-  constructor() {}
-}
diff --git a/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings.component.html b/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings.component.html
index 42a323e5ca..86dd3272b3 100644
--- a/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings.component.html
+++ b/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings.component.html
@@ -1,4 +1,3 @@
-<h1>Thor</h1>
 <form [formGroup]="form"   *ngIf="form"  (ngSubmit)="submit()" validateOnSubmit>
   <abp-extensible-form [selectedRecord]="selected"></abp-extensible-form>
 
diff --git a/npm/ng-packs/packages/account/src/lib/defaults/default-personal-settings-form-props.ts b/npm/ng-packs/packages/account/src/lib/defaults/default-personal-settings-form-props.ts
index 6a1038e64a..d99401ecf2 100644
--- a/npm/ng-packs/packages/account/src/lib/defaults/default-personal-settings-form-props.ts
+++ b/npm/ng-packs/packages/account/src/lib/defaults/default-personal-settings-form-props.ts
@@ -1,7 +1,7 @@
 import {ePropType, FormProp} from "@abp/ng.theme.shared/extensions";
 import {UpdateProfileDto} from "@abp/ng.account.core/proxy";
 import {Validators} from "@angular/forms";
- import {NameSurnameComponent} from "../components/personal-settings/name-surname/name-surname.component";
+ import {HalfRowComponent} from "../components/personal-settings/half-row/half-row.component";
 
 const { maxLength, required, email } = Validators;
 export const DEFAULT_PERSONAL_SETTINGS_UPDATE_FORM_PROPS = FormProp.createMany<UpdateProfileDto>([
@@ -17,16 +17,18 @@ export const DEFAULT_PERSONAL_SETTINGS_UPDATE_FORM_PROPS = FormProp.createMany<U
     name: 'name',
     displayName: 'AbpIdentity::DisplayName:Name',
     id: 'name',
-    validators: () => [maxLength(64),required],
-    template:NameSurnameComponent
+    validators: () => [maxLength(64)],
+    template:HalfRowComponent,
+    className:"d-inline-block w-50"
   },
   {
     type: ePropType.String,
     name: 'surname',
     displayName: 'AbpIdentity::DisplayName:Surname',
     id: 'surname',
-    validators: () => [maxLength(64),required],
-    visible:() => false
+    validators: () => [maxLength(64)],
+    className:"d-inline-block w-50 ps-4",
+    template:HalfRowComponent
   },
   {
     type: ePropType.String,
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html
index 239882a498..dd125f5afc 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html
@@ -3,7 +3,6 @@
 
   <ng-template ngSwitchCase="template">
     <ng-container
-       [formControlName]="prop.name"
       *ngComponentOutlet="prop.template;injector:injectorForCustomComponent">
     </ng-container>
   </ng-template>
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts
index efa894cf55..a7a7d22708 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts
@@ -191,7 +191,7 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
             provide: FORM_PROP_DATA_STREAM,
             useValue: currentProp
           },
-
+          { provide: ControlContainer, useExisting: FormGroupDirective }
         ],
         parent: this.injector,
       });
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form.component.html b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form.component.html
index 259538820b..69ad86da5c 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form.component.html
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form.component.html
@@ -6,11 +6,11 @@
           [formGroupName]="extraPropertiesKey"
           *ngIf="extraProperties.controls[prop.name]; else tempDefault"
         >
-          <abp-extensible-form-prop [prop]="prop" [data]="data"></abp-extensible-form-prop>
+          <abp-extensible-form-prop [class]="prop.className" [prop]="prop" [data]="data"></abp-extensible-form-prop>
         </ng-container>
 
         <ng-template #tempDefault>
-          <abp-extensible-form-prop
+          <abp-extensible-form-prop [class]="prop.className"
             *ngIf="form.get(prop.name)"
             [prop]="prop"
             [data]="data"
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form.component.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form.component.ts
index 17131e9aaf..83d17b9f0b 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form.component.ts
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form.component.ts
@@ -10,7 +10,7 @@ import {
   SkipSelf,
   ViewChildren,
 } from '@angular/core';
-import { ControlContainer, FormGroup } from '@angular/forms';
+import {ControlContainer, FormGroup, FormGroupDirective} from '@angular/forms';
 import { EXTRA_PROPERTIES_KEY } from '../../constants/extra-properties';
 import { FormPropList } from '../../models/form-props';
 import { ExtensionsService } from '../../services/extensions.service';
@@ -62,3 +62,6 @@ export class ExtensibleFormComponent<R = any> {
     @Inject(EXTENSIONS_IDENTIFIER) private identifier: string,
   ) {}
 }
+
+
+export const ExtensibleFormViewProvider = { provide: ControlContainer, useExisting: FormGroupDirective }
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/form-props.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/form-props.ts
index b607e4cb6e..4e71c70e0f 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/form-props.ts
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/form-props.ts
@@ -39,6 +39,7 @@ export class FormProp<R = any> extends Prop<R> {
   readonly options: PropCallback<R, Observable<ABP.Option<any>[]>> | undefined;
   readonly id: string | undefined;
   readonly template? : Type<any>
+  readonly className?:string;
 
   constructor(options: FormPropOptions<R>) {
     super(
@@ -48,7 +49,8 @@ export class FormProp<R = any> extends Prop<R> {
       options.permission,
       options.visible,
       options.isExtra,
-      options.template
+      options.template,
+      options.className
     );
 
     this.asyncValidators = options.asyncValidators || (_ => []);
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/props.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/props.ts
index 0b26512dbc..e8bb158cc9 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/props.ts
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/props.ts
@@ -33,7 +33,8 @@ export abstract class Prop<R = any> {
     public readonly permission: string,
     public readonly visible: PropPredicate<R> = _ => true,
     public readonly isExtra = false,
-    public readonly template? : Type<any>
+    public readonly template? : Type<any>,
+    public readonly className?:string
   ) {
     this.displayName = this.displayName || this.name;
   }

From db5a3fb4bf587259244023fd42aa6cf6ff8db3f1 Mon Sep 17 00:00:00 2001
From: Mahmut Gundogdu <mahmutgundogdu@hotmail.com.tr>
Date: Tue, 16 Aug 2022 15:43:36 +0300
Subject: [PATCH 04/13] Change HalfRowComponent name and export it

---
 .../account/src/lib/account.module.ts         | 47 ++++++++++---------
 .../account/src/lib/components/index.ts       |  1 +
 ...> personal-settings-half-row.component.ts} |  4 +-
 .../default-personal-settings-form-props.ts   |  6 +--
 4 files changed, 30 insertions(+), 28 deletions(-)
 rename npm/ng-packs/packages/account/src/lib/components/personal-settings/{half-row/half-row.component.ts => personal-settings-half-row.component.ts} (91%)

diff --git a/npm/ng-packs/packages/account/src/lib/account.module.ts b/npm/ng-packs/packages/account/src/lib/account.module.ts
index 3929963665..74310ce1bd 100644
--- a/npm/ng-packs/packages/account/src/lib/account.module.ts
+++ b/npm/ng-packs/packages/account/src/lib/account.module.ts
@@ -1,24 +1,25 @@
-import { CoreModule, LazyModuleFactory } from '@abp/ng.core';
-import { ThemeSharedModule } from '@abp/ng.theme.shared';
-import { ModuleWithProviders, NgModule, NgModuleFactory } from '@angular/core';
-import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
-import { NgxValidateCoreModule } from '@ngx-validate/core';
-import { AccountRoutingModule } from './account-routing.module';
-import { ChangePasswordComponent } from './components/change-password/change-password.component';
-import { LoginComponent } from './components/login/login.component';
-import { ManageProfileComponent } from './components/manage-profile/manage-profile.component';
-import { PersonalSettingsComponent } from './components/personal-settings/personal-settings.component';
-import { RegisterComponent } from './components/register/register.component';
-import { AccountConfigOptions } from './models/config-options';
-import { ACCOUNT_CONFIG_OPTIONS } from './tokens/config-options.token';
-import { accountConfigOptionsFactory } from './utils/factory-utils';
-import { AuthenticationFlowGuard } from './guards/authentication-flow.guard';
-import { ForgotPasswordComponent } from './components/forgot-password/forgot-password.component';
-import { ResetPasswordComponent } from './components/reset-password/reset-password.component';
-import { UiExtensionsModule } from '@abp/ng.theme.shared/extensions';
-import { ACCOUNT_EDIT_FORM_PROP_CONTRIBUTORS } from './tokens/extensions.token';
-import { AccountExtensionsGuard } from './guards/extensions.guard';
-import { HalfRowComponent } from './components/personal-settings/half-row/half-row.component';
+import {CoreModule, LazyModuleFactory} from '@abp/ng.core';
+import {ThemeSharedModule} from '@abp/ng.theme.shared';
+import {ModuleWithProviders, NgModule, NgModuleFactory} from '@angular/core';
+import {NgbDropdownModule} from '@ng-bootstrap/ng-bootstrap';
+import {NgxValidateCoreModule} from '@ngx-validate/core';
+import {AccountRoutingModule} from './account-routing.module';
+import {ChangePasswordComponent} from './components/change-password/change-password.component';
+import {LoginComponent} from './components/login/login.component';
+import {ManageProfileComponent} from './components/manage-profile/manage-profile.component';
+import {PersonalSettingsComponent} from './components/personal-settings/personal-settings.component';
+import {RegisterComponent} from './components/register/register.component';
+import {AccountConfigOptions} from './models/config-options';
+import {ACCOUNT_CONFIG_OPTIONS} from './tokens/config-options.token';
+import {accountConfigOptionsFactory} from './utils/factory-utils';
+import {AuthenticationFlowGuard} from './guards/authentication-flow.guard';
+import {ForgotPasswordComponent} from './components/forgot-password/forgot-password.component';
+import {ResetPasswordComponent} from './components/reset-password/reset-password.component';
+import {UiExtensionsModule} from '@abp/ng.theme.shared/extensions';
+import {ACCOUNT_EDIT_FORM_PROP_CONTRIBUTORS} from './tokens/extensions.token';
+import {AccountExtensionsGuard} from './guards/extensions.guard';
+import {PersonalSettingsHalfRowComponent} from './components/personal-settings/personal-settings-half-row.component';
+
 const declarations = [
   LoginComponent,
   RegisterComponent,
@@ -27,7 +28,7 @@ const declarations = [
   PersonalSettingsComponent,
   ForgotPasswordComponent,
   ResetPasswordComponent,
-  HalfRowComponent,
+  PersonalSettingsHalfRowComponent,
 ];
 
 @NgModule({
@@ -48,7 +49,7 @@ export class AccountModule {
       ngModule: AccountModule,
       providers: [
         AuthenticationFlowGuard,
-        { provide: ACCOUNT_CONFIG_OPTIONS, useValue: options },
+        {provide: ACCOUNT_CONFIG_OPTIONS, useValue: options},
         {
           provide: 'ACCOUNT_OPTIONS',
           useFactory: accountConfigOptionsFactory,
diff --git a/npm/ng-packs/packages/account/src/lib/components/index.ts b/npm/ng-packs/packages/account/src/lib/components/index.ts
index 098ee8a202..d74263b052 100644
--- a/npm/ng-packs/packages/account/src/lib/components/index.ts
+++ b/npm/ng-packs/packages/account/src/lib/components/index.ts
@@ -4,4 +4,5 @@ export * from './login/login.component';
 export * from './manage-profile/manage-profile.component';
 export * from './register/register.component';
 export * from './personal-settings/personal-settings.component';
+export * from './personal-settings/personal-settings-half-row.component';
 export * from './reset-password/reset-password.component';
diff --git a/npm/ng-packs/packages/account/src/lib/components/personal-settings/half-row/half-row.component.ts b/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings-half-row.component.ts
similarity index 91%
rename from npm/ng-packs/packages/account/src/lib/components/personal-settings/half-row/half-row.component.ts
rename to npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings-half-row.component.ts
index a0f0ead029..a1086a24a2 100644
--- a/npm/ng-packs/packages/account/src/lib/components/personal-settings/half-row/half-row.component.ts
+++ b/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings-half-row.component.ts
@@ -3,7 +3,7 @@ import {FORM_PROP_DATA_STREAM, FormProp} from "@abp/ng.theme.shared/extensions";
 import {ControlContainer, FormGroup, FormGroupDirective} from "@angular/forms";
 
 @Component({
-  selector: 'abp-half-row',
+  selector: 'abp-personal-settings-half-row',
   template: `
     <div class="w-50 d-inline">
       <div class="mb-3 form-group"  >
@@ -18,7 +18,7 @@ import {ControlContainer, FormGroup, FormGroupDirective} from "@angular/forms";
   viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }]
 
 })
-export class HalfRowComponent {
+export class PersonalSettingsHalfRowComponent {
   public displayName: string;
   public name: string;
   public id: string;
diff --git a/npm/ng-packs/packages/account/src/lib/defaults/default-personal-settings-form-props.ts b/npm/ng-packs/packages/account/src/lib/defaults/default-personal-settings-form-props.ts
index d99401ecf2..0e9e06f020 100644
--- a/npm/ng-packs/packages/account/src/lib/defaults/default-personal-settings-form-props.ts
+++ b/npm/ng-packs/packages/account/src/lib/defaults/default-personal-settings-form-props.ts
@@ -1,7 +1,7 @@
 import {ePropType, FormProp} from "@abp/ng.theme.shared/extensions";
 import {UpdateProfileDto} from "@abp/ng.account.core/proxy";
 import {Validators} from "@angular/forms";
- import {HalfRowComponent} from "../components/personal-settings/half-row/half-row.component";
+ import {PersonalSettingsHalfRowComponent} from "../components/personal-settings/personal-settings-half-row.component";
 
 const { maxLength, required, email } = Validators;
 export const DEFAULT_PERSONAL_SETTINGS_UPDATE_FORM_PROPS = FormProp.createMany<UpdateProfileDto>([
@@ -18,7 +18,7 @@ export const DEFAULT_PERSONAL_SETTINGS_UPDATE_FORM_PROPS = FormProp.createMany<U
     displayName: 'AbpIdentity::DisplayName:Name',
     id: 'name',
     validators: () => [maxLength(64)],
-    template:HalfRowComponent,
+    template:PersonalSettingsHalfRowComponent,
     className:"d-inline-block w-50"
   },
   {
@@ -28,7 +28,7 @@ export const DEFAULT_PERSONAL_SETTINGS_UPDATE_FORM_PROPS = FormProp.createMany<U
     id: 'surname',
     validators: () => [maxLength(64)],
     className:"d-inline-block w-50 ps-4",
-    template:HalfRowComponent
+    template:PersonalSettingsHalfRowComponent
   },
   {
     type: ePropType.String,

From 9f2ee34ae946845deead42d0ffb254e3bccd6cd7 Mon Sep 17 00:00:00 2001
From: Mahmut Gundogdu <mahmutgundogdu@hotmail.com.tr>
Date: Tue, 16 Aug 2022 17:53:40 +0300
Subject: [PATCH 05/13] Add EXTENSIBLE_FORM_VIEW_PROVIDER Token

---
 .../personal-settings-half-row.component.ts                | 7 +++----
 .../extensible-form/extensible-form.component.ts           | 1 -
 .../src/lib/tokens/extensible-form-view-provider.token.ts  | 3 +++
 .../packages/theme-shared/extensions/src/public-api.ts     | 1 +
 4 files changed, 7 insertions(+), 5 deletions(-)
 create mode 100644 npm/ng-packs/packages/theme-shared/extensions/src/lib/tokens/extensible-form-view-provider.token.ts

diff --git a/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings-half-row.component.ts b/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings-half-row.component.ts
index a1086a24a2..8629433e02 100644
--- a/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings-half-row.component.ts
+++ b/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings-half-row.component.ts
@@ -1,6 +1,6 @@
 import {Component, Inject} from '@angular/core';
-import {FORM_PROP_DATA_STREAM, FormProp} from "@abp/ng.theme.shared/extensions";
-import {ControlContainer, FormGroup, FormGroupDirective} from "@angular/forms";
+import {FORM_PROP_DATA_STREAM, FormProp, EXTENSIBLE_FORM_VIEW_PROVIDER} from "@abp/ng.theme.shared/extensions";
+import {FormGroup} from "@angular/forms";
 
 @Component({
   selector: 'abp-personal-settings-half-row',
@@ -15,8 +15,7 @@ import {ControlContainer, FormGroup, FormGroupDirective} from "@angular/forms";
       </div>
     </div>`,
   styles: [],
-  viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }]
-
+  viewProviders: [EXTENSIBLE_FORM_VIEW_PROVIDER]
 })
 export class PersonalSettingsHalfRowComponent {
   public displayName: string;
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form.component.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form.component.ts
index 83d17b9f0b..2086e3c818 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form.component.ts
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form.component.ts
@@ -64,4 +64,3 @@ export class ExtensibleFormComponent<R = any> {
 }
 
 
-export const ExtensibleFormViewProvider = { provide: ControlContainer, useExisting: FormGroupDirective }
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/tokens/extensible-form-view-provider.token.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/tokens/extensible-form-view-provider.token.ts
new file mode 100644
index 0000000000..9db2949731
--- /dev/null
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/tokens/extensible-form-view-provider.token.ts
@@ -0,0 +1,3 @@
+import { ControlContainer, FormGroupDirective } from "@angular/forms";
+
+export const EXTENSIBLE_FORM_VIEW_PROVIDER = { provide: ControlContainer, useExisting: FormGroupDirective }
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/public-api.ts b/npm/ng-packs/packages/theme-shared/extensions/src/public-api.ts
index b19f8eb0d9..f786eb4ac8 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/public-api.ts
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/public-api.ts
@@ -64,6 +64,7 @@ export {
 export * from './lib/pipes/create-injector.pipe';
 export * from './lib/services/extensions.service';
 export * from './lib/tokens/extensions.token';
+export * from './lib/tokens/extensible-form-view-provider.token';
 export * from './lib/ui-extensions.module';
 export * from './lib/utils/actions.util';
 export * from './lib/utils/form-props.util';

From dde4e9df46997261beadf1f61362d5806a332ec9 Mon Sep 17 00:00:00 2001
From: Mahmut Gundogdu <mahmutgundogdu@hotmail.com.tr>
Date: Wed, 17 Aug 2022 17:22:30 +0300
Subject: [PATCH 06/13] add data record as token on Extensible-form-prop

---
 .../extensible-form-prop.component.ts                | 12 ++++++++----
 .../extensions/src/lib/tokens/extensions.token.ts    |  4 +++-
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts
index a7a7d22708..7fe8b4fb37 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts
@@ -1,3 +1,4 @@
+import { FORM_PROP, FORM_PROP_DATA } from './../../tokens/extensions.token';
 import {ABP, AbpValidators, ConfigStateService, TrackByService} from '@abp/ng.core';
 import {
   AfterViewInit,
@@ -30,8 +31,7 @@ import {FormProp} from '../../models/form-props';
 import {PropData} from '../../models/props';
 import {selfFactory} from '../../utils/factory.util';
 import {addTypeaheadTextSuffix} from '../../utils/typeahead.util';
-import {FORM_PROP_DATA_STREAM} from "../../tokens/extensions.token";
-
+ 
 @Component({
   selector: 'abp-extensible-form-prop',
   templateUrl: './extensible-form-prop.component.html',
@@ -181,16 +181,20 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
     }
   }
 
-  ngOnChanges({prop}: SimpleChanges) {
+  ngOnChanges({prop,data}: SimpleChanges) {
     const currentProp = prop?.currentValue as FormProp;
     const {options, readonly, disabled, validators, template} = currentProp || {};
     if (template) {
       this.injectorForCustomComponent = Injector.create({
         providers: [
           {
-            provide: FORM_PROP_DATA_STREAM,
+            provide: FORM_PROP,
             useValue: currentProp
           },
+          {
+            provide: FORM_PROP_DATA,
+            useValue: (data?.currentValue as PropData)?.record 
+          },
           { provide: ControlContainer, useExisting: FormGroupDirective }
         ],
         parent: this.injector,
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/tokens/extensions.token.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/tokens/extensions.token.ts
index 28f26317d8..0a58566fcf 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/tokens/extensions.token.ts
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/tokens/extensions.token.ts
@@ -4,6 +4,7 @@ import { ExtensionsService } from '../services/extensions.service';
 import { Observable } from 'rxjs';
 import { ePropType } from '../enums/props.enum';
  import {FormProp} from "../models/form-props";
+import { PropData } from '../models/props';
 
 export const EXTENSIONS_IDENTIFIER = new InjectionToken<string>('EXTENSIONS_IDENTIFIER');
 export type ActionKeys = Extract<'entityActions' | 'toolbarActions', keyof ExtensionsService>;
@@ -26,4 +27,5 @@ export const ENTITY_PROP_TYPE_CLASSES = new InjectionToken<EntityPropTypeClass>(
   },
 );
 
-export const FORM_PROP_DATA_STREAM = new InjectionToken<FormProp>('FORM_PROP_DATA_STREAM');
+export const EXTENSIONS_FORM_PROP = new InjectionToken<FormProp>('EXTENSIONS_FORM_PROP');
+export const EXTENSIONS_FORM_PROP_DATA = new InjectionToken<unknown>('EXTENSIONS_FORM_PROP_DATA');

From eb0405bc76e985dcae9bec5746fff718a1b20408 Mon Sep 17 00:00:00 2001
From: Mahmut Gundogdu <mahmutgundogdu@hotmail.com.tr>
Date: Fri, 19 Aug 2022 15:17:39 +0300
Subject: [PATCH 07/13] Add PropData on ExtensibleForm Template

---
 .../personal-settings-half-row.component.ts            |  4 ++--
 .../extensible-form/extensible-form-prop.component.ts  | 10 +++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings-half-row.component.ts b/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings-half-row.component.ts
index 8629433e02..c0069ecd9e 100644
--- a/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings-half-row.component.ts
+++ b/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings-half-row.component.ts
@@ -1,5 +1,5 @@
 import {Component, Inject} from '@angular/core';
-import {FORM_PROP_DATA_STREAM, FormProp, EXTENSIBLE_FORM_VIEW_PROVIDER} from "@abp/ng.theme.shared/extensions";
+import {EXTENSIONS_FORM_PROP, FormProp, EXTENSIBLE_FORM_VIEW_PROVIDER} from "@abp/ng.theme.shared/extensions";
 import {FormGroup} from "@angular/forms";
 
 @Component({
@@ -23,7 +23,7 @@ export class PersonalSettingsHalfRowComponent {
   public id: string;
   public formGroup: FormGroup
 
-  constructor(@Inject(FORM_PROP_DATA_STREAM) private propData: FormProp) {
+  constructor(@Inject(EXTENSIONS_FORM_PROP) private propData: FormProp) {
     this.displayName = propData.displayName
     this.name = propData.name
     this.id = propData.id
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts
index 7fe8b4fb37..e9aa694d1f 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts
@@ -1,4 +1,4 @@
-import { FORM_PROP, FORM_PROP_DATA } from './../../tokens/extensions.token';
+import { EXTENSIONS_FORM_PROP_DATA, EXTENSIONS_FORM_PROP } from './../../tokens/extensions.token';
 import {ABP, AbpValidators, ConfigStateService, TrackByService} from '@abp/ng.core';
 import {
   AfterViewInit,
@@ -31,7 +31,7 @@ import {FormProp} from '../../models/form-props';
 import {PropData} from '../../models/props';
 import {selfFactory} from '../../utils/factory.util';
 import {addTypeaheadTextSuffix} from '../../utils/typeahead.util';
- 
+
 @Component({
   selector: 'abp-extensible-form-prop',
   templateUrl: './extensible-form-prop.component.html',
@@ -188,12 +188,12 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
       this.injectorForCustomComponent = Injector.create({
         providers: [
           {
-            provide: FORM_PROP,
+            provide: EXTENSIONS_FORM_PROP,
             useValue: currentProp
           },
           {
-            provide: FORM_PROP_DATA,
-            useValue: (data?.currentValue as PropData)?.record 
+            provide: EXTENSIONS_FORM_PROP_DATA,
+            useValue: (data?.currentValue as PropData)?.record
           },
           { provide: ControlContainer, useExisting: FormGroupDirective }
         ],

From c1fc7303026fad88d07b66478264fd2635dfffa4 Mon Sep 17 00:00:00 2001
From: Mahmut Gundogdu <mahmutgundogdu@hotmail.com.tr>
Date: Fri, 19 Aug 2022 17:14:08 +0300
Subject: [PATCH 08/13] Map ObjectExtensions for AccountModule

---
 .../src/lib/components/hello/hello.component.ts   | 15 ---------------
 .../default-personal-settings-form-props.ts       |  2 +-
 .../account/src/lib/guards/extensions.guard.ts    |  6 +++---
 .../account/src/lib/models/config-options.ts      |  5 +----
 4 files changed, 5 insertions(+), 23 deletions(-)
 delete mode 100644 npm/ng-packs/packages/account/src/lib/components/hello/hello.component.ts

diff --git a/npm/ng-packs/packages/account/src/lib/components/hello/hello.component.ts b/npm/ng-packs/packages/account/src/lib/components/hello/hello.component.ts
deleted file mode 100644
index 2fc59314aa..0000000000
--- a/npm/ng-packs/packages/account/src/lib/components/hello/hello.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import {Component, Inject } from '@angular/core';
-import {FORM_PROP_DATA_STREAM, FormProp} from "@abp/ng.theme.shared/extensions";
-
-@Component({
-  selector: 'abp-hello',
-  template: `<p>hello works! {{name | abpLocalization}}</p>`,
-  styles: [],
-})
-export class HelloComponent  {
-  name:string;
-  constructor(@Inject(FORM_PROP_DATA_STREAM) private propData:FormProp) {
-    this.name = propData.displayName
-  }
-
-}
diff --git a/npm/ng-packs/packages/account/src/lib/defaults/default-personal-settings-form-props.ts b/npm/ng-packs/packages/account/src/lib/defaults/default-personal-settings-form-props.ts
index 0e9e06f020..325c25010f 100644
--- a/npm/ng-packs/packages/account/src/lib/defaults/default-personal-settings-form-props.ts
+++ b/npm/ng-packs/packages/account/src/lib/defaults/default-personal-settings-form-props.ts
@@ -1,7 +1,7 @@
 import {ePropType, FormProp} from "@abp/ng.theme.shared/extensions";
 import {UpdateProfileDto} from "@abp/ng.account.core/proxy";
 import {Validators} from "@angular/forms";
- import {PersonalSettingsHalfRowComponent} from "../components/personal-settings/personal-settings-half-row.component";
+import {PersonalSettingsHalfRowComponent} from "../components/personal-settings/personal-settings-half-row.component";
 
 const { maxLength, required, email } = Validators;
 export const DEFAULT_PERSONAL_SETTINGS_UPDATE_FORM_PROPS = FormProp.createMany<UpdateProfileDto>([
diff --git a/npm/ng-packs/packages/account/src/lib/guards/extensions.guard.ts b/npm/ng-packs/packages/account/src/lib/guards/extensions.guard.ts
index 20c4269977..48fe8a341f 100644
--- a/npm/ng-packs/packages/account/src/lib/guards/extensions.guard.ts
+++ b/npm/ng-packs/packages/account/src/lib/guards/extensions.guard.ts
@@ -23,11 +23,11 @@ export class AccountExtensionsGuard implements CanActivate {
       this.injector.get(ACCOUNT_EDIT_FORM_PROP_CONTRIBUTORS, null) || {};
 
     const configState = this.injector.get(ConfigStateService);
-    return getObjectExtensionEntitiesFromStore(configState, 'Account').pipe(
+    return getObjectExtensionEntitiesFromStore(configState, 'Identity').pipe(
       map(entities => ({
-        [eAccountComponents.PersonalSettings]: entities.PersonalSettings,
+        [eAccountComponents.PersonalSettings]: entities.User,
        })),
-      mapEntitiesToContributors(configState, 'AbpAccount'),
+      mapEntitiesToContributors(configState, 'AbpIdentity'),
       tap(objectExtensionContributors => {
         mergeWithDefaultProps(
           extensions.editFormProps,
diff --git a/npm/ng-packs/packages/account/src/lib/models/config-options.ts b/npm/ng-packs/packages/account/src/lib/models/config-options.ts
index f2e603ab32..c3bbb6cb1b 100644
--- a/npm/ng-packs/packages/account/src/lib/models/config-options.ts
+++ b/npm/ng-packs/packages/account/src/lib/models/config-options.ts
@@ -4,11 +4,8 @@ import {UpdateProfileDto} from "@abp/ng.account.core/proxy";
 
 export interface AccountConfigOptions {
   redirectUrl?: string;
+  editFormPropContributors?: AccountEditFormPropContributors;
 }
 export type AccountEditFormPropContributors = Partial<{
   [eAccountComponents.PersonalSettings]:  EditFormPropContributorCallback<UpdateProfileDto>[];
 }>;
-
-export interface AccountConfigOptions {
-  editFormPropContributors?: AccountEditFormPropContributors;
-}

From 98cfe7cb261de1509673131549c95bd03a4fb703 Mon Sep 17 00:00:00 2001
From: Mahmut Gundogdu <mahmutgundogdu@hotmail.com.tr>
Date: Tue, 23 Aug 2022 17:34:09 +0300
Subject: [PATCH 09/13] Fix `The additionally added mandatory propertie is
 functionally different from other mandatory fields and localization seems
 broken`

---
 .../core/src/lib/validators/required.validator.ts         | 3 ++-
 .../extensible-form/extensible-form-prop.component.html   | 2 +-
 .../extensible-form/extensible-form-prop.component.ts     | 8 ++++----
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/npm/ng-packs/packages/core/src/lib/validators/required.validator.ts b/npm/ng-packs/packages/core/src/lib/validators/required.validator.ts
index bf2a4b47ee..68ad0e8a85 100644
--- a/npm/ng-packs/packages/core/src/lib/validators/required.validator.ts
+++ b/npm/ng-packs/packages/core/src/lib/validators/required.validator.ts
@@ -9,9 +9,10 @@ export interface RequiredOptions {
 }
 
 export function validateRequired({ allowEmptyStrings }: RequiredOptions = {}): ValidatorFn {
-  return (control: AbstractControl): RequiredError | null => {
+  const required = (control: AbstractControl): RequiredError | null => {
     return isValidRequired(control.value, allowEmptyStrings) ? null : { required: true };
   };
+  return required;
 }
 
 function isValidRequired(value: any, allowEmptyStrings: boolean): boolean {
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html
index dd125f5afc..a5eeffa31c 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html
@@ -146,7 +146,7 @@
 </ng-container>
 
 <ng-template #label let-classes>
-  <label [htmlFor]="prop.id" [ngClass]="classes || 'form-label'"
+  <label [htmlFor]="prop.id" [ngClass]="classes || 'form-label'" x
   >{{ prop.displayName | abpLocalization }} {{ asterisk }}</label
   >
 </ng-template>
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts
index e9aa694d1f..5e703bcb01 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts
@@ -1,4 +1,4 @@
-import { EXTENSIONS_FORM_PROP_DATA, EXTENSIONS_FORM_PROP } from './../../tokens/extensions.token';
+import {EXTENSIONS_FORM_PROP_DATA, EXTENSIONS_FORM_PROP} from './../../tokens/extensions.token';
 import {ABP, AbpValidators, ConfigStateService, TrackByService} from '@abp/ng.core';
 import {
   AfterViewInit,
@@ -181,7 +181,7 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
     }
   }
 
-  ngOnChanges({prop,data}: SimpleChanges) {
+  ngOnChanges({prop, data}: SimpleChanges) {
     const currentProp = prop?.currentValue as FormProp;
     const {options, readonly, disabled, validators, template} = currentProp || {};
     if (template) {
@@ -195,7 +195,7 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
             provide: EXTENSIONS_FORM_PROP_DATA,
             useValue: (data?.currentValue as PropData)?.record
           },
-          { provide: ControlContainer, useExisting: FormGroupDirective }
+          {provide: ControlContainer, useExisting: FormGroupDirective}
         ],
         parent: this.injector,
       });
@@ -219,5 +219,5 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
 }
 
 function isRequired(validator: ValidatorFn) {
-  return validator === Validators.required || validator === AbpValidators.required;
+   return validator === Validators.required || validator === AbpValidators.required || validator.name === 'required';
 }

From a582807e07ff5936a1580168f5b40a611a4b04b2 Mon Sep 17 00:00:00 2001
From: Mahmut Gundogdu <mahmutgundogdu@hotmail.com.tr>
Date: Wed, 24 Aug 2022 17:40:01 +0300
Subject: [PATCH 10/13] Add username validator.

---
 .../core/src/lib/utils/common-utils.ts        |  4 +++
 .../packages/core/src/lib/validators/index.ts |  2 ++
 .../core/src/lib/validators/url.validator.ts  |  5 ++--
 .../src/lib/validators/username.validator.ts  | 29 +++++++++++++++++++
 .../lib/components/users/users.component.html |  2 +-
 .../lib/components/users/users.component.ts   |  3 --
 .../lib/defaults/default-users-form-props.ts  |  6 ++--
 .../src/lib/constants/validation.ts           |  1 +
 8 files changed, 43 insertions(+), 9 deletions(-)
 create mode 100644 npm/ng-packs/packages/core/src/lib/validators/username.validator.ts

diff --git a/npm/ng-packs/packages/core/src/lib/utils/common-utils.ts b/npm/ng-packs/packages/core/src/lib/utils/common-utils.ts
index 31a1970fdc..b373b6c04a 100644
--- a/npm/ng-packs/packages/core/src/lib/utils/common-utils.ts
+++ b/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);
 }
diff --git a/npm/ng-packs/packages/core/src/lib/validators/index.ts b/npm/ng-packs/packages/core/src/lib/validators/index.ts
index fb06e7f1d8..69880dbf84 100644
--- a/npm/ng-packs/packages/core/src/lib/validators/index.ts
+++ b/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,
 };
diff --git a/npm/ng-packs/packages/core/src/lib/validators/url.validator.ts b/npm/ng-packs/packages/core/src/lib/validators/url.validator.ts
index 705d07e17a..da941aee6f 100644
--- a/npm/ng-packs/packages/core/src/lib/validators/url.validator.ts
+++ b/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)) {
diff --git a/npm/ng-packs/packages/core/src/lib/validators/username.validator.ts b/npm/ng-packs/packages/core/src/lib/validators/username.validator.ts
new file mode 100644
index 0000000000..5dfec72c8c
--- /dev/null
+++ b/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);
+}
diff --git a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html
index 99d435c891..7873adf6ea 100644
--- a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html
+++ b/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>
diff --git a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts
index 75065272f4..9fd6987d19 100644
--- a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts
+++ b/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 => {
diff --git a/npm/ng-packs/packages/identity/src/lib/defaults/default-users-form-props.ts b/npm/ng-packs/packages/identity/src/lib/defaults/default-users-form-props.ts
index f42c761498..28c73b4320 100644
--- a/npm/ng-packs/packages/identity/src/lib/defaults/default-users-form-props.ts
+++ b/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,
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/constants/validation.ts b/npm/ng-packs/packages/theme-shared/src/lib/constants/validation.ts
index 33c6e1741c..7822c10e36 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/constants/validation.ts
+++ b/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 }}]',
 };

From 9cd2027cb0df35e61d0e4b504ef7a92a5bdc712b Mon Sep 17 00:00:00 2001
From: Mahmut Gundogdu <mahmutgundogdu@hotmail.com.tr>
Date: Wed, 24 Aug 2022 17:48:29 +0300
Subject: [PATCH 11/13] Format changes code with prettier

---
 .../account/src/lib/account.module.ts         | 44 +++++++++----------
 .../personal-settings-half-row.component.ts   | 42 ++++++++++--------
 .../personal-settings.component.ts            | 36 ++++++++-------
 .../default-personal-settings-form-props.ts   | 22 +++++-----
 .../account/src/lib/models/config-options.ts  |  8 ++--
 .../src/lib/tokens/extensions.token.ts        | 10 ++---
 .../src/lib/validators/required.validator.ts  |  1 +
 7 files changed, 86 insertions(+), 77 deletions(-)

diff --git a/npm/ng-packs/packages/account/src/lib/account.module.ts b/npm/ng-packs/packages/account/src/lib/account.module.ts
index 74310ce1bd..bdf3c39792 100644
--- a/npm/ng-packs/packages/account/src/lib/account.module.ts
+++ b/npm/ng-packs/packages/account/src/lib/account.module.ts
@@ -1,24 +1,24 @@
-import {CoreModule, LazyModuleFactory} from '@abp/ng.core';
-import {ThemeSharedModule} from '@abp/ng.theme.shared';
-import {ModuleWithProviders, NgModule, NgModuleFactory} from '@angular/core';
-import {NgbDropdownModule} from '@ng-bootstrap/ng-bootstrap';
-import {NgxValidateCoreModule} from '@ngx-validate/core';
-import {AccountRoutingModule} from './account-routing.module';
-import {ChangePasswordComponent} from './components/change-password/change-password.component';
-import {LoginComponent} from './components/login/login.component';
-import {ManageProfileComponent} from './components/manage-profile/manage-profile.component';
-import {PersonalSettingsComponent} from './components/personal-settings/personal-settings.component';
-import {RegisterComponent} from './components/register/register.component';
-import {AccountConfigOptions} from './models/config-options';
-import {ACCOUNT_CONFIG_OPTIONS} from './tokens/config-options.token';
-import {accountConfigOptionsFactory} from './utils/factory-utils';
-import {AuthenticationFlowGuard} from './guards/authentication-flow.guard';
-import {ForgotPasswordComponent} from './components/forgot-password/forgot-password.component';
-import {ResetPasswordComponent} from './components/reset-password/reset-password.component';
-import {UiExtensionsModule} from '@abp/ng.theme.shared/extensions';
-import {ACCOUNT_EDIT_FORM_PROP_CONTRIBUTORS} from './tokens/extensions.token';
-import {AccountExtensionsGuard} from './guards/extensions.guard';
-import {PersonalSettingsHalfRowComponent} from './components/personal-settings/personal-settings-half-row.component';
+import { CoreModule, LazyModuleFactory } from '@abp/ng.core';
+import { ThemeSharedModule } from '@abp/ng.theme.shared';
+import { ModuleWithProviders, NgModule, NgModuleFactory } from '@angular/core';
+import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgxValidateCoreModule } from '@ngx-validate/core';
+import { AccountRoutingModule } from './account-routing.module';
+import { ChangePasswordComponent } from './components/change-password/change-password.component';
+import { LoginComponent } from './components/login/login.component';
+import { ManageProfileComponent } from './components/manage-profile/manage-profile.component';
+import { PersonalSettingsComponent } from './components/personal-settings/personal-settings.component';
+import { RegisterComponent } from './components/register/register.component';
+import { AccountConfigOptions } from './models/config-options';
+import { ACCOUNT_CONFIG_OPTIONS } from './tokens/config-options.token';
+import { accountConfigOptionsFactory } from './utils/factory-utils';
+import { AuthenticationFlowGuard } from './guards/authentication-flow.guard';
+import { ForgotPasswordComponent } from './components/forgot-password/forgot-password.component';
+import { ResetPasswordComponent } from './components/reset-password/reset-password.component';
+import { UiExtensionsModule } from '@abp/ng.theme.shared/extensions';
+import { ACCOUNT_EDIT_FORM_PROP_CONTRIBUTORS } from './tokens/extensions.token';
+import { AccountExtensionsGuard } from './guards/extensions.guard';
+import { PersonalSettingsHalfRowComponent } from './components/personal-settings/personal-settings-half-row.component';
 
 const declarations = [
   LoginComponent,
@@ -49,7 +49,7 @@ export class AccountModule {
       ngModule: AccountModule,
       providers: [
         AuthenticationFlowGuard,
-        {provide: ACCOUNT_CONFIG_OPTIONS, useValue: options},
+        { provide: ACCOUNT_CONFIG_OPTIONS, useValue: options },
         {
           provide: 'ACCOUNT_OPTIONS',
           useFactory: accountConfigOptionsFactory,
diff --git a/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings-half-row.component.ts b/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings-half-row.component.ts
index c0069ecd9e..a000e353d6 100644
--- a/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings-half-row.component.ts
+++ b/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings-half-row.component.ts
@@ -1,31 +1,37 @@
-import {Component, Inject} from '@angular/core';
-import {EXTENSIONS_FORM_PROP, FormProp, EXTENSIBLE_FORM_VIEW_PROVIDER} from "@abp/ng.theme.shared/extensions";
-import {FormGroup} from "@angular/forms";
+import { Component, Inject } from '@angular/core';
+import {
+  EXTENSIONS_FORM_PROP,
+  FormProp,
+  EXTENSIBLE_FORM_VIEW_PROVIDER,
+} from '@abp/ng.theme.shared/extensions';
+import { FormGroup } from '@angular/forms';
 
 @Component({
   selector: 'abp-personal-settings-half-row',
-  template: `
-    <div class="w-50 d-inline">
-      <div class="mb-3 form-group"  >
-        <label [attr.for]="name" class="form-label">{{
-          displayName | abpLocalization
-          }}
-        </label>
-        <input type="text" [attr.id]="id" class="form-control"  [attr.name]="name" [formControlName]="name"/>
-      </div>
-    </div>`,
+  template: ` <div class="w-50 d-inline">
+    <div class="mb-3 form-group">
+      <label [attr.for]="name" class="form-label">{{ displayName | abpLocalization }} </label>
+      <input
+        type="text"
+        [attr.id]="id"
+        class="form-control"
+        [attr.name]="name"
+        [formControlName]="name"
+      />
+    </div>
+  </div>`,
   styles: [],
-  viewProviders: [EXTENSIBLE_FORM_VIEW_PROVIDER]
+  viewProviders: [EXTENSIBLE_FORM_VIEW_PROVIDER],
 })
 export class PersonalSettingsHalfRowComponent {
   public displayName: string;
   public name: string;
   public id: string;
-  public formGroup: FormGroup
+  public formGroup: FormGroup;
 
   constructor(@Inject(EXTENSIONS_FORM_PROP) private propData: FormProp) {
-    this.displayName = propData.displayName
-    this.name = propData.name
-    this.id = propData.id
+    this.displayName = propData.displayName;
+    this.name = propData.name;
+    this.id = propData.id;
   }
 }
diff --git a/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings.component.ts b/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings.component.ts
index c4a8422291..1688ef5741 100644
--- a/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings.component.ts
+++ b/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings.component.ts
@@ -1,24 +1,27 @@
-import {ProfileDto, ProfileService} from '@abp/ng.account.core/proxy';
-import {ToasterService} from '@abp/ng.theme.shared';
-import {Component, Injector, OnInit, ViewEncapsulation} from '@angular/core';
-import {FormBuilder, FormGroup} from '@angular/forms';
-import {finalize} from 'rxjs/operators';
-import {Account} from '../../models/account';
-import {ManageProfileStateService} from '../../services/manage-profile.state.service';
-import {EXTENSIONS_IDENTIFIER, FormPropData, generateFormFromProps} from "@abp/ng.theme.shared/extensions";
-import {eAccountComponents} from "../../enums";
-
+import { ProfileDto, ProfileService } from '@abp/ng.account.core/proxy';
+import { ToasterService } from '@abp/ng.theme.shared';
+import { Component, Injector, OnInit, ViewEncapsulation } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { finalize } from 'rxjs/operators';
+import { Account } from '../../models/account';
+import { ManageProfileStateService } from '../../services/manage-profile.state.service';
+import {
+  EXTENSIONS_IDENTIFIER,
+  FormPropData,
+  generateFormFromProps,
+} from '@abp/ng.theme.shared/extensions';
+import { eAccountComponents } from '../../enums';
 
 @Component({
   selector: 'abp-personal-settings-form',
   templateUrl: './personal-settings.component.html',
   exportAs: 'abpPersonalSettingsForm',
-  providers:[
+  providers: [
     {
       provide: EXTENSIONS_IDENTIFIER,
       useValue: eAccountComponents.PersonalSettings,
     },
-  ]
+  ],
 })
 export class PersonalSettingsComponent
   implements
@@ -26,7 +29,7 @@ export class PersonalSettingsComponent
     Account.PersonalSettingsComponentInputs,
     Account.PersonalSettingsComponentOutputs
 {
-  selected:ProfileDto
+  selected: ProfileDto;
 
   form: FormGroup;
 
@@ -40,18 +43,17 @@ export class PersonalSettingsComponent
     protected injector: Injector,
   ) {}
 
-
   buildForm() {
     this.selected = this.manageProfileState.getProfile();
-    if(!this.selected){
-      return
+    if (!this.selected) {
+      return;
     }
     const data = new FormPropData(this.injector, this.selected);
     this.form = generateFormFromProps(data);
   }
 
   ngOnInit(): void {
-    this.buildForm()
+    this.buildForm();
   }
 
   submit() {
diff --git a/npm/ng-packs/packages/account/src/lib/defaults/default-personal-settings-form-props.ts b/npm/ng-packs/packages/account/src/lib/defaults/default-personal-settings-form-props.ts
index 325c25010f..59c196f2bd 100644
--- a/npm/ng-packs/packages/account/src/lib/defaults/default-personal-settings-form-props.ts
+++ b/npm/ng-packs/packages/account/src/lib/defaults/default-personal-settings-form-props.ts
@@ -1,7 +1,7 @@
-import {ePropType, FormProp} from "@abp/ng.theme.shared/extensions";
-import {UpdateProfileDto} from "@abp/ng.account.core/proxy";
-import {Validators} from "@angular/forms";
-import {PersonalSettingsHalfRowComponent} from "../components/personal-settings/personal-settings-half-row.component";
+import { ePropType, FormProp } from '@abp/ng.theme.shared/extensions';
+import { UpdateProfileDto } from '@abp/ng.account.core/proxy';
+import { Validators } from '@angular/forms';
+import { PersonalSettingsHalfRowComponent } from '../components/personal-settings/personal-settings-half-row.component';
 
 const { maxLength, required, email } = Validators;
 export const DEFAULT_PERSONAL_SETTINGS_UPDATE_FORM_PROPS = FormProp.createMany<UpdateProfileDto>([
@@ -10,7 +10,7 @@ export const DEFAULT_PERSONAL_SETTINGS_UPDATE_FORM_PROPS = FormProp.createMany<U
     name: 'userName',
     displayName: 'AbpIdentity::DisplayName:UserName',
     id: 'username',
-    validators: () => [required,maxLength(256)],
+    validators: () => [required, maxLength(256)],
   },
   {
     type: ePropType.String,
@@ -18,8 +18,8 @@ export const DEFAULT_PERSONAL_SETTINGS_UPDATE_FORM_PROPS = FormProp.createMany<U
     displayName: 'AbpIdentity::DisplayName:Name',
     id: 'name',
     validators: () => [maxLength(64)],
-    template:PersonalSettingsHalfRowComponent,
-    className:"d-inline-block w-50"
+    template: PersonalSettingsHalfRowComponent,
+    className: 'd-inline-block w-50',
   },
   {
     type: ePropType.String,
@@ -27,15 +27,15 @@ export const DEFAULT_PERSONAL_SETTINGS_UPDATE_FORM_PROPS = FormProp.createMany<U
     displayName: 'AbpIdentity::DisplayName:Surname',
     id: 'surname',
     validators: () => [maxLength(64)],
-    className:"d-inline-block w-50 ps-4",
-    template:PersonalSettingsHalfRowComponent
+    className: 'd-inline-block w-50 ps-4',
+    template: PersonalSettingsHalfRowComponent,
   },
   {
     type: ePropType.String,
     name: 'email',
     displayName: 'AbpIdentity::DisplayName:Email',
     id: 'email-address',
-    validators: () =>  [required, email, maxLength(256)],
+    validators: () => [required, email, maxLength(256)],
   },
   {
     type: ePropType.String,
@@ -44,4 +44,4 @@ export const DEFAULT_PERSONAL_SETTINGS_UPDATE_FORM_PROPS = FormProp.createMany<U
     id: 'phone-number',
     validators: () => [maxLength(16)],
   },
-])
+]);
diff --git a/npm/ng-packs/packages/account/src/lib/models/config-options.ts b/npm/ng-packs/packages/account/src/lib/models/config-options.ts
index c3bbb6cb1b..f3af14a71e 100644
--- a/npm/ng-packs/packages/account/src/lib/models/config-options.ts
+++ b/npm/ng-packs/packages/account/src/lib/models/config-options.ts
@@ -1,11 +1,11 @@
-import {eAccountComponents} from "../enums";
+import { eAccountComponents } from '../enums';
 import { EditFormPropContributorCallback } from '@abp/ng.theme.shared/extensions';
-import {UpdateProfileDto} from "@abp/ng.account.core/proxy";
+import { UpdateProfileDto } from '@abp/ng.account.core/proxy';
 
 export interface AccountConfigOptions {
   redirectUrl?: string;
   editFormPropContributors?: AccountEditFormPropContributors;
 }
 export type AccountEditFormPropContributors = Partial<{
-  [eAccountComponents.PersonalSettings]:  EditFormPropContributorCallback<UpdateProfileDto>[];
-}>;
+  [eAccountComponents.PersonalSettings]: EditFormPropContributorCallback<UpdateProfileDto>[];
+}>;
\ No newline at end of file
diff --git a/npm/ng-packs/packages/account/src/lib/tokens/extensions.token.ts b/npm/ng-packs/packages/account/src/lib/tokens/extensions.token.ts
index 6d95db8b6d..78acb7feaa 100644
--- a/npm/ng-packs/packages/account/src/lib/tokens/extensions.token.ts
+++ b/npm/ng-packs/packages/account/src/lib/tokens/extensions.token.ts
@@ -1,8 +1,8 @@
-import {eAccountComponents} from "../enums";
-import {DEFAULT_PERSONAL_SETTINGS_UPDATE_FORM_PROPS} from "../defaults/default-personal-settings-form-props";
-import {InjectionToken} from "@angular/core";
-import {EditFormPropContributorCallback} from "@abp/ng.theme.shared/extensions";
-import {UpdateProfileDto} from "@abp/ng.account.core/proxy";
+import { eAccountComponents } from '../enums';
+import { DEFAULT_PERSONAL_SETTINGS_UPDATE_FORM_PROPS } from '../defaults/default-personal-settings-form-props';
+import { InjectionToken } from '@angular/core';
+import { EditFormPropContributorCallback } from '@abp/ng.theme.shared/extensions';
+import { UpdateProfileDto } from '@abp/ng.account.core/proxy';
 
 export const DEFAULT_ACCOUNT_FORM_PROPS = {
   [eAccountComponents.PersonalSettings]: DEFAULT_PERSONAL_SETTINGS_UPDATE_FORM_PROPS,
diff --git a/npm/ng-packs/packages/core/src/lib/validators/required.validator.ts b/npm/ng-packs/packages/core/src/lib/validators/required.validator.ts
index 68ad0e8a85..4e2b1931db 100644
--- a/npm/ng-packs/packages/core/src/lib/validators/required.validator.ts
+++ b/npm/ng-packs/packages/core/src/lib/validators/required.validator.ts
@@ -9,6 +9,7 @@ export interface RequiredOptions {
 }
 
 export function validateRequired({ allowEmptyStrings }: RequiredOptions = {}): ValidatorFn {
+  // note: please do not remove name of the function, it is used in function compare with type 'RequiredError'
   const required = (control: AbstractControl): RequiredError | null => {
     return isValidRequired(control.value, allowEmptyStrings) ? null : { required: true };
   };

From 861aff5ab208a2cf92e4053f5d326a89ec12b704 Mon Sep 17 00:00:00 2001
From: Mahmut Gundogdu <mahmutgundogdu@hotmail.com.tr>
Date: Wed, 24 Aug 2022 17:52:07 +0300
Subject: [PATCH 12/13] remove disabled atribute on abp-personal-settings-form

---
 .../personal-settings/personal-settings.component.html           | 1 -
 1 file changed, 1 deletion(-)

diff --git a/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings.component.html b/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings.component.html
index 86dd3272b3..e166a49545 100644
--- a/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings.component.html
+++ b/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings.component.html
@@ -6,7 +6,6 @@
     iconClass="fa fa-check"
     buttonClass="btn btn-primary color-white"
     [loading]="inProgress"
-    [disabled]="form?.invalid"
   >
     {{ 'AbpIdentity::Save' | abpLocalization }}</abp-button
   >

From d0ca09ed9fe6ede34083c92a9ad37cc80305ee47 Mon Sep 17 00:00:00 2001
From: Mahmut Gundogdu <mahmutgundogdu@hotmail.com.tr>
Date: Thu, 25 Aug 2022 14:54:28 +0300
Subject: [PATCH 13/13] reformat the codes

---
 .../src/lib/guards/extensions.guard.ts        | 22 +++---
 .../src/lib/validators/username.validator.ts  |  8 +-
 .../extensible-form-prop.component.ts         | 74 ++++++++++---------
 .../extensible-form.component.ts              |  4 +-
 .../extensions/src/lib/models/form-props.ts   |  6 +-
 .../extensions/src/lib/models/props.ts        |  4 +-
 .../src/lib/tokens/extensions.token.ts        |  3 +-
 7 files changed, 63 insertions(+), 58 deletions(-)

diff --git a/npm/ng-packs/packages/account/src/lib/guards/extensions.guard.ts b/npm/ng-packs/packages/account/src/lib/guards/extensions.guard.ts
index 48fe8a341f..7c50eadf5e 100644
--- a/npm/ng-packs/packages/account/src/lib/guards/extensions.guard.ts
+++ b/npm/ng-packs/packages/account/src/lib/guards/extensions.guard.ts
@@ -1,14 +1,18 @@
-import {Injectable, Injector} from "@angular/core";
-import {CanActivate} from "@angular/router";
-import {Observable} from "rxjs";
+import { Injectable, Injector } from '@angular/core';
+import { CanActivate } from '@angular/router';
+import { Observable } from 'rxjs';
 import {
   ExtensionsService,
   getObjectExtensionEntitiesFromStore,
-  mapEntitiesToContributors, mergeWithDefaultProps
-} from "@abp/ng.theme.shared/extensions";
- import {ConfigStateService} from "@abp/ng.core";
-import {tap, map, mapTo} from "rxjs/operators";
-import {ACCOUNT_EDIT_FORM_PROP_CONTRIBUTORS, DEFAULT_ACCOUNT_FORM_PROPS} from '../tokens/extensions.token';
+  mapEntitiesToContributors,
+  mergeWithDefaultProps,
+} from '@abp/ng.theme.shared/extensions';
+import { ConfigStateService } from '@abp/ng.core';
+import { tap, map, mapTo } from 'rxjs/operators';
+import {
+  ACCOUNT_EDIT_FORM_PROP_CONTRIBUTORS,
+  DEFAULT_ACCOUNT_FORM_PROPS,
+} from '../tokens/extensions.token';
 import { AccountEditFormPropContributors } from '../models/config-options';
 import { eAccountComponents } from '../enums/components';
 
@@ -26,7 +30,7 @@ export class AccountExtensionsGuard implements CanActivate {
     return getObjectExtensionEntitiesFromStore(configState, 'Identity').pipe(
       map(entities => ({
         [eAccountComponents.PersonalSettings]: entities.User,
-       })),
+      })),
       mapEntitiesToContributors(configState, 'AbpIdentity'),
       tap(objectExtensionContributors => {
         mergeWithDefaultProps(
diff --git a/npm/ng-packs/packages/core/src/lib/validators/username.validator.ts b/npm/ng-packs/packages/core/src/lib/validators/username.validator.ts
index 5dfec72c8c..4e943769d2 100644
--- a/npm/ng-packs/packages/core/src/lib/validators/username.validator.ts
+++ b/npm/ng-packs/packages/core/src/lib/validators/username.validator.ts
@@ -1,9 +1,9 @@
-import {AbstractControl, ValidatorFn} from '@angular/forms';
+import { AbstractControl, ValidatorFn } from '@angular/forms';
 import { isNullOrEmpty } from '../utils';
 
 export interface UsernamePatternError {
   usernamePattern: {
-    actualValue:string;
+    actualValue: string;
   };
 }
 
@@ -14,11 +14,11 @@ export interface UsernameOptions {
 const onlyLetterAndNumberRegex = /^[a-zA-Z0-9]+$/;
 
 export function validateUsername(
-  {pattern}: UsernameOptions = {pattern: onlyLetterAndNumberRegex},
+  { pattern }: UsernameOptions = { pattern: onlyLetterAndNumberRegex },
 ): ValidatorFn {
   return (control: AbstractControl): UsernamePatternError | null => {
     const isValid = isValidUserName(control.value, pattern);
-    return isValid ? null : {usernamePattern: {actualValue: control.value}};
+    return isValid ? null : { usernamePattern: { actualValue: control.value } };
   };
 }
 
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts
index 5e703bcb01..9cb65f1b5e 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.ts
@@ -1,11 +1,12 @@
-import {EXTENSIONS_FORM_PROP_DATA, EXTENSIONS_FORM_PROP} from './../../tokens/extensions.token';
-import {ABP, AbpValidators, ConfigStateService, TrackByService} from '@abp/ng.core';
+import { EXTENSIONS_FORM_PROP_DATA, EXTENSIONS_FORM_PROP } from './../../tokens/extensions.token';
+import { ABP, AbpValidators, ConfigStateService, TrackByService } from '@abp/ng.core';
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
-  ElementRef, Injector,
+  ElementRef,
+  Injector,
   Input,
   OnChanges,
   Optional,
@@ -20,17 +21,17 @@ import {
   ValidatorFn,
   Validators,
 } from '@angular/forms';
-import {NgbDateAdapter, NgbTimeAdapter} from '@ng-bootstrap/ng-bootstrap';
-import {Observable, of} from 'rxjs';
-import {debounceTime, distinctUntilChanged, switchMap} from 'rxjs/operators';
-import {DateAdapter} from '../../adapters/date.adapter';
-import {TimeAdapter} from '../../adapters/time.adapter';
-import {EXTRA_PROPERTIES_KEY} from '../../constants/extra-properties';
-import {ePropType} from '../../enums/props.enum';
-import {FormProp} from '../../models/form-props';
-import {PropData} from '../../models/props';
-import {selfFactory} from '../../utils/factory.util';
-import {addTypeaheadTextSuffix} from '../../utils/typeahead.util';
+import { NgbDateAdapter, NgbTimeAdapter } from '@ng-bootstrap/ng-bootstrap';
+import { Observable, of } from 'rxjs';
+import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
+import { DateAdapter } from '../../adapters/date.adapter';
+import { TimeAdapter } from '../../adapters/time.adapter';
+import { EXTRA_PROPERTIES_KEY } from '../../constants/extra-properties';
+import { ePropType } from '../../enums/props.enum';
+import { FormProp } from '../../models/form-props';
+import { PropData } from '../../models/props';
+import { selfFactory } from '../../utils/factory.util';
+import { addTypeaheadTextSuffix } from '../../utils/typeahead.util';
 
 @Component({
   selector: 'abp-extensible-form-prop',
@@ -42,8 +43,8 @@ import {addTypeaheadTextSuffix} from '../../utils/typeahead.util';
       useFactory: selfFactory,
       deps: [[new Optional(), new SkipSelf(), ControlContainer]],
     },
-    {provide: NgbDateAdapter, useClass: DateAdapter},
-    {provide: NgbTimeAdapter, useClass: TimeAdapter},
+    { provide: NgbDateAdapter, useClass: DateAdapter },
+    { provide: NgbTimeAdapter, useClass: TimeAdapter },
   ],
 })
 export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
@@ -55,7 +56,7 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
 
   @ViewChild('field') private fieldRef!: ElementRef<HTMLElement>;
 
-  public injectorForCustomComponent: Injector
+  public injectorForCustomComponent: Injector;
 
   asterisk = '';
 
@@ -72,13 +73,12 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
   disabledFn = (data: PropData) => false;
 
   get disabled() {
-    return this.disabledFn(this.data)
+    return this.disabledFn(this.data);
   }
 
-
   setTypeaheadValue(selectedOption: ABP.Option<string>) {
-    this.typeaheadModel = selectedOption || {key: null, value: null};
-    const {key, value} = this.typeaheadModel;
+    this.typeaheadModel = selectedOption || { key: null, value: null };
+    const { key, value } = this.typeaheadModel;
     const [keyControl, valueControl] = this.getTypeaheadControls();
     if (valueControl?.value && !value) valueControl.markAsDirty();
     keyControl?.setValue(key);
@@ -88,10 +88,10 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
   search = (text$: Observable<string>) =>
     text$
       ? text$.pipe(
-        debounceTime(300),
-        distinctUntilChanged(),
-        switchMap(text => this.prop.options(this.data, text)),
-      )
+          debounceTime(300),
+          distinctUntilChanged(),
+          switchMap(text => this.prop.options(this.data, text)),
+        )
       : of([]);
 
   typeaheadFormatter = (option: ABP.Option<any>) => option.key;
@@ -112,13 +112,13 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
     public readonly track: TrackByService,
     protected configState: ConfigStateService,
     groupDirective: FormGroupDirective,
-    private injector: Injector
+    private injector: Injector,
   ) {
     this.form = groupDirective.form;
   }
 
   private getTypeaheadControls() {
-    const {name} = this.prop;
+    const { name } = this.prop;
     const extraPropName = `${EXTRA_PROPERTIES_KEY}.${name}`;
     const keyControl =
       this.form.get(addTypeaheadTextSuffix(extraPropName)) ||
@@ -139,7 +139,7 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
 
   getComponent(prop: FormProp): string {
     if (prop.template) {
-      return 'template'
+      return 'template';
     }
     switch (prop.type) {
       case ePropType.Boolean:
@@ -181,21 +181,21 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
     }
   }
 
-  ngOnChanges({prop, data}: SimpleChanges) {
+  ngOnChanges({ prop, data }: SimpleChanges) {
     const currentProp = prop?.currentValue as FormProp;
-    const {options, readonly, disabled, validators, template} = currentProp || {};
+    const { options, readonly, disabled, validators, template } = currentProp || {};
     if (template) {
       this.injectorForCustomComponent = Injector.create({
         providers: [
           {
             provide: EXTENSIONS_FORM_PROP,
-            useValue: currentProp
+            useValue: currentProp,
           },
           {
             provide: EXTENSIONS_FORM_PROP_DATA,
-            useValue: (data?.currentValue as PropData)?.record
+            useValue: (data?.currentValue as PropData)?.record,
           },
-          {provide: ControlContainer, useExisting: FormGroupDirective}
+          { provide: ControlContainer, useExisting: FormGroupDirective },
         ],
         parent: this.injector,
       });
@@ -214,10 +214,14 @@ export class ExtensibleFormPropComponent implements OnChanges, AfterViewInit {
 
     const [keyControl, valueControl] = this.getTypeaheadControls();
     if (keyControl && valueControl)
-      this.typeaheadModel = {key: keyControl.value, value: valueControl.value};
+      this.typeaheadModel = { key: keyControl.value, value: valueControl.value };
   }
 }
 
 function isRequired(validator: ValidatorFn) {
-   return validator === Validators.required || validator === AbpValidators.required || validator.name === 'required';
+  return (
+    validator === Validators.required ||
+    validator === AbpValidators.required ||
+    validator.name === 'required'
+  );
 }
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form.component.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form.component.ts
index 2086e3c818..17131e9aaf 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form.component.ts
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form.component.ts
@@ -10,7 +10,7 @@ import {
   SkipSelf,
   ViewChildren,
 } from '@angular/core';
-import {ControlContainer, FormGroup, FormGroupDirective} from '@angular/forms';
+import { ControlContainer, FormGroup } from '@angular/forms';
 import { EXTRA_PROPERTIES_KEY } from '../../constants/extra-properties';
 import { FormPropList } from '../../models/form-props';
 import { ExtensionsService } from '../../services/extensions.service';
@@ -62,5 +62,3 @@ export class ExtensibleFormComponent<R = any> {
     @Inject(EXTENSIONS_IDENTIFIER) private identifier: string,
   ) {}
 }
-
-
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/form-props.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/form-props.ts
index 4e71c70e0f..bfc9f46dba 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/form-props.ts
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/form-props.ts
@@ -38,8 +38,8 @@ export class FormProp<R = any> extends Prop<R> {
   readonly defaultValue: boolean | number | string | Date;
   readonly options: PropCallback<R, Observable<ABP.Option<any>[]>> | undefined;
   readonly id: string | undefined;
-  readonly template? : Type<any>
-  readonly className?:string;
+  readonly template?: Type<any>;
+  readonly className?: string;
 
   constructor(options: FormPropOptions<R>) {
     super(
@@ -50,7 +50,7 @@ export class FormProp<R = any> extends Prop<R> {
       options.visible,
       options.isExtra,
       options.template,
-      options.className
+      options.className,
     );
 
     this.asyncValidators = options.asyncValidators || (_ => []);
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/props.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/props.ts
index e8bb158cc9..3799c419a7 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/props.ts
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/models/props.ts
@@ -33,8 +33,8 @@ export abstract class Prop<R = any> {
     public readonly permission: string,
     public readonly visible: PropPredicate<R> = _ => true,
     public readonly isExtra = false,
-    public readonly template? : Type<any>,
-    public readonly className?:string
+    public readonly template?: Type<any>,
+    public readonly className?: string,
   ) {
     this.displayName = this.displayName || this.name;
   }
diff --git a/npm/ng-packs/packages/theme-shared/extensions/src/lib/tokens/extensions.token.ts b/npm/ng-packs/packages/theme-shared/extensions/src/lib/tokens/extensions.token.ts
index 0a58566fcf..0a2df45a00 100644
--- a/npm/ng-packs/packages/theme-shared/extensions/src/lib/tokens/extensions.token.ts
+++ b/npm/ng-packs/packages/theme-shared/extensions/src/lib/tokens/extensions.token.ts
@@ -3,8 +3,7 @@ import { ActionCallback, ReadonlyActionData as ActionData } from '../models/acti
 import { ExtensionsService } from '../services/extensions.service';
 import { Observable } from 'rxjs';
 import { ePropType } from '../enums/props.enum';
- import {FormProp} from "../models/form-props";
-import { PropData } from '../models/props';
+import { FormProp } from '../models/form-props';
 
 export const EXTENSIONS_IDENTIFIER = new InjectionToken<string>('EXTENSIONS_IDENTIFIER');
 export type ActionKeys = Extract<'entityActions' | 'toolbarActions', keyof ExtensionsService>;