From dae0a4b78dda856854b82d41c6c95b73dd6da4bc Mon Sep 17 00:00:00 2001 From: Florian THIERRY Date: Fri, 18 Oct 2024 10:37:31 +0200 Subject: [PATCH 01/11] Fix field edition problem. --- .../publication-edition.component.ts | 69 +++-------- .../publication-edition.service.ts | 108 +++++++++++------- 2 files changed, 79 insertions(+), 98 deletions(-) diff --git a/frontend/src/app/components/publication-edition/publication-edition.component.ts b/frontend/src/app/components/publication-edition/publication-edition.component.ts index 1aa2b8b..b52fa05 100644 --- a/frontend/src/app/components/publication-edition/publication-edition.component.ts +++ b/frontend/src/app/components/publication-edition/publication-edition.component.ts @@ -1,6 +1,6 @@ import { CommonModule, Location } from "@angular/common"; 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 { MatIconModule } from "@angular/material/icon"; import { MatInputModule } from "@angular/material/input"; @@ -48,18 +48,13 @@ export class PublicationEditionComponent implements OnChanges, OnDestroy { publicationInEdition!: Publication; private readonly categoryService = inject(CategoryService); - private readonly formBuilder = inject(FormBuilder); private readonly location = inject(Location); private readonly publicationEditionService = inject(PublicationEditionService); private subscriptions: Subscription[] = []; - publicationEditionForm: FormGroup = this.formBuilder.group({ - title: new FormControl('', [Validators.required]), - description: new FormControl('', [Validators.required]), - text: new FormControl('', [Validators.required]), - illustrationId: new FormControl('', [Validators.required]), - categoryId: new FormControl('', [Validators.required]) - }); + get publicationEditionForm(): FormGroup { + return this.publicationEditionService.publicationEditionForm; + } get isLoading$(): Observable { return this.publicationEditionService.isLoading$; @@ -92,52 +87,14 @@ export class PublicationEditionComponent implements OnChanges, OnDestroy { } return 0; } - + ngOnChanges(): void { this.ngOnDestroy(); - this.publicationInEdition = this.publication; - 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); + if (!this.publicationInEdition || this.publicationInEdition !== this.publication) { + this.publicationInEdition = this.publication; + this.publicationEditionService.init(this.publicationInEdition); + } } ngOnDestroy(): void { @@ -164,10 +121,6 @@ export class PublicationEditionComponent implements OnChanges, OnDestroy { this.publicationEditionService.displayCodeBlockDialog(); } - save(): void { - this.publicationSave.emit(this.publicationInEdition); - } - displayPictureSectionDialog(): void { this.publicationEditionService.displayPictureSectionDialog(); } @@ -183,6 +136,10 @@ export class PublicationEditionComponent implements OnChanges, OnDestroy { } } + save(): void { + this.publicationSave.emit(this.publicationEditionService.editedPublication); + } + onTabChange(tabSelectedIndex: number): void { if (tabSelectedIndex === 1) { this.publicationEditionService.loadPreview(); diff --git a/frontend/src/app/components/publication-edition/publication-edition.service.ts b/frontend/src/app/components/publication-edition/publication-edition.service.ts index ef60523..36ccd58 100644 --- a/frontend/src/app/components/publication-edition/publication-edition.service.ts +++ b/frontend/src/app/components/publication-edition/publication-edition.service.ts @@ -3,13 +3,14 @@ import { inject, Injectable, OnDestroy } from "@angular/core"; import { MatDialog } from "@angular/material/dialog"; import { MatSnackBar } from "@angular/material/snack-bar"; 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 { PublicationRestService } from "../../core/rest-services/publications/publication.rest-service"; import { copy } from "../../core/utils/ObjectUtils"; import { CodeBlockDialog } from "./code-block-dialog/code-block-dialog.component"; import { PictureSelectionDialog } from "./picture-selection-dialog/picture-selection-dialog.component"; import { PreviewContentRequest } from "../../core/rest-services/publications/model/preview"; +import { FormBuilder, FormControl, FormGroup, Validators } from "@angular/forms"; declare let Prism: any; @@ -57,10 +58,11 @@ const DEFAULT_STATE: PublicationEditionState = { @Injectable() export class PublicationEditionService implements OnDestroy { 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 formBuilder = inject(FormBuilder); + private readonly location = inject(Location); + private readonly publicationRestService = inject(PublicationRestService); + private readonly snackBar = inject(MatSnackBar); private isLoadingSubject = new BehaviorSubject(false); private stateSubject = new BehaviorSubject(copy(DEFAULT_STATE)); @@ -68,6 +70,14 @@ export class PublicationEditionService implements OnDestroy { private isSavingSubject = new BehaviorSubject(false); private isPreviewingSubject = new BehaviorSubject(false); + publicationEditionForm: FormGroup = this.formBuilder.group({ + title: new FormControl('', [Validators.required]), + description: new FormControl('', [Validators.required]), + text: new FormControl('', [Validators.required]), + illustrationId: new FormControl('', [Validators.required]), + categoryId: new FormControl('', [Validators.required]) + }); + ngOnDestroy(): void { this.subscriptions.forEach(subscription => subscription.unsubscribe()); } @@ -80,6 +90,17 @@ export class PublicationEditionService implements OnDestroy { 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 { return this.isLoadingSubject.asObservable(); } @@ -96,6 +117,10 @@ export class PublicationEditionService implements OnDestroy { return this.stateSubject.asObservable(); } + get editedPublication(): Publication { + return this._state.publication; + } + loadPublication(): void { this.isLoadingSubject.next(true); @@ -106,52 +131,47 @@ export class PublicationEditionService implements OnDestroy { this.location.back(); } else { this.publicationRestService.getById(publicationId) - .then(publication => { - const state = this._state; - state.publication = publication; - this.stateSubject.next(state); - }) - .catch(error => { - const errorMessage = $localize`A technical error occurred while loading publication data.`; - this.snackBar.open(errorMessage, $localize`Close`, {duration: 5000}); - console.error(errorMessage, error) - }) - .finally(() => this.isLoadingSubject.next(false)); + .then(publication => { + const state = this._state; + state.publication = publication; + this.stateSubject.next(state); + }) + .catch(error => { + const errorMessage = $localize`A technical error occurred while loading publication data.`; + this.snackBar.open(errorMessage, $localize`Close`, {duration: 5000}); + console.error(errorMessage, error) + }) + .finally(() => this.isLoadingSubject.next(false)); } - }); + }); } init(publication: Publication): void { const state = this._state; state.publication = publication; this.stateSubject.next(state); + this._updateForm(); + + const formValueChangesSubscription = this.publicationEditionForm.valueChanges + .pipe( + debounceTime(200), + distinctUntilChanged() + ) + .subscribe(formValue => { + const state = this._state; + const publication = state.publication; + + publication.title = formValue.title; + publication.description = formValue.description; + publication.categoryId = formValue.categoryId; + publication.text = formValue.text; + + this._save(state); + }) + this.subscriptions.push(formValueChangesSubscription); } - editTitle(title: string): void { - const state = this._state; - state.publication.title = title; - this._save(state); - } - - editDescription(description: 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 { + private editIllustrationId(pictureId: string): void { const state = this._state; state.publication.illustrationId = pictureId this._save(state); @@ -204,6 +224,7 @@ export class PublicationEditionService implements OnDestroy { publication.text = textWithTags; this._save(state); + this._updateForm(); } else { console.error(`Bad value for parameter of function 'insertTitle': '${titleNumber}'.`); } @@ -233,6 +254,7 @@ export class PublicationEditionService implements OnDestroy { publication.text = textWithTags; this._save(state); + this._updateForm(); } insertLink(): void { @@ -248,9 +270,10 @@ export class PublicationEditionService implements OnDestroy { publication.text = textWithTags; this._save(state); + this._updateForm(); } - insertCodeBlock(programmingLanguage: string, codeBlock: string): void { + private insertCodeBlock(programmingLanguage: string, codeBlock: string): void { const state = this._state; const publication = state.publication; @@ -263,6 +286,7 @@ export class PublicationEditionService implements OnDestroy { publication.text = textWithTags; this._save(state); + this._updateForm(); } loadPreview(): void { From 7c5cc38cff486f6de98e4b2a28bbdfb0dde7038a Mon Sep 17 00:00:00 2001 From: Florian THIERRY Date: Mon, 21 Oct 2024 11:46:35 +0200 Subject: [PATCH 02/11] Initiate design system and refactor login page buttons. --- .../publications-search-bar.component.scss | 3 ++- .../src/app/pages/login/login.component.html | 2 +- .../src/app/pages/login/login.component.scss | 14 ------------ frontend/src/design_system/button.scss | 22 +++++++++++++++++++ frontend/src/design_system/index.scss | 1 + frontend/src/styles.scss | 1 + 6 files changed, 27 insertions(+), 16 deletions(-) create mode 100644 frontend/src/design_system/button.scss create mode 100644 frontend/src/design_system/index.scss diff --git a/frontend/src/app/components/publications-search-bar/publications-search-bar.component.scss b/frontend/src/app/components/publications-search-bar/publications-search-bar.component.scss index 72b9a11..86d7292 100644 --- a/frontend/src/app/components/publications-search-bar/publications-search-bar.component.scss +++ b/frontend/src/app/components/publications-search-bar/publications-search-bar.component.scss @@ -24,9 +24,10 @@ border-radius: $borderRadiusValue; background-color: white; border: none; - top: .4em; + top: 0; right: 0; color: #aaaaaa; + padding: .4em; &:hover { background-color: #eee; diff --git a/frontend/src/app/pages/login/login.component.html b/frontend/src/app/pages/login/login.component.html index 8ecd79a..93d6a54 100644 --- a/frontend/src/app/pages/login/login.component.html +++ b/frontend/src/app/pages/login/login.component.html @@ -18,6 +18,6 @@
- Create an account + Create an account
\ No newline at end of file diff --git a/frontend/src/app/pages/login/login.component.scss b/frontend/src/app/pages/login/login.component.scss index 4cfc60b..1fdc1a3 100644 --- a/frontend/src/app/pages/login/login.component.scss +++ b/frontend/src/app/pages/login/login.component.scss @@ -43,20 +43,6 @@ 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 { diff --git a/frontend/src/design_system/button.scss b/frontend/src/design_system/button.scss new file mode 100644 index 0000000..485b7fb --- /dev/null +++ b/frontend/src/design_system/button.scss @@ -0,0 +1,22 @@ +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; + } + + &.secondary { + color: #3f51b5; + background-color: white; + + &:hover { + background-color: #f2f4ff; + } + } +} \ No newline at end of file diff --git a/frontend/src/design_system/index.scss b/frontend/src/design_system/index.scss new file mode 100644 index 0000000..8f77da9 --- /dev/null +++ b/frontend/src/design_system/index.scss @@ -0,0 +1 @@ +@use './button.scss'; \ No newline at end of file diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index a8021ad..269712a 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -1,4 +1,5 @@ /* You can add global styles to this file, and also import other style files */ +@use './design_system/index.scss'; html, body { height: 100%; } body { From cfca22bf66a441098eeb65a1885ea38785d189ab Mon Sep 17 00:00:00 2001 From: Florian THIERRY Date: Mon, 21 Oct 2024 14:05:56 +0200 Subject: [PATCH 03/11] Factorization of input styling. --- .../src/app/pages/login/login.component.html | 6 +- .../src/app/pages/login/login.component.scss | 48 -------------- .../app/pages/signin/signin.component.html | 12 ++-- .../app/pages/signin/signin.component.scss | 62 ------------------- frontend/src/design_system/button.scss | 4 ++ frontend/src/design_system/index.scss | 3 +- frontend/src/design_system/input.scss | 51 +++++++++++++++ 7 files changed, 66 insertions(+), 120 deletions(-) create mode 100644 frontend/src/design_system/input.scss diff --git a/frontend/src/app/pages/login/login.component.html b/frontend/src/app/pages/login/login.component.html index 93d6a54..0f5b59d 100644 --- a/frontend/src/app/pages/login/login.component.html +++ b/frontend/src/app/pages/login/login.component.html @@ -1,6 +1,6 @@

Login

-
+
mail
-
+
lock
-
+
Create an account
diff --git a/frontend/src/app/pages/login/login.component.scss b/frontend/src/app/pages/login/login.component.scss index 1fdc1a3..e643f7c 100644 --- a/frontend/src/app/pages/login/login.component.scss +++ b/frontend/src/app/pages/login/login.component.scss @@ -16,53 +16,5 @@ 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; - } - } - - 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; - } - } } } \ No newline at end of file diff --git a/frontend/src/app/pages/signin/signin.component.html b/frontend/src/app/pages/signin/signin.component.html index c54f2ae..68fc610 100644 --- a/frontend/src/app/pages/signin/signin.component.html +++ b/frontend/src/app/pages/signin/signin.component.html @@ -1,6 +1,6 @@

Signin

-
+
person
-
+
mail
-
+
lock
-
+
lock
-
+
- I already have an account + I already have an account
\ No newline at end of file diff --git a/frontend/src/app/pages/signin/signin.component.scss b/frontend/src/app/pages/signin/signin.component.scss index a8d5b3d..e643f7c 100644 --- a/frontend/src/app/pages/signin/signin.component.scss +++ b/frontend/src/app/pages/signin/signin.component.scss @@ -16,67 +16,5 @@ 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; - } - } } } \ No newline at end of file diff --git a/frontend/src/design_system/button.scss b/frontend/src/design_system/button.scss index 485b7fb..b0c071a 100644 --- a/frontend/src/design_system/button.scss +++ b/frontend/src/design_system/button.scss @@ -19,4 +19,8 @@ button, a.button { background-color: #f2f4ff; } } +} + +a.button { + text-decoration: none; } \ No newline at end of file diff --git a/frontend/src/design_system/index.scss b/frontend/src/design_system/index.scss index 8f77da9..a6c204c 100644 --- a/frontend/src/design_system/index.scss +++ b/frontend/src/design_system/index.scss @@ -1 +1,2 @@ -@use './button.scss'; \ No newline at end of file +@use './button.scss'; +@use './input.scss'; \ No newline at end of file diff --git a/frontend/src/design_system/input.scss b/frontend/src/design_system/input.scss new file mode 100644 index 0000000..2492982 --- /dev/null +++ b/frontend/src/design_system/input.scss @@ -0,0 +1,51 @@ +form { + 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; + } + } + } +} \ No newline at end of file From 053ac89e3cce7b5f2b3c0e542c1950d171d84537 Mon Sep 17 00:00:00 2001 From: Florian THIERRY Date: Mon, 21 Oct 2024 14:40:15 +0200 Subject: [PATCH 04/11] Misc changes about form inputs. --- .../publication-edition.component.html | 2 +- .../submit-button.component.html | 7 +++-- .../src/app/pages/login/login.component.html | 6 ++-- .../src/app/pages/login/login.component.scss | 13 -------- .../src/app/pages/login/login.component.ts | 3 +- frontend/src/app/pages/login/login.service.ts | 30 +++++++++++-------- .../app/pages/signin/signin.component.html | 6 ++-- .../app/pages/signin/signin.component.scss | 13 -------- .../src/app/pages/signin/signin.component.ts | 3 +- frontend/src/design_system/button.scss | 4 +-- .../design_system/{input.scss => form.scss} | 15 +++++++++- frontend/src/design_system/index.scss | 2 +- frontend/src/locale/messages-fr.json | 3 +- frontend/src/locale/messages.json | 1 + 14 files changed, 54 insertions(+), 54 deletions(-) rename frontend/src/design_system/{input.scss => form.scss} (75%) diff --git a/frontend/src/app/components/publication-edition/publication-edition.component.html b/frontend/src/app/components/publication-edition/publication-edition.component.html index 439d537..d4212c8 100644 --- a/frontend/src/app/components/publication-edition/publication-edition.component.html +++ b/frontend/src/app/components/publication-edition/publication-edition.component.html @@ -92,7 +92,7 @@
- + Save diff --git a/frontend/src/app/components/submit-button/submit-button.component.html b/frontend/src/app/components/submit-button/submit-button.component.html index b5c47cd..7bd6057 100644 --- a/frontend/src/app/components/submit-button/submit-button.component.html +++ b/frontend/src/app/components/submit-button/submit-button.component.html @@ -1,8 +1,11 @@ - \ No newline at end of file diff --git a/frontend/src/app/pages/login/login.component.html b/frontend/src/app/pages/login/login.component.html index 0f5b59d..f4ec81f 100644 --- a/frontend/src/app/pages/login/login.component.html +++ b/frontend/src/app/pages/login/login.component.html @@ -1,4 +1,4 @@ -
+

Login

mail @@ -17,7 +17,7 @@
- - Create an account + Send + Create an account
\ No newline at end of file diff --git a/frontend/src/app/pages/login/login.component.scss b/frontend/src/app/pages/login/login.component.scss index e643f7c..7aa78e0 100644 --- a/frontend/src/app/pages/login/login.component.scss +++ b/frontend/src/app/pages/login/login.component.scss @@ -4,17 +4,4 @@ justify-content: center; align-items: center; 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; - } } \ No newline at end of file diff --git a/frontend/src/app/pages/login/login.component.ts b/frontend/src/app/pages/login/login.component.ts index 08b956d..4994263 100644 --- a/frontend/src/app/pages/login/login.component.ts +++ b/frontend/src/app/pages/login/login.component.ts @@ -5,13 +5,14 @@ import { Subscription, debounceTime, map } from 'rxjs'; import { LoginService } from './login.service'; import { MatIconModule } from '@angular/material/icon'; import { RouterModule } from '@angular/router'; +import { SubmitButtonComponent } from "../../components/submit-button/submit-button.component"; @Component({ selector: 'app-login', standalone: true, templateUrl: './login.component.html', styleUrl: './login.component.scss', - imports: [ReactiveFormsModule, MatIconModule, RouterModule], + imports: [ReactiveFormsModule, MatIconModule, RouterModule, SubmitButtonComponent], providers: [LoginService, MatSnackBarModule] }) export class LoginComponent implements OnInit, OnDestroy { diff --git a/frontend/src/app/pages/login/login.service.ts b/frontend/src/app/pages/login/login.service.ts index bc1eff8..cb0478b 100644 --- a/frontend/src/app/pages/login/login.service.ts +++ b/frontend/src/app/pages/login/login.service.ts @@ -60,18 +60,24 @@ export class LoginService { performLogin(): void { const state = this.state; - // Check state is valid + if (this.isStateValid(state)) { + this.userRestService + .login(state.request) + .then((response) => { + this.authenticationService.authenticate(response.accessToken, response.refreshToken); + this.snackBar.open($localize`Authentication succeeded!`, $localize`Close`, { duration: 5000 }); + this.router.navigate(['/home']); + }) + .catch((error) => { + console.error(error); + 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 }); + } + } - this.userRestService - .login(state.request) - .then((response) => { - this.authenticationService.authenticate(response.accessToken, response.refreshToken); - this.snackBar.open($localize`Authentication succeeded!`, $localize`Close`, { duration: 5000 }); - this.router.navigate(['/home']); - }) - .catch((error) => { - console.error(error); - this.snackBar.open($localize`Authentication failed.`, $localize`Close`, { duration: 5000 }); - }); + isStateValid(state: LoginState): boolean { + return !!state.request.email?.trim().length && !!state.request.password?.length; } } diff --git a/frontend/src/app/pages/signin/signin.component.html b/frontend/src/app/pages/signin/signin.component.html index 68fc610..97ee0a4 100644 --- a/frontend/src/app/pages/signin/signin.component.html +++ b/frontend/src/app/pages/signin/signin.component.html @@ -1,4 +1,4 @@ -
+

Signin

person @@ -33,7 +33,7 @@
- - I already have an account + Send + I already have an account
\ No newline at end of file diff --git a/frontend/src/app/pages/signin/signin.component.scss b/frontend/src/app/pages/signin/signin.component.scss index e643f7c..7aa78e0 100644 --- a/frontend/src/app/pages/signin/signin.component.scss +++ b/frontend/src/app/pages/signin/signin.component.scss @@ -4,17 +4,4 @@ justify-content: center; align-items: center; 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; - } } \ No newline at end of file diff --git a/frontend/src/app/pages/signin/signin.component.ts b/frontend/src/app/pages/signin/signin.component.ts index d2b8005..14fa510 100644 --- a/frontend/src/app/pages/signin/signin.component.ts +++ b/frontend/src/app/pages/signin/signin.component.ts @@ -6,11 +6,12 @@ import { Subscription, debounceTime, distinctUntilChanged, map } from 'rxjs'; import { SigninService } from './signin.service'; import { LoginService } from '../login/login.service'; import { FormError } from '../../core/model/FormError'; +import { SubmitButtonComponent } from "../../components/submit-button/submit-button.component"; @Component({ selector: 'app-signin', standalone: true, - imports: [ReactiveFormsModule, MatIconModule, RouterModule], + imports: [ReactiveFormsModule, MatIconModule, RouterModule, SubmitButtonComponent], templateUrl: './signin.component.html', styleUrl: './signin.component.scss', providers: [SigninService, LoginService] diff --git a/frontend/src/design_system/button.scss b/frontend/src/design_system/button.scss index b0c071a..61fdf30 100644 --- a/frontend/src/design_system/button.scss +++ b/frontend/src/design_system/button.scss @@ -1,4 +1,4 @@ -button, a.button { +button.cod-btn, a.cod-button { padding: .8em 1.2em; border-radius: 10em; border: none; @@ -21,6 +21,6 @@ button, a.button { } } -a.button { +a.cod-button { text-decoration: none; } \ No newline at end of file diff --git a/frontend/src/design_system/input.scss b/frontend/src/design_system/form.scss similarity index 75% rename from frontend/src/design_system/input.scss rename to frontend/src/design_system/form.scss index 2492982..ffc4e80 100644 --- a/frontend/src/design_system/input.scss +++ b/frontend/src/design_system/form.scss @@ -1,4 +1,17 @@ -form { +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; } diff --git a/frontend/src/design_system/index.scss b/frontend/src/design_system/index.scss index a6c204c..c878f89 100644 --- a/frontend/src/design_system/index.scss +++ b/frontend/src/design_system/index.scss @@ -1,2 +1,2 @@ @use './button.scss'; -@use './input.scss'; \ No newline at end of file +@use './form.scss'; \ No newline at end of file diff --git a/frontend/src/locale/messages-fr.json b/frontend/src/locale/messages-fr.json index 0ad0f17..c82c0df 100644 --- a/frontend/src/locale/messages-fr.json +++ b/frontend/src/locale/messages-fr.json @@ -60,6 +60,7 @@ "2308975396733519902": "Créer un compte", "1037765878727976611": "Connexion réussie", "6034686865111167926": "Une erreur est survenue lors de la connexion.", + "5304730975301536612": "Veuillez renseigner tous les champs avant de valider.", "1041423751558601074": "Vos publications", "5463894166935799864": "Rédiger une nouvelle publication", "1519054954638405159": "Chargement de la liste de vos publications...", @@ -90,4 +91,4 @@ "3461230574295546047": "J'ai déjà un compte", "5052944271008222026": "Les mots de passe saisis sont différents." } -} \ No newline at end of file +} diff --git a/frontend/src/locale/messages.json b/frontend/src/locale/messages.json index 79b4ea4..d292200 100644 --- a/frontend/src/locale/messages.json +++ b/frontend/src/locale/messages.json @@ -60,6 +60,7 @@ "2308975396733519902": "Create an account", "1037765878727976611": "Authentication succeeded!", "6034686865111167926": "Authentication failed.", + "5304730975301536612": "Please, fill the inputs before send.", "1041423751558601074": "Your publications", "5463894166935799864": "Add a new publication", "1519054954638405159": "Publication loading...", From 7f99d1120906d0b20e766367b41d8c25fa6fe57b Mon Sep 17 00:00:00 2001 From: Florian THIERRY Date: Mon, 21 Oct 2024 15:15:53 +0200 Subject: [PATCH 05/11] Add ripple everywhere. --- .../confirmation-dialog.component.html | 4 +- .../confirmation-dialog.component.scss | 27 ----------- .../confirmation-dialog.component.ts | 3 +- .../components/header/header.component.html | 13 +++-- .../code-block-dialog.component.html | 10 ++-- .../code-block-dialog.component.scss | 34 ------------- .../code-block-dialog.component.ts | 2 + .../picture-selection-dialog.component.html | 14 ++++-- .../picture-selection-dialog.component.ts | 7 ++- .../publication-edition.component.html | 48 +++++++++++++++---- .../publication-edition.component.scss | 42 ++++++---------- .../publication-edition.component.ts | 2 + .../publications-search-bar.component.html | 2 +- .../publications-search-bar.component.scss | 2 +- .../publications-search-bar.component.ts | 7 +-- .../side-menu/side-menu.component.html | 6 ++- .../side-menu/side-menu.component.ts | 11 ++++- .../submit-button.component.html | 3 +- .../submit-button/submit-button.component.ts | 10 ++-- .../src/app/pages/login/login.component.html | 2 +- .../src/app/pages/login/login.component.ts | 9 +++- .../publication/publication.component.html | 2 + .../publication/publication.component.ts | 32 ++++++++----- .../app/pages/signin/signin.component.html | 2 +- .../src/app/pages/signin/signin.component.ts | 9 +++- 25 files changed, 163 insertions(+), 140 deletions(-) diff --git a/frontend/src/app/components/confirmation-dialog/confirmation-dialog.component.html b/frontend/src/app/components/confirmation-dialog/confirmation-dialog.component.html index 0a786dc..5b937df 100644 --- a/frontend/src/app/components/confirmation-dialog/confirmation-dialog.component.html +++ b/frontend/src/app/components/confirmation-dialog/confirmation-dialog.component.html @@ -1,10 +1,10 @@

{{title}}

{{description}}

- -
\ No newline at end of file diff --git a/frontend/src/app/components/confirmation-dialog/confirmation-dialog.component.scss b/frontend/src/app/components/confirmation-dialog/confirmation-dialog.component.scss index 00feaa3..23e6e87 100644 --- a/frontend/src/app/components/confirmation-dialog/confirmation-dialog.component.scss +++ b/frontend/src/app/components/confirmation-dialog/confirmation-dialog.component.scss @@ -8,32 +8,5 @@ display: flex; flex-direction: row; 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; - } - } - } } } \ No newline at end of file diff --git a/frontend/src/app/components/confirmation-dialog/confirmation-dialog.component.ts b/frontend/src/app/components/confirmation-dialog/confirmation-dialog.component.ts index 7636cef..a3d342b 100644 --- a/frontend/src/app/components/confirmation-dialog/confirmation-dialog.component.ts +++ b/frontend/src/app/components/confirmation-dialog/confirmation-dialog.component.ts @@ -1,4 +1,5 @@ import { Component, inject, Input } from "@angular/core"; +import { MatRippleModule } from "@angular/material/core"; import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog"; export interface ConfirmationDialogData { @@ -11,7 +12,7 @@ export interface ConfirmationDialogData { standalone: true, templateUrl: './confirmation-dialog.component.html', styleUrl: './confirmation-dialog.component.scss', - imports: [] + imports: [MatRippleModule] }) export class ConfirmationDialog { private readonly dialogRef = inject(MatDialogRef); diff --git a/frontend/src/app/components/header/header.component.html b/frontend/src/app/components/header/header.component.html index 46ea23c..4ea9f1b 100644 --- a/frontend/src/app/components/header/header.component.html +++ b/frontend/src/app/components/header/header.component.html @@ -1,5 +1,9 @@
- @@ -14,7 +18,10 @@
@if (isAuthenticated) { - @@ -30,7 +37,7 @@
} @else { - Login + Login }
\ No newline at end of file diff --git a/frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.html b/frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.html index ec52fba..05bd861 100644 --- a/frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.html +++ b/frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.html @@ -1,10 +1,10 @@ -

Add a code block

-
+
Programming language @@ -21,11 +21,11 @@
-
- -
diff --git a/frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.scss b/frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.scss index 577224e..30239c5 100644 --- a/frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.scss +++ b/frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.scss @@ -39,40 +39,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; - } - } - } - } } } } \ No newline at end of file diff --git a/frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.ts b/frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.ts index ad877eb..61cec69 100644 --- a/frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.ts +++ b/frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.ts @@ -1,5 +1,6 @@ import { Component, inject } from "@angular/core"; import { FormBuilder, FormControl, ReactiveFormsModule, Validators } from "@angular/forms"; +import { MatRippleModule } from "@angular/material/core"; import { MatDialogRef } from "@angular/material/dialog"; import { MatFormFieldModule } from "@angular/material/form-field"; import { MatIcon } from "@angular/material/icon"; @@ -91,6 +92,7 @@ export const PROGRAMMING_LANGUAGES: ProgramingLanguage[] = [ MatFormFieldModule, MatIcon, MatInputModule, + MatRippleModule, MatSelectModule, ReactiveFormsModule, ] diff --git a/frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.component.html b/frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.component.html index 1eabfdc..e9e4d8b 100644 --- a/frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.component.html +++ b/frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.component.html @@ -1,4 +1,4 @@ -
@@ -19,10 +19,18 @@ }
- - diff --git a/frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.component.ts b/frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.component.ts index 96ff1df..b9f9012 100644 --- a/frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.component.ts +++ b/frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.component.ts @@ -11,9 +11,14 @@ import { MatTooltip } from "@angular/material/tooltip"; @Component({ selector: 'app-picture-selection', standalone: true, - imports: [MatProgressSpinnerModule, MatIcon, MatRippleModule, MatTooltip], templateUrl: './picture-selection-dialog.component.html', styleUrl: './picture-selection-dialog.component.scss', + imports: [ + MatIcon, + MatRippleModule, + MatProgressSpinnerModule, + MatTooltip + ], }) export class PictureSelectionDialog implements OnInit { private readonly pictureRestService = inject(PictureRestService); diff --git a/frontend/src/app/components/publication-edition/publication-edition.component.html b/frontend/src/app/components/publication-edition/publication-edition.component.html index d4212c8..f834e8e 100644 --- a/frontend/src/app/components/publication-edition/publication-edition.component.html +++ b/frontend/src/app/components/publication-edition/publication-edition.component.html @@ -37,25 +37,53 @@
- - - - - - -
@@ -93,7 +121,11 @@
Save -
diff --git a/frontend/src/app/components/publication-edition/publication-edition.component.scss b/frontend/src/app/components/publication-edition/publication-edition.component.scss index f35b73e..9f564de 100644 --- a/frontend/src/app/components/publication-edition/publication-edition.component.scss +++ b/frontend/src/app/components/publication-edition/publication-edition.component.scss @@ -102,6 +102,11 @@ button { padding: 0; + 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; @@ -109,35 +114,16 @@ height: 3em; box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12); 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 { - background-color: #5b6ed8; - cursor: pointer; - } - - &:disabled { - background-color: #5f6aa6; - cursor: not-allowed; - } - - &.secondary { - color: #3f51b5; - background-color: white; - - &:hover { - background-color: #f2f4ff; - cursor: pointer; + &:hover { + background-color: #5b6ed8; + cursor: pointer; + } + + &:disabled { + background-color: #5f6aa6; + cursor: not-allowed; + } } } } diff --git a/frontend/src/app/components/publication-edition/publication-edition.component.ts b/frontend/src/app/components/publication-edition/publication-edition.component.ts index b52fa05..0b3033f 100644 --- a/frontend/src/app/components/publication-edition/publication-edition.component.ts +++ b/frontend/src/app/components/publication-edition/publication-edition.component.ts @@ -15,6 +15,7 @@ import { CategoryService } from "../../core/service/category.service"; import { SubmitButtonComponent } from "../submit-button/submit-button.component"; import { PictureSelectionDialog } from "./picture-selection-dialog/picture-selection-dialog.component"; import { PublicationEditionService } from "./publication-edition.service"; +import { MatRippleModule } from "@angular/material/core"; @Component({ selector: 'app-publication-edition', @@ -26,6 +27,7 @@ import { PublicationEditionService } from "./publication-edition.service"; MatDialogModule, MatIconModule, MatInputModule, + MatRippleModule, MatProgressSpinnerModule, MatSelectModule, MatTabsModule, diff --git a/frontend/src/app/components/publications-search-bar/publications-search-bar.component.html b/frontend/src/app/components/publications-search-bar/publications-search-bar.component.html index 4d80970..67c8ec2 100644 --- a/frontend/src/app/components/publications-search-bar/publications-search-bar.component.html +++ b/frontend/src/app/components/publications-search-bar/publications-search-bar.component.html @@ -1,6 +1,6 @@ - \ No newline at end of file diff --git a/frontend/src/app/components/publications-search-bar/publications-search-bar.component.scss b/frontend/src/app/components/publications-search-bar/publications-search-bar.component.scss index 86d7292..fb10d3f 100644 --- a/frontend/src/app/components/publications-search-bar/publications-search-bar.component.scss +++ b/frontend/src/app/components/publications-search-bar/publications-search-bar.component.scss @@ -27,7 +27,7 @@ top: 0; right: 0; color: #aaaaaa; - padding: .4em; + padding: .3em; &:hover { background-color: #eee; diff --git a/frontend/src/app/components/publications-search-bar/publications-search-bar.component.ts b/frontend/src/app/components/publications-search-bar/publications-search-bar.component.ts index ca2ff68..7c6660e 100644 --- a/frontend/src/app/components/publications-search-bar/publications-search-bar.component.ts +++ b/frontend/src/app/components/publications-search-bar/publications-search-bar.component.ts @@ -1,6 +1,6 @@ -import { HttpParams } from "@angular/common/http"; import { Component, inject } from "@angular/core"; import { FormBuilder, FormControl, ReactiveFormsModule, Validators } from "@angular/forms"; +import { MatRippleModule } from "@angular/material/core"; import { MatIconModule } from "@angular/material/icon"; import { Router } from "@angular/router"; @@ -11,8 +11,9 @@ import { Router } from "@angular/router"; styleUrl: './publications-search-bar.component.scss', standalone: true, imports: [ - ReactiveFormsModule, - MatIconModule + MatIconModule, + MatRippleModule, + ReactiveFormsModule ], providers: [] }) diff --git a/frontend/src/app/components/side-menu/side-menu.component.html b/frontend/src/app/components/side-menu/side-menu.component.html index 3be46fe..f911856 100644 --- a/frontend/src/app/components/side-menu/side-menu.component.html +++ b/frontend/src/app/components/side-menu/side-menu.component.html @@ -4,7 +4,11 @@ logo Codiki - diff --git a/frontend/src/app/components/side-menu/side-menu.component.ts b/frontend/src/app/components/side-menu/side-menu.component.ts index b9133ac..9ac5ee0 100644 --- a/frontend/src/app/components/side-menu/side-menu.component.ts +++ b/frontend/src/app/components/side-menu/side-menu.component.ts @@ -3,13 +3,20 @@ import { MatIconModule } from '@angular/material/icon'; import { MatTooltipModule } from '@angular/material/tooltip'; import { RouterModule } from '@angular/router'; import { CategoriesMenuComponent } from './categories-menu/categories-menu.component'; +import { MatRippleModule } from '@angular/material/core'; @Component({ selector: 'app-side-menu', standalone: true, - imports: [CategoriesMenuComponent, MatIconModule, MatTooltipModule, RouterModule], templateUrl: './side-menu.component.html', - styleUrl: './side-menu.component.scss' + styleUrl: './side-menu.component.scss', + imports: [ + CategoriesMenuComponent, + MatIconModule, + MatRippleModule, + MatTooltipModule, + RouterModule + ] }) export class SideMenuComponent { isOpenned: boolean = false; diff --git a/frontend/src/app/components/submit-button/submit-button.component.html b/frontend/src/app/components/submit-button/submit-button.component.html index 7bd6057..01852ab 100644 --- a/frontend/src/app/components/submit-button/submit-button.component.html +++ b/frontend/src/app/components/submit-button/submit-button.component.html @@ -1,7 +1,8 @@
Send - Create an account + Create an account
\ No newline at end of file diff --git a/frontend/src/app/pages/login/login.component.ts b/frontend/src/app/pages/login/login.component.ts index 4994263..0d7fada 100644 --- a/frontend/src/app/pages/login/login.component.ts +++ b/frontend/src/app/pages/login/login.component.ts @@ -6,13 +6,20 @@ import { LoginService } from './login.service'; import { MatIconModule } from '@angular/material/icon'; import { RouterModule } from '@angular/router'; import { SubmitButtonComponent } from "../../components/submit-button/submit-button.component"; +import { MatRippleModule } from '@angular/material/core'; @Component({ selector: 'app-login', standalone: true, templateUrl: './login.component.html', styleUrl: './login.component.scss', - imports: [ReactiveFormsModule, MatIconModule, RouterModule, SubmitButtonComponent], + imports: [ + MatIconModule, + MatRippleModule, + ReactiveFormsModule, + RouterModule, + SubmitButtonComponent + ], providers: [LoginService, MatSnackBarModule] }) export class LoginComponent implements OnInit, OnDestroy { diff --git a/frontend/src/app/pages/publication/publication.component.html b/frontend/src/app/pages/publication/publication.component.html index f600aea..4ce22de 100644 --- a/frontend/src/app/pages/publication/publication.component.html +++ b/frontend/src/app/pages/publication/publication.component.html @@ -12,6 +12,7 @@ edit @@ -33,6 +34,7 @@ (click)="deletePublication()" matTooltip="Click to delete the publication" matTooltipPosition="left" + matRipple i18n-matTooltip> delete Delete diff --git a/frontend/src/app/pages/publication/publication.component.ts b/frontend/src/app/pages/publication/publication.component.ts index 8593ac8..7f14d9f 100644 --- a/frontend/src/app/pages/publication/publication.component.ts +++ b/frontend/src/app/pages/publication/publication.component.ts @@ -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 { MatProgressSpinner } from '@angular/material/progress-spinner'; -import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip'; -import { MatIcon } from '@angular/material/icon'; -import { AuthenticationService } from '../../core/service/authentication.service'; +import { Component, OnDestroy, OnInit, inject } from '@angular/core'; +import { MatRippleModule } from '@angular/material/core'; 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 { 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; @Component({ selector: 'app-publication', standalone: true, - imports: [CommonModule, MatProgressSpinner, MatTooltip, RouterModule, MatIcon, MatTooltipModule], 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 { private readonly activatedRoute = inject(ActivatedRoute); diff --git a/frontend/src/app/pages/signin/signin.component.html b/frontend/src/app/pages/signin/signin.component.html index 97ee0a4..c47af27 100644 --- a/frontend/src/app/pages/signin/signin.component.html +++ b/frontend/src/app/pages/signin/signin.component.html @@ -34,6 +34,6 @@
Send - I already have an account + I already have an account
\ No newline at end of file diff --git a/frontend/src/app/pages/signin/signin.component.ts b/frontend/src/app/pages/signin/signin.component.ts index 14fa510..8781ed0 100644 --- a/frontend/src/app/pages/signin/signin.component.ts +++ b/frontend/src/app/pages/signin/signin.component.ts @@ -7,13 +7,20 @@ import { SigninService } from './signin.service'; import { LoginService } from '../login/login.service'; import { FormError } from '../../core/model/FormError'; import { SubmitButtonComponent } from "../../components/submit-button/submit-button.component"; +import { MatRippleModule } from '@angular/material/core'; @Component({ selector: 'app-signin', standalone: true, - imports: [ReactiveFormsModule, MatIconModule, RouterModule, SubmitButtonComponent], templateUrl: './signin.component.html', styleUrl: './signin.component.scss', + imports: [ + MatIconModule, + MatRippleModule, + ReactiveFormsModule, + RouterModule, + SubmitButtonComponent + ], providers: [SigninService, LoginService] }) export class SigninComponent implements OnInit, OnDestroy { From 0d2883fe2a71cc4227e5daef06bd10ebaeb5fad9 Mon Sep 17 00:00:00 2001 From: Florian THIERRY Date: Mon, 21 Oct 2024 15:23:58 +0200 Subject: [PATCH 06/11] Code cleanning. --- .../categories-menu/categories-menu.component.html | 5 ++++- .../side-menu/categories-menu/categories-menu.component.ts | 6 +++++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/frontend/src/app/components/side-menu/categories-menu/categories-menu.component.html b/frontend/src/app/components/side-menu/categories-menu/categories-menu.component.html index 8506529..08fe4e9 100644 --- a/frontend/src/app/components/side-menu/categories-menu/categories-menu.component.html +++ b/frontend/src/app/components/side-menu/categories-menu/categories-menu.component.html @@ -6,7 +6,10 @@
@for(subCategory of category.subCategories; track subCategory) { - + {{subCategory.name}} } diff --git a/frontend/src/app/components/side-menu/categories-menu/categories-menu.component.ts b/frontend/src/app/components/side-menu/categories-menu/categories-menu.component.ts index f498224..946a744 100644 --- a/frontend/src/app/components/side-menu/categories-menu/categories-menu.component.ts +++ b/frontend/src/app/components/side-menu/categories-menu/categories-menu.component.ts @@ -8,8 +8,12 @@ import { RouterModule } from "@angular/router"; @Component({ selector: 'app-categories-menu', standalone: true, - imports: [CommonModule, RouterModule, MatIconModule], templateUrl: './categories-menu.component.html', + imports: [ + CommonModule, + RouterModule, + MatIconModule + ], styleUrl: './categories-menu.component.scss' }) export class CategoriesMenuComponent implements OnInit { From 2da6a58b209dabc904d205737ce35514f693d601 Mon Sep 17 00:00:00 2001 From: Florian THIERRY Date: Mon, 21 Oct 2024 15:50:49 +0200 Subject: [PATCH 07/11] Change version number. --- frontend/src/app/components/footer/footer.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/app/components/footer/footer.component.html b/frontend/src/app/components/footer/footer.component.html index b9fbc43..99b3a78 100644 --- a/frontend/src/app/components/footer/footer.component.html +++ b/frontend/src/app/components/footer/footer.component.html @@ -2,7 +2,7 @@ © 2016 - 2024 All rights reserved - - 2.0-alpha + 2.1 favorite From 1a00d0cd194cd5aa1b5a05e931cbe4c90e1d24e4 Mon Sep 17 00:00:00 2001 From: Florian THIERRY Date: Mon, 21 Oct 2024 15:52:59 +0200 Subject: [PATCH 08/11] Add missing ripple. --- .../app/pages/my-publications/my-publications.component.html | 1 + .../app/pages/my-publications/my-publications.component.ts | 4 +++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/frontend/src/app/pages/my-publications/my-publications.component.html b/frontend/src/app/pages/my-publications/my-publications.component.html index 23a2b62..bbaa30f 100644 --- a/frontend/src/app/pages/my-publications/my-publications.component.html +++ b/frontend/src/app/pages/my-publications/my-publications.component.html @@ -4,6 +4,7 @@ class="new-publication" matTooltip="Add a new publication" matTooltipPosition="left" + matRipple i18n-matTooltip> + diff --git a/frontend/src/app/pages/my-publications/my-publications.component.ts b/frontend/src/app/pages/my-publications/my-publications.component.ts index 72416e1..bbe8e84 100644 --- a/frontend/src/app/pages/my-publications/my-publications.component.ts +++ b/frontend/src/app/pages/my-publications/my-publications.component.ts @@ -7,6 +7,7 @@ import { Publication } from "../../core/rest-services/publications/model/publica import { CommonModule } from "@angular/common"; import { RouterModule } from "@angular/router"; import { MatTooltipModule } from "@angular/material/tooltip"; +import { MatRippleModule } from "@angular/material/core"; @Component({ @@ -17,8 +18,9 @@ import { MatTooltipModule } from "@angular/material/tooltip"; imports: [ CommonModule, MatProgressSpinnerModule, - PublicationListComponent, + MatRippleModule, MatTooltipModule, + PublicationListComponent, RouterModule ], providers: [MyPublicationsService] From 295f977a2188782e0d25321dd54d7fcf37b0f7d4 Mon Sep 17 00:00:00 2001 From: Florian THIERRY Date: Mon, 21 Oct 2024 16:37:58 +0200 Subject: [PATCH 09/11] Add icon button style. --- .../components/header/header.component.html | 5 +- .../components/header/header.component.scss | 62 ++----------------- .../code-block-dialog.component.html | 7 ++- .../code-block-dialog.component.scss | 14 ----- .../code-block-dialog.component.ts | 2 + .../picture-selection-dialog.component.html | 7 ++- .../picture-selection-dialog.component.scss | 14 ----- .../publication-edition.component.html | 14 ++--- .../side-menu/side-menu.component.html | 1 + .../side-menu/side-menu.component.scss | 18 ------ .../submit-button.component.html | 2 +- .../src/app/pages/login/login.component.html | 2 +- .../app/pages/signin/signin.component.html | 2 +- frontend/src/design_system/button.scss | 21 ++++++- 14 files changed, 51 insertions(+), 120 deletions(-) diff --git a/frontend/src/app/components/header/header.component.html b/frontend/src/app/components/header/header.component.html index 4ea9f1b..df91e86 100644 --- a/frontend/src/app/components/header/header.component.html +++ b/frontend/src/app/components/header/header.component.html @@ -1,6 +1,7 @@
diff --git a/frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.scss b/frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.scss index 30239c5..e21d3e8 100644 --- a/frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.scss +++ b/frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.scss @@ -6,20 +6,6 @@ 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; diff --git a/frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.ts b/frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.ts index 61cec69..cb1a5b1 100644 --- a/frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.ts +++ b/frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.ts @@ -6,6 +6,7 @@ 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'; +import { MatTooltip } from "@angular/material/tooltip"; export interface ProgramingLanguage { code: string; @@ -94,6 +95,7 @@ export const PROGRAMMING_LANGUAGES: ProgramingLanguage[] = [ MatInputModule, MatRippleModule, MatSelectModule, + MatTooltip, ReactiveFormsModule, ] }) diff --git a/frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.component.html b/frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.component.html index e9e4d8b..f724318 100644 --- a/frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.component.html +++ b/frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.component.html @@ -1,4 +1,9 @@ -
diff --git a/frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.component.scss b/frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.component.scss index a0637aa..d5ead41 100644 --- a/frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.component.scss +++ b/frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.component.scss @@ -6,20 +6,6 @@ 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; diff --git a/frontend/src/app/components/publication-edition/publication-edition.component.html b/frontend/src/app/components/publication-edition/publication-edition.component.html index f834e8e..fd412c8 100644 --- a/frontend/src/app/components/publication-edition/publication-edition.component.html +++ b/frontend/src/app/components/publication-edition/publication-edition.component.html @@ -58,13 +58,6 @@ i18n-matTooltip> H3 - +
Send - Create an account + Create an account
\ No newline at end of file diff --git a/frontend/src/app/pages/signin/signin.component.html b/frontend/src/app/pages/signin/signin.component.html index c47af27..972e526 100644 --- a/frontend/src/app/pages/signin/signin.component.html +++ b/frontend/src/app/pages/signin/signin.component.html @@ -34,6 +34,6 @@
Send - I already have an account + I already have an account
\ No newline at end of file diff --git a/frontend/src/design_system/button.scss b/frontend/src/design_system/button.scss index 61fdf30..43539ea 100644 --- a/frontend/src/design_system/button.scss +++ b/frontend/src/design_system/button.scss @@ -1,10 +1,13 @@ -button.cod-btn, a.cod-button { +button.cod-btn, a.cod-btn { 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; @@ -19,8 +22,22 @@ button.cod-btn, a.cod-button { 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 { +a.cod-btn { text-decoration: none; } \ No newline at end of file From d36fd1769068054e05194961ddf914a9c3fa6927 Mon Sep 17 00:00:00 2001 From: Florian THIERRY Date: Tue, 22 Oct 2024 08:23:27 +0200 Subject: [PATCH 10/11] Add i18n. --- frontend/src/locale/messages-fr.json | 8 ++++---- frontend/src/locale/messages.json | 6 +++--- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/frontend/src/locale/messages-fr.json b/frontend/src/locale/messages-fr.json index c82c0df..5565c25 100644 --- a/frontend/src/locale/messages-fr.json +++ b/frontend/src/locale/messages-fr.json @@ -3,7 +3,7 @@ "translations": { "3603720768157919481": "Non", "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...", "1711651175531679766": "La documentation sera disponible ultérieurement...", "6299155290121808295": "Développements realisés par", @@ -11,6 +11,7 @@ "3394094310583807145": "{$START_TAG_MAT_ICON}description{$CLOSE_TAG_MAT_ICON} Mes publications", "5690703874094076840": "{$START_TAG_MAT_ICON}logout{$CLOSE_TAG_MAT_ICON} Déconnexion", "2454050363478003966": "Connexion", + "7819314041543176992": "Fermer", "6379828571327118783": "Ajouter un bloc de code", "933522671092765466": "Langage de programmation", "5953425146193292178": "Bloc de code", @@ -22,7 +23,6 @@ "4491342806775118195": "Il n'y a aucune 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.", - "7819314041543176992": "Fermer", "6198966268398913224": "Une erreur technique est survenue lors de l'ajout de votre image.", "3603937053948195893": "Édition", "5701618810648052610": "Titre", @@ -32,8 +32,8 @@ "382530603854484923": "Cliquez pour ajouter une section titre de niveau 1", "7918008528690631661": "Cliquez pour ajouter une section titre de niveau 2", "200884310255063303": "Cliquez pour ajouter une section titre de niveau 3", - "327371240590280003": "Cliquez pour ajouter une image", "2615926469669796978": "Cliquez pour ajouter un lien", + "327371240590280003": "Cliquez pour ajouter une image", "4689637499823680515": "Cliquez pour ajouter un bloc de code", "1065684538660053227": "Cliquez pour afficher l'aide", "6205355627445317276": "Contenu", @@ -91,4 +91,4 @@ "3461230574295546047": "J'ai déjà un compte", "5052944271008222026": "Les mots de passe saisis sont différents." } -} +} \ No newline at end of file diff --git a/frontend/src/locale/messages.json b/frontend/src/locale/messages.json index d292200..8c8117d 100644 --- a/frontend/src/locale/messages.json +++ b/frontend/src/locale/messages.json @@ -3,7 +3,7 @@ "translations": { "3603720768157919481": " No ", "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...", "1711651175531679766": "Documentation will be available in future...", "6299155290121808295": "Development realised by", @@ -11,6 +11,7 @@ "3394094310583807145": "{$START_TAG_MAT_ICON}description{$CLOSE_TAG_MAT_ICON} My publications ", "5690703874094076840": "{$START_TAG_MAT_ICON}logout{$CLOSE_TAG_MAT_ICON} Disconnect ", "2454050363478003966": "Login", + "7819314041543176992": "Close", "6379828571327118783": "Add a code block", "933522671092765466": "Programming language", "5953425146193292178": "Code block", @@ -22,7 +23,6 @@ "4491342806775118195": "There is no any picture.", "5036131155743433968": "{$START_TAG_MAT_ICON}upload_file{$CLOSE_TAG_MAT_ICON} Add new picture ", "6852365376059142995": "An error occured while loading pictures.", - "7819314041543176992": "Close", "6198966268398913224": "A technical error occured while uploading your picture.", "3603937053948195893": "Edition", "5701618810648052610": "Title", @@ -32,8 +32,8 @@ "382530603854484923": "Click to insert a title 1 section", "7918008528690631661": "Click to insert a title 2 section", "200884310255063303": "Click to insert a title 3 section", - "327371240590280003": "Click to insert a picture", "2615926469669796978": "Click to insert a link", + "327371240590280003": "Click to insert a picture", "4689637499823680515": "Click to insert a code block", "1065684538660053227": "Click to display editor help", "6205355627445317276": "Content", From 5fca5bde558a714445ecd37e14500af471c6f718 Mon Sep 17 00:00:00 2001 From: Florian THIERRY Date: Tue, 22 Oct 2024 08:32:46 +0200 Subject: [PATCH 11/11] Rename cod-btn into cod-button. --- .../confirmation-dialog/confirmation-dialog.component.html | 4 ++-- frontend/src/app/components/header/header.component.html | 6 +++--- .../code-block-dialog/code-block-dialog.component.html | 6 +++--- .../picture-selection-dialog.component.html | 6 +++--- .../publication-edition/publication-edition.component.html | 2 +- .../src/app/components/side-menu/side-menu.component.html | 2 +- .../components/submit-button/submit-button.component.html | 2 +- frontend/src/app/pages/login/login.component.html | 2 +- frontend/src/app/pages/signin/signin.component.html | 2 +- frontend/src/design_system/button.scss | 4 ++-- 10 files changed, 18 insertions(+), 18 deletions(-) diff --git a/frontend/src/app/components/confirmation-dialog/confirmation-dialog.component.html b/frontend/src/app/components/confirmation-dialog/confirmation-dialog.component.html index 5b937df..74b0190 100644 --- a/frontend/src/app/components/confirmation-dialog/confirmation-dialog.component.html +++ b/frontend/src/app/components/confirmation-dialog/confirmation-dialog.component.html @@ -1,10 +1,10 @@

{{title}}

{{description}}

- -
\ No newline at end of file diff --git a/frontend/src/app/components/header/header.component.html b/frontend/src/app/components/header/header.component.html index df91e86..17a4b46 100644 --- a/frontend/src/app/components/header/header.component.html +++ b/frontend/src/app/components/header/header.component.html @@ -1,7 +1,7 @@
} @else { - Login + Login }
\ No newline at end of file diff --git a/frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.html b/frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.html index 5d38a51..abd2006 100644 --- a/frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.html +++ b/frontend/src/app/components/publication-edition/code-block-dialog/code-block-dialog.component.html @@ -1,6 +1,6 @@
- -
diff --git a/frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.component.html b/frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.component.html index f724318..ddbe7ed 100644 --- a/frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.component.html +++ b/frontend/src/app/components/publication-edition/picture-selection-dialog/picture-selection-dialog.component.html @@ -1,6 +1,6 @@
Send - Create an account + Create an account
\ No newline at end of file diff --git a/frontend/src/app/pages/signin/signin.component.html b/frontend/src/app/pages/signin/signin.component.html index 972e526..c47af27 100644 --- a/frontend/src/app/pages/signin/signin.component.html +++ b/frontend/src/app/pages/signin/signin.component.html @@ -34,6 +34,6 @@
Send - I already have an account + I already have an account
\ No newline at end of file diff --git a/frontend/src/design_system/button.scss b/frontend/src/design_system/button.scss index 43539ea..e8c7b9c 100644 --- a/frontend/src/design_system/button.scss +++ b/frontend/src/design_system/button.scss @@ -1,4 +1,4 @@ -button.cod-btn, a.cod-btn { +button.cod-button, a.cod-button { padding: .8em 1.2em; border-radius: 10em; border: none; @@ -38,6 +38,6 @@ button.cod-btn, a.cod-btn { } } -a.cod-btn { +a.cod-button { text-decoration: none; } \ No newline at end of file