legals mentions & credits

src/app/app.component.html

@@ -173,12 +173,18 @@
                 <img class="langIcon" [src]="'./assets/lang/icons/'+selectedLang+'.png'"/>
                 <span>{{'lang_label' | translate}}</span>
             </button>
-            <span mat-menu-item disabled
+            <button mat-menu-item disabled
             [matTooltip]="translate.instant('unity_tooltip')"
             matTooltipPosition="left" [matTooltipDisabled]="!tooltipService.activatedTooltips">
                 <input name="unity" type="checkbox"/>
                 <label for="unity">{{'unity_label' | translate}}</label>
-            </span>
+            </button>
+            <button mat-menu-item (click)="consultLegals()"
+            [matTooltip]="translate.instant('legal_tooltip')"
+            matTooltipPosition="left" [matTooltipDisabled]="!tooltipService.activatedTooltips">
+                <mat-icon fontIcon="attribution"></mat-icon>
+                <span>{{'legal_label' | translate}}</span>
+            </button>
         </mat-menu>
         <mat-menu #changeLanguageMenu="matMenu">
             <button mat-menu-item (click)="changeLanguage('fr')">

src/app/app.component.ts

@@ -39,6 +39,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { TutorialService } from './services/tutorial/tutorial.service';
 import { VerifyGameFailSnackbarComponent } from './components/snackbars/verify-game-fail-snackbar/verify-game-fail-snackbar.component';
 import { VerifyDialogComponent } from './components/dialogs/verify-dialog/verify-dialog.component';
+import { LegalDialogComponent } from './components/dialogs/legal-dialog/legal-dialog.component';
 
 @Component({
   selector: 'app-root',
@@ -468,4 +469,9 @@ export class AppComponent {
     }
   }
 
+  consultLegals(): void {
+    const dialogRef = this.dialog.open(LegalDialogComponent, {
+      maxWidth: '50vw',
+    });
+  }
 }
\ No newline at end of file

src/app/app.module.ts

@@ -52,6 +52,7 @@ import { VerifyGameFailSnackbarComponent } from './components/snackbars/verify-g
 import { VerifyDialogComponent } from './components/dialogs/verify-dialog/verify-dialog.component';
 import { RoleNameDuplicateComponent } from './components/snackbars/role-name-duplicate/role-name-duplicate.component';
 import { CopyRoleSuccessComponent } from './components/snackbars/copy-role-success/copy-role-success.component';
+import { LegalDialogComponent } from './components/dialogs/legal-dialog/legal-dialog.component';
 
 export function HttpLoaderFactory(http: HttpClient) {
   return new TranslateHttpLoader(http);
@@ -95,7 +96,8 @@ export function HttpLoaderFactory(http: HttpClient) {
     VerifyGameFailSnackbarComponent,
     VerifyDialogComponent,
     RoleNameDuplicateComponent,
-    CopyRoleSuccessComponent
+    CopyRoleSuccessComponent,
+    LegalDialogComponent
   ],
   imports: [
     BrowserModule,

src/app/components/dialogs/legal-dialog/legal-dialog.component.html

+<h1 mat-dialog-title>{{'legal_label' | translate}}</h1>
+<mat-dialog-content>
+    <div class="element">
+        <h3>{{'legals_publicationDirector_title' | translate}}</h3>
+        <p>{{'legals_publicationDirector_content' | translate}}</p>        
+    </div>
+    <div class="element">
+        <h3>{{'legals_webManager_title' | translate}}</h3>
+        <p>{{'legals_webManager_content' | translate}}</p>        
+    </div>
+    <div class="element">
+        <h3>{{'legals_editor_title' | translate}}</h3>
+        <p>{{'legals_editor_content' | translate}}</p>        
+    </div>
+    <div class="element">
+        <h3>{{'legals_host_title' | translate}}</h3>
+        <p>{{'legals_host_content' | translate}}</p>
+    </div>
+    <div class="element">
+        <h3>{{"legals_dysfunction_title" | translate}}</h3>
+        <p>{{"legals_dysfunction_content" | translate}}</p>
+    </div>
+    <div class="element">
+        <h3>{{"legals_credits_title" | translate}}</h3>
+        <p>{{"legals_credits_content1" | translate}}</p>
+        <div class="projectImages">
+            <img src="./assets/credits/logoNucleofil.png"/>
+            <img src="./assets/credits/gvtRelance.png"/>
+        </div>
+        <p>{{"legals_credits_content2" | translate}}</p>
+        <div class="collabsImages">
+            <img src="./assets/credits/sorbonne_universite.png"/>
+            <img src="./assets/credits/LIP6.png"/>
+            <img src="./assets/credits/IMT_Nord_Europe.jpg"/>
+        </div>
+    </div>
+    <div class="element">
+        <h3>{{"legals_cookies_title" | translate}}</h3>
+        <p>{{"legals_cookies_content" | translate}}</p>
+    </div>
+</mat-dialog-content>
+<mat-dialog-actions align="end">
+    <button mat-button mat-dialog-close>{{'legals_close' | translate}}</button>
+</mat-dialog-actions>
+

src/app/components/dialogs/legal-dialog/legal-dialog.component.scss

+h1, h2, h3 {
+    font-family: 'Glacial Indifference Bold', sans-serif;
+}
+
+h3 {
+    margin-bottom: -10px;
+}
+
+button {
+    margin-top: 20px;
+}
+
+p {
+    white-space: pre-wrap;
+}
+
+mat-dialog-content {
+    font-size: 16px;
+    text-align: center;
+}
+
+.element {
+    margin-bottom: 30px;
+}
+
+.projectImages, .collabsImages {
+    margin-left: auto;
+    margin-right: auto;
+    display: flex;
+    flex-direction: row;
+    max-width: 600px;
+    justify-content: space-evenly;
+
+    img {
+        height: 90px;
+    }
+}
\ No newline at end of file

src/app/components/dialogs/legal-dialog/legal-dialog.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LegalDialogComponent } from './legal-dialog.component';
+
+describe('LegalDialogComponent', () => {
+  let component: LegalDialogComponent;
+  let fixture: ComponentFixture<LegalDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LegalDialogComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(LegalDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/dialogs/legal-dialog/legal-dialog.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-legal-dialog',
+  templateUrl: './legal-dialog.component.html',
+  styleUrls: ['./legal-dialog.component.scss']
+})
+export class LegalDialogComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/assets/lang/en.json

@@ -28,6 +28,8 @@
     "verify_tooltip": "Verify the scenario",
     "lang_label": "Change the language",
     "lang_tooltip": "Change the language.",
+    "legal_label": "Credits & Legal notices",
+    "legal_tooltip": "Consult credits and legal notices",
 
     "snackbar_identifier": "Attention, this identifier is already used in this Role.",
     "snackbar_loading_fail": "File upload failed.",
@@ -350,5 +352,22 @@
     "verify_role_part1": "The quest of",
     "verify_role_part2": "needs between",
     "verify_role_part3": "and",
-    "verify_leave_button": "OK"
+    "verify_leave_button": "OK",
+
+    "legals_close": "Close",
+    "legals_publicationDirector_title": "Publication Director",
+    "legals_publicationDirector_content": "Alain Schmitt",
+    "legals_webManager_title": "Web Manager",
+    "legals_webManager_content": "Gaëlle Guigon",
+    "legals_editor_title": "Editor",
+    "legals_editor_content": "Engineering and Educational Resources Department\nEmail: innovation-pedagogique@imt-nord-europe.fr",
+    "legals_host_title": "Host",
+    "legals_host_content": "This site is hosted by IMT Nord Europe",
+    "legals_dysfunction_title": "Dysfunction and viruses.",
+    "legals_dysfunction_content": "IMT Nord Europe cannot be held responsible for direct or indirect damages, losses, or expenses resulting from the use of this website, or the inability of a third party to use it, or from a malfunction, interruption, virus, or a problem with the line or system.",
+    "legals_credits_title": "Credits",
+    "legals_credits_content1": "The texts on this site are licensed under CC-BY-NC-SA (Creative Commons with permission for use under the conditions of attribution, non-commercial use, and sharing under the same initial terms).\n\nIcons created by max.icons and Freepik, sourced from: www.flaticon.com and are licensed under CC-BY 3.0.\n\nDevelopment: Romain Deleau\n\nWeb design: Gaëlle Guigon\n\nThese works are part of the Nucléofil project, funded by the government as part of the recovery plan.",
+    "legals_credits_content2": "Additionally, they are the subject of a doctoral thesis at Sorbonne Université (at LIP6 in the team MOCAH), in collaboration with IMT Nord Europe.",
+    "legals_cookies_title": "Cookies",
+    "legals_cookies_content": "We do not record any cookies and do not save any personal data!"
 }
\ No newline at end of file

src/assets/lang/fr.json

@@ -28,6 +28,8 @@
     "verify_tooltip": "Vérifier le scénario",
     "lang_label": "Changer la langue",
     "lang_tooltip": "Changer la langue.",
+    "legal_label": "Crédits & Mentions légales",
+    "legal_tooltip": "Consulter les crédits et mentions légales",
 
     "snackbar_identifier": "Attention, cet identifiant est déjà utilisé dans ce Rôle",
     "snackbar_loading_fail": "Chargement du fichier échoué",
@@ -350,5 +352,22 @@
     "verify_role_part1": "La quête de",
     "verify_role_part2": "met entre",
     "verify_role_part3": "et",
-    "verify_leave_button": "OK"
+    "verify_leave_button": "OK",
+
+    "legals_close": "Fermer",
+    "legals_publicationDirector_title": "Directeur de publication",
+    "legals_publicationDirector_content": "Alain Schmitt",
+    "legals_webManager_title": "Responsable Web",
+    "legals_webManager_content": "Gaëlle Guigon",
+    "legals_editor_title": "Éditeur",
+    "legals_editor_content": "Pôle Ingénierie et Ressources Pédagogiques d'IMT Nord Europe\nEmail : innovation-pedagogique@imt-nord-europe.fr",
+    "legals_host_title": "Hébergeur",
+    "legals_host_content": "Ce site est hébergé par IMT Nord Europe.",
+    "legals_dysfunction_title": "Dysfonctionnement et virus",
+    "legals_dysfunction_content": "IMT Nord Europe ne peut être tenue pour responsable de dommages directs ou indirects, pertes ou frais, résultant de l'utilisation de ce site web, ou de l'impossibilité pour un tiers de l'utiliser, ou d'un mauvais fonctionnement, d'une interruption, d'un virus, ou encore d'un problème de ligne ou de système.",
+    "legals_credits_title": "Crédits",
+    "legals_credits_content1": "Les textes de ce site sont sous licence CC-BY-NC-SA (Creative Commons avec autorisation d'utilisation sous condition d'attribution de paternité, d'usage non commercial, et de conditions de partage identiques aux initiales).\n\nIcônes réalisées par max.icons et Freepik, provenant de : www.flaticon.com et sont sous la licence CC-BY 3.0.\n\nDéveloppement : Romain Deleau\n\nWebdesign : Gaëlle Guigon\n\nCes travaux s'inscrivent dans le projet Nucléofil, financé par le gouvernement dans le cadre du plan de relance.",
+    "legals_credits_content2": "De plus, ils font l'objet d'un travail de doctorat à Sorbonne Université (au LIP6 dans l'équipe MOCAH), en collaboration avec IMT Nord Europe.",
+    "legals_cookies_title": "Cookies",
+    "legals_cookies_content": "Nous n'enregistrons aucun cookie et ne sauvegardons aucune donnée personnelle !"
 }
\ No newline at end of file