From 0e97f37bff60b7f21dcff4a7bf774062a628f4fa Mon Sep 17 00:00:00 2001 From: cofrizot Date: Mon, 27 May 2024 08:31:18 +0200 Subject: [PATCH 01/16] Add the work management --- src/app/app-routing.module.ts | 41 ++- .../components/editor/editor.component.html | 207 +++++------ src/app/components/editor/editor.component.ts | 337 +++++++++--------- .../works-list/works-list.component.css | 0 .../works-list/works-list.component.html | 21 ++ .../works-list/works-list.component.spec.ts | 23 ++ .../works-list/works-list.component.ts | 30 ++ src/app/models/work.model.ts | 7 + src/app/services/works.service.ts | 32 ++ 9 files changed, 415 insertions(+), 283 deletions(-) create mode 100644 src/app/components/works-list/works-list.component.css create mode 100644 src/app/components/works-list/works-list.component.html create mode 100644 src/app/components/works-list/works-list.component.spec.ts create mode 100644 src/app/components/works-list/works-list.component.ts create mode 100644 src/app/models/work.model.ts create mode 100644 src/app/services/works.service.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 2ec202c..0157bb2 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,26 +1,29 @@ -import { NgModule } from '@angular/core'; -import { RouterModule, Routes } from '@angular/router'; -import { EditorComponent } from './components/editor/editor.component'; -import { LandingPageComponent } from './components/landing-page/landing-page.component'; -import { DocumentationComponent } from './components/documentation/documentation.component'; -import { FormComponent } from './components/form/form.component'; -import { TermsOfServiceComponent } from './components/terms-of-service/terms-of-service.component'; -import { OurStoryComponent } from './components/our-story/our-story.component'; -import { PrivacyPolicyComponent } from './components/privacy-policy/privacy-policy.component'; +import {NgModule} from '@angular/core'; +import {RouterModule, Routes} from '@angular/router'; +import {EditorComponent} from './components/editor/editor.component'; +import {LandingPageComponent} from './components/landing-page/landing-page.component'; +import {DocumentationComponent} from './components/documentation/documentation.component'; +import {FormComponent} from './components/form/form.component'; +import {TermsOfServiceComponent} from './components/terms-of-service/terms-of-service.component'; +import {OurStoryComponent} from './components/our-story/our-story.component'; +import {PrivacyPolicyComponent} from './components/privacy-policy/privacy-policy.component'; +import {WorksListComponent} from "./components/works-list/works-list.component"; // Toutes les routes de l'application sont définies ici const routes: Routes = [ - { path: '', component: LandingPageComponent }, - { path: 'editor', component: EditorComponent }, - { path: 'documentation', component: DocumentationComponent }, - { path: 'contact', component: FormComponent }, - { path: 'our-story', component: OurStoryComponent }, - { path: 'terms-of-service', component: TermsOfServiceComponent }, - { path: 'privacy-policy', component: PrivacyPolicyComponent }, + {path: '', component: LandingPageComponent}, + {path: 'editor', component: EditorComponent}, + {path: 'documentation', component: DocumentationComponent}, + {path: 'contact', component: FormComponent}, + {path: 'our-story', component: OurStoryComponent}, + {path: 'terms-of-service', component: TermsOfServiceComponent}, + {path: 'privacy-policy', component: PrivacyPolicyComponent}, + {path: 'works', component: WorksListComponent}, ]; @NgModule({ - imports: [RouterModule.forRoot(routes)], - exports: [RouterModule], + imports: [RouterModule.forRoot(routes)], + exports: [RouterModule], }) -export class AppRoutingModule {} +export class AppRoutingModule { +} diff --git a/src/app/components/editor/editor.component.html b/src/app/components/editor/editor.component.html index df54939..a4cc5fd 100644 --- a/src/app/components/editor/editor.component.html +++ b/src/app/components/editor/editor.component.html @@ -1,107 +1,112 @@
-
-
-
- - -
+
+
+
+ + +
-
- -
-
-
- @if (errorMessage) { -
-

{{ errorMessage }}

-
- } +
+ +
+
+ +
+
+
+ @if (errorMessage) { +
+

{{ errorMessage }}

+
+ } - + -
- -
-
-
+
+ +
+
+
-
-
- - -
-
- 

-    

-  

+	

+		

+			
+			
+		

+		

+			

+		

+	

 

diff --git a/src/app/components/editor/editor.component.ts b/src/app/components/editor/editor.component.ts
index d8793e5..09cb48c 100644
--- a/src/app/components/editor/editor.component.ts
+++ b/src/app/components/editor/editor.component.ts
@@ -1,179 +1,190 @@
-import { Component, ViewChild } from '@angular/core';
-import { CodeExecutionService } from 'src/app/services/codeExecution.service';
-import { Compartment } from '@codemirror/state';
-import { CodeMirrorComponent } from '@sandkasten/codemirror6-editor';
-import { LanguageDescription } from '@codemirror/language';
-import { CODE_DEFAULTS, LANGUAGES } from '../languages';
-import { SafeHTMLPipe } from '../../safe-html.pipe';
-import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import {Component, ViewChild} from '@angular/core';
+import {CodeExecutionService} from 'src/app/services/codeExecution.service';
+import {Compartment} from '@codemirror/state';
+import {CodeMirrorComponent} from '@sandkasten/codemirror6-editor';
+import {LanguageDescription} from '@codemirror/language';
+import {CODE_DEFAULTS, LANGUAGES} from '../languages';
+import {SafeHTMLPipe} from '../../safe-html.pipe';
+import {ReactiveFormsModule, FormsModule} from '@angular/forms';
 import {
-  keymap,
-  highlightSpecialChars,
-  drawSelection,
-  highlightActiveLine,
-  dropCursor,
-  rectangularSelection,
-  crosshairCursor,
-  lineNumbers,
-  highlightActiveLineGutter,
-  gutter,
+    keymap,
+    highlightSpecialChars,
+    drawSelection,
+    highlightActiveLine,
+    dropCursor,
+    rectangularSelection,
+    crosshairCursor,
+    lineNumbers,
+    highlightActiveLineGutter,
+    gutter,
 } from '@codemirror/view';
-import { Extension, EditorState } from '@codemirror/state';
+import {Extension, EditorState} from '@codemirror/state';
 import {
-  defaultHighlightStyle,
-  syntaxHighlighting,
-  indentOnInput,
-  bracketMatching,
-  foldGutter,
-  foldKeymap,
+    defaultHighlightStyle,
+    syntaxHighlighting,
+    indentOnInput,
+    bracketMatching,
+    foldGutter,
+    foldKeymap,
 } from '@codemirror/language';
-import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
-import { searchKeymap, highlightSelectionMatches } from '@codemirror/search';
+import {defaultKeymap, history, historyKeymap} from '@codemirror/commands';
+import {searchKeymap, highlightSelectionMatches} from '@codemirror/search';
 import {
-  autocompletion,
-  completionKeymap,
-  closeBrackets,
-  closeBracketsKeymap,
+    autocompletion,
+    completionKeymap,
+    closeBrackets,
+    closeBracketsKeymap,
 } from '@codemirror/autocomplete';
-import { lintKeymap } from '@codemirror/lint';
+import {lintKeymap} from '@codemirror/lint';
+import {WorksService} from "../../services/works.service";
 
 const basicSetup: Extension = (() => [
-  highlightActiveLineGutter(),
-  highlightSpecialChars(),
-  history(),
-  foldGutter(),
-  drawSelection(),
-  dropCursor(),
-  EditorState.allowMultipleSelections.of(true),
-  indentOnInput(),
-  syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
-  bracketMatching(),
-  closeBrackets(),
-  autocompletion(),
-  rectangularSelection(),
-  crosshairCursor(),
-  highlightActiveLine(),
-  highlightSelectionMatches(),
-  keymap.of([
-    ...closeBracketsKeymap,
-    ...defaultKeymap,
-    ...searchKeymap,
-    ...historyKeymap,
-    ...foldKeymap,
-    ...completionKeymap,
-    ...lintKeymap,
-  ]),
+    highlightActiveLineGutter(),
+    highlightSpecialChars(),
+    history(),
+    foldGutter(),
+    drawSelection(),
+    dropCursor(),
+    EditorState.allowMultipleSelections.of(true),
+    indentOnInput(),
+    syntaxHighlighting(defaultHighlightStyle, {fallback: true}),
+    bracketMatching(),
+    closeBrackets(),
+    autocompletion(),
+    rectangularSelection(),
+    crosshairCursor(),
+    highlightActiveLine(),
+    highlightSelectionMatches(),
+    keymap.of([
+        ...closeBracketsKeymap,
+        ...defaultKeymap,
+        ...searchKeymap,
+        ...historyKeymap,
+        ...foldKeymap,
+        ...completionKeymap,
+        ...lintKeymap,
+    ]),
 ])();
 
 @Component({
-  selector: 'app-editor',
-  templateUrl: './editor.component.html',
-  styleUrls: ['./editor.component.scss'],
-  standalone: true,
-  imports: [
-    CodeMirrorComponent,
-    ReactiveFormsModule,
-    FormsModule,
-    SafeHTMLPipe,
-  ],
+    selector: 'app-editor',
+    templateUrl: './editor.component.html',
+    styleUrls: ['./editor.component.scss'],
+    standalone: true,
+    imports: [
+        CodeMirrorComponent,
+        ReactiveFormsModule,
+        FormsModule,
+        SafeHTMLPipe,
+    ],
 })
 export class EditorComponent {
-  isLoaded: boolean = false; // Pour vérifier si le chargement est terminé
-
-  readonly languages: LanguageDescription[] = LANGUAGES;
-  // Mode par défaut
-  private _selectedLanguage = this.languages.find(
-    (lang) => lang.name === 'JavaScript'
-  )!;
-  get selectedLanguage(): LanguageDescription {
-    return this._selectedLanguage;
-  }
-  set selectedLanguage(value: LanguageDescription) {
-    this._selectedLanguage = value;
-    if (value.name in CODE_DEFAULTS) {
-      this.editorContent =
-        CODE_DEFAULTS[value.name as keyof typeof CODE_DEFAULTS];
+    isLoaded: boolean = false; // Pour vérifier si le chargement est terminé
+
+    readonly languages: LanguageDescription[] = LANGUAGES;
+    // Mode par défaut
+    private _selectedLanguage = this.languages.find(
+        (lang) => lang.name === 'JavaScript'
+    )!;
+    get selectedLanguage(): LanguageDescription {
+        return this._selectedLanguage;
+    }
+
+    set selectedLanguage(value: LanguageDescription) {
+        this._selectedLanguage = value;
+        if (value.name in CODE_DEFAULTS) {
+            this.editorContent =
+                CODE_DEFAULTS[value.name as keyof typeof CODE_DEFAULTS];
+        }
+        this.selectedLanguage.load().then((language) => {
+            this.codemirror.editor?.dispatch({
+                effects: this.languageCompartment.reconfigure(language),
+            });
+        });
     }
-    this.selectedLanguage.load().then((language) => {
-      this.codemirror.editor?.dispatch({
-        effects: this.languageCompartment.reconfigure(language),
-      });
-    });
-  }
-  private _linesNumbers: boolean = true;
-  get linesNumbers() {
-    return this._linesNumbers;
-  }
-  set linesNumbers(lines: boolean) {
-    this._linesNumbers = lines;
-    this.codemirror.editor?.dispatch({
-      effects: this.gutterCompartment.reconfigure(
-        lines ? lineNumbers() : gutter({})
-      ),
-    });
-  }
-
-  // Contenu de l'éditeur que l'on passera au serveur
-  editorContent: string =
-    CODE_DEFAULTS[this.selectedLanguage.name as keyof typeof CODE_DEFAULTS];
-  resultContent: string = '';
-
-  // Message d'erreur
-  errorMessage: string = '';
-
-  @ViewChild(CodeMirrorComponent) private codemirror!: CodeMirrorComponent;
-
-  private readonly languageCompartment = new Compartment();
-  private readonly gutterCompartment = new Compartment();
-  protected readonly extensions: Extension[] = [
-    basicSetup,
-    this.gutterCompartment.of(lineNumbers()),
-    this.languageCompartment.of(this.selectedLanguage.support!),
-  ];
-
-  constructor(private codeExecutionService: CodeExecutionService) {}
-
-  // Efface le contenu de l'éditeur
-  clear(): void {
-    this.editorContent = '';
-  }
-
-  onRunButtonClicked() {
-    // Le code à exécuter est le contenu de l'éditeur
-    const codeToExecute = this.editorContent;
-
-    this.codeExecutionService.executeCode(
-      codeToExecute,
-      this.selectedLanguage.name
-    );
-
-    this.resultContent = '';
-  }
-
-  loadFromFile(event: Event) {
-    const file = (event.target as HTMLInputElement).files![0];
-    for (const language of this.languages) {
-      if (language.extensions.some((ext) => file.name.endsWith(`.${ext}`))) {
-        this.selectedLanguage = language;
-        const reader = new FileReader();
-        reader.onload = (event) => {
-          this.editorContent = event.target!.result as string;
-          this.errorMessage = '';
-        };
-        reader.readAsText(file);
-        return;
-      }
+
+    private _linesNumbers: boolean = true;
+    get linesNumbers() {
+        return this._linesNumbers;
     }
-    const extensions = this.languages.flatMap((lang) => lang.extensions);
-    this.errorMessage = `Unsupported language. Please select one of the following languages: ${extensions.join(', ')}.`;
-    console.error(this.errorMessage);
-  }
-
-  saveToFile() {
-    const blob = new Blob([this.editorContent], { type: 'text/plain' });
-    const a = document.createElement('a');
-    a.download = `code.${this.selectedLanguage.extensions![0]}`;
-    a.href = URL.createObjectURL(blob);
-    a.click();
-  }
+
+    set linesNumbers(lines: boolean) {
+        this._linesNumbers = lines;
+        this.codemirror.editor?.dispatch({
+            effects: this.gutterCompartment.reconfigure(
+                lines ? lineNumbers() : gutter({})
+            ),
+        });
+    }
+
+    // Contenu de l'éditeur que l'on passera au serveur
+    editorContent: string =
+        CODE_DEFAULTS[this.selectedLanguage.name as keyof typeof CODE_DEFAULTS];
+    resultContent: string = '';
+
+    // Message d'erreur
+    errorMessage: string = '';
+
+    @ViewChild(CodeMirrorComponent) private codemirror!: CodeMirrorComponent;
+
+    private readonly languageCompartment = new Compartment();
+    private readonly gutterCompartment = new Compartment();
+    protected readonly extensions: Extension[] = [
+        basicSetup,
+        this.gutterCompartment.of(lineNumbers()),
+        this.languageCompartment.of(this.selectedLanguage.support!),
+    ];
+
+    constructor(private codeExecutionService: CodeExecutionService, protected workService: WorksService) {
+    }
+
+    // Efface le contenu de l'éditeur
+    clear(): void {
+        this.editorContent = '';
+    }
+
+    onRunButtonClicked() {
+        // Le code à exécuter est le contenu de l'éditeur
+        const codeToExecute = this.editorContent;
+
+        this.codeExecutionService.executeCode(
+            codeToExecute,
+            this.selectedLanguage.name
+        );
+
+        this.resultContent = '';
+    }
+
+    loadFromFile(event: Event) {
+        const file = (event.target as HTMLInputElement).files![0];
+        for (const language of this.languages) {
+            if (language.extensions.some((ext) => file.name.endsWith(`.${ext}`))) {
+                this.selectedLanguage = language;
+                const reader = new FileReader();
+                reader.onload = (event) => {
+                    this.editorContent = event.target!.result as string;
+                    this.errorMessage = '';
+                };
+                reader.readAsText(file);
+                return;
+            }
+        }
+        const extensions = this.languages.flatMap((lang) => lang.extensions);
+        this.errorMessage = `Unsupported language. Please select one of the following languages: ${extensions.join(', ')}.`;
+        console.error(this.errorMessage);
+    }
+
+    saveToFile() {
+        const blob = new Blob([this.editorContent], {type: 'text/plain'});
+        const a = document.createElement('a');
+        a.download = `code.${this.selectedLanguage.extensions![0]}`;
+        a.href = URL.createObjectURL(blob);
+        a.click();
+    }
+
+    addToDatabase() {
+        this.workService.postWorkCode(this.editorContent);
+    }
+
+    protected readonly console = console;
 }
diff --git a/src/app/components/works-list/works-list.component.css b/src/app/components/works-list/works-list.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/works-list/works-list.component.html b/src/app/components/works-list/works-list.component.html
new file mode 100644
index 0000000..0d10fc6
--- /dev/null
+++ b/src/app/components/works-list/works-list.component.html
@@ -0,0 +1,21 @@
+
Works

+
+
+
+

+	

+		
+		
+	

+
+	

+		
+		
+	

+
+	
+

\ No newline at end of file
diff --git a/src/app/components/works-list/works-list.component.spec.ts b/src/app/components/works-list/works-list.component.spec.ts
new file mode 100644
index 0000000..113215e
--- /dev/null
+++ b/src/app/components/works-list/works-list.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WorksListComponent } from './works-list.component';
+
+describe('WorksListComponent', () => {
+  let component: WorksListComponent;
+  let fixture: ComponentFixture;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [WorksListComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(WorksListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/works-list/works-list.component.ts b/src/app/components/works-list/works-list.component.ts
new file mode 100644
index 0000000..b2c7c26
--- /dev/null
+++ b/src/app/components/works-list/works-list.component.ts
@@ -0,0 +1,30 @@
+import {Component} from '@angular/core';
+import {Work} from "../../models/work.model";
+import {WorksService} from "../../services/works.service";
+import {NgForOf} from "@angular/common";
+import {FormsModule, NgForm} from "@angular/forms";
+
+@Component({
+    selector: 'app-works-list',
+    standalone: true,
+    imports: [
+        NgForOf,
+        FormsModule
+    ],
+    templateUrl: './works-list.component.html',
+    styleUrl: './works-list.component.css'
+})
+export class WorksListComponent {
+    works: Work[] = [];
+
+    constructor(protected workService: WorksService) {
+    }
+
+    ngOnInit() {
+        this.workService.getWorks().subscribe((response: Work[]) => this.works = response)
+    }
+
+    onSubmit(form: NgForm) {
+        this.workService.postWork(form);
+    }
+}
diff --git a/src/app/models/work.model.ts b/src/app/models/work.model.ts
new file mode 100644
index 0000000..abc6e90
--- /dev/null
+++ b/src/app/models/work.model.ts
@@ -0,0 +1,7 @@
+export interface Work {
+    id_work: number,
+    link: string,
+    user_id: number,
+    language_id: number,
+    content: string
+}
\ No newline at end of file
diff --git a/src/app/services/works.service.ts b/src/app/services/works.service.ts
new file mode 100644
index 0000000..fda8a26
--- /dev/null
+++ b/src/app/services/works.service.ts
@@ -0,0 +1,32 @@
+import {Injectable} from '@angular/core';
+import {Work} from "../models/work.model";
+import {HttpClient} from "@angular/common/http";
+import {Observable} from "rxjs";
+import {NgForm} from "@angular/forms";
+
+
+@Injectable({
+    providedIn: 'root'
+})
+export class WorksService {
+    API_URL = 'http://127.0.0.1:3000'
+
+    private works: Work[] = [];
+
+    constructor(private http: HttpClient) {
+    }
+
+    getWorks(): Observable {
+        return this.http.get(`${this.API_URL}/works`);
+    }
+
+    postWork(form: NgForm): void {
+        let body = {link: form.value.link, id_user: 1, id_language: 1, code: form.value.content}
+        this.http.post(`${this.API_URL}/works`, body).subscribe();
+    }
+
+    postWorkCode(code: string): void {
+        let body = {link: 'TODO', id_user: 1, id_language: 1, code: code}
+        this.http.post(`${this.API_URL}/works`, body).subscribe();
+    }
+}
\ No newline at end of file
-- 
2.36.3


From dfaf146cd5eec3da9a602601458777d7167a9078 Mon Sep 17 00:00:00 2001
From: "matis.mazingue" 
Date: Mon, 27 May 2024 09:49:50 +0200
Subject: [PATCH 02/16] Del our-story + translate work + button editor work +
 work

---
 package-lock.json                             |  21 +-
 package.json                                  |   1 +
 src/app/app-routing.module.ts                 |  34 ++-
 .../components/editor/editor.component.html   | 233 ++++++++++--------
 .../components/editor/editor.component.scss   |  23 ++
 src/app/components/editor/editor.component.ts |  11 +-
 .../components/footer/footer.component.html   |  26 +-
 .../components/footer/footer.component.scss   |   2 +
 .../components/header/header.component.html   |   8 +
 src/app/components/header/header.component.ts |   8 +-
 .../landing-page/landing-page.component.html  | 102 ++++----
 .../our-story/our-story.component.html        |  36 ---
 .../our-story/our-story.component.spec.ts     |  22 --
 .../our-story/our-story.component.ts          |  22 --
 .../privacy-policy.component.scss             |   3 +
 .../terms-of-service.component.scss           |   3 +
 src/app/components/work/work.component.html   |  37 +++
 .../work.component.scss}                      |   0
 .../work.component.spec.ts}                   |  14 +-
 src/app/components/work/work.component.ts     |  56 +++++
 .../works-list/works-list.component.css       |   0
 .../works-list/works-list.component.html      |  21 --
 .../works-list/works-list.component.ts        |  30 ---
 src/app/services/work.service.spec.ts         |  16 ++
 src/app/services/work.service.ts              |  34 +++
 src/assets/i18n/en.json                       |  46 +++-
 src/assets/i18n/fr.json                       |  46 +++-
 27 files changed, 515 insertions(+), 340 deletions(-)
 delete mode 100644 src/app/components/our-story/our-story.component.html
 delete mode 100644 src/app/components/our-story/our-story.component.spec.ts
 delete mode 100644 src/app/components/our-story/our-story.component.ts
 create mode 100644 src/app/components/work/work.component.html
 rename src/app/components/{our-story/our-story.component.scss => work/work.component.scss} (100%)
 rename src/app/components/{works-list/works-list.component.spec.ts => work/work.component.spec.ts} (53%)
 create mode 100644 src/app/components/work/work.component.ts
 delete mode 100644 src/app/components/works-list/works-list.component.css
 delete mode 100644 src/app/components/works-list/works-list.component.html
 delete mode 100644 src/app/components/works-list/works-list.component.ts
 create mode 100644 src/app/services/work.service.spec.ts
 create mode 100644 src/app/services/work.service.ts

diff --git a/package-lock.json b/package-lock.json
index f140234..a1bf785 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -30,6 +30,7 @@
         "rxjs": "~7.8.1",
         "sse.js": "^2.4.1",
         "tslib": "^2.6.2",
+        "uuid": "^9.0.1",
         "zone.js": "~0.14.5"
       },
       "devDependencies": {
@@ -13050,6 +13051,15 @@
         "websocket-driver": "^0.7.4"
       }
     },
+    "node_modules/sockjs/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "dev": true,
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/socks": {
       "version": "2.8.3",
       "resolved": "https://registry.npmjs.org/socks/-/socks-2.8.3.tgz",
@@ -14007,10 +14017,13 @@
       }
     },
     "node_modules/uuid": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-      "dev": true,
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
       "bin": {
         "uuid": "dist/bin/uuid"
       }
diff --git a/package.json b/package.json
index afaa066..dcd6964 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "rxjs": "~7.8.1",
     "sse.js": "^2.4.1",
     "tslib": "^2.6.2",
+    "uuid": "^9.0.1",
     "zone.js": "~0.14.5"
   },
   "devDependencies": {
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 0157bb2..9f60cad 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,24 +1,22 @@
-import {NgModule} from '@angular/core';
-import {RouterModule, Routes} from '@angular/router';
-import {EditorComponent} from './components/editor/editor.component';
-import {LandingPageComponent} from './components/landing-page/landing-page.component';
-import {DocumentationComponent} from './components/documentation/documentation.component';
-import {FormComponent} from './components/form/form.component';
-import {TermsOfServiceComponent} from './components/terms-of-service/terms-of-service.component';
-import {OurStoryComponent} from './components/our-story/our-story.component';
-import {PrivacyPolicyComponent} from './components/privacy-policy/privacy-policy.component';
-import {WorksListComponent} from "./components/works-list/works-list.component";
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { WorkComponent } from './components/work/work.component';
+import { EditorComponent } from './components/editor/editor.component';
+import { LandingPageComponent } from './components/landing-page/landing-page.component';
+import { DocumentationComponent } from './components/documentation/documentation.component';
+import { FormComponent } from './components/form/form.component';
+import { TermsOfServiceComponent } from './components/terms-of-service/terms-of-service.component';
+import { PrivacyPolicyComponent } from './components/privacy-policy/privacy-policy.component';
 
 // Toutes les routes de l'application sont définies ici
 const routes: Routes = [
-    {path: '', component: LandingPageComponent},
-    {path: 'editor', component: EditorComponent},
-    {path: 'documentation', component: DocumentationComponent},
-    {path: 'contact', component: FormComponent},
-    {path: 'our-story', component: OurStoryComponent},
-    {path: 'terms-of-service', component: TermsOfServiceComponent},
-    {path: 'privacy-policy', component: PrivacyPolicyComponent},
-    {path: 'works', component: WorksListComponent},
+  { path: '', component: LandingPageComponent },
+  { path: 'work', component: WorkComponent },
+  { path: 'editor', component: EditorComponent },
+  { path: 'documentation', component: DocumentationComponent },
+  { path: 'contact', component: FormComponent },
+  { path: 'terms-of-service', component: TermsOfServiceComponent },
+  { path: 'privacy-policy', component: PrivacyPolicyComponent },
 ];
 
 @NgModule({
diff --git a/src/app/components/editor/editor.component.html b/src/app/components/editor/editor.component.html
index a4cc5fd..f7a6898 100644
--- a/src/app/components/editor/editor.component.html
+++ b/src/app/components/editor/editor.component.html
@@ -1,112 +1,133 @@
 

-	

-		

-			

-				
-				
-			

+  

+    

+      

+        
+        
+      

 
-			

-				
-			

-			

-				
-			

-		

-		

-			@if (errorMessage) {
-				

-					
{{ errorMessage }}

-				

-			}
+      

+        
+      

+      

+        
+      

+      

+        
+      

 
-			
+      
+      

+        
+      

+    

+    

+      @if (errorMessage) {
+        

+          
{{ errorMessage }}

+        

+      }
 
-			

-				
-			

-		

-	

+      
 
-	

-		

-			
-			
-		

-		

-			

-		

-	

+      

+        
+      

+    

+  

+
+  

+    

+      
+      
+    

+    

+      

+    

+  

 

+Propulsé par Gitea Version: 1.18.0 Page: 34ms Modèle: 1ms Licences API
diff --git a/src/app/components/editor/editor.component.scss b/src/app/components/editor/editor.component.scss
index 0836334..67b2c54 100644
--- a/src/app/components/editor/editor.component.scss
+++ b/src/app/components/editor/editor.component.scss
@@ -72,3 +72,26 @@ select {
 ::ng-deep .codemirror6-editor {
   height: 100%;
 }
+
+
+// @mixin btn-styles($bg-color, $font-color) {
+
+//   background-color: $bg-color;
+//   color: $font-color;
+//   border: none;
+//   color: white;
+//   padding: 12px 16px;
+//   font-size: 16px;
+//   width: 100px;
+//   cursor: pointer;
+//   border-radius: 10px;
+// }
+
+// .btn-save {
+//   @include btn-styles(green, white);
+
+// }
+
+// .btn-save {
+//   @include btn-styles(red, white);
+// }
\ No newline at end of file
diff --git a/src/app/components/editor/editor.component.ts b/src/app/components/editor/editor.component.ts
index 09cb48c..ea1d0b1 100644
--- a/src/app/components/editor/editor.component.ts
+++ b/src/app/components/editor/editor.component.ts
@@ -5,6 +5,7 @@ import {CodeMirrorComponent} from '@sandkasten/codemirror6-editor';
 import {LanguageDescription} from '@codemirror/language';
 import {CODE_DEFAULTS, LANGUAGES} from '../languages';
 import {SafeHTMLPipe} from '../../safe-html.pipe';
+import { TranslateModule } from '@ngx-translate/core';
 import {ReactiveFormsModule, FormsModule} from '@angular/forms';
 import {
     keymap,
@@ -36,7 +37,7 @@ import {
     closeBracketsKeymap,
 } from '@codemirror/autocomplete';
 import {lintKeymap} from '@codemirror/lint';
-import {WorksService} from "../../services/works.service";
+import {WorkService} from "../../services/work.service";
 
 const basicSetup: Extension = (() => [
     highlightActiveLineGutter(),
@@ -76,6 +77,7 @@ const basicSetup: Extension = (() => [
         ReactiveFormsModule,
         FormsModule,
         SafeHTMLPipe,
+        TranslateModule
     ],
 })
 export class EditorComponent {
@@ -135,7 +137,7 @@ export class EditorComponent {
         this.languageCompartment.of(this.selectedLanguage.support!),
     ];
 
-    constructor(private codeExecutionService: CodeExecutionService, protected workService: WorksService) {
+    constructor(private codeExecutionService: CodeExecutionService, protected workService: WorkService) {
     }
 
     // Efface le contenu de l'éditeur
@@ -173,7 +175,7 @@ export class EditorComponent {
         this.errorMessage = `Unsupported language. Please select one of the following languages: ${extensions.join(', ')}.`;
         console.error(this.errorMessage);
     }
-
+ 
     saveToFile() {
         const blob = new Blob([this.editorContent], {type: 'text/plain'});
         const a = document.createElement('a');
@@ -186,5 +188,8 @@ export class EditorComponent {
         this.workService.postWorkCode(this.editorContent);
     }
 
+    shareButtonClicked(){}
+    saveButtonClicked(){}
+
     protected readonly console = console;
 }
diff --git a/src/app/components/footer/footer.component.html b/src/app/components/footer/footer.component.html
index c8b304d..54c4da4 100644
--- a/src/app/components/footer/footer.component.html
+++ b/src/app/components/footer/footer.component.html
@@ -5,11 +5,27 @@
 
 
 

-  Copyright © 2024 Sandcasten. All rights reserved.
+  {{ 'FooterPage.Rights' | translate }}
   
-    Mentions légales - Politique de confidentialité -
-    Conditions générales d'utilisation
+    {{ 'FooterPage.Legal' | translate }}
+    -
+    {{ 'FooterPage.Privacy' | translate }}
+    -
+    {{ 'FooterPage.Terms' | translate }}
   
 

diff --git a/src/app/components/footer/footer.component.scss b/src/app/components/footer/footer.component.scss
index 5213b63..c644145 100644
--- a/src/app/components/footer/footer.component.scss
+++ b/src/app/components/footer/footer.component.scss
@@ -19,6 +19,8 @@
 
     a {
       cursor: pointer;
+      text-decoration: none;
+      color: $color-gray;
     }
   }
 }
diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html
index d0a7a58..d7db694 100644
--- a/src/app/components/header/header.component.html
+++ b/src/app/components/header/header.component.html
@@ -27,6 +27,14 @@