src/app/form/form-view/global-components/navigation-buttons/navigation-buttons.component.ts

-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { Router } from '@angular/router';
-import { ButtonType } from '../../../../shared/components/button/buttonType.enum';
-
-@Component({
-  selector: 'app-navigation-buttons',
-  templateUrl: './navigation-buttons.component.html',
-  styleUrls: ['./navigation-buttons.component.scss'],
-})
-export class NavigationButtonsComponent {
-  @Input() buttonStyle = 0;
-  @Output() goNext = new EventEmitter<any>();
-  public buttonTypeEnum = ButtonType;
-  constructor(private router: Router) {}
-
-  public goToHome(): void {
-    this.router.navigateByUrl('news');
-  }
-
-  public goToNextPage(): void {
-    this.goNext.emit();
-  }
-}

src/app/form/form-view/global-components/progress-bar/progress-bar.component.html

@@ -15,3 +15,4 @@
     ></progress>
   </div>
 </div>
+<div class="topSpacing" *ngIf="isEditMode"></div>

src/app/form/form-view/global-components/progress-bar/progress-bar.component.scss

 @import '../../../../../assets/scss/layout';
 @import '../../../../../assets/scss/color';
 @import '../../../../../assets/scss/typography';
+@import '../../../../../assets/scss/breakpoint';
 
 .progressBar {
   height: #{$progressBar-height};
-  max-width: 1000px;
+  max-width: 980px;
   margin: 16px auto;
+
+  @media #{$tablet} {
+    margin: 0px 4px;
+  }
   p {
     @include lato-bold-14;
     color: $red;
@@ -24,6 +29,10 @@
       background-color: $primary-color;
       border-radius: 12px;
     }
+    &::-moz-progress-bar {
+      background-color: $primary-color;
+      border-radius: 12px;
+    }
   }
   label {
     @include lato-bold-14;
@@ -31,3 +40,6 @@
     min-width: 26px;
   }
 }
+.topSpacing {
+  margin-top: 1rem;
+}

src/app/form/form-view/personal-offer-form/personal-offer-accompaniment/personal-offer-accompaniment.component.html

@@ -2,7 +2,7 @@
   <div class="title">
     <p class="overtitle">{{ structureName }}</p>
     <h3>Quelles aides au numérique proposez-vous&nbsp;?</h3>
-    <p class="notRequired">Facultatif</p>
+    <p>Facultatif</p>
   </div>
 
   <div fxLayout="column" fxLayoutGap="32px">

src/app/form/form-view/personal-offer-form/personal-offer-training-type/personal-offer-training-type.component.html

@@ -2,7 +2,7 @@
   <div class="title">
     <p class="overtitle">{{ structureName }}</p>
     <h3>Quelles formations au numérique proposez-vous&nbsp;?</h3>
-    <p class="notRequired">Facultatif</p>
+    <p>Facultatif</p>
   </div>
   <app-training-type-picker
     [baseSkills]="personalOfferForm.get('baseSkills').value"

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

-<form [formGroup]="structureForm" *ngIf="structureForm" (keyup.enter)="isPageValid && !isEditMode ? nextPage() : null">
-  <div class="title">
-    <h3>Quelles sont les modalités d'accueil de la structure&nbsp;?</h3>
-    <p>Plusieurs choix possibles</p>
+<form [formGroup]="structureForm" *ngIf="structureForm">
+  <div class="title" [ngClass]="{ editTitle: isEditMode }">
+    <app-svg-icon
+      (click)="goBack()"
+      *ngIf="isEditMode"
+      [iconClass]="'backArrow'"
+      [type]="'ico'"
+      [icon]="'arrowBack'"
+    ></app-svg-icon>
+    <div class="titleContent">
+      <h3>Quelles sont les modalités d'accueil de la structure&nbsp;?</h3>
+      <p>Plusieurs choix possibles</p>
+    </div>
   </div>
   <p class="missing-information" *ngIf="isEditMode && !structureForm.get('accessModality').valid">
     <app-svg-icon [iconClass]="'icon-26'" [type]="'form'" [icon]="'notValidate'" class="validationIcon"></app-svg-icon>

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

@@ -9,6 +9,7 @@ import { Category } from '../../../../structure-list/models/category.model';
 export class StructureAccessModalityComponent implements OnInit {
   @Input() structureForm: FormGroup;
   @Input() accessModality: Category;
+  @Input() isEditMode: boolean;
   @Output() checkChange = new EventEmitter<any>();
   @Output() validateForm = new EventEmitter<any>();
 
@@ -30,4 +31,7 @@ export class StructureAccessModalityComponent implements OnInit {
     }
     return false;
   }
+  public goBack(): void {
+    history.back();
+  }
 }

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

@@ -7,6 +7,7 @@ import { FormGroup } from '@angular/forms';
 })
 export class StructureAccompanimentChoiceComponent implements OnInit {
   @Input() structureForm: FormGroup;
+  @Input() isEditMode: boolean;
   @Output() radioChange = new EventEmitter<any>();
   @Output() validateForm = new EventEmitter<any>();
 
@@ -17,4 +18,7 @@ export class StructureAccompanimentChoiceComponent implements OnInit {
   public onRadioChange(name: string, value: boolean): void {
     this.radioChange.emit({ name, value });
   }
+  public goBack(): void {
+    history.back();
+  }
 }

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

@@ -7,6 +7,7 @@ import { FormGroup } from '@angular/forms';
 })
 export class StructureChoiceCompletionComponent {
   @Input() structureForm: FormGroup;
+  @Input() isEditMode: boolean;
   @Output() radioChange = new EventEmitter<any>();
   @Output() validateForm = new EventEmitter<any>();
 
@@ -17,4 +18,7 @@ export class StructureChoiceCompletionComponent {
   public onRadioChange(name: string, value: boolean): void {
     this.radioChange.emit({ name, value });
   }
+  public goBack(): void {
+    history.back();
+  }
 }

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

@@ -12,13 +12,22 @@
     </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 class="title" [ngClass]="{ editTitle: isEditMode }">
+      <app-svg-icon
+        (click)="goBack()"
+        *ngIf="isEditMode"
+        [iconClass]="'backArrow'"
+        [type]="'ico'"
+        [icon]="'arrowBack'"
+      ></app-svg-icon>
+      <div class="titleContent">
+        <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 *ngIf="!isEditMode">Facultatif</p>
+      </div>
     </div>
     <app-checkbox-form
       *ngIf="!isEditMode"
@@ -28,10 +37,9 @@
     <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)"
+        horizontal="false"
+        [selectedOption]="structureForm.get('dataShareConsentDate').value ? true : false"
+        (selectedEvent)="onRadioChange($event)"
       >
       </app-radio-form>
     </div>

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

@@ -9,6 +9,7 @@ import { FormGroup } from '@angular/forms';
 export class StructureConsentComponent {
   @Input() structureForm: FormGroup;
   @Input() isEditMode: boolean;
+  @Output() radioChange = new EventEmitter<any>();
   @Output() onAcceptDataBeSaved = new EventEmitter<any>();
   @Output() onAcceptOpenData = new EventEmitter<any>();
 
@@ -19,4 +20,11 @@ export class StructureConsentComponent {
   public acceptOpenData(event: boolean): void {
     this.onAcceptOpenData.emit(event);
   }
+
+  public onRadioChange(value: boolean): void {
+    this.onAcceptOpenData.emit(value);
+  }
+  public goBack(): void {
+    history.back();
+  }
 }

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 class="title" [ngClass]="{ editTitle: isEditMode }">
+    <app-svg-icon
+      (click)="goBack()"
+      *ngIf="isEditMode"
+      [iconClass]="'backArrow'"
+      [type]="'ico'"
+      [icon]="'arrowBack'"
+    ></app-svg-icon>
+    <div class="titleContent">
+      <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>
-
   <div class="form-group" fxLayout="column">
     <label for="contactPersonFirstname">Prénom</label>
     <div fxLayout="row" fxLayoutGap="13px">

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

@@ -17,4 +17,7 @@ export class StructureContactCompletionComponent implements OnInit {
   public setValidationsForm(): void {
     this.validateForm.emit();
   }
+  public goBack(): void {
+    history.back();
+  }
 }

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 class="title" [ngClass]="{ editTitle: isEditMode }">
+    <app-svg-icon
+      (click)="goBack()"
+      *ngIf="isEditMode"
+      [iconClass]="'backArrow'"
+      [type]="'ico'"
+      [icon]="'arrowBack'"
+    ></app-svg-icon>
+    <div class="titleContent">
+      <h3>Comment joindre votre structure&nbsp;?</h3>
+    </div>
   </div>
   <p
     class="missing-information"
@@ -43,7 +52,7 @@
         [icon]="'validate'"
       ></app-svg-icon>
       <app-svg-icon
-        *ngIf="structureForm.get('contactMail').invalid && structureForm.get('contactMail').value"
+        *ngIf="structureForm.get('contactMail').invalid"
         [iconClass]="'icon-26'"
         [type]="'form'"
         [icon]="'notValidate'"

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

@@ -8,6 +8,7 @@ import { Utils } from '../../../../utils/utils';
 })
 export class StructureContactComponent implements OnInit {
   @Input() structureForm: FormGroup;
+  @Input() isEditMode: boolean;
   @Output() validateForm = new EventEmitter<any>();
 
   constructor(public utils: Utils) {}
@@ -19,4 +20,7 @@ export class StructureContactComponent implements OnInit {
   public setValidationsForm(): void {
     this.validateForm.emit();
   }
+  public goBack(): void {
+    history.back();
+  }
 }

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 class="title" [ngClass]="{ editTitle: isEditMode }">
+    <app-svg-icon
+      (click)="goBack()"
+      *ngIf="isEditMode"
+      [iconClass]="'backArrow'"
+      [type]="'ico'"
+      [icon]="'arrowBack'"
+    ></app-svg-icon>
+    <div class="titleContent">
+      <h3>Y a-t-il des informations spécifiques à la période COVID&nbsp;?</h3>
+      <p>Facultatif</p>
+    </div>
   </div>
   <div class="textareaBlock" fxLayout="column">
     <textarea

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

@@ -13,4 +13,7 @@ export class StructureCovidInfoComponent {
   public getStructureControl(nameControl: string): AbstractControl {
     return this.structureForm.get(nameControl);
   }
+  public goBack(): void {
+    history.back();
+  }
 }

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

 <form [formGroup]="structureForm" (keyup.enter)="(!isEditMode ? '' : null)">
-  <div class="title">
-    <h3>Pouvez-vous présenter la structure en quelques mots&nbsp;?</h3>
-    <p class="notRequired">Facultatif</p>
+  <div class="title" [ngClass]="{ editTitle: isEditMode }">
+    <app-svg-icon
+      (click)="goBack()"
+      *ngIf="isEditMode"
+      [iconClass]="'backArrow'"
+      [type]="'ico'"
+      [icon]="'arrowBack'"
+    ></app-svg-icon>
+    <div class="titleContent">
+      <h3>Pouvez-vous présenter la structure en quelques mots&nbsp;?</h3>
+      <p>Facultatif</p>
+    </div>
   </div>
   <div class="textareaBlock introduceStructure" fxLayout="column">
     <textarea

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

@@ -18,4 +18,7 @@ export class StructureDescriptionComponent implements OnInit {
   public getStructureControl(nameControl: string): AbstractControl {
     return this.structureForm.get(nameControl);
   }
+  public goBack(): void {
+    history.back();
+  }
 }