🎨 style on current page from the route data, and texts in the confirm page, step end

src/app/app.component.html

@@ -1,19 +1,41 @@
 <header style="text-align:center">
-    <a [routerLink]="'home'" class="home_link" aria-roledescription="home">
+    <a
+        [routerLink]="'home'"
+        class="home_link"
+        aria-roledescription="home"
+    >
         <h1>
             <span class="logo_first">Frama</span>
             <span class="logo_second">date</span>
         </h1>
-        <div class="legend">proposé par <span class="legend_first">Frama</span><span class="legend_second">soft</span></div>
+        <div class="legend">proposé par
+            <span class="legend_first">Frama</span>
+            <span class="legend_second">soft</span>
+        </div>
     </a>
     <div id="translate_example">
         <div class="wrapper">
-            <img src="assets/img/icone-langue.svg" alt="location icon" class="lang_icon">
-            <img src="assets/img/icone-menu.svg" alt="menu icon" class="menu_icon">
-            <select name="language" class="Language-" (change)="switchLanguage($event.target.value)">
-                <option value="d" default class="select_language">{{"Language" | translate}}</option>
-                <option value="en" >English</option>
-                <option value="fr" >Français</option>
+            <img
+                src="assets/img/icone-langue.svg"
+                alt="location icon"
+                class="lang_icon"
+            > <img
+            src="assets/img/icone-menu.svg"
+            alt="menu icon"
+            class="menu_icon"
+        >
+            <select
+                name="language"
+                class="Language-"
+                (change)="switchLanguage($event.target.value)"
+            >
+                <option
+                    value="d"
+                    default
+                    class="select_language"
+                >{{"Language" | translate}}</option>
+                <option value="en">English</option>
+                <option value="fr">Français</option>
             </select>
             <span class="menu_label">Menu</span>
         </div>
@@ -24,7 +46,7 @@
     </div>
 
 </header>
-<framadate-navigation></framadate-navigation>
+<framadate-navigation [step]="step"></framadate-navigation>
 <main>
     <router-outlet></router-outlet>
 </main>

src/app/app.component.ts

@@ -1,5 +1,6 @@
 import {Component} from '@angular/core';
-import {TranslateService} from "@ngx-translate/core";
+import {TranslateService} from '@ngx-translate/core';
+import {Router} from '@angular/router';
 
 @Component({
     selector: 'app-root',
@@ -14,9 +15,26 @@ export class AppComponent {
         name: 'Arthur',
         age: 42
     };
+    private step: string;
 
-    constructor(private translate: TranslateService) {
+    constructor(private translate: TranslateService,
+                private route: Router) {
         this.translate.setDefaultLang('fr');
+        this.route.events.subscribe((event: any) => {
+
+            // console.log('event', event);
+            if (event.url) {
+
+                const tab = event.url.split('/');
+                console.log(tab);
+                if (tab && tab[2]) {
+                    this.step = tab[2];
+                } else {
+                    this.step = 'home';
+                }
+
+            }
+        });
     }
 
     switchLanguage(language: string) {

src/app/pages/end-confirmation/end-confirmation.component.html

@@ -1,6 +1,72 @@
 <h1 i18n>
-	{{"resume.title"|translate}}
+    {{"resume.title"|translate}}
 </h1>
-<h2 i18n>{{"resume.admins"|translate}}</h2>
-<h2 i18n>{{"resume.users"|translate}}</h2>
-<h2 i18n>{{"resume.links_mail"|translate}}</h2>
+<section class="admin">
+    <h2 i18n>{{"resume.admins"|translate}}</h2>
+    <p>
+
+        Votre sondage « 
+        <span class="poll-title">
+        {{config.title}} </span>
+         » a bien été créé !
+    </p>
+    <p>
+        Voici les liens d’accès au sondage, conservez-les soigneusement !
+    </p>
+
+    <p>
+        Pour accéder au sondage et à tous ses paramètres : https://framadate.org/urladmindusondage
+    </p>
+    <button
+        class="btn"
+        (click)="copyLink(adminLink)"
+    >
+        Copier le lien
+    </button>
+    <a href="{{adminLink}}">
+        Voir le sondage coté administrateur·ice
+    </a>
+    <p class="note">
+        Note : Le sondage sera supprimé 180 jours après la date de sa dernière modification.
+    </p>
+
+
+</section>
+<section class="public">
+
+    <h2 i18n>{{"resume.users"|translate}}</h2>
+    <p>
+        Pour accéder au sondage : https://framadate.org/urladmindusondage
+    </p>
+    <button
+        class="btn"
+        (click)="copyLink(publicLink)"
+    >
+        Copier le lien
+    </button>
+</section>
+<section class="mail">
+
+    <h2 i18n>{{"resume.links_mail"|translate}}</h2>
+    <p>
+        Pour être sur de retrouver ces liens, nous pouvons vous les envoyer sur votre mail
+
+        mail :
+        <input
+            type="email"
+            [(ngModel)]="mailToRecieve"
+            paceholder="email"
+        >
+    </p>
+
+    <button
+        class="btn"
+        (click)="sendToEmail()"
+    >
+        Envoyer les liens du sondage
+    </button>
+    <a href="{{publicLink}}">
+        Voir le sondage
+    </a>
+
+</section>

src/app/pages/end-confirmation/end-confirmation.component.ts

@@ -1,19 +1,30 @@
-import { Component, OnInit } from '@angular/core';
-import {BaseComponent} from "../base-page/base.component";
-import {ConfigService} from "../../config.service";
+import {Component, OnInit} from '@angular/core';
+import {BaseComponent} from '../base-page/base.component';
+import {ConfigService} from '../../config.service';
+import {HttpClient} from '@angular/common/http';
 
 @Component({
-  selector: 'framadate-end-confirmation',
-  templateUrl: './end-confirmation.component.html',
-  styleUrls: ['./end-confirmation.component.scss']
+    selector: 'framadate-end-confirmation',
+    templateUrl: './end-confirmation.component.html',
+    styleUrls: ['./end-confirmation.component.scss']
 })
 export class EndConfirmationComponent extends BaseComponent implements OnInit {
+    public adminLink = '';
+    public publicLink = '';
+    mailToRecieve = '';
 
-    constructor(public config: ConfigService) {
+    constructor(public config: ConfigService, public http: HttpClient) {
         super(config);
     }
 
     ngOnInit() {
-  }
+    }
 
+    copyLink(adminLink: any) {
+
+    }
+
+    sendToEmail() {
+
+    }
 }

src/app/ui/navigation/navigation.component.html

@@ -1,35 +1,94 @@
 <nav class="choices">
-    <a [routerLink]="'/step/creation'" i18n>
+    <a
+        [routerLink]="'home'"
+        [ngClass]="{'active': step == 'home'}"
+        i18n
+    >
+        <i class="fa fa-home"></i>
+    </a>
+    <a
+        [routerLink]="'/step/creation'"
+        [ngClass]="{'active': step == 'creation'}"
+        i18n
+    >
         Création
     </a>
-    <a [routerLink]="'/step/date'" i18n>
+    <a
+        [routerLink]="'/step/date'"
+        [ngClass]="{'active': step == 'date'}"
+        i18n
+    >
         Les Dates
     </a>
-    <a [routerLink]="'/step/answers'" i18>
+    <a
+        [routerLink]="'/step/answers'"
+        [ngClass]="{'active': step == 'answers'}"
+        i18
+    >
         Réponses
     </a>
-    <a [routerLink]="'/step/visibility'" i18n>
+    <a
+        [routerLink]="'/step/visibility'"
+        [ngClass]="{'active': step == 'visibility'}"
+        i18n
+    >
         Visibilité
     </a>
-    <a [routerLink]="'/step/base'" i18n>
+    <a
+        [routerLink]="'/step/base'"
+        [ngClass]="{'active': step == 'base'}"
+        i18n
+    >
         Base
     </a>
-    <a [routerLink]="'/step/pictures'" i18n>
+    <a
+        [routerLink]="'/step/pictures'"
+        [ngClass]="{'active': step == 'pictures'}"
+        i18n
+    >
         Images
     </a>
-    <a [routerLink]="'/step/resume'" i18n>
+    <a
+        [routerLink]="'/step/resume'"
+        [ngClass]="{'active': step == 'resume'}"
+        i18n
+    >
         Résumé
     </a>
-    <a [routerLink]="'/step/kind'" i18n>
+    <a
+        [routerLink]="'/step/end'"
+        [ngClass]="{'active': step == 'end'}"
+        i18n
+    >
+        Confirmation
+    </a>
+    <a
+        [routerLink]="'/step/kind'"
+        [ngClass]="{'active': step == 'kind'}"
+        i18n
+    >
         Page démo
     </a>
-    <a [routerLink]="'/graphic/toto'" i18n>
+    <a
+        [routerLink]="'/graphic/toto'"
+        [ngClass]="{'active': step == 'graphic'}"
+        i18n
+    >
         Graphique
     </a>
-    <a [routerLink]="'/step/admin'" i18n>
+    <a
+        [routerLink]="'/step/admin'"
+        i18n
+    >
         Administration
     </a>
-    <a [routerLink]="'/home'" i18n>
+    <a
+        [routerLink]="'/home'"
+        i18n
+    >
         Accueil
     </a>
 </nav>
+<div class="well">
+    step: {{step}}
+</div>

src/app/ui/navigation/navigation.component.scss

@@ -1,27 +1,33 @@
 @charset "UTF-8";
 
 nav {
-  text-align: center;
-  margin-bottom: 3.2rem;
-  padding-top: 1.6rem;
-  padding-bottom: 1.6rem;
-  border-top: 2px solid #ffd52c;
-  border-bottom: 2px solid #ffd52c;
+    text-align: center;
+    margin-bottom: 3.2rem;
+    padding-top: 1.6rem;
+    padding-bottom: 1.6rem;
+    border-top: 2px solid #ffd52c;
+    border-bottom: 2px solid #ffd52c;
 
-  a {
-    &::before {
-      display: inline-block;
-      position: relative;
-      width: auto;
-      background: none;
-    }
-    &::after {
-      display: none;
-    }
+    a {
+        &::before {
+            display: inline-block;
+            position: relative;
+            width: auto;
+            background: none;
+        }
 
-    &:not(:first-of-type)::before {
-      content: ' | ';
-      
+        &::after {
+            display: none;
+        }
+
+        &:not(:first-of-type)::before {
+            content: ' | ';
+
+        }
+
+        &.active {
+            color: white;
+            background: black;
+        }
     }
-  }
 }

src/app/ui/navigation/navigation.component.ts

@@ -1,6 +1,7 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
 import {BaseComponent} from '../../pages/base-page/base.component';
 import {ConfigService} from '../../config.service';
+import {Router} from '@angular/router';
 
 @Component({
     selector: 'framadate-navigation',
@@ -9,11 +10,16 @@ import {ConfigService} from '../../config.service';
 })
 export class NavigationComponent extends BaseComponent implements OnInit {
 
-    constructor(public config: ConfigService) {
+    @Input() public step: 'home';
+
+    constructor(public config: ConfigService,
+                public route: Router) {
         super(config);
+
     }
 
     ngOnInit() {
+
     }
 
     nextPage() {