validate email, focus on kind field at load

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

@@ -24,15 +24,6 @@ export class AdministrationComponent implements OnInit, OnDestroy {
 			if (data.poll) {
 				this.poll = data.poll;
 			}
-
-			// focus on first field of the creation form
-			const firstField = this.document.querySelector('app-admin-form select');
-			if (firstField) {
-				console.log('focus on ', firstField);
-				firstField.focus();
-			} else {
-				console.log('no first field of form');
-			}
 		});
 	}
 

src/app/features/administration/form/base-config/base-config.component.html

@@ -39,6 +39,7 @@
 			<input
 				#creatorEmail
 				matInput
+				type="email"
 				placeholder="{{ 'creation.email_placeholder' | translate }}"
 				formControlName="creatorEmail"
 				id="creatorEmail"
@@ -65,6 +66,7 @@
 						{{ 'creation.name' | translate }}
 					</span>
 				</label>
+				<br />
 				<input
 					#creatorPseudo
 					matInput

src/app/features/administration/form/base-config/base-config.component.ts

@@ -39,6 +39,7 @@ export class BaseConfigComponent {
 
 	public updateSlug(): void {
 		const newValueFormatted = this.pollService.convertTextToSlug(this.form.value.title);
+		console.log('newValueFormatted', newValueFormatted);
 		this.form.patchValue({ custom_url: newValueFormatted });
 	}
 

src/app/features/administration/form/date/list/day/day-list.component.html

@@ -52,7 +52,6 @@
 					{{ 'dates.add_time' | translate }}
 				</button>
 				<div *ngIf="hasSeveralHours" class="several-times">
-					plage horaire distincte
 					<br />
 					<app-time-list [timeSlices]="choice.timeList"></app-time-list>
 				</div>

src/app/features/administration/form/date/list/day/day-list.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject, Input } from '@angular/core';
+import { ChangeDetectorRef, Component, Inject, Input } from '@angular/core';
 import { moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
 import { DateChoice } from '../../../../../../../../mocks/old-stuff/config/defaultConfigs';
 import { DOCUMENT } from '@angular/common';
@@ -27,6 +27,7 @@ export class DayListComponent {
 	constructor(
 		public dialog: MatDialog,
 		private toastService: ToastService,
+		private cd: ChangeDetectorRef,
 		@Inject(DOCUMENT) private document: any,
 		private storageService: StorageService
 	) {
@@ -70,8 +71,9 @@ export class DayListComponent {
 		choice.timeSlices.push({
 			literal: '',
 		});
-		const selector = '[ng-reflect-choice_label="dateTime_' + id + '_ dateList_' + (this.timeList.length - 1) + '"]';
-		// this.cd.detectChanges();
+		const selector =
+			'[ng-reflect-choice_label="dateTime_' + id + '_ dateList_' + (choice.timeSlices.length - 1) + '"]';
+		this.cd.detectChanges();
 		const elem = this.document.querySelector(selector);
 		if (elem) {
 			elem.focus();

src/app/features/administration/form/date/list/time/time-list.component.html

@@ -3,7 +3,13 @@
 		<label class="icon button is-default" for="timeChoices_{{ id }}">
 			<i class="fa fa-arrows-v" aria-hidden="true"></i>
 		</label>
-		<input [(ngModel)]="time.literal" name="timeChoices_{{ id }}" type="text" id="timeChoices_{{ id }}" />
+		<input
+			class="time-list-item"
+			[(ngModel)]="time.literal"
+			name="timeChoices_{{ id }}"
+			type="text"
+			id="timeChoices_{{ id }}"
+		/>
 		<button (click)="timeSlices.splice(id, 1)" class="btn btn-warning">
 			<i class="fa fa-times" aria-hidden="true"></i>
 		</button>

src/app/features/administration/form/date/list/time/time-list.component.scss

@@ -3,4 +3,7 @@
 	.icon {
 		margin-right: 1ch;
 	}
+	.time-list-item {
+		width: 80%;
+	}
 }

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

@@ -14,9 +14,9 @@
 			</button>
 			<main class="columns">
 				<div class="column">
-					<p class="label is-medium">
+					<label class="label is-medium" for="kind">
 						{{ 'creation.want' | translate }}
-					</p>
+					</label>
 					<!--					<div class="step-choices" *ngIf="currentStep === 'base'">-->
 					<app-kind-select [form]="form"></app-kind-select>
 					<app-base-config [form]="form"></app-base-config>

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

@@ -1,96 +0,0 @@
-@import '../../../../styles/variables';
-:host {
-	.admin-form {
-		max-width: 800px;
-		margin: 0 auto;
-	}
-	.form-row {
-		margin-top: 0.5em;
-		margin-bottom: 0.25em;
-		border: solid 1px #ddd;
-		border-left: solid 3px $primary_color;
-		padding-left: 1em;
-		padding-top: 0.5em;
-		padding-bottom: 0.5em;
-	}
-	.fa {
-		margin-right: 1ch;
-		&.fa-times,
-		&.fa-trash {
-			margin-right: 0;
-		}
-	}
-
-	.example-list {
-		width: 500px;
-		max-width: 100%;
-		border: solid 1px #ccc;
-		min-height: 60px;
-		display: block;
-		background: white;
-		border-radius: 4px;
-		overflow: hidden;
-	}
-
-	.example-box {
-		padding: 20px 10px;
-		border-bottom: solid 1px #ccc;
-		color: rgba(0, 0, 0, 0.87);
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-		justify-content: space-between;
-		box-sizing: border-box;
-		cursor: move;
-		background: white;
-		font-size: 14px;
-	}
-
-	.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);
-	}
-
-	.cdk-drag-placeholder {
-		opacity: 0;
-	}
-
-	.cdk-drag-animating {
-		transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-	}
-
-	.example-box:last-child {
-		border: none;
-	}
-
-	.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
-		transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-	}
-	.ng-pristine,
-	.ng-dirty {
-		border-left: $white 3px solid;
-		padding-left: 1em;
-	}
-	.ng-touched.ng-invalid {
-		border-left: $danger 3px solid;
-		padding-left: 1em;
-	}
-	.ng-touched.ng-valid {
-		border-left: $success 3px solid;
-		padding-left: 1em;
-	}
-	.btn {
-		margin: 0.5em;
-	}
-
-	.bar-nav-admin {
-		//position:fixed;
-		//bottom: 0;
-		background: #ccc;
-		display: block;
-		width: 100%;
-		padding: 1em;
-	}
-}

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

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, Inject, Input, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, Inject, Input, OnInit, AfterViewInit } from '@angular/core';
 import { Poll } from '../../../core/models/poll.model';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ApiService } from '../../../core/services/api.service';
@@ -16,7 +16,7 @@ import { DateUtilitiesService } from '../../../core/services/date.utilities.serv
 	templateUrl: './form.component.html',
 	styleUrls: ['./form.component.scss'],
 })
-export class FormComponent implements OnInit {
+export class FormComponent implements OnInit, AfterViewInit {
 	@Input()
 	public poll?: Poll;
 	public form: FormGroup;
@@ -47,6 +47,17 @@ export class FormComponent implements OnInit {
 		// this.goNextStep();
 	}
 
+	ngAfterViewInit() {
+		// focus on first field of the creation form
+		const firstField = this.document.querySelector('#kind');
+		if (firstField) {
+			console.log('focus on ', firstField);
+			firstField.focus();
+		} else {
+			console.log('no first field of form');
+		}
+	}
+
 	initFormDefault(showDemoValues = environment.autofill): void {
 		const creationDate = new Date();
 
@@ -54,10 +65,10 @@ export class FormComponent implements OnInit {
 		this.form = this.fb.group({
 			title: ['', [Validators.required, Validators.minLength(5)]],
 			creatorPseudo: ['', [Validators.required]],
-			creatorEmail: ['', [Validators.required]],
+			creatorEmail: ['', [Validators.required, Validators.email]],
 			custom_url: [this.pollUtilitiesService.makeUuid(), [Validators.required]],
 			description: ['', [Validators.required]],
-			kind: ['', [Validators.required]],
+			kind: ['date', [Validators.required]],
 			areResultsPublic: [true, [Validators.required]],
 			whoCanChangeAnswers: ['everybody', [Validators.required]],
 			isProtectedByPassword: [false, [Validators.required]],
@@ -70,8 +81,8 @@ export class FormComponent implements OnInit {
 			isAboutDate: [true, [Validators.required]],
 			isZeroKnoledge: [false, [Validators.required]],
 			useVoterUniqueLink: [false, [Validators.required]],
-			expiresDaysDelay: [60, [Validators.required, Validators.min(1)]],
-			maxCountOfAnswers: [150, [Validators.required, Validators.min(1)]],
+			expiresDaysDelay: [60, [Validators.required, Validators.min(1), Validators.max(365)]],
+			maxCountOfAnswers: [150, [Validators.required, Validators.min(1), Validators.max(5000)]],
 			allowComments: [true, [Validators.required]],
 			password: ['', []],
 			voterEmailList: ['', []],

src/app/features/administration/form/kind-select/kind-select.component.html

@@ -3,7 +3,7 @@
 		<div class="kind-of-poll control">
 			<div class="select" *ngIf="template_questions_answers">
 				<!--			version maquette questions réponses-->
-				<select name="type" id="type" class="input" formControlName="kind" autofocus>
+				<select name="type" id="kind" class="input" formControlName="kind" autofocus>
 					<option [value]="'date'">{{ 'creation.kind.date' | translate }}</option>
 					<option [value]="'classic'">{{ 'creation.kind.classic' | translate }}</option>
 				</select>

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

@@ -43,7 +43,10 @@
 				<br />
 				<p class="note">
 					Note : Le sondage sera supprimé {{ poll.default_expiracy_days_from_now }} jours après la date de sa
-					dernière modification. Le {{ getExpiracyDateFromPoll(poll) | date: 'short' }}
+					dernière modification.
+					<span class="expiracy-detail" *ngIf="poll.expiracy_date">
+						Le {{ poll.expiracy_date | date: 'short' }}
+					</span>
 				</p>
 			</div>
 			<div class="public">

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

@@ -20,6 +20,7 @@ export class SuccessComponent {
 
 		this.pollService.poll.subscribe((newpoll: Poll) => {
 			this.poll = newpoll;
+			// this.poll.expiracy_date = this.getExpiracyDateFromPoll(this.poll);
 		});
 	}
 

src/styles/partials/_forms.scss

@@ -1,10 +1,5 @@
 @charset "UTF-8";
 
-label {
-	margin-top: 0.25em;
-	line-height: 2.5em;
-}
-
 input,
 select,
 textarea {
@@ -103,10 +98,6 @@ input {
 	@extend .input, .text-ellipsis;
 }
 
-label {
-	margin-top: 0.5rem;
-}
-
 textarea {
 	width: 100%;
 	max-width: 100%;
@@ -124,10 +115,6 @@ textarea {
 	padding-left: 17px;
 }
 
-.cname {
-	font-weight: bold;
-}
-
 .deletable-field-hint {
 	margin-right: 2.8em;
 	margin-top: -0.7em;
@@ -146,8 +133,101 @@ mat-checkbox {
 
 .cdk-drag {
 	cursor: pointer;
-	border-left: 3px white;
+	border-left: 3px white solid;
 	&:hover {
-		border-left: 3px #ccc;
+		border-left: 3px #ccc solid;
 	}
 }
+.admin-form {
+	max-width: 800px;
+	margin: 0 auto;
+}
+
+.fa {
+	margin-right: 1ch;
+	&.fa-times,
+	&.fa-trash {
+		margin-right: 0;
+	}
+}
+
+.example-list {
+	width: 500px;
+	max-width: 100%;
+	border: solid 1px #ccc;
+	min-height: 60px;
+	display: block;
+	background: white;
+	border-radius: 4px;
+	overflow: hidden;
+}
+
+.example-box {
+	padding: 20px 10px;
+	border-bottom: solid 1px #ccc;
+	color: rgba(0, 0, 0, 0.87);
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+	box-sizing: border-box;
+	cursor: move;
+	background: white;
+	font-size: 14px;
+}
+
+.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);
+	padding: 0.5em;
+	height: 4em;
+	background: white;
+}
+
+.cdk-drag-placeholder {
+	opacity: 1;
+	padding: 1em;
+	height: 4em;
+	width: 100%;
+	background: white;
+}
+
+.cdk-drag-animating {
+	padding: 1em;
+	transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.example-box:last-child {
+	border: none;
+}
+
+.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
+	transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+.ng-pristine,
+.ng-dirty {
+	border-left: $white 3px solid;
+	padding-left: 1em;
+}
+.ng-touched.ng-invalid {
+	border-left: $danger 3px solid;
+	padding-left: 1em;
+}
+.ng-touched.ng-valid {
+	border-left: $success 3px solid;
+	padding-left: 1em;
+}
+.btn {
+	margin: 0.5em;
+}
+
+.bar-nav-admin {
+	//position:fixed;
+	//bottom: 0;
+	background: #ccc;
+	display: block;
+	width: 100%;
+	padding: 1em;
+}