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 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/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/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/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..40a51cd1c231fe665e337bcefd1174a2c4678e6d 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,54 @@ 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;
+ margin-top: 50vh;
+ transform: translateY(-50%);
+ }
+}