first commit

.REMEMBER

@@ -0,0 +1,7 @@
+$ ionic generate 
+$ ionic generate page
+$ ionic generate page contact
+$ ionic generate component contact/form
+$ ionic generate component login-form --change-detection=OnPush
+$ ionic generate directive ripple --skip-import
+$ ionic generate service api/user

src/app/app-routing.module.ts

@@ -4,7 +4,8 @@ import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
 const routes: Routes = [
   {
     path: 'home',
-    loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
+   /* loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)*/
+    loadChildren: () => import('./start-page/start-page.module').then( m => m.StartPagePageModule)
   },
   {
     path: 'message/:id',
@@ -15,6 +16,22 @@ const routes: Routes = [
     redirectTo: 'home',
     pathMatch: 'full'
   },
+  {
+    path: 'start-page',
+    loadChildren: () => import('./start-page/start-page.module').then( m => m.StartPagePageModule)
+  },
+  {
+    path: 'user-login',
+    loadChildren: () => import('./user-login/user-login.module').then( m => m.UserLoginPageModule)
+  },
+  {
+    path: 'user-signup',
+    loadChildren: () => import('./user-signup/user-signup.module').then( m => m.UserSignupPageModule)
+  },
+  {
+    path: 'user-dash',
+    loadChildren: () => import('./userpage/user-dash/user-dash.module').then( m => m.UserDashPageModule)
+  },
 ];
 
 @NgModule({

src/app/start-page/start-page-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { StartPagePage } from './start-page.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: StartPagePage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class StartPagePageRoutingModule {}

src/app/start-page/start-page.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { StartPagePageRoutingModule } from './start-page-routing.module';
+
+import { StartPagePage } from './start-page.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    StartPagePageRoutingModule
+  ],
+  declarations: [StartPagePage]
+})
+export class StartPagePageModule {}

src/app/start-page/start-page.page.html

@@ -0,0 +1,33 @@
+<!-- ion-header>
+  <ion-toolbar>
+    <ion-title>StartPage</ion-title>
+  </ion-toolbar>
+</!-->
+
+<ion-content>
+  <div class="home_back">
+    <div class="home_card">
+      <ion-card class="card_sec1">
+        <ion-card-header>
+          <ion-card-title>myFit</ion-card-title>
+          <ion-card-subtitle>
+            your Healty Fliestyle Assistant
+          </ion-card-subtitle>
+        </ion-card-header>
+
+        <ion-card-content>
+          <ion-grid>
+            <ion-row>
+              <ion-col>
+                <ion-button shape="round" size="small" expand="block" (click)="startLogin()">Login</ion-button>
+              </ion-col>
+              <ion-col>
+                <ion-button shape="round" size="small" expand="block"  (click)="startSignUp()">Start</ion-button>
+              </ion-col>
+            </ion-row>
+          </ion-grid>
+        </ion-card-content>
+      </ion-card>
+    </div>
+  </div>
+</ion-content>

src/app/start-page/start-page.page.scss

@@ -0,0 +1,14 @@
+.home_back{
+    height: 100%;
+    width: 100%;
+    color:rgb(17, 7, 62);
+    background-image: url(../../assets/img/myfit_home.jpg);
+    background-size: cover;
+    .home_card{
+        position: relative;
+        top:50%;
+        .card_sec1{
+          background-color: rgb(144, 197, 214);
+        }
+    }
+}

src/app/start-page/start-page.page.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { StartPagePage } from './start-page.page';
+
+describe('StartPagePage', () => {
+  let component: StartPagePage;
+  let fixture: ComponentFixture<StartPagePage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ StartPagePage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(StartPagePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/start-page/start-page.page.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-start-page',
+  templateUrl: './start-page.page.html',
+  styleUrls: ['./start-page.page.scss'],
+})
+export class StartPagePage implements OnInit {
+  constructor(private router:Router) {}
+
+  ngOnInit() {}
+  startLogin() {this.router.navigate(['user-login'])}
+  startSignUp() {this.router.navigate(['user-signup'])}
+}

src/app/user-login/user-login-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { UserLoginPage } from './user-login.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: UserLoginPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class UserLoginPageRoutingModule {}

src/app/user-login/user-login.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { UserLoginPageRoutingModule } from './user-login-routing.module';
+
+import { UserLoginPage } from './user-login.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    UserLoginPageRoutingModule
+  ],
+  declarations: [UserLoginPage]
+})
+export class UserLoginPageModule {}

src/app/user-login/user-login.page.html

@@ -0,0 +1,36 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
+    <ion-title>Log In</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <form class="login_box">
+    <ion-card>
+      <ion-card-content>
+        <ion-item lines="full">
+          <ion-label position="floating">Email</ion-label>
+          <ion-input type="text" required></ion-input>
+        </ion-item>
+        <ion-item lines="full">
+          <ion-label position="floating">Password</ion-label>
+          <ion-input type="password" required></ion-input>
+        </ion-item>
+        <ion-item lines="full">
+          <ion-button type="submit" color="danger" size="small" (click)="completeLogin()" >Sign In</ion-button
+          >
+        </ion-item>
+        <ion-row>
+          <ion-col>
+            <a [routerLink]="['/forgot-password']" class="small-text"
+              >Forgot Password?</a
+            >
+          </ion-col>
+        </ion-row>
+      </ion-card-content>
+    </ion-card>
+  </form>
+</ion-content>

src/app/user-login/user-login.page.scss

@@ -0,0 +1,6 @@
+.login_box{
+    position: relative;
+    top:100px;
+    padding: 1px;
+    font-size: 10px;
+}

src/app/user-login/user-login.page.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { UserLoginPage } from './user-login.page';
+
+describe('UserLoginPage', () => {
+  let component: UserLoginPage;
+  let fixture: ComponentFixture<UserLoginPage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ UserLoginPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(UserLoginPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/user-login/user-login.page.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+@Component({
+  selector: 'app-user-login',
+  templateUrl: './user-login.page.html',
+  styleUrls: ['./user-login.page.scss'],
+})
+export class UserLoginPage implements OnInit {
+
+  constructor(private router: Router) { }
+
+  ngOnInit() {
+  }
+
+  completeLogin(){
+   // alert('10000');
+    this.router.navigate(['/user-dash']);
+  }
+}

src/app/user-signup/user-signup-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { UserSignupPage } from './user-signup.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: UserSignupPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class UserSignupPageRoutingModule {}

src/app/user-signup/user-signup.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { UserSignupPageRoutingModule } from './user-signup-routing.module';
+
+import { UserSignupPage } from './user-signup.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    UserSignupPageRoutingModule
+  ],
+  declarations: [UserSignupPage]
+})
+export class UserSignupPageModule {}

src/app/user-signup/user-signup.page.html

@@ -0,0 +1,9 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>UserSignup</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+
+</ion-content>

src/app/user-signup/user-signup.page.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { UserSignupPage } from './user-signup.page';
+
+describe('UserSignupPage', () => {
+  let component: UserSignupPage;
+  let fixture: ComponentFixture<UserSignupPage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ UserSignupPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(UserSignupPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/user-signup/user-signup.page.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-user-signup',
+  templateUrl: './user-signup.page.html',
+  styleUrls: ['./user-signup.page.scss'],
+})
+export class UserSignupPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/userpage/user-dash/user-dash-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { UserDashPage } from './user-dash.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: UserDashPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class UserDashPageRoutingModule {}

src/app/userpage/user-dash/user-dash.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { UserDashPageRoutingModule } from './user-dash-routing.module';
+
+import { UserDashPage } from './user-dash.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    UserDashPageRoutingModule
+  ],
+  declarations: [UserDashPage]
+})
+export class UserDashPageModule {}

src/app/userpage/user-dash/user-dash.page.html

@@ -0,0 +1,51 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>UserDash</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <div class="dash_top">
+    <ion-grid>
+    <ion-row>
+      
+      <ion-item>
+        <ion-avatar slot="start">
+          <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
+        </ion-avatar>
+        <ion-label>
+          Avatar Item
+        </ion-label>
+      </ion-item>
+
+    </ion-row>
+    <ion-row>
+      <ion-col>
+        <ion-slides pager="true">
+          <ion-slide>
+            <ion-button shape="round" size="small" fill="outline" class="slide_c" outline
+              >Menu Item 11</ion-button
+            >
+          </ion-slide>
+          <ion-slide>
+            <ion-button shape="round" size="small" fill="outline" class="slide_c" outline
+              >Menu Item 22</ion-button
+            >
+          </ion-slide>
+          <ion-slide>
+            <ion-button shape="round" size="small" fill="outline" class="slide_c" outline
+              >Menu Item 33</ion-button
+            >
+          </ion-slide>
+          <ion-slide>
+            <ion-button shape="round" size="small" fill="outline" class="slide_c" outline
+              >Menu Item 44</ion-button
+            >
+          </ion-slide>
+        </ion-slides>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+  </div>
+  
+</ion-content>

src/app/userpage/user-dash/user-dash.page.scss

@@ -0,0 +1,14 @@
+.dash_top{
+    position: relative;
+    top:50px;
+}
+.slide_c {
+  //width: 150px;
+  //background-color: red;
+  font-size: 11px;
+  text-transform: uppercase;
+
+}
+ion-slide {
+  width: unset !important;
+}

src/app/userpage/user-dash/user-dash.page.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { UserDashPage } from './user-dash.page';
+
+describe('UserDashPage', () => {
+  let component: UserDashPage;
+  let fixture: ComponentFixture<UserDashPage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ UserDashPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(UserDashPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/userpage/user-dash/user-dash.page.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-user-dash',
+  templateUrl: './user-dash.page.html',
+  styleUrls: ['./user-dash.page.scss'],
+})
+export class UserDashPage implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}