error alerts on wrong login

src/app/app.module.ts

@@ -18,7 +18,7 @@ import { MySenseBoxPage } from '../pages/my-sense-box/my-sense-box';
 import { LoginProvider } from '../providers/LoginProvider/LoginProvider';
 import { SensorsPage } from '../pages/sensors/sensors';
 import { ConfigurationPage } from '../pages/configuration/configuration';
-
+import {ErrorPage} from "../pages/error/error"
 // For AoT compilation (production builds) we need to have a factory for the loader of translation files.
 // @TODO: we possibly could optimize this by using a static loader in combination with webpack:
 // https://github.com/ngx-translate/http-loader#angular-cliwebpack-translateloader-example
@@ -33,7 +33,8 @@ export function createTranslateLoader(http: HttpClient) {
     SensorDetailPage,
     MySenseBoxPage,
     SensorsPage,
-    ConfigurationPage
+    ConfigurationPage,
+    ErrorPage
   ],
   imports: [
     HttpClientModule,
@@ -56,7 +57,9 @@ export function createTranslateLoader(http: HttpClient) {
     SensorDetailPage,
     MySenseBoxPage,
     SensorsPage,
-    ConfigurationPage
+    ConfigurationPage,
+    ErrorPage
+
   ],
   providers: [
     StatusBar,

src/pages/error/error.html

@@ -0,0 +1,35 @@
+<!--
+  Generated template for the ErrorPage page.
+
+  See http://ionicframework.com/docs/components/#navigation for more info on
+  Ionic pages and navigation.
+-->
+<ion-header>
+
+  <ion-navbar>
+    <ion-title> Error ({{error.message}})</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
+<ion-content padding>
+  <ion-grid>
+    <ion-row>
+      There was an error when trying to login. The error code is:<code>{{error.message}}</code>.
+    </ion-row>
+    <ion-row>
+      <p>      {{errorMessages[error.message]}}      </p>
+    </ion-row>
+    <ion-row>
+      <ion-col col-8>
+      </ion-col>
+      <ion-col col-4>
+        <ion-item>
+          <button full ion-button (click)="dismissModal()" color="secondary">
+            Okay
+          </button>
+        </ion-item>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+</ion-content>

src/pages/error/error.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+import { ErrorPage } from './error';
+
+@NgModule({
+  declarations: [
+    ErrorPage,
+  ],
+  imports: [
+    IonicPageModule.forChild(ErrorPage),
+  ],
+})
+export class ErrorPageModule {}

src/pages/error/error.scss

@@ -0,0 +1,3 @@
+page-error {
+
+}

src/pages/error/error.ts

@@ -0,0 +1,33 @@
+import { Component } from '@angular/core';
+import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';
+
+/**
+ * Generated class for the ErrorPage page.
+ *
+ * See https://ionicframework.com/docs/components/#navigation for more info on
+ * Ionic pages and navigation.
+ */
+
+@IonicPage()
+@Component({
+  selector: 'page-error',
+  templateUrl: 'error.html',
+})
+export class ErrorPage {
+  public error = this.navParams.data
+  public errorMessages = {
+    403:"Please check your username and password and try again! ",
+    500:"There seems to be no connection to the OSeM"
+  }
+
+  constructor(public navCtrl: NavController, public navParams: NavParams,public view: ViewController) {
+  }
+  dismissModal(){
+    this.view.dismiss();
+  }
+  ionViewDidLoad() {
+    console.log('ionViewDidLoad ErrorPage');
+    console.log(this.navParams)
+  }
+
+}

src/pages/login/login.ts

@@ -1,7 +1,8 @@
 import { Component } from '@angular/core';
-import { IonicPage, NavController, NavParams, LoadingController } from 'ionic-angular';
+import { IonicPage, NavController, NavParams, LoadingController, ModalController } from 'ionic-angular';
 import { MySenseBoxPage } from "../my-sense-box/my-sense-box"
 import { LoginProvider } from "../../providers/LoginProvider/LoginProvider"
+import { ErrorPage } from '../error/error';
 
 /**
  * Generated class for the LoginPage page.
@@ -21,13 +22,15 @@ export class LoginPage {
   private token: string
   private boxes: Object;
   public loading = false;
+  public error = false;
   public errorInput = false;
 
   constructor(
     public navCtrl: NavController,
     public navParams: NavParams,
     private loginProvider: LoginProvider,
-    public loadingController: LoadingController
+    public loadingController: LoadingController,
+    public modalCtrl : ModalController
   ) {
   }
 
@@ -49,18 +52,29 @@ export class LoginPage {
       try {
         this.token = await this.loginProvider.login(form.value.email, form.value.password)
         this.boxes = await this.loginProvider.getUserBoxes(this.token);
+        this.navCtrl.push(MySenseBoxPage, [this.boxes, this.token]);
+
       }
       catch (err) {
-        console.log(err.message)
+        console.log(err)
+        this.showModal(err);
       }
      loading.dismiss();
-     this.navCtrl.push(MySenseBoxPage, [this.boxes, this.token]);
     }
     else {
       this.errorInput = true;
     }
   }
 
+  showModal(message){
+    let modal = this.modalCtrl.create(ErrorPage,message);
+
+    modal.onDidDismiss(()=>{
+
+    })
+
+    modal.present();
+  }
   ionViewDidLoad() {
     console.log('ionViewDidLoad LoginPage');
 

src/providers/LoginProvider/LoginProvider.ts

@@ -19,21 +19,11 @@ export class LoginProvider {
       .pipe(timeout(30000))
       .toPromise()
       .catch(err => {
-        let msg = err.message
+        console.log(err);
+        let msg = err.status
         if (err.name === 'TimeoutError')
           msg = 'unable to contact api. are you online?'
 
-        try {
-          // attempt to extract the compilation error message and clean it up
-          console.error(err)
-          msg = JSON.parse(err.error.message)
-          if (msg.process) {
-            msg = `compilation error: ${msg.process.substr(msg.process.indexOf(' '))}`
-            msg = msg.substr(0, msg.indexOf('^'))
-          }
-        } catch (err2) {
-          console.error(err2)
-        }
         throw Error(msg)
       })
       // download the resulting sketch binary