popup cancel with correct text

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

@@ -18,7 +18,6 @@
 						(blur)="pollService.updateSlug()"
 						id="title"
 						maxlength="140"
-						autofocus="autofocus"
 						required
 					/>
 				</div>

src/app/features/administration/form/steps/step-one/step-one.component.ts

@@ -43,6 +43,11 @@ export class StepOneComponent implements OnInit {
 		if (event) {
 			event.preventDefault();
 		}
+		const selector = '#title';
+		const firstField = this.document.querySelector(selector);
+		if (firstField) {
+			firstField.focus();
+		}
 		this.router.navigate(['/']);
 	}
 }

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

@@ -50,6 +50,7 @@
 			>7</a
 		>
 	</div>
+
 	<div class="step-info">
 		<div class="columns half-columns">
 			<div class="column">
@@ -83,7 +84,11 @@
 			</div>
 			<div class="column has-text-right">
 				<app-language-selector class="nav-button"></app-language-selector>
-				<button class="has-no-border nav-button cancel-button" (click)="showCancelDialog()">
+				<button
+					class="has-no-border nav-button cancel-button"
+					(click)="showCancelDialog()"
+					aria-haspopup="dialog"
+				>
 					{{ 'nav.leave' | translate }} <i class="fa fa-times"></i>
 				</button>
 			</div>
@@ -94,28 +99,49 @@
 
 	<!--	modale pour quitter la création-->
 	<p-dialog
-		header="{{ 'nav.leave' | translate }}?"
 		[modal]="true"
 		[(visible)]="display_cancel_dialog"
 		[breakpoints]="{ '960px': '75vw' }"
 		[style]="{ width: '50vw' }"
 		[draggable]="false"
+		[showHeader]="false"
 		[resizable]="false"
 	>
-		<p>Souhaitez-vous vraiment quitter le sondage ? Toutes les informations seront effacées.</p>
-		<ng-template pTemplate="footer">
+		<ng-template pTemplate="titlebar">
 			<div class="columns">
-				<div class="column is-half-mobile">
-					<button class="button is-warning is-fullwidth cancel-button-confirm" (click)="goToHome()">
-						Quitter
-					</button>
+				<div class="column">
+					<h1 class="title is-2">
+						{{ 'popup.cancel.title' | translate }}
+					</h1>
 				</div>
-				<div class="column is-half-mobile">
+				<div class="column is-narrow">
 					<button
+						id="close_dialog"
 						class="button is-primary is-fullwidth cancel-button-reject"
 						(click)="display_cancel_dialog = false"
 					>
-						Rester
+						Fermer <i class="fa fa-times"></i>
+					</button>
+				</div>
+			</div>
+
+			<p>
+				{{ 'popup.cancel.main' | translate }}
+			</p>
+		</ng-template>
+		<ng-template pTemplate="footer">
+			<div class="columns">
+				<div class="column is-half-mobile">
+					<button
+						class="button is-fullwidth cancel-button-confirm is-outlined"
+						(click)="display_cancel_dialog = false"
+					>
+						Non
+					</button>
+				</div>
+				<div class="column is-half-mobile">
+					<button class="button is-primary is-fullwidth cancel-button-reject" (click)="goToHome()">
+						Oui, annuler sondage
 					</button>
 				</div>
 			</div>

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

@@ -106,7 +106,7 @@
 	.cancel-button-confirm {
 		display: block !important;
 		width: 100%;
-		color: white !important;
+		color: $secondary_color;
 	}
 }
 

src/assets/i18n/FR.json

@@ -58,6 +58,12 @@
 		"description": "et la description serait",
 		"description_placeholder": "description"
 	},
+	"popup": {
+		"cancel" : {
+			"title": "Vous allez annuler votre sondage",
+			"main": "Si vous annulez votre sondage vous perdrez toutes les informations saisies jusqu'à maintenant.\nSouhaitez-vous vraiment annuler?"
+		}
+	},
 	"dates": {
 		"title": "Config spécialement pour les dates",
 		"hours_different": "Je souhaite mettre des créneaux horaires",