continuation de la partie admin
This commit is contained in:
MiharyR
parent
de939b47f1
commit
91171a3765
35 changed files with 840 additions and 162 deletions
|
|
@ -0,0 +1,145 @@
|
|||
<div class="myContainer">
|
||||
|
||||
<!-- Rôle -->
|
||||
<div class="matRadioGroupContainer">
|
||||
<mat-radio-group [(ngModel)]="user.role.name" (change)="hasError=false; errorMessage = '';">
|
||||
<mat-radio-button value="user"> Utilisateur </mat-radio-button><br>
|
||||
<mat-radio-button value="advertiser"> Annonceur </mat-radio-button><br>
|
||||
<mat-radio-button value="admin"> Admin </mat-radio-button>
|
||||
</mat-radio-group>
|
||||
</div><br>
|
||||
|
||||
<!-- divider -->
|
||||
<mat-divider></mat-divider><br>
|
||||
|
||||
<!-- userBlock or advertiserOrAdminBlock -->
|
||||
<div *ngIf="user.role.name === 'user'; then userBlock"></div>
|
||||
<div *ngIf="(user.role.name === 'advertiser' || user.role.name === 'admin'); then advertiserOrAdminBlock"></div>
|
||||
|
||||
<!-- divider -->
|
||||
<mat-divider *ngIf="user.role.name !== ''" style="margin-top: 10px;"></mat-divider><br>
|
||||
|
||||
<!-- Error -->
|
||||
<div *ngIf="hasError" style="text-align: center; margin-bottom: 20px;">
|
||||
<span class="mat-error">{{errorMessage}}</span>
|
||||
</div>
|
||||
|
||||
<!-- Boutons -->
|
||||
<div style="width: 100%; text-align: right">
|
||||
<button mat-button (click)="this.dialogRef.close(null)"> Annuler </button>
|
||||
<button mat-button (click)="onEnregistrer()" [disabled]="user.role.name === ''" > Enregistrer </button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ------------------------------------------------------------------------------------------------------------------- -->
|
||||
|
||||
|
||||
<!-- userBlock -->
|
||||
<ng-template #userBlock>
|
||||
|
||||
<!-- photo de profil -->
|
||||
<div style="text-align: center">
|
||||
<img [src]="user.profilePictureUrl" onerror="this.onerror=null; this.src='assets/profil.png'"><br>
|
||||
<input title="lien vers image" type="text" [(ngModel)]="user.profilePictureUrl" style="width: 90%">
|
||||
</div><br>
|
||||
|
||||
<div class="row">
|
||||
|
||||
<!-- Colonne gauche -->
|
||||
<div class="col-4 leftCol">
|
||||
|
||||
<!-- Email -->
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Email</mat-label>
|
||||
<input matInput type="email" [(ngModel)]="user.mail" required>
|
||||
</mat-form-field><br>
|
||||
|
||||
<!-- Login -->
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Login</mat-label>
|
||||
<input matInput type="text" [(ngModel)]="user.login" required>
|
||||
</mat-form-field><br>
|
||||
|
||||
<!-- Mot de passe -->
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Mot de passe</mat-label>
|
||||
<input matInput type="password" [(ngModel)]="password" required>
|
||||
</mat-form-field><br>
|
||||
|
||||
<!-- Confirmation mot de passe -->
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Confirmation mot de passe</mat-label>
|
||||
<input matInput type="password" [(ngModel)]="confirmPassword" required>
|
||||
</mat-form-field>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Colonne droite -->
|
||||
<div class="col-8">
|
||||
|
||||
<!-- dateOfBirth -->
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Date de naissance</mat-label>
|
||||
<input matInput type="date"
|
||||
[ngModel] ="user.dateOfBirth | date:'yyyy-MM-dd'"
|
||||
(ngModelChange)="user.dateOfBirth = $event">
|
||||
</mat-form-field><br>
|
||||
|
||||
<!-- gender -->
|
||||
<mat-radio-group [(ngModel)]="user.gender">
|
||||
<mat-radio-button value="man"> Homme </mat-radio-button>
|
||||
<mat-radio-button value="woman"> Femme </mat-radio-button>
|
||||
</mat-radio-group>
|
||||
<br><br>
|
||||
|
||||
<!-- interests -->
|
||||
<app-input-interests-admin
|
||||
[myInterests]="user.interests"
|
||||
(eventEmitter)="onEventInputInterests($event)"></app-input-interests-admin>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
|
||||
<!-- ------------------------------------------------------------------------------------------------------------------- -->
|
||||
|
||||
|
||||
<!-- advertiserOrAdminBlock -->
|
||||
<ng-template #advertiserOrAdminBlock>
|
||||
<div style="text-align: center">
|
||||
|
||||
<!-- photo de profil -->
|
||||
<div style="text-align: center">
|
||||
<img [src]="user.profilePictureUrl" onerror="this.onerror=null; this.src='assets/profil.png'"><br>
|
||||
<input title="lien vers image" type="text" [(ngModel)]="user.profilePictureUrl" style="width: 90%">
|
||||
</div><br>
|
||||
|
||||
<!-- email -->
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Email</mat-label>
|
||||
<input matInput type="text" [(ngModel)]="user.mail">
|
||||
</mat-form-field><br>
|
||||
|
||||
<!-- login -->
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Login</mat-label>
|
||||
<input matInput type="text" [(ngModel)]="user.login">
|
||||
</mat-form-field><br>
|
||||
|
||||
<!-- mot de passe -->
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Mot de passe</mat-label>
|
||||
<input matInput type="password" [(ngModel)]="password">
|
||||
</mat-form-field><br>
|
||||
|
||||
<!-- confirmation mot de passe -->
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Confirmation nouveau mot de passe</mat-label>
|
||||
<input matInput type="password" [(ngModel)]="confirmPassword">
|
||||
</mat-form-field>
|
||||
|
||||
</div>
|
||||
</ng-template>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
.myContainer {
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
img {
|
||||
margin: 0px 0px 10px 0px;
|
||||
width: 10%;
|
||||
height: 10%;
|
||||
border: solid 2px black;
|
||||
border-radius: 50%;
|
||||
font-size: xxx-large;
|
||||
}
|
||||
|
||||
.leftCol {
|
||||
border-right: solid 1px #dcdcdc;
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { PopupCreateUserComponent } from './popup-create-user.component';
|
||||
|
||||
describe('PopupCreateUserComponent', () => {
|
||||
let component: PopupCreateUserComponent;
|
||||
let fixture: ComponentFixture<PopupCreateUserComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ PopupCreateUserComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(PopupCreateUserComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
import {Component, Inject, OnInit} from '@angular/core';
|
||||
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
|
||||
import {User} from "../../../utils/interfaces/user";
|
||||
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-popup-create-user',
|
||||
templateUrl: './popup-create-user.component.html',
|
||||
styleUrls: ['./popup-create-user.component.scss']
|
||||
})
|
||||
export class PopupCreateUserComponent implements OnInit
|
||||
{
|
||||
user: User;
|
||||
hasError: boolean = false;
|
||||
errorMessage: string = "";
|
||||
password: string = "";
|
||||
confirmPassword: string = "";
|
||||
|
||||
|
||||
constructor( public dialogRef: MatDialogRef<PopupCreateUserComponent>,
|
||||
@Inject(MAT_DIALOG_DATA) public data ) { }
|
||||
|
||||
|
||||
// Initialise l'utilisateur qui va être créé
|
||||
ngOnInit(): void
|
||||
{
|
||||
this.user = {
|
||||
_id: "",
|
||||
login: "",
|
||||
hashPass: "",
|
||||
mail: "",
|
||||
role: {
|
||||
name: "",
|
||||
permission: 0,
|
||||
},
|
||||
profilePictureUrl: "",
|
||||
dateOfBirth: null,
|
||||
gender: "man",
|
||||
interests: [],
|
||||
isActive: false,
|
||||
isAccepted: false,
|
||||
createdAt: new Date(),
|
||||
updatedAt: new Date(),
|
||||
lastConnexion: new Date()
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
// Crée le nouvel utilisateur
|
||||
onEnregistrer(): void
|
||||
{
|
||||
this.checkField();
|
||||
|
||||
if(!this.hasError)
|
||||
{
|
||||
this.user.hashPass = this.hashage(this.password);
|
||||
this.dialogRef.close(this.user);
|
||||
// VRAI CODE ...
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Check les champs saisies par l'utilisateur
|
||||
checkField(): void
|
||||
{
|
||||
if(this.user.login.length === 0) {
|
||||
this.errorMessage = "Veuillez remplir le champ 'login'.";
|
||||
this.hasError = true;
|
||||
}
|
||||
else if(this.user.mail.length === 0) {
|
||||
this.errorMessage = "Veuillez remplir le champ 'email'.";
|
||||
this.hasError = true;
|
||||
}
|
||||
else if(!this.isValidEmail(this.user.mail)) {
|
||||
this.errorMessage = "Email invalide";
|
||||
this.hasError = true;
|
||||
}
|
||||
else if(this.password.length === 0) {
|
||||
this.errorMessage = "Veuillez remplir le champ 'mot de passe'.";
|
||||
this.hasError = true;
|
||||
}
|
||||
else if(this.password !== this.confirmPassword) {
|
||||
this.errorMessage = "Le mot de passe est différent de sa confirmation.";
|
||||
this.hasError = true;
|
||||
}
|
||||
else {
|
||||
this.errorMessage = "" ;
|
||||
this.hasError = false;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Indique si email a bien le format d'un email
|
||||
isValidEmail(email): boolean
|
||||
{
|
||||
let re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
|
||||
return re.test(email);
|
||||
}
|
||||
|
||||
|
||||
// Récupère la liste des centres d'intérets (car celle-ci est remplie à l'aide d'un component intermédiaire)
|
||||
onEventInputInterests(myInterets: string[]): void
|
||||
{
|
||||
this.user.interests = myInterets;
|
||||
}
|
||||
|
||||
|
||||
// Fonction de hashage (faible)
|
||||
hashage(input: string): string
|
||||
{
|
||||
let hash = 0;
|
||||
for (let i = 0; i < input.length; i++) {
|
||||
let ch = input.charCodeAt(i);
|
||||
hash = ((hash << 5) - hash) + ch;
|
||||
hash = hash & hash;
|
||||
}
|
||||
return hash.toString();
|
||||
}
|
||||
|
||||
}
|
||||
Reference in a new issue