register

src/app/app-routing.module.ts

@@ -7,7 +7,7 @@ const routes: Routes = [
     loadChildren: () => import('./extpages/myfit/myfit.module').then(m => m.MyfitPageModule)
   },
   {
-    path: 'dash',
+    path: 'tabs',
     loadChildren: () => import('./pages/tabs/tabs.module').then(m => m.TabsPageModule)
   },
   {
@@ -17,9 +17,14 @@ const routes: Routes = [
   {
     path: 'login',
     loadChildren: () => import('./extpages/login/login.module').then(m => m.LoginPageModule)
+  },
+  {
+    path: 'register',
+    loadChildren: () => import('./extpages/register/register.module').then(m => m.RegisterPageModule)
   }
 
 
+
 ];
 @NgModule({
   imports: [

src/app/extpages/login/login.page.html

@@ -8,19 +8,53 @@
 
     <ion-row>
       <ion-col>
-        999999
+        <div style="background-color: #f6f0f4; border-radius: 10px; padding: 15px;">
+          <ion-label class="simp_lbl_tx">Login to continue</ion-label>
+          <ion-item lines="none">
+            <ion-icon slot="start" name="mail-outline"></ion-icon>
+            <ion-input (ionChange)="refreshBut()" type="email" placeholder="Email (Username)"  maxlength="35" [(ngModel)]='username'></ion-input>
+          </ion-item>
+
+          <ion-item lines="none">
+            <ion-icon slot="start" name="lock-closed-outline"></ion-icon>
+            <ion-input (ionChange)="refreshBut()" type="password" placeholder="Password"  maxlength="15"  [(ngModel)]='password'></ion-input>
+          </ion-item>
+
+          <div class="check">
+            <ion-checkbox mode="md" checked></ion-checkbox>
+            <ion-label>Remember me</ion-label>
+          </div>
+
+          <ion-button shape="round"
+                      expand="block"
+                      size="small"
+                      (click)="startLogin()"
+                      [disabled]="isDisabled"
+          >
+            Login
+          </ion-button>
+        </div>
+
+      </ion-col>
+    </ion-row>
+
+    <ion-row>
+      <ion-col style="text-align: center;">
+        or
       </ion-col>
     </ion-row>
 
     <ion-row>
       <ion-col>
-        999999
-      </ion-col>
-    </ion-row>
-
-    <ion-row>
-      <ion-col>
-        999999
+        <ion-button
+          color="secondary"
+          size="small"
+          shape="round"
+          expand="block"
+          (click)="startSignup()"
+        >
+          Sign up
+        </ion-button>
       </ion-col>
     </ion-row>
 

src/app/extpages/login/login.page.scss

@@ -0,0 +1,55 @@
+.simp_lbl_tx{
+  margin-top: 10px;
+  font-size: 20px;
+  letter-spacing: 1.2px;
+  margin-bottom: 10px;
+  font-family: 'semi-bold';
+}
+.login-type{
+  background-color: #3dc2ff;
+  border-radius: 10px;
+  height: 50px;
+  font-weight: bolder;
+}
+
+ion-item {
+  --background: #f7f7f7;
+  border-radius: 10px;
+  margin-bottom: 24px;
+
+  ion-input {
+    --padding-start: 10px;
+    font-family: "regular";
+    height: 50px;
+  }
+
+  ion-icon {
+    font-size: 22px;
+  }
+}
+
+.check {
+  margin-top: 1rem;
+  margin-left: 30px;
+  display: flex;
+  align-items: center;
+
+  ion-label {
+    font-size: 14px;
+    margin-left: 10px;
+    color: var(--ion-color-primary);
+  }
+}
+
+ion-button {
+  --border-radius: 40px;
+  margin-top: 1.5rem;
+  height: 40px;
+}
+
+.forgot_lbl {
+  text-align: center;
+  margin-top: 10px;
+  font-size: 14px;
+  color: var(--ion-color-primary);
+}

src/app/extpages/login/login.page.ts

@@ -1,4 +1,5 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit, ViewChild} from '@angular/core';
+import {Router} from "@angular/router";
 
 @Component({
   selector: 'app-login',
@@ -6,10 +7,30 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./login.page.scss'],
 })
 export class LoginPage implements OnInit {
+  @ViewChild('username') username! : string;
+  @ViewChild('password') password! : string;
 
-  constructor() { }
+isDisabled:boolean=true;
+
+  constructor( private router: Router) { }
 
   ngOnInit() {
   }
-
+  refreshBut(){
+    this.isDisabled = true;
+    if (
+      this.username != undefined
+      && this.password !=undefined
+      && String(this.username).length > 5
+      && String(this.password).length > 5
+    ){
+      this.isDisabled = false;
+    }
+  }
+  startLogin(){
+    this.router.navigate(['tabs/tab1']);
+  }
+  startSignup(){
+    this.router.navigate(['register']);
+  }
 }

src/app/extpages/register/register-routing.module.ts

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

src/app/extpages/register/register.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 { RegisterPageRoutingModule } from './register-routing.module';
+
+import { RegisterPage } from './register.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RegisterPageRoutingModule
+  ],
+  declarations: [RegisterPage]
+})
+export class RegisterPageModule {}

src/app/extpages/register/register.page.html

@@ -0,0 +1,13 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>register</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">register</ion-title>
+    </ion-toolbar>
+  </ion-header>
+</ion-content>

src/app/extpages/register/register.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RegisterPage } from './register.page';
+
+describe('RegisterPage', () => {
+  let component: RegisterPage;
+  let fixture: ComponentFixture<RegisterPage>;
+
+  beforeEach(async(() => {
+    fixture = TestBed.createComponent(RegisterPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/extpages/register/register.page.ts

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