From 2ba18109cdd98a9d523326b057fdf0968441f203 Mon Sep 17 00:00:00 2001
From: nixa <4dmitr@gmail.com>
Date: Thu, 16 Jun 2016 12:11:28 +0300
Subject: [PATCH] feat(login): add angular 2 form logic

---
 src/app/pages/login/login.component.ts | 24 +++++++++++++++++++++---
 src/app/pages/login/login.html         | 14 +++++++-------
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/src/app/pages/login/login.component.ts b/src/app/pages/login/login.component.ts
index a47c295f..69c2ed07 100644
--- a/src/app/pages/login/login.component.ts
+++ b/src/app/pages/login/login.component.ts
@@ -1,5 +1,5 @@
 import {Component, ViewEncapsulation} from '@angular/core';
-
+import {FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators, AbstractControl} from '@angular/common';
 
 @Component({
   selector: 'login',
@@ -10,9 +10,27 @@ import {Component, ViewEncapsulation} from '@angular/core';
 })
 export class Login {
 
-  constructor() {
+  public form:ControlGroup;
+  public email:AbstractControl;
+  public password:AbstractControl;
+  public submitted:boolean = false;
+
+  constructor(fb:FormBuilder) {
+    this.form = fb.group({
+      'email': ['', Validators.compose([Validators.required, Validators.minLength(4)])],
+      'password': ['', Validators.compose([Validators.required, Validators.minLength(4)])]
+    });
+
+    this.email = this.form.controls['email'];
+    this.password = this.form.controls['password'];
   }
 
-  ngOnInit() {
+
+  public onSubmit(values:Object):void {
+    this.submitted = true;
+    if (this.form.valid) {
+      // your code goes here
+      // console.log(values);
+    }
   }
 }
diff --git a/src/app/pages/login/login.html b/src/app/pages/login/login.html
index 9d2bf283..9bedac1a 100644
--- a/src/app/pages/login/login.html
+++ b/src/app/pages/login/login.html
@@ -1,26 +1,26 @@
 <div class="auth-main">
   <div class="auth-block">
-    <h1>Sign in to Blur Admin</h1>
+    <h1>Sign in to ng2-admin</h1>
     <a [routerLink]="['Register']" class="auth-link">New to ng2-admin? Sign up!</a>
 
-    <form class="form-horizontal">
-      <div class="form-group row">
+    <form [ngFormModel]="form" (ngSubmit)="onSubmit(form.value)" class="form-horizontal">
+      <div class="form-group row" [ngClass]="{'has-error': (!email.valid && email.touched), 'has-success': (email.valid && email.touched)}">
         <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
 
         <div class="col-sm-10">
-          <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
+          <input [ngFormControl]="email" type="email" class="form-control" id="inputEmail3" placeholder="Email">
         </div>
       </div>
-      <div class="form-group row">
+      <div class="form-group row" [ngClass]="{'has-error': (!password.valid && password.touched), 'has-success': (password.valid && password.touched)}">
         <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
 
         <div class="col-sm-10">
-          <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
+          <input [ngFormControl]="password" type="password" class="form-control" id="inputPassword3" placeholder="Password">
         </div>
       </div>
       <div class="form-group row">
         <div class="col-sm-offset-2 col-sm-10">
-          <button type="submit" class="btn btn-default btn-auth">Sign in</button>
+          <button [disabled]="!form.valid" type="submit" class="btn btn-default btn-auth">Sign in</button>
           <a [routerLink]="['Login']" class="forgot-pass">Forgot password?</a>
         </div>
       </div>