Staging

cypress/e2e/report.cy.ts

@@ -24,11 +24,8 @@ describe('Feature Report', () => {
       it('can\'t report with an empty reason', () => {
         loginAsVoluntary();
         accessToReportModal();
-        cy.get('p-button').contains('Envoyer')
-          .click();
-        cy.get('app-textarea-field p')
-          .contains('Ce champ est requis')
-          .should('be.visible');
+        cy.get('p-button[label="Envoyer"] button')
+          .should('be.disabled');
         cy.get('body').find('.p-dialog-mask')
           .click({ force: true });
         logout();

cypress/fixtures/common/userByToken.json

@@ -0,0 +1,5 @@
+{
+  "user": {
+
+  }
+}

cypress/support/e2e.ts

@@ -1,5 +1,6 @@
 beforeEach(() => {
   // the home page's necessary mocks
+  cy.intercept('GET', '/auth/token', {fixture: null}).as('getUserByToken');
   cy.intercept('GET', '/activities/future', { fixture: '/common/activities.json' }).as('getActivities');
   cy.intercept('GET', '/themes', { fixture: '/common/themes.json' }).as('getThemes');
   cy.intercept('GET', 'https://api.maptiler.com/maps/**', { statusCode: 200, body: {} }).as('mapTiler');

eslint.config.js

@@ -106,7 +106,6 @@ module.exports = tseslint.config(
       "@angular-eslint/template/no-call-expression": "warn",
       "@angular-eslint/template/no-distracting-elements": "warn",
       "@angular-eslint/template/mouse-events-have-key-events": "warn",
-      "@angular-eslint/template/no-inline-styles": "warn",
       "@angular-eslint/template/no-interpolation-in-attributes": "warn",
       "@angular-eslint/template/prefer-control-flow": "warn",
     },

src/app/app.component.ts

@@ -22,7 +22,7 @@ export class AppComponent implements OnInit {
   loading = false;
 
   ngOnInit(): void {
-    this._authFacade.initUserFromStorage();
+    this._authFacade.getUserByToken();
     this._handleRouterEvents();
     this._applySavedTheme();
   }

src/app/common/components/header/header.component.html

@@ -7,7 +7,7 @@
   <div class="right-side-container">
     @if (userInfos$ | async; as userInfo) {
       @if (userInfo.isConnected) {
         @if (userInfo.canPublishActivity && !isOnActivityCreationPage()) {
           <app-single-button
             class="underline-animate"
             [type]="'button'"
@@ -34,5 +34,5 @@
   </div>
 </header>
 <app-register-modal [(visible)]="showRegisterModal"></app-register-modal>
-<app-login-modal [(visible)]="showLoginModal" (openPasswordForgottenModal)="openPasswordForgottenModal()"></app-login-modal>
+<app-login-modal [email]="email" [(visible)]="showLoginModal" (openPasswordForgottenModal)="openPasswordForgottenModal()"></app-login-modal>
 <app-forgot-password-modal [(visible)]="showPasswordForgottenModal" (closeLoginModal)="closeLoginModal()"></app-forgot-password-modal>

src/app/common/components/header/header.component.scss

@@ -57,6 +57,10 @@ header {
       border: none;
       transition: background-color 0.3s ease;
       font-family: var(--font-family-p);
+
+      @media screen and (max-width: 400px) {
+        padding: 0.75rem 1rem;
+      }
     }
 
     .inscription-btn {

src/app/common/components/header/header.component.ts

@@ -44,15 +44,21 @@ export class HeaderComponent extends DestroyableComponent implements OnInit {
 
   showRegisterModal = false;
   showLoginModal = false;
+  email: string = '';
+
   showPasswordForgottenModal = false;
   ButtonStyleClass = ButtonStyleClass;
 
   userInfos$: Observable<UserHeaderInfo> = this._authFacade.getUserHeaderInfo();
 
   ngOnInit(): void {
-    this._authService.openLoginModal$.pipe(this.untilDestroyed()).subscribe(() => {
+    this._authService.openLoginModal$.pipe(this.untilDestroyed()).subscribe((email: string | null) => {
+      this.email = email ?? '';
       this.handleLoginModal(true);
     });
+    this._authService.openSubscribeModal$.pipe(this.untilDestroyed()).subscribe(() => {
+      this.handleSubscribeModal(true);
+    });
   }
 
   openRegisterModal(): void {
@@ -62,6 +68,10 @@ export class HeaderComponent extends DestroyableComponent implements OnInit {
   handleLoginModal(status: boolean): void {
     this.showLoginModal = status;
   }
+  handleSubscribeModal(status: boolean): void {
+    this.showLoginModal = false;
+    this.showRegisterModal = status;
+  }
 
   closeLoginModal(): void {
     this.showLoginModal = false;

src/app/common/components/input-field-error/input-field-error.component.html

@@ -14,14 +14,17 @@
         @if (control.errors?.['invalidAddress']) {
           <p>L'adresse sélectionnée est invalide. Veuillez en choisir une depuis la liste</p>
         }
-        @if (control.errors?.['dateRequired']) {
-          <p>La date saisie doit être dans le futur</p>
+        @if (control.errors?.['pastDate']) {
+          <p>La date doit être dans le passé.</p>
+        }
+        @if (control.errors?.['futureDate']) {
+          <p>La date doit être dans le futur.</p>
         }
         @if (control.errors?.['email']) {
           <p>Adresse e-mail invalide</p>
         }
         @if (control.errors?.['maxSize']) {
-          <p>Le fichier est trop volumineux (max 5MB).</p>
+          <p>Le fichier est trop volumineux (max 10MB).</p>
         }
         @if (control.errors?.['invalidFormat']) {
           <p>Format non autorisé.</p>

src/app/common/components/input-field/input-field.component.html

@@ -8,7 +8,9 @@
         appendTo="body"
         dateFormat="dd.mm.yy"
         [ariaLabel]="fieldConfig.label"
-        [placeholder]="fieldConfig.placeholder ?? ''">
+        [placeholder]="fieldConfig.placeholder ?? ''"
+        [minDate]="dateMode === 'future' ? minDate : null"
+        [maxDate]="dateMode === 'past' ? maxDate : null">
       </p-calendar>
     } @else if (fieldConfig.type === 'password') {
       <p-password
@@ -38,10 +40,10 @@
         [id]="inputId"
         [formControlName]="fieldConfig.name"
         [type]="inputType"
+        [min]="fieldConfig.min"
         [disabled]="disabled"
         [placeholder]="fieldConfig.placeholder ?? ''"
-        autocomplete="on"
-        [ariaLabel]="fieldConfig.label" />
+        autocomplete="on" />
     }
   </ng-template>
 

src/app/common/components/input-field/input-field.component.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { CalendarModule } from 'primeng/calendar';
 import { DividerModule } from 'primeng/divider';
@@ -8,6 +8,7 @@ import { IftaLabelModule } from 'primeng/iftalabel';
 import { InputTextModule } from 'primeng/inputtext';
 import { PasswordModule } from 'primeng/password';
 import { FormField } from 'src/app/features/authentication/models/form.model';
+import { updateDateLimits } from '../../utils/date.utils';
 
 @Component({
   selector: 'app-input-field',
@@ -26,14 +27,25 @@ import { FormField } from 'src/app/features/authentication/models/form.model';
   templateUrl: './input-field.component.html',
   styleUrls: ['./input-field.component.scss'],
 })
-export class InputFieldComponent {
+export class InputFieldComponent implements OnInit {
   @Input() submitted: boolean = true;
   @Input() disabled: boolean = false;
   @Input() variant: 'in' | 'on' = 'in';
   @Input() useIftaLabel: boolean = false;
   @Input() showPasswordRules: boolean = false;
+
   @Input({ required: true }) fieldConfig!: FormField;
   @Input({ required: true }) formGroup: FormGroup;
+  @Input() dateMode: 'future' | 'past' | 'all' = 'all';
+
+  minDate: Date | undefined;
+  maxDate: Date | undefined;
+
+  ngOnInit(): void {
+    const { maxDate, minDate } = updateDateLimits(this.dateMode);
+    this.maxDate = maxDate;
+    this.minDate = minDate;
+  }
 
   get inputId(): string {
     return 'input_' + this.fieldConfig.name;

src/app/common/components/multiple-input-field/multiple-input-field.component.html

@@ -16,6 +16,8 @@
                     (onClear)="emitValues()"
                     [inputId]="'input-' + i"
                     [placeholder]="field.placeholder"
+                    [minDate]="dateMode === 'future' ? minDate : null"
+                    [maxDate]="dateMode === 'past' ? maxDate : null"
                     [showIcon]="true"
                     inputStyleClass="custom-calendar-input"
                     dateFormat="dd/mm/yy" />
@@ -49,7 +51,7 @@
         </div>
 
         @if (showErrors) {
           <app-input-field-error [control]="formGroup.get(field.name)" [fieldName]="field.name" class="input-error-message"> </app-input-field-error>
         }
         @if (!isLast) {
           <div class="separator"></div>

src/app/common/components/multiple-input-field/multiple-input-field.component.ts

@@ -10,6 +10,7 @@ import { FormField } from 'src/app/features/authentication/models/form.model';
 import { AutosaveFieldComponent } from '../../directives/autosave-field.component';
 import { SaveStatus } from '../../models/status';
 import { InputFieldErrorComponent } from '../input-field-error/input-field-error.component';
+import { updateDateLimits } from '../../utils/date.utils';
 
 @Component({
   selector: 'app-multiple-input-field',
@@ -32,13 +33,16 @@ export class MultipleInputFieldComponent extends AutosaveFieldComponent<Record<s
   @Output() inputValuesChanged = new EventEmitter<Record<string, string>>();
   @Output() save = new EventEmitter<Record<string, string>>();
 
+  @Input() dateMode: 'future' | 'past' | 'all' = 'all';
   @Input() fieldConfigs: FormField[] = [];
   @Input() showSearchButton = false;
   @Input() showSaveButton = false;
   @Input() showErrors = false;
   @Input() formGroup!: FormGroup;
   @Input() override autosave = false;
 
+  minDate: Date | undefined;
+  maxDate: Date | undefined;
   focusedIndex: number | null = null;
   inputConfigs: { name: string; label: string; placeholder: string; type: string; value: string }[] = [];
 
@@ -65,6 +69,10 @@ export class MultipleInputFieldComponent extends AutosaveFieldComponent<Record<s
         value: '',
       }));
     }
+
+    const { maxDate, minDate } = updateDateLimits(this.dateMode);
+    this.maxDate = maxDate;
+    this.minDate = minDate;
   }
 
   emitValues(): void {

src/app/common/components/toggle-menu/toggle-menu.component.scss

@@ -28,7 +28,7 @@ p-tablist::ng-deep {
       }
 
       @media screen and (max-width: 400px) {
-        padding: 4px 8px;
+        padding: 8px 8px;
       }
     }
 

src/app/common/interceptors/error-server.interceptor.ts

@@ -30,6 +30,7 @@ export const errorInterceptor: HttpInterceptorFn = (req, next) => {
         detail = "Vous n'avez pas la permission d'accéder à cette ressource.";
       } else if (error.status === HttpStatusCode.Unauthorized) {
         const message = error?.error?.message;
+        console.error('Unauthorized error message from server:', message);
         const isTokenExpired = message === 'Token expired';
 
         if (isTokenExpired) {
@@ -42,7 +43,7 @@ export const errorInterceptor: HttpInterceptorFn = (req, next) => {
           authService.triggerLoginModal();
         } else {
           summary = 'Authentification';
-          detail = message || 'Accès non autorisé.';
+          detail = 'Accès non autorisé.';
           severity = 'error';
         }
       }

src/app/common/pipes/date-iso-pipe.ts

@@ -0,0 +1,10 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'isoDate' })
+export class IsoDatePipe implements PipeTransform {
+  transform(value: string | Date | null): string {
+    if (!value) return '';
+    const date = value instanceof Date ? value : new Date(value);
+    return date.toISOString().split('T')[0]; // format yyyy-MM-dd
+  }
+}

src/app/common/utils/date.utils.ts

@@ -0,0 +1,22 @@
+type DateLimits = {
+  minDate: Date | undefined;
+  maxDate: Date | undefined;
+};
+
+export function updateDateLimits(dateMode: string): DateLimits {
+  const today = new Date();
+  let minDate: Date | undefined;
+  let maxDate: Date | undefined;
+
+  if (dateMode === 'future') {
+    minDate = today;
+    maxDate = undefined;
+  } else if (dateMode === 'past') {
+    maxDate = today;
+    minDate = undefined;
+  } else {
+    minDate = undefined;
+    maxDate = undefined;
+  }
+  return { minDate, maxDate };
+}

src/app/features/activity/components/activity-add-photo/activity-add-photo.component.html

@@ -33,6 +33,8 @@
       [appendTo]="'body'"
       styleClass="custom-dialog"
       contentStyleClass="custom-dialog-content">
+      <p class="subtitle" style="color: grey">Sélectionner une photo parmi vos précédentes activités ou télécharger une nouvelle image</p>
+
       <div class="existing-photos">
         @if (existingImages$ | async; as existingImages) {
           @for (pic of existingImages; track pic.id) {
@@ -56,7 +58,7 @@
           [type]="'button'"
           (buttonClicked)="loadMorePictures()"
           [styleClass]="ButtonStyleClass.defaultWhite"
-          label="Plus d'images"
+          label="Charger plus d'images précédentes"
           ariaLabel="button pour charger plus de photos"
           size="small">
         </app-single-button>

src/app/features/activity/components/activity-add-photo/activity-add-photo.component.scss

@@ -76,12 +76,10 @@
     }
   }
 
-  .modal-container {
-    ::ng-deep .p-dialog-header .p-dialog-title {
-      font-family: var(--font-family-big-medium-title);
-      font-size: var(--font-size-medium-title);
-      font-weight: 400 !important;
-    }
+  .modal-container ::ng-deep .p-dialog-header .p-dialog-title {
+    font-family: var(--font-family-big-medium-title);
+    font-size: var(--font-size-medium-title);
+    font-weight: 400 !important;
 
     .existing-photos {
       display: flex;

src/app/features/activity/components/activity-add-photo/activity-add-photo.component.ts

@@ -117,9 +117,9 @@ export class ActivityAddPhotoComponent implements OnInit, OnChanges {
       return;
     }
 
-    const maxFileSize = 2 * 1024 * 1024;
+    const maxFileSize = 10 * 1024 * 1024;
     if (file.size > maxFileSize) {
-      showErrorToast(this._toast, 'Le fichier est trop volumineux (max 2MB).');
+      showErrorToast(this._toast, 'Le fichier est trop volumineux (max 10MB).');
       return;
     }
 

src/app/features/activity/components/activity-card/activity-card.component.ts

@@ -10,6 +10,8 @@ import { Activity, Participant } from '../../models/activity.model';
 import { ActivityFacadeService } from '../../services/activity-facade.service';
 import { FavoriteHeartComponent } from '../favorite-heart/favorite-heart.component';
 import { InscriptionBadgeComponent } from '../inscription-badge/inscription-badge.component';
+import { UUIDTypes } from 'uuid';
+import { AuthFacade } from '../../../authentication/services/auth-facade.service';
 
 @Component({
   selector: 'app-activity-card',
@@ -23,19 +25,21 @@ export class ActivityCardComponent implements OnInit {
   @Output() editActivity = new EventEmitter<string>();
 
   @Input() activity!: Activity;
-  @Input() showDeleteButton: boolean = false;
   @Input() showEditButton: boolean = false;
 
   private _activityFacadeService: ActivityFacadeService = inject(ActivityFacadeService);
   private _authService = inject(AuthService);
+  private _authFacadeService = inject(AuthFacade);
 
   public isSavedActivity$: Observable<boolean>;
   public voluntariesRegistered$: Observable<Participant>;
   public apiUrl: string = environment.apiUrl;
   public associationLogoUrl!: string;
+  public showDeleteButton: boolean = false;
   isVoluntary$: Observable<boolean> = this._authService.isVoluntaryUser();
   isAssociation$: Observable<boolean> = this._authService.isAssociationUser();
   isAdmin$: Observable<boolean> = this._authService.isAdminUser();
+  connectedUserId$: Observable<UUIDTypes> = this._authFacadeService.getConnectedUserId();
   showFavorite$: Observable<boolean> = combineLatest([this.isVoluntary$, this.isAdmin$]).pipe(
     map(([isVoluntary, isAdmin]) => isVoluntary && !isAdmin)
   );
@@ -44,6 +48,12 @@ export class ActivityCardComponent implements OnInit {
     this.isSavedActivity$ = this._activityFacadeService.getIsSavedActivity(this.activity.id);
     this.voluntariesRegistered$ = this._activityFacadeService.getVoluntariesRegisteredToAnActivity(this.activity.id);
     this._setAssociationLogoUrl();
+
+    combineLatest([this.isAssociation$, this.isAdmin$, this.connectedUserId$]).subscribe(([isAssociation, isAdmin, connectedUserId]) => {
+      if ((isAssociation && this.activity.association.id === connectedUserId) || isAdmin) {
+        this.showDeleteButton = true;
+      }
+    });
   }
 
   onDeleteClick(event: MouseEvent): void {