florian/codiki-hexagonal
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Add disconnection and minor improvements on login page.

Browse Source
This commit is contained in:
Florian THIERRY
2024-03-27 12:15:41 +01:00
parent 13c2cc8118
commit 0900df463a
14 changed files with 193 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/pages/disconnection/disconnection.component.html Normal file
View File

@@ -0,0 +1,2 @@
<h1>Disconnection...</h1>
<mat-spinner></mat-spinner>

6
frontend/src/app/pages/disconnection/disconnection.component.scss Normal file
View File

@@ -0,0 +1,6 @@
:host {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

21
frontend/src/app/pages/disconnection/disconnection.component.ts Normal file
View File

@@ -0,0 +1,21 @@
import { Component, OnInit, inject } from '@angular/core';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import { AuthenticationService } from '../../core/service/authentication.service';
import { Router } from '@angular/router';
@Component({
selector: 'app-disconnection',
standalone: true,
imports: [MatProgressSpinnerModule],
templateUrl: './disconnection.component.html',
styleUrl: './disconnection.component.scss'
})
export class DisconnectionComponent implements OnInit {
private authenticationService = inject(AuthenticationService);
private router = inject(Router);
ngOnInit(): void {
this.authenticationService.unauthenticate();
this.router.navigate(['/home']);
}
}

2
frontend/src/app/pages/home/home.component.html
View File

@@ -1 +1 @@
<p>home works!</p>
<h1>Welcome to Codiki application!</h1>

6
frontend/src/app/pages/home/home.component.scss
View File

@@ -0,0 +1,6 @@
:host {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

6
frontend/src/app/pages/login/login.component.html
View File

@@ -4,7 +4,7 @@
<label for="email">
Email address
</label>
<input type="email" formControlName="email" required />
<input type="email" formControlName="email" autocomplete="email" required />
</div>
<div>
<label for="password">
@@ -12,5 +12,7 @@
</label>
<input type="password" formControlName="password" required />
</div>
<button type="submit">Send</button>
<div class="actions">
<button type="submit">Send</button>
</div>
</form>

37
frontend/src/app/pages/login/login.component.scss
View File

@@ -0,0 +1,37 @@
:host {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
form {
min-width: 40em;
max-width: 90%;
display: flex;
flex-direction: column;
justify-content: center;
gap: .5em;
div {
display: flex;
gap: .5em;
&.actions {
justify-content: end;
button {
width: 10em;
height: 2em;
}
}
label {
flex: 1 30%;
}
input {
flex: 1 70%;
}
}
}
}

119
frontend/src/app/pages/login/login.service.ts
View File

@@ -1,76 +1,81 @@
import { Injectable, inject } from "@angular/core";
import { BehaviorSubject, Observable } from "rxjs";
import { copy } from "../../core/utils/ObjectUtils";
import { FormError } from "../../core/model/FormError";
import { UserRestService } from "../../core/rest-services/user.rest-service";
import { LoginRequest } from "../../core/rest-services/model/login.model";
import { AuthenticationService } from "../../core/service/authentication.service";
import { MatSnackBar } from "@angular/material/snack-bar";
import { Router } from "@angular/router";
import { Injectable, inject } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { copy } from '../../core/utils/ObjectUtils';
import { FormError } from '../../core/model/FormError';
import { UserRestService } from '../../core/rest-services/user.rest-service';
import { LoginRequest } from '../../core/rest-services/model/login.model';
import { AuthenticationService } from '../../core/service/authentication.service';
import { MatSnackBar } from '@angular/material/snack-bar';
import { Router } from '@angular/router';
export interface LoginState {
request: LoginRequest;
errors: FormError[]
request: LoginRequest;
errors: FormError[];
}
const DEFAULT_STATE: LoginState = {
request: {
email: undefined,
password: undefined
},
errors: []
}
request: {
email: undefined,
password: undefined,
},
errors: [],
};
@Injectable()
export class LoginService {
private stateSubject = new BehaviorSubject<LoginState>(copy(DEFAULT_STATE));
private userRestService = inject(UserRestService);
private authenticationService = inject(AuthenticationService);
private snackBar = inject(MatSnackBar);
private router = inject(Router);
get state$(): Observable<LoginState> {
return this.stateSubject.asObservable();
}
private stateSubject = new BehaviorSubject<LoginState>(copy(DEFAULT_STATE));
private userRestService = inject(UserRestService);
private authenticationService = inject(AuthenticationService);
private snackBar = inject(MatSnackBar);
private router = inject(Router);
private get state(): LoginState {
return this.stateSubject.value;
}
get state$(): Observable<LoginState> {
return this.stateSubject.asObservable();
}
private save(newState: LoginState): void {
this.stateSubject.next(newState);
}
private get state(): LoginState {
return this.stateSubject.value;
}
editEmail(newEmail: string): void {
const state = this.state;
private save(newState: LoginState): void {
this.stateSubject.next(newState);
}
state.request.email = newEmail;
editEmail(newEmail: string): void {
const state = this.state;
this.save(state);
}
state.request.email = newEmail;
editPassword(newPassword: string): void {
const state = this.state;
this.save(state);
}
state.request.password = newPassword;
editPassword(newPassword: string): void {
const state = this.state;
this.save(state);
}
state.request.password = newPassword;
performLogin(): void {
const state = this.state;
this.save(state);
}
// Check state is valid
performLogin(): void {
const state = this.state;
this.userRestService.login(state.request)
.then(response => {
this.authenticationService.authenticate(response.accessToken);
this.snackBar.open('Authentication succeeded!', 'Close', { duration: 5000 });
this.router.navigate(['/home']);
})
.catch(error => {
console.error(error)
this.snackBar.open('Authentication failed.', 'Close', { duration: 5000 });
});
}
}
// Check state is valid
this.userRestService
.login(state.request)
.then((response) => {
this.authenticationService.authenticate(response.accessToken);
this.snackBar.open('Authentication succeeded!', 'Close', {
duration: 5000,
});
this.router.navigate(['/home']);
})
.catch((error) => {
console.error(error);
this.snackBar.open('Authentication failed.', 'Close', {
duration: 5000,
});
});
}
}