From aeeeeabdc0fefb3e02f111328b85bf16c8338a38 Mon Sep 17 00:00:00 2001
From: AlexBob <5199840@qq.com>
Date: Wed, 12 Jun 2024 10:34:29 +0800
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=20refactor=EF=B8=8F(login):=20?=
=?UTF-8?q?=E4=BC=98=E5=8C=96=E7=99=BB=E5=BD=95=E9=A1=B5=E9=9D=A2=E5=B8=83?=
=?UTF-8?q?=E5=B1=80=E5=92=8C=E6=A0=B7=E5=BC=8F=EF=BC=8C=E5=A2=9E=E5=BC=BA?=
=?UTF-8?q?=E4=BB=A3=E7=A0=81=E5=8F=AF=E8=AF=BB=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
本次重构主要集中在登录页面的HTML和SCSS文件，调整了布局以达到更好的视觉效果，
同时清理了一些冗余的代码，提高了代码的可读性和可维护性。具体改动包括：
- 重新安排了社交登录和注册账号的按钮排布，使用更合理的grid布局。
- 为图标添加了title属性，提升了可访问性。
- 调整了登录卡片的宽度，提供了更好的填写表单体验。
- 在SCSS中修正了一些混合方法的使用，规整了样式定义。
此外，还更新了登录组件的typescript定义，增强了类型检查。登录逻辑及相关服务
未做调整，保持了功能的稳定性。
---
ui/projects/web/src/index.html | 1 -
.../pages/security/login/login.component.html | 14 ++---
.../pages/security/login/login.component.scss | 7 ++-
.../pages/security/login/login.component.ts | 51 ++++++++++---------
4 files changed, 40 insertions(+), 33 deletions(-)
diff --git a/ui/projects/web/src/index.html b/ui/projects/web/src/index.html
index 29e62abd..ab638a6d 100644
--- a/ui/projects/web/src/index.html
+++ b/ui/projects/web/src/index.html
@@ -6,7 +6,6 @@
Loading page ....
-
diff --git a/ui/projects/web/src/pages/security/login/login.component.html b/ui/projects/web/src/pages/security/login/login.component.html
index 29bb0ea5..f7c645e2 100644
--- a/ui/projects/web/src/pages/security/login/login.component.html
+++ b/ui/projects/web/src/pages/security/login/login.component.html
@@ -53,14 +53,14 @@
-
diff --git a/ui/projects/web/src/pages/security/login/login.component.scss b/ui/projects/web/src/pages/security/login/login.component.scss
index a0aa4250..26760aec 100644
--- a/ui/projects/web/src/pages/security/login/login.component.scss
+++ b/ui/projects/web/src/pages/security/login/login.component.scss
@@ -5,16 +5,19 @@
.page {
background-image: url(https://bing.biturl.top/?resolution=1920&format=image&index=0&mkt=zh-CN),
- url('/assets/th.jpg'), linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5));
+ url("/assets/th.jpg"),
+ linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5));
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.card {
- width: 25rem;
+ width: 28rem;
}
.bi {
font-size: 1.5rem;
+ margin-left: 0.1rem;
+ margin-right: 0.1rem;
}
diff --git a/ui/projects/web/src/pages/security/login/login.component.ts b/ui/projects/web/src/pages/security/login/login.component.ts
index 09c581ba..c8f4e964 100644
--- a/ui/projects/web/src/pages/security/login/login.component.ts
+++ b/ui/projects/web/src/pages/security/login/login.component.ts
@@ -1,56 +1,61 @@
import {Component, OnDestroy, OnInit} from '@angular/core';
-import {FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms";
-import {Credentials, LoginService} from "./login.service";
-import {ActivatedRoute, Router} from "@angular/router";
-import {Subject, takeUntil} from "rxjs";
+import {FormBuilder, FormControl, FormGroup, Validators,} from '@angular/forms';
+import {Credentials, LoginService} from './login.service';
+import {ActivatedRoute, Router} from '@angular/router';
+import {Subject, takeUntil} from 'rxjs';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
- styleUrls: ['./login.component.scss']
+ styleUrls: ['./login.component.scss'],
})
export class LoginComponent implements OnInit, OnDestroy {
-
loginForm: FormGroup<{
- username: FormControl,
- password: FormControl,
- rememberMe: FormControl
+ username: FormControl;
+ password: FormControl;
+ rememberMe: FormControl;
}>;
- private _subject: Subject = new Subject();
+ private componentDestroyed$: Subject = new Subject();
- constructor(private router: Router,
- private route: ActivatedRoute,
- private formBuilder: FormBuilder,
- private loginService: LoginService) {
+ constructor(
+ private router: Router,
+ private route: ActivatedRoute,
+ private formBuilder: FormBuilder,
+ private loginService: LoginService
+ ) {
this.loginForm = this.formBuilder.group({
username: new FormControl('', [
Validators.required,
Validators.minLength(5),
- Validators.maxLength(64)
+ Validators.maxLength(64),
]),
password: new FormControl('', [
Validators.required,
Validators.minLength(6),
- Validators.maxLength(64)
+ Validators.maxLength(64),
]),
- rememberMe: new FormControl(false)
+ rememberMe: new FormControl(false),
});
}
onSubmit(): void {
const credentials: Credentials = {
username: this.loginForm.value.username,
- password: this.loginForm.value.password
+ password: this.loginForm.value.password,
};
if (this.loginForm.value.rememberMe) {
this.loginService.rememberMe(credentials);
}
const login = this.loginService.login(credentials);
- const result = login.pipe(takeUntil(this._subject));
- result.subscribe(() => {
- this.router.navigate(['/home'], {relativeTo: this.route}).then();
+ const result = login.pipe(takeUntil(this.componentDestroyed$));
+ result.subscribe({
+ next: (v) => {
+ console.log(v);
+ this.router.navigate(['/home'], {relativeTo: this.route}).then();
+ },
+ error: (e) => console.log(e),
});
}
@@ -58,7 +63,7 @@ export class LoginComponent implements OnInit, OnDestroy {
}
ngOnDestroy(): void {
- this._subject.next();
- this._subject.complete();
+ this.componentDestroyed$.next();
+ this.componentDestroyed$.complete();
}
}