From 6904127876179dbcde8b664d04fce91a4963546c Mon Sep 17 00:00:00 2001
From: Spencer Ofwiti <maxspencer56@gmail.com>
Date: Wed, 2 Jun 2021 12:10:28 +0300
Subject: [PATCH] Add firstname and lastname input fields to account details
 form.

---
 .../account-details.component.html              | 17 +++++++++++++----
 .../account-details.component.ts                |  9 ++++++---
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/app/pages/accounts/account-details/account-details.component.html b/src/app/pages/accounts/account-details/account-details.component.html
index 7042672..646dd4a 100644
--- a/src/app/pages/accounts/account-details/account-details.component.html
+++ b/src/app/pages/accounts/account-details/account-details.component.html
@@ -48,10 +48,19 @@
 
               <div class="col-md-6 col-lg-4">
                 <mat-form-field appearance="outline">
-                  <mat-label>Name(s): *</mat-label>
-                  <input matInput type="text" id="givenNames" placeholder="{{account?.vcard?.fn[0].value}}"
-                         value="{{account?.vcard?.fn[0].value}}" formControlName="name" [errorStateMatcher]="matcher">
-                  <mat-error *ngIf="submitted && accountInfoFormStub.name.errors">Name is required.</mat-error>
+                  <mat-label>First Name: *</mat-label>
+                  <input matInput type="text" id="firstName" placeholder="{{account?.vcard?.fn[0].value.split(' ')[0]}}"
+                         value="{{account?.vcard?.fn[0].value.split(' ')[0]}}" formControlName="firstName" [errorStateMatcher]="matcher">
+                  <mat-error *ngIf="submitted && accountInfoFormStub.firstName.errors">First Name is required.</mat-error>
+                </mat-form-field>
+              </div>
+
+              <div class="col-md-6 col-lg-4">
+                <mat-form-field appearance="outline">
+                  <mat-label>Last Name(s): *</mat-label>
+                  <input matInput type="text" id="lastName" placeholder="{{account?.vcard?.fn[0].value.split(' ').slice(1).join(' ')}}"
+                         value="{{account?.vcard?.fn[0].value.split(' ').slice(1).join(' ')}}" formControlName="lastName" [errorStateMatcher]="matcher">
+                  <mat-error *ngIf="submitted && accountInfoFormStub.lastName.errors">Last Name is required.</mat-error>
                 </mat-form-field>
               </div>
 
diff --git a/src/app/pages/accounts/account-details/account-details.component.ts b/src/app/pages/accounts/account-details/account-details.component.ts
index 1abc6a1..d6d9c95 100644
--- a/src/app/pages/accounts/account-details/account-details.component.ts
+++ b/src/app/pages/accounts/account-details/account-details.component.ts
@@ -87,7 +87,8 @@ export class AccountDetailsComponent implements OnInit {
 
   async ngOnInit(): Promise<void> {
     this.accountInfoForm = this.formBuilder.group({
-      name: ['', Validators.required],
+      firstName: ['', Validators.required],
+      lastName: ['', Validators.required],
       phoneNumber: ['', Validators.required],
       age: ['', Validators.required],
       type: ['', Validators.required],
@@ -109,8 +110,10 @@ export class AccountDetailsComponent implements OnInit {
           this.account = res;
           this.cdr.detectChanges();
           this.loggingService.sendInfoLevelMessage(this.account);
+          const fullName = this.account.vcard?.fn[0].value.split(' ');
           this.accountInfoForm.patchValue({
-            name: this.account.vcard?.fn[0].value,
+            firstName: fullName[0],
+            lastName: fullName.slice(1).join(' '),
             phoneNumber: this.account.vcard?.tel[0].value,
             age: this.account.age,
             type: this.account.type,
@@ -199,7 +202,7 @@ export class AccountDetailsComponent implements OnInit {
     }
     const accountKey = await this.userService.changeAccountInfo(
       this.accountAddress,
-      this.accountInfoFormStub.name.value,
+      this.accountInfoFormStub.firstName.value + ' ' + this.accountInfoFormStub.lastName.value,
       this.accountInfoFormStub.phoneNumber.value,
       this.accountInfoFormStub.age.value,
       this.accountInfoFormStub.type.value,