diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9a64770bac1cb242ef549cbc0bca129d4eb81276..8a26c75de8187a47ae38d200b3551943d02d4d5b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,77 @@
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+## [1.5.0](https://forge.grandlyon.com///compare/v1.4.0...v1.5.0) (2021-02-25)
+
+
+### Features
+
+* add connect redirection + handle structure join ([f5abd5e](https://forge.grandlyon.com///commit/f5abd5e5fea66c8e6d04aee335be93da9976b3e7))
+* add favicon ([ff8adb8](https://forge.grandlyon.com///commit/ff8adb8c40679fbd539ce644c00eb2cec109f531))
+* add form widget for claim and register ([ce914c8](https://forge.grandlyon.com///commit/ce914c8e917610d4a5812dee6fdc4a607e4cf763))
+* add hour-picker first version from boussole project ([4333076](https://forge.grandlyon.com///commit/4333076c2212ceb08d73cc6d7205e0e3bc75b986))
+* add outdated browser handling ([ecff2a3](https://forge.grandlyon.com///commit/ecff2a37d20e6f85f0823bc96899975b5298d219))
+* add registration for claim when not connected ([0bbb3f0](https://forge.grandlyon.com///commit/0bbb3f0e1b55ff2461cdbf48d0380774aebaea4c))
+* handle sign-in with form ([7031971](https://forge.grandlyon.com///commit/7031971082fae414423abdecc701789f42a87fda))
+* **about:** add europe and region logo + update style ([34e3aeb](https://forge.grandlyon.com///commit/34e3aebd188f3984dcd5bfb0028bfd20793924da))
+* add logic to hout-picker + remove copy/paste feature ([c61a63e](https://forge.grandlyon.com///commit/c61a63e391636645af45b26c174dd57d86d17e80))
+* add registration form from email ([60fa0c8](https://forge.grandlyon.com///commit/60fa0c8e41df9c82e5d6957dd752e4c210c4c9c8))
+* add social network on structure details ([a057084](https://forge.grandlyon.com///commit/a05708495671d20610c102091f6c2893e8214bcb))
+* add user delete structure ([f85d2c4](https://forge.grandlyon.com///commit/f85d2c4e938941eef70ce6a36f12b8c507b2524b))
+* move structureType to back ([8d7aa8e](https://forge.grandlyon.com///commit/8d7aa8e28347610ba36b833e41ce9e5f55a04f0c))
+* update date-picker style ([36904c7](https://forge.grandlyon.com///commit/36904c785c075d64c68fffe669e3e9b33c9d119f))
+* update header/footer design ([0838655](https://forge.grandlyon.com///commit/083865546cf32c0f209abe3f3a48db5d6c7cdf94))
+* update nginx conf for ghost ([c390497](https://forge.grandlyon.com///commit/c390497d8127190ea6f56873c3fa28b86b53f39d))
+
+
+### Bug Fixes
+
+* add admin structureName + bug fix on sturcutredetails ([6f32ee8](https://forge.grandlyon.com///commit/6f32ee8659c17790b762cafd3c2f34263e2cf522))
+* add claim structure message ([41cfbb8](https://forge.grandlyon.com///commit/41cfbb801537b662fe08ed4133e803a15d914088))
+* add page type ([3c037a3](https://forge.grandlyon.com///commit/3c037a3f441d9569ba6f47ef9ff047bab6181630))
+* add previous page handling for claim ([ee7b65a](https://forge.grandlyon.com///commit/ee7b65a8a1f48c218796b145d2b4ed51db2690b9))
+* claim structure issue ([7b2218b](https://forge.grandlyon.com///commit/7b2218b6e0c61f5b7c66b5580691ac63d0de9410))
+* design profile ([8c829ba](https://forge.grandlyon.com///commit/8c829ba2b118414c6cb536b6033b6f1faf1a864c))
+* firefox issue on hour picker ([12b8fe0](https://forge.grandlyon.com///commit/12b8fe0ec470876f506bb64c69644cb1d1a628d7))
+* header issue on add structure navigation ([1e210a0](https://forge.grandlyon.com///commit/1e210a0b974199990ac3b5d48a34e0c6a8bb4419))
+* icon color + alignements ([83ea88f](https://forge.grandlyon.com///commit/83ea88f74f4f1c7d5dd84be9671df4e05ed3a89c))
+* map marker color + stroke-width ([6375907](https://forge.grandlyon.com///commit/637590750aa921e625bbe77c879ba194131b62c0))
+* move about page link + fix icon ([a9bb6d5](https://forge.grandlyon.com///commit/a9bb6d5da584d0b31fd9b75613353f99e2b3cce5))
+* move footer-form ([2f2e7ba](https://forge.grandlyon.com///commit/2f2e7baa422b788d590c5dafced0cb69a2c35f83))
+* regex issue on phone number and text without number ([e886673](https://forge.grandlyon.com///commit/e886673882248a5884f5ff57229463257b23b8ab))
+* remove locate button on search ([66ca00f](https://forge.grandlyon.com///commit/66ca00f332fffdda2115ee050bb834a1821105ea))
+* remove menu-phone component and fix bug ([cb2607f](https://forge.grandlyon.com///commit/cb2607f6a28ed51ad1d4cf985a0baf8b75329ebf))
+* remove structure delete for users from structure-details ([516446d](https://forge.grandlyon.com///commit/516446d600b197df71a8508ee8e722289e806fd3))
+* structure list card height ([35df2f9](https://forge.grandlyon.com///commit/35df2f9fb58879a4af33e000cf788707b5bb4efc))
+* structure type display ([4abc885](https://forge.grandlyon.com///commit/4abc885932771e89f53b497743ebb882cbe3c369))
+* structure type for map ([667bc2d](https://forge.grandlyon.com///commit/667bc2d54d58f3c3d1b016852bce616b54a06e87))
+* typo and color ([a5e2f93](https://forge.grandlyon.com///commit/a5e2f93bb8d8782074faf14936af7f3cb797a4ce))
+* unexisting css class ([a9241a7](https://forge.grandlyon.com///commit/a9241a7959687acbe9dad12ac5a31716e0e99977))
+* upadte import ([cc61eed](https://forge.grandlyon.com///commit/cc61eedb495879f173ac91f2ae1d716f60906de7))
+* update modale position ([8a18689](https://forge.grandlyon.com///commit/8a186897bc4c713cacd8fd11e17f89dbfd40ce51))
+* update typeform update ([d0d134d](https://forge.grandlyon.com///commit/d0d134d0753584d31919034449672e379a5e72f0))
+* various design bug ([9b8df1d](https://forge.grandlyon.com///commit/9b8df1d03eff87014d263dfa84e9eb2e82fcda55))
+* wording for form / profile and outdated page ([de23088](https://forge.grandlyon.com///commit/de230889cce920786d9d48f56084c23c012d4703))
+* **editForm:** fix logic validate/close form ([c68f9ba](https://forge.grandlyon.com///commit/c68f9baf3e433db7f34d06446d205e17d5ed48cd))
+* **form:** add menu icon ([e822be4](https://forge.grandlyon.com///commit/e822be4a83295d6a4558abd21c15053d6abc8f11))
+* **form:** add page (phoneContact structure) ([b8e91b8](https://forge.grandlyon.com///commit/b8e91b894d5200ef9e906750c3f04f4694b16b7c))
+* **form:** add page (pmrAccess) ([2c7a9fc](https://forge.grandlyon.com///commit/2c7a9fcb7409785a584effca7d4711853c139ed6))
+* **form:** add page(Description) ([4f458c7](https://forge.grandlyon.com///commit/4f458c7ad599ba33999bc7b939483d18da322405))
+* **form:** add page(description) + fix page(exceptionnalClosures) ([a398d07](https://forge.grandlyon.com///commit/a398d0712c2d9834260099f1c31d196b622e0692))
+* **form:** add page(Equipments) ([cd58628](https://forge.grandlyon.com///commit/cd586281c0f56591a8ccec9899b1e1b4653ca107))
+* **form:** add page(invited User) ([beda94d](https://forge.grandlyon.com///commit/beda94dc8e0e8b0829457855e52778020db12f26))
+* **form:** add page(isPassNumeric) ([0e82b75](https://forge.grandlyon.com///commit/0e82b75cce7bebc144d9a5f98f2575c112e93521))
+* **form:** add page(labelsQualifications) ([1a798c2](https://forge.grandlyon.com///commit/1a798c224953f6e1e1bae3f7133cd45b3b0e895e))
+* **form:** add scanner ([cda0a0d](https://forge.grandlyon.com///commit/cda0a0d39ff8a0e6c919c6ed30b72fe63666b853))
+* **form:** bug homePage blink on editForm ([dfa65ec](https://forge.grandlyon.com///commit/dfa65ec175cb18593408166212ae0140bf6546b8))
+* **form:** clean code ([5d0bd5b](https://forge.grandlyon.com///commit/5d0bd5b25a09ca950494da43823afd393a0f6197))
+* **form:** fix and clean code ([74daf90](https://forge.grandlyon.com///commit/74daf9003cc4c3acf9ff78cc8915aa07e0a308f4))
+* **form:** fix collaspse size + header titler phone ([6007a0d](https://forge.grandlyon.com///commit/6007a0dfc47b372be1d1372151889efd587feeeb))
+* **form:** fix css ([d5c1ea7](https://forge.grandlyon.com///commit/d5c1ea74acdd948559b396d30feb389e4a6054c5))
+* **form:** fix password hint ([05cf734](https://forge.grandlyon.com///commit/05cf7349d1622017fe209fc900fdbe01f9cbf9cf))
+* **form:** fix progress 100% on validate Mail ([2e15ee6](https://forge.grandlyon.com///commit/2e15ee6ccfd0653b391ae582a28d794cb11ef774))
+* **structures:** update strucutes list design ([1422095](https://forge.grandlyon.com///commit/14220950f13df2b5e0b7863d4796d61072ef45be))
+
## [1.4.0](https://forge.grandlyon.com///compare/v1.3.0...v1.4.0) (2021-02-01)
diff --git a/Dockerfile b/Dockerfile
index bee682a15c8297a99baf8b87a0fb52c7f50a759f..802c807ffdcbe1763122cf49cf2adcd87ca3575a 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -30,9 +30,13 @@ RUN apt-get update
COPY --from=build /app/dist/fr /usr/share/nginx/html
+# Add outdated browser page
+ADD ./nginx/outdated.html /usr/share/nginx/html
+
RUN touch /var/run/nginx.pid
RUN ls -l /usr/share/nginx/html
+
# expose port 8080
EXPOSE 8080
diff --git a/nginx/dev.conf b/nginx/dev.conf
index bb472e0c296a2dfe28b683f99901d3a1b4434c3f..7609f90b77cf963d3628bce01b5bf1e677de4952 100644
--- a/nginx/dev.conf
+++ b/nginx/dev.conf
@@ -1,3 +1,19 @@
+map $http_user_agent $outdated {
+ default 0;
+ "~MSIE [1-10]\." 1;
+ "~Trident/[5-7]\." 1;
+ "~Mozilla.*Firefox/[1-9]\." 1;
+ "~Mozilla.*Firefox/[0-2][0-9]\." 1;
+ "~Mozilla.*Firefox/3[0-1]\." 1;
+ "~Opera.*Version/[0-9]\." 1;
+ "~Opera.*Version/[0-1][0-9]\." 1;
+ "~Opera.*Version/2[0-1]\." 1;
+ "~AppleWebKit.*Version/[0-6]\..*Safari" 1;
+ "~Chrome/[0-9]\." 1;
+ "~Chrome/[0-2][0-9]\." 1;
+ "~Chrome/3[0-3]\." 1;
+}
+
server {
listen 8080 default_server;
@@ -17,6 +33,10 @@ server {
</script>";
location / {
+ # Redirect outdated nav
+ if ($outdated = 1){
+ rewrite ^ /outdated.html break;
+ }
# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
try_files $uri $uri/ /index.html;
@@ -32,7 +52,6 @@ server {
proxy_pass https://passerelle.formulaireextranet.grandlyon.com/base-adresse/base-adresse-nationale/streets;
}
-
location /geocoding/photon/api {
proxy_pass https://download.data.grandlyon.com/geocoding/photon/api;
}
@@ -51,8 +70,6 @@ server {
proxy_pass http://ghost:2368;
}
-
-
# REALLY important for JavaScript modules (type="module") to work as expected!!!
location ~ \.js {
add_header Content-Type text/javascript;
diff --git a/nginx/outdated.html b/nginx/outdated.html
new file mode 100644
index 0000000000000000000000000000000000000000..24987fe33502039d57359e6d5900027eac0fe673
--- /dev/null
+++ b/nginx/outdated.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="fr">
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <title>RES'in: Navigateur incompatible</title>
+ </head>
+
+ <body>
+ <div>
+ <h1>Navigateur obsolète</h1>
+ <p>
+ Votre navigateur ne vous permet pas d'accéder à RES'in dans de bonnes conditions. Merci d'utiliser
+ <a href="https://www.mozilla.org/fr/firefox/new/">Firefox</a>,
+ <a href="https://www.google.com/intl/fr/chrome/">Chrome</a>, ou la dernière version d'<a
+ href="https://www.microsoft.com/fr-fr/edge"
+ >Edge</a
+ >.
+ </p>
+ </div>
+ </body>
+</html>
diff --git a/package-lock.json b/package-lock.json
index b2c01537eab9a698164e5f0b45207d1c594bc759..cb903debf0cb4efcac23e87d6aa7c8ccfc476c4d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "pamn",
- "version": "1.4.0",
+ "version": "1.5.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
diff --git a/package.json b/package.json
index 4d3dc600dee4d9b227c09a28d67b88af687d8959..4f2d1c0ae932561731438efb546541fe31193fe3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "pamn",
- "version": "1.4.0",
+ "version": "1.5.0",
"scripts": {
"ng": "ng",
"start": "ng serve --configuration=fr --proxy-config proxy.conf.json",
diff --git a/src/app/about/about.component.html b/src/app/about/about.component.html
index 0b50d93e3869c66bd30bca115cd864e056a13b16..fcbc5f03c5e46920a8341be5ae1983f8a269c5bd 100644
--- a/src/app/about/about.component.html
+++ b/src/app/about/about.component.html
@@ -1,26 +1,37 @@
<div fxLayout="column" class="content-container full-screen">
<div class="section-container">
- <h1>Qui sommes-nous ?</h1>
- <p>
- La numérisation accélérée des différents services privés et publics ainsi que la crise sanitaire que nous
- traversons a renforcé une fracture numérique déjà forte pour un nombre important de citoyens.
- </p>
- <p>
- Au printemps 2019, la Métropole de Lyon s'est saisie des enjeux autour de l'inclusion numérique en initiant la
- structuration d'un réseau des acteurs de la médiation numérique sur son territoire. Son objectif est de mettre en
- relation les acteurs qui œuvrent au quotidien pour limiter cette fracture numérique, nombreux sur le territoire de
- la Métropole : associations, centres sociaux, structures informations jeunesses, grands opérateurs de services
- publics, collectivités...
- </p>
- <p>
- Des ateliers de travail ont été organisés en 2019 pour identifier les besoins de ces acteurs et 9 offres de
- services ont été identifiées :
- </p>
- <img src="/assets/img/about_illustration.png" alt="illustration des besoins" />
- <p>
- Cet espace vise à centraliser et mettre en commun les ressources développées dans le cadre du réseau par ses
- acteurs.
- </p>
- <p>N'hésitez pas à contribuer à cet espace en partageant vos ressources</p>
+ <div fxLayout="row" fxLayout.lt-sm="column" fxLayoutAlign="left" fxLayoutGap="5%">
+ <div class="about-container">
+ <h1>Qui sommes-nous ?</h1>
+ <p>
+ La numérisation accélérée des différents services privés et publics ainsi que la crise sanitaire que nous
+ traversons a renforcé une fracture numérique déjà forte pour un nombre important de citoyens.
+ </p>
+ <p>
+ Au printemps 2019, la Métropole de Lyon s'est saisie des enjeux autour de l'inclusion numérique en initiant la
+ structuration d'un réseau des acteurs de la médiation numérique sur son territoire. Son objectif est de mettre
+ en relation les acteurs qui œuvrent au quotidien pour limiter cette fracture numérique, nombreux sur le
+ territoire de la Métropole : associations, centres sociaux, structures informations jeunesses, grands
+ opérateurs de services publics, collectivités...
+ </p>
+ <p>
+ Des ateliers de travail ont été organisés en 2019 pour identifier les besoins de ces acteurs et 9 offres de
+ services ont été identifiées :
+ </p>
+ <h2>Recenser et partager des ressources existantes (optimisation)</h2>
+ <img src="/assets/img/about_illustration_1.jpg" alt="illustration des besoins" />
+ <h2>Co-construire de nouvelles ressources (développement)</h2>
+ <img src="/assets/img/about_illustration_2.jpg" alt="illustration des besoins" />
+ <p>
+ Cet espace vise à centraliser et mettre en commun les ressources développées dans le cadre du réseau par ses
+ acteurs.
+ </p>
+ <p>N'hésitez pas à contribuer à cet espace en partageant vos ressources</p>
+ </div>
+ <div fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="20px">
+ <img src="/assets/logos/logo_europe.png" alt="logo de l'union européenne" />
+ <img src="/assets/logos/logo_region.png" alt="logo de la région Auverge-Rhône-Alpes" />
+ </div>
+ </div>
</div>
</div>
diff --git a/src/app/about/about.component.scss b/src/app/about/about.component.scss
index e077716b4eae2a1c6e04c6ade486ae11545c511d..08f1b70f14040182e176340db2ee075f95697129 100644
--- a/src/app/about/about.component.scss
+++ b/src/app/about/about.component.scss
@@ -1,3 +1,15 @@
+@import '../../assets/scss/color';
+@import '../../assets/scss/typography';
+
.content-container {
overflow: auto;
}
+
+h2 {
+ @include cn-bold-16;
+ color: $red-default;
+}
+
+.about-container {
+ max-width: 760px;
+}
diff --git a/src/app/admin/components/claim-structure/claim-structure.component.html b/src/app/admin/components/claim-structure/claim-structure.component.html
index 46494e955d1549ba97a5c20d3cc8661f0929a559..aa0adbc5878057c773c8d656acb826ee2fe6ffcb 100644
--- a/src/app/admin/components/claim-structure/claim-structure.component.html
+++ b/src/app/admin/components/claim-structure/claim-structure.component.html
@@ -1,5 +1,5 @@
<div fxLayout="row" fxLayoutAlign="center center">
- <table *ngIf="demandsAttachment" summary="demands attachment results">
+ <table *ngIf="demandsAttachment" aria-describedby="demands attachment results">
<thead>
<th scope="col">Utilisateur</th>
<th scope="col">Structure</th>
@@ -8,7 +8,7 @@
<tbody>
<tr *ngFor="let demand of demandsAttachment">
<td>{{ demand.userEmail }}</td>
- <td>{{ demand.structureId }}</td>
+ <td>{{ demand.structureName }}</td>
<td>
<button (click)="acceptDemand(demand)">Valider</button><button (click)="refuseDemand(demand)">Refuser</button>
</td>
diff --git a/src/app/admin/components/claim-structure/claim-structure.component.scss b/src/app/admin/components/claim-structure/claim-structure.component.scss
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/src/app/admin/components/claim-structure/claim-structure.component.ts b/src/app/admin/components/claim-structure/claim-structure.component.ts
index 019a1e68008f90072c7876877ee8e1518b3a0396..e6e8f1338949af736a38bdc97e159870bd54c018 100644
--- a/src/app/admin/components/claim-structure/claim-structure.component.ts
+++ b/src/app/admin/components/claim-structure/claim-structure.component.ts
@@ -5,7 +5,6 @@ import { AdminService } from '../../services/admin.service';
@Component({
selector: 'app-admin-claim-structure',
templateUrl: './claim-structure.component.html',
- styleUrls: ['./claim-structure.component.scss'],
})
export class ClaimStructureComponent implements OnInit {
public demandsAttachment: DemandAttachment[];
diff --git a/src/app/admin/components/panel/panel.component.scss b/src/app/admin/components/panel/panel.component.scss
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/src/app/admin/components/panel/panel.component.ts b/src/app/admin/components/panel/panel.component.ts
index c6d2adffa20c9abc2ade11eaaf3877f2dd80d722..c4a2164095eadf3a3269fc10d437249c9ad131d1 100644
--- a/src/app/admin/components/panel/panel.component.ts
+++ b/src/app/admin/components/panel/panel.component.ts
@@ -3,7 +3,6 @@ import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-admin-panel',
templateUrl: './panel.component.html',
- styleUrls: ['./panel.component.scss'],
})
export class PanelComponent implements OnInit {
constructor() {}
diff --git a/src/app/admin/models/demandAttachment.model.ts b/src/app/admin/models/demandAttachment.model.ts
index b19d1f375c47a3aa9c379d567ec09400ed6de655..f7b9ae4b4ebcc30ef465e7721375ba0a7e5de5d5 100644
--- a/src/app/admin/models/demandAttachment.model.ts
+++ b/src/app/admin/models/demandAttachment.model.ts
@@ -1,4 +1,5 @@
export class DemandAttachment {
userEmail: string;
structureId: number;
+ structureName: string;
}
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 993557771faefa1b05cc206b356954637ed0047f..045be83e7bbd0f56c3f29a5805bd5d48fe7b6ed6 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -11,6 +11,8 @@ import { LegalNoticeComponent } from './legal-notice/legal-notice.component';
import { ProfileComponent } from './profile/profile.component';
import { ResetEmailComponent } from './reset-email/reset-email.component';
import { ResetPasswordComponent } from './reset-password/reset-password.component';
+import { TempUserResolver } from './resolvers/temp-user.resolver';
+import { StructureJoinComponent } from './structure-join/structure-join.component';
import { StructureDetailsComponent } from './structure-list/components/structure-details/structure-details.component';
import { StructureListComponent } from './structure-list/structure-list.component';
import { UserVerificationComponent } from './user-verification/user-verification.component';
@@ -49,6 +51,14 @@ const routes: Routes = [
path: 'users/verify/:id',
component: UserVerificationComponent,
},
+ {
+ path: 'register',
+ component: FormComponent,
+ canDeactivate: [DeactivateGuard],
+ resolve: {
+ user: TempUserResolver,
+ },
+ },
{
path: 'change-email/:id',
component: ResetEmailComponent,
@@ -58,6 +68,11 @@ const routes: Routes = [
canActivate: [AuthGuard],
component: ProfileComponent,
},
+ {
+ path: 'join',
+ canActivate: [AuthGuard],
+ component: StructureJoinComponent,
+ },
{
path: 'reset-password',
component: ResetPasswordComponent,
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 9b9e30d8dfb4bd5da2cb07181a97530b66c25292..13fba3cf1c27833e321c5e9802f1cd6bcfe30c5c 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,6 +1,7 @@
import { Component } from '@angular/core';
import { ProfileService } from './profile/services/profile.service';
import { AuthService } from './services/auth.service';
+import { RouterListenerService } from './services/routerListener.service';
import { PrintService } from './shared/service/print.service';
@Component({
@@ -14,7 +15,8 @@ export class AppComponent {
constructor(
public printService: PrintService,
private authService: AuthService,
- private profilService: ProfileService
+ private profilService: ProfileService,
+ private routerListenerService: RouterListenerService
) {
if (this.authService.isLoggedIn()) {
this.profilService.getProfile();
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 8bcb3953a76e1d14b6d8e0a9ceb69075d46a42cc..8db542e8f1a79efb23270730473c3bcc42c0d9e2 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -29,7 +29,9 @@ import { ResetPasswordComponent } from './reset-password/reset-password.componen
import { AdminModule } from './admin/admin.module';
import { AdminGuard } from './guards/admin.guard';
import { DeactivateGuard } from './guards/deactivate.guard';
-import { FooterFormComponent } from './footer-form/footer-form.component';
+import { FooterFormComponent } from './form/footer-form/footer-form.component';
+import { TempUserResolver } from './resolvers/temp-user.resolver';
+import { StructureJoinComponent } from './structure-join/structure-join.component';
@NgModule({
declarations: [
@@ -50,6 +52,7 @@ import { FooterFormComponent } from './footer-form/footer-form.component';
ResetPasswordComponent,
FormComponent,
FooterFormComponent,
+ StructureJoinComponent,
],
imports: [BrowserModule, HttpClientModule, AppRoutingModule, SharedModule, MapModule, ProfileModule, AdminModule],
providers: [
@@ -59,6 +62,7 @@ import { FooterFormComponent } from './footer-form/footer-form.component';
AuthGuard,
AdminGuard,
DeactivateGuard,
+ TempUserResolver,
],
bootstrap: [AppComponent],
})
diff --git a/src/app/footer/footer.component.html b/src/app/footer/footer.component.html
index e043a1e4479fe890e9cf26cb3fa6acd0a0cdf61e..6cc2485c7cfcd89480be637c69891033a4d0ec25 100644
--- a/src/app/footer/footer.component.html
+++ b/src/app/footer/footer.component.html
@@ -3,7 +3,6 @@
<a class="clickable text-align-center" routerLink="/legal-notice" i18n>Mentions légales</a>
<!-- <a class="clickable text-align-center" routerLink="/sitemap" i18n>Plan du site</a> -->
<a class="clickable text-align-center" href="mailto:inclusionnumerique@grandlyon.com">Contact</a>
- <a routerLink="/about" i18n>Qui sommes-nous ?</a>
</div>
<a
class="metro-link"
diff --git a/src/app/footer/footer.component.scss b/src/app/footer/footer.component.scss
index 4c3179c71c7478231a7fb44c973d546e698536c6..7fac9223d9e84fb3799d2005d68d8b094cc358b7 100644
--- a/src/app/footer/footer.component.scss
+++ b/src/app/footer/footer.component.scss
@@ -13,6 +13,8 @@
a {
color: $white;
margin: 0px 0px 0px 10px;
+ text-decoration: none;
+ @include cn-regular-12;
&:hover {
text-decoration: underline;
}
@@ -35,12 +37,6 @@
text-align: center;
}
}
- @media #{$desktop} {
- font-size: 1em;
- }
- @media #{$tablet} {
- font-size: 0.875em;
- }
}
.metro-title {
diff --git a/src/app/footer-form/footer-form.component.html b/src/app/form/footer-form/footer-form.component.html
similarity index 59%
rename from src/app/footer-form/footer-form.component.html
rename to src/app/form/footer-form/footer-form.component.html
index b4c50c392d10abbdfd41c3cbed5746039a0362ef..6157b4a2cf76c62bb6919885cc21aba3e5aa80b0 100644
--- a/src/app/footer-form/footer-form.component.html
+++ b/src/app/form/footer-form/footer-form.component.html
@@ -1,15 +1,22 @@
<div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center">
- <button class="btn previous" (click)="goToPreviousPage()">
+ <button class="btn-primary small previous" (click)="goToPreviousPage()">
<div class="rowBtn" fxLayout="row" fxLayoutAlign="center center">
<svg class="chevronLeft" aria-hidden="true">
<use [attr.xlink:href]="'assets/form/sprite.svg#chevronLeft'"></use>
</svg>
- Précédent
+ {{ btnName[0] }}
</div>
</button>
- <button class="btn next" (click)="goToNextPage()" [disabled]="!isValid" [ngClass]="{ invalid: !isValid }">
+ <button
+ class="btn-primary small next"
+ (click)="goToNextPage()"
+ [disabled]="!isValid"
+ type="submit"
+ [ngClass]="{ invalid: !isValid }"
+ >
<div class="rowBtn" fxLayout="row" fxLayoutAlign="center center">
- Suivant<svg class="chevronRight" aria-hidden="true">
+ {{ btnName[1]
+ }}<svg class="chevronRight" aria-hidden="true">
<use [attr.xlink:href]="'assets/form/sprite.svg#chevronRight'"></use>
</svg>
</div>
diff --git a/src/app/footer-form/footer-form.component.scss b/src/app/form/footer-form/footer-form.component.scss
similarity index 54%
rename from src/app/footer-form/footer-form.component.scss
rename to src/app/form/footer-form/footer-form.component.scss
index dfecb83344d2312d4da1d75544930de155203094..6ebf95c44d942324b2dd9b9465419bbed1d9d809 100644
--- a/src/app/footer-form/footer-form.component.scss
+++ b/src/app/form/footer-form/footer-form.component.scss
@@ -1,16 +1,7 @@
-@import '../../assets/scss/color';
-@import '../../assets/scss/typography';
+@import '../../../assets/scss/color';
+@import '../../../assets/scss/typography';
-.btn {
- background: $secondary-color;
- border-radius: 4px;
- outline: none;
- cursor: pointer;
- border: 0;
- color: $white;
- height: 40px;
- width: 149px;
- @include btn-bold;
+.btn-primary {
&.previous {
background-color: initial;
color: $grey-2;
@@ -34,6 +25,6 @@
.chevronRight {
height: 24px;
width: 24px;
- stroke: $white;
+ stroke: inherit;
margin-left: 10px;
}
diff --git a/src/app/footer-form/footer-form.component.spec.ts b/src/app/form/footer-form/footer-form.component.spec.ts
similarity index 100%
rename from src/app/footer-form/footer-form.component.spec.ts
rename to src/app/form/footer-form/footer-form.component.spec.ts
diff --git a/src/app/footer-form/footer-form.component.ts b/src/app/form/footer-form/footer-form.component.ts
similarity index 95%
rename from src/app/footer-form/footer-form.component.ts
rename to src/app/form/footer-form/footer-form.component.ts
index e5e6fbfaf35d2973f089b6f00a40703ae59952c3..15a5456ff32156d608f712a4c9cf4ae4a9cefd42 100644
--- a/src/app/footer-form/footer-form.component.ts
+++ b/src/app/form/footer-form/footer-form.component.ts
@@ -7,6 +7,7 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
})
export class FooterFormComponent implements OnInit {
@Input() isValid: boolean;
+ @Input() btnName: string[];
@Output() nextPage = new EventEmitter<any>();
@Output() previousPage = new EventEmitter<any>();
constructor() {}
diff --git a/src/app/form/form.component.html b/src/app/form/form.component.html
index 526e3a3ede64803594cced2c85aa8c3ab7febd2d..2bea200b728d9f6bc64473137bb2b9704fc71ef5 100644
--- a/src/app/form/form.component.html
+++ b/src/app/form/form.component.html
@@ -4,10 +4,28 @@
[content]="'Il vous faudra de nouveau remplir le formulaire si vous quittez'"
(closed)="hasRedirectionAccepted($event)"
></app-modal-confirmation>
- <div class="content">
+ <div class="content" *ngIf="!isLoading" [ngClass]="{ editMode: isEditMode }">
+ <div class="headerEditMode" *ngIf="isEditMode" fxLayout="row" fxLayoutAlign="space-between center">
+ <h2 class="no-margin">Modification de {{ editForm.get('structureName').value }}</h2>
+ <app-structure-options-modal
+ [structure]="structureWithOwners"
+ [isEditFormView]="true"
+ (closed)="structureDeleted()"
+ ></app-structure-options-modal>
+ </div>
+ <div class="returnBtnSection" *ngIf="isEditMode && currentPage != 0">
+ <button class="btn-primary previous" (click)="goToSpecificPage(0, false)">
+ <div class="rowBtn" fxLayout="row" fxLayoutAlign="center center">
+ <svg class="chevronLeft" aria-hidden="true">
+ <use [attr.xlink:href]="'assets/form/sprite.svg#chevronLeft'"></use>
+ </svg>
+ Retour
+ </div>
+ </button>
+ </div>
<div
class="progressBar"
- *ngIf="currentPage != 0"
+ *ngIf="currentPage != 0 && !isEditMode"
fxLayout="row"
fxLayoutAlign="space-between center"
fxLayoutGap="20px"
@@ -22,18 +40,65 @@
[value]="progressStatus"
></progress>
</div>
- <div *ngIf="currentPage == 0" class="home page" fxLayout="column" fxLayoutAlign="space-between">
+ <div *ngIf="displayAddStructure()" class="home page" fxLayout="column" fxLayoutAlign="space-between">
<h2>Ajouter votre structure</h2>
<img src="../../assets/form/schedule.svg" alt="logo schedule" />
<div>
<p class="titleDesc">Cela va prendre une quinzaine de minutes</p>
<p>Une fois réalisé cela vous permettra d'être référencé sur la platefome</p>
</div>
- <div class="btnStart">
- <button class="btn start" (click)="nextPage()">C'est Parti</button>
+ <app-footer-form
+ class="btnStart"
+ [btnName]="['Précédent', 'C\'est parti']"
+ (previousPage)="previousUrl()"
+ (nextPage)="nextPage()"
+ [isValid]="isPageValid"
+ ></app-footer-form>
+ </div>
+ <div
+ *ngIf="displayClaimStructure()"
+ class="home page"
+ fxLayout="column"
+ fxLayoutAlign="space-between center"
+ fxLayoutAlign.lt-sm="center"
+ >
+ <h2 class="no-wrap">
+ {{ isJoinMode ? 'Rejoindre' : 'Revendiquer' }} la structure <span>{{ claimStructure.structureName }}</span>
+ </h2>
+ <div>
+ <p>Une fois réalisé cela vous permettra de devenir propriétaire de cette structure</p>
+ </div>
+ <app-footer-form
+ class="btnStart"
+ [btnName]="['Précédent', 'C\'est parti']"
+ (previousPage)="previousUrl()"
+ (nextPage)="nextPage()"
+ [isValid]="isPageValid"
+ ></app-footer-form>
+ </div>
+ <div
+ *ngIf="currentPage == pageTypeEnum.summary && isEditMode"
+ class="editHome page"
+ fxLayout="column"
+ fxLayoutAlign="space-between"
+ >
+ <div class="summary" *ngFor="let page of pagesValidation; let index = index">
+ <div
+ class="itemSummary"
+ [ngClass]="{ last: index == 22 }"
+ fxLayout="row"
+ fxLayoutAlign="space-between center"
+ *ngIf="page.name"
+ (click)="goToSpecificPage(index, false)"
+ >
+ {{ page.name }}
+ <svg class="chevronRight" aria-hidden="true">
+ <use [attr.xlink:href]="'assets/form/sprite.svg#chevronRight'"></use>
+ </svg>
+ </div>
</div>
</div>
- <div *ngIf="currentPage == 1" class="informations page" fxLayout="column" fxLayoutGap="28px">
+ <div *ngIf="currentPage == pageTypeEnum.info" class="informations page" fxLayout="column" fxLayoutGap="28px">
<h3>De quelles informations faut-il vous munir ?</h3>
<img src="../../assets/form/factures.svg" alt="logo factures" />
<div>
@@ -46,8 +111,12 @@
</ul>
</div>
</div>
- <form [formGroup]="accountForm" *ngIf="accountForm && !profile">
- <div *ngIf="currentPage == 2" class="page">
+ <form
+ [formGroup]="accountForm"
+ *ngIf="accountForm && !profile"
+ (keyup.enter)="isPageValid && !isEditMode ? nextPage() : null"
+ >
+ <div *ngIf="currentPage == pageTypeEnum.accountInfo" class="page">
<div class="title">
<h3>Qui êtes-vous ?</h3>
<p>Ces informations ne seront pas visibles sur la plateforme</p>
@@ -56,24 +125,36 @@
<label for="surname">Nom</label>
<div fxLayout="row" fxLayoutGap="13px">
<input type="text" (input)="setValidationsForm()" formControlName="surname" class="form-input" />
- <img *ngIf="accountForm.get('surname').valid" src="../../assets/form/validate.svg" alt="logo valid" />
- <img
+ <app-svg-icon
+ *ngIf="accountForm.get('surname').valid"
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'validate'"
+ ></app-svg-icon>
+ <app-svg-icon
*ngIf="accountForm.get('surname').invalid && accountForm.get('surname').value"
- src="../../assets/form/notvalidate.svg"
- alt="logo invalid"
- />
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ ></app-svg-icon>
</div>
</div>
<div class="form-group" fxLayout="column">
<label for="name">Prénom</label>
<div fxLayout="row" fxLayoutGap="13px">
<input type="text" (input)="setValidationsForm()" formControlName="name" class="form-input" />
- <img *ngIf="accountForm.get('name').valid" src="../../assets/form/validate.svg" alt="logo valid" />
- <img
+ <app-svg-icon
+ *ngIf="accountForm.get('name').valid"
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'validate'"
+ ></app-svg-icon>
+ <app-svg-icon
*ngIf="accountForm.get('name').invalid && accountForm.get('name').value"
- src="../../assets/form/notvalidate.svg"
- alt="logo invalid"
- />
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ ></app-svg-icon>
</div>
</div>
<div class="form-group" fxLayout="column">
@@ -85,35 +166,58 @@
class="form-input phone"
(input)="modifyPhoneInput(accountForm, 'phone', $event.target.value)"
/>
- <img *ngIf="accountForm.get('phone').valid" src="../../assets/form/validate.svg" alt="logo valid" />
- <img
+ <app-svg-icon
+ *ngIf="accountForm.get('phone').valid"
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'validate'"
+ ></app-svg-icon>
+ <app-svg-icon
*ngIf="accountForm.get('phone').invalid && accountForm.get('phone').value"
- src="../../assets/form/notvalidate.svg"
- alt="logo invalid"
- />
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ ></app-svg-icon>
</div>
</div>
</div>
- <div *ngIf="currentPage == 3" class="page">
+ <div *ngIf="currentPage == pageTypeEnum.accountCredentials" class="page">
<div class="title">
<h3>Quels identifiants utiliserez-vous pour vous connecter ?</h3>
</div>
<div class="form-group" fxLayout="column">
<label for="email">Courriel personnel</label>
+ <p class="special invalid" *ngIf="this.accountForm.get('email').hasError('alreadyExist')">
+ L'email est déja utilisé.
+ </p>
<div fxLayout="row" fxLayoutGap="13px">
- <input type="text" (input)="setValidationsForm()" formControlName="email" class="form-input" />
- <img *ngIf="accountForm.get('email').valid" src="../../assets/form/validate.svg" alt="logo valid" />
- <img
- *ngIf="accountForm.get('email').invalid && accountForm.get('email').value"
- src="../../assets/form/notvalidate.svg"
- alt="logo invalid"
+ <input
+ type="text"
+ (input)="setValidationsForm()"
+ (keyup)="verifyUserExist($event.target.value)"
+ formControlName="email"
+ class="form-input"
+ [readonly]="isAccountMode"
+ [ngClass]="{ disabled: isAccountMode }"
/>
+ <app-svg-icon
+ *ngIf="accountForm.get('email').valid"
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'validate'"
+ ></app-svg-icon>
+ <app-svg-icon
+ *ngIf="accountForm.get('email').invalid && accountForm.get('email').value"
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ ></app-svg-icon>
</div>
</div>
<div class="form-group" fxLayout="column">
<label for="password">Création de mot de passe</label>
<p
- class="password"
+ class="special"
[ngClass]="{ invalid: accountForm.get('password').invalid && accountForm.get('password').value }"
>
Le mot de passe doit contenir au minimum : 8 caractères dont un caractère spécial, un caractère en majuscule
@@ -127,18 +231,25 @@
(input)="setValidationsForm()"
autocomplete="on"
/>
- <img
+ <app-svg-icon
+ [iconClass]="'validation grey hover'"
+ [type]="'form'"
+ [icon]="'eyePassword'"
(click)="showPassword()"
- class="eyePassword"
- src="../../assets/form/eyePassword.svg"
- alt="logo eyePassword"
- />
- <img *ngIf="accountForm.get('password').valid" src="../../assets/form/validate.svg" alt="logo valid" />
- <img
+ ></app-svg-icon>
+
+ <app-svg-icon
+ *ngIf="accountForm.get('password').valid"
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'validate'"
+ ></app-svg-icon>
+ <app-svg-icon
*ngIf="accountForm.get('password').invalid && accountForm.get('password').value"
- src="../../assets/form/notvalidate.svg"
- alt="logo invalid"
- />
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ ></app-svg-icon>
</div>
</div>
<div class="form-group" fxLayout="column">
@@ -151,28 +262,34 @@
(input)="setValidationsForm()"
autocomplete="on"
/>
- <img
+ <app-svg-icon
+ [iconClass]="'validation grey hover'"
+ [type]="'form'"
+ [icon]="'eyePassword'"
(click)="showConfirmPassword()"
- class="eyePassword"
- src="../../assets/form/eyePassword.svg"
- alt="logo eyePassword"
- />
- <img
+ ></app-svg-icon>
+ <app-svg-icon
*ngIf="accountForm.get('confirmPassword').valid && accountForm.get('confirmPassword').value"
- src="../../assets/form/validate.svg"
- alt="logo valid"
- />
- <img
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'validate'"
+ ></app-svg-icon>
+ <app-svg-icon
*ngIf="accountForm.get('confirmPassword').invalid && accountForm.get('confirmPassword').value"
- src="../../assets/form/notvalidate.svg"
- alt="logo invalid"
- />
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ ></app-svg-icon>
</div>
</div>
</div>
</form>
- <form [formGroup]="structureForm" *ngIf="structureForm">
- <div *ngIf="currentPage == 4" class="page">
+ <form
+ [formGroup]="structureForm"
+ *ngIf="structureForm"
+ (keyup.enter)="isPageValid && !isEditMode ? nextPage() : null"
+ >
+ <div *ngIf="currentPage == pageTypeEnum.structureNameAndAddress" class="page">
<div class="title">
<h3>Quelle structure voulez-vous réferencer ?</h3>
</div>
@@ -185,27 +302,34 @@
formControlName="structureName"
class="form-input structureName"
/>
- <img
+ <app-svg-icon
*ngIf="getStructureControl('structureName').valid"
- src="../../assets/form/validate.svg"
- alt="logo valid"
- />
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'validate'"
+ ></app-svg-icon>
</div>
</div>
<div class="form-group" fxLayout="column">
<label for="address">Adresse de la structure</label>
- <div fxLayout="row" fxLayoutGap="13px">
+ <div class="addressRow" fxLayout="row" fxLayoutGap="13px">
<app-address-autocomplete
[address]="getStructureControl('address').valid ? getStructureControl('address').value : null"
(inputAddress)="setAddressStructure()"
(selectedAddress)="setAddressStructure($event)"
></app-address-autocomplete>
- <img *ngIf="getStructureControl('address').valid" src="../../assets/form/validate.svg" alt="logo valid" />
+ <app-svg-icon
+ *ngIf="getStructureControl('address').valid"
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'validate'"
+ class="validateIcon"
+ ></app-svg-icon>
</div>
</div>
</div>
- <div *ngIf="currentPage == 5" class="page">
+ <div *ngIf="currentPage == pageTypeEnum.structurePhone" class="page">
<div class="title">
<h3>Quel numéro appelé pour joindre votre structure ?</h3>
</div>
@@ -218,20 +342,22 @@
class="form-input"
(input)="modifyPhoneInput(structureForm, 'contactPhone', $event.target.value)"
/>
- <img
+ <app-svg-icon
*ngIf="getStructureControl('contactPhone').valid"
- src="../../assets/form/validate.svg"
- alt="logo valid"
- />
- <img
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'validate'"
+ ></app-svg-icon>
+ <app-svg-icon
*ngIf="getStructureControl('contactPhone').invalid && getStructureControl('contactPhone').value"
- src="../../assets/form/notvalidate.svg"
- alt="logo invalid"
- />
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ ></app-svg-icon>
</div>
</div>
</div>
- <div *ngIf="currentPage == 6" class="page" fxLayout="column">
+ <div *ngIf="currentPage == pageTypeEnum.structureType" class="page" fxLayout="column">
<div class="title">
<h3>Quel type de structure ?</h3>
<p>1 seul choix possible</p>
@@ -245,9 +371,9 @@
></app-structure-type-picker>
</div>
</div>
- <div *ngIf="currentPage == 7" class="page">
+ <div *ngIf="currentPage == pageTypeEnum.structureAccessModality" class="page">
<div class="title">
- <h3>Quels sont les modalités d'accueil ?</h3>
+ <h3>Quelles sont les modalités d'accueil ?</h3>
<p>Plusieurs choix possibles</p>
</div>
<div *ngIf="accessModality" fxLayout="row wrap" fxLayoutGap="16px" fxLayoutAlign="flex-start">
@@ -261,7 +387,7 @@
</app-checkbox-form>
</div>
</div>
- <div *ngIf="currentPage == 8" class="page">
+ <div *ngIf="currentPage == pageTypeEnum.structureHours" class="page">
<div class="title">
<h3>Quels sont les horaires d'ouverture ?</h3>
<p class="notRequired">facultatif</p>
@@ -271,10 +397,9 @@
(updateForm)="updateHours($event)"
(updateFormError)="setHoursError()"
[structureInput]="hoursForm"
- [isEditMode]="!isEditMode"
></app-hour-picker>
</div>
- <div *ngIf="currentPage == 9" class="page">
+ <div *ngIf="currentPage == pageTypeEnum.structureHoursDetails" class="page">
<div class="title">
<h3>Avez-vous des précisions à apporter sur les horaires ?</h3>
<p class="notRequired">facultatif</p>
@@ -295,7 +420,7 @@
</p>
</div>
</div>
- <div *ngIf="currentPage == 10" class="page">
+ <div *ngIf="currentPage == pageTypeEnum.structurePmr" class="page">
<div class="title">
<h3>Est-ce accessible pour les personnes à mobilité réduite ?</h3>
</div>
@@ -305,7 +430,7 @@
>
</app-radio-form>
</div>
- <div *ngIf="currentPage == 11" class="page">
+ <div *ngIf="currentPage == pageTypeEnum.structureWebAndSocialNetwork" class="page">
<div class="title">
<h3>Comment vous trouver sur internet ?</h3>
</div>
@@ -313,17 +438,18 @@
<label for="structureName">Courriel de la structure</label>
<div fxLayout="row" fxLayoutGap="13px">
<input type="text" (input)="setValidationsForm()" formControlName="contactMail" class="form-input" />
- <img
+ <app-svg-icon
*ngIf="getStructureControl('contactMail').valid"
- src="../../assets/form/validate.svg"
- alt="logo valid"
- />
-
- <img
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'validate'"
+ ></app-svg-icon>
+ <app-svg-icon
*ngIf="getStructureControl('contactMail').invalid && getStructureControl('contactMail').value"
- src="../../assets/form/notvalidate.svg"
- alt="logo invalid"
- />
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ ></app-svg-icon>
</div>
</div>
<div class="collapse" [ngClass]="{ notCollapsed: !showWebsite }">
@@ -340,7 +466,7 @@
</div>
</div>
<div *ngIf="showWebsite" class="inputSection">
- <div class="form-group" fxLayout="column">
+ <div class="form-group website" fxLayout="column">
<label for="website">Adresse du site web</label>
<div fxLayout="row" fxLayoutGap="27px">
<input
@@ -350,16 +476,20 @@
formControlName="website"
class="form-input"
/>
- <img
+ <app-svg-icon
*ngIf="getStructureControl('website').valid && getStructureControl('website').value"
- src="../../assets/form/validate.svg"
- alt="logo valid"
- />
- <img
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'validate'"
+ class="validationIcon"
+ ></app-svg-icon>
+ <app-svg-icon
*ngIf="getStructureControl('website').invalid"
- src="../../assets/form/notvalidate.svg"
- alt="logo invalid"
- />
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ class="validationIcon"
+ ></app-svg-icon>
</div>
</div>
</div>
@@ -391,20 +521,24 @@
formControlName="facebook"
class="form-input withIcon"
/>
- <img
+ <app-svg-icon
*ngIf="
getStructureControl('facebook').valid &&
getStructureControl('facebook').value != null &&
getStructureControl('facebook').value != ''
"
- src="../../assets/form/validate.svg"
- alt="logo valid"
- />
- <img
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'validate'"
+ class="validationIcon"
+ ></app-svg-icon>
+ <app-svg-icon
*ngIf="getStructureControl('facebook').invalid"
- src="../../assets/form/notvalidate.svg"
- alt="logo invalid"
- />
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ class="validationIcon"
+ ></app-svg-icon>
</div>
</div>
<div class="form-group twitter">
@@ -419,20 +553,24 @@
formControlName="twitter"
class="form-input withIcon"
/>
- <img
+ <app-svg-icon
*ngIf="
getStructureControl('twitter').valid &&
getStructureControl('twitter').value != null &&
getStructureControl('twitter').value != ''
"
- src="../../assets/form/validate.svg"
- alt="logo valid"
- />
- <img
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'validate'"
+ class="validationIcon"
+ ></app-svg-icon>
+ <app-svg-icon
*ngIf="getStructureControl('twitter').invalid"
- src="../../assets/form/notvalidate.svg"
- alt="logo invalid"
- />
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ class="validationIcon"
+ ></app-svg-icon>
</div>
</div>
<div class="form-group instagram">
@@ -447,20 +585,25 @@
placeholder="instagram.com/resonum"
class="form-input withIcon"
/>
- <img
+
+ <app-svg-icon
*ngIf="
getStructureControl('instagram').valid &&
getStructureControl('instagram').value != null &&
getStructureControl('instagram').value != ''
"
- src="../../assets/form/validate.svg"
- alt="logo valid"
- />
- <img
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'validate'"
+ class="validationIcon"
+ ></app-svg-icon>
+ <app-svg-icon
*ngIf="getStructureControl('instagram').invalid"
- src="../../assets/form/notvalidate.svg"
- alt="logo invalid"
- />
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ class="validationIcon"
+ ></app-svg-icon>
</div>
</div>
<div class="form-group linkedin">
@@ -475,27 +618,31 @@
placeholder="linkedin.com/in/resonum"
class="form-input withIcon"
/>
- <img
+ <app-svg-icon
*ngIf="
getStructureControl('linkedin').valid &&
getStructureControl('linkedin').value != null &&
getStructureControl('linkedin').value != ''
"
- src="../../assets/form/validate.svg"
- alt="logo valid"
- />
- <img
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'validate'"
+ class="validationIcon"
+ ></app-svg-icon>
+ <app-svg-icon
*ngIf="getStructureControl('linkedin').invalid"
- src="../../assets/form/notvalidate.svg"
- alt="logo invalid"
- />
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ class="validationIcon"
+ ></app-svg-icon>
</div>
</div>
</div>
</div>
</div>
</div>
- <div *ngIf="currentPage == 12" class="page">
+ <div *ngIf="currentPage == pageTypeEnum.structurePublicTarget" class="page">
<div class="title">
<h3>Quel public peut venir vous consulter ?</h3>
<p>Plusieurs choix possibles</p>
@@ -517,7 +664,7 @@
</button>
</div>
</div>
- <div *ngIf="currentPage == 13" class="page">
+ <div *ngIf="currentPage == pageTypeEnum.structureAccompaniment" class="page">
<div class="title">
<h3>Quel(s) accompagnement(s) proposez-vous ?</h3>
<p class="notRequired">facultatif</p>
@@ -597,7 +744,7 @@
</div>
</div>
</div>
- <div *ngIf="currentPage == 14" class="page">
+ <div *ngIf="currentPage == pageTypeEnum.structureOtherAccompaniment" class="page">
<div class="title">
<h3>Quelles sont les autres démarches ?</h3>
</div>
@@ -616,7 +763,7 @@
</p>
</div>
</div>
- <div *ngIf="currentPage == 15" class="page">
+ <div *ngIf="currentPage == pageTypeEnum.structureWorkshop" class="page">
<div class="title">
<h3>Quel(s) atelier(s) au numérique proposez-vous ?</h3>
<p class="notRequired">facultatif</p>
@@ -659,7 +806,7 @@
</div>
</div>
</div>
- <div *ngIf="currentPage == 16" class="page">
+ <div *ngIf="currentPage == pageTypeEnum.structureWorkshopPrice" class="page">
<div class="title">
<h3>Ces ateliers sont-ils gratuits ?</h3>
</div>
@@ -669,17 +816,23 @@
>
</app-radio-form>
</div>
- <div *ngIf="currentPage == 17" class="page">
+ <div *ngIf="currentPage == pageTypeEnum.structureWifi" class="page">
<div class="title">
<h3>Proposez-vous le wifi en accès libre ?</h3>
</div>
<app-radio-form
- [selectedOption]="getStructureControl('freeWifi').value"
- (selectedEvent)="onRadioBtnChange('freeWifi', $event)"
+ [selectedOption]="
+ isEditMode
+ ? isInArray('wifiEnAccesLibre', 'equipmentsAndServices')
+ : isWifiChoosen
+ ? isInArray('wifiEnAccesLibre', 'equipmentsAndServices')
+ : null
+ "
+ (selectedEvent)="onCheckChange($event, 'equipmentsAndServices', 'wifiEnAccesLibre')"
>
</app-radio-form>
</div>
- <div *ngIf="currentPage == 18" class="page">
+ <div *ngIf="currentPage == pageTypeEnum.structureEquipments" class="page">
<div class="title">
<h3>Quel matériel mettez-vous à disposition ?</h3>
<p class="notRequired">facultatif</p>
@@ -710,7 +863,7 @@
</div>
</div>
<div *ngIf="equipment.openned" class="inputSection">
- <div class="form-group" fxLayout="column">
+ <div class="form-group equipments" fxLayout="column">
<label for="equipment">Nombre</label>
<div fxLayout="row" fxLayoutAlign=" center" fxLayoutGap="27px">
<ng-container *ngIf="equipment.module.id == 'ordinateurs'">
@@ -720,18 +873,20 @@
formControlName="nbComputers"
class="form-input nbEquipment"
/>
- <img
+ <app-svg-icon
*ngIf="getStructureControl('nbComputers').valid"
- src="../../assets/form/validate.svg"
- alt="logo valid"
- class="nbEquipment"
- />
- <img
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'validate'"
+ class="validationIcon"
+ ></app-svg-icon>
+ <app-svg-icon
*ngIf="getStructureControl('nbComputers').invalid"
- src="../../assets/form/notvalidate.svg"
- alt="logo valid"
- class="nbEquipment"
- />
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ class="validationIcon"
+ ></app-svg-icon>
</ng-container>
<ng-container *ngIf="equipment.module.id == 'tablettes'">
<input
@@ -740,18 +895,20 @@
formControlName="nbTablets"
class="form-input nbEquipment"
/>
- <img
+ <app-svg-icon
*ngIf="getStructureControl('nbTablets').valid"
- src="../../assets/form/validate.svg"
- alt="logo valid"
- class="nbEquipment"
- />
- <img
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'validate'"
+ class="validationIcon"
+ ></app-svg-icon>
+ <app-svg-icon
*ngIf="getStructureControl('nbTablets').invalid"
- src="../../assets/form/notvalidate.svg"
- alt="logo invalid"
- class="nbEquipment"
- />
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ class="validationIcon"
+ ></app-svg-icon>
</ng-container>
<ng-container *ngIf="equipment.module.id == 'imprimantes'">
<input
@@ -760,18 +917,20 @@
formControlName="nbPrinters"
class="form-input nbEquipment"
/>
- <img
+ <app-svg-icon
*ngIf="getStructureControl('nbPrinters').valid"
- src="../../assets/form/validate.svg"
- alt="logo valid"
- class="nbEquipment"
- />
- <img
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'validate'"
+ class="validationIcon"
+ ></app-svg-icon>
+ <app-svg-icon
*ngIf="getStructureControl('nbPrinters').invalid"
- src="../../assets/form/notvalidate.svg"
- alt="logo invalid"
- class="nbEquipment"
- />
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ class="validationIcon"
+ ></app-svg-icon>
</ng-container>
<ng-container *ngIf="equipment.module.id == 'bornesNumeriques'">
<input
@@ -780,18 +939,20 @@
formControlName="nbNumericTerminal"
class="form-input nbEquipment"
/>
- <img
+ <app-svg-icon
*ngIf="getStructureControl('nbNumericTerminal').valid"
- src="../../assets/form/validate.svg"
- alt="logo valid"
- class="nbEquipment"
- />
- <img
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'validate'"
+ class="validationIcon"
+ ></app-svg-icon>
+ <app-svg-icon
*ngIf="getStructureControl('nbNumericTerminal').invalid"
- src="../../assets/form/notvalidate.svg"
- alt="logo invalid"
- class="nbEquipment"
- />
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ class="validationIcon"
+ ></app-svg-icon>
</ng-container>
<ng-container *ngIf="equipment.module.id == 'scanners'">
<input
@@ -800,18 +961,20 @@
formControlName="nbScanners"
class="form-input nbEquipment"
/>
- <img
+ <app-svg-icon
*ngIf="getStructureControl('nbScanners').valid"
- src="../../assets/form/validate.svg"
- alt="logo valid"
- class="nbEquipment"
- />
- <img
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'validate'"
+ class="validationIcon"
+ ></app-svg-icon>
+ <app-svg-icon
*ngIf="getStructureControl('nbScanners').invalid"
- src="../../assets/form/notvalidate.svg"
- alt="logo valid"
- class="nbEquipment"
- />
+ [iconClass]="'validation'"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ class="validationIcon"
+ ></app-svg-icon>
</ng-container>
</div>
</div>
@@ -820,7 +983,7 @@
</div>
</ng-container>
</div>
- <div *ngIf="currentPage == 19" class="page">
+ <div *ngIf="currentPage == pageTypeEnum.structureLabels" class="page">
<div class="title">
<h3>Quelle(s) labelisation proposez-vous ?</h3>
<p class="notRequired">facultatif</p>
@@ -837,7 +1000,7 @@
</app-checkbox-form>
</div>
</div>
- <div *ngIf="currentPage == 20" class="page">
+ <div *ngIf="currentPage == pageTypeEnum.structureOtherServices" class="page">
<div class="title">
<h3>Quels autres services proposez-vous ?</h3>
<p class="notRequired">facultatif</p>
@@ -859,7 +1022,7 @@
</ng-container>
</div>
</div>
- <div *ngIf="currentPage == 21" class="page">
+ <div *ngIf="currentPage == pageTypeEnum.structureDescription" class="page">
<div class="title">
<h3>Pouvez vous présentez votre structure ?</h3>
<p class="notRequired">facultatif</p>
@@ -867,7 +1030,7 @@
<div class="textareaBlock" fxLayout="column">
<textarea
rows="8"
- placeholder="Exemple : nous sommes une équipe de 7 bénévoles qui orientont les personnes pour qui le numérique est une langue étrangère"
+ placeholder="Exemple : nous sommes une équipe de 7 bénévoles qui orientons les personnes pour qui le numérique est une langue étrangère"
maxlength="500"
formControlName="description"
></textarea>
@@ -876,7 +1039,7 @@
</p>
</div>
</div>
- <div *ngIf="currentPage == 22" class="page">
+ <div *ngIf="currentPage == pageTypeEnum.structureCovidInfo" class="page">
<div class="title">
<h3>Y a-t-il des informations spécifique à la période COVID ?</h3>
<p class="notRequired">facultatif</p>
@@ -895,95 +1058,90 @@
</p>
</div>
</div>
- <div *ngIf="currentPage == 23" class="page">
- <div class="title">
- <h3>
- Acceptez-vous que les informations saisies soient enregistrées par la Métropole de Lyon<span
- class="asterisk"
- >*</span
- >
- ?
- </h3>
- </div>
- <app-checkbox-form
- [isChecked]="userAcceptSavedDate"
- [text]="'J\'accepte'"
- (checkEvent)="acceptDataBeSaved($event)"
- >
- </app-checkbox-form>
- <p class="informationEndForm">
- <span class="asterisk">*</span> Les informations recueillies sont enregistrées dans un fichier par la
- Métropole de Lyon en vue de l'animation du réseau des acteurs de la médiation numérique. Elles sont conservées
- pendant 24 mois et sont destinées aux seuls intervenants habilités de la Métropole de Lyon. Vos données
- personnelles sont traitées dans ce cadre aux fins de Ârecensement des actions de médiation numérique sur le
- territoire de la métropole. Conformément à la loi 78-17 du 6 janvier 1978 modifiée relative à l'information,
- aux fichiers et aux libertés, et au Règlement Général européen à la Protection des Données, vous avez la
- possibilité d’exercer vos droits d’accès, de rectification, d’effacement, d’opposition, de limitation du
- traitement et de révocation de votre consentement. Afin d'exercer vos droits, vous pouvez vous adresser : par
- courrier postal à : Métropole de Lyon - Direction des Affaires Juridiques et de la Commande Publique - 20, rue
- du Lac - BP 33569 - 69505 Lyon Cedex par courrier électronique en remplissant le formulaire dédié sur Toodego,
- le site des services et démarches en ligne dans la Métropole de Lyon
- </p>
- </div>
- <div *ngIf="false" class="page">
- <div class="title">
- <h3>Voulez-vous inviter d’autres personnes dans cette structure ?</h3>
- <p class="notRequired">facultatif</p>
- </div>
- <div class="collapse" [ngClass]="{ notCollapsed: true }">
- <div fxLayout="column">
- <div class="collapseHeader" fxLayout="row" fxLayoutAlign=" center">
- <div class="titleCollapse">J’ajoute d'autres personnes dans cette structure</div>
- <div class="logo">
- <svg class="show" aria-hidden="true">
- <use [attr.xlink:href]="'assets/form/sprite.svg#show'"></use>
- </svg>
- <svg class="hide" aria-hidden="true">
- <use [attr.xlink:href]="'assets/form/sprite.svg#hide'"></use>
- </svg>
- </div>
- </div>
- </div>
- </div>
+ </form>
+ <div *ngIf="currentPage == pageTypeEnum.cgu" class="page">
+ <div class="title">
+ <h3>
+ Acceptez-vous que les informations saisies soient enregistrées par la Métropole de Lyon<span class="asterisk"
+ >*</span
+ >
+ ?
+ </h3>
</div>
- <div *ngIf="currentPage == nbPagesForm && !profile" class="page" fxLayout="column" fxLayoutGap="69px">
- <svg aria-hidden="true">
- <use [attr.xlink:href]="'assets/form/sprite.svg#emailVerification'"></use>
- </svg>
- <h3>Un courriel vous a été envoyé afin de finaliser votre inscription</h3>
+ <app-checkbox-form
+ [isChecked]="userAcceptSavedDate"
+ [text]="'J\'accepte'"
+ (checkEvent)="acceptDataBeSaved($event)"
+ >
+ </app-checkbox-form>
+ <p class="informationEndForm">
+ <span class="asterisk">*</span> Les informations recueillies sont enregistrées dans un fichier par la Métropole
+ de Lyon en vue de l'animation du réseau des acteurs de la médiation numérique. Elles sont conservées pendant 24
+ mois et sont destinées aux seuls intervenants habilités de la Métropole de Lyon. Vos données personnelles sont
+ traitées dans ce cadre aux fins de Ârecensement des actions de médiation numérique sur le territoire de la
+ métropole. Conformément à la loi 78-17 du 6 janvier 1978 modifiée relative à l'information, aux fichiers et aux
+ libertés, et au Règlement Général européen à la Protection des Données, vous avez la possibilité d’exercer vos
+ droits d’accès, de rectification, d’effacement, d’opposition, de limitation du traitement et de révocation de
+ votre consentement. Afin d'exercer vos droits, vous pouvez vous adresser : par courrier postal à : Métropole de
+ Lyon - Direction des Affaires Juridiques et de la Commande Publique - 20, rue du Lac - BP 33569 - 69505 Lyon
+ Cedex par courrier électronique en remplissant le formulaire dédié sur Toodego, le site des services et
+ démarches en ligne dans la Métropole de Lyon
+ </p>
+ </div>
+ <div
+ *ngIf="currentPage == nbPagesForm && !profile"
+ class="page"
+ fxLayout="column"
+ fxLayoutAlign="center center"
+ fxLayoutGap="69px"
+ >
+ <svg aria-hidden="true">
+ <use [attr.xlink:href]="'assets/form/sprite.svg#emailVerification'"></use>
+ </svg>
+ <h3>Un courriel vous a été envoyé afin de finaliser votre inscription</h3>
+ </div>
+ <div *ngIf="currentPage == nbPagesForm && profile" class="page">
+ <div class="title">
+ <h3>
+ Bravo !<br />
+ Votre structure a bien été référencée.
+ </h3>
</div>
- <div *ngIf="currentPage == nbPagesForm && profile" class="page">
- <div class="title">
- <h3>
- Bravo !<br />
- Votre structure a bien été référencée.
- </h3>
- </div>
- <div class="structureInfoBlock" fxLayout="row" fxLayoutAlign=" center">
- <div class="structureInfoContent" fxLayout="column">
- {{ getStructureControl('structureName').value }}
- <span>{{ getStructureControl('structureType').value }}</span>
- </div>
- <div class="validateSvg">
- <svg class="validate" aria-hidden="true">
- <use [attr.xlink:href]="'assets/form/sprite.svg#checkVector'"></use>
- </svg>
- </div>
+ <div class="structureInfoBlock" fxLayout="row" fxLayoutAlign="center">
+ <div class="structureInfoContent" fxLayout="column">
+ {{ getStructureControl('structureName').value }}
+ <span>{{ getStructureControl('structureType').value }}</span>
+ </div>
+ <div class="validateSvg">
+ <svg class="validate" aria-hidden="true">
+ <use [attr.xlink:href]="'assets/form/sprite.svg#checkVector'"></use>
+ </svg>
</div>
</div>
- </form>
+ </div>
<div *ngIf="currentPage != 0" class="footer desktop">
- <div fxLayout="row" fxLayoutAlign="center center" *ngIf="currentPage != nbPagesForm">
+ <div fxLayout="row" fxLayoutAlign="center center" *ngIf="currentPage != nbPagesForm && !isEditMode">
<app-footer-form
+ [btnName]="['Précédent', 'Suivant']"
(previousPage)="previousPage()"
(nextPage)="nextPage()"
[isValid]="isPageValid"
></app-footer-form>
</div>
+ <div fxLayout="row" fxLayoutAlign="center center" *ngIf="isEditMode">
+ <button
+ class="btn-primary"
+ [ngClass]="{ invalid: !isPageValid }"
+ [disabled]="!isPageValid"
+ (click)="goToSpecificPage(0, true)"
+ >
+ Valider
+ </button>
+ </div>
<button
*ngIf="currentPage == nbPagesForm && !profile"
- class="btn validate unique"
+ class="btn-primary validate unique"
routerLink="/home"
[routerLinkActive]="'active'"
>
@@ -991,25 +1149,41 @@
</button>
<button
*ngIf="currentPage == nbPagesForm && profile"
- class="btn unique"
+ class="btn-primary unique"
routerLink="/home"
[state]="{ data: createdStructure }"
>
Voir ma structure
</button>
</div>
+ <div *ngIf="isEditMode && currentPage == 0" class="footerEditMode">
+ <div fxLayout="row" fxLayoutAlign="center center">
+ <button class="btn-primary unique" (click)="closeEditMode()">Terminer</button>
+ </div>
+ </div>
</div>
<div *ngIf="currentPage != 0" class="footer phone">
- <div fxLayout="row" fxLayoutAlign="center center" *ngIf="currentPage != nbPagesForm">
+ <div fxLayout="row" fxLayoutAlign="center center" *ngIf="currentPage != nbPagesForm && !isEditMode">
<app-footer-form
+ [btnName]="['Précédent', 'Suivant']"
(previousPage)="previousPage()"
(nextPage)="nextPage()"
[isValid]="isPageValid"
></app-footer-form>
</div>
+ <div fxLayout="row" fxLayoutAlign="center center" *ngIf="isEditMode">
+ <button
+ class="btn-primary"
+ [ngClass]="{ invalid: !isPageValid }"
+ [disabled]="!isPageValid"
+ (click)="goToSpecificPage(0, true)"
+ >
+ Valider
+ </button>
+ </div>
<button
*ngIf="currentPage == nbPagesForm && !profile"
- class="btn validate unique"
+ class="btn-primary validate unique"
routerLink="/home"
[routerLinkActive]="'active'"
>
@@ -1017,7 +1191,7 @@
</button>
<button
*ngIf="currentPage == nbPagesForm && profile"
- class="btn unique"
+ class="btn-primary unique"
routerLink="/home"
[state]="{ data: createdStructure }"
>
diff --git a/src/app/form/form.component.scss b/src/app/form/form.component.scss
index 203a87dacfe3a1eed81fb8d603fbc5e1393a0452..d32ba5a2cc79f9c57c473f12142886501002b6e7 100644
--- a/src/app/form/form.component.scss
+++ b/src/app/form/form.component.scss
@@ -5,7 +5,11 @@
@import '../../assets/scss/shapes';
@import '../../assets/scss/z-index';
-$progressBar-height: 50px;
+.disabled {
+ opacity: 0.4;
+ cursor: not-allowed;
+}
+
h3 {
margin: 0;
}
@@ -27,15 +31,6 @@ h3 {
max-width: 960px;
margin: 20px auto;
text-align: center;
- .btn {
- width: 149px;
- &.validate {
- background-color: $green-1;
- }
- &.unique {
- width: 240px;
- }
- }
&.desktop {
@media #{$tablet} {
display: none;
@@ -90,17 +85,46 @@ h3 {
}
}
.content {
+ .editHome {
+ height: calc(
+ 100vh - #{$header-height} - #{$footer-height} - 81px - 1px - 55px - 48px
+ ) !important; // -1px because of header border
+ }
+ @media #{$tablet} {
+ height: 100%;
+ &.editMode {
+ .page {
+ height: calc(
+ 100vh - #{$header-height-phone} - #{$footer-height-phone} - 87px - 1px
+ ); // -1px because of header border
+ }
+ .editHome {
+ height: unset !important; // -1px because of header border
+ margin-bottom: 80px;
+ }
+ }
+ }
padding: 0 16px;
display: block;
overflow-y: auto;
height: auto;
h2 {
- @include cn-bold-28;
- color: $secondary-color;
+ @include cn-bold-26;
+ color: $black;
margin-bottom: 0;
+ span {
+ color: $secondary-color;
+ }
+ &.no-wrap {
+ white-space: nowrap;
+ }
}
h3 {
- @include cn-bold-22;
+ @include cn-bold-26;
+
+ @media #{$tablet} {
+ @include cn-bold-22;
+ }
}
.page {
max-width: 960px;
@@ -116,6 +140,7 @@ h3 {
height: 100%;
.btnStart {
margin-top: 90px;
+ margin-bottom: 10px;
text-align: center;
}
}
@@ -151,12 +176,12 @@ h3 {
margin-top: 10px;
margin-bottom: 0;
@include cn-regular-18;
- &.password {
+ &.special {
@include cn-regular-14;
color: $grey-3;
margin-top: 4px;
- width: 256px;
+ width: 280px;
&.invalid {
color: $orange-warning;
}
@@ -189,21 +214,30 @@ h3 {
}
}
-.btn {
- background: $secondary-color;
- border-radius: 4px;
- outline: none;
- cursor: pointer;
- border: 0;
- color: $white;
- height: 40px;
- width: 192px;
- @include btn-bold;
-
+.btn-primary {
+ &.previous {
+ background-color: initial;
+ color: $grey-2;
+ width: 120px;
+ border-radius: 6px;
+ border: 1px solid $grey-4;
+ }
&.start {
margin-bottom: 26px;
}
}
+.chevronRight {
+ height: 24px;
+ width: 24px;
+ stroke: $grey-2;
+ margin-left: 10px;
+}
+.chevronLeft {
+ height: 24px;
+ width: 24px;
+ stroke: $black;
+ margin-right: 10px;
+}
.progressBar {
height: #{$progressBar-height};
max-width: 960px;
@@ -239,6 +273,28 @@ h3 {
label {
color: $grey-2;
}
+ &.facebook,
+ &.twitter,
+ &.instagram,
+ &.linkedin,
+ &.website,
+ &.equipments {
+ div {
+ height: 52px;
+ .validationIcon {
+ margin-right: -53px;
+ }
+ }
+ }
+ div {
+ height: 44px;
+ }
+ .addressRow {
+ height: auto;
+ .validateIcon {
+ height: 38px !important;
+ }
+ }
}
input {
margin-top: 4px;
@@ -255,7 +311,6 @@ input {
img {
max-height: 340px;
&.eyePassword {
- padding: 0 2.5px; // Align to email input
cursor: pointer;
&:hover {
opacity: 0.8;
@@ -271,14 +326,6 @@ img {
@media #{$tablet} {
width: 296px;
}
- .logo {
- .hide {
- display: block;
- }
- .show {
- display: none;
- }
- }
&.notCollapsed {
margin-bottom: 8px;
background: $grey-6;
@@ -346,14 +393,6 @@ img {
}
}
padding: 0px 15px 19px 12px;
- img {
- margin-top: 8px;
- //padding-left: 41px;
- margin-right: -54px;
- &.nbEquipment {
- padding-left: 214px;
- }
- }
svg {
margin-top: 8px;
width: 22px;
@@ -385,6 +424,12 @@ img {
height: 100%;
fill: $grey-1;
}
+ .hide {
+ display: block;
+ }
+ .show {
+ display: none;
+ }
}
}
@@ -449,3 +494,44 @@ img {
}
}
}
+.footerEditMode {
+ width: 100%;
+ position: fixed;
+ bottom: 56px;
+ margin: 0;
+ background: $white;
+ left: 0;
+ border-top: 1px solid $grey-4;
+ padding: 20px 0;
+ @media #{$tablet} {
+ bottom: 0;
+ left: 0;
+ }
+}
+.returnBtnSection {
+ max-width: 960px;
+ margin: 24px auto;
+}
+.itemSummary {
+ height: 60px;
+ border-bottom: 1px solid $grey-4;
+ @include cn-bold-20;
+ cursor: pointer;
+ &:hover {
+ background: $grey-6;
+ }
+ &.last {
+ border: 0;
+ }
+}
+.headerEditMode {
+ max-width: 960px;
+ margin: auto;
+ margin-top: 24px;
+ margin-bottom: 24px;
+ h2 {
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ }
+}
diff --git a/src/app/form/form.component.spec.ts b/src/app/form/form.component.spec.ts
index 9e6733867669dbe3c32233ebfaad36ce0a0656e4..940d9cf2729552638c10bda394c40aa6839c5f91 100644
--- a/src/app/form/form.component.spec.ts
+++ b/src/app/form/form.component.spec.ts
@@ -1,7 +1,6 @@
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { FormArray, FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
-import { Time } from '../models/time.model';
import { SharedModule } from '../shared/shared.module';
import { FormComponent } from './form.component';
@@ -56,27 +55,27 @@ describe('FormComponent', () => {
}),
tuesday: new FormGroup({
open: new FormControl(true, Validators.required),
- time: new FormArray([]) as FormArray,
+ time: new FormArray([]),
}),
wednesday: new FormGroup({
open: new FormControl(true, Validators.required),
- time: new FormArray([]) as FormArray,
+ time: new FormArray([]),
}),
thursday: new FormGroup({
open: new FormControl(true, Validators.required),
- time: new FormArray([]) as FormArray,
+ time: new FormArray([]),
}),
friday: new FormGroup({
open: new FormControl(true, Validators.required),
- time: new FormArray([]) as FormArray,
+ time: new FormArray([]),
}),
saturday: new FormGroup({
open: new FormControl(false, Validators.required),
- time: new FormArray([]) as FormArray,
+ time: new FormArray([]),
}),
sunday: new FormGroup({
open: new FormControl(false, Validators.required),
- time: new FormArray([]) as FormArray,
+ time: new FormArray([]),
}),
}),
exceptionalClosures: new FormControl('structure.exceptionalClosures'),
@@ -114,7 +113,7 @@ describe('FormComponent', () => {
it('should return the correct Time from a specific day', () => {
const day = 'monday';
const control = component.getTime(day);
- const TimeForm = component.structureForm.get('hours').get(day).get('time') as FormArray;
+ const TimeForm = component.structureForm.get('hours').get(day).get('time');
expect(control).toEqual(TimeForm);
});
it('should return true', () => {
diff --git a/src/app/form/form.component.ts b/src/app/form/form.component.ts
index 6832ffc8a1dd63d5f94939cf74c52b64e7ea41c7..692a0a761ba6101bdaaf36744fc784c6e1f1df1c 100644
--- a/src/app/form/form.component.ts
+++ b/src/app/form/form.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
import { AbstractControl, FormArray, FormControl, FormGroup, Validators } from '@angular/forms';
import { Structure } from '../models/structure.model';
import { Time } from '../models/time.model';
@@ -13,25 +13,27 @@ import { MustMatch } from '../shared/validator/form';
import { Address } from '../models/address.model';
import { Module } from '../structure-list/models/module.model';
import { Equipment } from '../structure-list/enum/equipment.enum';
-import { Router } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
import { AuthService } from '../services/auth.service';
import { first } from 'rxjs/operators';
-import { Regex } from '../shared/enum/regex.enum';
+import { PageTypeEnum } from './pageType.enum';
+import { CustomRegExp } from '../utils/CustomRegExp';
+import { StructureWithOwners } from '../models/structureWithOwners.model';
+import { RouterListenerService } from '../services/routerListener.service';
+const { DateTime } = require('luxon');
@Component({
selector: 'app-structureForm',
templateUrl: './form.component.html',
styleUrls: ['./form.component.scss'],
})
export class FormComponent implements OnInit {
- @Input() public idStructure?: string;
- @Input() public isEditMode: boolean = true;
public profile: User;
public createdStructure: Structure;
-
// Form var
public structureForm: FormGroup;
public accountForm: FormGroup;
public hoursForm: FormGroup;
+ public editForm: FormGroup;
public labelsQualifications: Category;
public publics: Category;
public accessModality: Category;
@@ -39,6 +41,9 @@ export class FormComponent implements OnInit {
public proceduresAccompaniment: Category;
public equipmentsAndServices: { module: Module; openned: boolean }[] = [];
public trainingCategories: { category: Category; openned: boolean }[] = [];
+ public pageTypeEnum = PageTypeEnum;
+ public claimStructure: Structure = null;
+ public linkedStructureId: Array<string> = null;
// Page and progress var
public currentPage = 0;
@@ -62,95 +67,163 @@ export class FormComponent implements OnInit {
public isShowPassword = false;
public userAcceptSavedDate = false;
public showMenu = false;
+ public isEditMode = false;
+ public isClaimMode = false;
+ public isAccountMode = false;
+ public isJoinMode = false;
+ public isLoading = false;
+ public isWifiChoosen = null;
+ public structureWithOwners: StructureWithOwners;
constructor(
private structureService: StructureService,
private searchService: SearchService,
private profileService: ProfileService,
- private authService: AuthService
+ private authService: AuthService,
+ private router: Router,
+ private route: ActivatedRoute,
+ private routerListener: RouterListenerService
) {}
- ngOnInit(): void {
+ async ngOnInit(): Promise<void> {
+ this.isLoading = true;
this.profileService.getProfile().then((user: User) => {
this.profile = user;
});
-
+ await this.setCategories();
// Check if it's a new structure or edit structure
- if (this.idStructure) {
- this.structureService.getStructure(this.idStructure).subscribe((structure) => {
- this.initForm(structure);
- this.idStructure = structure._id;
+ this.isLoading = false;
+ if (history.state.data) {
+ this.isEditMode = true;
+ this.isWifiChoosen = true;
+ const editStructure = new Structure(history.state.data);
+ this.initForm(editStructure);
+ this.structureService.getStructureWithOwners(editStructure._id, this.profile).subscribe((s) => {
+ this.structureWithOwners = s;
});
+ } else if (history.state.newUser) {
+ this.isClaimMode = true;
+ // Handle join strucutre, the case is very similar to claim
+ if (history.state.isJoin) {
+ this.isJoinMode = true;
+ }
+ this.createAccountForm();
+ this.claimStructure = history.state.newUser;
+ this.setValidationsForm();
} else {
this.initForm(new Structure());
}
- this.setCategories();
+ // Handle account creation when pre-register
+ this.route.data.subscribe((data) => {
+ if (data.user) {
+ this.isAccountMode = true;
+ this.createAccountForm(data.user.email);
+ this.linkedStructureId = data.user.pendingStructuresLink;
+ this.setValidationsForm();
+ this.currentPage = PageTypeEnum.accountInfo;
+ }
+ });
+ }
+
+ public previousUrl(): void {
+ if (this.claimStructure) {
+ this.routerListener.goToPreviousUrl(this.claimStructure);
+ } else if (this.editForm) {
+ this.routerListener.goToPreviousUrl(this.editForm.value);
+ } else {
+ this.routerListener.goToPreviousUrl();
+ }
}
- private setCategories(): void {
+ async setCategories(): Promise<void> {
this.searchService.getCategoriesAccompaniment().subscribe((categories: Category[]) => {
this.proceduresAccompaniment = categories[0];
});
- this.searchService.getCategoriesMoreFilters().subscribe((categories: Category[]) => {
- categories.forEach((categ) => {
- switch (categ.id) {
- case CategoryEnum.accessModality: {
- this.accessModality = categ;
- break;
- }
- case CategoryEnum.equipmentsAndServices: {
- categ.modules.forEach((c) => {
- this.equipmentsAndServices.push({ module: c, openned: false });
- });
- break;
- }
- case CategoryEnum.labelsQualifications: {
- this.labelsQualifications = categ;
- break;
- }
- case CategoryEnum.publics: {
- this.publics = categ;
- break;
- }
- case CategoryEnum.publicsAccompaniment: {
- this.publicsAccompaniment = categ;
- break;
- }
+ const equipmentsCategs = await this.searchService.getCategoriesMoreFilters().toPromise();
+ equipmentsCategs.forEach((categ) => {
+ switch (categ.id) {
+ case CategoryEnum.accessModality: {
+ this.accessModality = categ;
+ break;
}
- });
+ case CategoryEnum.equipmentsAndServices: {
+ categ.modules.forEach((c) => {
+ this.equipmentsAndServices.push({ module: c, openned: false });
+ });
+ break;
+ }
+ case CategoryEnum.labelsQualifications: {
+ this.labelsQualifications = categ;
+ break;
+ }
+ case CategoryEnum.publics: {
+ this.publics = categ;
+ break;
+ }
+ case CategoryEnum.publicsAccompaniment: {
+ this.publicsAccompaniment = categ;
+ break;
+ }
+ }
});
- this.searchService.getCategoriesTraining().subscribe((categories: Category[]) => {
- categories.forEach((categ) => {
- this.trainingCategories.push({ category: categ, openned: false });
- });
+ let categs = await this.searchService.getCategoriesTraining().toPromise();
+ categs.forEach((categ) => {
+ this.trainingCategories.push({ category: categ, openned: false });
});
}
private initForm(structure: Structure): void {
// Init account Form
+ this.createAccountForm();
+
+ // Init form
+ this.structureForm = this.createStructureForm(structure);
+ if (this.isEditMode) {
+ this.editForm = this.createStructureForm(structure);
+ }
+
+ // Init hours form
+ this.hoursForm = new FormGroup({
+ monday: this.createDay(structure.hours.monday),
+ tuesday: this.createDay(structure.hours.tuesday),
+ wednesday: this.createDay(structure.hours.wednesday),
+ thursday: this.createDay(structure.hours.thursday),
+ friday: this.createDay(structure.hours.friday),
+ saturday: this.createDay(structure.hours.saturday),
+ sunday: this.createDay(structure.hours.sunday),
+ });
+ if (this.isEditMode) {
+ this.showCollapse(structure);
+ }
+
+ this.setValidationsForm();
+ }
+
+ private createAccountForm(email?: string): void {
this.accountForm = new FormGroup(
{
- email: new FormControl('', [Validators.required, Validators.pattern(Regex.email)]), //NOSONAR
- name: new FormControl('', [Validators.required, Validators.pattern(Regex.textWithoutNumber)]), //NOSONAR
- surname: new FormControl('', [Validators.required, Validators.pattern(Regex.textWithoutNumber)]), //NOSONAR
- phone: new FormControl('', [Validators.required, Validators.pattern(Regex.phone)]), //NOSONAR
+ email: new FormControl(email ? email : '', [Validators.required, Validators.pattern(CustomRegExp.EMAIL)]),
+ name: new FormControl('', [Validators.required, Validators.pattern(CustomRegExp.TEXT_WITHOUT_NUMBER)]),
+ surname: new FormControl('', [Validators.required, Validators.pattern(CustomRegExp.TEXT_WITHOUT_NUMBER)]),
+ phone: new FormControl('', [Validators.required, Validators.pattern(CustomRegExp.PHONE)]),
password: new FormControl('', [
Validators.required,
- Validators.pattern(/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/), //NOSONAR
+ Validators.pattern(CustomRegExp.PASSWORD), //NOSONAR
]),
confirmPassword: new FormControl(''),
},
[MustMatch('password', 'confirmPassword')]
);
+ }
- // Init form
- this.structureForm = new FormGroup({
+ private createStructureForm(structure): FormGroup {
+ const form = new FormGroup({
_id: new FormControl(structure._id),
coord: new FormControl(structure.coord),
structureType: new FormControl(structure.structureType, Validators.required),
structureName: new FormControl(structure.structureName, Validators.required),
description: new FormControl(structure.description),
- lockdownActivity: new FormControl(structure.description),
+ lockdownActivity: new FormControl(structure.lockdownActivity),
address: new FormGroup({
numero: new FormControl(structure.address.numero),
street: new FormControl(structure.address.street, Validators.required),
@@ -158,17 +231,17 @@ export class FormComponent implements OnInit {
}),
contactMail: new FormControl(structure.contactMail, [
Validators.required,
- Validators.pattern(Regex.email), //NOSONAR
+ Validators.pattern(CustomRegExp.EMAIL),
]),
contactPhone: new FormControl(structure.contactPhone, [
Validators.required,
- Validators.pattern(Regex.phone), //NOSONAR
+ Validators.pattern(CustomRegExp.PHONE),
]),
- website: new FormControl(structure.website, Validators.pattern(Regex.website)), //NOSONAR
- facebook: new FormControl(structure.facebook, Validators.pattern(Regex.facebook)), //NOSONAR
- twitter: new FormControl(structure.twitter, Validators.pattern(Regex.twitter)), //NOSONAR
- instagram: new FormControl(structure.instagram, Validators.pattern(Regex.instagram)), //NOSONAR
- linkedin: new FormControl(structure.linkedin, Validators.pattern(Regex.linkedIn)), //NOSONAR
+ website: new FormControl(structure.website, Validators.pattern(CustomRegExp.WEBSITE)),
+ facebook: new FormControl(structure.facebook, Validators.pattern(CustomRegExp.FACEBOOK)),
+ twitter: new FormControl(structure.twitter, Validators.pattern(CustomRegExp.TWITTER)),
+ instagram: new FormControl(structure.instagram, Validators.pattern(CustomRegExp.INSTAGRAM)),
+ linkedin: new FormControl(structure.linkedin, Validators.pattern(CustomRegExp.LINKEDIN)),
hours: new FormGroup({}),
pmrAccess: new FormControl(structure.pmrAccess, Validators.required),
exceptionalClosures: new FormControl(structure.exceptionalClosures),
@@ -186,39 +259,101 @@ export class FormComponent implements OnInit {
digitalCultureSecurity: this.loadArrayForCheckbox(structure.digitalCultureSecurity, false),
nbComputers: new FormControl(
structure.equipmentsAndServices.includes('ordinateurs') ? structure.nbComputers : 1,
- [Validators.required, Validators.pattern(Regex.noNullNumber)] //NOSONAR
+ [Validators.required, Validators.pattern(CustomRegExp.NO_NULL_NUMBER)]
),
nbPrinters: new FormControl(structure.equipmentsAndServices.includes('imprimantes') ? structure.nbPrinters : 1, [
Validators.required,
- Validators.pattern(Regex.noNullNumber), //NOSONAR
+ Validators.pattern(CustomRegExp.NO_NULL_NUMBER),
]),
nbTablets: new FormControl(structure.equipmentsAndServices.includes('tablettes') ? structure.nbTablets : 1, [
Validators.required,
- Validators.pattern(Regex.noNullNumber), //NOSONAR
+ Validators.pattern(CustomRegExp.NO_NULL_NUMBER),
]),
nbNumericTerminal: new FormControl(
structure.equipmentsAndServices.includes('bornesNumeriques') ? structure.nbNumericTerminal : 1,
- [Validators.required, Validators.pattern(Regex.noNullNumber)] //NOSONAR
- ),
- nbScanners: new FormControl(
- structure.equipmentsAndServices.includes('scanners') ? structure.nbScanners : 1,
- [Validators.required, Validators.pattern(Regex.noNullNumber)] //NOSONAR
+ [Validators.required, Validators.pattern(CustomRegExp.NO_NULL_NUMBER)]
),
+ nbScanners: new FormControl(structure.equipmentsAndServices.includes('scanners') ? structure.nbScanners : 1, [
+ Validators.required,
+ Validators.pattern(CustomRegExp.NO_NULL_NUMBER),
+ ]),
freeWorkShop: new FormControl(structure.freeWorkShop, Validators.required),
- freeWifi: new FormControl(structure.freeWifi, Validators.required),
});
-
- // Init hours form
- this.hoursForm = new FormGroup({
- monday: this.createDay(structure.hours.monday),
- tuesday: this.createDay(structure.hours.tuesday),
- wednesday: this.createDay(structure.hours.wednesday),
- thursday: this.createDay(structure.hours.thursday),
- friday: this.createDay(structure.hours.friday),
- saturday: this.createDay(structure.hours.saturday),
- sunday: this.createDay(structure.hours.sunday),
+ return form;
+ }
+ private showCollapse(s: Structure): void {
+ if (s.website) {
+ this.showWebsite = true;
+ }
+ if (s.facebook || s.twitter || s.instagram || s.linkedin) {
+ this.showSocialNetwork = true;
+ }
+ if (s.publicsAccompaniment.length) {
+ this.showPublicsAccompaniment = true;
+ }
+ if (s.proceduresAccompaniment.length) {
+ this.showProceduresAccompaniment = true;
+ }
+ this.trainingCategories.forEach((categ: { category: Category; openned: boolean }) => {
+ categ.openned = false;
+ switch (categ.category.id) {
+ case 'accessRight':
+ if (s.accessRight.length) {
+ categ.openned = true;
+ }
+ break;
+ case 'socialAndProfessional':
+ if (s.socialAndProfessional.length) {
+ categ.openned = true;
+ }
+ break;
+ case 'baseSkills':
+ if (s.baseSkills.length) {
+ categ.openned = true;
+ }
+ break;
+ case 'parentingHelp':
+ if (s.parentingHelp.length) {
+ categ.openned = true;
+ }
+ break;
+ case 'digitalCultureSecurity':
+ if (s.digitalCultureSecurity.length) {
+ categ.openned = true;
+ }
+ break;
+ }
+ });
+ this.equipmentsAndServices.forEach((equipment: { module: Module; openned: boolean }) => {
+ equipment.openned = false;
+ switch (equipment.module.id) {
+ case 'ordinateurs':
+ if (s.equipmentsAndServices.includes('ordinateurs')) {
+ equipment.openned = true;
+ }
+ break;
+ case 'tablettes':
+ if (s.equipmentsAndServices.includes('tablettes')) {
+ equipment.openned = true;
+ }
+ break;
+ case 'bornesNumeriques':
+ if (s.equipmentsAndServices.includes('bornesNumeriques')) {
+ equipment.openned = true;
+ }
+ break;
+ case 'imprimantes':
+ if (s.equipmentsAndServices.includes('imprimantes')) {
+ equipment.openned = true;
+ }
+ break;
+ case 'scanners':
+ if (s.equipmentsAndServices.includes('scanners')) {
+ equipment.openned = true;
+ }
+ break;
+ }
});
- this.setValidationsForm();
}
private loadArrayForCheckbox(array: string[], isRequired: boolean): FormArray {
@@ -254,12 +389,15 @@ export class FormComponent implements OnInit {
}
private createTime(time: Time): FormGroup {
return new FormGroup({
- openning: new FormControl(time.openning, Validators.pattern('[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,3}$')), //NOSONAR
- closing: new FormControl(time.closing, Validators.pattern('[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,3}$')), //NOSONAR
+ openning: new FormControl(time.openning),
+ closing: new FormControl(time.closing),
});
}
public onCheckChange(event: boolean, formControlName: string, value: string): void {
+ if (value == 'wifiEnAccesLibre') {
+ this.isWifiChoosen = true;
+ }
const formArray: FormArray = this.structureForm.get(formControlName) as FormArray;
if (event) {
// Add a new control in the arrayForm
@@ -281,114 +419,298 @@ export class FormComponent implements OnInit {
}
public setValidationsForm(): void {
- this.pagesValidation[0] = { valid: true };
- this.pagesValidation[1] = { valid: true };
- this.pagesValidation[2] = {
- valid:
- this.accountForm.get('surname').valid &&
- this.accountForm.get('name').valid &&
- this.accountForm.get('phone').valid,
- };
- this.pagesValidation[3] = {
- valid:
- this.accountForm.get('email').valid &&
- this.accountForm.get('password').valid &&
- this.accountForm.get('confirmPassword').valid,
- };
- this.pagesValidation[4] = {
- valid: this.getStructureControl('structureName').valid && this.getStructureControl('address').valid,
- };
- this.pagesValidation[5] = { valid: this.getStructureControl('contactPhone').valid };
- this.pagesValidation[6] = { valid: this.getStructureControl('structureType').valid };
- this.pagesValidation[7] = { valid: this.getStructureControl('accessModality').valid };
- this.pagesValidation[8] = { valid: this.hoursForm.valid };
- this.pagesValidation[9] = { valid: this.getStructureControl('exceptionalClosures').valid };
- this.pagesValidation[10] = { valid: this.getStructureControl('pmrAccess').valid };
- this.pagesValidation[11] = {
- valid:
- this.getStructureControl('contactMail').valid &&
- (this.getStructureControl('website').valid || !this.showWebsite) &&
- ((this.getStructureControl('facebook').valid &&
- this.getStructureControl('twitter').valid &&
- this.getStructureControl('instagram').valid) ||
- !this.showSocialNetwork),
- };
- this.pagesValidation[12] = { valid: this.getStructureControl('publics').valid };
- this.pagesValidation[13] = {
- valid:
- this.getStructureControl('publicsAccompaniment').valid &&
- this.getStructureControl('proceduresAccompaniment').valid,
- };
- this.pagesValidation[14] = {
- valid: this.getStructureControl('otherDescription').value,
- };
- this.pagesValidation[15] = {
- valid:
- this.getStructureControl('accessRight').valid &&
- this.getStructureControl('socialAndProfessional').valid &&
- this.getStructureControl('baseSkills').valid &&
- this.getStructureControl('parentingHelp').valid &&
- this.getStructureControl('digitalCultureSecurity').valid,
- };
- this.pagesValidation[16] = { valid: this.getStructureControl('freeWorkShop').valid };
- this.pagesValidation[17] = { valid: this.getStructureControl('freeWifi').valid };
- this.pagesValidation[18] = {
- valid:
- this.getStructureControl('equipmentsAndServices').valid &&
- this.getStructureControl('nbComputers').valid &&
- this.getStructureControl('nbPrinters').valid &&
- this.getStructureControl('nbTablets').valid &&
- this.getStructureControl('nbNumericTerminal').valid &&
- this.getStructureControl('nbScanners').valid,
- };
- this.pagesValidation[19] = { valid: this.getStructureControl('labelsQualifications').valid };
- this.pagesValidation[20] = { valid: this.getStructureControl('equipmentsAndServices').valid };
- this.pagesValidation[21] = { valid: this.getStructureControl('description').valid };
- this.pagesValidation[22] = { valid: this.getStructureControl('lockdownActivity').valid };
- this.pagesValidation[23] = { valid: this.userAcceptSavedDate };
- //this.pagesValidation[24] = { valid: true };
- this.updatePageValid();
+ if (this.isClaimMode) {
+ this.pagesValidation[PageTypeEnum.summary] = { valid: true };
+ this.pagesValidation[PageTypeEnum.accountInfo] = {
+ valid:
+ this.accountForm.get('surname').valid &&
+ this.accountForm.get('name').valid &&
+ this.accountForm.get('phone').valid,
+ };
+ this.pagesValidation[PageTypeEnum.accountCredentials] = {
+ valid:
+ this.accountForm.get('email').valid &&
+ this.accountForm.get('password').valid &&
+ this.accountForm.get('confirmPassword').valid,
+ };
+ this.pagesValidation[PageTypeEnum.cgu] = { valid: this.userAcceptSavedDate };
+ this.updatePageValid();
+ } else if (this.isAccountMode) {
+ this.pagesValidation[PageTypeEnum.accountInfo] = {
+ valid:
+ this.accountForm.get('surname').valid &&
+ this.accountForm.get('name').valid &&
+ this.accountForm.get('phone').valid,
+ };
+ this.pagesValidation[PageTypeEnum.accountCredentials] = {
+ valid:
+ this.accountForm.get('email').valid &&
+ this.accountForm.get('password').valid &&
+ this.accountForm.get('confirmPassword').valid,
+ };
+ this.pagesValidation[PageTypeEnum.cgu] = { valid: this.userAcceptSavedDate };
+ this.updatePageValid();
+ } else {
+ this.pagesValidation[PageTypeEnum.summary] = { valid: true };
+ this.pagesValidation[PageTypeEnum.info] = { valid: true };
+ this.pagesValidation[PageTypeEnum.accountInfo] = {
+ valid:
+ this.accountForm.get('surname').valid &&
+ this.accountForm.get('name').valid &&
+ this.accountForm.get('phone').valid,
+ };
+ this.pagesValidation[PageTypeEnum.accountCredentials] = {
+ valid:
+ this.accountForm.get('email').valid &&
+ this.accountForm.get('password').valid &&
+ this.accountForm.get('confirmPassword').valid,
+ };
+ this.pagesValidation[PageTypeEnum.structureNameAndAddress] = {
+ valid: this.getStructureControl('structureName').valid && this.getStructureControl('address').valid,
+ name: 'Nom et adresse',
+ };
+ this.pagesValidation[PageTypeEnum.structurePhone] = {
+ valid: this.getStructureControl('contactPhone').valid,
+ name: 'Téléphone',
+ };
+ this.pagesValidation[PageTypeEnum.structureType] = {
+ valid: this.getStructureControl('structureType').valid,
+ name: 'Type de structure',
+ };
+ this.pagesValidation[PageTypeEnum.structureAccessModality] = {
+ valid: this.getStructureControl('accessModality').valid,
+ name: "Modalités d'accueil ",
+ };
+ this.pagesValidation[PageTypeEnum.structureHours] = { valid: this.hoursForm.valid, name: "Horaires d'ouverture" };
+ this.pagesValidation[PageTypeEnum.structureHoursDetails] = {
+ valid: this.getStructureControl('exceptionalClosures').valid,
+ name: 'Précisions sur les horaires',
+ };
+ this.pagesValidation[PageTypeEnum.structurePmr] = {
+ valid: this.getStructureControl('pmrAccess').valid,
+ name: 'Accessibilité pour les personnes à mobilité réduite',
+ };
+ this.pagesValidation[PageTypeEnum.structureWebAndSocialNetwork] = {
+ valid:
+ this.getStructureControl('contactMail').valid &&
+ (this.getStructureControl('website').valid || !this.showWebsite) &&
+ ((this.getStructureControl('facebook').valid &&
+ this.getStructureControl('twitter').valid &&
+ this.getStructureControl('instagram').valid) ||
+ !this.showSocialNetwork),
+ name: 'Présence sur internet',
+ };
+ this.pagesValidation[PageTypeEnum.structurePublicTarget] = {
+ valid: this.getStructureControl('publics').valid,
+ name: 'Public admis',
+ };
+ this.pagesValidation[PageTypeEnum.structureAccompaniment] = {
+ valid:
+ this.getStructureControl('publicsAccompaniment').valid &&
+ this.getStructureControl('proceduresAccompaniment').valid,
+ name: 'Accompagnements proposés',
+ };
+ this.pagesValidation[PageTypeEnum.structureOtherAccompaniment] = {
+ valid: this.getStructureControl('otherDescription').value,
+ name: 'Autres démarches proposés',
+ };
+ this.pagesValidation[PageTypeEnum.structureWorkshop] = {
+ valid:
+ this.getStructureControl('accessRight').valid &&
+ this.getStructureControl('socialAndProfessional').valid &&
+ this.getStructureControl('baseSkills').valid &&
+ this.getStructureControl('parentingHelp').valid &&
+ this.getStructureControl('digitalCultureSecurity').valid,
+ name: 'Ateliers au numérique proposés',
+ };
+ this.pagesValidation[PageTypeEnum.structureWorkshopPrice] = {
+ valid: this.getStructureControl('freeWorkShop').valid,
+ name: 'Gratuité des ateliers',
+ };
+ this.pagesValidation[PageTypeEnum.structureWifi] = {
+ valid: this.getStructureControl('equipmentsAndServices').valid && this.isWifiChoosen,
+ name: 'Gratuité du wifi',
+ };
+ this.pagesValidation[PageTypeEnum.structureEquipments] = {
+ valid:
+ this.getStructureControl('equipmentsAndServices').valid &&
+ this.getStructureControl('nbComputers').valid &&
+ this.getStructureControl('nbPrinters').valid &&
+ this.getStructureControl('nbTablets').valid &&
+ this.getStructureControl('nbNumericTerminal').valid &&
+ this.getStructureControl('nbScanners').valid,
+ name: 'Matériels mis à disposition',
+ };
+ this.pagesValidation[PageTypeEnum.structureLabels] = {
+ valid: this.getStructureControl('labelsQualifications').valid,
+ name: 'Labélisations proposées',
+ };
+ this.pagesValidation[PageTypeEnum.structureOtherServices] = {
+ valid: this.getStructureControl('equipmentsAndServices').valid,
+ name: 'Autres services proposés',
+ };
+ this.pagesValidation[PageTypeEnum.structureDescription] = {
+ valid: this.getStructureControl('description').valid,
+ name: 'Présentation de la structure',
+ };
+ this.pagesValidation[PageTypeEnum.structureCovidInfo] = {
+ valid: this.getStructureControl('lockdownActivity').valid,
+ name: 'Informations spécifiques à la période COVID',
+ };
+ this.pagesValidation[PageTypeEnum.cgu] = { valid: this.userAcceptSavedDate };
+ this.updatePageValid();
+ }
}
private updatePageValid(): void {
this.isPageValid = this.pagesValidation[this.currentPage].valid;
}
- public nextPage(): void {
- // Check if user already connected to skip accountForm pages.
- if (this.currentPage == 1 && this.profile) {
- this.currentPage += 2; // Skip 2 pages from AccountForm
- this.progressStatus += 2 * (100 / this.nbPagesForm);
+
+ /**
+ * Page algo for claim structure case
+ */
+ public nextPageClaim(): void {
+ if (this.currentPage == this.nbPagesForm - 1) {
+ const user = new User(this.accountForm.value);
+ // Create user and claim structure
+ this.authService.register(user).subscribe(() => {
+ // If joinMode, send join request, if not send claim request;
+ if (this.isJoinMode) {
+ this.structureService.joinStructure(this.claimStructure._id, user.email).subscribe(() => {
+ this.progressStatus = 100;
+ });
+ } else {
+ this.structureService.claimStructureWithAccount(this.claimStructure._id, user.email).subscribe(() => {
+ this.progressStatus = 100;
+ });
+ }
+ });
}
- // Check if "other" isn't check to hide "other description" page
- if (this.currentPage == 13 && !this.isInArray('autres', 'proceduresAccompaniment')) {
- this.currentPage++; // page 14 skip and go to page 15
- this.progressStatus += 100 / this.nbPagesForm;
+
+ if (this.currentPage == PageTypeEnum.summary) {
+ this.currentPage = PageTypeEnum.accountInfo;
+ this.updatePageValid();
+ } else if (this.currentPage == PageTypeEnum.accountInfo) {
+ this.currentPage = PageTypeEnum.accountCredentials;
+ this.updatePageValid();
+ } else if (this.currentPage == PageTypeEnum.accountCredentials) {
+ this.currentPage = PageTypeEnum.cgu;
+ this.updatePageValid();
+ } else if (this.currentPage == PageTypeEnum.cgu) {
+ this.currentPage = this.nbPagesForm;
}
- // Check if going to the last page to submit form and send email verification.
+ this.progressStatus += 25;
+ }
+ /**
+ * Page algo for create account case
+ */
+ public nextPageAccount(): void {
if (this.currentPage == this.nbPagesForm - 1) {
- this.validateForm();
- } else {
- this.currentPage++;
- this.progressStatus += 100 / this.nbPagesForm;
+ const user = new User(this.accountForm.value);
+ // Create user with structure
+ user.structuresLink = this.linkedStructureId;
+ this.authService.register(user).subscribe(() => {
+ this.progressStatus = 100;
+ });
+ }
+
+ if (this.currentPage == PageTypeEnum.accountInfo) {
+ this.currentPage = PageTypeEnum.accountCredentials;
+ this.updatePageValid();
+ } else if (this.currentPage == PageTypeEnum.accountCredentials) {
+ this.currentPage = PageTypeEnum.cgu;
this.updatePageValid();
+ } else if (this.currentPage == PageTypeEnum.cgu) {
+ this.currentPage = this.nbPagesForm;
}
+
+ this.progressStatus += 25;
}
- public previousPage(): void {
- // Check if user already connected to skip accountForm pages.
- if (this.currentPage == 4 && this.profile) {
- this.currentPage -= 2; // Skip 2 pages from AccountForm
- this.progressStatus -= 2 * (100 / this.nbPagesForm);
+
+ /**
+ * Page algo for claim structure case
+ */
+ public previousPageClaim(): void {
+ if (this.currentPage == PageTypeEnum.accountInfo) {
+ this.currentPage = PageTypeEnum.summary;
+ this.updatePageValid();
+ } else if (this.currentPage == PageTypeEnum.accountCredentials) {
+ this.currentPage = PageTypeEnum.accountInfo;
+ this.updatePageValid();
+ } else if (this.currentPage == PageTypeEnum.cgu) {
+ this.currentPage = PageTypeEnum.accountCredentials;
+ this.updatePageValid();
}
- // Check if "other" isn't check to hide "other description" page
- if (this.currentPage == 15 && !this.isInArray('autres', 'proceduresAccompaniment')) {
- this.currentPage--; // page 14 skip and go to page 13
+ this.progressStatus -= 25;
+ }
+
+ /**
+ * Page algo for claim structure case
+ */
+ public previousPageAccount(): void {
+ if (this.currentPage == PageTypeEnum.accountCredentials) {
+ this.currentPage = PageTypeEnum.accountInfo;
+ this.updatePageValid();
+ } else if (this.currentPage == PageTypeEnum.cgu) {
+ this.currentPage = PageTypeEnum.accountCredentials;
+ this.updatePageValid();
+ }
+
+ this.progressStatus -= 25;
+ }
+
+ public nextPage(): void {
+ if (this.isClaimMode) {
+ this.nextPageClaim();
+ } else if (this.isAccountMode) {
+ this.nextPageAccount();
+ } else {
+ // Check if user already connected to skip accountForm pages.
+ if (this.currentPage == PageTypeEnum.info && this.profile) {
+ this.currentPage += 2; // Skip accountInfo pages from AccountForm
+ this.progressStatus += 2 * (100 / this.nbPagesForm);
+ }
+ // Check if "other" isn't check to hide "other description" page
+ if (
+ this.currentPage == PageTypeEnum.structureAccompaniment &&
+ !this.isInArray('autres', 'proceduresAccompaniment')
+ ) {
+ this.currentPage++; // page structureOtherAccompaniment skip and go to page structureWorkshop
+ this.progressStatus += 100 / this.nbPagesForm;
+ }
+ // Check if going to the last page to submit form and send email verification.
+ if (this.currentPage == this.nbPagesForm - 1) {
+ this.validateForm();
+ } else {
+ this.currentPage++;
+ this.progressStatus += 100 / this.nbPagesForm;
+ this.updatePageValid();
+ }
+ }
+ }
+ public previousPage(): void {
+ if (this.isClaimMode) {
+ this.previousPageClaim();
+ } else if (this.isAccountMode) {
+ this.previousPageAccount();
+ } else {
+ // Check if user already connected to skip accountForm pages.
+ if (this.currentPage == PageTypeEnum.structureNameAndAddress && this.profile) {
+ this.currentPage -= 2; // Skip 2 pages from AccountForm
+ this.progressStatus -= 2 * (100 / this.nbPagesForm);
+ }
+
+ // Check if "other" isn't check to hide "other description" page
+ if (this.currentPage == PageTypeEnum.structureWorkshop && !this.isInArray('autres', 'proceduresAccompaniment')) {
+ this.currentPage--; // page 14 skip and go to page 13
+ this.progressStatus -= 100 / this.nbPagesForm;
+ }
+ this.currentPage--;
this.progressStatus -= 100 / this.nbPagesForm;
+ this.updatePageValid();
}
- this.currentPage--;
- this.progressStatus -= 100 / this.nbPagesForm;
- this.updatePageValid();
}
public showPassword(): void {
this.isShowPassword = !this.isShowPassword;
@@ -507,19 +829,26 @@ export class FormComponent implements OnInit {
let structure: Structure = this.structureForm.value;
structure.hours = this.hoursForm.value;
let user: User;
- if (this.profile) {
- user = this.profile;
- structure.accountVerified = true;
- this.createStructure(structure, user);
+ if (this.isEditMode) {
+ this.structureService.editStructure(structure).subscribe((s: Structure) => {
+ this.createdStructure = this.structureService.updateOpeningStructure(s, DateTime.local());
+ this.editForm = this.createStructureForm(s);
+ });
} else {
- if (this.accountForm.valid) {
- user = new User(this.accountForm.value);
- this.authService
- .register(user)
- .pipe(first())
- .subscribe(() => {
- this.createStructure(structure, user);
- });
+ if (this.profile) {
+ user = this.profile;
+ structure.accountVerified = true;
+ this.createStructure(structure, user);
+ } else {
+ if (this.accountForm.valid) {
+ user = new User(this.accountForm.value);
+ this.authService
+ .register(user)
+ .pipe(first())
+ .subscribe(() => {
+ this.createStructure(structure, user);
+ });
+ }
}
}
}
@@ -542,7 +871,7 @@ export class FormComponent implements OnInit {
public canExit(): Promise<boolean> {
// Avoid confirmation when user submit form and leave.
- if (this.currentPage == this.nbPagesForm) {
+ if (this.currentPage == this.nbPagesForm || this.currentPage < 3 || this.isEditMode) {
return new Promise((resolve) => resolve(true));
} else {
return new Promise((resolve) => this.showModal(resolve));
@@ -557,4 +886,45 @@ export class FormComponent implements OnInit {
this.resolve(hasAccept);
this.showConfirmationModal = false;
}
+
+ // Function for editMode only
+
+ public goToSpecificPage(numPage: number, isSave: boolean): void {
+ if (isSave) {
+ this.validateForm();
+ } else {
+ const structure = new Structure(this.editForm.value);
+ this.structureForm = this.createStructureForm(structure);
+ this.showCollapse(structure);
+ }
+ this.currentPage = numPage;
+ this.updatePageValid();
+ }
+
+ public closeEditMode(): void {
+ this.router.navigateByUrl('home', { state: { data: this.createdStructure } });
+ }
+
+ public verifyUserExist(inputEmail): void {
+ if (this.accountForm.get('email').valid) {
+ this.profileService.isEmailAlreadyUsed(inputEmail).subscribe((isExist) => {
+ if (isExist) {
+ this.accountForm.get('email').setErrors({ alreadyExist: true });
+ this.setValidationsForm();
+ }
+ });
+ }
+ }
+
+ public displayAddStructure(): boolean {
+ return this.currentPage == this.pageTypeEnum.summary && !this.isEditMode && !this.isClaimMode;
+ }
+
+ public displayClaimStructure(): boolean {
+ return this.currentPage == this.pageTypeEnum.summary && !this.isEditMode && this.isClaimMode;
+ }
+
+ public structureDeleted(): void {
+ this.router.navigateByUrl('home');
+ }
}
diff --git a/src/app/form/pageType.enum.ts b/src/app/form/pageType.enum.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3b3f5071add1c54b7940b04c4b7577aa94059c35
--- /dev/null
+++ b/src/app/form/pageType.enum.ts
@@ -0,0 +1,26 @@
+export enum PageTypeEnum {
+ summary = 0,
+ info = 1,
+ accountInfo = 2,
+ accountCredentials = 3,
+ structureNameAndAddress = 4,
+ structurePhone = 5,
+ structureType = 6,
+ structureAccessModality = 7,
+ structureHours = 8,
+ structureHoursDetails = 9,
+ structurePmr = 10,
+ structureWebAndSocialNetwork = 11,
+ structurePublicTarget = 12,
+ structureAccompaniment = 13,
+ structureOtherAccompaniment = 14,
+ structureWorkshop = 15,
+ structureWorkshopPrice = 16,
+ structureWifi = 17,
+ structureEquipments = 18,
+ structureLabels = 19,
+ structureOtherServices = 20,
+ structureDescription = 21,
+ structureCovidInfo = 22,
+ cgu = 23,
+}
diff --git a/src/app/guards/admin.guard.ts b/src/app/guards/admin.guard.ts
index 10b920afe1505bfb87f0d25e3f0003f548bf411e..2f00de8acf3a7b0df675339ec50ed435224921d3 100644
--- a/src/app/guards/admin.guard.ts
+++ b/src/app/guards/admin.guard.ts
@@ -1,10 +1,7 @@
-import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
+import { ActivatedRouteSnapshot, CanActivate, Router, UrlTree } from '@angular/router';
import { Injectable } from '@angular/core';
import { AuthService } from '../services/auth.service';
import { ProfileService } from '../profile/services/profile.service';
-import decode from 'jwt-decode';
-import { User } from '../models/user.model';
-import { UserRole } from '../shared/enum/userRole.enum';
/**
* Guard to assert that we are logged in admin. Otherwise redirect to home
*/
diff --git a/src/app/guards/auth.guard.ts b/src/app/guards/auth.guard.ts
index 3d3205c2e848f41f2425f3a04bb931ce66c15a63..9c7fb4ab22cf6e45fb1c0853fbfb49b0623bffe5 100644
--- a/src/app/guards/auth.guard.ts
+++ b/src/app/guards/auth.guard.ts
@@ -1,8 +1,6 @@
-import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
+import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';
import { Injectable } from '@angular/core';
import { AuthService } from '../services/auth.service';
-import { Observable } from 'rxjs';
-
/**
* Guard to assert that we are logged in. Otherwise redirect to home
*/
@@ -10,10 +8,11 @@ import { Observable } from 'rxjs';
export class AuthGuard implements CanActivate {
constructor(private authService: AuthService, private router: Router) {}
- canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): UrlTree | boolean {
+ canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
if (this.authService.isLoggedIn()) {
return true;
}
- return this.router.parseUrl('/home');
+ this.router.navigate(['/home'], { queryParams: { returnUrl: state.url } });
+ return false;
}
}
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index 713873855305afb90ed02b815b3c5550dee6b6c1..9d31ad373f001e665fc94c0dd52a5943ca6c0b4e 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -10,6 +10,7 @@
</div>
<div fxLayout="row" class="right-header" fxLayoutAlign="center center" fxLayoutGap="3vw">
<a routerLink="/home" [routerLinkActive]="'active'" i18n>Les acteurs</a>
+ <a routerLink="/about" [routerLinkActive]="'active'" i18n>Qui sommes-nous ?</a>
<!-- <a routerLink="/news" [routerLinkActive]="'active'" i18n>Actualités</a> -->
<!-- <a routerLink="/resources" [routerLinkActive]="'active'" i18n>Ressources</a> -->
<a *ngIf="isAdmin" routerLink="/admin" [routerLinkActive]="'active'">Administration</a>
@@ -32,7 +33,8 @@
</div>
<div fxLayout="column" class="right-header" fxLayoutAlign="none baseline" fxLayoutGap="5vw">
<a routerLink="/home" [routerLinkActive]="'active'" (click)="closeMenu()" i18n>Les acteurs</a>
- <a *ngIf="isAdmin" routerLink="/admin" [routerLinkActive]="'active'">Administration</a>
+ <a routerLink="/about" [routerLinkActive]="'active'" i18n>Qui sommes-nous ?</a>
+ <a *ngIf="isAdmin" routerLink="/admin" [routerLinkActive]="'active'" (click)="closeMenu()">Administration</a>
</div>
</div>
<div>
@@ -45,7 +47,7 @@
</div>
<app-signup-modal *ngIf="displaySignUp" [openned]="isPopUpOpen" (closed)="closeSignUpModal($event)"></app-signup-modal>
-<app-signin-modal *ngIf="!displaySignUp" [openned]="isPopUpOpen" (closed)="closeSignInModal()"></app-signin-modal>
+<!-- <app-signin-modal *ngIf="!displaySignUp" [openned]="isPopUpOpen" (closed)="closeSignInModal()"></app-signin-modal> -->
<ng-template #customTitle>
<img class="desktop-show logo-grand-lyon" src="/assets/logos/resin.svg" alt />
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
index b745464c09799bbf607ef234d54435ca7ec89f80..7470c080a1e12b117c225ac5910cdbc98606a54f 100644
--- a/src/app/header/header.component.scss
+++ b/src/app/header/header.component.scss
@@ -52,6 +52,7 @@ a {
border-bottom: 2px solid $red-default;
text-decoration: none;
}
+ @include cn-regular-14;
}
@media print {
@@ -114,19 +115,11 @@ a {
}
.title {
margin-bottom: 35px;
- @include cn-regular-28;
+ @include cn-regular-26;
span {
color: $grey-2;
}
}
-.footer {
- a {
- height: unset;
- display: table-cell;
- vertical-align: middle;
- margin: auto 0 auto 0;
- }
-}
.desktop-show {
display: block;
@@ -137,6 +130,7 @@ a {
.mobile-show {
display: none;
+ @include cn-bold-16;
@media #{$tablet} {
display: block;
}
diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts
index 2c2af037e272ea29ebf75f6a677e20ca3471e912..ee446b18ff5ca333d21817772be67f5e96ecd839 100644
--- a/src/app/header/header.component.ts
+++ b/src/app/header/header.component.ts
@@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core';
-import { NavigationStart, Router } from '@angular/router';
+import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
import { ProfileService } from '../profile/services/profile.service';
import { AuthService } from '../services/auth.service';
@@ -13,23 +13,39 @@ export class HeaderComponent implements OnInit {
public isPopUpOpen = false;
public displaySignUp = true;
public currentRoute = '';
- public formeRoute = '/create-structure';
+ public formRoute = '/create-structure';
+ public returnUrl = null;
- constructor(private authService: AuthService, private profileService: ProfileService, private router: Router) {
+ constructor(
+ private authService: AuthService,
+ private profileService: ProfileService,
+ private router: Router,
+ private route: ActivatedRoute
+ ) {
this.router.events.subscribe((event) => {
- if (event instanceof NavigationStart) {
- // Show loading indicator.curr
+ if (event instanceof NavigationEnd) {
this.currentRoute = event.url;
}
});
}
- ngOnInit(): void {}
+ ngOnInit(): void {
+ this.route.queryParams.subscribe((params) => {
+ if (params.verified || params.returnUrl) {
+ Promise.resolve().then(() => {
+ if (!this.isLoggedIn) {
+ this.isPopUpOpen = true;
+ this.displaySignUp = true;
+ }
+ });
+ this.returnUrl = params.returnUrl;
+ }
+ });
+ }
public openMenu(): void {
this.showMenu = true;
}
- public closeMenu(route: string): void {
- this.router.navigateByUrl(route);
+ public closeMenu(): void {
this.showMenu = false;
}
@@ -48,6 +64,9 @@ export class HeaderComponent implements OnInit {
} else {
this.isPopUpOpen = false;
}
+ if (this.returnUrl && this.isLoggedIn) {
+ this.router.navigateByUrl(this.returnUrl);
+ }
}
public get isAdmin(): boolean {
@@ -59,6 +78,6 @@ export class HeaderComponent implements OnInit {
}
public displayLogo(): boolean {
- return this.formeRoute !== this.currentRoute;
+ return this.formRoute !== this.currentRoute;
}
}
diff --git a/src/app/home/home.component.spec.ts b/src/app/home/home.component.spec.ts
index 55739b5a3dd742e1edc04e5404ee7dc54e56a611..5606d294ab04d1634711140effed0cecb6dea0f1 100644
--- a/src/app/home/home.component.spec.ts
+++ b/src/app/home/home.component.spec.ts
@@ -1,5 +1,4 @@
import { HttpClientModule } from '@angular/common/http';
-import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { HomeComponent } from './home.component';
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index b2b2b512f33028994f6cfa6253219565fb643ab2..5a803cdb4651663e181654ccab74a43e56b3de79 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -7,7 +7,7 @@ import { StructureService } from '../services/structure.service';
import { Filter } from '../structure-list/models/filter.model';
import { GeoJson } from '../map/models/geojson.model';
import { GeojsonService } from '../services/geojson.service';
-import { ActivatedRoute } from '@angular/router';
+import { CustomRegExp } from '../utils/CustomRegExp';
@Component({
selector: 'app-home',
@@ -107,8 +107,7 @@ export class HomeComponent implements OnInit {
* @param value string
*/
private isLocationRequest(value: string): boolean {
- const regex = /^\d+\s[A-z]+\s[A-z]+/g; //NOSONAR
- if (value.match(regex)) {
+ if (value.match(CustomRegExp.LOCATION)) {
return true;
}
return false;
diff --git a/src/app/map/components/map.component.scss b/src/app/map/components/map.component.scss
index de50ff0b1c4d79a19e525aba1c04afd18c95f8df..cb53c0d90700caed57c3f469322e1b66bfcd58b3 100644
--- a/src/app/map/components/map.component.scss
+++ b/src/app/map/components/map.component.scss
@@ -8,7 +8,7 @@
.map-wrapper {
border-radius: 6px;
- @include background-hash;
+ @include background-hash($grey-2);
border: 1px solid $grey-4;
}
@@ -76,6 +76,14 @@
stroke-width: unset !important;
}
}
+ &:hover {
+ svg {
+ fill: $red-info;
+ &.mdm {
+ fill: #bd9e6a;
+ }
+ }
+ }
}
::ng-deep .leaflet-left {
@@ -90,19 +98,22 @@
::ng-deep .leaflet-popup {
border-radius: 6px;
- @include background-hash;
+ @include background-hash($grey-2);
border: 1px solid $grey-4;
padding: 0 0 4px 4px;
bottom: -15px !important;
h1 {
color: $grey-1;
@include cn-bold-20;
+ font-size: 18px;
margin: 0;
}
p {
color: $grey-3;
@include cn-regular-16;
+ font-size: 16px;
margin: 0 0 13px 0;
+ font-style: italic;
}
.pop-up {
text-align: center;
@@ -111,6 +122,7 @@
button {
@include btn-search-filter;
@include cn-bold-14;
+ font-size: 16px;
}
}
span {
@@ -127,7 +139,6 @@
::ng-deep .leaflet-popup-tip-container {
display: none;
}
-
@media print {
.map-wrapper {
display: none;
diff --git a/src/app/map/components/map.component.ts b/src/app/map/components/map.component.ts
index 01f19e751ca0b7fdc0ddbd4540eb5b9175566594..a038e5759181bc0f6703cf58fa585d5c1ae26117 100644
--- a/src/app/map/components/map.component.ts
+++ b/src/app/map/components/map.component.ts
@@ -1,21 +1,11 @@
-import {
- Component,
- EventEmitter,
- HostListener,
- Input,
- OnChanges,
- Output,
- SimpleChanges,
- ViewChild,
-} from '@angular/core';
-import { latLng, MapOptions, geoJSON, tileLayer, Map, latLngBounds, layerGroup, Control } from 'leaflet';
+import { Component, EventEmitter, HostListener, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { latLng, MapOptions, geoJSON, tileLayer, Map, latLngBounds, layerGroup } from 'leaflet';
import { Structure } from '../../models/structure.model';
import { GeojsonService } from '../../services/geojson.service';
import { MapService } from '../services/map.service';
import * as _ from 'lodash';
import { GeoJsonProperties } from '../models/geoJsonProperties.model';
import { MarkerType } from './markerType.enum';
-import { typeStructureEnum } from '../../shared/enum/typeStructure.enum';
import metropole from '../../../assets/geojson/metropole.json';
import brignais from '../../../assets/geojson/brignais.json';
import L from 'leaflet';
@@ -159,7 +149,7 @@ export class MapComponent implements OnChanges {
structure.structureName +
'</h1>' +
'<p>' +
- structure.structureType +
+ structure.getLabelTypeStructure() +
'</p><div>' +
'<span class="ico-dot-' +
cssAvailabilityClass +
@@ -245,7 +235,7 @@ export class MapComponent implements OnChanges {
type: brignais.features[0].geometry.type,
coordinates: brignais.features[0].geometry.coordinates,
} as any,
- { style: () => ({ color: '#d50000', fillOpacity: 0 }) }
+ { style: () => ({ color: '#a00000', fillOpacity: 0, weight: 1 }) }
)
);
}
@@ -257,7 +247,7 @@ export class MapComponent implements OnChanges {
type: metropole.features[0].geometry.type,
coordinates: metropole.features[0].geometry.coordinates,
} as any,
- { style: () => ({ color: '#d50000', fillOpacity: 0 }) }
+ { style: () => ({ color: '#a00000', fillOpacity: 0, weight: 1 }) }
)
);
}
diff --git a/src/app/map/services/map.service.ts b/src/app/map/services/map.service.ts
index 52d5ba0b7e3a8f70c0c8d4aaf4d3dcfd1b0b911f..901b4d615a3b201c076ad3223320b512d51ab6c3 100644
--- a/src/app/map/services/map.service.ts
+++ b/src/app/map/services/map.service.ts
@@ -9,16 +9,9 @@ import { MarkerType } from '../components/markerType.enum';
export class MapService {
private static markersList = {};
private isMarkerActive = false;
- public markerIconHover = divIcon({
- className: null,
- html: '<svg width="40" height="46"><use xlink:href="assets/ico/sprite.svg#map-marker-locate"></use></svg>',
- iconSize: [40, 46],
- iconAnchor: [20, 46],
- popupAnchor: [0, -46],
- });
public markerIconActive = divIcon({
className: null,
- html: '<svg width="40" height="46" fill="#d50000"><use xlink:href="assets/ico/sprite.svg#map-marker"></use></svg>',
+ html: '<svg width="40" height="46" fill="#A00000"><use xlink:href="assets/ico/sprite.svg#map-marker"></use></svg>',
iconSize: [40, 46],
iconAnchor: [20, 46],
popupAnchor: [0, -46],
@@ -33,13 +26,8 @@ export class MapService {
});
public markerIconMdm = divIcon({
className: null,
- html: '<svg width="19" height="24"><use xlink:href="assets/ico/sprite.svg#mdm"></use></svg>',
- iconSize: [19, 24],
- iconAnchor: [9, 0],
- });
- public markerIconMdmHover = divIcon({
- className: null,
- html: '<svg width="19" height="24"><use xlink:href="assets/ico/sprite.svg#mdm-hover"></use></svg>',
+ html:
+ '<svg width="19" height="24" fill="#D4C4A9" class="mdm"><use xlink:href="assets/ico/sprite.svg#mdm"></use></svg>',
iconSize: [19, 24],
iconAnchor: [9, 0],
});
@@ -63,7 +51,7 @@ export class MapService {
if (id) {
MapService.markersList[id] = marker;
}
- return this.bindMouseEventOnMarker(marker, this.getMarkerIcon(markerType), this.getMarkerIconHover(markerType));
+ return marker;
}
private getLayerAttributton(markerType: MarkerType): string {
@@ -82,32 +70,11 @@ export class MapService {
}
}
- private getMarkerIconHover(markerType: MarkerType): DivIcon {
- if (markerType === MarkerType.mdm) {
- return this.markerIconMdmHover;
- } else {
- return this.markerIconHover;
- }
- }
-
- private bindMouseEventOnMarker(marker: Marker, regularIcon: DivIcon, hoverIcon: DivIcon): Marker {
- marker.on('mouseover', (e) => {
- if (marker.getIcon() === regularIcon) {
- marker.setIcon(hoverIcon);
- }
- });
-
- marker.on('mouseout', (e) => {
- marker.setIcon(regularIcon);
- });
- return marker;
- }
-
/**
* @param id marker id
*/
public setActiveMarker(id: string): void {
- this.getMarker(id).setIcon(this.getMarkerIconHover(MarkerType.structure));
+ this.getMarker(id).setIcon(this.markerIconActive);
}
public setUnactiveMarker(id: string): void {
diff --git a/src/app/models/owner.model.ts b/src/app/models/owner.model.ts
new file mode 100644
index 0000000000000000000000000000000000000000..fb682b34669acc0028c06647b6d899c2e1852ece
--- /dev/null
+++ b/src/app/models/owner.model.ts
@@ -0,0 +1,4 @@
+export class Owner {
+ email: string;
+ id: string;
+}
diff --git a/src/app/models/structure.model.ts b/src/app/models/structure.model.ts
index e9468d7c5cbe647f6c8e62ba2d4db22c8eadf465..0e107ba8ac59f949678edc04d93d171e3ca50213 100644
--- a/src/app/models/structure.model.ts
+++ b/src/app/models/structure.model.ts
@@ -37,7 +37,6 @@ export class Structure {
public equipmentsAndServices: string[] = [];
public hours: Week;
public freeWorkShop: boolean = null;
- public freeWifi: boolean = null;
public otherDescription: string = null;
public isOpen: boolean = false;
@@ -172,4 +171,12 @@ export class Structure {
return null;
}
}
+
+ public getLabelTypeStructure(): string {
+ return typeStructureEnum[this.structureType] ? typeStructureEnum[this.structureType] : '';
+ }
+
+ public hasSocialNetwork(): boolean {
+ return this.facebook !== null || this.instagram !== null || this.twitter !== null || this.linkedin !== null;
+ }
}
diff --git a/src/app/models/structureWithOwners.model.ts b/src/app/models/structureWithOwners.model.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e3d2a6340abb8cf3ac225e16e43a0657c6f41d38
--- /dev/null
+++ b/src/app/models/structureWithOwners.model.ts
@@ -0,0 +1,7 @@
+import { Owner } from './owner.model';
+import { Structure } from './structure.model';
+
+export class StructureWithOwners {
+ structure: Structure;
+ owners: Owner[];
+}
diff --git a/src/app/models/temp-user.model.ts b/src/app/models/temp-user.model.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8540ce74e9034cc65018c679c39d06ff693449fc
--- /dev/null
+++ b/src/app/models/temp-user.model.ts
@@ -0,0 +1,5 @@
+export class TempUser {
+ _id: string;
+ email: string;
+ pendingStructuresLink: string[];
+}
diff --git a/src/app/profile/enum/TypeModalProfile.enum.ts b/src/app/profile/enum/TypeModalProfile.enum.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4608f9bf5127e86074b1e7c50348f7cbbd7491cd
--- /dev/null
+++ b/src/app/profile/enum/TypeModalProfile.enum.ts
@@ -0,0 +1,6 @@
+export enum TypeModalProfile {
+ password = 'password',
+ email = 'email',
+ deleteAccount = 'deleteAccount',
+ addAccount = 'addAccount',
+}
diff --git a/src/app/profile/profile.component.html b/src/app/profile/profile.component.html
index a26b3822a5cdc7abd31c1c931049c3409d922998..da389cd0f772d5f24178acc9d757e6eb1c6b074e 100644
--- a/src/app/profile/profile.component.html
+++ b/src/app/profile/profile.component.html
@@ -1,100 +1,55 @@
-<div fxLayout="column" class="content-container full-screen">
- <div class="section-container" fxLayout="column" fxLayoutAlign="center center">
- <h1>Profil</h1>
- <div *ngIf="userProfile" fxLayout="column" fxLayoutAlign="center" fxLayoutGap="10px">
- <p>Id: {{ userProfile._id }}</p>
- <p>Email: {{ userProfile.email }}</p>
- <button (click)="logout()">Se déconnecter</button>
- <p fxLayout="column" *ngIf="userProfile.structuresLink.length > 0">
- Mes structures :
- <span *ngFor="let structureId of userProfile.structuresLink">
- <strong>{{ structureId }}</strong>
- </span>
- </p>
- <p fxLayout="column" *ngIf="userProfile.pendingStructuresLink.length > 0">
- Mes structures en attente de validation:
- <span *ngFor="let structureId of userProfile.pendingStructuresLink">
- <strong>{{ structureId }}</strong>
- </span>
- </p>
- <button (click)="toogleAddStructure()">Ajouter une structure</button>
- <button (click)="toogleChangeEmail()">Changer d'email</button>
- <form
- *ngIf="changeEmail"
- fxLayout="column"
- fxLayoutGap="10px"
- [formGroup]="formEmail"
- (ngSubmit)="onSubmitEmail()"
- >
- <div class="form-group">
- <label for="email">Email</label>
- <input type="email" autocomplete="on" formControlName="email" class="form-control" />
- <div *ngIf="submitted" class="invalid-feedback">
- <app-validator-form [control]="formEmail.controls.email"></app-validator-form>
- </div>
- </div>
- <div class="form-group">
- <button type="submit" [disabled]="loading" class="btn btn-primary">Appliquer</button>
+<div fxLayout="column" class="content-container full-screen" *ngIf="userProfile">
+ <div class="profileSection">
+ <div class="section-container" fxLayout="row">
+ <svg class="cameraProfile" aria-hidden="true">
+ <use [attr.xlink:href]="'assets/ico/sprite.svg#camera'"></use>
+ </svg>
+ <div class="profileInformation" fxLayoutGap="18px" fxLayout="column">
+ <div fxLayout="row" fxLayoutAlign="space-between center">
+ <p class="profileName">{{ userProfile.name | titlecase }} {{ userProfile.surname | titlecase }}</p>
+ <button class="btn-primary" (click)="logout()">Déconnexion</button>
</div>
- </form>
- <button (click)="toogleChangePassword()">Changer de mot de passe</button>
-
- <form *ngIf="changePassword" fxLayout="column" fxLayoutGap="10px" [formGroup]="form" (ngSubmit)="onSubmit()">
- <div class="form-group">
- <label for="oldPassword">Ancien mot de passe</label>
- <input
- type="password"
- autocomplete="on"
- formControlName="oldPassword"
- class="form-control"
- [ngClass]="{ 'is-invalid': submitted && f.oldPassword.errors }"
- />
- <div *ngIf="submitted && f.oldPassword.errors" class="invalid-feedback">
- <div *ngIf="f.oldPassword.errors.required">L'Ancien mot de passe est obligatoire</div>
+ <div class="profileEmail" fxLayout="column">
+ <span>Identifiant</span>
+ <div fxLayout="row" fxLayoutAlign="space-between center">
+ <p>{{ userProfile.email }}</p>
+ <app-structure-options-modal
+ [userProfile]="userProfile"
+ (closed)="ngOnInit()"
+ ></app-structure-options-modal>
</div>
</div>
- <div class="form-group">
- <label for="password">Mot de passe</label>
- <input
- type="password"
- autocomplete="on"
- formControlName="password"
- class="form-control"
- [ngClass]="{ 'is-invalid': submitted && f.password.errors }"
- />
- <div *ngIf="submitted && f.password.errors" class="invalid-feedback">
- <div *ngIf="f.password.errors.required">Le mot de passe est obligatoire</div>
- <div *ngIf="f.password.errors.pattern">
- Le mot de passe doit avoir au minimun 8 caractères, une majuscule, une minuscule, un chiffre et un
- caractère spécial.
+ </div>
+ </div>
+ </div>
+ <div class="structureSection">
+ <div class="section-container" fxLayoutGap="18px" fxLayout="column">
+ <ng-container *ngIf="userProfile.structuresLink.length > 0 && structures">
+ <div class="structureCard" *ngFor="let s of structures; let i = index">
+ <div class="structureInfo" fxLayout="column" fxLayoutGap="14px">
+ <div fxLayout="row" fxLayoutAlign="space-between start" fxLayoutGap="20px">
+ <a class="structureName" routerLink="/home" [state]="{ data: s.structure }">{{
+ s.structure.structureName
+ }}</a>
+ <app-structure-options-modal [structure]="s" (closed)="ngOnInit()"></app-structure-options-modal>
+ </div>
+ <div fxLayout="column" fxLayoutGap="14px" class="ownersBlock">
+ <p class="ownerName" *ngFor="let owner of s.owners">{{ owner.email }}</p>
</div>
</div>
</div>
- <div class="form-group">
- <label for="confirmPassword">Confirmation du mot de passe</label>
- <input
- type="password"
- autocomplete="on"
- formControlName="confirmPassword"
- class="form-control"
- [ngClass]="{ 'is-invalid': submitted && f.confirmPassword.errors }"
- />
- <div *ngIf="submitted && f.confirmPassword.errors" class="invalid-feedback">
- <div *ngIf="f.confirmPassword.errors.required">La confirmation du mot de passe est obligatoire</div>
- <div *ngIf="f.confirmPassword.errors.mustMatch">Les mot de passe ne sont pas les mêmes</div>
- </div>
- </div>
+ </ng-container>
- <div class="form-group">
- <button type="submit" [disabled]="loading" class="btn btn-primary">Appliquer</button>
- </div>
- </form>
+ <div class="addSection" fxLayout="row" fxLayoutAlign="center center">
+ <app-button
+ class="hide-on-print"
+ [type]="'button'"
+ [style]="'buttonWithHash'"
+ [text]="'Ajouter une structure'"
+ [iconBtn]="'add'"
+ (action)="addStructure()"
+ ></app-button>
+ </div>
</div>
</div>
- <app-structureForm
- *ngIf="addStructure"
- [profile]="userProfile"
- (closeEvent)="toogleAddStructure($event)"
- (clickOutside)="toogleAddStructure()"
- ></app-structureForm>
</div>
diff --git a/src/app/profile/profile.component.scss b/src/app/profile/profile.component.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..341f12ec1c96f89c8d1ea108d0b02a088990bed6 100644
--- a/src/app/profile/profile.component.scss
+++ b/src/app/profile/profile.component.scss
@@ -0,0 +1,63 @@
+@import '../../assets/scss/color';
+@import '../../assets/scss/typography';
+@import '../../assets/scss/hyperlink';
+@import '../../assets/scss/shapes';
+@import '../../assets/scss/breakpoint';
+
+.content-container {
+ padding-top: 0;
+}
+.section-container {
+ width: 50%;
+ padding: 20px 0;
+ .profileInformation {
+ width: 100%;
+ }
+ .cameraProfile {
+ width: 128px;
+ margin-right: 16px;
+ height: 113px;
+ }
+ @media #{$tablet} {
+ .cameraProfile {
+ display: none;
+ }
+ width: 70%;
+ }
+ @media #{$large-phone} {
+ width: 90%;
+ }
+}
+.profileSection {
+ background: $white;
+ border-bottom: 1px solid $grey-4;
+ .profileName {
+ @include cn-bold-26;
+ margin: 0 !important;
+ }
+ .profileEmail {
+ span {
+ @include cn-regular-16;
+ color: $grey-2;
+ }
+ p {
+ margin: 0;
+ @include cn-regular-18;
+ }
+ }
+}
+.structureSection {
+ margin-bottom: 108px;
+ .ownersBlock {
+ width: 100%;
+ max-height: 300px;
+ overflow: auto;
+ }
+}
+
+.addSection {
+ button {
+ background: $red-default;
+ color: $white;
+ }
+}
diff --git a/src/app/profile/profile.component.ts b/src/app/profile/profile.component.ts
index 5f3b49a7389039c7ede12fd8154d5d721944a2a7..0b3b1d36c276ff97445d274268e12faa1ce09d7a 100644
--- a/src/app/profile/profile.component.ts
+++ b/src/app/profile/profile.component.ts
@@ -1,8 +1,9 @@
import { Component, OnInit } from '@angular/core';
-import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { StructureWithOwners } from '../models/structureWithOwners.model';
import { User } from '../models/user.model';
import { AuthService } from '../services/auth.service';
-import { MustMatch } from '../shared/validator/form';
+import { StructureService } from '../services/structure.service';
import { ProfileService } from './services/profile.service';
@Component({
@@ -11,96 +12,30 @@ import { ProfileService } from './services/profile.service';
styleUrls: ['./profile.component.scss'],
})
export class ProfileComponent implements OnInit {
- public form: FormGroup;
public userProfile: User;
- public submitted = false;
- public changePassword = false;
- public loading = false;
- public changeEmail = false;
- public formEmail: FormGroup;
- public addStructure = false;
+ public structures: StructureWithOwners[] = [];
constructor(
- private authService: AuthService,
- private formBuilder: FormBuilder,
- private profileService: ProfileService
+ private profileService: ProfileService,
+ private structureService: StructureService,
+ private router: Router,
+ private authService: AuthService
) {}
ngOnInit(): void {
this.profileService.getProfile().then((profile) => {
this.userProfile = profile;
+ this.structures = [];
+ profile.structuresLink.forEach((structureId) => {
+ this.structureService.getStructureWithOwners(structureId, profile).subscribe((s) => {
+ this.structures.push(s);
+ });
+ });
});
- this.initForm();
}
- public initForm(): void {
- this.form = this.formBuilder.group(
- {
- oldPassword: [
- '',
- [Validators.required, Validators.pattern(/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/)], //NOSONAR
- ],
- password: [
- '',
- [Validators.required, Validators.pattern(/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/)], //NOSONAR
- ],
- confirmPassword: [''],
- },
- { validator: MustMatch('password', 'confirmPassword') }
- );
- this.formEmail = this.formBuilder.group({
- email: ['', [Validators.required, Validators.pattern('[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,3}$')]],
- });
- }
-
- // getter for form fields
- get f(): { [key: string]: AbstractControl } {
- return this.form.controls;
- }
-
- public toogleChangePassword(): void {
- this.changePassword = !this.changePassword;
- }
- public toogleAddStructure(): void {
- this.addStructure = !this.addStructure;
- }
-
- public toogleChangeEmail(): void {
- this.changeEmail = !this.changeEmail;
- }
-
- public onSubmitEmail(): void {
- this.submitted = true;
- if (this.formEmail.invalid) {
- return;
- }
- this.loading = true;
- this.profileService.changeEmail(this.formEmail.value.email, this.userProfile.email).subscribe(
- () => {
- this.toogleChangeEmail();
- this.loading = false;
- },
- (err) => {
- this.loading = false;
- }
- );
- }
- public onSubmit(): void {
- this.submitted = true;
- // stop here if form is invalid
- if (this.form.invalid) {
- return;
- }
- this.loading = true;
-
- this.profileService.changePassword(this.form.value.password, this.form.value.oldPassword).subscribe(
- () => {
- this.toogleChangePassword();
- },
- (error) => {
- this.loading = false;
- }
- );
+ public addStructure(): void {
+ this.router.navigateByUrl('/create-structure');
}
public logout(): void {
diff --git a/src/app/profile/services/profile.service.ts b/src/app/profile/services/profile.service.ts
index a196203fda3801b7d685b23b35d24e1a6869d95f..370137312c0da1f504f624ec8be949cfc7683559 100644
--- a/src/app/profile/services/profile.service.ts
+++ b/src/app/profile/services/profile.service.ts
@@ -15,7 +15,7 @@ export class ProfileService {
constructor(private http: HttpClient, private authService: AuthService) {}
public async getProfile(): Promise<User> {
- if (this.authService.isLoggedIn() && !this.currentProfile) {
+ if (this.authService.isLoggedIn()) {
const profile = await this.http.get<User>(`${this.baseUrl}/profile`).toPromise();
this.currentProfile = profile;
}
@@ -25,6 +25,9 @@ export class ProfileService {
public setProfile(profile: User): void {
this.currentProfile = profile;
}
+ public deleteProfile(): Observable<User> {
+ return this.http.delete<User>(`${this.baseUrl}`);
+ }
public isLinkedToStructure(idStructure: string): boolean {
if (!this.currentProfile) {
@@ -33,6 +36,14 @@ export class ProfileService {
return this.currentProfile.structuresLink.includes(idStructure);
}
+ public isPendingLinkedToStructure(idStructure: string): boolean {
+ if (!this.currentProfile) {
+ return false;
+ }
+ console.log(this.currentProfile.pendingStructuresLink);
+ return this.currentProfile.pendingStructuresLink.includes(idStructure);
+ }
+
public removeProfile(): void {
this.currentProfile = null;
}
@@ -67,4 +78,8 @@ export class ProfileService {
public changeEmail(newEmail: string, oldEmail: string): Observable<User> {
return this.http.post<any>(`${this.baseUrl}/change-email`, { newEmail, oldEmail });
}
+
+ public isEmailAlreadyUsed(newMail: string): Observable<boolean> {
+ return this.http.post<boolean>(`${this.baseUrl}/verify-exist-user`, { newMail });
+ }
}
diff --git a/src/app/reset-email/reset-email.component.scss b/src/app/reset-email/reset-email.component.scss
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/src/app/reset-email/reset-email.component.ts b/src/app/reset-email/reset-email.component.ts
index 0c92a21cad4b9d3490cc6540cc89c2c815a84b65..705a40ecca9024dc27d8e556177891b385c81116 100644
--- a/src/app/reset-email/reset-email.component.ts
+++ b/src/app/reset-email/reset-email.component.ts
@@ -1,11 +1,10 @@
import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
import { ProfileService } from '../profile/services/profile.service';
import { AuthService } from '../services/auth.service';
@Component({
selector: 'app-reset-email',
templateUrl: './reset-email.component.html',
- styleUrls: ['./reset-email.component.scss'],
})
export class ResetEmailComponent implements OnInit {
public token: string;
diff --git a/src/app/reset-password/reset-password.component.ts b/src/app/reset-password/reset-password.component.ts
index 3f3187b999e45742c1d5574b85248dfba93094a4..153f2dc8c1fb5b591c179a6860eb6b67b5358652 100644
--- a/src/app/reset-password/reset-password.component.ts
+++ b/src/app/reset-password/reset-password.component.ts
@@ -3,6 +3,7 @@ import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/fo
import { ActivatedRoute, Router } from '@angular/router';
import { AuthService } from '../services/auth.service';
import { MustMatch } from '../shared/validator/form';
+import { CustomRegExp } from '../utils/CustomRegExp';
@Component({
selector: 'app-reset-password',
@@ -36,10 +37,7 @@ export class ResetPasswordComponent implements OnInit {
private initPasswordForm(): void {
this.resetFormChangePassword = this.formBuilder.group(
{
- password: [
- '',
- [Validators.required, Validators.pattern(/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/)], //NOSONAR
- ],
+ password: ['', [Validators.required, Validators.pattern(CustomRegExp.PASSWORD)]],
confirmPassword: [''],
},
{ validator: MustMatch('password', 'confirmPassword') }
diff --git a/src/app/resolvers/temp-user.resolver.ts b/src/app/resolvers/temp-user.resolver.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2ae604aa6396df43cb2e23ce9837efde3439ba1b
--- /dev/null
+++ b/src/app/resolvers/temp-user.resolver.ts
@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, Resolve, Router } from '@angular/router';
+import { Observable } from 'rxjs';
+import { map, catchError } from 'rxjs/operators';
+import { TempUser } from '../models/temp-user.model';
+import { TempUserService } from '../services/temp-user.service';
+
+@Injectable()
+export class TempUserResolver implements Resolve<TempUser> {
+ constructor(private tempUserService: TempUserService, private router: Router) {}
+
+ resolve(route: ActivatedRouteSnapshot): Observable<TempUser> {
+ const userId = route.queryParams.id;
+ return this.tempUserService.getUser(userId).pipe(
+ map((res) => res),
+ catchError(() => {
+ this.router.navigate(['/home']);
+ return new Observable<TempUser>();
+ })
+ );
+ }
+}
diff --git a/src/app/services/routerListener.service.ts b/src/app/services/routerListener.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ff42af6857078fbf75e37c0c3e612188f8937583
--- /dev/null
+++ b/src/app/services/routerListener.service.ts
@@ -0,0 +1,28 @@
+import { Injectable } from '@angular/core';
+import { Router, RoutesRecognized } from '@angular/router';
+import { filter, pairwise } from 'rxjs/operators';
+
+@Injectable({
+ providedIn: 'root',
+})
+export class RouterListenerService {
+ private previousUrl: string;
+ constructor(private router: Router) {
+ this.router.events
+ .pipe(
+ filter((evt: any) => evt instanceof RoutesRecognized),
+ pairwise()
+ )
+ .subscribe((events: RoutesRecognized[]) => {
+ this.previousUrl = events[0].urlAfterRedirects;
+ });
+ }
+
+ public goToPreviousUrl(data?: any): void {
+ if (data) {
+ this.router.navigateByUrl(this.previousUrl, { state: { data: data } });
+ } else {
+ this.router.navigateByUrl(this.previousUrl);
+ }
+ }
+}
diff --git a/src/app/services/structure.service.ts b/src/app/services/structure.service.ts
index 41a02af5a7952850db348fc08ad30deeea555c62..fe7e093961d7a19e4887e3cc944cece615040cfd 100644
--- a/src/app/services/structure.service.ts
+++ b/src/app/services/structure.service.ts
@@ -12,6 +12,8 @@ import { Weekday } from '../structure-list/enum/weekday.enum';
import { Time } from '../models/time.model';
import { Filter } from '../structure-list/models/filter.model';
import { User } from '../models/user.model';
+import { StructureWithOwners } from '../models/structureWithOwners.model';
+import { TempUser } from '../models/temp-user.model';
@Injectable({
providedIn: 'root',
@@ -31,8 +33,9 @@ export class StructureService {
return this.http.post(`${this.baseUrl}`, { structure, idUser }).pipe(map((item: Structure) => new Structure(item)));
}
- public editStructure(id: string, structure: Structure): Observable<Structure> {
+ public editStructure(structure: Structure): Observable<Structure> {
structure.updatedAt = new Date().toString();
+ const id = structure._id;
delete structure._id; // id should not be provided for update
return this.http.put(`${this.baseUrl}/${id}`, structure).pipe(map((item: Structure) => new Structure(item)));
}
@@ -41,18 +44,33 @@ export class StructureService {
return this.http.post<boolean>(`${this.baseUrl}/${id}/isClaimed`, profile);
}
- public claimStructureWithAccount(id: string, user: User): Observable<string[]> {
- return this.http.post<any>(`${this.baseUrl}/${id}/claim`, user);
+ public claimStructureWithAccount(id: string, email: string): Observable<string[]> {
+ return this.http.post<any>(`${this.baseUrl}/${id}/claim`, { email });
}
public getStructure(id: string): Observable<Structure> {
return this.http.get<Structure>(`${this.baseUrl}/${id}`);
}
+ public validateStructureJoin(id: string, userId: string, state: boolean): Observable<Structure> {
+ return this.http.post<any>(`${this.baseUrl}/${id}/join/${userId}/${state}`, null);
+ }
+
+ public joinStructure(id: string, email: string): Observable<Structure> {
+ return this.http.post<any>(`${this.baseUrl}/${id}/join`, { email });
+ }
+
public delete(id: string): Observable<Structure> {
return this.http.delete<Structure>(`${this.baseUrl}/${id}`);
}
+ public removeOwnerFromStructure(idOwner: string, idStructure: string): Observable<any> {
+ return this.http.delete<any>(`${this.baseUrl}/${idStructure}/owner/${idOwner}`);
+ }
+ public addOwnerToStructure(user: TempUser, idStructure: string): Observable<any> {
+ return this.http.post<any>(`${this.baseUrl}/${idStructure}/addOwner`, user);
+ }
+
public getStructures(filters: Filter[]): Observable<Structure[]> {
if (filters && filters.length > 0) {
let requestUrl = `${this.baseUrl}/search`;
@@ -172,4 +190,7 @@ export class StructureService {
return tabNum[0] + 'h' + tabNum[1];
}
}
+ public getStructureWithOwners(structureId: string, profile: User): Observable<StructureWithOwners> {
+ return this.http.post<any>(`${this.baseUrl}/${structureId}/withOwners`, { emailUser: profile.email });
+ }
}
diff --git a/src/app/services/tcl.service.ts b/src/app/services/tcl.service.ts
index bb14963c6833020fa37f096f5351f409426020ad..03cefff1fee711c73b949693848c719eba986a7d 100644
--- a/src/app/services/tcl.service.ts
+++ b/src/app/services/tcl.service.ts
@@ -1,7 +1,6 @@
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
import { TclStopPoint } from '../models/tclStopPoint.model';
@Injectable({
diff --git a/src/app/services/temp-user.service.ts b/src/app/services/temp-user.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4dd2b45247d4f75f59a3fe3b07f22d611ac71251
--- /dev/null
+++ b/src/app/services/temp-user.service.ts
@@ -0,0 +1,16 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { TempUser } from '../models/temp-user.model';
+
+@Injectable({
+ providedIn: 'root',
+})
+export class TempUserService {
+ private readonly baseUrl = 'api/temp-user';
+ constructor(private http: HttpClient) {}
+
+ public getUser(id: string): Observable<TempUser> {
+ return this.http.get<TempUser>(`${this.baseUrl}/${id}`);
+ }
+}
diff --git a/src/app/shared/components/button/button.component.html b/src/app/shared/components/button/button.component.html
index 099145ec9e14669f605b90b347f249beb29d24a1..d9ee298fbb39f6719832c21d774ec8fe0435dfa0 100644
--- a/src/app/shared/components/button/button.component.html
+++ b/src/app/shared/components/button/button.component.html
@@ -6,16 +6,10 @@
fxLayout="row center"
class="searchButton withIcon"
fxLayoutAlign="space-between center"
- fxLayoutGap="13px"
+ fxLayoutGap="5px"
>
- <app-svg-icon
- style="height: 100%"
- [type]="'ico'"
- [iconClass]="'icon-32'"
- [icon]="iconBtn"
- [iconColor]="'currentColor'"
- ></app-svg-icon>
- {{ text }}
+ <app-svg-icon [type]="'ico'" [icon]="iconBtn" [iconColor]="'currentColor'"></app-svg-icon>
+ <span>{{ text }}</span>
</div>
</button>
</ng-container>
diff --git a/src/app/shared/components/button/button.component.scss b/src/app/shared/components/button/button.component.scss
index 6aecd56b10568465baba8e6b0eb62b1ccca405b2..04a71d5474b03e28d28e5f30fb4f697387116d54 100644
--- a/src/app/shared/components/button/button.component.scss
+++ b/src/app/shared/components/button/button.component.scss
@@ -22,7 +22,7 @@ button {
border: 1px solid;
}
.btnSearch {
- @include background-hash;
+ @include background-hash($grey-2);
border-color: $grey-4;
padding: 0 0 4px 5px;
&:hover {
@@ -45,7 +45,10 @@ button {
padding: 3px 16px 3px 16px;
display: table-cell;
vertical-align: middle;
+ border-radius: 4px;
@include btn-bold;
+ font-size: 16px;
+ border-radius: 4px;
&.withIcon {
color: $black;
height: 36px;
diff --git a/src/app/shared/components/create-account-form/create-account-form.component.html b/src/app/shared/components/create-account-form/create-account-form.component.html
index 06831aa70c7e05b461d2c0a42e017d035ca29040..6b547d7fdbb4ded4c7e829cf8e53341366c0c387 100644
--- a/src/app/shared/components/create-account-form/create-account-form.component.html
+++ b/src/app/shared/components/create-account-form/create-account-form.component.html
@@ -1,44 +1,90 @@
<form [formGroup]="accountForm" *ngIf="accountForm" (ngSubmit)="onSubmit(accountForm)">
- <div class="form-group">
- <label for="email">Email</label>
- <input type="email" autocomplete="on" formControlName="email" class="form-control" />
- <app-validator-form *ngIf="submitted" [control]="getAccountControl('email')"></app-validator-form>
+ <div class="form-group" fxLayout="column">
+ <label for="email">Courriel personnel</label>
+ <div fxLayout="row" fxLayoutGap="13px">
+ <input type="text" autocomplete="on" formControlName="email" class="form-input" />
+ <img *ngIf="f.email.invalid && f.email.value" src="../../assets/form/notvalidate.svg" alt="logo invalid" />
+ </div>
</div>
- <div class="form-group">
+ <div class="form-group" fxLayout="column">
<label for="surname">Nom</label>
- <input type="text" formControlName="surname" class="form-control" />
- <app-validator-form *ngIf="submitted" [control]="getAccountControl('surname')"></app-validator-form>
+ <div fxLayout="row" fxLayoutGap="13px">
+ <input type="text" autocomplete="on" formControlName="surname" class="form-input" />
+ <img *ngIf="f.surname.invalid && f.surname.value" src="../../assets/form/notvalidate.svg" alt="logo invalid" />
+ </div>
</div>
- <div class="form-group">
+ <div class="form-group" fxLayout="column">
<label for="name">Prénom</label>
- <input type="text" formControlName="name" class="form-control" />
- <app-validator-form *ngIf="submitted" [control]="getAccountControl('name')"></app-validator-form>
+ <div fxLayout="row" fxLayoutGap="13px">
+ <input type="text" autocomplete="on" formControlName="name" class="form-input" />
+ <img *ngIf="f.name.invalid && f.name.value" src="../../assets/form/notvalidate.svg" alt="logo invalid" />
+ </div>
</div>
- <div class="form-group">
+ <div class="form-group" fxLayout="column">
<label for="phone">Téléphone</label>
- <input type="text" formControlName="phone" class="form-control" (input)="modifyPhoneInput($event.target.value)" />
- <app-validator-form *ngIf="submitted" [control]="getAccountControl('phone')"></app-validator-form>
+ <div fxLayout="row" fxLayoutGap="13px">
+ <input
+ type="text"
+ autocomplete="on"
+ (input)="modifyPhoneInput($event.target.value)"
+ formControlName="phone"
+ class="form-input"
+ />
+ <img *ngIf="f.phone.invalid && f.phone.value" src="../../assets/form/notvalidate.svg" alt="logo invalid" />
+ </div>
</div>
- <div class="form-group">
+ <div class="form-group password" fxLayout="column">
<label for="password">Mot de passe</label>
- <input type="password" autocomplete="on" formControlName="password" class="form-control" />
- <app-validator-form
- *ngIf="submitted"
- [nameControl]="'password'"
- [control]="getAccountControl('password')"
- ></app-validator-form>
+ <p [ngClass]="{ invalid: f.password.invalid && f.password.value }">
+ 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 fxLayout="row" fxLayoutGap="13px">
+ <input
+ [type]="isShowPassword ? 'text' : 'password'"
+ autocomplete="on"
+ formControlName="password"
+ class="form-input"
+ />
+ <img
+ (click)="toggleShowPassword()"
+ class="eyePassword"
+ src="../../assets/form/eyePassword.svg"
+ alt="logo eyePassword"
+ />
+ <img *ngIf="f.password.invalid && f.password.value" src="../../assets/form/notvalidate.svg" alt="logo invalid" />
+ </div>
</div>
- <div class="form-group">
+ <div class="form-group password" fxLayout="column">
<label for="confirmPassword">Confirmation du mot de passe</label>
- <input type="password" autocomplete="on" formControlName="confirmPassword" class="form-control" />
- <app-validator-form
- *ngIf="submitted"
- [nameControl]="'password'"
- [control]="getAccountControl('confirmPassword')"
- ></app-validator-form>
+ <div fxLayout="row" fxLayoutGap="13px">
+ <input
+ [type]="isShowConfirmPassword ? 'text' : 'password'"
+ autocomplete="on"
+ formControlName="confirmPassword"
+ class="form-input"
+ />
+ <img
+ (click)="toggleShowConfirmPassword()"
+ class="eyePassword"
+ src="../../assets/form/eyePassword.svg"
+ alt="logo eyePassword"
+ />
+ <img
+ *ngIf="f.confirmPassword.invalid && f.confirmPassword.value"
+ src="../../assets/form/notvalidate.svg"
+ alt="logo invalid"
+ />
+ </div>
</div>
-
- <div class="form-group">
- <button class="btn btn-primary" type="submit">Valider</button>
+ <div class="footerModal" fxLayout="row" fxLayoutAlign="space-around center">
+ <button
+ type="submit"
+ class="btn"
+ [disabled]="accountForm.invalid || loading"
+ [ngClass]="{ invalid: accountForm.invalid || loading }"
+ >
+ Valider
+ </button>
</div>
</form>
diff --git a/src/app/shared/components/create-account-form/create-account-form.component.scss b/src/app/shared/components/create-account-form/create-account-form.component.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0beea76df130b6b1bd58a9a22950f302b63ac1df 100644
--- a/src/app/shared/components/create-account-form/create-account-form.component.scss
+++ b/src/app/shared/components/create-account-form/create-account-form.component.scss
@@ -0,0 +1,35 @@
+@import '../../../../assets/scss/typography';
+@import '../../../../assets/scss/color';
+.form-group {
+ margin-bottom: 26px;
+ label {
+ margin-bottom: 4px;
+ @include cn-regular-14;
+ color: $grey-2;
+ }
+ input {
+ width: 100%;
+ margin-right: 39px;
+ }
+ &.password {
+ p {
+ @include cn-regular-14;
+ color: $grey-3;
+ margin-top: 0;
+ margin-bottom: 4px;
+ padding-right: 39px;
+ &.invalid {
+ color: $orange-warning;
+ }
+ }
+ .eyePassword {
+ cursor: pointer;
+ margin-right: 39px;
+ }
+ }
+}
+button {
+ &.invalid {
+ opacity: 0.4;
+ }
+}
diff --git a/src/app/shared/components/create-account-form/create-account-form.component.spec.ts b/src/app/shared/components/create-account-form/create-account-form.component.spec.ts
index 79e2eb5bec60413f5161ddbd87d43cd1f3e4cc37..1a3aa14de85e4c50d0c3fa29b5f55bbe593e4df6 100644
--- a/src/app/shared/components/create-account-form/create-account-form.component.spec.ts
+++ b/src/app/shared/components/create-account-form/create-account-form.component.spec.ts
@@ -1,5 +1,6 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { CustomRegExp } from '../../../utils/CustomRegExp';
import { MustMatch } from '../../validator/form';
import { CreateAccountFormComponent } from './create-account-form.component';
@@ -12,7 +13,7 @@ describe('CreateAccountFormComponent', () => {
email: new FormControl('test@test.fr', Validators.required),
password: new FormControl('Testaze123!', [
Validators.required,
- Validators.pattern(/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/), //NOSONAR
+ Validators.pattern(CustomRegExp.PASSWORD), //NOSONAR
]),
confirmPassword: new FormControl('Testaze123!'),
},
diff --git a/src/app/shared/components/create-account-form/create-account-form.component.ts b/src/app/shared/components/create-account-form/create-account-form.component.ts
index 4363e6774c5705d84b8a9091a448cb04b24a15dd..5d3d73098cdf13521befe8fa2945d1eb748519bf 100644
--- a/src/app/shared/components/create-account-form/create-account-form.component.ts
+++ b/src/app/shared/components/create-account-form/create-account-form.component.ts
@@ -1,5 +1,6 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms';
+import { CustomRegExp } from '../../../utils/CustomRegExp';
import { MustMatch } from '../../validator/form';
@Component({
@@ -11,25 +12,29 @@ export class CreateAccountFormComponent implements OnInit {
constructor() {}
public accountForm: FormGroup;
public submitted: boolean = false;
+ public isShowConfirmPassword = false;
+ public isShowPassword = false;
@Output() public submitForm = new EventEmitter<FormGroup>();
ngOnInit(): void {
this.accountForm = new FormGroup(
{
- email: new FormControl('', Validators.required),
- name: new FormControl('', Validators.required),
- surname: new FormControl('', Validators.required),
- phone: new FormControl('', [Validators.required, Validators.pattern('([0-9]{2} ){4}[0-9]{2}')]), //NOSONAR
- password: new FormControl('', [
- Validators.required,
- Validators.pattern(/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/), //NOSONAR
- ]),
+ email: new FormControl('', [Validators.required, Validators.pattern(CustomRegExp.EMAIL)]),
+ name: new FormControl('', [Validators.required, Validators.pattern(CustomRegExp.TEXT_WITHOUT_NUMBER)]),
+ surname: new FormControl('', [Validators.required, Validators.pattern(CustomRegExp.TEXT_WITHOUT_NUMBER)]),
+ phone: new FormControl('', [Validators.required, Validators.pattern(CustomRegExp.PHONE)]),
+ password: new FormControl('', [Validators.required, Validators.pattern(CustomRegExp.PASSWORD)]),
confirmPassword: new FormControl(''),
},
[MustMatch('password', 'confirmPassword')]
);
}
+ // getter for form fields
+ get f(): { [key: string]: AbstractControl } {
+ return this.accountForm.controls;
+ }
+
public onSubmit(accountForm: FormGroup) {
this.submitted = true;
if (accountForm.valid) {
@@ -50,4 +55,10 @@ export class CreateAccountFormComponent implements OnInit {
this.accountForm.get('phone').setValue(phoneNoSpace.replace(/(?!^)(?=(?:\d{2})+$)/g, ' ')); //NOSONAR
}
}
+ public toggleShowConfirmPassword(): void {
+ this.isShowConfirmPassword = !this.isShowConfirmPassword;
+ }
+ public toggleShowPassword(): void {
+ this.isShowPassword = !this.isShowPassword;
+ }
}
diff --git a/src/app/shared/components/hour-picker/hour-picker.component.html b/src/app/shared/components/hour-picker/hour-picker.component.html
index 0a509ad52dd5895c6d6c3aef3c5de0a915a07dbe..d8eb0f6ae5ac2c60434882bb144e2667e71f88a2 100644
--- a/src/app/shared/components/hour-picker/hour-picker.component.html
+++ b/src/app/shared/components/hour-picker/hour-picker.component.html
@@ -19,7 +19,6 @@
id="{{ day.name }}"
(click)="toggleOpenDay(day, $event.target.checked)"
[checked]="day.open"
- [disabled]="isEditMode"
/>
<span class="slider"></span>
</label>
@@ -52,25 +51,25 @@
<div>de</div>
<div class="input-container">
- <input type="time" [(ngModel)]="hour.start" (change)="submitForm()" [disabled]="isEditMode" />
+ <input type="time" [(ngModel)]="hour.start" (change)="submitForm()" />
</div>
<div>Ã </div>
<div class="input-container">
- <input type="time" [(ngModel)]="hour.end" (change)="submitForm()" [disabled]="isEditMode" />
+ <input type="time" [(ngModel)]="hour.end" (change)="submitForm()" />
</div>
<div>
<div *ngIf="hour.error === 'wrong' || hour.error === 'incomplete'" class="error-message">
- <app-svg-icon [type]="'ico'" [icon]="'nok'"></app-svg-icon>
+ <app-svg-icon [iconClass]="'icon-32'" [type]="'ico'" [icon]="'nok'"></app-svg-icon>
</div>
<div *ngIf="hour.error === null" class="error-message">
- <app-svg-icon [type]="'ico'" [icon]="'ok'"></app-svg-icon>
+ <app-svg-icon [iconClass]="'icon-32'" [type]="'ico'" [icon]="'ok'"></app-svg-icon>
</div>
</div>
</div>
- <div class="add" *ngIf="day.hours.length === 1 && !isEditMode">
+ <div class="add" *ngIf="day.hours.length === 1">
<div
(click)="addHours(day)"
fxLayout="row"
diff --git a/src/app/shared/components/hour-picker/hour-picker.component.scss b/src/app/shared/components/hour-picker/hour-picker.component.scss
index b10e64ec2b316430fc4cbf13ee2722276e4b0aa6..64584da1b1394332c7e113e65f0ef85ca82c51e5 100644
--- a/src/app/shared/components/hour-picker/hour-picker.component.scss
+++ b/src/app/shared/components/hour-picker/hour-picker.component.scss
@@ -46,7 +46,7 @@
height: 40px;
display: grid;
// grid-template-columns: auto 70px auto 70px 30px 80px 1fr;
- grid-template-columns: auto 52px auto 61px 30px;
+ grid-template-columns: auto 52px auto 61px 30px 0px;
column-gap: 10px;
align-items: center;
justify-items: center;
diff --git a/src/app/shared/components/hour-picker/hour-picker.component.ts b/src/app/shared/components/hour-picker/hour-picker.component.ts
index 6114ce012c57b7a989b263ced5f0b87428ee49a3..43c401154969cb1808515629f84c906c824b9082 100644
--- a/src/app/shared/components/hour-picker/hour-picker.component.ts
+++ b/src/app/shared/components/hour-picker/hour-picker.component.ts
@@ -1,6 +1,5 @@
import { Component, Input, Output, EventEmitter, OnDestroy, OnChanges } from '@angular/core';
import { AbstractControl, FormArray, FormControl, FormGroup, Validators } from '@angular/forms';
-import * as _ from 'lodash';
import { Day } from '../../../models/day.model';
import { Time } from '../../../models/time.model';
import { WeekDayEnum } from '../../enum/weekDay.enum';
@@ -14,7 +13,6 @@ import { CheckHours } from '../../validator/form';
export class HourPickerComponent implements OnChanges, OnDestroy {
@Input() modifiedFields: any;
@Input() structureInput: FormGroup;
- @Input() isEditMode: boolean;
@Output() updateFormError = new EventEmitter<any>();
@Output() updateForm = new EventEmitter<FormGroup>();
diff --git a/src/app/shared/components/index.ts b/src/app/shared/components/index.ts
index 4fecd7be063fdc5bf811c6f6105dca31bf35b3b4..9cad91820ad53c6195edba75cd07a1d27d01aac1 100644
--- a/src/app/shared/components/index.ts
+++ b/src/app/shared/components/index.ts
@@ -12,6 +12,8 @@ import { HourPickerComponent } from './hour-picker/hour-picker.component';
import { CopyPasteComponent } from './hour-picker/copy-paste/copy-paste.component';
import { RadioFormComponent } from './radio-form/radio-form.component';
import { ModalConfirmationComponent } from './modal-confirmation/modal-confirmation.component';
+import { StructureOptionsModalComponent } from './structure-options-modal/structure-options-modal.component';
+import { ModalOptionsComponent } from './modal-options/modal-options.component';
// tslint:disable-next-line: max-line-length
export {
@@ -29,6 +31,8 @@ export {
CopyPasteComponent,
RadioFormComponent,
ModalConfirmationComponent,
+ StructureOptionsModalComponent,
+ ModalOptionsComponent,
};
// tslint:disable-next-line:variable-name
@@ -47,4 +51,6 @@ export const SharedComponents = [
CopyPasteComponent,
RadioFormComponent,
ModalConfirmationComponent,
+ StructureOptionsModalComponent,
+ ModalOptionsComponent,
];
diff --git a/src/app/shared/components/modal-confirmation/modal-confirmation.component.html b/src/app/shared/components/modal-confirmation/modal-confirmation.component.html
index fe2cf5816fa77d06b2bc2b360e1338ee3f766c0f..018d67fad261bcca0cdc5a6252a94a82ee50ef9a 100644
--- a/src/app/shared/components/modal-confirmation/modal-confirmation.component.html
+++ b/src/app/shared/components/modal-confirmation/modal-confirmation.component.html
@@ -1,11 +1,11 @@
-<div *ngIf="openned" class="modalExitContainer">
+<div *ngIf="openned" class="modalBackground">
<div class="modal">
<div class="contentModal" fxLayout="column" fxLayoutAlign="space-around center">
<h3>ATTENTION</h3>
<p>{{ content }}</p>
<div class="footerModal" fxLayout="row" fxLayoutAlign="space-around center">
- <button class="btn leave" (click)="closeModal(true)">Confirmer</button>
- <button class="btn" (click)="closeModal(false)">Annuler</button>
+ <button class="btn-primary small leave" (click)="closeModal(true)">Confirmer</button>
+ <button class="btn-primary small" (click)="closeModal(false)">Annuler</button>
</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
index 5411fa4841b56477a124bdf89333d329d2a31dfc..21be72c1313f6a4029b0ad37ac392ab271c300ef 100644
--- a/src/app/shared/components/modal-confirmation/modal-confirmation.component.scss
+++ b/src/app/shared/components/modal-confirmation/modal-confirmation.component.scss
@@ -6,7 +6,7 @@
.modalExitContainer {
width: 100%;
height: 100%;
- z-index: $modal-confirmation-z-index;
+ z-index: $modal-z-index;
position: absolute;
content: '';
top: 0;
@@ -29,28 +29,17 @@
width: 100%;
margin-top: 14px;
@include cn-bold-16;
- .btn {
- background: $secondary-color;
- border-radius: 4px;
- outline: none;
- cursor: pointer;
- border: 0;
- color: $white;
- height: 40px;
- @include btn-bold;
- width: 149px;
- &.leave {
- background: none;
- color: $grey-1;
- text-decoration: underline;
- }
+ .leave {
+ background: none;
+ color: $grey-1;
+ text-decoration: underline;
}
}
}
width: 350px;
margin: auto;
border-radius: 6px;
- @include background-hash;
+ @include background-hash($grey-2);
border: 1px solid $grey-4;
margin-top: 50vh;
transform: translateY(-50%);
diff --git a/src/app/shared/components/modal-confirmation/modal-confirmation.component.ts b/src/app/shared/components/modal-confirmation/modal-confirmation.component.ts
index 8c75b179fcbb2de19e0dc0e8c3f8f7d29af5ffed..a143aa820f4aa0785d96f603b7010f7a6c54bd0f 100644
--- a/src/app/shared/components/modal-confirmation/modal-confirmation.component.ts
+++ b/src/app/shared/components/modal-confirmation/modal-confirmation.component.ts
@@ -1,5 +1,4 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { Subject } from 'rxjs';
@Component({
selector: 'app-modal-confirmation',
diff --git a/src/app/shared/components/modal-options/modal-options.component.html b/src/app/shared/components/modal-options/modal-options.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..0e45ca7cc1e91a5f82d66650fc0b615808afc922
--- /dev/null
+++ b/src/app/shared/components/modal-options/modal-options.component.html
@@ -0,0 +1,52 @@
+<div class="modalOptions" (clickOutside)="closeModal(0)">
+ <div *ngIf="isModalProfileOpts" class="modalContent" fxLayout="column" fxLayoutGap="10px">
+ <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="9px">
+ <app-svg-icon [type]="'ico'" [iconColor]="inherit" [icon]="'email'"></app-svg-icon>
+ <p (click)="closeModal(functionType.changeEmail)">Changer mon courriel</p>
+ </div>
+ <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="9px">
+ <app-svg-icon [type]="'ico'" [iconColor]="inherit" [icon]="'password'"></app-svg-icon>
+ <p (click)="closeModal(functionType.changePassword)">Changer mon mot de passe</p>
+ </div>
+ <div fxLayout="row" class="deleteItem" fxLayoutAlign="start center" fxLayoutGap="9px">
+ <app-svg-icon [type]="'ico'" [iconColor]="inherit" [icon]="'cancel'"></app-svg-icon>
+ <p (click)="closeModal(functionType.deleteAccount)">Supprimer mon compte</p>
+ </div>
+ </div>
+ <div *ngIf="!isModalProfileOpts" class="modalContent" fxLayout="column" fxLayoutGap="10px">
+ <div (click)="closeModal(functionType.addUser)" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="9px">
+ <app-svg-icon [type]="'ico'" [iconColor]="'inherit'" [icon]="'add'"></app-svg-icon>
+ <p>Ajouter un compte</p>
+ </div>
+ <div
+ (click)="hasOwners ? closeModal(functionType.removeUser) : null"
+ fxLayout="row"
+ fxLayoutAlign="start center"
+ fxLayoutGap="9px"
+ [ngClass]="{ invalid: !hasOwners }"
+ >
+ <app-svg-icon [type]="'ico'" [iconColor]="'inherit'" [icon]="'remove'"></app-svg-icon>
+ <p>Supprimer un compte</p>
+ </div>
+ <div
+ *ngIf="!isEditFormView"
+ (click)="closeModal(functionType.editStructure)"
+ fxLayout="row"
+ fxLayoutAlign="start center"
+ fxLayoutGap="9px"
+ >
+ <app-svg-icon [type]="'ico'" [iconColor]="'inherit'" [icon]="'edit'"></app-svg-icon>
+ <p>Modifier la structure</p>
+ </div>
+ <div
+ (click)="closeModal(functionType.removeStructure)"
+ fxLayout="row"
+ class="deleteItem"
+ fxLayoutAlign="start center"
+ fxLayoutGap="9px"
+ >
+ <app-svg-icon [type]="'ico'" [iconColor]="'inherit'" [icon]="'cancel'"></app-svg-icon>
+ <p>Supprimer la structure</p>
+ </div>
+ </div>
+</div>
diff --git a/src/app/shared/components/modal-options/modal-options.component.scss b/src/app/shared/components/modal-options/modal-options.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..33159ef26d8514ce033954ebc711b493e2be634a
--- /dev/null
+++ b/src/app/shared/components/modal-options/modal-options.component.scss
@@ -0,0 +1,36 @@
+@import '../../../../assets/scss/color';
+@import '../../../../assets/scss/typography';
+@import '../../../../assets/scss/shapes';
+@import '../../../../assets/scss/z-index';
+
+.modalOptions {
+ width: 300px;
+ background-color: $white;
+ position: absolute;
+ z-index: $modal-z-index;
+ list-style-type: none;
+ @include background-hash($secondary-color);
+ border: 1px solid $secondary-color;
+ border-radius: 6px;
+ .modalContent {
+ background: $white;
+ border-radius: 6px;
+ padding: 25px 22px 18px 22px;
+ div {
+ cursor: pointer;
+ &.invalid {
+ opacity: 0.4;
+ cursor: default;
+ }
+ }
+ p {
+ @include cn-bold-16;
+ white-space: nowrap;
+ margin: 0;
+ }
+ .deleteItem {
+ color: $red-default;
+ fill: $red-default;
+ }
+ }
+}
diff --git a/src/app/shared/components/modal-options/modal-options.component.spec.ts b/src/app/shared/components/modal-options/modal-options.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b1b9a866a01182df9eb008bd88e85a1a4da4dab5
--- /dev/null
+++ b/src/app/shared/components/modal-options/modal-options.component.spec.ts
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ModalOptionsComponent } from './modal-options.component';
+
+describe('ModalConfirmationComponent', () => {
+ let component: ModalOptionsComponent;
+ let fixture: ComponentFixture<ModalOptionsComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ModalOptionsComponent],
+ }).compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ModalOptionsComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/shared/components/modal-options/modal-options.component.ts b/src/app/shared/components/modal-options/modal-options.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4de502a5c414fe46cc6ebf71b77002bb53ba0276
--- /dev/null
+++ b/src/app/shared/components/modal-options/modal-options.component.ts
@@ -0,0 +1,22 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FunctionTypeModalOptions } from '../../enum/functionTypeModalOptions.enum';
+
+@Component({
+ selector: 'app-modal-options',
+ templateUrl: './modal-options.component.html',
+ styleUrls: ['./modal-options.component.scss'],
+})
+export class ModalOptionsComponent implements OnInit {
+ functionType = FunctionTypeModalOptions;
+
+ constructor() {}
+ @Input() isModalProfileOpts = false;
+ @Input() hasOwners = true;
+ @Input() public isEditFormView? = false;
+ @Output() closed = new EventEmitter<number>();
+ ngOnInit(): void {}
+
+ public closeModal(value: number): void {
+ this.closed.emit(value);
+ }
+}
diff --git a/src/app/shared/components/signin-modal/signin-modal.component.html b/src/app/shared/components/signin-modal/signin-modal.component.html
index d8d32764aff38dc22474a6c36b8ab0cc1b452541..a0d11538c3a377ca38f6499c943291fa6a55cf53 100644
--- a/src/app/shared/components/signin-modal/signin-modal.component.html
+++ b/src/app/shared/components/signin-modal/signin-modal.component.html
@@ -1,17 +1,25 @@
-<div class="cModal" [ngClass]="openned ? 'oModal' : ''">
- <div (clickOutside)="closeModal()" fxLayout="column" fxLayoutAlign="center center">
- <div class="ico-close-wrapper">
- <div (click)="closeModal()" class="ico-close-details"></div>
- </div>
- <h4>Inscription</h4>
- <div *ngIf="!success">
- <app-create-account-form (submitForm)="onSubmit($event)"></app-create-account-form>
- </div>
- <div *ngIf="userAlreadyExist">Cette addresse mail est déjà utilisée</div>
- <div *ngIf="success">
- <p>
- Un mail de confirmation vous a été envoyé. Merci de valider votre addresse mail avant de pouvoir vous connecter.
- </p>
+<div *ngIf="openned" class="modalBackground">
+ <div class="modal">
+ <div (clickOutside)="closeModal(false)" class="contentModal" fxLayout="column" fxLayoutAlign="space-around start">
+ <div class="ico-close" fxLayout="row" fxLayoutAlign="end center">
+ <div class="ico-close-wrapper">
+ <div (click)="closeModal()" class="ico-close-details"></div>
+ </div>
+ </div>
+
+ <div class="form">
+ <h3 *ngIf="!success">S'inscrire</h3>
+ <div class="emailAlreadyUse" *ngIf="userAlreadyExist && !success">Cette addresse mail est déjà utilisée</div>
+ <div *ngIf="!success">
+ <app-create-account-form (submitForm)="onSubmit($event)"></app-create-account-form>
+ </div>
+ <div *ngIf="success">
+ <p>
+ Un mail de confirmation vous a été envoyé. Merci de valider votre addresse mail avant de pouvoir vous
+ connecter.
+ </p>
+ </div>
+ </div>
</div>
</div>
</div>
diff --git a/src/app/shared/components/signin-modal/signin-modal.component.scss b/src/app/shared/components/signin-modal/signin-modal.component.scss
index a73c0f1c2f0d29c8bf9352db5c3251ee1cdfde02..35477fdaedbfe32561204ef93463e45fc2e9880a 100644
--- a/src/app/shared/components/signin-modal/signin-modal.component.scss
+++ b/src/app/shared/components/signin-modal/signin-modal.component.scss
@@ -1,40 +1,21 @@
@import '../../../../assets/scss/typography';
@import '../../../../assets/scss/color';
-@import '../../../../assets/scss/buttons';
-@import '../../../../assets/scss/z-index';
-@import '../../../../assets/scss/hyperlink';
-.cModal {
- position: fixed;
- z-index: $modal-z-index;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- background-color: $modal-background;
- display: none;
+
+.ico-close {
+ width: 100%;
}
-.cModal > div {
- max-width: 450px;
- position: relative;
- top: 40%;
- left: 50%;
- transform: translate(-50%, -50%);
- background: $white;
- text-align: center;
- border-radius: 4px;
- @include cn-bold-16;
- p {
- padding: 30px 48px 0 40px;
- }
-}
-.oModal {
- display: block;
+h3 {
+ @include cn-bold-26;
+ color: $black;
+ margin-top: 0;
}
-.ico-close-wrapper {
- position: absolute;
- top: -10px;
- right: -10px;
+.form {
+ max-width: 391px;
+ margin: auto;
+ width: 100%;
}
-.ico-close-details {
- opacity: 1;
+.emailAlreadyUse {
+ color: $orange-warning;
+ text-align: center;
+ margin-bottom: 10px;
}
diff --git a/src/app/shared/components/signup-modal/signup-modal.component.html b/src/app/shared/components/signup-modal/signup-modal.component.html
index 537ae6c49902a679f7c79a6b2e33130f103f27ec..492b39e291a3d34c23112fa94fe5830c2cd964ff 100644
--- a/src/app/shared/components/signup-modal/signup-modal.component.html
+++ b/src/app/shared/components/signup-modal/signup-modal.component.html
@@ -1,47 +1,62 @@
-<div class="cModal" [ngClass]="openned ? 'oModal' : ''">
- <div (clickOutside)="closeModal()" fxLayout="column" fxLayoutAlign="center center">
- <div class="ico-close-wrapper">
- <div (click)="closeModal()" class="ico-close-details"></div>
- </div>
- <h4 class="card-header">Connexion</h4>
- <div class="card-body">
- <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
- <div class="form-group">
- <label for="username">Email</label>
- <input
- type="text"
- formControlName="username"
- autocomplete="on"
- class="form-control"
- [ngClass]="{ 'is-invalid': submitted && f.username.errors }"
- />
- <div *ngIf="submitted && f.username.errors" class="invalid-feedback">
- <div *ngIf="f.username.errors.required">Identifiant requis</div>
- </div>
+<div *ngIf="openned" class="modalBackground">
+ <div class="modal">
+ <div (clickOutside)="closeModal(false)" class="contentModal" fxLayout="column" fxLayoutAlign="space-around start">
+ <div class="ico-close" fxLayout="row" fxLayoutAlign="end center">
+ <div class="ico-close-wrapper">
+ <div (click)="closeModal()" class="ico-close-details"></div>
</div>
- <div class="form-group">
- <label for="password">Mot de passe</label>
- <input
- type="password"
- formControlName="password"
- autocomplete="on"
- class="form-control"
- [ngClass]="{ 'is-invalid': submitted && f.password.errors }"
- />
- <div *ngIf="submitted && f.password.errors">
- <div *ngIf="f.password.errors.required">Mot de passe requis</div>
+ </div>
+
+ <div class="form">
+ <h3>Se connecter</h3>
+ <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
+ <div class="form-group" fxLayout="column">
+ <label for="email">Courriel personnel</label>
+ <div fxLayout="row" fxLayoutGap="13px">
+ <input type="text" autocomplete="on" formControlName="email" class="form-input" />
+ <svg *ngIf="f.email.invalid && f.email.value" class="notValidate" aria-hidden="true">
+ <use [attr.xlink:href]="'assets/form/sprite.svg#notValidate'"></use>
+ </svg>
+ </div>
</div>
- </div>
- <div *ngIf="authFailed">Identifiant ou mot de passe invalide</div>
- <div>
- <button [disabled]="loading">
- <span *ngIf="loading"></span>
- Login
- </button>
- <button (click)="sendSwitchToSignIn()">Inscription</button>
- </div>
- <a (click)="swithToResetPassword()">Mot de passe oublié</a>
- </form>
+ <div class="form-group password" fxLayout="column">
+ <label for="password">Mot de passe</label>
+ <p [ngClass]="{ invalid: f.password.invalid && f.password.value }">
+ 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 fxLayout="row" fxLayoutGap="13px">
+ <input
+ [type]="isShowPassword ? 'text' : 'password'"
+ autocomplete="on"
+ formControlName="password"
+ class="form-input"
+ />
+ <svg (click)="toggleShowPassword()" class="eyePassword" aria-hidden="true">
+ <use [attr.xlink:href]="'assets/form/sprite.svg#eyePassword'"></use>
+ </svg>
+ <svg *ngIf="f.password.invalid && f.password.value" class="notValidate" aria-hidden="true">
+ <use [attr.xlink:href]="'assets/form/sprite.svg#notValidate'"></use>
+ </svg>
+ </div>
+ <div class="incorrectId" *ngIf="authFailed">Identifiant ou mot de passe invalide</div>
+ </div>
+ <div class="footerModal" fxLayout="row" fxLayoutAlign="space-around center">
+ <button type="button" class="btn confirm" (click)="swithToResetPassword()">Mot de passe oublié</button>
+ <button
+ type="submit"
+ class="btn-primary"
+ [disabled]="loginForm.invalid || loading"
+ [ngClass]="{ invalid: loginForm.invalid || loading }"
+ >
+ Connexion
+ </button>
+ </div>
+ <div class="footerModal" fxLayout="row" fxLayoutAlign="space-around center">
+ <button class="btn register" (click)="sendSwitchToSignIn()">Je n’ai pas encore de compte</button>
+ </div>
+ </form>
+ </div>
</div>
</div>
</div>
diff --git a/src/app/shared/components/signup-modal/signup-modal.component.scss b/src/app/shared/components/signup-modal/signup-modal.component.scss
index a73c0f1c2f0d29c8bf9352db5c3251ee1cdfde02..ecf2f6b5648c36b232fd34a7f2c18b08cf31c1e0 100644
--- a/src/app/shared/components/signup-modal/signup-modal.component.scss
+++ b/src/app/shared/components/signup-modal/signup-modal.component.scss
@@ -3,38 +3,78 @@
@import '../../../../assets/scss/buttons';
@import '../../../../assets/scss/z-index';
@import '../../../../assets/scss/hyperlink';
-.cModal {
- position: fixed;
- z-index: $modal-z-index;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- background-color: $modal-background;
- display: none;
+
+.ico-close {
+ width: 100%;
}
-.cModal > div {
- max-width: 450px;
- position: relative;
- top: 40%;
- left: 50%;
- transform: translate(-50%, -50%);
- background: $white;
- text-align: center;
- border-radius: 4px;
- @include cn-bold-16;
- p {
- padding: 30px 48px 0 40px;
- }
+
+.incorrectId {
+ color: $orange-warning;
}
-.oModal {
- display: block;
+
+h3 {
+ @include cn-bold-26;
+ color: $black;
+ margin-top: 0;
}
-.ico-close-wrapper {
- position: absolute;
- top: -10px;
- right: -10px;
+.form {
+ max-width: 391px;
+ margin: auto;
}
-.ico-close-details {
- opacity: 1;
+
+.form-group {
+ margin-top: 26px;
+ .notValidate {
+ min-width: 26px;
+ width: 26px;
+ height: 40px;
+ }
+ label {
+ margin-bottom: 4px;
+ @include cn-regular-14;
+ color: $grey-2;
+ }
+ input {
+ width: 100%;
+ margin-right: 39px;
+ }
+ &.password {
+ margin-bottom: 39px;
+ p {
+ @include cn-regular-14;
+ color: $grey-3;
+ margin-top: 0;
+ margin-bottom: 4px;
+ padding-right: 39px;
+ &.invalid {
+ color: $orange-warning;
+ }
+ }
+ .eyePassword {
+ cursor: pointer;
+ margin-right: 39px;
+ width: 24px;
+ height: 40px;
+ stroke: $grey-3;
+ fill: $grey-3;
+ }
+ }
+}
+.footerModal {
+ padding-right: 39px;
+ button {
+ width: 100% !important;
+ &.invalid {
+ opacity: 0.4;
+ }
+ &.confirm {
+ font-size: 14px;
+ }
+ &.register {
+ background: $white;
+ border: 1px solid $grey-4;
+ color: $secondary-color;
+ height: 38px;
+ }
+ }
}
diff --git a/src/app/shared/components/signup-modal/signup-modal.component.ts b/src/app/shared/components/signup-modal/signup-modal.component.ts
index 3d70b98aeb373a6b83cd9679c00cec138305f346..128646d1b68fc4c64146b36cfb96170aef3b6259 100644
--- a/src/app/shared/components/signup-modal/signup-modal.component.ts
+++ b/src/app/shared/components/signup-modal/signup-modal.component.ts
@@ -3,6 +3,7 @@ import { FormGroup, FormBuilder, Validators, AbstractControl } from '@angular/fo
import { ActivatedRoute, Router } from '@angular/router';
import { first } from 'rxjs/operators';
import { AuthService } from '../../../services/auth.service';
+import { CustomRegExp } from '../../../utils/CustomRegExp';
@Component({
selector: 'app-signup-modal',
@@ -15,7 +16,7 @@ export class SignUpModalComponent implements OnInit {
public submitted = false;
public authFailed = false;
public returnUrl: string;
-
+ public isShowPassword = false;
constructor(
private formBuilder: FormBuilder,
private route: ActivatedRoute,
@@ -28,8 +29,8 @@ export class SignUpModalComponent implements OnInit {
ngOnInit(): void {
this.loginForm = this.formBuilder.group({
- username: ['', Validators.required],
- password: ['', Validators.required],
+ email: ['', [Validators.required, Validators.pattern(CustomRegExp.EMAIL)]],
+ password: ['', [Validators.required, Validators.pattern(CustomRegExp.PASSWORD)]],
});
// get return url from route parameters or default to '/'
this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
@@ -45,7 +46,8 @@ export class SignUpModalComponent implements OnInit {
}
public sendSwitchToSignIn(): void {
- this.closed.emit(false);
+ this.closed.emit(true);
+ this.router.navigate(['/create-structure']);
}
public swithToResetPassword(): void {
@@ -60,10 +62,9 @@ export class SignUpModalComponent implements OnInit {
if (this.loginForm.invalid) {
return;
}
-
this.loading = true;
this.authService
- .login(this.f.username.value, this.f.password.value)
+ .login(this.f.email.value, this.f.password.value)
.pipe(first())
.subscribe(
() => {
@@ -76,4 +77,8 @@ export class SignUpModalComponent implements OnInit {
}
);
}
+
+ public toggleShowPassword(): void {
+ this.isShowPassword = !this.isShowPassword;
+ }
}
diff --git a/src/app/shared/components/structure-options-modal/structure-options-modal.component.html b/src/app/shared/components/structure-options-modal/structure-options-modal.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..a9aab9a7872b158601b109ae9e1faf6565da35ab
--- /dev/null
+++ b/src/app/shared/components/structure-options-modal/structure-options-modal.component.html
@@ -0,0 +1,227 @@
+<nav aria-label="modalOption">
+ <ul>
+ <li>
+ <button [ngClass]="{ active: active }" (click)="openModalOpts()" class="btn-primary transparent">
+ <app-svg-icon [type]="'ico'" [iconColor]="'inherit'" [icon]="'moreOpts'"></app-svg-icon>
+ </button>
+ <ul *ngIf="showModalOption" class="dropdown">
+ <app-modal-options
+ [isModalProfileOpts]="!structure"
+ [isEditFormView]="structure && isEditFormView"
+ [hasOwners]="structure && structure.owners.length > 0"
+ (closed)="closeModalOpts($event)"
+ ></app-modal-options>
+ </ul>
+ </li>
+ </ul>
+</nav>
+<div *ngIf="editModal" class="modalBackground">
+ <div class="modal" (clickOutside)="closeModalOptsProfile()">
+ <form
+ *ngIf="editModal == typeModalProfile.password"
+ [formGroup]="formPassword"
+ class="contentModal"
+ fxLayout="column"
+ fxLayoutAlign="center start"
+ fxLayoutGap="20px"
+ >
+ <div fxLayout="row" class="headerModal" fxLayoutAlign="space-between center">
+ <h2>Changer de mot de passe</h2>
+ <div class="ico-close-details" (click)="closeModalOptsProfile()"></div>
+ </div>
+ <div class="form-group" fxLayout="column" fxLayoutGap="4px">
+ <label for="oldPassword">Ancien mot de passe</label>
+ <p *ngIf="passwordError" class="special invalid">Votre ancien mot de passe est incorrect.</p>
+ <div fxLayout="row" fxLayoutGap="13px">
+ <input
+ [type]="isShowOldPassword ? 'text' : 'password'"
+ formControlName="oldPassword"
+ class="form-input password"
+ autocomplete="on"
+ />
+ <app-svg-icon
+ (click)="showOldPassword()"
+ [type]="'form'"
+ [iconClass]="'grey'"
+ [icon]="'eyePassword'"
+ ></app-svg-icon>
+ <app-svg-icon *ngIf="passwordError" [type]="'form'" [icon]="'notValidate'"></app-svg-icon>
+ </div>
+ </div>
+ <div class="form-group" fxLayout="column">
+ <label for="password">Nouveau mot de passe</label>
+ <p class="special" [ngClass]="{ invalid: fpass.password.invalid && fpass.password.value }">
+ 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 fxLayout="row" fxLayoutGap="13px">
+ <input
+ [type]="isShowPassword ? 'text' : 'password'"
+ formControlName="password"
+ class="form-input password"
+ autocomplete="on"
+ />
+ <app-svg-icon
+ (click)="showPassword()"
+ [type]="'form'"
+ [iconClass]="'grey'"
+ [icon]="'eyePassword'"
+ ></app-svg-icon>
+ <app-svg-icon *ngIf="fpass.password.valid" [type]="'form'" [icon]="'validate'"></app-svg-icon>
+ <app-svg-icon
+ *ngIf="fpass.password.invalid && fpass.password.value"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ ></app-svg-icon>
+ </div>
+ </div>
+ <div class="form-group" fxLayout="column">
+ <label for="confirmPassword">Confirmation du mot de passe</label>
+ <div fxLayout="row" fxLayoutGap="13px">
+ <input
+ [type]="isShowConfirmPassword ? 'text' : 'password'"
+ formControlName="confirmPassword"
+ class="form-input password"
+ autocomplete="on"
+ />
+ <app-svg-icon
+ (click)="showConfirmPassword()"
+ [type]="'form'"
+ [iconClass]="'grey'"
+ [icon]="'eyePassword'"
+ ></app-svg-icon>
+ <app-svg-icon
+ *ngIf="fpass.confirmPassword.valid && fpass.password.value"
+ [type]="'form'"
+ [icon]="'validate'"
+ ></app-svg-icon>
+ <app-svg-icon
+ *ngIf="fpass.confirmPassword.invalid && fpass.confirmPassword.value"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ ></app-svg-icon>
+ </div>
+ </div>
+ <div class="footerModal" fxLayout="row" fxLayoutAlign="center center">
+ <button
+ type="submit"
+ [ngClass]="{ invalid: formPassword.invalid }"
+ class="btn-primary small leave"
+ (click)="submitPassword()"
+ >
+ Valider
+ </button>
+ </div>
+ </form>
+ <form
+ *ngIf="editModal == typeModalProfile.email"
+ [formGroup]="formEmail"
+ class="contentModal"
+ fxLayout="column"
+ fxLayoutAlign="center start"
+ >
+ <div fxLayout="row" class="headerModal" fxLayoutAlign="space-between center">
+ <h2>Changer de courriel</h2>
+ <div class="ico-close-details" (click)="closeModalOptsProfile()"></div>
+ </div>
+ <div class="form-group" fxLayout="column">
+ <label for="email">Nouveau courriel</label>
+ <p class="special invalid" *ngIf="this.fmail.email.hasError('alreadyExist')">L'email est déja utilisé.</p>
+ <div fxLayout="row" fxLayoutGap="13px">
+ <input
+ type="text"
+ formControlName="email"
+ class="form-input"
+ autocomplete="on"
+ (keyup)="verifyEmailAlreadyUsed($event.target.value, this.fmail.email)"
+ />
+ <app-svg-icon *ngIf="fmail.email.valid" [type]="'form'" [icon]="'validate'"></app-svg-icon>
+ <app-svg-icon
+ *ngIf="fmail.email.invalid && fmail.email.value"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ ></app-svg-icon>
+ </div>
+ </div>
+ <div class="footerModal" fxLayout="row" fxLayoutAlign="center center">
+ <button
+ type="submit"
+ [ngClass]="{ invalid: formEmail.invalid }"
+ class="btn-primary small leave"
+ (click)="submitEmail()"
+ >
+ Valider
+ </button>
+ </div>
+ </form>
+ <div
+ *ngIf="editModal == typeModalProfile.deleteAccount"
+ class="contentModal"
+ fxLayout="column"
+ fxLayoutAlign="center start"
+ fxLayoutGap="30px"
+ >
+ <div fxLayout="row" class="headerModal" fxLayoutAlign="space-between center">
+ <h2>Supprimer un compte</h2>
+ <div class="ico-close-details" (click)="closeModalOptsProfile()"></div>
+ </div>
+ <div fxLayout="column" fxLayoutGap="16px" class="ownersBlock">
+ <div class="row removeOwner" *ngFor="let owner of structure.owners" fxLayoutGap="16px">
+ <button class="btn-primary small" (click)="removeOwner(owner.id)">X</button>
+ <span>
+ {{ owner.email }}
+ </span>
+ </div>
+ </div>
+ <div class="footerModal" fxLayout="row" fxLayoutAlign="center center">
+ <button type="button" class="btn-primary small leave" (click)="closeModalOptsProfile()">Terminer</button>
+ </div>
+ </div>
+ <form
+ *ngIf="editModal == typeModalProfile.addAccount"
+ [formGroup]="formAddAccount"
+ class="contentModal"
+ fxLayout="column"
+ fxLayoutAlign="center start"
+ fxLayoutGap="30px"
+ >
+ <div fxLayout="row" class="headerModal" fxLayoutAlign="space-between center">
+ <h2>Ajouter un compte</h2>
+ <div class="ico-close-details" (click)="closeModalOptsProfile()"></div>
+ </div>
+ <div class="form-group" fxLayout="column">
+ <label for="email">Courriel du compte à 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>
+ <app-svg-icon
+ *ngIf="fAddAccount.email.invalid && fAddAccount.email.value"
+ [type]="'form'"
+ [icon]="'notValidate'"
+ ></app-svg-icon>
+ </div>
+ </div>
+ <div class="footerModal" fxLayout="row" fxLayoutAlign="center center">
+ <button
+ type="submit"
+ [ngClass]="{ invalid: formAddAccount.invalid }"
+ class="btn-primary small leave"
+ (click)="addOwner()"
+ >
+ Envoyer
+ </button>
+ </div>
+ </form>
+ </div>
+</div>
+<app-modal-confirmation
+ [openned]="deleteModalStructureOpenned"
+ [content]="'Voulez-vous vraiment supprimer cette structure ?'"
+ (closed)="deleteStructure($event)"
+></app-modal-confirmation>
+<app-modal-confirmation
+ [openned]="deleteModalAccountOpenned"
+ [content]="'Voulez-vous vraiment supprimer votre compte ?'"
+ (closed)="deleteAccount($event)"
+></app-modal-confirmation>
diff --git a/src/app/shared/components/structure-options-modal/structure-options-modal.component.scss b/src/app/shared/components/structure-options-modal/structure-options-modal.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2d34b631ebd55da49121d92ccebbfe0bb6738f65
--- /dev/null
+++ b/src/app/shared/components/structure-options-modal/structure-options-modal.component.scss
@@ -0,0 +1,94 @@
+@import '../../../../assets/scss/color';
+@import '../../../../assets/scss/typography';
+
+ul {
+ list-style: none;
+ margin: 0;
+ padding-left: 0;
+}
+
+li {
+ fill: $secondary-color;
+ color: $black;
+ display: block;
+ float: left;
+ position: relative;
+ text-decoration: none;
+ button {
+ width: 40px;
+ fill: $secondary-color;
+ &.active {
+ background-color: $secondary-color;
+ fill: $white;
+ border-color: $secondary-color;
+ }
+ &:hover {
+ background-color: $secondary-color;
+ fill: $white;
+ border-color: $secondary-color;
+ }
+ }
+}
+
+ul li ul {
+ position: absolute;
+ display: block;
+ margin-left: -268px;
+ margin-top: 7px;
+}
+
+button {
+ &.transparent {
+ background: none;
+ border: 1px solid $grey-4;
+ border-radius: 6px;
+ }
+}
+.contentModal {
+ padding: 35px 34px 18px 54px !important;
+ .headerModal {
+ width: 100%;
+ }
+ p {
+ &.special {
+ margin: 8px 0;
+ @include cn-regular-14;
+ color: $grey-3;
+ &.invalid {
+ color: $orange-warning;
+ }
+ }
+ }
+ .removeOwner {
+ white-space: nowrap;
+ width: 84%;
+ text-overflow: ellipsis;
+ button {
+ width: 40px;
+ background-color: $red-default;
+ }
+ span {
+ @include cn-bold-18;
+ }
+ }
+ button {
+ &.invalid {
+ opacity: 0.4;
+ }
+ }
+ .form-group {
+ width: 100%;
+ padding-right: 40px;
+ input {
+ width: 100%;
+ }
+ }
+ .ico-close-details {
+ min-width: 40px;
+ }
+ .ownersBlock {
+ width: 100%;
+ max-height: 300px;
+ overflow: auto;
+ }
+}
diff --git a/src/app/shared/components/structure-options-modal/structure-options-modal.component.spec.ts b/src/app/shared/components/structure-options-modal/structure-options-modal.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3ffffb034a11840470e58c5969e4b8bedc0d616e
--- /dev/null
+++ b/src/app/shared/components/structure-options-modal/structure-options-modal.component.spec.ts
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StructureOptionsModalComponent } from './structure-options-modal.component';
+
+describe('StructureOptionsModalComponent', () => {
+ let component: StructureOptionsModalComponent;
+ let fixture: ComponentFixture<StructureOptionsModalComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [StructureOptionsModalComponent],
+ }).compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(StructureOptionsModalComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/shared/components/structure-options-modal/structure-options-modal.component.ts b/src/app/shared/components/structure-options-modal/structure-options-modal.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..dccf978c4e929bdb5d20882d324656e9f4a42366
--- /dev/null
+++ b/src/app/shared/components/structure-options-modal/structure-options-modal.component.ts
@@ -0,0 +1,237 @@
+import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
+import { AbstractControl, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { StructureWithOwners } from '../../../models/structureWithOwners.model';
+import { TempUser } from '../../../models/temp-user.model';
+import { User } from '../../../models/user.model';
+import { TypeModalProfile } from '../../../profile/enum/TypeModalProfile.enum';
+import { ProfileService } from '../../../profile/services/profile.service';
+import { AuthService } from '../../../services/auth.service';
+import { StructureService } from '../../../services/structure.service';
+import { CustomRegExp } from '../../../utils/CustomRegExp';
+import { FunctionTypeModalOptions } from '../../enum/functionTypeModalOptions.enum';
+import { MustMatch } from '../../validator/form';
+
+@Component({
+ selector: 'app-structure-options-modal',
+ templateUrl: './structure-options-modal.component.html',
+ styleUrls: ['./structure-options-modal.component.scss'],
+})
+export class StructureOptionsModalComponent implements OnInit {
+ // Global var
+ @Input() public structure?: StructureWithOwners;
+ @Input() public userProfile?: User;
+ @Input() public isEditFormView? = false;
+ @Output() closed = new EventEmitter();
+ public active: boolean;
+
+ // Password profile
+ public formPassword: FormGroup;
+ public isShowOldPassword = false;
+ public isShowPassword = false;
+ public isShowConfirmPassword = false;
+ public passwordError = false;
+
+ // AddAccount
+ public formAddAccount: FormGroup;
+ public ownerAlreadyLinked = false;
+
+ // Email profile
+ public formEmail: FormGroup;
+ public changeEmail = false;
+
+ // Modal var
+ public editModal: TypeModalProfile;
+ public deleteModalAccountOpenned = false;
+ public deleteModalStructureOpenned = false;
+ public showModalOption = false;
+ public typeModalProfile = TypeModalProfile;
+
+ constructor(
+ private router: Router,
+ private formBuilder: FormBuilder,
+ private profileService: ProfileService,
+ private authService: AuthService,
+ private structureService: StructureService
+ ) {}
+
+ ngOnInit(): void {
+ this.formPassword = this.formBuilder.group(
+ {
+ oldPassword: ['', [Validators.required, Validators.pattern(CustomRegExp.PASSWORD)]],
+ password: ['', [Validators.required, Validators.pattern(CustomRegExp.PASSWORD)]],
+ confirmPassword: [''],
+ },
+ { validator: MustMatch('password', 'confirmPassword') }
+ );
+ this.formEmail = this.formBuilder.group({
+ email: ['', [Validators.required, Validators.pattern(CustomRegExp.EMAIL)]],
+ });
+ this.formAddAccount = this.formBuilder.group({
+ email: ['', [Validators.required, Validators.pattern(CustomRegExp.EMAIL)]],
+ });
+ }
+
+ public openModalOpts(): void {
+ this.showModalOption = true;
+ this.active = true;
+ }
+
+ // getter for form fields
+ get fmail(): { [key: string]: AbstractControl } {
+ return this.formEmail.controls;
+ }
+
+ // getter for form fields
+ get fAddAccount(): { [key: string]: AbstractControl } {
+ return this.formAddAccount.controls;
+ }
+
+ // getter for form fields
+ get fpass(): { [key: string]: AbstractControl } {
+ return this.formPassword.controls;
+ }
+
+ public showOldPassword(): void {
+ this.isShowOldPassword = !this.isShowOldPassword;
+ }
+ public showPassword(): void {
+ this.isShowPassword = !this.isShowPassword;
+ }
+ public showConfirmPassword(): void {
+ this.isShowConfirmPassword = !this.isShowConfirmPassword;
+ }
+
+ public closeModalOpts(functionType: number): void {
+ switch (functionType) {
+ case FunctionTypeModalOptions.changeEmail:
+ this.editModal = TypeModalProfile.email;
+ break;
+ case FunctionTypeModalOptions.changePassword:
+ this.editModal = TypeModalProfile.password;
+ break;
+ case FunctionTypeModalOptions.deleteAccount:
+ this.toggleDeleteAccountModal();
+ break;
+ case FunctionTypeModalOptions.addUser:
+ this.editModal = TypeModalProfile.addAccount;
+ this.ownerAlreadyLinked = false;
+ break;
+ case FunctionTypeModalOptions.removeUser:
+ this.editModal = TypeModalProfile.deleteAccount;
+ break;
+ case FunctionTypeModalOptions.editStructure:
+ this.router.navigateByUrl('/create-structure', { state: { data: this.structure.structure } });
+ break;
+ case FunctionTypeModalOptions.removeStructure:
+ this.toggleDeleteStructureModal();
+ break;
+ default:
+ break;
+ }
+ this.showModalOption = false;
+ this.active = false;
+ }
+
+ // Profile Section
+ public closeModalOptsProfile(): void {
+ this.editModal = null;
+ //this.formAddAccount.reset();
+ this.formEmail.reset();
+ this.formPassword.reset();
+ }
+
+ private toggleDeleteAccountModal(): void {
+ this.deleteModalAccountOpenned = !this.deleteModalAccountOpenned;
+ }
+ private toggleDeleteStructureModal(): void {
+ this.deleteModalStructureOpenned = !this.deleteModalStructureOpenned;
+ }
+
+ public deleteAccount(shouldDelete: boolean): void {
+ this.toggleDeleteAccountModal();
+ if (shouldDelete) {
+ this.profileService.deleteProfile().subscribe(() => {
+ this.logout();
+ });
+ }
+ }
+
+ public deleteStructure(shouldDelete: boolean): void {
+ this.toggleDeleteStructureModal();
+ if (shouldDelete) {
+ this.structureService.delete(this.structure.structure._id).subscribe(() => {
+ this.closed.emit('');
+ });
+ }
+ }
+
+ public logout(): void {
+ this.authService.logout();
+ }
+
+ public submitPassword(): void {
+ // stop here if form is invalid
+ if (this.formPassword.invalid) {
+ return;
+ }
+ this.profileService.changePassword(this.formPassword.value.password, this.formPassword.value.oldPassword).subscribe(
+ () => {
+ this.closeModalOptsProfile();
+ this.formPassword.reset();
+ this.passwordError = false;
+ },
+ (error) => {
+ this.passwordError = true;
+ }
+ );
+ }
+
+ public addOwner(): void {
+ // stop here if form is invalid
+ if (this.formAddAccount.invalid) {
+ return;
+ }
+ const user = new TempUser();
+ user.email = this.fAddAccount.email.value;
+ this.structureService.addOwnerToStructure(user, this.structure.structure._id).subscribe(
+ () => {
+ this.closeModalOptsProfile();
+ this.formAddAccount.reset();
+ },
+ (err) => {
+ this.ownerAlreadyLinked = true;
+ }
+ );
+ }
+
+ public removeOwner(owner: string): void {
+ this.structureService.removeOwnerFromStructure(owner, this.structure.structure._id).subscribe(() => {
+ this.structure.owners = this.structure.owners.filter((o) => o.id !== owner);
+ if (this.structure.owners.length == 0) {
+ this.closeModalOptsProfile();
+ }
+ });
+ }
+
+ public verifyEmailAlreadyUsed(inputEmail, formControl: FormControl): void {
+ if (formControl.valid) {
+ this.profileService.isEmailAlreadyUsed(inputEmail).subscribe((isExist) => {
+ if (isExist) {
+ formControl.setErrors({ alreadyExist: true });
+ }
+ });
+ }
+ }
+
+ public submitEmail(): void {
+ // stop here if form is invalid
+ if (this.formEmail.invalid) {
+ return;
+ }
+ this.profileService.changeEmail(this.formEmail.value.email, this.userProfile.email).subscribe(() => {
+ this.closeModalOptsProfile();
+ this.formEmail.reset();
+ });
+ }
+}
diff --git a/src/app/shared/components/structure-type-picker/structure-type-picker.component.html b/src/app/shared/components/structure-type-picker/structure-type-picker.component.html
index 3c6fa1bb62feabd9dc263db1b43c65c507766189..3613f3efbca5bf4f8735d573dde09087f72dffc8 100644
--- a/src/app/shared/components/structure-type-picker/structure-type-picker.component.html
+++ b/src/app/shared/components/structure-type-picker/structure-type-picker.component.html
@@ -26,7 +26,7 @@
<svg *ngIf="choice == pickedChoice" class="validate" aria-hidden="true">
<use [attr.xlink:href]="'assets/form/sprite.svg#checkVector'"></use>
</svg>
- {{ choice }}
+ {{ getStructureTypeName(choice) }}
</button>
</div>
</div>
diff --git a/src/app/shared/components/structure-type-picker/structure-type-picker.component.scss b/src/app/shared/components/structure-type-picker/structure-type-picker.component.scss
index bac3648addce16805e4e77c19c76de2698adfa70..bd8bc6eb760f0fad43f5f4792cb7d7a7a84690ef 100644
--- a/src/app/shared/components/structure-type-picker/structure-type-picker.component.scss
+++ b/src/app/shared/components/structure-type-picker/structure-type-picker.component.scss
@@ -55,11 +55,9 @@ button {
button {
background: none;
max-width: 114px;
- &:focus {
- }
}
.containerBtn {
- @include background-hash;
+ @include background-hash($grey-2);
padding: 0 0 4px 5px;
border-radius: 4px;
cursor: pointer;
diff --git a/src/app/shared/components/structure-type-picker/structure-type-picker.component.ts b/src/app/shared/components/structure-type-picker/structure-type-picker.component.ts
index 7de31248696706fbd40a1b25dde2dcbf4746542a..b64a4718fdd9a00e6ec230e052f97725312195ec 100644
--- a/src/app/shared/components/structure-type-picker/structure-type-picker.component.ts
+++ b/src/app/shared/components/structure-type-picker/structure-type-picker.component.ts
@@ -1,6 +1,7 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { StructureType } from '../../../models/structure-type.model';
import { StructureTypeService } from '../../../services/structure-type.service';
+import { typeStructureEnum } from '../../enum/typeStructure.enum';
export enum structureTypes {
public = 'Publique',
@@ -22,11 +23,11 @@ export class StructureTypePickerComponent implements OnInit {
constructor(private structureTypeService: StructureTypeService) {}
ngOnInit() {
- if (this.pickedChoice) {
- this.pickedType = this.getType(this.pickedChoice);
- }
this.structureTypeService.getStructureTypes().subscribe((types) => {
this.structureTypes = types;
+ if (this.pickedChoice) {
+ this.pickedType = this.getType(this.pickedChoice);
+ }
});
}
@@ -67,4 +68,7 @@ export class StructureTypePickerComponent implements OnInit {
throw new Error('Structure type not handle');
}
}
+ public getStructureTypeName(type: string): string {
+ return typeStructureEnum[type];
+ }
}
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 c1377ef4670b31e66e786366e8e6640eed29396e..e688256ea4c086a50b6e48e39f31194ed42bdfcc 100644
--- a/src/app/shared/components/svg-icon/svg-icon.component.scss
+++ b/src/app/shared/components/svg-icon/svg-icon.component.scss
@@ -1,3 +1,4 @@
+@import '../../../../assets/scss/color';
.icon {
display: inline-block;
height: 2em;
@@ -8,6 +9,24 @@
&.icon-75 {
width: 4.688em;
}
+ &.validation {
+ height: 100%;
+ width: 26px;
+ }
+ &.hover {
+ cursor: pointer;
+ &:hover {
+ opacity: 0.8;
+ }
+ }
+ &.grey {
+ fill: $grey-3;
+ stroke: $grey-3;
+ }
+ &.grey-1 {
+ fill: $grey-1;
+ stroke: $grey-1;
+ }
}
svg {
diff --git a/src/app/shared/components/validator-form/validator-form.component.scss b/src/app/shared/components/validator-form/validator-form.component.scss
index 425065fba366ed1753c84b0469bca4ed8a0f16ef..2031c9c196cc60468b09d87a809290fcbd882d05 100644
--- a/src/app/shared/components/validator-form/validator-form.component.scss
+++ b/src/app/shared/components/validator-form/validator-form.component.scss
@@ -1,5 +1,5 @@
@import '../../../../assets/scss/color';
.alert {
- color: $red-metro;
+ color: $red-default;
}
diff --git a/src/app/shared/enum/functionTypeModalOptions.enum.ts b/src/app/shared/enum/functionTypeModalOptions.enum.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2ec4677afa5704ded37b42bde9165524b78a5640
--- /dev/null
+++ b/src/app/shared/enum/functionTypeModalOptions.enum.ts
@@ -0,0 +1,9 @@
+export enum FunctionTypeModalOptions {
+ changeEmail = 1,
+ changePassword,
+ deleteAccount,
+ addUser,
+ removeUser,
+ editStructure,
+ removeStructure,
+}
diff --git a/src/app/shared/enum/regex.enum.ts b/src/app/shared/enum/regex.enum.ts
deleted file mode 100644
index 7a564960fa0e226ae58aa94f2f1e728b8d7b5289..0000000000000000000000000000000000000000
--- a/src/app/shared/enum/regex.enum.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export enum Regex {
- email = '[a-z0-9.-]+@[a-z0-9.-]+[.][a-z]{2,3}',
- textWithoutNumber = '[A-Za-zÀ-ÖØ-öø-ÿ-]{1,}',
- phone = '([0-9]{2} ){4}[0-9]{2}',
- website = '(www[.])[a-z0-9.-]*[.][a-z]{2,3}',
- linkedIn = '(linkedin.com/in/[a-z0-9A-Z.-]{1,})',
- facebook = '(facebook.com/[a-z0-9A-Z.-]{1,})',
- twitter = '(twitter.com/[a-z0-9A-Z.-]{1,})',
- instagram = '(instagram.com/[a-z0-9A-Z.-]{1,})',
- noNullNumber = '[1-9]{1}[0-9]*',
-}
diff --git a/src/app/shared/enum/typeStructure.enum.ts b/src/app/shared/enum/typeStructure.enum.ts
index e21c7cb40812286b8a490a5cad92bfbf74aad12c..e23ed6665387765f6a697d4c1773bf2ab2e743ef 100644
--- a/src/app/shared/enum/typeStructure.enum.ts
+++ b/src/app/shared/enum/typeStructure.enum.ts
@@ -1,19 +1,32 @@
export enum typeStructureEnum {
- associationCaritative = 'Association caritative',
- centreSocio = 'Centre socio-culturel',
- cyber = 'Cyberbase / Cybercentre',
- coworking = 'Espace de coworking',
fablab = 'Fablab',
+ // A supprimer ?
+
+ //A remplacer par Association ?
+ associationQuartier = 'Structure associative de quartier',
+ associationCaritative = 'Association caritative',
+
+ // En attente de suppression remplacer par CAF CARSAT, Pole Emploi et CCAS
grandOrganismePublic = 'Grand organisme public (CAF, CARSAT, Pôle emploi...)',
+
+ mdm = 'Maison de la métropole',
mairie = 'Mairie',
- mdm = 'Maison de la Métropole (MDM)',
- mediatheque = 'Médiathèque / Bibliothèque',
+ CAF = 'CAF',
+ CCAS = 'CCAS',
+ CARSAT = 'CARSAT',
+ poleEmploi = 'Pole Emploi',
+ mediatheque = 'Médiathèque/Bibliothèque',
+ prefecture = 'Préfecture',
+ bijPij = 'BIJ/PIJ',
+ logement = 'Logement',
+
+ association = 'Association',
+ centreSocio = 'Centre socio-culturel',
+ mjc = 'MJC / Cyberbase',
+ pimms = 'PIMMS',
+ sij = 'Structure information jeunesse (SIJ)',
missionsLocales = 'Missions locales',
- mjc = 'MJC',
- pimms = 'Pimms',
- ressourcerie = 'Ressourcerie (matériel moindre coût / recyclé)',
- associationQuartier = 'Structure associative de quartier',
+
formation = 'Structure de formation',
insertion = "Structure d'insertion",
- sij = 'Structure information jeunesse (SIJ)',
}
diff --git a/src/app/structure-join/structure-join.component.html b/src/app/structure-join/structure-join.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..4d51a54ef9e1d015418c59e6fb408c7e8d61eb93
--- /dev/null
+++ b/src/app/structure-join/structure-join.component.html
@@ -0,0 +1,6 @@
+<div fxLayout="column" class="content-container full-screen">
+ <div class="section-container" fxLayout="column" fxLayoutAlign="center center">
+ <h1>Validation de la demande de rattachement</h1>
+ <p>Merci de patienter...</p>
+ </div>
+</div>
diff --git a/src/app/structure-join/structure-join.component.spec.ts b/src/app/structure-join/structure-join.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ab4d922786d1468d788fa84a37c613e4ac723f5b
--- /dev/null
+++ b/src/app/structure-join/structure-join.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StructureJoinComponent } from './structure-join.component';
+
+describe('StructureJoinComponent', () => {
+ let component: StructureJoinComponent;
+ let fixture: ComponentFixture<StructureJoinComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ StructureJoinComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(StructureJoinComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/structure-join/structure-join.component.ts b/src/app/structure-join/structure-join.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..59d6ae04f9a18ac5af666aa681adebe1c1dc3538
--- /dev/null
+++ b/src/app/structure-join/structure-join.component.ts
@@ -0,0 +1,32 @@
+import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { StructureService } from '../services/structure.service';
+
+@Component({
+ selector: 'app-structure-join',
+ templateUrl: './structure-join.component.html',
+})
+export class StructureJoinComponent implements OnInit {
+ constructor(private router: Router, private route: ActivatedRoute, private structureService: StructureService) {}
+
+ ngOnInit(): void {
+ this.route.queryParamMap.subscribe((params) => {
+ if (
+ params.get('id') &&
+ params.get('userId') &&
+ (params.get('status') === 'true' || params.get('status') === 'false')
+ ) {
+ this.structureService
+ .validateStructureJoin(params.get('id'), params.get('userId'), params.get('status') === 'true' ? true : false)
+ .subscribe(
+ (res) => {
+ this.router.navigateByUrl('/home');
+ },
+ (err) => {
+ this.router.navigateByUrl('/home');
+ }
+ );
+ }
+ });
+ }
+}
diff --git a/src/app/structure-list/components/card/card.component.html b/src/app/structure-list/components/card/card.component.html
index 67e4642b409aa07aea82bee74bef42dcf057b571..1111644351601efa7e80b94c4aed177aa1b68b5d 100644
--- a/src/app/structure-list/components/card/card.component.html
+++ b/src/app/structure-list/components/card/card.component.html
@@ -13,16 +13,14 @@
</div>
</div>
</div>
- <span class="typeStructure">{{ structure.structureType }}</span>
+ <span class="typeStructure">{{ structure.getLabelTypeStructure() }}</span>
<div fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="7px" *ngIf="structure.hasEquipments()">
<app-svg-icon
- *ngFor="let equipement of structure.equipmentsAndServices"
+ *ngFor="let equipement of filterOnlyEquipments(structure.equipmentsAndServices)"
[type]="'ico'"
[iconColor]="'grey'"
[icon]="structure.getEquipmentsIcon(equipement)"
[title]="structure.getEquipmentsTitle(equipement)"
></app-svg-icon>
</div>
-
- <br />
</div>
diff --git a/src/app/structure-list/components/card/card.component.scss b/src/app/structure-list/components/card/card.component.scss
index ac49fb15474ee6980ea7122f7aec205bd8915175..687abf098d16804365bd2c3b0d1dd13940809f52 100644
--- a/src/app/structure-list/components/card/card.component.scss
+++ b/src/app/structure-list/components/card/card.component.scss
@@ -6,22 +6,26 @@
.structure {
padding: 12px 0 12px 0;
border-bottom: 1px dashed $grey !important;
+ min-height: 110px;
cursor: pointer;
+ @media #{$large-phone} {
+ height: unset;
+ }
.typeStructure {
color: $grey-3;
@include cn-regular-16;
+ font-style: italic;
}
.structure-name {
- padding-top: 13px;
color: $grey-1;
- @include cn-bold-20;
+ @include cn-bold-18;
padding-bottom: 5px;
width: 100%;
text-transform: capitalize;
}
.distanceStructure {
@include cn-regular-16;
- color: $grey-1;
+ color: $grey-3;
width: 50%;
}
&:last-child {
diff --git a/src/app/structure-list/components/card/card.component.ts b/src/app/structure-list/components/card/card.component.ts
index 58d7f395db867cbfdc9afd51f2a6ea77c455535e..ed8b3158f0c7c573c571d644a3c6eb1a1bbc3206 100644
--- a/src/app/structure-list/components/card/card.component.ts
+++ b/src/app/structure-list/components/card/card.component.ts
@@ -1,8 +1,6 @@
import { Component, Input, Output, OnInit, EventEmitter } from '@angular/core';
import { Structure } from '../../../models/structure.model';
import { GeojsonService } from '../../../services/geojson.service';
-import { typeStructureEnum } from '../../../shared/enum/typeStructure.enum';
-import { Equipment } from '../../enum/equipment.enum';
@Component({
selector: 'app-card',
@@ -35,4 +33,9 @@ export class CardComponent implements OnInit {
public cardHover(): void {
this.hover.emit(this.structure);
}
+ public filterOnlyEquipments(equipmentsAndServices: string[]): string[] {
+ return equipmentsAndServices.filter((eqpt) =>
+ ['ordinateurs', 'tablettes', 'bornesNumeriques', 'imprimantes', 'scanners', 'wifiEnAccesLibre'].includes(eqpt)
+ );
+ }
}
diff --git a/src/app/structure-list/components/modal-filter/modal-filter.component.scss b/src/app/structure-list/components/modal-filter/modal-filter.component.scss
index 247ab736150c4e47de06114c05e836feb60b3343..29ac093688d981418ace0315f11cc205bad380ab 100644
--- a/src/app/structure-list/components/modal-filter/modal-filter.component.scss
+++ b/src/app/structure-list/components/modal-filter/modal-filter.component.scss
@@ -37,7 +37,7 @@
border: none;
padding: 0;
}
- @include background-hash;
+ @include background-hash($grey-2);
border: 1px solid $grey-4;
::-webkit-scrollbar {
width: 16px;
@@ -57,7 +57,7 @@
.titleFilter {
display: none !important;
margin: 27px 25px 0px 25px;
- @include cn-bold-28;
+ @include cn-bold-26;
@media #{$large-phone} {
display: flex !important;
}
@@ -109,7 +109,7 @@
padding: 5px 0;
}
h4 {
- @include cn-bold-14;
+ @include cn-bold-16;
line-height: 17px;
text-transform: uppercase;
color: $grey-3;
diff --git a/src/app/structure-list/components/search/search.component.html b/src/app/structure-list/components/search/search.component.html
index 3c933c7123e8b59703b5f923afbe6162cf033648..5294bc01946780b19cc205741efe82869243ec0b 100644
--- a/src/app/structure-list/components/search/search.component.html
+++ b/src/app/structure-list/components/search/search.component.html
@@ -101,7 +101,7 @@
(change)="numericPassCheck($event, 'labelsQualifications')"
/>
<span class="customCheck"></span>
- <div class="label">Pass numérique</div>
+ <div class="label pass">Pass numérique</div>
</label>
</div>
</div>
diff --git a/src/app/structure-list/components/search/search.component.scss b/src/app/structure-list/components/search/search.component.scss
index 8883ab5d8f658b52dfb1f16f2b7945eadecdc4bb..657eeeffebacdf3e224e973e42a0044e3630e76e 100644
--- a/src/app/structure-list/components/search/search.component.scss
+++ b/src/app/structure-list/components/search/search.component.scss
@@ -9,7 +9,7 @@
}
.header {
.title {
- @include cn-bold-20;
+ @include cn-bold-26;
padding: 16px 0 16px 0;
display: flex;
align-items: center;
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 6d346e76d30888b570a5235d169d3f583e2de886..2e865d93f5335b273cd93956684749734cf5af3b 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
@@ -1,11 +1,3 @@
-<app-structureForm
- *ngIf="showForm"
- [idStructure]="structure._id"
- [isEditMode]="isEditMode"
- [profile]="currentProfile"
- (closeEvent)="updateStructure($event)"
- (clickOutside)="displayForm()"
-></app-structureForm>
<div class="structrue-details-container" *ngIf="structure && !isLoading">
<!-- Header info -->
<div fxLayout="row" fxLayoutAlign="end center">
@@ -13,15 +5,16 @@
</div>
<div fxLayout="row" class="structure-details-block" fxLayoutAlign="baseline baseline" fxLayoutGap="8px">
<div fxLayout="column" fxLayoutGap="10px" fxFlex="100%">
- <div fxLayout="column" fxLayoutAlign="space-between start">
+ <div fxLayout="column" class="no-margin" fxLayoutAlign="space-between start">
<h2 class="bold">{{ structure.structureName }}</h2>
</div>
<div fxLayout="row" fxLayoutAlign="space-between center">
<div class="typeInformationHeader" fxLayout="column">
- <h3>{{ structure.structureType }}</h3>
+ <h3>{{ structure.getLabelTypeStructure() }}</h3>
<div fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="7px" *ngIf="structure.hasEquipments()">
+ <div></div>
<app-svg-icon
- *ngFor="let equipement of structure.equipmentsAndServices"
+ *ngFor="let equipement of filterOnlyEquipments(structure.equipmentsAndServices)"
[type]="'ico'"
[iconColor]="'currentColor'"
[icon]="structure.getEquipmentsIcon(equipement)"
@@ -62,14 +55,60 @@
>{{ structure.website | url }}</a
>
</div>
+ <div *ngIf="structure.hasSocialNetwork()" fxLayout="row" fxLayoutAlign="none baseline" fxLayoutGap="13px">
+ <app-svg-icon [type]="'ico'" [icon]="'network'"></app-svg-icon>
+ <div fxLayout="row" fxLayoutAlign="none baseline" fxLayoutGap="8px">
+ <a
+ *ngIf="structure.facebook"
+ target="_blank"
+ class="custom-link"
+ rel="noopener noreferrer"
+ [href]="'http://' + structure.facebook"
+ >
+ <app-svg-icon [type]="'ico'" [icon]="'facebook'" [title]="Facebook"></app-svg-icon
+ ></a>
+ <a
+ *ngIf="structure.twitter"
+ target="_blank"
+ class="custom-link"
+ rel="noopener noreferrer"
+ [href]="'http://' + structure.twitter"
+ >
+ <app-svg-icon [type]="'ico'" [icon]="'twitter'" [title]="Twitter"></app-svg-icon
+ ></a>
+ <a
+ *ngIf="structure.instagram"
+ target="_blank"
+ class="custom-link"
+ rel="noopener noreferrer"
+ [href]="'http://' + structure.instagram"
+ >
+ <app-svg-icon [type]="'ico'" [icon]="'instagram'" [title]="Instagram"></app-svg-icon
+ ></a>
+ <a
+ *ngIf="structure.linkedin"
+ target="_blank"
+ class="custom-link"
+ rel="noopener noreferrer"
+ [href]="'http://' + structure.linkedin"
+ >
+ <app-svg-icon [type]="'ico'" [icon]="'linkedin'" [title]="Linkedin"></app-svg-icon
+ ></a>
+ </div>
+ </div>
<div *ngIf="structure.contactPhone" fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="13px">
<app-svg-icon [type]="'ico'" [icon]="'tel'"></app-svg-icon>
<p>{{ structure.contactPhone | phone }}</p>
</div>
</div>
<div fxLayout="column" fxFlex="50%">
- <div *ngIf="structure.contactMail" fxLayout="row" fxLayoutAlign="none center" fxLayoutGap="13px">
- <app-svg-icon [type]="'ico'" [icon]="'email'"></app-svg-icon>
+ <div
+ *ngIf="structure.contactMail && structure.contactMail !== 'unknown@unknown.com'"
+ fxLayout="row"
+ fxLayoutAlign="none center"
+ fxLayoutGap="13px"
+ >
+ <app-svg-icon [type]="'ico'" [iconClass]="'grey-1'" [icon]="'email'"></app-svg-icon>
<p>{{ structure.contactMail }}</p>
</div>
<div *ngIf="structure.hasPassNumeric()" fxLayout="row" fxLayoutAlign="none center" fxLayoutGap="13px">
@@ -83,19 +122,19 @@
</div>
</div>
<div fxLayout="row" fxLayoutAlign="center center" class="hide-on-print">
- <a *ngIf="!isClaimed && userIsLoggedIn()" (click)="toggleClaimModal()" class="primary" tabindex="0"
- >Revendiquer cette structure</a
- >
+ <a *ngIf="!isClaimed" (click)="handleClaim()" class="primary" tabindex="0">Revendiquer cette structure</a>
+ <a *ngIf="displayJoin()" (click)="handleJoin()" class="primary" tabindex="0">Rejoindre cette structure</a>
<!-- temporary remove edit -->
- <!-- <a
+ <a
*ngIf="profileService.isLinkedToStructure(structure._id) || profileService.isAdmin()"
- (click)="editStructure()"
+ routerLink="/create-structure"
+ [state]="{ data: structure }"
class="primary"
tabindex="0"
>
Modifier cette structure
- </a> -->
- <a *ngIf="profileService.isAdmin()" (click)="toggleDeleteModal()" class="primary" tabindex="0">
+ </a>
+ <a *ngIf="canDelete()" (click)="toggleDeleteModal()" class="primary" tabindex="0">
Supprimer cette structure
</a>
</div>
@@ -152,7 +191,7 @@
>
<p class="no-margin">{{ getAccessLabel(acces) }}</p>
</div>
- <p class="no-margin">Accessibles aux personnes à mobilité réduite</p>
+ <p *ngIf="structure.pmrAccess" class="no-margin">Accessibles aux personnes à mobilité réduite</p>
</div>
<div *ngFor="let public of structure.publics" fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="8px">
<p class="no-margin">{{ getPublicLabel(public) }}</p>
@@ -163,7 +202,7 @@
</div>
<!-- Démarches en ligne -->
<div
- *ngIf="structure.proceduresAccompaniment.length"
+ *ngIf="structure.proceduresAccompaniment.length || structure.otherDescription"
fxLayout="column"
class="structure-details-block"
fxLayoutAlign="baseline baseline"
@@ -179,10 +218,8 @@
<app-logo-card *ngIf="accompagnement != 'autres'" [name]="accompagnement"></app-logo-card>
</div>
</div>
- <p *ngIf="isOtherSection">
- Tout ce qui est en lien avec la création d'entreprise ex : consultation de sites de références (BPI, Je créé
- dans ma région, ...), inscription à des newsletters, aide pour trouver des sites (CMA, CCI, Urssaf,...),
- recherches d'infos sur moteur de recherche...
+ <p *ngIf="structure.otherDescription">
+ {{ structure.otherDescription }}
</p>
</div>
</div>
@@ -222,7 +259,7 @@
<h2>Équipements</h2>
</div>
<div fxLayout="column">
- <p *ngFor="let equipement of structure.equipmentsAndServices" class="no-margin-bottom">
+ <p *ngFor="let equipement of filterOnlyEquipments(structure.equipmentsAndServices)" class="no-margin-bottom">
{{ getEquipmentsLabel(equipement) }}
<span *ngIf="equipement == 'ordinateurs' && structure.nbComputers"> : {{ structure.nbComputers }}</span>
<span *ngIf="equipement == 'tablettes' && structure.nbTablets"> : {{ structure.nbTablets }}</span>
@@ -295,3 +332,11 @@
"
(closed)="claimStructure($event)"
></app-modal-confirmation>
+
+<app-modal-confirmation
+ [openned]="joinModalOpenned"
+ [content]="
+ 'Voulez-vous vraiment rejoindre cette structure ? Une demande sera envoyée aux membres pour validation'
+ "
+ (closed)="joinStructure($event)"
+></app-modal-confirmation>
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 d8ea58095fe9cb0a3d540a8df867ecea8a8cc989..19284a7cc69c13612863296b2667cefa0dfa7332 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
@@ -64,10 +64,10 @@ a {
h2 {
margin-top: 0;
margin-bottom: 5px;
- @include cn-regular-24;
+ @include cn-regular-26;
}
h3 {
- margin: 0;
+ margin: 0 0 8px 0;
@include cn-regular-16;
}
h4 {
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 4395765f1cabd340c90a5fb93a8614d77cbc6fed..9604623b998ad702839646fcd29bad779078a6e6 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
@@ -23,7 +23,6 @@ import { PublicCategorie } from '../../enum/public.enum';
export class StructureDetailsComponent implements OnInit {
@Input() public structure: Structure;
@Output() public closeDetails: EventEmitter<boolean> = new EventEmitter<boolean>();
- @Output() public updatedStructure: EventEmitter<Structure> = new EventEmitter<Structure>();
public accessModality = AccessModality;
public baseSkillssReferentiel: Category;
@@ -32,14 +31,12 @@ export class StructureDetailsComponent implements OnInit {
public accessRights: Module[];
public tclStopPoints: TclStopPoint[] = [];
public printMode = false;
- public isOtherSection = false;
- public showForm = false;
public isClaimed: boolean = null;
public isLoading: boolean = false;
- public isEditMode: boolean = false;
public currentProfile: User = null;
public deleteModalOpenned = false;
public claimModalOpenned = false;
+ public joinModalOpenned = false;
constructor(
private printService: PrintService,
@@ -84,7 +81,6 @@ export class StructureDetailsComponent implements OnInit {
const index = this.structure.proceduresAccompaniment.indexOf('autres');
if (index > -1) {
this.structure.proceduresAccompaniment.splice(index, 1);
- this.isOtherSection = true;
}
}
@@ -119,11 +115,6 @@ export class StructureDetailsComponent implements OnInit {
this.printService.printDocument('structure', this.structure);
}
- public editStructure(): void {
- this.isEditMode = true;
- this.displayForm();
- }
-
public toggleDeleteModal(): void {
this.deleteModalOpenned = !this.deleteModalOpenned;
}
@@ -132,6 +123,26 @@ export class StructureDetailsComponent implements OnInit {
this.claimModalOpenned = !this.claimModalOpenned;
}
+ public toggleJoinModal(): void {
+ this.joinModalOpenned = !this.joinModalOpenned;
+ }
+
+ public handleClaim(): void {
+ if (this.userIsLoggedIn()) {
+ this.toggleClaimModal();
+ } else {
+ this.router.navigate(['create-structure'], { state: { newUser: this.structure } });
+ }
+ }
+
+ public handleJoin(): void {
+ if (this.userIsLoggedIn()) {
+ this.toggleJoinModal();
+ } else {
+ this.router.navigate(['create-structure'], { state: { newUser: this.structure, isJoin: true } });
+ }
+ }
+
public deleteStructure(shouldDelete: boolean): void {
this.toggleDeleteModal();
if (shouldDelete) {
@@ -150,23 +161,25 @@ export class StructureDetailsComponent implements OnInit {
public claimStructure(shouldClaim: boolean): void {
this.toggleClaimModal();
if (shouldClaim) {
- this.profileService.getProfile().then((user: User) => {
- this.structureService.claimStructureWithAccount(this.structure._id, user).subscribe(() => {
- this.isClaimed = true;
+ this.structureService
+ .claimStructureWithAccount(this.structure._id, this.authService.userValue.username)
+ .subscribe(() => {
+ this.profileService.getProfile().then((user: User) => {
+ this.isClaimed = true;
+ });
});
- });
}
}
- // Show/hide form structure
- public displayForm(): void {
- this.showForm = !this.showForm;
- }
- public updateStructure(s: Structure): void {
- this.structure = new Structure({ ...this.structure, ...s });
- this.updatedStructure.emit(this.structure);
- this.displayForm();
- this.ngOnInit();
+ public joinStructure(shouldClaim: boolean): void {
+ this.toggleJoinModal();
+ if (shouldClaim) {
+ this.structureService.joinStructure(this.structure._id, this.authService.userValue.username).subscribe((res) => {
+ this.profileService.getProfile().then((user: User) => {
+ this.isClaimed = true;
+ });
+ });
+ }
}
public getAccessLabel(accessModality: AccessModality): string {
@@ -194,6 +207,8 @@ export class StructureDetailsComponent implements OnInit {
return 'Séniors (+ de 65 ans)';
case PublicCategorie.all:
return 'Tout public';
+ case PublicCategorie.under16Years:
+ return 'Moins de 16 ans';
default:
return null;
}
@@ -222,4 +237,23 @@ export class StructureDetailsComponent implements OnInit {
this.tclStopPoints = res;
});
}
+ public canDelete(): boolean {
+ if (this.profileService.isAdmin()) {
+ return true;
+ }
+ return false;
+ }
+ public filterOnlyEquipments(equipmentsAndServices: string[]): string[] {
+ return equipmentsAndServices.filter((eqpt) =>
+ ['ordinateurs', 'tablettes', 'bornesNumeriques', 'imprimantes', 'scanners', 'wifiEnAccesLibre'].includes(eqpt)
+ );
+ }
+
+ public displayJoin(): boolean {
+ return (
+ !(this.profileService.isLinkedToStructure(this.structure._id) || this.profileService.isAdmin()) &&
+ this.isClaimed &&
+ !this.profileService.isPendingLinkedToStructure(this.structure._id)
+ );
+ }
}
diff --git a/src/app/structure-list/enum/public.enum.ts b/src/app/structure-list/enum/public.enum.ts
index 1f837130376982ac9fb26266d8218d0aa63dfa66..27256129767d536ed0b9b6974b408fbcedfae7e1 100644
--- a/src/app/structure-list/enum/public.enum.ts
+++ b/src/app/structure-list/enum/public.enum.ts
@@ -1,4 +1,5 @@
export enum PublicCategorie {
+ under16Years = 'moinsDe16Ans',
young = 'jeunes1625Ans',
adult = 'adultes',
elderly = 'seniorsPlusDe65Ans',
diff --git a/src/app/user-verification/user-verification.component.html b/src/app/user-verification/user-verification.component.html
index 86db3d2c5527e9ce6977273a8f27c65c4f55a276..628bb8efe98b0575616bac18c89923a28424e1f0 100644
--- a/src/app/user-verification/user-verification.component.html
+++ b/src/app/user-verification/user-verification.component.html
@@ -11,55 +11,34 @@
Votre compte a bien été créé.
</h3>
</div>
-
- <div *ngIf="structure" class="structureInfoBlock" fxLayout="row" fxLayoutAlign=" center">
- <div class="structureInfoContent" fxLayout="column">
- {{ structure.structureName }}
- <span>{{ structure.structureType }}</span>
+ <div *ngIf="structure" class="structureCard">
+ <div class="structureInfo" fxLayout="column" fxLayoutGap="14px">
+ <div fxLayout="row" fxLayoutAlign="space-between start" fxLayoutGap="20px">
+ <a class="structureName" routerLink="/home" [state]="{ data: structure }">{{ structure.structureName }}</a>
+ </div>
</div>
- <div class="validateSvg">
- <svg class="validate" aria-hidden="true">
- <use [attr.xlink:href]="'assets/form/sprite.svg#checkVector'"></use>
- </svg>
- </div>
- </div>
- <div class="btnSection" fxLayout="row" fxLayoutAlign="space-around center">
- <button *ngIf="structure" class="btn" routerLink="/home" [state]="{ data: structure }">Voir ma structure</button>
- <button class="btn tmp-form-link" routerLink="/home">
- <a
- class="typeform-share button"
- href="https://form.typeform.com/to/vfbLqfKe?typeform-medium=embed-snippet"
- data-mode="popup"
- data-size="100"
- target="_blank"
- rel="noopener noreferrer"
- >Donnez nous votre avis !
- </a>
- </button>
</div>
</div>
<p *ngIf="verificationIssue">
Une erreur est survenue lors de la validation de votre email... Veuillez envoyer un mail au support.
</p>
- <script>
- (function () {
- var qs,
- js,
- q,
- s,
- d = document,
- gi = d.getElementById,
- ce = d.createElement,
- gt = d.getElementsByTagName,
- id = 'typef_orm_share',
- b = 'https://embed.typeform.com/';
- if (!gi.call(d, id)) {
- js = ce.call(d, 'script');
- js.id = id;
- js.src = b + 'embed.js';
- q = gt.call(d, 'script')[0];
- q.parentNode.insertBefore(js, q);
- }
- })();
- </script>
+ <!-- TypeForm -->
+ <div *ngIf="!verificationIssue">
+ <iframe
+ *ngIf="structure"
+ class="typeform-widget custom-form"
+ title="typeform"
+ src="https://form.typeform.com/to/m7DV3CdW?typeform-medium=embed-snippet"
+ ></iframe>
+ <div
+ *ngIf="!structure"
+ class="typeform-widget custom-form"
+ data-url="https://form.typeform.com/to/ASJH3B7Z?typeform-medium=embed-snippet"
+ ></div>
+ </div>
+ <div class="btnSection" fxLayout="row" fxLayoutAlign="space-around center">
+ <button *ngIf="structure && verificationSuccess" class="btn" routerLink="/home" [state]="{ data: structure }">
+ Voir ma structure
+ </button>
+ </div>
</div>
diff --git a/src/app/user-verification/user-verification.component.scss b/src/app/user-verification/user-verification.component.scss
index e48bfc961dcf1783535832ad439a87fd2006d116..8fb73ba431f51da2407dd97c5b93067df7e95554 100644
--- a/src/app/user-verification/user-verification.component.scss
+++ b/src/app/user-verification/user-verification.component.scss
@@ -7,28 +7,7 @@
padding: 18px;
margin: auto;
}
-.structureInfoBlock {
- background: $green-1;
- color: $white;
- padding: 16px;
- border-radius: 6px;
- @include cn-bold-18;
- .structureInfoContent {
- width: 100%;
- }
- span {
- font-style: italic;
- @include cn-regular-14;
- }
- .validateSvg {
- stroke: $white;
- text-align: right;
- svg {
- height: 14px;
- width: 14px;
- }
- }
-}
+
.btn {
background: $secondary-color;
border-radius: 4px;
@@ -57,3 +36,19 @@
color: $white !important;
}
}
+
+.custom-form {
+ width: 100%;
+ height: 480px;
+ border: none;
+}
+
+// Override button style to be the same as typeform button
+button {
+ margin: 0px;
+ max-width: 100%;
+ font-size: 24px !important;
+ line-height: 32px !important;
+ min-height: 48px;
+ width: 245px !important;
+}
diff --git a/src/app/utils/CustomRegExp.ts b/src/app/utils/CustomRegExp.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a4c02ad0a9a8bc495115182f25daab47e7ee213e
--- /dev/null
+++ b/src/app/utils/CustomRegExp.ts
@@ -0,0 +1,25 @@
+export class CustomRegExp {
+ /**
+ * Validate a password (at least 8 characters, 1 uppercase letter, 1 lowercase letter, 1 number, and 1 special character)
+ */
+ public static readonly PASSWORD: RegExp = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/; //NOSONAR
+ /**
+ * Validate an email
+ */
+ public static readonly EMAIL: RegExp = /^[a-z0-9.-]+@[a-z0-9.-]+[.][a-z]{2,3}/; //NOSONAR
+ public static readonly TEXT_WITHOUT_NUMBER: RegExp = /^[A-Za-zÀ-ÖØ-öø-ÿ- ]{1,}$/; //NOSONAR
+ /**
+ * Validate a password (at least 8 characters, 1 uppercase letter, 1 lowercase letter, 1 number, and 1 special character)
+ */
+ public static readonly PHONE: RegExp = /^(?:(?:\+|00)|0)\s*[1-9](?:[\s.-]*\d{2}){4}$/; //NOSONAR
+ public static readonly WEBSITE: RegExp = /^(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/; //NOSONAR
+ public static readonly LINKEDIN: string = '(linkedin.com/in/.{1,})';
+ public static readonly FACEBOOK: string = '(facebook.com/.{1,})';
+ public static readonly TWITTER: string = '(twitter.com/.{1,})';
+ public static readonly INSTAGRAM: string = '(instagram.com/.{1,})';
+ public static readonly NO_NULL_NUMBER: string = '[1-9]{1}[0-9]*?';
+ /**
+ * Validate a location request in search bar
+ */
+ public static readonly LOCATION: RegExp = /^\d+\s[A-z]+\s[A-z]+/g; //NOSONAR
+}
diff --git a/src/assets/form/sprite.svg b/src/assets/form/sprite.svg
index 4b583444aee071e61035d2d63fdc558c69f37ed0..1008b4e01af58916b33decdb18da3caa89c2a926 100644
--- a/src/assets/form/sprite.svg
+++ b/src/assets/form/sprite.svg
@@ -302,13 +302,15 @@
<g opacity="0.35" filter="url(#filter0_f)">
<rect x="74.145" y="49.134" width="94.7677" height="60.8093" transform="rotate(-19.503 74.145 49.134)" fill="#348899"/>
</g>
-<path d="M72.012 33.98C69.9322 34.3896 68.691 36.5394 69.3763 38.5454L95.4069 114.744C96.0855 116.73 98.3483 117.677 100.239 116.765L182.813 76.9455C184.422 76.1698 185.188 74.3077 184.592 72.6244L165.466 18.6229C164.886 16.9861 163.194 16.0218 161.49 16.3573L72.012 33.98Z" fill="#C9ECF3" stroke="#83B6C1" stroke-width="3"/>
-<path d="M72.2571 38.0604C70.0496 37.0427 70.4459 33.7921 72.8333 33.3347L161.294 16.3859C163.287 16.0041 164.88 18.0294 164.04 19.8761M72.2571 38.0604L164.04 19.8761M72.2571 38.0604L132.625 65.8898C137.408 68.0943 143.071 65.9885 145.25 61.195L164.04 19.8761M72.2571 38.0604L164.04 19.8761" fill="#EAF8FB" stroke="#83B6C1" stroke-width="3"/>
+<path d="M70.7961 38.0606C70.4045 36.9143 71.1137 35.6858 72.3022 35.4517L161.781 17.8291C162.754 17.6374 163.721 18.1884 164.052 19.1237L183.178 73.1252C183.519 74.0871 183.081 75.1512 182.162 75.5944L99.588 115.414C98.5074 115.935 97.2145 115.394 96.8267 114.259L70.7961 38.0606Z" fill="#C9ECF3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M71.7226 32.5083L161.201 14.8857C163.635 14.4063 166.052 15.7839 166.88 18.1221L186.006 72.1237C186.858 74.5283 185.763 77.1886 183.465 78.2967L100.891 118.116C98.1898 119.419 94.9573 118.067 93.9878 115.229L67.9572 39.0304C66.9782 36.1647 68.7513 33.0935 71.7226 32.5083ZM72.3023 35.4517C71.1138 35.6858 70.4045 36.9143 70.7961 38.0606L96.8267 114.259C97.2145 115.394 98.5075 115.935 99.588 115.414L182.162 75.5944C183.081 75.1512 183.519 74.0871 183.178 73.1252L164.052 19.1237C163.721 18.1884 162.754 17.6374 161.781 17.8291L72.3023 35.4517Z" fill="#83B6C1"/>
+<path d="M72.8854 36.6982C72.0024 36.2911 72.1609 34.9909 73.1159 34.8079L161.577 17.8591C162.374 17.7064 163.011 18.5165 162.675 19.2552L143.885 60.5741C142.05 64.6107 137.281 66.384 133.254 64.5276L72.8854 36.6982Z" fill="#EAF8FB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M72.8854 36.6982C72.0024 36.2911 72.1609 34.9909 73.1159 34.8079L161.577 17.8591C162.374 17.7064 163.011 18.5165 162.675 19.2552L143.885 60.5741C142.05 64.6107 137.281 66.384 133.254 64.5276L72.8854 36.6982ZM72.5513 31.8615L161.012 14.9127C164.2 14.3019 166.75 17.5423 165.406 20.4971L146.616 61.816C144.092 67.3663 137.535 69.8047 131.998 67.252L71.6294 39.4227C68.0974 37.7944 68.7316 32.5934 72.5513 31.8615Z" fill="#83B6C1"/>
<path d="M63.4997 63L2.12107 78.1767" stroke="#DC2A59" stroke-width="3" stroke-linecap="round"/>
<path d="M77.0343 97L36.1785 116.5" stroke="#DC2A59" stroke-width="3" stroke-linecap="round"/>
<path d="M70.0344 80L48.5 88" stroke="#DC2A59" stroke-width="3" stroke-linecap="round"/>
<defs>
-<filter id="filter0_f" x="62.145" y="5.49524" width="133.632" height="112.959" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<filter id="filter0_f" x="62.145" y="5.49527" width="133.632" height="112.959" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="6" result="effect1_foregroundBlur"/>
@@ -324,4 +326,21 @@
<path d="M16 6L8 12.5L16 19" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
</symbol>
-</svg>
\ No newline at end of file
+<symbol id="eyePassword" viewBox="0 0 22 16" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.99519 3.00001C8.83101 2.37183 9.87111 2 11 2C13.7667 2 16 4.23333 16 7C16 9.76667 13.7667 12 11 12C8.23333 12 6 9.76667 6 7C6 6.5747 6.05278 6.162 6.15215 5.76809C6.45257 6.49223 7.16566 7 8 7C9.10667 7 10 6.10667 10 5C10 3.89333 9.10667 3 8 3C7.9984 3 7.9968 3 7.99519 3.00001Z" stroke="none"/>
+<path d="M1 8C2.57273 3.90267 6.45455 1 11 1C15.5455 1 19.4273 3.90267 21 8" fill="none" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M1 8C2.57273 12.0973 6.45455 15 11 15C15.5455 15 19.4273 12.0973 21 8" fill="none" stroke-width="1.5" stroke-linecap="round"/>
+</symbol>
+
+<symbol id="notValidate" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="13" cy="13" r="13" fill="#DA6C2E"/>
+<path d="M13.25 14.5L13.25 6.00001" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.25 20.6066L13.25 20" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</symbol>
+
+<symbol id="validate" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="13" cy="13" r="13" fill="#47C562"/>
+<path d="M8 13.8182L11.8889 17L18 10" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</symbol>
+
+</svg>
diff --git a/src/assets/ico/more_vert_24px.svg b/src/assets/ico/more_vert_24px.svg
new file mode 100644
index 0000000000000000000000000000000000000000..4e88a75153b9bc08d097be036e494df03d3dc87d
--- /dev/null
+++ b/src/assets/ico/more_vert_24px.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 7.66675C12.1 7.66675 13 6.76675 13 5.66675C13 4.56675 12.1 3.66675 11 3.66675C9.9 3.66675 9 4.56675 9 5.66675C9 6.76675 9.9 7.66675 11 7.66675ZM11 9.66675C9.9 9.66675 9 10.5667 9 11.6667C9 12.7667 9.9 13.6667 11 13.6667C12.1 13.6667 13 12.7667 13 11.6667C13 10.5667 12.1 9.66675 11 9.66675ZM9 17.6667C9 16.5667 9.9 15.6667 11 15.6667C12.1 15.6667 13 16.5667 13 17.6667C13 18.7667 12.1 19.6667 11 19.6667C9.9 19.6667 9 18.7667 9 17.6667Z" fill="#348899"/>
+</svg>
diff --git a/src/assets/ico/sprite.svg b/src/assets/ico/sprite.svg
index 7242edba1b355c50c202b50750613300327db6bf..748235c0a0461254caeaa04b05c826036ee2ebb0 100644
--- a/src/assets/ico/sprite.svg
+++ b/src/assets/ico/sprite.svg
@@ -1,7 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="map-marker" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg"><path d="M19.72 43.73l.706.66.683-.683c2.038-2.04 4.04-3.864 5.934-5.588l.179-.163c6.32-5.755 11.624-10.585 11.624-18.493C38.846 9.267 30.59 1 20.402 1 10.214 1 1.957 9.267 1.957 19.463c0 4.152 1.08 7.233 3.179 10.152 2.04 2.84 5.05 5.523 8.833 8.899l.078.07c1.717 1.531 3.607 3.217 5.672 5.147zm6.508-24.267a5.83 5.83 0 01-5.826 5.833 5.83 5.83 0 01-5.826-5.833 5.83 5.83 0 015.826-5.833 5.83 5.83 0 015.826 5.833z"/></symbol>
-<symbol id="map-marker-locate" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg"><path d="M19.72 43.73l.706.66.683-.683c2.038-2.04 4.04-3.864 5.934-5.588l.179-.163c6.32-5.755 11.624-10.585 11.624-18.493C38.846 9.267 30.59 1 20.402 1 10.214 1 1.957 9.267 1.957 19.463c0 4.152 1.08 7.233 3.179 10.152 2.04 2.84 5.05 5.523 8.833 8.899l.078.07c1.717 1.531 3.607 3.217 5.672 5.147zm6.508-24.267a5.83 5.83 0 01-5.826 5.833 5.83 5.83 0 01-5.826-5.833 5.83 5.83 0 015.826-5.833 5.83 5.83 0 015.826 5.833z" fill="#117083" stroke="#fff" stroke-width="2"/></symbol>
-
<symbol id="adress" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11 2C12.6055 2.0145 14.1397 2.68885 15.265 3.87463C16.3902 5.06042 17.0142 6.66048 16.9998 8.32269C16.9998 11.8208 12.1242 19 11 19C9.87584 19 5.00025 11.8208 5.00025 8.32269C4.98578 6.66048 5.60982 5.06042 6.73504 3.87463C7.86026 2.68885 9.39446 2.0145 11 2ZM10.9999 5.55695C12.0865 5.53677 13.0768 6.19906 13.5059 7.23274C13.9349 8.26643 13.7173 9.4661 12.9553 10.2683C12.1933 11.0704 11.0384 11.3157 10.0329 10.8888C9.02744 10.4619 8.37129 9.44779 8.37266 8.32272C8.36215 6.80858 9.53743 5.57133 10.9999 5.55695Z" fill="#333333"/>
</symbol>
@@ -24,9 +22,9 @@
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 4C4 3.44771 4.44772 3 5 3H14C14.5523 3 15 3.44772 15 4V6H9C8.44772 6 8 6.44772 8 7V18H5C4.44772 18 4 17.5523 4 17V4ZM10 7C9.44772 7 9 7.44772 9 8V20C9 20.5523 9.44771 21 10 21H19C19.5523 21 20 20.5523 20 20V8C20 7.44772 19.5523 7 19 7H10Z" fill="#32383D"/>
</symbol>
-<symbol id="cancel" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M16.9498 5.36385C17.3403 4.97332 17.9734 4.97332 18.364 5.36385C18.7545 5.75437 18.7545 6.38753 18.364 6.77806L7.05026 18.0918C6.65973 18.4823 6.02657 18.4823 5.63605 18.0918C5.24552 17.7012 5.24552 17.0681 5.63605 16.6776L16.9498 5.36385Z" fill="black"/>
-<path d="M18.364 16.6777C18.7545 17.0682 18.7545 17.7013 18.364 18.0919C17.9734 18.4824 17.3403 18.4824 16.9498 18.0919L5.63605 6.77816C5.24552 6.38764 5.24552 5.75447 5.63605 5.36395C6.02657 4.97343 6.65974 4.97343 7.05026 5.36395L18.364 16.6777Z" fill="black"/>
+<symbol id="cancel" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.9498 5.36385C17.3403 4.97332 17.9734 4.97332 18.364 5.36385C18.7545 5.75437 18.7545 6.38753 18.364 6.77806L7.05026 18.0918C6.65973 18.4823 6.02657 18.4823 5.63605 18.0918C5.24552 17.7012 5.24552 17.0681 5.63605 16.6776L16.9498 5.36385Z" stroke="none"/>
+<path d="M18.364 16.6777C18.7545 17.0682 18.7545 17.7013 18.364 18.0919C17.9734 18.4824 17.3403 18.4824 16.9498 18.0919L5.63605 6.77816C5.24552 6.38764 5.24552 5.75447 5.63605 5.36395C6.02657 4.97343 6.65974 4.97343 7.05026 5.36395L18.364 16.6777Z" stroke="none"/>
</symbol>
<symbol id="nok" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -40,10 +38,17 @@
<path d="M11 16.8182L14.8889 20L21 13" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
</symbol>
-<symbol id="add" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 5C11.4477 5 11 5.44772 11 6V11H6C5.44772 11 5 11.4477 5 12C5 12.5523 5.44772 13 6 13H11V18C11 18.5523 11.4477 19 12 19C12.5523 19 13 18.5523 13 18V13H18C18.5523 13 19 12.5523 19 12C19 11.4477 18.5523 11 18 11H13V6C13 5.44772 12.5523 5 12 5Z" fill="#333333"/>
+<symbol id="add" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 5C11.4477 5 11 5.44772 11 6V11H6C5.44772 11 5 11.4477 5 12C5 12.5523 5.44772 13 6 13H11V18C11 18.5523 11.4477 19 12 19C12.5523 19 13 18.5523 13 18V13H18C18.5523 13 19 12.5523 19 12C19 11.4477 18.5523 11 18 11H13V6C13 5.44772 12.5523 5 12 5Z" stroke="none"/>
+</symbol>
+
+<symbol id="remove" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.97363 12.9062C6.34733 12.9062 5.89876 12.7877 5.62793 12.5507C5.36556 12.3053 5.23438 11.9879 5.23438 11.5986C5.23438 11.2092 5.36556 10.8961 5.62793 10.6591C5.89876 10.4137 6.34733 10.2952 6.97363 10.3036C14.44 10.3036 10.571 10.3036 17.0156 10.3036C17.6419 10.3036 18.0863 10.4221 18.3486 10.6591C18.6195 10.8961 18.7549 11.2092 18.7549 11.5986C18.7549 11.9879 18.6195 12.3053 18.3486 12.5507C18.0863 12.7877 17.6419 12.9062 17.0156 12.9062C9.63742 12.9062 13.3678 12.9062 6.97363 12.9062Z" stroke="none"/>
</symbol>
+<symbol id="edit" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.3745 2.62547C17.72 2.28003 18.3461 2.34613 18.7731 2.7731L20.3193 4.3193C20.7463 4.74627 20.8124 5.37243 20.4669 5.71787L18.6115 7.57331L15.5191 4.48091L17.3745 2.62547ZM17.993 8.1918L14.9006 5.0994L5.62344 14.3766L8.71584 17.469L17.993 8.1918ZM8.09736 18.0874L5.00496 14.995L4.74469 15.2553C4.60266 15.3973 4.52461 15.5949 4.52337 15.8155L3.77535 18.7134C3.7736 19.0246 4.0678 19.3188 4.37904 19.3171L7.27695 18.569C7.49751 18.5678 7.69506 18.4897 7.83709 18.3477L8.09736 18.0874Z" stroke="none"/>
+</symbol>
<symbol id="liste" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="9" width="16" height="2" rx="1" />
@@ -73,7 +78,12 @@
</symbol>
<symbol id ="email" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 4H19.5C20.3284 4 21 4.67157 21 5.5V16.0714C21 16.8998 20.3284 17.5714 19.5 17.5714H3.5C2.67157 17.5714 2 16.8998 2 16.0714V5.5C2 4.67157 2.67157 4 3.5 4ZM2.91716 6.02444C3.04832 5.78143 3.35163 5.69075 3.59464 5.8219L11.2431 9.94966C11.5474 10.1138 11.9148 10.1093 12.2149 9.93753L19.3945 5.82797C19.6341 5.69079 19.9396 5.77387 20.0768 6.01353C20.214 6.25318 20.1309 6.55867 19.8913 6.69585L12.7116 10.8054C12.1116 11.1489 11.3767 11.1581 10.7682 10.8297L3.11971 6.70192C2.8767 6.57077 2.78602 6.26745 2.91716 6.02444Z" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 4H19.5C20.3284 4 21 4.67157 21 5.5V16.0714C21 16.8998 20.3284 17.5714 19.5 17.5714H3.5C2.67157 17.5714 2 16.8998 2 16.0714V5.5C2 4.67157 2.67157 4 3.5 4ZM2.91716 6.02444C3.04832 5.78143 3.35163 5.69075 3.59464 5.8219L11.2431 9.94966C11.5474 10.1138 11.9148 10.1093 12.2149 9.93753L19.3945 5.82797C19.6341 5.69079 19.9396 5.77387 20.0768 6.01353C20.214 6.25318 20.1309 6.55867 19.8913 6.69585L12.7116 10.8054C12.1116 11.1489 11.3767 11.1581 10.7682 10.8297L3.11971 6.70192C2.8767 6.57077 2.78602 6.26745 2.91716 6.02444Z" stroke="none"/>
+</symbol>
+
+<symbol id="password" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.89603 10C4.40117 10 4.00001 10.4012 4.00001 10.896L4 18.2042C4 18.699 4.40116 19.1002 4.89602 19.1002H17.1043C17.5992 19.1002 18.0003 18.699 18.0003 18.2042L18.0003 10.896C18.0003 10.4012 17.5992 10 17.1043 10H4.89603ZM12.3442 13.4441C12.3442 13.9365 12.0794 14.367 11.6845 14.6011L12.3442 17.0002H9.65611L10.3158 14.6011C9.92088 14.367 9.65611 13.9365 9.65611 13.4441C9.65611 12.7018 10.2579 12.1 11.0001 12.1C11.7424 12.1 12.3442 12.7018 12.3442 13.4441Z" stroke="none"/>
+<path d="M13.8017 10.0002V7.90011C13.8017 6.35368 12.5481 5.10005 11.0017 5.10005C9.45524 5.10005 8.20161 6.35368 8.20161 7.90011V10.0002H6.10156V7.90011C6.10156 5.19386 8.29542 3 11.0017 3C13.7079 3 15.9018 5.19385 15.9018 7.90011V10.0002H13.8017Z" stroke="none"/>
</symbol>
<symbol id="pass" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
@@ -92,6 +102,55 @@
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 5C6 4.44772 6.44772 4 7 4H13V6C13 6.55228 13.4477 7 14 7H16V17C16 17.5523 15.5523 18 15 18H7C6.44772 18 6 17.5523 6 17V5ZM8.5 8C8.22386 8 8 8.22386 8 8.5C8 8.77614 8.22386 9 8.5 9H11.5C11.7761 9 12 8.77614 12 8.5C12 8.22386 11.7761 8 11.5 8H8.5ZM8 11.5C8 11.2239 8.22386 11 8.5 11H13.5C13.7761 11 14 11.2239 14 11.5C14 11.7761 13.7761 12 13.5 12H8.5C8.22386 12 8 11.7761 8 11.5ZM8.5 14C8.22386 14 8 14.2239 8 14.5C8 14.7761 8.22386 15 8.5 15H13.5C13.7761 15 14 14.7761 14 14.5C14 14.2239 13.7761 14 13.5 14H8.5Z" stroke="none"/>
</symbol>
+<symbol id="network" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<circle cx="11" cy="11" r="2.5" stroke="#333333"/>
+<circle cx="11" cy="3.43506" r="1.5" stroke="#333333"/>
+<path d="M11 4.93506V8.93506" stroke="#333333"/>
+<circle r="1.5" transform="matrix(1 0 0 -1 11 18.4351)" stroke="#333333"/>
+<path d="M11 16.9351V12.9351" stroke="#333333"/>
+<circle cx="18.5" cy="10.9351" r="1.5" transform="rotate(90 18.5 10.9351)" stroke="#333333"/>
+<path d="M17 10.9351L13 10.9351" stroke="#333333"/>
+<circle r="1.5" transform="matrix(4.37114e-08 1 1 -4.37114e-08 3.5 10.9351)" stroke="#333333"/>
+<path d="M5 10.9351L9 10.9351" stroke="#333333"/>
+<circle cx="16.3047" cy="5.63171" r="1.5" transform="rotate(45 16.3047 5.63171)" stroke="#333333"/>
+<path d="M15.2422 6.69238L12.4138 9.52081" stroke="#333333"/>
+<circle r="1.5" transform="matrix(0.707107 0.707107 0.707107 -0.707107 5.69561 16.2383)" stroke="#333333"/>
+<path d="M6.75781 15.1777L9.58624 12.3492" stroke="#333333"/>
+<circle cx="16.3044" cy="16.2383" r="1.5" transform="rotate(135 16.3044 16.2383)" stroke="#333333"/>
+<path d="M15.2422 15.1777L12.4138 12.3492" stroke="#333333"/>
+<circle r="1.5" transform="matrix(-0.707107 0.707107 0.707107 0.707107 5.69531 5.63171)" stroke="#333333"/>
+<path d="M6.75781 6.69238L9.58624 9.52081" stroke="#333333"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="22" height="22" fill="white"/>
+</clipPath>
+</defs>
+</symbol>
+
+<symbol id="facebook" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="29" height="29" rx="3.5" fill="white" stroke="#BDBDBD"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.0938 24.4152H16.9241V16.9509H19.7723L20.3125 13.4152H16.9241V11.1071C16.9241 9.8631 17.5789 9.24107 18.8884 9.24107H20.4107V6.24554C19.494 6.08185 18.5938 6 17.7098 6C16.7604 6 15.942 6.18006 15.2545 6.54018C14.5997 6.9003 14.0759 7.44048 13.683 8.16071C13.2902 8.88095 13.0938 9.73214 13.0938 10.7143V13.4152H10V16.9509H13.0938V24.4152Z" fill="#333333"/>
+</symbol>
+
+<symbol id="twitter" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="29" height="29" rx="3.5" fill="white" stroke="#BDBDBD"/>
+<path d="M22.7143 10.5223C22.256 11.1771 21.7158 11.7336 21.0938 12.192V12.5848C21.0938 14.058 20.75 15.4821 20.0625 16.8571C19.4077 18.2321 18.3601 19.3943 16.9196 20.3438C15.4792 21.2932 13.8259 21.7679 11.9598 21.7679C10.1592 21.7679 8.50595 21.2768 7 20.2946C7.22917 20.3274 7.49107 20.3438 7.78571 20.3438C9.25893 20.3438 10.5848 19.8854 11.7634 18.9688C11.0759 18.9688 10.4539 18.7723 9.89732 18.3795C9.34077 17.9539 8.96429 17.4137 8.76786 16.7589C9.29167 16.8244 9.78274 16.808 10.2411 16.7098C9.4881 16.5461 8.86607 16.1696 8.375 15.5804C7.88393 14.9911 7.63839 14.3036 7.63839 13.5179V13.4688C8.09673 13.7307 8.5878 13.878 9.11161 13.9107C8.8497 13.7143 8.60417 13.4688 8.375 13.1741C8.14583 12.8795 7.96577 12.5685 7.83482 12.2411C7.70387 11.881 7.63839 11.5372 7.63839 11.2098C7.63839 10.6205 7.78571 10.0804 8.08036 9.58929C9.81548 11.6845 12.0417 12.814 14.7589 12.9777C14.5298 11.8973 14.7426 10.9643 15.3973 10.1786C16.0521 9.39286 16.8869 9 17.9018 9C18.8185 9 19.5878 9.34375 20.2098 10.0312C20.9301 9.9003 21.6176 9.63839 22.2723 9.24554C22.0104 9.99851 21.5357 10.5878 20.8482 11.0134C21.4702 10.9479 22.0923 10.7842 22.7143 10.5223Z" fill="#333333"/>
+</symbol>
+
+<symbol id="instagram" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="29" height="29" rx="3.5" fill="white" stroke="#BDBDBD"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.9511 10.8691C13.8152 10.8691 12.845 11.2714 12.0404 12.0759C11.2595 12.8568 10.8691 13.8152 10.8691 14.9511C10.8691 16.087 11.2595 17.0572 12.0404 17.8618C12.845 18.6427 13.8152 19.0331 14.9511 19.0331C16.087 19.0331 17.0453 18.6427 17.8263 17.8618C18.6308 17.0572 19.0331 16.087 19.0331 14.9511C19.0331 13.8152 18.6308 12.8568 17.8263 12.0759C17.0453 11.2714 16.087 10.8691 14.9511 10.8691ZM14.9511 17.6133C14.2175 17.6133 13.5904 17.353 13.0698 16.8324C12.5492 16.3118 12.2889 15.6847 12.2889 14.9511C12.2889 14.2175 12.5492 13.5904 13.0698 13.0698C13.5904 12.5492 14.2175 12.2889 14.9511 12.2889C15.6847 12.2889 16.3118 12.5492 16.8324 13.0698C17.353 13.5904 17.6133 14.2175 17.6133 14.9511C17.6133 15.6847 17.353 16.3118 16.8324 16.8324C16.3118 17.353 15.6847 17.6133 14.9511 17.6133Z" fill="#333333"/>
+<path d="M20.1335 10.6916C20.1335 10.4313 20.0388 10.2183 19.8495 10.0526C19.6839 9.86332 19.4709 9.76868 19.2106 9.76868C18.9503 9.76868 18.7255 9.86332 18.5362 10.0526C18.3469 10.2183 18.2522 10.4313 18.2522 10.6916C18.2522 10.9519 18.3469 11.1767 18.5362 11.366C18.7255 11.5553 18.9503 11.65 19.2106 11.65C19.4709 11.65 19.6839 11.5553 19.8495 11.366C20.0388 11.1767 20.1335 10.9519 20.1335 10.6916Z" fill="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.8667 11.6855C22.8903 12.3244 22.9022 13.4129 22.9022 14.9511C22.9022 16.4893 22.8903 17.5778 22.8667 18.2167C22.7957 19.6602 22.3579 20.7843 21.5533 21.5888C20.7724 22.3697 19.6602 22.7838 18.2167 22.8312C17.5778 22.8785 16.4892 22.9022 14.9511 22.9022C13.4129 22.9022 12.3244 22.8785 11.6855 22.8312C10.242 22.7602 9.12976 22.3342 8.34885 21.5533C8.04122 21.2694 7.79275 20.938 7.60343 20.5594C7.41411 20.1808 7.27213 19.814 7.17748 19.4591C7.10649 19.1041 7.07099 18.69 7.07099 18.2167C7.02366 17.5778 7 16.4893 7 14.9511C7 13.4129 7.02366 12.3125 7.07099 11.65C7.14198 10.2301 7.56793 9.12976 8.34885 8.34885C9.12976 7.54429 10.242 7.10649 11.6855 7.0355C12.3244 7.01185 13.4129 7 14.9511 7C16.4892 7 17.5778 7.01185 18.2167 7.0355C19.6602 7.10649 20.7724 7.54429 21.5533 8.34885C22.3579 9.12976 22.7957 10.242 22.8667 11.6855ZM21.3404 18.9266C21.293 19.2106 21.2339 19.4472 21.1629 19.6365C20.8789 20.3465 20.3701 20.8553 19.6365 21.1629C19.4472 21.2339 19.1988 21.293 18.8911 21.3404C18.6072 21.3877 18.2522 21.4232 17.8263 21.4468C17.424 21.4705 17.0927 21.4823 16.8324 21.4823H13.0343C12.7977 21.4823 12.4664 21.4705 12.0404 21.4468C11.6381 21.4232 11.2832 21.3877 10.9755 21.3404C10.6916 21.293 10.4549 21.2339 10.2656 21.1629C9.55571 20.8789 9.04693 20.3701 8.7393 19.6365C8.69197 19.4709 8.64465 19.2579 8.59732 18.9976C8.54998 18.7373 8.51449 18.4888 8.49083 18.2522C8.46717 17.9919 8.4435 17.6843 8.41984 17.3293V13.0698C8.41984 12.8095 8.43167 12.4782 8.45533 12.0759C8.47899 11.65 8.51449 11.295 8.56182 11.011C8.60915 10.7034 8.66831 10.455 8.7393 10.2656C9.02327 9.53206 9.53205 9.02327 10.2656 8.7393C10.4549 8.66831 10.6916 8.60917 10.9755 8.56182C11.2832 8.51447 11.6381 8.47898 12.0404 8.45533C12.4664 8.43169 12.8095 8.41984 13.0698 8.41984H16.8324C17.0927 8.41984 17.424 8.43169 17.8263 8.45533C18.2522 8.47898 18.6072 8.51447 18.8911 8.56182C19.1988 8.60917 19.4472 8.66831 19.6365 8.7393C20.3701 9.02327 20.8789 9.53206 21.1629 10.2656C21.2339 10.455 21.293 10.7034 21.3404 11.011C21.3877 11.295 21.4232 11.65 21.4468 12.0759C21.4705 12.4782 21.4823 12.8095 21.4823 13.0698V16.8324C21.4823 17.0927 21.4705 17.4358 21.4468 17.8618C21.4232 18.2641 21.3877 18.619 21.3404 18.9266Z" fill="#333333"/>
+</symbol>
+
+<symbol id="linkedin" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="29" height="29" rx="3.5" fill="white" stroke="#BDBDBD"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5357 22.7143H10.4866H7.24554V12.2054H10.5357V22.7143ZM8.86607 10.7812C8.34226 10.7812 7.9003 10.6012 7.54018 10.2411C7.18006 9.84821 7 9.40625 7 8.91518C7 8.39137 7.18006 7.9494 7.54018 7.58929C7.9003 7.19643 8.34226 7 8.86607 7C9.38988 7 9.83185 7.19643 10.192 7.58929C10.5848 7.9494 10.7812 8.39137 10.7812 8.91518C10.7812 9.40625 10.5848 9.84821 10.192 10.2411C9.83185 10.6012 9.38988 10.7812 8.86607 10.7812ZM22.7143 16.9688V22.7143H19.4732V17.6071C19.4732 17.2143 19.4568 16.9033 19.4241 16.6741C19.3914 16.4122 19.3259 16.1176 19.2277 15.7902C19.1622 15.4628 18.9985 15.2173 18.7366 15.0536C18.4747 14.8899 18.1473 14.808 17.7545 14.808C17.0015 14.808 16.494 15.0536 16.2321 15.5446C15.9702 16.0357 15.8393 16.6905 15.8393 17.5089V22.7143H12.5491V12.2054H15.692V13.6295H15.7411C15.9702 13.1711 16.3467 12.7783 16.8705 12.4509C17.4271 12.1235 18.0818 11.9598 18.8348 11.9598C19.6205 11.9598 20.2753 12.0908 20.7991 12.3527C21.3557 12.5818 21.7649 12.942 22.0268 13.433C22.2887 13.8914 22.4688 14.3988 22.567 14.9554C22.6652 15.5119 22.7143 16.183 22.7143 16.9688Z" fill="#333333"/>
+</symbol>
+
<symbol id="public" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
<path d="M13.0474 10.437C14.2168 9.73893 15 8.46093 15 7C15 4.79086 13.2091 3 11 3C8.79086 3 7 4.79086 7 7C7 8.46093 7.7832 9.73893 8.95263 10.437C7.21207 11.2192 6 12.9681 6 15V18H16V15C16 12.9681 14.7879 11.2192 13.0474 10.437Z" fill="#333333"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.917 14H21V11.8C21 10.3099 20.1516 9.02743 18.9332 8.45382C19.7518 7.94188 20.3 7.00468 20.3 5.93333C20.3 4.3133 19.0464 3 17.5 3C16.542 3 15.6963 3.50407 15.1915 4.27286C15.7028 5.05718 16 5.99389 16 7C16 7.44599 15.9416 7.87827 15.832 8.28963C15.9075 8.34834 15.9858 8.40316 16.0668 8.45382C15.9493 8.50916 15.8352 8.57108 15.725 8.63916C15.5088 9.26223 15.173 9.82915 14.7453 10.3124C15.8722 11.214 16.6677 12.514 16.917 14ZM14.9929 7.24086C14.9976 7.16118 15 7.08087 15 7C15 6.48461 14.9025 5.99199 14.725 5.53957C14.7085 5.66836 14.7 5.79981 14.7 5.93333C14.7 6.40316 14.8054 6.84718 14.9929 7.24086ZM15.9 14H14V11.8C14 11.5447 14.0249 11.2955 14.0723 11.055C14.9949 11.7745 15.6585 12.8106 15.9 14Z" fill="#333333"/>
@@ -163,16 +222,7 @@
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.84054 5.57617C1.72559 6.04339 1 7.13416 1 8.34305V23H8V18.5C8 17.6716 8.67157 17 9.5 17C10.3284 17 11 17.6716 11 18.5V23H18V8.40362C18 7.1644 17.2381 6.05271 16.0823 5.60565L14.5555 5.01505C14.1291 4.85011 13.746 4.5899 13.4355 4.2543L10.9183 1.5332C10.1451 0.6974 8.83121 0.674761 8.0297 1.48343L5.19821 4.34019C4.92065 4.62023 4.5906 4.84281 4.22694 4.9952L2.84054 5.57617Z"/>
</mask>
<path d="M2.84054 5.57617L3.03378 6.03731L2.84054 5.57617ZM1 23H0.5V23.5H1V23ZM8 23V23.5H8.5V23H8ZM11 23H10.5V23.5H11V23ZM18 23V23.5H18.5V23H18ZM16.0823 5.60565L16.2627 5.13932L16.0823 5.60565ZM14.5555 5.01505L14.3751 5.48138H14.3751L14.5555 5.01505ZM13.4355 4.2543L13.0685 4.59383V4.59383L13.4355 4.2543ZM10.9183 1.5332L11.2854 1.19366V1.19366L10.9183 1.5332ZM8.0297 1.48343L8.38482 1.8354V1.8354L8.0297 1.48343ZM5.19821 4.34019L4.84309 3.98821L5.19821 4.34019ZM4.22694 4.9952L4.42019 5.45634L4.22694 4.9952ZM1.5 8.34305C1.5 7.33564 2.10466 6.42666 3.03378 6.03731L2.6473 5.11502C1.34652 5.66011 0.5 6.93268 0.5 8.34305H1.5ZM1.5 23V8.34305H0.5V23H1.5ZM8 22.5H1V23.5H8V22.5ZM8.5 23V18.5H7.5V23H8.5ZM8.5 18.5C8.5 17.9477 8.94772 17.5 9.5 17.5V16.5C8.39543 16.5 7.5 17.3954 7.5 18.5H8.5ZM9.5 17.5C10.0523 17.5 10.5 17.9477 10.5 18.5H11.5C11.5 17.3954 10.6046 16.5 9.5 16.5V17.5ZM10.5 18.5V23H11.5V18.5H10.5ZM18 22.5H11V23.5H18V22.5ZM17.5 8.40362V23H18.5V8.40362H17.5ZM15.9019 6.07197C16.865 6.44453 17.5 7.37094 17.5 8.40362H18.5C18.5 6.95786 17.6111 5.66089 16.2627 5.13932L15.9019 6.07197ZM14.3751 5.48138L15.9019 6.07197L16.2627 5.13932L14.7359 4.54872L14.3751 5.48138ZM13.0685 4.59383C13.4307 4.98537 13.8776 5.28895 14.3751 5.48138L14.7359 4.54872C14.3805 4.41127 14.0613 4.19443 13.8026 3.91476L13.0685 4.59383ZM10.5513 1.87273L13.0685 4.59383L13.8026 3.91476L11.2854 1.19366L10.5513 1.87273ZM8.38482 1.8354C8.98595 1.22891 9.97141 1.24589 10.5513 1.87273L11.2854 1.19366C10.3189 0.148915 8.67647 0.120616 7.67458 1.13145L8.38482 1.8354ZM5.55333 4.69216L8.38482 1.8354L7.67458 1.13145L4.84309 3.98821L5.55333 4.69216ZM4.42019 5.45634C4.84445 5.27856 5.22951 5.01888 5.55333 4.69216L4.84309 3.98821C4.61179 4.22158 4.33675 4.40706 4.0337 4.53405L4.42019 5.45634ZM3.03378 6.03731L4.42019 5.45634L4.0337 4.53405L2.6473 5.11502L3.03378 6.03731Z" fill="white" mask="url(#path-1-outside-1)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2.84054 5.57617C1.72559 6.04339 1 7.13416 1 8.34305V23H8V18.5C8 17.6716 8.67157 17 9.5 17C10.3284 17 11 17.6716 11 18.5V23H18V8.40362C18 7.1644 17.2381 6.05271 16.0823 5.60565L14.5555 5.01505C14.1291 4.85011 13.746 4.5899 13.4355 4.2543L10.9183 1.5332C10.1451 0.6974 8.83121 0.674761 8.0297 1.48343L5.19821 4.34018C4.92065 4.62023 4.5906 4.84281 4.22694 4.9952L2.84054 5.57617ZM11 4.5C11 5.32843 10.3284 6 9.5 6C8.67157 6 8 5.32843 8 4.5C8 3.67157 8.67157 3 9.5 3C10.3284 3 11 3.67157 11 4.5ZM4.25 15.9354C3.54057 16.0544 3 16.6714 3 17.4146V18.75H4.25V15.9354ZM3 21.9146V19.25H4.25V21.9146H3ZM4.75 21.9146V19.25H6V21.9146H4.75ZM6 17.4146V18.75H4.75V15.9354C5.45943 16.0544 6 16.6714 6 17.4146ZM13 17.4146C13 16.6714 13.5406 16.0544 14.25 15.9354V18.75H13V17.4146ZM13 19.25V21.9146H14.25V19.25H13ZM14.75 19.25V21.9146H16V19.25H14.75ZM16 18.75V17.4146C16 16.6714 15.4594 16.0544 14.75 15.9354V18.75H16ZM14.25 8C13.5406 8.11902 13 8.73601 13 9.47926V10.8146H14.25V8ZM13 13.9793V11.3146H14.25V13.9793H13ZM14.75 13.9793V11.3146H16V13.9793H14.75ZM16 9.47926V10.8146H14.75V8C15.4594 8.11902 16 8.73601 16 9.47926ZM8 9.47926C8 8.73601 8.54057 8.11902 9.25 8V10.8146H8V9.47926ZM8 11.3146V13.9793H9.25V11.3146H8ZM9.75 11.3146V13.9793H11V11.3146H9.75ZM11 10.8146V9.47926C11 8.73601 10.4594 8.11902 9.75 8V10.8146H11ZM4.25 8C3.54057 8.11902 3 8.73601 3 9.47926V10.8146H4.25V8ZM3 13.9793V11.3146H4.25V13.9793H3ZM4.75 13.9793V11.3146H6V13.9793H4.75ZM6 9.47926V10.8146H4.75V8C5.45943 8.11902 6 8.73601 6 9.47926Z" fill="#D4C4A9"/>
-</symbol>
-
-<symbol id="mdm-hover" viewBox="0 0 19 24" xmlns="http://www.w3.org/2000/svg">
-<mask id="path-1-outside-1" maskUnits="userSpaceOnUse" x="0" y="-0.108661" width="19" height="24" fill="black">
-<rect fill="white" y="-0.108661" width="19" height="24"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2.84054 5.57617C1.72559 6.04339 1 7.13416 1 8.34305V23H8V18.5C8 17.6716 8.67157 17 9.5 17C10.3284 17 11 17.6716 11 18.5V23H18V8.40362C18 7.1644 17.2381 6.05271 16.0823 5.60565L14.5555 5.01505C14.1291 4.85011 13.746 4.5899 13.4355 4.2543L10.9183 1.5332C10.1451 0.6974 8.83121 0.674761 8.0297 1.48343L5.19821 4.34019C4.92065 4.62023 4.5906 4.84281 4.22694 4.9952L2.84054 5.57617Z"/>
-</mask>
-<path d="M2.84054 5.57617L3.03378 6.03731L2.84054 5.57617ZM1 23H0.5V23.5H1V23ZM8 23V23.5H8.5V23H8ZM11 23H10.5V23.5H11V23ZM18 23V23.5H18.5V23H18ZM16.0823 5.60565L16.2627 5.13932L16.0823 5.60565ZM14.5555 5.01505L14.3751 5.48138H14.3751L14.5555 5.01505ZM13.4355 4.2543L13.0685 4.59383V4.59383L13.4355 4.2543ZM10.9183 1.5332L11.2854 1.19366V1.19366L10.9183 1.5332ZM8.0297 1.48343L8.38482 1.8354V1.8354L8.0297 1.48343ZM5.19821 4.34019L4.84309 3.98821L5.19821 4.34019ZM4.22694 4.9952L4.42019 5.45634L4.22694 4.9952ZM1.5 8.34305C1.5 7.33564 2.10466 6.42666 3.03378 6.03731L2.6473 5.11502C1.34652 5.66011 0.5 6.93268 0.5 8.34305H1.5ZM1.5 23V8.34305H0.5V23H1.5ZM8 22.5H1V23.5H8V22.5ZM8.5 23V18.5H7.5V23H8.5ZM8.5 18.5C8.5 17.9477 8.94772 17.5 9.5 17.5V16.5C8.39543 16.5 7.5 17.3954 7.5 18.5H8.5ZM9.5 17.5C10.0523 17.5 10.5 17.9477 10.5 18.5H11.5C11.5 17.3954 10.6046 16.5 9.5 16.5V17.5ZM10.5 18.5V23H11.5V18.5H10.5ZM18 22.5H11V23.5H18V22.5ZM17.5 8.40362V23H18.5V8.40362H17.5ZM15.9019 6.07197C16.865 6.44453 17.5 7.37094 17.5 8.40362H18.5C18.5 6.95786 17.6111 5.66089 16.2627 5.13932L15.9019 6.07197ZM14.3751 5.48138L15.9019 6.07197L16.2627 5.13932L14.7359 4.54872L14.3751 5.48138ZM13.0685 4.59383C13.4307 4.98537 13.8776 5.28895 14.3751 5.48138L14.7359 4.54872C14.3805 4.41127 14.0613 4.19443 13.8026 3.91476L13.0685 4.59383ZM10.5513 1.87273L13.0685 4.59383L13.8026 3.91476L11.2854 1.19366L10.5513 1.87273ZM8.38482 1.8354C8.98595 1.22891 9.97141 1.24589 10.5513 1.87273L11.2854 1.19366C10.3189 0.148915 8.67647 0.120616 7.67458 1.13145L8.38482 1.8354ZM5.55333 4.69216L8.38482 1.8354L7.67458 1.13145L4.84309 3.98821L5.55333 4.69216ZM4.42019 5.45634C4.84445 5.27856 5.22951 5.01888 5.55333 4.69216L4.84309 3.98821C4.61179 4.22158 4.33675 4.40706 4.0337 4.53405L4.42019 5.45634ZM3.03378 6.03731L4.42019 5.45634L4.0337 4.53405L2.6473 5.11502L3.03378 6.03731Z" fill="white" mask="url(#path-1-outside-1)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2.84054 5.57617C1.72559 6.04339 1 7.13416 1 8.34305V23H8V18.5C8 17.6716 8.67157 17 9.5 17C10.3284 17 11 17.6716 11 18.5V23H18V8.40362C18 7.1644 17.2381 6.05271 16.0823 5.60565L14.5555 5.01505C14.1291 4.85011 13.746 4.5899 13.4355 4.2543L10.9183 1.5332C10.1451 0.6974 8.83121 0.674761 8.0297 1.48343L5.19821 4.34018C4.92065 4.62023 4.5906 4.84281 4.22694 4.9952L2.84054 5.57617ZM11 4.5C11 5.32843 10.3284 6 9.5 6C8.67157 6 8 5.32843 8 4.5C8 3.67157 8.67157 3 9.5 3C10.3284 3 11 3.67157 11 4.5ZM4.25 15.9354C3.54057 16.0544 3 16.6714 3 17.4146V18.75H4.25V15.9354ZM3 21.9146V19.25H4.25V21.9146H3ZM4.75 21.9146V19.25H6V21.9146H4.75ZM6 17.4146V18.75H4.75V15.9354C5.45943 16.0544 6 16.6714 6 17.4146ZM13 17.4146C13 16.6714 13.5406 16.0544 14.25 15.9354V18.75H13V17.4146ZM13 19.25V21.9146H14.25V19.25H13ZM14.75 19.25V21.9146H16V19.25H14.75ZM16 18.75V17.4146C16 16.6714 15.4594 16.0544 14.75 15.9354V18.75H16ZM14.25 8C13.5406 8.11902 13 8.73601 13 9.47926V10.8146H14.25V8ZM13 13.9793V11.3146H14.25V13.9793H13ZM14.75 13.9793V11.3146H16V13.9793H14.75ZM16 9.47926V10.8146H14.75V8C15.4594 8.11902 16 8.73601 16 9.47926ZM8 9.47926C8 8.73601 8.54057 8.11902 9.25 8V10.8146H8V9.47926ZM8 11.3146V13.9793H9.25V11.3146H8ZM9.75 11.3146V13.9793H11V11.3146H9.75ZM11 10.8146V9.47926C11 8.73601 10.4594 8.11902 9.75 8V10.8146H11ZM4.25 8C3.54057 8.11902 3 8.73601 3 9.47926V10.8146H4.25V8ZM3 13.9793V11.3146H4.25V13.9793H3ZM4.75 13.9793V11.3146H6V13.9793H4.75ZM6 9.47926V10.8146H4.75V8C5.45943 8.11902 6 8.73601 6 9.47926Z" fill="#BD9E6A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.84054 5.57617C1.72559 6.04339 1 7.13416 1 8.34305V23H8V18.5C8 17.6716 8.67157 17 9.5 17C10.3284 17 11 17.6716 11 18.5V23H18V8.40362C18 7.1644 17.2381 6.05271 16.0823 5.60565L14.5555 5.01505C14.1291 4.85011 13.746 4.5899 13.4355 4.2543L10.9183 1.5332C10.1451 0.6974 8.83121 0.674761 8.0297 1.48343L5.19821 4.34018C4.92065 4.62023 4.5906 4.84281 4.22694 4.9952L2.84054 5.57617ZM11 4.5C11 5.32843 10.3284 6 9.5 6C8.67157 6 8 5.32843 8 4.5C8 3.67157 8.67157 3 9.5 3C10.3284 3 11 3.67157 11 4.5ZM4.25 15.9354C3.54057 16.0544 3 16.6714 3 17.4146V18.75H4.25V15.9354ZM3 21.9146V19.25H4.25V21.9146H3ZM4.75 21.9146V19.25H6V21.9146H4.75ZM6 17.4146V18.75H4.75V15.9354C5.45943 16.0544 6 16.6714 6 17.4146ZM13 17.4146C13 16.6714 13.5406 16.0544 14.25 15.9354V18.75H13V17.4146ZM13 19.25V21.9146H14.25V19.25H13ZM14.75 19.25V21.9146H16V19.25H14.75ZM16 18.75V17.4146C16 16.6714 15.4594 16.0544 14.75 15.9354V18.75H16ZM14.25 8C13.5406 8.11902 13 8.73601 13 9.47926V10.8146H14.25V8ZM13 13.9793V11.3146H14.25V13.9793H13ZM14.75 13.9793V11.3146H16V13.9793H14.75ZM16 9.47926V10.8146H14.75V8C15.4594 8.11902 16 8.73601 16 9.47926ZM8 9.47926C8 8.73601 8.54057 8.11902 9.25 8V10.8146H8V9.47926ZM8 11.3146V13.9793H9.25V11.3146H8ZM9.75 11.3146V13.9793H11V11.3146H9.75ZM11 10.8146V9.47926C11 8.73601 10.4594 8.11902 9.75 8V10.8146H11ZM4.25 8C3.54057 8.11902 3 8.73601 3 9.47926V10.8146H4.25V8ZM3 13.9793V11.3146H4.25V13.9793H3ZM4.75 13.9793V11.3146H6V13.9793H4.75ZM6 9.47926V10.8146H4.75V8C5.45943 8.11902 6 8.73601 6 9.47926Z" stroke="none"/>
</symbol>
<symbol id="borne" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
@@ -188,4 +238,20 @@
<path d="M15.227 14.2886C14.1412 13.2028 12.6412 12.5312 10.9844 12.5312C9.32752 12.5312 7.82752 13.2028 6.74173 14.2886L8.15595 15.7028C8.8798 14.979 9.8798 14.5312 10.9844 14.5312C12.0889 14.5312 13.0889 14.979 13.8128 15.7028L15.227 14.2886Z" stroke="none"/>
<path d="M12.3986 17.117C12.0367 16.7551 11.5367 16.5312 10.9844 16.5312C10.4321 16.5312 9.93209 16.7551 9.57016 17.117L10.9844 18.5312L12.3986 17.117Z" stroke="none"/>
</symbol>
+
+<symbol id="moreOpts" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 7.66675C12.1 7.66675 13 6.76675 13 5.66675C13 4.56675 12.1 3.66675 11 3.66675C9.9 3.66675 9 4.56675 9 5.66675C9 6.76675 9.9 7.66675 11 7.66675ZM11 9.66675C9.9 9.66675 9 10.5667 9 11.6667C9 12.7667 9.9 13.6667 11 13.6667C12.1 13.6667 13 12.7667 13 11.6667C13 10.5667 12.1 9.66675 11 9.66675ZM9 17.6667C9 16.5667 9.9 15.6667 11 15.6667C12.1 15.6667 13 16.5667 13 17.6667C13 18.7667 12.1 19.6667 11 19.6667C9.9 19.6667 9 18.7667 9 17.6667Z" stroke="none"/>
+</symbol>
+
+<symbol id="camera" width="100" height="113" viewBox="0 0 100 113" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="100" height="113" rx="12" fill="#F8F8F8"/>
+<path d="M27 11H15C13.8954 11 13 11.8954 13 13V25" stroke="#BDBDBD" stroke-width="2" stroke-linecap="round"/>
+<path d="M27 100H15C13.8954 100 13 99.1046 13 98V86" stroke="#BDBDBD" stroke-width="2" stroke-linecap="round"/>
+<path d="M73 11H85C86.1046 11 87 11.8954 87 13V25" stroke="#BDBDBD" stroke-width="2" stroke-linecap="round"/>
+<path d="M73 100H85C86.1046 100 87 99.1046 87 98V86" stroke="#BDBDBD" stroke-width="2" stroke-linecap="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M61.1175 39.1429H72.7941C75.6692 39.1429 78 41.5002 78 44.4082V70.7347C78 73.6426 75.6692 76 72.7941 76H24.2059C21.3308 76 19 73.6426 19 70.7347V44.4082C19 41.5002 21.3308 39.1429 24.2059 39.1429H36.7502C37.8558 35.5825 41.1444 33 45.0294 33H52.8382C56.7232 33 60.0119 35.5825 61.1175 39.1429ZM49.5 70C56.9558 70 63 63.9558 63 56.5C63 49.0442 56.9558 43 49.5 43C42.0442 43 36 49.0442 36 56.5C36 63.9558 42.0442 70 49.5 70Z" fill="#C4C4C4"/>
+<circle cx="49.5" cy="56.5" r="10.5" fill="#BDBDBD"/>
+</symbol>
+
+
</svg>
diff --git a/src/assets/img/about_illustration.png b/src/assets/img/about_illustration.png
deleted file mode 100644
index 6e9cfe47aa986fbfa52afa5308c2d0e92b532be3..0000000000000000000000000000000000000000
Binary files a/src/assets/img/about_illustration.png and /dev/null differ
diff --git a/src/assets/img/about_illustration_1.jpg b/src/assets/img/about_illustration_1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..33a703590c620c7311e236d1cfd60324a270beaa
Binary files /dev/null and b/src/assets/img/about_illustration_1.jpg differ
diff --git a/src/assets/img/about_illustration_2.jpg b/src/assets/img/about_illustration_2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..79faca4a6331a11cc93e8de5339dc754cd1a9e0e
Binary files /dev/null and b/src/assets/img/about_illustration_2.jpg differ
diff --git a/src/assets/logos/logo_europe.png b/src/assets/logos/logo_europe.png
new file mode 100644
index 0000000000000000000000000000000000000000..89d98cf3c5a0eb7480472af3d10bb04d82407894
Binary files /dev/null and b/src/assets/logos/logo_europe.png differ
diff --git a/src/assets/logos/logo_region.png b/src/assets/logos/logo_region.png
new file mode 100644
index 0000000000000000000000000000000000000000..5bf6812f6ae13d983d0566daa05153cbbdf65209
Binary files /dev/null and b/src/assets/logos/logo_region.png differ
diff --git a/src/assets/scss/_buttons.scss b/src/assets/scss/_buttons.scss
index 6f8458fcfb62bf057bf6c802b6df275f3b875901..e17ec875cd592b90d0a853044e9e0c36a1e6224e 100644
--- a/src/assets/scss/_buttons.scss
+++ b/src/assets/scss/_buttons.scss
@@ -38,7 +38,7 @@
line-break: 18px;
}
@mixin btn-search-addStructure {
- @include btn-bold-sousligne;
+ @include btn-bold-underline;
color: $secondary-color;
outline: none;
}
@@ -62,3 +62,28 @@
line-height: 18px;
padding: 8px 15px;
}
+
+.btn-primary {
+ background: $secondary-color;
+ border-radius: 4px;
+ outline: none;
+ cursor: pointer;
+ border: 0;
+ color: $white;
+ height: 40px;
+ width: 192px;
+ @include btn-bold;
+ stroke: $white;
+ &.small {
+ width: 149px;
+ }
+ &.invalid {
+ opacity: 0.4;
+ }
+ &:focus {
+ background: $white;
+ color: $secondary-color;
+ border: 1px solid $secondary-color;
+ stroke: $secondary-color;
+ }
+}
diff --git a/src/assets/scss/_color.scss b/src/assets/scss/_color.scss
index b5a0368f86e54b9c0a9c93edf235f24235d9e01c..75dd41e99e0493162e4156be96636a3c079c64a3 100644
--- a/src/assets/scss/_color.scss
+++ b/src/assets/scss/_color.scss
@@ -18,11 +18,10 @@ $orange-warning: #da6c2e;
$blue: #348899;
$blue-hover: #117083;
$blue-active: #8cb6be;
-$red-metro: #d50000;
$red-info: #a00000;
$red-default: #ed3939;
/* APP COLORS */
-$primary-color: $red-metro;
+$primary-color: $red-default;
$secondary-color: $blue;
$default-link-color: $grey-2;
$button-secondary: $blue;
diff --git a/src/assets/scss/_hyperlink.scss b/src/assets/scss/_hyperlink.scss
index 5eed9c1f2ce663bbcf14ac5ed6b685ebb54aa8ac..81b49c00e5295a03e01f62285c2b010d9f6a9588 100644
--- a/src/assets/scss/_hyperlink.scss
+++ b/src/assets/scss/_hyperlink.scss
@@ -4,7 +4,7 @@
padding: 8px 8px 6px 8px;
color: $secondary-color;
outline: none;
- @include btn-bold-sousligne;
+ @include btn-bold-underline;
&:hover {
color: $blue-hover;
}
diff --git a/src/assets/scss/_inputs.scss b/src/assets/scss/_inputs.scss
index c9fbb4a9f2a42a079b6f6ba9ff287db52956b3c2..477d2319b2c5c8918214cbea4cf164843af3bfa0 100644
--- a/src/assets/scss/_inputs.scss
+++ b/src/assets/scss/_inputs.scss
@@ -31,7 +31,7 @@
.switch {
position: relative;
display: inline-block;
- width: 60px;
+ margin-left: -55px;
height: 34px;
}
diff --git a/src/assets/scss/_layout.scss b/src/assets/scss/_layout.scss
index b80043aa24c23f2824ec2e30be3f94cc8d926627..94ebedd43f510c2edad4ae2edb0202c2c49bc8d9 100644
--- a/src/assets/scss/_layout.scss
+++ b/src/assets/scss/_layout.scss
@@ -1,4 +1,5 @@
$header-height: 70px;
$footer-height: 56px;
-$header-height-phone: 50px;
+$header-height-phone: 70px;
$footer-height-phone: 75px;
+$progressBar-height: 50px;
diff --git a/src/assets/scss/_shapes.scss b/src/assets/scss/_shapes.scss
index 9eb400742e995d1da5d6a163ad8b9e1771a58eab..a5497d14faa6ff59fb5c3489a65ba63ae4ba51eb 100644
--- a/src/assets/scss/_shapes.scss
+++ b/src/assets/scss/_shapes.scss
@@ -33,17 +33,17 @@ $mat-tab-shadow: 0px 2px 7px rgba(0, 0, 0, 0.25);
background-position-y: 12px;
}
-@mixin background-hash {
+@mixin background-hash($color) {
background: linear-gradient(
-45deg,
- $grey-2 2.5%,
+ $color 2.5%,
$white 2.5%,
$white 47.5%,
- $grey-2 47.5%,
- $grey-2 52.5%,
+ $color 47.5%,
+ $color 52.5%,
$white 52.5%,
$white 97.5%,
- $grey-2 97.5%
+ $color 97.5%
);
background-size: 5px 5px;
background-position: 25px 25px;
diff --git a/src/assets/scss/_typography.scss b/src/assets/scss/_typography.scss
index 8d7611006df3862e440590cf1edcabf810eff3d0..d5f92bac1c01e01d894fd86e494968119698381b 100644
--- a/src/assets/scss/_typography.scss
+++ b/src/assets/scss/_typography.scss
@@ -5,12 +5,12 @@ $title-font: 'Trebuchet MS', 'Helvetica', sans-serif;
$font-size-xxsmall: 0.75em; // 12px
$font-size-xsmall: 0.875em; // 14px
$font-size-small: 1em; // 16px
-$font-size-smedium: 1.25em; // 20px
-$font-size-medium: 1.375em; // 22px
-$font-size-xmedium: 1.5em; // 24px
-$font-size-large: 1.75em; // 28px
-$font-size-xlarge: 2em; // 32px
-$font-size-medium-mobile: 1.1em;
+
+$font-size-smedium: 1.125em; // 18px
+$font-size-medium: 1.25em; // 20px
+$font-size-xmedium: 1.375em; // 22px
+
+$font-size-large: 1.625em; // 26px
html,
body,
@@ -37,116 +37,73 @@ h6,
font-family: $title-font;
}
-@mixin btn-bold {
- @include cn-bold-16;
- line-height: 18px;
-}
-
-@mixin btn-bold-sousligne {
- @include btn-bold;
- text-decoration: underline;
-}
-@mixin btn-normal {
- @include cn-regular-16;
- line-height: 19px;
-}
-
-@mixin btn-pass {
- @include cn-regular-18;
- line-height: 21px;
-}
-
@mixin arial-regular-16 {
font-family: $footer-text-font;
font-style: normal;
font-size: $font-size-small;
}
-@mixin cn-bold-36 {
- font-family: $text-font;
- font-style: normal;
- font-weight: bold;
- font-size: $font-size-large;
-}
-@mixin cn-bold-32 {
- font-family: $title-font;
- font-style: normal;
- font-weight: bold;
- font-size: $font-size-xlarge;
-}
-@mixin cn-bold-28 {
+@mixin cn-bold-26 {
font-family: $title-font;
font-style: normal;
font-weight: bold;
font-size: $font-size-large;
}
-@mixin cn-regular-28 {
+@mixin cn-regular-26 {
font-family: $text-font;
font-style: normal;
font-weight: normal;
font-size: $font-size-large;
}
-@mixin cn-regular-24 {
- font-family: $text-font;
- font-style: normal;
- font-weight: normal;
- font-size: $font-size-xmedium;
-}
-@mixin cn-bold-24 {
- font-family: $text-font;
- font-style: normal;
- font-weight: bold;
- font-size: $font-size-xmedium;
-}
@mixin cn-regular-22 {
font-family: $text-font;
font-style: normal;
font-weight: normal;
- font-size: $font-size-medium;
+ font-size: $font-size-xmedium;
}
@mixin cn-bold-22 {
font-family: $text-font;
font-style: normal;
font-weight: bold;
- font-size: $font-size-medium;
+ font-size: $font-size-xmedium;
}
@mixin cn-bold-20 {
font-family: $text-font;
font-style: normal;
font-weight: bold;
- font-size: $font-size-smedium;
+ font-size: $font-size-medium;
}
@mixin cn-regular-20 {
font-family: $text-font;
font-style: normal;
font-weight: normal;
- font-size: $font-size-smedium;
+ font-size: $font-size-medium;
}
@mixin cn-bold-20 {
font-family: $title-font;
font-style: normal;
font-weight: bold;
- font-size: $font-size-smedium;
+ font-size: $font-size-medium;
}
@mixin cn-regular-20 {
font-family: $title-font;
font-style: normal;
font-weight: normal;
- font-size: $font-size-smedium;
+ font-size: $font-size-medium;
}
@mixin cn-regular-18 {
font-family: $title-font;
font-style: normal;
font-weight: normal;
- font-size: $font-size-medium-mobile;
+ font-size: $font-size-smedium;
}
@mixin cn-bold-18 {
font-family: $title-font;
font-style: normal;
font-weight: bold;
- font-size: $font-size-medium-mobile;
+ font-size: $font-size-smedium;
}
@mixin cn-bold-16 {
font-family: $text-font;
@@ -184,3 +141,22 @@ h6,
white-space: nowrap;
text-overflow: ellipsis;
}
+
+@mixin btn-bold {
+ @include cn-bold-16;
+ line-height: 18px;
+}
+
+@mixin btn-bold-underline {
+ @include btn-bold;
+ text-decoration: underline;
+}
+@mixin btn-normal {
+ @include cn-regular-16;
+ line-height: 19px;
+}
+
+@mixin btn-pass {
+ @include cn-regular-14;
+ line-height: 21px;
+}
diff --git a/src/assets/scss/_z-index.scss b/src/assets/scss/_z-index.scss
index 18c12fc2c0511495842353125e55957dbf5b2e49..fc1ca81b6c627868b3859b58b1ae03543000d7b1 100644
--- a/src/assets/scss/_z-index.scss
+++ b/src/assets/scss/_z-index.scss
@@ -6,5 +6,4 @@ $menu-phone-z-index: 1003;
$structure-details-z-index: 1001;
// Modals (filters/confirmationPopup/authen/...)
-$modal-z-index: 1002;
-$modal-confirmation-z-index: 1004;
+$modal-z-index: 1004;
diff --git a/src/favicon.ico b/src/favicon.ico
index 997406ad22c29aae95893fb3d666c30258a09537..a4f55c1a6dbfdbebed67dc58155936c95d4bfdb0 100644
Binary files a/src/favicon.ico and b/src/favicon.ico differ
diff --git a/src/index.html b/src/index.html
index 034e83f362a671532cf29573af2a2b3ebd73ad4a..1dfbff37e98e160421dc47c16ab7c8bb99dff3ef 100644
--- a/src/index.html
+++ b/src/index.html
@@ -12,6 +12,7 @@
href="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol@0.72.0/dist/L.Control.Locate.min.css"
/>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></script>
+ <script src="https://embed.typeform.com/embed.js"></script>
</head>
<body>
<app-root></app-root>
diff --git a/src/styles.scss b/src/styles.scss
index 25c9dd89ed29725762f2fcff2a38ea94fe8b6225..747d5da15a984bd5b107acc00ceaaeabe882de53 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,6 +1,7 @@
/* You can add global styles to this file, and also import other style files */
@import 'assets/scss/typography';
+@import 'assets/scss/z-index';
@import 'assets/scss/color';
@import 'assets/scss/breakpoint';
@import 'assets/scss/icons';
@@ -25,7 +26,6 @@ body {
min-height: 100vh;
min-height: -webkit-fill-available;
}
-
a {
color: $default-link-color;
text-decoration: none;
@@ -126,6 +126,9 @@ button {
padding-left: 16px;
padding-right: 10px;
@include btn-pass;
+ &.pass {
+ @include cn-regular-18;
+ }
}
.customCheck {
display: inline-grid;
@@ -182,3 +185,88 @@ button {
display: none !important;
}
}
+
+// Modal
+
+.modalBackground {
+ width: 100%;
+ height: 100%;
+ z-index: $modal-z-index;
+ position: absolute;
+ content: '';
+ top: 0;
+ left: 0;
+ background-color: $modal-background;
+ .modal {
+ max-height: 90%;
+ overflow: auto;
+ .contentModal {
+ width: 100%;
+ background: $white;
+ padding: 35px 20px 18px 20px;
+ }
+ .footerModal {
+ width: 100%;
+ margin-top: 14px;
+ @include cn-bold-16;
+ .btn {
+ background: $secondary-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;
+ width: 80%;
+ max-width: 560px;
+ margin: auto;
+ border-radius: 6px;
+ @include background-hash($grey-2);
+ border: 1px solid $grey-4;
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
+}
+
+.structureCard {
+ border: 1px solid $grey-4;
+ border-radius: 6px;
+ .structureInfo {
+ border-radius: 6px;
+ background: $white;
+ min-height: 100px;
+ padding: 33px 55px;
+ @media #{$large-phone} {
+ padding: 33px 25px;
+ }
+ a {
+ margin: 0;
+ &.structureName {
+ @include cn-bold-26;
+ color: $secondary-color;
+ text-decoration: underline;
+ }
+ }
+ .ownerName {
+ @include cn-regular-18;
+ color: $grey-2;
+ }
+ }
+ @include background-hash($grey-2);
+}
+
+.no-margin {
+ margin: 0 !important;
+}