Skip to content
Snippets Groups Projects
Commit 508364f3 authored by Augustin LECONTE's avatar Augustin LECONTE
Browse files

Merge branch 'feat/US11-create-user-account' into 'dev' 

feat/US11-create-user-account

See merge request web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client!169
parents 93a21c27 2e274e05
No related branches found
No related tags found
3 merge requests!180release V1.10.0,!178release V1.10.0,!169feat/US11-create-user-account
Hide whitespace changes
Inline Side-by-side
Showing
with 151 additions and 27 deletions
src/app/form/structure-form/form.component.html
+ 86
− 6
View file @ 508364f3
......@@ -211,8 +211,8 @@
(input)="setValidationsForm()"
(keyup)="verifyUserExist($event.target.value)"
formControlName="email"
placeholder="thomas@grandlyon.com"
class="form-input"
placeholder="exemple: prenom.nom@grandlyon.com"
class="form-input email-placeholder"
[readonly]="isAccountMode"
[ngClass]="{ disabled: isAccountMode }"
/>
......@@ -235,10 +235,90 @@
<p
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
et un chiffre.
</p>
></p>
Le mot de passe doit contenir au minimum :
<ul>
<li
[ngClass]="{
invalid: accountForm.get('password').value.length < 8,
valid: accountForm.get('password').value.length >= 8
}"
>
<app-svg-icon
*ngIf="accountForm.get('password').value.length >= 8"
[iconClass]="'validation'"
[type]="'form'"
[icon]="'validate'"
></app-svg-icon>
<app-svg-icon
*ngIf="accountForm.get('password').value.length < 8"
[iconClass]="'validation'"
[type]="'form'"
[icon]="'notValidate'"
></app-svg-icon>
<p>8 caractères</p>
</li>
<li
[ngClass]="{
invalid: !checkIfPasswordHasSpecialChar(accountForm.get('password').value),
valid: checkIfPasswordHasSpecialChar(accountForm.get('password').value)
}"
>
<app-svg-icon
*ngIf="checkIfPasswordHasSpecialChar(accountForm.get('password').value)"
[iconClass]="'validation'"
[type]="'form'"
[icon]="'validate'"
></app-svg-icon>
<app-svg-icon
*ngIf="!checkIfPasswordHasSpecialChar(accountForm.get('password').value)"
[iconClass]="'validation'"
[type]="'form'"
[icon]="'notValidate'"
></app-svg-icon>
<p>dont un caractère spécial</p>
</li>
<li
[ngClass]="{
invalid: !checkIfPasswordHasUpperCase(accountForm.get('password').value),
valid: checkIfPasswordHasUpperCase(accountForm.get('password').value)
}"
>
<app-svg-icon
*ngIf="checkIfPasswordHasUpperCase(accountForm.get('password').value)"
[iconClass]="'validation'"
[type]="'form'"
[icon]="'validate'"
></app-svg-icon>
<app-svg-icon
*ngIf="!checkIfPasswordHasUpperCase(accountForm.get('password').value); s"
[iconClass]="'validation'"
[type]="'form'"
[icon]="'notValidate'"
></app-svg-icon>
<p>un caractère en majuscule</p>
</li>
<li
[ngClass]="{
invalid: !checkIfPasswordHasDigit(accountForm.get('password').value),
valid: checkIfPasswordHasDigit(accountForm.get('password').value)
}"
>
<app-svg-icon
*ngIf="checkIfPasswordHasDigit(accountForm.get('password').value)"
[iconClass]="'validation'"
[type]="'form'"
[icon]="'validate'"
></app-svg-icon>
<app-svg-icon
*ngIf="!checkIfPasswordHasDigit(accountForm.get('password').value)"
[iconClass]="'validation'"
[type]="'form'"
[icon]="'notValidate'"
></app-svg-icon>
<p>et un chiffre.</p>
</li>
</ul>
<div fxLayout="row" fxLayoutGap="13px">
<input
[type]="isShowPassword ? 'text' : 'password'"
......
src/app/form/structure-form/form.component.scss
+ 22
− 0
View file @ 508364f3
......@@ -289,6 +289,24 @@ h3 {
div {
height: 44px;
}
ul {
padding-left: 0;
}
li {
display: flex;
margin-left: 1%;
font-size: small;
p {
margin-left: 10px;
margin-top: 12px;
}
&.valid {
color: $green;
}
&.invalid {
color: $red;
}
}
.addressRow {
height: auto;
.validateIcon {
......@@ -298,6 +316,10 @@ h3 {
}
input {
margin-top: 4px;
&.email-placeholder::placeholder {
color: #cacccb;
font-style: italic;
}
&.phone {
width: 205px;
}
......
src/app/form/structure-form/form.component.ts
+ 13
− 7
View file @ 508364f3
......@@ -1018,12 +1018,18 @@ export class FormComponent implements OnInit {
this.router.navigateByUrl('acteurs');
}
public shouldDisplayPage(index: number): boolean {
// handle OtherAccompaniment
if (index == this.pageTypeEnum.structureOtherAccompaniment) {
if (this.structureForm.value.proceduresAccompaniment.includes('autres')) return true;
else return false;
}
return true;
public checkIfPasswordHasSpecialChar(password: string): boolean {
if (password.match(CustomRegExp.SPECHAR)) return true;
return false;
}
public checkIfPasswordHasDigit(password: string): boolean {
if (password.match(CustomRegExp.DIGIT)) return true;
return false;
}
public checkIfPasswordHasUpperCase(password): boolean {
if (password.match(CustomRegExp.UPPERCASE)) return true;
return false;
}
}
src/app/shared/components/signup-modal/signup-modal.component.html
+ 8
− 7
View file @ 508364f3
<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>Se connecter</h3>
<div class="modalTitle">
<h3>Se connecter</h3>
<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>
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
<div class="form-group" fxLayout="column">
<label for="email">Courriel du compte</label>
......
src/app/shared/components/signup-modal/signup-modal.component.scss
+ 10
− 6
View file @ 508364f3
......@@ -4,8 +4,15 @@
@import '../../../../assets/scss/z-index';
@import '../../../../assets/scss/hyperlink';
.ico-close {
width: 100%;
.modalTitle {
display: flex;
h3 {
margin-top: 6%;
width: 50%;
}
.ico-close {
width: 50%;
}
}
.incorrectId {
......@@ -20,6 +27,7 @@ h3 {
.form {
max-width: 391px;
margin: auto;
margin-bottom: 8%;
}
.form-group {
......@@ -36,7 +44,6 @@ h3 {
}
input {
width: 100%;
margin-right: 39px;
}
&.password {
margin-bottom: 39px;
......@@ -45,14 +52,12 @@ h3 {
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;
......@@ -61,7 +66,6 @@ h3 {
}
}
.footerModal {
padding-right: 39px;
button {
width: 100% !important;
&.invalid {
......
src/app/utils/CustomRegExp.ts
+ 12
− 1
View file @ 508364f3
......@@ -2,7 +2,18 @@ export class CustomRegExp {
/**
* Validate a password (at least 8 characters, 1 uppercase letter, 1 lowercase letter, 1 number, and 1 special character)
*/
public static readonly PASSWORD: RegExp = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[*.! @#$%^&(){}\[\]:;<>,?\/\\~_+\-=|])(?=.{8,})/; //NOSONAR
public static readonly DIGIT: RegExp = /^(?=.*[0-9])/; //NOSONAR
public static readonly SPECHAR: RegExp = /^(?=.*[*.! @#$%^&(){}\[\]:;<>,?\/\\~_+\-=|])/; //NOSONAR
public static readonly UPPERCASE: RegExp = /^(?=.*[A-Z])/; //NOSONAR
public static readonly LOWERCASE: RegExp = /^(?=.*[a-z])/; //NOSONAR
public static readonly MINLENGTH: RegExp = /^(?=.{8,})/; //NOSONAR
public static readonly PASSWORD: RegExp = new RegExp(
CustomRegExp.LOWERCASE.source +
CustomRegExp.UPPERCASE.source +
CustomRegExp.DIGIT.source +
CustomRegExp.SPECHAR.source +
CustomRegExp.MINLENGTH.source
); //NOSONAR
/**
* Validate an email
*/
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment