Login help

src/app/app-routing.module.ts

@@ -17,7 +17,7 @@ const routes: Routes = [
     loadChildren: './pages/offres/offre-details/offre-details.module#OffreDetailsPageModule',
     canActivate: [AuthGuardService]
   },
-  { path: 'login-help', loadChildren: './pages/compte/login-help/login-help.module#LoginHelpPageModule' },
+  { path: 'login-help', loadChildren: './modals/compte/login-help/login-help.module#LoginHelpPageModule' },
 
 ];
 

src/app/app.scss

@@ -50,3 +50,8 @@ div.start {
     opacity: 1 !important;
   }
 }
+ion-modal .modal-wrapper {
+  width: 90vw !important;
+  max-height: 90vh !important;
+  border-radius: 10px !important;
+}
\ No newline at end of file

src/app/modals/login-help/login-help.page.html

 <ion-header>
-  <ion-toolbar>
-    <ion-title>loginHelp</ion-title>
+  <ion-toolbar color="primary">
+    <ion-title>Informations</ion-title>
+    <ion-button fill="outline" size="small" color="light" slot="end" (click)="dismissHelpModal()">
+      X
+    </ion-button>
   </ion-toolbar>
 </ion-header>
 
-<ion-content>
-
+<ion-content padding>
+  <ion-list>
+    <ion-list-header>
+      Avec le mode <strong>anonyme</strong>, vous pouvez :
+    </ion-list-header>
+    <ion-item>
+      <ion-icon name="arrow-dropright-circle" slot="start"></ion-icon>
+      <ion-label class="ion-text-wrap" padding-left>Parcourir les offres de nos partenaires</ion-label>
+    </ion-item>
+    <ion-item lines="none">
+      <ion-icon name="arrow-dropright-circle" slot="start"></ion-icon>
+      <ion-label class="ion-text-wrap">Voir la liste des partenaires et les localiser sur la carte</ion-label>
+    </ion-item>
+    <ion-list-header margin-top>
+      En plus, si vous êtes connecté(e), vous pouvez :
+    </ion-list-header>
+    <ion-item>
+      <ion-icon name="arrow-dropright-circle" slot="start"></ion-icon>
+      <ion-label class="ion-text-wrap" padding-left>Sauvegarder vos offres préférées</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-icon name="arrow-dropright-circle" slot="start"></ion-icon>
+      <ion-label class="ion-text-wrap" padding-left>Noter des offres</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-icon name="arrow-dropright-circle" slot="start"></ion-icon>
+      <ion-label class="ion-text-wrap" padding-left>Commenter des offres</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-icon name="arrow-dropright-circle" slot="start"></ion-icon>
+      <ion-label class="ion-text-wrap" padding-left>Réclamer des points mérites et gagner des supers lots! (prochainement)</ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-icon name="arrow-dropright-circle" slot="start"></ion-icon>
+      <ion-label class="ion-text-wrap" padding-left>Réclamer des points dexpériences et monter dans le tableau des meilleur(e)s testeur(se)s! (prochainement)</ion-label>
+    </ion-item>
+    <ion-item lines="none">
+      <ion-icon name="arrow-dropright-circle" slot="start"></ion-icon>
+      <ion-label class="ion-text-wrap" padding-left>Et beaucoup d'autres surprises bientôt!!!</ion-label>
+    </ion-item>
+  </ion-list>
 </ion-content>
\ No newline at end of file

src/app/modals/login-help/login-help.page.scss

+ion-label {
+  font-size: 13px !important;
+}
+ion-icon {
+    width: 0.7em;
+    height: 0.7em;
+}

src/app/modals/login-help/login-help.page.ts

 import { Component, OnInit } from '@angular/core';
+import { ModalController } from '@ionic/angular';
 
 @Component({
   selector: 'app-login-help',
@@ -7,9 +8,17 @@ import { Component, OnInit } from '@angular/core';
 })
 export class LoginHelpPage implements OnInit {
 
-  constructor() { }
+  constructor(
+    public modalController: ModalController
+  ) { }
 
   ngOnInit() {
   }
 
+  dismissHelpModal() {
+    // using the injected ModalController this page
+    // can "dismiss" itself and optionally pass back data
+    this.modalController.dismiss();
+  }
+
 }

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

 <ion-header>
   <ion-toolbar color="primary">
     <ion-title>Connexion</ion-title>
-    <ion-button size="small" fill="outline" color="light" slot="end" (click)="presentHelpModal()">
-      <ion-icon name="help-circle"></ion-icon>
+    <ion-button size="small" fill="solid" color="light" slot="end" (click)="presentHelpModal()">
+        <ion-icon name="information"></ion-icon>
     </ion-button>
   </ion-toolbar>
 </ion-header>