src/app/form/form-view/structure-form/structure-access-modality/structure-access-modality.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StructureAccessModalityComponent } from './structure-access-modality.component';
+
+describe('StructureAccessModalityComponent', () => {
+  let component: StructureAccessModalityComponent;
+  let fixture: ComponentFixture<StructureAccessModalityComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ StructureAccessModalityComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StructureAccessModalityComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/form/form-view/structure-form/structure-access-modality/structure-access-modality.component.ts

+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { Category } from '../../../../structure-list/models/category.model';
+
+@Component({
+  selector: 'app-structure-access-modality',
+  templateUrl: './structure-access-modality.component.html',
+})
+export class StructureAccessModalityComponent implements OnInit {
+  @Input() structureForm: FormGroup;
+  @Input() accessModality: Category;
+  @Output() checkChange = new EventEmitter<any>();
+  @Output() validateForm = new EventEmitter<any>();
+
+  ngOnInit(): void {
+    this.validateForm.emit();
+  }
+
+  public onCheckChange(event: boolean, formControlName: string, modality: string) {
+    this.checkChange.emit({
+      event,
+      formControlName,
+      value: modality,
+    });
+  }
+
+  public isInArray(formControlName: string, term: string) {
+    if (this.structureForm.controls[formControlName].value) {
+      return this.structureForm.controls[formControlName].value.includes(term);
+    }
+    return false;
+  }
+}

src/app/form/form-view/structure-form/structure-accompaniment-choice/structure-accompaniment-choice.component.html

+<form [formGroup]="structureForm" *ngIf="structureForm" (keyup.enter)="isPageValid && !isEditMode ? nextPage() : null">
+  <div class="title">
+    <h3>La structure dispose-t-elle d'un lieu d'accueil pour faire de l'accompagnement / formation&nbsp;?</h3>
+    <p>Exemple : accompagnement aux démarches administratives...</p>
+  </div>
+  <app-radio-form
+    [selectedOption]="structureForm.get('placeOfReception').value"
+    (selectedEvent)="onRadioChange('placeOfReception', $event)"
+  >
+  </app-radio-form>
+</form>

src/app/form/form-view/structure-form/structure-accompaniment-choice/structure-accompaniment-choice.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StructureAccompanimentChoiceComponent } from './structure-accompaniment-choice.component';
+
+describe('StructureAccompanimentChoiceComponent', () => {
+  let component: StructureAccompanimentChoiceComponent;
+  let fixture: ComponentFixture<StructureAccompanimentChoiceComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ StructureAccompanimentChoiceComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StructureAccompanimentChoiceComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/form/form-view/structure-form/structure-accompaniment-choice/structure-accompaniment-choice.component.ts

+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+
+@Component({
+  selector: 'app-structure-accompaniment-choice',
+  templateUrl: './structure-accompaniment-choice.component.html',
+})
+export class StructureAccompanimentChoiceComponent implements OnInit {
+  @Input() structureForm: FormGroup;
+  @Output() radioChange = new EventEmitter<any>();
+  @Output() validateForm = new EventEmitter<any>();
+
+  ngOnInit(): void {
+    this.validateForm.emit();
+  }
+
+  public onRadioChange(name: string, value: boolean): void {
+    this.radioChange.emit({ name, value });
+  }
+}

src/app/form/form-view/structure-form/structure-choice-completion/structure-choice-completion.component.html

+<form [formGroup]="structureForm" *ngIf="structureForm" (keyup.enter)="isPageValid && !isEditMode ? nextPage() : null">
+  <div class="title">
+    <h3>Souhaitez-vous renseigner les informations de la structure&nbsp;?</h3>
+    <p>Exemple : téléphone, email, type d'établissement, accessibilité PMR, type de public&nbsp;?</p>
+  </div>
+  <app-radio-form
+    [selectedOption]="structureForm.get('choiceCompletion').value"
+    (selectedEvent)="onRadioChange('choiceCompletion', $event)"
+  >
+  </app-radio-form>
+</form>

src/app/form/form-view/structure-form/structure-choice-completion/structure-choice-completion.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StructureChoiceCompletionComponent } from './structure-choice-completion.component';
+
+describe('StructureChoiceCompletionComponent', () => {
+  let component: StructureChoiceCompletionComponent;
+  let fixture: ComponentFixture<StructureChoiceCompletionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ StructureChoiceCompletionComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StructureChoiceCompletionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/form/form-view/structure-form/structure-choice-completion/structure-choice-completion.component.ts

+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+
+@Component({
+  selector: 'app-structure-choice-completion',
+  templateUrl: './structure-choice-completion.component.html',
+})
+export class StructureChoiceCompletionComponent {
+  @Input() structureForm: FormGroup;
+  @Output() radioChange = new EventEmitter<any>();
+  @Output() validateForm = new EventEmitter<any>();
+
+  ngOnInit(): void {
+    this.validateForm.emit();
+  }
+
+  public onRadioChange(name: string, value: boolean): void {
+    this.radioChange.emit({ name, value });
+  }
+}

src/app/form/form-view/structure-form/structure-consent/structure-consent.component.html

+<form [formGroup]="structureForm" (keyup.enter)="(!isEditMode ? '' : null)">
+  <div class="section" *ngIf="!isEditMode">
+    <div class="title">
+      <h3>
+        Acceptez-vous que les informations saisies soient enregistrées par la Métropole de Lyon<span class="asterisk"
+          >*</span
+        >
+        ?
+      </h3>
+    </div>
+    <app-checkbox-form [isChecked]="userAcceptSavedDate" [text]="'J\'accepte'" (checkEvent)="acceptDataBeSaved($event)">
+    </app-checkbox-form>
+  </div>
+  <div class="section">
+    <div class="title">
+      <h3>
+        Acceptez-vous que les informations de votre structure soient mises à disposition sur la plateforme
+        data.grandlyon.com<span class="asterisk" *ngIf="!isEditMode">**</span
+        ><span class="asterisk" *ngIf="isEditMode">*</span> ?
+      </h3>
+      <p class="notRequired" *ngIf="!isEditMode">Facultatif</p>
+    </div>
+    <app-checkbox-form
+      *ngIf="!isEditMode"
+      [text]="'J\'accepte'"
+      (checkEvent)="acceptOpenData($event)"
+    ></app-checkbox-form>
+    <div class="dataShareConsent">
+      <app-radio-form
+        *ngIf="isEditMode"
+        name="{{ getStructureControl('structureName').value }}"
+        horizontal="true"
+        [selectedOption]="getStructureControl('dataShareConsentDate').value === null ? false : true"
+        (selectedEvent)="onRadioBtnChange('dataShareConsentDate', $event)"
+      >
+      </app-radio-form>
+    </div>
+  </div>
+  <p *ngIf="!isEditMode" class="informationEndForm">
+    <span class="asterisk">*</span> Les informations recueillies sont enregistrées dans un fichier par la Métropole de
+    Lyon en vue de l'animation du réseau des acteurs de la médiation numérique. Elles sont conservées pendant 24 mois et
+    sont destinées aux seuls intervenants habilités de la Métropole de Lyon.<br />
+    Vos données personnelles sont traitées dans ce cadre aux fins de recensement des actions de médiation numérique sur
+    le territoire de la métropole. Conformément à la loi 78-17 du 6 janvier 1978 modifiée relative à l'information, aux
+    fichiers et aux libertés, et au Règlement Général européen à la Protection des Données, vous avez la possibilité
+    d’exercer vos droits d’accès, de rectification, d’effacement, d’opposition, de limitation du traitement et de
+    révocation de votre consentement. Afin d'exercer vos droits, vous pouvez vous adresser : <br />
+    - par courrier postal à : Métropole de Lyon - Direction des Affaires Juridiques et de la Commande Publique - 20, rue
+    du Lac - BP 33569 - 69505 Lyon Cedex<br />
+    - par courrier électronique en remplissant le formulaire dédié sur Toodego, le site des services et démarches en
+    ligne dans la Métropole de Lyon
+  </p>
+  <p class="informationEndForm">
+    <span class="asterisk" *ngIf="!isEditMode">**</span><span class="asterisk" *ngIf="isEditMode">*</span> La Métropole
+    de Lyon, engagée pour la transparence de l’action publique et la valorisation de ses partenaires, encourage
+    l’ouverture des données. Les données de votre structure seront publiées sur la plateforme
+    <a href="https://data.grandlyon.com/" target="_blank">https://data.grandlyon.com/</a> sous la licence ouverte (open
+    data) et seront donc librement accessibles et réutilisables. Vous pourrez modifier votre choix à tout moment,
+    exercer vos droits d’accès et de modification, en le signifiant, par tout moyen à votre convenance, auprès de vos
+    interlocuteurs de la Métropole de Lyon.
+  </p>
+</form>

src/app/form/form-view/structure-form/structure-consent/structure-consent.component.scss

+@import '../../../../../assets/scss/typography';
+@import '../../../../../assets/scss/color';
+
+h3 {
+  @include lato-bold-18;
+  margin-top: 1.5rem;
+}
+.asterisk {
+  color: $primary-color;
+}
+.informationEndForm {
+  @include lato-regular-12;
+}

src/app/form/form-view/structure-form/structure-consent/structure-consent.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StructureConsentComponent } from './structure-consent.component';
+
+describe('StructureConsentComponent', () => {
+  let component: StructureConsentComponent;
+  let fixture: ComponentFixture<StructureConsentComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ StructureConsentComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StructureConsentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/form/form-view/structure-form/structure-consent/structure-consent.component.ts

+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+
+@Component({
+  selector: 'app-structure-consent',
+  templateUrl: './structure-consent.component.html',
+  styleUrls: ['./structure-consent.component.scss'],
+})
+export class StructureConsentComponent {
+  @Input() structureForm: FormGroup;
+  @Input() isEditMode: boolean;
+  @Output() onAcceptDataBeSaved = new EventEmitter<any>();
+  @Output() onAcceptOpenData = new EventEmitter<any>();
+
+  public acceptDataBeSaved(event: boolean): void {
+    this.onAcceptDataBeSaved.emit(event);
+  }
+
+  public acceptOpenData(event: boolean): void {
+    this.onAcceptOpenData.emit(event);
+  }
+}

src/app/form/form-view/structure-form/structure-contact-completion/structure-contact-completion.component.html

+<form [formGroup]="structureForm" *ngIf="structureForm" (keyup.enter)="isPageValid && !isEditMode ? nextPage() : null">
+  <div class="title">
+    <h3>Quelle personne pourrait connaître ces informations&nbsp;?</h3>
+    <p>Informations demandées : téléphone, email, accessibilité PMR, type de public...</p>
+  </div>
+
+  <div class="form-group" fxLayout="column">
+    <label for="contactPersonFirstname">Prénom</label>
+    <div fxLayout="row" fxLayoutGap="13px">
+      <input
+        type="text"
+        name="contactPersonFirstname"
+        id="contactPersonFirstname"
+        formControlName="contactPersonFirstname"
+        (input)="setValidationsForm()"
+        class="form-input"
+      />
+      <app-svg-icon
+        *ngIf="structureForm.get('contactPersonFirstname').valid"
+        [iconClass]="'icon-26'"
+        [type]="'form'"
+        [icon]="'validate'"
+      ></app-svg-icon>
+    </div>
+  </div>
+  <div class="form-group" fxLayout="column">
+    <label for="contactPersonLastname">Nom</label>
+    <div fxLayout="row" fxLayoutGap="13px">
+      <input
+        type="text"
+        id="contactPersonLastname"
+        name="contactPersonLastname"
+        formControlName="contactPersonLastname"
+        (input)="setValidationsForm()"
+        class="form-input"
+      />
+      <app-svg-icon
+        *ngIf="structureForm.get('contactPersonLastname').valid"
+        [iconClass]="'icon-26'"
+        [type]="'form'"
+        [icon]="'validate'"
+      ></app-svg-icon>
+    </div>
+  </div>
+  <div class="form-group" fxLayout="column">
+    <label for="contactPersonEmail">Email</label>
+    <div fxLayout="row" fxLayoutGap="13px">
+      <input
+        type="text"
+        id="contactPersonEmail"
+        name="contactPersonEmail"
+        formControlName="contactPersonEmail"
+        (input)="setValidationsForm()"
+        class="form-input"
+      />
+      <app-svg-icon
+        *ngIf="structureForm.get('contactPersonEmail').valid"
+        [iconClass]="'icon-26'"
+        [type]="'form'"
+        [icon]="'validate'"
+      ></app-svg-icon>
+      <app-svg-icon
+        *ngIf="structureForm.get('contactPersonEmail').invalid && structureForm.get('contactPersonEmail').value"
+        [iconClass]="'icon-26'"
+        [type]="'form'"
+        [icon]="'notValidate'"
+      ></app-svg-icon>
+    </div>
+  </div>
+</form>

src/app/form/form-view/structure-form/structure-contact-completion/structure-contact-completion.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StructureContactCompletionComponent } from './structure-contact-completion.component';
+
+describe('StructureContactCompletionComponent', () => {
+  let component: StructureContactCompletionComponent;
+  let fixture: ComponentFixture<StructureContactCompletionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ StructureContactCompletionComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StructureContactCompletionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/form/form-view/structure-form/structure-contact-completion/structure-contact-completion.component.ts

+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+
+@Component({
+  selector: 'app-structure-contact-completion',
+  templateUrl: './structure-contact-completion.component.html',
+})
+export class StructureContactCompletionComponent implements OnInit {
+  @Input() structureForm: FormGroup;
+  @Input() isEditMode: boolean;
+  @Output() validateForm = new EventEmitter<any>();
+
+  ngOnInit(): void {
+    this.validateForm.emit();
+  }
+
+  public setValidationsForm(): void {
+    this.validateForm.emit();
+  }
+}

src/app/form/form-view/structure-form/structure-contact/structure-contact.component.html

+<form [formGroup]="structureForm" *ngIf="structureForm" (keyup.enter)="isPageValid && !isEditMode ? nextPage() : null">
+  <div class="title">
+    <h3>Comment joindre votre structure&nbsp;?</h3>
+  </div>
+  <p
+    class="missing-information"
+    *ngIf="isEditMode && (!structureForm.get('contactPhone').valid || !structureForm.get('contactMail').valid)"
+  >
+    <app-svg-icon [iconClass]="'icon-26'" [type]="'form'" [icon]="'notValidate'" class="validationIcon"></app-svg-icon>
+    <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>
+    <div fxLayout="row" fxLayoutGap="13px">
+      <input
+        type="text"
+        formControlName="contactPhone"
+        class="form-input"
+        (input)="utils.modifyPhoneInput(structureForm, 'contactPhone', $event.target.value); setValidationsForm()"
+      />
+      <app-svg-icon
+        *ngIf="structureForm.get('contactPhone').valid"
+        [iconClass]="'icon-26'"
+        [type]="'form'"
+        [icon]="'validate'"
+      ></app-svg-icon>
+      <app-svg-icon
+        *ngIf="structureForm.get('contactPhone').invalid && structureForm.get('contactPhone').value"
+        [iconClass]="'icon-26'"
+        [type]="'form'"
+        [icon]="'notValidate'"
+      ></app-svg-icon>
+    </div>
+  </div>
+  <div class="form-group" fxLayout="column">
+    <label for="structureName">Email de la structure</label>
+    <div fxLayout="row" fxLayoutGap="13px">
+      <input type="text" (input)="setValidationsForm()" formControlName="contactMail" class="form-input" />
+      <app-svg-icon
+        *ngIf="structureForm.get('contactMail').valid"
+        [iconClass]="'icon-26'"
+        [type]="'form'"
+        [icon]="'validate'"
+      ></app-svg-icon>
+      <app-svg-icon
+        *ngIf="structureForm.get('contactMail').invalid && structureForm.get('contactMail').value"
+        [iconClass]="'icon-26'"
+        [type]="'form'"
+        [icon]="'notValidate'"
+      ></app-svg-icon>
+    </div>
+  </div>
+</form>

src/app/shared/components/signup-modal/signup-modal.component.spec.ts → src/app/form/form-view/structure-form/structure-contact/structure-contact.component.spec.ts

-import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ReactiveFormsModule } from '@angular/forms';
-import { RouterTestingModule } from '@angular/router/testing';
 
-import { SignUpModalComponent } from './signup-modal.component';
+import { StructureContactComponent } from './structure-contact.component';
 
-describe('SignUpModalComponent', () => {
-  let component: SignUpModalComponent;
-  let fixture: ComponentFixture<SignUpModalComponent>;
+describe('StructureContactComponent', () => {
+  let component: StructureContactComponent;
+  let fixture: ComponentFixture<StructureContactComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [SignUpModalComponent],
-      imports: [ReactiveFormsModule, RouterTestingModule, HttpClientTestingModule],
-    }).compileComponents();
+      declarations: [ StructureContactComponent ]
+    })
+    .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(SignUpModalComponent);
+    fixture = TestBed.createComponent(StructureContactComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/form/form-view/structure-form/structure-contact/structure-contact.component.ts

+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { Utils } from '../../../../utils/utils';
+
+@Component({
+  selector: 'app-structure-contact',
+  templateUrl: './structure-contact.component.html',
+})
+export class StructureContactComponent implements OnInit {
+  @Input() structureForm: FormGroup;
+  @Output() validateForm = new EventEmitter<any>();
+
+  constructor(public utils: Utils) {}
+
+  ngOnInit(): void {
+    this.validateForm.emit();
+  }
+
+  public setValidationsForm(): void {
+    this.validateForm.emit();
+  }
+}

src/app/form/form-view/structure-form/structure-covid-info/structure-covid-info.component.html

+<form [formGroup]="structureForm" (keyup.enter)="(!isEditMode ? '' : null)">
+  <div class="title">
+    <h3>Y a-t-il des informations spécifiques à la période COVID&nbsp;?</h3>
+    <p class="notRequired">Facultatif</p>
+  </div>
+  <div class="textareaBlock" fxLayout="column">
+    <textarea
+      rows="8"
+      placeholder="Exemple : nous ne sommes joignables que par visio"
+      maxlength="500"
+      formControlName="lockdownActivity"
+    ></textarea>
+    <p>
+      {{
+        getStructureControl('lockdownActivity').value ? getStructureControl('lockdownActivity').value.length : 0
+      }}&nbsp;/&nbsp;500
+    </p>
+  </div>
+</form>

src/app/form/form-view/structure-form/structure-covid-info/structure-covid-info.component.scss

+.textareaBlock {
+  p {
+    text-align: right;
+  }
+}