diff --git a/src/app/form/form.component.html b/src/app/form/form.component.html
index 8f4e22987f51292ced36f519b919aaa130c04de5..1a43f149278f9500d2967a3a6410262adb489c9f 100644
--- a/src/app/form/form.component.html
+++ b/src/app/form/form.component.html
@@ -142,8 +142,17 @@
</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" />
+ <input
+ type="text"
+ (input)="setValidationsForm()"
+ (keyup)="verifyUserExist($event.target.value)"
+ 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"
@@ -155,7 +164,7 @@
<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
diff --git a/src/app/form/form.component.scss b/src/app/form/form.component.scss
index edf2595145908a9dd959bd20d5452d6765804907..17ced3d6b57f7035ff1dd40de552ebfad0d56c4a 100644
--- a/src/app/form/form.component.scss
+++ b/src/app/form/form.component.scss
@@ -158,7 +158,7 @@ h3 {
margin-top: 10px;
margin-bottom: 0;
@include cn-regular-18;
- &.password {
+ &.special {
@include cn-regular-14;
color: $grey-3;
diff --git a/src/app/form/form.component.ts b/src/app/form/form.component.ts
index a3b3c84dcb4b09db7517a3a4a386e15d18286005..87b23eb3b33543276edc0a4b5b7d675c3c2bd295 100644
--- a/src/app/form/form.component.ts
+++ b/src/app/form/form.component.ts
@@ -777,4 +777,15 @@ export class FormComponent implements OnInit {
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();
+ }
+ });
+ }
+ }
}
diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts
index 2c2af037e272ea29ebf75f6a677e20ca3471e912..aab75d532c60f128d51ad51bfb731bb4f8c3a9c1 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 { NavigationEnd, NavigationStart, Router } from '@angular/router';
import { ProfileService } from '../profile/services/profile.service';
import { AuthService } from '../services/auth.service';
@@ -17,8 +17,7 @@ export class HeaderComponent implements OnInit {
constructor(private authService: AuthService, private profileService: ProfileService, private router: Router) {
this.router.events.subscribe((event) => {
- if (event instanceof NavigationStart) {
- // Show loading indicator.curr
+ if (event instanceof NavigationEnd) {
this.currentRoute = event.url;
}
});
diff --git a/src/app/models/structure.model.ts b/src/app/models/structure.model.ts
index 8ff53a5ee4e343682c2c4f4a55d986aac6688221..0e107ba8ac59f949678edc04d93d171e3ca50213 100644
--- a/src/app/models/structure.model.ts
+++ b/src/app/models/structure.model.ts
@@ -175,4 +175,8 @@ export class Structure {
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/profile/services/profile.service.ts b/src/app/profile/services/profile.service.ts
index a196203fda3801b7d685b23b35d24e1a6869d95f..849d148b45d4d0ca414206768b4a165ac7b17985 100644
--- a/src/app/profile/services/profile.service.ts
+++ b/src/app/profile/services/profile.service.ts
@@ -67,4 +67,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/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.ts b/src/app/shared/components/create-account-form/create-account-form.component.ts
index 4363e6774c5705d84b8a9091a448cb04b24a15dd..702924838d04cc8c4fb06b91dfaf88d291e8cb70 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 { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms';
+import { Regex } from '../../enum/regex.enum';
import { MustMatch } from '../../validator/form';
@Component({
@@ -11,14 +12,16 @@ 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),
+ email: new FormControl('', [Validators.required, Validators.pattern(Regex.email)]),
+ name: new FormControl('', [Validators.required, Validators.pattern(Regex.textWithoutNumber)]),
+ surname: new FormControl('', [Validators.required, Validators.pattern(Regex.textWithoutNumber)]),
phone: new FormControl('', [Validators.required, Validators.pattern('([0-9]{2} ){4}[0-9]{2}')]), //NOSONAR
password: new FormControl('', [
Validators.required,
@@ -30,6 +33,11 @@ export class CreateAccountFormComponent implements OnInit {
);
}
+ // 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 +58,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/modal-confirmation/modal-confirmation.component.html b/src/app/shared/components/modal-confirmation/modal-confirmation.component.html
index 603c74f4163f64f672d44d131319ea0b06fa66f8..d2bc29320a9ffd3cafaf17d0b5d1bc5597795618 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-primary small leave" (click)="closeModal(true)">Confirmer</button>
- <button class="btn-primary small" (click)="closeModal(false)">Annuler</button>
+ <button class="btn confirm" (click)="closeModal(true)">Confirmer</button>
+ <button class="btn" (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 7e11f56593b5c40e3d37fd2285fff8a901e121d1..5f111d0b57f48fb94e8b7d3c564436bf76760667 100644
--- a/src/app/shared/components/modal-confirmation/modal-confirmation.component.scss
+++ b/src/app/shared/components/modal-confirmation/modal-confirmation.component.scss
@@ -3,45 +3,12 @@
@import '../../../../assets/scss/shapes';
@import '../../../../assets/scss/z-index';
-.modalExitContainer {
- width: 100%;
- height: 100%;
- z-index: $modal-confirmation-z-index;
- position: absolute;
- content: '';
- top: 0;
- background-color: $modal-background;
- .modal {
- .contentModal {
- width: 100%;
- background: $white;
- padding: 35px 20px 18px 20px;
- h3 {
- @include cn-bold-18;
- color: $orange-warning;
- }
- p {
- @include cn-bold-16;
- color: $grey-1;
- text-align: center;
- }
- .footerModal {
- width: 100%;
- margin-top: 14px;
- @include cn-bold-16;
- .leave {
- background: none;
- color: $grey-1;
- text-decoration: underline;
- }
- }
- }
- width: 350px;
- margin: auto;
- border-radius: 6px;
- @include background-hash;
- border: 1px solid $grey-4;
- margin-top: 50vh;
- transform: translateY(-50%);
- }
+h3 {
+ @include cn-bold-18;
+ color: $orange-warning;
+}
+p {
+ @include cn-bold-16;
+ color: $grey-1;
+ text-align: center;
}
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..529354b01162d978a359f67b07f344afaee3ddd9 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-24;
+ 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..91900cf36312f7a593f372e86e14eb75217f1e3d 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="invalid" *ngIf="authFailed">Identifiant ou mot de passe invalide</div>
+ </div>
+ <div class="footerModal" fxLayout="row" fxLayoutAlign="space-around center">
+ <button class="btn confirm" (click)="swithToResetPassword()">Mot de passe oublié</button>
+ <button
+ type="submit"
+ class="btn"
+ [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..e5ae20ec96de3a93f39dd838a9960550b74b7892 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,76 @@
@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;
- }
+.invalid {
+ color: $orange-warning;
}
-.oModal {
- display: block;
+h3 {
+ @include cn-bold-24;
+ 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..eb03ae8924c1ad037628ecdb7a4cbfe776bb0a59 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 { Regex } from '../../enum/regex.enum';
@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,14 @@ export class SignUpModalComponent implements OnInit {
ngOnInit(): void {
this.loginForm = this.formBuilder.group({
- username: ['', Validators.required],
- password: ['', Validators.required],
+ email: ['', [Validators.required, Validators.pattern(Regex.email)]],
+ password: [
+ '',
+ [
+ Validators.required,
+ Validators.pattern(/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/), //NOSONAR
+ ],
+ ],
});
// get return url from route parameters or default to '/'
this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
@@ -60,10 +67,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 +82,8 @@ export class SignUpModalComponent implements OnInit {
}
);
}
+
+ public toggleShowPassword(): void {
+ this.isShowPassword = !this.isShowPassword;
+ }
}
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 12b27e22e5be3ebea69dcd32ddde30642a094d22..f11c315b480f31a5532f9192a06fa23c950ddeae 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
@@ -55,6 +55,47 @@
>{{ 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>
@@ -155,7 +196,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"
@@ -171,10 +212,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>
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 adcac606abfb0ca0b3b2e6de1810705b2144f23c..9602090007224539255c7f80cdc8ac999a50abd6 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
@@ -32,7 +32,9 @@ export class StructureDetailsComponent implements OnInit {
public tclStopPoints: TclStopPoint[] = [];
public printMode = false;
public isOtherSection = false;
+ public showForm = false;
public isClaimed: boolean = null;
+ Z;
public isLoading: boolean = false;
public currentProfile: User = null;
public deleteModalOpenned = false;
@@ -81,7 +83,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;
}
}
diff --git a/src/assets/form/sprite.svg b/src/assets/form/sprite.svg
index 4b583444aee071e61035d2d63fdc558c69f37ed0..e81f41f7b908f8a64cd22c6b33c646fd3144bc84 100644
--- a/src/assets/form/sprite.svg
+++ b/src/assets/form/sprite.svg
@@ -324,4 +324,16 @@
<path d="M16 6L8 12.5L16 19" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
</symbol>
+<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>
+
</svg>
\ No newline at end of file
diff --git a/src/assets/ico/sprite.svg b/src/assets/ico/sprite.svg
index 7242edba1b355c50c202b50750613300327db6bf..b0ea458404cd7ef25ebac03983fa057927ce59d6 100644
--- a/src/assets/ico/sprite.svg
+++ b/src/assets/ico/sprite.svg
@@ -92,6 +92,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"/>
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/_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/styles.scss b/src/styles.scss
index 25c9dd89ed29725762f2fcff2a38ea94fe8b6225..c8e77507a8a1e050f7078bdfd108ee3ed0df8308 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';
@@ -182,3 +183,56 @@ button {
display: none !important;
}
}
+
+// Modal
+
+.modalBackground {
+ width: 100%;
+ height: 100%;
+ z-index: $modal-z-index;
+ position: absolute;
+ content: '';
+ top: 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;
+ border: 1px solid $grey-4;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
+}