diff --git a/src/app/admin/components/manage-employers/manage-employers.component.html b/src/app/admin/components/manage-employers/manage-employers.component.html
index d9e1c85270c842fc3f63910df8014f831a768ce8..d7686dd76e34f0ec06edd35401723d0f4b3a635b 100644
--- a/src/app/admin/components/manage-employers/manage-employers.component.html
+++ b/src/app/admin/components/manage-employers/manage-employers.component.html
@@ -43,15 +43,22 @@
<button type="submit" [ngClass]="{ invalid: !newEmployerForm.valid }">Créer</button>
</form>
</div>
-<app-modal-confirmation
+
+<app-v3-modal
*ngIf="employerToDelete"
+ [title]="'ATTENTION'"
[opened]="deleteModalOpened"
- [content]="'Voulez-vous vraiment supprimer cet employeur ? (' + employerToDelete.name + ')'"
(closed)="deleteEmployer(employerToDelete, $event)"
-/>
-<app-modal-confirmation
+>
+ Voulez-vous vraiment supprimer l'employeur <b>{{ employerToDelete.name }}</b> ?
+</app-v3-modal>
+
+<app-v3-modal
*ngIf="mergeOpe.newEmployer"
[opened]="mergeEmployerModalOpened"
- [content]="'Voulez-vous vraiment fusionner cet employeur avec : ' + mergeOpe.newEmployer.name"
+ [title]="'ATTENTION'"
(closed)="mergeEmployer(mergeOpe.newEmployer._id, mergeOpe.formerId, $event, contextRow)"
-/>
+>
+ Voulez-vous vraiment fusionner cet employeur avec <b>{{ mergeOpe.newEmployer.name }}</b
+ > ?
+</app-v3-modal>
diff --git a/src/app/admin/components/manage-employers/manage-employers.component.ts b/src/app/admin/components/manage-employers/manage-employers.component.ts
index f125b6eb82d0e8ecc8a7ee0f0997a5eaeba6f9be..da58024640f0d1a0ebdbf242ba6758f45be9b673 100644
--- a/src/app/admin/components/manage-employers/manage-employers.component.ts
+++ b/src/app/admin/components/manage-employers/manage-employers.component.ts
@@ -164,7 +164,7 @@ export class ManageEmployersComponent implements OnInit {
this.adminService.deleteEmployer(employer._id).subscribe(
(data) => {
this.validatedEmployers = this.validatedEmployers.filter((obj) => obj._id !== data._id);
- this.notificationService.showSuccess("L'employeur a bien été supprimée.");
+ this.notificationService.showSuccess("L'employeur a bien été supprimé.");
},
(err) => {
this.notificationService.showError(`${err.error.message}`, 'Une erreur est survenue');
diff --git a/src/app/admin/components/manage-jobs/manage-jobs.component.html b/src/app/admin/components/manage-jobs/manage-jobs.component.html
index 845f2836a8088daaf8c5ad54fa676e16d2461d9c..d118c5d964f570a84623a3ef40a9318906e40ba2 100644
--- a/src/app/admin/components/manage-jobs/manage-jobs.component.html
+++ b/src/app/admin/components/manage-jobs/manage-jobs.component.html
@@ -68,21 +68,29 @@
</form>
</div>
-<app-modal-confirmation
+<app-v3-modal
*ngIf="jobToDelete"
+ [title]="'ATTENTION'"
[opened]="deleteModalOpened"
- [content]="'Voulez-vous vraiment supprimer la fonction ' + jobToDelete.name + ' ?'"
(closed)="deleteJob(jobToDelete, $event)"
-/>
-<app-modal-confirmation
+>
+ Voulez-vous vraiment supprimer la fonction {{ jobToDelete.name }} ?
+</app-v3-modal>
+
+<app-v3-modal
*ngIf="mergeOpe.newJob"
+ [title]="'ATTENTION'"
[opened]="mergeJobModalOpened"
- [content]="'Voulez-vous vraiment fusionner cette fonction avec : ' + mergeOpe.newJob.name"
(closed)="mergeJob(mergeOpe.newJob._id, mergeOpe.formerId, $event, contextRow)"
-/>
-<app-modal-confirmation
+>
+ Voulez-vous vraiment fusionner cette fonction avec {{ mergeOpe.newJob.name }} ?
+</app-v3-modal>
+
+<app-v3-modal
*ngIf="jobsGroupToDelete"
+ [title]="'ATTENTION'"
[opened]="deleteJobsGroupModalOpened"
- [content]="'Voulez-vous vraiment supprimer le groupe de fonctions ' + jobsGroupToDelete.name + ' ?'"
(closed)="deleteJobsGroup(jobsGroupToDelete, $event)"
-/>
+>
+ Voulez-vous vraiment supprimer le groupe de fonctions {{ jobsGroupToDelete.name }} ?
+</app-v3-modal>
diff --git a/src/app/admin/components/manage-users/manage-users.component.html b/src/app/admin/components/manage-users/manage-users.component.html
index 482910df61f8e014d51c734845644d650c68fdb4..b49da702384f71f5b201daf45522d163ef539f11 100644
--- a/src/app/admin/components/manage-users/manage-users.component.html
+++ b/src/app/admin/components/manage-users/manage-users.component.html
@@ -84,45 +84,50 @@
[frameworkComponents]="frameworkComponents"
/>
</div>
-<app-modal-confirmation
+
+<app-v3-modal
*ngIf="userToDelete"
+ [title]="'ATTENTION'"
[opened]="deleteModalOpened"
- [content]="'Voulez-vous vraiment supprimer cet utilisateur ? (' + userToDelete.email + ')'"
(closed)="deleteUser(userToDelete, $event)"
-/>
-<app-modal-confirmation
+>
+ Voulez-vous vraiment supprimer l'utilisateur <b>{{ userToDelete.email }}</b> ?
+</app-v3-modal>
+
+<app-v3-modal
*ngIf="changingJobs && changingJobs[0] !== null"
+ [title]="'ATTENTION'"
[opened]="editJobModalOpened"
- [content]="
- 'Voulez-vous vraiment changer la fonction de cet utilisateur ? (' +
- changingJobs[1].name +
- ' par ' +
- changingJobs[0].name +
- ')'
- "
(closed)="editJob(changingJobs[0], changingJobs[1], $event, contextRow)"
-/>
-<app-modal-confirmation
+>
+ Voulez-vous vraiment changer la fonction de cet utilisateur ({{ changingJobs[1].name }}) par
+ {{ changingJobs[0].name }} ?
+</app-v3-modal>
+
+<app-v3-modal
*ngIf="changingJobs && changingJobs[0] === null"
+ [title]="'ATTENTION'"
[opened]="editJobModalOpened"
- [content]="'Voulez-vous vraiment supprimer la fonction de cet utilisateur ?'"
(closed)="editJob(changingJobs[0], changingJobs[1], $event, contextRow)"
-/>
-<app-modal-confirmation
+>
+ Voulez-vous vraiment supprimer la fonction de cet utilisateur ?
+</app-v3-modal>
+
+<app-v3-modal
*ngIf="changingEmployers && changingEmployers[0] !== null"
+ [title]="'ATTENTION'"
[opened]="editEmployerModalOpened"
- [content]="
- 'Voulez-vous vraiment changer l\'employeur de cet utilisateur ? (' +
- changingEmployers[1].name +
- ' par ' +
- changingEmployers[0].name +
- ')'
- "
(closed)="editEmployer(changingEmployers[0], changingEmployers[1], $event, contextRow)"
-/>
-<app-modal-confirmation
+>
+ Voulez-vous vraiment changer l'employeur de cet utilisateur ({{ changingEmployers[1].name }}) par
+ {{ changingEmployers[0].name }} ?
+</app-v3-modal>
+
+<app-v3-modal
*ngIf="changingEmployers && changingEmployers[0] === null"
+ [title]="'ATTENTION'"
[opened]="editEmployerModalOpened"
- [content]="'Voulez-vous vraiment supprimer l\'employeur de cet utilisateur ?'"
(closed)="editEmployer(changingEmployers[0], changingEmployers[1], $event, contextRow)"
-/>
+>
+ Voulez-vous vraiment supprimer l'employeur de cet utilisateur ?
+</app-v3-modal>
diff --git a/src/app/annuaire/filter-modal/filter-modal.component.html b/src/app/annuaire/filter-modal/filter-modal.component.html
index 3f7f26755b0eea797a480075309b40c8e701a904..a6e8c171574920270f1b94115e52b655aa150d71 100644
--- a/src/app/annuaire/filter-modal/filter-modal.component.html
+++ b/src/app/annuaire/filter-modal/filter-modal.component.html
@@ -1,4 +1,4 @@
-<div *ngIf="modalType" [ngClass]="['modal', 'modal' + getModalType()]">
+<div *ngIf="modalType" [ngClass]="['filterMenu', 'modal' + getModalType()]">
<div class="contentModal maxModal max-height" fxLayout="row wrap" fxLayoutAlign="flex-start">
<ul class="blockLigne">
<div *ngFor="let filter of filtersTypes" class="blockFiltre">
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 31458c5f9a2dd2fd4bbdd7d657924da67349144b..c556eb9830a54fac021fff586a5785e2715b3546 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -17,7 +17,6 @@ import { PasswordFormComponent } from './shared/components';
import { StructureDetailsComponent } from './structure-list/components/structure-details/structure-details.component';
import { StructureListSearchPrintComponent } from './structure-list/components/structure-list-search-print/structure-list-search-print.component';
import { StructureListComponent } from './structure-list/structure-list.component';
-import { StructureExcludeComponent } from './structure/structure-exclude/structure-exclude.component';
import { StructureJoinComponent } from './structure/structure-join/structure-join.component';
const footerOutletRoute: Route = {
@@ -183,17 +182,6 @@ const routes: Routes = [
footerOutletRoute,
],
},
- {
- path: 'exclude',
- children: [
- {
- path: '',
- canActivate: [AuthGuard],
- component: StructureExcludeComponent,
- },
- footerOutletRoute,
- ],
- },
{
path: 'reset-password',
children: [
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 243029e7b464099eb5c9739a3744bd101f2b0012..e993320287f5c3c4a08631125806df52cc7ff148 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -41,7 +41,6 @@ import { DataShareConsentComponent } from './shared/components/data-share-consen
import { SharedModule } from './shared/shared.module';
import { StructureDetailsComponent } from './structure-list/components/structure-details/structure-details.component';
import { StructureListSearchPrintComponent } from './structure-list/components/structure-list-search-print/structure-list-search-print.component';
-import { StructureExcludeComponent } from './structure/structure-exclude/structure-exclude.component';
import { StructureJoinComponent } from './structure/structure-join/structure-join.component';
@NgModule({
@@ -59,7 +58,6 @@ import { StructureJoinComponent } from './structure/structure-join/structure-joi
NewsletterSubscriptionComponent,
DataShareConsentComponent,
LoginComponent,
- StructureExcludeComponent,
AnnuaireComponent,
AnnuaireHeaderComponent,
ResultListComponent,
diff --git a/src/app/form/form-view/form-view.component.html b/src/app/form/form-view/form-view.component.html
index 881f9c02a2fd955518b167de089fa53146839ad6..4ded7b60fc80410f39332e3c5a4e720cac4800e7 100644
--- a/src/app/form/form-view/form-view.component.html
+++ b/src/app/form/form-view/form-view.component.html
@@ -1,9 +1,15 @@
<div class="formView">
- <app-modal-confirmation
+ <app-v3-modal
+ [title]="'Attention'"
[opened]="showConfirmationModal"
- [content]="'Il vous faudra de nouveau remplir le formulaire si vous quittez'"
- (closed)="hasRedirectionAccepted($event)"
- />
+ [validateLabel]="'Quitter'"
+ [cancelLabel]="'Annuler'"
+ (closed)="hasRedirectionAccepted($event ? true : false)"
+ >
+ <div class="modalContent emphasized">
+ Si vous quittez le formulaire maintenant, toutes les informations saisies seront perdues
+ </div>
+ </app-v3-modal>
<app-progress-bar
*ngIf="!isEditMode"
[formType]="formType[routeParam]"
diff --git a/src/app/form/form-view/structure-form/structure-contact/structure-contact.component.ts b/src/app/form/form-view/structure-form/structure-contact/structure-contact.component.ts
index 0dac3d4a163e0e5e498e6b863a0d21d335e37e98..dd5416f41ec3e49de042bb0eaddd97c4cfcbac87 100644
--- a/src/app/form/form-view/structure-form/structure-contact/structure-contact.component.ts
+++ b/src/app/form/form-view/structure-form/structure-contact/structure-contact.component.ts
@@ -23,7 +23,7 @@ export class StructureContactComponent implements OnInit {
}
public isRequirePhoneOrMailNotValid(): boolean {
- return this.structureForm.errors.requirePhoneOrMail ?? false;
+ return this.structureForm.errors?.requirePhoneOrMail ?? false;
}
public isContactMailValid(): boolean {
diff --git a/src/app/form/orientation-form-view/global-components/login-modal/login-modal.component.html b/src/app/form/orientation-form-view/global-components/login-modal/login-modal.component.html
deleted file mode 100644
index 4c233649a3d66386cc25dc1e285168a042358c2e..0000000000000000000000000000000000000000
--- a/src/app/form/orientation-form-view/global-components/login-modal/login-modal.component.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<div *ngIf="opened" class="modalBackground">
- <div class="modal" (appClickOutside)="handleClose()">
- <div class="contentModal" fxLayout="column" fxLayoutAlign="space-around center">
- <div class="headerModal" fxLayout="row" fxLayoutAlign="space-between center">
- <h3>Se connecter</h3>
- <app-svg-icon
- tabindex="0"
- [type]="'ico'"
- [icon]="'closeModal'"
- (click)="handleClose()"
- (keyup.enter)="handleClose()"
- />
- </div>
- <div class="content">
- <img src="../../../../../assets/img/resin-login.svg" alt="resin-login-image" class="loginimg" />
- <h3>Pour pré-remplir ce formulaire, gagnez du temps en vous connectant !</h3>
-
- <div class="footerModal">
- <app-v3-button [variant]="buttonTypeEnumV3.Secondary" [label]="'Plus tard'" (action)="handleClose()" />
- <app-v3-button [variant]="buttonTypeEnumV3.Primary" [label]="'Se connecter'" (action)="goLogin()" />
- </div>
- </div>
- </div>
- </div>
-</div>
diff --git a/src/app/form/orientation-form-view/global-components/login-modal/login-modal.component.scss b/src/app/form/orientation-form-view/global-components/login-modal/login-modal.component.scss
deleted file mode 100644
index 6b193a782f45e5ebe9dcb25f5e09dd67f7b94e9f..0000000000000000000000000000000000000000
--- a/src/app/form/orientation-form-view/global-components/login-modal/login-modal.component.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-@import 'color';
-@import 'typography';
-
-.modal {
- max-width: 390px;
-}
-.contentModal {
- padding-top: 0 !important;
-}
-h3 {
- color: $grey-1;
- text-align: center;
-}
-.headerModal {
- height: 58px;
- width: 100%;
- padding: 0 0.875rem 0 1rem;
- border-bottom: solid 1px $grey-6;
- h3 {
- padding-left: 1.875rem;
- flex: auto;
- }
-}
-::ng-deep .headerModal svg {
- cursor: pointer;
- width: 40px !important;
- height: 40px !important;
-}
-.loginimg {
- margin: auto;
- display: block;
-}
-.content {
- padding: 0 1.5rem;
-}
-.footerModal {
- display: flex;
- justify-content: center;
- gap: 1rem;
- padding: 16px 0;
-}
-.fullWidth {
- width: 100% !important;
-}
-.contentModal ::ng-deep .tertiary {
- border-radius: 4px !important;
- width: 100% !important;
-}
diff --git a/src/app/form/orientation-form-view/global-components/login-modal/login-modal.component.ts b/src/app/form/orientation-form-view/global-components/login-modal/login-modal.component.ts
deleted file mode 100644
index 22541de5b502189cadb4cd443547357f584fb94a..0000000000000000000000000000000000000000
--- a/src/app/form/orientation-form-view/global-components/login-modal/login-modal.component.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { Router } from '@angular/router';
-import { ButtonTypeV3 } from '../../../../shared/components/v3/button/button-type.enum';
-
-@Component({
- selector: 'app-login-modal',
- templateUrl: './login-modal.component.html',
- styleUrls: ['./login-modal.component.scss'],
-})
-export class LoginModalComponent {
- @Input() opened: boolean;
- public buttonTypeEnumV3 = ButtonTypeV3;
- constructor(private router: Router) {}
-
- public handleClose(): void {
- this.opened = false;
- }
- public goLogin(): void {
- this.router.navigate(['/login'], { queryParams: { returnUrl: '/orientation' } });
- this.handleClose();
- }
-}
diff --git a/src/app/form/orientation-form-view/online-demarch/online-demarch-common/online-demarch.component.html b/src/app/form/orientation-form-view/online-demarch/online-demarch-common/online-demarch.component.html
index 3785f0669978ad889907dc3d3af0d528d6b2f60b..9d5386cc314819a291d632084d0d8d17d960f9b0 100644
--- a/src/app/form/orientation-form-view/online-demarch/online-demarch-common/online-demarch.component.html
+++ b/src/app/form/orientation-form-view/online-demarch/online-demarch-common/online-demarch.component.html
@@ -12,12 +12,14 @@
/>
</span>
</div>
-<app-modal-confirmation
+<app-v3-modal
[opened]="showStrangersModal"
- [content]="
- 'Les premières demandes de titres de séjour doivent être redirigées vers les associations spécialisées sur les droits des étrangers.'
- "
- [customConfirmationText]="'Ok'"
+ [validateLabel]="'J\'ai compris'"
[singleButton]="true"
+ [title]="'Attention'"
(closed)="handleClose()"
-/>
+ ><div class="modalContent emphasized">
+ Les premières demandes de titres de séjour doivent être redirigées vers les associations spécialisées sur les droits
+ des étrangers.
+ </div></app-v3-modal
+>
diff --git a/src/app/form/orientation-form-view/orientation-form-view.component.html b/src/app/form/orientation-form-view/orientation-form-view.component.html
index e6b886691c6acffe07d0e89d034add920423f32c..6be67e3c0d3b36e7ac8fa61773545ae07156a688 100644
--- a/src/app/form/orientation-form-view/orientation-form-view.component.html
+++ b/src/app/form/orientation-form-view/orientation-form-view.component.html
@@ -60,10 +60,28 @@
(goReset)="reset()"
/>
</div>
- <app-modal-confirmation
+
+ <app-v3-modal
[opened]="showConfirmationModal"
- [content]="'Il vous faudra de nouveau remplir le formulaire si vous quittez'"
- (closed)="hasRedirectionAccepted($event)"
- />
- <app-login-modal [opened]="showLoginModal" />
+ [title]="'Attention'"
+ [validateLabel]="'Quitter'"
+ [cancelLabel]="'Annuler'"
+ (closed)="hasRedirectionAccepted($event ? true : false)"
+ >
+ <div class="modalContent emphasized">
+ Si vous quittez le formulaire maintenant, toutes les informations saisies seront perdues
+ </div>
+ </app-v3-modal>
+
+ <app-v3-modal
+ [opened]="showLoginModal"
+ [title]="'Se connecter'"
+ [validateLabel]="'Se connecter'"
+ [cancelLabel]="'Plus tard'"
+ (closed)="handleClose($event)"
+ ><div class="content">
+ <img src="../../../../../assets/img/resin-login.svg" alt="resin-login-image" />
+ <h3>Pour pré-remplir ce formulaire, gagnez du temps en vous connectant !</h3>
+ </div>
+ </app-v3-modal>
</div>
diff --git a/src/app/form/orientation-form-view/orientation-form-view.component.ts b/src/app/form/orientation-form-view/orientation-form-view.component.ts
index 1510ebba61958d115d5945a171346069a6a57f45..4c6ecc073b4c555900182623642f370619468d5b 100644
--- a/src/app/form/orientation-form-view/orientation-form-view.component.ts
+++ b/src/app/form/orientation-form-view/orientation-form-view.component.ts
@@ -1,5 +1,6 @@
import { AfterContentChecked, ChangeDetectorRef, Component, OnInit } from '@angular/core';
import { AbstractControl, FormGroup, UntypedFormGroup } from '@angular/forms';
+import { Router } from '@angular/router';
import { lastValueFrom } from 'rxjs';
import { Structure } from '../../models/structure.model';
import { User } from '../../models/user.model';
@@ -120,7 +121,8 @@ export class OrientationFormViewComponent implements OnInit, AfterContentChecked
private searchService: SearchService,
private structureService: StructureService,
private cdref: ChangeDetectorRef,
- private indicatorService: IndicatorService
+ private indicatorService: IndicatorService,
+ private router: Router
) {
this.setCategories();
}
@@ -726,4 +728,14 @@ export class OrientationFormViewComponent implements OnInit, AfterContentChecked
public setResetOrientation(): void {
this.shouldResetOrientation = true;
}
+ public handleClose(value: boolean): void {
+ if (value) {
+ this.goLogin();
+ } else {
+ this.showLoginModal = false;
+ }
+ }
+ public goLogin(): void {
+ this.router.navigate(['/login'], { queryParams: { returnUrl: '/orientation' } });
+ }
}
diff --git a/src/app/form/orientation-form-view/orientation.module.ts b/src/app/form/orientation-form-view/orientation.module.ts
index 31dd2922656d208272c70eebcb44bec2f12853b9..18f8549974a6922ea110b042729dc6192831b323 100644
--- a/src/app/form/orientation-form-view/orientation.module.ts
+++ b/src/app/form/orientation-form-view/orientation.module.ts
@@ -8,7 +8,6 @@ import { EquipmentAccessComponent } from './equipment-access/equipment-access.co
import { EquipmentBuyTypeComponent } from './equipment-buy/equipment-buy-type/equipment-buy-type.component';
import { EquipmentBuyComponent } from './equipment-buy/equipment-buy.component';
import { InformationScreenComponent } from './global-components/information-screen/information-screen.component';
-import { LoginModalComponent } from './global-components/login-modal/login-modal.component';
import { MultiRadioFormComponent } from './global-components/multi-radio-form/multi-radio-form.component';
import { NavigationComponent } from './global-components/navigation/navigation.component';
import { NeedsSelectionComponent } from './global-components/needs-selection/needs-selection.component';
@@ -43,7 +42,6 @@ import { OrientationStructureListComponent } from './orientation-structure-list/
OrientationRecapComponent,
OnlineDemarchFormComponent,
PrintHeaderComponent,
- LoginModalComponent,
OrientationStructureListComponent,
OrientationStructureAddressComponent,
EquipmentBuyTypeComponent,
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
index 10d26832c995f3e71449427a742b4add1f8bcd87..d050b61855e97d0101e6ffb88d47c78e4192393c 100644
--- a/src/app/header/header.component.scss
+++ b/src/app/header/header.component.scss
@@ -213,6 +213,19 @@ a {
}
}
+// adapt width and remove header and close button for dataShareContent modal until it has a V3 design
+::ng-deep .modalBackground:has(div.modal):has(p):has(form.dataShareConsent) {
+ .modal {
+ width: auto;
+ @media #{$large-phone} {
+ max-width: 95%;
+ }
+ }
+ .headerModal {
+ display: none !important;
+ }
+}
+
.desktop-show {
display: block;
@media #{$tablet} {
diff --git a/src/app/profile/edit/edit.component.html b/src/app/profile/edit/edit.component.html
index 9735401ad26c7ec35017f24de8b79e846dd38db2..e03ade9265c7949d47560af1c389250060487b48 100644
--- a/src/app/profile/edit/edit.component.html
+++ b/src/app/profile/edit/edit.component.html
@@ -181,14 +181,16 @@
(validateForm)="isPageValid()"
/>
</div>
- <app-custom-modal
- customValidationButton="OK"
+
+ <app-v3-modal
+ [title]="'ATTENTION'"
[opened]="showConfirmationModal"
- [content]="
- 'Veuillez indiquer si vous souhaitez proposer la fonctionnalité \'être rappelé\' dans l\'onglet \'Employeur et fonction\'.'
- "
+ [validateLabel]="'OK'"
(closed)="closeExitModal()"
- />
+ >
+ Veuillez indiquer si vous souhaitez proposer la fonctionnalité 'être rappelé' dans l'onglet 'Employeur et
+ fonction'.
+ </app-v3-modal>
<div *ngIf="currentTab === tabsEnum.description" class="descriptionTab">
<p class="subTitle">Description</p>
@@ -224,235 +226,162 @@
</div>
<!-- Modal: Email change -->
- <div *ngIf="emailModal" class="modalBackground" (appClickOutside)="closeModal()">
- <div class="modal">
- <div class="modalHeader">
- <div class="empty"></div>
- <h3>Changer mon email</h3>
- <svg class="close" aria-hidden="true" (click)="closeModal()">
- <use [attr.xlink:href]="'assets/form/sprite.svg#close'" />
- </svg>
- </div>
-
- <div class="modalContent">
- <div class="form-group" fxLayout="column">
- <label for="email">Nouvel email</label>
- <div fxLayout="row" fxLayoutGap="13px">
- <input id="email" type="text" class="form-input email-placeholder" [(ngModel)]="newEmail" />
- <app-svg-icon *ngIf="emailValid(newEmail)" [iconClass]="'icon-26'" [type]="'form'" [icon]="'validate'" />
- <app-svg-icon
- *ngIf="!emailValid(newEmail)"
- [iconClass]="'icon-26'"
- [type]="'form'"
- [icon]="'notValidate'"
- />
- </div>
- </div>
-
- <div class="form-group" fxLayout="column">
- <label for="emailConfirm">Confirmer le nouvel email</label>
- <div fxLayout="row" fxLayoutGap="13px">
- <input id="emailConfirm" type="text" class="form-input email-placeholder" [(ngModel)]="newEmailConfirm" />
- <app-svg-icon
- *ngIf="emailValid(newEmailConfirm)"
- [iconClass]="'icon-26'"
- [type]="'form'"
- [icon]="'validate'"
- />
- <app-svg-icon
- *ngIf="!emailValid(newEmailConfirm)"
- [iconClass]="'icon-26'"
- [type]="'form'"
- [icon]="'notValidate'"
- />
- </div>
+ <app-v3-modal
+ [title]="'Changer mon email'"
+ [opened]="emailModal"
+ [validateLabel]="'Valider'"
+ [validateDisabled]="!(emailValid(this.newEmail) && newEmail === newEmailConfirm)"
+ (closed)="$event ? confirm() : closeModal()"
+ >
+ <div class="modal-content">
+ <div class="modal-form-group">
+ <label for="email">Nouvel email</label>
+ <div class="modal-form-item">
+ <input id="email" type="text" class="form-input" [(ngModel)]="newEmail" />
+ <app-svg-icon
+ [iconClass]="'icon-26'"
+ [type]="'form'"
+ [icon]="emailValid(newEmail) ? 'validate' : 'notValidate'"
+ />
</div>
+ </div>
- <div class="buttons">
- <app-v3-button [variant]="buttonTypeEnumV3.Secondary" [label]="'Annuler'" (action)="closeModal()" />
- <app-v3-button
- [variant]="buttonTypeEnumV3.Primary"
- [label]="'Valider'"
- [disabled]="!isPageValid()"
- (action)="confirm()"
+ <div class="modal-form-group">
+ <label for="emailConfirm">Confirmer le nouvel email</label>
+ <div class="modal-form-item">
+ <input id="emailConfirm" type="text" class="form-input" [(ngModel)]="newEmailConfirm" />
+ <app-svg-icon
+ [iconClass]="'icon-26'"
+ [type]="'form'"
+ [icon]="emailValid(newEmailConfirm) && newEmail === newEmailConfirm ? 'validate' : 'notValidate'"
/>
</div>
</div>
</div>
- </div>
+ </app-v3-modal>
<!-- Modal: Password change -->
- <div *ngIf="passwordModal" class="modalBackground" (appClickOutside)="closeModal()">
- <div class="modal">
- <div class="modalHeader">
- <div class="empty"></div>
- <h3>Changer mon mot de passe</h3>
- <svg class="close" aria-hidden="true" (click)="closeModal()">
- <use [attr.xlink:href]="'assets/form/sprite.svg#close'" />
- </svg>
+ <app-v3-modal
+ [title]="'Changer mon mot de passe'"
+ [opened]="passwordModal"
+ [validateDisabled]="!isPageValid()"
+ (closed)="$event ? confirm() : closeModal()"
+ >
+ <div class="modal-content">
+ <div class="modal-form-group">
+ <label for="oldPassword">Ancien mot de passe</label>
+ <div class="modal-form-item">
+ <input
+ id="oldPassword"
+ class="form-input password"
+ autocomplete="on"
+ [type]="isShowPassword.oldPassword ? 'text' : 'password'"
+ [(ngModel)]="oldPassword"
+ />
+ <app-svg-icon
+ tabindex="0"
+ [iconClass]="'icon-32 grey hover'"
+ [type]="'form'"
+ [icon]="isShowPassword.oldPassword ? 'eyePasswordInvisible' : 'eyePasswordVisible'"
+ (click)="showPassword(ShowPassword.oldPassword)"
+ (keyup.enter)="showPassword(ShowPassword.oldPassword)"
+ />
+ <app-svg-icon
+ [iconClass]="'icon-26'"
+ [type]="'form'"
+ [icon]="passwordValid(oldPassword) ? 'validate' : 'notValidate'"
+ />
+ </div>
</div>
- <div class="modalContent">
- <div class="form-group" fxLayout="column">
- <div class="form-group">
- <label for="oldPassword">Ancien mot de passe</label>
- <div fxLayout="row" fxLayoutAlign="none center" fxLayoutGap="13px">
- <input
- id="oldPassword"
- class="form-input password"
- autocomplete="on"
- [type]="isShowPassword.oldPassword ? 'text' : 'password'"
- [(ngModel)]="oldPassword"
- />
- <app-svg-icon
- tabindex="0"
- [iconClass]="'icon-26 grey hover'"
- [type]="'form'"
- [icon]="'eyePassword'"
- (click)="showPassword(ShowPassword.oldPassword)"
- (keyup.enter)="showPassword(ShowPassword.oldPassword)"
- />
- <app-svg-icon
- *ngIf="passwordValid(oldPassword)"
- [iconClass]="'icon-26'"
- [type]="'form'"
- [icon]="'validate'"
- />
- <app-svg-icon
- *ngIf="!passwordValid(oldPassword)"
- [iconClass]="'icon-26'"
- [type]="'form'"
- [icon]="'notValidate'"
- />
- </div>
- </div>
-
- <div class="form-group">
- <label for="newPassword">Nouveau mot de passe</label>
- <div fxLayout="row" fxLayoutAlign="none center" fxLayoutGap="13px">
- <input
- id="newPassword"
- class="form-input password"
- autocomplete="on"
- [type]="isShowPassword.newPassword ? 'text' : 'password'"
- [(ngModel)]="newPassword"
- />
- <app-svg-icon
- tabindex="0"
- [iconClass]="'icon-26 grey hover'"
- [type]="'form'"
- [icon]="'eyePassword'"
- (click)="showPassword(ShowPassword.newPassword)"
- (keyup.enter)="showPassword(ShowPassword.newPassword)"
- />
- <app-svg-icon
- *ngIf="passwordValid(newPassword)"
- [iconClass]="'icon-26'"
- [type]="'form'"
- [icon]="'validate'"
- />
- <app-svg-icon
- *ngIf="!passwordValid(newPassword)"
- [iconClass]="'icon-26'"
- [type]="'form'"
- [icon]="'notValidate'"
- />
- </div>
- </div>
- </div>
- <p class="form-group passwordInfo" [class.warn]="!passwordValid(newPassword)">
- Le mot de passe doit contenir au minimum : 8 caractères dont un caractère spécial, un caractère en majuscule
- et un chiffre.
- </p>
- <div class="form-group">
- <label for="newPasswordConfirm">Confirmer le nouveau mot de passe</label>
- <div fxLayout="row" fxLayoutAlign="none center" fxLayoutGap="13px">
- <input
- id="newPasswordConfirm"
- class="form-input password"
- autocomplete="on"
- [type]="isShowPassword.newPasswordConfirm ? 'text' : 'password'"
- [(ngModel)]="newPasswordConfirm"
- />
- <app-svg-icon
- tabindex="0"
- [iconClass]="'icon-26 grey hover'"
- [type]="'form'"
- [icon]="'eyePassword'"
- (click)="showPassword(ShowPassword.newPasswordConfirm)"
- (keyup.enter)="showPassword(ShowPassword.newPasswordConfirm)"
- />
- <app-svg-icon
- *ngIf="passwordValid(newPasswordConfirm)"
- [iconClass]="'icon-26'"
- [type]="'form'"
- [icon]="'validate'"
- />
- <app-svg-icon
- *ngIf="!passwordValid(newPasswordConfirm)"
- [iconClass]="'icon-26'"
- [type]="'form'"
- [icon]="'notValidate'"
- />
- </div>
+ <div class="modal-form-group">
+ <label for="newPassword">Nouveau mot de passe</label>
+ <div class="modal-form-item">
+ <input
+ id="newPassword"
+ class="form-input password"
+ autocomplete="on"
+ [type]="isShowPassword.newPassword ? 'text' : 'password'"
+ [(ngModel)]="newPassword"
+ />
+ <app-svg-icon
+ tabindex="0"
+ [iconClass]="'icon-32 grey hover'"
+ [type]="'form'"
+ [icon]="isShowPassword.newPassword ? 'eyePasswordInvisible' : 'eyePasswordVisible'"
+ (click)="showPassword(ShowPassword.newPassword)"
+ (keyup.enter)="showPassword(ShowPassword.newPassword)"
+ />
+ <app-svg-icon
+ [iconClass]="'icon-26'"
+ [type]="'form'"
+ [icon]="passwordValid(newPassword) ? 'validate' : 'notValidate'"
+ />
</div>
- <div class="buttons">
- <app-v3-button [variant]="buttonTypeEnumV3.Secondary" [label]="'Annuler'" (action)="closeModal()" />
- <app-v3-button
- [variant]="buttonTypeEnumV3.Primary"
- [label]="'Valider'"
- [disabled]="!isPageValid()"
- (action)="confirm()"
+ </div>
+ <p class="passwordInfo" [class.warn]="!passwordValid(newPassword)">
+ Le mot de passe doit contenir au minimum : 8 caractères dont un caractère spécial, un caractère en majuscule et
+ un chiffre.
+ </p>
+ <div class="modal-form-group">
+ <label for="newPasswordConfirm">Confirmer le nouveau mot de passe</label>
+ <div class="modal-form-item">
+ <input
+ id="newPasswordConfirm"
+ class="form-input password"
+ autocomplete="on"
+ [type]="isShowPassword.newPasswordConfirm ? 'text' : 'password'"
+ [(ngModel)]="newPasswordConfirm"
+ />
+ <app-svg-icon
+ tabindex="0"
+ [iconClass]="'icon-32 grey hover'"
+ [type]="'form'"
+ [icon]="isShowPassword.newPasswordConfirm ? 'eyePasswordInvisible' : 'eyePasswordVisible'"
+ (click)="showPassword(ShowPassword.newPasswordConfirm)"
+ (keyup.enter)="showPassword(ShowPassword.newPasswordConfirm)"
+ />
+ <app-svg-icon
+ [iconClass]="'icon-26'"
+ [type]="'form'"
+ [icon]="passwordValidConfirm(newPasswordConfirm, newPassword) ? 'validate' : 'notValidate'"
/>
</div>
</div>
</div>
- </div>
+ </app-v3-modal>
<!-- Modal: Delete account -->
- <div *ngIf="deleteAccountModal" class="modalBackground">
- <div class="modal">
- <div class="modalHeader">
- <div class="empty"></div>
- <h3>Supprimer mon compte</h3>
- <svg class="close" aria-hidden="true" (click)="closeModal()">
- <use [attr.xlink:href]="'assets/form/sprite.svg#close'" />
- </svg>
- </div>
-
- <div class="modalContent">
- <p class="warnText">
- Cette action est définitive, veuillez entrer votre mot de passe afin de supprimer votre compte
- </p>
- <div class="form-group">
- <label for="oldPassword">Mot de passe</label>
- <div fxLayout="row" fxLayoutAlign="none center" fxLayoutGap="13px">
- <input
- id="oldPassword"
- class="form-input password"
- autocomplete="on"
- [type]="isShowPassword.oldPassword ? 'text' : 'password'"
- [(ngModel)]="oldPassword"
- />
- <app-svg-icon
- [iconClass]="'icon-26 grey hover'"
- [type]="'form'"
- [icon]="'eyePassword'"
- (click)="showPassword(ShowPassword.oldPassword)"
- />
- </div>
- </div>
+ <app-v3-modal
+ [title]="'Supprimer mon compte'"
+ [opened]="deleteAccountModal"
+ [validateLabel]="'Valider'"
+ [validateDisabled]="!passwordValid(oldPassword)"
+ (closed)="$event ? confirmDeleteAccount() : closeModal()"
+ >
+ <div class="modal-content">
+ <p class="modalContent emphasized">
+ Cette action est définitive, veuillez entrer votre mot de passe afin de supprimer votre compte
+ </p>
- <div class="buttons">
- <app-v3-button [variant]="buttonTypeEnumV3.Secondary" [label]="'Annuler'" (action)="closeModal()" />
- <app-v3-button
- [variant]="buttonTypeEnumV3.Primary"
- [label]="'Supprimer'"
- [disabled]="!passwordValid(oldPassword)"
- (action)="confirmDeleteAccount()"
+ <div class="modal-form-group">
+ <label for="oldPassword">Mot de passe</label>
+ <div class="modal-form-item">
+ <input
+ id="oldPassword"
+ class="form-input password"
+ autocomplete="on"
+ [type]="isShowPassword.oldPassword ? 'text' : 'password'"
+ [(ngModel)]="oldPassword"
+ />
+ <app-svg-icon
+ [iconClass]="'icon-32 grey hover'"
+ [type]="'form'"
+ [icon]="isShowPassword.oldPassword ? 'eyePasswordInvisible' : 'eyePasswordVisible'"
+ (click)="showPassword(ShowPassword.oldPassword)"
/>
</div>
</div>
</div>
- </div>
+ </app-v3-modal>
</div>
diff --git a/src/app/profile/edit/edit.component.scss b/src/app/profile/edit/edit.component.scss
index 4eccd3dc2bdd0c9b9331dd9c6da25a34d24a5b98..304e81963d2f8e2d1b0b13b169c1c1c320e5753e 100644
--- a/src/app/profile/edit/edit.component.scss
+++ b/src/app/profile/edit/edit.component.scss
@@ -146,57 +146,39 @@
}
}
-.modalBackground {
- //bck fade
- .modal {
- max-width: 390px;
- background-color: $white;
- @media #{$tablet} {
- width: 85%;
- }
- .modalHeader {
- display: flex;
- justify-content: space-between;
- align-items: center;
- border: 1px solid $grey-6;
- padding: 0 8px;
- h3 {
- @include font-bold-18;
- }
- svg,
- .empty {
- height: 40px;
- width: 40px;
- }
- svg {
- cursor: pointer;
- }
+p {
+ text-align: center;
+ margin: 10px 0;
+ &.passwordInfo {
+ @include font-regular-14;
+ text-align: left;
+ padding: 0 10px;
+ &.warn {
+ color: $orange-warning;
}
+ }
+}
- .modalContent {
- padding: 24px 40px;
+.modal-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
- .warnText {
- margin: 0 auto 24px auto;
- }
- }
- p {
- text-align: center;
- margin: 10px 0;
- &.passwordInfo {
- @include font-regular-14;
- text-align: left;
- &.warn {
- color: $orange-warning;
- }
- }
- }
- .buttons {
- display: flex;
- justify-content: space-between;
- align-items: center;
- gap: 24px;
- padding-top: 8px;
- }
+.modal-form-group {
+ display: flex;
+ flex-direction: column;
+ max-width: fit-content;
+ padding: 8px 0;
+
+ label {
+ text-align: left;
+ }
+
+ .modal-form-item {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ gap: 16px;
}
}
diff --git a/src/app/profile/edit/edit.component.ts b/src/app/profile/edit/edit.component.ts
index 5097bccb9e2273d9cfeed33c036655b82474d334..a2bbfb820d72af20ab132a3ca86d7512a7547a56 100644
--- a/src/app/profile/edit/edit.component.ts
+++ b/src/app/profile/edit/edit.component.ts
@@ -3,7 +3,6 @@ import { ChangeDetectorRef, Component, ElementRef, Input, OnInit, ViewChild } fr
import { Router } from '@angular/router';
import * as _ from 'lodash';
import { lastValueFrom } from 'rxjs';
-import { catchError, first } from 'rxjs/operators';
import { Employer } from '../../models/employer.model';
import { Job } from '../../models/job.model';
import { User } from '../../models/user.model';
@@ -23,9 +22,9 @@ enum tabsEnum {
}
enum showPasswordEnum {
- oldPassword,
- newPassword,
- newPasswordConfirm,
+ oldPassword = 'oldPassword',
+ newPassword = 'newPassword',
+ newPasswordConfirm = 'newPasswordConfirm',
}
@Component({
selector: 'app-edit',
@@ -135,6 +134,9 @@ export class EditComponent implements OnInit {
password.match(CustomRegExp.LOWERCASE)
);
}
+ public passwordValidConfirm(passwordConfirm: string, password: string): boolean {
+ return this.passwordValid(passwordConfirm) && passwordConfirm === password;
+ }
getStatus(success: boolean): 'error' | 'success' {
return success ? 'success' : 'error';
@@ -170,6 +172,9 @@ export class EditComponent implements OnInit {
this.isShowPassword[key] = !this.isShowPassword[key];
}
public closeModal(): void {
+ this.oldPassword = '';
+ this.newPassword = '';
+ this.newPasswordConfirm = '';
this.emailModal = false;
this.passwordModal = false;
this.deleteAccountModal = false;
@@ -287,47 +292,50 @@ export class EditComponent implements OnInit {
this.profileService.changeEmail(this.newEmail, this.userProfile.email).subscribe(() => {
this.closeModal();
this.notificationService.showSuccess('Veuillez confirmer votre nouvelle adresse grâce au mail envoyé');
+ this.newEmail = '';
+ this.newEmailConfirm = '';
});
}
}
public confirmNewPassword(): void {
- if (this.passwordValid(this.newPassword) && this.newPassword === this.newPasswordConfirm) {
- this.profileService
- .changePassword(this.newPassword, this.oldPassword)
- .pipe(
- catchError(async (response: HttpErrorResponse) => {
- if (response.error.statusCode === 401) {
- this.notificationService.showError('Une erreur est survenue');
- throw new Error('Une erreur est survenue');
- }
- })
- )
- .subscribe(() => {
+ if (this.passwordValid(this.newPassword) && this.newPassword == this.newPasswordConfirm) {
+ this.profileService.changePassword(this.newPassword, this.oldPassword).subscribe({
+ next: () => {
this.notificationService.showSuccess('Votre mot de passe a bien été modifié');
this.closeModal();
- });
- this.oldPassword = '';
- this.isShowPassword.oldPassword = false;
+ },
+ error: (error: HttpErrorResponse) => {
+ if (error.status === 401) {
+ this.notificationService.showError('Ancien mot de passe invalide');
+ } else {
+ this.notificationService.showErrorPleaseRetry('Une erreur est survenue');
+ }
+ },
+ complete: () => {
+ this.oldPassword = '';
+ this.isShowPassword.oldPassword = false;
+ },
+ });
}
}
- public confirmDeleteAccount(): void {
- this.authService
- .login(this.userProfile.email, this.oldPassword)
- .pipe(first())
- .subscribe(
- () => {
- this.profileService.deleteProfile().subscribe(() => {
- this.notificationService.showSuccess('Votre compte a bien été supprimé');
- this.closeModal();
- this.authService.logout();
- });
- },
- () => {
- this.notificationService.showError('Une erreur est survenue');
- }
- );
+ public async confirmDeleteAccount(): Promise<void> {
+ try {
+ await lastValueFrom(this.authService.login(this.userProfile.email, this.oldPassword));
+
+ await lastValueFrom(this.profileService.deleteProfile());
+ this.closeModal();
+
+ this.notificationService.showSuccess('Votre compte a bien été supprimé');
+ setTimeout(() => this.authService.logout(), 3000); // Let time for user to view notification before logout
+ } catch (e) {
+ if (e.status === 401) {
+ this.notificationService.showError('Mot de passe invalide');
+ } else {
+ this.notificationService.showErrorPleaseRetry('Une erreur est survenue');
+ }
+ }
}
// Jobs
diff --git a/src/app/profile/personal-offer-edition/personal-offer-edition.component.html b/src/app/profile/personal-offer-edition/personal-offer-edition.component.html
index 89742a82493c43a1d07dca25927a6798781b8dac..2cfea661f06f559c4c7fe8b178333e7fdb95ddaa 100644
--- a/src/app/profile/personal-offer-edition/personal-offer-edition.component.html
+++ b/src/app/profile/personal-offer-edition/personal-offer-edition.component.html
@@ -85,30 +85,16 @@
</div>
</div>
- <!-- Modal: Delete offer -->
- <div *ngIf="deleteOfferModal" class="modalBackground">
- <div class="modal">
- <div class="modalHeader">
- <div class="empty"></div>
- <div class="modalTitleText">
- <p *ngIf="structureName" class="overtitle">{{ structureName }}</p>
- <h3>Supprimer mon offre</h3>
- </div>
- <svg class="close" aria-hidden="true" (click)="closeModal()">
- <use [attr.xlink:href]="'assets/form/sprite.svg#close'" />
- </svg>
- </div>
-
- <div class="modalContent">
- <p class="warnText">
- Vous êtes sur le point de supprimer votre offre de service, veuillez confirmer pour poursuivre
- </p>
-
- <div class="buttons">
- <app-v3-button [variant]="buttonTypeEnumV3.Secondary" [label]="'Annuler'" (action)="closeModal()" />
- <app-v3-button [variant]="buttonTypeEnumV3.Primary" [label]="'Supprimer'" (action)="confirmDeleteOffer()" />
- </div>
- </div>
+ <!-- Modal : Delete offer -->
+ <app-v3-modal
+ [title]="'Supprimer mon offre'"
+ [opened]="deleteOfferModal"
+ [validateLabel]="'Supprimer'"
+ (closed)="$event ? confirmDeleteOffer() : closeModal()"
+ >
+ <div class="deleteModal">
+ <p *ngIf="structureName" class="emphasized">{{ structureName }}</p>
+ <p>Vous êtes sur le point de supprimer votre offre de service, veuillez confirmer pour poursuivre</p>
</div>
- </div>
+ </app-v3-modal>
</div>
diff --git a/src/app/profile/personal-offer-edition/personal-offer-edition.component.scss b/src/app/profile/personal-offer-edition/personal-offer-edition.component.scss
index 4a5bb4c2757583eef8bb79cf4ca8f0158e917dae..3ae7ab18e7167a8b2c316ca147775063fb2c4dbc 100644
--- a/src/app/profile/personal-offer-edition/personal-offer-edition.component.scss
+++ b/src/app/profile/personal-offer-edition/personal-offer-edition.component.scss
@@ -109,60 +109,8 @@
}
}
-.modalBackground {
- //bck fade
- .modal {
- max-width: 390px;
- background-color: $white;
- @media #{$tablet} {
- width: 85%;
- }
- .modalHeader {
- display: flex;
- justify-content: space-between;
- align-items: center;
- border: 1px solid $grey-6;
- padding: 0 8px;
- .modalTitleText {
- flex-direction: column;
- margin: 1em 0;
- }
- h3 {
- @include font-bold-18;
- margin: 0;
- }
- a {
- align-self: flex-end;
- }
- svg,
- .empty {
- height: 40px;
- width: 40px;
- }
- svg {
- cursor: pointer;
- }
- }
-
- .modalContent {
- padding: 24px 40px;
-
- .warnText {
- text-align: center;
- margin: 0 auto 24px auto;
- }
- }
- .buttons {
- display: flex;
- justify-content: space-between;
- align-items: center;
- gap: 24px;
- }
- }
-}
-
-.overtitle {
- @include font-regular-18;
- color: $grey-3;
- margin: 0 0 3px;
+.deleteModal {
+ display: flex;
+ gap: 6px;
+ flex-direction: column;
}
diff --git a/src/app/profile/structure-add-member-modal/structure-add-member-modal.component.html b/src/app/profile/structure-add-member-modal/structure-add-member-modal.component.html
index 041109e12bf600e7025a26bba1ba1247a405d1c4..67387c0190302af168953897cf43da5225572fd7 100644
--- a/src/app/profile/structure-add-member-modal/structure-add-member-modal.component.html
+++ b/src/app/profile/structure-add-member-modal/structure-add-member-modal.component.html
@@ -1,31 +1,22 @@
-<div *ngIf="opened" class="modalBackground">
- <div class="modal">
- <div class="modalHeader">
- <h3>Ajouter un membre</h3>
- </div>
- <form class="modalContent" [formGroup]="formAddAccount">
- <div class="form-group" fxLayout="column">
- <label for="email">Email de la personne à ajouter</label>
- <p *ngIf="ownerAlreadyLinked" class="special invalid">L'email est déjà rattaché à la structure.</p>
- <div fxLayout="row" fxLayoutGap="13px">
- <input type="text" formControlName="email" class="form-input" autocomplete="on" />
- <app-svg-icon *ngIf="fAddAccount.email.valid" [type]="'form'" [icon]="'validate'" />
- <app-svg-icon
- *ngIf="fAddAccount.email.invalid && fAddAccount.email.value"
- [type]="'form'"
- [icon]="'notValidate'"
- />
- </div>
- </div>
- <div class="buttons" fxLayout="row" fxLayoutAlign="space-between center">
- <app-v3-button [variant]="buttonTypeEnumV3.Secondary" [label]="'Annuler'" (action)="closeModal(false)" />
- <app-v3-button
- [variant]="buttonTypeEnumV3.Primary"
- [label]="'Ajouter'"
- [disabled]="formAddAccount.invalid"
- (action)="addOwner()"
+<app-v3-modal
+ [title]="'Ajouter un membre'"
+ [opened]="opened"
+ [validateLabel]="'Ajouter'"
+ [validateDisabled]="formAddAccount?.invalid"
+ (closed)="closeModal($event)"
+>
+ <form class="modalFormContent" [formGroup]="formAddAccount">
+ <div class="form-group">
+ <label for="email">Email du membre à ajouter</label>
+ <div class="modalItem">
+ <input type="text" formControlName="email" class="form-input" autocomplete="on" />
+ <app-svg-icon *ngIf="fAddAccount.email.valid" [type]="'form'" [icon]="'validate'" />
+ <app-svg-icon
+ *ngIf="fAddAccount.email.invalid && fAddAccount.email.value"
+ [type]="'form'"
+ [icon]="'notValidate'"
/>
</div>
- </form>
- </div>
-</div>
+ </div>
+ </form>
+</app-v3-modal>
diff --git a/src/app/profile/structure-add-member-modal/structure-add-member-modal.component.scss b/src/app/profile/structure-add-member-modal/structure-add-member-modal.component.scss
index 77bd3939a84fe80f84bf7c8a1ef5c42bea8d922c..517c6eb28c94c18128ae29105e0d3c42a1d0425c 100644
--- a/src/app/profile/structure-add-member-modal/structure-add-member-modal.component.scss
+++ b/src/app/profile/structure-add-member-modal/structure-add-member-modal.component.scss
@@ -1,44 +1,13 @@
-@import 'color';
-@import 'typography';
-@import 'shapes';
-@import 'z-index';
+.modalFormContent {
+ display: flex;
+ justify-content: center;
-.modalBackground {
- .modal {
- max-width: 390px;
- background-color: $white;
- .modalHeader {
- display: flex;
- justify-content: center;
- align-items: center;
- border: 1px solid $grey-6;
- padding: 0 8px;
- h3 {
- @include font-bold-18;
- }
- }
-
- .modalContent {
- padding: 24px 40px;
- }
-
- p {
- text-align: center;
- margin: 10px 0;
-
- &.special {
- margin: 8px 0;
- @include font-regular-14;
- color: $grey-3;
- &.invalid {
- color: $orange-warning;
- }
- }
- }
+ .modalItem {
+ display: flex;
+ flex-direction: row;
- .buttons {
- gap: 24px;
- padding-top: 8px;
+ input {
+ margin-right: 13px;
}
}
}
diff --git a/src/app/profile/structure-add-member-modal/structure-add-member-modal.component.ts b/src/app/profile/structure-add-member-modal/structure-add-member-modal.component.ts
index 362aa8d8c81c519cd8710c9face627de34b7757a..b3893b542be73e6ae5e27ac2cd0c9b1498886d5e 100644
--- a/src/app/profile/structure-add-member-modal/structure-add-member-modal.component.ts
+++ b/src/app/profile/structure-add-member-modal/structure-add-member-modal.component.ts
@@ -1,10 +1,10 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { lastValueFrom } from 'rxjs';
import { StructureWithOwners } from '../../models/structureWithOwners.model';
import { TempUser } from '../../models/temp-user.model';
import { NotificationService } from '../../services/notification.service';
import { StructureService } from '../../services/structure.service';
-import { ButtonTypeV3 } from '../../shared/components/v3/button/button-type.enum';
import { CustomRegExp } from '../../utils/CustomRegExp';
@Component({
@@ -15,10 +15,8 @@ import { CustomRegExp } from '../../utils/CustomRegExp';
export class StructureAddMemberModalComponent implements OnInit {
@Input() public opened: boolean;
@Input() public structure: StructureWithOwners;
- @Output() closed = new EventEmitter();
- public buttonTypeEnumV3 = ButtonTypeV3;
+ @Output() closed = new EventEmitter<boolean>();
public formAddAccount: FormGroup;
- public ownerAlreadyLinked = false;
constructor(
private formBuilder: FormBuilder,
@@ -31,9 +29,11 @@ export class StructureAddMemberModalComponent implements OnInit {
email: ['', [Validators.required, Validators.pattern(CustomRegExp.EMAIL)]],
});
}
-
- public closeModal(value: boolean): void {
- this.closed.emit(value);
+ public async closeModal(memberAddRequested: boolean): Promise<void> {
+ if (memberAddRequested) {
+ await this.addOwner();
+ }
+ this.closed.emit(memberAddRequested);
}
// getter for form fields
@@ -41,25 +41,28 @@ export class StructureAddMemberModalComponent implements OnInit {
return this.formAddAccount.controls;
}
- public addOwner(): void {
+ public async addOwner(): Promise<void> {
// stop here if form is invalid
if (this.formAddAccount.invalid) {
return;
}
const user = new TempUser();
- user.email = this.fAddAccount.email.value.toLowerCase();
- this.structureService.addOwnerToStructure(user, this.structure.structure._id).subscribe(
- (res) => {
- if ((res as TempUser).email) {
- this.notificationService.showSuccess("La demande d'ajout a bien été effectuée");
- } else {
- this.notificationService.showSuccess('Le membre a bien été ajouté');
- }
- this.closed.emit(true);
- },
- () => {
- this.ownerAlreadyLinked = true;
+ user.email = this.fAddAccount.email.value;
+
+ try {
+ const res = await lastValueFrom(this.structureService.addOwnerToStructure(user, this.structure.structure._id));
+ if ((res as TempUser).email) {
+ this.notificationService.showSuccess("La demande d'ajout a bien été effectuée");
+ } else {
+ this.notificationService.showSuccess('Le membre a bien été ajouté');
}
- );
+ this.fAddAccount.email.setValue('');
+ } catch (e) {
+ if (e.status === 422) {
+ this.notificationService.showError('', `L'email ${user.email} est déjà rattaché à la structure`);
+ } else {
+ this.notificationService.showErrorPleaseRetry("Le membre n'a pas pu être ajouté");
+ }
+ }
}
}
diff --git a/src/app/profile/structure-members-management/structure-members-management.component.html b/src/app/profile/structure-members-management/structure-members-management.component.html
index 156797cf083bb4e4897c5391565f3dc71c006526..5ece0d9cd25b2e009b0f20ab69cb40a8f4acf975 100644
--- a/src/app/profile/structure-members-management/structure-members-management.component.html
+++ b/src/app/profile/structure-members-management/structure-members-management.component.html
@@ -81,20 +81,26 @@
[structure]="structureWithOwners"
(closed)="closeAddMemberModal($event)"
/>
-<!-- TODO: remove duplicate props opened -->
-<app-custom-modal
+
+<app-v3-modal
*ngIf="memberToExclude"
[opened]="excludeModalOpened"
- [content]="'Souhaitez-vous exclure ce membre\n(' + displayMemberName(memberToExclude) + ') ?'"
- [hideTitle]="true"
- [customValidationButton]="'Oui'"
+ [title]="'Exclure un membre'"
(closed)="excludeMember(memberToExclude, $event)"
-/>
-<app-custom-modal
+>
+ <div class="modalContent emphasized">
+ Souhaitez-vous exclure le membre {{ displayMemberName(memberToExclude) }} de la structure ?
+ </div>
+</app-v3-modal>
+
+<app-v3-modal
*ngIf="tempUserToCancel"
[opened]="cancelAddTempUserModalOpened"
- [content]="'Souhaitez-vous annuler la demande de rattachement de ce membre\n(' + tempUserToCancel.email + ') ?'"
- [hideTitle]="true"
- [customValidationButton]="'Oui'"
+ [title]="'Annuler la demande'"
(closed)="cancelAddTempUser(tempUserToCancel, $event)"
-/>
+>
+ <div class="modalContent emphasized">
+ Souhaitez-vous vraiment annuler la demande d’ajout à la structure de : <br />
+ {{ tempUserToCancel.email }} ?
+ </div>
+</app-v3-modal>
diff --git a/src/app/profile/structure-members-management/structure-members-management.component.scss b/src/app/profile/structure-members-management/structure-members-management.component.scss
index 8bc42d856c8ba7f6e105d1d8a1b74635c4f1a962..57822bb553ff96b580f2fef6202a0cb348877dd3 100644
--- a/src/app/profile/structure-members-management/structure-members-management.component.scss
+++ b/src/app/profile/structure-members-management/structure-members-management.component.scss
@@ -109,7 +109,9 @@
width: 184px !important;
height: 24px !important;
}
- ::ng-deep .modalBackground p {
- white-space: pre-wrap;
+ .button-member {
+ ::ng-deep .btn-regular.secondary .text {
+ color: $red !important;
+ }
}
}
diff --git a/src/app/profile/structures-management/structures-management.component.html b/src/app/profile/structures-management/structures-management.component.html
index 13a1d31566f40e5440ad1bb4ea3687fe6ef08803..1e59d8a2b1821bea54b29c67b3f01a72a276dfe6 100644
--- a/src/app/profile/structures-management/structures-management.component.html
+++ b/src/app/profile/structures-management/structures-management.component.html
@@ -71,30 +71,32 @@
</div>
</div>
</div>
-<app-custom-modal
+
+<app-v3-modal
[opened]="leaveModalOpened"
- [content]="'Souhaitez-vous quitter cette structure ?'"
- [hideTitle]="true"
- [customValidationButton]="'Oui'"
- [customCancelButton]="'Non'"
+ [validateLabel]="'Oui'"
+ [cancelLabel]="'Non'"
+ [title]="'Souhaitez-vous quitter cette structure ?'"
(closed)="leaveStructure(selectedStructure, $event)"
/>
-<app-custom-modal
+
+<app-v3-modal
[opened]="deleteModalOpened"
- [content]="'Souhaitez-vous supprimer cette structure ?'"
- [contentLight]="
- 'Si vous êtes le seul membre de cette structure, celle-ci est supprimée immédiatement. Si plusieurs membres sont présents dans cette structure, ils seront avertis et auront jusqu\'à 5 semaines pour s\'opposer à la suppression.'
- "
- [hideTitle]="true"
- [customValidationButton]="'Oui'"
- [customCancelButton]="'Non'"
+ [title]="'Supprimer la structure'"
(closed)="deleteStructure(selectedStructure, $event)"
-/>
-<app-custom-modal
+>
+ <div class="modalContent emphasized">
+ Si vous êtes le seul membre de cette structure, celle-ci est supprimée immédiatement. Si plusieurs membres sont
+ présents dans cette structure, ils seront avertis et auront jusqu'à 5 semaines pour s'opposer à la suppression.
+ </div>
+</app-v3-modal>
+
+<app-v3-modal
[opened]="cancelDeleteModalOpened"
- [content]="'Souhaitez-vous annuler la suppression de cette structure ?'"
- [hideTitle]="true"
- [customValidationButton]="'Oui'"
- [customCancelButton]="'Non'"
+ [validateLabel]="'Oui'"
+ [cancelLabel]="'Non'"
+ [title]="'Annuler la suppression'"
(closed)="cancelDelete(selectedStructure, $event)"
-/>
+>
+ <div class="modalContent emphasized">Souhaitez-vous vraiment annuler la suppression de la structure ?</div>
+</app-v3-modal>
diff --git a/src/app/shared/components/custom-modal/custom-modal.component.html b/src/app/shared/components/custom-modal/custom-modal.component.html
deleted file mode 100644
index afb6ba47e561acc6dc8ead378955205d38b2dcf1..0000000000000000000000000000000000000000
--- a/src/app/shared/components/custom-modal/custom-modal.component.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<div *ngIf="opened" class="modalBackground">
- <div class="modal">
- <div class="contentModal" fxLayout="column" fxLayoutAlign="space-around center">
- <div class="headerModal">
- <svg aria-hidden="true" (click)="closeModal(false)">
- <use [attr.xlink:href]="'assets/form/sprite.svg#close'" />
- </svg>
- <div class="contentText">
- <h3 *ngIf="!hideTitle && customTitle">{{ customTitle }}</h3>
- <h3 *ngIf="!hideTitle && !customTitle">ATTENTION</h3>
- <p [ngClass]="{ mainText: hideTitle }">{{ content }}</p>
- <p *ngIf="contentLight" class="light">{{ contentLight }}</p>
- </div>
- </div>
- <div class="footerModal" fxLayout="row" fxLayoutAlign="space-around center" fxLayoutGap="8px">
- <app-v3-button
- [variant]="buttonTypeEnumV3.Secondary"
- [label]="customCancelButton || 'Annuler'"
- (action)="closeModal(false)"
- />
- <app-v3-button
- [variant]="buttonTypeEnumV3.Primary"
- [label]="customValidationButton || 'Valider'"
- (action)="closeModal(true)"
- />
- </div>
- </div>
- </div>
-</div>
diff --git a/src/app/shared/components/custom-modal/custom-modal.component.scss b/src/app/shared/components/custom-modal/custom-modal.component.scss
deleted file mode 100644
index 02314a9585fe4704655f07882a5079608feb1838..0000000000000000000000000000000000000000
--- a/src/app/shared/components/custom-modal/custom-modal.component.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-@import 'color';
-@import 'typography';
-@import 'shapes';
-@import 'z-index';
-
-.modalBackground {
- .modal {
- max-width: 390px;
- .contentModal {
- padding: 15px 5px 15px 45px;
- .headerModal {
- display: flex;
- flex-direction: row-reverse;
- svg {
- cursor: pointer;
- height: 40px;
- width: 40px;
- }
- .contentText {
- flex-direction: column;
- max-width: 300px;
- h3 {
- @include font-bold-18;
- color: $red;
- margin: 10px 0 25px;
- text-align: center;
- }
- p {
- text-align: center;
- margin: 10px;
- &.light {
- @include font-regular-13;
- }
- }
- p.mainText {
- @include font-regular-18;
- }
- }
- }
- .footerModal {
- padding-right: 40px;
- gap: 8px;
- }
- }
- }
-}
diff --git a/src/app/shared/components/custom-modal/custom-modal.component.ts b/src/app/shared/components/custom-modal/custom-modal.component.ts
deleted file mode 100644
index bc2b98e9a40f0b0668b9c9dff2e52fe0211152f4..0000000000000000000000000000000000000000
--- a/src/app/shared/components/custom-modal/custom-modal.component.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { ButtonTypeV3 } from '../v3/button/button-type.enum';
-
-@Component({
- selector: 'app-custom-modal',
- templateUrl: './custom-modal.component.html',
- styleUrls: ['./custom-modal.component.scss'],
-})
-export class CustomModalComponent {
- @Input() public opened: boolean;
- @Input() public content: string;
- @Input() public contentLight?: string;
- @Input() public hideTitle?: boolean;
- @Input() public customTitle?: string;
- @Input() public customValidationButton?: string;
- @Input() public customCancelButton?: string;
- @Output() closed = new EventEmitter<boolean>();
- public buttonTypeEnumV3 = ButtonTypeV3;
-
- public closeModal(value: boolean): void {
- this.closed.emit(value);
- }
-}
diff --git a/src/app/shared/components/data-share-consent/data-share-consent.component.html b/src/app/shared/components/data-share-consent/data-share-consent.component.html
index 5506dc92f2454acd97bc308c2100bcb44363c2e8..0b7bb84ad5225f8c098565c213676877e6f64e8a 100644
--- a/src/app/shared/components/data-share-consent/data-share-consent.component.html
+++ b/src/app/shared/components/data-share-consent/data-share-consent.component.html
@@ -1,63 +1,44 @@
-<div *ngIf="opened" class="modalBackground">
- <div class="modal">
- <div class="contentModal" fxLayout="column" fxLayoutAlign="space-around start">
- <div class="form">
- <div class="modalTitle">
- <h3>
- Acceptez-vous que les informations de vos structures soient mises à disposition sur la plateforme
- data.grandlyon.com* ?
- </h3>
- </div>
- <form class="dataShareConsent" [formGroup]="consentForm">
- <app-radio-form
- *ngIf="dataConsentPendingStructures && dataConsentPendingStructures.length > 1"
- name="Toutes les structures"
- layoutGap="8px"
- class="firstLine"
- [horizontal]="true"
- [events]="eventsSubject.asObservable()"
- (selectedEvent)="onRadioBtnChangeAll($event)"
- />
+<app-v3-modal
+ [opened]="opened"
+ [validateLabel]="'Valider'"
+ [singleButton]="true"
+ [validateDisabled]="!isPageValid"
+ (closed)="onSubmit()"
+>
+ <h3>
+ Acceptez-vous que les informations de vos structures soient mises à disposition sur la plateforme
+ data.grandlyon.com* ?
+ </h3>
+ <form class="dataShareConsent" [formGroup]="consentForm">
+ <app-radio-form
+ *ngIf="dataConsentPendingStructures && dataConsentPendingStructures.length > 1"
+ name="Toutes les structures"
+ layoutGap="8px"
+ class="firstLine"
+ [horizontal]="true"
+ [events]="eventsSubject.asObservable()"
+ (selectedEvent)="onRadioBtnChangeAll($event)"
+ />
- <div *ngFor="let structure of dataConsentPendingStructures">
- <app-radio-form
- layoutGap="8px"
- name="{{ structure.structureName }}"
- [horizontal]="true"
- [selectedOption]="
- structure.dataShareConsentDate === undefined
- ? null
- : structure.dataShareConsentDate === null
- ? false
- : true
- "
- (selectedEvent)="onRadioBtnChangeStructure(structure._id, $event)"
- />
- </div>
-
- <p class="informationEndForm">
- <span class="asterisk">*</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>
-
- <div class="footerModal" fxLayout="row" fxLayoutAlign="space-around center">
- <button
- type="button"
- class="btn-primary"
- [disabled]="!isPageValid"
- [ngClass]="{ invalid: !isPageValid }"
- (click)="onSubmit()"
- >
- Valider
- </button>
- </div>
- </form>
- </div>
+ <div *ngFor="let structure of dataConsentPendingStructures">
+ <app-radio-form
+ layoutGap="8px"
+ name="{{ structure.structureName }}"
+ [horizontal]="true"
+ [selectedOption]="
+ structure.dataShareConsentDate === undefined ? null : structure.dataShareConsentDate === null ? false : true
+ "
+ (selectedEvent)="onRadioBtnChangeStructure(structure._id, $event)"
+ />
</div>
- </div>
-</div>
+
+ <p class="informationEndForm">
+ <span class="asterisk">*</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>
+</app-v3-modal>
diff --git a/src/app/shared/components/data-share-consent/data-share-consent.component.scss b/src/app/shared/components/data-share-consent/data-share-consent.component.scss
index e60753d79570cd82ffceb3b0db936072bcc7c870..e536fd11efe8f8c7fd0dfcce684e96a422928c84 100644
--- a/src/app/shared/components/data-share-consent/data-share-consent.component.scss
+++ b/src/app/shared/components/data-share-consent/data-share-consent.component.scss
@@ -6,19 +6,6 @@
@import 'hyperlink';
@import '../radio-form/radio-form.component.scss';
-.modalBackground .modal {
- max-width: 700px;
- @media #{$large-phone} {
- max-width: 95%;
- }
-}
-.modalTitle {
- display: flex;
- h3 {
- margin-top: 6%;
- width: 90%;
- }
-}
h3 {
@include font-bold-26;
color: $black;
@@ -29,13 +16,6 @@ h3 {
margin: 0 32px;
margin-bottom: 8%;
}
-.footerModal {
- button {
- &.invalid {
- opacity: 0.4;
- }
- }
-}
.dataShareConsent {
::ng-deep button,
::ng-deep .name {
diff --git a/src/app/shared/components/data-share-consent/data-share-consent.component.ts b/src/app/shared/components/data-share-consent/data-share-consent.component.ts
index 80e66d683e42eeba00bec589e665d4ab2da49313..04f94de43b021c0769f8fba43128a06c0b0de1fa 100644
--- a/src/app/shared/components/data-share-consent/data-share-consent.component.ts
+++ b/src/app/shared/components/data-share-consent/data-share-consent.component.ts
@@ -31,6 +31,11 @@ export class DataShareConsentComponent implements OnInit {
}
}
+ ngAfterViewInit(): void {
+ // Emit null to eventsSubject so that the radio button is not pre selected when undefined
+ this.eventsSubject.next(null);
+ }
+
public getFormControl(nameControl: string): AbstractControl {
return this.consentForm.get(nameControl);
}
diff --git a/src/app/shared/components/index.ts b/src/app/shared/components/index.ts
index eafcf80550125e10083d4fbbecc53dd8f82bd80e..7a1f415130efbdb8ab770d104c4523825b6474aa 100644
--- a/src/app/shared/components/index.ts
+++ b/src/app/shared/components/index.ts
@@ -6,18 +6,14 @@ import { AddressAutocompleteComponent } from './address-autocomplete/address-aut
import { AppointmentChoiceComponent } from './appointment-choice/appointment-choice.component';
import { ButtonComponent } from './button/button.component';
import { CheckboxFormComponent } from './checkbox-form/checkbox-form.component';
-import { CustomModalComponent } from './custom-modal/custom-modal.component';
import { HourPickerComponent } from './hour-picker/hour-picker.component';
import { LogoCardComponent } from './logo-card/logo-card.component';
-import { ModalConfirmationComponent } from './modal-confirmation/modal-confirmation.component';
-import { ModalJoinConfirmationComponent } from './modal-join-confirmation/modal-join-confirmation.component';
import { PasswordFormComponent } from './password-form/password-form.component';
import { RadioFormComponent } from './radio-form/radio-form.component';
import { StructureDetailPrintComponent } from './structure-detail-print/structure-detail-print.component';
import { StructurePmrComponent } from './structure-pmr/structure-pmr.component';
import { StructureTypePickerComponent } from './structure-type-picker/structure-type-picker.component';
import { SvgIconComponent } from './svg-icon/svg-icon.component';
-import { TextInputModalComponent } from './text-input-modal/text-input-modal.component';
import { TrainingTypePickerComponent } from './training-type-picker/training-type-picker.component';
import { ButtonV3Component } from './v3/button/button.component';
import { IconButtonV3Component } from './v3/button/icon-button/icon-button.component';
@@ -27,6 +23,7 @@ import { CollapseHeaderComponent } from './v3/collapse/collapse-header/collapse-
import { CollapseComponent } from './v3/collapse/collapse.component';
import { InputV3Component } from './v3/input/input.component';
import { LabelCheckboxV3Component } from './v3/label-checkbox/label-checkbox.component';
+import { ModalV3Component } from './v3/modal/modal.component';
import { RadioV3Component } from './v3/radio/radio.component';
import { SearchBarV3Component } from './v3/search-bar/search-bar.component';
import { TagItemV3Component } from './v3/tag/tag-item/tag-item.component';
@@ -42,12 +39,11 @@ export {
CollapseComponent,
CollapseContentComponent,
CollapseHeaderComponent,
- CustomModalComponent,
HourPickerComponent,
InformationStepComponent,
LabelCheckboxV3Component,
LogoCardComponent,
- ModalConfirmationComponent,
+ ModalV3Component,
PasswordFormComponent,
ProgressBarComponent,
RadioFormComponent,
@@ -57,7 +53,6 @@ export {
StructureTypePickerComponent,
SvgIconComponent,
TagItemV3Component,
- TextInputModalComponent,
TrainingTypePickerComponent,
};
@@ -72,15 +67,13 @@ export const SharedComponents = [
CollapseComponent,
CollapseContentComponent,
CollapseHeaderComponent,
- CustomModalComponent,
HourPickerComponent,
IconButtonV3Component,
InformationStepComponent,
InputV3Component,
LabelCheckboxV3Component,
LogoCardComponent,
- ModalConfirmationComponent,
- ModalJoinConfirmationComponent,
+ ModalV3Component,
PasswordFormComponent,
ProgressBarComponent,
RadioFormComponent,
@@ -92,7 +85,6 @@ export const SharedComponents = [
StructureTypePickerComponent,
SvgIconComponent,
TagItemV3Component,
- TextInputModalComponent,
TrainingTypePickerComponent,
TextareaV3Component,
];
diff --git a/src/app/shared/components/modal-confirmation/modal-confirmation.component.html b/src/app/shared/components/modal-confirmation/modal-confirmation.component.html
deleted file mode 100644
index 5ee45d109c4c0ee0d0794492b8a514480dcf502f..0000000000000000000000000000000000000000
--- a/src/app/shared/components/modal-confirmation/modal-confirmation.component.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<div *ngIf="opened" class="modalBackground">
- <div class="modal">
- <div class="contentModal" fxLayout="column" fxLayoutAlign="space-around center">
- <div class="headerModal" fxLayout="row" fxLayoutAlign="space-between center">
- <div class="empty"></div>
- <h3>ATTENTION</h3>
- <svg class="hide" aria-hidden="true" (click)="closeModal(false)">
- <use [attr.xlink:href]="'assets/form/sprite.svg#close'" />
- </svg>
- </div>
- <p>{{ content }}</p>
- <div class="footerModal" fxLayout="row" fxLayoutAlign="space-around center" fxLayoutGap="8px">
- <app-v3-button
- *ngIf="!singleButton"
- [variant]="buttonTypeEnumV3.Secondary"
- [label]="'Annuler'"
- (action)="closeModal(false)"
- />
- <app-v3-button
- [variant]="buttonTypeEnumV3.Primary"
- [label]="customConfirmationText ? customConfirmationText : 'Confirmer'"
- (action)="closeModal(true)"
- />
- </div>
- </div>
- </div>
-</div>
diff --git a/src/app/shared/components/modal-confirmation/modal-confirmation.component.scss b/src/app/shared/components/modal-confirmation/modal-confirmation.component.scss
deleted file mode 100644
index a26a8b4f5561b4a5f73bf6c52449e2da9858e1eb..0000000000000000000000000000000000000000
--- a/src/app/shared/components/modal-confirmation/modal-confirmation.component.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-@import 'color';
-@import 'typography';
-@import 'shapes';
-@import 'z-index';
-
-.modalBackground {
- .modal {
- max-width: 390px;
- .contentModal {
- padding: 20px 40px;
-
- .headerModal {
- width: 390px;
- padding: 0 8px;
- h3 {
- @include font-bold-18;
- color: $red;
- margin: 10px 0;
- }
- svg,
- .empty {
- height: 40px;
- width: 40px;
- }
- svg {
- cursor: pointer;
- }
- }
- p {
- text-align: center;
- margin: 10px 0;
- }
- .footerModal {
- gap: 8px;
- }
- }
- }
-}
diff --git a/src/app/shared/components/modal-confirmation/modal-confirmation.component.ts b/src/app/shared/components/modal-confirmation/modal-confirmation.component.ts
deleted file mode 100644
index 87c91cbf9eae3827b65221df915f2db545adb0c3..0000000000000000000000000000000000000000
--- a/src/app/shared/components/modal-confirmation/modal-confirmation.component.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { ButtonTypeV3 } from '../v3/button/button-type.enum';
-
-@Component({
- selector: 'app-modal-confirmation',
- templateUrl: './modal-confirmation.component.html',
- styleUrls: ['./modal-confirmation.component.scss'],
-})
-export class ModalConfirmationComponent {
- @Input() public opened: boolean;
- @Input() public content: string;
- @Input() public customConfirmationText?: string;
- @Input() public singleButton?: boolean;
- @Output() closed = new EventEmitter<boolean>();
- public buttonTypeEnumV3 = ButtonTypeV3;
-
- public closeModal(value: boolean): void {
- this.closed.emit(value);
- }
-}
diff --git a/src/app/shared/components/modal-join-confirmation/modal-join-confirmation.component.html b/src/app/shared/components/modal-join-confirmation/modal-join-confirmation.component.html
deleted file mode 100644
index e056e95e27f3fc9b603af11b4c49dce86bb9d768..0000000000000000000000000000000000000000
--- a/src/app/shared/components/modal-join-confirmation/modal-join-confirmation.component.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<div *ngIf="opened" class="modalBackground">
- <div class="modal">
- <div class="headerModal" fxLayout="row" fxLayoutAlign="space-between center">
- <div class="empty"></div>
- <h1>{{ title }}</h1>
- <svg class="hide" aria-hidden="true" tabindex="0" (click)="closeModal(false)" (keyup.enter)="closeModal(false)">
- <use [attr.xlink:href]="'assets/form/sprite.svg#close'" />
- </svg>
- </div>
- <div class="contentModal" fxLayout="column" fxLayoutAlign="space-around center">
- <p class="primaryContent">{{ primaryContent }}</p>
- <p *ngIf="secondaryContent" class="secondaryContent">{{ secondaryContent }}</p>
- <div class="footerModal" fxLayout="row" fxLayoutAlign="space-around center" fxLayoutGap="8px">
- <app-v3-button
- *ngIf="displayCancelButton"
- [variant]="buttonTypeEnumV3.Secondary"
- [label]="'Annuler'"
- (action)="closeModal(false)"
- />
- <app-v3-button
- [variant]="buttonTypeEnumV3.Primary"
- [label]="customConfirmationText ? customConfirmationText : 'Confirmer'"
- (action)="closeModal(true)"
- />
- </div>
- </div>
- </div>
-</div>
diff --git a/src/app/shared/components/modal-join-confirmation/modal-join-confirmation.component.scss b/src/app/shared/components/modal-join-confirmation/modal-join-confirmation.component.scss
deleted file mode 100644
index 11309e8e4f678e992bfc050e7b26353a64ad816b..0000000000000000000000000000000000000000
--- a/src/app/shared/components/modal-join-confirmation/modal-join-confirmation.component.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-@import 'color';
-@import 'typography';
-@import 'shapes';
-@import 'z-index';
-
-.modalBackground {
- .modal {
- max-width: 400px;
- .headerModal {
- margin-top: 0.5rem;
- width: 100%;
- h1 {
- @include font-bold-18;
- margin: 10px 0;
- }
- svg,
- .empty {
- height: 40px;
- width: 40px;
- }
- svg {
- cursor: pointer;
- }
- }
- .contentModal {
- padding: 0 1.5rem 1rem 1.5rem;
- p {
- @include font-regular-18;
- text-align: center;
- margin: 10px 0;
- }
- .secondaryContent {
- color: $red;
- margin-top: -10px;
- }
- .footerModal {
- gap: 8px;
- }
- }
- }
-}
diff --git a/src/app/shared/components/modal-join-confirmation/modal-join-confirmation.component.ts b/src/app/shared/components/modal-join-confirmation/modal-join-confirmation.component.ts
deleted file mode 100644
index 8b21ee167b313c3ac103a47c7d47cc64426a46fa..0000000000000000000000000000000000000000
--- a/src/app/shared/components/modal-join-confirmation/modal-join-confirmation.component.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { ButtonTypeV3 } from '../v3/button/button-type.enum';
-
-@Component({
- selector: 'app-join-modal-confirmation',
- templateUrl: './modal-join-confirmation.component.html',
- styleUrls: ['./modal-join-confirmation.component.scss'],
-})
-export class ModalJoinConfirmationComponent {
- @Input() public opened: boolean;
- @Input() public title: string;
- @Input() public primaryContent: string;
- @Input() public secondaryContent?: string;
- @Input() public customConfirmationText?: string;
- @Input() public displayCancelButton = true;
- @Output() closed = new EventEmitter<boolean>();
- public buttonTypeEnumV3 = ButtonTypeV3;
-
- public closeModal(value: boolean): void {
- this.closed.emit(value);
- }
-}
diff --git a/src/app/shared/components/svg-icon/svg-icon.component.scss b/src/app/shared/components/svg-icon/svg-icon.component.scss
index f8e5ff470faccdda09767232f048a24f26b55288..4f72ae4dafe767b7a370a7dc428572debfe9eae8 100644
--- a/src/app/shared/components/svg-icon/svg-icon.component.scss
+++ b/src/app/shared/components/svg-icon/svg-icon.component.scss
@@ -10,6 +10,7 @@ $sizes: (
16: 16px,
20: 20px,
22: 22px,
+ 24: 24px,
26: 26px,
28: 28px,
30: 30px,
diff --git a/src/app/shared/components/text-input-modal/text-input-modal.component.html b/src/app/shared/components/text-input-modal/text-input-modal.component.html
deleted file mode 100644
index 94af213604dc99b52a56d34847eb2ced97121867..0000000000000000000000000000000000000000
--- a/src/app/shared/components/text-input-modal/text-input-modal.component.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<div *ngIf="opened" class="modalBackground" ng-controller="myCtrl">
- <div class="modal">
- <div class="contentModal" fxLayout="column" fxLayoutAlign="space-around center">
- <h3>Signaler une erreur</h3>
- <p>{{ content }}</p>
- <textarea #myText id="story" class="textarea" name="story" rows="6" placeholder="{{ placeholder }}"></textarea>
- <div class="footerModal">
- <app-v3-button
- [style]="buttonTypeEnumV3.Secondary"
- [label]="'Annuler'"
- (action)="closeModal(false, myText.value)"
- />
- <app-v3-button
- [style]="buttonTypeEnumV3.Primary"
- [label]="'Confirmer'"
- (action)="closeModal(true, myText.value)"
- />
- </div>
- </div>
- </div>
-</div>
diff --git a/src/app/shared/components/text-input-modal/text-input-modal.component.scss b/src/app/shared/components/text-input-modal/text-input-modal.component.scss
deleted file mode 100644
index ba3096428169107b250aff50d85b8c7335d946cd..0000000000000000000000000000000000000000
--- a/src/app/shared/components/text-input-modal/text-input-modal.component.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-@import 'color';
-@import 'typography';
-@import 'shapes';
-@import 'z-index';
-
-.modalBackground {
- .modal {
- .contentModal {
- padding: 20px;
-
- p {
- padding: 0 1rem;
- }
-
- .textarea {
- padding: 13px 8px;
- background: $grey-9;
- border: 1px solid $grey-5;
- border-radius: 1px;
- resize: none;
- width: 90%;
- @include font-regular-16;
- }
-
- .footerModal {
- display: flex;
- justify-content: center;
- gap: 1rem;
- }
- }
- }
-}
diff --git a/src/app/shared/components/text-input-modal/text-input-modal.component.ts b/src/app/shared/components/text-input-modal/text-input-modal.component.ts
deleted file mode 100644
index 0976700335e2435a48e9398466379d066db7eae6..0000000000000000000000000000000000000000
--- a/src/app/shared/components/text-input-modal/text-input-modal.component.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { ButtonTypeV3 } from '../v3/button/button-type.enum';
-
-@Component({
- selector: 'app-text-input-modal',
- templateUrl: './text-input-modal.component.html',
- styleUrls: ['./text-input-modal.component.scss'],
-})
-export class TextInputModalComponent {
- @Input() public opened: boolean;
- @Input() public content: string;
- @Input() public placeholder: string;
- @Output() closed = new EventEmitter<{ content: string; shouldSend: boolean }>();
- @Output() newContent = new EventEmitter<{ content: string; shouldSend: boolean }>();
- public buttonTypeEnumV3 = ButtonTypeV3;
- public myContent: string;
-
- public closeModal(shouldSend: boolean, content: string): void {
- this.newContent.emit({ shouldSend, content });
- }
-}
diff --git a/src/app/shared/components/v3/modal/modal.component.html b/src/app/shared/components/v3/modal/modal.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..dc5d1dbc39411a617f2cf598a5890db9ec148bcc
--- /dev/null
+++ b/src/app/shared/components/v3/modal/modal.component.html
@@ -0,0 +1,34 @@
+<div *ngIf="opened" class="modalBackground">
+ <div class="modal">
+ <div class="headerModal">
+ <h3>{{ title }}</h3>
+ <app-svg-icon
+ tabindex="0"
+ alt="Fermer la fenêtre"
+ [type]="'ico'"
+ [icon]="'close'"
+ [iconClass]="'icon-24 hover'"
+ (keyup.enter)="closeModal(false)"
+ (click)="closeModal(false)"
+ />
+ </div>
+ <p><ng-content></ng-content></p>
+ <div class="footerModal">
+ <app-v3-button
+ *ngIf="!singleButton"
+ [label]="cancelLabel"
+ [variant]="buttonTypeEnum.Secondary"
+ [size]="'medium'"
+ (action)="closeModal(false)"
+ />
+ <app-v3-button
+ [label]="validateLabel"
+ [variant]="buttonTypeEnum.Primary"
+ [wide]="singleButton"
+ [size]="'medium'"
+ [disabled]="validateDisabled"
+ (action)="closeModal(true)"
+ />
+ </div>
+ </div>
+</div>
diff --git a/src/app/shared/components/v3/modal/modal.component.scss b/src/app/shared/components/v3/modal/modal.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..033ccb4818cfa39b659f1f3fd71c5188f0f394be
--- /dev/null
+++ b/src/app/shared/components/v3/modal/modal.component.scss
@@ -0,0 +1,69 @@
+@import 'color';
+@import 'typography';
+@import 'breakpoint';
+@import 'z-index';
+
+.modalBackground {
+ width: 100%;
+ height: 100%;
+ z-index: $modal-z-index;
+ position: fixed;
+ top: 0;
+ left: 0;
+ background-color: $modal-background;
+ .modal {
+ display: flex;
+ width: 400px;
+ max-height: 90%;
+ padding: 20px;
+ flex-direction: column;
+ gap: 16px;
+ border-radius: 8px;
+ background: $white;
+ overflow: auto;
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ box-shadow: $box-shadow;
+ @media #{$phone} {
+ max-height: 90%;
+ width: 85%;
+ position: fixed;
+ }
+ .headerModal {
+ display: flex;
+ padding-left: 24px;
+ align-items: center;
+ h3 {
+ @include font-bold-18;
+ margin: 0;
+ width: 100%;
+ text-align: center;
+ }
+ }
+ p {
+ text-align: center;
+ margin: 0;
+ }
+ // these styles are used by pages using this component's modal
+ ::ng-deep .modalContent {
+ display: flex;
+ flex-direction: column;
+ @include font-bold-18;
+ gap: 8px;
+ }
+ ::ng-deep .emphasized {
+ color: $red;
+ }
+ .footerModal {
+ display: flex;
+ margin-top: 8px;
+ gap: 0.75rem;
+ justify-content: center;
+ app-button {
+ flex: 1;
+ }
+ }
+ }
+}
diff --git a/src/app/shared/components/v3/modal/modal.component.ts b/src/app/shared/components/v3/modal/modal.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..83a6f73cf36a8077c7ec0b4593c8f1958b308b0a
--- /dev/null
+++ b/src/app/shared/components/v3/modal/modal.component.ts
@@ -0,0 +1,39 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ButtonTypeV3 } from '../button/button-type.enum';
+
+@Component({
+ selector: 'app-v3-modal',
+ templateUrl: './modal.component.html',
+ styleUrls: ['./modal.component.scss'],
+})
+export class ModalV3Component {
+ /* Is modal openned ? */
+ @Input() public opened: boolean;
+
+ /* Content of the modal (between title and buttons) */
+ @Input() public content: string;
+
+ /* Label of validate button */
+ @Input() public validateLabel?: string = 'Valider';
+
+ /* Label of cancel button ? */
+ @Input() public cancelLabel?: string = 'Annuler';
+
+ /* Content of modal title */
+ @Input() public title?: string;
+
+ /* Does the modal need to have only one wide button instead of two regular ones ? */
+ @Input() public singleButton?: boolean = false;
+
+ /* Disable validate button ? */
+ @Input() public validateDisabled?: boolean = false;
+
+ /* Close event */
+ @Output() closed = new EventEmitter<boolean>();
+
+ public buttonTypeEnum = ButtonTypeV3;
+
+ public closeModal(value: boolean): void {
+ this.closed.emit(value);
+ }
+}
diff --git a/src/app/shared/components/v3/modal/modal.stories.ts b/src/app/shared/components/v3/modal/modal.stories.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a2844228e42cbf21e44a2f730dd238a4808458ad
--- /dev/null
+++ b/src/app/shared/components/v3/modal/modal.stories.ts
@@ -0,0 +1,78 @@
+import { CommonModule } from '@angular/common';
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { SvgIconComponent } from '../../svg-icon/svg-icon.component';
+import { ButtonV3Component } from '../button/button.component';
+import { ModalV3Component } from './modal.component';
+
+// More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction
+const meta: Meta<ModalV3Component> = {
+ title: 'Components/Modal',
+ component: ModalV3Component,
+ tags: ['autodocs'],
+ decorators: [
+ moduleMetadata({
+ declarations: [SvgIconComponent, ButtonV3Component],
+ imports: [CommonModule],
+ }),
+ ],
+ argTypes: {},
+};
+
+export default meta;
+type Story = StoryObj<ModalV3Component>;
+
+export const SingleButton: Story = {
+ args: {
+ opened: true,
+ title: 'Title',
+ content: 'Test text',
+ validateLabel: 'Valider',
+ cancelLabel: 'Annuler',
+ singleButton: true,
+ },
+ render: (args: any) => ({
+ template: `<app-v3-modal [opened]="${args.opened}"
+ [validateLabel]="'${args.validateLabel}'"
+ [cancelLabel]="'${args.cancelLabel}'"
+ [title]="'${args.title}'"
+ [singleButton]="${args.singleButton}"
+ >
+ ${args.content}
+ </app-v3-modal>`,
+ }),
+};
+
+export const TwoButtons: Story = {
+ args: {
+ ...SingleButton.args,
+ singleButton: false,
+ },
+ render: SingleButton.render,
+};
+
+export const FormattedMessage: Story = {
+ args: {
+ ...SingleButton.args,
+ singleButton: false,
+ title: 'Travaillez-vous ici ?',
+ content:
+ '<div class="modalContent"> \
+ Un message sera envoyé aux membres de la structure : <br /> \
+ <span class="emphasized">Le Son du Clic</span> \
+ </div>',
+ },
+ render: SingleButton.render,
+};
+
+export const WithImage: Story = {
+ args: {
+ ...SingleButton.args,
+ content:
+ '<div> \
+ <img src="../../../../../assets/img/resin-login.svg" alt="resin-login-image" /> \
+ <h3>Additional text</h3> \
+ </div>',
+ },
+ render: SingleButton.render,
+};
diff --git a/src/app/structure-list/components/more-filters/more-filters.component.html b/src/app/structure-list/components/more-filters/more-filters.component.html
index d93af4881982aa46a8e8f687cd5a3a97b67e552f..ade3dd10217dcd29a0aca0b9527b86db1aea5ed8 100644
--- a/src/app/structure-list/components/more-filters/more-filters.component.html
+++ b/src/app/structure-list/components/more-filters/more-filters.component.html
@@ -1,4 +1,4 @@
-<div *ngIf="modalType" [ngClass]="['modal', 'modal' + getModalType()]">
+<div *ngIf="modalType" [ngClass]="['filterMenu', 'modal' + getModalType()]">
<!-- Filter with single category -->
<div *ngIf="categories.length === 1" class="contentModal max-height" fxLayout="row wrap" fxLayoutAlign="flex-start">
<div *ngFor="let c of categories" class="blockFiltre">
@@ -37,7 +37,7 @@
<div *ngIf="getModalType() === 'moreFilters'" class="headerMoreFilters">
Plus de filtres
<div class="iconClose" tabindex="0" (click)="closeModal()" (keyup.enter)="closeModal()">
- <app-svg-icon [iconClass]="'icon-28'" [iconColor]="'grey-1'" [icon]="'closeModal'" [type]="'ico'" />
+ <app-svg-icon [iconClass]="'icon-28'" [iconColor]="'grey-1'" [icon]="'close'" [type]="'ico'" />
</div>
</div>
<div class="scroll-container">
diff --git a/src/app/structure-list/components/structure-details/structure-details.component.html b/src/app/structure-list/components/structure-details/structure-details.component.html
index ee614452c523f7322afabeb0e179d0bd61071a80..9caa322ae6d6785f2f5d1f5e8749c8e74f3187a5 100644
--- a/src/app/structure-list/components/structure-details/structure-details.component.html
+++ b/src/app/structure-list/components/structure-details/structure-details.component.html
@@ -483,50 +483,54 @@
</div>
</div>
-<app-modal-confirmation
- [opened]="deleteModalOpened"
- [content]="'Voulez-vous vraiment supprimer cette structure ?'"
- (closed)="deleteStructure($event)"
-/>
+<app-v3-modal [title]="'ATTENTION'" [opened]="deleteModalOpened" (closed)="deleteStructure($event)">
+ Voulez-vous vraiment supprimer cette structure ?
+</app-v3-modal>
-<app-join-modal-confirmation
- [opened]="claimModalOpened"
- [title]="'Travaillez-vous ici ?'"
- [primaryContent]="
- 'Un message sera envoyé aux administrateurs Rés\'IN pour valider l\'affectation de votre compte à la structure'
- "
- [secondaryContent]="structure?.structureName"
- [customConfirmationText]="'Rejoindre la structure'"
- (closed)="claimStructure($event)"
-/>
+<app-v3-modal [title]="'Travaillez-vous ici ?'" [opened]="claimModalOpened" (closed)="claimStructure($event)">
+ <div class="modalContent">
+ Un message sera envoyé aux administrateurs Rés'IN pour valider l'affectation de votre compte à la structure : <br />
+ <span class="emphasized">{{ structure?.structureName }}</span>
+ </div>
+</app-v3-modal>
-<app-join-modal-confirmation
- [opened]="joinModalOpened"
- [title]="'Travaillez-vous ici ?'"
- [primaryContent]="'Un message sera envoyé à un administrateur de la structure'"
- [secondaryContent]="structure?.structureName"
- [customConfirmationText]="'Rejoindre la structure'"
- (closed)="joinStructure($event)"
-/>
+<app-v3-modal [title]="'Travaillez-vous ici ?'" [opened]="joinModalOpened" (closed)="joinStructure($event)">
+ <div class="modalContent">
+ Un message sera envoyé aux membres de la structure : <br />
+ <span class="emphasized">{{ structure?.structureName }}</span>
+ </div>
+</app-v3-modal>
-<app-join-modal-confirmation
- [opened]="pendingModalOpened"
+<app-v3-modal
[title]="'Travaillez-vous ici ?'"
- [primaryContent]="
- 'Un message a déjà été envoyé pour validation, vous recevrez un email quand votre compte sera rattaché à la structure'
- "
- [secondaryContent]="structure?.structureName"
- [customConfirmationText]="'OK'"
- [displayCancelButton]="false"
+ [opened]="pendingModalOpened"
+ [validateLabel]="'OK'"
+ [singleButton]="true"
(closed)="togglePendingModal()"
-/>
+>
+ <div class="modalContent">
+ Un message a déjà été envoyé pour validation, vous recevrez un email quand votre compte sera rattaché à la structure
+ : <br />
+ <span class="emphasized">{{ structure?.structureName }}</span>
+ </div>
+</app-v3-modal>
-<app-text-input-modal
+<app-v3-modal
+ [title]="'Signaler une erreur'"
[opened]="structureErrorModalOpened"
- [placeholder]="'Décrivez l\'erreur ici. Ex: Horaires faux...'"
- [content]="
- 'Votre commentaire sera envoyé aux administrateurs pour une prise en compte de votre remarque. Si vous souhaitez avoir un retour, merci de préciser votre contact.'
- "
- (closed)="sendErrorEmail($event)"
- (newContent)="sendErrorEmail($event)"
-/>
+ [validateLabel]="'Confirmer'"
+ (closed)="$event ? sendErrorEmail(true, myText.value) : sendErrorEmail(false)"
+>
+ <p>
+ Votre commentaire sera envoyé aux administrateurs pour une prise en compte de votre remarque. Si vous souhaitez
+ avoir un retour, merci de préciser votre contact.
+ </p>
+ <textarea
+ #myText
+ id="story"
+ class="textarea"
+ name="story"
+ rows="6"
+ placeholder="Décrivez l'erreur ici. Ex: Horaires faux..."
+ ></textarea>
+</app-v3-modal>
diff --git a/src/app/structure-list/components/structure-details/structure-details.component.scss b/src/app/structure-list/components/structure-details/structure-details.component.scss
index de2469bd77430073e07900226947e2e2ebda8481..57c90e44134147b107077c5a7d420d9654517808 100644
--- a/src/app/structure-list/components/structure-details/structure-details.component.scss
+++ b/src/app/structure-list/components/structure-details/structure-details.component.scss
@@ -320,3 +320,9 @@ p,
}
}
}
+
+::ng-deep.modal {
+ .textarea {
+ width: calc(100% - 20px);
+ }
+}
diff --git a/src/app/structure-list/components/structure-details/structure-details.component.ts b/src/app/structure-list/components/structure-details/structure-details.component.ts
index 00139567402bc6dde74d22dfa222793bcc563947..361ad890c485906ac39ee7ff929e4f8a08596b86 100644
--- a/src/app/structure-list/components/structure-details/structure-details.component.ts
+++ b/src/app/structure-list/components/structure-details/structure-details.component.ts
@@ -281,10 +281,10 @@ export class StructureDetailsComponent implements OnInit {
this.structureErrorModalOpened = !this.structureErrorModalOpened;
}
- public sendErrorEmail(modalValue: { shouldSend: boolean; content: string }): void {
+ public sendErrorEmail(shouldSend: boolean, content?: string): void {
this.displayModalError();
- if (modalValue.shouldSend) {
- this.structureService.sendMailOnStructureError(this.structure._id, modalValue.content).subscribe(() => null);
+ if (shouldSend && content) {
+ this.structureService.sendMailOnStructureError(this.structure._id, content).subscribe(() => {});
}
}
diff --git a/src/app/structure/structure-exclude/structure-exclude.component.html b/src/app/structure/structure-exclude/structure-exclude.component.html
deleted file mode 100644
index 9ceb7dd43c28cfacdcfcbf44b3e6ee1559690829..0000000000000000000000000000000000000000
--- a/src/app/structure/structure-exclude/structure-exclude.component.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<app-structure-details [structure]="structure" (closeDetails)="close()" />
-<app-carto />
-
-<div *ngIf="structure" class="modalBackground">
- <div class="modal">
- <div class="contentModal" fxLayout="column" fxLayoutAlign="space-around center">
- <div class="headerModal" fxLayout="row" fxLayoutAlign="space-between center">
- <div class="empty"></div>
- <h3>Gestion de la structure</h3>
- <svg class="hide" aria-hidden="true" (click)="close()">
- <use [attr.xlink:href]="'assets/form/sprite.svg#close'" />
- </svg>
- </div>
- <img src="../../assets/form/profileSkip.svg" alt="" />
- <p *ngIf="!alreadyExcluded">Souhaitez-vous exclure {{ newMemberName }} de {{ structure.structureName }}</p>
- <p *ngIf="alreadyExcluded">{{ newMemberName }} a déjà été exclu par un membre de {{ structure.structureName }}</p>
- <div class="footerModal" fxLayout="row" fxLayoutAlign="space-around center" fxLayoutGap="8px">
- <app-v3-button
- *ngIf="!alreadyExcluded"
- [variant]="buttonTypeEnumV3.Secondary"
- [label]="'Non'"
- (action)="close()"
- />
- <app-v3-button
- *ngIf="!alreadyExcluded"
- [variant]="buttonTypeEnumV3.Primary"
- [label]="'Exclure'"
- (action)="exclude()"
- />
- <app-v3-button *ngIf="alreadyExcluded" [variant]="buttonTypeEnumV3.Primary" [label]="'OK'" (action)="close()" />
- </div>
- </div>
- </div>
-</div>
diff --git a/src/app/structure/structure-exclude/structure-exclude.component.scss b/src/app/structure/structure-exclude/structure-exclude.component.scss
deleted file mode 100644
index edff1f02bab35d3d3fa73d6e71826ba574f818b9..0000000000000000000000000000000000000000
--- a/src/app/structure/structure-exclude/structure-exclude.component.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-@import 'color';
-@import 'typography';
-
-.modalBackground {
- .modal {
- max-width: 390px;
- .contentModal {
- padding: 15px 40px 20px;
-
- .headerModal {
- width: 390px;
- padding: 0 8px 8px;
- border-bottom: 1px solid $grey-6;
- h3 {
- @include font-bold-18;
- margin: 0;
- }
- svg,
- .empty {
- height: 40px;
- width: 40px;
- }
- svg {
- cursor: pointer;
- }
- }
- p {
- @include font-bold-18;
- text-align: center;
- margin: 10px 0;
- }
- .footerModal {
- gap: 8px;
- }
- img {
- margin-top: 8px;
- }
- }
- }
-}
diff --git a/src/app/structure/structure-exclude/structure-exclude.component.ts b/src/app/structure/structure-exclude/structure-exclude.component.ts
deleted file mode 100644
index f6581a8843025a7aec5d18dbecf95f6c671b8e5f..0000000000000000000000000000000000000000
--- a/src/app/structure/structure-exclude/structure-exclude.component.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { Structure } from '../../models/structure.model';
-import { NotificationService } from '../../services/notification.service';
-import { StructureService } from '../../services/structure.service';
-import { UserService } from '../../services/user.service';
-import { ButtonTypeV3 } from '../../shared/components/v3/button/button-type.enum';
-
-@Component({
- selector: 'app-structure-exclude',
- templateUrl: './structure-exclude.component.html',
- styleUrls: ['./structure-exclude.component.scss'],
-})
-export class StructureExcludeComponent implements OnInit {
- constructor(
- private router: Router,
- private route: ActivatedRoute,
- private structureService: StructureService,
- private notificationService: NotificationService,
- private userService: UserService
- ) {}
-
- public alreadyExcluded = false;
- public buttonTypeEnumV3 = ButtonTypeV3;
- public newMemberName: string;
- public structure: Structure;
- private structureId: string;
-
- ngOnInit(): void {
- this.route.queryParamMap.subscribe(async (params) => {
- if (!params.get('id') || !params.get('userId')) {
- this.router.navigateByUrl('/acteurs');
- } else {
- this.structureId = params.get('id');
- this.userService.getUser(params.get('userId')).subscribe((res) => {
- this.newMemberName = res.name + ' ' + res.surname;
- });
- this.structureService.getStructureWithOwners(params.get('id')).subscribe((res) => {
- this.structure = res.structure;
- const owners = res.owners;
- const isOwner = owners.find((owner) => owner._id === params.get('userId'));
- if (!isOwner) {
- this.alreadyExcluded = true;
- }
- });
- }
- });
- }
-
- public close(): void {
- this.router.navigateByUrl(`/acteurs?id=${this.structureId}`);
- }
-
- public exclude(): void {
- this.route.queryParamMap.subscribe((params) => {
- if (params.get('id') && params.get('userId')) {
- this.structureService.removeOwnerFromStructure(params.get('userId'), params.get('id')).subscribe(
- () => {
- this.notificationService.showSuccess(
- `${this.newMemberName} a bien été exclu de ${this.structure.structureName}`
- );
- this.router.navigateByUrl(`/acteurs?id=${this.structureId}`);
- },
- () => {
- this.notificationService.showErrorPleaseRetry(
- `${this.newMemberName} n'a pas pu être exclu de ${this.structure.structureName}`
- );
- this.router.navigateByUrl(`/acteurs?id=${this.structureId}`);
- }
- );
- }
- });
- }
-}
diff --git a/src/assets/scss/_color.scss b/src/assets/scss/_color.scss
index 08c62856df1d79fa8cfcf041414b583f358882c3..0b171982f40d0879d3e60b016d6459ffff0b751a 100644
--- a/src/assets/scss/_color.scss
+++ b/src/assets/scss/_color.scss
@@ -73,4 +73,4 @@ $app-background: $grey-9;
$scrollbar-track: rgba($grey-9, 0.65);
$scrollbar-thumb: $grey-5;
$focus-color: $grey-1;
-$box-shadow-simple: 0px 4px 16px rgba(0, 0, 0, 0.25);
+$box-shadow: 0px 12px 24px 0px rgba(0, 0, 0, 0.1);
diff --git a/src/styles.scss b/src/styles.scss
index 5fabaabf54e1235bb3da78be99e994a21a660707..82d226b55a8c0f3ea78a61d4172fa67c9c3b821b 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -351,12 +351,12 @@ button {
margin-top: 1rem !important;
}
}
-.modal {
+.filterMenu {
max-width: 360px;
width: auto;
z-index: $modal-z-index !important;
position: fixed;
- box-shadow: $box-shadow-simple;
+ box-shadow: $box-shadow;
border-radius: 8px;
margin-top: 25px;
@media #{$large-phone} {
@@ -456,56 +456,6 @@ button {
}
}
-.modalBackground {
- width: 100%;
- height: 100%;
- z-index: $modal-z-index;
- position: fixed;
- content: '';
- top: 0;
- left: 0;
- background-color: $modal-background;
- .modal {
- max-height: 90%;
- overflow: auto;
- .contentModal {
- width: 100%;
- background: $white;
- padding-top: 20px;
- }
- .footerModal {
- width: 100%;
- margin-top: 1rem;
- @include font-bold-16;
- .btn {
- background: $primary-color;
- border-radius: 4px;
- outline: none;
- cursor: pointer;
- border: 0;
- color: $white;
- height: 40px;
- @include btn-bold;
- width: 149px;
- &.confirm {
- background: none;
- color: $grey-1;
- text-decoration: underline;
- }
- }
- }
- min-width: 350px;
- max-width: 560px;
- margin: auto;
- border-radius: 8px;
- position: fixed;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- box-shadow: $box-shadow-simple;
- }
-}
-
.loader {
width: 100%;
text-align: center;
@@ -569,7 +519,7 @@ button {
.autocomplete-items {
border: 0.0625rem solid #d4d4d4;
- box-shadow: $box-shadow-simple;
+ box-shadow: $box-shadow;
box-sizing: border-box;
border-top: none;
border-bottom: none;