src/app/structure/enums/joinErrors.enum.ts

+export enum JoinErrors {
+  Expired = 'Demande expirée',
+  Other = 'Une erreur inconnue est survenue',
+  AlreadyLinked = 'Demande déjà traitée',
+}

src/app/structure/interfaces/tokenValidation.interface.ts

+export interface IValidationToken {
+  userId: string;
+  idStructure: string;
+  expiresAt: string;
+}

src/app/structure/structure-join/structure-join.component.html

@@ -14,4 +14,46 @@
       </div>
     </div>
   </ng-container>
+  <div *ngIf="isLoading" class="loader">
+    <img class="loader-gif" src="/assets/gif/loader_circle_grey.gif" alt />
+  </div>
+  <ng-container *ngIf="!structureName && !isLoading && validationToken">
+    <div class="container">
+      <div class="page">
+        <img *ngIf="error" src="../../../assets/img/joinError.svg" alt="join error" />
+        <img
+          *ngIf="!error && isStructureJoinValidated == 'true'"
+          src="../../../assets/img/joinAccepted.svg"
+          alt="join accepted"
+        />
+        <img
+          *ngIf="!error && isStructureJoinValidated == 'false'"
+          src="../../../assets/img/joinRefused.svg"
+          alt="join refused"
+        />
+        <h2 *ngIf="error && error === 404">
+          {{ errorEnum.Other }}
+        </h2>
+        <h2 *ngIf="error && error === 403">
+          {{ errorEnum.Expired }}
+        </h2>
+        <h2 *ngIf="error && error === 422">
+          {{ errorEnum.AlreadyLinked }}
+        </h2>
+        <h2 *ngIf="this.structureJoinedId && !error">
+          L'utilisateur a été {{ isStructureJoinValidated == 'true' ? 'accepté' : 'refusé' }} dans la structure.
+        </h2>
+        <div class="subtitle" *ngIf="this.structureJoinedId && !error">
+          Vous avez {{ isStructureJoinValidated == 'true' ? 'accepté' : 'refusé' }} la demande d'ajout dans la structure
+          {{ structureJoinedName }}
+        </div>
+        <div class="subtitle" *ngIf="error && (error === 403 || error === 422)">
+          Il semblerait que la demande d’adhésion ait déjà été traitée ou que le mail soit expiré.
+        </div>
+      </div>
+      <div class="button">
+        <app-button [style]="buttonTypeEnum.Primary" [text]="'Ok'" (action)="handleCallback()"> </app-button>
+      </div>
+    </div>
+  </ng-container>
 </div>

src/app/structure/structure-join/structure-join.component.scss

@@ -43,8 +43,18 @@
   @media #{$tablet} {
     width: unset;
   }
+  h2 {
+    margin: 0;
+  }
+  .subtitle {
+    max-width: 600px;
+  }
 }
 
 .button {
   margin-top: 16px;
 }
+
+.loader {
+  margin: auto;
+}

src/app/structure/structure-join/structure-join.component.ts

@@ -5,6 +5,8 @@ import { structureFormStep } from '../../form/form-view/structure-form/structure
 import { Structure } from '../../models/structure.model';
 import { RouterListenerService } from '../../services/routerListener.service';
 import { ButtonType } from '../../shared/components/button/buttonType.enum';
+import { JoinErrors } from '../enums/joinErrors.enum';
+import { UserService } from '../../services/user.service';
 @Component({
   selector: 'app-structure-join',
   templateUrl: './structure-join.component.html',
@@ -17,8 +19,20 @@ export class StructureJoinComponent implements OnInit {
   public formTypeEnum = formType;
   public buttonTypeEnum = ButtonType;
   public structure: Structure;
+  public isStructureJoinValidated = null;
+  public validationToken = null;
+  public isLoading: boolean;
+  public structureJoinedId: string;
+  public structureJoinedName: string;
+  public error: any;
+  public errorEnum = JoinErrors;
 
-  constructor(private routerListener: RouterListenerService, private route: ActivatedRoute, private router: Router) {}
+  constructor(
+    private routerListener: RouterListenerService,
+    private route: ActivatedRoute,
+    private router: Router,
+    private usersService: UserService
+  ) {}
 
   ngOnInit(): void {
     this.isClaimed = history.state.isClaimed;
@@ -26,13 +40,40 @@ export class StructureJoinComponent implements OnInit {
       if (data.structure) {
         this.structureName = data.structure.structureName;
         this.structure = data.structure;
+      } else {
+        this.isLoading = true;
       }
     });
+    this.handleStructureJoin();
+  }
+  public handleStructureJoin(): void {
+    this.route.queryParams.subscribe((params) => {
+      this.isStructureJoinValidated = params['status'];
+      this.validationToken = params['token'];
+    });
+    if (this.isStructureJoinValidated !== null && this.validationToken) {
+      this.usersService.validateJoinStructure(this.validationToken, this.isStructureJoinValidated).subscribe({
+        next: (res) => {
+          this.structureJoinedId = res.id;
+          this.structureJoinedName = res.name;
+        },
+        error: (err) => {
+          this.error = err.status;
+          console.error(err);
+          this.isLoading = false;
+        },
+        complete: () => (this.isLoading = false),
+      });
+    }
   }
 
-  handleFinish() {
-    if (this.isClaimed) {
-      this.router.navigate(['/form/personaloffer'], { state: { structure: this.structure } });
-    } else this.routerListener.goToPreviousUrl();
+  public handleFinish(): void {
+    this.routerListener.goToPreviousUrl();
+  }
+  public handleCallback(): any {
+    if (this.structureJoinedId) {
+      return this.router.navigateByUrl(`/acteurs?id=${this.structureJoinedId}`);
+    }
+    return this.router.navigateByUrl(`/acteurs`);
   }
 }