Added start, login, and signup pages

zlg/src/app/app.component.ts

@@ -3,12 +3,13 @@ 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 { HomePage } from '../pages/home/home';
+import { StartPage } from '../pages/start/start';
 @Component({
   templateUrl: 'app.html'
 })
 export class MyApp {
-  rootPage:any = HomePage;
+  rootPage:any = StartPage;
 
   constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
     platform.ready().then(() => {

zlg/src/app/app.module.ts

@@ -12,11 +12,17 @@ const config: SocketIoConfig = { url: 'http://localhost:8080/vault-socket', opti
 import { MyApp } from './app.component';
 import { HomePage } from '../pages/home/home';
 import { WebsocketProvider } from '../providers/websocket/websocket';
+import { LoginPage } from '../pages/login/login';
+import { SignupPage } from '../pages/signup/signup';
+import { StartPage } from '../pages/start/start';
 
 @NgModule({
   declarations: [
     MyApp,
-    HomePage
+    HomePage,
+    LoginPage,
+    SignupPage,
+    StartPage
   ],
   imports: [
     BrowserModule,
@@ -26,7 +32,10 @@ import { WebsocketProvider } from '../providers/websocket/websocket';
   bootstrap: [IonicApp],
   entryComponents: [
     MyApp,
-    HomePage
+    HomePage,
+    LoginPage,
+    SignupPage,
+    StartPage
   ],
   providers: [
     StatusBar,

zlg/src/pages/login/login.html

@@ -0,0 +1,31 @@
+<ion-header>
+  <ion-navbar>
+    <br>
+    <button ion-button menuToggle>
+      <ion-icon name="menu"></ion-icon>
+    </button>
+    <ion-title align="middle">The Vault</ion-title>
+  </ion-navbar>
+</ion-header>
+
+<ion-buttons side="right" class="has-header">
+  <button class="button icon ion-android-settings"></button>
+</ion-buttons>
+<ion-content padding="true" style="background: url(../assets/img/0iNAJ9CJQ1qT57JTEweX_palePurpVault.png) no-repeat center;background-size:cover;"
+  class="has-header">
+  
+  <form id="login-form1" class="list">
+    <ion-list id="login-list2" class="codystar">
+      <label class="item item-input" id="login-input1">
+        <span class="input-label">Username</span>
+        <input type="text" class="form-control" [(ngModel)]="user.userName" name="username" placeholder="Username" required>
+      </label>
+      <label class="item item-input" id="newKey-input2">
+        <span class="input-label">Password</span>
+        <input type="password" class="form-control" [(ngModel)]="user.password" name="password" placeholder="Password" required>
+      </label>
+    </ion-list>
+    <button (click)="login()" id="login-button1" style="font-weight:600; font-size:20px;" class="codystar button button-royal button-block button-small">Log in</button>
+  </form>
+</ion-content>
+</ion-view>

zlg/src/pages/login/login.scss

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

zlg/src/pages/login/login.ts

@@ -0,0 +1,25 @@
+import { Component, OnInit } from "@angular/core";
+import { MenuController } from "ionic-angular";
+
+import { NavController } from "ionic-angular";
+
+@Component({
+  selector: "page-login",
+  templateUrl: "login.html"
+})
+export class LoginPage implements OnInit {
+  user = {
+    userName: "",
+    password: ""
+  };
+
+  constructor(public navCtrl: NavController, public menu: MenuController) {
+    this.menu.enable(true);
+  }
+
+  ngOnInit() {
+    this.login();
+  }
+
+  login() {}
+}

zlg/src/pages/signup/signup.html

@@ -0,0 +1,38 @@
+<ion-header>
+  <ion-navbar>
+    <br>
+    <button ion-button menuToggle>
+      <ion-icon name="menu"></ion-icon>
+    </button>
+    <ion-title align="middle">The Vault</ion-title>
+  </ion-navbar>
+</ion-header>
+
+<ion-buttons side="right" class="has-header">
+  <button class="button icon ion-android-settings"></button>
+</ion-buttons>
+<ion-content padding="true" style="background: url(../assets/img/0iNAJ9CJQ1qT57JTEweX_palePurpVault.png) no-repeat center;background-size:cover;"
+  class="has-header">
+  <form id="signup-form1" class="list">
+    <ion-list id="signup-list3" class="codystar">
+      <label class="item item-input" id="signup-input1">
+        <span class="input-label">Username</span>
+        <input type="text" class="form-control" [(ngModel)]="user.userName" name="username" placeholder="Username" required>
+      </label>
+      <label class="item item-input" id="newKey-input2">
+        <span class="input-label">Name</span>
+        <input type="text" class="form-control" [(ngModel)]="user.name" name="name" placeholder="Name" required>
+      </label>
+      <label class="item item-input" id="newKey-input3">
+        <span class="input-label">Email</span>
+        <input type="email" class="form-control" [(ngModel)]="user.email" name="email" placeholder="Email" required>
+      </label>
+      <label class="item item-input" id="newKey-input4">
+        <span class="input-label">Password</span>
+        <input type="password" class="form-control" [(ngModel)]="user.password" name="password" placeholder="Password" required>
+      </label>
+    </ion-list>
+    <button (click)="createUser()" id="signup-button1" style="font-weight:600; font-size:20px;" class="codystar button button-royal button-block button-small">Sign up</button>
+  </form>
+</ion-content>
+</ion-view>

zlg/src/pages/signup/signup.scss

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

zlg/src/pages/signup/signup.ts

@@ -0,0 +1,32 @@
+import { Component, OnInit } from '@angular/core';
+import { MenuController } from 'ionic-angular';
+
+import { NavController } from 'ionic-angular';
+
+@Component({
+  selector: 'page-signup',
+  templateUrl: 'signup.html'
+})
+export class SignupPage implements OnInit {
+  user = {
+    name: '',
+    userName: '',
+    email: '',
+    password: ''
+  };
+
+  constructor(public navCtrl: NavController, public menu: MenuController) {
+    this.menu.enable(true);
+
+  }
+
+
+  ngOnInit() {
+    this.createUser();
+  }
+
+  createUser() {
+
+  }
+
+}

zlg/src/pages/start/start.html

@@ -0,0 +1,24 @@
+<ion-header>
+  <ion-navbar>
+    <br>
+    <button ion-button menuToggle>
+      <ion-icon name="menu"></ion-icon>
+    </button>
+    <ion-title align="middle">The Vault</ion-title>
+  </ion-navbar>
+</ion-header>
+
+<ion-buttons side="right" class="has-header">
+  <button class="button icon ion-android-settings"></button>
+</ion-buttons>
+<ion-content padding="true" style="background: url(../assets/img/0iNAJ9CJQ1qT57JTEweX_palePurpVault.png) no-repeat center;background-size:cover;"
+  class="has-header">
+
+  <form id="start-form1" class="list">
+    <ion-list id="start-list1" class="codystar">
+    <button [navPush]="loginPage" id="login-button1" style="font-weight:600; font-size:20px;" class="codystar button button-royal button-block button-small">Log in</button>
+    <button [navPush]="signupPage" id="login-button2" style="font-weight:600; font-size:20px;" class="codystar button button-royal button-block button-small">Sign Up</button>
+  </ion-list>
+  </form>
+</ion-content>
+</ion-view>

zlg/src/pages/start/start.scss

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

zlg/src/pages/start/start.ts

@@ -0,0 +1,32 @@
+import { Component, OnInit } from "@angular/core";
+import { MenuController } from "ionic-angular";
+
+import { NavController } from "ionic-angular";
+import { LoginPage } from "../login/login";
+import { SignupPage } from "../signup/signup";
+
+@Component({
+  selector: "page-start",
+  templateUrl: "start.html"
+})
+export class StartPage implements OnInit {
+  loginPage = LoginPage;
+  signupPage = SignupPage;
+
+  constructor(public navCtrl: NavController, public menu: MenuController) {
+    this.menu.enable(true);
+  }
+
+  ngOnInit() {
+    // this.login();
+    // this.signup();
+  }
+
+  // login() {
+
+  // }
+
+  // signup(){
+
+  // }
+}