added login, welcome, signup pages

zlg/package-lock.json

@@ -168,6 +168,11 @@
       "resolved": "https://registry.npmjs.org/@types/socket.io-client/-/socket.io-client-1.4.32.tgz",
       "integrity": "sha512-Vs55Kq8F+OWvy1RLA31rT+cAyemzgm0EWNeax6BWF8H7QiiOYMJIdcwSDdm5LVgfEkoepsWkS+40+WNb7BUMbg=="
     },
+    "@types/sockjs-client": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@types/sockjs-client/-/sockjs-client-1.1.0.tgz",
+      "integrity": "sha512-F3gD7AakaPGzzdTmvN8HYxlNL+vTnMykYSUoukRTRGUntH4lwjxG5wx3ZwdYBTA3sTo4duxHY+rRZMbIEBxhRQ=="
+    },
     "abbrev": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",

zlg/package.json

@@ -24,6 +24,7 @@
     "@ionic-native/splash-screen": "~4.10.0",
     "@ionic-native/status-bar": "~4.10.0",
     "@ionic/storage": "2.1.3",
+    "@types/sockjs-client": "^1.1.0",
     "ionic-angular": "3.9.2",
     "ionicons": "3.0.0",
     "ng-socket-io": "^0.2.4",

zlg/src/app/app.component.ts

@@ -3,12 +3,12 @@ import { Platform } from 'ionic-angular';
 import { StatusBar } from '@ionic-native/status-bar';
 import { SplashScreen } from '@ionic-native/splash-screen';
 
-import { HomePage } from '../pages/home/home';
+import { Welcome } from '../pages/welcome/welcome';
 @Component({
   templateUrl: 'app.html'
 })
 export class MyApp {
-  rootPage:any = HomePage;
+  rootPage:any = Welcome;
 
   constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
     platform.ready().then(() => {

zlg/src/app/app.module.ts

@@ -10,13 +10,19 @@ const config: SocketIoConfig = { url: 'http://localhost:8080/vault-socket', opti
 
 
 import { MyApp } from './app.component';
+import { Welcome } from '../pages/welcome/welcome'
+import { Login } from '../pages/login/login'
+import { Signup } from '../pages/signup/signup'
 import { HomePage } from '../pages/home/home';
 import { WebsocketProvider } from '../providers/websocket/websocket';
 
 @NgModule({
   declarations: [
     MyApp,
-    HomePage
+    HomePage,
+    Welcome,
+    Login,
+    Signup
   ],
   imports: [
     BrowserModule,
@@ -26,7 +32,10 @@ import { WebsocketProvider } from '../providers/websocket/websocket';
   bootstrap: [IonicApp],
   entryComponents: [
     MyApp,
-    HomePage
+    HomePage,
+    Welcome,
+    Login,
+    Signup
   ],
   providers: [
     StatusBar,

zlg/src/pages/login/login.html

@@ -0,0 +1,17 @@
+<ion-content padding>
+  <ion-list>
+  
+    <ion-item>
+      <ion-label fixed>Username</ion-label>
+      <ion-input type="text" value=""></ion-input>
+    </ion-item>
+  
+    <ion-item>
+      <ion-label fixed>Password</ion-label>
+      <ion-input type="password"></ion-input>
+    </ion-item>
+  
+    <button ion-button block color="primary" (click)="login()">Login</button>
+  
+  </ion-list>
+  </ion-content>

zlg/src/pages/login/login.module.ts

@@ -0,0 +1,17 @@
+
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+import { Login } from './login';
+
+@NgModule({
+  declarations: [
+    Login,
+  ],
+  imports: [
+    IonicPageModule.forChild(Login),
+  ],
+  exports: [
+    Login
+  ]
+})
+export class LoginModule {}

zlg/src/pages/login/login.scss

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

zlg/src/pages/login/login.ts

@@ -0,0 +1,29 @@
+import { Component } from '@angular/core';
+import { IonicPage, NavController, NavParams } from 'ionic-angular';
+import { HomePage } from '../home/home';
+/**
+ * Generated class for the Login page.
+ *
+ * See http://ionicframework.com/docs/components/#navigation for more info
+ * on Ionic pages and navigation.
+ */
+@IonicPage()
+@Component({
+  selector: 'page-login',
+  templateUrl: 'login.html',
+})
+export class Login {
+
+  constructor(public navCtrl: NavController, public navParams: NavParams) {
+  }
+
+  ionViewDidLoad() {
+    console.log('ionViewDidLoad Login');
+  }
+
+  login(){
+    //Api connections
+    this.navCtrl.push(HomePage);
+    }
+
+}

zlg/src/pages/signup/signup.html

@@ -0,0 +1,22 @@
+<ion-content padding>
+  <ion-list>
+   <br />
+    <ion-item>
+      <ion-label fixed>Username</ion-label>
+      <ion-input type="text" value=""></ion-input>
+    </ion-item>
+  
+    <ion-item>
+      <ion-label fixed>Password</ion-label>
+      <ion-input type="password"></ion-input>
+    </ion-item>
+
+    <ion-item>
+        <ion-label fixed>Email</ion-label>
+        <ion-input type="text" value=""></ion-input>
+      </ion-item>
+  
+    <button ion-button block color="primary" (click)="signup()">Signup</button>
+  
+  </ion-list>
+  </ion-content>

zlg/src/pages/signup/signup.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+import { Signup } from './signup';
+
+@NgModule({
+  declarations: [
+    Signup,
+  ],
+  imports: [
+    IonicPageModule.forChild(Signup),
+  ],
+  exports: [
+    Signup
+  ]
+})
+export class SignupModule {}

zlg/src/pages/signup/signup.scss

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

zlg/src/pages/signup/signup.ts

@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+import { IonicPage, NavController, NavParams } from 'ionic-angular';
+import { HomePage } from '../home/home';
+
+/**
+ * Generated class for the Signup page.
+ *
+ * See http://ionicframework.com/docs/components/#navigation for more info
+ * on Ionic pages and navigation.
+ */
+@IonicPage()
+@Component({
+  selector: 'page-signup',
+  templateUrl: 'signup.html',
+})
+export class Signup {
+
+  constructor(public navCtrl: NavController, public navParams: NavParams) {
+  }
+
+  ionViewDidLoad() {
+    console.log('ionViewDidLoad Signup');
+  }
+
+  signup(){
+  //Api connections
+  this.navCtrl.push(HomePage);
+  }
+
+}

zlg/src/pages/welcome/welcome.html

@@ -0,0 +1,9 @@
+
+
+<ion-content padding="true" style="background: url(../assets/img/welcome.png) no-repeat center;background-size:cover;vertical-align: middle;" id="welcome">
+
+  <h1> Welcome to the Vault </h1>
+  
+  <button ion-button block class="marginTop" (click)="signup()">Signup</button>
+  <button ion-button block color="lightprimary" (click)="login()">Login</button>
+  </ion-content>

zlg/src/pages/welcome/welcome.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+import { Welcome } from './welcome';
+
+@NgModule({
+  declarations: [
+    Welcome,
+  ],
+  imports: [
+    IonicPageModule.forChild(Welcome),
+  ],
+  exports: [
+    Welcome
+  ]
+})
+export class WelcomeModule {}

zlg/src/pages/welcome/welcome.scss

@@ -0,0 +1,4 @@
+page-welcome {
+   text-align: center;
+   color: red;
+}

zlg/src/pages/welcome/welcome.ts

@@ -0,0 +1,34 @@
+import { Component } from '@angular/core';
+import { IonicPage, NavController, NavParams } from 'ionic-angular';
+
+import { Login } from '../login/login';
+import { Signup } from '../signup/signup';
+/**
+ * Generated class for the Welcome page.
+ *
+ * See http://ionicframework.com/docs/components/#navigation for more info
+ * on Ionic pages and navigation.
+ */
+@IonicPage()
+@Component({
+  selector: 'page-welcome',
+  templateUrl: 'welcome.html',
+})
+export class Welcome {
+
+  constructor(public navCtrl: NavController, public navParams: NavParams) {
+  }
+
+  ionViewDidLoad() {
+    console.log('ionViewDidLoad Welcome');
+  }
+
+  login(){
+   this.navCtrl.push(Login);
+  }
+
+  signup(){
+   this.navCtrl.push(Signup, {}, {animate:false});
+  }
+
+}