Skip to content

Commit b0beeab

Browse files
noatgnunoatgnu
committed
update
1 parent 26f3c23 commit b0beeab

File tree

5 files changed

+805
-607
lines changed

5 files changed

+805
-607
lines changed

‎src/app/accounts/login-dialog/login-dialog.component.html‎

Lines changed: 34 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,34 @@
1-
<h2 mat-dialog-title>Login</h2>
2-
<mat-dialog-content>
3-
<form [formGroup]="form" style="display: flex; flex-direction: column">
4-
<mat-form-field>
5-
<input matInput type="text" class="form-control" formControlName="username" id="username">
6-
<mat-label>Username</mat-label>
7-
</mat-form-field>
8-
<mat-form-field>
9-
<input matInput type="password" class="form-control" formControlName="password" id="password">
10-
<mat-label>Password</mat-label>
11-
</mat-form-field>
12-
</form>
13-
</mat-dialog-content>
14-
<mat-dialog-actions>
15-
<button mat-button (click)="login()">Login</button>
16-
<button mat-button (click)="close()">Close</button>
17-
<button mat-button (click)="connectKeycloak()">Keycloak</button>
18-
</mat-dialog-actions>
1+
<h2 mat-dialog-title>Login</h2>
2+
<mat-dialog-content>
3+
<form [formGroup]="form" style="display: flex; flex-direction: column">
4+
<mat-form-field>
5+
<input matInput type="text" class="form-control" formControlName="username" id="username">
6+
<mat-label>Username</mat-label>
7+
@if (form.get('username')?.invalid && form.get('username')?.touched) {
8+
<mat-error>Username is required</mat-error>
9+
}
10+
</mat-form-field>
11+
<mat-form-field>
12+
<input matInput type="password" class="form-control" formControlName="password" id="password">
13+
<mat-label>Password</mat-label>
14+
@if (form.get('password')?.invalid && form.get('password')?.touched) {
15+
<mat-error>Password is required</mat-error>
16+
}
17+
</mat-form-field>
18+
@if (loginError) {
19+
<div class="error-message">{{loginError}}</div>
20+
}
21+
</form>
22+
</mat-dialog-content>
23+
<mat-dialog-actions>
24+
<button mat-button (click)="login()" [disabled]="isLoading || form.invalid">
25+
@if (isLoading) {
26+
<mat-spinner diameter="20"></mat-spinner>
27+
<span>Logging in...</span>
28+
} @else {
29+
Login
30+
}
31+
</button>
32+
<button mat-button (click)="close()" [disabled]="isLoading">Close</button>
33+
<button mat-button (click)="connectKeycloak()" [disabled]="isLoading">Keycloak</button>
34+
</mat-dialog-actions>

‎src/app/accounts/login-dialog/login-dialog.component.ts‎

Lines changed: 94 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,94 @@
1-
import { Component } from '@angular/core';
2-
import {AccountsService} from "../accounts.service";
3-
import {FormBuilder, FormControl, ReactiveFormsModule, Validators} from "@angular/forms";
4-
import {MatDialogActions, MatDialogContent, MatDialogRef, MatDialogTitle} from "@angular/material/dialog";
5-
import {MatFormField, MatLabel} from "@angular/material/form-field";
6-
import {MatInput} from "@angular/material/input";
7-
import {MatButton} from "@angular/material/button";
8-
import {WebService} from "../../web.service";
9-
10-
@Component({
11-
selector: 'app-login-dialog',
12-
imports: [
13-
MatDialogTitle,
14-
MatDialogContent,
15-
ReactiveFormsModule,
16-
MatFormField,
17-
MatInput,
18-
MatDialogActions,
19-
MatButton,
20-
MatLabel,
21-
],
22-
templateUrl: './login-dialog.component.html',
23-
styleUrl: './login-dialog.component.scss'
24-
})
25-
export class LoginDialogComponent {
26-
27-
form = this.fb.group({
28-
username: new FormControl('', Validators.required),
29-
password: new FormControl('', Validators.required),
30-
})
31-
32-
constructor(private accounts: AccountsService, private fb: FormBuilder, private dialogRef: MatDialogRef<LoginDialogComponent>, private web: WebService) {
33-
34-
}
35-
36-
close() {
37-
this.dialogRef.close()
38-
}
39-
40-
login() {
41-
if (this.form.invalid) {
42-
return
43-
}
44-
if (this.form.value.username && this.form.value.password) {
45-
this.accounts.login(this.form.value.username, this.form.value.password).subscribe(
46-
(data) => {
47-
this.accounts.loggedIn = true
48-
this.accounts.userAccount.token = data.token
49-
// @ts-ignore
50-
this.accounts.userAccount.username = this.form.value.username
51-
this.accounts.saveToStorage()
52-
this.dialogRef.close()
53-
this.web.getCurrentUser().subscribe((data) => {
54-
if (data) {
55-
this.accounts.currentUser = data
56-
}
57-
})
58-
},
59-
(error) => {
60-
console.log(error)
61-
}
62-
)
63-
}
64-
}
65-
66-
connectKeycloak() {
67-
this.web.getLoginProviderRedirect()
68-
}
69-
70-
}
1+
import { Component } from '@angular/core';
2+
import { AccountsService } from "../accounts.service";
3+
import { FormBuilder, FormControl, ReactiveFormsModule, Validators } from "@angular/forms";
4+
import { MatDialogActions, MatDialogContent, MatDialogRef, MatDialogTitle } from "@angular/material/dialog";
5+
import { MatFormField, MatLabel, MatError } from "@angular/material/form-field";
6+
import { MatInput } from "@angular/material/input";
7+
import { MatButton } from "@angular/material/button";
8+
import { MatProgressSpinner } from "@angular/material/progress-spinner";
9+
import { WebService } from "../../web.service";
10+
import { finalize, catchError } from "rxjs/operators";
11+
import { of } from "rxjs";
12+
13+
@Component({
14+
selector: 'app-login-dialog',
15+
imports: [
16+
MatDialogTitle,
17+
MatDialogContent,
18+
ReactiveFormsModule,
19+
MatFormField,
20+
MatInput,
21+
MatDialogActions,
22+
MatButton,
23+
MatLabel,
24+
MatError,
25+
MatProgressSpinner
26+
],
27+
templateUrl: './login-dialog.component.html',
28+
styleUrl: './login-dialog.component.scss'
29+
})
30+
export class LoginDialogComponent {
31+
form = this.fb.group({
32+
username: new FormControl('', [Validators.required]),
33+
password: new FormControl('', [Validators.required])
34+
});
35+
36+
isLoading = false;
37+
loginError: string | null = null;
38+
39+
constructor(
40+
private accounts: AccountsService,
41+
private fb: FormBuilder,
42+
private dialogRef: MatDialogRef<LoginDialogComponent>,
43+
private web: WebService
44+
) {}
45+
46+
close() {
47+
this.dialogRef.close();
48+
}
49+
50+
login() {
51+
if (this.form.invalid) {
52+
this.form.markAllAsTouched();
53+
return;
54+
}
55+
56+
const username = this.form.value.username;
57+
const password = this.form.value.password;
58+
59+
if (username && password) {
60+
this.isLoading = true;
61+
this.loginError = null;
62+
63+
this.accounts.login(username, password).pipe(
64+
catchError(error => {
65+
this.loginError = error.status === 401 ?
66+
'Invalid username or password' :
67+
'Login failed. Please try again.';
68+
return of(null);
69+
}),
70+
finalize(() => this.isLoading = false)
71+
).subscribe(data => {
72+
if (data) {
73+
this.accounts.loggedIn = true;
74+
this.accounts.userAccount.token = data.token;
75+
this.accounts.userAccount.username = username;
76+
this.accounts.saveToStorage();
77+
this.dialogRef.close(true);
78+
79+
this.web.getCurrentUser().subscribe(userData => {
80+
if (userData) {
81+
this.accounts.currentUser = userData;
82+
}
83+
});
84+
}
85+
});
86+
}
87+
}
88+
89+
connectKeycloak() {
90+
this.isLoading = true;
91+
this.loginError = null;
92+
this.web.getLoginProviderRedirect();
93+
}
94+
}

0 commit comments

Comments
 (0)