person profile, CRUD is finished.

src/app/client-profile/client-profile.component.ts

     if (! brokerForm.touched || brokerForm.form.pristine) {
       return;
     }
-    this.ps.saveUser(this.User).subscribe( () => {
+    this.ps.savePeople(this.User).subscribe( () => {
       this.showDialog('updated successfully ');
       brokerForm.form.markAsPristine();
     }, err => {

src/app/main-menu-items.ts

         text: 'People',
         icon: 'user',
         items: [
-            { text: 'Add ', icon: 'plus', url: './#people-add' },
+            { text: 'Add ', icon: 'plus', url: './#profile/start-new-people' },
             { text: 'List All', fa: faIdCard , url: './#list-all-people'},
-            { text: '--', separator: 'true' },
-            { text: 'Admin', icon: 'email', url: './#send-to-all-people'},
         ]
     },
 ];

src/app/message-box/message-box.component.html

 <kendo-dialog title="{{Title}} " *ngIf="opened" (close)="close('cancel')" [minWidth]="250" [width]="450">
-  <p style="margin: 30px; text-align: center;">{{ Message }}</p>
+  <p style="margin: 30px; text-align: center;">
+    <kendo-icon [name]="'information'" [size]="'large'" [themeColor]="'primary'"></kendo-icon> {{ Message }}
+  </p>
   <kendo-dialog-actions>
     <button kendoButton *ngIf="Mode!='YesOnly'" (click)="close('no')" primary="true">{{NoButtonText}}</button>
     <button kendoButton (click)="close('yes')" primary="true">{{YesButtonText}}</button>

src/app/models/api-v1-login-response.ts

   }
 
   public hasValidSession(): boolean {
-    if (this.session === undefined  || this.session === '') {
+    if (this.session === undefined  || this.session === '' || this.session === null) {
       return false;
     }else{
       return true;

src/app/models/people.model.ts

   public static EmptyNew(): PeopleModel {
     return new PeopleModel('', '', '', '', '', '', '' );
   }
+
+  public Copy(ppl: PeopleModel): void {
+    this.Id = ppl.Id;
+    this.First = ppl.First;
+    this.Last = ppl.Last;
+    this.Middle = ppl.Middle;
+    this.Title = ppl.Title;
+    this.Display = ppl.Display;
+    this.Nick = ppl.Nick;
+  }
+
+  public Clear(): void {
+    this.Id = '';
+    this.First = '';
+    this.Last = '';
+    this.Middle = '';
+    this.Title = '';
+    this.Display = '';
+    this.Nick = '';
+  }
 }
 
 

src/app/models/user-extra.model.ts

      rt.Role = '';
      return rt;
   }
+
+  public Clear(): void {
+    this.BSB = '';
+    this.ACC = '';
+    this.License = '';
+    this.Organization = '';
+    this.Enabled = false;
+    this.Login = '';
+    this.Role = '';
+  }
 }
 

src/app/profile/admin-profile/admin-profile.component.ts

   styleUrls: ['./admin-profile.component.scss']
 })
 export class AdminProfileComponent implements OnInit {
-  @Input() public PeopleId = '0';
 
   constructor() { }
 

src/app/profile/broker-profile/broker-profile.component.html

-      <h5> Broker Related : {{broker.Display }} </h5>
-
+  <h5> Broker : {{People.Display }} </h5>
+      <kendo-chip  [label]="UserExtra.Login" > </kendo-chip>
       <div class="vertical-spacer"></div>
 
       <form class="k-form" #brokerForm="ngForm" (submit)="save(brokerForm)">
           <fieldset class="k-form-fieldset">
             <kendo-formfield>
               <kendo-label [for]="License" text="License"></kendo-label>
-              <kendo-textbox #License  name="License" [(ngModel)]="broker.License" required [minlength]="3" [maxlength]="120"
+              <kendo-textbox #License  name="License" [(ngModel)]="UserExtra.License" required [minlength]="3" [maxlength]="120"
                              > </kendo-textbox>
               <kendo-formerror>license is required, key in unknown if have one</kendo-formerror>
             </kendo-formfield>
 
             <kendo-formfield>
               <kendo-label [for]="BSB" text="BSB"></kendo-label>
-              <kendo-textbox #BSB  name="BSB" [(ngModel)]="broker.BSB" required [minlength]="3" [maxlength]="7"
+              <kendo-textbox #BSB  name="BSB" [(ngModel)]="UserExtra.BSB" required [minlength]="3" [maxlength]="7"
                              > </kendo-textbox>
               <kendo-formerror>BSB required for accepting payment</kendo-formerror>
             </kendo-formfield>
 
             <kendo-formfield>
               <kendo-label [for]="ACC" text="ACC"></kendo-label>
-              <kendo-textbox #ACC  name="ACC" [(ngModel)]="broker.ACC" required [minlength]="3" [maxlength]="11"
+              <kendo-textbox #ACC  name="ACC" [(ngModel)]="UserExtra.ACC" required [minlength]="3" [maxlength]="11"
                              > </kendo-textbox>
               <kendo-formerror>ACC is required for accepting payment</kendo-formerror>
             </kendo-formfield>
 
             <kendo-formfield>
               <kendo-label [for]="Organization" text="Organization"></kendo-label>
-              <kendo-textbox #Organization  name="Organization" [(ngModel)]="broker.Organization" required
-                             [disabled]="!showAdmin" [minlength]="3" [maxlength]="25"
+              <kendo-textbox #Organization  name="Organization" [(ngModel)]="UserExtra.Organization" required
+                             [disabled]="!isAdmin" [minlength]="3" [maxlength]="25"
                              >
               </kendo-textbox>
               <kendo-formerror>Organization is required, (only changed by admin)</kendo-formerror>

src/app/profile/broker-profile/broker-profile.component.ts

 import {Component, Input, OnInit, ViewChild} from '@angular/core';
 import {AuthService} from '../../service/auth.service';
-import {FormControl, FormGroup, NgForm} from '@angular/forms';
-import {FileInfo, FileRestrictions, FileSelectComponent, SelectEvent} from '@progress/kendo-angular-upload';
+import {NgForm} from '@angular/forms';
 import {PeopleService} from '../../service/people.service';
 import {BrokerModel} from '../../models/broker.model';
 import {MessageBoxComponent} from '../../message-box/message-box.component';
+import {UserExtraModel} from '../../models/user-extra.model';
+import {PeopleModel} from '../../models/people.model';
 
 
 
   styleUrls: ['./broker-profile.component.scss']
 })
 export class BrokerProfileComponent implements OnInit {
-  @Input() public PeopleId = '';
-  @Input() public broker: BrokerModel = BrokerModel.EmptyNew();
+  @Input() public UserExtra: UserExtraModel = UserExtraModel.EmptyNew();
+  @Input() public People: PeopleModel = PeopleModel.EmptyNew();
   @ViewChild('messageBox', {static: true})msgBox: MessageBoxComponent;
-  public showAdmin = false;
+  public isAdmin = false;
 
   constructor( private auth: AuthService, private ps: PeopleService) { }
 
   ngOnInit(): void {
-    this.showAdmin = this.auth.isAdmin();
-
-    if (this.auth.isAdmin() ) {
-      // edit someone else
-    }else {
-      this.broker = BrokerModel.getFromUserAndExtra(this.auth.loggedIn.User, this.auth.loggedIn.UserExtra);
-    }
+    this.isAdmin = this.auth.isAdmin();
   }
 
   public save(brokerForm: NgForm): void{
     if (! brokerForm.touched || brokerForm.form.pristine) {
+      this.msgBox.Show('Save successfully done');
       return;
     }
-    this.ps.saveBroker(this.broker).subscribe( () => {
+    const broker = BrokerModel.getFromUserAndExtra(this.People, this.UserExtra);
+    this.ps.saveBroker(broker).subscribe( () => {
       this.msgBox.Show('updated successfully ');
       brokerForm.form.markAsPristine();
     }, err => {

src/app/profile/change-password/change-password.component.ts

 
   public canChangePassword(): boolean {
     if ( this.auth.isCurrentUser(this.PeopleId) ) {
-      return this.auth.isBroker() || this.auth.isAdmin();
+      return this.auth.isUser() || this.auth.isBroker() || this.auth.isAdmin();
     }else{
       return this.auth.isAdmin() ;
     }

src/app/profile/people-profile/people-profile.component.html

 
 <h5> <kendo-icon [name]="'ascx'" >  </kendo-icon> &nbsp; Personal Information </h5>
 
-<div class="dropzone-wrapper">
+<div class="ma" *ngIf="People.Id == '' ">
+  <div class="k-loading-panel" >
+    <div class="k-loading-panel-mask"></div>
+    <div class="k-loading-panel-wrapper">
+      <kendo-loader *ngIf="false"
+        [type]="'infinite-spinner'"
+        [themeColor]="'primary'"
+        [size]="'large'"
+      >
+      </kendo-loader>
+      <button kendoButton class="k-button k-primary add-new-people" type="submit" icon="plus"
+        (click)="createPeople()"> Create People
+      </button>
+
+    </div>
+  </div>
+</div>
+
+
+
+<div *ngIf="People.Id !=='' " class="dropzone-wrapper k-cursor-pointer " >
   <div class="fileselect-wrapper">
-    <div class="row justify-content-center">
-      <div #peoplePhoto class="people-photo" [ngStyle]="{'background-image' : avatarUrl }" ></div>
+    <div class="row justify-content-center" (click)="startSelectAvatar()">
+      <div #peoplePhoto class="people-photo" [ngStyle]="{'background-image' : avatarUrl }"></div>
     </div>
 
     <kendo-fileselect
       #fileSelect
       zoneId="myZone"
+      name="selectAvatar"
       [restrictions]="myRestrictions"
       [showFileList]="false"
       (select)="onSelectAvatar($event)"
-
     >
     </kendo-fileselect>
   </div>
       <kendo-formfield>
         <kendo-label [for]="First" text="First Name (only Admin can change)"></kendo-label>
         <kendo-textbox kendoTextBox #First  name="First" [(ngModel)]="People.First"
-                       [showSuccessIcon]="People.Display.length >= 3 && People.Display.length <=44 "> </kendo-textbox>
+                       > </kendo-textbox>
         <kendo-formerror>First name is required</kendo-formerror>
       </kendo-formfield>
       <div class="vertical-spacer"></div>
       <kendo-formfield>
         <kendo-label [for]="Last" text="Last Name (only Admin can change)"></kendo-label>
         <kendo-textbox kendoTextBox #Last   name="Last" [(ngModel)]="People.Last"
-                       [showSuccessIcon]="People.Display.length >= 3 && People.Display.length <=44 "></kendo-textbox>
+                       ></kendo-textbox>
         <kendo-formerror>Last Name is required</kendo-formerror>
       </kendo-formfield>
       <div class="vertical-spacer"></div>
 
       <kendo-formfield>
         <kendo-label [for]="Display" text="Display As"></kendo-label>
-        <kendo-textbox #Display  name="Display" [(ngModel)]="People.Display" required [minlength]="3" [maxlength]="120"
-                       [showSuccessIcon]="People.Display.length >= 3 && People.Display.length <=100 "> </kendo-textbox>
+        <kendo-textbox #Display  name="Display" [(ngModel)]="People.Display"
+                       required [minlength]="3" [maxlength]="120"
+                       > </kendo-textbox>
         <kendo-formerror>Display name cannot empty</kendo-formerror>
       </kendo-formfield>
       <div class="vertical-spacer"></div>

src/app/profile/people-profile/people-profile.component.scss

   height:1px;
   margin-bottom: 30px;
 }
+
+.k-loading-panel {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 100;
+}
+.k-loading-panel-mask {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: #000000;
+  opacity: 0.8;
+  border-radius: 10px;
+}
+.k-loading-panel-wrapper {
+  position: relative;
+  z-index: 2;
+}
+
+.k-loading-panel-text {
+  margin-top: 20px;
+  text-align: center;
+  color: #ffffff;
+}
+
+.k-button.add-new-people {
+  padding: 30px;
+  border-radius: 50px;
+  box-shadow: 1px 1px 10px white;
+}
+
+div.dropzone-wrapper.k-cursor-pointer :hover {
+  box-shadow: rgb(239 239 239 / 25%) 0px 30px 60px -12px inset, rgb(4 4 4 / 30%) 0px 18px 36px -18px inset;
+}

src/app/profile/people-profile/people-profile.component.ts

-import {Component, Input, OnInit, ViewChild} from '@angular/core';
+import {Component, Input, OnInit, ViewChild, EventEmitter, Output} from '@angular/core';
 import {MessageBoxComponent} from '../../message-box/message-box.component';
 import {FileInfo, FileRestrictions, FileSelectComponent, SelectEvent} from '@progress/kendo-angular-upload';
 import {AuthService} from '../../service/auth.service';
   styleUrls: ['./people-profile.component.scss']
 })
 export class PeopleProfileComponent implements OnInit {
-  @Input() PeopleId = '';
   @Input() public People: PeopleModel = PeopleModel.EmptyNew();
+  @Output() public newPeople = new EventEmitter<PeopleModel>();
+
   public avatarUrl = 'url(https://via.placeholder.com/128)' ;
   public myRestrictions: FileRestrictions = {
     allowedExtensions: ['.jpg', '.png', '.jpeg'],
   constructor(private auth: AuthService, private ps: PeopleService) { }
 
   ngOnInit(): void {
-    if (this.auth.isAdmin() &&  !this.auth.isCurrentUser(this.PeopleId)) {
-      // edit someone else
-      if ( this.People.Id === '' && this.PeopleId !== '') {// we need to load user by ourself
-        this.ps.getPeopleById(this.PeopleId).subscribe(
-          ppl => {
-            this.People = new PeopleModel(
-              ppl.Id,
-              ppl.First,
-              ppl.Last,
-              ppl.Middle,
-              ppl.Title,
-              ppl.Display,
-              ppl.Nick
-            );
-          }
-        );
-      }
+    if (this.auth.isAdmin() &&  !this.auth.isCurrentUser(this.People.Id)) {
+      //
     }else{
       this.People = this.auth.loggedIn.User;
     }
-    this.avatarUrl = 'url(' + this.auth.getUrl('avatar/' + this.PeopleId) + ')';
+    this.avatarUrl = 'url(' + this.auth.getUrl('avatar/' + this.People.Id) + ')';
   }
 
   onDialogClose(status: string): void {
           reader.onloadend = () => {
             const str = reader.result as string;
 
-            this.ps.updateAvatar(str, this.PeopleId).subscribe( resp => {
+            this.ps.updateAvatar(str, this.People.Id).subscribe( resp => {
               this.avatarUrl = 'url(' + str + ' )';
             }, err => {
               this.msgBox.Show('Failed to Update Avatar: ' + err.toString());
       this.msgBox.Show('Nothing has been changed');
       return;
     }
-    this.ps.saveUser(this.People).subscribe( () => {
+    this.ps.savePeople(this.People).subscribe( () => {
       this.msgBox.Show('Updated successfully ');
       if ( this.auth.loggedIn.User.Id === this.People.Id ) {
         this.auth.UpdatePeopleInfo(this.People);
       this.msgBox.Show('Failed to Update: ' + err.toString());
     });
   }
+
+  public createPeople(): void{
+    this.ps.createPeople(this.People).subscribe(
+      ppl => {
+          this.People.Copy(ppl);
+          this.newPeople.emit(this.People);
+          this.avatarUrl = 'url(' + this.auth.getUrl('avatar/' + this.People.Id) + ')';
+      }
+    );
+  }
+
+  public PeopleChanged(ppl: PeopleModel): void {
+    console.log(this);
+    this.avatarUrl = 'url(' + this.auth.getUrl('avatar/' + this.People.Id) + ')';
+  }
+
+  public startSelectAvatar(): void {
+    const element: NodeListOf<HTMLElement> = document.getElementsByName('selectAvatar');
+    element.forEach( v => {
+       if ( v.tagName.toLowerCase() === 'input') {
+         v.click();
+       }
+    });
+
+  }
 }

src/app/profile/profile.component.html

   <div class="container settings">
     <div class="row justify-content-center">
       <div class="col-sm-12">
-        <app-people-profile #peopleProfile *ngIf="showPeople()" [PeopleId]="PeopleId" [People]="People" ></app-people-profile>
-        <div *ngIf="showUser()" class="vertical-spacer"> <hr></div>
-        <app-user-profile #userProfile *ngIf="showUser()" [PeopleId]="PeopleId" [UserExtra]="UserExtra"></app-user-profile>
-        <div *ngIf="showBroker()" class="vertical-spacer"><hr></div>
-        <app-broker-profile #brokerProfile *ngIf="showBroker()" [PeopleId]="PeopleId"  [broker]="broker"></app-broker-profile>
-        <div *ngIf="showAdmin()"  class="vertical-spacer"><hr></div>
-        <app-admin-profile #adminProfile *ngIf="showAdmin()" [PeopleId]="PeopleId" ></app-admin-profile>
-        <div *ngIf="showPassword()" class="vertical-spacer"  ><hr></div>
-        <app-change-password #changePassword *ngIf="showPassword()" [PeopleId]="PeopleId" ></app-change-password>
+        <app-people-profile #peopleProfile [People]="People" (newPeople)="onNewPeopleCreated($event)" ></app-people-profile>
       </div>
     </div>
+    <div  *ngIf="showAdminTool" class="admin-panel ">
+      <div class="admin-label"> admin options </div>
+
+      <button kendoButton class="k-button k-primary" [disabled]="!enableUserAdd"
+              (click)="upgradePeopleToUser()" icon="plus">
+        create login</button>
+      <span class="spacer"></span>
+      <button kendoButton class="k-button k-primary" [disabled]="!enableUserDel"
+              (click)="downgradeToPeople()" icon="minus"> delete login</button>
+      <span class="spacer"></span>
+
+    </div>
+<!--    <bkp-divider-shadow-bottom *ngIf="showAdminTool" ></bkp-divider-shadow-bottom>-->
+
+    <div *ngIf="showUser" class="row justify-content-center">
+      <div class="col-sm-12">
+        <app-user-profile #userProfile  [People]="People" [UserExtra]="UserExtra"></app-user-profile>
+
+        <div  *ngIf="showAdminTool" class="admin-panel ">
+          <div class="admin-label"> admin options </div>
+
+          <button kendoButton class="k-button k-primary" [disabled]="!enableBrokerAdd"
+                  (click)="upgradeUserToBroker()" icon="user"> upgrade to broker</button>
+          <span class="spacer"></span>
+          <button kendoButton class="k-button k-primary" [disabled]="!enableBrokerDel"
+                  (click)="downgradeToUser()" icon="close-outline">downgrade Broker</button>
+        </div>
+
+        <app-broker-profile #brokerProfile *ngIf="showBroker"
+                            [People]="People" [UserExtra]="UserExtra" ></app-broker-profile>
+
+        <app-admin-profile #adminProfile *ngIf="showAdmin" ></app-admin-profile>
+
+      </div>
+    </div>
+
+    <div *ngIf="showPassword" class="col-sm-12">
+      <div  class="vertical-spacer"  ><hr></div>
+      <app-change-password #changePassword  [PeopleId]="People.Id" ></app-change-password>
+
+      <div  *ngIf="showAdminTool" class="admin-panel dangerous" [ngStyle]="{'height.px': deleteHeight}">
+        <div class="admin-label">
+          <kendo-switch
+            [(ngModel)]="warnDelete"
+            [ngModelOptions]="{standalone: true}"
+            (valueChange)="onWarnDelete($event)"
+          ></kendo-switch> &nbsp; Remove this person
+        </div>
+        <kendo-icon *ngIf="warnDelete"  name="exception" [size]="'large'"></kendo-icon>
+        <span *ngIf="warnDelete"> You confirm to delete EVERY-thing related to this person </span>
+        <button *ngIf="warnDelete" kendoButton class="k-button "
+                (click)="deletePeople()" icon="trash">
+          Delete</button>
+      </div>
+
+    </div>
   </div>
+
+
 </div>
 
+
+<app-message-box #messagebox ></app-message-box>

src/app/profile/profile.component.scss

   height:1px;
   margin-bottom: 30px;
 }
+
+div.admin-panel {
+  position:relative;
+  height: 100px;
+  text-align: center;
+  margin-top: 10px;
+  margin-bottom: 20px;
+  padding-top: 50px;
+  box-shadow: rgb(0 0 0 / 2%) 0px 1px 3px 0px, rgb(175 175 175 / 15%) 0px 0px 0px 1px
+}
+
+div.admin-panel.dangerous {
+  margin-top: 30px;
+  border-radius: 0px 0px 50px 50px;
+  background-color: #ffeeee;
+}
+
+span.spacer{
+  display: inline-block;
+  width: 30px;
+}
+
+div.admin-label{
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  background-color: #dadada4a;
+  width: 100%;
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
+}

src/app/profile/profile.component.ts

 import {BrokerModel} from '../models/broker.model';
 import {PeopleModel} from '../models/people.model';
 import {UserExtraModel} from '../models/user-extra.model';
+import {MessageBoxComponent} from '../message-box/message-box.component';
+import {setTime} from '@progress/kendo-angular-dateinputs/dist/es2015/util';
 
 @Component({
   selector: 'app-profile',
   @ViewChild('peopleProfile', {static: true}) pp: PeopleProfileComponent;
   @ViewChild('userProfile', {static: true}) up: UserProfileComponent;
   @ViewChild('brokerProfile', {static: true}) bp: BrokerProfileComponent;
+  @ViewChild('messagebox', {static: true}) msgBox: MessageBoxComponent;
 
-  public role = 'unknown';
+  public role = 'unknown'; // the role user to be edited.
   public UserExtra: UserExtraModel = UserExtraModel.EmptyNew();
   public People: PeopleModel = PeopleModel.EmptyNew();
-  public broker: BrokerModel = BrokerModel.EmptyNew();
 
+  // different section
+  public showUser = false;
+  public showBroker = false;
+  public showAdmin = false;
+  public showPassword = false;
+
+  // admin specific
+  public showAdminTool = false;
+  public editOtherPeople = false;
+  public enableUserAdd = false;
+  public enableUserDel = false;
+  public enableBrokerAdd = false;
+  public enableBrokerDel = false;
+
+  // delete entire people
+  public warnDelete = false;
+  public deleteHeight = 25;
+  //
   public isValidPeople = true;
   public isValidBroker = true;
 
         this.PeopleId = id;
     }
 
-    if (this.auth.isAdmin() && this.PeopleId !== '' && !this.auth.isCurrentUser(this.PeopleId)) { // admin editing someone else
-      this.loadOtherPeople();
-      this.loadOtherPeopleExtra();
-
+    if (this.auth.isAdmin()  && this.PeopleId !== '' ){
+      if  (this.PeopleId === 'start-new-people' ){
+        return;
+      }else if (this.PeopleId !== '' && !this.auth.isCurrentUser(this.PeopleId)) { // admin editing someone else
+        this.loadOtherPeople();
+      }
     }else { // edit himself
       this.role = this.auth.loggedIn.role;
       this.PeopleId = this.auth.loggedIn.User.Id;
+      this.People = this.auth.loggedIn.User;
+      this.UserExtra = this.auth.loggedIn.UserExtra;
     }
+    this.updateShowHide();
   }
 
-  private loadOtherPeople(): void{
+  private loadOtherPeople(): void {
     this.isValidPeople = false;
     this.ps.getPeopleById(this.PeopleId).subscribe(
       ppl => {
         this.isValidPeople = ppl.Id === this.PeopleId;
-        this.People = new PeopleModel(
-          ppl.Id,
-          ppl.First,
-          ppl.Last,
-          ppl.Middle,
-          ppl.Title,
-          ppl.Display,
-          ppl.Nick
-        );
+        if (this.isValidPeople) {
+          console.log(this);
+          this.People.Copy(ppl);
+          this.pp.PeopleChanged(this.People);
+          this.loadOtherPeopleExtra();
+        }
+        this.updateShowHide();
+      }, err => {
+        console.log(this);
+        this.msgBox.Show('Failed to load User Information');
       }
     );
   }
     this.isValidBroker = false;
     this.ps.getPeopleExtraById(this.PeopleId).subscribe(
       resp => {
-        this.isValidBroker = resp.License !== '';
-        this.UserExtra = new UserExtraModel(resp);
-        this.role = this.UserExtra.Role;
-        if (this.role === 'broker') {
-          this.broker = BrokerModel.getFromUserAndExtra(this.People, this.UserExtra);
-        }
+        this.setUserExtra(resp);
+        this.updateShowHide();
       }
     );
   }
 
-  public showPeople(): boolean {
-    return this.isValidPeople; // always true
+  private setUserExtra(resp: UserExtraModel): void {
+    this.isValidBroker = resp.License !== '';
+    this.UserExtra.BSB = resp.BSB;
+    this.UserExtra.ACC = resp.ACC;
+    this.UserExtra.License = resp.License;
+    this.UserExtra.Organization = resp.Organization;
+    this.UserExtra.Enabled = resp.Enabled;
+    this.UserExtra.Login = resp.Login;
+    this.UserExtra.Role = resp.Role;
+    this.role = this.UserExtra.Role;
   }
 
-  public showUser(): boolean {
-    return this.isUser() || this.isBroker() || this.isAdmin();
-  }
+  private updateShowHide(): void {
+    this.resetShowHide();
+
+    this.editOtherPeople = ! this.auth.isCurrentUser(this.PeopleId);
+    if ( this.editOtherPeople ) {
+      this.showAdminTool = this.isAdmin() && this.People.Id !== '' ;
+      if ( this.showAdminTool ){
+        this.enableUserAdd = ! ['user', 'broker', 'admin'].includes(this.role);
+        this.enableUserDel = this.role === 'user';
+        this.enableBrokerAdd = this.role === 'user';
+        this.enableBrokerDel = this.role === 'broker';
+      }
 
-  public showBroker(): boolean {
-    return this.isBroker() && ! this.isAdmin();
+      this.showUser = ['user', 'broker', 'admin'].includes(this.role);
+      this.showBroker = ['broker'].includes(this.role);
+      this.showAdmin = ['admin'].includes(this.role);
+      this.showPassword = true;
+
+    }else{
+      this.showAdminTool = false;
+      this.showUser = ['user', 'broker', 'admin'].includes(this.role);
+      this.showBroker = ['broker'].includes(this.role);
+      this.showAdmin = ['admin'].includes(this.role);
+      this.showPassword = ['user', 'broker', 'admin'].includes(this.role);;
+    }
+    console.log( 'check pass', this);
   }
 
-  public showAdmin(): boolean {
-    return this.isAdmin();
+  private resetShowHide(): void {
+    // different section
+    this.showUser = false;
+    this.showBroker = false;
+    this.showAdmin = false;
+    this.showPassword = false;
+
+    // admin specific
+    this.showAdminTool = false;
+    this.editOtherPeople = false;
+    this.enableUserAdd = false;
+    this.enableUserDel = false;
+    this.enableBrokerAdd = false;
+    this.enableBrokerDel = false;
   }
 
-  public showPassword(): boolean {
-    return this.isUser() || this.isBroker() || this.isAdmin();
+  public onNewPeopleCreated(ppl: PeopleModel): void {
+    console.log(this.People);
+    this.updateShowHide();
   }
 
+  // the user who performs this edit action
   public isAdmin(): boolean {
-    if ( this.auth.isCurrentUser(this.PeopleId) ){
       return this.auth.isAdmin();
-    }else{
-      return this.role === 'admin';
-    }
   }
 
+  // the user who performs this edit action
   public isBroker(): boolean {
-    if ( this.auth.isCurrentUser(this.PeopleId) ) {
       return this.auth.isBroker();
-    }else{
-      return this.role === 'broker';
-    }
   }
 
+  // the user who performs this edit action
   public isUser(): boolean {
-    if ( this.auth.isCurrentUser(this.PeopleId) ) {
       return this.auth.isUser();
-    }else{
-      return this.role === 'user';
-    }
+  }
+
+  public deletePeople(): void {
+
+    this.ps.deletePeople(this.People.Id).subscribe(
+      resp => {
+          if ( resp === this.People.Id ) { // successfully deleted
+            this.msgBox.Show('User and all of his/her related loans payment has been deleted !!');
+            this.People.Clear();
+            this.UserExtra.Clear();
+            this.role = 'unknown';
+            console.log(this);
+            this.updateShowHide();
+          }
+        }, err => {
+          this.msgBox.Show('"Error Delete People');
+        }
+    );
+  }
+
+  public upgradePeopleToUser(): void{
+    this.ps.upgradePeopleToUser(this.People.Id).subscribe(
+      resp => {
+        this.setUserExtra(resp);
+        this.updateShowHide();
+      }
+    );
+  }
+
+  public downgradeToPeople(): void{
+    this.ps.downgradeUserToPeople(this.People.Id).subscribe(
+      resp => {
+        this.setUserExtra(resp);
+        this.updateShowHide();
+      }
+    );
+  }
+
+  public upgradeUserToBroker(): void{
+    this.ps.upgradeUserToBroker(this.People.Id).subscribe(
+      resp => {
+        this.setUserExtra(resp);
+        this.updateShowHide();
+      }
+    );
+  }
+
+  public downgradeToUser(): void{
+    this.ps.downgradeBrokerToUser(this.People.Id).subscribe(
+      resp => {
+        this.setUserExtra(resp);
+        this.updateShowHide();
+      }
+    );
+  }
+
+  public onWarnDelete(status: boolean): void {
+
+      if (status) {
+        this.deleteHeight = 100;
+      }else{
+        this.deleteHeight = 30;
+      }
   }
 }

src/app/profile/user-profile/user-profile.component.html

           [size]="'medium'"
         ></kendo-loader>
         </kendo-label>
-        <kendo-textbox #login kendoTextBox name="Login" formControlName="Login" (valueChange)="onChangeLogin()">
+        <kendo-textbox #login kendoTextBox name="Login" formControlName="Login">
         </kendo-textbox>
         <kendo-formerror *ngIf="UserForm.get('Login').hasError('required')" >Login is required</kendo-formerror>
         <kendo-formerror *ngIf="UserForm.get('Login').hasError('loginAvailable')" >Login is used by someone else </kendo-formerror>
 
     </fieldset>
   </ng-container>
-  <div class="k-form-buttons k-buttons-end" *ngIf="UserForm.get('Login').status !== 'PENDING'">
+  <div class="k-form-buttons k-buttons-end" *ngIf="showSubmit()">
     <div>
       <button kendoButton class="k-button k-primary" type="submit" icon="save"
               > Modify Login</button>

src/app/profile/user-profile/user-profile.component.ts

 import {AuthService} from '../../service/auth.service';
 import {HttpClient} from '@angular/common/http';
 import {MessageBoxComponent} from '../../message-box/message-box.component';
-import {BrokerModel} from '../../models/broker.model';
 import {PeopleService} from '../../service/people.service';
 import {asyncValidatorLoginAvailable} from '../../validator/unique.login.validator';
+import {PeopleModel} from '../../models/people.model';
 
 @Component({
   selector: 'app-user-profile',
   styleUrls: ['./user-profile.component.scss']
 })
 export class UserProfileComponent implements OnInit {
-  @Input() public PeopleId = '';
+  @Input() public People: PeopleModel = PeopleModel.EmptyNew();
   @Input() public UserExtra: UserExtraModel = UserExtraModel.EmptyNew();
   @ViewChild('messageBox', {static: true}) msgBox: MessageBoxComponent;
 
   ngOnInit(): void {
 
     this.showAdmin = this.auth.isAdmin();
-    this.isCurrentUser = this.auth.isCurrentUser(this.PeopleId);
+    this.isCurrentUser = this.auth.isCurrentUser(this.People.Id);
 
-    if (this.auth.isAdmin() &&  !this.auth.isCurrentUser(this.PeopleId)) {
+    if (this.auth.isAdmin() &&  !this.auth.isCurrentUser(this.People.Id)) {
       // edit other people,
-      if ( this.PeopleId !== '' && this.UserExtra.Login === '' ){ // we need to load by ourself
-        this.ps.getPeopleExtraById(this.PeopleId).subscribe(
-          resp => {
-            this.UserExtra = new UserExtraModel(resp);
-            this.UserForm.get('Login').setValue(this.UserExtra.Login);
-            this.UserForm.get('Enabled').setValue(this.UserExtra.Enabled);
-          }
-        );
-      }
     }else{
-      this.PeopleId = this.auth.loggedIn.User.Id;
+      this.People.Id = this.auth.loggedIn.User.Id;
       this.UserExtra = this.auth.loggedIn.UserExtra;
     }
-
+    console.log(this);
     this.UserForm = new FormGroup({
       Login: new FormControl({value: this.UserExtra.Login, disabled: ! this.showAdmin },
         [Validators.required, Validators.email],
   }
 
   public save(): void {
-    const expected = this.UserForm.get('Login').value;
-    this.http.post<string>(this.auth.getUrl('user/' + this.PeopleId), this.UserExtra).subscribe(
+    const ex = new UserExtraModel(this.UserExtra);
+    ex.Login = this.UserForm.get('Login').value;
+    ex.Enabled = this.UserForm.get('Enabled').value;
+
+    this.http.post<UserExtraModel>(this.auth.getUrl('user/' + this.People.Id), ex).subscribe(
        resp => {
-         if ( resp === expected ) {
+         if ( resp.Login === ex.Login && resp.Enabled === ex.Enabled) {
+           this.UserExtra.Login = resp.Login;
+           this.UserExtra.Enabled = resp.Enabled;
            this.msgBox.Show('Successfully Changed');
          }else{
            this.msgBox.Show('Login not Changed: ' + resp );
     return this.UserExtra !== undefined && this.UserExtra.Login !== undefined;
   }
 
-  public onChangeLogin(): void {
-    console.log(this);
+
+  public showSubmit(): boolean {
+    return this.UserForm.get('Login').status !== 'PENDING' && this.currentUserIsAdmin();
   }
 
 }

src/app/service/auth.service.ts

 
              if (responseData.UserExtra !== undefined ) {
                 this.loggedIn.UserExtra = new UserExtraModel(responseData.UserExtra);
+             }else{
+               this.loggedIn.UserExtra = UserExtraModel.EmptyNew();
              }
            }else{
              this.loggedIn.User = PeopleModel.EmptyNew();

src/app/service/people.service.ts

     return this.http.post<BrokerModel>(this.auth.getUrl('broker/' + broker.Id), broker);
   }
 
-  public saveUser(people: PeopleModel): Observable<BrokerModel>{
+  public savePeople(people: PeopleModel): Observable<BrokerModel>{
     return this.http.post<BrokerModel>(this.auth.getUrl('people/' + people.Id), people);
   }
+
+  public createPeople(people: PeopleModel): Observable<PeopleModel> {
+    return this.http.put<PeopleModel>(this.auth.getUrl('people/' + people.Id), people);
+  }
+
+  public deletePeople(id: string): Observable<string> {
+    return this.http.delete<string>(this.auth.getUrl('people/' + id));
+  }
+
+  public upgradePeopleToUser(id: string ): Observable<UserExtraModel> {
+    return this.http.put<UserExtraModel>(this.auth.getUrl('user/' + id), {});
+  }
+
+  public downgradeUserToPeople(id: string ): Observable<UserExtraModel> {
+    return this.http.delete<UserExtraModel>(this.auth.getUrl('user/' + id), {});
+  }
+
+  public upgradeUserToBroker(id: string ): Observable<UserExtraModel> {
+    return this.http.put<UserExtraModel>(this.auth.getUrl('broker/' + id), {});
+  }
+  public downgradeBrokerToUser(id: string ): Observable<UserExtraModel> {
+    return this.http.delete<UserExtraModel>(this.auth.getUrl('broker/' + id), {});
+  }
+
 }