diff --git a/src/app/shared/components/modal-confirmation/modal-confirmation.component.html b/src/app/shared/components/modal-confirmation/modal-confirmation.component.html
index fe2cf5816fa77d06b2bc2b360e1338ee3f766c0f..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,10 +1,10 @@
-<div *ngIf="openned" class="modalExitContainer">
+<div *ngIf="openned" class="modalBackground">
<div class="modal">
<div class="contentModal" fxLayout="column" fxLayoutAlign="space-around center">
<h3>ATTENTION</h3>
<p>{{ content }}</p>
<div class="footerModal" fxLayout="row" fxLayoutAlign="space-around center">
- <button class="btn leave" (click)="closeModal(true)">Confirmer</button>
+ <button class="btn confirm" (click)="closeModal(true)">Confirmer</button>
<button class="btn" (click)="closeModal(false)">Annuler</button>
</div>
</div>
diff --git a/src/app/shared/components/modal-confirmation/modal-confirmation.component.scss b/src/app/shared/components/modal-confirmation/modal-confirmation.component.scss
index 5411fa4841b56477a124bdf89333d329d2a31dfc..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,56 +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;
- .btn {
- background: $secondary-color;
- border-radius: 4px;
- outline: none;
- cursor: pointer;
- border: 0;
- color: $white;
- height: 40px;
- @include btn-bold;
- width: 149px;
- &.leave {
- background: none;
- color: $grey-1;
- text-decoration: underline;
- }
- }
- }
- }
- 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/signup-modal/signup-modal.component.html b/src/app/shared/components/signup-modal/signup-modal.component.html
index 537ae6c49902a679f7c79a6b2e33130f103f27ec..8c4387be2113284ca9cfaaf42e3ff861447dbb9b 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,69 @@
-<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" />
+ <img
+ *ngIf="f.email.invalid && f.email.value"
+ src="../../assets/form/notvalidate.svg"
+ alt="logo invalid"
+ />
+ </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"
+ />
+ <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="invalid" *ngIf="authFailed">Identifiant ou mot de passe invalide</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..0caa3caa413129e3a34ed8b00cea74c1668ae072 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,66 @@
@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;
+}
+h3 {
+ @include cn-bold-24;
+ color: $black;
+ margin-top: 0;
}
-.oModal {
- display: block;
+.form {
+ max-width: 391px;
+ margin: auto;
}
-.ico-close-wrapper {
- position: absolute;
- top: -10px;
- right: -10px;
+
+.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;
+ }
+ }
}
-.ico-close-details {
- opacity: 1;
+.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..2f8a77badca5ccd136e1d49e42fa144158fcca94 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'] || '/';
@@ -41,6 +48,7 @@ export class SignUpModalComponent implements OnInit {
}
public closeModal(): void {
+ console.log('ok');
this.closed.emit(true);
}
@@ -60,10 +68,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 +83,8 @@ export class SignUpModalComponent implements OnInit {
}
);
}
+
+ toggleShowPassword(): void {
+ this.isShowPassword = !this.isShowPassword;
+ }
}
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..2efc432c2dcdd2fdbc2308c8b079cb1e29fbf023 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,52 @@ 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 {
+ .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;
+ margin-top: 50vh;
+ transform: translateY(-50%);
+ }
+}