From 03f7c49c519e2db062de3d64a1cfdd8c1f109e05 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Wed, 16 Dec 2020 17:21:01 +0100
Subject: [PATCH 01/40] create success page and route

---
 .../administration/administration.module.ts   |  3 ++-
 .../administration/form/form.component.ts     | 10 +++++++-
 .../success/success.component.html            | 16 +++++++++++++
 .../success/success.component.scss            |  0
 .../success/success.component.spec.ts         | 24 +++++++++++++++++++
 .../success/success.component.ts              | 12 ++++++++++
 src/app/routes-framadate.ts                   |  5 ++++
 src/proxy.conf.json                           |  2 +-
 src/styles/themes/_base.scss                  |  1 +
 src/styles/themes/_light.scss                 |  4 +++-
 10 files changed, 73 insertions(+), 4 deletions(-)
 create mode 100644 src/app/features/administration/success/success.component.html
 create mode 100644 src/app/features/administration/success/success.component.scss
 create mode 100644 src/app/features/administration/success/success.component.spec.ts
 create mode 100644 src/app/features/administration/success/success.component.ts

diff --git a/src/app/features/administration/administration.module.ts b/src/app/features/administration/administration.module.ts
index 051ead96..20ca163f 100644
--- a/src/app/features/administration/administration.module.ts
+++ b/src/app/features/administration/administration.module.ts
@@ -10,9 +10,10 @@ import { StepperComponent } from './stepper/stepper.component';
 import { NamingComponent } from './naming/naming.component';
 import { FormComponent } from './form/form.component';
 import { DateValueAccessorModule } from 'angular-date-value-accessor';
+import { SuccessComponent } from './success/success.component';
 
 @NgModule({
-	declarations: [AdministrationComponent, StepperComponent, NamingComponent, FormComponent],
+	declarations: [AdministrationComponent, StepperComponent, NamingComponent, FormComponent, SuccessComponent],
 	imports: [
 		AdministrationRoutingModule,
 		CommonModule,
diff --git a/src/app/features/administration/form/form.component.ts b/src/app/features/administration/form/form.component.ts
index 308d390c..5d1c976b 100644
--- a/src/app/features/administration/form/form.component.ts
+++ b/src/app/features/administration/form/form.component.ts
@@ -9,6 +9,7 @@ import { DateUtilities } from '../../old-stuff/config/DateUtilities';
 import { DOCUMENT } from '@angular/common';
 import { DateChoice, otherDefaultDates } from '../../old-stuff/config/defaultConfigs';
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+import { Router } from '@angular/router';
 
 @Component({
 	selector: 'app-admin-form',
@@ -39,6 +40,7 @@ export class FormComponent implements OnInit {
 		private pollService: PollService,
 		public dateUtilities: DateUtilities,
 		private apiService: ApiService,
+		private router: Router,
 		@Inject(DOCUMENT) private document: any
 	) {}
 	drop(event: CdkDragDrop<string[]>) {
@@ -60,7 +62,13 @@ export class FormComponent implements OnInit {
 		console.log('this.form', this.form);
 		const newpoll = this.pollService.newPollFromForm(this.form);
 		console.log('newpoll', newpoll);
-		this.apiService.createPoll(newpoll);
+		let self = this;
+
+		this.apiService.createPoll(newpoll).then((resp) => {
+			console.log('resp', resp);
+			self.router.navigate(['success']);
+		});
+		// this.router
 		// if (this.form.valid) {
 		// 	console.log('Le sondage est correctement rempli, prêt à enregistrer.');
 		// 	const newpoll = this.pollService.newPollFromForm(this.form);
diff --git a/src/app/features/administration/success/success.component.html b/src/app/features/administration/success/success.component.html
new file mode 100644
index 00000000..cb3015cf
--- /dev/null
+++ b/src/app/features/administration/success/success.component.html
@@ -0,0 +1,16 @@
+<section class="hero is-medium is-success">
+	<div class="hero-body">
+		<div class="container">
+			<h1 class="title">
+				Création de sondage réussie
+			</h1>
+			<h2 class="subtitle">
+				Bravo! partagez le lien de votre sondage. Un récapitulatif a été envoyé à votre adresse email.
+			</h2>
+		</div>
+	</div>
+</section>
+<br />
+<section class="text-center">
+	<img src="assets/img/undraw_group_selfie_ijc6.svg" alt="image succès" />
+</section>
diff --git a/src/app/features/administration/success/success.component.scss b/src/app/features/administration/success/success.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/features/administration/success/success.component.spec.ts b/src/app/features/administration/success/success.component.spec.ts
new file mode 100644
index 00000000..1e4f6a41
--- /dev/null
+++ b/src/app/features/administration/success/success.component.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SuccessComponent } from './success.component';
+
+describe('SuccessComponent', () => {
+	let component: SuccessComponent;
+	let fixture: ComponentFixture<SuccessComponent>;
+
+	beforeEach(async(() => {
+		TestBed.configureTestingModule({
+			declarations: [SuccessComponent],
+		}).compileComponents();
+	}));
+
+	beforeEach(() => {
+		fixture = TestBed.createComponent(SuccessComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});
diff --git a/src/app/features/administration/success/success.component.ts b/src/app/features/administration/success/success.component.ts
new file mode 100644
index 00000000..13e175db
--- /dev/null
+++ b/src/app/features/administration/success/success.component.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+	selector: 'app-success',
+	templateUrl: './success.component.html',
+	styleUrls: ['./success.component.scss'],
+})
+export class SuccessComponent implements OnInit {
+	constructor() {}
+
+	ngOnInit(): void {}
+}
diff --git a/src/app/routes-framadate.ts b/src/app/routes-framadate.ts
index 671b46c1..0129c932 100644
--- a/src/app/routes-framadate.ts
+++ b/src/app/routes-framadate.ts
@@ -2,6 +2,7 @@ import { Routes } from '@angular/router';
 import { HomeComponent } from './core/components/home/home.component';
 import { PollService } from './core/services/poll.service';
 import { PageNotFoundComponent } from './shared/components/page-not-found/page-not-found.component';
+import { SuccessComponent } from './features/administration/success/success.component';
 
 export const routes: Routes = [
 	{ path: '', component: HomeComponent },
@@ -35,6 +36,10 @@ export const routes: Routes = [
 		path: 'oldstuff',
 		loadChildren: () => import('./features/old-stuff/old-stuff.module').then((m) => m.OldStuffModule),
 	},
+	{
+		path: 'success',
+		component: SuccessComponent,
+	},
 	{ path: 'page-not-found', component: PageNotFoundComponent },
 	{ path: '**', redirectTo: 'page-not-found', pathMatch: 'full' },
 ];
diff --git a/src/proxy.conf.json b/src/proxy.conf.json
index 709cdb6c..5b9f3ff5 100644
--- a/src/proxy.conf.json
+++ b/src/proxy.conf.json
@@ -1,6 +1,6 @@
 {
 	"/api/*": {
-		"target": "http://localhost:8000",
+		"target": "http://localhost:3001",
 		"secure": false,
 		"logLevel": "debug"
 	}
diff --git a/src/styles/themes/_base.scss b/src/styles/themes/_base.scss
index 4d7250bc..5e2a778e 100644
--- a/src/styles/themes/_base.scss
+++ b/src/styles/themes/_base.scss
@@ -2,6 +2,7 @@
 	background: $primary;
 
 	main {
+		padding: 0;
 		margin-bottom: 2em;
 		padding-bottom: 5em;
 		padding-top: 1em;
diff --git a/src/styles/themes/_light.scss b/src/styles/themes/_light.scss
index eab5078e..7b12ab78 100644
--- a/src/styles/themes/_light.scss
+++ b/src/styles/themes/_light.scss
@@ -11,7 +11,9 @@
 		}
 
 		main {
-			.container {
+			padding-top: 0;
+
+			> .container {
 				background: #fff;
 				padding-bottom: 10em;
 			}

From d4e5c614a9397fdd7feaa0dc6da1d1160ccd4c52 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Thu, 4 Feb 2021 09:23:15 +0100
Subject: [PATCH 02/40] spacing buttons

---
 .../administration/form/form.component.html   | 40 +++++++++++--------
 .../administration/form/form.component.scss   |  3 ++
 src/styles/dev-utilities/_helpers.scss        |  4 ++
 3 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/src/app/features/administration/form/form.component.html b/src/app/features/administration/form/form.component.html
index 922e9258..1754e4d5 100644
--- a/src/app/features/administration/form/form.component.html
+++ b/src/app/features/administration/form/form.component.html
@@ -1,24 +1,32 @@
-<div class="admin-form">
+<div class="admin-form padded">
 	<h1>
 		{{ 'creation.title' | translate }}
 	</h1>
 
-	<img src="assets/img/undraw_Moving_twwf.svg" alt="image WIP" />
-	<button class="btn btn--warning" (click)="askInitFormDefault()">
-		<i class="fa fa-refresh"></i>
-		Tout réinitialiser
-	</button>
-	<button class="btn is-success" (click)="createPoll()">
-		<i class="fa fa-save"></i>
-		Enregistrer le sondage
-	</button>
-	<button class="btn is-default" (click)="automaticSlug()">
-		<i class="fa fa-save"></i>
-		Slug automatique
-	</button>
+	<div class="columns">
+		<div class="column">
+			<img src="assets/img/undraw_Moving_twwf.svg" alt="image WIP" />
+		</div>
+		<div class="column">
+			<button class="btn btn--warning" (click)="askInitFormDefault()">
+				<i class="fa fa-refresh"></i>
+				Tout réinitialiser
+			</button>
+			<br />
+			<button class="btn is-success" (click)="createPoll()">
+				<i class="fa fa-save"></i>
+				Enregistrer le sondage
+			</button>
+			<br />
+			<button class="btn is-default" (click)="automaticSlug()">
+				<i class="fa fa-refresh"></i>
+				Slug automatique
+			</button>
 
-	<div class="well">
-		{{ poll.slug }}
+			<div class="well">
+				{{ poll.slug }}
+			</div>
+		</div>
 	</div>
 	<div class="has-background-danger" *ngIf="!form.valid">
 		le formulaire est invalide
diff --git a/src/app/features/administration/form/form.component.scss b/src/app/features/administration/form/form.component.scss
index d5ce7a9c..3814f6aa 100644
--- a/src/app/features/administration/form/form.component.scss
+++ b/src/app/features/administration/form/form.component.scss
@@ -83,4 +83,7 @@
 		border-left: $success 3px solid;
 		padding-left: 1em;
 	}
+	.btn {
+		margin: 0.5em;
+	}
 }
diff --git a/src/styles/dev-utilities/_helpers.scss b/src/styles/dev-utilities/_helpers.scss
index 9d5784b0..754805da 100644
--- a/src/styles/dev-utilities/_helpers.scss
+++ b/src/styles/dev-utilities/_helpers.scss
@@ -22,3 +22,7 @@
 .hidden {
 	display: none;
 }
+
+.padded {
+	padding: 1em;
+}

From 84b69a1366dacb521d4295c99eb630f636429ac4 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Thu, 4 Feb 2021 16:14:07 +0100
Subject: [PATCH 03/40] split of creation components

---
 src/app/core/services/api.service.ts          |   2 +-
 .../administration/administration.module.ts   |  18 +-
 .../advanced-config.component.html            |  89 ++++
 .../advanced-config.component.scss            |   0
 .../advanced-config.component.spec.ts         |  24 +
 .../advanced-config.component.ts              |  14 +
 .../base-config/base-config.component.html    |  89 ++++
 .../base-config/base-config.component.scss    |   0
 .../base-config/base-config.component.spec.ts |  24 +
 .../form/base-config/base-config.component.ts |  96 ++++
 .../date-select/date-select.component.html    | 139 ++++++
 .../date-select/date-select.component.scss    |   0
 .../date-select/date-select.component.spec.ts |  24 +
 .../form/date-select/date-select.component.ts | 241 ++++++++++
 .../administration/form/form.component.html   | 432 +-----------------
 .../administration/form/form.component.ts     | 245 +---------
 .../kind-select/kind-select.component.html    |  27 ++
 .../kind-select/kind-select.component.scss    |   0
 .../kind-select/kind-select.component.spec.ts |  24 +
 .../form/kind-select/kind-select.component.ts |  19 +
 .../text-select/text-select.component.html    |  55 +++
 .../text-select/text-select.component.scss    |   0
 .../text-select/text-select.component.spec.ts |  24 +
 .../form/text-select/text-select.component.ts |  12 +
 24 files changed, 945 insertions(+), 653 deletions(-)
 create mode 100644 src/app/features/administration/form/advanced-config/advanced-config.component.html
 create mode 100644 src/app/features/administration/form/advanced-config/advanced-config.component.scss
 create mode 100644 src/app/features/administration/form/advanced-config/advanced-config.component.spec.ts
 create mode 100644 src/app/features/administration/form/advanced-config/advanced-config.component.ts
 create mode 100644 src/app/features/administration/form/base-config/base-config.component.html
 create mode 100644 src/app/features/administration/form/base-config/base-config.component.scss
 create mode 100644 src/app/features/administration/form/base-config/base-config.component.spec.ts
 create mode 100644 src/app/features/administration/form/base-config/base-config.component.ts
 create mode 100644 src/app/features/administration/form/date-select/date-select.component.html
 create mode 100644 src/app/features/administration/form/date-select/date-select.component.scss
 create mode 100644 src/app/features/administration/form/date-select/date-select.component.spec.ts
 create mode 100644 src/app/features/administration/form/date-select/date-select.component.ts
 create mode 100644 src/app/features/administration/form/kind-select/kind-select.component.html
 create mode 100644 src/app/features/administration/form/kind-select/kind-select.component.scss
 create mode 100644 src/app/features/administration/form/kind-select/kind-select.component.spec.ts
 create mode 100644 src/app/features/administration/form/kind-select/kind-select.component.ts
 create mode 100644 src/app/features/administration/form/text-select/text-select.component.html
 create mode 100644 src/app/features/administration/form/text-select/text-select.component.scss
 create mode 100644 src/app/features/administration/form/text-select/text-select.component.spec.ts
 create mode 100644 src/app/features/administration/form/text-select/text-select.component.ts

diff --git a/src/app/core/services/api.service.ts b/src/app/core/services/api.service.ts
index 12b14318..3bf4faeb 100644
--- a/src/app/core/services/api.service.ts
+++ b/src/app/core/services/api.service.ts
@@ -49,7 +49,7 @@ export class ApiService {
 
 	public async createPoll(poll: Poll): Promise<Subscription> {
 		// this.loader.setStatus(true);
-		console.log('config', poll);
+		console.log('createPoll config', poll);
 		// const baseHref = this.useDevLocalServer ? 'http://localhost:8000' : apiBaseHref;
 		// return this.http
 		// 	.post(`${baseHref}${currentApiRoutes['api_new_poll']}`, poll, ApiService.makeHeaders())
diff --git a/src/app/features/administration/administration.module.ts b/src/app/features/administration/administration.module.ts
index 20ca163f..bdd7c09c 100644
--- a/src/app/features/administration/administration.module.ts
+++ b/src/app/features/administration/administration.module.ts
@@ -11,9 +11,25 @@ import { NamingComponent } from './naming/naming.component';
 import { FormComponent } from './form/form.component';
 import { DateValueAccessorModule } from 'angular-date-value-accessor';
 import { SuccessComponent } from './success/success.component';
+import { DateSelectComponent } from './form/date-select/date-select.component';
+import { TextSelectComponent } from './form/text-select/text-select.component';
+import { KindSelectComponent } from './form/kind-select/kind-select.component';
+import { BaseConfigComponent } from './form/base-config/base-config.component';
+import { AdvancedConfigComponent } from './form/advanced-config/advanced-config.component';
 
 @NgModule({
-	declarations: [AdministrationComponent, StepperComponent, NamingComponent, FormComponent, SuccessComponent],
+	declarations: [
+		AdministrationComponent,
+		StepperComponent,
+		NamingComponent,
+		FormComponent,
+		SuccessComponent,
+		DateSelectComponent,
+		TextSelectComponent,
+		KindSelectComponent,
+		BaseConfigComponent,
+		AdvancedConfigComponent,
+	],
 	imports: [
 		AdministrationRoutingModule,
 		CommonModule,
diff --git a/src/app/features/administration/form/advanced-config/advanced-config.component.html b/src/app/features/administration/form/advanced-config/advanced-config.component.html
new file mode 100644
index 00000000..a9ff8af1
--- /dev/null
+++ b/src/app/features/administration/form/advanced-config/advanced-config.component.html
@@ -0,0 +1,89 @@
+<fieldset class="complete well">
+	<h2>{{ 'creation.advanced' | translate }}</h2>
+	<label for="descr">Description (optionnel)</label>
+	<textarea
+		#description
+		matInput
+		id="descr"
+		placeholder="Description"
+		formControlName="description"
+		required
+	></textarea>
+	<button
+		mat-button
+		*ngIf="description.value"
+		matSuffix
+		mat-icon-button
+		aria-label="Clear"
+		(click)="description.value = ''"
+	>
+		<i class="fa fa-close"></i>
+	</button>
+
+	<br />
+
+	<label for="slug"
+		>Url pour les participants
+
+		<i class="fa fa-close"></i>
+	</label>
+	<br />
+	<span
+		>{{ urlPrefix }}
+		<strong>
+			{{ form.controls.slug.value }}
+		</strong>
+	</span>
+	<app-copy-text [textToCopy]="form.controls.slug.value"></app-copy-text>
+
+	<button
+		mat-button
+		*ngIf="form.controls.slug.value"
+		matSuffix
+		mat-icon-button
+		aria-label="Clear"
+		(click)="slug.value = ''"
+	></button>
+	<input #slug matInput id="slug" placeholder="Url" formControlName="slug" required />
+	<br />
+	<div appearance="outline" class="is-not-flex">
+		<mat-label>Nombre de jours avant expiration</mat-label>
+		<input
+			#expiracy
+			id="expiracy"
+			matInput
+			type="number"
+			placeholder="Nombre de jours avant expiration"
+			formControlName="expiracyNumberOfDays"
+			required
+		/>
+		<button
+			mat-button
+			*ngIf="expiracy.value"
+			matSuffix
+			mat-icon-button
+			aria-label="Clear"
+			(click)="expiracy.value = ''"
+		>
+			<i class="fa fa-close"></i>
+		</button>
+	</div>
+	<mat-checkbox class="is-not-flex" formControlName="areResultsPublic">
+		Les participants pourront consulter les résultats
+	</mat-checkbox>
+	<mat-checkbox class="is-not-flex" formControlName="isAboutDate">
+		Les choix possibles concerneront des dates
+	</mat-checkbox>
+	<mat-checkbox class="is-not-flex" formControlName="isProtectedByPassword">
+		Le sondage sera protégé par un mot de passe
+	</mat-checkbox>
+	<mat-checkbox class="is-not-flex" formControlName="isOwnerNotifiedByEmailOnNewVote">
+		Vous recevrez un mail à chaque nouvelle participation
+	</mat-checkbox>
+	<mat-checkbox class="is-not-flex" formControlName="isOwnerNotifiedByEmailOnNewComment">
+		Vous recevrez un mail à chaque nouveau commentaire
+	</mat-checkbox>
+	<mat-checkbox class="is-not-flex" formControlName="isMaybeAnswerAvailable">
+		La réponse « peut-être » sera disponible
+	</mat-checkbox>
+</fieldset>
diff --git a/src/app/features/administration/form/advanced-config/advanced-config.component.scss b/src/app/features/administration/form/advanced-config/advanced-config.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/features/administration/form/advanced-config/advanced-config.component.spec.ts b/src/app/features/administration/form/advanced-config/advanced-config.component.spec.ts
new file mode 100644
index 00000000..5407c267
--- /dev/null
+++ b/src/app/features/administration/form/advanced-config/advanced-config.component.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AdvancedConfigComponent } from './advanced-config.component';
+
+describe('AdvancedConfigComponent', () => {
+	let component: AdvancedConfigComponent;
+	let fixture: ComponentFixture<AdvancedConfigComponent>;
+
+	beforeEach(async(() => {
+		TestBed.configureTestingModule({
+			declarations: [AdvancedConfigComponent],
+		}).compileComponents();
+	}));
+
+	beforeEach(() => {
+		fixture = TestBed.createComponent(AdvancedConfigComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});
diff --git a/src/app/features/administration/form/advanced-config/advanced-config.component.ts b/src/app/features/administration/form/advanced-config/advanced-config.component.ts
new file mode 100644
index 00000000..dcef8c78
--- /dev/null
+++ b/src/app/features/administration/form/advanced-config/advanced-config.component.ts
@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+	selector: 'app-advanced-config',
+	templateUrl: './advanced-config.component.html',
+	styleUrls: ['./advanced-config.component.scss'],
+})
+export class AdvancedConfigComponent implements OnInit {
+	public urlPrefix: string = window.location.origin + '/participation/';
+
+	constructor() {}
+
+	ngOnInit(): void {}
+}
diff --git a/src/app/features/administration/form/base-config/base-config.component.html b/src/app/features/administration/form/base-config/base-config.component.html
new file mode 100644
index 00000000..e815bc46
--- /dev/null
+++ b/src/app/features/administration/form/base-config/base-config.component.html
@@ -0,0 +1,89 @@
+<form [formGroup]="form">
+	<div class="columns">
+		<span>
+			{{ 'creation.choose_title' | translate }}
+		</span>
+		<label class="hidden" for="title">Titre</label>
+		<input
+			#title
+			matInput
+			[placeholder]="'creation.choose_title_placeholder' | translate"
+			formControlName="title"
+			id="title"
+			autofocus="autofocus"
+			(change)="updateSlug()"
+			required
+		/>
+		<button mat-button *ngIf="title.value" matSuffix mat-icon-button aria-label="Clear" (click)="title.value = ''">
+			<i class="fa fa-close"></i>
+		</button>
+
+		<div>
+			<label class="" for="creatorEmail">
+				<span>
+					{{ 'creation.name' | translate }}
+				</span>
+			</label>
+			<label class="hidden" for="creatorPseudo">
+				<span>
+					{{ 'creation.email' | translate }}
+				</span>
+			</label>
+			<input #title matInput placeholder="pseudo" formControlName="creatorPseudo" id="creatorPseudo" required />
+			<input
+				#title
+				matInput
+				placeholder="mon-email@example.com"
+				formControlName="creatorEmail"
+				id="creatorEmail"
+				required
+			/>
+		</div>
+
+		<hr />
+		<div>
+			<h2>
+				{{ 'choices.title' | translate }}
+			</h2>
+			{{ 'dates.add' | translate }}
+			<p>
+				<i>
+					{{ 'choices.helper' | translate }}
+				</i>
+			</p>
+			{{ 'choices.answer_preset_1' | translate }}
+			{{ 'choices.add' | translate }}
+			{{ 'choices.continue' | translate }}
+		</div>
+		<div class="column">
+			<img src="assets/img/undraw_Moving_twwf.svg" alt="image WIP" />
+		</div>
+		<div class="column">
+			<button class="btn btn--warning" (click)="askInitFormDefault()">
+				<i class="fa fa-refresh"></i>
+				Tout réinitialiser
+			</button>
+			<br />
+			<button class="btn is-success" (click)="createPoll()">
+				<i class="fa fa-save"></i>
+				Enregistrer le sondage
+			</button>
+			<br />
+			<button class="btn is-default" (click)="automaticSlug()">
+				<i class="fa fa-refresh"></i>
+				Slug automatique
+			</button>
+
+			<div class="columns">
+				<div class="column">
+					Slug:
+				</div>
+				<div class="column">
+					<div class="well">
+						{{ poll.slug }}
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</form>
diff --git a/src/app/features/administration/form/base-config/base-config.component.scss b/src/app/features/administration/form/base-config/base-config.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/features/administration/form/base-config/base-config.component.spec.ts b/src/app/features/administration/form/base-config/base-config.component.spec.ts
new file mode 100644
index 00000000..4acc1c58
--- /dev/null
+++ b/src/app/features/administration/form/base-config/base-config.component.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BaseConfigComponent } from './base-config.component';
+
+describe('BaseConfigComponent', () => {
+	let component: BaseConfigComponent;
+	let fixture: ComponentFixture<BaseConfigComponent>;
+
+	beforeEach(async(() => {
+		TestBed.configureTestingModule({
+			declarations: [BaseConfigComponent],
+		}).compileComponents();
+	}));
+
+	beforeEach(() => {
+		fixture = TestBed.createComponent(BaseConfigComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});
diff --git a/src/app/features/administration/form/base-config/base-config.component.ts b/src/app/features/administration/form/base-config/base-config.component.ts
new file mode 100644
index 00000000..20ab5e05
--- /dev/null
+++ b/src/app/features/administration/form/base-config/base-config.component.ts
@@ -0,0 +1,96 @@
+import { ChangeDetectorRef, Component, Inject, Input, OnInit } from '@angular/core';
+import { ToastService } from '../../../../core/services/toast.service';
+import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UuidService } from '../../../../core/services/uuid.service';
+import { PollService } from '../../../../core/services/poll.service';
+import { ApiService } from '../../../../core/services/api.service';
+import { Router } from '@angular/router';
+import { DOCUMENT } from '@angular/common';
+import { Poll } from '../../../../core/models/poll.model';
+
+@Component({
+	selector: 'app-base-config',
+	templateUrl: './base-config.component.html',
+	styleUrls: ['./base-config.component.scss'],
+})
+export class BaseConfigComponent implements OnInit {
+	@Input()
+	public poll?: Poll;
+	public form: FormGroup;
+
+	constructor(
+		private fb: FormBuilder,
+		private cd: ChangeDetectorRef,
+		private uuidService: UuidService,
+		private toastService: ToastService,
+		private pollService: PollService,
+		private apiService: ApiService,
+		private router: Router,
+		@Inject(DOCUMENT) private document: Document
+	) {}
+
+	ngOnInit(): void {
+		this.initFormDefault(false);
+	}
+
+	askInitFormDefault(): void {
+		this.initFormDefault(false);
+		this.toastService.display('formulaire réinitialisé');
+	}
+
+	public createPoll(): void {
+		console.log('this.form', this.form);
+		const newpoll = this.pollService.newPollFromForm(this.form);
+		console.log('newpoll', newpoll);
+		const router = this.router;
+
+		this.apiService.createPoll(newpoll).then((resp) => {
+			console.log('resp', resp);
+			router.navigate(['success']);
+		});
+		// this.router
+		// if (this.form.valid) {
+		// 	console.log('Le sondage est correctement rempli, prêt à enregistrer.');
+		// 	const newpoll = this.pollService.newPollFromForm(this.form);
+		// 	// TODO : save the poll
+		// 	this.apiService.createPoll(newpoll);
+		// } else {
+		// 	this.toastService.display('invalid form');
+		// }
+	}
+
+	initFormDefault(showDemoValues = true): void {
+		this.form = this.fb.group({
+			title: ['', [Validators.required, Validators.minLength(12)]],
+			creatorPseudo: ['', [Validators.required]],
+			creatorEmail: ['', [Validators.required]],
+			slug: [this.uuidService.getUUID(), [Validators.required]],
+			description: ['', [Validators.required]],
+			choices: new FormArray([]),
+			whoModifiesAnswers: ['', [Validators.required]],
+			whoCanChangeAnswers: ['', [Validators.required]],
+			isAboutDate: [true, [Validators.required]],
+			startDateInterval: ['', [Validators.required]],
+			endDateInterval: ['', [Validators.required]],
+			isProtectedByPassword: [false, [Validators.required]],
+			isOwnerNotifiedByEmailOnNewVote: [false, [Validators.required]],
+			isOwnerNotifiedByEmailOnNewComment: [false, [Validators.required]],
+			isMaybeAnswerAvailable: [false, [Validators.required]],
+			areResultsPublic: [true, [Validators.required]],
+			expiracyNumberOfDays: [60, [Validators.required, Validators.min(0)]],
+		});
+		console.log('this.form ', this.form);
+	}
+
+	public updateSlug(): void {
+		const newValueFormatted = 'TODO';
+		this.form.patchValue({ slug: newValueFormatted });
+	}
+
+	/**
+	 * set the poll slug from other data of the poll
+	 */
+	automaticSlug() {
+		this.form.patchValue({ slug: this.pollService.makeSlug(this.poll) });
+	}
+}
diff --git a/src/app/features/administration/form/date-select/date-select.component.html b/src/app/features/administration/form/date-select/date-select.component.html
new file mode 100644
index 00000000..a0d76865
--- /dev/null
+++ b/src/app/features/administration/form/date-select/date-select.component.html
@@ -0,0 +1,139 @@
+<div class="date-selection">
+	<!--	interval-->
+
+	<section *ngIf="showDateInterval" class="date-interval form-row">
+		<button
+			(click)="showDateInterval = !showDateInterval"
+			[ngClass]="{ active: showDateInterval }"
+			class="btn btn--primary"
+			id="toggle_interval_button"
+		>
+			<i class="fa fa-clock-o" aria-hidden="true"></i>
+			{{ 'dates.add_interval' | translate }}
+		</button>
+		<h2>{{ 'dates.add_interval' | translate }}</h2>
+		<div class="columns">
+			<div class="column">
+				{{ 'dates.interval_propose' | translate }}
+			</div>
+			<div class="column">
+				<label for="start_interval" class="hidden">start</label>
+				<input id="start_interval" (change)="countDays()" formControlName="startDateInterval" type="date" />
+			</div>
+		</div>
+		<div class="columns">
+			<div class="column">
+				{{ 'dates.interval_span' | translate }}
+			</div>
+			<div class="column">
+				<label for="end_interval" class="hidden">end</label>
+				<input id="end_interval" formControlName="endDateInterval" type="date" />
+			</div>
+		</div>
+		<button (click)="addIntervalOfDates()" class="btn btn-block btn--primary">
+			<i class="fa fa-plus" aria-hidden="true"></i>
+			{{ 'dates.interval_button' | translate }}
+			{{ intervalDays }}
+			{{ 'dates.interval_button_dates' | translate }}
+		</button>
+	</section>
+
+	<div class="dates-list">
+		<div class="title">
+			<span class="count-dates">
+				{{ timeList.length }}
+			</span>
+			<span class="count-dates-txt">
+				{{ 'dates.count_time' | translate }}
+				(pour chaque jour)
+			</span>
+		</div>
+		<div class="actions">
+			<button
+				(click)="addTime()"
+				*ngIf="'false' === allowSeveralHours"
+				class="btn btn--primary"
+				id="add_time_button"
+			>
+				<i class="fa fa-plus" aria-hidden="true"></i>
+				{{ 'dates.add_time' | translate }}
+			</button>
+			<button
+				(click)="removeAllTimes()"
+				*ngIf="'false' === allowSeveralHours"
+				class="btn btn--warning"
+				id="remove_time_button"
+			>
+				<i class="fa fa-trash" aria-hidden="true"></i>
+				Aucune plage horaire
+			</button>
+			<button
+				(click)="resetTimes()"
+				*ngIf="'false' === allowSeveralHours"
+				class="btn btn--warning"
+				id="reset_time_button"
+			>
+				<i class="fa fa-refresh" aria-hidden="true"></i>
+				réinitialiser
+			</button>
+		</div>
+
+		<div *ngIf="'false' === allowSeveralHours" class="identical-dates">
+			<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
+				<div *ngFor="let time of timeList; index as id" class="time-choice" cdkDrag>
+					<label for="timeChoices_{{ id }}">
+						<i class="fa fa-clock-o" aria-hidden="true"></i>
+					</label>
+					<input
+						[(ngModel)]="time.literal"
+						name="timeChoices_{{ id }}"
+						type="text"
+						id="timeChoices_{{ id }}"
+					/>
+					<button (click)="time.timeList.splice(id, 1)" class="btn btn-warning">
+						<i class="fa fa-times" aria-hidden="true"></i>
+					</button>
+				</div>
+			</div>
+		</div>
+		<hr />
+		<span class="count-dates title">
+			{{ dateList.length }}
+		</span>
+		<span>
+			{{ 'dates.count_dates' | translate }}
+		</span>
+		<button class="btn btn--primary" (click)="addChoice()">
+			{{ 'dates.add' | translate }}
+		</button>
+		<div *ngFor="let choice of dateList; index as id" class="date-choice">
+			{{ id }})
+			<input
+				[(ngModel)]="choice.date_object"
+				name="dateChoices_{{ id }}"
+				id="dateChoices_{{ id }}"
+				useValueAsDate
+				type="date"
+			/>
+			<button (click)="dateList.splice(id, 1)" class="btn btn-warning">
+				<i class="fa fa-times" aria-hidden="true"></i>
+			</button>
+			<button (click)="addTimeToDate(choice, id)" *ngIf="'true' === allowSeveralHours" class="btn btn--primary">
+				{{ 'dates.add_time' | translate }}
+			</button>
+			<div *ngIf="'true' === allowSeveralHours" class="several-times">
+				<div *ngFor="let timeItem of choice.timeList; index as idTime" class="time-choice">
+					<input
+						[(ngModel)]="timeItem.literal"
+						name="dateTime_{{ id }}_Choices_{{ idTime }}"
+						id="dateTime_{{ id }}_Choices_{{ idTime }}"
+						type="text"
+					/>
+					<button (click)="choice.timeList.splice(idTime, 1)" class="btn btn-warning">
+						<i class="fa fa-times" aria-hidden="true"></i>
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/src/app/features/administration/form/date-select/date-select.component.scss b/src/app/features/administration/form/date-select/date-select.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/features/administration/form/date-select/date-select.component.spec.ts b/src/app/features/administration/form/date-select/date-select.component.spec.ts
new file mode 100644
index 00000000..d5f4b90f
--- /dev/null
+++ b/src/app/features/administration/form/date-select/date-select.component.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DateSelectComponent } from './date-select.component';
+
+describe('DateSelectComponent', () => {
+	let component: DateSelectComponent;
+	let fixture: ComponentFixture<DateSelectComponent>;
+
+	beforeEach(async(() => {
+		TestBed.configureTestingModule({
+			declarations: [DateSelectComponent],
+		}).compileComponents();
+	}));
+
+	beforeEach(() => {
+		fixture = TestBed.createComponent(DateSelectComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});
diff --git a/src/app/features/administration/form/date-select/date-select.component.ts b/src/app/features/administration/form/date-select/date-select.component.ts
new file mode 100644
index 00000000..23efd1aa
--- /dev/null
+++ b/src/app/features/administration/form/date-select/date-select.component.ts
@@ -0,0 +1,241 @@
+import { ChangeDetectorRef, Component, Inject, Input, OnInit } from '@angular/core';
+import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { UuidService } from '../../../../core/services/uuid.service';
+import { ToastService } from '../../../../core/services/toast.service';
+import { PollService } from '../../../../core/services/poll.service';
+import { DateUtilities } from '../../../old-stuff/config/DateUtilities';
+import { ApiService } from '../../../../core/services/api.service';
+import { Router } from '@angular/router';
+import { DOCUMENT } from '@angular/common';
+import { DateChoice, otherDefaultDates } from '../../../old-stuff/config/defaultConfigs';
+import { Poll } from '../../../../core/models/poll.model';
+
+@Component({
+	selector: 'app-date-select',
+	templateUrl: './date-select.component.html',
+	styleUrls: ['./date-select.component.scss'],
+})
+export class DateSelectComponent implements OnInit {
+	@Input()
+	public poll?: Poll;
+	@Input()
+	public form: FormGroup;
+
+	public showDateInterval = true;
+	public allowSeveralHours = true;
+	startDateInterval: string;
+	endDateInterval: string;
+	intervalDays: any;
+	intervalDaysDefault = 7;
+	dateList: any = otherDefaultDates; // sets of days as strings, config to set identical time for days in a special days poll
+	timeList: DateChoice[] = otherDefaultDates; // ranges of time expressed as strings
+
+	constructor(
+		private fb: FormBuilder,
+		private cd: ChangeDetectorRef,
+		private uuidService: UuidService,
+		private toastService: ToastService,
+		private pollService: PollService,
+		public dateUtilities: DateUtilities,
+		private apiService: ApiService,
+		private router: Router,
+		@Inject(DOCUMENT) private document: any
+	) {}
+
+	ngOnInit(): void {
+		this.setDefaultDatesForInterval();
+	}
+
+	get choices(): FormArray {
+		return this.form.get('choices') as FormArray;
+	}
+
+	/**
+	 * default interval of dates proposed is from today to 7 days more
+	 */
+	setDefaultDatesForInterval(): void {
+		const dateCurrent = new Date();
+		const dateJson = dateCurrent.toISOString();
+		this.startDateInterval = dateJson.substring(0, 10);
+		this.endDateInterval = this.dateUtilities
+			.addDaysToDate(this.intervalDaysDefault, dateCurrent)
+			.toISOString()
+			.substring(0, 10);
+		this.form.patchValue({
+			startDateInterval: this.startDateInterval,
+			endDateInterval: this.endDateInterval,
+		});
+		this.countDays();
+	}
+
+	countDays(): void {
+		this.intervalDays = this.dateUtilities.countDays(
+			this.dateUtilities.parseInputDateToDateObject(this.startDateInterval),
+			this.dateUtilities.parseInputDateToDateObject(this.endDateInterval)
+		);
+		this.cd.detectChanges();
+	}
+
+	/**
+	 * add all the dates between the start and end dates in the interval section
+	 */
+	addIntervalOfDates(): void {
+		const newIntervalArray = this.dateUtilities.getDatesInRange(
+			this.dateUtilities.parseInputDateToDateObject(this.startDateInterval),
+			this.dateUtilities.parseInputDateToDateObject(this.endDateInterval),
+			1
+		);
+
+		const converted = [];
+		newIntervalArray.forEach((element) => {
+			converted.push({
+				literal: element.literal,
+				date_object: element.date_object,
+				timeList: [],
+			});
+		});
+		this.dateList = [...new Set(converted)];
+		// add only dates that are not already present with a Set of unique items
+		console.log('this.dateList', this.dateList);
+		this.showDateInterval = false;
+
+		this.form.patchValue({ choices: this.dateList });
+		// this.dateList.forEach(elem=>{
+		// 	const newControlGroup = this.fb.group({
+		// 		label: this.fb.control('', [Validators.required]),
+		// 		imageUrl: ['', [Validators.required]],
+		// 	});
+		//
+		// 	this.choices.push(newControlGroup);
+		// })
+
+		this.toastService.display(`les dates ont été ajoutées aux réponses possibles.`);
+	}
+
+	/**
+	 * change time spans
+	 */
+	addTime() {
+		this.timeList.push({
+			literal: '',
+			timeList: [],
+			date_object: new Date(),
+		});
+	}
+
+	removeAllTimes() {
+		this.timeList = [];
+	}
+
+	resetTimes() {
+		this.timeList = otherDefaultDates;
+	}
+
+	/**
+	 * add a time period to a specific date choice,
+	 * focus on the new input
+	 * @param config
+	 * @param id
+	 */
+	addTimeToDate(config: any, id: number) {
+		this.timeList.push({
+			literal: '',
+			timeList: [],
+			date_object: new Date(),
+		});
+		const selector = '[ng-reflect-choice_label="dateTime_' + id + '_Choices_' + (this.timeList.length - 1) + '"]';
+		this.cd.detectChanges();
+		const elem = this.document.querySelector(selector);
+		if (elem) {
+			elem.focus();
+		}
+	}
+
+	addChoice(optionalLabel = ''): void {
+		const newControlGroup = this.fb.group({
+			label: this.fb.control('', [Validators.required]),
+			imageUrl: ['', [Validators.required]],
+		});
+
+		if (optionalLabel) {
+			newControlGroup.patchValue({
+				label: optionalLabel,
+				imageUrl: 'mon url',
+			});
+		}
+		this.choices.push(newControlGroup);
+		this.cd.detectChanges();
+		console.log('this.choices.length', this.choices.length);
+
+		this.focusOnChoice(this.choices.length - 1);
+	}
+
+	focusOnChoice(index): void {
+		const selector = '#choice_label_' + index;
+		const elem = this.document.querySelector(selector);
+		if (elem) {
+			elem.focus();
+		}
+	}
+
+	deleteChoiceField(index: number): void {
+		if (this.choices.length !== 1) {
+			this.choices.removeAt(index);
+		}
+	}
+
+	reinitChoices(): void {
+		this.choices.setValue([]);
+	}
+
+	/**
+	 * handle keyboard shortcuts
+	 * @param $event
+	 * @param choice_number
+	 */
+	keyOnChoice($event: KeyboardEvent, choice_number: number): void {
+		$event.preventDefault();
+
+		console.log('this.choices.length', this.choices.length);
+		console.log('choice_number', choice_number);
+		const lastChoice = this.choices.length - 1 === choice_number;
+		// TODO handle shortcuts
+		// reset field with Ctrl + D
+		// add a field with Ctrl + N
+		// go to previous choice with arrow up
+		// go to next choice with arrow down
+		console.log('$event', $event);
+
+		if ($event.key == 'ArrowUp' && choice_number > 0) {
+			this.focusOnChoice(choice_number - 1);
+		}
+		if ($event.key == 'ArrowDown') {
+			// add a field if we are on the last choice
+			if (lastChoice) {
+				this.addChoice();
+				this.toastService.display('choix ajouté par raccourci "flèche bas"');
+			} else {
+				this.focusOnChoice(choice_number + 1);
+			}
+		}
+		if ($event.ctrlKey && $event.key == 'Backspace') {
+			this.deleteChoiceField(choice_number);
+			this.toastService.display('choix supprimé par raccourci "Ctrl + retour"');
+			this.cd.detectChanges();
+			this.focusOnChoice(Math.min(choice_number - 1, 0));
+		}
+		if ($event.ctrlKey && $event.key == 'Enter') {
+			// go to other fields
+			const elem = this.document.querySelector('#creatorEmail');
+			if (elem) {
+				elem.focus();
+			}
+		}
+	}
+
+	setDemoValues(): void {
+		this.addChoice('orange');
+		this.addChoice('raisin');
+		this.addChoice('abricot');
+	}
+}
diff --git a/src/app/features/administration/form/form.component.html b/src/app/features/administration/form/form.component.html
index 1754e4d5..63131d2c 100644
--- a/src/app/features/administration/form/form.component.html
+++ b/src/app/features/administration/form/form.component.html
@@ -2,424 +2,38 @@
 	<h1>
 		{{ 'creation.title' | translate }}
 	</h1>
-
-	<div class="columns">
-		<div class="column">
-			<img src="assets/img/undraw_Moving_twwf.svg" alt="image WIP" />
-		</div>
-		<div class="column">
-			<button class="btn btn--warning" (click)="askInitFormDefault()">
-				<i class="fa fa-refresh"></i>
-				Tout réinitialiser
-			</button>
-			<br />
-			<button class="btn is-success" (click)="createPoll()">
-				<i class="fa fa-save"></i>
-				Enregistrer le sondage
-			</button>
-			<br />
-			<button class="btn is-default" (click)="automaticSlug()">
-				<i class="fa fa-refresh"></i>
-				Slug automatique
-			</button>
-
-			<div class="well">
-				{{ poll.slug }}
-			</div>
-		</div>
-	</div>
-	<div class="has-background-danger" *ngIf="!form.valid">
-		le formulaire est invalide
-		<pre>
-
- {{ form.errors | json }}
+	<div class="validation">
+		<div class="has-background-danger" *ngIf="!form.valid">
+			le formulaire est invalide
+			<pre>
+		 {{ form.errors | json }}
 		</pre
-		>
+			>
+		</div>
 	</div>
-	<div class="dates-list">
-		<div class="title">
-			<span class="count-dates">
-				{{ timeList.length }}
-			</span>
-			<span class="count-dates-txt">
-				{{ 'dates.count_time' | translate }}
-				(pour chaque jour)
-			</span>
-		</div>
-		<div class="actions">
-			<button
-				(click)="addTime()"
-				*ngIf="'false' === allowSeveralHours"
-				class="btn btn--primary"
-				id="add_time_button"
-			>
-				<i class="fa fa-plus" aria-hidden="true"></i>
-				{{ 'dates.add_time' | translate }}
-			</button>
-			<button
-				(click)="removeAllTimes()"
-				*ngIf="'false' === allowSeveralHours"
-				class="btn btn--warning"
-				id="remove_time_button"
-			>
-				<i class="fa fa-trash" aria-hidden="true"></i>
-				Aucune plage horaire
-			</button>
-			<button
-				(click)="resetTimes()"
-				*ngIf="'false' === allowSeveralHours"
-				class="btn btn--warning"
-				id="reset_time_button"
-			>
-				<i class="fa fa-refresh" aria-hidden="true"></i>
-				réinitialiser
-			</button>
-		</div>
+	<app-base-config></app-base-config>
+	<!--	<app-kind-select></app-kind-select>-->
+
+	<!--			choix spécialement pour les dates-->
+	<!--	<app-date-select ng-if="form.kind == 'date'"></app-date-select>-->
+	<!--	<app-text-select ng-if="form.kind == 'classic'"></app-text-select>-->
+	<button class="btn is-info" (click)="advancedDisplayEnabled = !advancedDisplayEnabled">
+		<i class="fa fa-save"></i>
+		{{ 'creation.advanced' | translate }}
+	</button>
+	<!--	<app-advanced-config ng-if="advancedDisplayEnabled"></app-advanced-config>-->
 
-		<div *ngIf="'false' === allowSeveralHours" class="identical-dates">
-			<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
-				<div *ngFor="let time of timeList; index as id" class="time-choice" cdkDrag>
-					<label for="timeChoices_{{ id }}">
-						<i class="fa fa-clock-o" aria-hidden="true"></i>
-					</label>
-					<input
-						[(ngModel)]="time.literal"
-						name="timeChoices_{{ id }}"
-						type="text"
-						id="timeChoices_{{ id }}"
-					/>
-					<button (click)="time.timeList.splice(id, 1)" class="btn btn-warning">
-						<i class="fa fa-times" aria-hidden="true"></i>
-					</button>
-				</div>
-			</div>
-		</div>
-		<hr />
-		<span class="count-dates title">
-			{{ dateList.length }}
-		</span>
-		<span>
-			{{ 'dates.count_dates' | translate }}
-		</span>
-		<button class="btn btn--primary" (click)="addChoice()">
-			{{ 'dates.add' | translate }}
-		</button>
-		<div *ngFor="let choice of dateList; index as id" class="date-choice">
-			{{ id }})
-			<input
-				[(ngModel)]="choice.date_object"
-				name="dateChoices_{{ id }}"
-				id="dateChoices_{{ id }}"
-				useValueAsDate
-				type="date"
-			/>
-			<button (click)="dateList.splice(id, 1)" class="btn btn-warning">
-				<i class="fa fa-times" aria-hidden="true"></i>
-			</button>
-			<button (click)="addTimeToDate(choice, id)" *ngIf="'true' === allowSeveralHours" class="btn btn--primary">
-				{{ 'dates.add_time' | translate }}
-			</button>
-			<div *ngIf="'true' === allowSeveralHours" class="several-times">
-				<div *ngFor="let timeItem of choice.timeList; index as idTime" class="time-choice">
-					<input
-						[(ngModel)]="timeItem.literal"
-						name="dateTime_{{ id }}_Choices_{{ idTime }}"
-						id="dateTime_{{ id }}_Choices_{{ idTime }}"
-						type="text"
-					/>
-					<button (click)="choice.timeList.splice(idTime, 1)" class="btn btn-warning">
-						<i class="fa fa-times" aria-hidden="true"></i>
-					</button>
-				</div>
-			</div>
-		</div>
-	</div>
 	<hr />
 
 	<form [formGroup]="form">
-		<div class="form-field">
-			<span class="pre-selector">
-				{{ 'creation.want' | translate }}
-			</span>
-			<div class="kind-of-poll columns">
-				<div class="column">
-					<button
-						class="btn-block btn"
-						[ngClass]="{ 'is-primary': form.controls.isAboutDate.value }"
-						(click)="form.controls.isAboutDate.setValue(true)"
-					>
-						<i class="fa fa-calendar"></i>
-						{{ 'creation.kind.date' | translate }}
-					</button>
-				</div>
-				<div class="column">
-					<button
-						class="btn-block btn btn-default"
-						[ngClass]="{ 'is-primary': !form.controls.isAboutDate.value }"
-						(click)="form.controls.isAboutDate.setValue(false)"
-					>
-						<i class="fa fa-stats"></i>
-						{{ 'creation.kind.classic' | translate }}
-					</button>
-				</div>
-			</div>
-
-			<span>
-				{{ 'creation.choose_title' | translate }}
-			</span>
-			<label class="hidden" for="title">Titre</label>
-			<input
-				#title
-				matInput
-				[placeholder]="'creation.choose_title_placeholder' | translate"
-				formControlName="title"
-				id="title"
-				autofocus="autofocus"
-				(change)="updateSlug()"
-				required
-			/>
-			<button
-				mat-button
-				*ngIf="title.value"
-				matSuffix
-				mat-icon-button
-				aria-label="Clear"
-				(click)="title.value = ''"
-			>
-				<i class="fa fa-close"></i>
-			</button>
-		</div>
-
-		<fieldset class="date-kind">
-			<!--			choix spécialement pour les dates-->
-		</fieldset>
-
-		<button
-			(click)="showDateInterval = !showDateInterval"
-			[ngClass]="{ active: showDateInterval }"
-			class="btn btn--primary"
-			id="toggle_interval_button"
-		>
-			<i class="fa fa-clock-o" aria-hidden="true"></i>
-			{{ 'dates.add_interval' | translate }}
-		</button>
-		<section *ngIf="showDateInterval" class="date-interval form-row">
-			<h2>{{ 'dates.add_interval' | translate }}</h2>
-			<div class="columns">
-				<div class="column">
-					{{ 'dates.interval_propose' | translate }}
-				</div>
-				<div class="column">
-					<label for="start_interval" class="hidden">start</label>
-					<input id="start_interval" (change)="countDays()" formControlName="startDateInterval" type="date" />
-				</div>
-			</div>
-			<div class="columns">
-				<div class="column">
-					{{ 'dates.interval_span' | translate }}
-				</div>
-				<div class="column">
-					<label for="end_interval" class="hidden">end</label>
-					<input id="end_interval" formControlName="endDateInterval" type="date" />
-				</div>
-			</div>
-			<button (click)="addIntervalOfDates()" class="btn btn-block btn--primary">
-				<i class="fa fa-plus" aria-hidden="true"></i>
-				{{ 'dates.interval_button' | translate }}
-				{{ intervalDays }}
-				{{ 'dates.interval_button_dates' | translate }}
-			</button>
-			<hr />
-		</section>
-
-		<div class="form-field">
-			<h2>
-				{{ 'choices.title' | translate }}
-			</h2>
-			{{ 'dates.add' | translate }}
-			<p>
-				<i>
-					{{ 'choices.helper' | translate }}
-				</i>
-			</p>
-			{{ 'choices.answer_preset_1' | translate }}
-			{{ 'choices.add' | translate }}
-			{{ 'choices.continue' | translate }}
-			<span>
-				<span class="columns">
-					<span class="column">
-						<button class="btn is-primary" (click)="addChoice()">
-							<i class="fa fa-plus"></i>
-							Ajouter un choix
-						</button>
-					</span>
-					<span class="column pull-right">
-						<button class="btn is-warning" (click)="reinitChoices()">
-							<i class="fa fa-recycle"></i>
-							Réinitialiser
-						</button>
-					</span>
-				</span>
-
-				<p class="hint">
-					{{ 'creation.choices_hint' | translate }}
-				</p>
-				<span *ngFor="let choice of choices.controls; let i = index">
-					<div class="form-row" [formGroup]="choice">
-						<div class="columns">
-							<div class="column">
-								<button class="btn btn-warning" (click)="deleteChoiceField(i)">
-									<i class="fa fa-times"></i>
-								</button>
-								{{ i * 1 + 1 }})
-							</div>
-							<div class="column">
-								<label [for]="'choice_label_' + i" class="hidden">label</label>
-								<input
-									formControlName="label"
-									[id]="'choice_label_' + i"
-									placeholder="Enter a choice description"
-									(keyup)="keyOnChoice($event, i)"
-									(keyup.backspace)="deleteChoiceField(i)"
-								/>
-								<br />
-								<label [for]="'image_url_' + i" class="hidden">image Url</label>
-								<input
-									formControlName="imageUrl"
-									[id]="'image_url_' + i"
-									placeholder="URL de l' image"
-									(keyup)="keyOnChoice($event, i)"
-									(keyup.backspace)="deleteChoiceField(i)"
-								/>
-							</div>
-						</div>
-					</div>
-				</span>
-			</span>
-		</div>
-
-		<div>
-			<label class="" for="creatorEmail">
-				<span>
-					{{ 'creation.name' | translate }}
-				</span>
-			</label>
-			<label class="hidden" for="creatorPseudo">
-				<span>
-					{{ 'creation.email' | translate }}
-				</span>
-			</label>
-			<input #title matInput placeholder="pseudo" formControlName="creatorPseudo" id="creatorPseudo" required />
-			<input
-				#title
-				matInput
-				placeholder="mon-email@example.com"
-				formControlName="creatorEmail"
-				id="creatorEmail"
-				required
-			/>
-		</div>
-
-		<br />
-		<button class="btn is-info" (click)="advancedDisplayEnabled = !advancedDisplayEnabled">
-			<i class="fa fa-save"></i>
-			{{ 'creation.advanced' | translate }}
-		</button>
-		<hr />
-
-		<fieldset class="complete well" *ngIf="advancedDisplayEnabled">
-			<h2>{{ 'creation.advanced' | translate }}</h2>
-			<label for="descr">Description (optionnel)</label>
-			<textarea
-				#description
-				matInput
-				id="descr"
-				placeholder="Description"
-				formControlName="description"
-				required
-			></textarea>
-			<button
-				mat-button
-				*ngIf="description.value"
-				matSuffix
-				mat-icon-button
-				aria-label="Clear"
-				(click)="description.value = ''"
-			>
-				<i class="fa fa-close"></i>
-			</button>
-
-			<br />
-
-			<label for="slug"
-				>Url pour les participants
-
-				<i class="fa fa-close"></i>
-			</label>
-			<br />
-			<span
-				>{{ urlPrefix }}
-				<strong>
-					{{ form.controls.slug.value }}
-				</strong>
-			</span>
-			<app-copy-text [textToCopy]="form.controls.slug.value"></app-copy-text>
-
-			<button
-				mat-button
-				*ngIf="form.controls.slug.value"
-				matSuffix
-				mat-icon-button
-				aria-label="Clear"
-				(click)="slug.value = ''"
-			></button>
-			<input #slug matInput id="slug" placeholder="Url" formControlName="slug" required />
-			<br />
-			<div appearance="outline" class="is-not-flex">
-				<mat-label>Nombre de jours avant expiration</mat-label>
-				<input
-					#expiracy
-					id="expiracy"
-					matInput
-					type="number"
-					placeholder="Nombre de jours avant expiration"
-					formControlName="expiracyNumberOfDays"
-					required
-				/>
-				<button
-					mat-button
-					*ngIf="expiracy.value"
-					matSuffix
-					mat-icon-button
-					aria-label="Clear"
-					(click)="expiracy.value = ''"
-				>
-					<i class="fa fa-close"></i>
-				</button>
-			</div>
-			<mat-checkbox class="is-not-flex" formControlName="areResultsPublic">
-				Les participants pourront consulter les résultats
-			</mat-checkbox>
-			<mat-checkbox class="is-not-flex" formControlName="isAboutDate">
-				Les choix possibles concerneront des dates
-			</mat-checkbox>
-			<mat-checkbox class="is-not-flex" formControlName="isProtectedByPassword">
-				Le sondage sera protégé par un mot de passe
-			</mat-checkbox>
-			<mat-checkbox class="is-not-flex" formControlName="isOwnerNotifiedByEmailOnNewVote">
-				Vous recevrez un mail à chaque nouvelle participation
-			</mat-checkbox>
-			<mat-checkbox class="is-not-flex" formControlName="isOwnerNotifiedByEmailOnNewComment">
-				Vous recevrez un mail à chaque nouveau commentaire
-			</mat-checkbox>
-			<mat-checkbox class="is-not-flex" formControlName="isMaybeAnswerAvailable">
-				La réponse « peut-être » sera disponible
-			</mat-checkbox>
-		</fieldset>
 		<div class="columns">
 			<div class="column"></div>
 			<div class="column">
-				<button class="btn is-success" (click)="createPoll()" [disabled]="!form.valid || !form.valid">
+				<button
+					class="btn is-success"
+					(click)="apiService.createPoll(poll)"
+					[disabled]="!form.valid || !form.valid"
+				>
 					<i class="fa fa-save"></i>
 					Enregistrer le sondage
 				</button>
diff --git a/src/app/features/administration/form/form.component.ts b/src/app/features/administration/form/form.component.ts
index 5d1c976b..eb5b3939 100644
--- a/src/app/features/administration/form/form.component.ts
+++ b/src/app/features/administration/form/form.component.ts
@@ -7,8 +7,7 @@ import { ToastService } from '../../../core/services/toast.service';
 import { PollService } from '../../../core/services/poll.service';
 import { DateUtilities } from '../../old-stuff/config/DateUtilities';
 import { DOCUMENT } from '@angular/common';
-import { DateChoice, otherDefaultDates } from '../../old-stuff/config/defaultConfigs';
-import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+import { CdkDragDrop } from '@angular/cdk/drag-drop';
 import { Router } from '@angular/router';
 
 @Component({
@@ -21,16 +20,7 @@ export class FormComponent implements OnInit {
 	public poll?: Poll;
 	public form: FormGroup;
 
-	public urlPrefix: string = window.location.origin + '/participation/';
 	public advancedDisplayEnabled = false;
-	public showDateInterval = true;
-	public allowSeveralHours = true;
-	startDateInterval: string;
-	endDateInterval: string;
-	intervalDays: any;
-	intervalDaysDefault = 7;
-	dateList: any = otherDefaultDates; // sets of days as strings, config to set identical time for days in a special days poll
-	timeList: DateChoice[] = otherDefaultDates; // ranges of time expressed as strings
 
 	constructor(
 		private fb: FormBuilder,
@@ -43,84 +33,18 @@ export class FormComponent implements OnInit {
 		private router: Router,
 		@Inject(DOCUMENT) private document: any
 	) {}
+
 	drop(event: CdkDragDrop<string[]>) {
 		// moveItemInArray(this.choices, event.previousIndex, event.currentIndex);
 	}
-	get choices(): FormArray {
-		return this.form.get('choices') as FormArray;
-	}
 
 	ngOnInit(): void {
 		this.initFormDefault();
-		// TO remove after
-		// this.createPoll();
+
 		const pollsAvailable = this.pollService.getAllAvailablePolls();
 		console.log('pollsAvailable', pollsAvailable);
 	}
 
-	public createPoll(): void {
-		console.log('this.form', this.form);
-		const newpoll = this.pollService.newPollFromForm(this.form);
-		console.log('newpoll', newpoll);
-		let self = this;
-
-		this.apiService.createPoll(newpoll).then((resp) => {
-			console.log('resp', resp);
-			self.router.navigate(['success']);
-		});
-		// this.router
-		// if (this.form.valid) {
-		// 	console.log('Le sondage est correctement rempli, prêt à enregistrer.');
-		// 	const newpoll = this.pollService.newPollFromForm(this.form);
-		// 	// TODO : save the poll
-		// 	this.apiService.createPoll(newpoll);
-		// } else {
-		// 	this.toastService.display('invalid form');
-		// }
-	}
-
-	public updateSlug(): void {
-		const newValueFormatted = 'TODO';
-		this.form.patchValue({ slug: newValueFormatted });
-	}
-
-	addChoice(optionalLabel = ''): void {
-		const newControlGroup = this.fb.group({
-			label: this.fb.control('', [Validators.required]),
-			imageUrl: ['', [Validators.required]],
-		});
-
-		if (optionalLabel) {
-			newControlGroup.patchValue({
-				label: optionalLabel,
-				imageUrl: 'mon url',
-			});
-		}
-		this.choices.push(newControlGroup);
-		this.cd.detectChanges();
-		console.log('this.choices.length', this.choices.length);
-
-		this.focusOnChoice(this.choices.length - 1);
-	}
-
-	focusOnChoice(index): void {
-		const selector = '#choice_label_' + index;
-		const elem = this.document.querySelector(selector);
-		if (elem) {
-			elem.focus();
-		}
-	}
-
-	deleteChoiceField(index: number): void {
-		if (this.choices.length !== 1) {
-			this.choices.removeAt(index);
-		}
-	}
-
-	reinitChoices(): void {
-		this.choices.setValue([]);
-	}
-
 	initFormDefault(showDemoValues = true): void {
 		this.form = this.fb.group({
 			title: ['', [Validators.required, Validators.minLength(12)]],
@@ -142,39 +66,16 @@ export class FormComponent implements OnInit {
 			expiracyNumberOfDays: [60, [Validators.required, Validators.min(0)]],
 		});
 		console.log('this.form ', this.form);
-		this.setDefaultDatesForInterval();
 
 		if (showDemoValues) {
 			this.setDemoValues();
 		}
 	}
 
-	/**
-	 * default interval of dates proposed is from today to 7 days more
-	 */
-	setDefaultDatesForInterval(): void {
-		const dateCurrent = new Date();
-		const dateJson = dateCurrent.toISOString();
-		this.startDateInterval = dateJson.substring(0, 10);
-		this.endDateInterval = this.dateUtilities
-			.addDaysToDate(this.intervalDaysDefault, dateCurrent)
-			.toISOString()
-			.substring(0, 10);
-		this.form.patchValue({
-			startDateInterval: this.startDateInterval,
-			endDateInterval: this.endDateInterval,
-		});
-		this.countDays();
-	}
-
 	/**
 	 * add example values to the form
 	 */
 	setDemoValues(): void {
-		this.addChoice('orange');
-		this.addChoice('raisin');
-		this.addChoice('abricot');
-
 		this.form.patchValue({
 			title: 'mon titre',
 			description: 'répondez SVP <3 ! *-* ',
@@ -191,145 +92,5 @@ export class FormComponent implements OnInit {
 			areResultsPublic: true,
 			expiracyNumberOfDays: 60,
 		});
-		this.automaticSlug();
-	}
-
-	askInitFormDefault(): void {
-		this.initFormDefault(false);
-		this.toastService.display('formulaire réinitialisé');
-	}
-
-	countDays(): void {
-		this.intervalDays = this.dateUtilities.countDays(
-			this.dateUtilities.parseInputDateToDateObject(this.startDateInterval),
-			this.dateUtilities.parseInputDateToDateObject(this.endDateInterval)
-		);
-		this.cd.detectChanges();
-	}
-
-	/**
-	 * add all the dates between the start and end dates in the interval section
-	 */
-	addIntervalOfDates(): void {
-		const newIntervalArray = this.dateUtilities.getDatesInRange(
-			this.dateUtilities.parseInputDateToDateObject(this.startDateInterval),
-			this.dateUtilities.parseInputDateToDateObject(this.endDateInterval),
-			1
-		);
-
-		const converted = [];
-		newIntervalArray.forEach((element) => {
-			converted.push({
-				literal: element.literal,
-				date_object: element.date_object,
-				timeList: [],
-			});
-		});
-		this.dateList = [...new Set(converted)];
-		// add only dates that are not already present with a Set of unique items
-		console.log('this.dateList', this.dateList);
-		this.showDateInterval = false;
-
-		this.form.patchValue({ choices: this.dateList });
-		// this.dateList.forEach(elem=>{
-		// 	const newControlGroup = this.fb.group({
-		// 		label: this.fb.control('', [Validators.required]),
-		// 		imageUrl: ['', [Validators.required]],
-		// 	});
-		//
-		// 	this.choices.push(newControlGroup);
-		// })
-
-		this.toastService.display(`les dates ont été ajoutées aux réponses possibles.`);
-	}
-
-	/**
-	 * handle keyboard shortcuts
-	 * @param $event
-	 * @param choice_number
-	 */
-	keyOnChoice($event: KeyboardEvent, choice_number: number): void {
-		$event.preventDefault();
-
-		console.log('this.choices.length', this.choices.length);
-		console.log('choice_number', choice_number);
-		const lastChoice = this.choices.length - 1 === choice_number;
-		// reset field with Ctrl + D
-		// add a field with Ctrl + N
-		// go to previous choice with arrow up
-		// go to next choice with arrow down
-		console.log('$event', $event);
-
-		if ($event.key == 'ArrowUp' && choice_number > 0) {
-			this.focusOnChoice(choice_number - 1);
-		}
-		if ($event.key == 'ArrowDown') {
-			// add a field if we are on the last choice
-			if (lastChoice) {
-				this.addChoice();
-				this.toastService.display('choix ajouté par raccourci "flèche bas"');
-			} else {
-				this.focusOnChoice(choice_number + 1);
-			}
-		}
-		if ($event.ctrlKey && $event.key == 'Backspace') {
-			this.deleteChoiceField(choice_number);
-			this.toastService.display('choix supprimé par raccourci "Ctrl + retour"');
-			this.cd.detectChanges();
-			this.focusOnChoice(Math.min(choice_number - 1, 0));
-		}
-		if ($event.ctrlKey && $event.key == 'Enter') {
-			// go to other fields
-			const elem = this.document.querySelector('#creatorEmail');
-			if (elem) {
-				elem.focus();
-			}
-		}
-	}
-
-	/**
-	 * change time spans
-	 */
-	addTime() {
-		this.timeList.push({
-			literal: '',
-			timeList: [],
-			date_object: new Date(),
-		});
-	}
-
-	removeAllTimes() {
-		this.timeList = [];
-	}
-
-	resetTimes() {
-		this.timeList = otherDefaultDates;
-	}
-
-	/**
-	 * add a time period to a specific date choice,
-	 * focus on the new input
-	 * @param config
-	 * @param id
-	 */
-	addTimeToDate(config: any, id: number) {
-		this.timeList.push({
-			literal: '',
-			timeList: [],
-			date_object: new Date(),
-		});
-		const selector = '[ng-reflect-choice_label="dateTime_' + id + '_Choices_' + (this.timeList.length - 1) + '"]';
-		this.cd.detectChanges();
-		const elem = this.document.querySelector(selector);
-		if (elem) {
-			elem.focus();
-		}
-	}
-
-	/**
-	 * set the poll slug from other data of the poll
-	 */
-	automaticSlug() {
-		this.poll.slug = this.pollService.makeSlug(this.poll);
 	}
 }
diff --git a/src/app/features/administration/form/kind-select/kind-select.component.html b/src/app/features/administration/form/kind-select/kind-select.component.html
new file mode 100644
index 00000000..df196976
--- /dev/null
+++ b/src/app/features/administration/form/kind-select/kind-select.component.html
@@ -0,0 +1,27 @@
+<div class="kind-select form-field">
+	<span class="pre-selector">
+		{{ 'creation.want' | translate }}
+	</span>
+	<div class="kind-of-poll columns">
+		<div class="column">
+			<button
+				class="btn-block btn"
+				[ngClass]="{ 'is-primary': form.controls.isAboutDate.value }"
+				(click)="form.controls.isAboutDate.setValue(true)"
+			>
+				<i class="fa fa-calendar"></i>
+				{{ 'creation.kind.date' | translate }}
+			</button>
+		</div>
+		<div class="column">
+			<button
+				class="btn-block btn btn-default"
+				[ngClass]="{ 'is-primary': !form.controls.isAboutDate.value }"
+				(click)="form.controls.isAboutDate.setValue(false)"
+			>
+				<i class="fa fa-stats"></i>
+				{{ 'creation.kind.classic' | translate }}
+			</button>
+		</div>
+	</div>
+</div>
diff --git a/src/app/features/administration/form/kind-select/kind-select.component.scss b/src/app/features/administration/form/kind-select/kind-select.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/features/administration/form/kind-select/kind-select.component.spec.ts b/src/app/features/administration/form/kind-select/kind-select.component.spec.ts
new file mode 100644
index 00000000..a1ad23c5
--- /dev/null
+++ b/src/app/features/administration/form/kind-select/kind-select.component.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { KindSelectComponent } from './kind-select.component';
+
+describe('KindSelectComponent', () => {
+	let component: KindSelectComponent;
+	let fixture: ComponentFixture<KindSelectComponent>;
+
+	beforeEach(async(() => {
+		TestBed.configureTestingModule({
+			declarations: [KindSelectComponent],
+		}).compileComponents();
+	}));
+
+	beforeEach(() => {
+		fixture = TestBed.createComponent(KindSelectComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});
diff --git a/src/app/features/administration/form/kind-select/kind-select.component.ts b/src/app/features/administration/form/kind-select/kind-select.component.ts
new file mode 100644
index 00000000..c5de0c74
--- /dev/null
+++ b/src/app/features/administration/form/kind-select/kind-select.component.ts
@@ -0,0 +1,19 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Poll } from '../../../../core/models/poll.model';
+import { FormGroup } from '@angular/forms';
+
+@Component({
+	selector: 'app-kind-select',
+	templateUrl: './kind-select.component.html',
+	styleUrls: ['./kind-select.component.scss'],
+})
+export class KindSelectComponent implements OnInit {
+	@Input()
+	public poll?: Poll;
+	@Input()
+	public form: FormGroup;
+
+	constructor() {}
+
+	ngOnInit(): void {}
+}
diff --git a/src/app/features/administration/form/text-select/text-select.component.html b/src/app/features/administration/form/text-select/text-select.component.html
new file mode 100644
index 00000000..6b57d555
--- /dev/null
+++ b/src/app/features/administration/form/text-select/text-select.component.html
@@ -0,0 +1,55 @@
+<div class="form-field">
+	<form [formGroup]="form">
+		<span>
+			<span class="columns">
+				<span class="column">
+					<button class="btn is-primary" (click)="addChoice()">
+						<i class="fa fa-plus"></i>
+						Ajouter un choix
+					</button>
+				</span>
+				<span class="column pull-right">
+					<button class="btn is-warning" (click)="reinitChoices()">
+						<i class="fa fa-recycle"></i>
+						Réinitialiser
+					</button>
+				</span>
+			</span>
+
+			<p class="hint">
+				{{ 'creation.choices_hint' | translate }}
+			</p>
+			<span *ngFor="let choice of choices.controls; let i = index">
+				<div class="form-row" [formGroup]="choice">
+					<div class="columns">
+						<div class="column">
+							<button class="btn btn-warning" (click)="deleteChoiceField(i)">
+								<i class="fa fa-times"></i>
+							</button>
+							{{ i * 1 + 1 }})
+						</div>
+						<div class="column">
+							<label [for]="'choice_label_' + i" class="hidden">label</label>
+							<input
+								formControlName="label"
+								[id]="'choice_label_' + i"
+								placeholder="Enter a choice description"
+								(keyup)="keyOnChoice($event, i)"
+								(keyup.backspace)="deleteChoiceField(i)"
+							/>
+							<br />
+							<label [for]="'image_url_' + i" class="hidden">image Url</label>
+							<input
+								formControlName="imageUrl"
+								[id]="'image_url_' + i"
+								placeholder="URL de l' image"
+								(keyup)="keyOnChoice($event, i)"
+								(keyup.backspace)="deleteChoiceField(i)"
+							/>
+						</div>
+					</div>
+				</div>
+			</span>
+		</span>
+	</form>
+</div>
diff --git a/src/app/features/administration/form/text-select/text-select.component.scss b/src/app/features/administration/form/text-select/text-select.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/features/administration/form/text-select/text-select.component.spec.ts b/src/app/features/administration/form/text-select/text-select.component.spec.ts
new file mode 100644
index 00000000..5eb68bf3
--- /dev/null
+++ b/src/app/features/administration/form/text-select/text-select.component.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TextSelectComponent } from './text-select.component';
+
+describe('TextSelectComponent', () => {
+	let component: TextSelectComponent;
+	let fixture: ComponentFixture<TextSelectComponent>;
+
+	beforeEach(async(() => {
+		TestBed.configureTestingModule({
+			declarations: [TextSelectComponent],
+		}).compileComponents();
+	}));
+
+	beforeEach(() => {
+		fixture = TestBed.createComponent(TextSelectComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});
diff --git a/src/app/features/administration/form/text-select/text-select.component.ts b/src/app/features/administration/form/text-select/text-select.component.ts
new file mode 100644
index 00000000..76bb46cb
--- /dev/null
+++ b/src/app/features/administration/form/text-select/text-select.component.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+	selector: 'app-text-select',
+	templateUrl: './text-select.component.html',
+	styleUrls: ['./text-select.component.scss'],
+})
+export class TextSelectComponent implements OnInit {
+	constructor() {}
+
+	ngOnInit(): void {}
+}

From 2d9f1f7d40468d0b2ba3634e7cdd6cbf3f1a8118 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Thu, 4 Feb 2021 17:56:46 +0100
Subject: [PATCH 04/40] homepage texts

---
 .../core/components/home/home.component.html  | 89 +++++++++++++------
 src/assets/i18n/FR.json                       |  3 +-
 2 files changed, 66 insertions(+), 26 deletions(-)

diff --git a/src/app/core/components/home/home.component.html b/src/app/core/components/home/home.component.html
index 20641ab1..cb87a8f9 100644
--- a/src/app/core/components/home/home.component.html
+++ b/src/app/core/components/home/home.component.html
@@ -34,35 +34,74 @@
 				</div>
 			</div>
 			<div class="column">
-				<img src="assets/img/undraw_group_selfie_ijc6.svg" alt="image WIP" />
-				<p>
+				<blockquote class="notification is-info is-light content is-size-3 has-text-weight-medium">
+					<h2 class="title is-2">
+						{{ 'SENTENCES.what-is-framadate' | translate }}
+					</h2>
+					<i class="fa fa-poll"></i>
 					{{
 						'SENTENCES.framadate-is-an-online-service-for-planning-an-appointment-or-making-a-decision-quickly-and-easily'
 							| translate
 					}}
-					{{ 'SENTENCES.here-is-how-it-works' | translate }}
-					{{ 'SENTENCES.send-the-poll-link-to-your-friends-or-colleagues' | translate }}
-				</p>
-				<p>
-					{{ 'SENTENCES.what-is-framadate' | translate }}
-					{{ 'SENTENCES.view-an-example' | translate }}
-					{{ 'SENTENCES.framadate-is-licensed-under-the' | translate }}
-					<span class="licence">
-						GNU Affero v3 Licence
-					</span>
-				</p>
-				<p>
-					{{ 'SENTENCES.grow-your-own' | translate }}
-					{{
-						'SENTENCES.if-you-want-to-install-the-software-for-your-own-use-and-thus-increase-your-independence-we-can-help'
-							| translate
-					}}
-					{{
-						'SENTENCES.to-participate-in-the-software-development-suggest-improvements-or-simply-download-it-please-visit'
-							| translate
-					}}
-					{{ 'SENTENCES.the-development-site' | translate }}
-				</p>
+				</blockquote>
+			</div>
+			<div class="column">
+				<img src="assets/img/undraw_group_selfie_ijc6.svg" alt="image WIP" />
+				<div class="columns">
+					<div class="column">
+						<h2 class="title is-2">
+							<i class="fa fa-format-paint"></i>
+							{{ 'SENTENCES.here-is-how-it-works' | translate }}
+						</h2>
+						<p>
+							{{ 'SENTENCES.send-the-poll-link-to-your-friends-or-colleagues' | translate }}
+
+							{{ 'SENTENCES.what-you-can-do' | translate }}
+						</p>
+						<h2 class="title is-2">
+							<i class="fa fa-format-paint"></i>
+							{{ 'SENTENCES.view-an-example' | translate }}
+						</h2>
+						<p>
+							<a href="/poll/orange-ou-citron/consultation" class="btn btn-info">
+								<i class="fa fa-biking"></i> Orange ou citron?
+							</a>
+						</p>
+						<p>
+							<i class="fa fa-gavel"></i>
+
+							{{ 'SENTENCES.framadate-is-licensed-under-the' | translate }}
+							<span class="licence has-text-weight-medium">
+								GNU Affero v3 Licence
+							</span>
+							<a
+								class="btn btn-info"
+								href="https://framagit.org/framasoft/framadate/funky-framadate-front"
+							>
+								<i class="fa fa-feather"></i>
+								Sources
+							</a>
+						</p>
+					</div>
+
+					<div class="column">
+						<h2 class="title is-2">
+							<i class="fa fa-seeding"></i>
+							{{ 'SENTENCES.grow-your-own' | translate }}
+						</h2>
+						<p>
+							{{
+								'SENTENCES.if-you-want-to-install-the-software-for-your-own-use-and-thus-increase-your-independence-we-can-help'
+									| translate
+							}}
+							{{
+								'SENTENCES.to-participate-in-the-software-development-suggest-improvements-or-simply-download-it-please-visit'
+									| translate
+							}}
+							{{ 'SENTENCES.the-development-site' | translate }}
+						</p>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
diff --git a/src/assets/i18n/FR.json b/src/assets/i18n/FR.json
index df1c8d17..a2c693b7 100644
--- a/src/assets/i18n/FR.json
+++ b/src/assets/i18n/FR.json
@@ -149,7 +149,8 @@
 		"do-you-want-to": "Voulez-vous",
 		"framadate-is-an-online-service-for-planning-an-appointment-or-making-a-decision-quickly-and-easily-n": "Framadate est un service en ligne permettant de planifier un rendez-vous ou prendre des décisions rapidement et simplement. Aucune inscription préalable n’est nécessaire.",
 		"here-is-how-it-works": "Voici comment ça fonctionne :",
-		"send-the-poll-link-to-your-friends-or-colleagues": "Envoyez le lien du sondage à vos ami·e·s ou collègues",
+		"send-the-poll-link-to-your-friends-or-colleagues": "Créez un sondage en choisissant les réponses possibles, et vous recevez un lien par email. Envoyez le lien du sondage à vos ami·e·s ou collègues.",
+		"what-you-can-do": "Vous pouvez faire des propositions de dates et horaires de rendez-vous, limiter le nombre de participants, poser des questions de toutes sortes, permettre de la finesse dans les réponses, exporter les données... tout reste sous votre contrôle et vos libertés seront toujours respectées, car c'est un logiciel libre.",
 		"what-is-framadate": "Prise en main",
 		"view-an-example": "voir un exemple ?",
 		"cecill-b-license": "licence CeCILL-B",

From 5bac37a7905ba1ccd16bab3568a366bf8b9d9090 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Thu, 4 Feb 2021 18:34:06 +0100
Subject: [PATCH 05/40] home page reorder and statistics, todo component

---
 src/app/app-routing.module.ts                 | 13 +--
 src/app/app.component.ts                      |  1 -
 src/app/app.module.ts                         |  1 -
 .../core/components/home/home.component.html  | 93 +++++++++++++------
 .../user-polls/user-polls.component.html      | 26 +++---
 .../user-profile/user-profile.module.ts       |  9 +-
 src/app/routes-framadate.ts                   |  5 +
 .../ui/wip-todo/wip-todo.component.html       | 11 +++
 .../ui/wip-todo/wip-todo.component.scss       |  0
 .../ui/wip-todo/wip-todo.component.spec.ts    | 24 +++++
 .../ui/wip-todo/wip-todo.component.ts         | 12 +++
 src/app/shared/shared.module.ts               |  2 +
 src/environments/environment.ts               |  4 +-
 13 files changed, 148 insertions(+), 53 deletions(-)
 create mode 100644 src/app/shared/components/ui/wip-todo/wip-todo.component.html
 create mode 100644 src/app/shared/components/ui/wip-todo/wip-todo.component.scss
 create mode 100644 src/app/shared/components/ui/wip-todo/wip-todo.component.spec.ts
 create mode 100644 src/app/shared/components/ui/wip-todo/wip-todo.component.ts

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 5e91c5eb..f347c701 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,14 +1,9 @@
-import {NgModule} from '@angular/core';
-import {RouterModule} from '@angular/router';
-import {routes} from "./routes-framadate";
-
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { routes } from './routes-framadate';
 
 @NgModule({
-	imports: [
-		RouterModule.forRoot(routes, {
-			// enableTracing: true, // <-- debugging purposes only
-		}),
-	],
+	imports: [RouterModule.forRoot(routes)],
 	exports: [RouterModule],
 })
 export class AppRoutingModule {}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index c4e0eb3d..f071ed2e 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -6,7 +6,6 @@ import { environment } from '../environments/environment';
 import { Theme } from './core/enums/theme.enum';
 import { LanguageService } from './core/services/language.service';
 import { ThemeService } from './core/services/theme.service';
-import { MockingService } from './core/services/mocking.service';
 
 @Component({
 	selector: 'app-root',
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 7db18013..db24b22b 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -23,7 +23,6 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { CoreModule } from './core/core.module';
 import { SharedModule } from './shared/shared.module';
-
 registerLocaleData(localeEn, 'en-EN');
 registerLocaleData(localeFr, 'fr-FR');
 
diff --git a/src/app/core/components/home/home.component.html b/src/app/core/components/home/home.component.html
index cb87a8f9..bc0a3116 100644
--- a/src/app/core/components/home/home.component.html
+++ b/src/app/core/components/home/home.component.html
@@ -1,10 +1,20 @@
 <section class="hero">
 	<div class="hero-body">
 		<div class="container">
-			<h1 class="title">
-				{{ 'home.title' | translate }}
-				{{ env.appTitle }}
-			</h1>
+			<div class="column">
+				<blockquote class="notification is-info is-light content is-size-3 has-text-weight-light">
+					<h1 class="title">
+						{{ 'home.title' | translate }}
+						{{ env.appTitle }}
+					</h1>
+					<i class="fa fa-poll"></i>
+					{{
+						'SENTENCES.framadate-is-an-online-service-for-planning-an-appointment-or-making-a-decision-quickly-and-easily'
+							| translate
+					}}
+				</blockquote>
+				<img src="assets/img/undraw_group_selfie_ijc6.svg" alt="image WIP" />
+			</div>
 			<div class="columns">
 				<div class="column">
 					<h2 class="subtitle">
@@ -19,34 +29,22 @@
 			</div>
 			<div class="columns">
 				<div class="column">
-					<a role="button" class="button is-fullwidth is-primary" routerLink="administration">
+					<a role="button" class="button is-fullwidth is-primary is-size-3" routerLink="administration">
 						<i class="fa fa-plus-circle"></i>
 						{{ 'home.create_button' | translate }}
 					</a>
 					<img src="assets/img/kind/date.jpeg" alt="sondage date" />
 				</div>
 				<div class="column">
-					<a role="button" class="button is-fullwidth is-primary" routerLink="user/polls">
+					<a role="button" class="button is-fullwidth is-info is-size-3" routerLink="user/polls">
 						<i class="fa fa-search"></i>
 						{{ 'home.search_button' | translate }}
 					</a>
 					<img src="assets/img/kind/classic.jpeg" alt="sondage date" />
 				</div>
 			</div>
+
 			<div class="column">
-				<blockquote class="notification is-info is-light content is-size-3 has-text-weight-medium">
-					<h2 class="title is-2">
-						{{ 'SENTENCES.what-is-framadate' | translate }}
-					</h2>
-					<i class="fa fa-poll"></i>
-					{{
-						'SENTENCES.framadate-is-an-online-service-for-planning-an-appointment-or-making-a-decision-quickly-and-easily'
-							| translate
-					}}
-				</blockquote>
-			</div>
-			<div class="column">
-				<img src="assets/img/undraw_group_selfie_ijc6.svg" alt="image WIP" />
 				<div class="columns">
 					<div class="column">
 						<h2 class="title is-2">
@@ -72,15 +70,9 @@
 
 							{{ 'SENTENCES.framadate-is-licensed-under-the' | translate }}
 							<span class="licence has-text-weight-medium">
+								<i class="fa fa-gnu"></i>
 								GNU Affero v3 Licence
 							</span>
-							<a
-								class="btn btn-info"
-								href="https://framagit.org/framasoft/framadate/funky-framadate-front"
-							>
-								<i class="fa fa-feather"></i>
-								Sources
-							</a>
 						</p>
 					</div>
 
@@ -103,6 +95,55 @@
 					</div>
 				</div>
 			</div>
+			<!--			statistiques-->
+			<p class="title">Statistiques</p>
+			<app-wip-todo></app-wip-todo>
+			<div class="tile is-ancestor">
+				<div class="tile is-4 is-vertical is-parent">
+					<div class="tile is-child box">
+						<div class="title">
+							62 346
+						</div>
+						<p>sondages</p>
+					</div>
+					<div class="tile is-child box">
+						<div class="title">
+							223 124
+						</div>
+						<p>votes</p>
+					</div>
+					<div class="tile is-child box">
+						<div class="title">
+							123
+						</div>
+						<p>consensus parfaits</p>
+					</div>
+					<div class="tile is-child box">
+						<div class="title">
+							41 875
+						</div>
+						<p>commentaires</p>
+					</div>
+				</div>
+				<div class="tile is-parent">
+					<div class="tile is-child box">
+						<div class="title">
+							44 985
+						</div>
+						<p>sondages de type date</p>
+					</div>
+					<div class="tile is-child box">
+						<div class="title">
+							22 985
+						</div>
+						<p>sondages de type classique</p>
+					</div>
+					<div class="tile is-child box">
+						<p class="title">Mentions légales</p>
+						<p>Voir ici le détail des mentions légales, CGU, CPU, politique de confidentialité.</p>
+					</div>
+				</div>
+			</div>
 		</div>
 	</div>
 </section>
diff --git a/src/app/features/user-profile/user-polls/user-polls.component.html b/src/app/features/user-profile/user-polls/user-polls.component.html
index eca9d4f9..1b24d918 100644
--- a/src/app/features/user-profile/user-polls/user-polls.component.html
+++ b/src/app/features/user-profile/user-polls/user-polls.component.html
@@ -4,6 +4,19 @@
 			<h1>Mes sondages</h1>
 		</div>
 	</div>
+	<div class="columns">
+		<div class="column">
+			<form (submit)="sendRetrieveEmail()">
+				<input type="email" id="search_field" autofocus="autofocus" placeholder="contact@exemple.com" />
+				<button class="button is-primary">
+					envoyez-moi la liste par email
+				</button>
+				<label for="search_field" class="clickable padded">
+					<img src="assets/img/undraw_prototyping_process_rswj.svg" alt="image my polls" />
+				</label>
+			</form>
+		</div>
+	</div>
 	<div *ngIf="pollsAreLoaded">
 		<div class="columns">
 			<div class="column">
@@ -23,17 +36,4 @@
 			</div>
 		</div>
 	</div>
-	<div class="columns">
-		<div class="column">
-			<form (submit)="sendRetrieveEmail()">
-				<label for="search_field">
-					<img src="assets/img/undraw_prototyping_process_rswj.svg" alt="image my polls" />
-					<input type="email" id="search_field" autofocus="autofocus" placeholder="contact@exemple.com" />
-				</label>
-				<button class="button is-primary">
-					envoyez-moi la liste par email
-				</button>
-			</form>
-		</div>
-	</div>
 </div>
diff --git a/src/app/features/user-profile/user-profile.module.ts b/src/app/features/user-profile/user-profile.module.ts
index 0dc60659..ad45254b 100644
--- a/src/app/features/user-profile/user-profile.module.ts
+++ b/src/app/features/user-profile/user-profile.module.ts
@@ -5,9 +5,16 @@ import { TranslateModule } from '@ngx-translate/core';
 import { SharedModule } from '../../shared/shared.module';
 import { UserPollsComponent } from './user-polls/user-polls.component';
 import { UserProfileRoutingModule } from './user-profile-routing.module';
+import { AppModule } from '../../app.module';
 
 @NgModule({
 	declarations: [UserPollsComponent],
-	imports: [CommonModule, UserProfileRoutingModule, SharedModule, TranslateModule.forChild({ extend: true })],
+	imports: [
+		CommonModule,
+		UserProfileRoutingModule,
+		SharedModule,
+		TranslateModule.forChild({ extend: true }),
+		AppModule,
+	],
 })
 export class UserProfileModule {}
diff --git a/src/app/routes-framadate.ts b/src/app/routes-framadate.ts
index 0129c932..1e6b2c0e 100644
--- a/src/app/routes-framadate.ts
+++ b/src/app/routes-framadate.ts
@@ -3,6 +3,7 @@ import { HomeComponent } from './core/components/home/home.component';
 import { PollService } from './core/services/poll.service';
 import { PageNotFoundComponent } from './shared/components/page-not-found/page-not-found.component';
 import { SuccessComponent } from './features/administration/success/success.component';
+import { WipTodoComponent } from './shared/components/ui/wip-todo/wip-todo.component';
 
 export const routes: Routes = [
 	{ path: '', component: HomeComponent },
@@ -40,6 +41,10 @@ export const routes: Routes = [
 		path: 'success',
 		component: SuccessComponent,
 	},
+	{
+		path: 'todo',
+		component: WipTodoComponent,
+	},
 	{ path: 'page-not-found', component: PageNotFoundComponent },
 	{ path: '**', redirectTo: 'page-not-found', pathMatch: 'full' },
 ];
diff --git a/src/app/shared/components/ui/wip-todo/wip-todo.component.html b/src/app/shared/components/ui/wip-todo/wip-todo.component.html
new file mode 100644
index 00000000..4e86e638
--- /dev/null
+++ b/src/app/shared/components/ui/wip-todo/wip-todo.component.html
@@ -0,0 +1,11 @@
+<div class="notification is-info is-light">
+	<div class="columns">
+		<div class="column is-narrow">
+			<i class="fa fa-info-circle fa-2x"></i>
+		</div>
+		<div class="column">
+			Cette fonctionnalité est <strong>en cours de développement</strong>, vous pouvez contribuer à son
+			amélioration avec le bouton de feedback.
+		</div>
+	</div>
+</div>
diff --git a/src/app/shared/components/ui/wip-todo/wip-todo.component.scss b/src/app/shared/components/ui/wip-todo/wip-todo.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/shared/components/ui/wip-todo/wip-todo.component.spec.ts b/src/app/shared/components/ui/wip-todo/wip-todo.component.spec.ts
new file mode 100644
index 00000000..ee227b25
--- /dev/null
+++ b/src/app/shared/components/ui/wip-todo/wip-todo.component.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WipTodoComponent } from './wip-todo.component';
+
+describe('WipTodoComponent', () => {
+	let component: WipTodoComponent;
+	let fixture: ComponentFixture<WipTodoComponent>;
+
+	beforeEach(async(() => {
+		TestBed.configureTestingModule({
+			declarations: [WipTodoComponent],
+		}).compileComponents();
+	}));
+
+	beforeEach(() => {
+		fixture = TestBed.createComponent(WipTodoComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});
diff --git a/src/app/shared/components/ui/wip-todo/wip-todo.component.ts b/src/app/shared/components/ui/wip-todo/wip-todo.component.ts
new file mode 100644
index 00000000..9e861c15
--- /dev/null
+++ b/src/app/shared/components/ui/wip-todo/wip-todo.component.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+	selector: 'app-wip-todo',
+	templateUrl: './wip-todo.component.html',
+	styleUrls: ['./wip-todo.component.scss'],
+})
+export class WipTodoComponent implements OnInit {
+	constructor() {}
+
+	ngOnInit(): void {}
+}
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index d75e7988..1ecfed1c 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -25,6 +25,7 @@ import { SettingsComponent } from './components/settings/settings.component';
 import { SpinnerComponent } from './components/spinner/spinner.component';
 import { CopyTextComponent } from './components/ui/copy-text/copy-text.component';
 import { ErasableInputComponent } from './components/ui/erasable-input/erasable-input.component';
+import { WipTodoComponent } from './components/ui/wip-todo/wip-todo.component';
 
 const COMPONENTS = [
 	ChoiceDetailsComponent,
@@ -37,6 +38,7 @@ const COMPONENTS = [
 	ThemeSelectorComponent,
 	CopyTextComponent,
 	ErasableInputComponent,
+	WipTodoComponent,
 ];
 
 const ANGULAR_MODULES = [CommonModule, ChartsModule, FormsModule, TranslateModule];
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index d4c9aff8..86d5495a 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -4,10 +4,10 @@
 
 const backendApiUrlsInDev = {
 	local: '/api/v1',
-	remote: 'https://framadate-api.cipherbliss.com/api/v1',
+	remote: 'http://localhost:8000/api/v1',
 };
 const apiV1 = {
-	baseHref: 'https://framadate-api.cipherbliss.com/api/v1',
+	baseHref: 'http://localhost:8000/api/v1',
 	api_new_poll: '/poll/',
 	api_get_poll: '/poll/{id}',
 	'api_test-mail-poll': '/api/v1/poll/mail/test-mail-poll/{emailChoice}',

From 1717f738d19e65c22d91b1f429cde654fb677ad0 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Thu, 4 Feb 2021 18:54:30 +0100
Subject: [PATCH 06/40] link to static pages

---
 src/app/app.module.ts                         |  5 ++-
 .../core/components/home/home.component.html  | 40 +++++++++++++++----
 .../ui/static-pages/cgu/cgu.component.html    | 26 ++++++++++++
 .../ui/static-pages/cgu/cgu.component.scss    |  0
 .../ui/static-pages/cgu/cgu.component.spec.ts | 24 +++++++++++
 .../ui/static-pages/cgu/cgu.component.ts      | 12 ++++++
 .../static-pages/legal/legal.component.html   | 14 +++++++
 .../static-pages/legal/legal.component.scss   |  0
 .../legal/legal.component.spec.ts             | 24 +++++++++++
 .../ui/static-pages/legal/legal.component.ts  | 12 ++++++
 .../privacy/privacy.component.html            | 10 +++++
 .../privacy/privacy.component.scss            |  0
 .../privacy/privacy.component.spec.ts         | 24 +++++++++++
 .../static-pages/privacy/privacy.component.ts | 12 ++++++
 src/app/routes-framadate.ts                   | 15 +++++++
 15 files changed, 209 insertions(+), 9 deletions(-)
 create mode 100644 src/app/features/shared/components/ui/static-pages/cgu/cgu.component.html
 create mode 100644 src/app/features/shared/components/ui/static-pages/cgu/cgu.component.scss
 create mode 100644 src/app/features/shared/components/ui/static-pages/cgu/cgu.component.spec.ts
 create mode 100644 src/app/features/shared/components/ui/static-pages/cgu/cgu.component.ts
 create mode 100644 src/app/features/shared/components/ui/static-pages/legal/legal.component.html
 create mode 100644 src/app/features/shared/components/ui/static-pages/legal/legal.component.scss
 create mode 100644 src/app/features/shared/components/ui/static-pages/legal/legal.component.spec.ts
 create mode 100644 src/app/features/shared/components/ui/static-pages/legal/legal.component.ts
 create mode 100644 src/app/features/shared/components/ui/static-pages/privacy/privacy.component.html
 create mode 100644 src/app/features/shared/components/ui/static-pages/privacy/privacy.component.scss
 create mode 100644 src/app/features/shared/components/ui/static-pages/privacy/privacy.component.spec.ts
 create mode 100644 src/app/features/shared/components/ui/static-pages/privacy/privacy.component.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index db24b22b..8a8301b6 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -23,6 +23,9 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { CoreModule } from './core/core.module';
 import { SharedModule } from './shared/shared.module';
+import { CguComponent } from './features/shared/components/ui/static-pages/cgu/cgu.component';
+import { LegalComponent } from './features/shared/components/ui/static-pages/legal/legal.component';
+import { PrivacyComponent } from './features/shared/components/ui/static-pages/privacy/privacy.component';
 registerLocaleData(localeEn, 'en-EN');
 registerLocaleData(localeFr, 'fr-FR');
 
@@ -37,7 +40,7 @@ export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
 }
 
 @NgModule({
-	declarations: [AppComponent],
+	declarations: [AppComponent, CguComponent, LegalComponent, PrivacyComponent],
 	imports: [
 		AppRoutingModule,
 		BrowserAnimationsModule,
diff --git a/src/app/core/components/home/home.component.html b/src/app/core/components/home/home.component.html
index bc0a3116..7e973eba 100644
--- a/src/app/core/components/home/home.component.html
+++ b/src/app/core/components/home/home.component.html
@@ -102,24 +102,22 @@
 				<div class="tile is-4 is-vertical is-parent">
 					<div class="tile is-child box">
 						<div class="title">
+							<i class="fa fa-check-circle"></i>
 							62 346
 						</div>
 						<p>sondages</p>
 					</div>
 					<div class="tile is-child box">
 						<div class="title">
+							<i class="fa fa-tachometer"></i>
 							223 124
 						</div>
 						<p>votes</p>
 					</div>
+
 					<div class="tile is-child box">
 						<div class="title">
-							123
-						</div>
-						<p>consensus parfaits</p>
-					</div>
-					<div class="tile is-child box">
-						<div class="title">
+							<i class="fa fa-comment-o"></i>
 							41 875
 						</div>
 						<p>commentaires</p>
@@ -128,22 +126,48 @@
 				<div class="tile is-parent">
 					<div class="tile is-child box">
 						<div class="title">
+							<i class="fa fa-calendar-check-o"></i>
 							44 985
 						</div>
 						<p>sondages de type date</p>
 					</div>
+
 					<div class="tile is-child box">
 						<div class="title">
+							<i class="fa fa-file-epub"></i>
 							22 985
 						</div>
 						<p>sondages de type classique</p>
 					</div>
 					<div class="tile is-child box">
-						<p class="title">Mentions légales</p>
-						<p>Voir ici le détail des mentions légales, CGU, CPU, politique de confidentialité.</p>
+						<div class="title">
+							<i class="fa fa-check-circle-o"></i>
+							123
+						</div>
+						<p>consensus parfaits</p>
 					</div>
 				</div>
 			</div>
+			<div class="box">
+				<h2 class="title">Nos Mentions légales</h2>
+				<ul>
+					<li>
+						<a href="/legal">
+							mentions légales,
+						</a>
+					</li>
+					<li>
+						<a href="/cgu">
+							CGU, CPU,
+						</a>
+					</li>
+					<li>
+						<a href="/privacy">
+							politique de confidentialité.
+						</a>
+					</li>
+				</ul>
+			</div>
 		</div>
 	</div>
 </section>
diff --git a/src/app/features/shared/components/ui/static-pages/cgu/cgu.component.html b/src/app/features/shared/components/ui/static-pages/cgu/cgu.component.html
new file mode 100644
index 00000000..0ece82f4
--- /dev/null
+++ b/src/app/features/shared/components/ui/static-pages/cgu/cgu.component.html
@@ -0,0 +1,26 @@
+<div class="static-page content">
+	<article>
+		<section class="hero is-info">
+			<div class="hero-body">
+				<p class="title">
+					Conditions Générales d'utilisation
+				</p>
+				<p class="subtitle">
+					Détail des CGU.
+					<br />
+					Ne nous prenez pas pour des chatons.
+				</p>
+			</div>
+		</section>
+		<section class="hero is-info">
+			<div class="hero-body">
+				<p class="title">
+					Conditions Particulières d'utilisation
+				</p>
+				<p class="subtitle">
+					Détail des CPU
+				</p>
+			</div>
+		</section>
+	</article>
+</div>
diff --git a/src/app/features/shared/components/ui/static-pages/cgu/cgu.component.scss b/src/app/features/shared/components/ui/static-pages/cgu/cgu.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/features/shared/components/ui/static-pages/cgu/cgu.component.spec.ts b/src/app/features/shared/components/ui/static-pages/cgu/cgu.component.spec.ts
new file mode 100644
index 00000000..4af41638
--- /dev/null
+++ b/src/app/features/shared/components/ui/static-pages/cgu/cgu.component.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CguComponent } from './cgu.component';
+
+describe('CguComponent', () => {
+	let component: CguComponent;
+	let fixture: ComponentFixture<CguComponent>;
+
+	beforeEach(async(() => {
+		TestBed.configureTestingModule({
+			declarations: [CguComponent],
+		}).compileComponents();
+	}));
+
+	beforeEach(() => {
+		fixture = TestBed.createComponent(CguComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});
diff --git a/src/app/features/shared/components/ui/static-pages/cgu/cgu.component.ts b/src/app/features/shared/components/ui/static-pages/cgu/cgu.component.ts
new file mode 100644
index 00000000..138c3b3d
--- /dev/null
+++ b/src/app/features/shared/components/ui/static-pages/cgu/cgu.component.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+	selector: 'app-cgu',
+	templateUrl: './cgu.component.html',
+	styleUrls: ['./cgu.component.scss'],
+})
+export class CguComponent implements OnInit {
+	constructor() {}
+
+	ngOnInit(): void {}
+}
diff --git a/src/app/features/shared/components/ui/static-pages/legal/legal.component.html b/src/app/features/shared/components/ui/static-pages/legal/legal.component.html
new file mode 100644
index 00000000..f476e4b4
--- /dev/null
+++ b/src/app/features/shared/components/ui/static-pages/legal/legal.component.html
@@ -0,0 +1,14 @@
+<div class="static-page content">
+	<article>
+		<section class="hero is-info">
+			<div class="hero-body">
+				<p class="title">
+					Mentions légales
+				</p>
+				<p class="subtitle">
+					détail des mentions légales
+				</p>
+			</div>
+		</section>
+	</article>
+</div>
diff --git a/src/app/features/shared/components/ui/static-pages/legal/legal.component.scss b/src/app/features/shared/components/ui/static-pages/legal/legal.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/features/shared/components/ui/static-pages/legal/legal.component.spec.ts b/src/app/features/shared/components/ui/static-pages/legal/legal.component.spec.ts
new file mode 100644
index 00000000..c2b1a5d8
--- /dev/null
+++ b/src/app/features/shared/components/ui/static-pages/legal/legal.component.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LegalComponent } from './legal.component';
+
+describe('LegalComponent', () => {
+	let component: LegalComponent;
+	let fixture: ComponentFixture<LegalComponent>;
+
+	beforeEach(async(() => {
+		TestBed.configureTestingModule({
+			declarations: [LegalComponent],
+		}).compileComponents();
+	}));
+
+	beforeEach(() => {
+		fixture = TestBed.createComponent(LegalComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});
diff --git a/src/app/features/shared/components/ui/static-pages/legal/legal.component.ts b/src/app/features/shared/components/ui/static-pages/legal/legal.component.ts
new file mode 100644
index 00000000..a363b6bd
--- /dev/null
+++ b/src/app/features/shared/components/ui/static-pages/legal/legal.component.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+	selector: 'app-legal',
+	templateUrl: './legal.component.html',
+	styleUrls: ['./legal.component.scss'],
+})
+export class LegalComponent implements OnInit {
+	constructor() {}
+
+	ngOnInit(): void {}
+}
diff --git a/src/app/features/shared/components/ui/static-pages/privacy/privacy.component.html b/src/app/features/shared/components/ui/static-pages/privacy/privacy.component.html
new file mode 100644
index 00000000..78a7d8b6
--- /dev/null
+++ b/src/app/features/shared/components/ui/static-pages/privacy/privacy.component.html
@@ -0,0 +1,10 @@
+<section class="hero is-info">
+	<div class="hero-body">
+		<p class="title">
+			Politique de confidentialité
+		</p>
+		<p class="subtitle">
+			Privacy policy
+		</p>
+	</div>
+</section>
diff --git a/src/app/features/shared/components/ui/static-pages/privacy/privacy.component.scss b/src/app/features/shared/components/ui/static-pages/privacy/privacy.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/features/shared/components/ui/static-pages/privacy/privacy.component.spec.ts b/src/app/features/shared/components/ui/static-pages/privacy/privacy.component.spec.ts
new file mode 100644
index 00000000..f78d83eb
--- /dev/null
+++ b/src/app/features/shared/components/ui/static-pages/privacy/privacy.component.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PrivacyComponent } from './privacy.component';
+
+describe('PrivacyComponent', () => {
+	let component: PrivacyComponent;
+	let fixture: ComponentFixture<PrivacyComponent>;
+
+	beforeEach(async(() => {
+		TestBed.configureTestingModule({
+			declarations: [PrivacyComponent],
+		}).compileComponents();
+	}));
+
+	beforeEach(() => {
+		fixture = TestBed.createComponent(PrivacyComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});
diff --git a/src/app/features/shared/components/ui/static-pages/privacy/privacy.component.ts b/src/app/features/shared/components/ui/static-pages/privacy/privacy.component.ts
new file mode 100644
index 00000000..57c6a06d
--- /dev/null
+++ b/src/app/features/shared/components/ui/static-pages/privacy/privacy.component.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+	selector: 'app-privacy',
+	templateUrl: './privacy.component.html',
+	styleUrls: ['./privacy.component.scss'],
+})
+export class PrivacyComponent implements OnInit {
+	constructor() {}
+
+	ngOnInit(): void {}
+}
diff --git a/src/app/routes-framadate.ts b/src/app/routes-framadate.ts
index 1e6b2c0e..98b65720 100644
--- a/src/app/routes-framadate.ts
+++ b/src/app/routes-framadate.ts
@@ -4,6 +4,9 @@ import { PollService } from './core/services/poll.service';
 import { PageNotFoundComponent } from './shared/components/page-not-found/page-not-found.component';
 import { SuccessComponent } from './features/administration/success/success.component';
 import { WipTodoComponent } from './shared/components/ui/wip-todo/wip-todo.component';
+import { CguComponent } from './features/shared/components/ui/static-pages/cgu/cgu.component';
+import { LegalComponent } from './features/shared/components/ui/static-pages/legal/legal.component';
+import { PrivacyComponent } from './features/shared/components/ui/static-pages/privacy/privacy.component';
 
 export const routes: Routes = [
 	{ path: '', component: HomeComponent },
@@ -45,6 +48,18 @@ export const routes: Routes = [
 		path: 'todo',
 		component: WipTodoComponent,
 	},
+	{
+		path: 'cgu',
+		component: CguComponent,
+	},
+	{
+		path: 'legal',
+		component: LegalComponent,
+	},
+	{
+		path: 'privacy',
+		component: PrivacyComponent,
+	},
 	{ path: 'page-not-found', component: PageNotFoundComponent },
 	{ path: '**', redirectTo: 'page-not-found', pathMatch: 'full' },
 ];

From feb0de8270204c31cbb92f6a6420644cc1a99e9e Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Thu, 4 Feb 2021 19:04:20 +0100
Subject: [PATCH 07/40] include advanced choices and toggle visibility of sub
 component

---
 .../advanced-config.component.html            | 160 +++++++++---------
 .../advanced-config.component.ts              |   9 +-
 .../base-config/base-config.component.html    |  55 +++---
 .../form/base-config/base-config.component.ts |   1 +
 .../administration/form/form.component.html   |  49 +++---
 5 files changed, 148 insertions(+), 126 deletions(-)

diff --git a/src/app/features/administration/form/advanced-config/advanced-config.component.html b/src/app/features/administration/form/advanced-config/advanced-config.component.html
index a9ff8af1..0862e8c7 100644
--- a/src/app/features/administration/form/advanced-config/advanced-config.component.html
+++ b/src/app/features/administration/form/advanced-config/advanced-config.component.html
@@ -1,89 +1,91 @@
-<fieldset class="complete well">
-	<h2>{{ 'creation.advanced' | translate }}</h2>
-	<label for="descr">Description (optionnel)</label>
-	<textarea
-		#description
-		matInput
-		id="descr"
-		placeholder="Description"
-		formControlName="description"
-		required
-	></textarea>
-	<button
-		mat-button
-		*ngIf="description.value"
-		matSuffix
-		mat-icon-button
-		aria-label="Clear"
-		(click)="description.value = ''"
-	>
-		<i class="fa fa-close"></i>
-	</button>
-
-	<br />
-
-	<label for="slug"
-		>Url pour les participants
-
-		<i class="fa fa-close"></i>
-	</label>
-	<br />
-	<span
-		>{{ urlPrefix }}
-		<strong>
-			{{ form.controls.slug.value }}
-		</strong>
-	</span>
-	<app-copy-text [textToCopy]="form.controls.slug.value"></app-copy-text>
-
-	<button
-		mat-button
-		*ngIf="form.controls.slug.value"
-		matSuffix
-		mat-icon-button
-		aria-label="Clear"
-		(click)="slug.value = ''"
-	></button>
-	<input #slug matInput id="slug" placeholder="Url" formControlName="slug" required />
-	<br />
-	<div appearance="outline" class="is-not-flex">
-		<mat-label>Nombre de jours avant expiration</mat-label>
-		<input
-			#expiracy
-			id="expiracy"
+<form [formGroup]="form">
+	<fieldset class="complete well">
+		<h2>{{ 'creation.advanced' | translate }}</h2>
+		<label for="descr">Description (optionnel)</label>
+		<textarea
+			#description
 			matInput
-			type="number"
-			placeholder="Nombre de jours avant expiration"
-			formControlName="expiracyNumberOfDays"
+			id="descr"
+			placeholder="Description"
+			formControlName="description"
 			required
-		/>
+		></textarea>
 		<button
 			mat-button
-			*ngIf="expiracy.value"
+			*ngIf="description.value"
 			matSuffix
 			mat-icon-button
 			aria-label="Clear"
-			(click)="expiracy.value = ''"
+			(click)="description.value = ''"
 		>
 			<i class="fa fa-close"></i>
 		</button>
-	</div>
-	<mat-checkbox class="is-not-flex" formControlName="areResultsPublic">
-		Les participants pourront consulter les résultats
-	</mat-checkbox>
-	<mat-checkbox class="is-not-flex" formControlName="isAboutDate">
-		Les choix possibles concerneront des dates
-	</mat-checkbox>
-	<mat-checkbox class="is-not-flex" formControlName="isProtectedByPassword">
-		Le sondage sera protégé par un mot de passe
-	</mat-checkbox>
-	<mat-checkbox class="is-not-flex" formControlName="isOwnerNotifiedByEmailOnNewVote">
-		Vous recevrez un mail à chaque nouvelle participation
-	</mat-checkbox>
-	<mat-checkbox class="is-not-flex" formControlName="isOwnerNotifiedByEmailOnNewComment">
-		Vous recevrez un mail à chaque nouveau commentaire
-	</mat-checkbox>
-	<mat-checkbox class="is-not-flex" formControlName="isMaybeAnswerAvailable">
-		La réponse « peut-être » sera disponible
-	</mat-checkbox>
-</fieldset>
+
+		<br />
+
+		<label for="slug"
+			>Url pour les participants
+
+			<i class="fa fa-close"></i>
+		</label>
+		<br />
+		<span
+			>{{ urlPrefix }}
+			<strong>
+				{{ form.controls.slug.value }}
+			</strong>
+		</span>
+		<app-copy-text [textToCopy]="form.controls.slug.value"></app-copy-text>
+
+		<button
+			mat-button
+			*ngIf="form.controls.slug.value"
+			matSuffix
+			mat-icon-button
+			aria-label="Clear"
+			(click)="slug.value = ''"
+		></button>
+		<input #slug matInput id="slug" placeholder="Url" formControlName="slug" required />
+		<br />
+		<div appearance="outline" class="is-not-flex">
+			<mat-label>Nombre de jours avant expiration</mat-label>
+			<input
+				#expiracy
+				id="expiracy"
+				matInput
+				type="number"
+				placeholder="Nombre de jours avant expiration"
+				formControlName="expiracyNumberOfDays"
+				required
+			/>
+			<button
+				mat-button
+				*ngIf="expiracy.value"
+				matSuffix
+				mat-icon-button
+				aria-label="Clear"
+				(click)="expiracy.value = ''"
+			>
+				<i class="fa fa-close"></i>
+			</button>
+		</div>
+		<mat-checkbox class="is-not-flex" formControlName="areResultsPublic">
+			Les participants pourront consulter les résultats
+		</mat-checkbox>
+		<mat-checkbox class="is-not-flex" formControlName="isAboutDate">
+			Les choix possibles concerneront des dates
+		</mat-checkbox>
+		<mat-checkbox class="is-not-flex" formControlName="isProtectedByPassword">
+			Le sondage sera protégé par un mot de passe
+		</mat-checkbox>
+		<mat-checkbox class="is-not-flex" formControlName="isOwnerNotifiedByEmailOnNewVote">
+			Vous recevrez un mail à chaque nouvelle participation
+		</mat-checkbox>
+		<mat-checkbox class="is-not-flex" formControlName="isOwnerNotifiedByEmailOnNewComment">
+			Vous recevrez un mail à chaque nouveau commentaire
+		</mat-checkbox>
+		<mat-checkbox class="is-not-flex" formControlName="isMaybeAnswerAvailable">
+			La réponse « peut-être » sera disponible
+		</mat-checkbox>
+	</fieldset>
+</form>
diff --git a/src/app/features/administration/form/advanced-config/advanced-config.component.ts b/src/app/features/administration/form/advanced-config/advanced-config.component.ts
index dcef8c78..cfc1b286 100644
--- a/src/app/features/administration/form/advanced-config/advanced-config.component.ts
+++ b/src/app/features/administration/form/advanced-config/advanced-config.component.ts
@@ -1,4 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { Poll } from '../../../../core/models/poll.model';
+import { FormGroup } from '@angular/forms';
 
 @Component({
 	selector: 'app-advanced-config',
@@ -7,7 +9,10 @@ import { Component, OnInit } from '@angular/core';
 })
 export class AdvancedConfigComponent implements OnInit {
 	public urlPrefix: string = window.location.origin + '/participation/';
-
+	@Input()
+	public poll?: Poll;
+	@Input()
+	public form: FormGroup;
 	constructor() {}
 
 	ngOnInit(): void {}
diff --git a/src/app/features/administration/form/base-config/base-config.component.html b/src/app/features/administration/form/base-config/base-config.component.html
index e815bc46..32b888c0 100644
--- a/src/app/features/administration/form/base-config/base-config.component.html
+++ b/src/app/features/administration/form/base-config/base-config.component.html
@@ -1,24 +1,41 @@
 <form [formGroup]="form">
-	<div class="columns">
-		<span>
-			{{ 'creation.choose_title' | translate }}
-		</span>
-		<label class="hidden" for="title">Titre</label>
-		<input
-			#title
-			matInput
-			[placeholder]="'creation.choose_title_placeholder' | translate"
-			formControlName="title"
-			id="title"
-			autofocus="autofocus"
-			(change)="updateSlug()"
-			required
-		/>
-		<button mat-button *ngIf="title.value" matSuffix mat-icon-button aria-label="Clear" (click)="title.value = ''">
-			<i class="fa fa-close"></i>
-		</button>
+	<h1>
+		{{ 'creation.title' | translate }}
+	</h1>
 
-		<div>
+	<p class="subtitle">
+		{{ 'creation.want' | translate }}
+	</p>
+
+	<div class="columns">
+		<div class="column">
+			<p>
+				{{ 'creation.choose_title' | translate }}
+			</p>
+			<br />
+			<label class="hidden" for="title">Titre</label>
+			<input
+				#title
+				matInput
+				[placeholder]="'creation.choose_title_placeholder' | translate"
+				formControlName="title"
+				id="title"
+				autofocus="autofocus"
+				(change)="updateSlug()"
+				required
+			/>
+			<button
+				mat-button
+				*ngIf="title.value"
+				matSuffix
+				mat-icon-button
+				aria-label="Clear"
+				(click)="title.value = ''"
+			>
+				<i class="fa fa-close"></i>
+			</button>
+		</div>
+		<div class="column">
 			<label class="" for="creatorEmail">
 				<span>
 					{{ 'creation.name' | translate }}
diff --git a/src/app/features/administration/form/base-config/base-config.component.ts b/src/app/features/administration/form/base-config/base-config.component.ts
index 20ab5e05..beafa8c3 100644
--- a/src/app/features/administration/form/base-config/base-config.component.ts
+++ b/src/app/features/administration/form/base-config/base-config.component.ts
@@ -16,6 +16,7 @@ import { Poll } from '../../../../core/models/poll.model';
 export class BaseConfigComponent implements OnInit {
 	@Input()
 	public poll?: Poll;
+	@Input()
 	public form: FormGroup;
 
 	constructor(
diff --git a/src/app/features/administration/form/form.component.html b/src/app/features/administration/form/form.component.html
index 63131d2c..eb595224 100644
--- a/src/app/features/administration/form/form.component.html
+++ b/src/app/features/administration/form/form.component.html
@@ -1,31 +1,19 @@
 <div class="admin-form padded">
-	<h1>
-		{{ 'creation.title' | translate }}
-	</h1>
-	<div class="validation">
-		<div class="has-background-danger" *ngIf="!form.valid">
-			le formulaire est invalide
-			<pre>
-		 {{ form.errors | json }}
-		</pre
-			>
-		</div>
-	</div>
-	<app-base-config></app-base-config>
-	<!--	<app-kind-select></app-kind-select>-->
-
-	<!--			choix spécialement pour les dates-->
-	<!--	<app-date-select ng-if="form.kind == 'date'"></app-date-select>-->
-	<!--	<app-text-select ng-if="form.kind == 'classic'"></app-text-select>-->
-	<button class="btn is-info" (click)="advancedDisplayEnabled = !advancedDisplayEnabled">
-		<i class="fa fa-save"></i>
-		{{ 'creation.advanced' | translate }}
-	</button>
-	<!--	<app-advanced-config ng-if="advancedDisplayEnabled"></app-advanced-config>-->
-
-	<hr />
-
 	<form [formGroup]="form">
+		<app-base-config [poll]="poll" [form]="form"></app-base-config>
+		<!--	<app-kind-select></app-kind-select>-->
+
+		<!--			choix spécialement pour les dates-->
+		<!--	<app-date-select ng-if="form.kind == 'date'"></app-date-select>-->
+		<!--	<app-text-select ng-if="form.kind == 'classic'"></app-text-select>-->
+		<button class="btn is-info" (click)="advancedDisplayEnabled = !advancedDisplayEnabled">
+			<i class="fa fa-save"></i>
+			{{ 'creation.advanced' | translate }}
+		</button>
+		<app-advanced-config [poll]="poll" [form]="form" *ngIf="advancedDisplayEnabled"></app-advanced-config>
+
+		<hr />
+
 		<div class="columns">
 			<div class="column"></div>
 			<div class="column">
@@ -39,5 +27,14 @@
 				</button>
 			</div>
 		</div>
+		<div class="validation">
+			<div class="has-background-danger" *ngIf="!form.valid">
+				le formulaire est invalide
+				<pre>
+		 {{ form.errors | json }}
+		</pre
+				>
+			</div>
+		</div>
 	</form>
 </div>

From f96dc1f3c44b413eef1b64b4ff9ea8abca9fc34a Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Thu, 4 Feb 2021 19:13:57 +0100
Subject: [PATCH 08/40] ordering base fields

---
 .../base-config/base-config.component.html    | 121 +++++++++---------
 .../administration/form/form.component.html   |   8 +-
 .../kind-select/kind-select.component.html    |   3 -
 src/assets/i18n/FR.json                       |   2 +
 4 files changed, 69 insertions(+), 65 deletions(-)

diff --git a/src/app/features/administration/form/base-config/base-config.component.html b/src/app/features/administration/form/base-config/base-config.component.html
index 32b888c0..9346d401 100644
--- a/src/app/features/administration/form/base-config/base-config.component.html
+++ b/src/app/features/administration/form/base-config/base-config.component.html
@@ -1,12 +1,4 @@
 <form [formGroup]="form">
-	<h1>
-		{{ 'creation.title' | translate }}
-	</h1>
-
-	<p class="subtitle">
-		{{ 'creation.want' | translate }}
-	</p>
-
 	<div class="columns">
 		<div class="column">
 			<p>
@@ -36,69 +28,76 @@
 			</button>
 		</div>
 		<div class="column">
+			<label for="creatorPseudo">
+				<span>
+					{{ 'creation.email' | translate }}
+				</span>
+			</label>
+
+			<input
+				#title
+				matInput
+				placeholder="{{ 'creation.email_placeholder' | translate }}"
+				formControlName="creatorEmail"
+				id="creatorEmail"
+				required
+			/>
+			<br />
+
 			<label class="" for="creatorEmail">
 				<span>
 					{{ 'creation.name' | translate }}
 				</span>
 			</label>
-			<label class="hidden" for="creatorPseudo">
-				<span>
-					{{ 'creation.email' | translate }}
-				</span>
-			</label>
 			<input #title matInput placeholder="pseudo" formControlName="creatorPseudo" id="creatorPseudo" required />
-			<input
-				#title
-				matInput
-				placeholder="mon-email@example.com"
-				formControlName="creatorEmail"
-				id="creatorEmail"
-				required
-			/>
 		</div>
 
 		<hr />
-		<div>
-			<h2>
-				{{ 'choices.title' | translate }}
-			</h2>
-			{{ 'dates.add' | translate }}
-			<p>
-				<i>
-					{{ 'choices.helper' | translate }}
-				</i>
-			</p>
-			{{ 'choices.answer_preset_1' | translate }}
-			{{ 'choices.add' | translate }}
-			{{ 'choices.continue' | translate }}
-		</div>
-		<div class="column">
-			<img src="assets/img/undraw_Moving_twwf.svg" alt="image WIP" />
-		</div>
-		<div class="column">
-			<button class="btn btn--warning" (click)="askInitFormDefault()">
-				<i class="fa fa-refresh"></i>
-				Tout réinitialiser
-			</button>
-			<br />
-			<button class="btn is-success" (click)="createPoll()">
-				<i class="fa fa-save"></i>
-				Enregistrer le sondage
-			</button>
-			<br />
-			<button class="btn is-default" (click)="automaticSlug()">
-				<i class="fa fa-refresh"></i>
-				Slug automatique
-			</button>
+	</div>
 
-			<div class="columns">
-				<div class="column">
-					Slug:
-				</div>
-				<div class="column">
-					<div class="well">
-						{{ poll.slug }}
-					</div>
+	<hr />
+	<div class="columns">
+		<div class="column">
+			<!--			<img src="assets/img/undraw_Moving_twwf.svg" alt="image WIP" />-->
+			<div>
+				<h2>
+					{{ 'choices.title' | translate }}
+				</h2>
+				{{ 'dates.add' | translate }}
+				<p>
+					<i>
+						{{ 'choices.helper' | translate }}
+					</i>
+				</p>
+				{{ 'choices.answer_preset_1' | translate }}
+				{{ 'choices.add' | translate }}
+				{{ 'choices.continue' | translate }}
+			</div>
+		</div>
+	</div>
+	<div class="column">
+		<button class="btn btn--warning" (click)="askInitFormDefault()">
+			<i class="fa fa-refresh"></i>
+			Tout réinitialiser
+		</button>
+		<br />
+		<button class="btn is-success" (click)="createPoll()">
+			<i class="fa fa-save"></i>
+			Enregistrer le sondage
+		</button>
+		<br />
+		<button class="btn is-default" (click)="automaticSlug()">
+			<i class="fa fa-refresh"></i>
+			Slug automatique
+		</button>
+
+		<div class="columns">
+			<div class="column">
+				Slug:
+			</div>
+			<div class="column">
+				<div class="well">
+					{{ poll.slug }}
 				</div>
 			</div>
 		</div>
diff --git a/src/app/features/administration/form/form.component.html b/src/app/features/administration/form/form.component.html
index eb595224..710a95ad 100644
--- a/src/app/features/administration/form/form.component.html
+++ b/src/app/features/administration/form/form.component.html
@@ -1,7 +1,13 @@
 <div class="admin-form padded">
 	<form [formGroup]="form">
+		<h1>
+			{{ 'creation.title' | translate }}
+		</h1>
+		<p class="subtitle">
+			{{ 'creation.want' | translate }}
+		</p>
+		<app-kind-select [poll]="poll" [form]="form"></app-kind-select>
 		<app-base-config [poll]="poll" [form]="form"></app-base-config>
-		<!--	<app-kind-select></app-kind-select>-->
 
 		<!--			choix spécialement pour les dates-->
 		<!--	<app-date-select ng-if="form.kind == 'date'"></app-date-select>-->
diff --git a/src/app/features/administration/form/kind-select/kind-select.component.html b/src/app/features/administration/form/kind-select/kind-select.component.html
index df196976..bd8b558f 100644
--- a/src/app/features/administration/form/kind-select/kind-select.component.html
+++ b/src/app/features/administration/form/kind-select/kind-select.component.html
@@ -1,7 +1,4 @@
 <div class="kind-select form-field">
-	<span class="pre-selector">
-		{{ 'creation.want' | translate }}
-	</span>
 	<div class="kind-of-poll columns">
 		<div class="column">
 			<button
diff --git a/src/assets/i18n/FR.json b/src/assets/i18n/FR.json
index a2c693b7..67cceeec 100644
--- a/src/assets/i18n/FR.json
+++ b/src/assets/i18n/FR.json
@@ -38,6 +38,8 @@
 		"choices_hint": "Utilisez les flèches haut ⬆️ et bas ⬇️ pour passer d'un choix à un autre",
 		"name": "Je peux aussi préciser mon nom si je le souhaite",
 		"name_placeholder": "mon nom",
+		"email": "Mon email",
+		"email_placeholder": "mon-email@example.com",
 		"description": "et la description serait",
 		"description_placeholder": "description"
 	},

From 2d49389d117b8060fd343e7815b0894e4413667d Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Fri, 5 Feb 2021 15:34:00 +0100
Subject: [PATCH 09/40] link to base config

---
 src/app/core/models/poll.model.ts             |   7 +-
 .../administration/administration.module.ts   |   3 +-
 .../base-config/base-config.component.html    | 108 ++++++++++--------
 .../form/base-config/base-config.component.ts |  35 ++----
 .../administration/form/form.component.html   |  32 ++++--
 .../administration/form/form.component.ts     |  24 ++--
 6 files changed, 111 insertions(+), 98 deletions(-)

diff --git a/src/app/core/models/poll.model.ts b/src/app/core/models/poll.model.ts
index 8d616c3f..62cfacb1 100644
--- a/src/app/core/models/poll.model.ts
+++ b/src/app/core/models/poll.model.ts
@@ -8,9 +8,12 @@ import { User } from './user.model';
 export class Poll {
 	constructor(
 		public owner: User = new User(),
-		public slug: string = 'default-slug',
-		public title: string = 'default title',
+		public slug: string = '',
+		public title: string = '',
 		public description?: string,
+		public creatorPseudo?: string,
+		public creatorEmail?: string,
+		public isAboutDate?: boolean,
 		public configuration: PollConfiguration = new PollConfiguration(),
 		public comments: Comment[] = [],
 		public choices: Choice[] = [],
diff --git a/src/app/features/administration/administration.module.ts b/src/app/features/administration/administration.module.ts
index bdd7c09c..f9bcb2e3 100644
--- a/src/app/features/administration/administration.module.ts
+++ b/src/app/features/administration/administration.module.ts
@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { ReactiveFormsModule } from '@angular/forms';
+import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { TranslateModule } from '@ngx-translate/core';
 
 import { SharedModule } from '../../shared/shared.module';
@@ -35,6 +35,7 @@ import { AdvancedConfigComponent } from './form/advanced-config/advanced-config.
 		CommonModule,
 		ReactiveFormsModule,
 		SharedModule,
+		FormsModule,
 		TranslateModule.forChild({ extend: true }),
 		DateValueAccessorModule,
 	],
diff --git a/src/app/features/administration/form/base-config/base-config.component.html b/src/app/features/administration/form/base-config/base-config.component.html
index 9346d401..b98a29d8 100644
--- a/src/app/features/administration/form/base-config/base-config.component.html
+++ b/src/app/features/administration/form/base-config/base-config.component.html
@@ -4,11 +4,12 @@
 			<p>
 				{{ 'creation.choose_title' | translate }}
 			</p>
+			<h2 class="title is-2">slug: {{ form.value.slug }}</h2>
 			<br />
 			<label class="hidden" for="title">Titre</label>
 			<input
-				#title
 				matInput
+				#title
 				[placeholder]="'creation.choose_title_placeholder' | translate"
 				formControlName="title"
 				id="title"
@@ -18,11 +19,11 @@
 			/>
 			<button
 				mat-button
-				*ngIf="title.value"
+				*ngIf="form.value.title"
 				matSuffix
 				mat-icon-button
 				aria-label="Clear"
-				(click)="title.value = ''"
+				(click)="form.patchValue({ title: '' })"
 			>
 				<i class="fa fa-close"></i>
 			</button>
@@ -35,7 +36,7 @@
 			</label>
 
 			<input
-				#title
+				#creatorEmail
 				matInput
 				placeholder="{{ 'creation.email_placeholder' | translate }}"
 				formControlName="creatorEmail"
@@ -49,57 +50,64 @@
 					{{ 'creation.name' | translate }}
 				</span>
 			</label>
-			<input #title matInput placeholder="pseudo" formControlName="creatorPseudo" id="creatorPseudo" required />
+			<input
+				#creatorPseudo
+				matInput
+				placeholder="pseudo"
+				formControlName="creatorPseudo"
+				id="creatorPseudo"
+				required
+			/>
 		</div>
 
 		<hr />
 	</div>
 
 	<hr />
-	<div class="columns">
-		<div class="column">
-			<!--			<img src="assets/img/undraw_Moving_twwf.svg" alt="image WIP" />-->
-			<div>
-				<h2>
-					{{ 'choices.title' | translate }}
-				</h2>
-				{{ 'dates.add' | translate }}
-				<p>
-					<i>
-						{{ 'choices.helper' | translate }}
-					</i>
-				</p>
-				{{ 'choices.answer_preset_1' | translate }}
-				{{ 'choices.add' | translate }}
-				{{ 'choices.continue' | translate }}
-			</div>
-		</div>
-	</div>
-	<div class="column">
-		<button class="btn btn--warning" (click)="askInitFormDefault()">
-			<i class="fa fa-refresh"></i>
-			Tout réinitialiser
-		</button>
-		<br />
-		<button class="btn is-success" (click)="createPoll()">
-			<i class="fa fa-save"></i>
-			Enregistrer le sondage
-		</button>
-		<br />
-		<button class="btn is-default" (click)="automaticSlug()">
-			<i class="fa fa-refresh"></i>
-			Slug automatique
-		</button>
+	<!--	<div class="columns">-->
+	<!--		<div class="column">-->
+	<!--						<img src="assets/img/undraw_Moving_twwf.svg" alt="image WIP" />-->
+	<!--			<div>-->
+	<!--				<h2>-->
+	<!--					{{ 'choices.title' | translate }}-->
+	<!--				</h2>-->
+	<!--				{{ 'dates.add' | translate }}-->
+	<!--				<p>-->
+	<!--					<i>-->
+	<!--						{{ 'choices.helper' | translate }}-->
+	<!--					</i>-->
+	<!--				</p>-->
+	<!--				{{ 'choices.answer_preset_1' | translate }}-->
+	<!--				{{ 'choices.add' | translate }}-->
+	<!--				{{ 'choices.continue' | translate }}-->
+	<!--			</div>-->
+	<!--		</div>-->
+	<!--	</div>-->
+	<!--	<div class="column">-->
+	<!--		<button class="btn btn&#45;&#45;warning" (click)="askInitFormDefault()">-->
+	<!--			<i class="fa fa-refresh"></i>-->
+	<!--			Tout réinitialiser-->
+	<!--		</button>-->
+	<!--		<br />-->
+	<!--		<button class="btn is-success" (click)="createPoll()">-->
+	<!--			<i class="fa fa-save"></i>-->
+	<!--			Enregistrer le sondage-->
+	<!--		</button>-->
+	<!--		<br />-->
+	<!--		<button class="btn is-default" (click)="automaticSlug()">-->
+	<!--			<i class="fa fa-refresh"></i>-->
+	<!--			Slug automatique-->
+	<!--		</button>-->
 
-		<div class="columns">
-			<div class="column">
-				Slug:
-			</div>
-			<div class="column">
-				<div class="well">
-					{{ poll.slug }}
-				</div>
-			</div>
-		</div>
-	</div>
+	<!--		<div class="columns">-->
+	<!--			<div class="column">-->
+	<!--				Slug:-->
+	<!--			</div>-->
+	<!--			<div class="column">-->
+	<!--				<div class="well">-->
+	<!--					{{ form.slug }}-->
+	<!--				</div>-->
+	<!--			</div>-->
+	<!--		</div>-->
+	<!--	</div>-->
 </form>
diff --git a/src/app/features/administration/form/base-config/base-config.component.ts b/src/app/features/administration/form/base-config/base-config.component.ts
index beafa8c3..74aa2626 100644
--- a/src/app/features/administration/form/base-config/base-config.component.ts
+++ b/src/app/features/administration/form/base-config/base-config.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, Inject, Input, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, EventEmitter, Inject, Input, OnInit, Output } from '@angular/core';
 import { ToastService } from '../../../../core/services/toast.service';
 import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { UuidService } from '../../../../core/services/uuid.service';
@@ -30,12 +30,10 @@ export class BaseConfigComponent implements OnInit {
 		@Inject(DOCUMENT) private document: Document
 	) {}
 
-	ngOnInit(): void {
-		this.initFormDefault(false);
-	}
+	ngOnInit(): void {}
 
 	askInitFormDefault(): void {
-		this.initFormDefault(false);
+		// this.initFormDefault(false);
 		this.toastService.display('formulaire réinitialisé');
 	}
 
@@ -60,29 +58,6 @@ export class BaseConfigComponent implements OnInit {
 		// }
 	}
 
-	initFormDefault(showDemoValues = true): void {
-		this.form = this.fb.group({
-			title: ['', [Validators.required, Validators.minLength(12)]],
-			creatorPseudo: ['', [Validators.required]],
-			creatorEmail: ['', [Validators.required]],
-			slug: [this.uuidService.getUUID(), [Validators.required]],
-			description: ['', [Validators.required]],
-			choices: new FormArray([]),
-			whoModifiesAnswers: ['', [Validators.required]],
-			whoCanChangeAnswers: ['', [Validators.required]],
-			isAboutDate: [true, [Validators.required]],
-			startDateInterval: ['', [Validators.required]],
-			endDateInterval: ['', [Validators.required]],
-			isProtectedByPassword: [false, [Validators.required]],
-			isOwnerNotifiedByEmailOnNewVote: [false, [Validators.required]],
-			isOwnerNotifiedByEmailOnNewComment: [false, [Validators.required]],
-			isMaybeAnswerAvailable: [false, [Validators.required]],
-			areResultsPublic: [true, [Validators.required]],
-			expiracyNumberOfDays: [60, [Validators.required, Validators.min(0)]],
-		});
-		console.log('this.form ', this.form);
-	}
-
 	public updateSlug(): void {
 		const newValueFormatted = 'TODO';
 		this.form.patchValue({ slug: newValueFormatted });
@@ -94,4 +69,8 @@ export class BaseConfigComponent implements OnInit {
 	automaticSlug() {
 		this.form.patchValue({ slug: this.pollService.makeSlug(this.poll) });
 	}
+
+	formUpdate() {
+		this.formChange.emit(this.form);
+	}
 }
diff --git a/src/app/features/administration/form/form.component.html b/src/app/features/administration/form/form.component.html
index 710a95ad..7db1461c 100644
--- a/src/app/features/administration/form/form.component.html
+++ b/src/app/features/administration/form/form.component.html
@@ -1,13 +1,29 @@
 <div class="admin-form padded">
 	<form [formGroup]="form">
-		<h1>
-			{{ 'creation.title' | translate }}
-		</h1>
-		<p class="subtitle">
-			{{ 'creation.want' | translate }}
-		</p>
-		<app-kind-select [poll]="poll" [form]="form"></app-kind-select>
-		<app-base-config [poll]="poll" [form]="form"></app-base-config>
+		<div class="columns">
+			<div class="column">
+				<h1>
+					{{ 'creation.title' | translate }}
+				</h1>
+				<p class="subtitle">
+					{{ 'creation.want' | translate }}
+				</p>
+				<app-kind-select [(form)]="form"></app-kind-select>
+				<app-base-config [(form)]="form"></app-base-config>
+			</div>
+			<div class="column">
+				<pre class="debug padded warning">
+				form values :
+					{{ form.value | json }}
+				</pre
+				>
+				<pre class="debug padded warning">
+				poll initial values :
+					{{ poll | json }}
+				</pre
+				>
+			</div>
+		</div>
 
 		<!--			choix spécialement pour les dates-->
 		<!--	<app-date-select ng-if="form.kind == 'date'"></app-date-select>-->
diff --git a/src/app/features/administration/form/form.component.ts b/src/app/features/administration/form/form.component.ts
index eb5b3939..7733cb45 100644
--- a/src/app/features/administration/form/form.component.ts
+++ b/src/app/features/administration/form/form.component.ts
@@ -77,20 +77,26 @@ export class FormComponent implements OnInit {
 	 */
 	setDemoValues(): void {
 		this.form.patchValue({
-			title: 'mon titre',
+			title: '',
 			description: 'répondez SVP <3 ! *-* ',
 			slug: this.uuidService.getUUID(),
 			creatorPseudo: 'Chuck Norris',
 			creatorEmail: 'chucknorris@example.com',
 			isAboutDate: true,
-			whoModifiesAnswers: 'everybody',
-			whoCanChangeAnswers: 'everybody',
-			isProtectedByPassword: false,
-			isOwnerNotifiedByEmailOnNewVote: false,
-			isOwnerNotifiedByEmailOnNewComment: false,
-			isMaybeAnswerAvailable: false,
-			areResultsPublic: true,
-			expiracyNumberOfDays: 60,
+			// configuration: {
+			// 	whoModifiesAnswers: 'everybody',
+			// 	whoCanChangeAnswers: 'everybody'
+			// isProtectedByPassword: false,
+			// isOwnerNotifiedByEmailOnNewVote: false,
+			// isOwnerNotifiedByEmailOnNewComment: false,
+			// isMaybeAnswerAvailable: false,
+			// areResultsPublic: true,
+			// expiracyNumberOfDays: 60,
+			// },
+			comments: [],
+			choices: [],
+			dateChoices: [],
+			timeChoices: [],
 		});
 	}
 }

From 237984c04073efa133ee2fd5ba18ee90a9e16a0e Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Fri, 5 Feb 2021 17:02:52 +0100
Subject: [PATCH 10/40] add choices for the future

---
 src/app/core/models/poll.model.ts             |  32 +--
 .../advanced-config.component.html            |  90 +++++-
 .../base-config/base-config.component.html    |  81 +++---
 .../form/base-config/base-config.component.ts |  39 ++-
 .../date-select/date-select.component.html    | 264 +++++++++---------
 .../form/date-select/date-select.component.ts |   9 +-
 .../administration/form/form.component.html   |  25 +-
 .../administration/form/form.component.ts     |  31 +-
 .../form/text-select/text-select.component.ts |   6 +-
 9 files changed, 324 insertions(+), 253 deletions(-)

diff --git a/src/app/core/models/poll.model.ts b/src/app/core/models/poll.model.ts
index 62cfacb1..f7afe108 100644
--- a/src/app/core/models/poll.model.ts
+++ b/src/app/core/models/poll.model.ts
@@ -36,22 +36,22 @@ export class Poll {
 			new User(item.owner.pseudo, item.owner.email, undefined),
 			item.slug,
 			item.title,
-			item.description,
-			item.configuration,
-			item.comments
-				.map(
-					(c: Pick<Comment, 'author' | 'content' | 'dateCreated'>) =>
-						new Comment(c.author, c.content, new Date(c.dateCreated))
-				)
-				.sort(Comment.sortChronologically),
-			item.choices.map((c: Pick<Choice, 'label' | 'imageUrl' | 'participants' | 'counts'>) => {
-				const choice = new Choice(c.label, c.imageUrl, new Map(c.participants));
-				choice.participants.forEach((value, key) => {
-					choice.participants.set(key, new Set(value));
-				});
-				choice.updateCounts();
-				return choice;
-			})
+			item.description
+			// item.configuration,
+			// item.comments
+			// 	.map(
+			// 		(c: Pick<Comment, 'author' | 'content' | 'dateCreated'>) =>
+			// 			new Comment(c.author, c.content, new Date(c.dateCreated))
+			// 	)
+			// 	.sort(Comment.sortChronologically),
+			// item.choices.map((c: Pick<Choice, 'label' | 'imageUrl' | 'participants' | 'counts'>) => {
+			// 	const choice = new Choice(c.label, c.imageUrl, new Map(c.participants));
+			// 	choice.participants.forEach((value, key) => {
+			// 		choice.participants.set(key, new Set(value));
+			// 	});
+			// 	choice.updateCounts();
+			// 	return choice;
+			// })
 		);
 	}
 }
diff --git a/src/app/features/administration/form/advanced-config/advanced-config.component.html b/src/app/features/administration/form/advanced-config/advanced-config.component.html
index 0862e8c7..35a44b7b 100644
--- a/src/app/features/administration/form/advanced-config/advanced-config.component.html
+++ b/src/app/features/administration/form/advanced-config/advanced-config.component.html
@@ -23,9 +23,8 @@
 
 		<br />
 
-		<label for="slug"
-			>Url pour les participants
-
+		<label for="slug">
+			Url personnalisée pour les participants
 			<i class="fa fa-close"></i>
 		</label>
 		<br />
@@ -48,13 +47,16 @@
 		<input #slug matInput id="slug" placeholder="Url" formControlName="slug" required />
 		<br />
 		<div appearance="outline" class="is-not-flex">
-			<mat-label>Nombre de jours avant expiration</mat-label>
+			<mat-label
+				>Nombre de jours avant expiration de la possibilité de voter, après le sondage reste
+				consultable</mat-label
+			>
 			<input
 				#expiracy
 				id="expiracy"
 				matInput
 				type="number"
-				placeholder="Nombre de jours avant expiration"
+				placeholder="Nombre de jours avant fin des votes"
 				formControlName="expiracyNumberOfDays"
 				required
 			/>
@@ -69,15 +71,57 @@
 				<i class="fa fa-close"></i>
 			</button>
 		</div>
+		<div appearance="outline" class="is-not-flex">
+			<mat-label
+				>Nombre de jours avant archivage, après quoi le sondage n'est plus visible par le public</mat-label
+			>
+			<input
+				#archive
+				id="archive"
+				matInput
+				type="number"
+				placeholder="Nombre de jours avant archivage"
+				formControlName="archiveNumberOfDays"
+				required
+			/>
+			<button
+				mat-button
+				*ngIf="archive.value"
+				matSuffix
+				mat-icon-button
+				aria-label="Clear"
+				(click)="archive.value = ''"
+			>
+				<i class="fa fa-close"></i>
+			</button>
+		</div>
 		<mat-checkbox class="is-not-flex" formControlName="areResultsPublic">
 			Les participants pourront consulter les résultats
 		</mat-checkbox>
-		<mat-checkbox class="is-not-flex" formControlName="isAboutDate">
-			Les choix possibles concerneront des dates
-		</mat-checkbox>
+		<h3 class="title is-3">
+			<i class="fa fa-lock"></i>
+			Accès sécurisé
+		</h3>
+
 		<mat-checkbox class="is-not-flex" formControlName="isProtectedByPassword">
 			Le sondage sera protégé par un mot de passe
 		</mat-checkbox>
+
+		<input
+			*ngIf="form.value.isProtectedByPassword"
+			#password
+			id="password"
+			matInput
+			type="password"
+			placeholder="password"
+			formControlName="password"
+			required
+		/>
+
+		<h3 class="title is-3">
+			<i class="fa fa-enveloppe"></i>
+			Notifications
+		</h3>
 		<mat-checkbox class="is-not-flex" formControlName="isOwnerNotifiedByEmailOnNewVote">
 			Vous recevrez un mail à chaque nouvelle participation
 		</mat-checkbox>
@@ -88,4 +132,34 @@
 			La réponse « peut-être » sera disponible
 		</mat-checkbox>
 	</fieldset>
+
+	<fieldset>
+		<h2>
+			Fonctionnalités pas encore disponibles:
+		</h2>
+		<app-wip-todo></app-wip-todo>
+		<mat-checkbox class="is-not-flex" formControlName="isProtectedByPassword">
+			Spécifier un lien unique de vote à des participants définis
+		</mat-checkbox>
+		<mat-checkbox class="is-not-flex" formControlName="allowComments">
+			Autoriser les commentaires
+		</mat-checkbox>
+		<mat-checkbox class="is-not-flex" formControlName="hasMaxCountOfAnswers">
+			Nombre de réponses limitées à ce nombre
+		</mat-checkbox>
+		<input
+			*ngIf="form.value.hasMaxCountOfAnswers"
+			#limitCount
+			id="limitCount"
+			matInput
+			type="number"
+			placeholder="Nombre de réponses max"
+			formControlName="maxCountOfAnswers"
+			required
+		/>
+
+		<mat-checkbox class="is-not-flex" formControlName="isZeroKnoledge">
+			Les informations du sondage seront chiffrés en base de données
+		</mat-checkbox>
+	</fieldset>
 </form>
diff --git a/src/app/features/administration/form/base-config/base-config.component.html b/src/app/features/administration/form/base-config/base-config.component.html
index b98a29d8..85decc75 100644
--- a/src/app/features/administration/form/base-config/base-config.component.html
+++ b/src/app/features/administration/form/base-config/base-config.component.html
@@ -64,50 +64,39 @@
 	</div>
 
 	<hr />
-	<!--	<div class="columns">-->
-	<!--		<div class="column">-->
-	<!--						<img src="assets/img/undraw_Moving_twwf.svg" alt="image WIP" />-->
-	<!--			<div>-->
-	<!--				<h2>-->
-	<!--					{{ 'choices.title' | translate }}-->
-	<!--				</h2>-->
-	<!--				{{ 'dates.add' | translate }}-->
-	<!--				<p>-->
-	<!--					<i>-->
-	<!--						{{ 'choices.helper' | translate }}-->
-	<!--					</i>-->
-	<!--				</p>-->
-	<!--				{{ 'choices.answer_preset_1' | translate }}-->
-	<!--				{{ 'choices.add' | translate }}-->
-	<!--				{{ 'choices.continue' | translate }}-->
-	<!--			</div>-->
-	<!--		</div>-->
-	<!--	</div>-->
-	<!--	<div class="column">-->
-	<!--		<button class="btn btn&#45;&#45;warning" (click)="askInitFormDefault()">-->
-	<!--			<i class="fa fa-refresh"></i>-->
-	<!--			Tout réinitialiser-->
-	<!--		</button>-->
-	<!--		<br />-->
-	<!--		<button class="btn is-success" (click)="createPoll()">-->
-	<!--			<i class="fa fa-save"></i>-->
-	<!--			Enregistrer le sondage-->
-	<!--		</button>-->
-	<!--		<br />-->
-	<!--		<button class="btn is-default" (click)="automaticSlug()">-->
-	<!--			<i class="fa fa-refresh"></i>-->
-	<!--			Slug automatique-->
-	<!--		</button>-->
-
-	<!--		<div class="columns">-->
-	<!--			<div class="column">-->
-	<!--				Slug:-->
-	<!--			</div>-->
-	<!--			<div class="column">-->
-	<!--				<div class="well">-->
-	<!--					{{ form.slug }}-->
-	<!--				</div>-->
-	<!--			</div>-->
-	<!--		</div>-->
-	<!--	</div>-->
+	<div class="columns">
+		<div class="column">
+			<img src="assets/img/undraw_Moving_twwf.svg" alt="image WIP" />
+			<div>
+				<h2>
+					{{ 'choices.title' | translate }}
+				</h2>
+				{{ 'dates.add' | translate }}
+				<p>
+					<i>
+						{{ 'choices.helper' | translate }}
+					</i>
+				</p>
+				{{ 'choices.answer_preset_1' | translate }}
+				{{ 'choices.add' | translate }}
+				{{ 'choices.continue' | translate }}
+			</div>
+		</div>
+	</div>
+	<div class="column">
+		<button class="btn btn--warning" (click)="askInitFormDefault()">
+			<i class="fa fa-refresh"></i>
+			Tout réinitialiser
+		</button>
+		<br />
+		<button class="btn is-success" (click)="createPoll()">
+			<i class="fa fa-save"></i>
+			Enregistrer le sondage
+		</button>
+		<br />
+		<button class="btn is-default" (click)="automaticSlug()">
+			<i class="fa fa-refresh"></i>
+			Slug automatique
+		</button>
+	</div>
 </form>
diff --git a/src/app/features/administration/form/base-config/base-config.component.ts b/src/app/features/administration/form/base-config/base-config.component.ts
index 74aa2626..2a27d8e1 100644
--- a/src/app/features/administration/form/base-config/base-config.component.ts
+++ b/src/app/features/administration/form/base-config/base-config.component.ts
@@ -1,6 +1,6 @@
-import { ChangeDetectorRef, Component, EventEmitter, Inject, Input, OnInit, Output } from '@angular/core';
+import { ChangeDetectorRef, Component, Inject, Input, OnInit } from '@angular/core';
 import { ToastService } from '../../../../core/services/toast.service';
-import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { FormBuilder, FormGroup } from '@angular/forms';
 import { UuidService } from '../../../../core/services/uuid.service';
 import { PollService } from '../../../../core/services/poll.service';
 import { ApiService } from '../../../../core/services/api.service';
@@ -13,7 +13,7 @@ import { Poll } from '../../../../core/models/poll.model';
 	templateUrl: './base-config.component.html',
 	styleUrls: ['./base-config.component.scss'],
 })
-export class BaseConfigComponent implements OnInit {
+export class BaseConfigComponent {
 	@Input()
 	public poll?: Poll;
 	@Input()
@@ -30,8 +30,6 @@ export class BaseConfigComponent implements OnInit {
 		@Inject(DOCUMENT) private document: Document
 	) {}
 
-	ngOnInit(): void {}
-
 	askInitFormDefault(): void {
 		// this.initFormDefault(false);
 		this.toastService.display('formulaire réinitialisé');
@@ -43,19 +41,18 @@ export class BaseConfigComponent implements OnInit {
 		console.log('newpoll', newpoll);
 		const router = this.router;
 
-		this.apiService.createPoll(newpoll).then((resp) => {
-			console.log('resp', resp);
-			router.navigate(['success']);
-		});
-		// this.router
-		// if (this.form.valid) {
-		// 	console.log('Le sondage est correctement rempli, prêt à enregistrer.');
-		// 	const newpoll = this.pollService.newPollFromForm(this.form);
-		// 	// TODO : save the poll
-		// 	this.apiService.createPoll(newpoll);
-		// } else {
-		// 	this.toastService.display('invalid form');
-		// }
+		if (this.form.valid) {
+			console.log('Le sondage est correctement rempli, prêt à enregistrer.');
+			const newpoll = this.pollService.newPollFromForm(this.form);
+			// TODO : save the poll
+
+			this.apiService.createPoll(newpoll).then((resp) => {
+				console.log('resp', resp);
+				router.navigate(['success']);
+			});
+		} else {
+			this.toastService.display('invalid form');
+		}
 	}
 
 	public updateSlug(): void {
@@ -67,10 +64,6 @@ export class BaseConfigComponent implements OnInit {
 	 * set the poll slug from other data of the poll
 	 */
 	automaticSlug() {
-		this.form.patchValue({ slug: this.pollService.makeSlug(this.poll) });
-	}
-
-	formUpdate() {
-		this.formChange.emit(this.form);
+		this.form.patchValue({ slug: this.pollService.makeSlug(this.form.value) });
 	}
 }
diff --git a/src/app/features/administration/form/date-select/date-select.component.html b/src/app/features/administration/form/date-select/date-select.component.html
index a0d76865..70e30ca3 100644
--- a/src/app/features/administration/form/date-select/date-select.component.html
+++ b/src/app/features/administration/form/date-select/date-select.component.html
@@ -1,139 +1,145 @@
 <div class="date-selection">
-	<!--	interval-->
+	<form [formGroup]="form">
+		<!--	interval-->
 
-	<section *ngIf="showDateInterval" class="date-interval form-row">
-		<button
-			(click)="showDateInterval = !showDateInterval"
-			[ngClass]="{ active: showDateInterval }"
-			class="btn btn--primary"
-			id="toggle_interval_button"
-		>
-			<i class="fa fa-clock-o" aria-hidden="true"></i>
-			{{ 'dates.add_interval' | translate }}
-		</button>
-		<h2>{{ 'dates.add_interval' | translate }}</h2>
-		<div class="columns">
-			<div class="column">
-				{{ 'dates.interval_propose' | translate }}
-			</div>
-			<div class="column">
-				<label for="start_interval" class="hidden">start</label>
-				<input id="start_interval" (change)="countDays()" formControlName="startDateInterval" type="date" />
-			</div>
-		</div>
-		<div class="columns">
-			<div class="column">
-				{{ 'dates.interval_span' | translate }}
-			</div>
-			<div class="column">
-				<label for="end_interval" class="hidden">end</label>
-				<input id="end_interval" formControlName="endDateInterval" type="date" />
-			</div>
-		</div>
-		<button (click)="addIntervalOfDates()" class="btn btn-block btn--primary">
-			<i class="fa fa-plus" aria-hidden="true"></i>
-			{{ 'dates.interval_button' | translate }}
-			{{ intervalDays }}
-			{{ 'dates.interval_button_dates' | translate }}
-		</button>
-	</section>
+		<!--	<section *ngIf="showDateInterval" class="date-interval form-row">-->
+		<!--		<button-->
+		<!--			(click)="showDateInterval = !showDateInterval"-->
+		<!--			[ngClass]="{ active: showDateInterval }"-->
+		<!--			class="btn btn&#45;&#45;primary"-->
+		<!--			id="toggle_interval_button"-->
+		<!--		>-->
+		<!--			<i class="fa fa-clock-o" aria-hidden="true"></i>-->
+		<!--			{{ 'dates.add_interval' | translate }}-->
+		<!--		</button>-->
+		<!--		<h2>{{ 'dates.add_interval' | translate }}</h2>-->
+		<!--		<div class="columns">-->
+		<!--			<div class="column">-->
+		<!--				{{ 'dates.interval_propose' | translate }}-->
+		<!--			</div>-->
+		<!--			<div class="column">-->
+		<!--				<label for="start_interval" class="hidden">start</label>-->
+		<!--				<input id="start_interval" (change)="countDays()" formControlName="startDateInterval" type="date" />-->
+		<!--			</div>-->
+		<!--		</div>-->
+		<!--		<div class="columns">-->
+		<!--			<div class="column">-->
+		<!--				{{ 'dates.interval_span' | translate }}-->
+		<!--			</div>-->
+		<!--			<div class="column">-->
+		<!--				<label for="end_interval" class="hidden">end</label>-->
+		<!--				<input id="end_interval" formControlName="endDateInterval" type="date" />-->
+		<!--			</div>-->
+		<!--		</div>-->
+		<!--		<button (click)="addIntervalOfDates()" class="btn btn-block btn&#45;&#45;primary">-->
+		<!--			<i class="fa fa-plus" aria-hidden="true"></i>-->
+		<!--			{{ 'dates.interval_button' | translate }}-->
+		<!--			{{ intervalDays }}-->
+		<!--			{{ 'dates.interval_button_dates' | translate }}-->
+		<!--		</button>-->
+		<!--	</section>-->
 
-	<div class="dates-list">
-		<div class="title">
-			<span class="count-dates">
-				{{ timeList.length }}
+		<div class="dates-list">
+			<div class="title">
+				<span class="count-dates">
+					{{ timeList.length }}
+				</span>
+				<span class="count-dates-txt">
+					{{ 'dates.count_time' | translate }}
+					(pour chaque jour)
+				</span>
+			</div>
+			<div class="actions">
+				<button
+					(click)="addTime()"
+					*ngIf="'false' === allowSeveralHours"
+					class="btn btn--primary"
+					id="add_time_button"
+				>
+					<i class="fa fa-plus" aria-hidden="true"></i>
+					{{ 'dates.add_time' | translate }}
+				</button>
+				<button
+					(click)="removeAllTimes()"
+					*ngIf="'false' === allowSeveralHours"
+					class="btn btn--warning"
+					id="remove_time_button"
+				>
+					<i class="fa fa-trash" aria-hidden="true"></i>
+					Aucune plage horaire
+				</button>
+				<button
+					(click)="resetTimes()"
+					*ngIf="'false' === allowSeveralHours"
+					class="btn btn--warning"
+					id="reset_time_button"
+				>
+					<i class="fa fa-refresh" aria-hidden="true"></i>
+					réinitialiser
+				</button>
+			</div>
+
+			<div *ngIf="'false' === allowSeveralHours" class="identical-dates">
+				<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
+					<div *ngFor="let time of timeList; index as id" class="time-choice" cdkDrag>
+						<label for="timeChoices_{{ id }}">
+							<i class="fa fa-clock-o" aria-hidden="true"></i>
+						</label>
+						<input
+							[(ngModel)]="time.literal"
+							name="timeChoices_{{ id }}"
+							type="text"
+							id="timeChoices_{{ id }}"
+						/>
+						<button (click)="time.timeList.splice(id, 1)" class="btn btn-warning">
+							<i class="fa fa-times" aria-hidden="true"></i>
+						</button>
+					</div>
+				</div>
+			</div>
+			<hr />
+			<span class="count-dates title">
+				{{ dateList.length }}
 			</span>
-			<span class="count-dates-txt">
-				{{ 'dates.count_time' | translate }}
-				(pour chaque jour)
+			<span>
+				{{ 'dates.count_dates' | translate }}
 			</span>
-		</div>
-		<div class="actions">
-			<button
-				(click)="addTime()"
-				*ngIf="'false' === allowSeveralHours"
-				class="btn btn--primary"
-				id="add_time_button"
-			>
-				<i class="fa fa-plus" aria-hidden="true"></i>
-				{{ 'dates.add_time' | translate }}
+			<button class="btn btn--primary" (click)="addChoice()">
+				{{ 'dates.add' | translate }}
 			</button>
-			<button
-				(click)="removeAllTimes()"
-				*ngIf="'false' === allowSeveralHours"
-				class="btn btn--warning"
-				id="remove_time_button"
-			>
-				<i class="fa fa-trash" aria-hidden="true"></i>
-				Aucune plage horaire
-			</button>
-			<button
-				(click)="resetTimes()"
-				*ngIf="'false' === allowSeveralHours"
-				class="btn btn--warning"
-				id="reset_time_button"
-			>
-				<i class="fa fa-refresh" aria-hidden="true"></i>
-				réinitialiser
-			</button>
-		</div>
-
-		<div *ngIf="'false' === allowSeveralHours" class="identical-dates">
-			<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
-				<div *ngFor="let time of timeList; index as id" class="time-choice" cdkDrag>
-					<label for="timeChoices_{{ id }}">
-						<i class="fa fa-clock-o" aria-hidden="true"></i>
-					</label>
-					<input
-						[(ngModel)]="time.literal"
-						name="timeChoices_{{ id }}"
-						type="text"
-						id="timeChoices_{{ id }}"
-					/>
-					<button (click)="time.timeList.splice(id, 1)" class="btn btn-warning">
-						<i class="fa fa-times" aria-hidden="true"></i>
-					</button>
+			<div *ngFor="let choice of dateList; index as id" class="date-choice">
+				{{ id }})
+				<input
+					[(ngModel)]="choice.date_object"
+					name="dateChoices_{{ id }}"
+					id="dateChoices_{{ id }}"
+					useValueAsDate
+					type="date"
+				/>
+				<button (click)="dateList.splice(id, 1)" class="btn btn-warning">
+					<i class="fa fa-times" aria-hidden="true"></i>
+				</button>
+				<button
+					(click)="addTimeToDate(choice, id)"
+					*ngIf="'true' === allowSeveralHours"
+					class="btn btn--primary"
+				>
+					{{ 'dates.add_time' | translate }}
+				</button>
+				<div *ngIf="'true' === allowSeveralHours" class="several-times">
+					<div *ngFor="let timeItem of choice.timeList; index as idTime" class="time-choice">
+						<input
+							[(ngModel)]="timeItem.literal"
+							name="dateTime_{{ id }}_Choices_{{ idTime }}"
+							id="dateTime_{{ id }}_Choices_{{ idTime }}"
+							type="text"
+						/>
+						<button (click)="choice.timeList.splice(idTime, 1)" class="btn btn-warning">
+							<i class="fa fa-times" aria-hidden="true"></i>
+						</button>
+					</div>
 				</div>
 			</div>
 		</div>
-		<hr />
-		<span class="count-dates title">
-			{{ dateList.length }}
-		</span>
-		<span>
-			{{ 'dates.count_dates' | translate }}
-		</span>
-		<button class="btn btn--primary" (click)="addChoice()">
-			{{ 'dates.add' | translate }}
-		</button>
-		<div *ngFor="let choice of dateList; index as id" class="date-choice">
-			{{ id }})
-			<input
-				[(ngModel)]="choice.date_object"
-				name="dateChoices_{{ id }}"
-				id="dateChoices_{{ id }}"
-				useValueAsDate
-				type="date"
-			/>
-			<button (click)="dateList.splice(id, 1)" class="btn btn-warning">
-				<i class="fa fa-times" aria-hidden="true"></i>
-			</button>
-			<button (click)="addTimeToDate(choice, id)" *ngIf="'true' === allowSeveralHours" class="btn btn--primary">
-				{{ 'dates.add_time' | translate }}
-			</button>
-			<div *ngIf="'true' === allowSeveralHours" class="several-times">
-				<div *ngFor="let timeItem of choice.timeList; index as idTime" class="time-choice">
-					<input
-						[(ngModel)]="timeItem.literal"
-						name="dateTime_{{ id }}_Choices_{{ idTime }}"
-						id="dateTime_{{ id }}_Choices_{{ idTime }}"
-						type="text"
-					/>
-					<button (click)="choice.timeList.splice(idTime, 1)" class="btn btn-warning">
-						<i class="fa fa-times" aria-hidden="true"></i>
-					</button>
-				</div>
-			</div>
-		</div>
-	</div>
+	</form>
 </div>
diff --git a/src/app/features/administration/form/date-select/date-select.component.ts b/src/app/features/administration/form/date-select/date-select.component.ts
index 23efd1aa..42b5f7d5 100644
--- a/src/app/features/administration/form/date-select/date-select.component.ts
+++ b/src/app/features/administration/form/date-select/date-select.component.ts
@@ -9,6 +9,7 @@ import { Router } from '@angular/router';
 import { DOCUMENT } from '@angular/common';
 import { DateChoice, otherDefaultDates } from '../../../old-stuff/config/defaultConfigs';
 import { Poll } from '../../../../core/models/poll.model';
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 
 @Component({
 	selector: 'app-date-select',
@@ -16,8 +17,6 @@ import { Poll } from '../../../../core/models/poll.model';
 	styleUrls: ['./date-select.component.scss'],
 })
 export class DateSelectComponent implements OnInit {
-	@Input()
-	public poll?: Poll;
 	@Input()
 	public form: FormGroup;
 
@@ -163,7 +162,7 @@ export class DateSelectComponent implements OnInit {
 				imageUrl: 'mon url',
 			});
 		}
-		this.choices.push(newControlGroup);
+		this.form.value.choices.push(newControlGroup);
 		this.cd.detectChanges();
 		console.log('this.choices.length', this.choices.length);
 
@@ -238,4 +237,8 @@ export class DateSelectComponent implements OnInit {
 		this.addChoice('raisin');
 		this.addChoice('abricot');
 	}
+
+	drop(event: CdkDragDrop<string[]>) {
+		moveItemInArray(this.form.value.choices, event.previousIndex, event.currentIndex);
+	}
 }
diff --git a/src/app/features/administration/form/form.component.html b/src/app/features/administration/form/form.component.html
index 7db1461c..a79c0e8c 100644
--- a/src/app/features/administration/form/form.component.html
+++ b/src/app/features/administration/form/form.component.html
@@ -8,26 +8,27 @@
 				<p class="subtitle">
 					{{ 'creation.want' | translate }}
 				</p>
-				<app-kind-select [(form)]="form"></app-kind-select>
-				<app-base-config [(form)]="form"></app-base-config>
+				<app-kind-select [form]="form"></app-kind-select>
+				<app-date-select ng-if="form.value.isAboutDate" [form]="form"></app-date-select>
+				<app-text-select ng-if="!form.value.isAboutDate" [form]="form"></app-text-select>
+
+				<app-base-config [form]="form"></app-base-config>
 			</div>
-			<div class="column">
-				<pre class="debug padded warning">
+		</div>
+		<div class="column">
+			<pre class="debug padded warning">
 				form values :
 					{{ form.value | json }}
 				</pre
-				>
-				<pre class="debug padded warning">
+			>
+			<pre class="debug padded warning">
 				poll initial values :
-					{{ poll | json }}
+				{{ poll | json }}
 				</pre
-				>
-			</div>
+			>
 		</div>
-
 		<!--			choix spécialement pour les dates-->
-		<!--	<app-date-select ng-if="form.kind == 'date'"></app-date-select>-->
-		<!--	<app-text-select ng-if="form.kind == 'classic'"></app-text-select>-->
+
 		<button class="btn is-info" (click)="advancedDisplayEnabled = !advancedDisplayEnabled">
 			<i class="fa fa-save"></i>
 			{{ 'creation.advanced' | translate }}
diff --git a/src/app/features/administration/form/form.component.ts b/src/app/features/administration/form/form.component.ts
index 7733cb45..3755d291 100644
--- a/src/app/features/administration/form/form.component.ts
+++ b/src/app/features/administration/form/form.component.ts
@@ -20,7 +20,7 @@ export class FormComponent implements OnInit {
 	public poll?: Poll;
 	public form: FormGroup;
 
-	public advancedDisplayEnabled = false;
+	public advancedDisplayEnabled = true;
 
 	constructor(
 		private fb: FormBuilder,
@@ -34,10 +34,6 @@ export class FormComponent implements OnInit {
 		@Inject(DOCUMENT) private document: any
 	) {}
 
-	drop(event: CdkDragDrop<string[]>) {
-		// moveItemInArray(this.choices, event.previousIndex, event.currentIndex);
-	}
-
 	ngOnInit(): void {
 		this.initFormDefault();
 
@@ -53,16 +49,21 @@ export class FormComponent implements OnInit {
 			slug: [this.uuidService.getUUID(), [Validators.required]],
 			description: ['', [Validators.required]],
 			choices: new FormArray([]),
+			// configuration: new FormGroup(),
 			whoModifiesAnswers: ['', [Validators.required]],
 			whoCanChangeAnswers: ['', [Validators.required]],
 			isAboutDate: [true, [Validators.required]],
 			startDateInterval: ['', [Validators.required]],
 			endDateInterval: ['', [Validators.required]],
 			isProtectedByPassword: [false, [Validators.required]],
+			hasMaxCountOfAnswers: [true, [Validators.required]],
+			allowComments: [true, [Validators.required]],
+			maxCountOfAnswers: [150, [Validators.required]],
 			isOwnerNotifiedByEmailOnNewVote: [false, [Validators.required]],
 			isOwnerNotifiedByEmailOnNewComment: [false, [Validators.required]],
 			isMaybeAnswerAvailable: [false, [Validators.required]],
 			areResultsPublic: [true, [Validators.required]],
+			password: [this.uuidService.getUUID(), [Validators.required]],
 			expiracyNumberOfDays: [60, [Validators.required, Validators.min(0)]],
 		});
 		console.log('this.form ', this.form);
@@ -83,16 +84,16 @@ export class FormComponent implements OnInit {
 			creatorPseudo: 'Chuck Norris',
 			creatorEmail: 'chucknorris@example.com',
 			isAboutDate: true,
-			// configuration: {
-			// 	whoModifiesAnswers: 'everybody',
-			// 	whoCanChangeAnswers: 'everybody'
-			// isProtectedByPassword: false,
-			// isOwnerNotifiedByEmailOnNewVote: false,
-			// isOwnerNotifiedByEmailOnNewComment: false,
-			// isMaybeAnswerAvailable: false,
-			// areResultsPublic: true,
-			// expiracyNumberOfDays: 60,
-			// },
+			configuration: {
+				whoModifiesAnswers: 'everybody',
+				whoCanChangeAnswers: 'everybody',
+				isProtectedByPassword: false,
+				isOwnerNotifiedByEmailOnNewVote: false,
+				isOwnerNotifiedByEmailOnNewComment: false,
+				isMaybeAnswerAvailable: false,
+				areResultsPublic: true,
+				expiracyNumberOfDays: 60,
+			},
 			comments: [],
 			choices: [],
 			dateChoices: [],
diff --git a/src/app/features/administration/form/text-select/text-select.component.ts b/src/app/features/administration/form/text-select/text-select.component.ts
index 76bb46cb..f821e3ed 100644
--- a/src/app/features/administration/form/text-select/text-select.component.ts
+++ b/src/app/features/administration/form/text-select/text-select.component.ts
@@ -1,4 +1,5 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { FormGroup } from '@angular/forms';
 
 @Component({
 	selector: 'app-text-select',
@@ -6,6 +7,9 @@ import { Component, OnInit } from '@angular/core';
 	styleUrls: ['./text-select.component.scss'],
 })
 export class TextSelectComponent implements OnInit {
+	@Input()
+	public form: FormGroup;
+
 	constructor() {}
 
 	ngOnInit(): void {}

From 2a4219e14941679da323d1fd066d6fb6ca62e6f9 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Fri, 5 Feb 2021 23:03:49 +0100
Subject: [PATCH 11/40] harmonizing poll default properties with payload and
 advanced config

---
 src/app/core/models/configuration.model.ts    |  26 +-
 src/app/core/models/poll.model.ts             |   3 +
 src/app/core/services/poll.service.ts         |   2 +-
 .../advanced-config.component.html            |  12 +-
 .../date-select/date-select.component.html    | 271 +++++++++---------
 .../administration/form/form.component.html   |  70 +++--
 .../administration/form/form.component.ts     |  10 +-
 .../stepper/stepper.component.ts              |   2 +-
 src/environments/environment.prod.ts          |   2 +-
 src/environments/environment.ts               |   3 +-
 10 files changed, 206 insertions(+), 195 deletions(-)

diff --git a/src/app/core/models/configuration.model.ts b/src/app/core/models/configuration.model.ts
index 8ec766f2..c78595d7 100644
--- a/src/app/core/models/configuration.model.ts
+++ b/src/app/core/models/configuration.model.ts
@@ -3,26 +3,32 @@ import { DateService } from '../services/date.service';
 
 export class PollConfiguration {
 	constructor(
-		public isAboutDate: boolean = false,
-		public isProtectedByPassword: boolean = false,
+		public allowComments: boolean = true,
+		public areResultsPublic: boolean = true,
+		public dateCreated: Date = new Date(Date.now()),
 		public password: string = '',
+		public isAboutDate: boolean = false,
+		public isAllowingtoChangeOwnAnswers: boolean = true,
+		public isMaybeAnswerAvailable: boolean = false,
+		public isProtectedByPassword: boolean = false,
 		public isOwnerNotifiedByEmailOnNewVote: boolean = false,
 		public isOwnerNotifiedByEmailOnNewComment: boolean = false,
-		public isMaybeAnswerAvailable: boolean = false,
-		public areResultsPublic: boolean = true,
-		public isAllowingtoChangeOwnAnswers: boolean = true,
+		public isZeroKnoledge: boolean = true,
+		public hasSeveralHours: boolean = false,
+		public hasMaxCountOfAnswers: boolean = false,
 		public whoCanChangeAnswers: string = 'everybody',
-		public dateCreated: Date = new Date(Date.now()),
-		public expiresDaysDelay: number = environment.poll.defaultConfig.expiracyInDays,
+		public maxCountOfAnswers: number = environment.poll.defaultConfig.maxCountOfAnswers,
+		public expiresDaysDelay: number = environment.poll.defaultConfig.expiresDaysDelay,
 		public expiracyAfterLastModificationInDays: number = environment.poll.defaultConfig
 			.expiracyAfterLastModificationInDays,
-		public expires: Date = DateService.addDaysToDate(
-			environment.poll.defaultConfig.expiracyInDays,
+		// date after creation day when people will not be able to vote anymore
+		public expiracyDate: Date = DateService.addDaysToDate(
+			environment.poll.defaultConfig.expiresDaysDelay,
 			new Date(Date.now())
 		)
 	) {}
 
 	public static isArchived(configuration: PollConfiguration): boolean {
-		return configuration.expires ? DateService.isDateInPast(configuration.expires) : undefined;
+		return configuration.expiracyDate ? DateService.isDateInPast(configuration.expiracyDate) : undefined;
 	}
 }
diff --git a/src/app/core/models/poll.model.ts b/src/app/core/models/poll.model.ts
index f7afe108..69674ca9 100644
--- a/src/app/core/models/poll.model.ts
+++ b/src/app/core/models/poll.model.ts
@@ -14,6 +14,9 @@ export class Poll {
 		public creatorPseudo?: string,
 		public creatorEmail?: string,
 		public isAboutDate?: boolean,
+		public isZeroKnoledge?: boolean,
+		public allowSeveralHours?: boolean,
+		public archiveNumberOfDays?: number,
 		public configuration: PollConfiguration = new PollConfiguration(),
 		public comments: Comment[] = [],
 		public choices: Choice[] = [],
diff --git a/src/app/core/services/poll.service.ts b/src/app/core/services/poll.service.ts
index d597e52d..501ff08b 100644
--- a/src/app/core/services/poll.service.ts
+++ b/src/app/core/services/poll.service.ts
@@ -64,7 +64,7 @@ export class PollService implements Resolve<Poll> {
 				console.log('getAllAvailablePolls res', res);
 			});
 		} catch (e) {
-			console.log('getAllAvailablePolls e', e);
+			console.error('getAllAvailablePolls e', e);
 		}
 	}
 
diff --git a/src/app/features/administration/form/advanced-config/advanced-config.component.html b/src/app/features/administration/form/advanced-config/advanced-config.component.html
index 35a44b7b..30f01084 100644
--- a/src/app/features/administration/form/advanced-config/advanced-config.component.html
+++ b/src/app/features/administration/form/advanced-config/advanced-config.component.html
@@ -52,8 +52,8 @@
 				consultable</mat-label
 			>
 			<input
-				#expiracy
-				id="expiracy"
+				#expiresDaysDelay
+				id="expiresDaysDelay"
 				matInput
 				type="number"
 				placeholder="Nombre de jours avant fin des votes"
@@ -62,11 +62,11 @@
 			/>
 			<button
 				mat-button
-				*ngIf="expiracy.value"
+				*ngIf="expiresDaysDelay.value"
 				matSuffix
 				mat-icon-button
 				aria-label="Clear"
-				(click)="expiracy.value = ''"
+				(click)="expiresDaysDelay.value = ''"
 			>
 				<i class="fa fa-close"></i>
 			</button>
@@ -149,8 +149,8 @@
 		</mat-checkbox>
 		<input
 			*ngIf="form.value.hasMaxCountOfAnswers"
-			#limitCount
-			id="limitCount"
+			#maxCountOfAnswers
+			id="maxCountOfAnswers"
 			matInput
 			type="number"
 			placeholder="Nombre de réponses max"
diff --git a/src/app/features/administration/form/date-select/date-select.component.html b/src/app/features/administration/form/date-select/date-select.component.html
index 70e30ca3..b158044c 100644
--- a/src/app/features/administration/form/date-select/date-select.component.html
+++ b/src/app/features/administration/form/date-select/date-select.component.html
@@ -1,145 +1,146 @@
 <div class="date-selection">
-	<form [formGroup]="form">
-		<!--	interval-->
+	<!--	<form [formGroup]="form">-->
+	<!--	interval-->
 
-		<!--	<section *ngIf="showDateInterval" class="date-interval form-row">-->
-		<!--		<button-->
-		<!--			(click)="showDateInterval = !showDateInterval"-->
-		<!--			[ngClass]="{ active: showDateInterval }"-->
-		<!--			class="btn btn&#45;&#45;primary"-->
-		<!--			id="toggle_interval_button"-->
-		<!--		>-->
-		<!--			<i class="fa fa-clock-o" aria-hidden="true"></i>-->
-		<!--			{{ 'dates.add_interval' | translate }}-->
-		<!--		</button>-->
-		<!--		<h2>{{ 'dates.add_interval' | translate }}</h2>-->
-		<!--		<div class="columns">-->
-		<!--			<div class="column">-->
-		<!--				{{ 'dates.interval_propose' | translate }}-->
-		<!--			</div>-->
-		<!--			<div class="column">-->
-		<!--				<label for="start_interval" class="hidden">start</label>-->
-		<!--				<input id="start_interval" (change)="countDays()" formControlName="startDateInterval" type="date" />-->
-		<!--			</div>-->
-		<!--		</div>-->
-		<!--		<div class="columns">-->
-		<!--			<div class="column">-->
-		<!--				{{ 'dates.interval_span' | translate }}-->
-		<!--			</div>-->
-		<!--			<div class="column">-->
-		<!--				<label for="end_interval" class="hidden">end</label>-->
-		<!--				<input id="end_interval" formControlName="endDateInterval" type="date" />-->
-		<!--			</div>-->
-		<!--		</div>-->
-		<!--		<button (click)="addIntervalOfDates()" class="btn btn-block btn&#45;&#45;primary">-->
-		<!--			<i class="fa fa-plus" aria-hidden="true"></i>-->
-		<!--			{{ 'dates.interval_button' | translate }}-->
-		<!--			{{ intervalDays }}-->
-		<!--			{{ 'dates.interval_button_dates' | translate }}-->
-		<!--		</button>-->
-		<!--	</section>-->
+	<!--	<section *ngIf="showDateInterval" class="date-interval form-row">-->
+	<!--		<button-->
+	<!--			(click)="showDateInterval = !showDateInterval"-->
+	<!--			[ngClass]="{ active: showDateInterval }"-->
+	<!--			class="btn btn&#45;&#45;primary"-->
+	<!--			id="toggle_interval_button"-->
+	<!--		>-->
+	<!--			<i class="fa fa-clock-o" aria-hidden="true"></i>-->
+	<!--			{{ 'dates.add_interval' | translate }}-->
+	<!--		</button>-->
+	<!--		<h2>{{ 'dates.add_interval' | translate }}</h2>-->
+	<!--		<div class="columns">-->
+	<!--			<div class="column">-->
+	<!--				{{ 'dates.interval_propose' | translate }}-->
+	<!--			</div>-->
+	<!--			<div class="column">-->
+	<!--				<label for="start_interval" class="hidden">start</label>-->
+	<!--				<input id="start_interval" (change)="countDays()" formControlName="startDateInterval" type="date" />-->
+	<!--			</div>-->
+	<!--		</div>-->
+	<!--		<div class="columns">-->
+	<!--			<div class="column">-->
+	<!--				{{ 'dates.interval_span' | translate }}-->
+	<!--			</div>-->
+	<!--			<div class="column">-->
+	<!--				<label for="end_interval" class="hidden">end</label>-->
+	<!--				<input id="end_interval" formControlName="endDateInterval" type="date" />-->
+	<!--			</div>-->
+	<!--		</div>-->
+	<!--		<button (click)="addIntervalOfDates()" class="btn btn-block btn&#45;&#45;primary">-->
+	<!--			<i class="fa fa-plus" aria-hidden="true"></i>-->
+	<!--			{{ 'dates.interval_button' | translate }}-->
+	<!--			{{ intervalDays }}-->
+	<!--			{{ 'dates.interval_button_dates' | translate }}-->
+	<!--		</button>-->
+	<!--	</section>-->
 
-		<div class="dates-list">
-			<div class="title">
-				<span class="count-dates">
-					{{ timeList.length }}
-				</span>
-				<span class="count-dates-txt">
-					{{ 'dates.count_time' | translate }}
-					(pour chaque jour)
-				</span>
-			</div>
-			<div class="actions">
-				<button
-					(click)="addTime()"
-					*ngIf="'false' === allowSeveralHours"
-					class="btn btn--primary"
-					id="add_time_button"
-				>
-					<i class="fa fa-plus" aria-hidden="true"></i>
-					{{ 'dates.add_time' | translate }}
-				</button>
-				<button
-					(click)="removeAllTimes()"
-					*ngIf="'false' === allowSeveralHours"
-					class="btn btn--warning"
-					id="remove_time_button"
-				>
-					<i class="fa fa-trash" aria-hidden="true"></i>
-					Aucune plage horaire
-				</button>
-				<button
-					(click)="resetTimes()"
-					*ngIf="'false' === allowSeveralHours"
-					class="btn btn--warning"
-					id="reset_time_button"
-				>
-					<i class="fa fa-refresh" aria-hidden="true"></i>
-					réinitialiser
-				</button>
-			</div>
-
-			<div *ngIf="'false' === allowSeveralHours" class="identical-dates">
-				<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
-					<div *ngFor="let time of timeList; index as id" class="time-choice" cdkDrag>
-						<label for="timeChoices_{{ id }}">
-							<i class="fa fa-clock-o" aria-hidden="true"></i>
-						</label>
-						<input
-							[(ngModel)]="time.literal"
-							name="timeChoices_{{ id }}"
-							type="text"
-							id="timeChoices_{{ id }}"
-						/>
-						<button (click)="time.timeList.splice(id, 1)" class="btn btn-warning">
-							<i class="fa fa-times" aria-hidden="true"></i>
-						</button>
-					</div>
-				</div>
-			</div>
-			<hr />
-			<span class="count-dates title">
-				{{ dateList.length }}
+	<!--	</form>-->
+	<div class="dates-list">
+		<div class="title">
+			<span class="count-dates">
+				{{ timeList.length }}
 			</span>
-			<span>
-				{{ 'dates.count_dates' | translate }}
+			<span class="count-dates-txt">
+				{{ 'dates.count_time' | translate }}
+				(pour chaque jour)
 			</span>
-			<button class="btn btn--primary" (click)="addChoice()">
-				{{ 'dates.add' | translate }}
+		</div>
+		<div class="actions">
+			<pre class="debug padded warning">
+			form.value.hasSeveralHours :
+				{{ form.value.hasSeveralHours | json }}
+			</pre
+			>
+			<button
+				(click)="addTime()"
+				*ngIf="!form.value.hasSeveralHours"
+				class="btn btn--primary"
+				id="add_time_button"
+			>
+				<i class="fa fa-plus" aria-hidden="true"></i>
+				{{ 'dates.add_time' | translate }}
 			</button>
-			<div *ngFor="let choice of dateList; index as id" class="date-choice">
-				{{ id }})
-				<input
-					[(ngModel)]="choice.date_object"
-					name="dateChoices_{{ id }}"
-					id="dateChoices_{{ id }}"
-					useValueAsDate
-					type="date"
-				/>
-				<button (click)="dateList.splice(id, 1)" class="btn btn-warning">
-					<i class="fa fa-times" aria-hidden="true"></i>
-				</button>
-				<button
-					(click)="addTimeToDate(choice, id)"
-					*ngIf="'true' === allowSeveralHours"
-					class="btn btn--primary"
-				>
-					{{ 'dates.add_time' | translate }}
-				</button>
-				<div *ngIf="'true' === allowSeveralHours" class="several-times">
-					<div *ngFor="let timeItem of choice.timeList; index as idTime" class="time-choice">
-						<input
-							[(ngModel)]="timeItem.literal"
-							name="dateTime_{{ id }}_Choices_{{ idTime }}"
-							id="dateTime_{{ id }}_Choices_{{ idTime }}"
-							type="text"
-						/>
-						<button (click)="choice.timeList.splice(idTime, 1)" class="btn btn-warning">
-							<i class="fa fa-times" aria-hidden="true"></i>
-						</button>
-					</div>
+			<button
+				(click)="removeAllTimes()"
+				*ngIf="'false' === allowSeveralHours"
+				class="btn btn--warning"
+				id="remove_time_button"
+			>
+				<i class="fa fa-trash" aria-hidden="true"></i>
+				Aucune plage horaire
+			</button>
+			<button
+				(click)="resetTimes()"
+				*ngIf="'false' === allowSeveralHours"
+				class="btn btn--warning"
+				id="reset_time_button"
+			>
+				<i class="fa fa-refresh" aria-hidden="true"></i>
+				réinitialiser
+			</button>
+		</div>
+
+		<!--			<div *ngIf="'false' === allowSeveralHours" class="identical-dates">-->
+		<!--				<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">-->
+		<!--					<div *ngFor="let time of timeList; index as id" class="time-choice" cdkDrag>-->
+		<!--						<label for="timeChoices_{{ id }}">-->
+		<!--							<i class="fa fa-clock-o" aria-hidden="true"></i>-->
+		<!--						</label>-->
+		<!--						<input-->
+		<!--							[(ngModel)]="time.literal"-->
+		<!--							name="timeChoices_{{ id }}"-->
+		<!--							type="text"-->
+		<!--							id="timeChoices_{{ id }}"-->
+		<!--						/>-->
+		<!--						<button (click)="time.timeList.splice(id, 1)" class="btn btn-warning">-->
+		<!--							<i class="fa fa-times" aria-hidden="true"></i>-->
+		<!--						</button>-->
+		<!--					</div>-->
+		<!--				</div>-->
+		<!--			</div>-->
+		<hr />
+		<span class="count-dates title">
+			{{ dateList.length }}
+		</span>
+		<span>
+			{{ 'dates.count_dates' | translate }}
+		</span>
+		<button class="btn btn--primary" (click)="addChoice()">
+			{{ 'dates.add' | translate }}
+		</button>
+		<div *ngFor="let choice of dateList; index as id" class="date-choice">
+			{{ id }})
+			<input
+				[(ngModel)]="choice.date_object"
+				name="dateChoices_{{ id }}"
+				id="dateChoices_{{ id }}"
+				useValueAsDate
+				type="date"
+			/>
+			<button (click)="dateList.splice(id, 1)" class="btn btn-warning">
+				<i class="fa fa-times" aria-hidden="true"></i>
+			</button>
+			<button (click)="addTimeToDate(choice, id)" *ngIf="'true' === allowSeveralHours" class="btn btn--primary">
+				{{ 'dates.add_time' | translate }}
+			</button>
+			<div *ngIf="'true' === allowSeveralHours" class="several-times">
+				<div *ngFor="let timeItem of choice.timeList; index as idTime" class="time-choice">
+					<input
+						[(ngModel)]="timeItem.literal"
+						name="dateTime_{{ id }}_Choices_{{ idTime }}"
+						id="dateTime_{{ id }}_Choices_{{ idTime }}"
+						type="text"
+					/>
+					<button (click)="choice.timeList.splice(idTime, 1)" class="btn btn-warning">
+						<i class="fa fa-times" aria-hidden="true"></i>
+					</button>
 				</div>
 			</div>
 		</div>
-	</form>
+	</div>
 </div>
diff --git a/src/app/features/administration/form/form.component.html b/src/app/features/administration/form/form.component.html
index a79c0e8c..72988e42 100644
--- a/src/app/features/administration/form/form.component.html
+++ b/src/app/features/administration/form/form.component.html
@@ -1,44 +1,11 @@
 <div class="admin-form padded">
 	<form [formGroup]="form">
-		<div class="columns">
+		<header class="columns">
 			<div class="column">
 				<h1>
 					{{ 'creation.title' | translate }}
 				</h1>
-				<p class="subtitle">
-					{{ 'creation.want' | translate }}
-				</p>
-				<app-kind-select [form]="form"></app-kind-select>
-				<app-date-select ng-if="form.value.isAboutDate" [form]="form"></app-date-select>
-				<app-text-select ng-if="!form.value.isAboutDate" [form]="form"></app-text-select>
-
-				<app-base-config [form]="form"></app-base-config>
 			</div>
-		</div>
-		<div class="column">
-			<pre class="debug padded warning">
-				form values :
-					{{ form.value | json }}
-				</pre
-			>
-			<pre class="debug padded warning">
-				poll initial values :
-				{{ poll | json }}
-				</pre
-			>
-		</div>
-		<!--			choix spécialement pour les dates-->
-
-		<button class="btn is-info" (click)="advancedDisplayEnabled = !advancedDisplayEnabled">
-			<i class="fa fa-save"></i>
-			{{ 'creation.advanced' | translate }}
-		</button>
-		<app-advanced-config [poll]="poll" [form]="form" *ngIf="advancedDisplayEnabled"></app-advanced-config>
-
-		<hr />
-
-		<div class="columns">
-			<div class="column"></div>
 			<div class="column">
 				<button
 					class="btn is-success"
@@ -49,9 +16,40 @@
 					Enregistrer le sondage
 				</button>
 			</div>
-		</div>
+		</header>
+		<main class="columns">
+			<div class="column">
+				<p class="subtitle">
+					{{ 'creation.want' | translate }}
+				</p>
+				<!--				<app-kind-select [form]="form"></app-kind-select>-->
+				<app-date-select ng-if="form.value.isAboutDate" [form]="form"></app-date-select>
+				<!--				<app-text-select ng-if="!form.value.isAboutDate" [form]="form"></app-text-select>-->
+
+				<!--				<app-base-config [form]="form"></app-base-config>-->
+
+				<button class="btn is-info" (click)="advancedDisplayEnabled = !advancedDisplayEnabled">
+					<i class="fa fa-save"></i>
+					{{ 'creation.advanced' | translate }}
+				</button>
+				<app-advanced-config [poll]="poll" [form]="form" *ngIf="advancedDisplayEnabled"></app-advanced-config>
+			</div>
+		</main>
+		<footer class="column">
+			<pre class="debug padded warning">
+				form values :
+					{{ form.value | json }}
+				</pre
+			>
+			<pre class="debug padded warning">
+				poll initial values :
+				{{ poll | json }}
+				</pre
+			>
+		</footer>
+		<hr />
 		<div class="validation">
-			<div class="has-background-danger" *ngIf="!form.valid">
+			<div class="has-background-danger" *ngIf="!form.valid && form.touched">
 				le formulaire est invalide
 				<pre>
 		 {{ form.errors | json }}
diff --git a/src/app/features/administration/form/form.component.ts b/src/app/features/administration/form/form.component.ts
index 3755d291..2a17a7d7 100644
--- a/src/app/features/administration/form/form.component.ts
+++ b/src/app/features/administration/form/form.component.ts
@@ -20,7 +20,7 @@ export class FormComponent implements OnInit {
 	public poll?: Poll;
 	public form: FormGroup;
 
-	public advancedDisplayEnabled = true;
+	public advancedDisplayEnabled = false;
 
 	constructor(
 		private fb: FormBuilder,
@@ -53,10 +53,11 @@ export class FormComponent implements OnInit {
 			whoModifiesAnswers: ['', [Validators.required]],
 			whoCanChangeAnswers: ['', [Validators.required]],
 			isAboutDate: [true, [Validators.required]],
+			isProtectedByPassword: [false, [Validators.required]],
 			startDateInterval: ['', [Validators.required]],
 			endDateInterval: ['', [Validators.required]],
-			isProtectedByPassword: [false, [Validators.required]],
-			hasMaxCountOfAnswers: [true, [Validators.required]],
+			hasMaxCountOfAnswers: [true, [Validators.required, Validators.min(1)]],
+			hasSeveralHours: [false, [Validators.required]],
 			allowComments: [true, [Validators.required]],
 			maxCountOfAnswers: [150, [Validators.required]],
 			isOwnerNotifiedByEmailOnNewVote: [false, [Validators.required]],
@@ -74,7 +75,7 @@ export class FormComponent implements OnInit {
 	}
 
 	/**
-	 * add example values to the form
+	 * add example values to the form, overrides defaults of PollConfiguration
 	 */
 	setDemoValues(): void {
 		this.form.patchValue({
@@ -84,6 +85,7 @@ export class FormComponent implements OnInit {
 			creatorPseudo: 'Chuck Norris',
 			creatorEmail: 'chucknorris@example.com',
 			isAboutDate: true,
+			hasSeveralHours: true,
 			configuration: {
 				whoModifiesAnswers: 'everybody',
 				whoCanChangeAnswers: 'everybody',
diff --git a/src/app/features/administration/stepper/stepper.component.ts b/src/app/features/administration/stepper/stepper.component.ts
index eb797594..d527c416 100644
--- a/src/app/features/administration/stepper/stepper.component.ts
+++ b/src/app/features/administration/stepper/stepper.component.ts
@@ -50,7 +50,7 @@ export class StepperComponent implements OnInit {
 			],
 			areResultsPublic: [this.poll ? this.poll.configuration.areResultsPublic : true, [Validators.required]],
 			expiracyNumberOfDays: [
-				this.poll ? DateService.diffInDays(new Date(), this.poll.configuration.expires) : 60,
+				this.poll ? DateService.diffInDays(new Date(), this.poll.configuration.expiracyDate) : 60,
 				[Validators.required],
 			],
 		});
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
index 605f23be..cd51ae38 100644
--- a/src/environments/environment.prod.ts
+++ b/src/environments/environment.prod.ts
@@ -39,7 +39,7 @@ export const environment = {
 	},
 	poll: {
 		defaultConfig: {
-			expiracyInDays: 60,
+			expiresDaysDelay: 60,
 			expiracyAfterLastModificationInDays: 180,
 		},
 	},
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index 86d5495a..9bb7c9a4 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -54,7 +54,8 @@ export const environment = {
 	},
 	poll: {
 		defaultConfig: {
-			expiracyInDays: 60,
+			maxCountOfAnswers: 150,
+			expiresDaysDelay: 60,
 			expiracyAfterLastModificationInDays: 180,
 		},
 	},

From 40c0c3888902b046c9ab9f65549c57abbff5a1c3 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Mon, 8 Feb 2021 11:32:58 +0100
Subject: [PATCH 12/40] testing ciphering page

---
 package.json                                  |  7 +--
 src/app/app.module.ts                         |  3 +-
 src/app/core/services/poll.service.ts         |  1 -
 .../administration/form/form.component.ts     | 28 +++++++----
 .../features/old-stuff/config/PollConfig.ts   |  1 -
 .../visibility/visibility.component.html      |  2 +-
 .../old-stuff/services/config.service.ts      |  1 -
 .../ciphering/ciphering.component.html        | 22 +++++++++
 .../ciphering/ciphering.component.scss        |  0
 .../ciphering/ciphering.component.spec.ts     | 24 ++++++++++
 .../ciphering/ciphering.component.ts          | 47 +++++++++++++++++++
 src/app/routes-framadate.ts                   |  5 ++
 yarn.lock                                     |  5 ++
 13 files changed, 128 insertions(+), 18 deletions(-)
 create mode 100644 src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.html
 create mode 100644 src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.scss
 create mode 100644 src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.spec.ts
 create mode 100644 src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.ts

diff --git a/package.json b/package.json
index c95d9b98..21f26d21 100644
--- a/package.json
+++ b/package.json
@@ -21,9 +21,9 @@
     "mock:server": "json-server --port 8000 --watch ./mocks/db.json --routes ./mocks/routes.json",
     "start:proxy": "ng serve --proxy-config proxy.conf.json",
     "start:proxymock": "concurrently --kill-others \"yarn mock:server\" \"yarn start:proxy\"",
-		"i18n:init": "ngx-translate-extract --input ./src --output ./src/assets/i18n/template.json --key-as-default-value --replace --format json",
-		"i18n:extract": "ngx-translate-extract --input ./src --output ./src/assets/i18n/{en,da,de,fi,nb,nl,sv}.json --clean --format json"
-	},
+    "i18n:init": "ngx-translate-extract --input ./src --output ./src/assets/i18n/template.json --key-as-default-value --replace --format json",
+    "i18n:extract": "ngx-translate-extract --input ./src --output ./src/assets/i18n/{en,da,de,fi,nb,nl,sv}.json --clean --format json"
+  },
   "private": false,
   "dependencies": {
     "@angular/animations": "^9.1.1",
@@ -52,6 +52,7 @@
     "ngx-clipboard": "^13.0.0",
     "ngx-markdown": "^9.0.0",
     "ngx-webstorage": "^5.0.0",
+    "node-forge": "^0.10.0",
     "primeng": "^9.0.6",
     "quill": "^1.3.7",
     "rxjs": "^6.5.5",
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 8a8301b6..1fb42f4d 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -26,6 +26,7 @@ import { SharedModule } from './shared/shared.module';
 import { CguComponent } from './features/shared/components/ui/static-pages/cgu/cgu.component';
 import { LegalComponent } from './features/shared/components/ui/static-pages/legal/legal.component';
 import { PrivacyComponent } from './features/shared/components/ui/static-pages/privacy/privacy.component';
+import { CipheringComponent } from './features/shared/components/ui/static-pages/ciphering/ciphering.component';
 registerLocaleData(localeEn, 'en-EN');
 registerLocaleData(localeFr, 'fr-FR');
 
@@ -40,7 +41,7 @@ export function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader {
 }
 
 @NgModule({
-	declarations: [AppComponent, CguComponent, LegalComponent, PrivacyComponent],
+	declarations: [AppComponent, CguComponent, LegalComponent, PrivacyComponent, CipheringComponent],
 	imports: [
 		AppRoutingModule,
 		BrowserAnimationsModule,
diff --git a/src/app/core/services/poll.service.ts b/src/app/core/services/poll.service.ts
index 501ff08b..14477d06 100644
--- a/src/app/core/services/poll.service.ts
+++ b/src/app/core/services/poll.service.ts
@@ -228,7 +228,6 @@ export class PollService implements Resolve<Poll> {
 			adminKey: '', // key to change config of the poll
 			owner_modifier_token: '', // key to change a vote stack
 			canModifyAnswers: newpoll.configuration.isAllowingtoChangeOwnAnswers, // bool for the frontend selector
-			whoModifiesAnswers: newpoll.configuration.whoCanChangeAnswers, // everybody, self, nobody (: just admin)
 			whoCanChangeAnswers: newpoll.configuration.whoCanChangeAnswers, // everybody, self, nobody (: just admin)
 			dateList: newpoll.dateChoices, // sets of days as strings, config to set identical time for days in a special days poll
 			timeList: newpoll.timeChoices, // ranges of time expressed as strings
diff --git a/src/app/features/administration/form/form.component.ts b/src/app/features/administration/form/form.component.ts
index 2a17a7d7..abdb00a9 100644
--- a/src/app/features/administration/form/form.component.ts
+++ b/src/app/features/administration/form/form.component.ts
@@ -1,13 +1,11 @@
 import { ChangeDetectorRef, Component, Inject, Input, OnInit } from '@angular/core';
 import { Poll } from '../../../core/models/poll.model';
-import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { UuidService } from '../../../core/services/uuid.service';
 import { ApiService } from '../../../core/services/api.service';
 import { ToastService } from '../../../core/services/toast.service';
 import { PollService } from '../../../core/services/poll.service';
-import { DateUtilities } from '../../old-stuff/config/DateUtilities';
 import { DOCUMENT } from '@angular/common';
-import { CdkDragDrop } from '@angular/cdk/drag-drop';
 import { Router } from '@angular/router';
 
 @Component({
@@ -28,7 +26,6 @@ export class FormComponent implements OnInit {
 		private uuidService: UuidService,
 		private toastService: ToastService,
 		private pollService: PollService,
-		public dateUtilities: DateUtilities,
 		private apiService: ApiService,
 		private router: Router,
 		@Inject(DOCUMENT) private document: any
@@ -48,10 +45,21 @@ export class FormComponent implements OnInit {
 			creatorEmail: ['', [Validators.required]],
 			slug: [this.uuidService.getUUID(), [Validators.required]],
 			description: ['', [Validators.required]],
-			choices: new FormArray([]),
-			// configuration: new FormGroup(),
-			whoModifiesAnswers: ['', [Validators.required]],
-			whoCanChangeAnswers: ['', [Validators.required]],
+			choices: this.fb.array([
+				this.fb.group({
+					label: ['', [Validators.required]],
+					imageUrl: ['', [Validators.required]],
+				}),
+			]),
+			configuration: this.fb.group({
+				whoCanChangeAnswers: ['everybody', [Validators.required]],
+				// isProtectedByPassword: false,
+				// isOwnerNotifiedByEmailOnNewVote: false,
+				// isOwnerNotifiedByEmailOnNewComment: false,
+				// isMaybeAnswerAvailable: false,
+				// areResultsPublic: true,
+				// expiracyNumberOfDays: 60,
+			}),
 			isAboutDate: [true, [Validators.required]],
 			isProtectedByPassword: [false, [Validators.required]],
 			startDateInterval: ['', [Validators.required]],
@@ -71,6 +79,7 @@ export class FormComponent implements OnInit {
 
 		if (showDemoValues) {
 			this.setDemoValues();
+			this.toastService.display('default values filled for demo');
 		}
 	}
 
@@ -85,9 +94,8 @@ export class FormComponent implements OnInit {
 			creatorPseudo: 'Chuck Norris',
 			creatorEmail: 'chucknorris@example.com',
 			isAboutDate: true,
-			hasSeveralHours: true,
+			// hasSeveralHours: true,
 			configuration: {
-				whoModifiesAnswers: 'everybody',
 				whoCanChangeAnswers: 'everybody',
 				isProtectedByPassword: false,
 				isOwnerNotifiedByEmailOnNewVote: false,
diff --git a/src/app/features/old-stuff/config/PollConfig.ts b/src/app/features/old-stuff/config/PollConfig.ts
index f6eb71b8..483b5539 100644
--- a/src/app/features/old-stuff/config/PollConfig.ts
+++ b/src/app/features/old-stuff/config/PollConfig.ts
@@ -62,7 +62,6 @@ export class PollConfig {
 	adminKey = ''; // key to change config of the poll
 	owner_modifier_token = ''; // key to change a vote stack
 	canModifyAnswers = true; // bool for the frontend selector
-	whoModifiesAnswers = 'everybody'; // everybody, self, nobody (= just admin)
 	whoCanChangeAnswers = 'everybody'; // everybody, self, nobody (= just admin)
 	dateList: any = otherDefaultDates; // sets of days as strings, config to set identical time for days in a special days poll
 	timeList: DateChoice[] = otherDefaultDates; // ranges of time expressed as strings
diff --git a/src/app/features/old-stuff/pages/visibility/visibility.component.html b/src/app/features/old-stuff/pages/visibility/visibility.component.html
index 624751bc..14abb51a 100644
--- a/src/app/features/old-stuff/pages/visibility/visibility.component.html
+++ b/src/app/features/old-stuff/pages/visibility/visibility.component.html
@@ -73,7 +73,7 @@
 				name="modificationScope"
 				id="modificationScope"
 				*ngIf="true == !!config.canModifyAnswers"
-				[(ngModel)]="config.whoModifiesAnswers"
+				[(ngModel)]="config.whoCanChangeAnswers"
 				[disabled]="false == !!config.canModifyAnswers"
 			>
 				<option value="self">
diff --git a/src/app/features/old-stuff/services/config.service.ts b/src/app/features/old-stuff/services/config.service.ts
index 17edef6e..e19f478f 100644
--- a/src/app/features/old-stuff/services/config.service.ts
+++ b/src/app/features/old-stuff/services/config.service.ts
@@ -84,7 +84,6 @@ export class ConfigService extends PollConfig {
 			password: this.password,
 			customUrl: this.customUrl,
 			canModifyAnswers: this.canModifyAnswers,
-			whoModifiesAnswers: this.whoModifiesAnswers,
 			dateList: this.dateList,
 			timeList: this.timeList,
 			answers: this.answers,
diff --git a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.html b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.html
new file mode 100644
index 00000000..8e2042d3
--- /dev/null
+++ b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.html
@@ -0,0 +1,22 @@
+<div class="ciphering padded">
+	<h2>
+		Test de chiffrement
+	</h2>
+	<br />
+	<input type="text" [(ngModel)]="plainText" (ngModelChange)="encrypt(plainText)" />
+	texte clair
+	<br />
+	<input type="text" [(ngModel)]="salt" />
+	salt
+	<br />
+	<input type="text" [(ngModel)]="key" />
+	pepper
+
+	<br />
+	<input type="text" [(ngModel)]="cipheredText" />
+	texte chiffré
+
+	<br />
+	<input type="text" [(ngModel)]="otherCipheredText" />
+	texte à déchiffrer
+</div>
diff --git a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.scss b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.spec.ts b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.spec.ts
new file mode 100644
index 00000000..32ccc900
--- /dev/null
+++ b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CipheringComponent } from './ciphering.component';
+
+describe('CipheringComponent', () => {
+	let component: CipheringComponent;
+	let fixture: ComponentFixture<CipheringComponent>;
+
+	beforeEach(async(() => {
+		TestBed.configureTestingModule({
+			declarations: [CipheringComponent],
+		}).compileComponents();
+	}));
+
+	beforeEach(() => {
+		fixture = TestBed.createComponent(CipheringComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});
diff --git a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.ts b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.ts
new file mode 100644
index 00000000..9c723664
--- /dev/null
+++ b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.ts
@@ -0,0 +1,47 @@
+import { Component, OnInit } from '@angular/core';
+
+const forge = require('node-forge');
+
+@Component({
+	selector: 'app-ciphering',
+	templateUrl: './ciphering.component.html',
+	styleUrls: ['./ciphering.component.scss'],
+})
+export class CipheringComponent implements OnInit {
+	public plainText = 'le texte à chiffrer';
+	public cipheredText = '';
+	public salt = forge.random.getBytesSync(128);
+	public key = forge.random.getBytesSync(128);
+	public otherCipheredText: any;
+
+	constructor() {}
+
+	ngOnInit(): void {
+		this.encrypt(this.plainText);
+	}
+
+	encrypt(someText) {
+		// generate a random key and IV
+		// Note: a key size of 16 bytes will use AES-128, 24 => AES-192, 32 => AES-256
+		// const key = forge.random.getBytesSync(16);
+		// const iv = forge.random.getBytesSync(16);
+
+		/* alternatively, generate a password-based 16-byte key
+		var salt = forge.random.getBytesSync(128);
+		var key = forge.pkcs5.pbkdf2('password', salt, numIterations, 16);
+		*/
+
+		// encrypt some bytes using CBC mode
+		// (other modes include: ECB, CFB, OFB, CTR, and GCM)
+		// Note: CBC and ECB modes use PKCS#7 padding as default
+		// const cipher = forge.cipher.createCipher('AES-CBC', this.key);
+		// cipher.start({ iv: this.salt });
+		// cipher.update(forge.util.createBuffer(someText));
+		// cipher.finish();
+		// const encrypted = cipher.output;
+		// this.cipheredText = encrypted.toHex();
+		this.cipheredText = someText;
+		// outputs encrypted hex
+		console.log(this.cipheredText);
+	}
+}
diff --git a/src/app/routes-framadate.ts b/src/app/routes-framadate.ts
index 98b65720..8c95dacf 100644
--- a/src/app/routes-framadate.ts
+++ b/src/app/routes-framadate.ts
@@ -7,6 +7,7 @@ import { WipTodoComponent } from './shared/components/ui/wip-todo/wip-todo.compo
 import { CguComponent } from './features/shared/components/ui/static-pages/cgu/cgu.component';
 import { LegalComponent } from './features/shared/components/ui/static-pages/legal/legal.component';
 import { PrivacyComponent } from './features/shared/components/ui/static-pages/privacy/privacy.component';
+import { CipheringComponent } from './features/shared/components/ui/static-pages/ciphering/ciphering.component';
 
 export const routes: Routes = [
 	{ path: '', component: HomeComponent },
@@ -60,6 +61,10 @@ export const routes: Routes = [
 		path: 'privacy',
 		component: PrivacyComponent,
 	},
+	{
+		path: 'ciphering',
+		component: CipheringComponent,
+	},
 	{ path: 'page-not-found', component: PageNotFoundComponent },
 	{ path: '**', redirectTo: 'page-not-found', pathMatch: 'full' },
 ];
diff --git a/yarn.lock b/yarn.lock
index aa1f8a9f..24afad82 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8193,6 +8193,11 @@ node-forge@0.9.0:
   resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.9.0.tgz#d624050edbb44874adca12bb9a52ec63cb782579"
   integrity sha512-7ASaDa3pD+lJ3WvXFsxekJQelBKRpne+GOVbLbtHYdd7pFspyeuJHnWfLplGf3SwKGbfs/aYl5V/JCIaHVUKKQ==
 
+node-forge@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.10.0.tgz#32dea2afb3e9926f02ee5ce8794902691a676bf3"
+  integrity sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA==
+
 node-int64@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"

From 7140072ecc6d624e6e660cf694ea5d6b4b5c6376 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Mon, 8 Feb 2021 18:55:31 +0100
Subject: [PATCH 13/40] fill poll config default

---
 src/app/core/models/configuration.model.ts    |  4 +-
 src/app/core/models/poll.model.ts             |  6 +--
 src/app/core/services/poll.service.ts         |  1 +
 .../advanced-config.component.html            | 24 ++++-----
 .../administration/form/form.component.html   |  2 +-
 .../administration/form/form.component.ts     | 52 ++++++++++++-------
 .../consultation/consultation.component.html  |  2 +-
 src/environments/environment.ts               |  3 ++
 8 files changed, 56 insertions(+), 38 deletions(-)

diff --git a/src/app/core/models/configuration.model.ts b/src/app/core/models/configuration.model.ts
index c78595d7..8b723adc 100644
--- a/src/app/core/models/configuration.model.ts
+++ b/src/app/core/models/configuration.model.ts
@@ -16,7 +16,9 @@ export class PollConfiguration {
 		public isZeroKnoledge: boolean = true,
 		public hasSeveralHours: boolean = false,
 		public hasMaxCountOfAnswers: boolean = false,
-		public whoCanChangeAnswers: string = 'everybody',
+		public whoCanChangeAnswers: string = environment.poll.defaultConfig.whoCanChangeAnswers, // everybody, self, nobody (= just admin)
+		public visibility: string = environment.poll.defaultConfig.visibility, // visible to anyone with the link:
+		public voteChoices: string = environment.poll.defaultConfig.voteChoices, // possible answers to a vote choice: only "yes", "yes, maybe, no": number = environment.poll.defaultConfig.maxCountOfAnswers,
 		public maxCountOfAnswers: number = environment.poll.defaultConfig.maxCountOfAnswers,
 		public expiresDaysDelay: number = environment.poll.defaultConfig.expiresDaysDelay,
 		public expiracyAfterLastModificationInDays: number = environment.poll.defaultConfig
diff --git a/src/app/core/models/poll.model.ts b/src/app/core/models/poll.model.ts
index 69674ca9..59c18a49 100644
--- a/src/app/core/models/poll.model.ts
+++ b/src/app/core/models/poll.model.ts
@@ -13,15 +13,13 @@ export class Poll {
 		public description?: string,
 		public creatorPseudo?: string,
 		public creatorEmail?: string,
-		public isAboutDate?: boolean,
-		public isZeroKnoledge?: boolean,
 		public allowSeveralHours?: boolean,
 		public archiveNumberOfDays?: number,
 		public configuration: PollConfiguration = new PollConfiguration(),
 		public comments: Comment[] = [],
 		public choices: Choice[] = [],
-		public dateChoices: Choice[] = [],
-		public timeChoices: Choice[] = []
+		public dateChoices: Choice[] = [], // sets of days as strings, config to set identical time for days in a special days poll
+		public timeChoices: Choice[] = [] // ranges of time expressed as strings
 	) {}
 
 	public getAdministrationUrl(): string {
diff --git a/src/app/core/services/poll.service.ts b/src/app/core/services/poll.service.ts
index 14477d06..e8d16e15 100644
--- a/src/app/core/services/poll.service.ts
+++ b/src/app/core/services/poll.service.ts
@@ -86,6 +86,7 @@ export class PollService implements Resolve<Poll> {
 	 * @param config
 	 */
 	makeSlug(config: Poll): string {
+		console.log('config', config);
 		let str = '';
 		str =
 			config.configuration.dateCreated.getFullYear() +
diff --git a/src/app/features/administration/form/advanced-config/advanced-config.component.html b/src/app/features/administration/form/advanced-config/advanced-config.component.html
index 30f01084..1bd574b7 100644
--- a/src/app/features/administration/form/advanced-config/advanced-config.component.html
+++ b/src/app/features/administration/form/advanced-config/advanced-config.component.html
@@ -95,7 +95,7 @@
 				<i class="fa fa-close"></i>
 			</button>
 		</div>
-		<mat-checkbox class="is-not-flex" formControlName="areResultsPublic">
+		<mat-checkbox class="is-not-flex" formControlName="configuration.areResultsPublic">
 			Les participants pourront consulter les résultats
 		</mat-checkbox>
 		<h3 class="title is-3">
@@ -103,7 +103,7 @@
 			Accès sécurisé
 		</h3>
 
-		<mat-checkbox class="is-not-flex" formControlName="isProtectedByPassword">
+		<mat-checkbox class="is-not-flex" formControlName="configuration.isProtectedByPassword">
 			Le sondage sera protégé par un mot de passe
 		</mat-checkbox>
 
@@ -114,7 +114,7 @@
 			matInput
 			type="password"
 			placeholder="password"
-			formControlName="password"
+			formControlName="configuration.password"
 			required
 		/>
 
@@ -122,13 +122,13 @@
 			<i class="fa fa-enveloppe"></i>
 			Notifications
 		</h3>
-		<mat-checkbox class="is-not-flex" formControlName="isOwnerNotifiedByEmailOnNewVote">
+		<mat-checkbox class="is-not-flex" formControlName="configuration.isOwnerNotifiedByEmailOnNewVote">
 			Vous recevrez un mail à chaque nouvelle participation
 		</mat-checkbox>
-		<mat-checkbox class="is-not-flex" formControlName="isOwnerNotifiedByEmailOnNewComment">
+		<mat-checkbox class="is-not-flex" formControlName="configuration.isOwnerNotifiedByEmailOnNewComment">
 			Vous recevrez un mail à chaque nouveau commentaire
 		</mat-checkbox>
-		<mat-checkbox class="is-not-flex" formControlName="isMaybeAnswerAvailable">
+		<mat-checkbox class="is-not-flex" formControlName="configuration.isMaybeAnswerAvailable">
 			La réponse « peut-être » sera disponible
 		</mat-checkbox>
 	</fieldset>
@@ -138,27 +138,27 @@
 			Fonctionnalités pas encore disponibles:
 		</h2>
 		<app-wip-todo></app-wip-todo>
-		<mat-checkbox class="is-not-flex" formControlName="isProtectedByPassword">
+		<mat-checkbox class="is-not-flex" formControlName="configuration.isProtectedByPassword">
 			Spécifier un lien unique de vote à des participants définis
 		</mat-checkbox>
-		<mat-checkbox class="is-not-flex" formControlName="allowComments">
+		<mat-checkbox class="is-not-flex" formControlName="configuration.allowComments">
 			Autoriser les commentaires
 		</mat-checkbox>
-		<mat-checkbox class="is-not-flex" formControlName="hasMaxCountOfAnswers">
+		<mat-checkbox class="is-not-flex" formControlName="configuration.hasMaxCountOfAnswers">
 			Nombre de réponses limitées à ce nombre
 		</mat-checkbox>
 		<input
-			*ngIf="form.value.hasMaxCountOfAnswers"
+			*ngIf="form.value.configuration.hasMaxCountOfAnswers"
 			#maxCountOfAnswers
 			id="maxCountOfAnswers"
 			matInput
 			type="number"
 			placeholder="Nombre de réponses max"
-			formControlName="maxCountOfAnswers"
+			formControlName="configuration.maxCountOfAnswers"
 			required
 		/>
 
-		<mat-checkbox class="is-not-flex" formControlName="isZeroKnoledge">
+		<mat-checkbox class="is-not-flex" formControlName="configuration.isZeroKnoledge">
 			Les informations du sondage seront chiffrés en base de données
 		</mat-checkbox>
 	</fieldset>
diff --git a/src/app/features/administration/form/form.component.html b/src/app/features/administration/form/form.component.html
index 72988e42..9c2fb1b1 100644
--- a/src/app/features/administration/form/form.component.html
+++ b/src/app/features/administration/form/form.component.html
@@ -26,7 +26,7 @@
 				<app-date-select ng-if="form.value.isAboutDate" [form]="form"></app-date-select>
 				<!--				<app-text-select ng-if="!form.value.isAboutDate" [form]="form"></app-text-select>-->
 
-				<!--				<app-base-config [form]="form"></app-base-config>-->
+				<app-base-config [form]="form"></app-base-config>
 
 				<button class="btn is-info" (click)="advancedDisplayEnabled = !advancedDisplayEnabled">
 					<i class="fa fa-save"></i>
diff --git a/src/app/features/administration/form/form.component.ts b/src/app/features/administration/form/form.component.ts
index abdb00a9..c8ffb356 100644
--- a/src/app/features/administration/form/form.component.ts
+++ b/src/app/features/administration/form/form.component.ts
@@ -39,6 +39,8 @@ export class FormComponent implements OnInit {
 	}
 
 	initFormDefault(showDemoValues = true): void {
+		const creationDate = new Date();
+
 		this.form = this.fb.group({
 			title: ['', [Validators.required, Validators.minLength(12)]],
 			creatorPseudo: ['', [Validators.required]],
@@ -51,29 +53,41 @@ export class FormComponent implements OnInit {
 					imageUrl: ['', [Validators.required]],
 				}),
 			]),
+			dateChoices: this.fb.array([
+				this.fb.group({
+					label: ['', [Validators.required]],
+					// if we have enabled detailed time choices per date choice, we have to make a time property for each date choice
+					timeChoices: this.fb.array([
+						this.fb.group({
+							label: ['', [Validators.required]],
+						}),
+					]),
+				}),
+			]),
+			timeChoices: this.fb.array([
+				this.fb.group({
+					label: ['', [Validators.required]],
+				}),
+			]),
 			configuration: this.fb.group({
+				areResultsPublic: [true, [Validators.required]],
 				whoCanChangeAnswers: ['everybody', [Validators.required]],
-				// isProtectedByPassword: false,
-				// isOwnerNotifiedByEmailOnNewVote: false,
-				// isOwnerNotifiedByEmailOnNewComment: false,
-				// isMaybeAnswerAvailable: false,
-				// areResultsPublic: true,
-				// expiracyNumberOfDays: 60,
+				isProtectedByPassword: [false, [Validators.required]],
+				isOwnerNotifiedByEmailOnNewVote: [false, [Validators.required]],
+				isOwnerNotifiedByEmailOnNewComment: [false, [Validators.required]],
+				isMaybeAnswerAvailable: [false, [Validators.required]],
+				isAboutDate: [true, [Validators.required]],
+				isZeroKnoledge: [false, [Validators.required]],
+				expiresDaysDelay: [60, [Validators.required, Validators.min(1)]],
+				maxCountOfAnswers: [150, [Validators.required, Validators.min(1)]],
+				allowComments: [true, [Validators.required]],
+				password: [this.uuidService.getUUID(), [Validators.required]],
+				dateCreated: [creationDate, [Validators.required]],
+				hasSeveralHours: [false, [Validators.required]],
+				hasMaxCountOfAnswers: [true, [Validators.required, Validators.min(1)]],
 			}),
-			isAboutDate: [true, [Validators.required]],
-			isProtectedByPassword: [false, [Validators.required]],
 			startDateInterval: ['', [Validators.required]],
 			endDateInterval: ['', [Validators.required]],
-			hasMaxCountOfAnswers: [true, [Validators.required, Validators.min(1)]],
-			hasSeveralHours: [false, [Validators.required]],
-			allowComments: [true, [Validators.required]],
-			maxCountOfAnswers: [150, [Validators.required]],
-			isOwnerNotifiedByEmailOnNewVote: [false, [Validators.required]],
-			isOwnerNotifiedByEmailOnNewComment: [false, [Validators.required]],
-			isMaybeAnswerAvailable: [false, [Validators.required]],
-			areResultsPublic: [true, [Validators.required]],
-			password: [this.uuidService.getUUID(), [Validators.required]],
-			expiracyNumberOfDays: [60, [Validators.required, Validators.min(0)]],
 		});
 		console.log('this.form ', this.form);
 
@@ -102,7 +116,7 @@ export class FormComponent implements OnInit {
 				isOwnerNotifiedByEmailOnNewComment: false,
 				isMaybeAnswerAvailable: false,
 				areResultsPublic: true,
-				expiracyNumberOfDays: 60,
+				expiresDaysDelay: 60,
 			},
 			comments: [],
 			choices: [],
diff --git a/src/app/features/consultation/consultation.component.html b/src/app/features/consultation/consultation.component.html
index b32322e7..7991312b 100644
--- a/src/app/features/consultation/consultation.component.html
+++ b/src/app/features/consultation/consultation.component.html
@@ -9,7 +9,7 @@
 		<div class="card">
 			<header class="card-header">
 				<p class="card-header-title">{{ poll.title }}</p>
-				<p class="card-header-icon">author : {{ poll.owner?.pseudo }}</p>
+				<!--				<p class="card-header-icon">author : {{ poll.owner?.pseudo }}</p>-->
 			</header>
 			<div class="card-content">
 				<div class="content">
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index 9bb7c9a4..07299112 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -57,6 +57,9 @@ export const environment = {
 			maxCountOfAnswers: 150,
 			expiresDaysDelay: 60,
 			expiracyAfterLastModificationInDays: 180,
+			whoCanChangeAnswers: 'everybody',
+			visibility: 'link_only',
+			voteChoices: 'only_yes',
 		},
 	},
 	localStorage: {

From 77cf4c6d04b5a7c7689e834dcc166dd5eca56b22 Mon Sep 17 00:00:00 2001
From: tykayn <15d65f2f-0b14-4f70-bf34-e130180ed62b@users.tedomum.net>
Date: Tue, 9 Feb 2021 09:53:58 +0100
Subject: [PATCH 14/40] patch kind of poll with patchvalue

---
 .../administration/form/form.component.html   |  7 +++----
 .../kind-select/kind-select.component.html    | 20 +++++++++++++++----
 .../stepper/stepper.component.html            | 12 +++++------
 3 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/src/app/features/administration/form/form.component.html b/src/app/features/administration/form/form.component.html
index 9c2fb1b1..ed036d57 100644
--- a/src/app/features/administration/form/form.component.html
+++ b/src/app/features/administration/form/form.component.html
@@ -22,11 +22,10 @@
 				<p class="subtitle">
 					{{ 'creation.want' | translate }}
 				</p>
-				<!--				<app-kind-select [form]="form"></app-kind-select>-->
-				<app-date-select ng-if="form.value.isAboutDate" [form]="form"></app-date-select>
-				<!--				<app-text-select ng-if="!form.value.isAboutDate" [form]="form"></app-text-select>-->
-
+				<app-kind-select [form]="form"></app-kind-select>
 				<app-base-config [form]="form"></app-base-config>
+				<app-date-select ng-if="form.value.configuration.isAboutDate" [form]="form"></app-date-select>
+				<!--								<app-text-select ng-if="!form.value.isAboutDate" [form]="form"></app-text-select>-->
 
 				<button class="btn is-info" (click)="advancedDisplayEnabled = !advancedDisplayEnabled">
 					<i class="fa fa-save"></i>
diff --git a/src/app/features/administration/form/kind-select/kind-select.component.html b/src/app/features/administration/form/kind-select/kind-select.component.html
index bd8b558f..ac8905d2 100644
--- a/src/app/features/administration/form/kind-select/kind-select.component.html
+++ b/src/app/features/administration/form/kind-select/kind-select.component.html
@@ -3,8 +3,14 @@
 		<div class="column">
 			<button
 				class="btn-block btn"
-				[ngClass]="{ 'is-primary': form.controls.isAboutDate.value }"
-				(click)="form.controls.isAboutDate.setValue(true)"
+				[ngClass]="{ 'is-primary': form.value.configuration.isAboutDate }"
+				(click)="
+					form.patchValue({
+						configuration: {
+							isAboutDate: true
+						}
+					})
+				"
 			>
 				<i class="fa fa-calendar"></i>
 				{{ 'creation.kind.date' | translate }}
@@ -13,8 +19,14 @@
 		<div class="column">
 			<button
 				class="btn-block btn btn-default"
-				[ngClass]="{ 'is-primary': !form.controls.isAboutDate.value }"
-				(click)="form.controls.isAboutDate.setValue(false)"
+				[ngClass]="{ 'is-primary': !form.value.configuration.isAboutDate }"
+				(click)="
+					form.patchValue({
+						configuration: {
+							isAboutDate: false
+						}
+					})
+				"
 			>
 				<i class="fa fa-stats"></i>
 				{{ 'creation.kind.classic' | translate }}
diff --git a/src/app/features/administration/stepper/stepper.component.html b/src/app/features/administration/stepper/stepper.component.html
index 00d5d761..7eb0f8c7 100644
--- a/src/app/features/administration/stepper/stepper.component.html
+++ b/src/app/features/administration/stepper/stepper.component.html
@@ -72,22 +72,22 @@
 					<i class="fa fa-close"></i>
 				</button>
 			</mat-form-field>
-			<mat-checkbox class="is-flex" formControlName="areResultsPublic">
+			<mat-checkbox class="is-flex" formControlName="configuration.areResultsPublic">
 				Les participants pourront consulter les résultats
 			</mat-checkbox>
-			<mat-checkbox class="is-flex" formControlName="isAboutDate">
+			<mat-checkbox class="is-flex" formControlName="configuration.isAboutDate">
 				Les choix possibles concerneront des dates
 			</mat-checkbox>
-			<mat-checkbox class="is-flex" formControlName="isProtectedByPassword">
+			<mat-checkbox class="is-flex" formControlName="configuration.isProtectedByPassword">
 				Le sondage sera protégé par un mot de passe
 			</mat-checkbox>
-			<mat-checkbox class="is-flex" formControlName="isOwnerNotifiedByEmailOnNewVote">
+			<mat-checkbox class="is-flex" formControlName="configuration.isOwnerNotifiedByEmailOnNewVote">
 				Vous recevrez un mail à chaque nouvelle participation
 			</mat-checkbox>
-			<mat-checkbox class="is-flex" formControlName="isOwnerNotifiedByEmailOnNewComment">
+			<mat-checkbox class="is-flex" formControlName="configuration.isOwnerNotifiedByEmailOnNewComment">
 				Vous recevrez un mail à chaque nouveau commentaire
 			</mat-checkbox>
-			<mat-checkbox class="is-flex" formControlName="isMaybeAnswerAvailable">
+			<mat-checkbox class="is-flex" formControlName="configuration.isMaybeAnswerAvailable">
 				La réponse « peut-être » sera disponible
 			</mat-checkbox>
 

From ce00a3ce695e7e6728bdeace31a66cc17359dcab Mon Sep 17 00:00:00 2001
From: tykayn <15d65f2f-0b14-4f70-bf34-e130180ed62b@users.tedomum.net>
Date: Tue, 9 Feb 2021 09:57:38 +0100
Subject: [PATCH 15/40] advanced button change color when active

---
 .../features/administration/form/form.component.html | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/app/features/administration/form/form.component.html b/src/app/features/administration/form/form.component.html
index ed036d57..db7dd99d 100644
--- a/src/app/features/administration/form/form.component.html
+++ b/src/app/features/administration/form/form.component.html
@@ -22,12 +22,16 @@
 				<p class="subtitle">
 					{{ 'creation.want' | translate }}
 				</p>
-				<app-kind-select [form]="form"></app-kind-select>
-				<app-base-config [form]="form"></app-base-config>
-				<app-date-select ng-if="form.value.configuration.isAboutDate" [form]="form"></app-date-select>
+				<!--				<app-kind-select [form]="form"></app-kind-select>-->
+				<!--				<app-base-config [form]="form"></app-base-config>-->
+				<app-date-select *ngIf="form.value.configuration.isAboutDate" [form]="form"></app-date-select>
 				<!--								<app-text-select ng-if="!form.value.isAboutDate" [form]="form"></app-text-select>-->
 
-				<button class="btn is-info" (click)="advancedDisplayEnabled = !advancedDisplayEnabled">
+				<button
+					class="btn"
+					[class]="{ 'is-primary': advancedDisplayEnabled, 'is-info': !advancedDisplayEnabled }"
+					(click)="advancedDisplayEnabled = !advancedDisplayEnabled"
+				>
 					<i class="fa fa-save"></i>
 					{{ 'creation.advanced' | translate }}
 				</button>

From 2edb828aa3a1e0d9e39f4abc6eefc0e0ef06c96b Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Tue, 9 Feb 2021 11:11:06 +0100
Subject: [PATCH 16/40] translate calendar contents, space options for days

---
 .../administration/administration.module.ts   |   4 +-
 .../date-select/date-select.component.html    | 167 ++++++++++++------
 .../date-select/date-select.component.scss    |   8 +
 .../form/date-select/date-select.component.ts |  21 ++-
 .../language-selector.component.ts            |   2 -
 src/assets/i18n/EN.json                       |  36 ++++
 src/assets/i18n/FR.json                       |  37 +++-
 7 files changed, 209 insertions(+), 66 deletions(-)

diff --git a/src/app/features/administration/administration.module.ts b/src/app/features/administration/administration.module.ts
index f9bcb2e3..c83035d6 100644
--- a/src/app/features/administration/administration.module.ts
+++ b/src/app/features/administration/administration.module.ts
@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { TranslateModule } from '@ngx-translate/core';
 
 import { SharedModule } from '../../shared/shared.module';
@@ -16,6 +16,7 @@ import { TextSelectComponent } from './form/text-select/text-select.component';
 import { KindSelectComponent } from './form/kind-select/kind-select.component';
 import { BaseConfigComponent } from './form/base-config/base-config.component';
 import { AdvancedConfigComponent } from './form/advanced-config/advanced-config.component';
+import { CalendarModule } from 'primeng';
 
 @NgModule({
 	declarations: [
@@ -31,6 +32,7 @@ import { AdvancedConfigComponent } from './form/advanced-config/advanced-config.
 		AdvancedConfigComponent,
 	],
 	imports: [
+		CalendarModule,
 		AdministrationRoutingModule,
 		CommonModule,
 		ReactiveFormsModule,
diff --git a/src/app/features/administration/form/date-select/date-select.component.html b/src/app/features/administration/form/date-select/date-select.component.html
index b158044c..09e87034 100644
--- a/src/app/features/administration/form/date-select/date-select.component.html
+++ b/src/app/features/administration/form/date-select/date-select.component.html
@@ -51,19 +51,27 @@
 			</span>
 		</div>
 		<div class="actions">
-			<pre class="debug padded warning">
-			form.value.hasSeveralHours :
-				{{ form.value.hasSeveralHours | json }}
-			</pre
+			<button
+				class="btn"
+				[class.is-primary]="form.value.configuration.hasSeveralHours"
+				(click)="
+					form.patchValue({ configuration: { hasSeveralHours: !form.value.configuration.hasSeveralHours } })
+				"
 			>
+				<i class="fa fa-clock-o"></i>
+
+				<span> horaires différentes à chaque jour </span>
+			</button>
 			<button
 				(click)="addTime()"
-				*ngIf="!form.value.hasSeveralHours"
+				*ngIf="!form.value.configuration.hasSeveralHours"
 				class="btn btn--primary"
 				id="add_time_button"
 			>
 				<i class="fa fa-plus" aria-hidden="true"></i>
-				{{ 'dates.add_time' | translate }}
+				<span>
+					{{ 'dates.add_time' | translate }}
+				</span>
 			</button>
 			<button
 				(click)="removeAllTimes()"
@@ -72,7 +80,9 @@
 				id="remove_time_button"
 			>
 				<i class="fa fa-trash" aria-hidden="true"></i>
-				Aucune plage horaire
+				<span>
+					Aucune plage horaire
+				</span>
 			</button>
 			<button
 				(click)="resetTimes()"
@@ -81,64 +91,109 @@
 				id="reset_time_button"
 			>
 				<i class="fa fa-refresh" aria-hidden="true"></i>
-				réinitialiser
+				<span>
+					réinitialiser
+				</span>
 			</button>
 		</div>
 
-		<!--			<div *ngIf="'false' === allowSeveralHours" class="identical-dates">-->
-		<!--				<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">-->
-		<!--					<div *ngFor="let time of timeList; index as id" class="time-choice" cdkDrag>-->
-		<!--						<label for="timeChoices_{{ id }}">-->
-		<!--							<i class="fa fa-clock-o" aria-hidden="true"></i>-->
-		<!--						</label>-->
-		<!--						<input-->
-		<!--							[(ngModel)]="time.literal"-->
-		<!--							name="timeChoices_{{ id }}"-->
-		<!--							type="text"-->
-		<!--							id="timeChoices_{{ id }}"-->
-		<!--						/>-->
-		<!--						<button (click)="time.timeList.splice(id, 1)" class="btn btn-warning">-->
-		<!--							<i class="fa fa-times" aria-hidden="true"></i>-->
-		<!--						</button>-->
+		<!--					<div *ngIf="'false' === allowSeveralHours" class="identical-dates">-->
+		<!--						<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">-->
+		<!--							<div *ngFor="let time of timeList; index as id" class="time-choice" cdkDrag>-->
+		<!--								<label for="timeChoices_{{ id }}">-->
+		<!--									<i class="fa fa-clock-o" aria-hidden="true"></i>-->
+		<!--								</label>-->
+		<!--								<input-->
+		<!--									[(ngModel)]="time.literal"-->
+		<!--									name="timeChoices_{{ id }}"-->
+		<!--									type="text"-->
+		<!--									id="timeChoices_{{ id }}"-->
+		<!--								/>-->
+		<!--								<button (click)="time.timeList.splice(id, 1)" class="btn btn-warning">-->
+		<!--									<i class="fa fa-times" aria-hidden="true"></i>-->
+		<!--								</button>-->
+		<!--							</div>-->
+		<!--						</div>-->
 		<!--					</div>-->
-		<!--				</div>-->
-		<!--			</div>-->
 		<hr />
-		<span class="count-dates title">
-			{{ dateList.length }}
-		</span>
-		<span>
-			{{ 'dates.count_dates' | translate }}
-		</span>
-		<button class="btn btn--primary" (click)="addChoice()">
-			{{ 'dates.add' | translate }}
-		</button>
-		<div *ngFor="let choice of dateList; index as id" class="date-choice">
-			{{ id }})
-			<input
-				[(ngModel)]="choice.date_object"
-				name="dateChoices_{{ id }}"
-				id="dateChoices_{{ id }}"
-				useValueAsDate
-				type="date"
-			/>
-			<button (click)="dateList.splice(id, 1)" class="btn btn-warning">
-				<i class="fa fa-times" aria-hidden="true"></i>
-			</button>
-			<button (click)="addTimeToDate(choice, id)" *ngIf="'true' === allowSeveralHours" class="btn btn--primary">
-				{{ 'dates.add_time' | translate }}
-			</button>
-			<div *ngIf="'true' === allowSeveralHours" class="several-times">
-				<div *ngFor="let timeItem of choice.timeList; index as idTime" class="time-choice">
+		<div class="columns">
+			<div class="column">
+				<!--				ajouter une date-->
+				<button class="btn btn--primary" (click)="addChoice()">
+					{{ 'dates.add' | translate }}
+				</button>
+			</div>
+			<div class="column">
+				<span class="count-dates title">
+					{{ dateList.length }}
+				</span>
+				<span>
+					{{ 'dates.count_dates' | translate }}
+				</span>
+			</div>
+		</div>
+
+		<div class="columns">
+			<div class="column">
+				<div *ngFor="let choice of dateList; index as id" class="date-choice">
+					{{ id }})
 					<input
-						[(ngModel)]="timeItem.literal"
-						name="dateTime_{{ id }}_Choices_{{ idTime }}"
-						id="dateTime_{{ id }}_Choices_{{ idTime }}"
-						type="text"
+						[(ngModel)]="choice.date_object"
+						name="dateChoices_{{ id }}"
+						id="dateChoices_{{ id }}"
+						useValueAsDate
+						type="date"
 					/>
-					<button (click)="choice.timeList.splice(idTime, 1)" class="btn btn-warning">
+					<button (click)="dateList.splice(id, 1)" class="btn btn-warning">
 						<i class="fa fa-times" aria-hidden="true"></i>
 					</button>
+					<button
+						(click)="addTimeToDate(choice, id)"
+						*ngIf="'true' === allowSeveralHours"
+						class="btn btn--primary"
+					>
+						{{ 'dates.add_time' | translate }}
+					</button>
+					<div *ngIf="'true' === allowSeveralHours" class="several-times">
+						<div *ngFor="let timeItem of choice.timeList; index as idTime" class="time-choice">
+							<input
+								[(ngModel)]="timeItem.literal"
+								name="dateTime_{{ id }}_Choices_{{ idTime }}"
+								id="dateTime_{{ id }}_Choices_{{ idTime }}"
+								type="text"
+							/>
+							<button (click)="choice.timeList.splice(idTime, 1)" class="btn btn-warning">
+								<i class="fa fa-times" aria-hidden="true"></i>
+							</button>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="column calendar-column">
+				<button class="btn" (click)="selectionKind = 'range'" [class.is-primary]="selectionKind == 'range'">
+					plage de jours
+				</button>
+
+				<button
+					class="btn"
+					(click)="selectionKind = 'multiple'"
+					[class.is-primary]="selectionKind == 'multiple'"
+				>
+					jours séparés
+				</button>
+				<button class="btn" (click)="setDefaultDatesForInterval()">
+					réinitialiser</button
+				><button class="btn" (click)="dateCalendarEnum = [today]">
+					vider
+				</button>
+				<div class="text-center">
+					<br />
+					<p-calendar
+						[(ngModel)]="dateCalendarEnum"
+						[locale]="'calendar_widget' | translate"
+						[inline]="true"
+						[selectionMode]="selectionKind"
+					></p-calendar>
 				</div>
 			</div>
 		</div>
diff --git a/src/app/features/administration/form/date-select/date-select.component.scss b/src/app/features/administration/form/date-select/date-select.component.scss
index e69de29b..29f803f3 100644
--- a/src/app/features/administration/form/date-select/date-select.component.scss
+++ b/src/app/features/administration/form/date-select/date-select.component.scss
@@ -0,0 +1,8 @@
+:host {
+	.btn i + span {
+		margin-left: 1ch;
+	}
+	.btn + .btn {
+		margin-left: 1em;
+	}
+}
diff --git a/src/app/features/administration/form/date-select/date-select.component.ts b/src/app/features/administration/form/date-select/date-select.component.ts
index 42b5f7d5..f23cbc4c 100644
--- a/src/app/features/administration/form/date-select/date-select.component.ts
+++ b/src/app/features/administration/form/date-select/date-select.component.ts
@@ -8,8 +8,8 @@ import { ApiService } from '../../../../core/services/api.service';
 import { Router } from '@angular/router';
 import { DOCUMENT } from '@angular/common';
 import { DateChoice, otherDefaultDates } from '../../../old-stuff/config/defaultConfigs';
-import { Poll } from '../../../../core/models/poll.model';
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
 	selector: 'app-date-select',
@@ -22,12 +22,15 @@ export class DateSelectComponent implements OnInit {
 
 	public showDateInterval = true;
 	public allowSeveralHours = true;
+	today = new Date();
 	startDateInterval: string;
 	endDateInterval: string;
 	intervalDays: any;
 	intervalDaysDefault = 7;
 	dateList: any = otherDefaultDates; // sets of days as strings, config to set identical time for days in a special days poll
 	timeList: DateChoice[] = otherDefaultDates; // ranges of time expressed as strings
+	dateCalendarEnum: any = [new Date('02/09/2021')];
+	selectionKind: string = 'range';
 
 	constructor(
 		private fb: FormBuilder,
@@ -38,6 +41,7 @@ export class DateSelectComponent implements OnInit {
 		public dateUtilities: DateUtilities,
 		private apiService: ApiService,
 		private router: Router,
+		private translateService: TranslateService,
 		@Inject(DOCUMENT) private document: any
 	) {}
 
@@ -64,6 +68,7 @@ export class DateSelectComponent implements OnInit {
 			startDateInterval: this.startDateInterval,
 			endDateInterval: this.endDateInterval,
 		});
+		this.dateCalendarEnum = [dateCurrent, this.dateUtilities.addDaysToDate(this.intervalDaysDefault, dateCurrent)];
 		this.countDays();
 	}
 
@@ -72,7 +77,7 @@ export class DateSelectComponent implements OnInit {
 			this.dateUtilities.parseInputDateToDateObject(this.startDateInterval),
 			this.dateUtilities.parseInputDateToDateObject(this.endDateInterval)
 		);
-		this.cd.detectChanges();
+		// this.cd.detectChanges();
 	}
 
 	/**
@@ -143,13 +148,17 @@ export class DateSelectComponent implements OnInit {
 			date_object: new Date(),
 		});
 		const selector = '[ng-reflect-choice_label="dateTime_' + id + '_Choices_' + (this.timeList.length - 1) + '"]';
-		this.cd.detectChanges();
+		// this.cd.detectChanges();
 		const elem = this.document.querySelector(selector);
 		if (elem) {
 			elem.focus();
 		}
 	}
 
+	get dateChoices() {
+		return this.form.get('dateChoices') as FormArray;
+	}
+
 	addChoice(optionalLabel = ''): void {
 		const newControlGroup = this.fb.group({
 			label: this.fb.control('', [Validators.required]),
@@ -162,8 +171,8 @@ export class DateSelectComponent implements OnInit {
 				imageUrl: 'mon url',
 			});
 		}
-		this.form.value.choices.push(newControlGroup);
-		this.cd.detectChanges();
+		this.dateChoices.push(newControlGroup);
+		// this.cd.detectChanges();
 		console.log('this.choices.length', this.choices.length);
 
 		this.focusOnChoice(this.choices.length - 1);
@@ -220,7 +229,7 @@ export class DateSelectComponent implements OnInit {
 		if ($event.ctrlKey && $event.key == 'Backspace') {
 			this.deleteChoiceField(choice_number);
 			this.toastService.display('choix supprimé par raccourci "Ctrl + retour"');
-			this.cd.detectChanges();
+			// this.cd.detectChanges();
 			this.focusOnChoice(Math.min(choice_number - 1, 0));
 		}
 		if ($event.ctrlKey && $event.key == 'Enter') {
diff --git a/src/app/shared/components/selectors/language-selector/language-selector.component.ts b/src/app/shared/components/selectors/language-selector/language-selector.component.ts
index 9cb904c4..a7ce3d6e 100644
--- a/src/app/shared/components/selectors/language-selector/language-selector.component.ts
+++ b/src/app/shared/components/selectors/language-selector/language-selector.component.ts
@@ -1,8 +1,6 @@
 import { Component, DoCheck, OnInit } from '@angular/core';
-import { TranslateService } from '@ngx-translate/core';
 
 import { Language } from '../../../../core/enums/language.enum';
-import { StorageService } from '../../../../core/services/storage.service';
 import { LanguageService } from '../../../../core/services/language.service';
 
 @Component({
diff --git a/src/assets/i18n/EN.json b/src/assets/i18n/EN.json
index 6085c5df..993cee82 100644
--- a/src/assets/i18n/EN.json
+++ b/src/assets/i18n/EN.json
@@ -584,5 +584,41 @@
 		"NL": "Néérlandais",
 		"OC": "oc",
 		"SV": "sv"
+	},
+
+	"calendar_widget" : {
+		"startsWith": "Starts with",
+		"contains": "Contains",
+		"notContains": "Not contains",
+		"endsWith": "Ends with",
+		"equals": "Equals",
+		"notEquals": "Not equals",
+		"noFilter": "No Filter",
+		"lt": "Less than",
+		"lte": "Less than or equal to",
+		"gt": "Greater than",
+		"gte": "Great then or equals",
+		"is": "Is",
+		"isNot": "Is not",
+		"before": "Before",
+		"after": "After",
+		"clear": "Clear",
+		"apply": "Apply",
+		"matchAll": "Match All",
+		"matchAny": "Match Any",
+		"addRule": "Add Rule",
+		"removeRule": "Remove Rule",
+		"accept": "Yes",
+		"reject": "No",
+		"choose": "Choose",
+		"upload": "Upload",
+		"cancel": "Cancel",
+		"dayNames": ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
+		"dayNamesShort": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+		"dayNamesMin": ["Su","Mo","Tu","We","Th","Fr","Sa"],
+		"monthNames": ["January","February","March","April","May","June","July","August","September","October","November","December"],
+		"monthNamesShort": ["Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+		"today": "Today",
+		"weekHeader": "Wk"
 	}
 }
diff --git a/src/assets/i18n/FR.json b/src/assets/i18n/FR.json
index 67cceeec..2721c87e 100644
--- a/src/assets/i18n/FR.json
+++ b/src/assets/i18n/FR.json
@@ -588,5 +588,40 @@
 		"NL": "Néérlandais",
 		"OC": "oc",
 		"SV": "sv"
-	}
+	},
+	"calendar_widget" : {
+	"startsWith": "Starts with",
+	"contains": "Contains",
+	"notContains": "Not contains",
+	"endsWith": "Ends with",
+	"equals": "Equals",
+	"notEquals": "Not equals",
+	"noFilter": "No Filter",
+	"lt": "Less than",
+	"lte": "Less than or equal to",
+	"gt": "Greater than",
+	"gte": "Great then or equals",
+	"is": "Is",
+	"isNot": "Is not",
+	"before": "Before",
+	"after": "After",
+	"clear": "Clear",
+	"apply": "Apply",
+	"matchAll": "Match All",
+	"matchAny": "Match Any",
+	"addRule": "Add Rule",
+	"removeRule": "Remove Rule",
+	"accept": "Yes",
+	"reject": "No",
+	"choose": "Choose",
+	"upload": "Upload",
+	"cancel": "Cancel",
+	"dayNames": ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
+	"dayNamesShort": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+	"dayNamesMin": ["Su","Mo","Tu","We","Th","Fr","Sa"],
+	"monthNames": ["Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre"],
+	"monthNamesShort": ["Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+	"today": "Aujourd'hui",
+	"weekHeader": "Wk"
+}
 }

From de679721d1047d8ee7d780b23f0298b47af7bb21 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Tue, 9 Feb 2021 11:27:01 +0100
Subject: [PATCH 17/40] visual sections for date selection

---
 .../administration/administration.module.ts   |   2 +
 .../date-select/date-select.component.html    | 366 +++++++++---------
 .../date-select/date-select.component.scss    |   5 +
 .../administration/form/form.component.ts     |   2 +-
 4 files changed, 199 insertions(+), 176 deletions(-)

diff --git a/src/app/features/administration/administration.module.ts b/src/app/features/administration/administration.module.ts
index c83035d6..5a3b196b 100644
--- a/src/app/features/administration/administration.module.ts
+++ b/src/app/features/administration/administration.module.ts
@@ -17,6 +17,7 @@ import { KindSelectComponent } from './form/kind-select/kind-select.component';
 import { BaseConfigComponent } from './form/base-config/base-config.component';
 import { AdvancedConfigComponent } from './form/advanced-config/advanced-config.component';
 import { CalendarModule } from 'primeng';
+import { DragDropModule } from '@angular/cdk/drag-drop';
 
 @NgModule({
 	declarations: [
@@ -40,6 +41,7 @@ import { CalendarModule } from 'primeng';
 		FormsModule,
 		TranslateModule.forChild({ extend: true }),
 		DateValueAccessorModule,
+		DragDropModule,
 	],
 })
 export class AdministrationModule {}
diff --git a/src/app/features/administration/form/date-select/date-select.component.html b/src/app/features/administration/form/date-select/date-select.component.html
index 09e87034..1b4716bf 100644
--- a/src/app/features/administration/form/date-select/date-select.component.html
+++ b/src/app/features/administration/form/date-select/date-select.component.html
@@ -1,199 +1,215 @@
 <div class="date-selection">
 	<!--	<form [formGroup]="form">-->
 	<!--	interval-->
-
-	<!--	<section *ngIf="showDateInterval" class="date-interval form-row">-->
-	<!--		<button-->
-	<!--			(click)="showDateInterval = !showDateInterval"-->
-	<!--			[ngClass]="{ active: showDateInterval }"-->
-	<!--			class="btn btn&#45;&#45;primary"-->
-	<!--			id="toggle_interval_button"-->
-	<!--		>-->
-	<!--			<i class="fa fa-clock-o" aria-hidden="true"></i>-->
-	<!--			{{ 'dates.add_interval' | translate }}-->
-	<!--		</button>-->
-	<!--		<h2>{{ 'dates.add_interval' | translate }}</h2>-->
-	<!--		<div class="columns">-->
-	<!--			<div class="column">-->
-	<!--				{{ 'dates.interval_propose' | translate }}-->
-	<!--			</div>-->
-	<!--			<div class="column">-->
-	<!--				<label for="start_interval" class="hidden">start</label>-->
-	<!--				<input id="start_interval" (change)="countDays()" formControlName="startDateInterval" type="date" />-->
-	<!--			</div>-->
-	<!--		</div>-->
-	<!--		<div class="columns">-->
-	<!--			<div class="column">-->
-	<!--				{{ 'dates.interval_span' | translate }}-->
-	<!--			</div>-->
-	<!--			<div class="column">-->
-	<!--				<label for="end_interval" class="hidden">end</label>-->
-	<!--				<input id="end_interval" formControlName="endDateInterval" type="date" />-->
-	<!--			</div>-->
-	<!--		</div>-->
-	<!--		<button (click)="addIntervalOfDates()" class="btn btn-block btn&#45;&#45;primary">-->
-	<!--			<i class="fa fa-plus" aria-hidden="true"></i>-->
-	<!--			{{ 'dates.interval_button' | translate }}-->
-	<!--			{{ intervalDays }}-->
-	<!--			{{ 'dates.interval_button_dates' | translate }}-->
-	<!--		</button>-->
-	<!--	</section>-->
+	<button
+		(click)="showDateInterval = !showDateInterval"
+		[ngClass]="{ active: showDateInterval }"
+		class="btn btn--primary"
+		id="toggle_interval_button"
+	>
+		<i class="fa fa-clock-o" aria-hidden="true"></i>
+		<span>
+			{{ 'dates.add_interval' | translate }}
+		</span>
+	</button>
+	<fieldset *ngIf="showDateInterval" class="date-interval form-row is-boxed">
+		<h2>{{ 'dates.add_interval' | translate }}</h2>
+		<div class="columns">
+			<div class="column">
+				{{ 'dates.interval_propose' | translate }}
+			</div>
+			<div class="column">
+				<label for="start_interval" class="hidden">start</label>
+				<input id="start_interval" (change)="countDays()" formControlName="startDateInterval" type="date" />
+			</div>
+		</div>
+		<div class="columns">
+			<div class="column">
+				{{ 'dates.interval_span' | translate }}
+			</div>
+			<div class="column">
+				<label for="end_interval" class="hidden">end</label>
+				<input id="end_interval" formControlName="endDateInterval" type="date" />
+			</div>
+		</div>
+		<button (click)="addIntervalOfDates()" class="btn btn-block btn--primary">
+			<i class="fa fa-plus" aria-hidden="true"></i>
+			{{ 'dates.interval_button' | translate }}
+			{{ intervalDays }}
+			{{ 'dates.interval_button_dates' | translate }}
+		</button>
+	</fieldset>
 
 	<!--	</form>-->
 	<div class="dates-list">
-		<div class="title">
-			<span class="count-dates">
-				{{ timeList.length }}
-			</span>
-			<span class="count-dates-txt">
-				{{ 'dates.count_time' | translate }}
-				(pour chaque jour)
-			</span>
-		</div>
-		<div class="actions">
-			<button
-				class="btn"
-				[class.is-primary]="form.value.configuration.hasSeveralHours"
-				(click)="
-					form.patchValue({ configuration: { hasSeveralHours: !form.value.configuration.hasSeveralHours } })
-				"
-			>
-				<i class="fa fa-clock-o"></i>
+		<div class="range-container is-boxed">
+			<div class="actions columns">
+				<div class="column">
+					<button
+						class="btn"
+						[class.is-primary]="form.value.configuration.hasSeveralHours"
+						(click)="
+							form.patchValue({
+								configuration: { hasSeveralHours: !form.value.configuration.hasSeveralHours }
+							})
+						"
+					>
+						<i class="fa fa-clock-o"></i>
 
-				<span> horaires différentes à chaque jour </span>
-			</button>
-			<button
-				(click)="addTime()"
-				*ngIf="!form.value.configuration.hasSeveralHours"
-				class="btn btn--primary"
-				id="add_time_button"
-			>
-				<i class="fa fa-plus" aria-hidden="true"></i>
-				<span>
-					{{ 'dates.add_time' | translate }}
-				</span>
-			</button>
-			<button
-				(click)="removeAllTimes()"
-				*ngIf="'false' === allowSeveralHours"
-				class="btn btn--warning"
-				id="remove_time_button"
-			>
-				<i class="fa fa-trash" aria-hidden="true"></i>
-				<span>
-					Aucune plage horaire
-				</span>
-			</button>
-			<button
-				(click)="resetTimes()"
-				*ngIf="'false' === allowSeveralHours"
-				class="btn btn--warning"
-				id="reset_time_button"
-			>
-				<i class="fa fa-refresh" aria-hidden="true"></i>
-				<span>
-					réinitialiser
-				</span>
-			</button>
-		</div>
-
-		<!--					<div *ngIf="'false' === allowSeveralHours" class="identical-dates">-->
-		<!--						<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">-->
-		<!--							<div *ngFor="let time of timeList; index as id" class="time-choice" cdkDrag>-->
-		<!--								<label for="timeChoices_{{ id }}">-->
-		<!--									<i class="fa fa-clock-o" aria-hidden="true"></i>-->
-		<!--								</label>-->
-		<!--								<input-->
-		<!--									[(ngModel)]="time.literal"-->
-		<!--									name="timeChoices_{{ id }}"-->
-		<!--									type="text"-->
-		<!--									id="timeChoices_{{ id }}"-->
-		<!--								/>-->
-		<!--								<button (click)="time.timeList.splice(id, 1)" class="btn btn-warning">-->
-		<!--									<i class="fa fa-times" aria-hidden="true"></i>-->
-		<!--								</button>-->
-		<!--							</div>-->
-		<!--						</div>-->
-		<!--					</div>-->
-		<hr />
-		<div class="columns">
-			<div class="column">
-				<!--				ajouter une date-->
-				<button class="btn btn--primary" (click)="addChoice()">
-					{{ 'dates.add' | translate }}
-				</button>
-			</div>
-			<div class="column">
-				<span class="count-dates title">
-					{{ dateList.length }}
-				</span>
-				<span>
-					{{ 'dates.count_dates' | translate }}
-				</span>
-			</div>
-		</div>
-
-		<div class="columns">
-			<div class="column">
-				<div *ngFor="let choice of dateList; index as id" class="date-choice">
-					{{ id }})
-					<input
-						[(ngModel)]="choice.date_object"
-						name="dateChoices_{{ id }}"
-						id="dateChoices_{{ id }}"
-						useValueAsDate
-						type="date"
-					/>
-					<button (click)="dateList.splice(id, 1)" class="btn btn-warning">
-						<i class="fa fa-times" aria-hidden="true"></i>
+						<span> horaires différentes à chaque jour </span>
+					</button>
+				</div>
+				<div class="column">
+					<button
+						(click)="addTime()"
+						*ngIf="form.value.configuration.hasSeveralHours"
+						class="btn btn--primary"
+						id="add_time_button"
+					>
+						<i class="fa fa-plus" aria-hidden="true"></i>
+						<span>
+							{{ 'dates.add_time' | translate }}
+						</span>
 					</button>
 					<button
-						(click)="addTimeToDate(choice, id)"
-						*ngIf="'true' === allowSeveralHours"
-						class="btn btn--primary"
+						(click)="removeAllTimes()"
+						*ngIf="form.value.configuration.hasSeveralHours"
+						class="btn btn--warning"
+						id="remove_time_button"
 					>
-						{{ 'dates.add_time' | translate }}
+						<i class="fa fa-trash" aria-hidden="true"></i>
+						<span>
+							Aucune plage horaire
+						</span>
 					</button>
-					<div *ngIf="'true' === allowSeveralHours" class="several-times">
-						<div *ngFor="let timeItem of choice.timeList; index as idTime" class="time-choice">
+					<button
+						(click)="resetTimes()"
+						*ngIf="form.value.configuration.hasSeveralHours"
+						class="btn btn--warning"
+						id="reset_time_button"
+					>
+						<i class="fa fa-refresh" aria-hidden="true"></i>
+						<span>
+							réinitialiser
+						</span>
+					</button>
+				</div>
+			</div>
+			<div class="range-time" *ngIf="form.value.configuration.hasSeveralHours">
+				<div class="title">
+					<span class="count-dates">
+						{{ timeList.length }}
+					</span>
+					<span class="count-dates-txt">
+						{{ 'dates.count_time' | translate }}
+						(pour chaque jour)
+					</span>
+				</div>
+				<div *ngIf="!form.value.configuration.hasSeveralHours" class="identical-dates">
+					<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
+						<div *ngFor="let time of timeList; index as id" class="time-choice" cdkDrag>
+							<label for="timeChoices_{{ id }}">
+								<i class="fa fa-clock-o" aria-hidden="true"></i>
+							</label>
 							<input
-								[(ngModel)]="timeItem.literal"
-								name="dateTime_{{ id }}_Choices_{{ idTime }}"
-								id="dateTime_{{ id }}_Choices_{{ idTime }}"
+								[(ngModel)]="time.literal"
+								name="timeChoices_{{ id }}"
 								type="text"
+								id="timeChoices_{{ id }}"
 							/>
-							<button (click)="choice.timeList.splice(idTime, 1)" class="btn btn-warning">
+							<button (click)="time.timeList.splice(id, 1)" class="btn btn-warning">
 								<i class="fa fa-times" aria-hidden="true"></i>
 							</button>
 						</div>
 					</div>
 				</div>
 			</div>
-			<div class="column calendar-column">
-				<button class="btn" (click)="selectionKind = 'range'" [class.is-primary]="selectionKind == 'range'">
-					plage de jours
-				</button>
+		</div>
 
-				<button
-					class="btn"
-					(click)="selectionKind = 'multiple'"
-					[class.is-primary]="selectionKind == 'multiple'"
-				>
-					jours séparés
-				</button>
-				<button class="btn" (click)="setDefaultDatesForInterval()">
-					réinitialiser</button
-				><button class="btn" (click)="dateCalendarEnum = [today]">
-					vider
-				</button>
-				<div class="text-center">
-					<br />
-					<p-calendar
-						[(ngModel)]="dateCalendarEnum"
-						[locale]="'calendar_widget' | translate"
-						[inline]="true"
-						[selectionMode]="selectionKind"
-					></p-calendar>
+		<hr />
+		<div class="main-box is-boxed">
+			<div class="columns">
+				<div class="column">
+					<!--				ajouter une date-->
+					<button class="btn btn--primary" (click)="addChoice()">
+						{{ 'dates.add' | translate }}
+					</button>
+				</div>
+				<div class="column">
+					<span class="count-dates title">
+						{{ dateList.length }}
+					</span>
+					<span>
+						{{ 'dates.count_dates' | translate }}
+					</span>
+				</div>
+			</div>
+
+			<div class="columns">
+				<div class="column">
+					<h2>Dates</h2>
+					<div *ngFor="let choice of dateList; index as id" class="date-choice">
+						{{ id }})
+						<input
+							[(ngModel)]="choice.date_object"
+							name="dateChoices_{{ id }}"
+							id="dateChoices_{{ id }}"
+							useValueAsDate
+							type="date"
+						/>
+						<button (click)="dateList.splice(id, 1)" class="btn btn-warning">
+							<i class="fa fa-times" aria-hidden="true"></i>
+						</button>
+						<button
+							(click)="addTimeToDate(choice, id)"
+							*ngIf="form.value.configuration.hasSeveralHours"
+							class="btn btn--primary"
+						>
+							{{ 'dates.add_time' | translate }}
+						</button>
+						<div *ngIf="form.value.configuration.hasSeveralHours" class="several-times">
+							plage horaire distincte
+							<br />
+							<div *ngFor="let timeItem of choice.timeList; index as idTime" class="time-choice">
+								<input
+									[(ngModel)]="timeItem.literal"
+									name="dateTime_{{ id }}_Choices_{{ idTime }}"
+									id="dateTime_{{ id }}_Choices_{{ idTime }}"
+									type="text"
+								/>
+								<button (click)="choice.timeList.splice(idTime, 1)" class="btn btn-warning">
+									<i class="fa fa-times" aria-hidden="true"></i>
+								</button>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="column calendar-column">
+					<button class="btn" (click)="selectionKind = 'range'" [class.is-primary]="selectionKind == 'range'">
+						plage de jours
+					</button>
+
+					<button
+						class="btn"
+						(click)="selectionKind = 'multiple'"
+						[class.is-primary]="selectionKind == 'multiple'"
+					>
+						jours séparés
+					</button>
+					<button class="btn" (click)="setDefaultDatesForInterval()">
+						réinitialiser</button
+					><button class="btn" (click)="dateCalendarEnum = [today]">
+						vider
+					</button>
+					<div class="text-center">
+						<br />
+						<p-calendar
+							[(ngModel)]="dateCalendarEnum"
+							[locale]="'calendar_widget' | translate"
+							[inline]="true"
+							[selectionMode]="selectionKind"
+						></p-calendar>
+					</div>
 				</div>
 			</div>
 		</div>
diff --git a/src/app/features/administration/form/date-select/date-select.component.scss b/src/app/features/administration/form/date-select/date-select.component.scss
index 29f803f3..9dc786a0 100644
--- a/src/app/features/administration/form/date-select/date-select.component.scss
+++ b/src/app/features/administration/form/date-select/date-select.component.scss
@@ -5,4 +5,9 @@
 	.btn + .btn {
 		margin-left: 1em;
 	}
+	.is-boxed {
+		border: 1px solid #ddd;
+		padding: 1em;
+		margin: 1em 0;
+	}
 }
diff --git a/src/app/features/administration/form/form.component.ts b/src/app/features/administration/form/form.component.ts
index c8ffb356..93255f31 100644
--- a/src/app/features/administration/form/form.component.ts
+++ b/src/app/features/administration/form/form.component.ts
@@ -83,7 +83,7 @@ export class FormComponent implements OnInit {
 				allowComments: [true, [Validators.required]],
 				password: [this.uuidService.getUUID(), [Validators.required]],
 				dateCreated: [creationDate, [Validators.required]],
-				hasSeveralHours: [false, [Validators.required]],
+				hasSeveralHours: [true, [Validators.required]],
 				hasMaxCountOfAnswers: [true, [Validators.required, Validators.min(1)]],
 			}),
 			startDateInterval: ['', [Validators.required]],

From 7ca87e28b44887138b0b8b05bde47cca9024d990 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Tue, 9 Feb 2021 12:10:10 +0100
Subject: [PATCH 18/40] drag and drop time interval

---
 .../date-select/date-select.component.html    | 129 ++++++++++--------
 .../date-select/date-select.component.scss    |  22 +++
 .../form/date-select/date-select.component.ts |  30 ++--
 3 files changed, 111 insertions(+), 70 deletions(-)

diff --git a/src/app/features/administration/form/date-select/date-select.component.html b/src/app/features/administration/form/date-select/date-select.component.html
index 1b4716bf..978c5a1b 100644
--- a/src/app/features/administration/form/date-select/date-select.component.html
+++ b/src/app/features/administration/form/date-select/date-select.component.html
@@ -1,48 +1,47 @@
 <div class="date-selection">
-	<!--	<form [formGroup]="form">-->
-	<!--	interval-->
-	<button
-		(click)="showDateInterval = !showDateInterval"
-		[ngClass]="{ active: showDateInterval }"
-		class="btn btn--primary"
-		id="toggle_interval_button"
-	>
-		<i class="fa fa-clock-o" aria-hidden="true"></i>
-		<span>
-			{{ 'dates.add_interval' | translate }}
-		</span>
-	</button>
-	<fieldset *ngIf="showDateInterval" class="date-interval form-row is-boxed">
-		<h2>{{ 'dates.add_interval' | translate }}</h2>
-		<div class="columns">
-			<div class="column">
-				{{ 'dates.interval_propose' | translate }}
-			</div>
-			<div class="column">
-				<label for="start_interval" class="hidden">start</label>
-				<input id="start_interval" (change)="countDays()" formControlName="startDateInterval" type="date" />
-			</div>
-		</div>
-		<div class="columns">
-			<div class="column">
-				{{ 'dates.interval_span' | translate }}
-			</div>
-			<div class="column">
-				<label for="end_interval" class="hidden">end</label>
-				<input id="end_interval" formControlName="endDateInterval" type="date" />
-			</div>
-		</div>
-		<button (click)="addIntervalOfDates()" class="btn btn-block btn--primary">
-			<i class="fa fa-plus" aria-hidden="true"></i>
-			{{ 'dates.interval_button' | translate }}
-			{{ intervalDays }}
-			{{ 'dates.interval_button_dates' | translate }}
+	<form [formGroup]="form">
+		<!--	interval-->
+		<button
+			(click)="showDateInterval = !showDateInterval"
+			[ngClass]="{ active: showDateInterval }"
+			class="btn btn--primary"
+			id="toggle_interval_button"
+		>
+			<i class="fa fa-clock-o" aria-hidden="true"></i>
+			<span>
+				{{ 'dates.add_interval' | translate }}
+			</span>
 		</button>
-	</fieldset>
-
-	<!--	</form>-->
+		<fieldset *ngIf="showDateInterval" class="date-interval form-row is-boxed">
+			<h2>{{ 'dates.add_interval' | translate }}</h2>
+			<div class="columns">
+				<div class="column">
+					{{ 'dates.interval_propose' | translate }}
+				</div>
+				<div class="column">
+					<label for="start_interval" class="hidden">start</label>
+					<input id="start_interval" (change)="countDays()" formControlName="startDateInterval" type="date" />
+				</div>
+			</div>
+			<div class="columns">
+				<div class="column">
+					{{ 'dates.interval_span' | translate }}
+				</div>
+				<div class="column">
+					<label for="end_interval" class="hidden">end</label>
+					<input id="end_interval" formControlName="endDateInterval" type="date" />
+				</div>
+			</div>
+			<button (click)="addIntervalOfDates()" class="btn btn-block btn--primary">
+				<i class="fa fa-plus" aria-hidden="true"></i>
+				{{ 'dates.interval_button' | translate }}
+				{{ intervalDays }}
+				{{ 'dates.interval_button_dates' | translate }}
+			</button>
+		</fieldset>
+	</form>
 	<div class="dates-list">
-		<div class="range-container is-boxed">
+		<fieldset class="range-container is-boxed">
 			<div class="actions columns">
 				<div class="column">
 					<button
@@ -102,29 +101,40 @@
 					</span>
 					<span class="count-dates-txt">
 						{{ 'dates.count_time' | translate }}
-						(pour chaque jour)
+						(identique pour chaque jour)
 					</span>
 				</div>
-				<div *ngIf="!form.value.configuration.hasSeveralHours" class="identical-dates">
-					<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
-						<div *ngFor="let time of timeList; index as id" class="time-choice" cdkDrag>
-							<label for="timeChoices_{{ id }}">
-								<i class="fa fa-clock-o" aria-hidden="true"></i>
-							</label>
-							<input
-								[(ngModel)]="time.literal"
-								name="timeChoices_{{ id }}"
-								type="text"
-								id="timeChoices_{{ id }}"
-							/>
-							<button (click)="time.timeList.splice(id, 1)" class="btn btn-warning">
-								<i class="fa fa-times" aria-hidden="true"></i>
-							</button>
+				<div class="identical-dates" cdkDropListGroup>
+					<div
+						class="time-list"
+						cdkDropList
+						[cdkDropListData]="timeList"
+						(cdkDropListDropped)="dropTimeItem($event)"
+					>
+						<div *ngFor="let time of timeList; index as time_id" class="time-choice" cdkDrag>
+							<div class="columns">
+								<div class="column movable">
+									<label [for]="'timeChoices_' + time_id">
+										<i class="fa fa-clock-o" aria-hidden="true"></i>
+									</label>
+									<input
+										[(ngModel)]="time.literal"
+										name="timeChoices_{{ time_id }}"
+										type="text"
+										id="timeChoices_{{ time_id }}"
+									/>
+								</div>
+								<div class="column">
+									<button (click)="timeList.splice(time_id, 1)" class="btn btn-warning">
+										<i class="fa fa-times" aria-hidden="true"></i>
+									</button>
+								</div>
+							</div>
 						</div>
 					</div>
 				</div>
 			</div>
-		</div>
+		</fieldset>
 
 		<hr />
 		<div class="main-box is-boxed">
@@ -207,6 +217,7 @@
 							[(ngModel)]="dateCalendarEnum"
 							[locale]="'calendar_widget' | translate"
 							[inline]="true"
+							[monthNavigator]="true"
 							[selectionMode]="selectionKind"
 						></p-calendar>
 					</div>
diff --git a/src/app/features/administration/form/date-select/date-select.component.scss b/src/app/features/administration/form/date-select/date-select.component.scss
index 9dc786a0..3038c94b 100644
--- a/src/app/features/administration/form/date-select/date-select.component.scss
+++ b/src/app/features/administration/form/date-select/date-select.component.scss
@@ -10,4 +10,26 @@
 		padding: 1em;
 		margin: 1em 0;
 	}
+
+	.cdk-drag-preview {
+		box-sizing: border-box;
+		border-radius: 4px;
+		box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
+			0 3px 14px 2px rgba(0, 0, 0, 0.12);
+		border: 2px solid #ccc;
+	}
+
+	.cdk-drag-placeholder {
+		* {
+			opacity: 0;
+		}
+		background: #ccc;
+	}
+
+	.cdk-drag-animating {
+		transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+	}
+	.movable {
+		cursor: move;
+	}
 }
diff --git a/src/app/features/administration/form/date-select/date-select.component.ts b/src/app/features/administration/form/date-select/date-select.component.ts
index f23cbc4c..e92cd427 100644
--- a/src/app/features/administration/form/date-select/date-select.component.ts
+++ b/src/app/features/administration/form/date-select/date-select.component.ts
@@ -7,8 +7,8 @@ import { DateUtilities } from '../../../old-stuff/config/DateUtilities';
 import { ApiService } from '../../../../core/services/api.service';
 import { Router } from '@angular/router';
 import { DOCUMENT } from '@angular/common';
-import { DateChoice, otherDefaultDates } from '../../../old-stuff/config/defaultConfigs';
-import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+import { DateChoice, moreTimeOfDay, otherDefaultDates, TimeSlices } from '../../../old-stuff/config/defaultConfigs';
+import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
 import { TranslateService } from '@ngx-translate/core';
 
 @Component({
@@ -27,10 +27,10 @@ export class DateSelectComponent implements OnInit {
 	endDateInterval: string;
 	intervalDays: any;
 	intervalDaysDefault = 7;
-	dateList: any = otherDefaultDates; // sets of days as strings, config to set identical time for days in a special days poll
-	timeList: DateChoice[] = otherDefaultDates; // ranges of time expressed as strings
-	dateCalendarEnum: any = [new Date('02/09/2021')];
-	selectionKind: string = 'range';
+	dateList: DateChoice[] = otherDefaultDates; // sets of days as strings, config to set identical time for days in a special days poll
+	timeList: TimeSlices[] = moreTimeOfDay; // ranges of time expressed as strings
+	dateCalendarEnum: Date[] = [new Date('02/09/2021')];
+	selectionKind = 'range';
 
 	constructor(
 		private fb: FormBuilder,
@@ -46,7 +46,7 @@ export class DateSelectComponent implements OnInit {
 	) {}
 
 	ngOnInit(): void {
-		this.setDefaultDatesForInterval();
+		// this.setDefaultDatesForInterval();
 	}
 
 	get choices(): FormArray {
@@ -122,8 +122,6 @@ export class DateSelectComponent implements OnInit {
 	addTime() {
 		this.timeList.push({
 			literal: '',
-			timeList: [],
-			date_object: new Date(),
 		});
 	}
 
@@ -247,7 +245,17 @@ export class DateSelectComponent implements OnInit {
 		this.addChoice('abricot');
 	}
 
-	drop(event: CdkDragDrop<string[]>) {
-		moveItemInArray(this.form.value.choices, event.previousIndex, event.currentIndex);
+	dropTimeItem(event: any) {
+		// moveItemInArray(this.timeList, event.previousIndex, event.currentIndex);
+		if (event.previousContainer === event.container) {
+			moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
+		} else {
+			transferArrayItem(
+				event.previousContainer.data,
+				event.container.data,
+				event.previousIndex,
+				event.currentIndex
+			);
+		}
 	}
 }

From 5f4c2e04af08c896f3fb64d56157d007600f6f04 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Tue, 9 Feb 2021 12:31:33 +0100
Subject: [PATCH 19/40] display hour ranges

---
 .../date-select/date-select.component.html    | 54 +++++++++++--------
 .../date-select/date-select.component.scss    | 15 +++++-
 .../form/date-select/date-select.component.ts |  2 -
 3 files changed, 46 insertions(+), 25 deletions(-)

diff --git a/src/app/features/administration/form/date-select/date-select.component.html b/src/app/features/administration/form/date-select/date-select.component.html
index 978c5a1b..6ebedc37 100644
--- a/src/app/features/administration/form/date-select/date-select.component.html
+++ b/src/app/features/administration/form/date-select/date-select.component.html
@@ -41,27 +41,34 @@
 		</fieldset>
 	</form>
 	<div class="dates-list">
+		<button
+			class="btn"
+			[class.is-primary]="form.value.configuration.hasSeveralHours"
+			(click)="
+				form.patchValue({
+					configuration: { hasSeveralHours: !form.value.configuration.hasSeveralHours }
+				})
+			"
+		>
+			<i class="fa fa-clock-o"></i>
+
+			<span> horaires avancées</span>
+		</button>
+		<div class="is-info notification">
+			<span *ngIf="form.value.configuration.hasSeveralHours">
+				Chaque jour aura ses plages de temps personnalisées
+			</span>
+			<span *ngIf="!form.value.configuration.hasSeveralHours">
+				Tous les jours auront les mêmes plages de temps
+			</span>
+		</div>
 		<fieldset class="range-container is-boxed">
 			<div class="actions columns">
-				<div class="column">
-					<button
-						class="btn"
-						[class.is-primary]="form.value.configuration.hasSeveralHours"
-						(click)="
-							form.patchValue({
-								configuration: { hasSeveralHours: !form.value.configuration.hasSeveralHours }
-							})
-						"
-					>
-						<i class="fa fa-clock-o"></i>
-
-						<span> horaires différentes à chaque jour </span>
-					</button>
-				</div>
-				<div class="column">
+				<div class="column"></div>
+				<div class="column has-text-right">
 					<button
 						(click)="addTime()"
-						*ngIf="form.value.configuration.hasSeveralHours"
+						*ngIf="!form.value.configuration.hasSeveralHours"
 						class="btn btn--primary"
 						id="add_time_button"
 					>
@@ -94,15 +101,17 @@
 					</button>
 				</div>
 			</div>
-			<div class="range-time" *ngIf="form.value.configuration.hasSeveralHours">
-				<div class="title">
-					<span class="count-dates">
-						{{ timeList.length }}
-					</span>
+			<div class="range-time" *ngIf="!form.value.configuration.hasSeveralHours">
+				<h2>
 					<span class="count-dates-txt">
 						{{ 'dates.count_time' | translate }}
 						(identique pour chaque jour)
 					</span>
+				</h2>
+				<div class="title">
+					<span class="count-dates">
+						{{ timeList.length }}
+					</span>
 				</div>
 				<div class="identical-dates" cdkDropListGroup>
 					<div
@@ -157,6 +166,7 @@
 
 			<div class="columns">
 				<div class="column">
+					<!--					TODO lier au formulaire les valeurs des dates-->
 					<h2>Dates</h2>
 					<div *ngFor="let choice of dateList; index as id" class="date-choice">
 						{{ id }})
diff --git a/src/app/features/administration/form/date-select/date-select.component.scss b/src/app/features/administration/form/date-select/date-select.component.scss
index 3038c94b..079527fa 100644
--- a/src/app/features/administration/form/date-select/date-select.component.scss
+++ b/src/app/features/administration/form/date-select/date-select.component.scss
@@ -1,4 +1,16 @@
 :host {
+	.time-choice {
+		background: rgba(255, 255, 255, 0.8);
+		border: solid 1px #dedede;
+		padding: 0.5em;
+		//padding: 20px 10px;
+		border-bottom: solid 1px #ccc;
+		color: rgba(0, 0, 0, 0.87);
+		box-sizing: border-box;
+		cursor: move;
+		background: white;
+		font-size: 14px;
+	}
 	.btn i + span {
 		margin-left: 1ch;
 	}
@@ -17,13 +29,14 @@
 		box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
 			0 3px 14px 2px rgba(0, 0, 0, 0.12);
 		border: 2px solid #ccc;
+		background: rgba(255, 255, 255, 0.8);
 	}
 
 	.cdk-drag-placeholder {
 		* {
 			opacity: 0;
 		}
-		background: #ccc;
+		background: #dedede;
 	}
 
 	.cdk-drag-animating {
diff --git a/src/app/features/administration/form/date-select/date-select.component.ts b/src/app/features/administration/form/date-select/date-select.component.ts
index e92cd427..4ed63371 100644
--- a/src/app/features/administration/form/date-select/date-select.component.ts
+++ b/src/app/features/administration/form/date-select/date-select.component.ts
@@ -142,8 +142,6 @@ export class DateSelectComponent implements OnInit {
 	addTimeToDate(config: any, id: number) {
 		this.timeList.push({
 			literal: '',
-			timeList: [],
-			date_object: new Date(),
 		});
 		const selector = '[ng-reflect-choice_label="dateTime_' + id + '_Choices_' + (this.timeList.length - 1) + '"]';
 		// this.cd.detectChanges();

From 1ab5255bfa2aff83774132965842e357eb8494e4 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Tue, 9 Feb 2021 18:26:13 +0100
Subject: [PATCH 20/40] use crypto lib

---
 .../ciphering/ciphering.component.ts          | 65 ++++++++++++-------
 1 file changed, 42 insertions(+), 23 deletions(-)

diff --git a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.ts b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.ts
index 9c723664..faa3a095 100644
--- a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.ts
+++ b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.ts
@@ -1,17 +1,21 @@
 import { Component, OnInit } from '@angular/core';
-
-const forge = require('node-forge');
-
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const crypto = require('crypto');
+// documentation:
+// https://medium.com/@spatocode/symmetric-encryption-in-javascript-bcb5fd14c273
+// https://nodejs.org/api/crypto.html
 @Component({
 	selector: 'app-ciphering',
 	templateUrl: './ciphering.component.html',
 	styleUrls: ['./ciphering.component.scss'],
 })
 export class CipheringComponent implements OnInit {
-	public plainText = 'le texte à chiffrer';
+	public plainText = 'le texte à chiffrer, coucou !';
 	public cipheredText = '';
-	public salt = forge.random.getBytesSync(128);
-	public key = forge.random.getBytesSync(128);
+	algorithm = 'aes-192-cbc';
+	public salt = crypto.randomBytes(16);
+	public initial_vector = crypto.randomBytes(16);
+	public key = '';
 	public otherCipheredText: any;
 
 	constructor() {}
@@ -21,27 +25,42 @@ export class CipheringComponent implements OnInit {
 	}
 
 	encrypt(someText) {
-		// generate a random key and IV
-		// Note: a key size of 16 bytes will use AES-128, 24 => AES-192, 32 => AES-256
-		// const key = forge.random.getBytesSync(16);
-		// const iv = forge.random.getBytesSync(16);
+		this.key = crypto.scryptSync(someText, 'salt', 24);
+		this.initial_vector = crypto.randomBytes(16);
 
-		/* alternatively, generate a password-based 16-byte key
-		var salt = forge.random.getBytesSync(128);
-		var key = forge.pkcs5.pbkdf2('password', salt, numIterations, 16);
-		*/
+		const cipher = crypto.createCipheriv(this.algorithm, this.key, this.initial_vector);
+
+		cipher.on('readable', () => {
+			this.cipheredText = cipher.read().toString('hex');
+			console.log(cipher.read().toString('hex'));
+		});
+
+		let output = '';
 
-		// encrypt some bytes using CBC mode
-		// (other modes include: ECB, CFB, OFB, CTR, and GCM)
-		// Note: CBC and ECB modes use PKCS#7 padding as default
-		// const cipher = forge.cipher.createCipher('AES-CBC', this.key);
-		// cipher.start({ iv: this.salt });
-		// cipher.update(forge.util.createBuffer(someText));
-		// cipher.finish();
-		// const encrypted = cipher.output;
-		// this.cipheredText = encrypted.toHex();
 		this.cipheredText = someText;
 		// outputs encrypted hex
 		console.log(this.cipheredText);
 	}
+
+	decrypt(sometext) {
+		const decipher = crypto.createDecipheriv(this.algorithm, this.key, this.initial_vector);
+
+		decipher.on('readable', () => {
+			this.otherCipheredText = decipher.read().toString('utf8');
+
+			console.log('otherCipheredText decrypt', this.otherCipheredText);
+		});
+
+		decipher.write(sometext, 'hex');
+		decipher.end();
+	}
+
+	convertTextToInt(someText) {
+		let output = '';
+
+		for (let i = 0; i < someText.length; i++) {
+			output += someText[i].charCodeAt(0);
+		}
+		return output;
+	}
 }

From 4df2e00cbe228a19b10821be5025c0b11aeb27da Mon Sep 17 00:00:00 2001
From: tykayn <15d65f2f-0b14-4f70-bf34-e130180ed62b@users.tedomum.net>
Date: Tue, 9 Feb 2021 18:35:29 +0100
Subject: [PATCH 21/40] add lib crypto

---
 package-lock.json                             |  5 ++
 package.json                                  |  1 +
 .../ciphering/ciphering.component.ts          | 58 +++++++++----------
 3 files changed, 35 insertions(+), 29 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 295defef..f676a5b1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6515,6 +6515,11 @@
         "which": "^1.2.9"
       }
     },
+    "crypto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/crypto/-/crypto-1.0.1.tgz",
+      "integrity": "sha512-VxBKmeNcqQdiUQUW2Tzq0t377b54N2bMtXO/qiLa+6eRRmmC4qT3D4OnTGoT/U6O9aklQ/jTwbOtRMTTY8G0Ig=="
+    },
     "crypto-browserify": {
       "version": "3.12.0",
       "resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.12.0.tgz",
diff --git a/package.json b/package.json
index 21f26d21..2c419cbf 100644
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
     "bulma": "^0.9.0",
     "bulma-switch": "^2.0.0",
     "chart.js": "^2.9.3",
+    "crypto": "^1.0.1",
     "fork-awesome": "^1.1.7",
     "ng2-charts": "^2.3.0",
     "ngx-clipboard": "^13.0.0",
diff --git a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.ts b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.ts
index faa3a095..70ee4d15 100644
--- a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.ts
+++ b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 // eslint-disable-next-line @typescript-eslint/no-var-requires
-const crypto = require('crypto');
+
+import * as Crypto from 'crypto';
 // documentation:
 // https://medium.com/@spatocode/symmetric-encryption-in-javascript-bcb5fd14c273
 // https://nodejs.org/api/crypto.html
@@ -13,9 +14,9 @@ export class CipheringComponent implements OnInit {
 	public plainText = 'le texte à chiffrer, coucou !';
 	public cipheredText = '';
 	algorithm = 'aes-192-cbc';
-	public salt = crypto.randomBytes(16);
-	public initial_vector = crypto.randomBytes(16);
-	public key = '';
+	// public salt = Crypto.randomBytes(16);
+	// public initial_vector = Crypto.randomBytes(16);
+	public key;
 	public otherCipheredText: any;
 
 	constructor() {}
@@ -25,34 +26,33 @@ export class CipheringComponent implements OnInit {
 	}
 
 	encrypt(someText) {
-		this.key = crypto.scryptSync(someText, 'salt', 24);
-		this.initial_vector = crypto.randomBytes(16);
-
-		const cipher = crypto.createCipheriv(this.algorithm, this.key, this.initial_vector);
-
-		cipher.on('readable', () => {
-			this.cipheredText = cipher.read().toString('hex');
-			console.log(cipher.read().toString('hex'));
-		});
-
-		let output = '';
-
-		this.cipheredText = someText;
-		// outputs encrypted hex
-		console.log(this.cipheredText);
+		// this.key = Crypto.scryptSync(someText, 'salt', 24);
+		// this.initial_vector = Crypto.randomBytes(16);
+		//
+		// const cipher = Crypto.createCipheriv(this.algorithm, this.key, this.initial_vector);
+		//
+		// cipher.on('readable', () => {
+		// 	this.cipheredText = cipher.read().toString('hex');
+		// 	console.log(cipher.read().toString('hex'));
+		// });
+		//
+		//
+		// this.cipheredText = someText;
+		// // outputs encrypted hex
+		// console.log(this.cipheredText);
 	}
 
 	decrypt(sometext) {
-		const decipher = crypto.createDecipheriv(this.algorithm, this.key, this.initial_vector);
-
-		decipher.on('readable', () => {
-			this.otherCipheredText = decipher.read().toString('utf8');
-
-			console.log('otherCipheredText decrypt', this.otherCipheredText);
-		});
-
-		decipher.write(sometext, 'hex');
-		decipher.end();
+		// const decipher = Crypto.createDecipheriv(this.algorithm, this.key, this.initial_vector);
+		//
+		// decipher.on('readable', () => {
+		// 	this.otherCipheredText = decipher.read().toString('utf8');
+		//
+		// 	console.log('otherCipheredText decrypt', this.otherCipheredText);
+		// });
+		//
+		// decipher.write(sometext, 'hex');
+		// decipher.end();
 	}
 
 	convertTextToInt(someText) {

From 760bde7e3069e6c2f84724b05c80c7260f7fc2a7 Mon Sep 17 00:00:00 2001
From: tykayn <15d65f2f-0b14-4f70-bf34-e130180ed62b@users.tedomum.net>
Date: Tue, 9 Feb 2021 22:16:02 +0100
Subject: [PATCH 22/40] copy button

---
 .../shared/components/ui/copy-text/copy-text.component.html | 4 +++-
 .../shared/components/ui/copy-text/copy-text.component.ts   | 1 +
 src/styles/dev-utilities/_helpers.scss                      | 6 ++++++
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/app/shared/components/ui/copy-text/copy-text.component.html b/src/app/shared/components/ui/copy-text/copy-text.component.html
index 60b17a8a..c4265506 100644
--- a/src/app/shared/components/ui/copy-text/copy-text.component.html
+++ b/src/app/shared/components/ui/copy-text/copy-text.component.html
@@ -1,5 +1,7 @@
 <button (click)="copy()" class="btn btn--primary btn--outline" id="copyLink">
 	<i class="fa fa-copy" aria-hidden="true"></i>
-	{{ 'admin.copy_link' | translate }}
+	<span *ngIf="displayLabelButton">
+		{{ 'admin.copy_link' | translate }}
+	</span>
 	<span *ngIf="displayContentToCopy"> " {{ textToCopy }}" </span>
 </button>
diff --git a/src/app/shared/components/ui/copy-text/copy-text.component.ts b/src/app/shared/components/ui/copy-text/copy-text.component.ts
index 31c295b9..ae3cd96f 100644
--- a/src/app/shared/components/ui/copy-text/copy-text.component.ts
+++ b/src/app/shared/components/ui/copy-text/copy-text.component.ts
@@ -11,6 +11,7 @@ import { ToastService } from '../../../../core/services/toast.service';
 export class CopyTextComponent implements OnInit {
 	@Input() public textToCopy: string;
 	public displayContentToCopy = false;
+	@Input() public displayLabelButton = true;
 
 	constructor(private _clipboardService: ClipboardService, private toastService: ToastService) {}
 
diff --git a/src/styles/dev-utilities/_helpers.scss b/src/styles/dev-utilities/_helpers.scss
index 754805da..656c7dd4 100644
--- a/src/styles/dev-utilities/_helpers.scss
+++ b/src/styles/dev-utilities/_helpers.scss
@@ -15,6 +15,12 @@
 	box-shadow: $dark-lavender 0 0 10px;
 }
 
+.is-boxed {
+	border: 1px solid #ddd;
+	padding: 1em;
+	margin: 1em 0;
+}
+
 .nobold {
 	font-weight: normal;
 }

From 3e0c1ff3750a5f986dd850b6a6b765e19b8a1ad5 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Tue, 9 Feb 2021 22:47:57 +0100
Subject: [PATCH 23/40] easy ciphering working with and without salt

---
 .../date-select/date-select.component.scss    |  5 --
 .../ciphering/ciphering.component.html        | 79 +++++++++++++++----
 .../ciphering/ciphering.component.scss        | 18 +++++
 .../ciphering/ciphering.component.ts          | 55 ++++++++++---
 4 files changed, 125 insertions(+), 32 deletions(-)

diff --git a/src/app/features/administration/form/date-select/date-select.component.scss b/src/app/features/administration/form/date-select/date-select.component.scss
index 079527fa..e1f049d0 100644
--- a/src/app/features/administration/form/date-select/date-select.component.scss
+++ b/src/app/features/administration/form/date-select/date-select.component.scss
@@ -17,11 +17,6 @@
 	.btn + .btn {
 		margin-left: 1em;
 	}
-	.is-boxed {
-		border: 1px solid #ddd;
-		padding: 1em;
-		margin: 1em 0;
-	}
 
 	.cdk-drag-preview {
 		box-sizing: border-box;
diff --git a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.html b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.html
index 8e2042d3..5dd96ba7 100644
--- a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.html
+++ b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.html
@@ -1,22 +1,69 @@
 <div class="ciphering padded">
 	<h2>
-		Test de chiffrement
+		Essais de chiffrement pour un framadate zéro knoledge
 	</h2>
-	<br />
-	<input type="text" [(ngModel)]="plainText" (ngModelChange)="encrypt(plainText)" />
-	texte clair
-	<br />
-	<input type="text" [(ngModel)]="salt" />
-	salt
-	<br />
-	<input type="text" [(ngModel)]="key" />
-	pepper
+	<div class="columns">
+		<div class="column">
+			<section class="boxed-shadow">
+				<h3>Chiffrement simple</h3>
+				<input type="text" [(ngModel)]="plainText" (ngModelChange)="encrypt(plainText)" />
+				texte clair à convertir en truc indéchiffrable (à priori)
 
-	<br />
-	<input type="text" [(ngModel)]="cipheredText" />
-	texte chiffré
+				<br />
+				simple ciphered. On assigne un numéro à chaque caractère, séparé par un tiret en sortie.
+				<strong class="cipher-result">
+					<app-copy-text [textToCopy]="simpleCipheredText" [displayLabelButton]="false"></app-copy-text>
+					{{ simpleCipheredText }}
+				</strong>
+				<br />
+				<h3>Avec un peu de sel?</h3>
+				<input type="text" [(ngModel)]="salt" />
+				salt
+				<br />
+				simple ciphered avec un sel. on ajoute le sel avant le texte puis on passe le tout dans la conversion
+				comme ci-dessus.
+				<strong class="cipher-result">
+					<app-copy-text
+						[textToCopy]="simpleCipheredTextWithSalt"
+						[displayLabelButton]="false"
+					></app-copy-text>
+					{{ simpleCipheredTextWithSalt }}
+				</strong>
+			</section>
+		</div>
+		<div class="column"></div>
+	</div>
 
-	<br />
-	<input type="text" [(ngModel)]="otherCipheredText" />
-	texte à déchiffrer
+	<section class="boxed-shadow">
+		<h3>Déchiffrement simple</h3>
+
+		Collez ici le texte chiffré à convertir en truc lisible par l'opération
+		<strike>du saint esprit</strike> réalisée dans l'autre sens
+		<input type="text" [(ngModel)]="cipheredText" />
+		<br />
+		simple texte déchiffré
+		<strong class="cipher-result">
+			{{ simpleDeCipheredText }}
+		</strong>
+		simple texte déchiffré avec sel
+		<strong class="cipher-result">
+			{{ simpleDeCipheredTextWithSalt }}
+		</strong>
+	</section>
+
+	<section class="is-boxed">
+		<h3>Chiffrement AES</h3>
+
+		<app-wip-todo></app-wip-todo>
+		<input type="text" [(ngModel)]="cipheredText" />
+		texte avancé à déchiffrer
+		<br />
+		<input type="text" [(ngModel)]="salt" />
+		salt
+		<input type="text" [(ngModel)]="initial_vector" />
+		initial_vector
+		<br />
+		<input type="text" [(ngModel)]="key" />
+		key
+	</section>
 </div>
diff --git a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.scss b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.scss
index e69de29b..fbf02e7f 100644
--- a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.scss
+++ b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.scss
@@ -0,0 +1,18 @@
+.boxed-shadow {
+	padding: 1em;
+	margin-bottom: 1em;
+}
+
+.cipher-result {
+	border-radius: 3px;
+	background: #00003b;
+	color: #7d6c99;
+	padding: 0.5em;
+	margin-left: 1em;
+	display: block;
+	min-width: 10ch;
+	min-height: 2em;
+	max-width: 100%;
+	overflow: hidden;
+	line-height: 2em;
+}
diff --git a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.ts b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.ts
index 70ee4d15..3c443ae1 100644
--- a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.ts
+++ b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.ts
@@ -11,13 +11,15 @@ import * as Crypto from 'crypto';
 	styleUrls: ['./ciphering.component.scss'],
 })
 export class CipheringComponent implements OnInit {
-	public plainText = 'le texte à chiffrer, coucou !';
-	public cipheredText = '';
+	// public plainText = 'le texte à chiffrer, coucou !';
+	public plainText = 'salut les pipole';
+	public cipheredText =
+		'121-127-42-110-127-42-122-121-115-128-124-111-125-107-118-127-126-42-118-111-125-42-122-115-122-121-118-111';
 	algorithm = 'aes-192-cbc';
-	// public salt = Crypto.randomBytes(16);
-	// public initial_vector = Crypto.randomBytes(16);
+	public salt = 'ou du poivre';
+	public initial_vector = '';
 	public key;
-	public otherCipheredText: any;
+	public otherCipheredText = 'le texte à chiffrer, coucou !';
 
 	constructor() {}
 
@@ -25,6 +27,21 @@ export class CipheringComponent implements OnInit {
 		this.encrypt(this.plainText);
 	}
 
+	//  ---------------------- make unreadable ----------------------
+	get simpleCipheredText() {
+		return this.convertTextToInt(this.plainText);
+	}
+	get simpleCipheredTextWithSalt() {
+		return this.convertTextToInt(this.salt + this.plainText);
+	}
+	//  ---------------------- make readable ----------------------
+	get simpleDeCipheredText() {
+		return this.convertIntToText(this.cipheredText);
+	}
+	get simpleDeCipheredTextWithSalt() {
+		return this.convertIntToText(this.salt + this.cipheredText);
+	}
+	//  ---------------------- conversions ----------------------
 	encrypt(someText) {
 		// this.key = Crypto.scryptSync(someText, 'salt', 24);
 		// this.initial_vector = Crypto.randomBytes(16);
@@ -40,6 +57,7 @@ export class CipheringComponent implements OnInit {
 		// this.cipheredText = someText;
 		// // outputs encrypted hex
 		// console.log(this.cipheredText);
+		return someText;
 	}
 
 	decrypt(sometext) {
@@ -53,14 +71,29 @@ export class CipheringComponent implements OnInit {
 		//
 		// decipher.write(sometext, 'hex');
 		// decipher.end();
+		return sometext;
 	}
 
-	convertTextToInt(someText) {
-		let output = '';
-
-		for (let i = 0; i < someText.length; i++) {
-			output += someText[i].charCodeAt(0);
+	convertTextToInt(value) {
+		let result = '';
+		for (let i = 0; i < value.length; i++) {
+			if (i < value.length - 1) {
+				result += value.charCodeAt(i) + 10;
+				result += '-';
+			} else {
+				result += value.charCodeAt(i) + 10;
+			}
 		}
-		return output;
+		return result;
+	}
+	convertIntToText(value) {
+		let result = '';
+		const array = value.split('-');
+
+		for (let i = 0; i < array.length; i++) {
+			result += String.fromCharCode(array[i] - 10);
+		}
+		// remove salt characters
+		return result.slice(this.salt.length);
 	}
 }

From 0885df23df39b20fa8ee16aa7c2b3fb1c13a8ec3 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Wed, 10 Feb 2021 10:35:36 +0100
Subject: [PATCH 24/40] mixed salt for ciphering

---
 .../ciphering/ciphering.component.html        | 49 ++++++++++---
 .../ciphering/ciphering.component.scss        | 12 +++-
 .../ciphering/ciphering.component.ts          | 72 +++++++++++++++++--
 3 files changed, 116 insertions(+), 17 deletions(-)

diff --git a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.html b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.html
index 5dd96ba7..7489eef5 100644
--- a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.html
+++ b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.html
@@ -1,13 +1,13 @@
 <div class="ciphering padded">
-	<h2>
+	<h2 class="title">
 		Essais de chiffrement pour un framadate zéro knoledge
 	</h2>
 	<div class="columns">
 		<div class="column">
 			<section class="boxed-shadow">
-				<h3>Chiffrement simple</h3>
+				<h3 class="title">Chiffrement simple</h3>
 				<input type="text" [(ngModel)]="plainText" (ngModelChange)="encrypt(plainText)" />
-				texte clair à convertir en truc indéchiffrable (à priori)
+				texte clair de {{ plainText.length }} caractères à convertir en truc indéchiffrable (à priori)
 
 				<br />
 				simple ciphered. On assigne un numéro à chaque caractère, séparé par un tiret en sortie.
@@ -16,12 +16,13 @@
 					{{ simpleCipheredText }}
 				</strong>
 				<br />
-				<h3>Avec un peu de sel?</h3>
+				<h3 class="title">Avec un peu de sel?</h3>
 				<input type="text" [(ngModel)]="salt" />
-				salt
+				({{ salt.length }} caractères)
 				<br />
 				simple ciphered avec un sel. on ajoute le sel avant le texte puis on passe le tout dans la conversion
-				comme ci-dessus.
+				comme ci-dessus. on obtient un message de {{ plainText.length }} + {{ salt.length }} caractères
+				convertis en {{ plainText.length + salt.length }} nombres séparés par des tirets.
 				<strong class="cipher-result">
 					<app-copy-text
 						[textToCopy]="simpleCipheredTextWithSalt"
@@ -29,26 +30,54 @@
 					></app-copy-text>
 					{{ simpleCipheredTextWithSalt }}
 				</strong>
+				<h3 class="title">Légèrement épicé</h3>
+				simple cipher avec un sel avant et un saupoudrage du sel sur chacun des caractères de la phrase. la
+				valeur du caractère est ajoutée à la valeur du caractère du sel correspondant. une fois arrivé à la fin
+				du sel on reprend au début pour saupoudrer toute la phrase à chiffrer.
+				<strong class="cipher-result">
+					<app-copy-text
+						[textToCopy]="simpleCipheredTextWithSpreadSalt"
+						[displayLabelButton]="false"
+					></app-copy-text>
+					{{ simpleCipheredTextWithSpreadSalt }}
+				</strong>
+				<br />
+
+				<h3 class="title">On en remet une couche</h3>
+				Les nombres que l'on a obtenu peuvent être transmis après une opération de conversion en caractères. On
+				a donc autant de caractères que juste avant. ça ressemble déjà plus à un message pas évident à
+				déchiffrer.
+				<strong class="cipher-result">
+					<app-copy-text [textToCopy]="layerOnSpread" [displayLabelButton]="false"></app-copy-text>
+					{{ layerOnSpread }}
+				</strong>
 			</section>
 		</div>
 		<div class="column"></div>
 	</div>
 
 	<section class="boxed-shadow">
-		<h3>Déchiffrement simple</h3>
+		<h3 class="title">Déchiffrement simple</h3>
 
 		Collez ici le texte chiffré à convertir en truc lisible par l'opération
-		<strike>du saint esprit</strike> réalisée dans l'autre sens
+		<strike>du saint esprit</strike> réalisée dans l'autre sens.
+		<br />
 		<input type="text" [(ngModel)]="cipheredText" />
 		<br />
-		simple texte déchiffré
+		Simple texte déchiffré. Il suffit de séparer les numéros en caractère et trouver à quel caractère correspond une
+		autre pour trouver n'importe quel caractère ayant le même chiffre.
 		<strong class="cipher-result">
 			{{ simpleDeCipheredText }}
 		</strong>
-		simple texte déchiffré avec sel
+		simple texte déchiffré avec sel, en enlevant les {{ salt.length }} premiers caractères du sel
 		<strong class="cipher-result">
 			{{ simpleDeCipheredTextWithSalt }}
 		</strong>
+		Simple texte déchiffré avec sel saupoudré, en enlevant à chaque caractère la valeur du caractère courant du sel.
+		Sans connaître le sel il est déjà plus difficile de deviner la phrase, mais des régularités apparaissent encore.
+		<strong class="cipher-result">
+			{{ simpleDeCipheredTextWithSpreadSalt }}
+		</strong>
 	</section>
 
 	<section class="is-boxed">
diff --git a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.scss b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.scss
index fbf02e7f..5c92667c 100644
--- a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.scss
+++ b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.scss
@@ -1,6 +1,7 @@
 .boxed-shadow {
 	padding: 1em;
 	margin-bottom: 1em;
+	width: 85%;
 }
 
 .cipher-result {
@@ -12,7 +13,14 @@
 	display: block;
 	min-width: 10ch;
 	min-height: 2em;
-	max-width: 100%;
-	overflow: hidden;
+	max-width: 50%;
+	overflow-x: scroll;
 	line-height: 2em;
+	app-copy-text {
+		float: left;
+	}
+}
+
+.title {
+	margin-top: 1em;
 }
diff --git a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.ts b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.ts
index 3c443ae1..930fe5ae 100644
--- a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.ts
+++ b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.ts
@@ -1,22 +1,22 @@
 import { Component, OnInit } from '@angular/core';
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 
-import * as Crypto from 'crypto';
 // documentation:
 // https://medium.com/@spatocode/symmetric-encryption-in-javascript-bcb5fd14c273
 // https://nodejs.org/api/crypto.html
+// https://preview.npmjs.com/package/ecma-nacl
 @Component({
 	selector: 'app-ciphering',
 	templateUrl: './ciphering.component.html',
 	styleUrls: ['./ciphering.component.scss'],
 })
 export class CipheringComponent implements OnInit {
-	// public plainText = 'le texte à chiffrer, coucou !';
-	public plainText = 'salut les pipole';
+	public plainText = 'le texte à chiffrer, coucou !';
+	// public plainText = '1234';
 	public cipheredText =
 		'121-127-42-110-127-42-122-121-115-128-124-111-125-107-118-127-126-42-118-111-125-42-122-115-122-121-118-111';
 	algorithm = 'aes-192-cbc';
-	public salt = 'ou du poivre';
+	public salt = 'ou du poivre heh';
 	public initial_vector = '';
 	public key;
 	public otherCipheredText = 'le texte à chiffrer, coucou !';
@@ -31,16 +31,29 @@ export class CipheringComponent implements OnInit {
 	get simpleCipheredText() {
 		return this.convertTextToInt(this.plainText);
 	}
+
 	get simpleCipheredTextWithSalt() {
 		return this.convertTextToInt(this.salt + this.plainText);
 	}
+	get simpleCipheredTextWithSpreadSalt() {
+		return this.convertTextToIntMixedSalt(this.salt + this.plainText);
+	}
+	get layerOnSpread() {
+		return this.convertIntToText(this.simpleCipheredTextWithSpreadSalt, false);
+	}
+
 	//  ---------------------- make readable ----------------------
 	get simpleDeCipheredText() {
 		return this.convertIntToText(this.cipheredText);
 	}
+
 	get simpleDeCipheredTextWithSalt() {
 		return this.convertIntToText(this.salt + this.cipheredText);
 	}
+	get simpleDeCipheredTextWithSpreadSalt() {
+		return this.convertIntToTextMixedSalt(this.salt + this.cipheredText);
+	}
+
 	//  ---------------------- conversions ----------------------
 	encrypt(someText) {
 		// this.key = Crypto.scryptSync(someText, 'salt', 24);
@@ -86,13 +99,62 @@ export class CipheringComponent implements OnInit {
 		}
 		return result;
 	}
-	convertIntToText(value) {
+
+	convertIntToText(value, removeBeginning = true) {
 		let result = '';
 		const array = value.split('-');
 
 		for (let i = 0; i < array.length; i++) {
 			result += String.fromCharCode(array[i] - 10);
 		}
+		console.info('value, result', value, result);
+		// remove salt characters
+		if (removeBeginning) {
+			result = result.slice(this.salt.length, -1);
+		}
+		return result;
+	}
+
+	convertTextToIntMixedSalt(value) {
+		let result = '';
+		let saltIndex = 0;
+		for (let i = 0; i < value.length; i++) {
+			if (i < value.length - 1) {
+				result += value.charCodeAt(i) + 10 + this.salt.charCodeAt(saltIndex);
+				result += '-';
+			} else {
+				result += value.charCodeAt(i) + 10 + this.salt.charCodeAt(saltIndex);
+			}
+			saltIndex++;
+			if (saltIndex >= this.salt.length) {
+				saltIndex = 0;
+			}
+		}
+		return result;
+	}
+
+	convertIntToTextMixedSalt(value) {
+		let result = '';
+		const array = value.split('-');
+		let saltIndex = -1;
+
+		for (let i = 0; i < array.length; i++) {
+			// console.log(
+			// 	'encodage',
+			// 	i,
+			// 	value.charCodeAt(i),
+			// 	saltIndex,
+			// 	this.salt.charCodeAt(saltIndex),
+			// 	value.charCodeAt(i) + 10 + this.salt.charCodeAt(saltIndex)
+			// );
+
+			result += String.fromCharCode(array[i] - 10 - this.salt.charCodeAt(saltIndex));
+			if (saltIndex > this.salt.length) {
+				saltIndex = 0;
+			} else {
+				saltIndex++;
+			}
+		}
 		// remove salt characters
 		return result.slice(this.salt.length);
 	}

From 51de2b2e028305eabfdb9c6bb91a5758aa815344 Mon Sep 17 00:00:00 2001
From: tykayn <15d65f2f-0b14-4f70-bf34-e130180ed62b@users.tedomum.net>
Date: Wed, 10 Feb 2021 11:22:36 +0100
Subject: [PATCH 25/40] spacing dev menu button

---
 src/app/app.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 477450fe..ce833dc8 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -9,7 +9,7 @@
 				<app-header [appTitle]="appTitle" [appLogo]="appLogo"></app-header>
 				<main>
 					<router-outlet></router-outlet>
-					<div *ngIf="devModeEnabled">
+					<div class="padded" *ngIf="devModeEnabled">
 						<br />
 						<mat-slide-toggle (change)="sidenav.toggle()" label="dev menu"> </mat-slide-toggle> menu
 						développeur

From d72e7763da7e60d551b3ee585555bfa83e6ddd11 Mon Sep 17 00:00:00 2001
From: tykayn <15d65f2f-0b14-4f70-bf34-e130180ed62b@users.tedomum.net>
Date: Wed, 10 Feb 2021 11:23:09 +0100
Subject: [PATCH 26/40] add md5 lib to ciphering page

---
 .../ciphering/ciphering.component.html        |  35 +++-
 .../ciphering/ciphering.component.scss        |   8 +-
 .../ciphering/ciphering.component.ts          |  10 +-
 .../ui/static-pages/ciphering/lib_cipher.ts   | 184 ++++++++++++++++++
 src/styles/libraries/_overrides.scss          |   4 +
 5 files changed, 234 insertions(+), 7 deletions(-)
 create mode 100644 src/app/features/shared/components/ui/static-pages/ciphering/lib_cipher.ts

diff --git a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.html b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.html
index 7489eef5..bef038ed 100644
--- a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.html
+++ b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.html
@@ -30,10 +30,39 @@
 					></app-copy-text>
 					{{ simpleCipheredTextWithSalt }}
 				</strong>
+				<h3 class="title">On hashe le sel</h3>
+				<div class="columns">
+					<div class="column is-half">
+						Pour gagner en aléatoire on peut passer le sel dans une fonction de hashage cryptographique,
+						telle que MD5 (Message Digest 5).
+						<img
+							src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/38/Md5_generalview.png/330px-Md5_generalview.png"
+							alt="fonctionnement de MD5"
+						/>
+					</div>
+					<div class="column is-half">
+						Voici ce que le hashage du sel donne:
+						<code>
+							{{ md5(salt) }}
+						</code>
+						({{ md5(salt).length }}caractères)
+						<br />
+						Le nouveau texte chiffré avec le sel hashé est donc:
+						<strong class="cipher-result">
+							<app-copy-text
+								[textToCopy]="simpleCipheredTextWithHashedSalt"
+								[displayLabelButton]="false"
+							></app-copy-text>
+							{{ simpleCipheredTextWithHashedSalt }}
+						</strong>
+					</div>
+				</div>
+
 				<h3 class="title">Légèrement épicé</h3>
-				simple cipher avec un sel avant et un saupoudrage du sel sur chacun des caractères de la phrase. la
+				simple chiffrement avec un sel avant et un saupoudrage du sel sur chacun des caractères de la phrase. la
 				valeur du caractère est ajoutée à la valeur du caractère du sel correspondant. une fois arrivé à la fin
-				du sel on reprend au début pour saupoudrer toute la phrase à chiffrer.
+				du sel on reprend au début pour saupoudrer toute la phrase à chiffrer. Ce qui donne
+				{{ simpleCipheredTextWithSpreadSalt.split('-').length }} chiffres.
 				<strong class="cipher-result">
 					<app-copy-text
 						[textToCopy]="simpleCipheredTextWithSpreadSalt"
@@ -46,7 +75,7 @@
 				<h3 class="title">On en remet une couche</h3>
 				Les nombres que l'on a obtenu peuvent être transmis après une opération de conversion en caractères. On
 				a donc autant de caractères que juste avant. ça ressemble déjà plus à un message pas évident à
-				déchiffrer.
+				déchiffrer. Le nouveau texte fait {{ layerOnSpread.length }} caractères.
 				<strong class="cipher-result">
 					<app-copy-text [textToCopy]="layerOnSpread" [displayLabelButton]="false"></app-copy-text>
 					{{ layerOnSpread }}
diff --git a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.scss b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.scss
index 5c92667c..a9a47b26 100644
--- a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.scss
+++ b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.scss
@@ -1,7 +1,8 @@
 .boxed-shadow {
 	padding: 1em;
 	margin-bottom: 1em;
-	width: 85%;
+	max-width: 85%;
+	display: inline-block;
 }
 
 .cipher-result {
@@ -13,11 +14,12 @@
 	display: block;
 	min-width: 10ch;
 	min-height: 2em;
-	max-width: 50%;
+	max-width: 25%;
 	overflow-x: scroll;
 	line-height: 2em;
 	app-copy-text {
-		float: left;
+		//float: left;
+		margin-right: 1em;
 	}
 }
 
diff --git a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.ts b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.ts
index 930fe5ae..4c801907 100644
--- a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.ts
+++ b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import CipherLib from './lib_cipher';
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 
 // documentation:
@@ -38,8 +39,11 @@ export class CipheringComponent implements OnInit {
 	get simpleCipheredTextWithSpreadSalt() {
 		return this.convertTextToIntMixedSalt(this.salt + this.plainText);
 	}
+	get simpleCipheredTextWithHashedSalt() {
+		return this.convertTextToIntMixedSalt(this.md5(this.salt) + this.plainText);
+	}
 	get layerOnSpread() {
-		return this.convertIntToText(this.simpleCipheredTextWithSpreadSalt, false);
+		return this.convertIntToText(this.simpleCipheredTextWithHashedSalt, false);
 	}
 
 	//  ---------------------- make readable ----------------------
@@ -158,4 +162,8 @@ export class CipheringComponent implements OnInit {
 		// remove salt characters
 		return result.slice(this.salt.length);
 	}
+
+	md5(someText) {
+		return CipherLib.md5(someText);
+	}
 }
diff --git a/src/app/features/shared/components/ui/static-pages/ciphering/lib_cipher.ts b/src/app/features/shared/components/ui/static-pages/ciphering/lib_cipher.ts
new file mode 100644
index 00000000..4f1c9e5f
--- /dev/null
+++ b/src/app/features/shared/components/ui/static-pages/ciphering/lib_cipher.ts
@@ -0,0 +1,184 @@
+class lib_cipher {
+	hex_chr = '0123456789abcdef'.split('');
+
+	md5cycle(x, k) {
+		let a = x[0],
+			b = x[1],
+			c = x[2],
+			d = x[3];
+
+		a = this.ff(a, b, c, d, k[0], 7, -680876936);
+		d = this.ff(d, a, b, c, k[1], 12, -389564586);
+		c = this.ff(c, d, a, b, k[2], 17, 606105819);
+		b = this.ff(b, c, d, a, k[3], 22, -1044525330);
+		a = this.ff(a, b, c, d, k[4], 7, -176418897);
+		d = this.ff(d, a, b, c, k[5], 12, 1200080426);
+		c = this.ff(c, d, a, b, k[6], 17, -1473231341);
+		b = this.ff(b, c, d, a, k[7], 22, -45705983);
+		a = this.ff(a, b, c, d, k[8], 7, 1770035416);
+		d = this.ff(d, a, b, c, k[9], 12, -1958414417);
+		c = this.ff(c, d, a, b, k[10], 17, -42063);
+		b = this.ff(b, c, d, a, k[11], 22, -1990404162);
+		a = this.ff(a, b, c, d, k[12], 7, 1804603682);
+		d = this.ff(d, a, b, c, k[13], 12, -40341101);
+		c = this.ff(c, d, a, b, k[14], 17, -1502002290);
+		b = this.ff(b, c, d, a, k[15], 22, 1236535329);
+
+		a = this.gg(a, b, c, d, k[1], 5, -165796510);
+		d = this.gg(d, a, b, c, k[6], 9, -1069501632);
+		c = this.gg(c, d, a, b, k[11], 14, 643717713);
+		b = this.gg(b, c, d, a, k[0], 20, -373897302);
+		a = this.gg(a, b, c, d, k[5], 5, -701558691);
+		d = this.gg(d, a, b, c, k[10], 9, 38016083);
+		c = this.gg(c, d, a, b, k[15], 14, -660478335);
+		b = this.gg(b, c, d, a, k[4], 20, -405537848);
+		a = this.gg(a, b, c, d, k[9], 5, 568446438);
+		d = this.gg(d, a, b, c, k[14], 9, -1019803690);
+		c = this.gg(c, d, a, b, k[3], 14, -187363961);
+		b = this.gg(b, c, d, a, k[8], 20, 1163531501);
+		a = this.gg(a, b, c, d, k[13], 5, -1444681467);
+		d = this.gg(d, a, b, c, k[2], 9, -51403784);
+		c = this.gg(c, d, a, b, k[7], 14, 1735328473);
+		b = this.gg(b, c, d, a, k[12], 20, -1926607734);
+
+		a = this.hh(a, b, c, d, k[5], 4, -378558);
+		d = this.hh(d, a, b, c, k[8], 11, -2022574463);
+		c = this.hh(c, d, a, b, k[11], 16, 1839030562);
+		b = this.hh(b, c, d, a, k[14], 23, -35309556);
+		a = this.hh(a, b, c, d, k[1], 4, -1530992060);
+		d = this.hh(d, a, b, c, k[4], 11, 1272893353);
+		c = this.hh(c, d, a, b, k[7], 16, -155497632);
+		b = this.hh(b, c, d, a, k[10], 23, -1094730640);
+		a = this.hh(a, b, c, d, k[13], 4, 681279174);
+		d = this.hh(d, a, b, c, k[0], 11, -358537222);
+		c = this.hh(c, d, a, b, k[3], 16, -722521979);
+		b = this.hh(b, c, d, a, k[6], 23, 76029189);
+		a = this.hh(a, b, c, d, k[9], 4, -640364487);
+		d = this.hh(d, a, b, c, k[12], 11, -421815835);
+		c = this.hh(c, d, a, b, k[15], 16, 530742520);
+		b = this.hh(b, c, d, a, k[2], 23, -995338651);
+
+		a = this.ii(a, b, c, d, k[0], 6, -198630844);
+		d = this.ii(d, a, b, c, k[7], 10, 1126891415);
+		c = this.ii(c, d, a, b, k[14], 15, -1416354905);
+		b = this.ii(b, c, d, a, k[5], 21, -57434055);
+		a = this.ii(a, b, c, d, k[12], 6, 1700485571);
+		d = this.ii(d, a, b, c, k[3], 10, -1894986606);
+		c = this.ii(c, d, a, b, k[10], 15, -1051523);
+		b = this.ii(b, c, d, a, k[1], 21, -2054922799);
+		a = this.ii(a, b, c, d, k[8], 6, 1873313359);
+		d = this.ii(d, a, b, c, k[15], 10, -30611744);
+		c = this.ii(c, d, a, b, k[6], 15, -1560198380);
+		b = this.ii(b, c, d, a, k[13], 21, 1309151649);
+		a = this.ii(a, b, c, d, k[4], 6, -145523070);
+		d = this.ii(d, a, b, c, k[11], 10, -1120210379);
+		c = this.ii(c, d, a, b, k[2], 15, 718787259);
+		b = this.ii(b, c, d, a, k[9], 21, -343485551);
+
+		x[0] = this.add32(a, x[0]);
+		x[1] = this.add32(b, x[1]);
+		x[2] = this.add32(c, x[2]);
+		x[3] = this.add32(d, x[3]);
+	}
+
+	cmn(q, a, b, x, s, t) {
+		a = this.add32(this.add32(a, q), this.add32(x, t));
+		return this.add32((a << s) | (a >>> (32 - s)), b);
+	}
+
+	ff(a, b, c, d, x, s, t) {
+		return this.cmn((b & c) | (~b & d), a, b, x, s, t);
+	}
+
+	gg(a, b, c, d, x, s, t) {
+		return this.cmn((b & d) | (c & ~d), a, b, x, s, t);
+	}
+
+	hh(a, b, c, d, x, s, t) {
+		return this.cmn(b ^ c ^ d, a, b, x, s, t);
+	}
+
+	ii(a, b, c, d, x, s, t) {
+		return this.cmn(c ^ (b | ~d), a, b, x, s, t);
+	}
+
+	md51(s) {
+		// eslint-disable-next-line prefer-const
+		let n = s.length,
+			// eslint-disable-next-line prefer-const
+			state = [1732584193, -271733879, -1732584194, 271733878],
+			i;
+		for (i = 64; i <= s.length; i += 64) {
+			this.md5cycle(state, this.md5blk(s.substring(i - 64, i)));
+		}
+		s = s.substring(i - 64);
+		const tail = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
+		for (i = 0; i < s.length; i++) tail[i >> 2] |= s.charCodeAt(i) << (i % 4 << 3);
+		tail[i >> 2] |= 0x80 << (i % 4 << 3);
+		if (i > 55) {
+			this.md5cycle(state, tail);
+			for (i = 0; i < 16; i++) tail[i] = 0;
+		}
+		tail[14] = n * 8;
+		this.md5cycle(state, tail);
+		return state;
+	}
+
+	/* there needs to be support for Unicode here,
+	 * unless we pretend that we can redefine the MD-5
+	 * algorithm for multi-byte characters (perhaps
+	 * by adding every four 16-bit characters and
+	 * shortening the sum to 32 bits). Otherwise
+	 * I suggest performing MD-5 as if every character
+	 * was two bytes--e.g., 0040 0025 = @%--but then
+	 * how will an ordinary MD-5 sum be matched?
+	 * There is no way to standardize text to something
+	 * like UTF-8 before transformation; speed cost is
+	 * utterly prohibitive. The JavaScript standard
+	 * itself needs to look at this: it should start
+	 * providing access to strings as preformed UTF-8
+	 * 8-bit unsigned value arrays.
+	 */
+	md5blk(s) {
+		/* I figured global was faster.   */
+
+		const md5blks = []; /* Andy King said do it this way. */
+		for (let i = 0; i < 64; i += 4) {
+			md5blks[i >> 2] =
+				s.charCodeAt(i) +
+				(s.charCodeAt(i + 1) << 8) +
+				(s.charCodeAt(i + 2) << 16) +
+				(s.charCodeAt(i + 3) << 24);
+		}
+		return md5blks;
+	}
+
+	rhex(n) {
+		let s = '',
+			j = 0;
+		for (; j < 4; j++) s += this.hex_chr[(n >> (j * 8 + 4)) & 0x0f] + this.hex_chr[(n >> (j * 8)) & 0x0f];
+		return s;
+	}
+
+	hex(x) {
+		for (let i = 0; i < x.length; i++) x[i] = this.rhex(x[i]);
+		return x.join('');
+	}
+
+	md5(s) {
+		return this.hex(this.md51(s));
+	}
+
+	/* this function is much faster,
+	so if possible we use it. Some IEs
+	are the only ones I know of that
+	need the idiotic second function,
+	generated by an if clause.  */
+
+	add32(a, b) {
+		return (a + b) & 0xffffffff;
+	}
+}
+const CipherLib = new lib_cipher();
+
+export default CipherLib;
diff --git a/src/styles/libraries/_overrides.scss b/src/styles/libraries/_overrides.scss
index af040a3e..12c528d7 100644
--- a/src/styles/libraries/_overrides.scss
+++ b/src/styles/libraries/_overrides.scss
@@ -11,3 +11,7 @@ $body-background-color: $black;
 $control-border-width: 2px;
 $input-border-color: transparent;
 $input-shadow: none;
+
+.notification {
+	margin: 1em 0;
+}

From e5411ab425368ce6e3a7b024e8d9fb711e041018 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Wed, 10 Feb 2021 11:45:05 +0100
Subject: [PATCH 27/40] listing char codes

---
 .../ciphering/ciphering.component.html        | 192 ++++++++++--------
 .../ciphering/ciphering.component.scss        |   5 +-
 2 files changed, 106 insertions(+), 91 deletions(-)

diff --git a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.html b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.html
index bef038ed..c2caca64 100644
--- a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.html
+++ b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.html
@@ -2,89 +2,102 @@
 	<h2 class="title">
 		Essais de chiffrement pour un framadate zéro knoledge
 	</h2>
-	<div class="columns">
-		<div class="column">
-			<section class="boxed-shadow">
-				<h3 class="title">Chiffrement simple</h3>
-				<input type="text" [(ngModel)]="plainText" (ngModelChange)="encrypt(plainText)" />
-				texte clair de {{ plainText.length }} caractères à convertir en truc indéchiffrable (à priori)
-
-				<br />
-				simple ciphered. On assigne un numéro à chaque caractère, séparé par un tiret en sortie.
-				<strong class="cipher-result">
-					<app-copy-text [textToCopy]="simpleCipheredText" [displayLabelButton]="false"></app-copy-text>
-					{{ simpleCipheredText }}
-				</strong>
-				<br />
-				<h3 class="title">Avec un peu de sel?</h3>
-				<input type="text" [(ngModel)]="salt" />
-				({{ salt.length }} caractères)
-				<br />
-				simple ciphered avec un sel. on ajoute le sel avant le texte puis on passe le tout dans la conversion
-				comme ci-dessus. on obtient un message de {{ plainText.length }} + {{ salt.length }} caractères
-				convertis en {{ plainText.length + salt.length }} nombres séparés par des tirets.
-				<strong class="cipher-result">
-					<app-copy-text
-						[textToCopy]="simpleCipheredTextWithSalt"
-						[displayLabelButton]="false"
-					></app-copy-text>
-					{{ simpleCipheredTextWithSalt }}
-				</strong>
-				<h3 class="title">On hashe le sel</h3>
-				<div class="columns">
-					<div class="column is-half">
-						Pour gagner en aléatoire on peut passer le sel dans une fonction de hashage cryptographique,
-						telle que MD5 (Message Digest 5).
-						<img
-							src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/38/Md5_generalview.png/330px-Md5_generalview.png"
-							alt="fonctionnement de MD5"
-						/>
-					</div>
-					<div class="column is-half">
-						Voici ce que le hashage du sel donne:
-						<code>
-							{{ md5(salt) }}
-						</code>
-						({{ md5(salt).length }}caractères)
-						<br />
-						Le nouveau texte chiffré avec le sel hashé est donc:
-						<strong class="cipher-result">
-							<app-copy-text
-								[textToCopy]="simpleCipheredTextWithHashedSalt"
-								[displayLabelButton]="false"
-							></app-copy-text>
-							{{ simpleCipheredTextWithHashedSalt }}
-						</strong>
-					</div>
-				</div>
-
-				<h3 class="title">Légèrement épicé</h3>
-				simple chiffrement avec un sel avant et un saupoudrage du sel sur chacun des caractères de la phrase. la
-				valeur du caractère est ajoutée à la valeur du caractère du sel correspondant. une fois arrivé à la fin
-				du sel on reprend au début pour saupoudrer toute la phrase à chiffrer. Ce qui donne
-				{{ simpleCipheredTextWithSpreadSalt.split('-').length }} chiffres.
-				<strong class="cipher-result">
-					<app-copy-text
-						[textToCopy]="simpleCipheredTextWithSpreadSalt"
-						[displayLabelButton]="false"
-					></app-copy-text>
-					{{ simpleCipheredTextWithSpreadSalt }}
-				</strong>
-				<br />
-
-				<h3 class="title">On en remet une couche</h3>
-				Les nombres que l'on a obtenu peuvent être transmis après une opération de conversion en caractères. On
-				a donc autant de caractères que juste avant. ça ressemble déjà plus à un message pas évident à
-				déchiffrer. Le nouveau texte fait {{ layerOnSpread.length }} caractères.
-				<strong class="cipher-result">
-					<app-copy-text [textToCopy]="layerOnSpread" [displayLabelButton]="false"></app-copy-text>
-					{{ layerOnSpread }}
-				</strong>
-			</section>
+	<section class="boxed-shadow">
+		<h3 class="title">Chiffrement simple</h3>
+		<div class="notification is-info">
+			Les ordinateurs font des opérations très rapidement sur des nombres, pour coder et décoder des textes, il
+			suffit donc de les convertir en nombre et faire des opérations plus ou moins complexes avec.
 		</div>
-		<div class="column"></div>
-	</div>
+		Voici un texte que l'on voudrait chiffrer: <br />
+		<input type="text" [(ngModel)]="plainText" (ngModelChange)="encrypt(plainText)" />
+		<br />
+		Vous pouvez le changer, la page se met à jour automatiquement. Le texte clair fait
+		{{ plainText.length }} caractères.
 
+		<br />
+		Texte chiffré très simplement: on assigne un numéro à chaque caractère, séparé par un tiret en sortie.
+		Javascript permet de faire ceci avec <code>monTexte.charCodeAt(1)</code> pour obtenir le code du caractère 1 de
+		notre texte à chiffrer. Exemple:
+		<ul>
+			<li>
+				Le premier caractère <code>{{ plainText[1] }}</code> de notre texte <code>{{ plainText }}</code> a pour
+				numéro de caractère <i class="fa fa-arrow-right"></i> <code>{{ plainText.charCodeAt(1) }}</code
+				>. <br />
+				Voici ce que ça donne pour tout notre texte:
+			</li>
+			<li *ngFor="let char of plainText.split(''); index as i">
+				Le caractère n° <code>{{ i }}</code> de notre texte est <code>{{ char }}</code> a pour numéro de
+				caractère <i class="fa fa-arrow-right"></i> <code>{{ plainText.charCodeAt(i) }}</code
+				>.
+			</li>
+		</ul>
+		<br />
+		<strong class="cipher-result">
+			<app-copy-text [textToCopy]="simpleCipheredText" [displayLabelButton]="false"></app-copy-text>
+			<span>
+				{{ simpleCipheredText }}
+			</span>
+		</strong>
+		<br />
+		<h3 class="title">Avec un peu de sel?</h3>
+		<input type="text" [(ngModel)]="salt" />
+		({{ salt.length }} caractères)
+		<br />
+		simple ciphered avec un sel. on ajoute le sel avant le texte puis on passe le tout dans la conversion comme
+		ci-dessus. on obtient un message de {{ plainText.length }} + {{ salt.length }} caractères convertis en
+		{{ plainText.length + salt.length }} nombres séparés par des tirets.
+		<strong class="cipher-result">
+			<app-copy-text [textToCopy]="simpleCipheredTextWithSalt" [displayLabelButton]="false"></app-copy-text>
+			{{ simpleCipheredTextWithSalt }}
+		</strong>
+		<h3 class="title">On hashe le sel</h3>
+		<div class="columns">
+			<div class="column is-half">
+				Pour gagner en aléatoire on peut passer le sel dans une fonction de hashage cryptographique, telle que
+				MD5 (Message Digest 5).
+				<img
+					src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/38/Md5_generalview.png/330px-Md5_generalview.png"
+					alt="fonctionnement de MD5"
+				/>
+			</div>
+			<div class="column is-half">
+				Voici ce que le hashage du sel donne:
+				<code>
+					{{ md5(salt) }}
+				</code>
+				({{ md5(salt).length }}caractères)
+				<br />
+				Le nouveau texte chiffré avec le sel hashé est donc:
+				<strong class="cipher-result">
+					<app-copy-text
+						[textToCopy]="simpleCipheredTextWithHashedSalt"
+						[displayLabelButton]="false"
+					></app-copy-text>
+					{{ simpleCipheredTextWithHashedSalt }}
+				</strong>
+			</div>
+		</div>
+
+		<h3 class="title">Légèrement épicé</h3>
+		simple chiffrement avec un sel avant et un saupoudrage du sel sur chacun des caractères de la phrase. la valeur
+		du caractère est ajoutée à la valeur du caractère du sel correspondant. une fois arrivé à la fin du sel on
+		reprend au début pour saupoudrer toute la phrase à chiffrer. Ce qui donne
+		{{ simpleCipheredTextWithSpreadSalt.split('-').length }} chiffres.
+		<strong class="cipher-result">
+			<app-copy-text [textToCopy]="simpleCipheredTextWithSpreadSalt" [displayLabelButton]="false"></app-copy-text>
+			{{ simpleCipheredTextWithSpreadSalt }}
+		</strong>
+		<br />
+
+		<h3 class="title">On en remet une couche</h3>
+		Les nombres que l'on a obtenu peuvent être transmis après une opération de conversion en caractères. On a donc
+		autant de caractères que juste avant. ça ressemble déjà plus à un message pas évident à déchiffrer. Le nouveau
+		texte fait {{ layerOnSpread.length }} caractères.
+		<strong class="cipher-result">
+			<app-copy-text [textToCopy]="layerOnSpread" [displayLabelButton]="false"></app-copy-text>
+			{{ layerOnSpread }}
+		</strong>
+	</section>
 	<section class="boxed-shadow">
 		<h3 class="title">Déchiffrement simple</h3>
 
@@ -98,15 +111,18 @@
 		<strong class="cipher-result">
 			{{ simpleDeCipheredText }}
 		</strong>
-		simple texte déchiffré avec sel, en enlevant les {{ salt.length }} premiers caractères du sel
-		<strong class="cipher-result">
-			{{ simpleDeCipheredTextWithSalt }}
-		</strong>
+		<br />
+		simple texte déchiffré avec sel, en enlevant les {{ salt.length }} premiers caractères, ceux correspondant au
+		sel.
+		<!--		<strong class="cipher-result">-->
+		<!--			{{ simpleDeCipheredTextWithSalt }}-->
+		<!--		</strong>-->
+		<br />
 		Simple texte déchiffré avec sel saupoudré, en enlevant à chaque caractère la valeur du caractère courant du sel.
 		Sans connaître le sel il est déjà plus difficile de deviner la phrase, mais des régularités apparaissent encore.
-		<strong class="cipher-result">
-			{{ simpleDeCipheredTextWithSpreadSalt }}
-		</strong>
+		<!--		<strong class="cipher-result">-->
+		<!--			{{ simpleDeCipheredTextWithSpreadSalt }}-->
+		<!--		</strong>-->
 	</section>
 
 	<section class="is-boxed">
diff --git a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.scss b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.scss
index a9a47b26..831df7ea 100644
--- a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.scss
+++ b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.scss
@@ -11,14 +11,13 @@
 	color: #7d6c99;
 	padding: 0.5em;
 	margin-left: 1em;
-	display: block;
 	min-width: 10ch;
 	min-height: 2em;
-	max-width: 25%;
+	max-width: 80%;
 	overflow-x: scroll;
 	line-height: 2em;
+	display: flex;
 	app-copy-text {
-		//float: left;
 		margin-right: 1em;
 	}
 }

From ddf5b40ef45290430f2c681ae0368ee2b98abecf Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Wed, 10 Feb 2021 12:15:39 +0100
Subject: [PATCH 28/40] compute entropy

---
 .../ciphering/ciphering.component.html        | 84 +++++++++++++++----
 .../ciphering/ciphering.component.scss        | 10 +++
 .../ciphering/ciphering.component.ts          | 21 +++++
 3 files changed, 100 insertions(+), 15 deletions(-)

diff --git a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.html b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.html
index c2caca64..af93679c 100644
--- a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.html
+++ b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.html
@@ -3,7 +3,7 @@
 		Essais de chiffrement pour un framadate zéro knoledge
 	</h2>
 	<section class="boxed-shadow">
-		<h3 class="title">Chiffrement simple</h3>
+		<h3 class="title">1) Chiffrement simple</h3>
 		<div class="notification is-info">
 			Les ordinateurs font des opérations très rapidement sur des nombres, pour coder et décoder des textes, il
 			suffit donc de les convertir en nombre et faire des opérations plus ou moins complexes avec.
@@ -32,6 +32,7 @@
 			</li>
 		</ul>
 		<br />
+		On peut donc convertir notre texte en cette suite de nombres:
 		<strong class="cipher-result">
 			<app-copy-text [textToCopy]="simpleCipheredText" [displayLabelButton]="false"></app-copy-text>
 			<span>
@@ -39,7 +40,7 @@
 			</span>
 		</strong>
 		<br />
-		<h3 class="title">Avec un peu de sel?</h3>
+		<h3 class="title">2) Avec un peu de sel?</h3>
 		<input type="text" [(ngModel)]="salt" />
 		({{ salt.length }} caractères)
 		<br />
@@ -50,7 +51,7 @@
 			<app-copy-text [textToCopy]="simpleCipheredTextWithSalt" [displayLabelButton]="false"></app-copy-text>
 			{{ simpleCipheredTextWithSalt }}
 		</strong>
-		<h3 class="title">On hashe le sel</h3>
+		<h3 class="title">3) On hashe le sel</h3>
 		<div class="columns">
 			<div class="column is-half">
 				Pour gagner en aléatoire on peut passer le sel dans une fonction de hashage cryptographique, telle que
@@ -78,7 +79,7 @@
 			</div>
 		</div>
 
-		<h3 class="title">Légèrement épicé</h3>
+		<h3 class="title">4) Légèrement épicé</h3>
 		simple chiffrement avec un sel avant et un saupoudrage du sel sur chacun des caractères de la phrase. la valeur
 		du caractère est ajoutée à la valeur du caractère du sel correspondant. une fois arrivé à la fin du sel on
 		reprend au début pour saupoudrer toute la phrase à chiffrer. Ce qui donne
@@ -89,7 +90,7 @@
 		</strong>
 		<br />
 
-		<h3 class="title">On en remet une couche</h3>
+		<h3 class="title">5) On en remet une couche</h3>
 		Les nombres que l'on a obtenu peuvent être transmis après une opération de conversion en caractères. On a donc
 		autant de caractères que juste avant. ça ressemble déjà plus à un message pas évident à déchiffrer. Le nouveau
 		texte fait {{ layerOnSpread.length }} caractères.
@@ -124,20 +125,73 @@
 		<!--			{{ simpleDeCipheredTextWithSpreadSalt }}-->
 		<!--		</strong>-->
 	</section>
+	<section class="boxed-shadow entropy">
+		<h2>Calcul d'entropie de Shannon</h2>
+		Un nombre élevé est signe de difficulté à deviner par calcul.
+		<table>
+			<thead>
+				<tr>
+					<td>score d'entropie</td>
+					<td>texte à évaluer</td>
+				</tr>
+			</thead>
+			<tbody></tbody>
+			<tr>
+				<td>{{ getEntropy(plainText).toFixed(3) }}</td>
+				<td>{{ plainText }}</td>
+			</tr>
+			<tr>
+				<td>{{ getEntropy(simpleCipheredText).toFixed(3) }}</td>
+				<td>
+					<p class="limited-text">{{ simpleCipheredText }}</p>
+				</td>
+			</tr>
+			<tr>
+				<td>{{ getEntropy(simpleCipheredTextWithSalt).toFixed(3) }}</td>
+				<td>
+					<p class="limited-text">{{ simpleCipheredTextWithSalt }}</p>
+				</td>
+			</tr>
+			<tr>
+				<td>{{ getEntropy(simpleCipheredTextWithHashedSalt).toFixed(3) }}</td>
+				<td>
+					<p class="limited-text">{{ simpleCipheredTextWithHashedSalt }}</p>
+				</td>
+			</tr>
+			<tr>
+				<td>{{ getEntropy(convertIntToText(simpleCipheredTextWithHashedSalt)).toFixed(3) }}</td>
+				<td>
+					<p class="limited-text">{{ convertIntToText(simpleCipheredTextWithHashedSalt) }}</p>
+				</td>
+			</tr>
+			<tr>
+				<td>{{ getEntropy(simpleCipheredTextWithHashedSpreadSalt).toFixed(3) }}</td>
+				<td>
+					<p class="limited-text">{{ simpleCipheredTextWithHashedSpreadSalt }}</p>
+				</td>
+			</tr>
+			<tr>
+				<td>{{ getEntropy(layerOnSpread).toFixed(3) }}</td>
+				<td>
+					<p class="limited-text">{{ layerOnSpread }}</p>
+				</td>
+			</tr>
+		</table>
+	</section>
 
 	<section class="is-boxed">
 		<h3>Chiffrement AES</h3>
 
 		<app-wip-todo></app-wip-todo>
-		<input type="text" [(ngModel)]="cipheredText" />
-		texte avancé à déchiffrer
-		<br />
-		<input type="text" [(ngModel)]="salt" />
-		salt
-		<input type="text" [(ngModel)]="initial_vector" />
-		initial_vector
-		<br />
-		<input type="text" [(ngModel)]="key" />
-		key
+		<!--		<input type="text" [(ngModel)]="cipheredText" />-->
+		<!--		texte avancé à déchiffrer-->
+		<!--		<br />-->
+		<!--		<input type="text" [(ngModel)]="salt" />-->
+		<!--		salt-->
+		<!--		<input type="text" [(ngModel)]="initial_vector" />-->
+		<!--		initial_vector-->
+		<!--		<br />-->
+		<!--		<input type="text" [(ngModel)]="key" />-->
+		<!--		key-->
 	</section>
 </div>
diff --git a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.scss b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.scss
index 831df7ea..9ce5229a 100644
--- a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.scss
+++ b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.scss
@@ -25,3 +25,13 @@
 .title {
 	margin-top: 1em;
 }
+
+.entropy {
+	.limited-text {
+		max-width: 50% !important;
+		overflow: scroll;
+		text-overflow: ellipsis;
+		height: 2em;
+		display: block;
+	}
+}
diff --git a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.ts b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.ts
index 4c801907..17a5cd0e 100644
--- a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.ts
+++ b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.ts
@@ -42,6 +42,9 @@ export class CipheringComponent implements OnInit {
 	get simpleCipheredTextWithHashedSalt() {
 		return this.convertTextToIntMixedSalt(this.md5(this.salt) + this.plainText);
 	}
+	get simpleCipheredTextWithHashedSpreadSalt() {
+		return this.convertTextToIntMixedSalt(this.md5(this.salt) + this.plainText);
+	}
 	get layerOnSpread() {
 		return this.convertIntToText(this.simpleCipheredTextWithHashedSalt, false);
 	}
@@ -166,4 +169,22 @@ export class CipheringComponent implements OnInit {
 	md5(someText) {
 		return CipherLib.md5(someText);
 	}
+	getEntropy(s) {
+		let sum = 0,
+			len = s.length;
+		this.process(s, (k, f) => {
+			const p = f / len;
+			sum -= (p * Math.log(p)) / Math.log(2);
+		});
+		return sum;
+	}
+	process(s, evaluator) {
+		let h = Object.create(null),
+			k;
+		s.split('').forEach((c) => {
+			(h[c] && h[c]++) || (h[c] = 1);
+		});
+		if (evaluator) for (k in h) evaluator(k, h[k]);
+		return h;
+	}
 }

From e32db4983d014403c97e93a3faebb7ab2e318a59 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Wed, 10 Feb 2021 12:19:22 +0100
Subject: [PATCH 29/40] resize table for entropy

---
 .../ui/static-pages/ciphering/ciphering.component.html   | 2 +-
 .../ui/static-pages/ciphering/ciphering.component.scss   | 9 +++++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.html b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.html
index af93679c..9dc446f1 100644
--- a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.html
+++ b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.html
@@ -138,7 +138,7 @@
 			<tbody></tbody>
 			<tr>
 				<td>{{ getEntropy(plainText).toFixed(3) }}</td>
-				<td>{{ plainText }}</td>
+				<td><input type="text" [(ngModel)]="plainText" (ngModelChange)="encrypt(plainText)" /></td>
 			</tr>
 			<tr>
 				<td>{{ getEntropy(simpleCipheredText).toFixed(3) }}</td>
diff --git a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.scss b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.scss
index 9ce5229a..92c07aa0 100644
--- a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.scss
+++ b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.scss
@@ -26,12 +26,17 @@
 	margin-top: 1em;
 }
 
+table {
+	width: 100%;
+	display: block;
+}
 .entropy {
 	.limited-text {
 		max-width: 50% !important;
-		overflow: scroll;
+		overflow-x: hidden;
 		text-overflow: ellipsis;
-		height: 2em;
+		height: 4em;
+		padding: 1em;
 		display: block;
 	}
 }

From e9a9d1a959b8141bdb56fe01d8d0ae7bcf2c8b06 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Wed, 10 Feb 2021 12:21:27 +0100
Subject: [PATCH 30/40] compare entropy with generated pass

---
 .../ciphering/ciphering.component.html          | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.html b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.html
index 9dc446f1..d1a44de4 100644
--- a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.html
+++ b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.html
@@ -176,6 +176,23 @@
 					<p class="limited-text">{{ layerOnSpread }}</p>
 				</td>
 			</tr>
+			<tr>
+				<td>
+					{{
+						getEntropy(
+							'KZ%feLx!D2qppSW3MEzcuMxDFpbS5&%vunsn5MpF8&VyM822Fg$$jU7Ue6PmFtujv5@ToFNp$P*3#PwS@3JAtnXFLE%9io7N23Q$Y&$&DoXEW&GsM6#Rb6m5$mvSpXAA'
+						).toFixed(3)
+					}}
+				</td>
+				<td>
+					<p class="limited-text">
+						comparaison avec une phrase de passe générée.
+						{{
+							'KZ%feLx!D2qppSW3MEzcuMxDFpbS5&%vunsn5MpF8&VyM822Fg$$jU7Ue6PmFtujv5@ToFNp$P*3#PwS@3JAtnXFLE%9io7N23Q$Y&$&DoXEW&GsM6#Rb6m5$mvSpXAA'
+						}}
+					</p>
+				</td>
+			</tr>
 		</table>
 	</section>
 

From 73ad7426ee1f1b1b31f252ea30d16a810272d792 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Fri, 12 Feb 2021 12:06:30 +0100
Subject: [PATCH 31/40] chiffrement matrice ok

---
 .../ciphering/ciphering.component.html        |  60 ++++++
 .../ciphering/ciphering.component.ts          | 174 ++++++++++++++----
 2 files changed, 203 insertions(+), 31 deletions(-)

diff --git a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.html b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.html
index d1a44de4..435fb44c 100644
--- a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.html
+++ b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.html
@@ -2,6 +2,66 @@
 	<h2 class="title">
 		Essais de chiffrement pour un framadate zéro knoledge
 	</h2>
+	<section class="boxed-shadow">
+		<h3 class="title">
+			Chiffrement par matrice
+		</h3>
+		Voici un texte que l'on voudrait chiffrer: <br />
+		<input type="text" [(ngModel)]="plainText" (ngModelChange)="encrypt(codingMatrice, plainText)" /><br />
+		Vous pouvez le changer, la page se met à jour automatiquement. Le texte clair fait
+		{{ plainText.length }} caractères.
+		<br />
+		Nous avons besoin d'une matrice de codage de 4 nombres.
+		<br />
+		<input type="text" [(ngModel)]="codingMatrice" />
+
+		<br />
+		<button class="btn is-primary" (click)="encrypt(codingMatrice, plainText)">
+			chiffrer avec la matrice
+		</button>
+		<br />
+		Et voilà la résultat:
+		<strong class="cipher-result">
+			<app-copy-text [textToCopy]="cipheredTextCIL" [displayLabelButton]="false"></app-copy-text>
+			{{ cipheredTextCIL }}
+		</strong>
+
+		<h4 class="title">Comment on a fait?</h4>
+
+		Voici notre alphabet autorisé ( {{ alphab.length }} caractères):
+		<pre>
+			{{ alphab }}
+		</pre
+		>
+		Tout caractère qui n'est pas présent dans notre alphabet sera converti en souligné "_".
+		<br />
+		Notre texte après vérification : <code>{{ filterCharacters(plainText) }}</code>
+		<br />
+		On sépare le texte en {{ separatedCouples.length }} couples de caractères pour le mettre dans une matrice. On
+		prend la pilule rouge.
+
+		<ul>
+			<li *ngFor="let c; in: separecpl(plainText)">
+				<pre class="debug padded warning">
+					{{ c | json }}
+				</pre
+				>
+			</li>
+		</ul>
+		<fieldset class="couple" *ngFor="let c; in: separatedCouples">
+			<!--				{{c[0]}}-->
+			<!--				{{c[1]}}-->
+			<pre class="debug padded warning">
+					{{ c | json }}
+				</pre
+			>
+		</fieldset>
+		<pre class="debug padded warning">
+		separatedCouples :
+			{{ separatedCouples | json }}
+		</pre
+		>
+	</section>
 	<section class="boxed-shadow">
 		<h3 class="title">1) Chiffrement simple</h3>
 		<div class="notification is-info">
diff --git a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.ts b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.ts
index 17a5cd0e..e29193fa 100644
--- a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.ts
+++ b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.ts
@@ -12,20 +12,30 @@ import CipherLib from './lib_cipher';
 	styleUrls: ['./ciphering.component.scss'],
 })
 export class CipheringComponent implements OnInit {
-	public plainText = 'le texte à chiffrer, coucou !';
+	public plainText = 'coucou !';
 	// public plainText = '1234';
 	public cipheredText =
 		'121-127-42-110-127-42-122-121-115-128-124-111-125-107-118-127-126-42-118-111-125-42-122-115-122-121-118-111';
-	algorithm = 'aes-192-cbc';
+	public algorithm = 'aes-192-cbc';
 	public salt = 'ou du poivre heh';
 	public initial_vector = '';
 	public key;
 	public otherCipheredText = 'le texte à chiffrer, coucou !';
+	public alphab: string;
+	public prem: number;
+	public dico: string[];
+	public separatedCouples: any[];
+	public codingMatrice: string = '2 3 5 8';
+	private cipheredTextCIL: string;
 
-	constructor() {}
+	constructor() {
+		this.alphab = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 .+-*/_!?,éèêëàçôî'âù()@&$";
+		this.prem = this.alphab.length;
+		this.dico = this.alphab.split('');
+	}
 
 	ngOnInit(): void {
-		this.encrypt(this.plainText);
+		this.encrypt(this.codingMatrice, this.plainText);
 	}
 
 	//  ---------------------- make unreadable ----------------------
@@ -36,15 +46,19 @@ export class CipheringComponent implements OnInit {
 	get simpleCipheredTextWithSalt() {
 		return this.convertTextToInt(this.salt + this.plainText);
 	}
+
 	get simpleCipheredTextWithSpreadSalt() {
 		return this.convertTextToIntMixedSalt(this.salt + this.plainText);
 	}
+
 	get simpleCipheredTextWithHashedSalt() {
 		return this.convertTextToIntMixedSalt(this.md5(this.salt) + this.plainText);
 	}
+
 	get simpleCipheredTextWithHashedSpreadSalt() {
 		return this.convertTextToIntMixedSalt(this.md5(this.salt) + this.plainText);
 	}
+
 	get layerOnSpread() {
 		return this.convertIntToText(this.simpleCipheredTextWithHashedSalt, false);
 	}
@@ -57,40 +71,137 @@ export class CipheringComponent implements OnInit {
 	get simpleDeCipheredTextWithSalt() {
 		return this.convertIntToText(this.salt + this.cipheredText);
 	}
+
 	get simpleDeCipheredTextWithSpreadSalt() {
 		return this.convertIntToTextMixedSalt(this.salt + this.cipheredText);
 	}
 
 	//  ---------------------- conversions ----------------------
-	encrypt(someText) {
-		// this.key = Crypto.scryptSync(someText, 'salt', 24);
-		// this.initial_vector = Crypto.randomBytes(16);
-		//
-		// const cipher = Crypto.createCipheriv(this.algorithm, this.key, this.initial_vector);
-		//
-		// cipher.on('readable', () => {
-		// 	this.cipheredText = cipher.read().toString('hex');
-		// 	console.log(cipher.read().toString('hex'));
-		// });
-		//
-		//
-		// this.cipheredText = someText;
-		// // outputs encrypted hex
-		// console.log(this.cipheredText);
-		return someText;
+
+	/**
+	 * chiffrer avec la méthode du CIL-gometz
+	 * avec une matrice
+	 * @param someText
+	 */
+	encrypt(matriceDefinition, messageToCipher) {
+		if (!matriceDefinition || !messageToCipher) {
+			return null;
+		}
+		let cipheredText = '';
+		const lcpl = this.separecpl(this.filterCharacters(messageToCipher));
+		this.separatedCouples = lcpl;
+		console.log('lcpl', lcpl);
+		console.log('this.dico', this.dico);
+		/**
+		 * Pour chaque couple de caractères
+		 * on crée le couple d'indices de ces caractères
+		 * On applique la matrice au couple d'indices
+		 * et on en déduit le couple de caractères codés (ou décodés)
+		 * qu'on accumule dans la chaine msgout
+		 */
+		lcpl.forEach((couple) => {
+			console.log('couple', couple);
+			const cplnum = [this.dico.indexOf(couple[0]), this.dico.indexOf(couple[1])];
+			console.log('cplnum', cplnum);
+			const cplnumout = this.applique(matriceDefinition, cplnum);
+			console.log('cplnumout', cplnumout);
+			const cplout = [this.alphab[cplnumout[0]], this.alphab[cplnumout[1]]];
+			console.log('cplout', cplout);
+			cipheredText += cplout[0];
+			cipheredText += cplout[1];
+		});
+		console.log('cipheredText', cipheredText);
+		this.cipheredTextCIL = cipheredText;
+		return cipheredText;
 	}
 
+	/**
+	 * séparation d'une chaine de caractères en liste de couples de caractères
+	 * @param msg
+	 */
+	separecpl(msg) {
+		/**
+		 * Produit une liste formée des couples de caractères de la chaine
+    msg reçue en argument.
+    Dans le cas où le nb de caractères de la chaine est impair,
+    un underscore est ajouté en fin de chaine de façon à pouvoir
+    inclure le dernier caractère dans un couple.
+		 */
+		const nbcar = msg.length;
+		if (nbcar % 2) {
+			msg += '_';
+		}
+		const coupleList = [];
+		let i = 0;
+		while (i < nbcar) {
+			coupleList.push([msg[i], msg[i + 1]]);
+			i += 2;
+		}
+		return coupleList;
+	}
+
+	/**
+	 * calcul de l'inverse de d dans Z/pZ
+	 * @param d
+	 * @param p
+	 */
+	invdet(d, p) {
+		let inv = 1;
+		while ((d * inv) % p !== 1) {
+			inv++;
+		}
+		return inv;
+	}
+
+	/**
+	 * inversion de matrice
+	 * @param matriceString
+	 * @param p
+	 */
+	invmat(matriceString: string, p) {
+		const [a, b, c, d] = this.convertStringToMatrix(matriceString);
+		const mul = this.invdet(a * d - b * c, p);
+		return [(d * mul) % p, (-b * mul) % p, (-c * mul) % p, (a * mul) % p];
+	}
+
+	applique(mat, cplnum) {
+		const [a, b, c, d] = this.convertStringToMatrix(mat);
+		const [x, y] = cplnum;
+		const xout = (a * x + b * y) % this.prem;
+		const yout = (c * x + d * y) % this.prem;
+		return [xout, yout];
+	}
+
+	/**
+	 * Pour chaque caractère de la chaine msg, on vérifie qu'il est
+    dans l'alphabet des caractères autorisés : si oui on le garde,
+    sinon on le remplace par un underscore
+	 * @param monTexte
+	 */
+	filterCharacters(monTexte) {
+		const convertedText = monTexte.split('').map((letter) => {
+			if (this.alphab.indexOf(letter) === -1) {
+				letter = '_';
+			}
+			return letter;
+		});
+
+		return convertedText.join('');
+	}
+
+	/**
+	 * on entre une définition de matrice en écrivant 4 nombres dans un input
+	 * @param stringMatrix
+	 */
+	convertStringToMatrix(stringMatrix: string) {
+		return stringMatrix.replace(',', ' ').replace('  ', ' ').slice(' ');
+	}
+
+	/**
+	 * chiffrer avec la méthode du CIL-gometz
+	 * @param someText
+	 */
 	decrypt(sometext) {
-		// const decipher = Crypto.createDecipheriv(this.algorithm, this.key, this.initial_vector);
-		//
-		// decipher.on('readable', () => {
-		// 	this.otherCipheredText = decipher.read().toString('utf8');
-		//
-		// 	console.log('otherCipheredText decrypt', this.otherCipheredText);
-		// });
-		//
-		// decipher.write(sometext, 'hex');
-		// decipher.end();
 		return sometext;
 	}
 
@@ -114,7 +225,6 @@ export class CipheringComponent implements OnInit {
 		for (let i = 0; i < array.length; i++) {
 			result += String.fromCharCode(array[i] - 10);
 		}
-		console.info('value, result', value, result);
 		// remove salt characters
 		if (removeBeginning) {
 			result = result.slice(this.salt.length, -1);
@@ -169,6 +279,7 @@ export class CipheringComponent implements OnInit {
 	md5(someText) {
 		return CipherLib.md5(someText);
 	}
+
 	getEntropy(s) {
 		let sum = 0,
 			len = s.length;
@@ -178,6 +289,7 @@ export class CipheringComponent implements OnInit {
 		});
 		return sum;
 	}
+
 	process(s, evaluator) {
 		let h = Object.create(null),
 			k;

From 54ece76c7e916aa919d9e5abaca69efd7c12968d Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Fri, 12 Feb 2021 12:35:29 +0100
Subject: [PATCH 32/40] hop

---
 .../ciphering/ciphering.component.html        | 81 +++++++++++++------
 1 file changed, 56 insertions(+), 25 deletions(-)

diff --git a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.html b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.html
index 435fb44c..9a12a9fe 100644
--- a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.html
+++ b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.html
@@ -29,38 +29,69 @@
 		<h4 class="title">Comment on a fait?</h4>
 
 		Voici notre alphabet autorisé ( {{ alphab.length }} caractères):
-		<pre>
-			{{ alphab }}
-		</pre
-		>
+		<pre>{{ alphab }}</pre>
 		Tout caractère qui n'est pas présent dans notre alphabet sera converti en souligné "_".
 		<br />
 		Notre texte après vérification : <code>{{ filterCharacters(plainText) }}</code>
 		<br />
 		On sépare le texte en {{ separatedCouples.length }} couples de caractères pour le mettre dans une matrice. On
 		prend la pilule rouge.
-
-		<ul>
-			<li *ngFor="let c; in: separecpl(plainText)">
-				<pre class="debug padded warning">
-					{{ c | json }}
-				</pre
-				>
-			</li>
-		</ul>
-		<fieldset class="couple" *ngFor="let c; in: separatedCouples">
-			<!--				{{c[0]}}-->
-			<!--				{{c[1]}}-->
-			<pre class="debug padded warning">
-					{{ c | json }}
-				</pre
-			>
-		</fieldset>
-		<pre class="debug padded warning">
-		separatedCouples :
-			{{ separatedCouples | json }}
-		</pre
+		<br />
+		<span class="couple btn is-info" *ngFor="let c of separatedCouples"> [{{ c[0] }} , {{ c[1] }}] </span>
+		<br />
+		Pour chaque couple de caractères comme
+		<span class="couple btn is-info">[{{ separatedCouples[0][0] }} , {{ separatedCouples[0][1] }}]</span>
+		<br />
+		on crée le couple d'indices de ces caractères.
+		<code
+			>[
+			{{ dico.indexOf(separatedCouples[0][0]) }}
+			,
+			{{ dico.indexOf(separatedCouples[0][1]) }}
+			]</code
 		>
+		<br />
+		On
+		<a href="https://fr.wikipedia.org/wiki/Produit_matriciel#Produit_matriciel_ordinaire">
+			applique la matrice par produit
+		</a>
+
+		<code>
+			{{ convertStringToMatrix(codingMatrice) }}
+		</code>
+		au couple d'indices, ce qui donne:
+		<br />
+		<button class="btn is-info">
+			{{
+				applique(codingMatrice, [dico.indexOf(separatedCouples[0][0]), dico.indexOf(separatedCouples[0][1])])
+					| json
+			}}
+		</button>
+		<br />
+		et on re convertit les indices en caractères selon notre dictionnaire.
+		<button class="btn is-info">
+			{{
+				alphab[
+					applique(codingMatrice, [
+						dico.indexOf(separatedCouples[0][0]),
+						dico.indexOf(separatedCouples[0][1])
+					])[0]
+				]
+			}}
+			{{
+				alphab[
+					applique(codingMatrice, [
+						dico.indexOf(separatedCouples[0][0]),
+						dico.indexOf(separatedCouples[0][1])
+					])[1]
+				]
+			}}
+		</button>
+		<br />
+		on accumule ces lettres converties dans la chaine msgout et on obtient tout notre texte chiffré.
+		<code>
+			{{ cipheredTextCIL }}
+		</code>
 	</section>
 	<section class="boxed-shadow">
 		<h3 class="title">1) Chiffrement simple</h3>

From 7b5cf59b9979f0da70af0f0ba7dd07c743ec851d Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Fri, 12 Feb 2021 14:36:10 +0100
Subject: [PATCH 33/40] fix types

---
 .../static-pages/ciphering/ciphering.component.ts  | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.ts b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.ts
index e29193fa..639d1fa0 100644
--- a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.ts
+++ b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.ts
@@ -25,7 +25,7 @@ export class CipheringComponent implements OnInit {
 	public prem: number;
 	public dico: string[];
 	public separatedCouples: any[];
-	public codingMatrice: string = '2 3 5 8';
+	public codingMatrice = '2 3 5 8';
 	private cipheredTextCIL: string;
 
 	constructor() {
@@ -193,8 +193,12 @@ export class CipheringComponent implements OnInit {
 	 * on entre une définition de matrice en écrivant 4 nombres dans un input
 	 * @param stringMatrix
 	 */
-	convertStringToMatrix(stringMatrix: string) {
-		return stringMatrix.replace(',', ' ').replace('  ', ' ').slice(' ');
+	convertStringToMatrix(stringMatrix: string): number[] {
+		return stringMatrix
+			.replace(',', ' ')
+			.replace('  ', ' ')
+			.split(' ')
+			.map((elem) => parseInt(elem));
 	}
 
 	/**
@@ -281,8 +285,8 @@ export class CipheringComponent implements OnInit {
 	}
 
 	getEntropy(s) {
-		let sum = 0,
-			len = s.length;
+		let sum = 0;
+		const len = s.length;
 		this.process(s, (k, f) => {
 			const p = f / len;
 			sum -= (p * Math.log(p)) / Math.log(2);

From 3c3dddafa52f520658a70291b66fd42505aeee48 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Fri, 12 Feb 2021 14:43:39 +0100
Subject: [PATCH 34/40] update env for prod

---
 src/environments/environment.prod.ts | 23 +++++++++++++++++++----
 src/environments/environment.ts      |  2 +-
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
index cd51ae38..7f6e47f0 100644
--- a/src/environments/environment.prod.ts
+++ b/src/environments/environment.prod.ts
@@ -2,17 +2,28 @@ const backendApiUrlsInDev = {
 	local: '/api/v1',
 	remote: 'https://framadate-api.cipherbliss.com/api/v1',
 };
+const apiV1 = {
+	baseHref: 'http://localhost:8000/api/v1',
+	api_new_poll: '/poll/',
+	api_get_poll: '/poll/{id}',
+	'api_test-mail-poll': '/api/v1/poll/mail/test-mail-poll/{emailChoice}',
+	'app.swagger': '/api/doc.json',
+};
 
 export const environment = {
 	production: true,
-	appTitle: 'FramaDate',
-	appVersion: '2.0.0',
-	appLogo: '/assets/img/logo.png',
+	appTitle: 'FramaDate Funky',
+	appVersion: '2.1.0',
+	appLogo: 'assets/img/logo.png',
 	api: {
+		versionToUse: 'apiV1',
+		version: {
+			apiV1,
+		},
 		baseHref: backendApiUrlsInDev.remote,
 		endpoints: {
 			polls: {
-				name: '/polls',
+				name: '/poll',
 				choices: {
 					name: '/choices',
 				},
@@ -39,8 +50,12 @@ export const environment = {
 	},
 	poll: {
 		defaultConfig: {
+			maxCountOfAnswers: 150,
 			expiresDaysDelay: 60,
 			expiracyAfterLastModificationInDays: 180,
+			whoCanChangeAnswers: 'everybody',
+			visibility: 'link_only',
+			voteChoices: 'only_yes',
 		},
 	},
 	localStorage: {
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index 07299112..91c038d9 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -17,7 +17,7 @@ const apiV1 = {
 export const environment = {
 	production: false,
 	appTitle: 'FramaDate Funky',
-	appVersion: '2.0.0',
+	appVersion: '2.1.0',
 	appLogo: 'assets/img/logo.png',
 	api: {
 		versionToUse: 'apiV1',

From 2993fc5cb5204bfd35ddc393b6805176e150461b Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Fri, 12 Feb 2021 14:51:17 +0100
Subject: [PATCH 35/40] fix some production build warnings

---
 .../administration/form/form.component.html   |  9 +-
 .../administration/form/form.component.ts     |  2 +-
 .../text-select/text-select.component.html    | 94 +++++++++----------
 .../form/text-select/text-select.component.ts |  5 +
 .../ciphering/ciphering.component.html        |  8 +-
 .../ciphering/ciphering.component.ts          |  2 +-
 6 files changed, 64 insertions(+), 56 deletions(-)

diff --git a/src/app/features/administration/form/form.component.html b/src/app/features/administration/form/form.component.html
index db7dd99d..db422b1f 100644
--- a/src/app/features/administration/form/form.component.html
+++ b/src/app/features/administration/form/form.component.html
@@ -22,9 +22,12 @@
 				<p class="subtitle">
 					{{ 'creation.want' | translate }}
 				</p>
-				<!--				<app-kind-select [form]="form"></app-kind-select>-->
-				<!--				<app-base-config [form]="form"></app-base-config>-->
-				<app-date-select *ngIf="form.value.configuration.isAboutDate" [form]="form"></app-date-select>
+				<app-kind-select [form]="form"></app-kind-select>
+				<app-base-config [form]="form"></app-base-config>
+				<app-date-select
+					*ngIf="form.value.configuration && form.value.configuration.isAboutDate"
+					[form]="form"
+				></app-date-select>
 				<!--								<app-text-select ng-if="!form.value.isAboutDate" [form]="form"></app-text-select>-->
 
 				<button
diff --git a/src/app/features/administration/form/form.component.ts b/src/app/features/administration/form/form.component.ts
index 93255f31..12cd9188 100644
--- a/src/app/features/administration/form/form.component.ts
+++ b/src/app/features/administration/form/form.component.ts
@@ -26,7 +26,7 @@ export class FormComponent implements OnInit {
 		private uuidService: UuidService,
 		private toastService: ToastService,
 		private pollService: PollService,
-		private apiService: ApiService,
+		public apiService: ApiService,
 		private router: Router,
 		@Inject(DOCUMENT) private document: any
 	) {}
diff --git a/src/app/features/administration/form/text-select/text-select.component.html b/src/app/features/administration/form/text-select/text-select.component.html
index 6b57d555..8e20cf9e 100644
--- a/src/app/features/administration/form/text-select/text-select.component.html
+++ b/src/app/features/administration/form/text-select/text-select.component.html
@@ -1,55 +1,53 @@
 <div class="form-field">
 	<form [formGroup]="form">
-		<span>
-			<span class="columns">
-				<span class="column">
-					<button class="btn is-primary" (click)="addChoice()">
-						<i class="fa fa-plus"></i>
-						Ajouter un choix
-					</button>
-				</span>
-				<span class="column pull-right">
-					<button class="btn is-warning" (click)="reinitChoices()">
-						<i class="fa fa-recycle"></i>
-						Réinitialiser
-					</button>
-				</span>
+		<span class="columns">
+			<span class="column">
+				<button class="btn is-primary" (click)="addChoice()">
+					<i class="fa fa-plus"></i>
+					Ajouter un choix
+				</button>
 			</span>
-
-			<p class="hint">
-				{{ 'creation.choices_hint' | translate }}
-			</p>
-			<span *ngFor="let choice of choices.controls; let i = index">
-				<div class="form-row" [formGroup]="choice">
-					<div class="columns">
-						<div class="column">
-							<button class="btn btn-warning" (click)="deleteChoiceField(i)">
-								<i class="fa fa-times"></i>
-							</button>
-							{{ i * 1 + 1 }})
-						</div>
-						<div class="column">
-							<label [for]="'choice_label_' + i" class="hidden">label</label>
-							<input
-								formControlName="label"
-								[id]="'choice_label_' + i"
-								placeholder="Enter a choice description"
-								(keyup)="keyOnChoice($event, i)"
-								(keyup.backspace)="deleteChoiceField(i)"
-							/>
-							<br />
-							<label [for]="'image_url_' + i" class="hidden">image Url</label>
-							<input
-								formControlName="imageUrl"
-								[id]="'image_url_' + i"
-								placeholder="URL de l' image"
-								(keyup)="keyOnChoice($event, i)"
-								(keyup.backspace)="deleteChoiceField(i)"
-							/>
-						</div>
-					</div>
-				</div>
+			<span class="column pull-right">
+				<button class="btn is-warning" (click)="reinitChoices()">
+					<i class="fa fa-recycle"></i>
+					Réinitialiser
+				</button>
 			</span>
 		</span>
+
+		<span class="hint">
+			{{ 'creation.choices_hint' | translate }}
+		</span>
+		<div *ngFor="let choice of choices; let i = index">
+			<div class="form-row" [formGroup]="choice">
+				<div class="columns">
+					<div class="column">
+						<button class="btn btn-warning" (click)="deleteChoiceField(i)">
+							<i class="fa fa-times"></i>
+						</button>
+						{{ i * 1 + 1 }})
+					</div>
+					<div class="column">
+						<label [for]="'choice_label_' + i" class="hidden">label</label>
+						<input
+							formControlName="label"
+							[id]="'choice_label_' + i"
+							placeholder="Enter a choice description"
+							(keyup)="keyOnChoice($event, i)"
+							(keyup.backspace)="deleteChoiceField(i)"
+						/>
+						<br />
+						<label [for]="'image_url_' + i" class="hidden">image Url</label>
+						<input
+							formControlName="imageUrl"
+							[id]="'image_url_' + i"
+							placeholder="URL de l' image"
+							(keyup)="keyOnChoice($event, i)"
+							(keyup.backspace)="deleteChoiceField(i)"
+						/>
+					</div>
+				</div>
+			</div>
+		</div>
 	</form>
 </div>
diff --git a/src/app/features/administration/form/text-select/text-select.component.ts b/src/app/features/administration/form/text-select/text-select.component.ts
index f821e3ed..35d77dd5 100644
--- a/src/app/features/administration/form/text-select/text-select.component.ts
+++ b/src/app/features/administration/form/text-select/text-select.component.ts
@@ -9,8 +9,13 @@ import { FormGroup } from '@angular/forms';
 export class TextSelectComponent implements OnInit {
 	@Input()
 	public form: FormGroup;
+	public choices = [];
 
 	constructor() {}
 
 	ngOnInit(): void {}
+	reinitChoices(): void {}
+	addChoice(): void {}
+	deleteChoiceField(i): void {}
+	keyOnChoice($event, i): void {}
 }
diff --git a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.html b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.html
index 9a12a9fe..329af972 100644
--- a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.html
+++ b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.html
@@ -100,7 +100,7 @@
 			suffit donc de les convertir en nombre et faire des opérations plus ou moins complexes avec.
 		</div>
 		Voici un texte que l'on voudrait chiffrer: <br />
-		<input type="text" [(ngModel)]="plainText" (ngModelChange)="encrypt(plainText)" />
+		<input type="text" [(ngModel)]="plainText" (ngModelChange)="encrypt(codingMatrice, plainText)" />
 		<br />
 		Vous pouvez le changer, la page se met à jour automatiquement. Le texte clair fait
 		{{ plainText.length }} caractères.
@@ -194,7 +194,7 @@
 		<h3 class="title">Déchiffrement simple</h3>
 
 		Collez ici le texte chiffré à convertir en truc lisible par l'opération
-		<strike>du saint esprit</strike> réalisée dans l'autre sens.
+		<s>du saint esprit</s> réalisée dans l'autre sens.
 		<br />
 		<input type="text" [(ngModel)]="cipheredText" />
 		<br />
@@ -229,7 +229,9 @@
 			<tbody></tbody>
 			<tr>
 				<td>{{ getEntropy(plainText).toFixed(3) }}</td>
-				<td><input type="text" [(ngModel)]="plainText" (ngModelChange)="encrypt(plainText)" /></td>
+				<td>
+					<input type="text" [(ngModel)]="plainText" (ngModelChange)="encrypt(codingMatrice, plainText)" />
+				</td>
 			</tr>
 			<tr>
 				<td>{{ getEntropy(simpleCipheredText).toFixed(3) }}</td>
diff --git a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.ts b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.ts
index 639d1fa0..6f4f1d9a 100644
--- a/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.ts
+++ b/src/app/features/shared/components/ui/static-pages/ciphering/ciphering.component.ts
@@ -26,7 +26,7 @@ export class CipheringComponent implements OnInit {
 	public dico: string[];
 	public separatedCouples: any[];
 	public codingMatrice = '2 3 5 8';
-	private cipheredTextCIL: string;
+	public cipheredTextCIL: string;
 
 	constructor() {
 		this.alphab = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 .+-*/_!?,éèêëàçôî'âù()@&$";

From 2af45ae72708bec310febde7cbcf33020a1b83f0 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Fri, 12 Feb 2021 15:28:14 +0100
Subject: [PATCH 36/40] add stats

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 2c419cbf..0c7ef0eb 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
     "build:prod": "ng build --prod",
     "build:prod:stats": "ng build --prod --stats-json",
     "build:prod:gitlabpage": "ng build --prod --baseHref=/framadate/funky-framadate-front/",
-    "build:prod:demobliss": "ng build --prod --baseHref=https://framadate-api.cipherbliss.com",
+    "build:prod:demobliss": "ng build --prod --baseHref=https://framadate-api.cipherbliss.com  --stats-json ",
     "test": "jest",
     "test:watch": "jest --watch",
     "test:ci": "jest --ci",

From e63bbab75565370cdafe1c374bea97f5d777c71f Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Fri, 12 Feb 2021 15:57:17 +0100
Subject: [PATCH 37/40] using hash routes

---
 src/app/app-routing.module.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index f347c701..4a0e9f19 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -3,7 +3,7 @@ import { RouterModule } from '@angular/router';
 import { routes } from './routes-framadate';
 
 @NgModule({
-	imports: [RouterModule.forRoot(routes)],
+	imports: [RouterModule.forRoot(routes, { useHash: true })],
 	exports: [RouterModule],
 })
 export class AppRoutingModule {}

From f3f2d6623bb1bc7aa8d36d2144ac46a47c98470a Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Wed, 24 Mar 2021 18:39:18 +0100
Subject: [PATCH 38/40] hide some components

---
 .../administration/form/form.component.html       | 15 ++++++++-------
 .../administration/form/form.component.ts         |  1 +
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/app/features/administration/form/form.component.html b/src/app/features/administration/form/form.component.html
index db422b1f..34d37b78 100644
--- a/src/app/features/administration/form/form.component.html
+++ b/src/app/features/administration/form/form.component.html
@@ -22,12 +22,12 @@
 				<p class="subtitle">
 					{{ 'creation.want' | translate }}
 				</p>
-				<app-kind-select [form]="form"></app-kind-select>
-				<app-base-config [form]="form"></app-base-config>
-				<app-date-select
-					*ngIf="form.value.configuration && form.value.configuration.isAboutDate"
-					[form]="form"
-				></app-date-select>
+				<!--				<app-kind-select [form]="form"></app-kind-select>-->
+				<!--				<app-base-config [form]="form"></app-base-config>-->
+				<!--				<app-date-select-->
+				<!--					*ngIf="form.value.configuration && form.value.configuration.isAboutDate"-->
+				<!--					[form]="form"-->
+				<!--				></app-date-select>-->
 				<!--								<app-text-select ng-if="!form.value.isAboutDate" [form]="form"></app-text-select>-->
 
 				<button
@@ -41,7 +41,8 @@
 				<app-advanced-config [poll]="poll" [form]="form" *ngIf="advancedDisplayEnabled"></app-advanced-config>
 			</div>
 		</main>
-		<footer class="column">
+		<footer class="column" *ngIf="show_debug_data">
+			<h2>Debug data</h2>
 			<pre class="debug padded warning">
 				form values :
 					{{ form.value | json }}
diff --git a/src/app/features/administration/form/form.component.ts b/src/app/features/administration/form/form.component.ts
index 12cd9188..505aab38 100644
--- a/src/app/features/administration/form/form.component.ts
+++ b/src/app/features/administration/form/form.component.ts
@@ -19,6 +19,7 @@ export class FormComponent implements OnInit {
 	public form: FormGroup;
 
 	public advancedDisplayEnabled = false;
+	public show_debug_data = false;
 
 	constructor(
 		private fb: FormBuilder,

From 21040df287ccb46e9384273b6a352378a1d4ba76 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Sat, 27 Mar 2021 21:29:06 +0100
Subject: [PATCH 39/40] choice template questions

---
 CHANGELOG.md                                        |  1 +
 .../administration/form/form.component.html         |  3 ++-
 .../form/kind-select/kind-select.component.html     | 13 ++++++++++++-
 .../form/kind-select/kind-select.component.ts       |  1 +
 4 files changed, 16 insertions(+), 2 deletions(-)
 create mode 100644 CHANGELOG.md

diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 00000000..825c32f0
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1 @@
+# Changelog
diff --git a/src/app/features/administration/form/form.component.html b/src/app/features/administration/form/form.component.html
index 34d37b78..0dc7c1bb 100644
--- a/src/app/features/administration/form/form.component.html
+++ b/src/app/features/administration/form/form.component.html
@@ -22,7 +22,8 @@
 				<p class="subtitle">
 					{{ 'creation.want' | translate }}
 				</p>
-				<!--				<app-kind-select [form]="form"></app-kind-select>-->
+
+				<app-kind-select [form]="form"></app-kind-select>
 				<!--				<app-base-config [form]="form"></app-base-config>-->
 				<!--				<app-date-select-->
 				<!--					*ngIf="form.value.configuration && form.value.configuration.isAboutDate"-->
diff --git a/src/app/features/administration/form/kind-select/kind-select.component.html b/src/app/features/administration/form/kind-select/kind-select.component.html
index ac8905d2..2c589339 100644
--- a/src/app/features/administration/form/kind-select/kind-select.component.html
+++ b/src/app/features/administration/form/kind-select/kind-select.component.html
@@ -1,6 +1,17 @@
 <div class="kind-select form-field">
 	<div class="kind-of-poll columns">
-		<div class="column">
+		<div class="column" *ngIf="template_questions_answers">
+			<!--			version maquette questions réponses-->
+			{{ 'creation.want' | translate }}
+			<select name="type" id="type" class="input">
+				<option value="classic">{{ 'creation.kind.classic' | translate }}</option>
+				<option value="date">{{ 'creation.kind.date' | translate }}</option>
+			</select>
+			{{ 'creation.choose_title' | translate }}
+			<input type="text" name="title" class="input" />
+		</div>
+		<!--		version avec un choix de bouton-->
+		<div class="column" *ngIf="!template_questions_answers">
 			<button
 				class="btn-block btn"
 				[ngClass]="{ 'is-primary': form.value.configuration.isAboutDate }"
diff --git a/src/app/features/administration/form/kind-select/kind-select.component.ts b/src/app/features/administration/form/kind-select/kind-select.component.ts
index c5de0c74..4cd7695a 100644
--- a/src/app/features/administration/form/kind-select/kind-select.component.ts
+++ b/src/app/features/administration/form/kind-select/kind-select.component.ts
@@ -8,6 +8,7 @@ import { FormGroup } from '@angular/forms';
 	styleUrls: ['./kind-select.component.scss'],
 })
 export class KindSelectComponent implements OnInit {
+	public template_questions_answers = true;
 	@Input()
 	public poll?: Poll;
 	@Input()

From 4a89b715a9e9a9f058c64f3384bd115a89170138 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Sat, 27 Mar 2021 21:55:05 +0100
Subject: [PATCH 40/40] date selector as question answers

---
 .../administration/form/form.component.html   |  2 +-
 .../administration/form/form.component.ts     |  4 +
 .../kind-select/kind-select.component.html    | 89 ++++++++++---------
 3 files changed, 50 insertions(+), 45 deletions(-)

diff --git a/src/app/features/administration/form/form.component.html b/src/app/features/administration/form/form.component.html
index 0dc7c1bb..1938a652 100644
--- a/src/app/features/administration/form/form.component.html
+++ b/src/app/features/administration/form/form.component.html
@@ -24,7 +24,7 @@
 				</p>
 
 				<app-kind-select [form]="form"></app-kind-select>
-				<!--				<app-base-config [form]="form"></app-base-config>-->
+				<app-base-config [form]="form"></app-base-config>
 				<!--				<app-date-select-->
 				<!--					*ngIf="form.value.configuration && form.value.configuration.isAboutDate"-->
 				<!--					[form]="form"-->
diff --git a/src/app/features/administration/form/form.component.ts b/src/app/features/administration/form/form.component.ts
index 505aab38..aae22552 100644
--- a/src/app/features/administration/form/form.component.ts
+++ b/src/app/features/administration/form/form.component.ts
@@ -70,6 +70,7 @@ export class FormComponent implements OnInit {
 					label: ['', [Validators.required]],
 				}),
 			]),
+			kind: ['', [Validators.required]],
 			configuration: this.fb.group({
 				areResultsPublic: [true, [Validators.required]],
 				whoCanChangeAnswers: ['everybody', [Validators.required]],
@@ -77,6 +78,7 @@ export class FormComponent implements OnInit {
 				isOwnerNotifiedByEmailOnNewVote: [false, [Validators.required]],
 				isOwnerNotifiedByEmailOnNewComment: [false, [Validators.required]],
 				isMaybeAnswerAvailable: [false, [Validators.required]],
+
 				isAboutDate: [true, [Validators.required]],
 				isZeroKnoledge: [false, [Validators.required]],
 				expiresDaysDelay: [60, [Validators.required, Validators.min(1)]],
@@ -110,6 +112,8 @@ export class FormComponent implements OnInit {
 			creatorEmail: 'chucknorris@example.com',
 			isAboutDate: true,
 			// hasSeveralHours: true,
+			kind: 'date',
+			// TODO aplatir les contrôles
 			configuration: {
 				whoCanChangeAnswers: 'everybody',
 				isProtectedByPassword: false,
diff --git a/src/app/features/administration/form/kind-select/kind-select.component.html b/src/app/features/administration/form/kind-select/kind-select.component.html
index 2c589339..f322436f 100644
--- a/src/app/features/administration/form/kind-select/kind-select.component.html
+++ b/src/app/features/administration/form/kind-select/kind-select.component.html
@@ -1,47 +1,48 @@
 <div class="kind-select form-field">
-	<div class="kind-of-poll columns">
-		<div class="column" *ngIf="template_questions_answers">
-			<!--			version maquette questions réponses-->
-			{{ 'creation.want' | translate }}
-			<select name="type" id="type" class="input">
-				<option value="classic">{{ 'creation.kind.classic' | translate }}</option>
-				<option value="date">{{ 'creation.kind.date' | translate }}</option>
-			</select>
-			{{ 'creation.choose_title' | translate }}
-			<input type="text" name="title" class="input" />
+	<form [formGroup]="form">
+		<div class="kind-of-poll columns">
+			<div class="column" *ngIf="template_questions_answers">
+				<!--			version maquette questions réponses-->
+				<select name="type" id="type" class="input" formControlName="kind">
+					<option [value]="'date'">{{ 'creation.kind.date' | translate }}</option>
+					<option [value]="'classic'">{{ 'creation.kind.classic' | translate }}</option>
+				</select>
+			</div>
+			<!--		version avec un choix de bouton-->
+			<div class="columns" *ngIf="!template_questions_answers">
+				<div class="column">
+					<button
+						class="btn-block btn"
+						[ngClass]="{ 'is-primary': form.value.configuration.isAboutDate }"
+						(click)="
+							form.patchValue({
+								configuration: {
+									isAboutDate: true
+								}
+							})
+						"
+					>
+						<i class="fa fa-calendar"></i>
+						{{ 'creation.kind.date' | translate }}
+					</button>
+				</div>
+				<div class="column">
+					<button
+						class="btn-block btn btn-default"
+						[ngClass]="{ 'is-primary': !form.value.configuration.isAboutDate }"
+						(click)="
+							form.patchValue({
+								configuration: {
+									isAboutDate: false
+								}
+							})
+						"
+					>
+						<i class="fa fa-stats"></i>
+						{{ 'creation.kind.classic' | translate }}
+					</button>
+				</div>
+			</div>
 		</div>
-		<!--		version avec un choix de bouton-->
-		<div class="column" *ngIf="!template_questions_answers">
-			<button
-				class="btn-block btn"
-				[ngClass]="{ 'is-primary': form.value.configuration.isAboutDate }"
-				(click)="
-					form.patchValue({
-						configuration: {
-							isAboutDate: true
-						}
-					})
-				"
-			>
-				<i class="fa fa-calendar"></i>
-				{{ 'creation.kind.date' | translate }}
-			</button>
-		</div>
-		<div class="column">
-			<button
-				class="btn-block btn btn-default"
-				[ngClass]="{ 'is-primary': !form.value.configuration.isAboutDate }"
-				(click)="
-					form.patchValue({
-						configuration: {
-							isAboutDate: false
-						}
-					})
-				"
-			>
-				<i class="fa fa-stats"></i>
-				{{ 'creation.kind.classic' | translate }}
-			</button>
-		</div>
-	</div>
+	</form>
 </div>