-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
♻ refactor️(login): 优化登录页面布局和样式，增强代码可读性
本次重构主要集中在登录页面的HTML和SCSS文件，调整了布局以达到更好的视觉效果， 同时清理了一些冗余的代码，提高了代码的可读性和可维护性。具体改动包括： - 重新安排了社交登录和注册账号的按钮排布，使用更合理的grid布局。 - 为图标添加了title属性，提升了可访问性。 - 调整了登录卡片的宽度，提供了更好的填写表单体验。 - 在SCSS中修正了一些混合方法的使用，规整了样式定义。 此外，还更新了登录组件的typescript定义，增强了类型检查。登录逻辑及相关服务 未做调整，保持了功能的稳定性。
- Loading branch information
Showing
4 changed files
with
40 additions
and
33 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
51 changes: 28 additions & 23 deletions
51
ui/projects/web/src/pages/security/login/login.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,64 +1,69 @@ | ||
| 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<string | null>, | ||
| password: FormControl<string | null>, | ||
| rememberMe: FormControl<boolean | null> | ||
| username: FormControl<string | null>; | ||
| password: FormControl<string | null>; | ||
| rememberMe: FormControl<boolean | null>; | ||
| }>; | ||
|
|
||
| private _subject: Subject<void> = new Subject<void>(); | ||
| private componentDestroyed$: Subject<void> = new Subject<void>(); | ||
|
|
||
| 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), | ||
| }); | ||
| } | ||
|
|
||
| ngOnInit(): void { | ||
| } | ||
|
|
||
| ngOnDestroy(): void { | ||
| this._subject.next(); | ||
| this._subject.complete(); | ||
| this.componentDestroyed$.next(); | ||
| this.componentDestroyed$.complete(); | ||
| } | ||
| } |