dispatch form functions in pollService, copy texts for mobile menu

src/app/core/components/header/header.component.html

@@ -6,11 +6,6 @@
 				<span class="app-title title is-2">
 					{{ appTitle }}
 				</span>
-				<span class="dev-env button has-background-success" *ngIf="!env.production">
-					<i>
-						(dev)
-					</i>
-				</span>
 			</a>
 
 			<a
@@ -43,7 +38,35 @@
 			</div>
 		</div>
 		<div class="mobile-menu" *ngIf="mobileMenuVisible">
-			menu mobile
+			menu mobile ---
+			<button class="button is-default" (click)="mobileMenuVisible = !mobileMenuVisible">fermer</button>
+
+			<ul class="ui-listbox">
+				<li>
+					Imprimer
+				</li>
+				<li>
+					Exporter CSV
+				</li>
+				<li>
+					Modifier
+				</li>
+				<li>
+					URL administrateur
+					<input type="text" />
+					copier
+				</li>
+				<li>
+					Supprimer tous les votes
+				</li>
+				<li>
+					Supprimer tous les commentaires
+				</li>
+				<li>
+					Supprimer le sondage
+				</li>
+				<li></li>
+			</ul>
 		</div>
 	</nav>
 </header>

src/app/core/components/sibebar/navigation/navigation.component.html

@@ -5,10 +5,10 @@
 			<a
 				class="navbar-item"
 				*ngFor="let poll of _pollsAvailables | async"
-				routerLink="{{ '/poll/' + poll.slug + '/consultation' }}"
+				routerLink="{{ '/poll/' + poll.custom_url + '/consultation' }}"
 				routerLinkActive="is-active"
 			>
-				« {{ poll.slug }} »
+				« {{ poll.custom_url }} »
 			</a>
 		</div>
 	</div>

src/app/core/core.module.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { NgModule, Optional, SkipSelf } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 
@@ -14,7 +14,7 @@ import { SharedModule } from '../shared/shared.module';
 
 @NgModule({
 	declarations: [FooterComponent, HeaderComponent, HomeComponent, LogoComponent, NavigationComponent],
-	imports: [CommonModule, FormsModule, RouterModule, TranslateModule, SharedModule],
+	imports: [CommonModule, FormsModule, ReactiveFormsModule, RouterModule, TranslateModule, SharedModule],
 	exports: [HeaderComponent, FooterComponent, NavigationComponent, LogoComponent],
 })
 export class CoreModule {

src/app/core/services/poll.service.ts

@@ -1,5 +1,5 @@
-import { Injectable } from '@angular/core';
+import { ChangeDetectorRef, Inject, Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot } from '@angular/router';
+import { ActivatedRoute, ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot } from '@angular/router';
 import { BehaviorSubject, Observable, Subscription } from 'rxjs';
 
 import { Answer } from '../enums/answer.enum';
@@ -12,6 +12,10 @@ import { UserService } from './user.service';
 import { UuidService } from './uuid.service';
 import { HttpClient } from '@angular/common/http';
 import { environment } from '../../../environments/environment';
+import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { DateChoice, defaultTimeOfDay, otherDefaultDates } from '../../features/old-stuff/config/defaultConfigs';
+import { DateUtilities } from '../../features/old-stuff/config/DateUtilities';
+import { DOCUMENT } from '@angular/common';
 
 @Injectable({
 	providedIn: 'root',
@@ -19,6 +23,23 @@ import { environment } from '../../../environments/environment';
 export class PollService implements Resolve<Poll> {
 	private _poll: BehaviorSubject<Poll | undefined> = new BehaviorSubject<Poll | undefined>(undefined);
 	public readonly poll: Observable<Poll | undefined> = this._poll.asObservable();
+	public form: FormGroup;
+	public startDateInterval: string;
+	public endDateInterval: string;
+	public intervalDays: any;
+	public intervalDaysDefault = 7;
+	public dateList: DateChoice[] = otherDefaultDates; // sets of days as strings, config to set identical time for days in a special days poll
+	public timeList: any = defaultTimeOfDay; // ranges of time expressed as strings
+	public previousRouteName: string = '/administration';
+	public nextRouteName: string = '/administration/step/2';
+	public step_current: number = 1;
+	public step_max: number = 5;
+	public round: Function;
+	public urlPrefix: string = window.location.origin + '/participation/';
+	public advancedDisplayEnabled = false;
+	public showDateInterval = false;
+	public allowSeveralHours = false;
+	public richTextMode = false;
 
 	constructor(
 		private http: HttpClient,
@@ -26,8 +47,78 @@ export class PollService implements Resolve<Poll> {
 		private apiService: ApiService,
 		private userService: UserService,
 		private uuidService: UuidService,
-		private toastService: ToastService
+		private toastService: ToastService,
-	) {}
+		public dateUtilities: DateUtilities,
+		public route: ActivatedRoute,
+		@Inject(DOCUMENT) private document: any,
+		private fb: FormBuilder
+	) {
+		this.createFormGroup();
+		if (environment.poll.autoFillDemo) {
+			this.setDemoValues();
+		}
+	}
+
+	/**
+	 * 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 ! *-* ',
+			custom_url: this.uuidService.getUUID(),
+			creatorPseudo: 'Chuck Norris',
+			creatorEmail: 'chucknorris@example.com',
+			isAboutDate: true,
+			whoModifiesAnswers: 'everybody',
+			whoCanChangeAnswers: 'everybody',
+			isProtectedByPassword: false,
+			isOwnerNotifiedByEmailOnNewVote: false,
+			isOwnerNotifiedByEmailOnNewComment: false,
+			isMaybeAnswerAvailable: false,
+			richTextMode: false,
+			areResultsPublic: true,
+			expiracyNumberOfDays: 60,
+		});
+		this.automaticSlug();
+	}
+
+	/**
+	 * set the poll slug from other data of the poll
+	 */
+	automaticSlug() {
+		this.form.patchValue({ custom_url: this.makeSlug(this.form) });
+	}
+
+	public createFormGroup() {
+		let form = this.fb.group({
+			title: ['', [Validators.required, Validators.minLength(12)]],
+			creatorPseudo: ['', [Validators.required]],
+			created_at: [new Date(), [Validators.required]],
+			creatorEmail: ['', [Validators.required]],
+			custom_url: [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]],
+			richTextMode: [false, [Validators.required]],
+			expiracyNumberOfDays: [60, [Validators.required, Validators.min(0)]],
+		});
+		this.form = form;
+		return form;
+	}
 
 	/**
 	 * auto fetch a poll when route is looking for one in the administration pattern
@@ -82,21 +173,217 @@ export class PollService implements Resolve<Poll> {
 	}
 
 	/**
-	 *  make a uniq slug for the current poll creation
+	 * add all the dates between the start and end dates in the interval section
-	 * @param config
 	 */
-	makeSlug(config: Poll): string {
+	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.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.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) + '"]';
+		const elem = this.document.querySelector(selector);
+		if (elem) {
+			elem.focus();
+		}
+	}
+
+	public createPoll(): void {
+		console.log('this.form', this.form);
+		const newpoll = this.newPollFromForm(this.form);
+		console.log('newpoll', newpoll);
+		this.apiService.createPoll(newpoll);
+	}
+
+	/**
+	 * 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();
+	}
+
+	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)
+		);
+	}
+
+	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);
+		}
+	}
+
+	initFormDefault(showDemoValues = true): void {
+		this.form = this.createFormGroup();
+		console.log('this.form ', this.form);
+		this.setDefaultDatesForInterval();
+
+		if (showDemoValues) {
+			this.setDemoValues();
+		}
+	}
+
+	get choices(): FormArray {
+		return this.form.get('choices') as FormArray;
+	}
+
+	reinitChoices(): void {
+		this.choices.setValue([]);
+	}
+
+	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);
+		console.log('this.choices.length', this.choices.length);
+
+		this.focusOnChoice(this.choices.length - 1);
+	}
+
+	/**
+	 *  make a uniq slug for the current poll creation
+	 * @param form
+	 */
+	makeSlug(form: FormGroup): string {
 		let str = '';
 		str =
-			config.configuration.dateCreated.getFullYear() +
+			form.value.created_at.getFullYear() +
 			'_' +
-			(config.configuration.dateCreated.getMonth() + 1) +
+			(form.value.created_at.getMonth() + 1) +
 			'_' +
-			config.configuration.dateCreated.getDate() +
+			form.value.created_at.getDate() +
 			'_' +
-			config.owner.pseudo +
+			form.value.creatorPseudo +
 			'_' +
-			config.title;
+			form.value.title;
 		str = str.replace(/^\s+|\s+$/g, ''); // trim
 		str = str.toLowerCase();
 
@@ -212,7 +499,7 @@ export class PollService implements Resolve<Poll> {
 			// access
 			visibility: newpoll.configuration.areResultsPublic, // visible to one with the link:
 			voteChoices: newpoll.configuration.isMaybeAnswerAvailable ? 'yes, maybe, no' : 'yes', // possible answers to a vote choice: only "yes", "yes, maybe, no"
-			creationDate: new Date(),
+			created_at: new Date(),
 			expirationDate: '', // expiracy date
 			voteStackId: null, // id of the vote stack to update
 			pollId: null, // id of the current poll when created. data given by the backend api

src/app/features/administration/form/form.component.html

@@ -3,22 +3,32 @@
 		<h2 classs="title is-2">
 			{{ 'creation.title' | translate }}
 		</h2>
-		<app-stepper [step_current]="step_current" [step_max]="step_max"></app-stepper>
+		<app-stepper [step_current]="pollService.step_current" [step_max]="pollService.step_max"></app-stepper>
 	</header>
 	<section class="step-container">
 		<router-outlet>
-			<app-step-one></app-step-one>
+			<app-step-one [form]="form"></app-step-one>
 		</router-outlet>
 	</section>
 	<footer>
 		<div class="columns">
 			<div class="column">
-				<button class="button is-large is-secondary" [routerLink]="previousRouteName" *ngIf="step_current != 1">
+				<button
+					class="button is-large is-secondary"
+					[routerLink]="pollService.previousRouteName"
+					*ngIf="pollService.step_current != 1"
+				>
 					précédent
 				</button>
 			</div>
 			<div class="column">
-				<button class="button is-primary is-large is-pulled-right" [disabled]="form.invalid">suivant</button>
+				<!--				[disabled]="form.invalid"-->
+				<button
+					class="button is-primary is-large is-pulled-right"
+					[routerLink]="[pollService.nextRouteName, { from: route }]"
+				>
+					suivant
+				</button>
 			</div>
 		</div>
 	</footer>

src/app/features/administration/form/form.component.ts

@@ -9,7 +9,7 @@ import { DateUtilities } from '../../old-stuff/config/DateUtilities';
 import { DOCUMENT } from '@angular/common';
 import { DateChoice, defaultTimeOfDay, otherDefaultDates } from '../../old-stuff/config/defaultConfigs';
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
-import { Router } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
 	selector: 'app-admin-form',
@@ -21,23 +21,6 @@ export class FormComponent implements OnInit {
 	public poll?: Poll;
 	public form: FormGroup;
 
-	public urlPrefix: string = window.location.origin + '/participation/';
-	public advancedDisplayEnabled = false;
-	public showDateInterval = false;
-	public allowSeveralHours = false;
-	public richTextMode = false;
-	startDateInterval: string;
-	endDateInterval: string;
-	intervalDays: any;
-	intervalDaysDefault = 7;
-	dateList: DateChoice[] = otherDefaultDates; // sets of days as strings, config to set identical time for days in a special days poll
-	timeList: any = defaultTimeOfDay; // ranges of time expressed as strings
-	step_current: number = 1;
-	step_max: number = 5;
-	public round: Function;
-	private nextRouteName: string = '/administration/step/2';
-	previousRouteName: string = '/administration';
-
 	constructor(
 		private fb: FormBuilder,
 		private cd: ChangeDetectorRef,
@@ -46,273 +29,16 @@ export class FormComponent implements OnInit {
 		private pollService: PollService,
 		private router: Router,
 		public dateUtilities: DateUtilities,
+		public route: ActivatedRoute,
 		private apiService: ApiService,
 		@Inject(DOCUMENT) private document: any
-	) {}
+	) {
-	drop(event: CdkDragDrop<string[]>) {
+		this.form = this.pollService.form;
-		// moveItemInArray(this.choices, event.previousIndex, event.currentIndex);
-	}
-	get choices(): FormArray {
-		return this.form.get('choices') as FormArray;
 	}
 
 	ngOnInit(): void {
-		this.initFormDefault();
+		this.pollService.askInitFormDefault();
-		const pollsAvailable = this.pollService.getAllAvailablePolls();
-		console.log('pollsAvailable', pollsAvailable);
 	}
 
-	public createPoll(): void {
+	goNextStep() {}
-		console.log('this.form', this.form);
-		const newpoll = this.pollService.newPollFromForm(this.form);
-		console.log('newpoll', newpoll);
-		this.apiService.createPoll(newpoll);
-	}
-
-	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)]],
-			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]],
-			richTextMode: [false, [Validators.required]],
-			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 ! *-* ',
-			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,
-			richTextMode: false,
-			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.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);
-	}
-
-	goNextStep() {
-		this.router.navigate([this.nextRouteName]);
-	}
 }

src/app/features/administration/form/step-five/step-five.component.html

@@ -25,7 +25,7 @@
 	</button>
 
 	<div class="well">
-		{{ poll.slug }}
+		{{ poll.custom_url }}
 	</div>
 	<div class="has-background-danger" *ngIf="!form.valid">
 		le formulaire est invalide

src/app/features/administration/form/step-four/step-four.component.html

@@ -1,5 +1,27 @@
 <app-stepper [step_current]="4" [step_max]="step_max"></app-stepper>
 
+<div class="creator-infos">
+	<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>
+
 <fieldset class="advanced-config">
 	<button class="btn is-info" (click)="advancedDisplayEnabled = !advancedDisplayEnabled">
 		<i class="fa fa-save"></i>
@@ -13,13 +35,13 @@
 		<label for="slug">Url pour les participants </label>
 		<br />
 		<span
-			>{{ urlPrefix }} <strong> {{ form.controls.slug.value }} </strong>
+			>{{ urlPrefix }} <strong> {{ form.controls.custom_url.value }} </strong>
 		</span>
-		<app-copy-text [textToCopy]="urlPrefix + form.controls.slug.value"></app-copy-text>
+		<app-copy-text [textToCopy]="urlPrefix + form.controls.custom_url.value"></app-copy-text>
 
 		<button
 			mat-button
-			*ngIf="form.controls.slug.value"
+			*ngIf="form.controls.custom_url.value"
 			matSuffix
 			mat-icon-button
 			aria-label="Clear"

src/app/features/administration/form/step-one/step-one.component.html

@@ -4,18 +4,23 @@
 			<h2 class="title is-2">
 				{{ 'creation.choose_title' | translate }}
 			</h2>
+			<div class="columns">
+				<div class="column">
 					<label class="hidden" for="title">Titre</label>
 					<input
-				class="input input-lg"
+						class="input-lg"
 						#title
-				matInput
 						[placeholder]="'creation.choose_title_placeholder' | translate"
 						formControlName="title"
+						aria-placeholder="Quel resto ce soir ?"
+						placeholder="Quel resto ce soir ?"
 						id="title"
 						autofocus="autofocus"
 						(change)="updateSlug()"
 						required
 					/>
+				</div>
+				<div class="column is-narrow">
 					<button
 						mat-button
 						*ngIf="title.value"
@@ -26,17 +31,24 @@
 					>
 						<i class="fa fa-close"></i>
 					</button>
+				</div>
+			</div>
 		</section>
 		<div class="poll-description">
+			<div class="columns">
+				<div class="column">
 					<label for="descr">Description (optionnel)</label>
-			<span class="rich-text-toggle">
+					<div class="rich-text-toggle">
-				mode de saisie avancée
+						<label for="richTextMode">mode de saisie avancée</label>
-				<i class="fa fa-text"></i><input type="checkbox" formControlName="richTextMode" />
+
-			</span>
+						<mat-checkbox formControlName="richTextMode" id="richTextMode"></mat-checkbox>
+					</div>
 					<textarea
+						class="ui-inputtextarea"
 						#description
 						matInput
 						id="descr"
+						class="is-large is-full"
 						placeholder="Description"
 						formControlName="description"
 						required
@@ -44,6 +56,8 @@
 					<div class="text-info">
 						300 caractères maximum
 					</div>
+				</div>
+				<div class="column">
 					<button
 						mat-button
 						*ngIf="description.value"
@@ -55,5 +69,7 @@
 						<i class="fa fa-close"></i>
 					</button>
 				</div>
+			</div>
+		</div>
 	</form>
 </div>

src/app/features/administration/form/step-three/step-three.component.html

@@ -1,23 +1,127 @@
 <app-stepper [step_current]="3" [step_max]="step_max"></app-stepper>
 
-<div class="creator-infos">
+<!--			choix spécialement pour les dates-->
-	<label class="" for="creatorEmail">
+<div class="dates-list">
-		<span>
+	<div class="title">
-			{{ 'creation.name' | translate }}
+		<span class="count-dates">
+			{{ timeList.length }}
 		</span>
-	</label>
+		<span class="count-dates-txt">
-	<label class="hidden" for="creatorPseudo">
+			{{ 'dates.count_time' | translate }}
-		<span>
+			(pour chaque jour)
-			{{ '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>
+	<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">
+		<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>
+
+<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>
+</section>

src/app/features/administration/form/step-two/step-two.component.html

@@ -1,4 +1,4 @@
-<app-stepper [step_current]="2" [step_max]="step_max"></app-stepper>
+<app-stepper [step_current]="2" [step_max]="5"></app-stepper>
 <div class="form-field poll-kind">
 	<h2 class="title is-2">
 		{{ 'creation.want' | translate }}
@@ -7,8 +7,8 @@
 		<div class="column">
 			<button
 				class="btn-block btn"
-				[ngClass]="{ 'is-primary': form.controls.isAboutDate.value }"
+				[ngClass]="{ 'is-primary': pollService.form.controls.isAboutDate.value }"
-				(click)="form.controls.isAboutDate.setValue(true)"
+				(click)="pollService.form.controls.isAboutDate.setValue(true)"
 			>
 				<i class="fa fa-calendar"></i>
 				{{ 'creation.kind.date' | translate }}
@@ -17,8 +17,8 @@
 		<div class="column">
 			<button
 				class="btn-block btn btn-default"
-				[ngClass]="{ 'is-primary': !form.controls.isAboutDate.value }"
+				[ngClass]="{ 'is-primary': !pollService.form.controls.isAboutDate.value }"
-				(click)="form.controls.isAboutDate.setValue(false)"
+				(click)="pollService.form.controls.isAboutDate.setValue(false)"
 			>
 				<i class="fa fa-list-ul"></i>
 				{{ 'creation.kind.classic' | translate }}
@@ -26,129 +26,3 @@
 		</div>
 	</div>
 </div>
-
-<!--			choix spécialement pour les dates-->
-<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">
-		<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>
-
-<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>
-</section>

src/app/features/administration/form/step-two/step-two.component.scss

@@ -0,0 +1,3 @@
+.fa {
+	margin-right: 1em;
+}

src/app/features/administration/form/step-two/step-two.component.ts

@@ -1,4 +1,13 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, Inject, Input, OnInit } from '@angular/core';
+import { FormArray, FormBuilder } 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({
 	selector: 'app-step-two',
@@ -6,12 +15,51 @@ import { Component, Input, OnInit } from '@angular/core';
 	styleUrls: ['./step-two.component.scss'],
 })
 export class StepTwoComponent implements OnInit {
-	constructor() {}
-
 	ngOnInit(): void {}
+
 	@Input()
 	form: any;
 	@Input()
 	step_max: any;
-	addIntervalOfDates() {}
+	timeList: any;
+	allowSeveralHours: string;
+	dateList: any;
+	showDateInterval: boolean;
+	intervalDays: any;
+
+	constructor(
+		private fb: FormBuilder,
+		private cd: ChangeDetectorRef,
+		private uuidService: UuidService,
+		private toastService: ToastService,
+		public pollService: PollService,
+		private router: Router,
+		public dateUtilities: DateUtilities,
+		private apiService: ApiService,
+		@Inject(DOCUMENT) private document: any
+	) {
+		this.form = this.pollService.form;
+	}
+
+	addIntervalOfDates() {}
+
+	get choices(): FormArray {
+		return this.form.get('choices') as FormArray;
+	}
+
+	addTime() {}
+
+	removeAllTimes() {}
+
+	resetTimes() {}
+
+	drop(event: CdkDragDrop<string[]>) {
+		// moveItemInArray(this.choices, event.previousIndex, event.currentIndex);
+	}
+
+	addChoice() {}
+
+	addTimeToDate(choice: any, id: number) {}
+
+	countDays() {}
 }

src/app/features/administration/stepper/stepper.component.scss

@@ -5,7 +5,7 @@
 	height: 0.5em;
 	display: inline-block;
 	min-width: 1px;
-	background: $grey-light;
+	background: $border-color !important;
 	width: 100%;
 }
 .step-bar-progress {
@@ -15,5 +15,5 @@
 	height: 0.5em;
 	display: inline-block;
 	min-width: 1px;
-	background: $primary;
+	background: $primary_color;
 }

src/app/features/consultation/consultation.component.html

@@ -27,10 +27,10 @@
 				</div>
 			</div>
 			<footer class="card-footer" *ngIf="!isArchived">
-				<a routerLink="{{ '../../../poll/' + poll.slug + '/participation' }}" class="card-footer-item">
+				<a routerLink="{{ '../../../poll/' + poll.custom_url + '/participation' }}" class="card-footer-item">
 					Participer
 				</a>
-				<a routerLink="{{ '../../../poll/' + poll.slug + '/administration' }}" class="card-footer-item">
+				<a routerLink="{{ '../../../poll/' + poll.custom_url + '/administration' }}" class="card-footer-item">
 					Administrer
 				</a>
 			</footer>

src/app/features/user-profile/user-polls/user-polls.component.html

@@ -13,8 +13,8 @@
 						<tr *ngFor="let poll of (_user | async)?.polls">
 							<th>{{ poll.title }}</th>
 							<td>
-								<a routerLink="{{ '../../poll/' + poll.slug + '/consultation' }}">
+								<a routerLink="{{ '../../poll/' + poll.custom_url + '/consultation' }}">
-									{{ poll.slug }}
+									{{ poll.custom_url }}
 								</a>
 							</td>
 						</tr>

src/app/shared/components/selectors/language-selector/language-selector.component.html

@@ -2,7 +2,7 @@
 	<img src="assets/img/icone-langue.svg" alt="langue" />
 	<div class="buttons has-addons">
 		<label for="lang_selector" class="hidden">{{ 'selector.lang' | translate }}</label>
-		<select class="select" id="lang_selector" (change)="setLang()" [(ngModel)]="currentLang">
+		<select class="input select" id="lang_selector" (change)="setLang()" [(ngModel)]="currentLang">
 			<option *ngFor="let language of availableLanguages" value="{{ language }}">
 				{{ language }} - {{ 'LANGUAGES.' + language | translate }}
 			</option>

src/app/shared/components/selectors/theme-selector/theme-selector.component.html

@@ -2,21 +2,21 @@
 	<div class="column">
 		<div class="buttons has-addons">
 			<button
-				class="button"
+				class="button is-outlined"
 				[ngClass]="{ 'is-active': (currentTheme | async) === themeEnum.LIGHT }"
 				(click)="selectTheme('LIGHT')"
 			>
 				<i class="fa fa-sun-o" aria-hidden="true"></i>
 			</button>
 			<button
-				class="button"
+				class="button is-outlined"
 				[ngClass]="{ 'is-active': (currentTheme | async) === themeEnum.DARK }"
 				(click)="selectTheme('DARK')"
 			>
 				<i class="fa fa-moon" aria-hidden="true"></i>
 			</button>
 			<button
-				class="button"
+				class="button is-outlined"
 				[ngClass]="{ 'is-active': (currentTheme | async) === themeEnum.RED }"
 				(click)="selectTheme('RED')"
 			>

src/assets/i18n/FR.json

@@ -30,8 +30,8 @@
 		"want": "Je veux créer un sondage",
 		"advanced": "Options avancées",
 		"kind": {
-			"classic": "classique",
+			"classic": "Textes",
-			"date": "spécial dates"
+			"date": "Dates"
 		},
 		"choose_title": "Renseignez un nom pour votre sondage",
 		"choose_title_placeholder": "Quel resto ce soir?",

src/environments/environment.prod.ts

@@ -38,6 +38,7 @@ export const environment = {
 		},
 	},
 	poll: {
+		autoFillDemo: false,
 		defaultConfig: {
 			expiracyInDays: 60,
 			expiracyAfterLastModificationInDays: 180,

src/environments/environment.ts

@@ -16,7 +16,7 @@ const apiV1 = {
 
 export const environment = {
 	production: false,
-	appTitle: 'FramaDate',
+	appTitle: 'FunkyDate',
 	appVersion: '2.0.0',
 	appLogo: 'assets/img/logo.png',
 	api: {
@@ -53,6 +53,7 @@ export const environment = {
 		},
 	},
 	poll: {
+		autoFillDemo: true,
 		defaultConfig: {
 			expiracyInDays: 60,
 			expiracyAfterLastModificationInDays: 180,

src/styles.scss

@@ -34,7 +34,7 @@
 @import './styles/variables';
 @import './styles/dev-utilities/mixins';
 @import './styles/dev-utilities/helpers';
-// @import './styles/dev-utilities/debug';
+@import './styles/dev-utilities/debug';
 @import './styles/libraries/frameworks';
 @import './styles/libraries/overrides';
 // typography

src/styles/libraries/_overrides.scss

@@ -9,8 +9,8 @@ $fullhd-enabled: false;
 // Update some of Bulma's component variables
 $body-background-color: $black;
 $control-border-width: 2px;
-$input-border-color: transparent;
+$input-border-color: $border-color;
-$input-shadow: none;
+// $input-shadow: none;
 
 // bulma css override
 $colors: mergeColorMaps(

src/styles/partials/_form-controls.scss

@@ -2,14 +2,9 @@ input,
 select,
 textarea {
 	@extend .clickable;
-	margin-bottom: 0.25rem;
+	@extend .input;
-	padding: 0.5rem;
+	padding: calc(0.5em - 1px);
-
+	border-color: $border-color !important;
-	&:active,
-	&:focus,
-	&:hover {
-		color: $primary_color;
-	}
 }
 
 textarea {

src/styles/partials/_forms.scss

@@ -1,78 +1,6 @@
 @charset "UTF-8";
 
-label {
-	line-height: 2.5em;
-}
-.ui-inputswitch {
-	margin-left: 1ch;
-	margin-right: 1ch;
-}
-
-.input-lg {
-	display: block;
-	width: 100%;
-}
-
-select {
-	margin-right: 1ch;
-}
-
-input {
-	margin-right: 1ch;
-
-	&[type='date']::after {
-		content: 'au format JJ/MM/AAAA';
-		display: inline-block;
-		position: relative;
-	}
-}
-
-input,
-select,
-textarea {
-	width: 100%;
-	padding: 1rem;
-	border: 1px solid $border-color;
-}
-
-input,
-select {
-	display: inline-block;
-	margin-bottom: 10px;
-	margin-left: 5px;
-}
-
-.next {
-	max-width: 200px;
-}
-
-input[type='text'],
-textarea {
-	max-width: 350px;
-}
-
-li {
-	list-style-type: none;
-}
-
-.next {
-	margin-bottom: 50px;
-}
-
-.nobold {
-	font-weight: normal;
-}
-
-.btn-block {
-	display: block;
-	width: 100%;
-}
-
-button[type='submit'] {
-	margin-top: 2em;
-}
-
 hr {
 	margin: 4em 0;
-	border: solid 3px $primary;
+	border: solid 3px $primary_color;
 }

src/styles/partials/_responsive.scss

@@ -1,21 +1,2 @@
 @media (min-width: $widescreen) {
-	select,
-	input,
-	label + select,
-	label {
-		width: 45%;
-	}
-	.date-choice > input:first-of-type {
-		width: 80%;
-	}
-	.date-choice .btn--primary,
-	.several-times {
-		margin-left: 1rem;
-		display: inline-block;
-	}
-	.time-choice {
-		input {
-			width: 70%;
-		}
-	}
 }

src/styles/partials/global.scss

@@ -1,9 +1,6 @@
 @charset "UTF-8";
 
 html {
-	font-size: 1rem; /* 10px */
+	font-size: 1rem; /* 16px */
 	color: $font_color;
 }
-main {
-	min-height: 90vh;
-}

src/styles/themes/_light.scss

@@ -1,5 +1,5 @@
 #big_container {
-	background: $primary;
+	background: $primary_color;
 
 	&.theme-light-watermelon {
 		.big-header {

src/styles/variables.scss

@@ -51,7 +51,7 @@ $choice_select_border_color: $d-info;
 $hover-color: $d-neutral;
 $border-color: $d-neutral;
 $grey-dark: $d-primary;
-$grey-light: $beige-light;
+$grey-lighter: $beige-light;
 $clicked-color: $d-primary;
 $mini-button-color: $d-primary-intense;
 $warning: $d-warning;