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

Merge pull request 'design-system' (#7) from design-system into main

Browse Source 
Reviewed-on: #7
This commit was merged in pull request #7.
This commit is contained in:
Florian THIERRY - Takiguchi
2024-10-22 08:36:07 +02:00
parent 882ffe7094 5fca5bde55
commit 653536b0da
43 changed files with 432 additions and 530 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/app/components/confirmation-dialog/confirmation-dialog.component.html
View File

@@ -1,10 +1,10 @@
<h1>{{title}}</h1> <h1>{{title}}</h1>
<h2>{{description}}</h2> <h2>{{description}}</h2>
<footer> <footer>
<button type="button" class="secondary" (click)="closeDialog()" i18n> <button type="button" class="cod-button secondary" (click)="closeDialog()" matRipple i18n>
No No
</button> </button>
<button type="button" (click)="closeAndValidate()" i18n> <button type="button" class="cod-button" (click)="closeAndValidate()" matRipple i18n>
Yes Yes
</button> </button>
</footer> </footer>

27
frontend/src/app/components/confirmation-dialog/confirmation-dialog.component.scss
View File

@@ -8,32 +8,5 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
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;
}
}
}
} }
} }

3
frontend/src/app/components/confirmation-dialog/confirmation-dialog.component.ts
View File

@@ -1,4 +1,5 @@
import { Component, inject, Input } from "@angular/core"; import { Component, inject, Input } from "@angular/core";
import { MatRippleModule } from "@angular/material/core";
import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog"; import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
export interface ConfirmationDialogData { export interface ConfirmationDialogData {
@@ -11,7 +12,7 @@ export interface ConfirmationDialogData {
standalone: true, standalone: true,
templateUrl: './confirmation-dialog.component.html', templateUrl: './confirmation-dialog.component.html',
styleUrl: './confirmation-dialog.component.scss', styleUrl: './confirmation-dialog.component.scss',
imports: [] imports: [MatRippleModule]
}) })
export class ConfirmationDialog { export class ConfirmationDialog {
private readonly dialogRef = inject(MatDialogRef<ConfirmationDialog>); private readonly dialogRef = inject(MatDialogRef<ConfirmationDialog>);

2
frontend/src/app/components/footer/footer.component.html
View File

@@ -2,7 +2,7 @@
<span class="copy-left">&copy;</span> <span class="copy-left">&copy;</span>
2016 - 2024 All rights reserved 2016 - 2024 All rights reserved
- -
2.0-alpha 2.1
<a [routerLink]="['./']" matTooltip="Health checking will be available in future..." i18n-matTooltip> <a [routerLink]="['./']" matTooltip="Health checking will be available in future..." i18n-matTooltip>
<mat-icon>favorite</mat-icon> <mat-icon>favorite</mat-icon>
</a> </a>

14
frontend/src/app/components/header/header.component.html
View File

@@ -1,5 +1,10 @@
<div class="left"> <div class="left">
<button type="button" (click)="sideMenu.open()" matTooltip="Click to show side menu" i18n-matTooltip> <button type="button"
(click)="sideMenu.open()"
class="cod-button icon"
matTooltip="Click to show side menu"
matRipple
i18n-matTooltip>
<mat-icon>menu</mat-icon> <mat-icon>menu</mat-icon>
</button> </button>
<a [routerLink]="['/home']"> <a [routerLink]="['/home']">
@@ -14,7 +19,10 @@
<div class="right"> <div class="right">
@if (isAuthenticated) { @if (isAuthenticated) {
<button mat-button class="button" [matMenuTriggerFor]="authenticatedUserMenu"> <button type="button"
class="cod-button icon"
[matMenuTriggerFor]="authenticatedUserMenu"
matRipple>
<mat-icon>more_vert</mat-icon> <mat-icon>more_vert</mat-icon>
</button> </button>
<mat-menu #authenticatedUserMenu="matMenu"> <mat-menu #authenticatedUserMenu="matMenu">
@@ -30,7 +38,7 @@
</div> </div>
</mat-menu> </mat-menu>
} @else { } @else {
<a [routerLink]="['/login']" class="button" matRipple i18n>Login</a> <a [routerLink]="['/login']" class="cod-button" matRipple i18n>Login</a>
} }
</div> </div>
<app-side-menu #sideMenu></app-side-menu> <app-side-menu #sideMenu></app-side-menu>

60
frontend/src/app/components/header/header.component.scss
View File

@@ -26,25 +26,6 @@ $headerHeight: 3.5em;
padding: 0 1em; padding: 0 1em;
z-index: 2; z-index: 2;
button {
background-color: #3f51b5;
color: white;
border: none;
border-radius: 10em;
transition: background-color .2s ease-in-out;
display: flex;
justify-content: center;
align-items: center;
$buttonSize: 2.5em;
width: $buttonSize;
height: $buttonSize;
&:hover {
cursor: pointer;
background-color: #5c6bc0;
}
}
a { a {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -120,45 +101,10 @@ $headerHeight: 3.5em;
top: 0; top: 0;
right: 0; right: 0;
z-index: 2; z-index: 2;
margin-right: .5em;
a { a, button {
display: flex; margin: .5em;
justify-content: center;
align-items: center;
min-width: 5em;
color: white;
margin: 0.5em 0.5em;
border-radius: 10em;
text-decoration: none;
padding: 0 .8em;
background-color: #3f51b5;
transition: background-color .2s ease-in-out;
&:hover {
background-color: #5c6bc0;
}
}
button {
display: flex;
justify-content: center;
align-items: center;
min-width: 2.5em;
color: white;
margin: 0.5em 0.5em;
border-radius: 10em;
text-decoration: none;
padding: 0;
background-color: #3f51b5;
transition: background-color .2s ease-in-out;
&:hover {
background-color: #5c6bc0;
}
mat-icon {
margin: 0;
}
} }
} }
} }

15
frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.html
View File

@@ -1,10 +1,15 @@
<button type="button" class="close" (click)="closeDialog()"> <button type="button"
(click)="closeDialog()"
class="cod-button icon secondary close"
matTooltip="Close"
matRipple
i18n-matTooltip>
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
<header> <header>
<h1 i18n>Add a code block</h1> <h1 i18n>Add a code block</h1>
</header> </header>
<form [formGroup]="formGroup" (submit)="closeAndValidate()" ngNativeValidate> <form [formGroup]="formGroup" (submit)="closeAndValidate()" class="cod-form" ngNativeValidate>
<div class="form-content"> <div class="form-content">
<mat-form-field> <mat-form-field>
<mat-label i18n>Programming language</mat-label> <mat-label i18n>Programming language</mat-label>
@@ -21,11 +26,11 @@
<textarea matInput formControlName="codeBlock"></textarea> <textarea matInput formControlName="codeBlock"></textarea>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="actions"> <div class="actions reversed">
<button type="submit" i18n> <button type="submit" class="cod-button" matRipple i18n>
Validate Validate
</button> </button>
<button type="button" (click)="closeDialog()" class="secondary" i18n> <button type="button" (click)="closeDialog()" class="cod-button secondary" matRipple i18n>
Cancel Cancel
</button> </button>
</div> </div>

48
frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.scss
View File

@@ -6,20 +6,6 @@
position: relative; position: relative;
max-height: 90vh; 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 { header {
flex: 1; flex: 1;
display: flex; display: flex;
@@ -39,40 +25,6 @@
} }
} }
} }
&.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;
}
}
}
}
} }
} }
} }

4
frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.ts
View File

@@ -1,10 +1,12 @@
import { Component, inject } from "@angular/core"; import { Component, inject } from "@angular/core";
import { FormBuilder, FormControl, ReactiveFormsModule, Validators } from "@angular/forms"; import { FormBuilder, FormControl, ReactiveFormsModule, Validators } from "@angular/forms";
import { MatRippleModule } from "@angular/material/core";
import { MatDialogRef } from "@angular/material/dialog"; import { MatDialogRef } from "@angular/material/dialog";
import { MatFormFieldModule } from "@angular/material/form-field"; import { MatFormFieldModule } from "@angular/material/form-field";
import { MatIcon } from "@angular/material/icon"; import { MatIcon } from "@angular/material/icon";
import { MatInputModule } from "@angular/material/input"; import { MatInputModule } from "@angular/material/input";
import { MatSelectModule } from '@angular/material/select'; import { MatSelectModule } from '@angular/material/select';
import { MatTooltip } from "@angular/material/tooltip";
export interface ProgramingLanguage { export interface ProgramingLanguage {
code: string; code: string;
@@ -91,7 +93,9 @@ export const PROGRAMMING_LANGUAGES: ProgramingLanguage[] = [
MatFormFieldModule, MatFormFieldModule,
MatIcon, MatIcon,
MatInputModule, MatInputModule,
MatRippleModule,
MatSelectModule, MatSelectModule,
MatTooltip,
ReactiveFormsModule, ReactiveFormsModule,
] ]
}) })

19
frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.component.html
View File

@@ -1,4 +1,9 @@
<button type="button" class="close" (click)="closeDialog()"> <button type="button"
(click)="closeDialog()"
class="cod-button icon secondary close"
matTooltip="Close"
matRipple
i18n-matTooltip>
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
<header> <header>
@@ -19,10 +24,18 @@
} }
</div> </div>
<footer> <footer>
<button type="button" class="secondary" matRipple (click)="closeDialog()" i18n> <button type="button"
(click)="closeDialog()"
class="cod-button secondary"
matRipple
i18n>
Cancel Cancel
</button> </button>
<button type="button" (click)="fileUpload.click()" matRipple i18n> <button type="button"
(click)="fileUpload.click()"
class="cod-button"
matRipple
i18n>
<mat-icon>upload_file</mat-icon> <mat-icon>upload_file</mat-icon>
Add new picture Add new picture
</button> </button>

14
frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.component.scss
View File

@@ -6,20 +6,6 @@
position: relative; position: relative;
max-height: 90vh; 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 { header {
flex: 1; flex: 1;
display: flex; display: flex;

7
frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.component.ts
View File

@@ -11,9 +11,14 @@ import { MatTooltip } from "@angular/material/tooltip";
@Component({ @Component({
selector: 'app-picture-selection', selector: 'app-picture-selection',
standalone: true, standalone: true,
imports: [MatProgressSpinnerModule, MatIcon, MatRippleModule, MatTooltip],
templateUrl: './picture-selection-dialog.component.html', templateUrl: './picture-selection-dialog.component.html',
styleUrl: './picture-selection-dialog.component.scss', styleUrl: './picture-selection-dialog.component.scss',
imports: [
MatIcon,
MatRippleModule,
MatProgressSpinnerModule,
MatTooltip
],
}) })
export class PictureSelectionDialog implements OnInit { export class PictureSelectionDialog implements OnInit {
private readonly pictureRestService = inject(PictureRestService); private readonly pictureRestService = inject(PictureRestService);

54
frontend/src/app/components/publication-edition/publication-edition.component.html
View File

@@ -37,25 +37,53 @@
</div> </div>
<div class="actions"> <div class="actions">
<button type="button" matTooltip="Click to insert a title 1 section" (click)="insertTitle(1)" i18n-matTooltip> <button type="button"
(click)="insertTitle(1)"
matTooltip="Click to insert a title 1 section"
matRipple
i18n-matTooltip>
H1 H1
</button> </button>
<button type="button" matTooltip="Click to insert a title 2 section" (click)="insertTitle(2)" i18n-matTooltip> <button type="button"
(click)="insertTitle(2)"
matTooltip="Click to insert a title 2 section"
matRipple
i18n-matTooltip>
H2 H2
</button> </button>
<button type="button" matTooltip="Click to insert a title 3 section" (click)="insertTitle(3)" i18n-matTooltip> <button type="button"
(click)="insertTitle(3)"
matTooltip="Click to insert a title 3 section"
matRipple
i18n-matTooltip>
H3 H3
</button> </button>
<button type="button" matTooltip="Click to insert a picture" (click)="selectAPicture()" i18n-matTooltip> <button type="button"
<mat-icon>image</mat-icon> (click)="insertLink()"
</button> matTooltip="Click to insert a link"
<button type="button" matTooltip="Click to insert a link" (click)="insertLink()" i18n-matTooltip> matRipple
i18n-matTooltip>
<mat-icon>link</mat-icon> <mat-icon>link</mat-icon>
</button> </button>
<button type="button" matTooltip="Click to insert a code block" (click)="displayCodeBlockDialog()" i18n-matTooltip> <button type="button"
(click)="selectAPicture()"
matTooltip="Click to insert a picture"
matRipple
i18n-matTooltip>
<mat-icon>image</mat-icon>
</button>
<button type="button"
(click)="displayCodeBlockDialog()"
matTooltip="Click to insert a code block"
matRipple
i18n-matTooltip>
<mat-icon>code</mat-icon> <mat-icon>code</mat-icon>
</button> </button>
<button type="button" disabled matTooltip="Click to display editor help" i18n-matTooltip> <button type="button"
matTooltip="Click to display editor help"
disabled
matRipple
i18n-matTooltip>
<mat-icon>help</mat-icon> <mat-icon>help</mat-icon>
</button> </button>
</div> </div>
@@ -92,8 +120,12 @@
</mat-tab> </mat-tab>
</mat-tab-group> </mat-tab-group>
<footer> <footer>
<app-submit-button label="Save" [requestPending]="!!(isSaving$ | async)" i18n-label></app-submit-button> <app-submit-button [requestPending]="!!(isSaving$ | async)" i18n>Save</app-submit-button>
<button type="button" class="secondary" (click)="goPreviousLocation()" i18n> <button type="button"
class="cod-button secondary"
(click)="goPreviousLocation()"
matRipple
i18n>
Cancel Cancel
</button> </button>
</footer> </footer>

24
frontend/src/app/components/publication-edition/publication-edition.component.scss
View File

@@ -102,6 +102,11 @@
button { button {
padding: 0; padding: 0;
border-radius: 10em;
border: none;
background-color: #3f51b5;
color: white;
transition: background-color .2s ease-in-out;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@@ -109,17 +114,6 @@
height: 3em; height: 3em;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12); box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
font-weight: bold; font-weight: bold;
}
}
}
button, a.button {
padding: .8em 1.2em;
border-radius: 10em;
border: none;
background-color: #3f51b5;
color: white;
transition: background-color .2s ease-in-out;
&:hover { &:hover {
background-color: #5b6ed8; background-color: #5b6ed8;
@@ -130,14 +124,6 @@ button, a.button {
background-color: #5f6aa6; background-color: #5f6aa6;
cursor: not-allowed; cursor: not-allowed;
} }
&.secondary {
color: #3f51b5;
background-color: white;
&:hover {
background-color: #f2f4ff;
cursor: pointer;
} }
} }
} }

63
frontend/src/app/components/publication-edition/publication-edition.component.ts
View File

@@ -1,6 +1,6 @@
import { CommonModule, Location } from "@angular/common"; import { CommonModule, Location } from "@angular/common";
import { Component, EventEmitter, inject, Input, OnChanges, OnDestroy, Output } from "@angular/core"; import { Component, EventEmitter, inject, Input, OnChanges, OnDestroy, Output } from "@angular/core";
import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from "@angular/forms"; import { FormGroup, ReactiveFormsModule } from "@angular/forms";
import { MatDialogModule } from "@angular/material/dialog"; import { MatDialogModule } from "@angular/material/dialog";
import { MatIconModule } from "@angular/material/icon"; import { MatIconModule } from "@angular/material/icon";
import { MatInputModule } from "@angular/material/input"; import { MatInputModule } from "@angular/material/input";
@@ -15,6 +15,7 @@ import { CategoryService } from "../../core/service/category.service";
import { SubmitButtonComponent } from "../submit-button/submit-button.component"; import { SubmitButtonComponent } from "../submit-button/submit-button.component";
import { PictureSelectionDialog } from "./picture-selection-dialog/picture-selection-dialog.component"; import { PictureSelectionDialog } from "./picture-selection-dialog/picture-selection-dialog.component";
import { PublicationEditionService } from "./publication-edition.service"; import { PublicationEditionService } from "./publication-edition.service";
import { MatRippleModule } from "@angular/material/core";
@Component({ @Component({
selector: 'app-publication-edition', selector: 'app-publication-edition',
@@ -26,6 +27,7 @@ import { PublicationEditionService } from "./publication-edition.service";
MatDialogModule, MatDialogModule,
MatIconModule, MatIconModule,
MatInputModule, MatInputModule,
MatRippleModule,
MatProgressSpinnerModule, MatProgressSpinnerModule,
MatSelectModule, MatSelectModule,
MatTabsModule, MatTabsModule,
@@ -48,18 +50,13 @@ export class PublicationEditionComponent implements OnChanges, OnDestroy {
publicationInEdition!: Publication; publicationInEdition!: Publication;
private readonly categoryService = inject(CategoryService); private readonly categoryService = inject(CategoryService);
private readonly formBuilder = inject(FormBuilder);
private readonly location = inject(Location); private readonly location = inject(Location);
private readonly publicationEditionService = inject(PublicationEditionService); private readonly publicationEditionService = inject(PublicationEditionService);
private subscriptions: Subscription[] = []; private subscriptions: Subscription[] = [];
publicationEditionForm: FormGroup = this.formBuilder.group({ get publicationEditionForm(): FormGroup {
title: new FormControl<string | undefined>('', [Validators.required]), return this.publicationEditionService.publicationEditionForm;
description: new FormControl<string | undefined>('', [Validators.required]), }
text: new FormControl<string | undefined>('', [Validators.required]),
illustrationId: new FormControl<string | undefined>('', [Validators.required]),
categoryId: new FormControl<string | undefined>('', [Validators.required])
});
get isLoading$(): Observable<boolean> { get isLoading$(): Observable<boolean> {
return this.publicationEditionService.isLoading$; return this.publicationEditionService.isLoading$;
@@ -96,48 +93,10 @@ export class PublicationEditionComponent implements OnChanges, OnDestroy {
ngOnChanges(): void { ngOnChanges(): void {
this.ngOnDestroy(); this.ngOnDestroy();
if (!this.publicationInEdition || this.publicationInEdition !== this.publication) {
this.publicationInEdition = this.publication; this.publicationInEdition = this.publication;
this.publicationEditionService.init(this.publicationInEdition); this.publicationEditionService.init(this.publicationInEdition);
['title', 'description', 'text'].forEach(fieldName => {
const fieldSubscription = this.publicationEditionForm.controls[fieldName].valueChanges
.pipe(
map(value => value?.length ? value as string : '')
)
.subscribe(fieldValue => {
switch (fieldName) {
case 'title':
this.publicationEditionService.editTitle(fieldValue);
break;
case 'description':
this.publicationEditionService.editDescription(fieldValue);
break;
case 'text':
this.publicationEditionService.editText(fieldValue);
break;
default:
break;
} }
});
this.subscriptions.push(fieldSubscription);
});
const categoryIdChangeSubscription = this.publicationEditionForm.controls['categoryId'].valueChanges
.subscribe(newCategoryId => {
this.publicationEditionService.editCategoryId(newCategoryId);
});
this.subscriptions.push(categoryIdChangeSubscription);
const publicationSubscription = this.publicationEditionService.state$.subscribe(state => {
console.log(state.publication.parsedText.substring(0, 15));
this.publicationInEdition = state.publication;
this.publicationEditionForm.controls['title'].setValue(this.publicationInEdition.title, { emitEvent: false });
this.publicationEditionForm.controls['description'].setValue(this.publicationInEdition.description, { emitEvent: false });
this.publicationEditionForm.controls['text'].setValue(this.publicationInEdition.text, { emitEvent: false });
this.publicationEditionForm.controls['illustrationId'].setValue(this.publicationInEdition.illustrationId, { emitEvent: false });
this.publicationEditionForm.controls['categoryId'].setValue(this.publicationInEdition.categoryId, { emitEvent: false });
});
this.subscriptions.push(publicationSubscription);
} }
ngOnDestroy(): void { ngOnDestroy(): void {
@@ -164,10 +123,6 @@ export class PublicationEditionComponent implements OnChanges, OnDestroy {
this.publicationEditionService.displayCodeBlockDialog(); this.publicationEditionService.displayCodeBlockDialog();
} }
save(): void {
this.publicationSave.emit(this.publicationInEdition);
}
displayPictureSectionDialog(): void { displayPictureSectionDialog(): void {
this.publicationEditionService.displayPictureSectionDialog(); this.publicationEditionService.displayPictureSectionDialog();
} }
@@ -183,6 +138,10 @@ export class PublicationEditionComponent implements OnChanges, OnDestroy {
} }
} }
save(): void {
this.publicationSave.emit(this.publicationEditionService.editedPublication);
}
onTabChange(tabSelectedIndex: number): void { onTabChange(tabSelectedIndex: number): void {
if (tabSelectedIndex === 1) { if (tabSelectedIndex === 1) {
this.publicationEditionService.loadPreview(); this.publicationEditionService.loadPreview();

78
frontend/src/app/components/publication-edition/publication-edition.service.ts
View File

@@ -3,13 +3,14 @@ import { inject, Injectable, OnDestroy } from "@angular/core";
import { MatDialog } from "@angular/material/dialog"; import { MatDialog } from "@angular/material/dialog";
import { MatSnackBar } from "@angular/material/snack-bar"; import { MatSnackBar } from "@angular/material/snack-bar";
import { ActivatedRoute } from "@angular/router"; import { ActivatedRoute } from "@angular/router";
import { BehaviorSubject, Observable, Subscription } from "rxjs"; import { BehaviorSubject, debounceTime, distinctUntilChanged, Observable, Subscription } from "rxjs";
import { Publication } from "../../core/rest-services/publications/model/publication"; import { Publication } from "../../core/rest-services/publications/model/publication";
import { PublicationRestService } from "../../core/rest-services/publications/publication.rest-service"; import { PublicationRestService } from "../../core/rest-services/publications/publication.rest-service";
import { copy } from "../../core/utils/ObjectUtils"; import { copy } from "../../core/utils/ObjectUtils";
import { CodeBlockDialog } from "./code-block-dialog/code-block-dialog.component"; import { CodeBlockDialog } from "./code-block-dialog/code-block-dialog.component";
import { PictureSelectionDialog } from "./picture-selection-dialog/picture-selection-dialog.component"; import { PictureSelectionDialog } from "./picture-selection-dialog/picture-selection-dialog.component";
import { PreviewContentRequest } from "../../core/rest-services/publications/model/preview"; import { PreviewContentRequest } from "../../core/rest-services/publications/model/preview";
import { FormBuilder, FormControl, FormGroup, Validators } from "@angular/forms";
declare let Prism: any; declare let Prism: any;
@@ -57,10 +58,11 @@ const DEFAULT_STATE: PublicationEditionState = {
@Injectable() @Injectable()
export class PublicationEditionService implements OnDestroy { export class PublicationEditionService implements OnDestroy {
private readonly activatedRoute = inject(ActivatedRoute); private readonly activatedRoute = inject(ActivatedRoute);
private readonly publicationRestService = inject(PublicationRestService);
private readonly location = inject(Location);
private readonly snackBar = inject(MatSnackBar);
private readonly dialog = inject(MatDialog); private readonly dialog = inject(MatDialog);
private readonly formBuilder = inject(FormBuilder);
private readonly location = inject(Location);
private readonly publicationRestService = inject(PublicationRestService);
private readonly snackBar = inject(MatSnackBar);
private isLoadingSubject = new BehaviorSubject<boolean>(false); private isLoadingSubject = new BehaviorSubject<boolean>(false);
private stateSubject = new BehaviorSubject<PublicationEditionState>(copy(DEFAULT_STATE)); private stateSubject = new BehaviorSubject<PublicationEditionState>(copy(DEFAULT_STATE));
@@ -68,6 +70,14 @@ export class PublicationEditionService implements OnDestroy {
private isSavingSubject = new BehaviorSubject<boolean>(false); private isSavingSubject = new BehaviorSubject<boolean>(false);
private isPreviewingSubject = new BehaviorSubject<boolean>(false); private isPreviewingSubject = new BehaviorSubject<boolean>(false);
publicationEditionForm: FormGroup = this.formBuilder.group({
title: new FormControl<string | undefined>('', [Validators.required]),
description: new FormControl<string | undefined>('', [Validators.required]),
text: new FormControl<string | undefined>('', [Validators.required]),
illustrationId: new FormControl<string | undefined>('', [Validators.required]),
categoryId: new FormControl<string | undefined>('', [Validators.required])
});
ngOnDestroy(): void { ngOnDestroy(): void {
this.subscriptions.forEach(subscription => subscription.unsubscribe()); this.subscriptions.forEach(subscription => subscription.unsubscribe());
} }
@@ -80,6 +90,17 @@ export class PublicationEditionService implements OnDestroy {
this.stateSubject.next(state); this.stateSubject.next(state);
} }
private _updateForm(): void {
const state = this._state;
const publication = state.publication;
this.publicationEditionForm.controls['title'].setValue(publication.title);
this.publicationEditionForm.controls['description'].setValue(publication.description);
this.publicationEditionForm.controls['text'].setValue(publication.text);
this.publicationEditionForm.controls['illustrationId'].setValue(publication.illustrationId);
this.publicationEditionForm.controls['categoryId'].setValue(publication.categoryId);
}
get isLoading$(): Observable<boolean> { get isLoading$(): Observable<boolean> {
return this.isLoadingSubject.asObservable(); return this.isLoadingSubject.asObservable();
} }
@@ -96,6 +117,10 @@ export class PublicationEditionService implements OnDestroy {
return this.stateSubject.asObservable(); return this.stateSubject.asObservable();
} }
get editedPublication(): Publication {
return this._state.publication;
}
loadPublication(): void { loadPublication(): void {
this.isLoadingSubject.next(true); this.isLoadingSubject.next(true);
@@ -125,33 +150,28 @@ export class PublicationEditionService implements OnDestroy {
const state = this._state; const state = this._state;
state.publication = publication; state.publication = publication;
this.stateSubject.next(state); this.stateSubject.next(state);
} this._updateForm();
editTitle(title: string): void { const formValueChangesSubscription = this.publicationEditionForm.valueChanges
.pipe(
debounceTime(200),
distinctUntilChanged()
)
.subscribe(formValue => {
const state = this._state; const state = this._state;
state.publication.title = title; const publication = state.publication;
publication.title = formValue.title;
publication.description = formValue.description;
publication.categoryId = formValue.categoryId;
publication.text = formValue.text;
this._save(state); this._save(state);
})
this.subscriptions.push(formValueChangesSubscription);
} }
editDescription(description: string): void { private editIllustrationId(pictureId: string): void {
const state = this._state;
state.publication.description = description;
this._save(state);
}
editCategoryId(categoryId: string): void {
const state = this._state;
state.publication.categoryId = categoryId;
this._save(state);
}
editText(text: string): void {
const state = this._state;
state.publication.text = text;
this._save(state);
}
editIllustrationId(pictureId: string): void {
const state = this._state; const state = this._state;
state.publication.illustrationId = pictureId state.publication.illustrationId = pictureId
this._save(state); this._save(state);
@@ -204,6 +224,7 @@ export class PublicationEditionService implements OnDestroy {
publication.text = textWithTags; publication.text = textWithTags;
this._save(state); this._save(state);
this._updateForm();
} else { } else {
console.error(`Bad value for parameter of function 'insertTitle': '${titleNumber}'.`); console.error(`Bad value for parameter of function 'insertTitle': '${titleNumber}'.`);
} }
@@ -233,6 +254,7 @@ export class PublicationEditionService implements OnDestroy {
publication.text = textWithTags; publication.text = textWithTags;
this._save(state); this._save(state);
this._updateForm();
} }
insertLink(): void { insertLink(): void {
@@ -248,9 +270,10 @@ export class PublicationEditionService implements OnDestroy {
publication.text = textWithTags; publication.text = textWithTags;
this._save(state); this._save(state);
this._updateForm();
} }
insertCodeBlock(programmingLanguage: string, codeBlock: string): void { private insertCodeBlock(programmingLanguage: string, codeBlock: string): void {
const state = this._state; const state = this._state;
const publication = state.publication; const publication = state.publication;
@@ -263,6 +286,7 @@ export class PublicationEditionService implements OnDestroy {
publication.text = textWithTags; publication.text = textWithTags;
this._save(state); this._save(state);
this._updateForm();
} }
loadPreview(): void { loadPreview(): void {

2
frontend/src/app/components/publications-search-bar/publications-search-bar.component.html
View File

@@ -1,6 +1,6 @@
<form [formGroup]="formGroup"> <form [formGroup]="formGroup">
<input name="search-query" placeholder="Search something..." formControlName="criteria" i18n-placeholder/> <input name="search-query" placeholder="Search something..." formControlName="criteria" i18n-placeholder/>
<button type="submit" (click)="searchPublications()"> <button type="submit" (click)="searchPublications()" matRipple>
<mat-icon>search</mat-icon> <mat-icon>search</mat-icon>
</button> </button>
</form> </form>

3
frontend/src/app/components/publications-search-bar/publications-search-bar.component.scss
View File

@@ -24,9 +24,10 @@
border-radius: $borderRadiusValue; border-radius: $borderRadiusValue;
background-color: white; background-color: white;
border: none; border: none;
top: .4em; top: 0;
right: 0; right: 0;
color: #aaaaaa; color: #aaaaaa;
padding: .3em;
&:hover { &:hover {
background-color: #eee; background-color: #eee;

7
frontend/src/app/components/publications-search-bar/publications-search-bar.component.ts
View File

@@ -1,6 +1,6 @@
import { HttpParams } from "@angular/common/http";
import { Component, inject } from "@angular/core"; import { Component, inject } from "@angular/core";
import { FormBuilder, FormControl, ReactiveFormsModule, Validators } from "@angular/forms"; import { FormBuilder, FormControl, ReactiveFormsModule, Validators } from "@angular/forms";
import { MatRippleModule } from "@angular/material/core";
import { MatIconModule } from "@angular/material/icon"; import { MatIconModule } from "@angular/material/icon";
import { Router } from "@angular/router"; import { Router } from "@angular/router";
@@ -11,8 +11,9 @@ import { Router } from "@angular/router";
styleUrl: './publications-search-bar.component.scss', styleUrl: './publications-search-bar.component.scss',
standalone: true, standalone: true,
imports: [ imports: [
ReactiveFormsModule, MatIconModule,
MatIconModule MatRippleModule,
ReactiveFormsModule
], ],
providers: [] providers: []
}) })

5
frontend/src/app/components/side-menu/categories-menu/categories-menu.component.html
View File

@@ -6,7 +6,10 @@
</div> </div>
<div class="sub-category-container {{category.isOpenned ? 'displayed' : ''}}"> <div class="sub-category-container {{category.isOpenned ? 'displayed' : ''}}">
@for(subCategory of category.subCategories; track subCategory) { @for(subCategory of category.subCategories; track subCategory) {
<a [routerLink]="['/publications']" [queryParams]="{'category-id': subCategory.id}" (click)="categoryClicked.emit()" class="sub-category"> <a [routerLink]="['/publications']"
[queryParams]="{'category-id': subCategory.id}"
(click)="categoryClicked.emit()"
class="sub-category">
{{subCategory.name}} {{subCategory.name}}
</a> </a>
} }

6
frontend/src/app/components/side-menu/categories-menu/categories-menu.component.ts
View File

@@ -8,8 +8,12 @@ import { RouterModule } from "@angular/router";
@Component({ @Component({
selector: 'app-categories-menu', selector: 'app-categories-menu',
standalone: true, standalone: true,
imports: [CommonModule, RouterModule, MatIconModule],
templateUrl: './categories-menu.component.html', templateUrl: './categories-menu.component.html',
imports: [
CommonModule,
RouterModule,
MatIconModule
],
styleUrl: './categories-menu.component.scss' styleUrl: './categories-menu.component.scss'
}) })
export class CategoriesMenuComponent implements OnInit { export class CategoriesMenuComponent implements OnInit {

7
frontend/src/app/components/side-menu/side-menu.component.html
View File

@@ -4,7 +4,12 @@
<img src="assets/images/codiki.png" alt="logo"/> <img src="assets/images/codiki.png" alt="logo"/>
Codiki Codiki
</a> </a>
<button type="button" (click)="close()" matTooltip="Close the menu" i18n-matTooltip> <button type="button"
(click)="close()"
class="cod-button icon"
matTooltip="Close the menu"
matRipple
i18n-matTooltip>
<mat-icon>close</mat-icon> <mat-icon>close</mat-icon>
</button> </button>
</h1> </h1>

18
frontend/src/app/components/side-menu/side-menu.component.scss
View File

@@ -41,24 +41,6 @@
height: $imageSize; height: $imageSize;
} }
} }
button {
border-radius: 10em;
border: none;
display: flex;
justify-content: center;
align-items: center;
width: 2.5em;
height: 2.5em;
color: white;
background-color: #3f51b5;
transition: background-color .2s ease-in-out;
&:hover {
cursor: pointer;
background-color: #5c6bc0;
}
}
} }
h2 { h2 {

11
frontend/src/app/components/side-menu/side-menu.component.ts
View File

@@ -3,13 +3,20 @@ import { MatIconModule } from '@angular/material/icon';
import { MatTooltipModule } from '@angular/material/tooltip'; import { MatTooltipModule } from '@angular/material/tooltip';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
import { CategoriesMenuComponent } from './categories-menu/categories-menu.component'; import { CategoriesMenuComponent } from './categories-menu/categories-menu.component';
import { MatRippleModule } from '@angular/material/core';
@Component({ @Component({
selector: 'app-side-menu', selector: 'app-side-menu',
standalone: true, standalone: true,
imports: [CategoriesMenuComponent, MatIconModule, MatTooltipModule, RouterModule],
templateUrl: './side-menu.component.html', templateUrl: './side-menu.component.html',
styleUrl: './side-menu.component.scss' styleUrl: './side-menu.component.scss',
imports: [
CategoriesMenuComponent,
MatIconModule,
MatRippleModule,
MatTooltipModule,
RouterModule
]
}) })
export class SideMenuComponent { export class SideMenuComponent {
isOpenned: boolean = false; isOpenned: boolean = false;

8
frontend/src/app/components/submit-button/submit-button.component.html
View File

@@ -1,8 +1,12 @@
<button type="submit" [class]="color" [disabled]="disabled || requestPending" (click)="click.emit()"> <button type="submit"
class="cod-button {{color}}"
[disabled]="disabled || requestPending"
(click)="click.emit()"
matRipple>
@if (requestPending) { @if (requestPending) {
<mat-spinner class="spinner {{color}}" [diameter]="25"></mat-spinner> <mat-spinner class="spinner {{color}}" [diameter]="25"></mat-spinner>
} }
<span> <span>
{{ label }} <ng-content/>
</span> </span>
</button> </button>

10
frontend/src/app/components/submit-button/submit-button.component.ts
View File

@@ -1,14 +1,18 @@
import { CommonModule } from "@angular/common"; import { CommonModule } from "@angular/common";
import { Component, EventEmitter, Input, Output } from "@angular/core"; import { Component, EventEmitter, Input, Output } from "@angular/core";
import { MatRippleModule } from "@angular/material/core";
import { MatProgressSpinnerModule } from "@angular/material/progress-spinner"; import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
@Component({ @Component({
selector: 'app-submit-button', selector: 'app-submit-button',
standalone: true, standalone: true,
imports: [MatProgressSpinnerModule, CommonModule],
templateUrl: 'submit-button.component.html', templateUrl: 'submit-button.component.html',
styleUrl: 'submit-button.component.scss' styleUrl: 'submit-button.component.scss',
imports: [
CommonModule,
MatRippleModule,
MatProgressSpinnerModule
]
}) })
export class SubmitButtonComponent { export class SubmitButtonComponent {
@Input() requestPending: boolean = false; @Input() requestPending: boolean = false;

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

@@ -1,6 +1,6 @@
<form [formGroup]="loginForm" (submit)="performLogin()" ngNativeValidate> <form [formGroup]="loginForm" (submit)="performLogin()" class="cod-form card" ngNativeValidate>
<h1 i18n>Login</h1> <h1 i18n>Login</h1>
<div> <div class="form-field">
<mat-icon>mail</mat-icon> <mat-icon>mail</mat-icon>
<label for="email" i18n> <label for="email" i18n>
Email address Email address
@@ -8,7 +8,7 @@
</label> </label>
<input type="email" id="email" formControlName="email" autocomplete="email" required /> <input type="email" id="email" formControlName="email" autocomplete="email" required />
</div> </div>
<div> <div class="form-field">
<mat-icon>lock</mat-icon> <mat-icon>lock</mat-icon>
<label for="password" i18n> <label for="password" i18n>
Password Password
@@ -16,8 +16,8 @@
</label> </label>
<input type="password" id="password" formControlName="password" required /> <input type="password" id="password" formControlName="password" required />
</div> </div>
<div class="actions"> <div class="actions reversed">
<button type="submit" i18n>Send</button> <app-submit-button [requestPending]="false" [disabled]="false" i18n>Send</app-submit-button>
<a [routerLink]="['/signin']" i18n>Create an account</a> <a [routerLink]="['/signin']" class="cod-button secondary" matRipple i18n>Create an account</a>
</div> </div>
</form> </form>

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

@@ -4,79 +4,4 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 1em; padding: 1em;
form {
width: 80%;
max-width: 20em;
display: flex;
flex-direction: column;
justify-content: center;
gap: 1em;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
border-radius: .5em;
padding: 1em 1.5em;
background-color: #ffffff;
h1 {
margin: 0;
}
div {
display: flex;
flex-direction: column;
position: relative;
gap: .1em;
mat-icon {
position: absolute;
top: 1.3em;
left: .5em;
color: #777;
}
&.actions {
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
a {
color: #3f51b5;
text-decoration: none;
}
button, a.button {
padding: .8em 1.2em;
border-radius: 10em;
border: none;
background-color: #3f51b5;
color: white;
transition: background-color .2s ease-in-out;
&:hover {
background-color: #5b6ed8;
cursor: pointer;
}
}
}
label {
flex: 1;
font-style: italic;
padding-left: 1em;
color: #777;
.required {
color: red;
}
}
input {
flex: 1;
background-color: #eeeeee;
border: none;
border-radius: 10em;
padding: 1em 1em 1em 3em;
}
}
}
} }

10
frontend/src/app/pages/login/login.component.ts
View File

@@ -5,13 +5,21 @@ import { Subscription, debounceTime, map } from 'rxjs';
import { LoginService } from './login.service'; import { LoginService } from './login.service';
import { MatIconModule } from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
import { SubmitButtonComponent } from "../../components/submit-button/submit-button.component";
import { MatRippleModule } from '@angular/material/core';
@Component({ @Component({
selector: 'app-login', selector: 'app-login',
standalone: true, standalone: true,
templateUrl: './login.component.html', templateUrl: './login.component.html',
styleUrl: './login.component.scss', styleUrl: './login.component.scss',
imports: [ReactiveFormsModule, MatIconModule, RouterModule], imports: [
MatIconModule,
MatRippleModule,
ReactiveFormsModule,
RouterModule,
SubmitButtonComponent
],
providers: [LoginService, MatSnackBarModule] providers: [LoginService, MatSnackBarModule]
}) })
export class LoginComponent implements OnInit, OnDestroy { export class LoginComponent implements OnInit, OnDestroy {

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

@@ -60,8 +60,7 @@ export class LoginService {
performLogin(): void { performLogin(): void {
const state = this.state; const state = this.state;
// Check state is valid if (this.isStateValid(state)) {
this.userRestService this.userRestService
.login(state.request) .login(state.request)
.then((response) => { .then((response) => {
@@ -73,5 +72,12 @@ export class LoginService {
console.error(error); console.error(error);
this.snackBar.open($localize`Authentication failed.`, $localize`Close`, { duration: 5000 }); this.snackBar.open($localize`Authentication failed.`, $localize`Close`, { duration: 5000 });
}); });
} else {
this.snackBar.open($localize`Please, fill the inputs before send.`, $localize`Close`, { duration: 5000 });
}
}
isStateValid(state: LoginState): boolean {
return !!state.request.email?.trim().length && !!state.request.password?.length;
} }
} }

1
frontend/src/app/pages/my-publications/my-publications.component.html
View File

@@ -4,6 +4,7 @@
class="new-publication" class="new-publication"
matTooltip="Add a new publication" matTooltip="Add a new publication"
matTooltipPosition="left" matTooltipPosition="left"
matRipple
i18n-matTooltip> i18n-matTooltip>
+ +
</a> </a>

4
frontend/src/app/pages/my-publications/my-publications.component.ts
View File

@@ -7,6 +7,7 @@ import { Publication } from "../../core/rest-services/publications/model/publica
import { CommonModule } from "@angular/common"; import { CommonModule } from "@angular/common";
import { RouterModule } from "@angular/router"; import { RouterModule } from "@angular/router";
import { MatTooltipModule } from "@angular/material/tooltip"; import { MatTooltipModule } from "@angular/material/tooltip";
import { MatRippleModule } from "@angular/material/core";
@Component({ @Component({
@@ -17,8 +18,9 @@ import { MatTooltipModule } from "@angular/material/tooltip";
imports: [ imports: [
CommonModule, CommonModule,
MatProgressSpinnerModule, MatProgressSpinnerModule,
PublicationListComponent, MatRippleModule,
MatTooltipModule, MatTooltipModule,
PublicationListComponent,
RouterModule RouterModule
], ],
providers: [MyPublicationsService] providers: [MyPublicationsService]

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

@@ -12,6 +12,7 @@
<a [routerLink]="['edit']" <a [routerLink]="['edit']"
class="button action" class="button action"
matTooltip="Click to edit the publication" matTooltip="Click to edit the publication"
matRipple
i18n-matTooltip> i18n-matTooltip>
<mat-icon>edit</mat-icon> <mat-icon>edit</mat-icon>
</a> </a>
@@ -33,6 +34,7 @@
(click)="deletePublication()" (click)="deletePublication()"
matTooltip="Click to delete the publication" matTooltip="Click to delete the publication"
matTooltipPosition="left" matTooltipPosition="left"
matRipple
i18n-matTooltip> i18n-matTooltip>
<mat-icon>delete</mat-icon> <mat-icon>delete</mat-icon>
Delete Delete

32
frontend/src/app/pages/publication/publication.component.ts
View File

@@ -1,25 +1,33 @@
import { Component, OnDestroy, OnInit, inject } from '@angular/core';
import { PublicationRestService } from '../../core/rest-services/publications/publication.rest-service';
import { ActivatedRoute, Router, RouterModule } from '@angular/router';
import { Subscription } from 'rxjs';
import { Publication } from '../../core/rest-services/publications/model/publication';
import { MatSnackBar } from '@angular/material/snack-bar';
import { CommonModule, Location } from '@angular/common'; import { CommonModule, Location } from '@angular/common';
import { MatProgressSpinner } from '@angular/material/progress-spinner'; import { Component, OnDestroy, OnInit, inject } from '@angular/core';
import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip'; import { MatRippleModule } from '@angular/material/core';
import { MatIcon } from '@angular/material/icon';
import { AuthenticationService } from '../../core/service/authentication.service';
import { MatDialog } from '@angular/material/dialog'; import { MatDialog } from '@angular/material/dialog';
import { MatIcon } from '@angular/material/icon';
import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { MatSnackBar } from '@angular/material/snack-bar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { ActivatedRoute, RouterModule } from '@angular/router';
import { Subscription } from 'rxjs';
import { ConfirmationDialog } from '../../components/confirmation-dialog/confirmation-dialog.component'; import { ConfirmationDialog } from '../../components/confirmation-dialog/confirmation-dialog.component';
import { Publication } from '../../core/rest-services/publications/model/publication';
import { PublicationRestService } from '../../core/rest-services/publications/publication.rest-service';
import { AuthenticationService } from '../../core/service/authentication.service';
declare let Prism: any; declare let Prism: any;
@Component({ @Component({
selector: 'app-publication', selector: 'app-publication',
standalone: true, standalone: true,
imports: [CommonModule, MatProgressSpinner, MatTooltip, RouterModule, MatIcon, MatTooltipModule],
templateUrl: './publication.component.html', templateUrl: './publication.component.html',
styleUrl: './publication.component.scss' styleUrl: './publication.component.scss',
imports: [
CommonModule,
MatIcon,
MatRippleModule,
MatProgressSpinner,
MatTooltipModule,
RouterModule
]
}) })
export class PublicationComponent implements OnInit, OnDestroy { export class PublicationComponent implements OnInit, OnDestroy {
private readonly activatedRoute = inject(ActivatedRoute); private readonly activatedRoute = inject(ActivatedRoute);

16
frontend/src/app/pages/signin/signin.component.html
View File

@@ -1,6 +1,6 @@
<form [formGroup]="signinForm" (submit)="performSignin()" ngNativeValidate> <form [formGroup]="signinForm" (submit)="performSignin()" class="cod-form card" ngNativeValidate>
<h1 i18n>Signin</h1> <h1 i18n>Signin</h1>
<div> <div class="form-field">
<mat-icon>person</mat-icon> <mat-icon>person</mat-icon>
<label for="pseudo" i18n> <label for="pseudo" i18n>
Pseudo Pseudo
@@ -8,7 +8,7 @@
</label> </label>
<input type="text" id="pseudo" formControlName="pseudo" autocomplete="pseudo" required /> <input type="text" id="pseudo" formControlName="pseudo" autocomplete="pseudo" required />
</div> </div>
<div> <div class="form-field">
<mat-icon>mail</mat-icon> <mat-icon>mail</mat-icon>
<label for="email" i18n> <label for="email" i18n>
Email address Email address
@@ -16,7 +16,7 @@
</label> </label>
<input type="email" id="email" formControlName="email" autocomplete="email" required /> <input type="email" id="email" formControlName="email" autocomplete="email" required />
</div> </div>
<div> <div class="form-field">
<mat-icon>lock</mat-icon> <mat-icon>lock</mat-icon>
<label for="password" i18n> <label for="password" i18n>
Password Password
@@ -24,7 +24,7 @@
</label> </label>
<input type="password" id="password" formControlName="password" required /> <input type="password" id="password" formControlName="password" required />
</div> </div>
<div> <div class="form-field">
<mat-icon>lock</mat-icon> <mat-icon>lock</mat-icon>
<label for="confirm-password" i18n> <label for="confirm-password" i18n>
Confirm password Confirm password
@@ -32,8 +32,8 @@
</label> </label>
<input type="password" id="confirm-password" formControlName="confirmPassword" required /> <input type="password" id="confirm-password" formControlName="confirmPassword" required />
</div> </div>
<div class="actions"> <div class="actions reversed">
<button type="submit" i18n>Send</button> <app-submit-button [requestPending]="false" [disabled]="false" i18n>Send</app-submit-button>
<a [routerLink]="['/login']" i18n>I already have an account</a> <a [routerLink]="['/login']" class="cod-button secondary" matRipple i18n>I already have an account</a>
</div> </div>
</form> </form>

75
frontend/src/app/pages/signin/signin.component.scss
View File

@@ -4,79 +4,4 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 1em; padding: 1em;
form {
width: 80%;
max-width: 20em;
display: flex;
flex-direction: column;
justify-content: center;
gap: 1em;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
border-radius: .5em;
padding: 1em 1.5em;
background-color: #ffffff;
h1 {
margin: 0;
}
div {
display: flex;
flex-direction: column;
position: relative;
gap: .1em;
mat-icon {
position: absolute;
top: 1.3em;
left: .5em;
color: #777;
}
&.actions {
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;
&:hover {
background-color: #5b6ed8;
cursor: pointer;
}
}
a {
color: #3f51b5;
text-decoration: none;
}
}
label {
flex: 1;
font-style: italic;
padding-left: 1em;
color: #777;
.required {
color: red;
}
}
input {
flex: 1;
background-color: #eeeeee;
border: none;
border-radius: 10em;
padding: 1em 1em 1em 3em;
}
}
}
} }

10
frontend/src/app/pages/signin/signin.component.ts
View File

@@ -6,13 +6,21 @@ import { Subscription, debounceTime, distinctUntilChanged, map } from 'rxjs';
import { SigninService } from './signin.service'; import { SigninService } from './signin.service';
import { LoginService } from '../login/login.service'; import { LoginService } from '../login/login.service';
import { FormError } from '../../core/model/FormError'; import { FormError } from '../../core/model/FormError';
import { SubmitButtonComponent } from "../../components/submit-button/submit-button.component";
import { MatRippleModule } from '@angular/material/core';
@Component({ @Component({
selector: 'app-signin', selector: 'app-signin',
standalone: true, standalone: true,
imports: [ReactiveFormsModule, MatIconModule, RouterModule],
templateUrl: './signin.component.html', templateUrl: './signin.component.html',
styleUrl: './signin.component.scss', styleUrl: './signin.component.scss',
imports: [
MatIconModule,
MatRippleModule,
ReactiveFormsModule,
RouterModule,
SubmitButtonComponent
],
providers: [SigninService, LoginService] providers: [SigninService, LoginService]
}) })
export class SigninComponent implements OnInit, OnDestroy { export class SigninComponent implements OnInit, OnDestroy {

43
frontend/src/design_system/button.scss Normal file
View File

@@ -0,0 +1,43 @@
button.cod-button, a.cod-button {
padding: .8em 1.2em;
border-radius: 10em;
border: none;
background-color: #3f51b5;
color: white;
transition: background-color .2s ease-in-out;
display: flex;
justify-content: center;
align-items: center;
&:hover {
background-color: #5b6ed8;
cursor: pointer;
}
&.secondary {
color: #3f51b5;
background-color: white;
&:hover {
background-color: #f2f4ff;
}
}
&.icon {
$buttonSize: 2.5em;
width: $buttonSize;
height: $buttonSize;
padding: 0;
&.close {
position: absolute;
top: 1em;
right: 1em;
color: black;
}
}
}
a.cod-button {
text-decoration: none;
}

64
frontend/src/design_system/form.scss Normal file
View File

@@ -0,0 +1,64 @@
form.cod-form {
&.card {
width: 80%;
max-width: 20em;
display: flex;
flex-direction: column;
justify-content: center;
gap: 1em;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
border-radius: .5em;
padding: 1em 1.5em;
background-color: #ffffff;
}
h1 {
margin: 0;
}
div {
&.actions {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
&.reversed {
flex-direction: row-reverse;
}
}
&.form-field {
display: flex;
flex-direction: column;
position: relative;
gap: .1em;
mat-icon {
position: absolute;
top: 1.3em;
left: .5em;
color: #777;
}
label {
flex: 1;
font-style: italic;
padding-left: 1em;
color: #777;
.required {
color: red;
}
}
input {
flex: 1;
background-color: #eeeeee;
border: none;
border-radius: 10em;
padding: 1em 1em 1em 3em;
}
}
}
}

2
frontend/src/design_system/index.scss Normal file
View File

@@ -0,0 +1,2 @@
@use './button.scss';
@use './form.scss';

7
frontend/src/locale/messages-fr.json
View File

@@ -3,7 +3,7 @@
"translations": { "translations": {
"3603720768157919481": "Non", "3603720768157919481": "Non",
"4861926948802653243": "Oui", "4861926948802653243": "Oui",
"5277292207846698726": "{$START_TAG_SPAN}©{$CLOSE_TAG_SPAN} 2016 - 2024 Tous droits réservés - 2.0-alpha {$START_LINK}{$START_TAG_MAT_ICON}favorite{$CLOSE_TAG_MAT_ICON}{$CLOSE_LINK}", "6130235414952256120": "{$START_TAG_SPAN}©{$CLOSE_TAG_SPAN} 2016 - 2024 Tous droits réservés - 2.1 {$START_LINK}{$START_TAG_MAT_ICON}favorite{$CLOSE_TAG_MAT_ICON}{$CLOSE_LINK}",
"9214089025589249203": "Les indicateurs de vie du site seront disponibles ultérieurement...", "9214089025589249203": "Les indicateurs de vie du site seront disponibles ultérieurement...",
"1711651175531679766": "La documentation sera disponible ultérieurement...", "1711651175531679766": "La documentation sera disponible ultérieurement...",
"6299155290121808295": "Développements realisés par", "6299155290121808295": "Développements realisés par",
@@ -11,6 +11,7 @@
"3394094310583807145": "{$START_TAG_MAT_ICON}description{$CLOSE_TAG_MAT_ICON} Mes publications", "3394094310583807145": "{$START_TAG_MAT_ICON}description{$CLOSE_TAG_MAT_ICON} Mes publications",
"5690703874094076840": "{$START_TAG_MAT_ICON}logout{$CLOSE_TAG_MAT_ICON} Déconnexion", "5690703874094076840": "{$START_TAG_MAT_ICON}logout{$CLOSE_TAG_MAT_ICON} Déconnexion",
"2454050363478003966": "Connexion", "2454050363478003966": "Connexion",
"7819314041543176992": "Fermer",
"6379828571327118783": "Ajouter un bloc de code", "6379828571327118783": "Ajouter un bloc de code",
"933522671092765466": "Langage de programmation", "933522671092765466": "Langage de programmation",
"5953425146193292178": "Bloc de code", "5953425146193292178": "Bloc de code",
@@ -22,7 +23,6 @@
"4491342806775118195": "Il n'y a aucune image.", "4491342806775118195": "Il n'y a aucune image.",
"5036131155743433968": "{$START_TAG_MAT_ICON}upload_file{$CLOSE_TAG_MAT_ICON} Ajouter une nouvelle image", "5036131155743433968": "{$START_TAG_MAT_ICON}upload_file{$CLOSE_TAG_MAT_ICON} Ajouter une nouvelle image",
"6852365376059142995": "Une erreur est survenue lors du chargements de vos images.", "6852365376059142995": "Une erreur est survenue lors du chargements de vos images.",
"7819314041543176992": "Fermer",
"6198966268398913224": "Une erreur technique est survenue lors de l'ajout de votre image.", "6198966268398913224": "Une erreur technique est survenue lors de l'ajout de votre image.",
"3603937053948195893": "Édition", "3603937053948195893": "Édition",
"5701618810648052610": "Titre", "5701618810648052610": "Titre",
@@ -32,8 +32,8 @@
"382530603854484923": "Cliquez pour ajouter une section titre de niveau 1", "382530603854484923": "Cliquez pour ajouter une section titre de niveau 1",
"7918008528690631661": "Cliquez pour ajouter une section titre de niveau 2", "7918008528690631661": "Cliquez pour ajouter une section titre de niveau 2",
"200884310255063303": "Cliquez pour ajouter une section titre de niveau 3", "200884310255063303": "Cliquez pour ajouter une section titre de niveau 3",
"327371240590280003": "Cliquez pour ajouter une image",
"2615926469669796978": "Cliquez pour ajouter un lien", "2615926469669796978": "Cliquez pour ajouter un lien",
"327371240590280003": "Cliquez pour ajouter une image",
"4689637499823680515": "Cliquez pour ajouter un bloc de code", "4689637499823680515": "Cliquez pour ajouter un bloc de code",
"1065684538660053227": "Cliquez pour afficher l'aide", "1065684538660053227": "Cliquez pour afficher l'aide",
"6205355627445317276": "Contenu", "6205355627445317276": "Contenu",
@@ -60,6 +60,7 @@
"2308975396733519902": "Créer un compte", "2308975396733519902": "Créer un compte",
"1037765878727976611": "Connexion réussie", "1037765878727976611": "Connexion réussie",
"6034686865111167926": "Une erreur est survenue lors de la connexion.", "6034686865111167926": "Une erreur est survenue lors de la connexion.",
"5304730975301536612": "Veuillez renseigner tous les champs avant de valider.",
"1041423751558601074": "Vos publications", "1041423751558601074": "Vos publications",
"5463894166935799864": "Rédiger une nouvelle publication", "5463894166935799864": "Rédiger une nouvelle publication",
"1519054954638405159": "Chargement de la liste de vos publications...", "1519054954638405159": "Chargement de la liste de vos publications...",

7
frontend/src/locale/messages.json
View File

@@ -3,7 +3,7 @@
"translations": { "translations": {
"3603720768157919481": " No ", "3603720768157919481": " No ",
"4861926948802653243": " Yes ", "4861926948802653243": " Yes ",
"5277292207846698726": "{$START_TAG_SPAN}©{$CLOSE_TAG_SPAN} 2016 - 2024 All rights reserved - 2.0-alpha {$START_LINK}{$START_TAG_MAT_ICON}favorite{$CLOSE_TAG_MAT_ICON}{$CLOSE_LINK}", "6130235414952256120": "{$START_TAG_SPAN}©{$CLOSE_TAG_SPAN} 2016 - 2024 All rights reserved - 2.1 {$START_LINK}{$START_TAG_MAT_ICON}favorite{$CLOSE_TAG_MAT_ICON}{$CLOSE_LINK}",
"9214089025589249203": "Health checking will be available in future...", "9214089025589249203": "Health checking will be available in future...",
"1711651175531679766": "Documentation will be available in future...", "1711651175531679766": "Documentation will be available in future...",
"6299155290121808295": "Development realised by", "6299155290121808295": "Development realised by",
@@ -11,6 +11,7 @@
"3394094310583807145": "{$START_TAG_MAT_ICON}description{$CLOSE_TAG_MAT_ICON} My publications ", "3394094310583807145": "{$START_TAG_MAT_ICON}description{$CLOSE_TAG_MAT_ICON} My publications ",
"5690703874094076840": "{$START_TAG_MAT_ICON}logout{$CLOSE_TAG_MAT_ICON} Disconnect ", "5690703874094076840": "{$START_TAG_MAT_ICON}logout{$CLOSE_TAG_MAT_ICON} Disconnect ",
"2454050363478003966": "Login", "2454050363478003966": "Login",
"7819314041543176992": "Close",
"6379828571327118783": "Add a code block", "6379828571327118783": "Add a code block",
"933522671092765466": "Programming language", "933522671092765466": "Programming language",
"5953425146193292178": "Code block", "5953425146193292178": "Code block",
@@ -22,7 +23,6 @@
"4491342806775118195": "There is no any picture.", "4491342806775118195": "There is no any picture.",
"5036131155743433968": "{$START_TAG_MAT_ICON}upload_file{$CLOSE_TAG_MAT_ICON} Add new picture ", "5036131155743433968": "{$START_TAG_MAT_ICON}upload_file{$CLOSE_TAG_MAT_ICON} Add new picture ",
"6852365376059142995": "An error occured while loading pictures.", "6852365376059142995": "An error occured while loading pictures.",
"7819314041543176992": "Close",
"6198966268398913224": "A technical error occured while uploading your picture.", "6198966268398913224": "A technical error occured while uploading your picture.",
"3603937053948195893": "Edition", "3603937053948195893": "Edition",
"5701618810648052610": "Title", "5701618810648052610": "Title",
@@ -32,8 +32,8 @@
"382530603854484923": "Click to insert a title 1 section", "382530603854484923": "Click to insert a title 1 section",
"7918008528690631661": "Click to insert a title 2 section", "7918008528690631661": "Click to insert a title 2 section",
"200884310255063303": "Click to insert a title 3 section", "200884310255063303": "Click to insert a title 3 section",
"327371240590280003": "Click to insert a picture",
"2615926469669796978": "Click to insert a link", "2615926469669796978": "Click to insert a link",
"327371240590280003": "Click to insert a picture",
"4689637499823680515": "Click to insert a code block", "4689637499823680515": "Click to insert a code block",
"1065684538660053227": "Click to display editor help", "1065684538660053227": "Click to display editor help",
"6205355627445317276": "Content", "6205355627445317276": "Content",
@@ -60,6 +60,7 @@
"2308975396733519902": "Create an account", "2308975396733519902": "Create an account",
"1037765878727976611": "Authentication succeeded!", "1037765878727976611": "Authentication succeeded!",
"6034686865111167926": "Authentication failed.", "6034686865111167926": "Authentication failed.",
"5304730975301536612": "Please, fill the inputs before send.",
"1041423751558601074": "Your publications", "1041423751558601074": "Your publications",
"5463894166935799864": "Add a new publication", "5463894166935799864": "Add a new publication",
"1519054954638405159": "Publication loading...", "1519054954638405159": "Publication loading...",

1
frontend/src/styles.scss
View File

@@ -1,4 +1,5 @@
/* You can add global styles to this file, and also import other style files */ /* You can add global styles to this file, and also import other style files */
@use './design_system/index.scss';
html, body { height: 100%; } html, body { height: 100%; }
body { body {