login provider and post request to api for login

src/app/app.module.ts

@@ -15,6 +15,7 @@ import { StorageProvider } from '../providers/storage/storage';
 import { AddItemPage } from '../pages/add-item/add-item';
 import { SensorDetailPage } from '../pages/sensor-detail/sensor-detail';
 import { MySenseBoxPage } from '../pages/my-sense-box/my-sense-box';
+import { LoginProvider } from '../providers/LoginProvider/LoginProvider';
 
 // 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:
@@ -58,6 +59,7 @@ export function createTranslateLoader(http: HttpClient) {
     {provide: ErrorHandler, useClass: IonicErrorHandler},
     LoggingProvider,
     StorageProvider,
+    LoginProvider
   ]
 })
 export class AppModule {}

src/pages/login/login.html

@@ -14,33 +14,37 @@
   </ion-grid>
   <ng-template late #nonloading>
     <ion-card>
-      <ion-grid>
-        <ion-row>
-          <ion-item>
-            <ion-label>
-              <ion-icon name="person"></ion-icon>
-            </ion-label>
-            <ion-input placeholder="userName" [(ngModel)]="userName"></ion-input>
-          </ion-item>
-        </ion-row>
-        <ion-row>
-          <ion-item>
-            <ion-label>
-              <ion-icon name="lock"></ion-icon>
-            </ion-label>
-            <ion-input placeholder="Password" [(ngModel)]="password"></ion-input>
-          </ion-item>
-        </ion-row>
-        <ion-row>
-          <ion-col col-8>
-          </ion-col>
-          <ion-col col-4>
+      <form #form="ngForm" (ngSubmit)="submitLogin(form)">
+        <ion-grid>
+          <ion-row>
             <ion-item>
-              <button full ion-button color="secondary" (click)="submitLogin()"><ion-icon name="send"></ion-icon>Login</button>
+              <ion-label>
+                <ion-icon name="person"></ion-icon>
+              </ion-label>
+              <ion-input placeholder="email" name="email" type="email" ngModel required></ion-input>
             </ion-item>
-          </ion-col>
-        </ion-row>
-      </ion-grid>
+          </ion-row>
+          <ion-row>
+            <ion-item>
+              <ion-label>
+                <ion-icon name="lock"></ion-icon>
+              </ion-label>
+              <ion-input name="password" type="password" placeholder="Password" ngModel required></ion-input>
+            </ion-item>
+          </ion-row>
+          <ion-row>
+            <ion-col col-8>
+            </ion-col>
+            <ion-col col-4>
+              <ion-item>
+                <button full ion-button type="submit" color="secondary">
+                  <ion-icon name="send"></ion-icon>Login
+                </button>
+              </ion-item>
+            </ion-col>
+          </ion-row>
+        </ion-grid>
+      </form>
     </ion-card>
   </ng-template>
 </ion-content>

src/pages/login/login.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { IonicPage, NavController, NavParams } from 'ionic-angular';
 import {MySenseBoxPage} from "../my-sense-box/my-sense-box"
+import { LoginProvider } from "../../providers/LoginProvider/LoginProvider"
 /**
  * Generated class for the LoginPage page.
  *
@@ -13,17 +14,28 @@ import {MySenseBoxPage} from "../my-sense-box/my-sense-box"
   selector: 'page-login',
   templateUrl: 'login.html',
 })
-export class LoginPage {
+export class LoginPage  {
   userName: string;
   password: string;
+  private token:string
+  private user:ArrayBuffer=undefined;
   public loading=false;
-  constructor(public navCtrl: NavController, public navParams: NavParams) {
+  constructor(
+    public navCtrl: NavController,
+    public navParams: NavParams,
+    private loginProvider: LoginProvider
+     ) {
   }
 
-  submitLogin(){
-    this.loading = true;
-    // make api call to login with the credentials 
-    this.navCtrl.push(MySenseBoxPage)
+  private async submitLogin(form){
+    try {
+      this.token = await this.loginProvider.login("e_thie10@uni-muenster.de","Qxpxtexb1")
+      this.user = await this.loginProvider.getUser(this.token);
+    }
+    catch(err){
+      console.log(err.message)
+    }
+    this.navCtrl.push(MySenseBoxPage,this.user);
   }
 
   ionViewDidLoad() {

src/pages/my-sense-box/my-sense-box.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { IonicPage, NavController, NavParams } from 'ionic-angular';
-
+import {LoginProvider} from "../../providers/LoginProvider/LoginProvider";
 /**
  * Generated class for the MySenseBoxPage page.
  *
@@ -14,12 +14,16 @@ import { IonicPage, NavController, NavParams } from 'ionic-angular';
   templateUrl: 'my-sense-box.html',
 })
 export class MySenseBoxPage {
-
-  constructor(public navCtrl: NavController, public navParams: NavParams) {
+  token:string;
+  private user: ArrayBuffer=undefined;
+  constructor(public navCtrl: NavController,
+     public navParams: NavParams,
+     private loginProvider: LoginProvider
+     ) {
   }
 
   ionViewDidLoad() {
     console.log('ionViewDidLoad MySenseBoxPage');
-  }
+  console.log(this.navParams)  }
 
 }

src/providers/LoginProvider/LoginProvider.ts

@@ -0,0 +1,57 @@
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { timeout } from 'rxjs/operators'
+const URL_login = 'https://api.opensensemap.org/users/sign-in';
+const URL_user = 'https://api.opensensemap.org/users/me/boxes';
+
+// const URL = "http://compiler.snsbx.nroo.de"
+
+@Injectable()
+export class LoginProvider {
+
+  constructor(public http: HttpClient) { }
+
+  async login(username:string,password:string): Promise<string> {
+    const headers = new HttpHeaders({'Content-Type': 'application/json'} );
+    // send compilation request, returning a job ID
+    return this.http.post(`${URL_login}?email=`+username+`&password=`+password, { headers })
+      .pipe(timeout(30000))
+      .toPromise()
+      .catch(err => {
+        let msg = err.message
+        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
+      .then((response: any) => {
+        return response.token;  
+      });
+  };
+
+  async getUser(token:string):Promise<ArrayBuffer>{
+      const headers = new HttpHeaders({'Authorization':"Bearer "+token})
+      return this.http.get(URL_user,{headers})
+                .pipe(timeout(30000))
+                .toPromise()
+                .catch(err=>{
+                    let msg = err.message;
+                    console.log(msg);
+                })
+                .then((response:any)=>{
+                    return response;
+                })
+  }
+}