loggin base and tabs design

src/app/app-routing.module.ts

@@ -2,8 +2,9 @@ import { NgModule } from '@angular/core';
 import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
 
 const routes: Routes = [
+  { path: '', redirectTo: 'loggin', pathMatch: 'full' },
   {
-    path: '',
+    path: 'tabs',
     loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
   },
   {

src/app/loggin/loggin.page.html

@@ -5,5 +5,48 @@
 </ion-header>
 
 <ion-content>
+  <ion-grid>
+    <ion-row>
+      <ion-col
+        class="ion-align-self-end" size-lg="3" size-md="6" size-xs="12">
+
+        <div class="ion-padding ion-text-center">
+          <ion-note 
+            color="danger">
+            {{errorMessage}}
+          </ion-note>
+        </div>
+
+  <div class="ion-padding">
+  <form #ngForm="ngForm">
+    <ion-item color="green">
+      <ion-icon slot="start" name="person"></ion-icon>
+      <ion-input type="number" placeholder="Numero de cuenta" 
+        [(ngModel)]="data.cuenta" 
+        name="cuenta" minlength=6
+        required>
+      </ion-input>
+    </ion-item>
+
+    <ion-item color="green">
+      <ion-icon slot="start" name="key"></ion-icon>
+      <ion-input type="password" placeholder="Contraseña" 
+        [(ngModel)]="data.password" 
+        name="password" 
+        required minlength="5">
+      </ion-input>
+    </ion-item>
+  </form>
+</div>
+<div class="ion-padding">
+  <ion-button [disabled]="ngForm.invalid"
+    expand="full"
+    (click)="login()">
+    Entrar
+  </ion-button>
+</div>
+</ion-col>
+</ion-row>
+</ion-grid>
 
 </ion-content>

src/app/loggin/loggin.page.scss

@@ -0,0 +1,12 @@
+ion-grid {
+    width:100%;
+    height: 100%;
+
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+  }
+  
+  ion-row {
+    height: 100%;
+  }

src/app/loggin/loggin.page.ts

@@ -1,4 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { NgForm } from '@angular/forms';
+import { Router } from '@angular/router';
+import { NavController } from '@ionic/angular';
 
 @Component({
   selector: 'app-loggin',
@@ -6,10 +9,20 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./loggin.page.scss'],
 })
 export class LogginPage implements OnInit {
-
-  constructor() { }
+  @ViewChild(NgForm, {static: true}) ngForm: NgForm;
+  errorMessage = null;
+  data = {username: null, password: null};
+  constructor(private router: Router,
+              private nav: NavController) { }
 
   ngOnInit() {
   }
-
+  
+  login() {
+    if (this.ngForm.invalid) {
+      this.errorMessage = 'Complete el formulario';
+      return;
+    }
+    this.nav.navigateRoot('/tabs')
+  }
 }

src/app/tab1/tab1.page.html

@@ -1,7 +1,7 @@
 <ion-header [translucent]="true">
   <ion-toolbar>
     <ion-title>
-      Tab 1
+      Datos
     </ion-title>
   </ion-toolbar>
 </ion-header>
@@ -9,9 +9,9 @@
 <ion-content [fullscreen]="true">
   <ion-header collapse="condense">
     <ion-toolbar>
-      <ion-title size="large">Tab 1</ion-title>
+      <ion-title size="large">Datos</ion-title>
     </ion-toolbar>
   </ion-header>
 
-  <app-explore-container name="Tab 1 page"></app-explore-container>
+  <app-explore-container name="Datos"></app-explore-container>
 </ion-content>

src/app/tabs/tabs-routing.module.ts

@@ -4,7 +4,7 @@ import { TabsPage } from './tabs.page';
 
 const routes: Routes = [
   {
-    path: 'tabs',
+    path: '',
     component: TabsPage,
     children: [
       {

src/app/tabs/tabs.page.html

@@ -2,18 +2,18 @@
 
   <ion-tab-bar slot="bottom">
     <ion-tab-button tab="tab1">
-      <ion-icon name="triangle"></ion-icon>
-      <ion-label>Tab 1</ion-label>
+      <ion-icon name="paw"></ion-icon>
+      <ion-label>Datos</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="tab2">
-      <ion-icon name="ellipse"></ion-icon>
-      <ion-label>Tab 2</ion-label>
+      <ion-icon name="pulse"></ion-icon>
+      <ion-label>Sintomas</ion-label>
     </ion-tab-button>
 
     <ion-tab-button tab="tab3">
-      <ion-icon name="square"></ion-icon>
-      <ion-label>Tab 3</ion-label>
+      <ion-icon name="eye"></ion-icon>
+      <ion-label>Información</ion-label>
     </ion-tab-button>
   </ion-tab-bar>