Merge branch 'visibility-page' into 'dev'

Visibility page

See merge request framasoft/framadate/funky-framadate-front!16

src/app/app.component.html

@@ -7,6 +7,8 @@
 
     </a>
     <div id="translate_example">
+        <img src="assets/img/icone-langue.svg" alt="location icon">
+        <img src="assets/img/icone-menu.svg" alt="menu icon">
         <div class="lang-choices">
             <button class="btn btn-info" (click)="switchLanguage('en')">en</button>
             <button class="btn btn-info" (click)="switchLanguage('fr')">fr</button>

src/app/app.module.ts

@@ -1,5 +1,5 @@
 import {BrowserModule} from '@angular/platform-browser';
-import {LOCALE_ID, NgModule} from '@angular/core';
+import {NgModule} from '@angular/core';
 
 import {AppRoutingModule} from './app-routing.module';
 import {AppComponent} from './app.component';
@@ -19,7 +19,6 @@ import {PicturesComponent} from './pages/pictures/pictures.component';
 import {AnswersComponent} from './pages/answers/answers.component';
 import {EndConfirmationComponent} from './pages/end-confirmation/end-confirmation.component';
 import {CreateOrRetrieveComponent} from './pages/create-or-retrieve/create-or-retrieve.component';
-import {CalendarComponent} from './calendar/calendar.component';
 import localeFr from '@angular/common/locales/fr';
 import localeEn from '@angular/common/locales/en';
 import {VotingSummaryComponent} from './pages/voting-summary/voting-summary.component';
@@ -29,7 +28,7 @@ import {PasswordComponent} from './pages/password/password.component';
 import {HomeComponent} from './pages/home/home.component';
 import {VoteChoiceComponent} from './vote-choice/vote-choice.component';
 import {HttpClient, HttpClientModule} from '@angular/common/http';
-import { MarkdownModule } from 'ngx-markdown';
+import {MarkdownModule} from 'ngx-markdown';
 import {
     MissingTranslationHandler,
     MissingTranslationHandlerParams,
@@ -38,9 +37,10 @@ import {
     TranslateService
 } from '@ngx-translate/core';
 import {TranslateHttpLoader} from '@ngx-translate/http-loader';
-import { PollGraphicComponent } from './poll-graphic/poll-graphic.component';
+import {PollGraphicComponent} from './poll-graphic/poll-graphic.component';
 
-import { AdminComponent } from './pages/admin/admin.component';
+import {AdminComponent} from './pages/admin/admin.component';
+import {SelectorComponent} from './ui/selector/selector.component';
 
 export class MyMissingTranslationHandler implements MissingTranslationHandler {
     handle(params: MissingTranslationHandlerParams) {
@@ -70,7 +70,6 @@ export function HttpLoaderFactory(http: HttpClient) {
         AnswersComponent,
         EndConfirmationComponent,
         CreateOrRetrieveComponent,
-        CalendarComponent,
         VotingSummaryComponent,
         VotingGraphComponent,
         VotingChoiceComponent,
@@ -79,6 +78,7 @@ export function HttpLoaderFactory(http: HttpClient) {
         PollGraphicComponent,
         VoteChoiceComponent,
         AdminComponent,
+        SelectorComponent,
 
     ],
     imports: [

src/app/calendar/calendar.component.html

@@ -1 +0,0 @@
-<p>calendar works!</p>

src/app/calendar/calendar.component.html.save

@@ -1 +0,0 @@
-

src/app/calendar/calendar.component.ts

@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'framadate-calendar',
-  templateUrl: './calendar.component.html',
-  styleUrls: ['./calendar.component.scss']
-})
-export class CalendarComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}

src/app/config/PollConfig.ts

@@ -27,31 +27,10 @@ export const defaultDates = [
         timeList: [{literal: 'matin'}, {literal: 'midi'}, {literal: 'soir'}]
     }
 ];
-
+export const defaultAnswers = [{
-/**
- * configuration of the poll, add new fields at will
- */
-export class PollConfig {
-    step = 0;
-    stepMax = 3;
-    pollType = 'classic';
-    title = '';
-    description = '';
-    myName = '';
-
-    // date specific poll
-    allowSeveralHours = 'false';
-    // access
-    visibility = 'link_only'; // visible to anyone with the link:
-    password = '';
-    whoCanChangeAnswers = 'everybody';// everybody, self, nobody (= just admin)
-    dateList: DateOption[] = defaultDates; // sets of days as strings, config to set identical time for days in a special days poll
-    timeList: DateOption[] = timeOfDay; // ranges of time expressed as strings
-    answers: any = [{
     id: 0,
     text: 'réponse de démo 1'
-    },
+},
-
     {
         id: 1,
         text: 'réponse 2'
@@ -61,5 +40,34 @@ export class PollConfig {
         text: 'la réponse D'
     }];
 
+/**
+ * configuration of the poll, add new fields at will
+ */
+export class PollConfig {
+    expiracyDateDefaultInDays = 60;
+    step = 0;
+    stepMax = 3;
+    pollType = 'classic';// classic or date
+    title = 'titre';
+    description = 'ma description';
+    myName = 'mon pseudo';
+
+    // date specific poll, we have the choice to setup different hours (timeList) for all possible dates (dateList), or use the same hours for all dates
+    allowSeveralHours = 'false';
+    // access
+    visibility = 'link_only'; // visible to anyone with the link:
+    voteChoices = 'only_yes'; // possible answers to a vote choice: only "yes", "yes, maybe, no"
+    expirationDate = ''; // expiracy date
+    passwordAccess = 0;
+    password = '';
+    customUrl = '';
+    canModifyAnswers = 1;// everybody, self, nobody (= just admin)
+    whoModifiesAnswers = "self";// everybody, self, nobody (= just admin)
+    whoCanChangeAnswers = 'everybody';// everybody, self, nobody (= just admin)
+    dateList: DateOption[] = defaultDates; // sets of days as strings, config to set identical time for days in a special days poll
+    timeList: DateOption[] = timeOfDay; // ranges of time expressed as strings
+
+    answers: any = defaultAnswers;
+
 
 }

src/app/pages/admin/admin.component.html

@@ -1,75 +1,100 @@
 <form>
-<h1>Nom du sondage</h1>
+    <h1>Nom du sondage</h1>
-<!--Infos-->
+    <!--Infos-->
-<h2>Informations du sondage</h2>
+    <h2>Informations du sondage</h2>
-<label for="title">Le titre du sondage est</label>
+    <label for="title">Le titre du sondage est</label>
-<input type="text" name="title">
+    <input type="text" name="title">
-<label for="desc">et sa description :</label>
+    <label for="desc">et sa description :</label>
-<textarea name="desc"> </textarea>
+    <textarea name="desc"> </textarea>
-<label for="name">Je peux aussi préciser mon nom si je le souhaite :</label>
+    <label for="name">Je peux aussi préciser mon nom si je le souhaite :</label>
-<input type="text" name="name">
+    <input type="text" name="name">
-<!--Params-->
+    <!--Params-->
-<h2>Paramètres</h2>
+    <h2>Paramètres</h2>
-<h3>Visibilité des réponses</h3>
+    <h3>Visibilité des réponses</h3>
-<section class="row">
+    <section class="row">
-<label for="answer-visible">Je veux que</label>
+        <label for="answer-visible">Je veux que</label>
-<select name="answer-visible">
+        <select name="answer-visible">
-<option value="all" selected>tout le monde</option>
+            <option value="all" selected>tout le monde</option>
-<option value="per">seulement moi</option>
+            <option value="per">seulement moi</option>
-</select>
+        </select>
-<label for="answer-visible">puisse voir les réponses au sondage</label>
+        <label for="answer-visible">puisse voir les réponses au sondage</label>
-</section>
+    </section>
-<h3>Votes</h3>
+    <h3>Votes</h3>
-<section class="row">
+    <section>
-<label for="vote-date">Les personnes sondées pourront voter jusqu'au</label>
+        <label for="vote-date">Les personnes sondées pourront voter jusqu'au</label>
-<input type="date" name="vote-date">
+        <input type="date" name="vote-date">
-</section>
+    </section>
-<section class="row">
+    <section>
-<label for="alter-vote">Elles</label>
+        <label for="alter-vote">Elles</label>
-<select name="alter-vote">
+        <select name="alter-vote">
-<option value="yes" selected>auront</option>
+            <option value="yes" selected>auront</option>
-<option value="no">n'auront pas</option>
+            <option value="no">n'auront pas</option>
-</select>
+        </select>
-<label for="type-vote">la possibilité de modifier</label>
+        <label for="type-vote">la possibilité de modifier</label>
-<select name="type-vote">
+        <select name="type-vote">
-<option value="solo" selected>leur vote</option>
+            <option value="solo" selected>leur vote</option>
-<option value="all">tout les votes</option>
+            <option value="all">tout les votes</option>
-</select>
+        </select>
-</section>
+    </section>
+
+    <label for="del-vote">Pour repartir à zéro, je peux tous les supprimer :</label>
+    <input class="btn btn--alert btn--outline" type="submit" name="del-vote" value="Supprimer tous les votes">
+    <h3>Commentaires</h3>
+    <label for="del-com">Si je le souhaite,je peux supprimer l'ensemble des commentaires</label>
+    <input class="btn btn--alert btn--outline" type="submit" name="del-com" value="Supprimer tous les commentaires">
+    <h3>Archivage</h3>
+    <section class="row">
+        <label for="arch">Ce sondage ne sera plus éditable à partir du</label>
+        <input type="date" name="arch">
+    </section>
+    <h3>Accés au sondage</h3>
+    <section class="row">
+        <label for="password">Je</label>
+        <select name="password">
+            <option value="yes" selected>n'ai pas besoin</option>
+            <option value="no">voudrais</option>
+        </select>
+        <label for="alter-vote">qu'il soit protégé par un mot de passe</label>
+    </section>
+    <h3>Tout supprimer</h3>
+    <label for="del">Dans le cas où vous voudriez tout supprimer, ce bouton est fait pour vous :</label>
+    <input class="btn btn--alert" type="submit" name="del" value="Supprimer le sondage">
+    <h2>Liens d'accès au sondage</h2>
+    <h3>Coté administrateur·ice</h3>
+    <label for="copy-link-admin">Pour accéder au sondage et à tous ses paramètres :
+        https://framadate.org/urladmindusondage</label>
+    <input class="btn btn--mini" type="submit" name="copy-link-admin" value="Copier le lien">
+    <a href="#" class="next">Voir le sondage coté administrateur·ice</a>
+    <h3>Côté sondé·es</h3>
+    <label for="copy-link">Pour accéder au sondage et à tous ses paramètres :
+        https://framadate.org/urladmindusondage</label>
+    <input class="btn btn--mini" type="submit" name="copy-link" value="Copier le lien">
+    <a href="#" class="next">Voir le sondage</a>
+    <h3>Recevoir les liens par mail</h3>
+    <label for="mail">Pour être sur de retrouver ces liens, nous pouvons vous les envoyer sur votre mail :</label>
+    <input type="email" name="mail">
+    <input class="btn btn--mini" type="submit" name="send-mail" value="Envoyer les liens du sondage">
+
+    <section class="deletion">
+        {{"admin.deletion"|translate}}
+        {{"admin.deletion_desc"|translate}}
+        {{"admin.deletion_btn"|translate}}
+
+    </section>
+    <section class="links">
+        {{"admin.link"|translate}}
+        {{"admin.link_admin"|translate}}
+        {{"admin.link_admin_desc"|translate}}
+        {{"admin.link_admin_btn"|translate}}
+        {{"admin.copy_link"|translate}}
+
+        {{"admin.polled_people"|translate}}
+        {{"admin.polled_people_desc"|translate}}
+        {{"admin.polled_people_btn"|translate}}
+        {{"admin.email_links"|translate}}
+        {{"admin.email_links_desc"|translate}}
+        {{"admin.email_links_key"|translate}}
+        {{"admin.email_links_btn"|translate}}
+    </section>
 
-<label for="del-vote">Pour repartir à zéro, je peux tous les supprimer :</label>
-<input class="btn btn--alert btn--outline" type="submit" name="del-vote" value="Supprimer tous les votes">
-<h3>Commentaires</h3>
-<label for="del-com">Si je le souhaite,je peux supprimer l'ensemble des commentaires</label>
-<input class="btn btn--alert btn--outline" type="submit" name="del-com" value="Supprimer tous les commentaires">
-<h3>Archivage</h3>
-<section class="row">
-<label for="arch">Ce sondage ne sera plus éditable à partir du</label>
-<input type="date" name="arch">
-</section>
-<h3>Accés au sondage</h3>
-<section class="row">
-<label for="password">Je</label>
-<select name="password">
-<option value="yes" selected>n'ai pas besoin</option>
-<option value="no">voudrais</option>
-</select>
-<label for="alter-vote">qu'il soit protégé par un mot de passe</label>
-</section>
-<h3>Tout supprimer</h3>
-<label for="del">Dans le cas où vous voudriez tout supprimer, ce bouton est fait pour vous :</label>
-<input class="btn btn--alert" type="submit" name="del" value="Supprimer le sondage">
-<h2>Liens d'accès au sondage</h2>
-<h3>Coté administrateur·ice</h3>
-<label for="copy-link-admin">Pour accéder au sondage et à tous ses paramètres : https://framadate.org/urladmindusondage</label>
-<input class="btn btn--mini" type="submit" name="copy-link-admin" value="Copier le lien">
-<a href="#" class="next">Voir le sondage coté administrateur·ice</a>
-<h3>Côté sondé·es</h3>
-<label for="copy-link">Pour accéder au sondage et à tous ses paramètres : https://framadate.org/urladmindusondage</label>
-<input class="btn btn--mini" type="submit" name="copy-link" value="Copier le lien">
-<a href="#" class="next">Voir le sondage</a>
-<h3>Recevoir les liens par mail</h3>
-<label for="mail">Pour être sur de retrouver ces liens, nous pouvons vous les envoyer sur votre mail :</label>
-<input type="email" name="mail">
-<input class="btn btn--mini" type="submit" name="send-mail" value="Envoyer les liens du sondage">
 </form>

src/app/pages/answers/answers.component.html

@@ -14,9 +14,11 @@
                 type="text"
                 class="answer"
                 [(ngModel)]="answer.text"
+                (keyup.enter)="addAnswer()"
+                (keyup)="navigateOrDelete($event,i)"
                 placeholder="réponse"
             >
-            <button (click)="config.answers.splice(i,1)">X</button>
+            <button class="btn btn--alert" (click)="config.answers.splice(i,1)">X</button>
         </li>
     </ol>
 

src/app/pages/answers/answers.component.ts

@@ -1,4 +1,4 @@
-import {ChangeDetectorRef, Component, Inject, OnInit} from '@angular/core';
+import {AfterViewInit, ChangeDetectorRef, Component, Inject, OnInit} from '@angular/core';
 import {BaseComponent} from '../base-page/base.component';
 import {ConfigService} from '../../config.service';
 
@@ -9,7 +9,7 @@ import {DOCUMENT} from '@angular/common';
     templateUrl: './answers.component.html',
     styleUrls: ['./answers.component.scss']
 })
-export class AnswersComponent extends BaseComponent implements OnInit {
+export class AnswersComponent extends BaseComponent implements OnInit, AfterViewInit {
 
     private answerList = [];
 
@@ -24,6 +24,10 @@ export class AnswersComponent extends BaseComponent implements OnInit {
     ngOnInit() {
     }
 
+    ngAfterViewInit() {
+        this.focusOnAnswer(0)
+    }
+
     trackFunction(index: number, item: any): number {
         return item.id;
     }
@@ -35,19 +39,30 @@ export class AnswersComponent extends BaseComponent implements OnInit {
                 text: ''
             });
         this.cd.detectChanges(); // to refresh the view before focusing on the new input
+        this.focusOnAnswer(this.config.answers.length - 1)
+    }
+
+    focusOnAnswer(i) {
         const AnswersDomToFocus = this.document.querySelectorAll('.answers .answer');
-        const dom = AnswersDomToFocus[AnswersDomToFocus.length - 1];
+        const dom = AnswersDomToFocus[i];
         if (dom.focus) {
             dom.focus();
         }
+        if (dom.select) {
+            dom.select();
+        }
     }
 
-    // add a new answer on the press of ENTER in an input
+    navigateOrDelete(event: KeyboardEvent, i) {
-    addWhenEnterKey(event) {
         console.log('event', event);
-        if (event.keyCode === 13) {
+        if (event.ctrlKey && event.key == "d") {
-            this.addAnswer();
+            this.config.answers.splice(i, 1)
+        }
+        if (event.key == "ArrowUp" && i > 0) {
+            this.focusOnAnswer(i - 1);
+        }
+        if (event.key == "ArrowDown" && i < this.config.answers.length) {
+            this.focusOnAnswer(i + 1);
         }
-        return;
     }
 }

src/app/pages/kind/kind.component.scss

@@ -5,9 +5,10 @@ section {
         border-bottom: 6px solid #000;
     }
 
-  & + & {
+    + section {
-      margin-top: 3rem;
+        margin: 0 !important;
     }
+
 }
 
 article {

src/app/pages/resume/resume.component.html

@@ -1,10 +1,31 @@
-<h1 i18n>
+<h1>
-	Résumé avant validation
+    Récapitulatif
 </h1>
+<h2 class="hero-title">
+    {{config.title}}
+</h2>
+<div class="creation">
+    créé par
+    {{config.myName}}
+</div>
+<div class="description">
+    <p>
+        {{config.description}}
+    </p>
+</div>
 <section>
-    <div markdown *ngFor="let questions of config.answers">
+    <ul>
-        {{questions.id+1}}. {{questions.text}}
+        <li markdown *ngFor="let questions of config.answers">
-    </div>
+            {{questions.id + 1}}. {{questions.text}}
+        </li>
+    </ul>
     <button [routerLink]="'/step/answers'" class="btn btn-info">Retour</button>
 </section>
 <button [routerLink]="'/step/end'" class="btn btn--primary" i18n="@@confirm">C'est parfait!</button>
+
+<div class="back">
+    <a [routerLink]="'/step/visibility'"
+       class="btn btn--back">
+        Retour
+    </a>
+</div>

src/app/pages/visibility/visibility.component.html

@@ -1,14 +1,158 @@
 <h1 i18n>
+    {{"visibility.top_txt"|translate}}
+</h1>
+<section class="answers">
+    <h2>
         {{"visibility.title"|translate}}
-</h1>
+    </h2>
-<h1 i18n>
+    <span>
-	{{"visibility.votes"|translate}}
+    {{"visibility.visibility_want"|translate}}
-</h1>
+    </span>
-<h1 i18n>
+    <select
-	{{"visibility.archiving"|translate}}
+        name="visible_people"
-</h1>
+        id="visible_people"
+        [(ngModel)]="config.visibility"
+    >
+        <option value="link_only">
+            {{"visibility.visibility_link"|translate}}
+        </option>
+        <option value="only_me">
+            {{"visibility.visibility_nobody"|translate}}
+        </option>
+    </select>
+    <span>
+    {{"visibility.visibility_see"|translate}}
+    </span>
 
-<h1 i18n>
+</section>
+
+<section class="possible_votes">
+    <h2>
+        {{"visibility.votes"|translate}}
+    </h2>
+    <label for="votes">
+        {{"visibility.votes_possible"|translate}}
+    </label>
+    <select
+        name="votes"
+        id="votes"
+        [(ngModel)]="config.voteChoices"
+    >
+        <option value="only_yes">
+            {{"visibility.votes_possible_single"|translate}}
+        </option>
+        <option value="normal">
+            {{"visibility.votes_possible_normal"|translate}}
+        </option>
+        <option value="full">
+            {{"visibility.votes_possible_full"|translate}}
+        </option>
+    </select>
+</section>
+<section class="expiracy">
+    <label for="expirationDate">
+        {{"visibility.archiving"|translate}}
+    </label>
+
+    <input type="date"
+           id="expirationDate"
+           [(ngModel)]="config.expirationDate">
+    <div class="modification">
+        <label for="modificationAbility">
+            {{"visibility.archiving_start"|translate}}
+        </label>
+        <select
+            name="modificationAbility"
+            id="modificationAbility"
+            [(ngModel)]="config.canModifyAnswers">
+            <option value="1">
+                {{"visibility.archiving_can"|translate}}
+            </option>
+            <option value="0">
+                {{"visibility.archiving_can_not"|translate}}
+            </option>
+        </select>
+        <label for="modificationScope">
+            {{"visibility.archiving_end"|translate}}
+        </label>
+
+        <select
+            name="modificationScope"
+            id="modificationScope"
+            [(ngModel)]="config.whoModifiesAnswers"
+            [disabled]="!config.canModifyAnswers">
+            <option value="self">
+                {{"visibility.modfiy_their"|translate}}
+            </option>
+            <option value="everybody">
+                {{"visibility.modfiy_everyone"|translate}}
+            </option>
+        </select>
+
+    </div>
+
+
+</section>
+<section class="access">
+    <h2>
         {{"visibility.access"|translate}}
-</h1>
+    </h2>
-<a [routerLink]="'/step/end'" class="btn btn--primary" i18n="@@confirm">C'est parfait!</a>
+    <label for="url">
+        {{"visibility.access_url"|translate}}
+        <br>
+        {{"visibility.access_url_key"|translate}}
+    </label>
+    <br>
+    <input type="text"
+           class="input-lg"
+           name="url"
+           id="url"
+           [(ngModel)]="config.customUrl">
+
+    <sub class="instructions">
+        {{"visibility.access_instructions"|translate}}
+    </sub>
+    <br>
+    <label for="passwordAccess">
+        {{"visibility.access_want"|translate}}
+    </label>
+    <select name="passwordAccess" id="passwordAccess" [(ngModel)]="config.passwordAccess">
+        <option value="0">  {{"visibility.access_want_no"|translate}}</option>
+        <option value="1">  {{"visibility.access_want_yes"|translate}}</option>
+    </select>
+
+    <label for="password">
+        {{"visibility.access_protect"|translate}}
+    </label>
+
+    <div class="enablepassword" *ngIf="config.passwordAccess">
+
+        <input type="password"
+               name="password"
+               id="password"
+               min="8"
+               *ngIf="!showCustomPassword"
+               [(ngModel)]="config.password">
+        <input type="text"
+               name="password_visible"
+               id="password_visible"
+               min="8"
+               *ngIf="showCustomPassword"
+               [(ngModel)]="config.password">
+        <button class="btn btn--default" (click)="showCustomPassword = !showCustomPassword">
+            {{"visibility.see_pass"|translate}}
+        </button>
+    </div>
+</section>
+
+<a [routerLink]="'/step/end'"
+   class="btn btn-link btn--primary">
+    {{"visibility.validate_btn"|translate}}
+</a>
+<div class="back">
+
+    <a [routerLink]="'/step/answers'"
+       class="btn btn--back">
+        Retour
+    </a>
+</div>

src/app/pages/visibility/visibility.component.ts

@@ -8,12 +8,36 @@ import {ConfigService} from '../../config.service';
     styleUrls: ['./visibility.component.scss']
 })
 export class VisibilityComponent extends BaseComponent implements OnInit {
+    showCustomPassword = false;
 
     constructor(public config: ConfigService) {
         super(config);
     }
 
     ngOnInit() {
+        this.config.customUrl = this.makeUuid();
+        this.config.expirationDate = (this.addDaysToDate(this.config.expiracyDateDefaultInDays, new Date())).toISOString().substring(0, 10);
     }
 
+    /**
+     * generate unique id to have a default url for future poll
+     */
+    makeUuid() {
+        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+            var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
+            return v.toString(16);
+        });
+    }
+
+    /**
+     * add some days to a date, to compute intervals
+     * @param days
+     * @param date
+     */
+    addDaysToDate(days: number, date: Date) {
+        date = new Date(date.valueOf());
+        date.setDate(date.getDate() + days);
+        return date;
+    };
+
 }

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

@@ -26,6 +26,9 @@
     <a [routerLink]="'/graphic/toto'" i18n>
         Graphique
     </a>
+    <a [routerLink]="'/step/admin'" i18n>
+        Administration
+    </a>
     <a [routerLink]="'/home'" i18n>
         Accueil
     </a>

src/app/ui/selector/selector.component.html

@@ -0,0 +1,9 @@
+<select
+    class="custom-selector"
+    name="{{selectorConfig.name}}"
+    id="{{selectorConfig.id}}"
+    [(ngModel)]="selectorConfig.selectorNgModel">
+    <option value="{{item.value}}" selected *ngFor="let item of selectorConfig.listItems">
+        {{item.label}}
+    </option>
+</select>

src/app/ui/selector/selector.component.spec.ts

@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { CalendarComponent } from './calendar.component';
+import { SelectorComponent } from './selector.component';
 
-describe('CalendarComponent', () => {
+describe('SelectorComponent', () => {
-  let component: CalendarComponent;
+  let component: SelectorComponent;
-  let fixture: ComponentFixture<CalendarComponent>;
+  let fixture: ComponentFixture<SelectorComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ CalendarComponent ]
+      declarations: [ SelectorComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(CalendarComponent);
+    fixture = TestBed.createComponent(SelectorComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/ui/selector/selector.component.ts

@@ -0,0 +1,30 @@
+import {Component, Input, OnInit} from '@angular/core';
+
+interface Item {
+    label: string,
+    value: string
+}
+
+interface SelectorConfig {
+    label: string,
+    name: string,
+    id: string,
+    selectorNgModel: any,
+    listItems: Item[]
+}
+
+@Component({
+    selector: 'framadate-selector',
+    templateUrl: './selector.component.html',
+    styleUrls: ['./selector.component.scss']
+})
+export class SelectorComponent implements OnInit {
+    @Input() selectorConfig: SelectorConfig;
+
+    constructor() {
+    }
+
+    ngOnInit() {
+    }
+
+}

src/assets/i18n/en.json

@@ -63,14 +63,55 @@
         "links_mail": "Receive links by email"
     },
     "visibility": {
+        "top_txt": "A few settings...",
         "title": "Visibility of answers",
+        "visibility_want": "Je veux que",
+        "visibility_link": "Ceux avec le lien",
+        "visibility_nobody": "personne ne",
+        "visibility_see": "puisse voir les réponses au sondage.",
         "votes": "Votes",
-        "archiving": "Archiving",
+        "votes_possible": "Les réponses possibles seront :",
-        "access": "Access to the pool"
+        "votes_possible_single": "Uniquement « oui »",
+        "votes_possible_normal": "« oui » ou « peut-être »",
+        "votes_possible_full": "« oui » ou « peut-être » ou « non »",
+        "archiving": "Les personnes sondées pourront voter jusqu’au ",
+        "archiving_start": "Elles",
+        "archiving_can": "auront",
+        "archiving_can_not": "n'auront pas",
+        "archiving_end": "la possibilité de  modifier",
+        "modfiy_their": "leur vote",
+        "modfiy_everyone": "tous les votes",
+        "access": "Accès au sondage",
+        "access_url": "Les votants pourront  y accéder via cette adresse :",
+        "access_url_key": "URL",
+        "see_pass": "voir",
+        "access_instructions": "peut contenir des lettres, chiffres et des tirets",
+        "access_want": "Je",
+        "access_want_yes": "souhaite",
+        "access_want_no": "n'ai pas besoin",
+        "access_protect": "qu’il soit protégé par un mot de passe.",
+        "validate_btn": "Créer ce sondage !"
     },
-    "pollGraphic":{
+    "admin": {
-        "choiceColorblind":"I am",
+        "deletion": "Tout supprimer",
-        "choiceNotColorblind":"I am not",
+        "deletion_desc": "Dans le cas où vous voudriez tout supprimer, ce bouton est fait pour vous :",
-        "colorblindText":"colorblind."
+        "deletion_btn": "Supprimer le sondage",
+        "link": "Liens d’accès au sondage",
+        "link_admin": "Coté administrateur·ice",
+        "link_admin_desc": "Pour accéder au sondage et à tous ses paramètres :",
+        "link_admin_btn": "Voir le sondage coté administrateur·ice",
+        "copy_link": "Copier le lien",
+        "polled_people": "Côté sondé·es",
+        "polled_people_desc": "Pour accéder au sondage et à tous ses paramètres : https://framadate.org/urladmindusondage",
+        "polled_people_btn": "Voir le sondage",
+        "email_links": "Recevoir les liens par mail",
+        "email_links_desc": "Pour être sur de retrouver ces liens, nous pouvons vous les envoyer sur votre mail",
+        "email_links_key": "mail",
+        "email_links_btn": "Envoyer les liens du sondage"
+    },
+    "pollGraphic": {
+        "choiceColorblind": "I am",
+        "choiceNotColorblind": "I am not",
+        "colorblindText": "colorblind."
     }
 }

src/assets/i18n/fr.json

@@ -65,14 +65,55 @@
         "links_mail": "Recevoir les liens par e-mail"
     },
     "visibility": {
+        "top_txt": "Un peu de paramétrage…",
         "title": "Visibilité des réponses",
+        "visibility_want": "Je veux que",
+        "visibility_link": "Tout le monde",
+        "visibility_nobody": "seulement moi",
+        "visibility_see": "puisse voir les réponses au sondage.",
         "votes": "Votes",
-        "archiving": "Archivage",
+        "votes_possible": "Les réponses possibles seront :",
-        "access": "Accès au sondage"
+        "votes_possible_single": "Uniquement « oui »",
+        "votes_possible_normal": "« oui » ou « peut-être »",
+        "votes_possible_full": "« oui » ou « peut-être » ou « non »",
+        "archiving": "Les personnes sondées pourront voter jusqu’au ",
+        "archiving_start": "Elles",
+        "archiving_can": "auront",
+        "archiving_can_not": "n'auront pas",
+        "archiving_end": "la possibilité de  modifier",
+        "modfiy_their": "leur vote",
+        "modfiy_everyone": "tous les votes",
+        "access": "Accès au sondage",
+        "access_url": "Les votants pourront  y accéder via cette adresse :",
+        "access_url_key": "URL",
+        "see_pass": "voir",
+        "access_instructions": "peut contenir des lettres, chiffres et des tirets",
+        "access_want": "Je",
+        "access_want_yes": "souhaite",
+        "access_want_no": "n'ai pas besoin",
+        "access_protect": "qu’il soit protégé par un mot de passe.",
+        "validate_btn": "Créer ce sondage !"
     },
-    "pollGraphic":{
+    "admin": {
-        "choiceColorblind":"Je suis",
+        "deletion": "Tout supprimer",
-        "choiceNotColorblind":"Je ne suis pas",
+        "deletion_desc": "Dans le cas où vous voudriez tout supprimer, ce bouton est fait pour vous :",
-        "colorblindText":"daltonien."
+        "deletion_btn": "Supprimer le sondage",
+        "link": "Liens d’accès au sondage",
+        "link_admin": "Coté administrateur·ice",
+        "link_admin_desc": "Pour accéder au sondage et à tous ses paramètres :",
+        "link_admin_btn": "Voir le sondage coté administrateur·ice",
+        "copy_link": "Copier le lien",
+        "polled_people": "Côté sondé·es",
+        "polled_people_desc": "Pour accéder au sondage et à tous ses paramètres : https://framadate.org/urladmindusondage",
+        "polled_people_btn": "Voir le sondage",
+        "email_links": "Recevoir les liens par mail",
+        "email_links_desc": "Pour être sur de retrouver ces liens, nous pouvons vous les envoyer sur votre mail",
+        "email_links_key": "mail",
+        "email_links_btn": "Envoyer les liens du sondage"
+    },
+    "pollGraphic": {
+        "choiceColorblind": "Je suis",
+        "choiceNotColorblind": "Je ne suis pas",
+        "colorblindText": "daltonien."
     }
 }

src/assets/img/icone-langue.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 23 23">
+    <path fill="#000" fill-rule="nonzero" d="M10.628 14.218c-.024.086-.605-.197-.759-.259a15.58 15.58 0 0 1-1.031-.602c-.178-.123-.854-.701-.937-.738a22.327 22.327 0 0 1-1.588 2.226c-.214.258-.854 1.095-1.245 1.353-.06.037-.403.074-.45.05.19-.148.735-.85.972-1.132.296-.357 1.707-2.399 1.944-2.866.249-.468.996-2.017 1.031-2.165-.118-.012-1.055.32-1.304.406-.237.074-.889.234-.936.27-.048.05-.012.197-.036.246-.024.05-.237.16-.367.185-.119.037-.392.05-.558 0-.154-.037-.296-.197-.332-.258 0 0-.047-.074-.059-.283.142-.05.38-.062.64-.136.261-.073.901-.27 1.245-.393.344-.123 1.008-.381 1.21-.43.213-.038.746-.407 1.03-.505.285-.098.487-.221.498-.16.012.062 0 .332-.011.406-.012.062-.581 1.218-.664 1.402-.048.099-.38.75-.913 1.612.19.086.593.258.759.344a73.66 73.66 0 0 0 1.683.738c.071.025.201.59.178.689zM8.198 8.24c.035.21-.024.295-.048.344-.118.234-.415.394-.593.468a2.098 2.098 0 0 1-.71.147c-.107-.012-.32-.049-.582-.32-.142-.16-.249-.59-.201-.54.047.049.391.098.545.06.154-.036.522-.147.688-.196.178-.061.533-.16.652-.172.118 0 .213.05.249.209zm8.274 1.587l.747 2.792-1.648-.517.901-2.275zm-13.135 9.84l8.227-2.854V4.12L3.337 6.985v12.682zm14.712-3.9l1.209.382-2.146-8.081-1.185-.382-2.56 6.593 1.208.382.534-1.353 2.501.8.439 1.66zM12.086 3.936l6.792 2.263V1.524l-6.792 2.41zm3.687 16.273l1.873.16-.64 1.968-.475-.812c-.96.64-2.145 1.132-3.272 1.328-.343.074-.735.148-1.078.148h-.996c-1.257 0-3.545-.775-4.54-1.525-.071-.062-.095-.11-.095-.197 0-.135.095-.234.213-.234.107 0 .664.357.818.43 1.067.554 2.56 1.059 3.758 1.059 1.482 0 2.49-.197 3.84-.8.392-.184.736-.418 1.103-.627l-.51-.898zm5.31-13.272v13.272c-9.163-3.026-9.175-3.026-9.175-3.026-.19.086-8.69 3.063-8.808 3.063a.229.229 0 0 1-.213-.16c0-.012-.012-.025-.012-.037V6.788c.012-.036.024-.098.047-.122.072-.087.166-.111.238-.136.035-.012.758-.258 1.766-.615V1.192l6.615 2.435c.083-.024 7.456-2.669 7.563-2.669.13 0 .237.099.237.259v5.141l1.742.578z"/>
+</svg>

src/assets/img/icone-menu.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="26" height="18" viewBox="0 0 26 18">
+    <path fill="#000" fill-rule="nonzero" d="M23.267 2H2.733C2.328 2 2 1.552 2 1s.328-1 .733-1h20.534c.405 0 .733.448.733 1s-.328 1-.733 1zm0 14c.405 0 .733.448.733 1s-.328 1-.733 1H2.733C2.328 18 2 17.552 2 17s.328-1 .733-1h20.534zm0-8c.405 0 .733.448.733 1s-.328 1-.733 1H2.733C2.328 10 2 9.552 2 9s.328-1 .733-1h20.534z"/>
+</svg>

src/assets/scss/atoms/_buttons.scss

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 
-@mixin btnTheme ($color) {
+@mixin btnTheme($color) {
     background-color: $color;
     color: $white;
     &.btn--outline {
@@ -12,6 +12,7 @@
     &:hover,
     &:active {
         background-color: rgba($color, .8);
+
         &.btn--outline {
             background-color: rgba($color, .2);
         }
@@ -43,9 +44,16 @@
         display: block;
         min-width: 100%;
     }
-    &--mini{
+
+    &--mini {
         background-color: $mini-button-color;
 
     }
 
+    &--link {
+        min-width: 219.3px;
+        margin: 0 auto;
+        display: block;
+    }
+
 }

src/assets/scss/atoms/_forms.scss

@@ -1,9 +1,24 @@
 @charset "UTF-8";
-input[type="date"]::after{
+
-  content:"au format JJ/MM/AAAA";
+.input-lg {
+    display: block;
+    width: 100%;
+}
+
+select {
+    margin-right: 1ch;
+}
+
+input {
+    margin-right: 1ch;
+
+    &[type="date"]::after {
+        content: "au format JJ/MM/AAAA";
         display: inline-block;
         position: relative;
+    }
 }
+
 input,
 select,
 textarea {
@@ -16,8 +31,8 @@ textarea {
 input,
 select {
     display: inline-block;
-  margin-bottom:10px;
+    margin-bottom: 10px;
-  margin-left:5px;
+    margin-left: 5px;
 }
 
 textarea {
@@ -28,15 +43,15 @@ textarea {
 select,
 option {
     // delete default display
-  -webkit-appearance : none;
+    -webkit-appearance: none;
-  -moz-appearance : none;
+    -moz-appearance: none;
 
     background: none;
     border-radius: 0;
 
     background-color: transparent;
     background-image: url("./assets/img/fleche_bas.svg");
-  padding-right:1.5rem;
+    padding-right: 1.5rem;
 
     background-repeat: no-repeat;
     background-size: 9px 8px;

src/assets/scss/atoms/_headings.scss

@@ -6,10 +6,11 @@ h2 {
 }
 
 h1 {
-  font-size: 2rem;
+    font-size: 2.5rem;
     font-weight: 600;
 }
-h1::after{
+
+h1::after {
     background-color: $primary_color;
-  height:2px;
+    height: 2px;
 }

src/assets/scss/atoms/_section.scss

@@ -1,7 +1 @@
 @charset "UTF-8";
-
-section {
-    & + & {
-        margin-top: 6rem;
-    }
-}

src/assets/scss/useful_classes.scss

@@ -4,3 +4,7 @@
     display: flex;
     justify-content: flex-end;
 }
+
+.pull-right {
+    float: right;
+}