diff --git a/src/app/form/form-view/structure-form/structure-contact/structure-contact.component.html b/src/app/form/form-view/structure-form/structure-contact/structure-contact.component.html index d877835d630d851a4cef891c170921398686c4d6..088362abbe7288329af975cb45cc00cbcb41318a 100644 --- a/src/app/form/form-view/structure-form/structure-contact/structure-contact.component.html +++ b/src/app/form/form-view/structure-form/structure-contact/structure-contact.component.html @@ -19,22 +19,17 @@ <span>Il faut renseigner tous les champs</span> </p> <div class="form-group" fxLayout="column"> - <label for="contactPhone">Téléphone de la structure</label> + <label for="structureName">Email de la structure</label> <div fxLayout="row" fxLayoutGap="13px"> - <input - type="text" - formControlName="contactPhone" - class="form-input" - (input)="utils.modifyPhoneInput(structureForm, 'contactPhone', $event.target.value); setValidationsForm()" - /> + <input type="text" (input)="setValidationsForm()" formControlName="contactMail" class="form-input" /> <app-svg-icon - *ngIf="structureForm.get('contactPhone').valid" + *ngIf="structureForm.get('contactMail').valid" [iconClass]="'icon-26'" [type]="'form'" [icon]="'validate'" ></app-svg-icon> <app-svg-icon - *ngIf="structureForm.get('contactPhone').invalid && structureForm.get('contactPhone').value" + *ngIf="structureForm.get('contactMail').invalid && structureForm.get('contactMail').value !== null" [iconClass]="'icon-26'" [type]="'form'" [icon]="'notValidate'" @@ -42,17 +37,25 @@ </div> </div> <div class="form-group" fxLayout="column"> - <label for="structureName">Email de la structure</label> + <div fxLayout="row" fxLayoutGap="8px"> + <label for="contactPhone">Téléphone de la structure</label> + <label class="label-optional">(Facultatif)</label> + </div> <div fxLayout="row" fxLayoutGap="13px"> - <input type="text" (input)="setValidationsForm()" formControlName="contactMail" class="form-input" /> + <input + type="text" + formControlName="contactPhone" + class="form-input" + (input)="utils.modifyPhoneInput(structureForm, 'contactPhone', $event.target.value); setValidationsForm()" + /> <app-svg-icon - *ngIf="structureForm.get('contactMail').valid" + *ngIf="structureForm.get('contactPhone').valid && structureForm.get('contactPhone').value" [iconClass]="'icon-26'" [type]="'form'" [icon]="'validate'" ></app-svg-icon> <app-svg-icon - *ngIf="structureForm.get('contactMail').invalid && structureForm.get('contactMail').value !== null" + *ngIf="structureForm.get('contactPhone').invalid && structureForm.get('contactPhone').value" [iconClass]="'icon-26'" [type]="'form'" [icon]="'notValidate'" diff --git a/src/app/form/form-view/structure-form/structure-contact/structure-contact.component.scss b/src/app/form/form-view/structure-form/structure-contact/structure-contact.component.scss new file mode 100644 index 0000000000000000000000000000000000000000..809c9f217dd7dfd0d5d6c8a3fc855ce9e79db3a9 --- /dev/null +++ b/src/app/form/form-view/structure-form/structure-contact/structure-contact.component.scss @@ -0,0 +1,9 @@ +@import './../../../../../assets/scss/color'; +@import './../../../../../assets/scss/typography'; + +.label-optional { + color: $grey-3; + @include lato-regular-14; + font-style: italic; + margin-top: 2px; +} diff --git a/src/app/form/form-view/structure-form/structure-contact/structure-contact.component.ts b/src/app/form/form-view/structure-form/structure-contact/structure-contact.component.ts index 6d10f40e2eee2a02d6e922a2bc28ae2a0655b120..35f95d1509d059f2874c2fbe40c862194043d904 100644 --- a/src/app/form/form-view/structure-form/structure-contact/structure-contact.component.ts +++ b/src/app/form/form-view/structure-form/structure-contact/structure-contact.component.ts @@ -5,6 +5,7 @@ import { Utils } from '../../../../utils/utils'; @Component({ selector: 'app-structure-contact', templateUrl: './structure-contact.component.html', + styleUrls: ['./structure-contact.component.scss'], }) export class StructureContactComponent implements OnInit { @Input() structureForm: FormGroup; diff --git a/src/app/form/orientation-form/orientation-form.component.html b/src/app/form/orientation-form/orientation-form.component.html index 29b55681ddd096b4a13517ac67052d6fe393aaf9..ef39b6dd10bbcd1432f872edc2a6dff1cc6bffd3 100644 --- a/src/app/form/orientation-form/orientation-form.component.html +++ b/src/app/form/orientation-form/orientation-form.component.html @@ -3,7 +3,7 @@ *ngIf="!multiPrint" class="form" fxLayout="column" - [ngClass]="{ 'form-override': currentPage == pageTypeEnum.structuresSelection }" + [ngClass]="{ 'form-override': currentPage === pageTypeEnum.structuresSelection }" > <app-modal-confirmation [openned]="showConfirmationModal" @@ -12,20 +12,20 @@ ></app-modal-confirmation> <div class="progress-container"> <div class="progressBar" fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="20px"> - <label [ngClass]="{ validate: currentPage == nbPagesForm }" for="progressForm" + <label [ngClass]="{ validate: currentPage === nbPagesForm }" for="progressForm" >{{ progressStatus | number: '1.0-0' }}% </label> <progress id="progressForm" - [ngClass]="{ validate: currentPage == nbPagesForm }" + [ngClass]="{ validate: currentPage === nbPagesForm }" max="100" [value]="progressStatus" ></progress> </div> </div> - <div class="content" *ngIf="currentPage != pageTypeEnum.structuresSelection"> + <div class="content" *ngIf="currentPage !== pageTypeEnum.structuresSelection"> <!-- BESOIN BENEFICIAIRE --> - <div *ngIf="currentPage == pageTypeEnum.beneficiaryNeed" class="page"> + <div *ngIf="currentPage === pageTypeEnum.beneficiaryNeed" class="page"> <div class="titleInfo"> Cet espace vise à favoriser l'orientation de l'usager en partant de son besoin.<br /> Merci de remplir ces quelques questions qui vous permettront d'identifier le lieu à proximité le plus adapté. @@ -144,7 +144,7 @@ </div> </div> <!-- PROFIL BENEFICIAIRE --> - <div *ngIf="currentPage == pageTypeEnum.beneficiaryInfo" class="page"> + <div *ngIf="currentPage === pageTypeEnum.beneficiaryInfo" class="page"> <div class="title"> <h3>Quel est le profil du bénéficiaire ?</h3> </div> @@ -195,7 +195,7 @@ </div> </div> <!-- BENEFICIARY ACCOMPANIMENT --> - <div *ngIf="currentPage == pageTypeEnum.beneficiaryAccompaniment" class="page"> + <div *ngIf="currentPage === pageTypeEnum.beneficiaryAccompaniment" class="page"> <div class="title"> <h3>Qui oriente le bénéficiaire ?</h3> </div> @@ -273,7 +273,7 @@ </div> </div> <!-- BENEFICIARY NEEDS COMMENTARY --> - <div *ngIf="currentPage == pageTypeEnum.beneficiaryNeedCommentary" class="page"> + <div *ngIf="currentPage === pageTypeEnum.beneficiaryNeedCommentary" class="page"> <div class="title"> <h3>Avez-vous des précisions à apporter ?</h3> <p class="notRequired lg">facultatif</p> @@ -297,7 +297,7 @@ </div> </div> <!-- ADDRESS SEARCH --> - <div *ngIf="currentPage == pageTypeEnum.beneficiaryAddress" class="page"> + <div *ngIf="currentPage === pageTypeEnum.beneficiaryAddress" class="page"> <div class="title"> <h3>Autour de quelle adresse cherchez-vous une structure ?</h3> <p class="notRequired lg">facultatif</p> @@ -320,7 +320,7 @@ </div> </div> <!-- PRINT RESULTS --> - <div *ngIf="currentPage == pageTypeEnum.printResults" class="last-page"> + <div *ngIf="currentPage === pageTypeEnum.printResults" class="last-page"> <div class="title"> <app-structure-print-header [beneficiaryNeedCommentary]=" @@ -345,8 +345,8 @@ </div> </div> <!-- STRUCTURE SEARCH --> - <div *ngIf="currentPage == pageTypeEnum.structuresSelection" class="carto"> - <div class="left-col" [ngClass]="{ mapPhone: isMapPhone == true }"> + <div *ngIf="currentPage === pageTypeEnum.structuresSelection" class="carto"> + <div class="left-col" [ngClass]="{ mapPhone: isMapPhone === true }"> <div class="filters"> <span class="filters-title">Filtre(s) séléctionné(s)</span> <div fxLayout="row wrap" fxLayoutGap="4px"> @@ -401,7 +401,7 @@ (action)="switchMapList()" ></app-button> </div> - <div class="right-col" [ngClass]="{ mapPhone: isMapPhone == true }"> + <div class="right-col" [ngClass]="{ mapPhone: isMapPhone === true }"> <app-map [isOrientationForm]="true" [structures]="structuresList" @@ -414,12 +414,12 @@ [searchedValue]="userLocation" (onOrientationButtonClick)="addToList($event, structure)" class="right-pane deep-map" - [ngClass]="{ mapPhone: isMapPhone == true }" + [ngClass]="{ mapPhone: isMapPhone === true }" ></app-map> </div> </div> <!-- FOOTER AVEC SUIVANT / PRECEDENT ET VALIDATION --> - <div *ngIf="currentPage != pageTypeEnum.printResults" class="form-footer"> + <div *ngIf="currentPage !== pageTypeEnum.printResults" class="form-footer"> <div fxLayout="row" fxLayoutAlign="center center"> <app-footer-form [btnName]="['Précédent', 'Suivant']" @@ -430,7 +430,7 @@ ></app-footer-form> </div> </div> - <div *ngIf="currentPage == pageTypeEnum.printResults" class="form-footer"> + <div *ngIf="currentPage === pageTypeEnum.printResults" class="form-footer"> <div fxLayout="row" fxLayoutAlign="center center"> <app-footer-form [btnName]="['Précédent', 'Imprimer', 'Terminer']" diff --git a/src/app/utils/CustomRegExp.ts b/src/app/utils/CustomRegExp.ts index 6f5d4379933cd95004d181f8f888c312a9f68360..65ab1a30c1a6f44cb0b95e0a2a824fd173214591 100644 --- a/src/app/utils/CustomRegExp.ts +++ b/src/app/utils/CustomRegExp.ts @@ -20,9 +20,9 @@ export class CustomRegExp { public static readonly EMAIL: RegExp = /^[a-z0-9.\-_]+@[a-z0-9.-]+[.][a-z]{2,3}/; //NOSONAR public static readonly TEXT_WITHOUT_NUMBER: RegExp = /^[A-Za-zÀ-ÖØ-öø-ÿ- ]{1,}$/; //NOSONAR /** - * Validate a password (at least 8 characters, 1 uppercase letter, 1 lowercase letter, 1 number, and 1 special character) + * Validate a phone number (4 or 10 digits, allowing spaces, dashes and dots as spacers) */ - public static readonly PHONE: RegExp = /^(?:(?:\+|00)|0)\s*[1-9](?:[\s.-]*\d{2}){4}$/; //NOSONAR + public static readonly PHONE: RegExp = /^(?:(?:\+|00)|0)\s*[1-9](?:[\s.-]*\d{2}){4}$|^(?:[\s.-]*\d{2}){2}$/; //NOSONAR public static readonly WEBSITE: RegExp = /^(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,}|[a-zA-Z0-9]+\.[^\s]{2,})/; //NOSONAR public static readonly LINKEDIN: string = '(linkedin.com/.{1,})'; public static readonly FACEBOOK: string = '(facebook.com/.{1,})'; diff --git a/src/app/utils/formUtils.ts b/src/app/utils/formUtils.ts index 045487e85b0f61c78ef212f67e1abcf967ea4a6a..7f7fadfeaeb36f22feb3cff18d8927b6fa607353 100644 --- a/src/app/utils/formUtils.ts +++ b/src/app/utils/formUtils.ts @@ -86,10 +86,7 @@ export class formUtils { Validators.required, Validators.pattern(CustomRegExp.EMAIL), ]), - contactPhone: new FormControl(structure.contactPhone, [ - Validators.required, - Validators.pattern(CustomRegExp.PHONE), - ]), + contactPhone: new FormControl(structure.contactPhone, [Validators.pattern(CustomRegExp.PHONE)]), contactPersonFirstname: new FormControl(structure.contactPersonLastName, !isEditMode && Validators.required), contactPersonLastname: new FormControl(structure.contactPersonLastName, !isEditMode && Validators.required), contactPersonEmail: new FormControl(