diff --git a/src/app/form/form.component.html b/src/app/form/form.component.html index 2b11b64d3bd955218b9b29025c09e4151079e14f..ff8043be8e9fafcfb9d48ba179d796f2754d151e 100644 --- a/src/app/form/form.component.html +++ b/src/app/form/form.component.html @@ -305,24 +305,6 @@ <li><span>les horaires d’ouverture</span></li> - <li><span>la liste des ateliers que vous dispensez (optionnel)</span></li> - </ul> - </div> - <div> - <ul> - <li><span>les coordonnées de votre structure</span></li> - - <li><span>les horaires d’ouverture</span></li> - - <li><span>la liste des ateliers que vous dispensez (optionnel)</span></li> - </ul> - </div> - <div> - <ul> - <li><span>les coordonnées de votre structure</span></li> - - <li><span>les horaires d’ouverture</span></li> - <li><span>la liste des ateliers que vous dispensez (optionnel)</span></li> </ul> </div> @@ -331,18 +313,31 @@ <div *ngIf="currentPage == 2" class="page"> <h3>Qui êtes-vous ?</h3> <p>Ces informations ne seront pas visibles sur la plateforme</p> - <div class="form-group"> + <div class="form-group" fxLayout="column"> <label for="surname">Nom</label> - <input type="text" (input)="setValidationsForm()" formControlName="surname" class="form-control" /> + <div fxLayout="row" fxLayoutGap="13px"> + <input type="text" (input)="setValidationsForm()" formControlName="surname" class="form-control" /> + <img *ngIf="accountForm.get('surname').valid" src="../../assets/form/checked.svg" alt="logo checked" /> + </div> + </div> + <div class="form-group" fxLayout="column"> + <label for="name">Prénom</label> + <div fxLayout="row" fxLayoutGap="13px"> + <input type="text" (input)="setValidationsForm()" formControlName="name" class="form-control" /> + <img *ngIf="accountForm.get('name').valid" src="../../assets/form/checked.svg" alt="logo checked" /> + </div> </div> - <div class="form-group"> + <div class="form-group" fxLayout="column"> <label for="phone">Téléphone</label> - <input - type="text" - formControlName="phone" - class="form-control" - (input)="modifyPhoneInput(accountForm, 'phone', $event.target.value)" - /> + <div fxLayout="row" fxLayoutGap="13px"> + <input + type="text" + formControlName="phone" + class="form-control phone" + (input)="modifyPhoneInput(accountForm, 'phone', $event.target.value)" + /> + <img *ngIf="accountForm.get('phone').valid" src="../../assets/form/checked.svg" alt="logo checked" /> + </div> </div> </div> </form> diff --git a/src/app/form/form.component.scss b/src/app/form/form.component.scss index de317e588fc05712803423baca460fb952cd2f70..07934258b5d7896fedcb2270bd9dad49b20d682a 100644 --- a/src/app/form/form.component.scss +++ b/src/app/form/form.component.scss @@ -173,3 +173,20 @@ min-width: 26px; } } +.form-group { + margin-bottom: 26px; +} +input { + margin-top: 4px; + background: $grey-6; + padding: 8px; + height: 40px; + border: 1px solid $grey-4; + box-sizing: border-box; + border-radius: 4px; + width: 296px; + @include cn-regular-14; + &.phone { + width: 205px; + } +} diff --git a/src/app/form/form.component.ts b/src/app/form/form.component.ts index c61887530b0ec5c32879f57ed9273ff38759747d..1cb1ffce263418d5411c594cb557b5fa5db9efe4 100644 --- a/src/app/form/form.component.ts +++ b/src/app/form/form.component.ts @@ -304,7 +304,12 @@ export class FormComponent implements OnInit { public setValidationsForm(): void { this.pagesValidation[0] = { valid: true }; this.pagesValidation[1] = { valid: true }; - this.pagesValidation[2] = { valid: this.accountForm.get('surname').valid && this.accountForm.get('phone').valid }; + this.pagesValidation[2] = { + valid: + this.accountForm.get('surname').valid && + this.accountForm.get('name').valid && + this.accountForm.get('phone').valid, + }; this.updatePageValid(); } diff --git a/src/assets/form/checked.svg b/src/assets/form/checked.svg new file mode 100644 index 0000000000000000000000000000000000000000..991694b27aee6ebb7e16c88850251638d0e014f1 --- /dev/null +++ b/src/assets/form/checked.svg @@ -0,0 +1,4 @@ +<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"> +<circle cx="13" cy="13" r="13" fill="#47C562"/> +<path d="M8 13.8182L11.8889 17L18 10" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/> +</svg>