feat(用户模块): 完善登录界面和验证跳转行为

src/app/feature/user/login/login.component.html

@@ -1,14 +1,41 @@
-<p>
-  login works!
-</p>
-
-
-<div>
-  <input type="text" name="" id="" placeholder="admin">
-</div>
-<div>
-  <input type="password" name="" id="" placeholder="123456">
-</div>
-<div>
-  <button (click)="login()">提交</button>
-</div>
+<form sim-form [formGroup]="loginValidateForm" novalidate (ngSubmit)="save($event, loginValidateForm)">
+  <sim-form-item>
+    <ng-template #control>
+      <div sim-form-item-control hasFeedback="true">
+        <sim-input formControlName="username" placeHolder="用户名 admin/user" size="lg">
+          <ng-template #prefix>
+            <i class="icon-user"></i>
+          </ng-template>
+        </sim-input>
+        <sim-form-explain *ngIf="loginValidateForm.controls.username.dirty">
+          <ng-container *ngIf="loginValidateForm.controls.username.hasError('required')">
+            请输入登录名！
+          </ng-container>
+          <ng-container *ngIf="loginValidateForm.controls.username.hasError('minlength') || loginValidateForm.controls.username.hasError('maxlength')">
+            登录名长度2-20之间
+          </ng-container>
+        </sim-form-explain>
+      </div>
+    </ng-template>
+  </sim-form-item>
+  <sim-form-item>
+    <ng-template #control>
+      <div sim-form-item-control hasFeedback="true">
+        <sim-input type="password" formControlName="password" placeHolder="密码 888888/123456" size="lg">
+          <ng-template #prefix>
+            <i class="icon-lock"></i>
+          </ng-template>
+        </sim-input>
+        <sim-form-explain *ngIf="loginValidateForm.controls.password.dirty">
+          <ng-container *ngIf="loginValidateForm.controls.password.hasError('required')">
+            请输入密码！
+          </ng-container>
+          <ng-container *ngIf="loginValidateForm.controls.password.hasError('minlength') || loginValidateForm.controls.password.hasError('maxlength')">
+            密码长度6-32之间
+          </ng-container>
+        </sim-form-explain>
+      </div>
+    </ng-template>
+  </sim-form-item>
+  <button type="submit" sim-button color="primary" shape="block" [disabled]="loading">登录</button>
+</form>

src/app/feature/user/login/login.component.scss

@@ -0,0 +1,2 @@
+
+

src/app/feature/user/login/login.component.ts

@@ -1,22 +1,88 @@
 import { Component, OnInit } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Router } from '@angular/router';
-
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/operator/filter';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 
 @Component({
   selector: 'app-login',
   templateUrl: './login.component.html',
   styleUrls: ['./login.component.scss']
 })
 export class LoginComponent implements OnInit {
-
-  constructor(private _router: Router) { }
+  loading: boolean;
+  loginValidateForm: FormGroup;
+  _target: Array<any>;
+  messages: string;
+  display: boolean;
+  constructor(
+    private fb: FormBuilder,
+    private router: Router,
+  ) { }
 
   ngOnInit() {
+    this._target = this._parsingUrl(this.router.routerState.root.queryParams['value'].target);
+    this.loginValidateForm = this.fb.group({
+      'username': ['', Validators.compose([Validators.required, Validators.minLength(2), Validators.maxLength(20)])],
+      'password': ['', Validators.compose([Validators.required, Validators.minLength(6), Validators.maxLength(32)])]
+    });
+  }
+
+  /**
+   * 解析需要跳转的目标url地址
+   * @private
+   * @param {string} url
+   * @returns {Array<any>}
+   * @memberof LoginComponent
+   */
+  private _parsingUrl(url: string): Array<any> {
+    if (!url) {
+      return [];
+    }
+    if (url.indexOf('?') === -1) {
+      return [[url], { queryParams: {} }];
+    }
+    const pattern = /(\w+)=(\w+)/ig;
+    const parames: any = {};
+    url.replace(pattern, (a, b, c) => {
+      parames[b] = c;
+      return '';
+    });
+    return [[url.split('?')[0]], { queryParams: parames }];
+  }
+
+  /** 登录 */
+  save(event: Event, form) {
+    event.preventDefault();
+    for (const i of Object.keys(this.loginValidateForm.controls)) {
+      this.loginValidateForm.controls[i].markAsDirty();
+    }
+    if (!form.valid) {
+      return;
+    }
+    if (this.loading) {
+      return;
+    }
+    this.loading = true;
+    if (this.login(form.value)) {
+      this.router.navigate(['/']);
+    } else {
+      alert('账号或密码不对');
+      this.loading = false;
+    }
   }
 
-  login() {
-    localStorage.setItem('currentUser', JSON.stringify({ username: 'admin' }));
-    this._router.navigate(['/dashboard/analysis']);
+  /**
+   * 模拟验证登录
+   */
+  private login(body) {
+    if (body.username === 'admin') {
+      return body.password === '888888';
+    }
+    if (body.username === 'user') {
+      return body.password === '123456';
+    }
+    return false;
   }
 }