Process of making channel work

.sourcemaps/0.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/pages/channel/channel.module.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAyC;AACO;AACR;AAUxC;IAAA;IAAgC,CAAC;IAApB,iBAAiB;QAR7B,uEAAQ,CAAC;YACR,YAAY,EAAE;gBACZ,6DAAW;aACZ;YACD,OAAO,EAAE;gBACP,sEAAe,CAAC,QAAQ,CAAC,6DAAW,CAAC;aACtC;SACF,CAAC;OACW,iBAAiB,CAAG;IAAD,wBAAC;CAAA;AAAH","file":"0.js","sourcesContent":["import { NgModule } from '@angular/core';\nimport { IonicPageModule } from 'ionic-angular';\nimport { ChannelPage } from './channel';\n\n@NgModule({\n  declarations: [\n    ChannelPage,\n  ],\n  imports: [\n    IonicPageModule.forChild(ChannelPage),\n  ],\n})\nexport class ChannelPageModule {}\n\n\n\n// WEBPACK FOOTER //\n// ./src/pages/channel/channel.module.ts"],"sourceRoot":""}

src/app/app.html

@@ -1,7 +1,13 @@
+
+
+
+
+
+
 <ion-menu [content]="content">
   <ion-header>
     <ion-toolbar>
-      <ion-title>Menu</ion-title>
+      <ion-title>Zip-Slack</ion-title>
     </ion-toolbar>
   </ion-header>
 
@@ -11,9 +17,16 @@
         {{p.title}}
       </button>
     </ion-list>
+
+
+
+
   </ion-content>
 
 </ion-menu>
 
 <!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
-<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
+<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
+
+
+

src/app/app.module.ts

@@ -9,6 +9,11 @@ import { ChannelPage } from '../pages/channel/channel';
 
 import { StatusBar } from '@ionic-native/status-bar';
 import { SplashScreen } from '@ionic-native/splash-screen';
+import { UserProvider } from '../providers/user/user';
+import { HttpClientModule } from '@angular/common/http';
+import { HttpModule } from '@angular/http';
+import { MessageProvider } from '../providers/message/message';
+
 
 @NgModule({
   declarations: [
@@ -20,6 +25,9 @@ import { SplashScreen } from '@ionic-native/splash-screen';
   imports: [
     BrowserModule,
     IonicModule.forRoot(MyApp),
+    HttpClientModule,
+    HttpModule
+  
   ],
   bootstrap: [IonicApp],
   entryComponents: [
@@ -31,7 +39,9 @@ import { SplashScreen } from '@ionic-native/splash-screen';
   providers: [
     StatusBar,
     SplashScreen,
-    {provide: ErrorHandler, useClass: IonicErrorHandler}
+    {provide: ErrorHandler, useClass: IonicErrorHandler},
+    UserProvider,
+    MessageProvider
   ]
 })
 export class AppModule {}

src/pages/channel/channel.html

@@ -1,18 +1,60 @@
-<!--
-  Generated template for the ChannelPage page.
 
-  See http://ionicframework.com/docs/components/#navigation for more info on
-  Ionic pages and navigation.
--->
+
+
+<!-- <ion-buttons start>
+
+  <button ion-button icon-only menuToggle>
+
+    <ion-icon name="menu"></ion-icon>
+
+  </button>
+
+</ion-buttons> -->
+
+
+
 <ion-header>
 
   <ion-navbar>
-    <ion-title>channel</ion-title>
+    <ion-title>Channel</ion-title>
+
+    <ion-buttons start>
+
+        <button ion-button icon-only menuToggle>
+      
+          <ion-icon name="menu"></ion-icon>
+      
+        </button>
+      
+      </ion-buttons>
   </ion-navbar>
 
 </ion-header>
 
 
+
 <ion-content padding>
 
-</ion-content>
+    <ion-list padding>
+      <ion-item-sliding *ngFor="let message of messages">
+        <ion-item>{{message.message}}</ion-item>
+    
+        <ion-item-options side="right">
+   
+            <button ion-button>
+                <ion-icon name="settings"></ion-icon>
+              </button>
+   
+            <!-- <button color="danger" ion-button (click)="deleteMessage(todo.id)">
+              <ion-icon name="trash"></ion-icon>
+            </button> -->
+   
+        </ion-item-options>
+      </ion-item-sliding>
+      
+      <!-- <ion-item>Todo 2</ion-item>
+      <ion-item>Todo 3</ion-item> -->
+    </ion-list>
+   
+   </ion-content>
+

src/pages/channel/channel.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { IonicPage, NavController, NavParams } from 'ionic-angular';
+import { MessageProvider } from '../../providers/message/message';
 
 /**
  * Generated class for the ChannelPage page.
@@ -15,11 +16,55 @@ import { IonicPage, NavController, NavParams } from 'ionic-angular';
 })
 export class ChannelPage {
 
-  constructor(public navCtrl: NavController, public navParams: NavParams) {
+
+  public messages=[
+    {
+      message: "Hello"
+    },
+    {
+      message: "sup"
+    }
+  ]
+
+  constructor(public navCtrl: NavController, public navParams: NavParams, 
+    private messageProvider: MessageProvider) {
+
+      this.getMessages();
+      
+
   }
 
   ionViewDidLoad() {
     console.log('ionViewDidLoad ChannelPage');
   }
 
+
+
+
+  getMessages(){
+    this.messageProvider.get(1, after => {
+      this.messages = after;
+    });
+  }
+ 
+  deleteMessage(messageId: number){
+    this.messageProvider.delete(messageId, after =>{
+      this.getMessages();
+    });
+  }
+
+
+
+
+
+
+
+
+
+
+
 }
+
+
+
+

src/pages/home/home.html

@@ -1,7 +1,8 @@
 <ion-header>
-
 </ion-header>
 
+
+
 <ion-content text-center class = "login">
 
   <br><br><br><br><br>
@@ -9,24 +10,39 @@
 
   <br><br><br><br>
   
+
+
+  <form [formGroup]="formgroup" (ngSubmit)="sendLogin(formgroup.value)">
+
 <ion-list>
 
   <ion-item text-center>
 
+
     <ion-label fixed>Username</ion-label>
-    <ion-input type="text" value=""></ion-input>
+    <ion-input type="text" formControlName="username"></ion-input>
+  </ion-item>
+
+  <ion-item text-center *ngIf="username.hasError('required') && username.touched">
+    <p> *Please enter your username</p>
   </ion-item>
 
   <ion-item text-center>
     <ion-label fixed>Password</ion-label>
-    <ion-input type="password"></ion-input>
+    <ion-input type="password" formControlName="password"></ion-input>
   </ion-item>
 
+  <ion-item text-center *ngIf="password.hasError('required') && password.touched">
+      <p> *Please enter your password</p>
+    </ion-item>
+
+
 </ion-list>
 
 
 
-<button ion-button color="danger" round (click)="login()">Login</button>
+
+<button ion-button color="danger" round type="submit">Login</button>
 
 <!-- line break -->
 <br>
@@ -34,10 +50,26 @@
 <button ion-button color="danger" round>Sign Up</button>
 
 
+</form>
+
+
+  <!-- <form [formGroup]="loginform" (ngSubmit)="sendLogin(loginForm.value)" *ngIf="loginForm">
+
+    <ion-label fixed>Username</ion-label>
+    <input type="text" name="name" formControlName="username">
+
+    <ion-label fixed>Password</ion-label>
+    <input type="text" name="name" formControlName="password">
+
+    <input type="submit" class="cta-btn filled" value="Submit" [disabled]="!loginForm.valid">
+   </form> -->
+
+
 
 
 
   <!-- Toggle menu button -->
-  <!-- <br>
-  <button ion-button secondary menuToggle>Toggle Menu</button>  -->
+  <!-- <br> -->
+  <button ion-button secondary menuToggle>Toggle Menu</button> 
+  
 </ion-content>

src/pages/home/home.ts

@@ -1,6 +1,9 @@
 import { Component } from '@angular/core';
 import { NavController } from 'ionic-angular';
 import { ChannelPage } from '../channel/channel';
+import { FormGroup, FormBuilder, Validators, AbstractControl } from '@angular/forms';
+import { UserProvider } from '../../providers/user/user';
+import { MessageProvider } from '../../providers/message/message';
 
 
 
@@ -11,18 +14,49 @@ import { ChannelPage } from '../channel/channel';
 
 export class HomePage {
 
-  constructor(public navCtrl: NavController) {
+
+  formgroup: FormGroup;
+
+  username: AbstractControl;
+  password: AbstractControl;
+
+  constructor(public navCtrl: NavController, private formbuilder: FormBuilder, private userprovider: UserProvider) {
+
+    this.formgroup=this.formbuilder.group(
+      
+      {username : ['',Validators.required],
+      password : ['', Validators.required]
+    });
+
+    this.username=this.formgroup.controls['username'];
+    this.password=this.formgroup.controls['password'];
 
   }
 
   login() {
-    this.navCtrl.push(ChannelPage);
+    this.navCtrl.setRoot(ChannelPage);
     
   }
 
+  sendLogin(loginForm) {
+    this.userprovider.login(loginForm.username, loginForm.password, result =>{
+      if(result.status == 200){
+        console.log("Success!");
+        this.userprovider.setToken(result.headers.get("authorization"));
+        console.log(this.userprovider.getToken());
+        this.navCtrl.setRoot(ChannelPage);
 
 
+      } else {
+        console.log("invalid login attempt");
+      }
+    });
+  }
+
 
+  setLoginForm() {
+
+  }
 
 
 

src/providers/message/message.ts

@@ -0,0 +1,91 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Http, RequestOptions, Headers, Response } from '@angular/http';
+import { UserProvider } from '../user/user';
+
+/*
+  Generated class for the MessageProvider provider.
+
+  See https://angular.io/guide/dependency-injection for more info on providers
+  and Angular DI.
+*/
+@Injectable()
+export class MessageProvider {
+
+  constructor(public http: Http, public userProvider: UserProvider) {
+    console.log('Hello MessageProvider Provider');
+  }
+
+
+
+
+
+  getAll(){
+    var url: string = "http://localhost:8080/get_messages";
+    var header = new Headers({
+      'Authorization': this.userProvider.getToken()
+    })
+    let options = new RequestOptions({headers: header})
+    this.http.get(url, options).subscribe( (result : Response) => {
+      console.log(result);
+    })
+  }
+ 
+  post(channelId: number, message: string, callback){
+    var url: string = "http://localhost:8080/post";
+    var header = new Headers({
+      'Authorization': this.userProvider.getToken(),
+      'Content-Type': 'application/json'
+      
+    });
+    let options = new RequestOptions({headers: header});
+ 
+    var body = {
+      "channelId": channelId,
+      "message": message
+    };
+ 
+    this.http.post(url, body,options).subscribe( (result : Response) => {
+      console.log(result);
+      this.get(channelId, after => {
+        callback();
+      })
+    })
+  }
+ 
+  get(channelId: number, callback){
+    var url: string = "http://localhost:8080/messages?channelid=" + channelId ;
+    var header = new Headers({
+      'Authorization': this.userProvider.getToken(),
+      'Content-Type': 'application/json'
+      
+    });
+    let options = new RequestOptions({headers: header});
+ 
+    this.http.get(url,options).subscribe(result =>{
+      console.log(result);
+      callback(result);
+    })
+  }
+ 
+  delete(messageId: number, callback){
+    var url: string = "http://localhost:8080/delete?messageId=" +messageId;
+    
+    var header = new Headers({
+      'Authorization': this.userProvider.getToken(),
+      'Content-Type': 'application/json'
+      
+    });
+ 
+    let options = new RequestOptions({headers: header});
+ 
+    this.http.delete(url,options).subscribe(result => {
+      console.log(result);
+      callback();
+    })
+  }
+
+
+
+
+}

src/providers/user/user.ts

@@ -0,0 +1,49 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Http, Headers, RequestOptions } from '@angular/http';
+
+/*
+  Generated class for the UserProvider provider.
+
+  See https://angular.io/guide/dependency-injection for more info on providers
+  and Angular DI.
+*/
+@Injectable()
+export class UserProvider {
+
+  constructor(public http: Http) {
+    console.log('Hello UserProvider Provider');
+  }
+
+
+
+  private token: string;
+
+  getToken(){return this.token}
+
+  setToken(token: string){this.token = token}
+
+  
+
+  login(username, password, callback){
+   
+    var url: string = "http://localhost:8080/login";
+ 
+    var header = new Headers({
+      'content-type': 'application/json',
+    })
+ 
+    let options = new RequestOptions({headers: header})
+ 
+    var body = {
+      "username": username,
+      "password": password
+    };
+ 
+    this.http.post(url,body, options).subscribe( result => {
+      callback(result);
+      //console.log(result.headers.get("authorization"));
+    })
+  }
+
+}

www/build/0.js

@@ -1,6 +1,6 @@
 webpackJsonp([0],{
 
-/***/ 270:
+/***/ 279:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -8,7 +8,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ChannelPageModule", function() { return ChannelPageModule; });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core__ = __webpack_require__(0);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_ionic_angular__ = __webpack_require__(32);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__channel__ = __webpack_require__(99);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__channel__ = __webpack_require__(50);
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);

www/build/main.js

@@ -1,6 +1,6 @@
 webpackJsonp([1],{
 
-/***/ 109:
+/***/ 113:
 /***/ (function(module, exports) {
 
 function webpackEmptyAsyncContext(req) {
@@ -13,16 +13,16 @@ function webpackEmptyAsyncContext(req) {
 webpackEmptyAsyncContext.keys = function() { return []; };
 webpackEmptyAsyncContext.resolve = webpackEmptyAsyncContext;
 module.exports = webpackEmptyAsyncContext;
-webpackEmptyAsyncContext.id = 109;
+webpackEmptyAsyncContext.id = 113;
 
 /***/ }),
 
-/***/ 150:
+/***/ 155:
 /***/ (function(module, exports, __webpack_require__) {
 
 var map = {
 	"../pages/channel/channel.module": [
-		270,
+		279,
 		0
 	]
 };
@@ -37,19 +37,117 @@ function webpackAsyncContext(req) {
 webpackAsyncContext.keys = function webpackAsyncContextKeys() {
 	return Object.keys(map);
 };
-webpackAsyncContext.id = 150;
+webpackAsyncContext.id = 155;
 module.exports = webpackAsyncContext;
 
 /***/ }),
 
-/***/ 194:
+/***/ 156:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return MessageProvider; });
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core__ = __webpack_require__(0);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__angular_http__ = __webpack_require__(78);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__user_user__ = __webpack_require__(79);
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+
+
+
+/*
+  Generated class for the MessageProvider provider.
+
+  See https://angular.io/guide/dependency-injection for more info on providers
+  and Angular DI.
+*/
+var MessageProvider = /** @class */ (function () {
+    function MessageProvider(http, userProvider) {
+        this.http = http;
+        this.userProvider = userProvider;
+        console.log('Hello MessageProvider Provider');
+    }
+    MessageProvider.prototype.getAll = function () {
+        var url = "http://localhost:8080/get_messages";
+        var header = new __WEBPACK_IMPORTED_MODULE_1__angular_http__["a" /* Headers */]({
+            'Authorization': this.userProvider.getToken()
+        });
+        var options = new __WEBPACK_IMPORTED_MODULE_1__angular_http__["d" /* RequestOptions */]({ headers: header });
+        this.http.get(url, options).subscribe(function (result) {
+            console.log(result);
+        });
+    };
+    MessageProvider.prototype.post = function (channelId, message, callback) {
+        var _this = this;
+        var url = "http://localhost:8080/post";
+        var header = new __WEBPACK_IMPORTED_MODULE_1__angular_http__["a" /* Headers */]({
+            'Authorization': this.userProvider.getToken(),
+            'Content-Type': 'application/json'
+        });
+        var options = new __WEBPACK_IMPORTED_MODULE_1__angular_http__["d" /* RequestOptions */]({ headers: header });
+        var body = {
+            "channelId": channelId,
+            "message": message
+        };
+        this.http.post(url, body, options).subscribe(function (result) {
+            console.log(result);
+            _this.get(channelId, function (after) {
+                callback();
+            });
+        });
+    };
+    MessageProvider.prototype.get = function (channelId, callback) {
+        var url = "http://localhost:8080/messages?channelid=" + channelId;
+        var header = new __WEBPACK_IMPORTED_MODULE_1__angular_http__["a" /* Headers */]({
+            'Authorization': this.userProvider.getToken(),
+            'Content-Type': 'application/json'
+        });
+        var options = new __WEBPACK_IMPORTED_MODULE_1__angular_http__["d" /* RequestOptions */]({ headers: header });
+        this.http.get(url, options).subscribe(function (result) {
+            console.log(result);
+            callback(result);
+        });
+    };
+    MessageProvider.prototype.delete = function (messageId, callback) {
+        var url = "http://localhost:8080/delete?messageId=" + messageId;
+        var header = new __WEBPACK_IMPORTED_MODULE_1__angular_http__["a" /* Headers */]({
+            'Authorization': this.userProvider.getToken(),
+            'Content-Type': 'application/json'
+        });
+        var options = new __WEBPACK_IMPORTED_MODULE_1__angular_http__["d" /* RequestOptions */]({ headers: header });
+        this.http.delete(url, options).subscribe(function (result) {
+            console.log(result);
+            callback();
+        });
+    };
+    MessageProvider = __decorate([
+        Object(__WEBPACK_IMPORTED_MODULE_0__angular_core__["A" /* Injectable */])(),
+        __metadata("design:paramtypes", [__WEBPACK_IMPORTED_MODULE_1__angular_http__["b" /* Http */], __WEBPACK_IMPORTED_MODULE_2__user_user__["a" /* UserProvider */]])
+    ], MessageProvider);
+    return MessageProvider;
+}());
+
+//# sourceMappingURL=message.js.map
+
+/***/ }),
+
+/***/ 200:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return HomePage; });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core__ = __webpack_require__(0);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_ionic_angular__ = __webpack_require__(32);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__channel_channel__ = __webpack_require__(99);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__channel_channel__ = __webpack_require__(50);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__angular_forms__ = __webpack_require__(15);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__providers_user_user__ = __webpack_require__(79);
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -62,28 +160,52 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 
 
 
+
+
 var HomePage = /** @class */ (function () {
-    function HomePage(navCtrl) {
+    function HomePage(navCtrl, formbuilder, userprovider) {
         this.navCtrl = navCtrl;
+        this.formbuilder = formbuilder;
+        this.userprovider = userprovider;
+        this.formgroup = this.formbuilder.group({ username: ['', __WEBPACK_IMPORTED_MODULE_3__angular_forms__["f" /* Validators */].required],
+            password: ['', __WEBPACK_IMPORTED_MODULE_3__angular_forms__["f" /* Validators */].required]
+        });
+        this.username = this.formgroup.controls['username'];
+        this.password = this.formgroup.controls['password'];
     }
     HomePage.prototype.login = function () {
-        this.navCtrl.push(__WEBPACK_IMPORTED_MODULE_2__channel_channel__["a" /* ChannelPage */]);
+        this.navCtrl.setRoot(__WEBPACK_IMPORTED_MODULE_2__channel_channel__["a" /* ChannelPage */]);
+    };
+    HomePage.prototype.sendLogin = function (loginForm) {
+        var _this = this;
+        this.userprovider.login(loginForm.username, loginForm.password, function (result) {
+            if (result.status == 200) {
+                console.log("Success!");
+                _this.userprovider.setToken(result.headers.get("authorization"));
+                console.log(_this.userprovider.getToken());
+                _this.navCtrl.setRoot(__WEBPACK_IMPORTED_MODULE_2__channel_channel__["a" /* ChannelPage */]);
+            }
+            else {
+                console.log("invalid login attempt");
+            }
+        });
+    };
+    HomePage.prototype.setLoginForm = function () {
     };
     HomePage = __decorate([
         Object(__WEBPACK_IMPORTED_MODULE_0__angular_core__["m" /* Component */])({
-            selector: 'page-home',template:/*ion-inline-start:"/Users/jaehoonp/zipteamUIv2/src/pages/home/home.html"*/'<ion-header>\n\n</ion-header>\n\n<ion-content text-center class = "login">\n\n  <br><br><br><br><br>\n  <img src="../assets/imgs/fullLogo.png" alt="SLACK" class="rounded-corners">\n\n  <br><br><br><br>\n  \n<ion-list>\n\n  <ion-item text-center>\n\n    <ion-label fixed>Username</ion-label>\n    <ion-input type="text" value=""></ion-input>\n  </ion-item>\n\n  <ion-item text-center>\n    <ion-label fixed>Password</ion-label>\n    <ion-input type="password"></ion-input>\n  </ion-item>\n\n</ion-list>\n\n\n\n<button ion-button color="danger" round (click)="login()">Login</button>\n\n<!-- line break -->\n<br>\n\n<button ion-button color="danger" round>Sign Up</button>\n\n\n\n\n\n  <!-- Toggle menu button -->\n  <!-- <br>\n  <button ion-button secondary menuToggle>Toggle Menu</button>  -->\n</ion-content>\n'/*ion-inline-end:"/Users/jaehoonp/zipteamUIv2/src/pages/home/home.html"*/
+            selector: 'page-home',template:/*ion-inline-start:"/Users/jaehoonp/ZipTeamPurple-FrontEnd/src/pages/home/home.html"*/'<ion-header>\n</ion-header>\n\n\n\n<ion-content text-center class = "login">\n\n  <br><br><br><br><br>\n  <img src="../assets/imgs/fullLogo.png" alt="SLACK" class="rounded-corners">\n\n  <br><br><br><br>\n  \n\n\n  <form [formGroup]="formgroup" (ngSubmit)="sendLogin(formgroup.value)">\n\n<ion-list>\n\n  <ion-item text-center>\n\n\n    <ion-label fixed>Username</ion-label>\n    <ion-input type="text" formControlName="username"></ion-input>\n  </ion-item>\n\n  <ion-item text-center *ngIf="username.hasError(\'required\') && username.touched">\n    <p> *Please enter your username</p>\n  </ion-item>\n\n  <ion-item text-center>\n    <ion-label fixed>Password</ion-label>\n    <ion-input type="password" formControlName="password"></ion-input>\n  </ion-item>\n\n  <ion-item text-center *ngIf="password.hasError(\'required\') && password.touched">\n      <p> *Please enter your password</p>\n    </ion-item>\n\n\n</ion-list>\n\n\n\n\n<button ion-button color="danger" round type="submit">Login</button>\n\n<!-- line break -->\n<br>\n\n<button ion-button color="danger" round>Sign Up</button>\n\n\n</form>\n\n\n  <!-- <form [formGroup]="loginform" (ngSubmit)="sendLogin(loginForm.value)" *ngIf="loginForm">\n\n    <ion-label fixed>Username</ion-label>\n    <input type="text" name="name" formControlName="username">\n\n    <ion-label fixed>Password</ion-label>\n    <input type="text" name="name" formControlName="password">\n\n    <input type="submit" class="cta-btn filled" value="Submit" [disabled]="!loginForm.valid">\n   </form> -->\n\n\n\n\n\n  <!-- Toggle menu button -->\n  <!-- <br> -->\n  <button ion-button secondary menuToggle>Toggle Menu</button> \n  \n</ion-content>\n'/*ion-inline-end:"/Users/jaehoonp/ZipTeamPurple-FrontEnd/src/pages/home/home.html"*/
         }),
-        __metadata("design:paramtypes", [typeof (_a = typeof __WEBPACK_IMPORTED_MODULE_1_ionic_angular__["f" /* NavController */] !== "undefined" && __WEBPACK_IMPORTED_MODULE_1_ionic_angular__["f" /* NavController */]) === "function" && _a || Object])
+        __metadata("design:paramtypes", [__WEBPACK_IMPORTED_MODULE_1_ionic_angular__["f" /* NavController */], __WEBPACK_IMPORTED_MODULE_3__angular_forms__["a" /* FormBuilder */], __WEBPACK_IMPORTED_MODULE_4__providers_user_user__["a" /* UserProvider */]])
     ], HomePage);
     return HomePage;
-    var _a;
 }());
 
 //# sourceMappingURL=home.js.map
 
 /***/ }),
 
-/***/ 195:
+/***/ 201:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -128,7 +250,7 @@ var ListPage = /** @class */ (function () {
     };
     ListPage = ListPage_1 = __decorate([
         Object(__WEBPACK_IMPORTED_MODULE_0__angular_core__["m" /* Component */])({
-            selector: 'page-list',template:/*ion-inline-start:"/Users/jaehoonp/zipteamUIv2/src/pages/list/list.html"*/'<ion-header>\n  <ion-navbar>\n    <button ion-button menuToggle>\n      <ion-icon name="menu"></ion-icon>\n    </button>\n    <ion-title>List</ion-title>\n  </ion-navbar>\n</ion-header>\n\n<ion-content>\n  <ion-list>\n    <button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">\n      <ion-icon [name]="item.icon" item-start></ion-icon>\n      {{item.title}}\n      <div class="item-note" item-end>\n        {{item.note}}\n      </div>\n    </button>\n  </ion-list>\n  <div *ngIf="selectedItem" padding>\n    You navigated here from <b>{{selectedItem.title}}</b>\n  </div>\n</ion-content>\n'/*ion-inline-end:"/Users/jaehoonp/zipteamUIv2/src/pages/list/list.html"*/
+            selector: 'page-list',template:/*ion-inline-start:"/Users/jaehoonp/ZipTeamPurple-FrontEnd/src/pages/list/list.html"*/'<ion-header>\n  <ion-navbar>\n    <button ion-button menuToggle>\n      <ion-icon name="menu"></ion-icon>\n    </button>\n    <ion-title>List</ion-title>\n  </ion-navbar>\n</ion-header>\n\n<ion-content>\n  <ion-list>\n    <button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">\n      <ion-icon [name]="item.icon" item-start></ion-icon>\n      {{item.title}}\n      <div class="item-note" item-end>\n        {{item.note}}\n      </div>\n    </button>\n  </ion-list>\n  <div *ngIf="selectedItem" padding>\n    You navigated here from <b>{{selectedItem.title}}</b>\n  </div>\n</ion-content>\n'/*ion-inline-end:"/Users/jaehoonp/ZipTeamPurple-FrontEnd/src/pages/list/list.html"*/
         }),
         __metadata("design:paramtypes", [__WEBPACK_IMPORTED_MODULE_1_ionic_angular__["f" /* NavController */], __WEBPACK_IMPORTED_MODULE_1_ionic_angular__["g" /* NavParams */]])
     ], ListPage);
@@ -140,13 +262,13 @@ var ListPage = /** @class */ (function () {
 
 /***/ }),
 
-/***/ 196:
+/***/ 202:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_platform_browser_dynamic__ = __webpack_require__(197);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__app_module__ = __webpack_require__(219);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_platform_browser_dynamic__ = __webpack_require__(203);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__app_module__ = __webpack_require__(223);
 
 
 Object(__WEBPACK_IMPORTED_MODULE_0__angular_platform_browser_dynamic__["a" /* platformBrowserDynamic */])().bootstrapModule(__WEBPACK_IMPORTED_MODULE_1__app_module__["a" /* AppModule */]);
@@ -154,20 +276,24 @@ Object(__WEBPACK_IMPORTED_MODULE_0__angular_platform_browser_dynamic__["a" /* pl
 
 /***/ }),
 
-/***/ 219:
+/***/ 223:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return AppModule; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_platform_browser__ = __webpack_require__(30);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_platform_browser__ = __webpack_require__(26);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__angular_core__ = __webpack_require__(0);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_ionic_angular__ = __webpack_require__(32);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__app_component__ = __webpack_require__(262);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__pages_home_home__ = __webpack_require__(194);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__pages_list_list__ = __webpack_require__(195);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__pages_channel_channel__ = __webpack_require__(99);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__ionic_native_status_bar__ = __webpack_require__(190);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__ionic_native_splash_screen__ = __webpack_require__(193);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__app_component__ = __webpack_require__(265);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__pages_home_home__ = __webpack_require__(200);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__pages_list_list__ = __webpack_require__(201);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__pages_channel_channel__ = __webpack_require__(50);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__ionic_native_status_bar__ = __webpack_require__(196);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__ionic_native_splash_screen__ = __webpack_require__(199);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__providers_user_user__ = __webpack_require__(79);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_10__angular_common_http__ = __webpack_require__(273);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_11__angular_http__ = __webpack_require__(78);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_12__providers_message_message__ = __webpack_require__(156);
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -183,6 +309,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 
 
 
+
+
+
+
 var AppModule = /** @class */ (function () {
     function AppModule() {
     }
@@ -201,6 +331,8 @@ var AppModule = /** @class */ (function () {
                         { loadChildren: '../pages/channel/channel.module#ChannelPageModule', name: 'ChannelPage', segment: 'channel', priority: 'low', defaultHistory: [] }
                     ]
                 }),
+                __WEBPACK_IMPORTED_MODULE_10__angular_common_http__["a" /* HttpClientModule */],
+                __WEBPACK_IMPORTED_MODULE_11__angular_http__["c" /* HttpModule */]
             ],
             bootstrap: [__WEBPACK_IMPORTED_MODULE_2_ionic_angular__["a" /* IonicApp */]],
             entryComponents: [
@@ -212,7 +344,9 @@ var AppModule = /** @class */ (function () {
             providers: [
                 __WEBPACK_IMPORTED_MODULE_7__ionic_native_status_bar__["a" /* StatusBar */],
                 __WEBPACK_IMPORTED_MODULE_8__ionic_native_splash_screen__["a" /* SplashScreen */],
-                { provide: __WEBPACK_IMPORTED_MODULE_1__angular_core__["u" /* ErrorHandler */], useClass: __WEBPACK_IMPORTED_MODULE_2_ionic_angular__["b" /* IonicErrorHandler */] }
+                { provide: __WEBPACK_IMPORTED_MODULE_1__angular_core__["u" /* ErrorHandler */], useClass: __WEBPACK_IMPORTED_MODULE_2_ionic_angular__["b" /* IonicErrorHandler */] },
+                __WEBPACK_IMPORTED_MODULE_9__providers_user_user__["a" /* UserProvider */],
+                __WEBPACK_IMPORTED_MODULE_12__providers_message_message__["a" /* MessageProvider */]
             ]
         })
     ], AppModule);
@@ -223,18 +357,18 @@ var AppModule = /** @class */ (function () {
 
 /***/ }),
 
-/***/ 262:
+/***/ 265:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return MyApp; });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core__ = __webpack_require__(0);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_ionic_angular__ = __webpack_require__(32);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__ionic_native_status_bar__ = __webpack_require__(190);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__ionic_native_splash_screen__ = __webpack_require__(193);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__pages_home_home__ = __webpack_require__(194);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__pages_list_list__ = __webpack_require__(195);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__pages_channel_channel__ = __webpack_require__(99);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__ionic_native_status_bar__ = __webpack_require__(196);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__ionic_native_splash_screen__ = __webpack_require__(199);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__pages_home_home__ = __webpack_require__(200);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__pages_list_list__ = __webpack_require__(201);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__pages_channel_channel__ = __webpack_require__(50);
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -284,7 +418,7 @@ var MyApp = /** @class */ (function () {
         __metadata("design:type", __WEBPACK_IMPORTED_MODULE_1_ionic_angular__["e" /* Nav */])
     ], MyApp.prototype, "nav", void 0);
     MyApp = __decorate([
-        Object(__WEBPACK_IMPORTED_MODULE_0__angular_core__["m" /* Component */])({template:/*ion-inline-start:"/Users/jaehoonp/zipteamUIv2/src/app/app.html"*/'<ion-menu [content]="content">\n  <ion-header>\n    <ion-toolbar>\n      <ion-title>Menu</ion-title>\n    </ion-toolbar>\n  </ion-header>\n\n  <ion-content>\n    <ion-list>\n      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">\n        {{p.title}}\n      </button>\n    </ion-list>\n  </ion-content>\n\n</ion-menu>\n\n<!-- Disable swipe-to-go-back because it\'s poor UX to combine STGB with side menus -->\n<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>'/*ion-inline-end:"/Users/jaehoonp/zipteamUIv2/src/app/app.html"*/
+        Object(__WEBPACK_IMPORTED_MODULE_0__angular_core__["m" /* Component */])({template:/*ion-inline-start:"/Users/jaehoonp/ZipTeamPurple-FrontEnd/src/app/app.html"*/'\n\n\n\n\n\n<ion-menu [content]="content">\n  <ion-header>\n    <ion-toolbar>\n      <ion-title>Zip-Slack</ion-title>\n    </ion-toolbar>\n  </ion-header>\n\n  <ion-content>\n    <ion-list>\n      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">\n        {{p.title}}\n      </button>\n    </ion-list>\n\n\n\n\n  </ion-content>\n\n</ion-menu>\n\n<!-- Disable swipe-to-go-back because it\'s poor UX to combine STGB with side menus -->\n<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>\n\n\n\n'/*ion-inline-end:"/Users/jaehoonp/ZipTeamPurple-FrontEnd/src/app/app.html"*/
         }),
         __metadata("design:paramtypes", [__WEBPACK_IMPORTED_MODULE_1_ionic_angular__["h" /* Platform */], __WEBPACK_IMPORTED_MODULE_2__ionic_native_status_bar__["a" /* StatusBar */], __WEBPACK_IMPORTED_MODULE_3__ionic_native_splash_screen__["a" /* SplashScreen */]])
     ], MyApp);
@@ -295,13 +429,14 @@ var MyApp = /** @class */ (function () {
 
 /***/ }),
 
-/***/ 99:
+/***/ 50:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ChannelPage; });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core__ = __webpack_require__(0);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_ionic_angular__ = __webpack_require__(32);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__providers_message_message__ = __webpack_require__(156);
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -313,6 +448,7 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 
 
+
 /**
  * Generated class for the ChannelPage page.
  *
@@ -320,25 +456,105 @@ var __metadata = (this && this.__metadata) || function (k, v) {
  * Ionic pages and navigation.
  */
 var ChannelPage = /** @class */ (function () {
-    function ChannelPage(navCtrl, navParams) {
+    function ChannelPage(navCtrl, navParams, messageProvider) {
         this.navCtrl = navCtrl;
         this.navParams = navParams;
+        this.messageProvider = messageProvider;
+        this.messages = [
+            {
+                message: "Hello"
+            },
+            {
+                message: "sup"
+            }
+        ];
+        this.getMessages();
     }
     ChannelPage.prototype.ionViewDidLoad = function () {
         console.log('ionViewDidLoad ChannelPage');
     };
+    ChannelPage.prototype.getMessages = function () {
+        var _this = this;
+        this.messageProvider.get(1, function (after) {
+            _this.messages = after;
+        });
+    };
+    ChannelPage.prototype.deleteMessage = function (messageId) {
+        var _this = this;
+        this.messageProvider.delete(messageId, function (after) {
+            _this.getMessages();
+        });
+    };
     ChannelPage = __decorate([
         Object(__WEBPACK_IMPORTED_MODULE_0__angular_core__["m" /* Component */])({
-            selector: 'page-channel',template:/*ion-inline-start:"/Users/jaehoonp/zipteamUIv2/src/pages/channel/channel.html"*/'<!--\n  Generated template for the ChannelPage page.\n\n  See http://ionicframework.com/docs/components/#navigation for more info on\n  Ionic pages and navigation.\n-->\n<ion-header>\n\n  <ion-navbar>\n    <ion-title>channel</ion-title>\n  </ion-navbar>\n\n</ion-header>\n\n\n<ion-content padding>\n\n</ion-content>\n'/*ion-inline-end:"/Users/jaehoonp/zipteamUIv2/src/pages/channel/channel.html"*/,
+            selector: 'page-channel',template:/*ion-inline-start:"/Users/jaehoonp/ZipTeamPurple-FrontEnd/src/pages/channel/channel.html"*/'\n\n\n<!-- <ion-buttons start>\n\n  <button ion-button icon-only menuToggle>\n\n    <ion-icon name="menu"></ion-icon>\n\n  </button>\n\n</ion-buttons> -->\n\n\n\n<ion-header>\n\n  <ion-navbar>\n    <ion-title>Channel</ion-title>\n\n    <ion-buttons start>\n\n        <button ion-button icon-only menuToggle>\n      \n          <ion-icon name="menu"></ion-icon>\n      \n        </button>\n      \n      </ion-buttons>\n  </ion-navbar>\n\n</ion-header>\n\n\n\n<ion-content padding>\n\n    <ion-list padding>\n      <ion-item-sliding *ngFor="let message of messages">\n        <ion-item>{{message.message}}</ion-item>\n    \n        <ion-item-options side="right">\n   \n            <button ion-button>\n                <ion-icon name="settings"></ion-icon>\n              </button>\n   \n            <!-- <button color="danger" ion-button (click)="deleteMessage(todo.id)">\n              <ion-icon name="trash"></ion-icon>\n            </button> -->\n   \n        </ion-item-options>\n      </ion-item-sliding>\n      \n      <!-- <ion-item>Todo 2</ion-item>\n      <ion-item>Todo 3</ion-item> -->\n    </ion-list>\n   \n   </ion-content>\n\n'/*ion-inline-end:"/Users/jaehoonp/ZipTeamPurple-FrontEnd/src/pages/channel/channel.html"*/,
         }),
-        __metadata("design:paramtypes", [__WEBPACK_IMPORTED_MODULE_1_ionic_angular__["f" /* NavController */], __WEBPACK_IMPORTED_MODULE_1_ionic_angular__["g" /* NavParams */]])
+        __metadata("design:paramtypes", [__WEBPACK_IMPORTED_MODULE_1_ionic_angular__["f" /* NavController */], __WEBPACK_IMPORTED_MODULE_1_ionic_angular__["g" /* NavParams */],
+            __WEBPACK_IMPORTED_MODULE_2__providers_message_message__["a" /* MessageProvider */]])
     ], ChannelPage);
     return ChannelPage;
 }());
 
 //# sourceMappingURL=channel.js.map
 
+/***/ }),
+
+/***/ 79:
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return UserProvider; });
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core__ = __webpack_require__(0);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__angular_http__ = __webpack_require__(78);
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+
+
+/*
+  Generated class for the UserProvider provider.
+
+  See https://angular.io/guide/dependency-injection for more info on providers
+  and Angular DI.
+*/
+var UserProvider = /** @class */ (function () {
+    function UserProvider(http) {
+        this.http = http;
+        console.log('Hello UserProvider Provider');
+    }
+    UserProvider.prototype.getToken = function () { return this.token; };
+    UserProvider.prototype.setToken = function (token) { this.token = token; };
+    UserProvider.prototype.login = function (username, password, callback) {
+        var url = "http://localhost:8080/login";
+        var header = new __WEBPACK_IMPORTED_MODULE_1__angular_http__["a" /* Headers */]({
+            'content-type': 'application/json',
+        });
+        var options = new __WEBPACK_IMPORTED_MODULE_1__angular_http__["d" /* RequestOptions */]({ headers: header });
+        var body = {
+            "username": username,
+            "password": password
+        };
+        this.http.post(url, body, options).subscribe(function (result) {
+            callback(result);
+            //console.log(result.headers.get("authorization"));
+        });
+    };
+    UserProvider = __decorate([
+        Object(__WEBPACK_IMPORTED_MODULE_0__angular_core__["A" /* Injectable */])(),
+        __metadata("design:paramtypes", [__WEBPACK_IMPORTED_MODULE_1__angular_http__["b" /* Http */]])
+    ], UserProvider);
+    return UserProvider;
+}());
+
+//# sourceMappingURL=user.js.map
+
 /***/ })
 
-},[196]);
+},[202]);
 //# sourceMappingURL=main.js.map

www/index.html

@@ -1,6 +1,9 @@
 <!DOCTYPE html>
 <html lang="en" dir="ltr">
 <head>
+  <script data-ionic="inject">
+    (function(w){var i=w.Ionic=w.Ionic||{};i.version='3.9.2';i.angular='5.2.11';i.staticDir='build/';})(window);
+  </script>
   <meta charset="UTF-8">
   <title>Ionic App</title>
   <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">