FEAT #18301 TIME 2 add aboutUs component

lang/en.json

@@ -634,6 +634,18 @@
 		"hidePassword": "Hide password",
         "cannotSetSignature": "You cannot pre-position a signature for a user with the annotator role",
         "resumeOriginalDoc": "Warning ! The return document action will use the original document",
-        "emptySignList": "No stamp available"
+        "emptySignList": "No stamp available",
+        "aboutUs": "About Maarch Parapheur",
+        "applicationVersion": "Maarch Parapheur {{version}} Powered by {{author}}",
+		"documentation": "Documentation",
+		"officialWebsite": "Official site",
+		"community": "Community",
+		"maarchLicence": "Maarch Parapheur is distributed under the terms of the",
+		"groupeCompany": "Maarch SAS company of the Xelians group",
+		"externalComponents": "External components",
+		"externalComponentsDesc": "Maarch Parapheur relies on a few external components. Thanks to their developers!",
+		"credits": "Credits",
+		"allCredits": "And the whole Maarch community!",
+		"licence": "GNU GPLv3 license"
     }
 }
\ No newline at end of file

lang/fr.json

@@ -633,6 +633,18 @@
 		"hidePassword": "Masquer le mot de passe",
 		"cannotSetSignature": "Vous ne pouvez pas pré-positionner une signature pour un utilisateur avec le rôle annotateur",
 		"resumeOriginalDoc": "Attention ! L'action renvoi de document reprend le document original",
-		"emptySignList": "Aucune griffe disponible"
+		"emptySignList": "Aucune griffe disponible",
+		"aboutUs": "A propos de Maarch Parapheur",
+		"applicationVersion": "Maarch Parapheur {{version}} Powered by {{author}}",
+		"documentation": "Documentation",
+		"officialWebsite": "Site officiel",
+		"community": "Communauté",
+		"maarchLicence": "Maarch Parapheur est diffusé sous les termes de la",
+		"groupeCompany": "Maarch SAS société du groupe Xelians",
+		"externalComponents": "Composants externe",
+		"externalComponentsDesc": "Maarch Parapheur s'appuie sur quelques composants externes. Merci à leurs développeurs !",
+		"credits": "Crédits",
+		"allCredits": "Et toute la communauté Maarch !",
+		"licence": "licence GNU GPLv3"
 	}
 }

src/frontend/app/app.module.ts

@@ -104,6 +104,7 @@ import { NotificationComponent } from './administration/notification/notificatio
 import { GridButtonComponent } from './plugins/gridButton/grid-button.component';
 import { NotificationsListComponent } from './administration/notification/notifications-list.component';
 import { MessageBoxComponent } from './plugins/messageBox/message-box.component';
+import { AboutUsComponent } from './home/aboutUs/about-us.component';
 
 
 registerLocaleData(localeFr, 'fr-FR');
@@ -170,7 +171,8 @@ registerLocaleData(localeFr, 'fr-FR');
         NotificationComponent,
         GridButtonComponent,
         NotificationsListComponent,
-        MessageBoxComponent
+        MessageBoxComponent,
+        AboutUsComponent
     ],
     imports: [
         FormsModule,

src/frontend/app/home/aboutUs/about-us.component.html

+<ion-header [translucent]="true">
+    <ion-toolbar color="primary">
+        <ion-title>{{'lang.aboutUs' | translate}}</ion-title>
+        <ion-buttons slot="end">
+            <ion-button (click)="modalController.dismiss('cancel');">
+                <ion-icon slot="icon-only" name="close-outline"></ion-icon>
+            </ion-button>
+        </ion-buttons>
+    </ion-toolbar>
+</ion-header>
+<ion-content *ngIf="!loading">
+    <ion-card>
+        <ion-grid>
+            <ion-row>
+                <ion-col size="8">
+                    <ion-card-header>
+                        <ion-card-title class="appVersion">Maarch Parapheur {{applicationVersion}}</ion-card-title>
+                        <ion-card-subtitle>Version: <a target="blank" href="https://labs.maarch.org/maarch/MaarchParapheur/commit/{{commitHash}}">{{commitHash}}</a></ion-card-subtitle>
+                    </ion-card-header>
+                    <ion-card-content style="margin-bottom: -15px;">
+                        <ion-item lines="none" style="font-style: italic;">
+                            Copyright &copy; 2008-{{currentYear}} Maarch SAS {{'lang.groupeCompany' | translate}}
+                        </ion-item>
+                        <ion-item lines="none" style="margin-top:-10px;">
+                            {{'lang.maarchLicence' | translate}} &nbsp;<a target="blank" href="http://www.gnu.org/licenses/gpl-3.0-standalone.html">{{'lang.licence' | translate}}</a>.  
+                        </ion-item>
+                        <ion-item style="margin-top: -15px;">
+                            <ul>
+                                <li>{{'lang.officialWebsite' | translate}} : <a target="blank" href="https://maarch.com/">https://maarch.com</a></li>
+                                <li>{{'lang.community' | translate}} : <a target="blank"
+                                    href="https://community.maarch.org/">https://community.maarch.org</a>
+                                </li>
+                                <li>{{'lang.documentation' | translate}} : <a target="blank"
+                                    href="https://docs.maarch.org/">https://docs.maarch.org</a>
+                                </li>
+                            </ul>
+                        </ion-item>
+                    </ion-card-content>
+                </ion-col>
+                <ion-col size="4">
+                    <img [src]="xeliansLogo" style="margin-top: 15%;">
+                </ion-col>
+            </ion-row>
+        </ion-grid>
+    </ion-card>
+    <ion-grid>
+        <ion-row>
+            <ion-col size="6">
+                <ion-card style="height: 100%;">
+                    <ion-card-header>
+                        <ion-card-title class="appVersion">{{'lang.externalComponents' | translate}}</ion-card-title>
+                        <ion-card-subtitle style="font-size: 12px;">{{'lang.externalComponentsDesc' | translate}}</ion-card-subtitle>
+                    </ion-card-header>
+                    <ion-card-content>
+                        <ion-item style="margin-top: -15px;" lines="none">
+                            <ul class="repeatRows">
+                                <li *ngFor="let component of externalComponents" class="componentElement">
+                                    <a [href]="component.url" target="_blank">{{component.label}}</a>
+                                </li>
+                            </ul>
+                        </ion-item>
+                    </ion-card-content>
+                </ion-card>
+            </ion-col>
+            <ion-col size="6">
+                <ion-card style="height: 100%;">
+                    <ion-card-header>
+                        <ion-card-title class="appVersion">{{'lang.credits' | translate}}</ion-card-title>
+                    </ion-card-header>
+                    <ion-card-content>
+                        <ion-item style="margin-top: -15px;" lines="none">
+                            <ul style="display: inline-block; font-size: 14px; margin-top: -3px;">
+                                <li>
+                                    Florian AZIZIAN, Damien BUREL, Bruno CARLIN, Carole COTIN, Prosper DE LAURE, Driss DEMIRAY, Gaël DE VILLEBLANCHE, 
+                                    Emmanuel DILLARD, Mathieu DONZEL, Jean-Louis ERCOLANI, Claire FIGUERAS, Laurent GIOVANNONI, Guillaume HEURTIER, 
+                                    Hamza HRAMCHI, Kader KANE, Yves-Christian KPAKPO, Alexandre MORIN, Sébastien NANABONDJA, Fodé NDIAYE, 
+                                    Cédric NDOUMBA, Alex ORLUC, Henri QUENEAU, Alexis RAGOT, Quentin RIBAC, Alexandre STEFANOVIC, Serge THIERRY-MIEG, 
+                                    Cyril VAZQUEZ, Arnaud VEBER, Loic VINET
+                                </li>
+                                <li style="margin-top: 10px;">{{'lang.allCredits' | translate}}</li>
+                            </ul>
+                        </ion-item>
+                    </ion-card-content>
+                </ion-card>
+            </ion-col>
+        </ion-row>
+    </ion-grid>
+</ion-content>
\ No newline at end of file

src/frontend/app/home/aboutUs/about-us.component.scss

+.appVersion {
+    color: var(--ion-color-primary);
+    margin-bottom: 15px;
+}
+
+.repeatRows {
+    padding: 0;
+    margin-left: 25px;
+    display: block;
+}
+
+.componentElement {
+    font-size: 14px;
+    margin-bottom: 10px;
+    margin-right: 80px;
+    margin-left: 10px;
+    white-space: pre;
+}
\ No newline at end of file

src/frontend/app/home/aboutUs/about-us.component.ts

+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+import { TranslateService } from '@ngx-translate/core';
+import { of } from 'rxjs';
+import { catchError, tap } from 'rxjs/operators';
+import { environment } from '../../../core/environments/environment';
+import { FunctionsService } from '../../service/functions.service';
+import { NotificationService } from '../../service/notification.service';
+
+
+
+@Component({
+    templateUrl: 'about-us.component.html',
+    styleUrls: ['about-us.component.scss'],
+})
+
+export class AboutUsComponent implements OnInit {
+
+    loading: boolean = false;
+    applicationVersion: string;
+    currentYear: number;
+    commitHash: string = this.translate.instant('lang.undefined');
+    xeliansLogo: any;
+    externalComponents: any[] = [
+        {
+            label: 'Angular',
+            url: 'https://angular.io/'
+        },
+        {
+            label: 'Angular Material',
+            url: 'https://material.angular.io/'
+        },
+        {
+            label: 'Ionic',
+            url: 'https://ionicframework.com/'
+        },
+        {
+            label: 'Docaposte',
+            url: 'https://www.docaposte.com/'
+        },
+        {
+            label: 'YouSign',
+            url: 'https://yousign.com/'
+        },
+        {
+            label: 'Bootstrap',
+            url: 'https://getbootstrap.com/'
+        },
+        {
+            label: 'Ionicons',
+            url: 'https://ionic.io/ionicons/'
+        },
+        {
+            label: 'Jquery',
+            url: 'https://jquery.com/'
+        },
+        {
+            label: 'Jquery Typeahead',
+            url: 'https://github.com/running-coder/jquery-typeahead/'
+        },
+    ];
+
+    constructor (
+        public modalController: ModalController,
+        public translate: TranslateService,
+        public http: HttpClient,
+        public functions: FunctionsService,
+        private notify: NotificationService,
+
+    ) { }
+
+    async ngOnInit(): Promise<void> {
+        this.loading = true;
+        this.xeliansLogo = await this.functions.getPictureById('maarch_box');
+        this.applicationVersion = environment.VERSION;
+        this.currentYear = new Date().getFullYear();
+        await this.loadCommitInformation();
+        this.loading = false;
+    }
+
+    loadCommitInformation() {
+        return new Promise((resolve) => {
+            this.http.get('../rest/commitInformation').pipe(
+                tap((data: any) => {
+                    this.commitHash = data.hash !== null ? data.hash : this.translate.instant('lang.undefined');
+                    resolve(true);
+                }),
+                catchError((err: any) => {
+                    this.notify.handleErrors(err);
+                    return of(false);
+                })
+            ).subscribe();
+        });
+    }
+}

src/frontend/app/home/home.component.html

@@ -4,3 +4,6 @@
         {{'lang.accessMenu' | translate}}
     </ion-button>
 </ion-content>
+<ion-footer class="footer ion-no-border">
+    <span style="font-size: 13px; color: white; cursor: pointer; text-decoration: underline;" (click)="openAboutUsModal()">{{'lang.aboutUs' | translate}}</span>
+</ion-footer>

src/frontend/app/home/home.component.scss

@@ -13,3 +13,10 @@
   top: 60%;
   transform: translate(-50%, -50%);
 }
+
+.footer {
+  background: var(--ion-color-primary);
+  justify-content: flex-end;
+  height: auto;
+  padding: 10px;
+}
\ No newline at end of file

src/frontend/app/home/home.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { MenuController, ModalController } from '@ionic/angular';
 import { TranslateService } from '@ngx-translate/core';
 import { SignaturesContentService } from '../service/signatures.service';
+import { AboutUsComponent } from './aboutUs/about-us.component';
 
 @Component({
     templateUrl: 'home.component.html',
@@ -23,4 +24,12 @@ export class HomeComponent implements OnInit {
         this.menu.enable(false, 'right-menu');
         this.menu.open('left-menu');
     }
+
+    async openAboutUsModal() {
+        const modal = await this.modalController.create({
+            component: AboutUsComponent,
+            cssClass: 'aboutUsCss'
+        });
+        await modal.present();
+    }
 }

src/frontend/app/login/login.component.html

@@ -44,7 +44,6 @@
             </form>
         </ion-card-content>
     </ion-card>
-    <ion-note class="version-info">
-        Maarch Parapheur {{environment.VERSION}} <a *ngIf="commitHash !== null" style="color: white" target="blank" href="{{'lang.repoUrl' | translate}}/commit/{{commitHash}}">{{commitHash.substring(0, 8)}}</a> Powered by {{environment.AUTHOR}}
+    <ion-note class="version-info" [innerText]="'lang.applicationVersion' | translate : {version: applicationVersion, author: environment.AUTHOR}">
     </ion-note>
 </ion-content>

src/frontend/app/login/login.component.scss

@@ -2,6 +2,7 @@
   color: white;
   position: absolute;
   bottom: 5px;
+  margin-left: 5px;
 }
 
 .maarchLogo {

src/frontend/app/login/login.component.ts

@@ -26,6 +26,7 @@ export class LoginComponent implements OnInit, AfterViewInit {
     environment: any;
     commitHash: any = null;
     hidePassword: boolean = true;
+    applicationVersion: string = '';
 
 
     constructor(
@@ -43,6 +44,13 @@ export class LoginComponent implements OnInit, AfterViewInit {
     ) { }
 
     async ngOnInit() {
+        const appVersion: string = environment.VERSION.split('.')[0] + '.' + environment.VERSION.split('.')[1];
+        if (!this.functions.empty(environment.VERSION.split(' ')[1])) {
+            const mode: string = (environment.VERSION.split(' ')[1]).concat(' ', environment.VERSION.split(' ')[2]);
+            this.applicationVersion = appVersion.concat(' ', mode);
+        } else {
+            this.applicationVersion = appVersion;
+        }
 
         this.loginForm = this.formBuilder.group({
             login: [null, Validators.required],
@@ -51,8 +59,6 @@ export class LoginComponent implements OnInit, AfterViewInit {
 
         this.environment = environment;
         this.signaturesService.reset();
-
-        await this.loadCommitInformation();
     }
 
     ionViewWillEnter() {
@@ -130,21 +136,6 @@ export class LoginComponent implements OnInit, AfterViewInit {
         }
     }
 
-    loadCommitInformation() {
-        return new Promise((resolve) => {
-            this.http.get('../rest/commitInformation').pipe(
-                tap((data: any) => {
-                    this.commitHash = data.hash;
-                    resolve(true);
-                }),
-                catchError((err: any) => {
-                    this.notificationService.handleErrors(err);
-                    return of(false);
-                })
-            ).subscribe();
-        });
-    }
-
     mailServerOffline() {
         this.notificationService.error(this.translate.instant('lang.mailServerOffline'));
     }

src/frontend/app/service/functions.service.ts

+import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Router } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { LatinisePipe } from 'ngx-pipes';
+import { of } from 'rxjs';
+import { catchError, tap } from 'rxjs/operators';
+import { NotificationService } from './notification.service';
 
 @Injectable({
     providedIn: 'root'
@@ -11,7 +15,9 @@ export class FunctionsService {
     constructor(
         public translate: TranslateService,
         private latinisePipe: LatinisePipe,
-        private router: Router
+        private router: Router,
+        private http: HttpClient,
+        private notify: NotificationService,
     ) { }
 
     empty(value: any) {
@@ -176,4 +182,22 @@ export class FunctionsService {
         };
         return mapMonths[id];
     }
+
+    getPictureById(id: string) {
+        return new Promise((resolve) => {
+            this.http.get(`assets/${id}.png`, { responseType: 'blob' }).pipe(
+                tap((response: any) => {
+                    const reader = new FileReader();
+                    reader.readAsDataURL(response);
+                    reader.onloadend = () => {
+                        resolve(reader.result as any);
+                    };
+                }),
+                catchError((err: any) => {
+                    this.notify.handleErrors(err);
+                    return of(false);
+                })
+            ).subscribe();
+        });
+    }
 }

src/frontend/app/sidebar/sidebar.component.html

@@ -16,7 +16,7 @@
             <ion-button *ngIf="!isAdminRoute() && authService.user.administrativePrivileges.length > 0" (click)="openAdmin()" [title]="'lang.administration' | translate">
                 <ion-icon slot="icon-only" name="settings-outline"></ion-icon>
             </ion-button>
-            <ion-button *ngIf="isAdminRoute()" (click)="openHome()" [title]="'lang.homePage' | translate">
+            <ion-button *ngIf="isAdminRoute() || authService.user.administrativePrivileges.length === 0" (click)="openHome()" [title]="'lang.homePage' | translate">
                 <ion-icon slot="icon-only" name="home"></ion-icon>
             </ion-button>
         </ion-buttons>

src/frontend/core/global.scss

@@ -85,6 +85,11 @@ input:read-only {
     --height: 65%;
 }
 
+.aboutUsCss {
+    --width: 1000px;
+    --height: 800px;
+}
+
 ion-icon {
     pointer-events: none;
 }