Profil edit

src/app/constants.ts

 export const WORDPRESS_URL = 'http://www.allo-testeurs.com/';
 export const WORDPRESS_REST_API_URL = WORDPRESS_URL + 'wp-json/wp/v2/';
+export const WORDPRESS_REST_API_ACF_USER_URL = WORDPRESS_URL + 'wp-json/acf/v3/users/';

src/app/pages/compte/profil/profil.module.ts

 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { Routes, RouterModule } from '@angular/router';
 
 import { IonicModule } from '@ionic/angular';
@@ -20,6 +20,7 @@ const routes: Routes = [
     CommonModule,
     FormsModule,
     IonicModule,
+    ReactiveFormsModule,
     RouterModule.forChild(routes),
     PipesModule
   ],

src/app/pages/compte/profil/profil.page.html

@@ -6,21 +6,33 @@
         <ion-title>
             Mon profil
         </ion-title>
+        <ion-buttons slot="end">
+            <ion-button fill="outline" color="light" *ngIf="!editMode" (click)="startEdit()">Modifier</ion-button>
+            <ion-spinner name="dots" color="light" *ngIf="syncing"></ion-spinner>
+        </ion-buttons>
     </ion-toolbar>
 </ion-header>
 
 <ion-content>
+    <form [formGroup]="validationsForm">
         <ion-grid>
             <ion-row padding>
                 <ion-col size="4">
                     <ion-avatar>
-                    <ion-img [src]="_AUTH.infoAvatar"></ion-img>
+                        <ion-img [src]="_AUTH.userInfos.avatar"></ion-img>
+                        <!-- <ion-chip color="primary" *ngIf="editMode">
+                            <ion-icon name="camera" class="ion-no-margin"></ion-icon> Modifier
+                        </ion-chip> -->
                     </ion-avatar>
                 </ion-col>
                 <ion-col size="8">
                     <ion-text>
-                    <h2>{{ _AUTH.infoFullname }}</h2>
-                    <ion-chip color="primary" outline="true">
+                        <h2 [hidden]="editMode">{{ _AUTH.userInfos.display_name }}</h2>
+                        <ion-item [hidden]="!editMode">
+                            <ion-input type="text" [value]="_AUTH.userInfos.display_name" formControlName="name" clearInput>
+                            </ion-input>
+                        </ion-item>
+                        <ion-chip [color]="editMode ? 'medium' : 'primary'" [outline]="editMode ? false : true">
                             <ion-icon name="star"></ion-icon>
                             <ion-label>Testeur</ion-label>
                         </ion-chip>
@@ -37,34 +49,61 @@
                     <ion-col no-padding size="6" class="ion-text-end"> 1000 </ion-col>
                 </ion-row> -->
         </ion-grid>
-    <ion-card>
-        <ion-item color="primary">
+        <ion-card *ngIf="_AUTH?.userInfos?.card_number">
+            <ion-item [color]="editMode ? 'dark' : 'primary'">
                 Ma carte testeur :
             </ion-item>
-        <ion-item>
+            <ion-item [color]="editMode ? 'medium' : ''">
                 <ion-icon name="card" slot="start"></ion-icon> {{ _AUTH.userInfos.card_number | cardNumber }}
             </ion-item>
-        <ion-item>
+            <ion-item [color]="editMode ? 'medium' : ''">
                 <ion-icon name="stopwatch" slot="start"></ion-icon> {{ _AUTH.userInfos.expire_at | expireAt }}
             </ion-item>
-        <ion-item lines="none">
+            <ion-item lines="none" [color]="editMode ? 'medium' : ''">
                 <ion-icon name="person" slot="start"></ion-icon> {{ _AUTH.userInfos.cni }}
             </ion-item>
         </ion-card>
         <ion-card>
             <ion-item color="primary">
                 Infos :
-            <ion-button slot="end" color="light" fill="outline" routerLink="/app/profil-edit" routerDirection="root"
-                routerLinkActive="active">Modifier</ion-button>
+                <!-- <ion-button slot="end" color="light" fill="outline" routerLink="/app/profil-edit" routerDirection="root"
+                routerLinkActive="active">Modifier</ion-button> -->
             </ion-item>
             <ion-item>
-            <ion-icon name="mail" slot="start"></ion-icon> {{ _AUTH.userInfos.user_email }}
+                <ion-icon name="mail" slot="start" [color]="editMode ? 'secondary' : ''"></ion-icon>
+                <ion-text [hidden]="editMode">{{ _AUTH.userInfos.user_email }}</ion-text>
+                <ion-input type="email" [hidden]="!editMode" [value]="_AUTH.userInfos.user_email"
+                    formControlName="email" clearInput>
+                </ion-input>
             </ion-item>
             <ion-item>
-            <ion-icon name="pin" slot="start"></ion-icon> Lorem ipsum sit dolor amet
+                <ion-icon name="pin" slot="start" [color]="editMode ? 'secondary' : ''"></ion-icon>
+                <ion-text [hidden]="editMode">{{ _AUTH.userInfos.addresse }}</ion-text>
+                <ion-input type="text" [hidden]="!editMode" [value]="_AUTH.userInfos.addresse"
+                    formControlName="addresse" clearInput>
+                </ion-input>
             </ion-item>
             <ion-item lines="none">
-            <ion-icon name="call" slot="start"></ion-icon> +212 661 20 30 40
+                <ion-icon name="call" slot="start" [color]="editMode ? 'secondary' : ''"></ion-icon>
+                <ion-text [hidden]="editMode">{{ _AUTH.userInfos.phone }}</ion-text>
+                <ion-input type="text" [hidden]="!editMode" [value]="_AUTH.userInfos.phone"
+                    formControlName="phone" clearInput>
+                </ion-input>
             </ion-item>
         </ion-card>
+    </form>
 </ion-content>
+
+<ion-footer *ngIf="editMode">
+    <ion-toolbar color="primary">
+        <ion-buttons slot="end" *ngIf="!syncing">
+            <ion-button fill="outline" color="light" (click)="cancelEdit()">
+                <ion-icon name="close"></ion-icon> Annuler
+            </ion-button>
+            <ion-button fill="solid" color="success" type="submit" [disabled]="!validationsForm.valid"
+                (click)="validationsForm.valid && onSubmit(validationsForm.value)">
+                <ion-icon name="checkmark"></ion-icon> Valider
+            </ion-button>
+        </ion-buttons>
+    </ion-toolbar>
+</ion-footer>
\ No newline at end of file

src/app/pages/compte/profil/profil.page.scss

 ion-avatar {
   width: 100%;
   height: 100%;
+  position: relative;
+  ion-chip {
+    position: absolute;
+    bottom: -37px;
+    left: 0;
+    width: 100%;
+  }
 }

src/app/pages/compte/profil/profil.page.ts

 import { Component, OnInit } from '@angular/core';
 import { AuthService } from '../../../services/auth.service';
-// import { CardNumberPipe } from '../../../pipes/card-number.pipe';
+import { Validators, FormBuilder, FormGroup, FormControl } from '@angular/forms';
+import { Storage } from '@ionic/storage';
+
 
 @Component({
   selector: 'app-profil',
@@ -9,11 +11,89 @@ import { AuthService } from '../../../services/auth.service';
 })
 export class ProfilPage implements OnInit {
 
+  validationsForm: FormGroup;
+  editMode = false;
+  syncing = false;
+  validationMessages = {
+    name: [
+      { type: 'required', message: 'Champs requis.' }
+    ],
+    email: [
+      { type: 'required', message: 'Champs requis.' },
+      { type: 'pattern', message: 'Adresse email non valide.' }
+    ],
+    phone: [
+      { type: 'required', message: 'Champs requis.' },
+    ],
+    adresse: [
+      { type: 'required', message: 'Champs requis.' },
+    ],
+  };
+
   constructor(
+    public formBuilder: FormBuilder,
+    public storage: Storage,
     public _AUTH: AuthService
   ) { }
 
   ngOnInit() {
+    this.validationsForm = this.formBuilder.group({
+      name: new FormControl('', Validators.required),
+      phone: new FormControl('', Validators.required),
+      addresse: new FormControl('', Validators.required),
+      email: new FormControl('', Validators.compose([
+        Validators.required,
+        Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,15}$')
+      ]))
+    });
+    this.storage.get('wpUserInfos').then(wpUserInfos => {
+      if (wpUserInfos) {
+        this.validationsForm.controls['name'].setValue(wpUserInfos.display_name);
+        this.validationsForm.controls['email'].setValue(wpUserInfos.user_email);
+        this.validationsForm.controls['addresse'].setValue(wpUserInfos.addresse);
+        this.validationsForm.controls['phone'].setValue(wpUserInfos.phone);
+      }
+    });
+  }
+
+  onSubmit(values) {
+    this.syncing = true;
+    this.storage.get('wpUserInfos').then(wpUserInfos => {
+      if (wpUserInfos) {
+        wpUserInfos.display_name = values.name;
+        wpUserInfos.user_email = values.email;
+        wpUserInfos.addresse = values.addresse;
+        wpUserInfos.phone = values.phone;
+        this.storage.set('wpUserInfos', wpUserInfos).then(() => {
+          this._AUTH.userInfos = wpUserInfos;
+          const userData = {
+            name: values.name,
+            email: values.email,
+            addresse: values.addresse,
+            phone: values.phone,
+            context: 'edit',
+            meta: {
+              addresse: values.addresse,
+              phone: values.phone
+            }
+          };
+          this._AUTH.doUserUpdate(userData).then(
+            result => {
+              this.editMode = false;
+              this.syncing = false;
+            });
+        });
+      }
+    });
+  }
+
+  startEdit() {
+    this.editMode = true;
+    this.validationsForm.updateValueAndValidity();
+  }
+
+  cancelEdit() {
+    this.editMode = false;
   }
 
 }

src/app/pages/menu/menu.page.html

@@ -20,12 +20,12 @@
                     <ion-row>
                         <ion-col size="4">
                             <ion-avatar>
-                                <ion-img [src]="_AUTH.infoAvatar"></ion-img>
+                                <ion-img [src]="_AUTH?.userInfos?.avatar"></ion-img>
                             </ion-avatar>
                         </ion-col>
                         <ion-col size="8">
                             <ion-text>
-                                <h4>{{ _AUTH.infoFullname }}</h4>
+                                <h4>{{ _AUTH?.userInfos?.display_name }}</h4>
                             </ion-text>
                             <ion-chip color="light">
                                 <ion-icon name="star"></ion-icon>

src/app/services/allo-service.ts

@@ -96,7 +96,6 @@ export class AlloService {
             // spinner: null,
             duration: 0,
             message: 'Chargement...',
-            translucent: true,
             cssClass: 'custom-class custom-loading'
         });
         return await this.loading.present().then(() => {

src/app/services/auth.service.ts

@@ -21,7 +21,9 @@ export class AuthService {
   public infoFullname;
   public infoEmail;
   public infoAvatar;
+  public userId: any;
   public userInfos: any;
+  public userToken: any;
 
   authState = new BehaviorSubject(false);
   public isAnonymous = false;
@@ -35,13 +37,14 @@ export class AuthService {
     private _ALLO: AlloService
   ) {
     this.platform.ready().then(() => {
+      this.storage.get('wpUser').then(wpUser => {
+        if (wpUser) {
+          this.userToken = wpUser.token;
+        }
+      });
       this.storage.get('wpUserInfos').then(wpUserInfos => {
         if (wpUserInfos) {
-          this.infoNicename = wpUserInfos.user_nicename;
-          this.infoFullname = wpUserInfos.display_name;
-          this.infoEmail = wpUserInfos.user_email;
-          this.infoAvatar = wpUserInfos.avatar;
-          this.userInfos = wpUserInfos;
+          this.updateServiceProps(wpUserInfos);
         }
       });
       this.isLoggedIn();
@@ -49,6 +52,15 @@ export class AuthService {
     });
   }
 
+  updateServiceProps(wpUserInfos) {
+    this.infoNicename = wpUserInfos.user_nicename;
+    this.infoFullname = wpUserInfos.display_name;
+    this.infoEmail = wpUserInfos.user_email;
+    this.infoAvatar = wpUserInfos.avatar;
+    this.userInfos = wpUserInfos;
+    this.userId = wpUserInfos.ID;
+  }
+
   isAuthenticated() {
     return this.authState.value;
   }
@@ -83,15 +95,23 @@ export class AuthService {
     this.infoNicename = user.user_nicename;
     this.infoFullname = user.user_display_name;
     this.infoEmail = user.user_email;
+    this.userToken = user.token;
     this.authState.next(true);
 
     return this.storage.set('wpUser', user);
   }
 
   logOut() {
-    this.authState.next(false);
     this.storage.remove('wpUser');
     this.storage.remove('wpUserInfos');
+    this.infoNicename = null;
+    this.infoFullname = null;
+    this.infoEmail = null;
+    this.infoAvatar = null;
+    this.userId = null;
+    this.userInfos = null;
+    this.userToken = null;
+    this.authState.next(false);
   }
 
   doLogin(values) {
@@ -138,8 +158,11 @@ export class AuthService {
           { headers: header }
         ).then(
           userInfos => {
-            console.log(userInfos);
-            this.storage.set('wpUserInfos', userInfos);
+            this.storage.set('wpUserInfos', userInfos).then(wpUserInfos => {
+              if (wpUserInfos) {
+                this.updateServiceProps(wpUserInfos);
+              }
+            });
             resolve(userInfos);
           },
           err => reject(err)
@@ -151,8 +174,11 @@ export class AuthService {
           { headers: { Authorization: 'Bearer ' + token } }
         ).subscribe(
           userInfos => {
-            console.log(userInfos);
-            this.storage.set('wpUserInfos', userInfos);
+            this.storage.set('wpUserInfos', userInfos).then(wpUserInfos => {
+              if (wpUserInfos) {
+                this.updateServiceProps(wpUserInfos);
+              }
+            });
             resolve(userInfos);
           },
           err => reject(err)
@@ -161,14 +187,54 @@ export class AuthService {
     });
   }
 
-  doRegister(user_data, token) {
-    return this.http.post(Config.WORDPRESS_REST_API_URL + 'users?token=' + token, user_data);
+  doUserUpdate(userData) {
+    return new Promise<any>((resolve, reject) => {
+      if (this.platform.is('cordova')) {
+        const header: Headers = new Headers();
+        header.append('Authorization', 'Bearer ' + this.userToken);
+        this.httpAdv.get(
+          Config.WORDPRESS_REST_API_URL + 'users/' + this.userId,
+          userData,
+          { headers: header }
+        ).then(
+          userInfos => {
+            resolve(userInfos);
+          },
+          err => reject(err)
+        );
+      } else {
+        this.http.post(
+          Config.WORDPRESS_REST_API_URL + 'users/' + this.userId,
+          userData,
+          { headers: { Authorization: 'Bearer ' + this.userToken } }
+        ).subscribe(
+          result => {
+            this.http.post(
+              Config.WORDPRESS_REST_API_ACF_USER_URL + this.userId,
+              {
+                fields: {
+                  addresse: userData.addresse,
+                  phone: userData.phone
+                }
+              },
+              { headers: { Authorization: 'Bearer ' + this.userToken } }
+            ).subscribe(
+              result => {
+                console.log('acf', result);
+
+              });
+            resolve(result);
+          },
+          err => reject(err)
+        );
+      }
+    });
   }
 
   validateAuthToken(token) {
     this._ALLO.presentLoading();
     if (this.platform.is('cordova')) {
-      let header: Headers = new Headers();
+      const header: Headers = new Headers();
       header.append('Authorization', 'Bearer ' + token);
       return this.httpAdv.post(
         Config.WORDPRESS_URL + 'wp-json/jwt-auth/v1/token/validate',