项目初始化

src/app/routes/passport/lock/lock.component.html

@@ -0,0 +1,21 @@
+<div class="ant-card width-lg" style="margin: 0 auto">
+  <div class="ant-card-body">
+    <div class="avatar">
+      <nz-avatar [nzSrc]="user.avatar" nzIcon="user" nzSize="large"></nz-avatar>
+    </div>
+    <form nz-form [formGroup]="f" (ngSubmit)="submit()" role="form" class="mt-md">
+      <nz-form-item>
+        <nz-form-control nzErrorTip="请输入密码！">
+          <nz-input-group nzSuffixIcon="lock">
+            <input type="password" nz-input formControlName="password" />
+          </nz-input-group>
+        </nz-form-control>
+      </nz-form-item>
+      <nz-row nzType="flex" nzAlign="middle">
+        <nz-col [nzOffset]="12" [nzSpan]="12" style="text-align: right">
+          <button nz-button [disabled]="!f.valid" nzType="primary">锁屏</button>
+        </nz-col>
+      </nz-row>
+    </form>
+  </div>
+</div>

src/app/routes/passport/lock/lock.component.less

@@ -0,0 +1,12 @@
+:host ::ng-deep {
+  .ant-card-body {
+    position: relative;
+    margin-top: 80px;
+  }
+  .avatar {
+    position: absolute;
+    top: -20px;
+    left: 50%;
+    margin-left: -20px;
+  }
+}

src/app/routes/passport/lock/lock.component.ts

@@ -0,0 +1,44 @@
+import { Component, Inject } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { DA_SERVICE_TOKEN, ITokenService } from '@delon/auth';
+import { SettingsService, User } from '@delon/theme';
+
+@Component({
+  selector: 'passport-lock',
+  templateUrl: './lock.component.html',
+  styleUrls: ['./lock.component.less']
+})
+export class UserLockComponent {
+  f: FormGroup;
+
+  get user(): User {
+    return this.settings.user;
+  }
+
+  constructor(
+    fb: FormBuilder,
+    @Inject(DA_SERVICE_TOKEN) private tokenService: ITokenService,
+    private settings: SettingsService,
+    private router: Router
+  ) {
+    this.f = fb.group({
+      password: [null, Validators.required]
+    });
+  }
+
+  submit(): void {
+    for (const i in this.f.controls) {
+      this.f.controls[i].markAsDirty();
+      this.f.controls[i].updateValueAndValidity();
+    }
+    if (this.f.valid) {
+      console.log('Valid!');
+      console.log(this.f.value);
+      this.tokenService.set({
+        token: '123'
+      });
+      this.router.navigate(['dashboard']);
+    }
+  }
+}