Merge branch 'v1.1.1.0' into v1.1.2.0

config.xml

 <?xml version='1.0' encoding='utf-8'?>
-<widget android-versionCode="11000" id="com.allotesteurs.app" version="1.1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+<widget android-versionCode="11000" id="com.allotesteurs.app" version="1.1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:cdv="http://cordova.apache.org/ns/1.0">
     <name>Allo Testeurs</name>
     <description>Découvrir les bon plans à Kénitra et ailleurs!</description>
     <author email="contact@allo-testeurs.com" href="https://www.allo-testeurs.com">Allo Testeurs Agency</author>
     <content src="index.html" />
     <access origin="*" />
+    <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application">
+        <application android:usesCleartextTraffic="true" />
+    </edit-config>
+    <allow-navigation href="*" />
     <allow-intent href="http://*/*" />
     <allow-intent href="https://*/*" />
     <allow-navigation href="http://*/*" />

package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@angular/common": "^7.2.2",
     "@angular/core": "^7.2.2",
+    "@angular/fire": "^5.2.1",
     "@angular/forms": "^7.2.2",
     "@angular/http": "^7.2.2",
     "@angular/platform-browser": "^7.2.2",
@@ -47,11 +48,13 @@
     "cordova-sqlite-storage": "^3.2.0",
     "cordova.plugins.diagnostic": "^5.0.0",
     "core-js": "^2.5.4",
+    "firebase": "^6.6.1",
     "ionic-image-loader": "^6.3.3",
     "leaflet": "^1.5.1",
     "leaflet.markercluster": "^1.4.1",
     "path": "^0.12.7",
     "rxjs": "~6.5.1",
+    "sweetalert": "^2.1.2",
     "tslib": "^1.9.0",
     "zone.js": "~0.8.29"
   },

src/app/app-routing.module.ts

 import { NgModule } from '@angular/core';
 import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
+import { AuthGuardService } from './services/auth-guard.service';
 
 const routes: Routes = [
-  { path: '', redirectTo: 'mainslider', pathMatch: 'full' },
+  { path: '', redirectTo: 'start', pathMatch: 'full' },
   { path: 'start', loadChildren: './pages/start/start.module#StartPageModule' },
   { path: 'login', loadChildren: './pages/compte/login/login.module#LoginPageModule' },
   { path: 'mainslider', loadChildren: './pages/mainslider/mainslider.module#MainsliderPageModule' },
-  { path: 'app', loadChildren: './pages/menu/menu.module#MenuPageModule' },
-  { path: 'offre-details', loadChildren: './pages/offres/offre-details/offre-details.module#OffreDetailsPageModule' },
+  {
+    path: 'app',
+    loadChildren: './pages/menu/menu.module#MenuPageModule',
+    canActivate: [AuthGuardService]
+  },
+  {
+    path: 'offre-details',
+    loadChildren: './pages/offres/offre-details/offre-details.module#OffreDetailsPageModule',
+    canActivate: [AuthGuardService]
+  },
+  { path: 'login-help', loadChildren: './modals/compte/login-help/login-help.module#LoginHelpPageModule' },
+
 ];
 
 @NgModule({

src/app/app.component.ts

@@ -8,6 +8,7 @@ import { StatusBar } from '@ionic-native/status-bar/ngx';
 import { LocalNotifications } from '@ionic-native/local-notifications/ngx';
 
 import { TripService } from './services/trip-service';
+import { AuthService } from './services/auth.service';
 // import { LocationService } from './services/location-service';
 
 @Component({
@@ -24,7 +25,8 @@ export class AppComponent {
         private splashScreen: SplashScreen,
         private statusBar: StatusBar,
         private router: Router,
-        private _STOR: Storage
+        private _STOR: Storage,
+        private _AUTH: AuthService
         // private _LOCAT: LocationService
     ) {
         this.initializeApp();
@@ -42,6 +44,27 @@ export class AppComponent {
             // Set locator
             // this.setLocator();
 
+            this._AUTH.authState.subscribe(state => {
+                if (state) {
+                    this._STOR.get('APP_PARAMS').then(appParams => {
+                        if (appParams.PARAM_mainslider) {
+                            this.router.navigate(['app/dashboard']);
+                        } else {
+                            this.router.navigate(['mainslider']);
+                        }
+                    });
+                } else {
+                    this.router.navigate(['login']);
+                }
+            });
+            // this._STOR.get('wpUser').then((wpUser) => {
+            //     if (wpUser) {
+            //         this.router.navigateByUrl('/app/dashboard', { replaceUrl: true });
+            //         // this._AUTH.validateAuthToken(wpUser.token);
+            //     } else {
+            //         this.router.navigateByUrl('/login', { replaceUrl: true });
+            //     }
+            // });
             // this._STOR.get('PARAM_mainslider').then((prmMainslider) => {
             //     if (prmMainslider) {
             //         this._STOR.get('isLoggedIn').then((isLoggedIn) => {
@@ -60,34 +83,17 @@ export class AppComponent {
     }
 
     setDefaultParams() {
-        this._STOR.get('PARAM_geolocate').then((val) => {
+        this._STOR.get('APP_PARAMS').then((val) => {
             if (val === null) {
-                this._STOR.set('PARAM_geolocate', true);
-            }
+                this._STOR.set('APP_PARAMS', {
+                    PARAM_mainslider: false,
+                    PARAM_geolocate: true,
+                    PARAM_geoarea: 1000,
+                    PARAM_notiftime: 2880,
+                    PARAM_trackdelay: 60000,
+                    PARAM_notifnbr: 'all',
+                    NOTIF_shownpartners: [],
                 });
-        this._STOR.get('PARAM_geoarea').then((val) => {
-            if (val === null) {
-                this._STOR.set('PARAM_geoarea', 1000);
-            }
-        });
-        this._STOR.get('PARAM_notiftime').then((val) => {
-            if (val === null) {
-                this._STOR.set('PARAM_notiftime', 2880);
-            }
-        });
-        this._STOR.get('PARAM_trackdelay').then((val) => {
-            if (val === null) {
-                this._STOR.set('PARAM_trackdelay', 60000);
-            }
-        });
-        this._STOR.get('PARAM_notifnbr').then((val) => {
-            if (val === null) {
-                this._STOR.set('PARAM_notifnbr', 'all');
-            }
-        });
-        this._STOR.get('NOTIF_shownpartners').then((val) => {
-            if (val === null) {
-                this._STOR.set('NOTIF_shownpartners', []);
             }
         });
     }

src/app/app.module.ts

@@ -19,6 +19,15 @@ import { BackgroundMode } from '@ionic-native/background-mode/ngx';
 import { BackgroundGeolocation } from '@ionic-native/background-geolocation/ngx';
 import { AppVersion } from '@ionic-native/app-version/ngx';
 import { GooglePlus } from '@ionic-native/google-plus/ngx';
+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 { AngularFireAuthModule } from '@angular/fire/auth';
+
+// import * as firebase from 'firebase';
+
+// firebase.initializeApp(environment.firebase);
 
 @NgModule({
   declarations: [AppComponent],
@@ -31,7 +40,8 @@ import { GooglePlus } from '@ionic-native/google-plus/ngx';
       name: '__allo_testeurs_app',
       driverOrder: ['websql', 'sqlite', 'indexeddb']
     }),
-    HttpClientModule
+    HttpClientModule,
+    LoginHelpPageModule
   ],
   providers: [
     StatusBar,
@@ -44,7 +54,9 @@ import { GooglePlus } from '@ionic-native/google-plus/ngx';
     BackgroundMode,
     BackgroundGeolocation,
     AppVersion,
-    GooglePlus
+    GooglePlus,
+    AuthService,
+    AuthGuardService
   ],
   bootstrap: [AppComponent]
 })

src/app/app.scss

@@ -45,3 +45,13 @@ div.start {
     transform: scale(3);
   }
 }
+.swiper-pagination {
+  .swiper-pagination-bullet {
+    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/constants.ts

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

src/app/modals/login-help/login-help.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 { LoginHelpPage } from './login-help.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: LoginHelpPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [LoginHelpPage]
+})
+export class LoginHelpPageModule {}

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

+<ion-header>
+  <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 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.spec.ts

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

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',
+  templateUrl: './login-help.page.html',
+  styleUrls: ['./login-help.page.scss'],
+})
+export class LoginHelpPage implements OnInit {
+
+  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.module.ts

@@ -24,4 +24,4 @@ const routes: Routes = [
   ],
   declarations: [LoginPage]
 })
-export class LoginPageModule {}
+export class LoginPageModule { }

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

 <ion-header>
   <ion-toolbar color="primary">
     <ion-title>Connexion</ion-title>
+    <ion-button size="small" fill="solid" color="light" slot="end" (click)="presentHelpModal()">
+        <ion-icon name="information"></ion-icon>
+    </ion-button>
   </ion-toolbar>
 </ion-header>
 <ion-content text-center color="primary" padding>
@@ -59,18 +62,26 @@
         </div>
       </ion-card-content>
     </ion-card>
-    <a href="javascript:;">
+    <!-- <a href="javascript:;">
       <ion-text color="light">
         Mot de passe oublié?
       </ion-text>
-    </a>
+    </a> -->
     <ion-item-divider color="primary"> </ion-item-divider>
-    <ion-button color="dark" expand="block" type="submit" [disabled]="validationsForm.invalid" no-margin>Connexion</ion-button>
+    <ion-button color="dark" expand="block" type="submit" [disabled]="validationsForm.invalid" no-margin>
+      <ion-icon name="log-in"></ion-icon>
+      Connexion
+    </ion-button>
   </form>
   <ion-item-divider color="primary" lines="none"> </ion-item-divider>
-  <ion-item-divider color="primary" justify-content-center>
+  <!-- <ion-item-divider color="primary" justify-content-center>
     Se connecter avec Facebook ou Google
-  </ion-item-divider>
+  </ion-item-divider> -->
+
+  <ion-button color="light" expand="block" class="btn-g" (click)="doAnonymousLogIn()" no-margin>
+    <ion-icon name="walk"></ion-icon>
+    Connexion anonyme
+  </ion-button>
   <ion-grid>
     <ion-row>
       <!-- <ion-col>
@@ -79,9 +90,9 @@
         </ion-button>
       </ion-col> -->
       <ion-col>
-        <ion-button color="light" expand="block" class="btn-g" (click)="doGoogleLogin()" no-margin>
+        <!-- <ion-button color="light" expand="block" class="btn-g" (click)="doGoogleLogin()" no-margin>
           <ion-icon name="logo-google"></ion-icon>
-        </ion-button>
+        </ion-button> -->
       </ion-col>
     </ion-row>
   </ion-grid>

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

 import { Component, OnInit } from '@angular/core';
 import { Validators, FormBuilder, FormGroup, FormControl } from '@angular/forms';
-import { AlloService } from '../../../services/allo-service';
+import { ModalController } from '@ionic/angular';
 import { Storage } from '@ionic/storage';
 import { Router } from '@angular/router';
 import { GooglePlus } from '@ionic-native/google-plus/ngx';
+import { AlloService } from '../../../services/allo-service';
+import { AuthService } from '../../../services/auth.service';
+import { LoginHelpPage } from '../../../modals/login-help/login-help.page';
+// import swal from 'sweetalert';
 
 @Component({
     selector: 'app-login',
@@ -31,11 +35,19 @@ export class LoginPage implements OnInit {
         public formBuilder: FormBuilder,
         public storage: Storage,
         public router: Router,
+        public modalController: ModalController,
         private googlePlus: GooglePlus,
-        public _ALLO: AlloService
+        public _ALLO: AlloService,
+        public _AUTH: AuthService
     ) { }
 
     ngOnInit() {
+        this._AUTH.getAuthState().subscribe(state => {
+            if (state) {
+                let name = this._AUTH.infoNicename === 'anonymous' ? 'Anonyme' : this._AUTH.infoFullname;
+                this._ALLO.presentToast('Connexion', 'Bienvenue ' + name, 'top');
+            }
+        });
         this.validationsForm = this.formBuilder.group({
             email: new FormControl('', Validators.compose([
                 Validators.required,
@@ -45,8 +57,66 @@ export class LoginPage implements OnInit {
         });
     }
 
+    async presentHelpModal() {
+        const modal = await this.modalController.create({
+            component: LoginHelpPage
+        });
+        return await modal.present();
+    }
+
+    doAnonymousLogIn() {
+        const wpUser = {
+            token: null,
+            user_nicename: 'anonymous',
+            user_display_name: 'Mode anonyme',
+            user_email: 'nomail',
+        };
+        this.storage.set('wpUser', wpUser).then(() => {
+            this._AUTH.setUser(wpUser);
+            // this.storage.get('APP_PARAMS').then(appParams => {
+            //     if (appParams.PARAM_mainslider) {
+            //         this.router.navigate(['app/dashboard']);
+            //     } else {
+            //         this.router.navigate(['mainslider']);
+            //     }
+            // });
+        });
+    }
+
     onSubmit(values) {
-        console.log(values);
+        this._ALLO.presentLoading();
+        this._AUTH.doLogin(values)
+            .then(
+                res => {
+                    this._ALLO.dismissLoading();
+                    console.log('User exist', res);
+                    this.storage.get('APP_PARAMS').then(appParams => {
+                        if (appParams.PARAM_mainslider) {
+                            this.router.navigate(['app/dashboard']);
+                        } else {
+                            this.router.navigate(['mainslider']);
+                        }
+                    });
+                },
+                err => {
+                    this._ALLO.dismissLoading();
+                    // swal('Connexion', 'Email ou Mot de passe incorrects. Veuillez réessayer.', 'error');
+                    // this._ALLO.presentAlert('Connexion', 'Email ou Mot de passe incorrects.<br>Veuillez réessayer.');
+                    this._ALLO.presentToast('', 'Email ou Mot de passe incorrects.<br>Veuillez réessayer.', 'top');
+                    console.log('Auth error', err);
+                });
+        // this._ALLO.presentLoading();
+        // this._AUTH.firebaseRegister(values)
+        //     .then(res => {
+        //         this._ALLO.dismissLoading();
+        //         console.log('User exist', res);
+        //         // this.errorMessage = "";
+        //         // this.navCtrl.navigateForward('/dashboard');
+        //     }, err => {
+        //         this._ALLO.dismissLoading();
+        //         // this.errorMessage = err.message;
+        //         console.log('Auth error', err);
+        //     });
     }
 
     async doGoogleLogin() {

src/app/pages/mainslider/mainslider.page.html

@@ -197,12 +197,8 @@
 						<ion-text color="light">
 							<p class="text-1x">
 								Pour une expérience très riche, il est très souhaitable d'activer le GPS de votre
-								mobile,
-								afin de vous
-								envoyer des notifications sur les promos de nos partenaires, une fois vous vous
-								approchez de
-								leurs
-								locaux !
+								mobile, afin de vous envoyer des notifications sur les promos de nos partenaires à
+								proximité !
 							</p>
 						</ion-text>
 					</ion-col>
@@ -212,14 +208,13 @@
 						<ion-grid no-margin no-padding>
 							<ion-row>
 								<ion-col>
-									<ion-button class="round" color="light" margin-top full tappable
-									routerLink="/app/dashboard"
-                                    routerDirection="root" routerLinkActive="active">
+									<ion-button class="round" size="small" color="light" margin-top full tappable
+										(click)="goToDashboard()" routerDirection="forward" routerLinkActive="active">
 										Continuer sans &nbsp;<ion-icon name="arrow-dropright-circle"></ion-icon>
 									</ion-button>
 								</ion-col>
 								<ion-col>
-									<ion-button ion-button class="round" color="warning" margin-top full tappable
+									<ion-button class="round" size="small" color="warning" margin-top full tappable
 										(click)="getGps()">
 										Activer le GPS &nbsp;<ion-icon name="locate"></ion-icon>
 									</ion-button>

src/app/pages/mainslider/mainslider.page.scss

@@ -20,5 +20,5 @@ ion-slides {
   }
 
   --bullet-background: #ffffff !important;
-  --bullet-background-active: var(--ion-color-secondary, #ffffff) !important;
+  --bullet-background-active: var(--ion-color-dark, #000000) !important;
 }
\ No newline at end of file

src/app/pages/mainslider/mainslider.page.ts

@@ -81,11 +81,13 @@ export class MainsliderPage implements OnInit {
 
     getGps() {
         if (this.platform.is('cordova')) {
-            console.log('cord');
             this._PERM.checkGps();
             this._LOCATE.initLocator();
         }
-        this._STOR.set('PARAM_geolocate', true);
+        this._STOR.get('APP_PARAMS').then(appParams => {
+            appParams.PARAM_mainslider = true;
+            this._STOR.set('APP_PARAMS', appParams);
+        });
         this.goToDashboard();
     }
 
@@ -95,7 +97,11 @@ export class MainsliderPage implements OnInit {
     }
 
     goToDashboard() {
-        this.router.navigateByUrl('/app/dashboard');
+        this._STOR.get('APP_PARAMS').then(appParams => {
+            appParams.PARAM_mainslider = true;
+            this._STOR.set('APP_PARAMS', appParams);
+        });
+        this.router.navigate(['app/dashboard']);
     }
 
     ionViewDidEnter() {

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

 <ion-menu contentId="content">
     <ion-header>
         <ion-toolbar color="primary">
+        <div class="anonymous ion-text-center" *ngIf="_AUTH.infoNicename === 'anonymous'" padding>
+            <p no-margin>
+                <img src="../../../../assets/img/ionic3-ico.png" />
+            </p>
+            <ion-chip color="" outline="true">
+                Mode anonyme
+            </ion-chip>
+            <p no-margin>
+                <ion-button size="small" color="dark" (click)="logout()">
+                    <ion-icon name="log-out"></ion-icon>
+                    Déconnexion
+                </ion-button>
+            </p>
+        </div>
+        <div class="connected" *ngIf="_AUTH.infoNicename !== 'anonymous'">
             <ion-grid>
                 <ion-row>
                     <ion-col size="4">
@@ -10,15 +25,15 @@
                     </ion-col>
                     <ion-col size="8">
                         <ion-text>
-                            <h4>Nabil Sadki</h4>
+                            <h4>{{ _AUTH.infoFullname }}</h4>
                         </ion-text>
                         <ion-chip color="light" outline="true">
                             <ion-icon name="star"></ion-icon>
                             <ion-label>Testeur</ion-label>
                         </ion-chip>
-                        <ion-chip color="light">
+                        <!-- <ion-chip color="light">
                             <ion-icon name="trophy" no-margin></ion-icon>
-                        </ion-chip>
+                        </ion-chip> -->
                     </ion-col>
                 </ion-row>
             </ion-grid>
@@ -49,7 +64,7 @@
                             </ion-menu-toggle>
                         </ion-col>
                         <ion-col no-padding class="column">
-                            <ion-button size="small" color="dark" href="/login">
+                            <ion-button size="small" color="dark" (click)="logout()">
                                 <ion-icon name="log-out"></ion-icon>
                                 Déconnexion
                             </ion-button>
@@ -58,6 +73,7 @@
 
                 </ion-grid>
             </ion-card>
+        </div>
         </ion-toolbar>
     </ion-header>
     <ion-content>

src/app/pages/menu/menu.page.scss

@@ -6,3 +6,8 @@ ion-progress-bar {
     height: 10px;
     border-radius: 5px;
 }
+.anonymous {
+    img {
+        width: 50vw;
+    }
+}
\ No newline at end of file

src/app/pages/menu/menu.page.ts

 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { AuthService } from '../../services/auth.service';
 
 @Component({
   selector: 'app-menu',
@@ -40,7 +42,15 @@ export class MenuPage implements OnInit {
     }
   ];
 
-  constructor() { }
+  constructor(
+    public router: Router,
+    public _AUTH: AuthService
+  ) { }
+
+  logout() {
+    this._AUTH.logOut();
+    this.router.navigateByUrl('/login', { replaceUrl: true });
+  }
 
   ngOnInit() {
     // this._ALLO.presentLoading();

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

@@ -31,7 +31,7 @@ export class OffresCartePage implements OnInit {
       if (loadedData) {
         this._TRIP.offersCardListPointer = this._TRIP.offersCardListPointer + 1;
         this._TRIP.offersCardList = this._TRIP.offersCardList.concat(loadedData);
-        console.log(loadedData, this._TRIP.offersCardList, this._TRIP.offersCardListPointer);
+        // console.log(loadedData, this._TRIP.offersCardList, this._TRIP.offersCardListPointer);
         event.target.complete();
       } else {
         event.target.disabled = true;

src/app/pages/offres/offres-tlm/offres-tlm.page.html

-<ion-content>
-  <ion-list-header>Meilleures deals</ion-list-header>
+<ion-content padding>
+  <!-- <ion-card color="light" margin-bottom> -->
+    <ion-text>
+      <p class="ion-text-center">
+        <img class="soon" src="../../../../assets/img/soon.png">
+      </p>
+    </ion-text>
+  <!-- </ion-card> -->
+  <ion-text class="ion-text-justify">
+    <p>
+      Que vous soyez détenteur(se) ou non de la Carte Testeur, cette section est ouverte à tout le monde, et permettra
+      dans un future proche de bénéficier des offres de nos partenaires.
+    </p>
+    <p>
+      Les plus fidéles seront <strong color="primary">trop bien</strong> récompensés!!
+    </p>
+    <p>
+      Restez à l'écoute!
+    </p>
+  </ion-text>
+  <!-- <ion-list-header>Meilleures deals</ion-list-header>
   <div class="app">
     <ul class="hs">
       <li class="item">test</li>
@@ -14,5 +33,5 @@
     <ion-item>
       Offre
     </ion-item>
-  </ion-list>
+  </ion-list> -->
 </ion-content>
\ No newline at end of file

src/app/pages/offres/offres-tlm/offres-tlm.page.scss

@@ -57,3 +57,9 @@ ul {
   background: #fff;
   border-radius: 8px;
 }
+
+img.soon {
+  height: 30vh !important;
+  width: auto !important;
+  margin: 0 auto;
+}
\ No newline at end of file

src/app/pages/params/params.page.html

@@ -13,64 +13,40 @@
   <form class="list-form">
     <!-- <ion-item>
       <ion-label color="dark" class="text-1x">Cacher l'écran d'accueil</ion-label>
-      <ion-toggle checked color="primary" [(ngModel)]="prm_mainslider" [ngModelOptions]="{standalone: true}"
+      <ion-toggle checked color="primary" [(ngModel)]="prmMainslider" [ngModelOptions]="{standalone: true}"
         (ionChange)="setParam('mainslider')"></ion-toggle>
     </ion-item> -->
     <ion-item>
       <ion-label color="dark" class="text-1x">Géo-notifications</ion-label>
-      <ion-toggle checked color="primary" [(ngModel)]="prm_geolocate" [ngModelOptions]="{standalone: true}"
+      <ion-toggle color="primary" [(ngModel)]="prmGeolocate" [ngModelOptions]="{standalone: true}"
         (ionChange)="setParam('geolocate')"></ion-toggle>
     </ion-item>
     <ion-item>
       <ion-label color="dark" class="text-1x">Rayon de détection</ion-label>
-      <ion-select class="text-primary" [(ngModel)]="prm_geoarea" [ngModelOptions]="{standalone: true}"
+      <ion-select class="text-primary" [(ngModel)]="prmGeoarea" [ngModelOptions]="{standalone: true}"
         (ionChange)="setParam('geoarea')">
-        <ion-select-option value="400">400m</ion-select-option>
-        <ion-select-option value="800">800m</ion-select-option>
-        <ion-select-option value="1200">1,2Km</ion-select-option>
-        <ion-select-option value="1600">1,6Km</ion-select-option>
-        <ion-select-option value="2000">2Km</ion-select-option>
+        <ion-select-option *ngFor="let gOpt of geoAreaOptions | keyvalue" [value]="gOpt.key">{{ gOpt.value }}</ion-select-option>
       </ion-select>
     </ion-item>
     <ion-item>
       <ion-label color="dark" class="text-1x">Raffraichir la position GPS chaque</ion-label>
-      <ion-select class="text-primary" [(ngModel)]="prm_trackdelay" [ngModelOptions]="{standalone: true}"
+      <ion-select class="text-primary" [(ngModel)]="prmTrackdelay" [ngModelOptions]="{standalone: true}"
         (ionChange)="setParam('trackdelay')">
-        <ion-select-option value="60000">minute</ion-select-option>
-        <ion-select-option value="120000">2 minutes</ion-select-option>
-        <ion-select-option value="180000">3 minutes</ion-select-option>
-        <ion-select-option value="240000">4 minutes</ion-select-option>
-        <ion-select-option value="300000">5 minutes</ion-select-option>
-        <ion-select-option value="360000">6 minutes</ion-select-option>
-        <ion-select-option value="420000">7 minutes</ion-select-option>
-        <ion-select-option value="480000">8 minutes</ion-select-option>
-        <ion-select-option value="540000">9 minutes</ion-select-option>
-        <ion-select-option value="600000">10 minutes</ion-select-option>
+        <ion-select-option *ngFor="let tdOpt of trackDelayOptions | keyvalue" [value]="tdOpt.key">{{ tdOpt.value }}</ion-select-option>
       </ion-select>
     </ion-item>
     <ion-item>
       <ion-label color="dark" class="text-1x">Réaffichage des notifications</ion-label>
-      <ion-select class="text-primary" [(ngModel)]="prm_notiftime" [ngModelOptions]="{standalone: true}"
+      <ion-select class="text-primary" [(ngModel)]="prmNotiftime" [ngModelOptions]="{standalone: true}"
         (ionChange)="setParam('notiftime')">
-        <ion-select-option value="5">5 min</ion-select-option>
-        <ion-select-option value="15">15 min</ion-select-option>
-        <ion-select-option value="30">30 min</ion-select-option>
-        <ion-select-option value="45">45 min</ion-select-option>
-        <ion-select-option value="60">1 h</ion-select-option>
-        <ion-select-option value="120">2 h</ion-select-option>
-        <ion-select-option value="480">4 h</ion-select-option>
-        <ion-select-option value="960">8 h</ion-select-option>
-        <ion-select-option value="2880">1 j</ion-select-option>
+        <ion-select-option *ngFor="let ntOpt of notifTimeOptions | keyvalue" [value]="ntOpt.key">{{ ntOpt.value }}</ion-select-option>
       </ion-select>
     </ion-item>
     <ion-item>
       <ion-label color="dark" class="text-1x">Notifications par rafraîchissement</ion-label>
-      <ion-select class="text-primary" [(ngModel)]="prm_notifnbr" [ngModelOptions]="{standalone: true}"
+      <ion-select class="text-primary" [(ngModel)]="prmNotifnbr" [ngModelOptions]="{standalone: true}"
         (ionChange)="setParam('notifnbr')">
-        <ion-select-option value="2">Pas plus de 2 à la fois</ion-select-option>
-        <ion-select-option value="4">Pas plus de 4 à la fois</ion-select-option>
-        <ion-select-option value="6">Pas plus de 6 à la fois</ion-select-option>
-        <ion-select-option value="all">Afficher toutes les notifications</ion-select-option>
+        <ion-select-option *ngFor="let nnOpt of notifNbrOptions | keyvalue" [value]="nnOpt.key">{{ nnOpt.value }}</ion-select-option>
       </ion-select>
     </ion-item>
   </form>

src/app/pages/params/params.page.ts

@@ -11,12 +11,49 @@ import { AlloService } from '../../services/allo-service';
 })
 export class ParamsPage implements OnInit {
 
-    public prm_mainslider = true;
-    public prm_geolocate = false;
-    public prm_geoarea: any = 400;
-    public prm_notiftime = 15;
-    public prm_trackdelay = 60000;
-    public prm_notifnbr: any = 'all';
+    public prmMainslider = true;
+    public prmGeolocate = false;
+    public prmGeoarea: any = 400;
+    public prmNotiftime = 15;
+    public prmTrackdelay = 60000;
+    public prmNotifnbr: any = 'all';
+    public geoAreaOptions = {
+        400: '400m',
+        800: '800m',
+        1200: '1,2Km',
+        1600: '1,6m',
+        2000: '2Km',
+    };
+    public trackDelayOptions = {
+        60000: '1 minute',
+        120000: '2 minutes',
+        180000: '3 minutes',
+        240000: '4 minutes',
+        300000: '5 minutes',
+        360000: '6 minutes',
+        420000: '7 minutes',
+        480000: '8 minutes',
+        540000: '9 minutes',
+        600000: '10 minutes',
+    };
+    public notifTimeOptions = {
+        5: '5 minutes',
+        15: '15 minutes',
+        30: '30 minutes',
+        45: '45 minutes',
+        60: '1 heure',
+        120: '2 heure',
+        480: '4 heure',
+        960: '8 heure',
+        2880: '1 jour',
+    };
+    public notifNbrOptions = {
+        2: 'Pas plus de 2 à la fois',
+        4: 'Pas plus de 4 à la fois',
+        6: 'Pas plus de 6 à la fois',
+        all: 'Afficher toutes les notifications',
+    };
+
 
     constructor(
         private _STOR: Storage,
@@ -24,46 +61,27 @@ export class ParamsPage implements OnInit {
         private _LOCAT: LocationService,
         private _ALLO: AlloService
     ) {
-        this._STOR.get('PARAM_mainslider').then((val) => {
-            if (val !== null) {
-                this.prm_mainslider = val;
-            }
-        });
-        this._STOR.get('PARAM_geolocate').then((val) => {
-            if (val !== null) {
-                this.prm_geolocate = val;
-            }
-        });
-        this._STOR.get('PARAM_geoarea').then((val) => {
-            if (val !== null) {
-                this.prm_geoarea = val;
-            }
-        });
-        this._STOR.get('PARAM_notiftime').then((val) => {
-            if (val !== null) {
-                this.prm_notiftime = val;
-            }
-        });
-        this._STOR.get('PARAM_trackdelay').then((val) => {
-            if (val !== null) {
-                this.prm_trackdelay = val;
-            }
-        });
-        this._STOR.get('PARAM_notifnbr').then((val) => {
-            if (val !== null) {
-                this.prm_notifnbr = val;
+        this._STOR.get('APP_PARAMS').then((appParams) => {
+            if (appParams !== null) {
+                this.prmGeolocate = appParams.PARAM_geolocate;
+                this.prmGeoarea = appParams.PARAM_geoarea;
+                this.prmNotiftime = appParams.PARAM_notiftime;
+                this.prmTrackdelay = appParams.PARAM_trackdelay;
+                this.prmNotifnbr = appParams.PARAM_notifnbr;
             }
         });
     }
 
     setParam(name) {
+        this._STOR.get('APP_PARAMS').then((appParams) => {
+            if (appParams !== null) {
                 switch (name) {
-            case 'mainslider':
-                this._ALLO.setParam('mainslider', this.prm_mainslider);
-                break;
+                    // case 'mainslider':
+                    //     this._ALLO.setParam('mainslider', this.prm_mainslider);
+                    //     break;
                     case 'geolocate':
-                this._ALLO.setParam('geolocate', this.prm_geolocate);
-                if (this.prm_geolocate) {
+                        appParams.PARAM_geolocate = this.prmGeolocate;
+                        if (this.prmGeolocate) {
                             this._PERM.checkGps();
                             this._LOCAT.initLocator();
                         } else {
@@ -71,19 +89,22 @@ export class ParamsPage implements OnInit {
                         }
                         break;
                     case 'geoarea':
-                this._ALLO.setParam('geoarea', +this.prm_geoarea);
+                        appParams.PARAM_geoarea = +this.prmGeoarea;
                         break;
                     case 'notiftime':
-                this._ALLO.setParam('notiftime', +this.prm_notiftime);
+                        appParams.PARAM_notiftime = +this.prmNotiftime;
                         break;
                     case 'notifnbr':
-                this._ALLO.setParam('notifnbr', +this.prm_notifnbr);
+                        appParams.PARAM_notifnbr = +this.prmNotifnbr;
                         break;
                     case 'trackdelay':
-                this._ALLO.setParam('trackdelay', +this.prm_trackdelay);
+                        appParams.PARAM_trackdelay = +this.prmTrackdelay;
                         this._LOCAT.restartTracking();
                         break;
                 }
+                this._STOR.set('APP_PARAMS', appParams);
+            }
+        });
     }
 
     ngOnInit() {

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

@@ -6,38 +6,39 @@
         <ion-title>
             Modifier mon profil
         </ion-title>
+        <ion-button color="success" slot="end">Valider</ion-button>
     </ion-toolbar>
 </ion-header>
 
 <ion-content>
-  <ion-card>
-    <ion-item color="primary">
-      Ma carte testeur :
+    <ion-grid>
+        <ion-row>
+            <ion-col size="2"></ion-col>
+            <ion-col size="8">
+                <ion-img src="../../assets/img/avatar.jpeg"></ion-img>
+            </ion-col>
+            <ion-col size="2"></ion-col>
+        </ion-row>
+    </ion-grid>
+    <ion-card padding-bottom>
+        <ion-item color="light" lines="none">
+            Mes infos :
         </ion-item>
         <ion-item>
-      <ion-icon name="card" slot="start"></ion-icon> 2019 0108 0000 0001
+            <ion-label position="floating">Nom</ion-label>
+            <ion-input clearInput></ion-input>
         </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-label position="floating">Prénom</ion-label>
+            <ion-input clearInput></ion-input>
         </ion-item>
         <ion-item>
-      <ion-icon name="mail" slot="start"></ion-icon> monemail@allo-testeurs.com
+            <ion-label position="floating">E-mail</ion-label>
+            <ion-input clearInput></ion-input>
         </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-label position="floating">Téléphone</ion-label>
+            <ion-input clearInput></ion-input>
         </ion-item>
     </ion-card>
 </ion-content>
\ No newline at end of file

src/app/services/allo-service.ts

-import { LoadingController, AlertController } from "@ionic/angular";
-import { Injectable } from "@angular/core";
+import { LoadingController, AlertController, ToastController } from '@ionic/angular';
+import { Injectable } from '@angular/core';
 import { Storage } from '@ionic/storage';
 
 @Injectable({ providedIn: 'root' })
@@ -12,44 +12,25 @@ export class AlloService {
     public prmNotiftime = 15;
     public prmTrackdelay = 60000;
     public prmNotifnbr: any = 'all';
+    public loading;
 
     constructor(
         private alertCtrl: AlertController,
         private loadingCtrl: LoadingController,
+        private toastCtrl: ToastController,
         private _STOR: Storage
     ) {
         this.setDefaultParams();
     }
 
     setDefaultParams() {
-        this._STOR.get('PARAM_mainslider').then((val) => {
-            if (val !== null) {
-                this.prmMainslider = val;
-            }
-        });
-        this._STOR.get('PARAM_geolocate').then((val) => {
-            if (val !== null) {
-                this.prmGeolocate = val;
-            }
-        });
-        this._STOR.get('PARAM_geoarea').then((val) => {
-            if (val !== null) {
-                this.prmGeoarea = val;
-            }
-        });
-        this._STOR.get('PARAM_notiftime').then((val) => {
-            if (val !== null) {
-                this.prmNotiftime = val;
-            }
-        });
-        this._STOR.get('PARAM_trackdelay').then((val) => {
-            if (val !== null) {
-                this.prmTrackdelay = val;
-            }
-        });
-        this._STOR.get('PARAM_notifnbr').then((val) => {
-            if (val !== null) {
-                this.prmNotifnbr = val;
+        this._STOR.get('APP_PARAMS').then((appParams) => {
+            if (appParams !== null) {
+                this.prmGeolocate = appParams.PARAM_geolocate;
+                this.prmGeoarea = appParams.PARAM_geoarea;
+                this.prmNotiftime = appParams.PARAM_notiftime;
+                this.prmTrackdelay = appParams.PARAM_trackdelay;
+                this.prmNotifnbr = appParams.PARAM_notifnbr;
             }
         });
     }
@@ -111,19 +92,38 @@ export class AlloService {
 
     async presentLoading() {
         this.showPage = false;
-        const loading = await this.loadingCtrl.create({
+        this.loading = await this.loadingCtrl.create({
             // spinner: null,
-            duration: 2000,
+            duration: 0,
             message: 'Chargement...',
             translucent: true,
             cssClass: 'custom-class custom-loading'
         });
-        return await loading.present().then(() => {
+        return await this.loading.present().then(() => {
             this.showPage = true;
         });
     }
 
     dismissLoading() {
-        this.loadingCtrl.dismiss();
+        this.loading.dismiss();
+    }
+
+    async presentToast(header, message, position) {
+        const toast = await this.toastCtrl.create({
+            message: message,
+            duration: 3000,
+            header: header,
+            position: position,
+            buttons: [
+                {
+                    text: 'OK',
+                    role: 'cancel',
+                    handler: () => {
+                        console.log('Cancel clicked');
+                    }
+                }
+            ]
+        });
+        toast.present();
     }
 }

src/app/services/auth-guard.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { AuthGuardService } from './auth-guard.service';
+
+describe('AuthGuardService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: AuthGuardService = TestBed.get(AuthGuardService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/auth-guard.service.ts

+import { Injectable } from '@angular/core';
+import { CanActivate } from '@angular/router';
+import { AuthService } from './auth.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthGuardService implements CanActivate {
+
+  constructor(
+    public authService: AuthService
+  ) { }
+
+  canActivate(): boolean {
+    return this.authService.isAuthenticated();
+  }
+}

src/app/services/auth.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { AuthService } from './auth.service';
+
+describe('AuthService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: AuthService = TestBed.get(AuthService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/auth.service.ts

+import { Injectable } from '@angular/core';
+import { Platform } from '@ionic/angular';
+import { Storage } from '@ionic/storage';
+import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
+import { HTTP } from '@ionic-native/http/ngx';
+import { Router } from '@angular/router';
+import { BehaviorSubject } from 'rxjs';
+
+import { AlloService } from './allo-service';
+
+// import * as firebase from 'firebase/app';
+// import 'firebase/auth';
+import * as Config from '../constants';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthService {
+
+  public infoNicename;
+  public infoFullname;
+  public infoEmail;
+
+  authState = new BehaviorSubject(false);
+  authProfile = new BehaviorSubject(false);
+
+  constructor(
+    private platform: Platform,
+    public storage: Storage,
+    private http: HttpClient,
+    private httpAdv: HTTP,
+    private router: Router,
+    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.isLoggedIn();
+      this.isAnonymous();
+    });
+  }
+
+  isAuthenticated() {
+    return this.authState.value;
+  }
+
+  getAuthState() {
+    return this.authState;
+  }
+
+  isLoggedIn() {
+    this.storage.get('wpUser').then((wpUser) => {
+      if (wpUser) {
+        console.log('wpuser found')
+        this.authState.next(true);
+      }
+    });
+  }
+
+  isAnonymous() {
+    this.storage.get('wpUser').then((wpUser) => {
+      if (wpUser && wpUser.hasOwnProperty('user_nicename') && wpUser.user_nicename === 'anonymous') {
+        this.authProfile.next(true);
+      }
+    });
+  }
+
+  // Wordpress
+  getUser() {
+    return this.storage.get('wpUser');
+  }
+
+  setUser(user) {
+    this.infoNicename = user.user_nicename;
+    this.infoFullname = user.user_display_name;
+    this.infoEmail = user.user_email;
+    this.authState.next(true);
+
+    return this.storage.set('wpUser', user);
+  }
+
+  logOut() {
+    this.authState.next(false);
+    return this.storage.remove('wpUser');
+  }
+
+  doLogin(values) {
+    let authData = {
+      username: values.email,
+      password: values.password
+    };
+
+    return new Promise<any>((resolve, reject) => {
+      if (this.platform.is('cordova')) {
+        this.httpAdv.post(Config.WORDPRESS_URL + 'wp-json/jwt-auth/v1/token', authData, {}).then(
+          res => {
+            console.log(res);
+            this.setUser(JSON.parse(res.data));
+            this.authState.next(true);
+            resolve(res);
+          },
+          err => reject(err)
+        );
+      } else {
+        this.http.post(Config.WORDPRESS_URL + 'wp-json/jwt-auth/v1/token', authData).subscribe(
+          res => {
+            this.setUser(res);
+            this.authState.next(true);
+            resolve(res);
+          },
+          err => reject(err)
+        );
+      }
+    });
+  }
+
+  doRegister(user_data, token) {
+    return this.http.post(Config.WORDPRESS_REST_API_URL + 'users?token=' + token, user_data);
+  }
+
+  validateAuthToken(token) {
+    this._ALLO.presentLoading();
+    if (this.platform.is('cordova')) {
+      let header: Headers = new Headers();
+      header.append('Authorization', 'Bearer ' + token);
+      return this.httpAdv.post(
+        Config.WORDPRESS_URL + 'wp-json/jwt-auth/v1/token/validate',
+        {},
+        { headers: header }
+      ).then(result => {
+        this.processeAuthToken(result);
+      }).catch(error => {
+        this._ALLO.dismissLoading();
+        console.log(error);
+      });
+    } else {
+      let header: HttpHeaders = new HttpHeaders();
+      header.append('Authorization', 'Bearer ' + token);
+      return this.http.post(
+        Config.WORDPRESS_URL + 'wp-json/jwt-auth/v1/token/validate',
+        {},
+        { headers: header }
+      ).subscribe((result: any) => {
+        this.processeAuthToken(result);
+      }, error => {
+        this._ALLO.dismissLoading();
+        console.log(error);
+      });
+    }
+  }
+
+  processeAuthToken(result: any) {
+    this._ALLO.dismissLoading();
+    if (result.data.status !== 200) {
+      if (this.router.url === '/login') {
+        alert('Votre session est expirée. Veuillez vous reconnecter');
+      }
+    } else {
+      this.router.navigateByUrl('/mainslider', { replaceUrl: true });
+    }
+  }
+
+  // Firebase
+  firebaseRegister(value) {
+    // return new Promise<any>((resolve, reject) => {
+    //   firebase.auth().createUserWithEmailAndPassword(value.email, value.password)
+    //     .then(
+    //       res => resolve(res),
+    //       err => reject(err));
+    // })
+  }
+
+  firebaseLogin(value) {
+    // return new Promise<any>((resolve, reject) => {
+    //   firebase.auth().signInWithEmailAndPassword(value.email, value.password)
+    //     .then(
+    //       res => resolve(res),
+    //       err => reject(err));
+    // });
+  }
+
+  firebaseLogout() {
+    // return new Promise((resolve, reject) => {
+    //   if (firebase.auth().currentUser) {
+    //     firebase.auth().signOut()
+    //       .then(() => {
+    //         console.log("LOG Out");
+    //         resolve();
+    //       }).catch((error) => {
+    //         reject();
+    //       });
+    //   }
+    // })
+  }
+
+  firebaseUserDetails() {
+    // return firebase.auth().currentUser;
+  }
+}

src/environments/environment.prod.ts

 export const environment = {
-  production: true
+  production: true,
+  firebase: {
+    apiKey: 'AIzaSyDCp8ZFLfMtRtCIuFCYbmmcBU5jcu64MIg',
+    authDomain: 'allo-testeurs-1546348822085.firebaseapp.com',
+    databaseURL: 'https://allo-testeurs-1546348822085.firebaseio.com',
+    projectId: 'allo-testeurs-1546348822085',
+    storageBucket: '',
+    messagingSenderId: '536597038498',
+    appId: '1:536597038498:web:7896f1f4b2960e72479efb'
+  }
 };

src/environments/environment.ts

@@ -3,7 +3,16 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false
+  production: false,
+  firebase: {
+    apiKey: 'AIzaSyDCp8ZFLfMtRtCIuFCYbmmcBU5jcu64MIg',
+    authDomain: 'allo-testeurs-1546348822085.firebaseapp.com',
+    databaseURL: 'https://allo-testeurs-1546348822085.firebaseio.com',
+    projectId: 'allo-testeurs-1546348822085',
+    storageBucket: '',
+    messagingSenderId: '536597038498',
+    appId: '1:536597038498:web:7896f1f4b2960e72479efb'
+  }
 };
 
 /*

src/theme/variables.scss

@@ -2,6 +2,7 @@
 // http://ionicframework.com/docs/theming/
 
 /** Ionic CSS Variables **/
+@import url('https://fonts.googleapis.com/css?family=Abel');
 @font-face {
   font-family: "Open Sans";
   src: url("../assets/fonts/opensans/regular/OpenSans-Regular-webfont.eot");
@@ -25,27 +26,27 @@
 :root {
   /** primary **/
   --ion-color-primary: #f93129;
-  --ion-color-primary-rgb: 56, 128, 255;
+  --ion-color-primary-rgb: 249, 49, 41;
   --ion-color-primary-contrast: #ffffff;
   --ion-color-primary-contrast-rgb: 255, 255, 255;
-  --ion-color-primary-shade: #f7b32b;
-  --ion-color-primary-tint: #fcf6b1;
+  --ion-color-primary-shade: #db2b24;
+  --ion-color-primary-tint: #fa463e;
 
   /** secondary **/
   --ion-color-secondary: #f7b32b;
-  --ion-color-secondary-rgb: 12, 209, 232;
-  --ion-color-secondary-contrast: #ffffff;
-  --ion-color-secondary-contrast-rgb: 255, 255, 255;
-  --ion-color-secondary-shade: #f7b32b;
-  --ion-color-secondary-tint: #fcf6b1;
+  --ion-color-secondary-rgb: 247, 179, 43;
+  --ion-color-secondary-contrast: #000000;
+  --ion-color-secondary-contrast-rgb: 0, 0, 0;
+  --ion-color-secondary-shade: #d99e26;
+  --ion-color-secondary-tint: #f8bb40;
 
   /** tertiary **/
   --ion-color-tertiary: #2d1e2f;
-  --ion-color-tertiary-rgb: 112, 68, 255;
+  --ion-color-tertiary-rgb: 45, 30, 47;
   --ion-color-tertiary-contrast: #ffffff;
   --ion-color-tertiary-contrast-rgb: 255, 255, 255;
-  --ion-color-tertiary-shade: #2d1e2f;
-  --ion-color-tertiary-tint: #7e57ff;
+  --ion-color-tertiary-shade: #281a29;
+  --ion-color-tertiary-tint: #423544;
 
   /** success **/
   --ion-color-success: #10dc60;
@@ -95,9 +96,124 @@
   --ion-color-light-shade: #d7d8da;
   --ion-color-light-tint: #f5f6f9;
 
-  /** **/
+  /** Gradient grey **/
+  --ion-color-gradgrey: linear-gradient(to bottom, #ffffff, #fbfbfb, #f6f6f6, #f2f2f2, #eeeeee);
+  --ion-color-gradgrey-rgb: 255, 255, 255;
+  --ion-color-gradgrey-contrast: #000000;
+  --ion-color-gradgrey-contrast-rgb: 0, 0, 0;
+  --ion-color-gradgrey-shade: #e0e0e0;
+  --ion-color-gradgrey-tint: #ffffff;
+
+  /** FB **/
   --ion-color-fb: #3c5a99;
+  --ion-color-fb-rgb: 60, 90, 153;
+  --ion-color-fb-contrast: #ffffff;
+  --ion-color-fb-contrast-rgb: 255, 255, 255;
+  --ion-color-fb-shade: #354f87;
+  --ion-color-fb-tint: #506ba3;
+
+  /** G **/
   --ion-color-g: #cc3333;
+  --ion-color-g-rgb: 204, 51, 51;
+  --ion-color-g-contrast: #ffffff;
+  --ion-color-g-contrast-rgb: 255, 255, 255;
+  --ion-color-g-shade: #b42d2d;
+  --ion-color-g-tint: #d14747;
+
+  /** Blue **/
+  --ion-color-blue: #3880ff;
+  --ion-color-blue-rgb: 56,128,255;
+  --ion-color-blue-contrast: #ffffff;
+  --ion-color-blue-contrast-rgb: 255,255,255;
+  --ion-color-blue-shade: #3171e0;
+  --ion-color-blue-tint: #4c8dff;
+
+  /** Rose **/
+  --ion-color-rose: #ffceff;
+  --ion-color-rose-rgb: 255,206,255;
+  --ion-color-rose-contrast: #000000;
+  --ion-color-rose-contrast-rgb: 0,0,0;
+  --ion-color-rose-shade: #e0b5e0;
+  --ion-color-rose-tint: #ffd3ff;
+
+  /** Purple **/
+  --ion-color-purple: #c98ce3;
+  --ion-color-purple-rgb: 201,140,227;
+  --ion-color-purple-contrast: #ffffff;
+  --ion-color-purple-contrast-rgb: 0,0,0;
+  --ion-color-purple-shade: #b17bc8;
+  --ion-color-purple-tint: #ce98e6;
+
+  /** Orange **/
+  --ion-color-orange: #FFA500;
+  --ion-color-orange-rgb: 255,165,0;
+  --ion-color-orange-contrast: #ffffff;
+  --ion-color-orange-contrast-rgb: 0,0,0;
+  --ion-color-orange-shade: #e09100;
+  --ion-color-orange-tint: #ffae1a;
+
+  --ion-font-family: "Open Sans";
+}
+
+.ion-color-gradgrey {
+  --ion-color-base: var(--ion-color-gradgrey);
+  --ion-color-base-rgb: var(--ion-color-gradgrey-rgb);
+  --ion-color-contrast: var(--ion-color-gradgrey-contrast);
+  --ion-color-contrast-rgb: var(--ion-color-gradgrey-contrast-rgb);
+  --ion-color-shade: var(--ion-color-gradgrey-shade);
+  --ion-color-tint: var(--ion-color-gradgrey-tint);
+}
+
+.ion-color-fb {
+  --ion-color-base: var(--ion-color-fb);
+  --ion-color-base-rgb: var(--ion-color-fb-rgb);
+  --ion-color-contrast: var(--ion-color-fb-contrast);
+  --ion-color-contrast-rgb: var(--ion-color-fb-contrast-rgb);
+  --ion-color-shade: var(--ion-color-fb-shade);
+  --ion-color-tint: var(--ion-color-fb-tint);
+}
+
+.ion-color-g {
+  --ion-color-base: var(--ion-color-g);
+  --ion-color-base-rgb: var(--ion-color-g-rgb);
+  --ion-color-contrast: var(--ion-color-g-contrast);
+  --ion-color-contrast-rgb: var(--ion-color-g-contrast-rgb);
+  --ion-color-shade: var(--ion-color-g-shade);
+  --ion-color-tint: var(--ion-color-g-tint);
+}
+
+.ion-color-blue {
+  --ion-color-base: var(--ion-color-blue);
+  --ion-color-base-rgb: var(--ion-color-blue-rgb);
+  --ion-color-contrast: var(--ion-color-blue-contrast);
+  --ion-color-contrast-rgb: var(--ion-color-blue-contrast-rgb);
+  --ion-color-shade: var(--ion-color-blue-shade);
+  --ion-color-tint: var(--ion-color-blue-tint);
+}
+
+.ion-color-rose {
+  --ion-color-base: var(--ion-color-rose);
+  --ion-color-base-rgb: var(--ion-color-rose-rgb);
+  --ion-color-contrast: var(--ion-color-rose-contrast);
+  --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
+  --ion-color-shade: var(--ion-color-rose-shade);
+  --ion-color-tint: var(--ion-color-rose-tint);
+}
+
+.ion-color-purple {
+  --ion-color-base: var(--ion-color-purple);
+  --ion-color-base-rgb: var(--ion-color-purple-rgb);
+  --ion-color-contrast: var(--ion-color-purple-contrast);
+  --ion-color-contrast-rgb: var(--ion-color-purple-contrast-rgb);
+  --ion-color-shade: var(--ion-color-purple-shade);
+  --ion-color-tint: var(--ion-color-purple-tint);
+}
 
-  --ion-font-family: 'Open Sans';
+.ion-color-orange {
+  --ion-color-base: var(--ion-color-orange);
+  --ion-color-base-rgb: var(--ion-color-orange-rgb);
+  --ion-color-contrast: var(--ion-color-orange-contrast);
+  --ion-color-contrast-rgb: var(--ion-color-orange-contrast-rgb);
+  --ion-color-shade: var(--ion-color-orange-shade);
+  --ion-color-tint: var(--ion-color-orange-tint);
 }