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(); } }