修改路径

src/app/view/reset-pwd/reset-pwd.component.html

@@ -0,0 +1,14 @@
+<div style="height: 70%">
+    <div id="main">
+        <div *ngIf="iserror">
+            <nz-alert nzType="error" nzMessage="链接可能被修改了，请重新点击邮箱中的链接，或者重新发送邮件" nzShowIcon>
+            </nz-alert>
+        </div>
+        <div *ngIf="!iserror">
+            <input type="password" placeholder="新密码" [(ngModel)]="pwd"/>
+            <input type="password" placeholder="确认密码" [(ngModel)]="rePwd"/>
+            <button (click)="submit()">提交</button>
+        </div>
+
+    </div>
+</div>

src/app/view/reset-pwd/reset-pwd.component.less

@@ -0,0 +1,29 @@
+#main {
+  background: #ffffff;
+  border-radius: 5px;
+  width: 410px;
+  position: relative;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  padding: 5px;
+
+  button {
+    display: block;
+    border: none;
+    border-radius: 5px;
+    background: #9FFE8E;
+    height: 40px;
+    width: 400px;
+  }
+
+  input {
+    border: none;
+    text-align: center;
+    width: 400px;
+    border-radius: 5px;
+    height: 40px;
+    margin-bottom: 10px;
+    background: #eeeeee
+  }
+}

src/app/view/reset-pwd/reset-pwd.component.spec.ts

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

src/app/view/reset-pwd/reset-pwd.component.ts

@@ -0,0 +1,69 @@
+import {Component, OnInit} from '@angular/core';
+import {NzMessageService} from 'ng-zorro-antd';
+import {ActivatedRoute, Router} from '@angular/router';
+import {ApiService} from '../../api/api.service';
+import {Title} from '@angular/platform-browser';
+
+@Component({
+    selector: 'view-reset-pwd',
+    templateUrl: './reset-pwd.component.html',
+    styleUrls: ['./reset-pwd.component.less']
+})
+export class ResetPwdComponent implements OnInit {
+
+    constructor(private message: NzMessageService,
+                private router: Router,
+                private routerinfo: ActivatedRoute,
+                private apiService: ApiService,
+                private title: Title) {
+        this.title.setTitle('小海博客 | 重置密码 ');
+    }
+
+    pwd: string;
+    rePwd: string;
+
+    private email: string;
+    private verifyId: string;
+
+    iserror: boolean = false;
+
+    ngOnInit(): void {
+        this.email = this.routerinfo.snapshot.queryParams.email;
+        this.verifyId = this.routerinfo.snapshot.queryParams.verifyId;
+        if (this.email == null || this.verifyId == null) {
+            this.iserror = true;
+        }
+    }
+
+    submit() {
+        if (this.pwd == null) {
+            return;
+        }
+        if (this.pwd.length > 16) {
+            this.message.error('密码过长');
+            return;
+        }
+        if (this.pwd.length < 6) {
+            this.message.error('密码过短');
+            return;
+        }
+        if (this.pwd !== this.rePwd) {
+            this.message.warning('两次密码不一致');
+            return;
+        }
+        this.apiService.resetPwd(this.verifyId, this.email, this.pwd).subscribe({
+            next: data => {
+                this.message.success('重置密码成功,5秒后转跳到登录页面。');
+                setTimeout(() => {
+                    this.router.navigateByUrl('/user/login');
+                    // window.location.href = '/login';
+                }, 5000);
+
+            },
+            error: e => {
+                this.message.error(e.msg);
+            }
+        });
+    }
+
+}

src/app/view/reset-pwd/reset-pwd.module.ts

@@ -0,0 +1,25 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {Route, RouterModule} from '@angular/router';
+import {ResetPwdComponent} from './reset-pwd.component';
+import {NzAlertModule} from 'ng-zorro-antd';
+import {FormsModule} from '@angular/forms';
+
+const routes: Route[] = [
+    {path: '**', component: ResetPwdComponent}
+];
+
+
+@NgModule({
+    declarations: [
+        ResetPwdComponent
+    ],
+    imports: [
+        CommonModule,
+        RouterModule.forChild(routes),
+        NzAlertModule,
+        FormsModule
+    ]
+})
+export class ResetPwdModule {
+}