diff --git a/src/app/form/form.component.html b/src/app/form/form.component.html
index 2fb38f057b317764d9342e6def0b8cfad6a9bfc1..1d2a972baf56a25b260e4e8b4eb2b51d07e8eefd 100644
--- a/src/app/form/form.component.html
+++ b/src/app/form/form.component.html
@@ -918,27 +918,46 @@
le site des services et démarches en ligne dans la Métropole de Lyon
</p>
</div>
+ <div *ngIf="currentPage == nbPagesForm && !emailConfirmed" class="page" fxLayout="column" fxLayoutGap="69px">
+ <svg aria-hidden="true">
+ <use [attr.xlink:href]="'assets/form/sprite.svg#emailVerification'"></use>
+ </svg>
+ <h3>Un courriel vous a été envoyé afin de finaliser votre inscription</h3>
+ </div>
+ <div *ngIf="emailConfirmed" class="page">
+ <div class="title">
+ <h3>
+ Bravo !<br />
+ Votre structure a bien été référencée.
+ </h3>
+ </div>
+
+ <div class="structureInfoBlock" fxLayout="row" fxLayoutAlign=" center">
+ <div class="structureInfoContent" fxLayout="column">
+ {{ getStructureControl('structureName').value }}
+ <span>{{ getStructureControl('structureType').value }}</span>
+ </div>
+ <div class="validateSvg">
+ <svg class="validate" aria-hidden="true">
+ <use [attr.xlink:href]="'assets/form/sprite.svg#checkVector'"></use>
+ </svg>
+ </div>
+ </div>
+ </div>
</form>
</div>
<div *ngIf="currentPage != 0" class="footer" fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="10px">
- <button class="btn previous" (click)="previousPage()"><span class="chevron left"></span>Précédent</button>
- <button
- *ngIf="currentPage != nbPagesForm"
- class="btn next"
- (click)="nextPage()"
- [disabled]="!isPageValid"
- [ngClass]="{ invalid: !isPageValid }"
- >
- Suivant<span class="chevron right"></span>
+ <div *ngIf="currentPage != nbPagesForm">
+ <button class="btn previous" (click)="previousPage()"><span class="chevron left"></span>Précédent</button>
+ <button class="btn next" (click)="nextPage()" [disabled]="!isPageValid" [ngClass]="{ invalid: !isPageValid }">
+ Suivant<span class="chevron right"></span>
+ </button>
+ </div>
+ <button *ngIf="currentPage == nbPagesForm && !emailConfirmed" class="btn validate unique" (click)="confirmEmail()">
+ Ok
</button>
- <button
- *ngIf="currentPage == nbPagesForm"
- class="btn validate"
- (click)="validateForm()"
- [disabled]="!isPageValid"
- [ngClass]="{ invalid: !isPageValid }"
- >
- Terminer
+ <button *ngIf="emailConfirmed" class="btn unique" routerLink="/home" [routerLinkActive]="'active'">
+ Voir ma structure
</button>
</div>
</div>
diff --git a/src/app/form/form.component.scss b/src/app/form/form.component.scss
index 20530c214b67099eebfb4b3843ac7aa8ae28aac4..1d97f1229743d01efc988b796e694bb7ed84621d 100644
--- a/src/app/form/form.component.scss
+++ b/src/app/form/form.component.scss
@@ -33,6 +33,9 @@ $progressBar-height: 50px;
&.validate {
background-color: $green-1;
}
+ &.unique {
+ width: 240px;
+ }
}
@media #{$tablet} {
margin: 0 auto;
@@ -506,3 +509,26 @@ img {
.asterisk {
color: $secondary-color;
}
+
+.structureInfoBlock {
+ background: $green-1;
+ color: $white;
+ padding: 16px;
+ border-radius: 6px;
+ @include cn-bold-18;
+ .structureInfoContent {
+ width: 100%;
+ }
+ span {
+ font-style: italic;
+ @include cn-regular-14;
+ }
+ .validateSvg {
+ stroke: $white;
+ text-align: right;
+ svg {
+ height: 14px;
+ width: 14px;
+ }
+ }
+}
diff --git a/src/app/form/form.component.ts b/src/app/form/form.component.ts
index 2b3cbecc9bbed909425e517c574d838fe85a2820..a3bf80a39bd43d22f94265996beb47e9901814e7 100644
--- a/src/app/form/form.component.ts
+++ b/src/app/form/form.component.ts
@@ -40,7 +40,7 @@ export class FormComponent implements OnInit {
//New var form
public currentPage = 0;
public progressStatus = 0;
- public nbPagesForm = 23;
+ public nbPagesForm = 24;
public accountForm: FormGroup;
public isPageValid: boolean;
public pagesValidation = [];
@@ -51,6 +51,7 @@ export class FormComponent implements OnInit {
public showMenu = false;
public showModalExit: string = null;
+ public emailConfirmed = false;
//collapse var
public showWebsite: boolean;
public showSocialNetwork: boolean;
@@ -119,7 +120,7 @@ export class FormComponent implements OnInit {
// Init account Form
this.accountForm = new FormGroup(
{
- email: new FormControl('', [Validators.required, Validators.pattern('[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,3}$')]), //NOSONAR
+ email: new FormControl('', [Validators.required, Validators.pattern('[a-z0-9.-]+@[a-z0-9.-]+[.][a-z]{2,3}')]), //NOSONAR
name: new FormControl('', [Validators.required, Validators.pattern('[A-Za-zÀ-ÖØ-öø-ÿ-]{1,}')]), //NOSONAR
surname: new FormControl('', [Validators.required, Validators.pattern('[A-Za-zÀ-ÖØ-öø-ÿ-]{1,}')]), //NOSONAR
phone: new FormControl('', [Validators.required, Validators.pattern('([0-9]{2} ){4}[0-9]{2}')]), //NOSONAR
@@ -147,7 +148,7 @@ export class FormComponent implements OnInit {
}),
contactMail: new FormControl(structure.contactMail, [
Validators.required,
- Validators.pattern('[a-z0-9-]{1,}[@][a-z0-9-]{1,}[.][a-z]{2,3}'),
+ Validators.pattern('[a-z0-9.-]+@[a-z0-9.-]+[.][a-z]{2,3}'),
]),
contactPhone: new FormControl(structure.contactPhone, [
Validators.required,
@@ -349,9 +350,15 @@ export class FormComponent implements OnInit {
this.currentPage++; // page 14 skip and go to page 15
this.progressStatus += 100 / this.nbPagesForm;
}
- this.currentPage++;
- this.progressStatus += 100 / this.nbPagesForm;
- this.updatePageValid();
+
+ // Check if going to the last page to submit form and send email verification.
+ if (this.currentPage == this.nbPagesForm - 1) {
+ this.validateForm();
+ } else {
+ this.currentPage++;
+ this.progressStatus += 100 / this.nbPagesForm;
+ this.updatePageValid();
+ }
}
public previousPage(): void {
// Check if "other" isn't check to hide "other description" page
@@ -494,10 +501,10 @@ export class FormComponent implements OnInit {
() => {
this.structureService.createStructure(structure, user).subscribe(
(structure: Structure) => {
- this.router.navigateByUrl('/home');
+ this.currentPage++;
},
(err) => {
- this.router.navigateByUrl('/home');
+ console.log('err création structure');
}
);
},
@@ -505,7 +512,6 @@ export class FormComponent implements OnInit {
if (error.error.statusCode === 400) {
console.log('Email déjà utilisé');
}
- this.router.navigateByUrl('/home');
}
);
} else {
@@ -535,4 +541,8 @@ export class FormComponent implements OnInit {
this.showMenu = false;
}
}
+ // TODO : Email verification link
+ public confirmEmail(): void {
+ this.emailConfirmed = true;
+ }
}
diff --git a/src/assets/form/email.svg b/src/assets/form/email.svg
new file mode 100644
index 0000000000000000000000000000000000000000..0be345e0d28264721e32fb965d6b0e3ec1e783ac
--- /dev/null
+++ b/src/assets/form/email.svg
@@ -0,0 +1,17 @@
+<svg width="196" height="119" viewBox="0 0 196 119" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.35" filter="url(#filter0_f)">
+<rect x="74.145" y="49.134" width="94.7677" height="60.8093" transform="rotate(-19.503 74.145 49.134)" fill="#348899"/>
+</g>
+<path d="M72.012 33.98C69.9322 34.3896 68.691 36.5394 69.3763 38.5454L95.4069 114.744C96.0855 116.73 98.3483 117.677 100.239 116.765L182.813 76.9455C184.422 76.1698 185.188 74.3077 184.592 72.6244L165.466 18.6229C164.886 16.9861 163.194 16.0218 161.49 16.3573L72.012 33.98Z" fill="#C9ECF3" stroke="#83B6C1" stroke-width="3"/>
+<path d="M72.2571 38.0604C70.0496 37.0427 70.4459 33.7921 72.8333 33.3347L161.294 16.3859C163.287 16.0041 164.88 18.0294 164.04 19.8761M72.2571 38.0604L164.04 19.8761M72.2571 38.0604L132.625 65.8898C137.408 68.0943 143.071 65.9885 145.25 61.195L164.04 19.8761M72.2571 38.0604L164.04 19.8761" fill="#EAF8FB" stroke="#83B6C1" stroke-width="3"/>
+<path d="M63.4997 63L2.12107 78.1767" stroke="#DC2A59" stroke-width="3" stroke-linecap="round"/>
+<path d="M77.0343 97L36.1785 116.5" stroke="#DC2A59" stroke-width="3" stroke-linecap="round"/>
+<path d="M70.0344 80L48.5 88" stroke="#DC2A59" stroke-width="3" stroke-linecap="round"/>
+<defs>
+<filter id="filter0_f" x="62.145" y="5.49524" width="133.632" height="112.959" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="6" result="effect1_foregroundBlur"/>
+</filter>
+</defs>
+</svg>
diff --git a/src/assets/form/sprite.svg b/src/assets/form/sprite.svg
index a7cff47e3c98a1a8465819c9eb3d303eb1cfd2e4..a62f1536ad9ba3de6de79162e50f3a5b4463b75b 100644
--- a/src/assets/form/sprite.svg
+++ b/src/assets/form/sprite.svg
@@ -298,4 +298,23 @@
<rect x="17.7522" y="19.8494" width="4.36364" height="11.6364" rx="1" transform="rotate(-45 17.7522 19.8494)" stroke="none"/>
</symbol>
+<symbol id="emailVerification" viewBox="0 0 196 119" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.35" filter="url(#filter0_f)">
+<rect x="74.145" y="49.134" width="94.7677" height="60.8093" transform="rotate(-19.503 74.145 49.134)" fill="#348899"/>
+</g>
+<path d="M72.012 33.98C69.9322 34.3896 68.691 36.5394 69.3763 38.5454L95.4069 114.744C96.0855 116.73 98.3483 117.677 100.239 116.765L182.813 76.9455C184.422 76.1698 185.188 74.3077 184.592 72.6244L165.466 18.6229C164.886 16.9861 163.194 16.0218 161.49 16.3573L72.012 33.98Z" fill="#C9ECF3" stroke="#83B6C1" stroke-width="3"/>
+<path d="M72.2571 38.0604C70.0496 37.0427 70.4459 33.7921 72.8333 33.3347L161.294 16.3859C163.287 16.0041 164.88 18.0294 164.04 19.8761M72.2571 38.0604L164.04 19.8761M72.2571 38.0604L132.625 65.8898C137.408 68.0943 143.071 65.9885 145.25 61.195L164.04 19.8761M72.2571 38.0604L164.04 19.8761" fill="#EAF8FB" stroke="#83B6C1" stroke-width="3"/>
+<path d="M63.4997 63L2.12107 78.1767" stroke="#DC2A59" stroke-width="3" stroke-linecap="round"/>
+<path d="M77.0343 97L36.1785 116.5" stroke="#DC2A59" stroke-width="3" stroke-linecap="round"/>
+<path d="M70.0344 80L48.5 88" stroke="#DC2A59" stroke-width="3" stroke-linecap="round"/>
+<defs>
+<filter id="filter0_f" x="62.145" y="5.49524" width="133.632" height="112.959" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="6" result="effect1_foregroundBlur"/>
+</filter>
+</defs>
+</symbol>
+
+
</svg>
\ No newline at end of file