update

src/app/app.service.ts

@@ -184,6 +184,7 @@ export class AppService {
   login(user: User) {
     this._logger.log('service.ts:AppService,login');
     DataStore.error['login'] = '';
+    this._logger.log(user);
     if (user.username.length > 0 && user.password.length > 6 && user.password.length < 100) {
       this.http.post('/api/checklogin', JSON.stringify(user)).map(res => res.json())
         .subscribe(

src/app/login.component.ts

@@ -5,6 +5,7 @@
 import {Component, OnInit} from '@angular/core';
 import {Logger} from 'angular2-logger/core';
 import {AppService, DataStore, User} from './app.service';
+import {NgForm} from '@angular/forms';
 
 declare let jQuery: any;
 
@@ -26,58 +27,18 @@ export class LoginComponent implements OnInit {
   }
 
 
-  onSubmit() {
-    this._logger.log(DataStore);
-    this._appService.login(this.user);
+  onSubmit(f: NgForm) {
+    if (f.valid) {
+      this.user.username = f.value.email;
+      this.user.password = f.value.password;
+      this._appService.login(this.user);
+    } else {
+      this._logger.error("the form not valid")
+    }
   }
 
   ngOnInit() {
-    jQuery('#form').fadeIn('slow');
-    // this._router.navigate(['login']);
-    // jQuery('nav').hide();
-    const vm = this;
-    window.onresize = function () {
-      if (!DataStore.logined) {
-        vm.background();
-      }
-    };
-
-    this.timer();
-
-  }
 
-  timer() {
-    if (DataStore.windowsize[0] !== document.documentElement.clientWidth ||
-      DataStore.windowsize[1] !== document.documentElement.clientHeight &&
-      !DataStore.logined) {
-      jQuery(window).trigger('resize');
-      DataStore.windowsize = [document.documentElement.clientWidth, document.documentElement.clientHeight];
-    }
-    setTimeout(() => {
-      this.timer();
-    }, 33);
-  }
-
-  background() {
-    const q = jQuery('#q')[0];
-    const width = q.width = document.documentElement.clientWidth;
-    const height = q.height = document.documentElement.clientHeight;
-    const letters = [];
-    for (let i = 0; i < 256; i++) {
-      letters.push(Math.round(Math.random() * i * 33));
-    }
-    const draw = function () {
-      q.getContext('2d').fillStyle = 'rgba(0,0,0,.05)';
-      q.getContext('2d').fillRect(0, 0, width, height);
-      q.getContext('2d').fillStyle = '#0F0';
-      letters.map(function (y_pos, index) {
-        const text = String.fromCharCode(65 + Math.random() * 26);
-        const x_pos = index * 10;
-        q.getContext('2d').fillText(text, x_pos, y_pos);
-        letters[index] = (y_pos > 758 + Math.random() * 1e4) ? 0 : y_pos + 10;
-      });
-    };
-    setInterval(draw, 33);
   }
 
 }

src/app/login.css

-/* login form */
-form {
-  position: relative;
-  width: 300px;
-  margin: auto;
-  background: rgba(130, 130, 130, .3);
-  padding: 20px 22px;
-  border: 1px solid;
-  border-color: rgba(255, 255, 255, .4) rgba(60, 60, 60, .4) rgba(60, 60, 60, .4) rgba(255, 255, 255, .4);
-  z-index: 9;
+body {
+  padding-top: 40px;
+  padding-bottom: 40px;
+  background-color: #eee;
 }
 
-form input, form button {
-  width: 250px;
-  border: 1px solid;
-  border-color: rgba(60, 60, 60, .35) rgba(60, 60, 60, .35) rgba(255, 255, 255, .5) rgba(80, 80, 80, .45);
-  background: rgba(0, 0, 0, .2) no-repeat;
-  padding: 8px 24px 8px 10px;
-  font: bold .875em/1.25em "Monaco", Roboto, sans-serif;
-  letter-spacing: .075em;
-  color: #fff;
-  text-shadow: 0 1px 0 rgba(0, 0, 0, .1);
-  margin-bottom: 19px;
+.form-signin {
+  max-width: 330px;
+  padding: 15px;
+  margin: 0 auto;
 }
-
-form input:focus {
-  background-color: rgba(0, 0, 0, .4);
+.form-signin .form-signin-heading,
+.form-signin .checkbox {
+  margin-bottom: 10px;
 }
-
-.from-group {
+.form-signin .checkbox {
+  font-weight: normal;
+}
+.form-signin .form-control {
   position: relative;
+  height: auto;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  padding: 10px;
+  font-size: 16px;
 }
-
-.form-control-feedback {
-  position: absolute;
-  color: #ffffff;
-  top: 2px;
-  right: 2px;
+.form-signin .form-control:focus {
   z-index: 2;
-  display: block;
-  width: 34px;
-  height: 34px;
-  line-height: 34px;
-  text-align: center;
-  pointer-events: none;
-  font-weight: 400;
-  font-size: 18px;
-}
-
-::-webkit-input-placeholder {
-  color: #ccc;
-  text-transform: uppercase;
-}
-
-::-moz-placeholder {
-  color: #ccc;
-  text-transform: uppercase;
 }
-
-:-ms-input-placeholder {
-  color: #ccc;
-  text-transform: uppercase;
+.form-signin input[type="email"] {
+  margin-bottom: -1px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
 }
-
-form button[type=submit] {
-  width: 250px;
-  margin-bottom: 0;
-  color: greenyellow;
-  letter-spacing: .05em;
-  text-shadow: 0 1px 0 #133d3e;
-  text-transform: uppercase;
-  background: #225556;
-  border-top-color: #9fb5b5;
-  border-left-color: #608586;
-  border-bottom-color: #1b4849;
-  border-right-color: #1e4d4e;
-  cursor: pointer;
+.form-signin input[type="password"] {
+  margin-bottom: 10px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
 }
-
-canvas {
-  position: fixed;
-  top: 0;
-  z-index: 5;
-}
-
-.form {
-  z-index: 9;
-}
-
-.black {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 5;
-  background-color: #000000;
-}
-
-/* login form end */

src/app/login.html

-<div class="black"></div>
-<canvas id="q"></canvas>
-<div class="form">
-  <form (ngSubmit)="onSubmit()">
-    <div class="from-group">
-      <input type="text" name="username" id="username" placeholder="Username" [(ngModel)]="user.username" required>
-      <span class="fa fa-user-secret form-control-feedback"></span>
-    </div>
-    <div class="from-group">
-      <input type="password" name="password" id="password" placeholder="password" [(ngModel)]="user.password" required
-             (ngEnter)="onSubmit()">
-      <span class="fa fa-key form-control-feedback"></span>
-    </div>
-    <button type="submit">login to your account</button>
-  </form>
-</div>
+<form class="form-signin" #f="ngForm" (ngSubmit)="onSubmit(f)">
+  <h2 class="form-signin-heading">Please sign in</h2>
+  <label for="inputEmail" class="sr-only">Email address</label>
+  <input type="email" id="inputEmail" class="form-control" placeholder="Email address"
+         name="email" ngModel #email="ngModel" required autofocus pattern="^\w+([.-]?\w+)*@\w+([.-]?\w+)*(.\w{2,3})+$">
+  <label for="inputPassword" class="sr-only">Password</label>
+  <input type="password" id="inputPassword" class="form-control" placeholder="Password" required
+         name="password" ngModel #password="ngModel" (ngEnter)="onSubmit(f)">
+  <div class="checkbox">
+    <label>
+      <input type="checkbox" value="remember-me"> Remember me
+    </label>
+  </div>
+  <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
+</form>

src/index.html

@@ -9,7 +9,8 @@
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 <body>
-<app-root></app-root>
-
+<div class="container">
+  <app-root></app-root>
+</div>
 </body>
 </html>