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/form/form.component.html b/src/app/form/form.component.html
index 0c4ec892dd360d4d00276e2948bb4fc5b7b2c83c..9baca98e4f23841d6d88744a10c19460bc5cdd93 100644
--- a/src/app/form/form.component.html
+++ b/src/app/form/form.component.html
@@ -5,8 +5,13 @@
(closed)="hasRedirectionAccepted($event)"
></app-modal-confirmation>
<div class="content" *ngIf="!isLoading" [ngClass]="{ editMode: isEditMode }">
- <div class="headerEditMode" *ngIf="isEditMode">
+ <div class="headerEditMode" *ngIf="isEditMode" fxLayout="row" fxLayoutAlign="space-between center">
<h2>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)">
@@ -1033,27 +1038,6 @@
</p>
</div>
</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>
- </div>
</form>
<div *ngIf="currentPage == pageTypeEnum.cgu" class="page">
<div class="title">
diff --git a/src/app/form/form.component.scss b/src/app/form/form.component.scss
index 898d651ad0df69b68ea6fc90b328128ca8b94e6d..7b34d9621f3b3927f01d818a85873fede87c0d24 100644
--- a/src/app/form/form.component.scss
+++ b/src/app/form/form.component.scss
@@ -108,7 +108,7 @@ h3 {
overflow-y: auto;
height: auto;
h2 {
- @include cn-bold-28;
+ @include cn-bold-26;
color: $black;
margin-bottom: 0;
span {
@@ -119,7 +119,11 @@ h3 {
}
}
h3 {
- @include cn-bold-22;
+ @include cn-bold-26;
+
+ @media #{$tablet} {
+ @include cn-bold-22;
+ }
}
.page {
max-width: 960px;
diff --git a/src/app/form/form.component.ts b/src/app/form/form.component.ts
index 837866f335a312cd55e8821da9389cfcb04a24b6..dcc151211a8f72f9e0b65eb1e66852d31a7457a1 100644
--- a/src/app/form/form.component.ts
+++ b/src/app/form/form.component.ts
@@ -17,8 +17,8 @@ import { ActivatedRoute, Router } from '@angular/router';
import { AuthService } from '../services/auth.service';
import { first } from 'rxjs/operators';
import { PageTypeEnum } from './pageType.enum';
-import { TempUserService } from '../services/temp-user.service';
import { CustomRegExp } from '../utils/CustomRegExp';
+import { StructureWithOwners } from '../models/structureWithOwners.model';
const { DateTime } = require('luxon');
@Component({
selector: 'app-structureForm',
@@ -28,7 +28,6 @@ const { DateTime } = require('luxon');
export class FormComponent implements OnInit {
public profile: User;
public createdStructure: Structure;
-
// Form var
public structureForm: FormGroup;
public accountForm: FormGroup;
@@ -73,13 +72,13 @@ export class FormComponent implements OnInit {
public isJoinMode = false;
public isLoading = false;
public isWifiChoosen = false;
+ public structureWithOwners: StructureWithOwners;
constructor(
private structureService: StructureService,
private searchService: SearchService,
private profileService: ProfileService,
private authService: AuthService,
- private tempUserService: TempUserService,
private router: Router,
private route: ActivatedRoute
) {}
@@ -95,7 +94,11 @@ export class FormComponent implements OnInit {
if (history.state.data) {
this.isEditMode = true;
this.isWifiChoosen = true;
- this.initForm(new Structure(history.state.data));
+ 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
@@ -541,7 +544,6 @@ export class FormComponent implements OnInit {
name: 'Informations spécifiques à la période COVID',
};
this.pagesValidation[PageTypeEnum.cgu] = { valid: this.userAcceptSavedDate };
- //this.pagesValidation[PageTypeEnum.addUserToStructure] = { valid: true };
this.updatePageValid();
}
}
@@ -664,7 +666,6 @@ export class FormComponent implements OnInit {
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();
@@ -908,4 +909,8 @@ export class FormComponent implements OnInit {
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
index 4742e76b28e9a418b5c628fde62bd60317871f27..3b3f5071add1c54b7940b04c4b7577aa94059c35 100644
--- a/src/app/form/pageType.enum.ts
+++ b/src/app/form/pageType.enum.ts
@@ -23,5 +23,4 @@ export enum PageTypeEnum {
structureDescription = 21,
structureCovidInfo = 22,
cgu = 23,
- addUserToStructure = 24,
}
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index c26ce85cc7b6a0ef6a72b0012b76b28082331c94..2d4732e1f6681a70c3e191557cba706dc3597b3e 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>
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
index b745464c09799bbf607ef234d54435ca7ec89f80..37b4b41bc170f8c86a8de22aaf54290bd7b36d27 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;
diff --git a/src/app/map/components/map.component.scss b/src/app/map/components/map.component.scss
index 8171509072e5dc3a773fcea6e7fbe6ebc6e7320f..cb53c0d90700caed57c3f469322e1b66bfcd58b3 100644
--- a/src/app/map/components/map.component.scss
+++ b/src/app/map/components/map.component.scss
@@ -76,6 +76,14 @@
stroke-width: unset !important;
}
}
+ &:hover {
+ svg {
+ fill: $red-info;
+ &.mdm {
+ fill: #bd9e6a;
+ }
+ }
+ }
}
::ng-deep .leaflet-left {
@@ -97,12 +105,15 @@
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/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/profile/profile.component.html b/src/app/profile/profile.component.html
index 3ef2c4743dbc9983a2ca6d3adfc84b74f031bf6d..96e8c9734cebfada5385d50bc87ae868be47f2ae 100644
--- a/src/app/profile/profile.component.html
+++ b/src/app/profile/profile.component.html
@@ -13,26 +13,10 @@
<span>Identifiant</span>
<div fxLayout="row" fxLayoutAlign="space-between center">
<p>{{ userProfile.email }}</p>
- <nav aria-label="modalOption">
- <ul>
- <li>
- <button
- [ngClass]="{ active: isModalOptsProfile }"
- (click)="openModalOptsProfile()"
- class="btn-primary transparent"
- >
- <app-svg-icon [type]="'ico'" [iconColor]="inherit" [icon]="'moreOpts'"></app-svg-icon>
- </button>
- <ul *ngIf="isModalOptsProfile" class="dropdown">
- <app-modal-options
- [isModalProfileOpts]="true"
- [hasOwners]="false"
- (closed)="closeModalOpts($event)"
- ></app-modal-options>
- </ul>
- </li>
- </ul>
- </nav>
+ <app-structure-options-modal
+ [userProfile]="userProfile"
+ (closed)="ngOnInit()"
+ ></app-structure-options-modal>
</div>
</div>
</div>
@@ -47,26 +31,7 @@
<a class="structureName" routerLink="/home" [state]="{ data: s.structure }">{{
s.structure.structureName
}}</a>
- <nav aria-label="modalOption">
- <ul>
- <li>
- <button
- [ngClass]="{ active: modalOptsStructureIndex == i }"
- (click)="openModalOptsStructure(i, s)"
- class="btn-primary transparent"
- >
- <app-svg-icon [type]="'ico'" [iconColor]="inherit" [icon]="'moreOpts'"></app-svg-icon>
- </button>
- <ul *ngIf="modalOptsStructureIndex == i" class="dropdown">
- <app-modal-options
- [isModalProfileOpts]="false"
- [hasOwners]="currentStructureOwners.owners.length > 0"
- (closed)="closeModalOpts($event)"
- ></app-modal-options>
- </ul>
- </li>
- </ul>
- </nav>
+ <app-structure-options-modal [structure]="s" (closed)="ngOnInit()"></app-structure-options-modal>
</div>
<div fxLayout="column" fxLayoutGap="14px">
<p class="ownerName" *ngFor="let owner of s.owners">{{ owner.email }}</p>
@@ -99,213 +64,3 @@
</div>
</div>
</div>
-<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">
- <div class="row removeOwner" *ngFor="let owner of currentStructureOwners.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/profile/profile.component.scss b/src/app/profile/profile.component.scss
index c7b151d23c101f6a2a48f400c67ad771ace34f1a..50f831bd0b480351d3ba1edd610a51b51604c058 100644
--- a/src/app/profile/profile.component.scss
+++ b/src/app/profile/profile.component.scss
@@ -32,7 +32,7 @@
background: $white;
border-bottom: 1px solid $grey-4;
.profileName {
- @include cn-bold-24;
+ @include cn-bold-26;
margin: 0 !important;
}
.profileEmail {
@@ -46,13 +46,6 @@
}
}
}
-button {
- &.transparent {
- background: none;
- border: 1px solid $grey-4;
- border-radius: 6px;
- }
-}
.structureSection {
margin-bottom: 108px;
.structureCard {
@@ -69,7 +62,7 @@ button {
a {
margin: 0;
&.structureName {
- @include cn-bold-24;
+ @include cn-bold-26;
color: $secondary-color;
text-decoration: underline;
}
@@ -88,79 +81,3 @@ button {
color: $white;
}
}
-.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 {
- 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;
- }
-}
-
-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;
-}
diff --git a/src/app/profile/profile.component.ts b/src/app/profile/profile.component.ts
index 67cb9257417d663de7f44e61de8c397327850f14..0b3b1d36c276ff97445d274268e12faa1ce09d7a 100644
--- a/src/app/profile/profile.component.ts
+++ b/src/app/profile/profile.component.ts
@@ -1,16 +1,9 @@
import { Component, OnInit } from '@angular/core';
-import { AbstractControl, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
-import { Structure } from '../models/structure.model';
import { StructureWithOwners } from '../models/structureWithOwners.model';
-import { TempUser } from '../models/temp-user.model';
import { User } from '../models/user.model';
import { AuthService } from '../services/auth.service';
import { StructureService } from '../services/structure.service';
-import { MustMatch } from '../shared/validator/form';
-import { CustomRegExp } from '../utils/CustomRegExp';
-import { FunctionTypeModalOptions } from './enum/functionTypeModalOptions.enum';
-import { TypeModalProfile } from './enum/TypeModalProfile.enum';
import { ProfileService } from './services/profile.service';
@Component({
@@ -19,42 +12,14 @@ import { ProfileService } from './services/profile.service';
styleUrls: ['./profile.component.scss'],
})
export class ProfileComponent implements OnInit {
- // Password profile
- public formPassword: FormGroup;
- public isShowOldPassword = false;
- public isShowPassword = false;
- public isShowConfirmPassword = false;
- public changePassword = false;
- public passwordError = false;
-
- // Email profile
- public formEmail: FormGroup;
- public changeEmail = false;
-
- // formAddAccount
- public formAddAccount: FormGroup;
- public ownerAlreadyLinked = false;
-
- // Global var
public userProfile: User;
- public loading = false;
public structures: StructureWithOwners[] = [];
- public editModal: TypeModalProfile;
- public typeModalProfile = TypeModalProfile;
-
- // Modal options
- public modalOptsStructureIndex: number;
- public isModalOptsProfile = false;
- public currentStructureOwners: StructureWithOwners;
- public deleteModalStructureOpenned = false;
- public deleteModalAccountOpenned = false;
constructor(
- private authService: AuthService,
- private formBuilder: FormBuilder,
private profileService: ProfileService,
private structureService: StructureService,
- private router: Router
+ private router: Router,
+ private authService: AuthService
) {}
ngOnInit(): void {
@@ -67,198 +32,13 @@ export class ProfileComponent implements OnInit {
});
});
});
- this.initForm();
- }
- public initForm(): 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)]],
- });
- }
- // getter for form fields
- get fpass(): { [key: string]: AbstractControl } {
- return this.formPassword.controls;
- }
-
- // getter for form fields
- get fmail(): { [key: string]: AbstractControl } {
- return this.formEmail.controls;
- }
-
- get fAddAccount(): { [key: string]: AbstractControl } {
- return this.formAddAccount.controls;
- }
-
- 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.currentStructureOwners.structure } });
- break;
- case FunctionTypeModalOptions.removeStructure:
- this.toggleDeleteStructureModal();
- break;
- default:
- break;
- }
- this.isModalOptsProfile = false;
- this.modalOptsStructureIndex = null;
- }
-
- // Profile Section
- public closeModalOptsProfile(): void {
- this.editModal = null;
- this.formAddAccount.reset();
- this.formEmail.reset();
- this.formPassword.reset();
- }
- public submitEmail(): void {
- // stop here if form is invalid
- if (this.formEmail.invalid) {
- return;
- }
- this.loading = true;
- this.profileService.changeEmail(this.formEmail.value.email, this.userProfile.email).subscribe(
- () => {
- this.closeModalOptsProfile();
- this.formEmail.reset();
- this.loading = false;
- },
- (err) => {
- this.loading = false;
- }
- );
- }
- public submitPassword(): void {
- // stop here if form is invalid
- if (this.formPassword.invalid) {
- return;
- }
- this.loading = true;
-
- this.profileService.changePassword(this.formPassword.value.password, this.formPassword.value.oldPassword).subscribe(
- () => {
- this.closeModalOptsProfile();
- this.formPassword.reset();
- this.loading = false;
- this.passwordError = false;
- },
- (error) => {
- this.passwordError = true;
- this.loading = false;
- }
- );
- }
- public openModalOptsProfile(): void {
- this.isModalOptsProfile = true;
- }
- public showOldPassword(): void {
- this.isShowOldPassword = !this.isShowOldPassword;
- }
- public showPassword(): void {
- this.isShowPassword = !this.isShowPassword;
- }
- public showConfirmPassword(): void {
- this.isShowConfirmPassword = !this.isShowConfirmPassword;
- }
- public logout(): void {
- this.authService.logout();
- }
- public deleteAccount(shouldDelete: boolean): void {
- this.toggleDeleteAccountModal();
- if (shouldDelete) {
- this.profileService.deleteProfile().subscribe(() => {
- this.logout();
- });
- }
}
- // Structure section
- public openModalOptsStructure(index: number, s: StructureWithOwners): void {
- this.modalOptsStructureIndex = index;
- this.currentStructureOwners = s;
- }
public addStructure(): void {
this.router.navigateByUrl('/create-structure');
}
- private toggleDeleteStructureModal(): void {
- this.deleteModalStructureOpenned = !this.deleteModalStructureOpenned;
- }
- private toggleDeleteAccountModal(): void {
- this.deleteModalAccountOpenned = !this.deleteModalAccountOpenned;
- }
- public deleteStructure(shouldDelete: boolean): void {
- this.toggleDeleteStructureModal();
- if (shouldDelete) {
- this.structureService.delete(this.currentStructureOwners.structure._id).subscribe((structure: Structure) => {
- this.ngOnInit();
- });
- }
- }
-
- public verifyEmailAlreadyUsed(inputEmail, formControl: FormControl): void {
- if (formControl.valid) {
- this.profileService.isEmailAlreadyUsed(inputEmail).subscribe((isExist) => {
- if (isExist) {
- formControl.setErrors({ alreadyExist: true });
- }
- });
- }
- }
- public removeOwner(owner: string): void {
- this.structureService.removeOwnerFromStructure(owner, this.currentStructureOwners.structure._id).subscribe(() => {
- this.currentStructureOwners.owners = this.currentStructureOwners.owners.filter((o) => o.id !== owner);
- if (this.currentStructureOwners.owners.length == 0) {
- this.closeModalOptsProfile();
- }
- });
- }
- public addOwner(): void {
- // stop here if form is invalid
- if (this.formAddAccount.invalid) {
- return;
- }
- this.loading = true;
- const user = new TempUser();
- user.email = this.fAddAccount.email.value;
- this.structureService.addOwnerToStructure(user, this.currentStructureOwners.structure._id).subscribe(
- () => {
- this.closeModalOptsProfile();
- this.formAddAccount.reset();
- this.loading = false;
- },
- (err) => {
- this.ownerAlreadyLinked = true;
- this.loading = false;
- }
- );
+ public logout(): void {
+ this.authService.logout();
}
}
diff --git a/src/app/profile/profile.module.ts b/src/app/profile/profile.module.ts
index adf5fb74ccae8cf5c59f9de05a0fd95e7ce1b3f4..a9427003f2507d4092e966617363aa223996b4f5 100644
--- a/src/app/profile/profile.module.ts
+++ b/src/app/profile/profile.module.ts
@@ -3,11 +3,10 @@ import { ProfileComponent } from './profile.component';
import { SharedModule } from '../shared/shared.module';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
-import { ModalOptionsComponent } from './modal-options/modal-options.component';
@NgModule({
imports: [CommonModule, BrowserModule, SharedModule],
- declarations: [ProfileComponent, ModalOptionsComponent],
+ declarations: [ProfileComponent],
exports: [ProfileComponent],
})
export class ProfileModule {}
diff --git a/src/app/shared/components/button/button.component.scss b/src/app/shared/components/button/button.component.scss
index 55ae3ca6719d7d01ef9871349f13fd0984e8598c..04a71d5474b03e28d28e5f30fb4f697387116d54 100644
--- a/src/app/shared/components/button/button.component.scss
+++ b/src/app/shared/components/button/button.component.scss
@@ -47,6 +47,8 @@ button {
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/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/profile/modal-options/modal-options.component.html b/src/app/shared/components/modal-options/modal-options.component.html
similarity index 92%
rename from src/app/profile/modal-options/modal-options.component.html
rename to src/app/shared/components/modal-options/modal-options.component.html
index 6d8a62025d9bdd3ba23176954b43e8dca002b8b4..0e45ca7cc1e91a5f82d66650fc0b615808afc922 100644
--- a/src/app/profile/modal-options/modal-options.component.html
+++ b/src/app/shared/components/modal-options/modal-options.component.html
@@ -28,7 +28,13 @@
<app-svg-icon [type]="'ico'" [iconColor]="'inherit'" [icon]="'remove'"></app-svg-icon>
<p>Supprimer un compte</p>
</div>
- <div (click)="closeModal(functionType.editStructure)" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="9px">
+ <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>
diff --git a/src/app/profile/modal-options/modal-options.component.scss b/src/app/shared/components/modal-options/modal-options.component.scss
similarity index 78%
rename from src/app/profile/modal-options/modal-options.component.scss
rename to src/app/shared/components/modal-options/modal-options.component.scss
index 907e3f944e88d23fa74cc3de44d9d17b466da45f..33159ef26d8514ce033954ebc711b493e2be634a 100644
--- a/src/app/profile/modal-options/modal-options.component.scss
+++ b/src/app/shared/components/modal-options/modal-options.component.scss
@@ -1,7 +1,7 @@
-@import '../../../assets/scss/color';
-@import '../../../assets/scss/typography';
-@import '../../../assets/scss/shapes';
-@import '../../../assets/scss/z-index';
+@import '../../../../assets/scss/color';
+@import '../../../../assets/scss/typography';
+@import '../../../../assets/scss/shapes';
+@import '../../../../assets/scss/z-index';
.modalOptions {
width: 300px;
diff --git a/src/app/profile/modal-options/modal-options.component.spec.ts b/src/app/shared/components/modal-options/modal-options.component.spec.ts
similarity index 100%
rename from src/app/profile/modal-options/modal-options.component.spec.ts
rename to src/app/shared/components/modal-options/modal-options.component.spec.ts
diff --git a/src/app/profile/modal-options/modal-options.component.ts b/src/app/shared/components/modal-options/modal-options.component.ts
similarity index 81%
rename from src/app/profile/modal-options/modal-options.component.ts
rename to src/app/shared/components/modal-options/modal-options.component.ts
index e9eb32e289eda09013fd52963fa1a67a2b8f51da..4de502a5c414fe46cc6ebf71b77002bb53ba0276 100644
--- a/src/app/profile/modal-options/modal-options.component.ts
+++ b/src/app/shared/components/modal-options/modal-options.component.ts
@@ -1,5 +1,5 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { FunctionTypeModalOptions } from '../enum/functionTypeModalOptions.enum';
+import { FunctionTypeModalOptions } from '../../enum/functionTypeModalOptions.enum';
@Component({
selector: 'app-modal-options',
@@ -12,6 +12,7 @@ export class ModalOptionsComponent implements OnInit {
constructor() {}
@Input() isModalProfileOpts = false;
@Input() hasOwners = true;
+ @Input() public isEditFormView? = false;
@Output() closed = new EventEmitter<number>();
ngOnInit(): void {}
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 529354b01162d978a359f67b07f344afaee3ddd9..35477fdaedbfe32561204ef93463e45fc2e9880a 100644
--- a/src/app/shared/components/signin-modal/signin-modal.component.scss
+++ b/src/app/shared/components/signin-modal/signin-modal.component.scss
@@ -5,7 +5,7 @@
width: 100%;
}
h3 {
- @include cn-bold-24;
+ @include cn-bold-26;
color: $black;
margin-top: 0;
}
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 e5ae20ec96de3a93f39dd838a9960550b74b7892..2133bd8f4c529f1d06136da9462d7588b900d632 100644
--- a/src/app/shared/components/signup-modal/signup-modal.component.scss
+++ b/src/app/shared/components/signup-modal/signup-modal.component.scss
@@ -11,7 +11,7 @@
color: $orange-warning;
}
h3 {
- @include cn-bold-24;
+ @include cn-bold-26;
color: $black;
margin-top: 0;
}
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..a5f68cc4d0a307ce11d08f91d231ff29168fd1a1
--- /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">
+ <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..6edbfaaaf25e17a16eab777fc26c60686beec7d7
--- /dev/null
+++ b/src/app/shared/components/structure-options-modal/structure-options-modal.component.scss
@@ -0,0 +1,86 @@
+@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 {
+ 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;
+ }
+}
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/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/profile/enum/functionTypeModalOptions.enum.ts b/src/app/shared/enum/functionTypeModalOptions.enum.ts
similarity index 100%
rename from src/app/profile/enum/functionTypeModalOptions.enum.ts
rename to src/app/shared/enum/functionTypeModalOptions.enum.ts
diff --git a/src/app/structure-list/components/card/card.component.scss b/src/app/structure-list/components/card/card.component.scss
index dcae0f47944a3c483426c2e595e619fb931ecef9..687abf098d16804365bd2c3b0d1dd13940809f52 100644
--- a/src/app/structure-list/components/card/card.component.scss
+++ b/src/app/structure-list/components/card/card.component.scss
@@ -14,17 +14,18 @@
.typeStructure {
color: $grey-3;
@include cn-regular-16;
+ font-style: italic;
}
.structure-name {
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/modal-filter/modal-filter.component.scss b/src/app/structure-list/components/modal-filter/modal-filter.component.scss
index 7c31c30f909c716d340f176b01068b6abbe82c41..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
@@ -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.scss b/src/app/structure-list/components/structure-details/structure-details.component.scss
index d8ea58095fe9cb0a3d540a8df867ecea8a8cc989..5759b6c02e443a3c362e2a3eac1b0ff35c96f2d4 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,7 +64,7 @@ a {
h2 {
margin-top: 0;
margin-bottom: 5px;
- @include cn-regular-24;
+ @include cn-regular-26;
}
h3 {
margin: 0;
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 42eb58de7c62f987b51e1145ae1a2e0cb7a50de5..1e12ab4d7f70d18919ceff0cf1b10afb59ee230f 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
@@ -234,7 +234,7 @@ export class StructureDetailsComponent implements OnInit {
});
}
public canDelete(): boolean {
- if (this.profileService.isAdmin() || this.profileService.isLinkedToStructure(this.structure._id)) {
+ if (this.profileService.isAdmin()) {
return true;
}
return false;
diff --git a/src/app/utils/CustomRegExp.ts b/src/app/utils/CustomRegExp.ts
index 9fdba4fe0454ca916ba5a0efd6c1eb83e8c4d65d..a4c02ad0a9a8bc495115182f25daab47e7ee213e 100644
--- a/src/app/utils/CustomRegExp.ts
+++ b/src/app/utils/CustomRegExp.ts
@@ -17,7 +17,7 @@ export class CustomRegExp {
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]';
+ public static readonly NO_NULL_NUMBER: string = '[1-9]{1}[0-9]*?';
/**
* Validate a location request in search bar
*/
diff --git a/src/assets/ico/sprite.svg b/src/assets/ico/sprite.svg
index 02b1354760e00840facf75c55add0cc8d025ed09..83c868b1bff9b2e989663da7811db4c16992aa04 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="#a00000" 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>
@@ -80,7 +78,7 @@
</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" stroke="none"/>
+<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"/>
</symbol>
<symbol id="password" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
@@ -224,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">
diff --git a/src/assets/scss/_buttons.scss b/src/assets/scss/_buttons.scss
index ec08d9b85f7cd16f8657e20ca299f4e8392773ce..3827c75d7ab29535359c501c9248b833539852fb 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;
}
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/_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/styles.scss b/src/styles.scss
index b49b242956bde410f4485d779d14f859b9427b65..966c57e678d6dba6efa711125c2345e7b9c6a4d1 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -26,7 +26,6 @@ body {
min-height: 100vh;
min-height: -webkit-fill-available;
}
-
a {
color: $default-link-color;
text-decoration: none;
@@ -127,6 +126,9 @@ button {
padding-left: 16px;
padding-right: 10px;
@include btn-pass;
+ &.pass {
+ @include cn-regular-18;
+ }
}
.customCheck {
display: inline-grid;
@@ -193,6 +195,7 @@ button {
position: absolute;
content: '';
top: 0;
+ left: 0;
background-color: $modal-background;
.modal {
max-height: 90%;