From 7dfd83b60ad2c51a59c4809cfdb3491d8464b96a Mon Sep 17 00:00:00 2001
From: Bastien OLLIER <bastien.ollier@noreply.codefirst.iut.uca.fr>
Date: Mon, 3 Jun 2024 15:01:55 +0200
Subject: [PATCH 1/5] Implement personal code rooms (#11)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: bastien ollier <bastien.ollier@etu.uca.fr>
Reviewed-on: https://codefirst.iut.uca.fr/git/sandkasten/sandkasten-web/pulls/11
Reviewed-by: Clément FRÉVILLE <clement.freville2@etu.uca.fr>
Co-authored-by: Bastien OLLIER <bastien.ollier@noreply.codefirst.iut.uca.fr>
Co-committed-by: Bastien OLLIER <bastien.ollier@noreply.codefirst.iut.uca.fr>
---
 .gitignore                                    |   1 +
 package-lock.json                             |  10 ++
 package.json                                  |   1 +
 .../{app-routing.module.ts => app.routes.ts}  |  12 +-
 .../components/editor/editor.component.html   |   8 +-
 .../components/editor/editor.component.scss   |  10 ++
 src/app/components/editor/editor.component.ts |  45 ++++++-
 ...n.service.ts => backendService.service.ts} |  11 +-
 src/app/services/connection.service.ts        | 120 ++++++++++++++++++
 src/main.ts                                   |   5 +-
 10 files changed, 203 insertions(+), 20 deletions(-)
 rename src/app/{app-routing.module.ts => app.routes.ts} (81%)
 rename src/app/services/{codeExecution.service.ts => backendService.service.ts} (80%)
 create mode 100644 src/app/services/connection.service.ts

diff --git a/.gitignore b/.gitignore
index a368413..1f86315 100644
--- a/.gitignore
+++ b/.gitignore
@@ -19,6 +19,7 @@ yarn-error.log
 *.launch
 .settings/
 *.sublime-workspace
+.nx
 
 # Visual Studio Code
 .vscode/*
diff --git a/package-lock.json b/package-lock.json
index f140234..b4f06de 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "@angular/platform-browser": "^17.3.7",
         "@angular/platform-browser-dynamic": "^17.3.7",
         "@angular/router": "^17.3.7",
+        "@codemirror/collab": "^6.1.1",
         "@codemirror/lang-cpp": "^6.0.2",
         "@codemirror/lang-javascript": "^6.2.2",
         "@codemirror/state": "^6.4.1",
@@ -2447,6 +2448,15 @@
         "@lezer/common": "^1.0.0"
       }
     },
+    "node_modules/@codemirror/collab": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/collab/-/collab-6.1.1.tgz",
+      "integrity": "sha512-tkIn9Jguh98ie12dbBuba3lE8LHUkaMrIFuCVeVGhncSczFdKmX25vC12+58+yqQW5AXi3py6jWY0W+jelyglA==",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/state": "^6.0.0"
+      }
+    },
     "node_modules/@codemirror/commands": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.5.0.tgz",
diff --git a/package.json b/package.json
index afaa066..d23a824 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "@angular/platform-browser": "^17.3.7",
     "@angular/platform-browser-dynamic": "^17.3.7",
     "@angular/router": "^17.3.7",
+    "@codemirror/collab": "^6.1.1",
     "@codemirror/lang-cpp": "^6.0.2",
     "@codemirror/lang-javascript": "^6.2.2",
     "@codemirror/state": "^6.4.1",
diff --git a/src/app/app-routing.module.ts b/src/app/app.routes.ts
similarity index 81%
rename from src/app/app-routing.module.ts
rename to src/app/app.routes.ts
index 2ec202c..29b9581 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app.routes.ts
@@ -1,5 +1,4 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
+import { 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';
@@ -9,18 +8,13 @@ import { OurStoryComponent } from './components/our-story/our-story.component';
 import { PrivacyPolicyComponent } from './components/privacy-policy/privacy-policy.component';
 
 // Toutes les routes de l'application sont définies ici
-const routes: Routes = [
+export const routes: Routes = [
   { path: '', component: LandingPageComponent },
   { path: 'editor', component: EditorComponent },
+  { path: 'editor-live/:idRoom', 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 },
 ];
-
-@NgModule({
-  imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule],
-})
-export class AppRoutingModule {}
diff --git a/src/app/components/editor/editor.component.html b/src/app/components/editor/editor.component.html
index df54939..ad07817 100644
--- a/src/app/components/editor/editor.component.html
+++ b/src/app/components/editor/editor.component.html
@@ -59,6 +59,13 @@
         </div>
       }
 
+      <button
+        class="button-join"
+        (click)="onCreateRoomButtonClicked()"
+      >
+        Créer une salle
+      </button>
+
       <select id="language" [(ngModel)]="selectedLanguage">
         @for (language of languages; track language.name) {
           <option [ngValue]="language">{{ language.name }}</option>
@@ -68,7 +75,6 @@
       <div class="param-editor">
         <button
           class="button-icon button-run"
-          type="button"
           (click)="onRunButtonClicked()"
           [disabled]="isLoaded">
           <div>RUN</div>
diff --git a/src/app/components/editor/editor.component.scss b/src/app/components/editor/editor.component.scss
index 0836334..754bc49 100644
--- a/src/app/components/editor/editor.component.scss
+++ b/src/app/components/editor/editor.component.scss
@@ -40,6 +40,16 @@ svg {
   border-radius: 10px;
 }
 
+.button-join {
+  background-color: #1c53bf;
+  border: none;
+  color: white;
+  padding: 12px 16px;
+  font-size: 16px;
+  cursor: pointer;
+  border-radius: 10px;
+}
+
 select {
   background-color: #0000f0;
   border: none;
diff --git a/src/app/components/editor/editor.component.ts b/src/app/components/editor/editor.component.ts
index d8793e5..29519d7 100644
--- a/src/app/components/editor/editor.component.ts
+++ b/src/app/components/editor/editor.component.ts
@@ -1,11 +1,12 @@
-import { Component, ViewChild } from '@angular/core';
-import { CodeExecutionService } from 'src/app/services/codeExecution.service';
-import { Compartment } from '@codemirror/state';
+import { Component, Input, ViewChild } from '@angular/core';
+import { BackendService } from 'src/app/services/backendService.service';
+import { Compartment, StateEffect } 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 { Router } from '@angular/router';
 import {
   keymap,
   highlightSpecialChars,
@@ -36,6 +37,11 @@ import {
   closeBracketsKeymap,
 } from '@codemirror/autocomplete';
 import { lintKeymap } from '@codemirror/lint';
+import {
+  Connection,
+  getDocument,
+  peerExtension,
+} from '../../services/connection.service';
 
 const basicSetup: Extension = (() => [
   highlightActiveLineGutter(),
@@ -131,18 +137,47 @@ export class EditorComponent {
     this.languageCompartment.of(this.selectedLanguage.support!),
   ];
 
-  constructor(private codeExecutionService: CodeExecutionService) {}
+  private client: WebSocket | undefined;
+  @Input()
+  set idRoom(idRoom: string) {
+    this.client = new WebSocket(`ws://127.0.0.1:3000/live/${idRoom}`);
+    this.client.addEventListener('open', async () => {
+      let conn = new Connection(this.client!);
+      let { version, doc } = await getDocument(conn);
+
+      this.codemirror.editor?.dispatch({
+        changes: {
+          from: 0,
+          to: this.codemirror.editor.state.doc.length,
+          insert: doc,
+        },
+      });
+      this.codemirror.editor?.dispatch({
+        effects: StateEffect.appendConfig.of([peerExtension(version, conn)]),
+      });
+    });
+  }
+
+  constructor(
+    private router: Router,
+    private backendService: BackendService
+  ) {}
 
   // Efface le contenu de l'éditeur
   clear(): void {
     this.editorContent = '';
   }
 
+  async onCreateRoomButtonClicked() {
+    const idRoom = await this.backendService.createRoom();
+    await this.router.navigate([`./editor-live/${idRoom}`]);
+  }
+
   onRunButtonClicked() {
     // Le code à exécuter est le contenu de l'éditeur
     const codeToExecute = this.editorContent;
 
-    this.codeExecutionService.executeCode(
+    this.backendService.executeCode(
       codeToExecute,
       this.selectedLanguage.name
     );
diff --git a/src/app/services/codeExecution.service.ts b/src/app/services/backendService.service.ts
similarity index 80%
rename from src/app/services/codeExecution.service.ts
rename to src/app/services/backendService.service.ts
index 3d57318..491be1a 100644
--- a/src/app/services/codeExecution.service.ts
+++ b/src/app/services/backendService.service.ts
@@ -10,14 +10,19 @@ export type ExecutionMessage = {
 @Injectable({
   providedIn: 'root',
 })
-export class CodeExecutionService {
-  private apiUrl = 'http://localhost:3000/run';
+export class BackendService {
+  private apiUrl = 'http://localhost:3000';
   private resultSubject = new Subject<ExecutionMessage>();
 
   constructor() {}
 
+  async createRoom() {
+    const reponse = await fetch(`${this.apiUrl}/live`, { method: 'POST' });
+    return reponse.text();
+  }
+
   executeCode(code: string, language: string) {
-    const sse = new SSE(this.apiUrl, {
+    const sse = new SSE(`${this.apiUrl}/run`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
diff --git a/src/app/services/connection.service.ts b/src/app/services/connection.service.ts
new file mode 100644
index 0000000..a3b15c8
--- /dev/null
+++ b/src/app/services/connection.service.ts
@@ -0,0 +1,120 @@
+import { ChangeSet, Text } from '@codemirror/state';
+import { EditorView } from 'codemirror';
+import {
+  Update,
+  collab,
+  getSyncedVersion,
+  receiveUpdates,
+  sendableUpdates,
+} from '@codemirror/collab';
+import { ViewPlugin, ViewUpdate } from '@codemirror/view';
+
+export class Connection {
+  private requestId = 0;
+  private resolves: Record<number, (value: any) => void> = {};
+
+  constructor(private client: WebSocket) {
+    client.addEventListener('message', (event) => {
+      const response = JSON.parse(event.data);
+      if ('_request' in response) {
+        const resolve = this.resolves[response._request];
+        if (resolve) {
+          resolve(response.payload);
+        } else {
+          console.error(
+            'Received response for unknown or already used request',
+            response._request
+          );
+        }
+      } else {
+        console.error('Received invalid response', response._request);
+      }
+    });
+  }
+
+  request(body: Record<string, unknown>): Promise<any> {
+    body['_request'] = this.requestId;
+    this.client.send(JSON.stringify(body));
+    return new Promise(
+      (resolve) => (this.resolves[this.requestId++] = resolve)
+    );
+  }
+}
+
+function pushUpdates(
+  connection: Connection,
+  version: number,
+  fullUpdates: readonly Update[]
+): Promise<boolean> {
+  // Strip off transaction data
+  let updates = fullUpdates.map((u) => ({
+    clientID: u.clientID,
+    changes: u.changes.toJSON(),
+  }));
+  return connection.request({ type: 'pushUpdates', version, updates });
+}
+
+function pullUpdates(
+  connection: Connection,
+  version: number
+): Promise<readonly Update[]> {
+  return connection.request({ type: 'pullUpdates', version }).then((updates) =>
+    updates.map((u: any) => ({
+      changes: ChangeSet.fromJSON(u.changes),
+      clientID: u.clientID,
+    }))
+  );
+}
+
+export function getDocument(
+  connection: Connection
+): Promise<{ version: number; doc: Text }> {
+  return connection.request({ type: 'getDocument' }).then((data) => ({
+    version: data.version,
+    doc: Text.of(data.doc.split('\n')),
+  }));
+}
+
+export function peerExtension(startVersion: number, connection: Connection) {
+  let plugin = ViewPlugin.fromClass(
+    class {
+      private pushing = false;
+      private done = false;
+
+      constructor(private view: EditorView) {
+        this.pull();
+      }
+
+      update(update: ViewUpdate) {
+        if (update.docChanged) this.push();
+      }
+
+      async push() {
+        let updates = sendableUpdates(this.view.state);
+
+        if (this.pushing || !updates.length) return;
+        this.pushing = true;
+        let version = getSyncedVersion(this.view.state);
+        await pushUpdates(connection, version, updates);
+        this.pushing = false;
+        // Regardless of whether the push failed or new updates came in
+        // while it was running, try again if there's updates remaining
+        if (sendableUpdates(this.view.state).length)
+          setTimeout(() => this.push(), 100);
+      }
+
+      async pull() {
+        while (!this.done) {
+          let version = getSyncedVersion(this.view.state);
+          let updates = await pullUpdates(connection, version);
+          this.view.dispatch(receiveUpdates(this.view.state, updates));
+        }
+      }
+
+      destroy() {
+        this.done = true;
+      }
+    }
+  );
+  return [collab({ startVersion }), plugin];
+}
diff --git a/src/main.ts b/src/main.ts
index 4d15ebd..504e152 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -8,15 +8,16 @@ import {
   HttpClient,
 } from '@angular/common/http';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { AppRoutingModule } from './app/app-routing.module';
 import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
 import { TranslationService } from './app/services/translation.service';
+import { provideRouter, withComponentInputBinding } from '@angular/router';
+import { routes } from './app/app.routes';
 
 bootstrapApplication(AppComponent, {
   providers: [
+    provideRouter(routes, withComponentInputBinding()),
     importProvidersFrom(
       BrowserModule,
-      AppRoutingModule,
       ReactiveFormsModule,
       FormsModule,
       TranslateModule.forRoot({

From 38eae2ed53c02f04a735528ea1e74f12417873b4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20FR=C3=89VILLE?=
 <clement.freville2@etu.uca.fr>
Date: Mon, 3 Jun 2024 15:24:05 +0200
Subject: [PATCH 2/5] Run browser tests in CI (#10)

Co-authored-by: clfreville2 <clement.freville2@etu.uca.fr>
Reviewed-on: https://codefirst.iut.uca.fr/git/sandkasten/sandkasten-web/pulls/10
Reviewed-by: Bastien OLLIER <bastien.ollier@noreply.codefirst.iut.uca.fr>
---
 .drone.yml                                    |  7 +++
 angular.json                                  |  3 +-
 karma.conf.js                                 | 46 +++++++++++++++++++
 package-lock.json                             | 28 +++++++++++
 package.json                                  |  1 +
 src/app/app.component.spec.ts                 | 13 ++++--
 .../header/header.component.spec.ts           |  8 +++-
 .../landing-page.component.spec.ts            |  8 +++-
 .../privacy-policy.component.spec.ts          |  3 +-
 .../terms-of-service.component.spec.ts        |  3 +-
 10 files changed, 110 insertions(+), 10 deletions(-)
 create mode 100644 karma.conf.js

diff --git a/.drone.yml b/.drone.yml
index 55ccbca..d28f2b0 100644
--- a/.drone.yml
+++ b/.drone.yml
@@ -9,6 +9,13 @@ steps:
       - npm install
       - npm run build
 
+  - name: test-chrome
+    image: timbru31/node-chrome:20-slim
+    commands:
+      - npm run test -- --browsers=ChromeHeadlessCI --watch=false
+    depends_on:
+      - build
+
   - name: sonar
     image: sonarsource/sonar-scanner-cli:5
     commands:
diff --git a/angular.json b/angular.json
index fd654ab..fe3047c 100644
--- a/angular.json
+++ b/angular.json
@@ -71,7 +71,8 @@
             "tsConfig": "tsconfig.spec.json",
             "assets": ["src/favicon.ico", "src/assets"],
             "styles": ["src/styles.scss"],
-            "scripts": []
+            "scripts": [],
+            "karmaConfig": "karma.conf.js"
           }
         },
         "lint": {
diff --git a/karma.conf.js b/karma.conf.js
new file mode 100644
index 0000000..1896ccd
--- /dev/null
+++ b/karma.conf.js
@@ -0,0 +1,46 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-firefox-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, './coverage/sandkasten'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    browsers: ['Chrome', 'Firefox'],
+    restartOnFileChange: true,
+    customLaunchers: {
+      ChromeHeadlessCI: {
+        base: 'ChromeHeadless',
+        flags: ['--no-sandbox']
+      }
+    }
+  });
+};
diff --git a/package-lock.json b/package-lock.json
index b4f06de..86f59e9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -50,6 +50,7 @@
         "karma": "~6.4.2",
         "karma-chrome-launcher": "~3.2.0",
         "karma-coverage": "~2.2.1",
+        "karma-firefox-launcher": "^2.1.3",
         "karma-jasmine": "~5.1.0",
         "karma-jasmine-html-reporter": "~2.1.0",
         "prettier": "^3.2.5",
@@ -9660,6 +9661,33 @@
         "node": "*"
       }
     },
+    "node_modules/karma-firefox-launcher": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/karma-firefox-launcher/-/karma-firefox-launcher-2.1.3.tgz",
+      "integrity": "sha512-LMM2bseebLbYjODBOVt7TCPP9OI2vZIXCavIXhkO9m+10Uj5l7u/SKoeRmYx8FYHTVGZSpk6peX+3BMHC1WwNw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-wsl": "^2.2.0",
+        "which": "^3.0.0"
+      }
+    },
+    "node_modules/karma-firefox-launcher/node_modules/which": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/which/-/which-3.0.1.tgz",
+      "integrity": "sha512-XA1b62dzQzLfaEOSQFTCOd5KFf/1VSzZo7/7TUjnya6u0vGGKzU96UQBZTAThCb2j4/xjBAyii1OhRLJEivHvg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/which.js"
+      },
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
     "node_modules/karma-jasmine": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/karma-jasmine/-/karma-jasmine-5.1.0.tgz",
diff --git a/package.json b/package.json
index d23a824..146e396 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
     "karma": "~6.4.2",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.1",
+    "karma-firefox-launcher": "^2.1.3",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
     "prettier": "^3.2.5",
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
index 7467ecf..db6e3d5 100644
--- a/src/app/app.component.spec.ts
+++ b/src/app/app.component.spec.ts
@@ -1,11 +1,16 @@
 import { TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { RouterModule } from '@angular/router';
 
 describe('AppComponent', () => {
   beforeEach(() =>
     TestBed.configureTestingModule({
-      imports: [RouterTestingModule, AppComponent],
+      imports: [
+        RouterModule.forRoot([]),
+        AppComponent,
+        TranslateModule.forRoot(),
+      ],
     })
   );
 
@@ -19,8 +24,6 @@ describe('AppComponent', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('.content span')?.textContent).toContain(
-      'sandkasten app is running!'
-    );
+    expect(compiled.textContent).toContain('HeaderPage.Editor');
   });
 });
diff --git a/src/app/components/header/header.component.spec.ts b/src/app/components/header/header.component.spec.ts
index 674a2bf..e7ada06 100644
--- a/src/app/components/header/header.component.spec.ts
+++ b/src/app/components/header/header.component.spec.ts
@@ -1,6 +1,8 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { HeaderComponent } from './header.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { RouterModule } from '@angular/router';
 
 describe('HeaderComponent', () => {
   let component: HeaderComponent;
@@ -8,7 +10,11 @@ describe('HeaderComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [HeaderComponent],
+      imports: [
+        RouterModule.forRoot([]),
+        HeaderComponent,
+        TranslateModule.forRoot(),
+      ],
     });
     fixture = TestBed.createComponent(HeaderComponent);
     component = fixture.componentInstance;
diff --git a/src/app/components/landing-page/landing-page.component.spec.ts b/src/app/components/landing-page/landing-page.component.spec.ts
index 102fa8b..02e1313 100644
--- a/src/app/components/landing-page/landing-page.component.spec.ts
+++ b/src/app/components/landing-page/landing-page.component.spec.ts
@@ -1,6 +1,8 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { LandingPageComponent } from './landing-page.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { RouterModule } from '@angular/router';
 
 describe('LandingPageComponent', () => {
   let component: LandingPageComponent;
@@ -8,7 +10,11 @@ describe('LandingPageComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [LandingPageComponent],
+      imports: [
+        RouterModule.forRoot([]),
+        LandingPageComponent,
+        TranslateModule.forRoot(),
+      ],
     });
     fixture = TestBed.createComponent(LandingPageComponent);
     component = fixture.componentInstance;
diff --git a/src/app/components/privacy-policy/privacy-policy.component.spec.ts b/src/app/components/privacy-policy/privacy-policy.component.spec.ts
index 54a75e8..c93d9f4 100644
--- a/src/app/components/privacy-policy/privacy-policy.component.spec.ts
+++ b/src/app/components/privacy-policy/privacy-policy.component.spec.ts
@@ -1,6 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { PrivacyPolicyComponent } from './privacy-policy.component';
+import { TranslateModule } from '@ngx-translate/core';
 
 describe('PrivacyPolicyComponent', () => {
   let component: PrivacyPolicyComponent;
@@ -8,7 +9,7 @@ describe('PrivacyPolicyComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [PrivacyPolicyComponent],
+      imports: [PrivacyPolicyComponent, TranslateModule.forRoot()],
     }).compileComponents();
 
     fixture = TestBed.createComponent(PrivacyPolicyComponent);
diff --git a/src/app/components/terms-of-service/terms-of-service.component.spec.ts b/src/app/components/terms-of-service/terms-of-service.component.spec.ts
index 7faa79d..1fcbf16 100644
--- a/src/app/components/terms-of-service/terms-of-service.component.spec.ts
+++ b/src/app/components/terms-of-service/terms-of-service.component.spec.ts
@@ -1,6 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { TermsOfServiceComponent } from './terms-of-service.component';
+import { TranslateModule } from '@ngx-translate/core';
 
 describe('TermsOfServiceComponent', () => {
   let component: TermsOfServiceComponent;
@@ -8,7 +9,7 @@ describe('TermsOfServiceComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [TermsOfServiceComponent],
+      imports: [TermsOfServiceComponent, TranslateModule.forRoot()],
     }).compileComponents();
 
     fixture = TestBed.createComponent(TermsOfServiceComponent);

From 5505f9d3e740a9cf149752a34575ddc27ee02c2e Mon Sep 17 00:00:00 2001
From: clfreville2 <clement.freville2@etu.uca.fr>
Date: Mon, 10 Jun 2024 16:51:01 +0200
Subject: [PATCH 3/5] Add Bash support

---
 package-lock.json                             | 16 +++++++++++++---
 package.json                                  |  2 ++
 src/app/components/editor/editor.component.ts |  8 +++++++-
 src/app/components/languages.ts               | 16 +++++++++++++++-
 4 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 86f59e9..cac9931 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,8 @@
         "@codemirror/collab": "^6.1.1",
         "@codemirror/lang-cpp": "^6.0.2",
         "@codemirror/lang-javascript": "^6.2.2",
+        "@codemirror/language": "^6.10.2",
+        "@codemirror/legacy-modes": "^6.4.0",
         "@codemirror/state": "^6.4.1",
         "@codemirror/view": "^6.26.3",
         "@emailjs/browser": "^4.3.3",
@@ -2493,9 +2495,9 @@
       }
     },
     "node_modules/@codemirror/language": {
-      "version": "6.10.1",
-      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.10.1.tgz",
-      "integrity": "sha512-5GrXzrhq6k+gL5fjkAwt90nYDmjlzTIJV8THnxNFtNKWotMIlzzN+CpqxqwXOECnUdOndmSeWntVrVcv5axWRQ==",
+      "version": "6.10.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.10.2.tgz",
+      "integrity": "sha512-kgbTYTo0Au6dCSc/TFy7fK3fpJmgHDv1sG1KNQKJXVi+xBTEeBPY/M30YXiU6mMXeH+YIDLsbrT4ZwNRdtF+SA==",
       "dependencies": {
         "@codemirror/state": "^6.0.0",
         "@codemirror/view": "^6.23.0",
@@ -2505,6 +2507,14 @@
         "style-mod": "^4.0.0"
       }
     },
+    "node_modules/@codemirror/legacy-modes": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/@codemirror/legacy-modes/-/legacy-modes-6.4.0.tgz",
+      "integrity": "sha512-5m/K+1A6gYR0e+h/dEde7LoGimMjRtWXZFg4Lo70cc8HzjSdHe3fLwjWMR0VRl5KFT1SxalSap7uMgPKF28wBA==",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0"
+      }
+    },
     "node_modules/@codemirror/lint": {
       "version": "6.7.0",
       "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.7.0.tgz",
diff --git a/package.json b/package.json
index 146e396..c00d434 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,8 @@
     "@codemirror/collab": "^6.1.1",
     "@codemirror/lang-cpp": "^6.0.2",
     "@codemirror/lang-javascript": "^6.2.2",
+    "@codemirror/language": "^6.10.2",
+    "@codemirror/legacy-modes": "^6.4.0",
     "@codemirror/state": "^6.4.1",
     "@codemirror/view": "^6.26.3",
     "@emailjs/browser": "^4.3.3",
diff --git a/src/app/components/editor/editor.component.ts b/src/app/components/editor/editor.component.ts
index 29519d7..063a7c2 100644
--- a/src/app/components/editor/editor.component.ts
+++ b/src/app/components/editor/editor.component.ts
@@ -161,7 +161,13 @@ export class EditorComponent {
   constructor(
     private router: Router,
     private backendService: BackendService
-  ) {}
+  ) {
+    backendService.getResult().subscribe((msg) => {
+      if (msg.type === 'stdout' || msg.type === 'stderr') {
+        this.resultContent += msg.text;
+      }
+    })
+  }
 
   // Efface le contenu de l'éditeur
   clear(): void {
diff --git a/src/app/components/languages.ts b/src/app/components/languages.ts
index 219a7ac..054a060 100644
--- a/src/app/components/languages.ts
+++ b/src/app/components/languages.ts
@@ -1,6 +1,10 @@
-import { LanguageDescription } from '@codemirror/language';
+import { LanguageDescription, LanguageSupport, StreamLanguage, StreamParser } from '@codemirror/language';
 import { javascript } from '@codemirror/lang-javascript';
 
+function legacy(parser: StreamParser<unknown>): LanguageSupport {
+  return new LanguageSupport(StreamLanguage.define(parser))
+}
+
 export const CODE_DEFAULTS = {
   C: /** @lang C */ `#include <stdio.h>
 int main() {
@@ -14,6 +18,7 @@ int main() {
 }`,
   JavaScript: /** @lang JS */ `console.log("Hello, World!");`,
   TypeScript: /** @lang TS */ `console.log("Hello, World!");`,
+  Bash: 'echo "Hello, world!"',
 };
 
 export const LANGUAGES = [
@@ -48,4 +53,13 @@ export const LANGUAGES = [
       );
     },
   }),
+  LanguageDescription.of({
+    name: 'Bash',
+    alias: ['bash', 'sh', 'sh'],
+    extensions: ['sh', 'ksh', 'bash'],
+    filename: /^PKGBUILD$/,
+    load() {
+      return import('@codemirror/legacy-modes/mode/shell').then(m => legacy(m.shell))
+    }
+  }),
 ];

From 6a6fc064ef11f5e7c5847fb9d6d161dcfbc9b54f Mon Sep 17 00:00:00 2001
From: Bastien OLLIER <bastien.ollier@noreply.codefirst.iut.uca.fr>
Date: Tue, 11 Jun 2024 11:03:30 +0200
Subject: [PATCH 4/5] Keep exiting code when creating a room (#12)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: bastien ollier <bastien.ollier@etu.uca.fr>
Reviewed-on: https://codefirst.iut.uca.fr/git/sandkasten/sandkasten-web/pulls/12
Reviewed-by: Clément FRÉVILLE <clement.freville2@etu.uca.fr>
Co-authored-by: Bastien OLLIER <bastien.ollier@noreply.codefirst.iut.uca.fr>
Co-committed-by: Bastien OLLIER <bastien.ollier@noreply.codefirst.iut.uca.fr>
---
 src/app/components/editor/editor.component.html |  5 +----
 src/app/components/editor/editor.component.ts   | 13 +++++++------
 src/app/components/languages.ts                 | 15 +++++++++++----
 src/app/services/backendService.service.ts      | 10 ++++++++--
 4 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/src/app/components/editor/editor.component.html b/src/app/components/editor/editor.component.html
index ad07817..d54dec5 100644
--- a/src/app/components/editor/editor.component.html
+++ b/src/app/components/editor/editor.component.html
@@ -59,10 +59,7 @@
         </div>
       }
 
-      <button
-        class="button-join"
-        (click)="onCreateRoomButtonClicked()"
-      >
+      <button class="button-join" (click)="onCreateRoomButtonClicked()">
         Créer une salle
       </button>
 
diff --git a/src/app/components/editor/editor.component.ts b/src/app/components/editor/editor.component.ts
index 063a7c2..cd27853 100644
--- a/src/app/components/editor/editor.component.ts
+++ b/src/app/components/editor/editor.component.ts
@@ -140,6 +140,10 @@ export class EditorComponent {
   private client: WebSocket | undefined;
   @Input()
   set idRoom(idRoom: string) {
+    if (idRoom === undefined) {
+      return;
+    }
+
     this.client = new WebSocket(`ws://127.0.0.1:3000/live/${idRoom}`);
     this.client.addEventListener('open', async () => {
       let conn = new Connection(this.client!);
@@ -166,7 +170,7 @@ export class EditorComponent {
       if (msg.type === 'stdout' || msg.type === 'stderr') {
         this.resultContent += msg.text;
       }
-    })
+    });
   }
 
   // Efface le contenu de l'éditeur
@@ -175,7 +179,7 @@ export class EditorComponent {
   }
 
   async onCreateRoomButtonClicked() {
-    const idRoom = await this.backendService.createRoom();
+    const idRoom = await this.backendService.createRoom(this.editorContent);
     await this.router.navigate([`./editor-live/${idRoom}`]);
   }
 
@@ -183,10 +187,7 @@ export class EditorComponent {
     // Le code à exécuter est le contenu de l'éditeur
     const codeToExecute = this.editorContent;
 
-    this.backendService.executeCode(
-      codeToExecute,
-      this.selectedLanguage.name
-    );
+    this.backendService.executeCode(codeToExecute, this.selectedLanguage.name);
 
     this.resultContent = '';
   }
diff --git a/src/app/components/languages.ts b/src/app/components/languages.ts
index 054a060..a389746 100644
--- a/src/app/components/languages.ts
+++ b/src/app/components/languages.ts
@@ -1,8 +1,13 @@
-import { LanguageDescription, LanguageSupport, StreamLanguage, StreamParser } from '@codemirror/language';
+import {
+  LanguageDescription,
+  LanguageSupport,
+  StreamLanguage,
+  StreamParser,
+} from '@codemirror/language';
 import { javascript } from '@codemirror/lang-javascript';
 
 function legacy(parser: StreamParser<unknown>): LanguageSupport {
-  return new LanguageSupport(StreamLanguage.define(parser))
+  return new LanguageSupport(StreamLanguage.define(parser));
 }
 
 export const CODE_DEFAULTS = {
@@ -59,7 +64,9 @@ export const LANGUAGES = [
     extensions: ['sh', 'ksh', 'bash'],
     filename: /^PKGBUILD$/,
     load() {
-      return import('@codemirror/legacy-modes/mode/shell').then(m => legacy(m.shell))
-    }
+      return import('@codemirror/legacy-modes/mode/shell').then((m) =>
+        legacy(m.shell)
+      );
+    },
   }),
 ];
diff --git a/src/app/services/backendService.service.ts b/src/app/services/backendService.service.ts
index 491be1a..90b64ed 100644
--- a/src/app/services/backendService.service.ts
+++ b/src/app/services/backendService.service.ts
@@ -16,8 +16,14 @@ export class BackendService {
 
   constructor() {}
 
-  async createRoom() {
-    const reponse = await fetch(`${this.apiUrl}/live`, { method: 'POST' });
+  async createRoom(code: string) {
+    const reponse = await fetch(`${this.apiUrl}/live`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ code }),
+    });
     return reponse.text();
   }
 

From f295bd5e9178942e218559e474d5477a18e5d6af Mon Sep 17 00:00:00 2001
From: Colin FRIZOT <colin.frizot@etu.uca.fr>
Date: Sun, 16 Jun 2024 09:48:04 +0200
Subject: [PATCH 5/5] Fetch config from the build environment config (#13)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add two environment files for production and development

Co-authored-by: cofrizot <colin.frizot@etu.uca.fr>
Reviewed-on: https://codefirst.iut.uca.fr/git/sandkasten/sandkasten-web/pulls/13
Reviewed-by: Clément FRÉVILLE <clement.freville2@etu.uca.fr>
Co-authored-by: Colin FRIZOT <colin.frizot@etu.uca.fr>
Co-committed-by: Colin FRIZOT <colin.frizot@etu.uca.fr>
---
 angular.json                                  | 43 +++++++++++++++----
 src/app/components/editor/editor.component.ts |  7 ++-
 src/app/services/backendService.service.ts    |  4 +-
 src/environments/environment.prod.ts          |  5 +++
 src/environments/environment.ts               |  5 +++
 5 files changed, 54 insertions(+), 10 deletions(-)
 create mode 100644 src/environments/environment.prod.ts
 create mode 100644 src/environments/environment.ts

diff --git a/angular.json b/angular.json
index fe3047c..c35f991 100644
--- a/angular.json
+++ b/angular.json
@@ -16,14 +16,27 @@
             "outputPath": "dist/sandkasten",
             "index": "src/index.html",
             "browser": "src/main.ts",
-            "polyfills": ["zone.js"],
+            "polyfills": [
+              "zone.js"
+            ],
             "tsConfig": "tsconfig.app.json",
-            "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["src/styles.scss"],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
             "scripts": []
           },
           "configurations": {
             "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
               "budgets": [
                 {
                   "type": "initial",
@@ -39,6 +52,7 @@
               "outputHashing": "all"
             },
             "development": {
+              "fileReplacements": [],
               "optimization": false,
               "extractLicenses": false,
               "sourceMap": true
@@ -67,10 +81,18 @@
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "polyfills": ["zone.js", "zone.js/testing"],
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
             "tsConfig": "tsconfig.spec.json",
-            "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["src/styles.scss"],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
             "scripts": [],
             "karmaConfig": "karma.conf.js"
           }
@@ -78,7 +100,10 @@
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
+            ]
           }
         }
       }
@@ -86,6 +111,8 @@
   },
   "cli": {
     "analytics": false,
-    "schematicCollections": ["@angular-eslint/schematics"]
+    "schematicCollections": [
+      "@angular-eslint/schematics"
+    ]
   }
 }
diff --git a/src/app/components/editor/editor.component.ts b/src/app/components/editor/editor.component.ts
index cd27853..dcf76b1 100644
--- a/src/app/components/editor/editor.component.ts
+++ b/src/app/components/editor/editor.component.ts
@@ -42,6 +42,7 @@ import {
   getDocument,
   peerExtension,
 } from '../../services/connection.service';
+import { environment } from '../../../environments/environment';
 
 const basicSetup: Extension = (() => [
   highlightActiveLineGutter(),
@@ -94,6 +95,7 @@ export class EditorComponent {
   get selectedLanguage(): LanguageDescription {
     return this._selectedLanguage;
   }
+
   set selectedLanguage(value: LanguageDescription) {
     this._selectedLanguage = value;
     if (value.name in CODE_DEFAULTS) {
@@ -106,10 +108,12 @@ export class EditorComponent {
       });
     });
   }
+
   private _linesNumbers: boolean = true;
   get linesNumbers() {
     return this._linesNumbers;
   }
+
   set linesNumbers(lines: boolean) {
     this._linesNumbers = lines;
     this.codemirror.editor?.dispatch({
@@ -138,13 +142,14 @@ export class EditorComponent {
   ];
 
   private client: WebSocket | undefined;
+
   @Input()
   set idRoom(idRoom: string) {
     if (idRoom === undefined) {
       return;
     }
 
-    this.client = new WebSocket(`ws://127.0.0.1:3000/live/${idRoom}`);
+    this.client = new WebSocket(`${environment.webSocketUrl}/live/${idRoom}`);
     this.client.addEventListener('open', async () => {
       let conn = new Connection(this.client!);
       let { version, doc } = await getDocument(conn);
diff --git a/src/app/services/backendService.service.ts b/src/app/services/backendService.service.ts
index 90b64ed..d6808f4 100644
--- a/src/app/services/backendService.service.ts
+++ b/src/app/services/backendService.service.ts
@@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core';
 import { SSE } from 'sse.js';
 import { Observable, Subject } from 'rxjs';
+import { environment } from '../../environments/environment';
 
 export type ExecutionMessage = {
   type: 'stdout' | 'stderr' | 'exit';
@@ -11,7 +12,8 @@ export type ExecutionMessage = {
   providedIn: 'root',
 })
 export class BackendService {
-  private apiUrl = 'http://localhost:3000';
+  private apiUrl = environment.apiUrl;
+
   private resultSubject = new Subject<ExecutionMessage>();
 
   constructor() {}
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
new file mode 100644
index 0000000..0900c39
--- /dev/null
+++ b/src/environments/environment.prod.ts
@@ -0,0 +1,5 @@
+export const environment = {
+  production: true,
+  apiUrl: 'https://tododomain.com',
+  webSocketUrl: 'ws://tododomain.com',
+};
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
new file mode 100644
index 0000000..0411da0
--- /dev/null
+++ b/src/environments/environment.ts
@@ -0,0 +1,5 @@
+export const environment = {
+  production: false,
+  apiUrl: 'http://localhost:3000',
+  webSocketUrl: 'ws://localhost:3000',
+};