Compare commits

5 Commits

Author SHA1 Message Date
Florian THIERRY
b091dc52b7 Fix authentication errors handling. 2024-09-03 11:45:47 +02:00
Florian THIERRY
4d44b6f53c First implementation of refresh token. 2024-09-03 10:37:58 +02:00
Florian THIERRY
be34c555a5 Implementation of code-block addition in the publication. 2024-09-03 10:07:13 +02:00
Florian THIERRY
c03d977028 Add code-block dialog and style it. 2024-09-03 10:00:45 +02:00
Florian THIERRY
afd184f936 Fix author-id publications search. 2024-08-30 22:37:03 +02:00
19 changed files with 385 additions and 32 deletions

View File

@@ -7,10 +7,7 @@ import static org.springframework.http.HttpStatus.UNAUTHORIZED;
import org.codiki.domain.category.exception.CategoryDeletionException;
import org.codiki.domain.category.exception.CategoryEditionException;
import org.codiki.domain.category.exception.CategoryNotFoundException;
import org.codiki.domain.exception.LoginFailureException;
import org.codiki.domain.exception.RefreshTokenDoesNotExistException;
import org.codiki.domain.exception.RefreshTokenExpiredException;
import org.codiki.domain.exception.UserDoesNotExistException;
import org.codiki.domain.exception.*;
import org.codiki.domain.picture.exception.PictureNotFoundException;
import org.codiki.domain.picture.exception.PictureUploadException;
import org.codiki.domain.publication.exception.*;
@@ -51,7 +48,8 @@ public class GlobalControllerExceptionHandler extends ResponseEntityExceptionHan
}
@ExceptionHandler({
RefreshTokenExpiredException.class
RefreshTokenExpiredException.class,
AuthenticationRequiredException.class,
})
public ProblemDetail handleUnauthorizedExceptions(Exception exception) {
return buildProblemDetail(UNAUTHORIZED, exception);

View File

@@ -9,6 +9,7 @@ import org.codiki.infrastructure.publication.model.PublicationSearchJpaField;
import org.springframework.stereotype.Component;
import static jakarta.persistence.criteria.JoinType.LEFT;
import static org.codiki.infrastructure.publication.model.PublicationSearchJpaField.AUTHOR_ID;
import static org.codiki.infrastructure.publication.model.PublicationSearchJpaField.AUTHOR_PSEUDO;
import jakarta.persistence.criteria.CriteriaBuilder;
@@ -53,9 +54,13 @@ public class PublicationPredicateMapper {
From<?, ?> from = fromPublication;
String attributeName = searchField.getFieldName();
if (searchField == AUTHOR_PSEUDO) {
if (List.of(AUTHOR_PSEUDO, AUTHOR_ID).contains(searchField)) {
from = fromPublication.join("author", LEFT);
attributeName = "pseudo";
attributeName = switch(searchField) {
case AUTHOR_ID -> "id";
case AUTHOR_PSEUDO -> "pseudo";
default -> null;
};
}
if (value instanceof UUID) {

View File

@@ -2,7 +2,11 @@ application:
pictures:
path: /home/florian/Developpement/codiki-hexagonal/backend/pictures-folder/
temp-path : /home/florian/Developpement/codiki-hexagonal/backend/pictures-folder/temp/
security:
jwt:
expirationDelayInMinutes: 1
refreshToken:
expirationDelayInDays: 7
server:
port: 8987

View File

@@ -0,0 +1,11 @@
meta {
name: Refresh token
type: http
seq: 4
}
post {
url: {{url}}/api/users/refresh-token
body: none
auth: none
}

View File

@@ -19,7 +19,7 @@ export const routes: Routes = [
},
{
path: 'publications/:publicationId/edit',
loadComponent: () => import('./pages/publication-edition/publication-edition.component').then(module => module.PublicationEditionComponent)
loadChildren: () => import('./pages/publication-edition/publication-edition.routes').then(module => module.ROUTES)
},
{
path: 'publications',

View File

@@ -0,0 +1,18 @@
import { inject } from "@angular/core";
import { CanActivateFn, Router } from "@angular/router";
import { AuthenticationService } from "../service/authentication.service";
import { MatSnackBar } from "@angular/material/snack-bar";
export const authenticationGuard: CanActivateFn = () => {
const authenticationService = inject(AuthenticationService);
const router = inject(Router);
const snackBar = inject(MatSnackBar);
if (authenticationService.isAuthenticated()) {
return true;
} else {
router.navigate(['/login']);
snackBar.open('You are unauthenticated. Please, log-in first.', 'Close', { duration: 5000 });
return false;
}
}

View File

@@ -1,23 +1,88 @@
import { Observable } from 'rxjs';
import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { inject, Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { catchError, filter, Observable, Subject, switchMap, take, throwError } from 'rxjs';
import { RefreshTokenRequest } from '../rest-services/user/model/refresh-token.model';
import { UserRestService } from '../rest-services/user/user.rest-service';
import { AuthenticationService } from '../service/authentication.service';
import { Router } from '@angular/router';
import { MatSnackBar } from '@angular/material/snack-bar';
@Injectable()
export class JwtInterceptor implements HttpInterceptor {
private readonly authenticationService = inject(AuthenticationService);
private readonly router = inject(Router);
private readonly userRestService = inject(UserRestService);
private readonly snackBar = inject(MatSnackBar);
private isRefreshingToken = false;
private refreshTokenSubject = new Subject<string | undefined>();
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
let requestWithAuthentication = request;
const jwt = this.authenticationService.getToken();
if (jwt) {
const cloned = request.clone({
headers: request.headers.set('Authorization', `Bearer ${jwt}`)
});
return next.handle(cloned);
requestWithAuthentication = this.addTokenInHeaders(request, jwt);
}
return next.handle(request);
return next.handle(requestWithAuthentication)
.pipe(
catchError(error => {
if (error instanceof HttpErrorResponse && error.status === 401) {
return this.handleAunauthorizedError(request, next, error);
}
return throwError(() => error);
})
);
}
private handleAunauthorizedError(request: HttpRequest<any>, next: HttpHandler, initialError: any): Observable<HttpEvent<any>> {
if (!this.isRefreshingToken) {
this.isRefreshingToken = true;
this.refreshTokenSubject.next(undefined);
const refreshToken = this.authenticationService.getRefreshToken();
if (refreshToken) {
const refreshTokenRequest: RefreshTokenRequest = {
refreshTokenValue: refreshToken
};
this.userRestService.refreshToken(refreshTokenRequest)
.then(refreshTokenResponse => {
this.authenticationService.authenticate(refreshTokenResponse.accessToken, refreshTokenResponse.refreshToken);
})
.catch(() => {
return this.handleNoRefreshToken(initialError);
})
.finally(() => this.isRefreshingToken = false);
} else {
return this.handleNoRefreshToken(initialError);
}
}
return this.refreshTokenSubject.pipe(
filter(token => !!token),
take(1),
switchMap(token => {
let requestWithAuthentication = request;
if (token) {
requestWithAuthentication = this.addTokenInHeaders(request, token)
}
return next.handle(requestWithAuthentication);
})
);
}
private addTokenInHeaders(request: HttpRequest<any>, token: string): HttpRequest<any> {
return request.clone({
headers: request.headers.set('Authorization', `Bearer ${token}`)
});
}
private handleNoRefreshToken(initialError: any): Observable<HttpEvent<any>> {
this.router.navigate(['/login']);
this.refreshTokenSubject.next(undefined);
this.authenticationService.unauthenticate();
this.snackBar.open('You are unauthenticated. Please, re-authenticate before retrying your action.', 'Close', { duration: 5000 });
return throwError(() => initialError);
}
}

View File

@@ -0,0 +1,3 @@
export interface RefreshTokenRequest {
refreshTokenValue: string;
}

View File

@@ -3,6 +3,7 @@ import { Injectable, inject } from "@angular/core";
import { LoginRequest, LoginResponse } from "./model/login.model";
import { lastValueFrom } from "rxjs";
import { SigninRequest } from "./model/signin.model";
import { RefreshTokenRequest } from "./model/refresh-token.model";
@Injectable({
providedIn: 'root'
@@ -17,4 +18,8 @@ export class UserRestService {
signin(request: SigninRequest): Promise<void> {
return lastValueFrom(this.httpClient.post<void>('/api/users', request));
}
refreshToken(request: RefreshTokenRequest): Promise<LoginResponse> {
return lastValueFrom(this.httpClient.post<LoginResponse>('/api/users/refresh-token', request));
}
}

View File

@@ -1,7 +1,10 @@
import { Injectable } from "@angular/core";
import { inject, Injectable } from "@angular/core";
import { User } from "../model/User";
import { UserRestService } from "../rest-services/user/user.rest-service";
import { RefreshTokenRequest } from "../rest-services/user/model/refresh-token.model";
const JWT_PARAM = 'jwt';
const REFRESH_TOKEN_PARAM = 'refresh-token';
interface UserDetails {
sub: string;
@@ -15,8 +18,10 @@ interface UserDetails {
providedIn: 'root'
})
export class AuthenticationService {
authenticate(token: string): void {
authenticate(token: string, refreshToken: string): void {
localStorage.setItem(JWT_PARAM, token);
localStorage.setItem(REFRESH_TOKEN_PARAM, refreshToken);
}
unauthenticate(): void {
@@ -44,6 +49,25 @@ export class AuthenticationService {
return localStorage.getItem(JWT_PARAM) ?? undefined;
}
getRefreshToken(): string | undefined {
return localStorage.getItem(REFRESH_TOKEN_PARAM) ?? undefined;
}
isTokenExpired(): boolean {
let result = false;
const userDetails = this.extractUserDetails();
if (userDetails) {
const expirationDate = new Date(userDetails.exp * 1000);
const now = new Date();
result = expirationDate < now;
}
return result;
}
private extractUserFromLocalStorage(): User | undefined {
let result: User | undefined = undefined;

View File

@@ -65,7 +65,7 @@ export class LoginService {
this.userRestService
.login(state.request)
.then((response) => {
this.authenticationService.authenticate(response.accessToken);
this.authenticationService.authenticate(response.accessToken, response.refreshToken);
this.snackBar.open('Authentication succeeded!', 'Close', {
duration: 5000,
});

View File

@@ -0,0 +1,32 @@
<button type="button" class="close" (click)="closeDialog()">
<mat-icon>close</mat-icon>
</button>
<header>
<h1>Add a code block</h1>
</header>
<form [formGroup]="formGroup" (submit)="closeAndValidate()" ngNativeValidate>
<div class="form-content">
<mat-form-field>
<mat-label>Programming language</mat-label>
<mat-select #programmingLanguageSelect formControlName="programmingLanguage">
@for(programmingLanguage of programmingLanguages; track programmingLanguage) {
<mat-option [value]="programmingLanguage.code">
{{programmingLanguage.label}}
</mat-option>
}
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-label>Code block</mat-label>
<textarea matInput formControlName="codeBlock"></textarea>
</mat-form-field>
</div>
<div class="actions">
<button type="submit">
Validate
</button>
<button type="button" (click)="closeDialog()" class="secondary">
Cancel
</button>
</div>
</form>

View File

@@ -0,0 +1,78 @@
:host {
display: flex;
flex-direction: column;
padding: 1em;
gap: 1em;
position: relative;
max-height: 90vh;
.close {
position: absolute;
top: 1em;
right: 1em;
width: 2.5em;
height: 2.5em;
border-radius: 10em;
border: none;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
header {
flex: 1;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
form {
div {
&.form-content {
mat-form-field {
width: 100%;
textarea {
height: 30vh;
}
}
}
&.actions {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
button {
padding: .8em 1.2em;
border-radius: 10em;
border: none;
background-color: #3f51b5;
color: white;
transition: background-color .2s ease-in-out;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
&:hover {
background-color: #5b6ed8;
}
&.secondary {
color: #3f51b5;
background-color: white;
&:hover {
background-color: #f2f4ff;
cursor: pointer;
}
}
}
}
}
}
}

View File

@@ -0,0 +1,68 @@
import { Component, inject } from "@angular/core";
import { FormBuilder, FormControl, ReactiveFormsModule, Validators } from "@angular/forms";
import { MatDialogRef } from "@angular/material/dialog";
import { MatFormFieldModule } from "@angular/material/form-field";
import { MatIcon } from "@angular/material/icon";
import { MatInputModule } from "@angular/material/input";
import { MatSelectModule } from '@angular/material/select';
export interface ProgramingLanguage {
code: string;
label: string;
}
export const PROGRAMMING_LANGUAGES: ProgramingLanguage[] = [
{
code: 'bash',
label: 'Bash'
},
{
code: 'java',
label: 'Java'
},
{
code: 'markup',
label: 'html/xml'
},
{
code: 'python',
label: 'Python'
},
{
code: 'sql',
label: 'SQL'
}
];
@Component({
selector: 'app-code-block-dialog',
standalone: true,
templateUrl: './code-block-dialog.component.html',
styleUrl: './code-block-dialog.component.scss',
imports: [
MatFormFieldModule,
MatIcon,
MatInputModule,
MatSelectModule,
ReactiveFormsModule,
]
})
export class CodeBlockDialog {
private readonly dialogRef = inject(MatDialogRef<CodeBlockDialog>);
private formBuilder = inject(FormBuilder);
programmingLanguages = PROGRAMMING_LANGUAGES;
formGroup = this.formBuilder.group({
programmingLanguage: new FormControl('', Validators.required),
codeBlock: new FormControl('', Validators.required)
});
closeAndValidate(): void {
if (this.formGroup.valid) {
this.dialogRef.close(this.formGroup.value);
}
}
closeDialog(): void {
this.dialogRef.close();
}
}

View File

@@ -31,9 +31,13 @@ export class PictureSelectionDialog implements OnInit {
this.pictures = pictures;
})
.catch(error => {
const errorMessage = 'An error occured while loading pictures.';
console.error(errorMessage, error);
this.snackBar.open(errorMessage, 'Close', { duration: 5000 });
if (error.status === 401) {
this.dialogRef.close();
} else {
const errorMessage = 'An error occured while loading pictures.';
console.error(errorMessage, error);
this.snackBar.open(errorMessage, 'Close', { duration: 5000 });
}
})
.finally(() => {
this.isLoading = false;

View File

@@ -44,7 +44,7 @@
<button type="button" matTooltip="Click to insert a link" (click)="insertLink()">
<mat-icon>link</mat-icon>
</button>
<button type="button" disabled matTooltip="Click to insert a code block">
<button type="button" matTooltip="Click to insert a code block" (click)="displayCodeBlockDialog()">
<mat-icon>code</mat-icon>
</button>
<button type="button" disabled matTooltip="Click to display editor help">

View File

@@ -1,17 +1,17 @@
import { CommonModule, Location } from '@angular/common';
import { Component, inject, OnDestroy, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { MatDialogModule } from '@angular/material/dialog';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatTabsModule } from '@angular/material/tabs';
import { debounceTime, map, Observable, Subscription } from 'rxjs';
import { Publication } from '../../core/rest-services/publications/model/publication';
import { PublicationEditionService } from './publication-edition.service';
import {MatDialogModule} from '@angular/material/dialog';
import { PictureSelectionDialog } from './picture-selection-dialog/picture-selection-dialog.component';
import { MatTooltipModule } from '@angular/material/tooltip';
import { map, Observable, Subscription } from 'rxjs';
import { SubmitButtonComponent } from '../../components/submit-button/submit-button.component';
import { MatIconModule } from '@angular/material/icon';
import { Publication } from '../../core/rest-services/publications/model/publication';
import { PictureSelectionDialog } from './picture-selection-dialog/picture-selection-dialog.component';
import { PublicationEditionService } from './publication-edition.service';
@Component({
selector: 'app-publication-edition',
@@ -112,6 +112,10 @@ export class PublicationEditionComponent implements OnInit, OnDestroy {
this.publicationEditionService.insertLink();
}
displayCodeBlockDialog(): void {
this.publicationEditionService.displayCodeBlockDialog();
}
save(): void {
this.publicationEditionService.save();
}
@@ -133,4 +137,4 @@ export class PublicationEditionComponent implements OnInit, OnDestroy {
}
}
}
}

View File

@@ -0,0 +1,7 @@
import { Route } from "@angular/router";
import { PublicationEditionComponent } from "./publication-edition.component";
import { authenticationGuard } from "../../core/guard/authentication.guard";
export const ROUTES: Route[] = [
{ path: '', component: PublicationEditionComponent, canActivate: [authenticationGuard] }
]

View File

@@ -8,6 +8,7 @@ import { PublicationRestService } from "../../core/rest-services/publications/pu
import { copy } from '../../core/utils/ObjectUtils';
import { MatDialog } from "@angular/material/dialog";
import { PictureSelectionDialog } from "./picture-selection-dialog/picture-selection-dialog.component";
import { CodeBlockDialog } from "./code-block-dialog/code-block-dialog.component";
export class CursorPosition {
start: number;
@@ -149,6 +150,18 @@ export class PublicationEditionService implements OnDestroy {
this.subscriptions.push(afterDialogCloseSubscription);
}
displayCodeBlockDialog(): void {
const dialogRef = this.dialog.open(CodeBlockDialog, { width: '60em' });
const afterDialogCloseSubscription = dialogRef.afterClosed()
.subscribe(codeBlockWithLanguage => {
if (codeBlockWithLanguage) {
this.insertCodeBlock(codeBlockWithLanguage.programmingLanguage, codeBlockWithLanguage.codeBlock);
}
});
this.subscriptions.push(afterDialogCloseSubscription);
}
editCursorPosition(positionStart: number, positionEnd: number): void {
const state = this._state;
@@ -218,6 +231,20 @@ export class PublicationEditionService implements OnDestroy {
this._save(state);
}
insertCodeBlock(programmingLanguage: string, codeBlock: string): void {
const state = this._state;
const publication = state.publication;
const publicationTextLeftPart = publication.text.substring(0, state.cursorPosition.start);
const publicationTextRightPart = publication.text.substring(state.cursorPosition.start);
const codeBlockInstruction = `\n[code lg="${programmingLanguage}"]\n${codeBlock}\n[/code]\n\n`;
const textWithTags = `${publicationTextLeftPart}${codeBlockInstruction}${publicationTextRightPart}`;
publication.text = textWithTags;
this._save(state);
}
save(): void {
const state = this._state;