Edit profile API connection

src/app/profile/profile.page.html

@@ -5,14 +5,20 @@
                 <img src="assets/custom/name.svg" alt="">
             </figure>
             <div class="content">
-                <h5> {{ userInfo.name }}
-                    <button fill="clear" color="light"> Edit </button>
+                <h5>
+                    <span *ngIf="!showEdit"> {{ userInfo.name }} </span>
+                    <input *ngIf="showEdit" type="text" [(ngModel)]="userInfo.name">
+
+                    <button *ngIf="!showEdit" (click)="showEdit = true"> Edit </button>
+                    <button *ngIf="showEdit" (click)="showEdit = false; updateUserInfo();"> Save </button>
                 </h5>
                 <p>
-                    {{ userInfo.mobile }}
+                    <span *ngIf="!showEdit"> {{ userInfo.mobile }} </span>
+                    <input *ngIf="showEdit" type="tel" [(ngModel)]="userInfo.mobile">
                 </p>
                 <p>
-                    {{ userInfo.email }}
+                    <span *ngIf="!showEdit"> {{ userInfo.email }} </span>
+                    <input *ngIf="showEdit" type="tel" [(ngModel)]="userInfo.email">
                 </p>
             </div>
         </div>

src/app/profile/profile.page.scss

@@ -56,6 +56,14 @@
 
         .content {
             width: calc(100% - 55px);
+
+            input {
+                background-color: transparent;
+                border: 1px solid white;
+                font-size: 14px;
+                padding: 10px;
+                border-radius: 5px;
+            }
         }
     }
 

src/app/profile/profile.page.ts

@@ -1,6 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { Location } from '@angular/common';
 import { Router } from '@angular/router';
+import { AuthService } from '../services/auth.service';
+import { ToastService } from '../services/toast.service';
 
 @Component({
     selector: 'app-profile',
@@ -10,15 +12,36 @@ import { Router } from '@angular/router';
 export class ProfilePage implements OnInit {
     selected_tab: string = 'MY ORDERS';
     userInfo: any;
+    showEdit: boolean = false;
 
     constructor(
         private location: Location,
-		private router: Router
+        private router: Router,
+        private authService: AuthService,
+        private toastService: ToastService
     ) { }
 
     ngOnInit() {
         this.userInfo = JSON.parse(localStorage.userInfo)['User Info'];
-        console.log(this.userInfo);
+    }
+    
+    updateUserInfo() {
+        let tempUserInfo = {
+            id: this.userInfo.id,
+            name: this.userInfo.name,
+            username: this.userInfo.username,
+            email: this.userInfo.email,
+            mobile: this.userInfo.mobile,
+            address: []
+        }
+        
+        this.authService.updateUser(tempUserInfo).then((data) => {
+            console.log(data);
+            this.toastService.presentToast("Updated!", "success");
+        }, (err) => {
+            console.log(err);
+            this.toastService.presentToast("Failed to update", "danger");
+        });
     }
 
 	ionViewDidEnter() {

src/app/services/auth.service.ts

@@ -22,4 +22,16 @@ export class AuthService {
     signupUser(credentials: any) {
         return this.http.post(URL + '/api/auth/signup/', credentials).toPromise();
     }
+
+    updateUser(userData: any) {
+        const httpOptions = {
+			headers: new HttpHeaders({
+				'Access-Control-Allow-Origin': '*',
+				'Content-Type': 'application/json',
+				'Authorization': 'Bearer ' + localStorage.access_Token
+			})
+        };
+        
+        return this.http.post(URL + '/api/maioraservice/user/v1/update', userData, httpOptions).toPromise();
+    }
 }