src/app/form/form-view/account-form/account-credentials/account-credentials.component.spec.ts

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

src/app/form/form-view/account-form/account-credentials/account-credentials.component.ts

+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { User } from '../../../../models/user.model';
+import { CustomRegExp } from '../../../../utils/CustomRegExp';
+
+@Component({
+  selector: 'app-account-credentials',
+  templateUrl: './account-credentials.component.html',
+  styleUrls: ['./account-credentials.component.scss'],
+})
+export class AccountCredentialsComponent {
+  @Input() accountForm: FormGroup;
+  @Input() isAccountMode: boolean;
+  @Input() profile: User;
+  @Output() validateForm = new EventEmitter<any>();
+  @Output() userExists = new EventEmitter<any>();
+
+  public isShowConfirmPassword = false;
+  public isShowPassword = false;
+
+  public showPassword(): void {
+    this.isShowPassword = !this.isShowPassword;
+  }
+  public showConfirmPassword(): void {
+    this.isShowConfirmPassword = !this.isShowConfirmPassword;
+  }
+
+  public checkIfPasswordHasSpecialChar(password: string): boolean {
+    if (password.match(CustomRegExp.SPECHAR)) return true;
+    return false;
+  }
+
+  public checkIfPasswordHasDigit(password: string): boolean {
+    if (password.match(CustomRegExp.DIGIT)) return true;
+    return false;
+  }
+
+  public checkIfPasswordHasUpperCase(password: string): boolean {
+    if (password.match(CustomRegExp.UPPERCASE)) return true;
+    return false;
+  }
+
+  public checkIfPasswordHasLowerCase(password: string): boolean {
+    if (password.match(CustomRegExp.LOWERCASE)) return true;
+    return false;
+  }
+  public setValidationsForm() {
+    this.validateForm.emit();
+  }
+  public verifyUserExist(value: string) {
+    this.userExists.emit(value);
+  }
+}

src/app/form/form-view/account-form/account-form.component.html

+<div class="no-max-width">
+  <ng-container *ngIf="currentStep === accountFormStepEnum.accountInfo">
+    <app-account-info
+      [accountForm]="accountForm"
+      [isClaimMode]="isClaimMode"
+      [profile]="profile"
+      (validateForm)="setValidationsForm($event)"
+    ></app-account-info>
+  </ng-container>
+  <ng-container *ngIf="currentStep === accountFormStepEnum.accountCredentials">
+    <app-account-credentials
+      [accountForm]="accountForm"
+      [profile]="profile"
+      (validateForm)="setValidationsForm($event)"
+      (userExists)="verifyUserExist($event)"
+    ></app-account-credentials>
+  </ng-container>
+  <ng-container *ngIf="currentStep === accountFormStepEnum.accountNewsletter">
+    <app-account-newsletter
+      [accountForm]="accountForm"
+      [profile]="profile"
+      (acceptNewsletter)="acceptReceiveNewsletter($event)"
+    ></app-account-newsletter>
+  </ng-container>
+  <ng-container *ngIf="currentStep === accountFormStepEnum.confirmEmailSentInfo">
+    <app-information-step
+      [step]="accountFormStepEnum.confirmEmailSentInfo"
+      [formType]="formType.account"
+    ></app-information-step>
+  </ng-container>
+</div>

src/app/form/form-view/account-form/account-form.component.spec.ts

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

src/app/form/form-view/account-form/account-form.component.ts

+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+
+import { User } from '../../../models/user.model';
+import { ProfileService } from '../../../profile/services/profile.service';
+import { formType } from '../formType.enum';
+import { accountFormStep } from './accountFormStep.enum';
+
+@Component({
+  selector: 'app-account-form',
+  templateUrl: './account-form.component.html',
+})
+export class AccountFormComponent implements OnChanges {
+  @Input() nbSteps: number;
+  @Input() currentStep: accountFormStep;
+  @Input() accountForm: FormGroup;
+  public isClaimMode = false;
+  public isAccountMode = false;
+  public pagesValidation = [];
+  public userAcceptSavedDate = false;
+  public isPageValid: boolean;
+  public profile: User;
+  public accountFormStepEnum = accountFormStep;
+  public formType = formType;
+  @Output() pageValid = new EventEmitter<any>();
+  @Output() acceptNewsletter = new EventEmitter<any>();
+
+  constructor(private profileService: ProfileService) {}
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.currentStep) {
+      if (this.currentStep === accountFormStep.accountNewsletter) {
+        this.pageValid.emit();
+      }
+    }
+  }
+  public setValidationsForm(): void {
+    this.pagesValidation[accountFormStep.accountInfo] = {
+      valid:
+        this.accountForm.get('surname').valid &&
+        this.accountForm.get('name').valid &&
+        this.accountForm.get('phone').valid,
+    };
+    this.pagesValidation[accountFormStep.accountCredentials] = {
+      valid:
+        this.accountForm.get('email').valid &&
+        this.accountForm.get('password').valid &&
+        this.accountForm.get('confirmPassword').valid,
+    };
+
+    this.updatePageValid();
+  }
+
+  public verifyUserExist(inputEmail): void {
+    if (this.accountForm.get('email').valid) {
+      this.profileService.isEmailAlreadyUsed(inputEmail).subscribe((isExist) => {
+        if (isExist) {
+          this.accountForm.get('email').setErrors({ alreadyExist: true });
+          this.setValidationsForm();
+        }
+      });
+    }
+  }
+
+  /**
+   * Update valid page or return page validity of the given index
+   * @param {number} [index] - Page index
+   */
+  private updatePageValid(index?: number): boolean {
+    if (index) {
+      return this.pagesValidation[index].valid;
+    }
+    this.isPageValid = this.pagesValidation[this.currentStep].valid;
+    if (this.isPageValid) this.pageValid.emit();
+    return this.isPageValid;
+  }
+  public acceptReceiveNewsletter(accept: boolean): void {
+    this.acceptNewsletter.emit(accept);
+  }
+}

src/app/form/form-view/account-form/account-info/account-info.component.html

+<form [formGroup]="accountForm" *ngIf="accountForm && !profile">
+  <div class="title">
+    <h3>Qui êtes-vous&nbsp;?</h3>
+    <p>Vous pourrez choisir de rendre visibles ces informations sur votre profil public</p>
+  </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-input" />
+      <app-svg-icon
+        *ngIf="accountForm.get('name').valid"
+        [iconClass]="'icon-26'"
+        [type]="'form'"
+        [icon]="'validate'"
+      ></app-svg-icon>
+      <app-svg-icon
+        *ngIf="accountForm.get('name').invalid && accountForm.get('name').value"
+        [iconClass]="'icon-26'"
+        [type]="'form'"
+        [icon]="'notValidate'"
+      ></app-svg-icon>
+    </div>
+  </div>
+  <div class="form-group" fxLayout="column">
+    <label for="surname">Nom</label>
+    <div fxLayout="row" fxLayoutGap="13px">
+      <input type="text" (input)="setValidationsForm()" formControlName="surname" class="form-input" />
+      <app-svg-icon
+        *ngIf="accountForm.get('surname').valid"
+        [iconClass]="'icon-26'"
+        [type]="'form'"
+        [icon]="'validate'"
+      ></app-svg-icon>
+      <app-svg-icon
+        *ngIf="accountForm.get('surname').invalid && accountForm.get('surname').value"
+        [iconClass]="'icon-26'"
+        [type]="'form'"
+        [icon]="'notValidate'"
+      ></app-svg-icon>
+    </div>
+  </div>
+  <div class="form-group" fxLayout="column">
+    <label for="phone">Téléphone</label>
+    <div fxLayout="row" fxLayoutGap="13px">
+      <input
+        type="text"
+        formControlName="phone"
+        class="form-input phone"
+        (input)="utils.modifyPhoneInput(accountForm, 'phone', $event.target.value); setValidationsForm()"
+      />
+      <app-svg-icon
+        *ngIf="accountForm.get('phone').valid"
+        [iconClass]="'icon-26'"
+        [type]="'form'"
+        [icon]="'validate'"
+      ></app-svg-icon>
+      <app-svg-icon
+        *ngIf="accountForm.get('phone').invalid && accountForm.get('phone').value"
+        [iconClass]="'icon-26'"
+        [type]="'form'"
+        [icon]="'notValidate'"
+      ></app-svg-icon>
+    </div>
+  </div>
+</form>

src/app/form/form-view/account-form/account-info/account-info.component.spec.ts

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

src/app/form/form-view/account-form/account-info/account-info.component.ts

+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { User } from '../../../../models/user.model';
+import { Utils } from '../../../../utils/utils';
+
+@Component({
+  selector: 'app-account-info',
+  templateUrl: './account-info.component.html',
+})
+export class AccountInfoComponent {
+  @Input() accountForm: FormGroup;
+  @Input() isClaimMode: boolean;
+  @Input() profile: User;
+
+  @Output() validateForm = new EventEmitter<any>();
+
+  constructor(public utils: Utils) {}
+
+  public setValidationsForm() {
+    this.validateForm.emit();
+  }
+}

src/app/form/form-view/account-form/account-newsletter/account-newsletter.component.html

+<form
+  [formGroup]="accountForm"
+  *ngIf="accountForm && !profile"
+  (keyup.enter)="isPageValid && !isEditMode ? nextPage() : null"
+>
+  <div class="title">
+    <h3>Souhaitez-vous vous abonner à la lettre d’information de Res'in&nbsp;?</h3>
+    <p *ngIf="!isEditMode">Facultatif</p>
+  </div>
+  <app-checkbox-form
+    [isChecked]="userAcceptNewsletter"
+    [text]="'J\'accepte'"
+    (checkEvent)="acceptReceiveNewsletter($event)"
+  >
+  </app-checkbox-form>
+</form>

src/app/form/form-view/account-form/account-newsletter/account-newsletter.component.spec.ts

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

src/app/form/form-view/account-form/account-newsletter/account-newsletter.component.ts

+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { User } from '../../../../models/user.model';
+
+@Component({
+  selector: 'app-account-newsletter',
+  templateUrl: './account-newsletter.component.html',
+})
+export class AccountNewsletterComponent {
+  @Input() accountForm: FormGroup;
+  @Input() profile: User;
+  @Output() acceptNewsletter = new EventEmitter<any>();
+  public userAcceptNewsletter: Boolean = false;
+
+  public acceptReceiveNewsletter(accepts: boolean) {
+    this.acceptNewsletter.emit(accepts);
+  }
+}

src/app/form/form-view/account-form/accountFormStep.enum.ts

+export enum accountFormStep {
+  accountInfo,
+  accountCredentials,
+  accountNewsletter,
+  confirmEmailSentInfo,
+}

src/app/form/form-view/form-view-routing.module.ts

+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { AdminGuard } from '../../guards/admin.guard';
+import { AuthGuard } from '../../guards/auth.guard';
+import { RoleGuard } from '../../guards/role.guard';
+import { StructureResolver } from '../../resolvers/structure.resolver';
+import { RouteRole } from '../../shared/enum/routeRole.enum';
+import { AccountFormComponent } from './account-form/account-form.component';
+import { FormViewComponent } from './form-view.component';
+import { PersonalOfferGuard } from './guards/personalOffer.guard';
+import { PersonalOfferFormComponent } from './personal-offer-form/personal-offer-form.component';
+import { ProfileFormComponent } from './profile-form/profile-form.component';
+import { StructureFormComponent } from './structure-form/structure-form.component';
+
+const routes: Routes = [
+  {
+    path: 'structure/:id/:step',
+    component: FormViewComponent,
+    canActivate: [RoleGuard],
+    data: { allowedRoles: [RouteRole.structureAdmin] },
+    resolve: {
+      structure: StructureResolver,
+    },
+  },
+  {
+    path: '',
+    component: FormViewComponent,
+    children: [
+      {
+        path: 'structure',
+        canActivate: [AuthGuard],
+        component: StructureFormComponent,
+      },
+      {
+        path: 'profile',
+        canActivate: [AuthGuard],
+        component: ProfileFormComponent,
+      },
+      {
+        path: 'personaloffer',
+        canActivate: [AuthGuard, PersonalOfferGuard],
+        component: PersonalOfferFormComponent,
+      },
+      {
+        path: 'account',
+        component: AccountFormComponent,
+      },
+      {
+        path: '**',
+        redirectTo: 'account',
+      },
+    ],
+  },
+];
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class FormViewRoutingModule {}

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

+<div class="formView">
+  <app-progress-bar
+    [formType]="formType[routeParam]"
+    [isEditMode]="isEditMode"
+    [currentPage]="currentPage - 1"
+    [nbSteps]="nbSteps"
+  ></app-progress-bar>
+  <div class="page">
+    <ng-container *ngIf="formType[routeParam] === formType.account">
+      <app-account-form
+        [nbSteps]="nbSteps"
+        [accountForm]="accountForm"
+        [hoursForm]="hoursForm"
+        [currentStep]="currentPage"
+        (goNext)="nextPage()"
+        (pageValid)="validatePage($event)"
+        (acceptNewsletter)="acceptReceiveNewsletter($event)"
+      ></app-account-form>
+    </ng-container>
+    <ng-container *ngIf="formType[routeParam] === formType.profile">
+      <app-profile-form
+        [nbSteps]="nbSteps"
+        [profileForm]="profileForm"
+        [currentStep]="currentPage"
+        (goNext)="nextPage()"
+        (pageValid)="validatePage($event)"
+      ></app-profile-form>
+    </ng-container>
+    <ng-container *ngIf="formType[routeParam] === formType.structure">
+      <app-structure-form
+        [nbSteps]="nbSteps"
+        [structure]="structure"
+        [structureForm]="structureForm"
+        [hoursForm]="hoursForm"
+        [currentStep]="currentPage"
+        [isEditMode]="isEditMode"
+        (goNext)="nextPage()"
+        (isNotExistingStructure)="nextPage()"
+        (pageValid)="validatePage($event)"
+        (updateHoursForm)="updateHours($event)"
+        (setEditStep)="setCurrentStep($event)"
+      ></app-structure-form>
+    </ng-container>
+    <ng-container *ngIf="formType[routeParam] === formType.personaloffer">
+      <app-personal-offer-form
+        [nbSteps]="nbSteps"
+        [personalOfferForm]="personalOfferForm"
+        [currentStep]="currentPage"
+        [structureName]="structure.structureName"
+        (setHasOtherOffer)="setHasOtherPersonalOffer($event)"
+        (pageValid)="validatePage($event)"
+      ></app-personal-offer-form>
+    </ng-container>
+  </div>
+  <app-footer-form
+    *ngIf="displayFooterForm()"
+    [currentStep]="currentPage"
+    [currentForm]="currentFormType"
+    [form]="currentForm"
+    [btnName]="['Précédent', 'Suivant']"
+    [isValid]="isPageValid"
+    [acceptNewsletter]="userAcceptNewsletter"
+    [hasOtherPersonalOffer]="hasOtherPersonalOffer"
+    [isEditMode]="isEditMode"
+    (goNext)="nextPage()"
+    (goPrev)="prevPage()"
+    (endForm)="endForm($event)"
+    (changeCurrentStep)="setCurrentStep($event)"
+    (saveEditedStructure)="saveEditedStructure()"
+  ></app-footer-form>
+</div>

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

+@import '../../../assets/scss/color';
+@import '../../../assets/scss/breakpoint';
+@import '../../../assets/scss/layout';
+@import '../../../assets//scss/typography';
+
+.formView {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+::ng-deep.page {
+  box-sizing: border-box;
+  max-width: 980px;
+  width: 100%;
+  height: 100%;
+  margin: auto;
+  overflow-y: auto;
+  color: $grey-1;
+  background: $white;
+  border-radius: 8px;
+  border: 1px solid $grey-6;
+  padding: 32px 48px;
+
+  @media #{$tablet} {
+    margin: 0px 4px;
+    width: auto;
+  }
+  * {
+    max-width: 700px;
+  }
+  .no-max-width {
+    max-width: none;
+  }
+  .missing-information {
+    display: flex;
+    color: $orange-warning;
+    align-items: center;
+    span {
+      margin-left: 1rem;
+    }
+  }
+}
+
+::ng-deep.title {
+  margin-bottom: 16px;
+  .overtitle {
+    @include lato-regular-18;
+    color: $grey-3;
+    margin-bottom: 3px;
+  }
+
+  h3 {
+    @include lato-bold-24;
+    margin: 0;
+    @media #{$tablet} {
+      @include lato-bold-22;
+    }
+  }
+  p {
+    @include lato-regular-18;
+    color: $grey-3;
+    font-style: italic;
+    margin-top: 4px;
+  }
+  .backArrow {
+    cursor: pointer;
+  }
+  &.editTitle {
+    display: flex;
+    align-items: center;
+
+    p {
+      margin-bottom: 0;
+    }
+  }
+}
+
+::ng-deep.textareaBlock {
+  @media #{$tablet} {
+    max-width: 90%;
+  }
+  p {
+    text-align: right;
+    @include lato-regular-14;
+    color: $grey-3;
+    font-style: italic;
+  }
+}
+
+@media #{$tablet} {
+  .page {
+    height: calc(
+      100vh - #{$header-height-phone} - #{$footer-height-phone} - 87px - 1px
+    ); // -1px because of header border
+  }
+}

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

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

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

+import { Component, OnInit } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
+import { forkJoin, of } from 'rxjs';
+import { catchError, map } from 'rxjs/operators';
+import { PersonalOffer } from '../../models/personalOffer.model';
+import { Structure } from '../../models/structure.model';
+import { StructureWithOwners } from '../../models/structureWithOwners.model';
+import { User } from '../../models/user.model';
+import { ProfileService } from '../../profile/services/profile.service';
+import { NotificationService } from '../../services/notification.service';
+import { PersonalOfferService } from '../../services/personal-offer.service';
+import { StructureService } from '../../services/structure.service';
+import { MustMatch } from '../../shared/validator/form';
+import { CustomRegExp } from '../../utils/CustomRegExp';
+import { formUtils } from '../../utils/formUtils';
+import { accountFormStep } from './account-form/accountFormStep.enum';
+import { formType } from './formType.enum';
+import { personalOfferFormStep } from './personal-offer-form/personalOfferFormStep.enum';
+import { profileFormStep } from './profile-form/profileFormStep.enum';
+import { structureFormStep } from './structure-form/structureFormStep.enum';
+
+@Component({
+  selector: 'app-form-view',
+  templateUrl: './form-view.component.html',
+  styleUrls: ['./form-view.component.scss'],
+})
+export class FormViewComponent implements OnInit {
+  public routeParam: string;
+  public formType = formType;
+  public currentPage: accountFormStep | profileFormStep | structureFormStep | personalOfferFormStep;
+  public currentFormType: formType;
+  public currentForm: FormGroup;
+  public formUtils = new formUtils();
+  // Account Form
+  public accountForm: FormGroup;
+  public userAcceptNewsletter: boolean;
+  // Profile Form
+  public profileForm: FormGroup;
+  public isPersonalOfferProfile: boolean;
+
+  // Structure from
+  public structureForm: FormGroup;
+  public editForm: FormGroup;
+  public structure: Structure;
+  public isEditMode: boolean = false;
+  public structureFormStep = structureFormStep;
+
+  // Personal Offers Form
+  public personalOfferForm: FormGroup;
+  public hasOtherPersonalOffer: boolean = false;
+
+  // Page and progress var
+  public pagesValidation = [];
+  public nbSteps: number;
+
+  // Condition form
+  public userAcceptSavedDate = false;
+
+  // Collapse var
+  public showWebsite: boolean;
+  public showSocialNetwork: boolean;
+
+  public profile: User;
+  public isAccountMode: boolean = false;
+  public isClaimMode: boolean = false;
+  public isJoinMode: boolean = false;
+  public claimStructure: boolean = false;
+  public linkedStructureId;
+  public structureWithOwners: StructureWithOwners;
+  public isPageValid: boolean = false;
+  public hoursForm: FormGroup;
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private profileService: ProfileService,
+    private structureService: StructureService,
+    private personalOfferService: PersonalOfferService,
+    private notificationService: NotificationService
+  ) {}
+
+  async ngOnInit(): Promise<void> {
+    this.routeParam = this.router.routerState.snapshot.url.split('/')[2];
+
+    this.initPage();
+    this.profileService.getProfile().then((user: User) => {
+      this.profile = user;
+    });
+    // Check if it's a new structure or edit structure
+    // this.isLoading = false;
+    if (history.state.newUser) {
+      this.isClaimMode = true;
+      // Handle join structure, the case is very similar to claim
+      if (history.state.isJoin) {
+        this.isJoinMode = true;
+      }
+      this.createAccountForm();
+      this.claimStructure = history.state.newUser;
+    }
+    // Handle account creation when pre-register
+    this.route.data.subscribe((data) => {
+      if (data.user) {
+        this.isAccountMode = true;
+        this.createAccountForm(data.user.email);
+        this.linkedStructureId = data.user.pendingStructuresLink;
+        this.currentPage = accountFormStep.accountInfo;
+      }
+      if (data.structure) {
+        this.isEditMode = true;
+        this.structure = data.structure;
+        this.editForm = this.formUtils.createStructureForm(data.structure, this.isEditMode);
+        this.structureForm = this.editForm;
+        this.hoursForm = this.formUtils.createHoursForm(data.structure);
+      }
+    });
+
+    this.router.events.subscribe((evt) => {
+      if (!(evt instanceof NavigationEnd)) {
+        return;
+      }
+      this.routeParam = this.router.routerState.snapshot.url.split('/')[2];
+
+      this.initPage();
+    });
+  }
+
+  private initPage(): void {
+    const profileFormSteps: number = Object.keys(profileFormStep).length / 2;
+    const personnalOfferFormSteps: number = Object.keys(personalOfferFormStep).length / 2 - 1;
+    const structureFormSteps: number = Object.keys(structureFormStep).length / 2;
+    const totalFormSteps: number = profileFormSteps + personnalOfferFormSteps + structureFormSteps;
+    if (formType[this.routeParam] === formType.account) {
+      this.nbSteps = 3;
+      this.currentPage = accountFormStep.accountInfo;
+      this.currentFormType = formType.account;
+      this.createAccountForm();
+      this.currentForm = this.accountForm;
+    }
+    if (formType[this.routeParam] === formType.profile) {
+      this.nbSteps = totalFormSteps;
+      this.currentPage = profileFormStep.profileBeginningInfo;
+      this.currentFormType = formType.profile;
+      this.createProfileForm();
+      this.currentForm = this.profileForm;
+    }
+    if (formType[this.routeParam] === formType.structure) {
+      if (!this.isEditMode) {
+        const PAGE_WITHOUT_COUNT_INCREMENT = 2;
+        this.nbSteps = structureFormSteps - PAGE_WITHOUT_COUNT_INCREMENT;
+        this.currentPage = structureFormStep.structureChoice;
+        this.currentFormType = formType.structure;
+        this.structure = new Structure();
+        this.structureForm = this.formUtils.createStructureForm(this.structure);
+        this.currentForm = this.structureForm;
+      }
+      // Init hours form
+      this.hoursForm = this.formUtils.createHoursForm(this.structure);
+    }
+    if (formType[this.routeParam] === formType.personaloffer) {
+      this.nbSteps = totalFormSteps;
+      this.currentPage = personalOfferFormStep.personalOfferAccompaniment;
+      this.currentFormType = formType.personaloffer;
+      const newPersonalOffer: PersonalOffer = new PersonalOffer();
+      this.createPersonalOfferForm(newPersonalOffer);
+      this.currentForm = this.personalOfferForm;
+    }
+  }
+
+  public updateHours(form: FormGroup): void {
+    this.hoursForm = form;
+  }
+
+  private createAccountForm(email?: string): void {
+    this.accountForm = new FormGroup(
+      {
+        email: new FormControl(email ? email : '', [Validators.required, Validators.pattern(CustomRegExp.EMAIL)]),
+        name: new FormControl('', [Validators.required, Validators.pattern(CustomRegExp.TEXT_WITHOUT_NUMBER)]),
+        surname: new FormControl('', [Validators.required, Validators.pattern(CustomRegExp.TEXT_WITHOUT_NUMBER)]),
+        phone: new FormControl('', [Validators.required, Validators.pattern(CustomRegExp.PHONE)]),
+        password: new FormControl('', [
+          Validators.required,
+          Validators.pattern(CustomRegExp.PASSWORD), //NOSONAR
+        ]),
+        confirmPassword: new FormControl(''),
+      },
+      [MustMatch('password', 'confirmPassword')]
+    );
+  }
+
+  private createProfileForm(): void {
+    this.profileForm = new FormGroup({
+      employer: new FormGroup({
+        name: new FormControl('', [Validators.required]),
+        validated: new FormControl(false, [Validators.required]),
+      }),
+      job: new FormGroup({
+        name: new FormControl('', [Validators.required]),
+        validated: new FormControl(true, [Validators.required]),
+        hasPersonalOffer: new FormControl(true, [Validators.required]),
+      }),
+      structure: new FormControl('', [Validators.required]),
+    });
+  }
+
+  public acceptReceiveNewsletter(isAccepted: boolean): void {
+    this.userAcceptNewsletter = isAccepted;
+  }
+
+  private createPersonalOfferForm(personalOffer: PersonalOffer): void {
+    this.personalOfferForm = new FormGroup({
+      publicsAccompaniment: new FormControl(personalOffer.publicsAccompaniment),
+      proceduresAccompaniment: new FormControl(personalOffer.proceduresAccompaniment),
+      baseSkills: new FormControl(personalOffer.baseSkills),
+      accessRight: new FormControl(personalOffer.accessRight),
+      digitalCultureSecurity: new FormControl(personalOffer.digitalCultureSecurity),
+      socialAndProfessional: new FormControl(personalOffer.socialAndProfessional),
+      parentingHelp: new FormControl(personalOffer.parentingHelp),
+    });
+  }
+
+  public validatePage(value: boolean = true): void {
+    this.isPageValid = value;
+  }
+
+  public nextPage(): void {
+    this.isPageValid = false;
+    if (this.currentPage < this.nbSteps) {
+      this.currentPage++;
+    }
+  }
+  public prevPage(): void {
+    if (this.currentPage > 0) {
+      this.currentPage--;
+    }
+  }
+  public displayFooterForm(): boolean {
+    if (this.currentPage === profileFormStep.profileBeginningInfo && formType[this.routeParam] === formType.profile)
+      return false;
+    return true;
+  }
+
+  public setHasOtherPersonalOffer(value: boolean): void {
+    this.hasOtherPersonalOffer = value;
+  }
+
+  public linkStructureToUser(): void {
+    this.structure._id = this.structureForm.value._id;
+    this.structure.structureName = this.structureForm.value.structureName;
+
+    this.structureService.isClaimed(this.structure._id, this.profile).subscribe((isClaimed) => {
+      this.structure.isClaimed = isClaimed;
+      if (isClaimed) {
+        this.structureService.joinStructure(this.structureForm.value._id, this.profile.email).subscribe(() => {
+          this.currentPage = structureFormStep.mailSentInfo;
+        });
+      } else {
+        this.structureService.claimStructureWithAccount(this.structure._id, this.profile.email).subscribe(() => {
+          this.currentPage = structureFormStep.mailSentInfo;
+        });
+      }
+    });
+  }
+
+  public async endForm(type: {
+    formType: formType;
+    formStep?: accountFormStep | profileFormStep | structureFormStep | personalOfferFormStep;
+  }): Promise<void> {
+    switch (type.formType) {
+      case formType.account:
+        break;
+      case formType.profile:
+        this.saveProfileForm();
+        break;
+      case formType.structure:
+        if (type.formStep === structureFormStep.mailSentInfo) {
+          const user = await this.profileService.getProfile();
+          if (user.job && user.job.hasPersonalOffer) {
+            this.router.navigateByUrl('form/personaloffer');
+          } else {
+            this.router.navigateByUrl('/');
+          }
+        }
+        if (type.formStep === structureFormStep.structureChoice) {
+          // If structure already exist, join it.
+          // On first strike the structure._id is not set and is a key to differentiate with other case
+          if (this.structureForm.value._id && !this.structure._id) {
+            this.linkStructureToUser();
+          }
+        }
+        if (type.formStep === structureFormStep.structureCreationFinishedInfo) {
+          this.saveStructureForm();
+        }
+        if (type.formStep === structureFormStep.noStructure) {
+          this.router.navigateByUrl('/profile');
+        }
+        if (type.formStep === structureFormStep.StructureInfoUnknown) {
+          //Creation de coquille vide ??
+          this.router.navigateByUrl('/profile');
+        }
+        break;
+      case formType.personaloffer:
+        this.savePersonalOfferForm();
+        break;
+    }
+  }
+
+  public saveProfileForm(): void {
+    forkJoin({
+      employer: this.profileService.createEmployer(this.profileForm.get('employer').value).pipe(
+        map((res) => res),
+        catchError((e) => of(this.profileForm.get('employer').value))
+      ),
+      job: this.profileService.createJob(this.profileForm.get('job').value).pipe(
+        map((res) => res),
+        catchError((e) => of(this.profileForm.get('job').value))
+      ),
+      profile: this.profileService
+        .updateProfile(this.profileForm.get('employer').value.name, this.profileForm.get('job').value.name)
+        .pipe(
+          map((res) => res),
+          catchError((e) => of())
+        ),
+    }).subscribe(() => {
+      this.router.navigateByUrl('form/structure');
+    });
+  }
+
+  public savePersonalOfferForm(): void {
+    this.personalOfferService.createPersonalOffer(this.structure._id, this.personalOfferForm.value).subscribe(() => {
+      if (this.hasOtherPersonalOffer) {
+        this.router.navigateByUrl('form/structure');
+      } else {
+        this.nextPage();
+      }
+    });
+  }
+  public async saveStructureForm(): Promise<void> {
+    const user = await this.profileService.getProfile();
+    this.structureService.createStructure(this.structureForm.value, this.profile).subscribe((struct) => {
+      if (user.job.hasPersonalOffer) {
+        this.structure = struct;
+        this.router.navigateByUrl('form/personaloffer');
+      } else {
+        this.router.navigateByUrl(`acteurs?id=${struct._id}`);
+      }
+    });
+  }
+  public setCurrentStep(step: accountFormStep | profileFormStep | structureFormStep | personalOfferFormStep): void {
+    //THIS PROBABLY CREATES CONSOLE ERRORS NG100 only in dev mode, please refer to https://angular.io/errors/NG0100 for more info
+    this.currentPage = step;
+  }
+  public async saveEditedStructure() {
+    let editStructure = this.editForm.value;
+    editStructure.hours = this.hoursForm.value;
+    this.structureService.editStructure(editStructure).subscribe(() => {
+      this.notificationService.showSuccess('Vos modifications ont bien été prises en compte.', '');
+      history.back();
+    });
+  }
+}

src/app/form/form-view/form-view.module.ts

+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../../shared/shared.module';
+import { FooterFormComponent } from '../footer-form/footer-form.component';
+import { AccountCredentialsComponent } from './account-form/account-credentials/account-credentials.component';
+import { AccountFormComponent } from './account-form/account-form.component';
+import { AccountInfoComponent } from './account-form/account-info/account-info.component';
+import { AccountNewsletterComponent } from './account-form/account-newsletter/account-newsletter.component';
+import { FormViewRoutingModule } from './form-view-routing.module';
+import { FormViewComponent } from './form-view.component';
+import { ProgressBarComponent } from './global-components/progress-bar/progress-bar.component';
+import { PersonalOfferGuard } from './guards/personalOffer.guard';
+import { PersonalOfferAccompanimentComponent } from './personal-offer-form/personal-offer-accompaniment/personal-offer-accompaniment.component';
+import { PersonalOfferFormComponent } from './personal-offer-form/personal-offer-form.component';
+import { PersonalOfferOtherStructureChoiceComponent } from './personal-offer-form/personal-offer-other-structure-choice/personal-offer-other-structure-choice.component';
+import { PersonalOfferTrainingTypeComponent } from './personal-offer-form/personal-offer-training-type/personal-offer-training-type.component';
+import { ProfileEmployerSelectionComponent } from './profile-form/profile-employer-selection/profile-employer-selection.component';
+import { ProfileFormComponent } from './profile-form/profile-form.component';
+import { ProfileJobSelectionComponent } from './profile-form/profile-job-selection/profile-job-selection.component';
+import { ProfileStructureChoiceComponent } from './profile-form/profile-structure-choice/profile-structure-choice.component';
+import { StructureAccessModalityComponent } from './structure-form/structure-access-modality/structure-access-modality.component';
+import { StructureAccompanimentChoiceComponent } from './structure-form/structure-accompaniment-choice/structure-accompaniment-choice.component';
+import { StructureChoiceCompletionComponent } from './structure-form/structure-choice-completion/structure-choice-completion.component';
+import { StructureConsentComponent } from './structure-form/structure-consent/structure-consent.component';
+import { StructureContactCompletionComponent } from './structure-form/structure-contact-completion/structure-contact-completion.component';
+import { StructureContactComponent } from './structure-form/structure-contact/structure-contact.component';
+import { StructureCovidInfoComponent } from './structure-form/structure-covid-info/structure-covid-info.component';
+import { StructureDescriptionComponent } from './structure-form/structure-description/structure-description.component';
+import { StructureDigitalHelpingAccompanimentComponent } from './structure-form/structure-digital-helping-accompaniment/structure-digital-helping-accompaniment.component';
+import { StructureEquipmentsComponent } from './structure-form/structure-equipments/structure-equipments.component';
+import { StructureFormComponent } from './structure-form/structure-form.component';
+import { StructureHoursComponent } from './structure-form/structure-hours/structure-hours.component';
+import { StructureLabelsComponent } from './structure-form/structure-labels/structure-labels.component';
+import { StructureNameAndAddressComponent } from './structure-form/structure-name-and-address/structure-name-and-address.component';
+import { StructureOtherServicesComponent } from './structure-form/structure-other-services/structure-other-services.component';
+import { StructurePmrComponent } from './structure-form/structure-pmr/structure-pmr.component';
+import { StructurePublicTargetComponent } from './structure-form/structure-public-target/structure-public-target.component';
+import { StructureTrainingPriceComponent } from './structure-form/structure-training-price/structure-training-price.component';
+import { StructureTrainingTypeComponent } from './structure-form/structure-training-type/structure-training-type.component';
+import { StructureTypeComponent } from './structure-form/structure-type/structure-type.component';
+import { StructureWebAndSocialNetworkComponent } from './structure-form/structure-web-and-social-network/structure-web-and-social-network.component';
+import { StructureWifiComponent } from './structure-form/structure-wifi/structure-wifi.component';
+
+@NgModule({
+  declarations: [
+    FormViewComponent,
+    ProgressBarComponent,
+    StructureFormComponent,
+    ProfileFormComponent,
+    PersonalOfferFormComponent,
+    PersonalOfferAccompanimentComponent,
+    PersonalOfferTrainingTypeComponent,
+    PersonalOfferOtherStructureChoiceComponent,
+    AccountFormComponent,
+    ProfileEmployerSelectionComponent,
+    ProfileJobSelectionComponent,
+    ProfileStructureChoiceComponent,
+    PersonalOfferOtherStructureChoiceComponent,
+    StructureNameAndAddressComponent,
+    StructureContactComponent,
+    StructureAccompanimentChoiceComponent,
+    StructureChoiceCompletionComponent,
+    StructureContactCompletionComponent,
+    StructureAccessModalityComponent,
+    StructureHoursComponent,
+    StructurePmrComponent,
+    StructureWebAndSocialNetworkComponent,
+    StructurePublicTargetComponent,
+    StructureDigitalHelpingAccompanimentComponent,
+    StructureTrainingPriceComponent,
+    StructureWifiComponent,
+    StructureEquipmentsComponent,
+    StructureLabelsComponent,
+    StructureOtherServicesComponent,
+    StructureDescriptionComponent,
+    StructureCovidInfoComponent,
+    StructureConsentComponent,
+    AccountInfoComponent,
+    AccountCredentialsComponent,
+    FooterFormComponent,
+    StructureTypeComponent,
+    AccountNewsletterComponent,
+    StructureTrainingTypeComponent,
+  ],
+  imports: [CommonModule, FormViewRoutingModule, SharedModule],
+  providers: [PersonalOfferGuard],
+})
+export class FormViewModule {}

src/app/form/form-view/formType.enum.ts

+export enum formType {
+  structure,
+  profile,
+  personaloffer,
+  account,
+}

src/app/form/form-view/global-components/information-step/information-step.component.html

+<ng-container *ngIf="formType === formTypeEnum.account && step === accountFormStepEnum.confirmEmailSentInfo">
+  <div class="information-step-container no-max-width">
+    <img src="../../assets/form/emailVerification.svg" alt="Image de validation de finalisation de l'inscription" />
+    <p>
+      Un email vous a été envoyé<br />
+      afin de finaliser votre inscription
+    </p>
+  </div>
+</ng-container>
+<ng-container *ngIf="formType === formTypeEnum.profile && step === profileFormStepEnum.profileBeginningInfo">
+  <div fxLayout="column" fxLayoutGap="18px" class="information-step-container profile-skip">
+    <p>
+      Pour compléter votre profil,<br />
+      nous aimerions vous poser quelques questions
+    </p>
+    <img src="../../assets/form/profileSkip.svg" alt="Image profil" />
+    <div class="footerForm" fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center">
+      <app-button (action)="goToHome()" [text]="'Plus tard'"></app-button>
+      <app-button (action)="goToNextPage()" [text]="'C`est parti !'" [style]="buttonTypeEnum.Primary"></app-button>
+    </div>
+  </div>
+</ng-container>
+<ng-container *ngIf="formType === formTypeEnum.structure && step === structureFormStepEnum.mailSentInfo">
+  <div class="information-step-container structure-display">
+    <img src="../../assets/form/emailVerification.svg" alt="Image message envoyé" />
+    <p *ngIf="isClaimed">Un message a été envoyé aux membres de la structure :</p>
+    <p *ngIf="!isClaimed">
+      Un message a été envoyé aux administrateurs Rés'IN pour valider l'affectation de votre compte à la structure :
+    </p>
+    <span>{{ structureName }}</span>
+  </div>
+</ng-container>
+<ng-container *ngIf="formType === formTypeEnum.structure && step === structureFormStepEnum.structureFormTime">
+  <div class="information-step-container structure-time no-max-width">
+    <h3>
+      Nous vous proposons de prendre 10 minutes afin de renseigner les informations de la structure et la créer sur
+      Rés’in.
+    </h3>
+    <img src="../../assets/form/formTime.svg" alt="image renseignement des informations" />
+    <p>Informations dont il faut vous munir :</p>
+    <ul>
+      <li>les coordonnées de la structure</li>
+
+      <li>les horaires d’ouverture</li>
+
+      <li>la liste des formations dispensées dans la structure (optionnel)</li>
+    </ul>
+  </div>
+</ng-container>
+<ng-container
+  *ngIf="formType === formTypeEnum.structure && step === structureFormStepEnum.structureCreationFinishedInfo"
+>
+  <div class="structureCreated no-max-width">
+    <h3>La structure est désormais référencée sur Rés’in.</h3>
+    <img src="../../assets/form/structureCreated.svg" alt="image structure référencée" />
+    <p *ngIf="hasPersonalOffer">
+      Les prochaines questions concernent les services que vous dispensez en tant qu’intervenant dans cette structure.
+    </p>
+  </div>
+</ng-container>
+<ng-container *ngIf="formType === formTypeEnum.structure && step === structureFormStepEnum.noStructure">
+  <div class="information-step-container profile-updated no-max-width">
+    <img src="../../assets/form/profileUpdated.svg" alt="image profil" />
+    <p class="no-margin-top">Votre profil a bien été mis à jour.</p>
+    <div class="btn">
+      <app-button
+        [style]="buttonTypeEnum.Primary"
+        [text]="'Voir mon compte'"
+        [iconType]="'form'"
+        (action)="goBackProfile()"
+      >
+      </app-button>
+    </div>
+  </div>
+</ng-container>
+<ng-container
+  *ngIf="
+    (formType === formTypeEnum.personaloffer && step === personalOfferFormStep.personalOfferFinishedInfo) ||
+    (formType === formTypeEnum.structure && step === structureFormStepEnum.StructureInfoUnknown)
+  "
+>
+  <div class="information-step-container profile-updated no-max-width">
+    <img src="../../assets/form/profileUpdated.svg" alt="image profil" />
+    <h3>Merci, les informations de votre profil ont été mises à jour</h3>
+    <div class="btn">
+      <app-button
+        [style]="buttonTypeEnum.Primary"
+        [text]="'Voir mon compte'"
+        [iconType]="'form'"
+        (action)="goBackProfile()"
+      >
+      </app-button>
+    </div>
+  </div>
+</ng-container>