Authentification

src/app/pages/menu/menu.module.ts

@@ -45,6 +45,10 @@ const routes: Routes = [
         path: 'profil',
         loadChildren: '../profil/profil.module#ProfilPageModule'
       },
+      {
+        path: 'profil-edit',
+        loadChildren: '../profil-edit/profil-edit.module#ProfilEditPageModule'
+      },
     ]
   }
 ];

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

@@ -16,6 +16,9 @@
                             <ion-icon name="star"></ion-icon>
                             <ion-label>Testeur</ion-label>
                         </ion-chip>
+                        <ion-chip color="light">
+                            <ion-icon name="trophy" no-margin></ion-icon>
+                        </ion-chip>
                     </ion-col>
                 </ion-row>
             </ion-grid>
@@ -35,7 +38,7 @@
                         <ion-col no-padding size="6" class="ion-text-start"> 0 </ion-col>
                         <ion-col no-padding size="6" class="ion-text-end"> 1000 </ion-col>
                     </ion-row> -->
-                    <ion-row no-padding padding-horizontal padding-top>
+                    <ion-row>
                         <ion-col no-padding class="column">
                             <ion-menu-toggle>
                                 <ion-button fill="outline" size="small" color="dark" routerLink="/app/profil"

src/app/pages/profil-edit/profil-edit.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { ProfilEditPage } from './profil-edit.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ProfilEditPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [ProfilEditPage]
+})
+export class ProfilEditPageModule {}

src/app/pages/profil-edit/profil-edit.page.html

+<ion-header>
+  <ion-toolbar color="primary">
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/app/profil" text="Retour"></ion-back-button>
+    </ion-buttons>
+    <ion-title>
+      Modifier mon profil
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-card>
+    <ion-item color="primary">
+      Ma carte testeur :
+    </ion-item>
+    <ion-item>
+      <ion-icon name="card" slot="start"></ion-icon> 2019 0108 0000 0001
+    </ion-item>
+    <ion-item>
+      <ion-icon name="stopwatch" slot="start"></ion-icon> 08/2020
+    </ion-item>
+    <ion-item lines="none">
+      <ion-icon name="person" slot="start"></ion-icon> G101010
+    </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-item>
+    <ion-item>
+      <ion-icon name="mail" slot="start"></ion-icon> monemail@allo-testeurs.com
+    </ion-item>
+    <ion-item>
+      <ion-icon name="pin" slot="start"></ion-icon> Lorem ipsum sit dolor amet
+    </ion-item>
+    <ion-item lines="none">
+      <ion-icon name="call" slot="start"></ion-icon> +212 661 20 30 40
+    </ion-item>
+  </ion-card>
+</ion-content>
\ No newline at end of file

src/app/pages/profil-edit/profil-edit.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProfilEditPage } from './profil-edit.page';
+
+describe('ProfilEditPage', () => {
+  let component: ProfilEditPage;
+  let fixture: ComponentFixture<ProfilEditPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ProfilEditPage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProfilEditPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/profil-edit/profil-edit.page.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-profil-edit',
+  templateUrl: './profil-edit.page.html',
+  styleUrls: ['./profil-edit.page.scss'],
+})
+export class ProfilEditPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

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

@@ -10,35 +10,33 @@
 </ion-header>
 
 <ion-content>
-    <ion-card padding>
-        <ion-grid>
-            <ion-row>
-                <ion-col size="4">
-                    <ion-avatar>
-                        <ion-img src="../assets/img/avatar.jpeg"></ion-img>
-                    </ion-avatar>
-                </ion-col>
-                <ion-col size="8">
-                    <ion-text>
-                        <h2>Nabil Sadki</h2>
-                        <ion-chip color="primary" outline="true">
-                            <ion-icon name="star"></ion-icon>
-                            <ion-label>Testeur</ion-label>
-                        </ion-chip>
-                    </ion-text>
-                </ion-col>
-            </ion-row>
-            <!-- <ion-row no-padding padding-horizontal padding-top>
-                <ion-col no-padding>
-                    <ion-progress-bar color="primary" value="0.75"></ion-progress-bar>
-                </ion-col>
-            </ion-row>
-            <ion-row no-padding padding-horizontal>
-                <ion-col no-padding size="6" class="ion-text-start"> 0 </ion-col>
-                <ion-col no-padding size="6" class="ion-text-end"> 1000 </ion-col>
-            </ion-row> -->
-        </ion-grid>
-    </ion-card>
+    <ion-grid>
+        <ion-row padding>
+            <ion-col size="4">
+                <ion-avatar>
+                    <ion-img src="../assets/img/avatar.jpeg"></ion-img>
+                </ion-avatar>
+            </ion-col>
+            <ion-col size="8">
+                <ion-text>
+                    <h2>Nabil Sadki</h2>
+                    <ion-chip color="primary" outline="true">
+                        <ion-icon name="star"></ion-icon>
+                        <ion-label>Testeur</ion-label>
+                    </ion-chip>
+                </ion-text>
+            </ion-col>
+        </ion-row>
+        <!-- <ion-row no-padding padding-horizontal padding-top>
+                    <ion-col no-padding>
+                        <ion-progress-bar color="primary" value="0.75"></ion-progress-bar>
+                    </ion-col>
+                </ion-row>
+                <ion-row no-padding padding-horizontal>
+                    <ion-col no-padding size="6" class="ion-text-start"> 0 </ion-col>
+                    <ion-col no-padding size="6" class="ion-text-end"> 1000 </ion-col>
+                </ion-row> -->
+    </ion-grid>
     <ion-card>
         <ion-item color="primary">
             Ma carte testeur :
@@ -56,7 +54,8 @@
     <ion-card>
         <ion-item color="primary">
             Infos :
-            <ion-button slot="end" color="light" fill="outline">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