Edit profil

src/app/app.module.ts

@@ -23,6 +23,7 @@ import { environment } from 'src/environments/environment';
 import { AuthService } from './services/auth.service';
 import { AuthGuardService } from './services/auth-guard.service';
 import { LoginHelpPageModule } from './modals/login-help/login-help.module';
+import { PipesModule } from './pipes/pipes.module';
 // import { AngularFireAuthModule } from '@angular/fire/auth';
 
 // import * as firebase from 'firebase';
@@ -41,7 +42,8 @@ import { LoginHelpPageModule } from './modals/login-help/login-help.module';
       driverOrder: ['websql', 'sqlite', 'indexeddb']
     }),
     HttpClientModule,
-    LoginHelpPageModule
+    LoginHelpPageModule,
+    PipesModule
   ],
   providers: [
     StatusBar,

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

@@ -6,6 +6,7 @@ import { Routes, RouterModule } from '@angular/router';
 import { IonicModule } from '@ionic/angular';
 
 import { ProfilPage } from './profil.page';
+import { PipesModule } from '../../../pipes/pipes.module';
 
 const routes: Routes = [
   {
@@ -19,8 +20,9 @@ const routes: Routes = [
     CommonModule,
     FormsModule,
     IonicModule,
-    RouterModule.forChild(routes)
+    RouterModule.forChild(routes),
+    PipesModule
   ],
   declarations: [ProfilPage]
 })
-export class ProfilPageModule {}
+export class ProfilPageModule { }

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

@@ -14,12 +14,12 @@
         <ion-row padding>
             <ion-col size="4">
                 <ion-avatar>
-                    <ion-img src="../assets/img/avatar.jpeg"></ion-img>
+                    <ion-img [src]="_AUTH.infoAvatar"></ion-img>
                 </ion-avatar>
             </ion-col>
             <ion-col size="8">
                 <ion-text>
-                    <h2>Nabil Sadki</h2>
+                    <h2>{{ _AUTH.infoFullname }}</h2>
                     <ion-chip color="primary" outline="true">
                         <ion-icon name="star"></ion-icon>
                         <ion-label>Testeur</ion-label>
@@ -42,23 +42,23 @@
             Ma carte testeur :
         </ion-item>
         <ion-item>
-            <ion-icon name="card" slot="start"></ion-icon> 2019 0108 0000 0001
+            <ion-icon name="card" slot="start"></ion-icon> {{ _AUTH.userInfos.card_number | cardNumber }}
         </ion-item>
         <ion-item>
-            <ion-icon name="stopwatch" slot="start"></ion-icon> 08/2020
+            <ion-icon name="stopwatch" slot="start"></ion-icon> {{ _AUTH.userInfos.expire_at | expireAt }}
         </ion-item>
         <ion-item lines="none">
-            <ion-icon name="person" slot="start"></ion-icon> G101010
+            <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> monemail@allo-testeurs.com
+            <ion-icon name="mail" slot="start"></ion-icon> {{ _AUTH.userInfos.user_email }}
         </ion-item>
         <ion-item>
             <ion-icon name="pin" slot="start"></ion-icon> Lorem ipsum sit dolor amet

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';
 
 @Component({
   selector: 'app-profil',
@@ -7,7 +9,9 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ProfilPage implements OnInit {
 
-  constructor() { }
+  constructor(
+    public _AUTH: AuthService
+  ) { }
 
   ngOnInit() {
   }

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

@@ -20,14 +20,14 @@
                     <ion-row>
                         <ion-col size="4">
                             <ion-avatar>
-                                <img src="../assets/img/avatar.jpeg">
+                                <ion-img [src]="_AUTH.infoAvatar"></ion-img>
                             </ion-avatar>
                         </ion-col>
                         <ion-col size="8">
                             <ion-text>
                                 <h4>{{ _AUTH.infoFullname }}</h4>
                             </ion-text>
-                            <ion-chip color="light" outline="true">
+                            <ion-chip color="light">
                                 <ion-icon name="star"></ion-icon>
                                 <ion-label>Testeur</ion-label>
                             </ion-chip>

src/app/pages/offres/offres-carte/offres-carte.module.ts

@@ -4,7 +4,7 @@ import { FormsModule } from '@angular/forms';
 import { Routes, RouterModule } from '@angular/router';
 
 import { IonicModule } from '@ionic/angular';
-import { SearchPipe } from '../../../pipes/search/search.pipe';
+// import { SearchPipe } from '../../../pipes/search/search.pipe';
 
 import { OffresCartePage } from './offres-carte.page';
 
@@ -22,6 +22,6 @@ const routes: Routes = [
     IonicModule,
     RouterModule.forChild(routes)
   ],
-  declarations: [OffresCartePage, SearchPipe]
+  declarations: [OffresCartePage]
 })
 export class OffresCartePageModule {}

src/app/pipes/card-number.pipe.spec.ts

+import { CardNumberPipe } from './card-number.pipe';
+
+describe('CardNumberPipe', () => {
+  it('create an instance', () => {
+    const pipe = new CardNumberPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src/app/pipes/card-number.pipe.ts

+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'cardNumber'
+})
+export class CardNumberPipe implements PipeTransform {
+
+  transform(value: any, args?: any): any {
+    return value.replace(/\s/g, '').replace(/(.{4})/g, '$1 ');
+  }
+
+}

src/app/pipes/expire-at.pipe.spec.ts

+import { ExpireAtPipe } from './expire-at.pipe';
+
+describe('ExpireAtPipe', () => {
+  it('create an instance', () => {
+    const pipe = new ExpireAtPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src/app/pipes/expire-at.pipe.ts

+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'expireAt'
+})
+export class ExpireAtPipe implements PipeTransform {
+
+  transform(value: any, args?: any): any {
+    return value.substr(4, 2) + '/' + value.substr(0, 4);
+  }
+
+}

src/app/pipes/pipes.module.ts

 import { NgModule } from '@angular/core';
 import { SearchPipe } from './search/search.pipe';
+import { CardNumberPipe } from './card-number.pipe';
+import { ExpireAtPipe } from './expire-at.pipe';
 @NgModule({
     declarations: [
-        SearchPipe
+        SearchPipe,
+        CardNumberPipe,
+        ExpireAtPipe
     ],
     imports: [],
     exports: [
-        SearchPipe
+        SearchPipe,
+        CardNumberPipe,
+        ExpireAtPipe
     ]
 })
 export class PipesModule {}

src/app/services/auth.service.ts

@@ -20,6 +20,8 @@ export class AuthService {
   public infoNicename;
   public infoFullname;
   public infoEmail;
+  public infoAvatar;
+  public userInfos: any;
 
   authState = new BehaviorSubject(false);
   public isAnonymous = false;
@@ -33,18 +35,20 @@ export class AuthService {
     private _ALLO: AlloService
   ) {
     this.platform.ready().then(() => {
-      this.storage.get('wpUser').then(wpUser => {
-        if (wpUser) {
-          this.infoNicename = wpUser.user_nicename;
-          this.infoFullname = wpUser.user_display_name;
-          this.infoEmail = wpUser.user_email;
+      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.isLoggedIn();
       this.checkIsAnonymous();
     });
   }
-
+  
   isAuthenticated() {
     return this.authState.value;
   }
@@ -86,7 +90,8 @@ export class AuthService {
 
   logOut() {
     this.authState.next(false);
-    return this.storage.remove('wpUser');
+    this.storage.remove('wpUser');
+    this.storage.remove('wpUserInfos');
   }
 
   doLogin(values) {
@@ -132,21 +137,23 @@ export class AuthService {
           {},
           { headers: header }
         ).then(
-          res => {
-            console.log(res);
-            resolve(res);
+          userInfos => {
+            console.log(userInfos);
+            this.storage.set('wpUserInfos', userInfos);
+            resolve(userInfos);
           },
           err => reject(err)
         );
       } else {
         this.http.get(
           // Config.WORDPRESS_URL + 'wp-json/wp/v2/users/me',
-          Config.WORDPRESS_URL + 'wp-json/atapi/loggedinuser',
+          Config.WORDPRESS_URL + 'wp-json/atapi/userinfos',
           { headers: { Authorization: 'Bearer ' + token } }
         ).subscribe(
-          res => {
-            console.log(res);
-            resolve(res);
+          userInfos => {
+            console.log(userInfos);
+            this.storage.set('wpUserInfos', userInfos);
+            resolve(userInfos);
           },
           err => reject(err)
         );