add login

src/app/app-routing.module.ts

@@ -2,11 +2,13 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { MainComponent } from './main/main.component';
 import { VideoComponent } from './video/video.component';
+import { LoginComponent } from './login/login.component';
 
 const routes: Routes = [
-  {path:"",redirectTo:"home",pathMatch:'full'},
+  {path:"",redirectTo:"login",pathMatch:'full'},
   {path:'home',component:MainComponent},
   {path:'video',component:VideoComponent},
+  {path:'login',component:LoginComponent},
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -6,20 +6,22 @@ import { AppComponent } from './app.component';
 import { MainComponent } from './main/main.component';
 import { VideoComponent } from './video/video.component';
 import { BaiduMapModule } from 'angular2-baidu-map';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ModalComponent } from './modal/modal.component';
 import { ApiModule } from './api';
 import { HttpClientModule } from '@angular/common/http';
 import { ColorPickerModule } from 'ngx-color-picker';
 import { NgZorroAntdModule, NZ_I18N, zh_CN,NzIconModule } from 'ng-zorro-antd';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { LoginComponent } from './login/login.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     MainComponent,
     VideoComponent,
-    ModalComponent
+    ModalComponent,
+    LoginComponent
   ],
   imports: [
    
@@ -30,6 +32,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
     ColorPickerModule,
     BrowserAnimationsModule,
     FormsModule,
+    ReactiveFormsModule,
     ApiModule,
     NzIconModule,
        /** 导入 ng-zorro-antd 模块 **/

src/app/login/login.component.html

+<div class="main">
+<div></div>
+
+<form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
+    <nz-form-item>
+     <h1 style="color:white;">登录</h1>
+      </nz-form-item>
+  <nz-form-item>
+    <nz-form-control nzErrorTip="请输入用户名!">
+      <nz-input-group nzPrefixIcon="user">
+        <input type="text" nz-input formControlName="userName" placeholder="用户名" />
+      </nz-input-group>
+    </nz-form-control>
+  </nz-form-item>
+  <nz-form-item>
+    <nz-form-control nzErrorTip="请输入密码!">
+      <nz-input-group nzPrefixIcon="lock">
+        <input type="password" nz-input formControlName="password" placeholder="密码" />
+      </nz-input-group>
+    </nz-form-control>
+  </nz-form-item>
+  <nz-form-item>
+    <nz-form-control>
+      <label nz-checkbox formControlName="remember">
+        <span style="color:white;">记住我</span>
+      </label>
+      <!-- <a class="login-form-forgot" class="login-form-forgot">忘记密码</a> -->
+    
+      
+    </nz-form-control>
+  </nz-form-item>
+  <nz-form-item>
+    <nz-form-control>
+  
+      <!-- <a class="login-form-forgot" class="login-form-forgot">忘记密码</a> -->
+      <button nz-button class="login-form-button" [nzType]="'primary'">登录</button>
+      
+    </nz-form-control>
+  </nz-form-item>
+</form>
+</div>
\ No newline at end of file

src/app/login/login.component.less

+.main{
+    display: grid;
+    grid-template-columns: 70% 30%;
+    background:url('/assets/blue.png');
+    min-height: 728px;
+    background-size:cover;
+    grid-template-rows: 86vh;
+}
+form{
+    text-align: center;
+    margin: 10em;
+    background: #13151591;
+    padding: 2em;
+}
+:host {
+  display: block;
+  margin: 0 auto;
+  ::ng-deep {
+    .ant-tabs .ant-tabs-bar {
+      margin-bottom: 24px;
+      text-align: center;
+      border-bottom: 0;
+    }
+    .ant-tabs-tab {
+      font-size: 16px;
+      line-height: 24px;
+    }
+    .ant-input-affix-wrapper .ant-input:not(:first-child) {
+      padding-left: 34px;
+    }
+    .icon {
+      margin-left: 16px;
+      color: rgba(0, 0, 0, 0.2);
+      font-size: 24px;
+      vertical-align: middle;
+      cursor: pointer;
+      transition: color 0.3s;
+    
+    }
+    .other {
+      margin-top: 24px;
+      line-height: 22px;
+      text-align: left;
+      nz-tooltip {
+        vertical-align: middle;
+      }
+      .register {
+        float: right;
+      }
+    }
+  }
+}

src/app/login/login.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginComponent } from './login.component';
+
+describe('LoginComponent', () => {
+  let component: LoginComponent;
+  let fixture: ComponentFixture<LoginComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LoginComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/login/login.component.ts

+
+import { Component, OnDestroy, Inject, Optional, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { NzMessageService, NzModalService } from 'ng-zorro-antd';
+import { HttpClient } from '@angular/common/http';
+import { DefaultService } from '../api';
+
+
+
+
+@Component({
+  selector: 'passport-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.less'],
+
+})
+export class LoginComponent implements OnInit {
+  validateForm: FormGroup;
+
+  submitForm(): void {
+    for (const i in this.validateForm.controls) {
+      this.validateForm.controls[i].markAsDirty();
+      this.validateForm.controls[i].updateValueAndValidity();
+    }
+    if(this.validateForm.valid){
+        this.http.post(this.s.basePath+"/user/login", this.validateForm.value).subscribe();
+    }
+  }
+
+  constructor(private fb: FormBuilder,private http:HttpClient,private s:DefaultService) {}
+
+  ngOnInit(): void {
+    this.validateForm = this.fb.group({
+      userName: [null, [Validators.required]],
+      password: [null, [Validators.required]],
+      remember: [true]
+    });
+  }
+}

src/assets/outline/lock.svg

+<svg viewBox="64 64 896 896" fill="currentColor" width="1em" height="1em" data-icon="lock" aria-hidden="true"><path d="M832 464h-68V240c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32zM332 240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v224H332V240zm460 600H232V536h560v304zM484 701v53c0 4.4 3.6 8 8 8h40c4.4 0 8-3.6 8-8v-53a48.01 48.01 0 1 0-56 0z"></path></svg>
\ No newline at end of file

src/assets/outline/user.svg

+<svg viewBox="64 64 896 896" fill="currentColor" width="1em" height="1em" data-icon="user" aria-hidden="true"><path d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg>
\ No newline at end of file