Login Validation

ui/src/app/pages/login/login.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { IonicModule } from '@ionic/angular';
 
@@ -13,7 +13,8 @@ import { LoginPage } from './login.page';
     CommonModule,
     FormsModule,
     IonicModule,
-    LoginPageRoutingModule
+    LoginPageRoutingModule,
+    ReactiveFormsModule
   ],
   declarations: [LoginPage]
 })

ui/src/app/pages/login/login.page.form.spec.ts

@@ -0,0 +1,44 @@
+import { FormBuilder, FormGroup } from "@angular/forms";
+import { LoginPageForm } from "./login.page.form";
+
+describe(`LoginPageForm`, () => {
+
+    let loginPageForm : LoginPageForm;
+    let form: FormGroup
+
+    beforeEach(() =>{
+        loginPageForm = new LoginPageForm(new FormBuilder());
+        form = loginPageForm.createForm();
+    })
+
+    it('should create login form empty', () => {
+        const loginPageForm = new LoginPageForm(new FormBuilder());
+        const form = loginPageForm.createForm();
+        expect(form).not.toBeNull();
+        expect(form.get('email')).not.toBeNull();
+        expect(form.get('email').value).toEqual("");
+        expect(form.get('email').valid).toBeFalsy();
+        expect(form.get('password')).not.toBeNull();
+        expect(form.get('password').value).toEqual("");
+        expect(form.get('password').valid).toBeFalsy();
+    })
+
+    it('should have email invalid if email is not valid', () => {
+        form.get('email').setValue('invalid email');
+
+        expect(form.get('email').valid).toBeFalsy();
+    })
+    
+    it('should have email valid if email is valid', () => {
+        form.get('email').setValue('valid@email.test');
+
+        expect(form.get('email').valid).toBeTruthy();
+    })
+
+    it('should have a valid from', () => {
+        form.get('email').setValue('valid@email.test');
+        form.get('password').setValue('12345678');
+
+        expect(form.valid).toBeTruthy();
+    })
+})

ui/src/app/pages/login/login.page.form.ts

@@ -0,0 +1,14 @@
+import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+
+export class LoginPageForm {
+    private formBuilder: FormBuilder
+    constructor(formBuilder: FormBuilder){
+        this.formBuilder = formBuilder;
+    }
+    createForm() : FormGroup {
+        return this.formBuilder.group({
+            email: ['', [Validators.required, Validators.email]],
+            password: ['', [Validators.required]]
+        });
+    }
+}

ui/src/app/pages/login/login.page.html

@@ -1,35 +1,37 @@
 <ion-content>
   <div class="flex-center">
-    <ion-card>
-      <ion-card-header>
-        <ion-card-title color="primary">Login</ion-card-title>
-        <ion-card-subtitle color="secondary">Please sign in with your credentials</ion-card-subtitle>
-      </ion-card-header>
-      <ion-card-content>
-        <ion-item fill="solid">
-          <ion-label position="floating">Email</ion-label>
-          <ion-input type="email" ngModel email></ion-input>
-          <ion-note slot="helper">Enter a valid email</ion-note>
-          <ion-note slot="error">Invalid email</ion-note>
-          <ion-note slot="success">Valid email</ion-note>
-        </ion-item>
-        <ion-item fill="solid">
-          <ion-label position="floating">Password</ion-label>
-          <ion-input type="Password" ngModel password></ion-input>
-          <ion-note slot="helper">Choose a secure password</ion-note>
-        </ion-item>  
-        <ion-button fill="clear" >
-          Forgot Email/Password
-        </ion-button>
-        <ion-button size="full">
-          Login
-          <ion-icon slot="end" name="log-in-outline"></ion-icon>
-        </ion-button>
-        <ion-button fill="clear" color="secondary" size="full">
+    <form [formGroup]="form">
+      <ion-card>
+        <ion-card-header>
+          <ion-card-title color="primary">Login</ion-card-title>
+          <ion-card-subtitle color="secondary">Please sign in with your credentials</ion-card-subtitle>
+        </ion-card-header>
+        <ion-card-content>
+          <ion-item fill="solid">
+            <ion-label position="floating">Email</ion-label>
+            <ion-input type="email" formControlName="email"></ion-input>
+            <ion-note slot="helper">Enter a valid email</ion-note>
+            <ion-note slot="error">Invalid email</ion-note>
+            <ion-note slot="success">Valid email</ion-note>
+          </ion-item>
+          <ion-item fill="solid">
+            <ion-label position="floating">Password</ion-label>
+            <ion-input type="Password" formControlName="password"></ion-input>
+            <ion-note slot="helper">Choose a secure password</ion-note>
+          </ion-item>  
+          <ion-button fill="clear" [disabled]="!form.get('email').valid" >
+            Forgot Password
+          </ion-button>
+          <ion-button size="full" [disabled]="!form.valid">
+            Login
+            <ion-icon slot="end" name="log-in-outline"></ion-icon>
+          </ion-button>
+          <ion-button fill="clear" color="secondary" size="full">
           Register
           <ion-icon slot="end" name="create-outline"></ion-icon>
         </ion-button>
       </ion-card-content>
     </ion-card>
+  </form>
   </div>
 </ion-content>

ui/src/app/pages/login/login.page.spec.ts

@@ -1,5 +1,7 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ReactiveFormsModule } from '@angular/forms';
 import { IonicModule } from '@ionic/angular';
+import { AppRoutingModule } from 'src/app/app-routing.module';
 
 import { LoginPage } from './login.page';
 
@@ -10,7 +12,11 @@ describe('LoginPage', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ LoginPage ],
-      imports: [IonicModule.forRoot()]
+      imports: [
+        IonicModule.forRoot(),
+        AppRoutingModule,
+        ReactiveFormsModule
+      ]
     }).compileComponents();
 
     fixture = TestBed.createComponent(LoginPage);
@@ -18,7 +24,9 @@ describe('LoginPage', () => {
     fixture.detectChanges();
   }));
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
+  it('should create form on init', () => {
+    component.ngOnInit();
+
+    expect(component.form).not.toBeUndefined();
   });
 });

ui/src/app/pages/login/login.page.ts

@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { Router } from '@angular/router';
+import { LoginPageForm } from './login.page.form';
 
 @Component({
   selector: 'app-login',
@@ -7,9 +10,12 @@ import { Component, OnInit } from '@angular/core';
 })
 export class LoginPage implements OnInit {
 
-  constructor() { }
+  form: FormGroup;
+
+  constructor(private router: Router, private formBuilder: FormBuilder) { }
 
   ngOnInit() {
+    this.form = new LoginPageForm(this.formBuilder).createForm();
   }
 
 }