i think i updated everything to RC 0

Ionic2/package.json

@@ -16,7 +16,8 @@
     "ionic-angular": "^2.0.0-rc.0",
     "ionicons": "^3.0.0",
     "@ionic/storage": "^1.0.3",
-    "ionic-native": "^2.0.3"
+    "ionic-native": "^2.0.3",
+    "angular2-jwt": "^0.1.21"
   },
   "devDependencies": {
     "@ionic/app-scripts": "^0.0.23",

Ionic2/src/app/app.component.ts

@@ -1,21 +1,79 @@
-import { Component } from '@angular/core';
-import { Platform } from 'ionic-angular';
+import { Component, ViewChild, provide } from '@angular/core';
+import { Platform, MenuController, Nav } from 'ionic-angular';
 import { StatusBar } from 'ionic-native';
 
-import { TabsPage } from '../pages/tabs/tabs';
+import {Page1} from '../pages/page1/page1';
+import {Page3} from '../pages/page3/page3';
+import {LoginPage} from '../pages/loginPage/loginPage';
+import {ProfilePage} from '../pages/profilePage/profilePage';
+import {ContactsPage} from '../pages/contactsPage/contactsPage';
+import {PendingInvitesPage} from '../pages/pendingInvitesPage/pendingInvitesPage';
+import {SettingsPage} from '../pages/settingsPage/settingsPage';
+import {DiscoverUsersPage} from '../pages/discoverUsersPage/discoverUsersPage';
 
 
+import {ContactsService} from '../services/contacts.service';
+import {StorageService} from '../services/storage.service';
+import {PreferencesService} from '../services/preferences.service';
+import {UserInfoService} from '../services/userInfo.service';
+
+import {Http} from '@angular/http';
+import {AuthHttp, AuthConfig} from 'angular2-jwt';
+import {AuthService} from '../services/auth.service';
+import {Secret} from '../secrets/secret';
+
 @Component({
-  template: `<ion-nav [root]="rootPage"></ion-nav>`
+  templateUrl: `app.html`
 })
 export class MyApp {
-  rootPage = TabsPage;
+  @ViewChild('nav') nav: Nav;
+  public primaryPages:any[];
+  public settingsPages:any[];
+  public rootPage:any;
+
+  constructor(public platform: Platform, public menu: MenuController,
+    public preferencesService: PreferencesService,
+    public auth: AuthService, public userInfoService: UserInfoService) {
+
+    this.initializeApp();
+
+    // set our app's pages (they appear in menu)
+    this.primaryPages = [
+        { title: 'My Profile', component: ProfilePage, icon: 'person' },
+        { title: 'My Contacts', component: ContactsPage, icon: 'contacts' },
+        { title: 'Pending Invites', component: PendingInvitesPage, icon: 'person-add' },
+        { title: 'Discover Users', component: DiscoverUsersPage, icon: 'people' }
+    ];
+
+    this.settingsPages = [
+        { title: 'Settings', component: SettingsPage, icon: 'settings' }
+    ];
 
-  constructor(platform: Platform) {
-    platform.ready().then(() => {
+    this.rootPage = LoginPage;
+  }
+
+  initializeApp() {
+    this.platform.ready().then(() => {
       // Okay, so the platform is ready and our plugins are available.
       // Here you can do any higher level native things you might need.
       StatusBar.styleDefault();
+      this.userInfoService.initialize();
+      this.preferencesService.initializePreferences();
+      this.auth.startupTokenRefresh();
     });
   }
+
+  openPage(page) {
+    // close the menu when clicking a link from the menu
+    this.menu.close();
+    // navigate to the new page if it is not the current page
+    //let nav = this.app.getComponent('nav');
+    this.nav.setRoot(page.component);
+  }
+
+  sendFeedback(){
+    window.open(
+      'mailto:' + Secret.FEEDBACK_EMAIL +
+      '?subject=' + Secret.FEEDBACK_SUBJECT, '_system');
+  }
 }

Ionic2/src/app/app.html

@@ -0,0 +1,24 @@
+<ion-menu [content]="content" >
+  <ion-toolbar primary>
+    <ion-title >Menu</ion-title>
+  </ion-toolbar>
+  <ion-content>
+    <ion-list no-lines>
+      <button ion-item *ngFor="let p of primaryPages" (click)="openPage(p)">
+       <ion-icon name="{{p.icon}}"></ion-icon>
+       {{p.title}}
+      </button>
+      <ion-item-divider style="min-height: 0px; padding:0px; height: 0px;"></ion-item-divider>
+      <button ion-item *ngFor="let p of settingsPages" (click)="openPage(p)">
+       <ion-icon name="{{p.icon}}"></ion-icon>
+       {{p.title}}
+      </button>
+      <button ion-item (click)="sendFeedback()">
+       <ion-icon name="send"></ion-icon>
+       Send Feedback
+      </button>
+    </ion-list>
+  </ion-content>
+</ion-menu>
+
+<ion-nav id="nav" #content [root]="rootPage" ></ion-nav>

Ionic2/src/app/app.module.ts

@@ -1,30 +1,83 @@
-import { NgModule } from '@angular/core';
+import { NgModule, provide } from '@angular/core';
 import { IonicApp, IonicModule } from 'ionic-angular';
 import { MyApp } from './app.component';
-import { AboutPage } from '../pages/about/about';
-import { ContactPage } from '../pages/contact/contact';
-import { HomePage } from '../pages/home/home';
-import { TabsPage } from '../pages/tabs/tabs';
+
+//pages
+import {Page1} from '../pages/page1/page1';
+import {Page3} from '../pages/page3/page3';
+import {LoginPage} from '../pages/loginPage/loginPage';
+import {ProfilePage} from '../pages/profilePage/profilePage';
+import {ContactsPage} from '../pages/contactsPage/contactsPage';
+import {PendingInvitesPage} from '../pages/pendingInvitesPage/pendingInvitesPage';
+import {SettingsPage} from '../pages/settingsPage/settingsPage';
+import {DiscoverUsersPage} from '../pages/discoverUsersPage/discoverUsersPage';
+import {ChatPage} from '../pages/chatPage/chatPage';
+import {ContactPage} from '../pages/contactPage/contactPage';
+
+//components
+import {ElasticTextarea} from '../components/elasticTextarea';
+import {ProfileHeader} from '../components/profileHeader';
+import {ChatBubble} from '../components/chatBubble/chatBubble';
+
+//services (providers)
+import {AuthService} from '../services/auth.service';
+import {ContactsService} from '../services/contacts.service';
+import {PreferencesService} from '../services/preferences.service';
+import {StorageService} from '../services/storage.service';
+import {UserInfoService} from '../services/userInfo.service';
+
+//external
+import {Http} from '@angular/http';
+import {AuthHttp, AuthConfig} from 'angular2-jwt';
 
 @NgModule({
   declarations: [
     MyApp,
-    AboutPage,
+    Page1,
+    Page3,
+    LoginPage,
+    ProfilePage,
+    ContactsPage,
+    PendingInvitesPage,
+    SettingsPage,
+    DiscoverUsersPage,
+    ChatPage,
     ContactPage,
-    HomePage,
-    TabsPage
+    ElasticTextarea,
+    ProfileHeader,
+    ChatBubble
   ],
   imports: [
-    IonicModule.forRoot(MyApp)
+    IonicModule.forRoot(MyApp, {})//config object here
+  ],
+  bootstrap: [
+    IonicApp
   ],
-  bootstrap: [IonicApp],
   entryComponents: [
     MyApp,
-    AboutPage,
-    ContactPage,
-    HomePage,
-    TabsPage
+    Page1,
+    Page3,
+    LoginPage,
+    ProfilePage,
+    ContactsPage,
+    PendingInvitesPage,
+    SettingsPage,
+    DiscoverUsersPage,
+    ChatPage,
+    ContactPage
   ],
-  providers: []
+  providers: [
+    ContactsService,
+    PreferencesService,
+    StorageService,
+    UserInfoService,
+    provide(AuthHttp, {
+      useFactory: (http) => {
+        return new AuthHttp(new AuthConfig({noJwtError: true}), http);
+      },
+      deps: [Http]
+    }),
+    AuthService
+  ]
 })
 export class AppModule {}

Ionic2/src/components/chatBubble/chatBubble.scss

@@ -0,0 +1,83 @@
+.chatBubble{
+
+  //position: relative;
+
+  // :last-child {
+  //   margin-bottom: 10px;
+  // }
+
+  img.profile-pic {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    position: absolute;
+    bottom: 10px;
+  }
+
+  img.profile-pic.left {
+    left: 10px;
+  }
+
+  img.profile-pic.right {
+    right: 10px;
+  }
+
+  .message {
+    font-size: medium;
+    word-wrap: break-word;
+    white-space: pre-wrap;
+  }
+
+  .message-detail {
+    white-space: nowrap;
+    font-size: 14px;
+  }
+
+  .chat-bubble {
+    border-radius: 5px;
+    display: inline-block;
+    padding: 10px 18px;
+    position: relative;
+    margin: 10px;
+    max-width: 80%;
+  }
+
+  .chat-bubble:before {
+    content: "\00a0";
+    display: block;
+    height: 16px;
+    width: 9px;
+    position: absolute;
+    bottom: -7.5px;
+  }
+
+  .chat-bubble.left {
+    background-color: map-get($chat-bubble, background-left);
+    float: left;
+    margin-left: 45px;
+  }
+
+  .chat-bubble.left:before {
+    background-color: map-get($chat-bubble, background-left);
+    left: 10px;
+    -webkit-transform: rotate(70deg) skew(5deg);
+  }
+
+  .chat-bubble.right {
+    background-color: map-get($chat-bubble, background-right);
+    color: #000;
+    float: right;
+    margin-right: 45px;
+  }
+
+  .chat-bubble.right:before {
+    background-color: map-get($chat-bubble, background-right);
+    right: 10px;
+    -webkit-transform: rotate(118deg) skew(-5deg);
+  }
+
+  .chat-bubble.right a.autolinker {
+    color: #000;
+    font-weight: bold;
+  }
+}

Ionic2/src/components/chatBubble/chatBubble.ts

@@ -0,0 +1,31 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'chat-bubble',
+  inputs: ['msg: message'],
+  template:
+  `
+  <div class="chatBubble">
+    <img class="profile-pic {{msg.position}}" src="{{msg.img}}">
+    <div class="chat-bubble {{msg.position}}">
+      <div class="message">{{msg.content}}</div>
+      <div class="message-detail">
+          <span style="font-weight:bold;">{{msg.senderName}} </span>,
+          <span>{{msg.time}}</span>
+      </div>
+    </div>
+  </div>
+  `
+})
+export class ChatBubble {
+  public msg:any;
+
+  constructor() {
+    this.msg = {
+      content :  'Am I dreaming?',
+      position : 'left',
+      time : '12/3/2016',
+      senderName : 'Gregory'
+    }
+  }
+}

Ionic2/src/components/elasticTextarea.ts

@@ -0,0 +1,44 @@
+import {Component, ViewChild} from '@angular/core';
+
+@Component({
+  selector: 'elastic-textarea',
+  inputs: ['placeholder', 'lineHeight'],
+  template:
+  `
+  <ion-textarea #ionTxtArea
+    placeholder='{{placeholder}}'
+    [(ngModel)]="content"
+    (ngModelChange)='onChange($event)'></ion-textarea>
+  `
+})
+export class ElasticTextarea {
+  @ViewChild('ionTxtArea') ionTxtArea:any;
+  public txtArea:any;
+  public content:string;
+  public lineHeight:string;
+
+  constructor() {
+    this.content = "";
+    this.lineHeight = "22px";
+  }
+
+  public ngAfterViewInit(){
+    this.txtArea = this.ionTxtArea._elementRef.nativeElement.children[0];
+    this.txtArea.style.height = this.lineHeight + "px";
+    this.txtArea.style.resize = 'none';
+  }
+
+  public onChange(newValue){
+    this.txtArea.style.height = this.lineHeight + "px";
+    this.txtArea.style.height =  this.txtArea.scrollHeight + "px";
+  }
+
+  public clearInput(){
+    this.content = "";
+    this.txtArea.style.height = this.lineHeight + "px";
+  }
+
+  public setFocus(){
+    this.ionTxtArea.setFocus()
+  }
+}