diff --git a/src/app/profile/structure-add-member-modal/structure-add-member-modal.component.html b/src/app/profile/structure-add-member-modal/structure-add-member-modal.component.html index 9db4feffb9bb837c0bad8ef43805e9fed8816b3f..11b21962a22af18635c773df0b12268a273123cf 100644 --- a/src/app/profile/structure-add-member-modal/structure-add-member-modal.component.html +++ b/src/app/profile/structure-add-member-modal/structure-add-member-modal.component.html @@ -2,21 +2,16 @@ [title]="'Ajouter un membre'" [opened]="opened" [validateLabel]="'Ajouter'" - [validateDisabled]="formAddAccount?.invalid" + [validateDisabled]="!emailValid()" (closed)="closeModal($event)" > - <form class="modalFormContent" [formGroup]="formAddAccount"> - <div class="form-group"> - <label for="email">Email du membre à ajouter</label> - <div class="modalItem"> - <input type="text" formControlName="email" class="form-input" autocomplete="on" /> - <app-svg-icon *ngIf="fAddAccount.email.valid" [folder]="'form'" [icon]="'validate'" /> - <app-svg-icon - *ngIf="fAddAccount.email.invalid && fAddAccount.email.value" - [folder]="'form'" - [icon]="'notValidate'" - /> - </div> - </div> - </form> + <app-input + autocomplete="on" + [label]="'Email du membre à ajouter'" + [size]="'large'" + [wide]="true" + [status]="getEmailStatus()" + [statusText]="getEmailStatusText()" + [(value)]="email" + /> </app-modal> diff --git a/src/app/profile/structure-add-member-modal/structure-add-member-modal.component.scss b/src/app/profile/structure-add-member-modal/structure-add-member-modal.component.scss deleted file mode 100644 index 517c6eb28c94c18128ae29105e0d3c42a1d0425c..0000000000000000000000000000000000000000 --- a/src/app/profile/structure-add-member-modal/structure-add-member-modal.component.scss +++ /dev/null @@ -1,13 +0,0 @@ -.modalFormContent { - display: flex; - justify-content: center; - - .modalItem { - display: flex; - flex-direction: row; - - input { - margin-right: 13px; - } - } -} diff --git a/src/app/profile/structure-add-member-modal/structure-add-member-modal.component.ts b/src/app/profile/structure-add-member-modal/structure-add-member-modal.component.ts index 2ec8b39ec91d121bf1960531baa3a742225c81b5..3b100b3a309ca76afc8929c3432370904c0ea56d 100644 --- a/src/app/profile/structure-add-member-modal/structure-add-member-modal.component.ts +++ b/src/app/profile/structure-add-member-modal/structure-add-member-modal.component.ts @@ -1,5 +1,4 @@ -import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; -import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { Component, EventEmitter, Input, Output } from '@angular/core'; import { lastValueFrom } from 'rxjs'; import { StructureWithOwners } from '../../models/structureWithOwners.model'; import { TempUser } from '../../models/temp-user.model'; @@ -10,25 +9,18 @@ import { CustomRegExp } from '../../utils/CustomRegExp'; @Component({ selector: 'app-structure-add-member-modal', templateUrl: './structure-add-member-modal.component.html', - styleUrls: ['./structure-add-member-modal.component.scss'], }) -export class StructureAddMemberModalComponent implements OnInit { +export class StructureAddMemberModalComponent { @Input() public opened: boolean; @Input() public structure: StructureWithOwners; @Output() closed = new EventEmitter<boolean>(); - public formAddAccount: FormGroup; + public email = ''; constructor( - private formBuilder: FormBuilder, private structureService: StructureService, private notificationService: NotificationService, ) {} - ngOnInit(): void { - this.formAddAccount = this.formBuilder.group({ - email: ['', [Validators.required, Validators.pattern(CustomRegExp.EMAIL)]], - }); - } public async closeModal(memberAddRequested: boolean): Promise<void> { if (memberAddRequested) { await this.addOwner(); @@ -36,18 +28,26 @@ export class StructureAddMemberModalComponent implements OnInit { this.closed.emit(memberAddRequested); } - // getter for form fields - get fAddAccount(): Record<string, AbstractControl> { - return this.formAddAccount.controls; + public emailValid(): boolean { + return CustomRegExp.EMAIL.test(this.email); + } + + public getEmailStatus(): 'success' | 'error' { + if (this.email === '') return null; + return this.emailValid() ? 'success' : 'error'; + } + + public getEmailStatusText(): string { + return `Email ${this.emailValid() ? 'valide' : 'invalide'}`; } public async addOwner(): Promise<void> { // stop here if form is invalid - if (this.formAddAccount.invalid) { + if (!this.emailValid()) { return; } const user = new TempUser(); - user.email = this.fAddAccount.email.value; + user.email = this.email; try { const res = await lastValueFrom(this.structureService.addOwnerToStructure(user, this.structure.structure._id)); @@ -56,7 +56,7 @@ export class StructureAddMemberModalComponent implements OnInit { } else { this.notificationService.showSuccess('Le membre a bien été ajouté'); } - this.fAddAccount.email.setValue(''); + this.email = ''; } catch (e) { if (e.status === 422) { this.notificationService.showError('', `L'email ${user.email} est déjà rattaché à la structure`);