advanced config, toggle display clear password

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

@@ -10,32 +10,20 @@
 			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="custom_url">
 			Url personnalisée pour les participants
-			<i class="fa fa-close"></i>
 		</label>
 		<br />
 		<button
-			mat-button
 			*ngIf="form.controls.custom_url.value"
-			matSuffix
-			mat-icon-button
 			aria-label="Clear"
-			(click)="form.patchValue({ custom_url: '' })"
+			(click)="form.patchValue({ custom_url: pollService.makeSlug(form) })"
-		></button>
+		>
+			<i class="fa fa-recycle"></i> régénérer
+		</button>
 		<input #custom_url matInput id="custom_url" placeholder="Url" formControlName="custom_url" required />
 		<br />
 		<div appearance="outline" class="is-not-flex">
@@ -51,16 +39,6 @@
 				formControlName="expiresDaysDelay"
 				required
 			/>
-			<button
-				mat-button
-				*ngIf="expiresDaysDelay.value"
-				matSuffix
-				mat-icon-button
-				aria-label="Clear"
-				(click)="expiresDaysDelay.value = ''"
-			>
-				<i class="fa fa-close"></i>
-			</button>
 		</div>
 		<mat-checkbox class="is-not-flex" formControlName="areResultsPublic">
 			Les participants pourront consulter les résultats
@@ -74,16 +52,26 @@
 			Le sondage sera protégé par un mot de passe
 		</mat-checkbox>
 		<br />
-		<input
+		<div class="password-box" *ngIf="form.value.isProtectedByPassword">
-			*ngIf="form.value.isProtectedByPassword"
+			<input
-			#password
+				#password
-			id="password"
+				id="password"
-			matInput
+				matInput
-			type="password"
+				[type]="displayClearPassword ? 'text' : 'password'"
-			placeholder="password"
+				placeholder="password"
-			formControlName="password"
+				formControlName="password"
-			required
+				required
-		/>
+			/>
+			<button
+				class="button"
+				[ngClass]="{ 'is-primary': displayClearPassword, 'is-info': !displayClearPassword }"
+				(click)="displayClearPassword = !displayClearPassword"
+			>
+				voir
+				<i class="fa fa-eye" *ngIf="!displayClearPassword"></i>
+				<i class="fa fa-eye-slash" *ngIf="displayClearPassword"></i>
+			</button>
+		</div>
 
 		<h3 class="title is-3">
 			<i class="fa fa-envelope-open"></i>
@@ -172,4 +160,5 @@
 			Les informations du sondage seront chiffrés en base de données
 		</mat-checkbox>
 	</fieldset>
+	<app-errors-list [form]="form"></app-errors-list>
 </form>

src/app/features/administration/form/advanced-config/advanced-config.component.scss

@@ -6,3 +6,6 @@
 		margin-left: 1em;
 	}
 }
+.button .fa {
+	margin: 1em;
+}

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

@@ -2,6 +2,7 @@ import { Component, Input, OnInit } from '@angular/core';
 import { Poll } from '../../../../core/models/poll.model';
 import { FormGroup } from '@angular/forms';
 import { environment } from 'src/environments/environment';
+import { PollService } from '../../../../core/services/poll.service';
 
 @Component({
 	selector: 'app-advanced-config',
@@ -11,11 +12,12 @@ import { environment } from 'src/environments/environment';
 export class AdvancedConfigComponent implements OnInit {
 	public urlPrefix = '/participation/';
 	public environment = environment;
+	public displayClearPassword = false;
 	@Input()
 	public poll?: Poll;
 	@Input()
 	public form: FormGroup;
-	constructor() {}
+	constructor(public pollService: PollService) {}
 
 	ngOnInit(): void {}
 }

src/environments/environment.ts

@@ -12,7 +12,7 @@ export const environment = {
 	production: false,
 	display_routes: false, // demo paths to test polls
 	autofill_creation: true,
-	advanced_options_display: false,
+	advanced_options_display: true,
 	autofill_participation: true,
 	// autofill: false,
 	showDemoWarning: false,