Sync

config.xml

@@ -107,7 +107,6 @@
     </feature>
     <engine name="android" spec="^8.1.0" />
     <allow-navigation href="http://localhost:8101" sessionid="600eac0d" />
-    <allow-navigation href="http://localhost:8100" sessionid="bbeff116" />
     <plugin name="cordova-sqlite-storage" spec="^3.2.0" />
     <plugin name="cordova-plugin-advanced-http" spec="^2.1.1">
         <variable name="OKHTTP_VERSION" value="3.10.0" />
@@ -136,5 +135,4 @@
     </plugin>
     <plugin name="cordova-plugin-network-information" spec="~2.0.2" />
     <plugin name="cordova-plugin-qrscanner" spec="~3.0.1" />
-    <plugin name="cordova-plugin-camera" spec="~4.1.0" />
 </widget>

ionic.config.json

@@ -3,5 +3,6 @@
   "integrations": {
     "cordova": {}
   },
-  "type": "angular"
+  "type": "angular",
+  "id": "a6265c40"
 }

src/app/app-routing.module.ts

@@ -19,7 +19,9 @@ const routes: Routes = [
   },
   { path: 'login-help', loadChildren: './modals/login-help/login-help.module#LoginHelpPageModule' },
   { path: 'offres-carte-filters', loadChildren: './modals/offres-carte-filters/offres-carte-filters.module#OffresCarteFiltersPageModule' },
-  { path: 'create-account', loadChildren: './pages/compte/create/create.module#CreatePageModule' },
+  { path: 'create-account', loadChildren: './pages/compte/create/create.module#CreatePageModule' },
  { path: 'success', loadChildren: './modals/alerts/success/success.module#SuccessPageModule' },
+  { path: 'error', loadChildren: './modals/alerts/error/error.module#ErrorPageModule' },
+
 
 
 ];

src/app/app.module.ts

@@ -31,8 +31,10 @@ 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 { SuccessPageModule } from './modals/alerts/success/success.module';
 import { OffresCarteFiltersPageModule } from './modals/offres-carte-filters/offres-carte-filters.module';
 import { PipesModule } from './pipes/pipes.module';
+// import { ComponentsModule } from "./components/components.module";
 // import { AngularFireAuthModule } from '@angular/fire/auth';
 
 // import * as firebase from 'firebase';
@@ -53,8 +55,10 @@ import { PipesModule } from './pipes/pipes.module';
     HttpClientModule,
     LotsAGagnerFilterPageModule,
     LoginHelpPageModule,
+    SuccessPageModule,
     OffresCarteFiltersPageModule,
-    PipesModule
+    PipesModule,
+    // ComponentsModule
   ],
   providers: [
     StatusBar,

src/app/app.scss

@@ -73,10 +73,239 @@ ion-modal .modal-wrapper {
   border-radius: 10px !important;
 }
 
-ion-alert .alert-wrapper {
+ion-alert.alert-pulse .alert-wrapper {
   box-shadow: 0 0 0 rgba(249, 49, 41, 0.8);
   animation: pulse 2s infinite;
 }
+$white: #fcfcfc;
+$gray: #cbcdd3;
+$dark: #777777;
+$error: #ef8d9c;
+$orange: #ffc39e;
+$success: #b0db7d;
+$secondary: #99dbb4;
+
+@import url("https://fonts.googleapis.com/css?family=Lato:400,700");
+
+$font: "Lato", sans-serif;
+ion-modal.alert-success {
+  .modal-wrapper {
+    max-height: 50vh !important;
+    position: absolute;
+    // width: 35%;
+    // height: 100%;
+    background: linear-gradient(to bottom right, $success 40%, $secondary 100%);
+    border-radius: 20px;
+    // box-shadow: 5px 5px 20px rgba($gray, 10%);
+    perspective: 40px;
+
+    .alert-message {
+      max-height: auto !important;
+    }
+
+    h1 {
+      font-size: 0.9em;
+      font-weight: 100;
+      letter-spacing: 3px;
+      padding-top: 5px;
+      color: $white;
+      padding-bottom: 5px;
+      text-transform: uppercase;
+    }
+
+    .green {
+      color: darken($secondary, 20%);
+    }
+
+    .alert {
+      font-weight: 700;
+      letter-spacing: 5px;
+    }
+
+    p {
+      font-size: 0.8em;
+      font-weight: 100;
+      color: darken($dark, 10%);
+      letter-spacing: 1px;
+      text-align: center;
+    }
+
+    button,
+    .dot {
+      cursor: pointer;
+    }
+
+    .dot {
+      width: 24px;
+      height: 24px;
+      background: $white;
+      border-radius: 50%;
+      position: absolute;
+      top: 4%;
+      right: 4%;
+      &:hover {
+        background: darken($white, 20%);
+      }
+    }
+
+    .face {
+      position: absolute;
+      width: 4rem;
+      height: 4rem;
+      background: $white;
+      border-radius: 50%;
+      border: 1px solid $dark;
+      top: 3rem;
+      left: calc(50% - 2rem);
+      z-index: 2;
+      animation: bounce 1s ease-in infinite;
+    }
+
+    .eye {
+      position: absolute;
+      width: 5px;
+      height: 5px;
+      background: $dark;
+      border-radius: 50%;
+      top: 40%;
+      left: 20%;
+    }
+
+    .right {
+      left: 68%;
+    }
+
+    .mouth {
+      position: absolute;
+      top: 43%;
+      left: 41%;
+      width: 7px;
+      height: 7px;
+      border-radius: 50%;
+    }
+
+    .happy {
+      border: 2px solid;
+      border-color: transparent $dark $dark transparent;
+      transform: rotate(45deg);
+    }
+
+    .sad {
+      top: 49%;
+      border: 2px solid;
+      border-color: $dark transparent transparent $dark;
+      transform: rotate(45deg);
+    }
+
+    .shadow {
+      position: absolute;
+      width: 4.5rem;
+      height: 1.5rem;
+      opacity: 0.5;
+      background: $dark;
+      left: 40%;
+      top: 6.5rem;
+      border-radius: 50%;
+      z-index: 1;
+    }
+
+    .scale {
+      animation: scale 1s ease-in infinite;
+    }
+    .move {
+      animation: move 3s ease-in-out infinite;
+    }
+
+    .message {
+      // position: absolute;
+      width: 100%;
+      text-align: center;
+      // height: 40%;
+      margin-top: 7rem;
+      padding: 1rem;
+    }
+
+    ion-button button{
+      // position: absolute;
+      background: $white;
+      // width: 50%;
+      height: 15%;
+      border-radius: 20px;
+      // top: 73%;
+      // left: 25%;
+      outline: 0;
+      border: none;
+      box-shadow: 2px 2px 10px rgba($dark, 0.5);
+      transition: all 0.5s ease-in-out;
+      &:hover {
+        background: darken($white, 5%);
+        transform: scale(1.05);
+        transition: all 0.3s ease-in-out;
+      }
+    }
+  }
+}
+
+@keyframes bounce {
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+@keyframes scale {
+  50% {
+    transform: scale(0.9);
+  }
+}
+
+@keyframes roll {
+  0% {
+    transform: rotate(0deg);
+    left: 25%;
+  }
+  50% {
+    left: 60%;
+    transform: rotate(168deg);
+  }
+  100% {
+    transform: rotate(0deg);
+    left: 25%;
+  }
+}
+
+@keyframes move {
+  0% {
+    left: 25%;
+  }
+  50% {
+    left: 60%;
+  }
+  100% {
+    left: 25%;
+  }
+}
+
+footer {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  text-align: center;
+  font-size: 1em;
+  text-transform: uppercase;
+  padding: 10px;
+  font-family: $font;
+  p {
+    color: $error;
+    letter-spacing: 2px;
+  }
+  a {
+    color: $success;
+    text-decoration: none;
+    &:hover {
+      color: $orange;
+    }
+  }
+}
 
 @-webkit-keyframes pulse {
   0% {

src/app/components/alerts/success/success.component.html

+<p>
+  success works!
+</p>

src/app/components/alerts/success/success.component.spec.ts

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

src/app/components/alerts/success/success.component.ts

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

src/app/components/components.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+
+import { SuccessComponent } from "./alerts/success/success.component";
+
+@NgModule({
+  declarations: [
+    SuccessComponent
+  ],
+  imports: [
+    IonicModule,
+    CommonModule
+  ],
+  exports: [
+    SuccessComponent
+  ],
+  entryComponents: []
+})
+export class ComponentsModule { }

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

src/app/modals/alerts/error/error.page.html

+<ion-header>
+  <ion-toolbar>
+    <ion-title>error</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+
+</ion-content>

src/app/modals/alerts/error/error.page.spec.ts

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

src/app/modals/alerts/error/error.page.ts

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

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

src/app/modals/alerts/success/success.page.html

+<div class="alert-success">
+  <div class="face">
+    <div class="eye"></div>
+    <div class="eye right"></div>
+    <div class="mouth happy"></div>
+  </div>
+  <div class="shadow scale"></div>
+  <div class="message">
+    <h1 class="alert">{{ title }}</h1>
+    <p>{{ message }}</p>
+  </div>
+</div>
+<ion-footer class="ion-text-right">
+  <ion-button color="light" class="ion-margin-horizontal" (click)="modalController.dismiss();">{{ button }}</ion-button>
+</ion-footer>
\ No newline at end of file

src/app/modals/alerts/success/success.page.spec.ts

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

src/app/modals/alerts/success/success.page.ts

+import { Component, OnInit } from '@angular/core';
+import { NavParams, ModalController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-success',
+  templateUrl: './success.page.html',
+  styleUrls: ['./success.page.scss'],
+})
+export class SuccessPage implements OnInit {
+
+  public title = '';
+  public message = '';
+  public button = '';
+
+  constructor(
+    public navParams: NavParams,
+    public modalController: ModalController
+  ) {
+    this.title = navParams.get('title');
+    this.message = navParams.get('message');
+    this.button = navParams.get('button');
+  }
+
+  ngOnInit() {
+  }
+
+}

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

@@ -6,6 +6,7 @@ import { Routes, RouterModule } from '@angular/router';
 import { IonicModule } from '@ionic/angular';
 
 import { LoginPage } from './login.page';
+import { ComponentsModule } from "../../../components/components.module";
 
 const routes: Routes = [
   {
@@ -19,6 +20,7 @@ const routes: Routes = [
     CommonModule,
     FormsModule,
     IonicModule,
+    ComponentsModule,
     ReactiveFormsModule,
     RouterModule.forChild(routes)
   ],

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

@@ -72,5 +72,14 @@
         </ion-button>
       </ion-col>
     </ion-row>
+    <ion-row>
+      <ion-col class="ion-no-padding ion-text-start">
+        <ion-button color="dark" class="btn-g ion-no-margin" (click)="presentSuccessModal()">
+          <ion-icon name="walk"></ion-icon>
+          Anonyme
+        </ion-button>
+      </ion-col>
+    </ion-row>
   </ion-grid>
+  <app-alert-success></app-alert-success>
 </ion-content>
\ No newline at end of file

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

@@ -67,6 +67,10 @@ export class LoginPage implements OnInit {
         return await modal.present();
     }
 
+    async presentSuccessModal() {
+        this._ALLO.presentSuccessModal('Good', 'Lorem is better than any other methods of...');
+    }
+
     doAnonymousLogIn() {
         this.ga.trackEvent('Login', 'Tapped button', 'Anonymous login');
         this._AUTH.isAnonymous = true;
@@ -163,4 +167,8 @@ export class LoginPage implements OnInit {
         //         this._ALLO.dismissLoading();
         //     });
     }
+
+    openAlert() {
+        this._ALLO.presentAlert('', '<div class="face">          <div class="eye"></div>          <div class="eye right"></div>          <div class="mouth happy"></div>        </div>        <div class="shadow scale"></div>        <div class="message"><h1 class="alert">Succès!</h1><p>yay, everything is working. yay, everything is working. yay, everything is working. yay, everything is working. yay, everything is working. yay, everything is working. yay, everything is working. yay, everything is working. yay, everything is working.</p></div>', 'alert-success');
+    }
 }

src/app/services/allo-service.ts

 import { LoadingController, AlertController, ToastController } from '@ionic/angular';
 import { Injectable } from '@angular/core';
 import { Storage } from '@ionic/storage';
+import { ModalController } from '@ionic/angular';
+import { SuccessPage } from '../modals/alerts/success/success.page';
 
 @Injectable({ providedIn: 'root' })
 export class AlloService {
@@ -19,6 +21,7 @@ export class AlloService {
         private alertCtrl: AlertController,
         private loadingCtrl: LoadingController,
         private toastCtrl: ToastController,
+        private modalCtrl: ModalController,
         private _STOR: Storage
     ) {
         this.setDefaultParams();
@@ -81,10 +84,11 @@ export class AlloService {
         }
     }
 
-    async presentAlert(title, message) {
+    async presentAlert(title, message, classes?: string) {
         const alert = await this.alertCtrl.create({
             header: title,
             message: message,
+            cssClass: classes,
             buttons: ['OK']
         });
 
@@ -142,4 +146,20 @@ export class AlloService {
         });
         toast.present();
     }
+
+    /**
+     * Modals
+     */
+    async presentSuccessModal(title: string, message: string, buttonText?: string) {
+        const modal = await this.modalCtrl.create({
+            component: SuccessPage,
+            cssClass: 'alert-success',
+            componentProps: {
+              title: title,
+              message: message,
+              button: buttonText ? buttonText : 'OK'
+            }
+        });
+        return await modal.present();
+    }
 }