realisation de la page register
This commit is contained in:
MiharyR
parent
89e174a28d
commit
d55287531b
17 changed files with 495 additions and 192 deletions
|
|
@ -56,9 +56,11 @@ import { PopupUpdateAdvertiserComponent } from './advertiser/myProfil/popup-upda
|
|||
import { PopupUpdateUserComponent } from './user/myProfil/popup-update-user/popup-update-user.component';
|
||||
import { NavbarBeforeConnexionComponent } from './beforeConnexion/navbar-before-connexion/navbar-before-connexion.component';
|
||||
import {MatRadioModule} from "@angular/material/radio";
|
||||
import { InputInterestsComponent } from './user/myProfil/input-interests/input-interests.component';
|
||||
import { InputInterestsProfilComponent } from './user/myProfil/input-interests-profil/input-interests-profil.component';
|
||||
import { PageProfilAdminComponent } from './admin/myProfil/page-profil-admin/page-profil-admin.component';
|
||||
import { PopupUpdateAdminComponent } from './admin/myProfil/popup-update-admin/popup-update-admin.component';
|
||||
import {MatStepperModule} from "@angular/material/stepper";
|
||||
import { InputInterestsRegisterComponent } from './beforeConnexion/register/input-interests-register/input-interests-register.component';
|
||||
|
||||
|
||||
@NgModule({
|
||||
|
|
@ -97,9 +99,10 @@ import { PopupUpdateAdminComponent } from './admin/myProfil/popup-update-admin/p
|
|||
PopupUpdateAdvertiserComponent,
|
||||
PopupUpdateUserComponent,
|
||||
NavbarBeforeConnexionComponent,
|
||||
InputInterestsComponent,
|
||||
InputInterestsProfilComponent,
|
||||
PageProfilAdminComponent,
|
||||
PopupUpdateAdminComponent,
|
||||
InputInterestsRegisterComponent,
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
|
|
@ -125,7 +128,8 @@ import { PopupUpdateAdminComponent } from './admin/myProfil/popup-update-admin/p
|
|||
MatAutocompleteModule,
|
||||
MatSelectModule,
|
||||
IvyCarouselModule,
|
||||
MatRadioModule
|
||||
MatRadioModule,
|
||||
MatStepperModule
|
||||
],
|
||||
providers: [],
|
||||
bootstrap: [AppComponent]
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.navbar {
|
||||
background-color: black;
|
||||
height: 75px;
|
||||
font-size: x-large;
|
||||
height: 50px;
|
||||
font-size: large;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
font-family: cursive;
|
||||
font-weight: bold;
|
||||
//font-style: oblique 90deg;
|
||||
font-size: xxx-large;
|
||||
font-size: xx-large;
|
||||
margin-left: 30px;
|
||||
color: white;
|
||||
}
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
|
||||
// Bonton deconnexion
|
||||
.btnDeconnexion {
|
||||
font-size: x-large;
|
||||
font-size: large;
|
||||
margin: 0px 10px 0px 10px
|
||||
}
|
||||
.btnDeconnexion:hover {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { InputInterestsRegisterComponent } from './input-interests-register.component';
|
||||
|
||||
describe('InputInterestsRegisterComponent', () => {
|
||||
let component: InputInterestsRegisterComponent;
|
||||
let fixture: ComponentFixture<InputInterestsRegisterComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ InputInterestsRegisterComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(InputInterestsRegisterComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
|
||||
import {COMMA, ENTER} from "@angular/cdk/keycodes";
|
||||
import {FormControl} from "@angular/forms";
|
||||
import {Observable} from "rxjs";
|
||||
import {FictitiousDatasService} from "../../../utils/services/fictitiousDatas/fictitious-datas.service";
|
||||
import {MessageService} from "../../../utils/services/message/message.service";
|
||||
import {map, startWith} from "rxjs/operators";
|
||||
import {MatChipInputEvent} from "@angular/material/chips";
|
||||
import {MatAutocompleteSelectedEvent} from "@angular/material/autocomplete";
|
||||
|
||||
@Component({
|
||||
selector: 'app-input-interests-register',
|
||||
templateUrl: './input-interests-register.component.html',
|
||||
styleUrls: ['./input-interests-register.component.scss']
|
||||
})
|
||||
export class InputInterestsRegisterComponent implements OnInit
|
||||
{
|
||||
selectable = true;
|
||||
removable = true;
|
||||
separatorKeysCodes: number[] = [ENTER, COMMA];
|
||||
formControl = new FormControl();
|
||||
filteredInterests: Observable<string[]>;
|
||||
@Input() myInterests: string[] = [];
|
||||
allInterests: string[] = [];
|
||||
@Output() eventEmitter = new EventEmitter<string[]>();
|
||||
@ViewChild('tagInput') tagInput: ElementRef<HTMLInputElement>;
|
||||
|
||||
|
||||
constructor( private fictitiousDatasService: FictitiousDatasService,
|
||||
private messageService: MessageService ) {}
|
||||
|
||||
|
||||
ngOnInit(): void
|
||||
{
|
||||
this.filteredInterests = this.formControl.valueChanges.pipe(
|
||||
startWith(null),
|
||||
map((fruit: string | null) => fruit ? this._filter(fruit) : this.allInterests.slice()));
|
||||
|
||||
// --- FAUX CODE ---
|
||||
this.allInterests = this.fictitiousDatasService.getTags();
|
||||
this.allInterests.sort();
|
||||
}
|
||||
|
||||
|
||||
add(event: MatChipInputEvent): void
|
||||
{
|
||||
const value = (event.value || '').trim();
|
||||
if (value && (this.allInterests.indexOf(value) !== -1))
|
||||
{
|
||||
this.myInterests.push(value);
|
||||
event.chipInput!.clear();
|
||||
this.formControl.setValue(null);
|
||||
this.eventEmitter.emit(this.myInterests);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
remove(tag: string): void
|
||||
{
|
||||
const index = this.myInterests.indexOf(tag);
|
||||
if (index >= 0) this.myInterests.splice(index, 1);
|
||||
this.eventEmitter.emit(this.myInterests);
|
||||
}
|
||||
|
||||
|
||||
selected(event: MatAutocompleteSelectedEvent): void
|
||||
{
|
||||
this.myInterests.push(event.option.viewValue);
|
||||
this.tagInput.nativeElement.value = '';
|
||||
this.formControl.setValue(null);
|
||||
this.eventEmitter.emit(this.myInterests);
|
||||
}
|
||||
|
||||
|
||||
private _filter(value: string): string[]
|
||||
{
|
||||
const filterValue = value.toLowerCase();
|
||||
return this.allInterests.filter(fruit => fruit.toLowerCase().includes(filterValue));
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,71 +1,217 @@
|
|||
<div [class]="themeService.getClassTheme()">
|
||||
<div class="myContainer">
|
||||
<div class="bg">
|
||||
|
||||
<!-- navbar -->
|
||||
<app-navbar-before-connexion pour="register"></app-navbar-before-connexion>
|
||||
|
||||
<!-- stepper -->
|
||||
<mat-stepper [linear]=true>
|
||||
|
||||
|
||||
<div class="wrapper">
|
||||
<div id="formContent">
|
||||
|
||||
<!-- Icon -->
|
||||
<div style="margin: 10px 0px 20px 0px">
|
||||
<img src="../../../../assets/logo.png" id="icon" alt="User Icon" style="margin-top: 20px"/>
|
||||
</div>
|
||||
|
||||
<!-- Login Form -->
|
||||
<!-- Choix du role -->
|
||||
<mat-step>
|
||||
<ng-template matStepLabel>Type de compte</ng-template>
|
||||
<form>
|
||||
<mat-radio-group [(ngModel)]="roleName">
|
||||
<mat-radio-button value="user">Utilisateur standard</mat-radio-button>
|
||||
<mat-radio-button value="advertiser">Annonceur</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
<div style="text-align: right;">
|
||||
<button mat-button matStepperNext>Suivant</button>
|
||||
</div>
|
||||
</form>
|
||||
</mat-step>
|
||||
|
||||
<!-- Infos personelles -->
|
||||
<mat-step>
|
||||
<ng-template matStepLabel>Compte & Informations personelles</ng-template>
|
||||
<form>
|
||||
<ng-template *ngIf="roleName==='user'; then userBlock else advertiserBlock"></ng-template>
|
||||
<div style="text-align: right;">
|
||||
<button mat-button matStepperPrevious>Précédent</button>
|
||||
<button mat-button matStepperNext (click)="checkField()">Suivant</button>
|
||||
</div>
|
||||
</form>
|
||||
</mat-step>
|
||||
|
||||
<!-- Derniere étape -->
|
||||
<mat-step>
|
||||
<!-- label -->
|
||||
<ng-template matStepLabel>
|
||||
<span (click)="checkField()">Dernière étape</span>
|
||||
</ng-template>
|
||||
<!-- texte affiché -->
|
||||
<ng-template *ngIf="!hasError ; then derniereEtapeCorrecte else derniereEtapeErronee"></ng-template>
|
||||
<!-- boutons -->
|
||||
<div style="text-align: right;">
|
||||
<button mat-button matStepperPrevious>Précédent</button>
|
||||
<button *ngIf="hasError" mat-button (click)="onValider()" disabled>Valider</button>
|
||||
<button *ngIf="!hasError" mat-button (click)="onValider()">Valider</button>
|
||||
</div>
|
||||
</mat-step>
|
||||
|
||||
</mat-stepper>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- -------------------------------------------------------------------------------------------------------- -->
|
||||
|
||||
|
||||
<!-- Info personnelles user -->
|
||||
<ng-template #userBlock>
|
||||
<br>
|
||||
<div class="row">
|
||||
|
||||
<!-- Colonne gauche -->
|
||||
<div class="col-5 leftCol">
|
||||
<h4>Compte</h4>
|
||||
|
||||
<!-- Login -->
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Login</mat-label>
|
||||
<input matInput type="text" [(ngModel)]="pseudo">
|
||||
</mat-form-field>
|
||||
<br>
|
||||
|
||||
<!-- Email -->
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Email</mat-label>
|
||||
<input matInput type="email" [(ngModel)]="email">
|
||||
</mat-form-field>
|
||||
<br>
|
||||
|
||||
<!-- Role -->
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Type de compte</mat-label>
|
||||
<mat-select [(ngModel)]="role">
|
||||
<mat-option value="user"> Utilisateur </mat-option>
|
||||
<mat-option value="advertiser"> Annonceur </mat-option>
|
||||
</mat-select>
|
||||
<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">
|
||||
<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">
|
||||
<input matInput type="password" [(ngModel)]="confirmPassword" required>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<!-- Colonne droite -->
|
||||
<div class="col-7">
|
||||
<h4>Informations personelles</h4>
|
||||
|
||||
<!-- Email -->
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Email</mat-label>
|
||||
<input matInput type="email" [(ngModel)]="user.mail" required>
|
||||
</mat-form-field>
|
||||
<br>
|
||||
|
||||
<!-- Message d'erreur -->
|
||||
<div *ngIf="hasError" style="text-align: center; margin-bottom: 20px;">
|
||||
<span class="mat-error"> {{errorMessage}} </span>
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- interests -->
|
||||
<app-input-interests-profil
|
||||
[myInterests]="user.interests"
|
||||
(eventEmitter)="onEventInputInterests($event)"></app-input-interests-profil>
|
||||
</div>
|
||||
|
||||
<!-- Valider -->
|
||||
<input type="submit" class="fadeIn fourth" value="S'inscrire" (click)="onRegister()">
|
||||
</form>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
|
||||
<!-- -------------------------------------------------------------------------------------------------------- -->
|
||||
|
||||
|
||||
<!-- Info personnelles advertiser -->
|
||||
<ng-template #advertiserBlock>
|
||||
|
||||
<!-- Login -->
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Login</mat-label>
|
||||
<input matInput type="text" [(ngModel)]="user.login" required>
|
||||
</mat-form-field>
|
||||
<br>
|
||||
|
||||
<!-- Email -->
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Email</mat-label>
|
||||
<input matInput type="email" [(ngModel)]="user.mail" 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>
|
||||
|
||||
</ng-template>
|
||||
|
||||
|
||||
<!-- -------------------------------------------------------------------------------------------------------- -->
|
||||
|
||||
|
||||
<!-- Dernière étape correcte -->
|
||||
<ng-template #derniereEtapeCorrecte>
|
||||
|
||||
<!-- pour advertiser -->
|
||||
<div *ngIf="roleName === 'advertiser'">
|
||||
Cliquer sur valider pour soumettre l'inscription.
|
||||
</div>
|
||||
|
||||
<!-- pour user -->
|
||||
<div *ngIf="roleName === 'user'">
|
||||
<br>
|
||||
<!-- login -->
|
||||
<div class="row myRow">
|
||||
<div class="col-2 myLabel">Login:</div>
|
||||
<div class="col-10 myValue"> {{user.login}} </div>
|
||||
</div>
|
||||
<!-- mail -->
|
||||
<div class="row myRow">
|
||||
<div class="col-2 myLabel">Mail:</div>
|
||||
<div class="col-10 myValue"> {{user.mail}} </div>
|
||||
</div>
|
||||
<!-- dateOfBirth -->
|
||||
<div class="row myRow">
|
||||
<div class="col-2 myLabel">Date de naissance:</div>
|
||||
<div class="col-10 myValue">{{ user.dateOfBirth | date:'dd/LL/YYYY' }}</div>
|
||||
</div>
|
||||
<!-- gender -->
|
||||
<div class="row myRow">
|
||||
<div class="col-2 myLabel">Sexe:</div>
|
||||
<div class="col-10 myValue">
|
||||
<span *ngIf="user.gender==='man'"> Homme </span>
|
||||
<span *ngIf="user.gender==='woman'"> Femme </span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- interets -->
|
||||
<div class="row myRow">
|
||||
<div class="col-2 myLabel">Centres d'intérêt:</div>
|
||||
<div class="col-10 myValue" style="border-left: solid 1px #e6e6e6">
|
||||
<div *ngFor="let interest of user.interests">• {{interest}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ng-template>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- -------------------------------------------------------------------------------------------------------- -->
|
||||
|
||||
|
||||
<!-- Dernière étape érronée -->
|
||||
<ng-template #derniereEtapeErronee>
|
||||
<mat-error>{{errorMessage}}</mat-error>
|
||||
</ng-template>
|
||||
|
|
|
|||
|
|
@ -1,75 +1,33 @@
|
|||
body {
|
||||
font-family: "Poppins", sans-serif;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
|
||||
.myContainer {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
overflow-y: hidden;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
|
||||
.bg{
|
||||
height: 80vh;
|
||||
width: 100vw;
|
||||
mat-stepper {
|
||||
width: 60%;
|
||||
margin: 10vh auto;
|
||||
border: solid 1px black;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
padding: 20px;
|
||||
.leftCol {
|
||||
border-right: solid 1px #dcdcdc;
|
||||
}
|
||||
|
||||
|
||||
#formContent {
|
||||
-webkit-border-radius: 10px 10px 10px 10px;
|
||||
border-radius: 10px 10px 10px 10px;
|
||||
background: #fff;
|
||||
padding: 30px;
|
||||
width: 90%;
|
||||
max-width: 450px;
|
||||
position: relative;
|
||||
padding: 0px;
|
||||
-webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
|
||||
box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
|
||||
text-align: center;
|
||||
.myRow {
|
||||
margin: 15px 0px 15px 0px;
|
||||
}
|
||||
|
||||
|
||||
#icon {
|
||||
width:30%;
|
||||
.myLabel {
|
||||
text-align: right;
|
||||
padding: 0px 5px 0px 0px;
|
||||
margin: 0px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
mat-form-field {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
|
||||
input[type=button], input[type=submit], input[type=reset] {
|
||||
background-color: #5E89FF;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 15px 80px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
text-transform: uppercase;
|
||||
font-size: 13px;
|
||||
box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
|
||||
border-radius: 5px 5px 5px 5px;
|
||||
margin: 5px 20px 40px 20px;
|
||||
}
|
||||
|
||||
|
||||
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
|
||||
background-color: #39ace7;
|
||||
.myValue {
|
||||
text-align: left;
|
||||
padding: 0px 0px 0px 5px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,21 +4,39 @@ import {Router} from "@angular/router";
|
|||
import {MatDialog} from "@angular/material/dialog";
|
||||
import {PopupConfirmationComponent} from "../popup-confirmation/popup-confirmation.component";
|
||||
import {ThemeService} from "../../../utils/services/theme/theme.service";
|
||||
import {User} from "../../../utils/interfaces/user";
|
||||
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-page-register',
|
||||
templateUrl: './page-register.component.html',
|
||||
styleUrls: ['./page-register.component.scss']
|
||||
})
|
||||
export class PageRegisterComponent implements OnInit
|
||||
export class PageRegisterComponent
|
||||
{
|
||||
pseudo: string = "";
|
||||
email: string = "" ;
|
||||
roleName: string = "user";
|
||||
password: string = "";
|
||||
role: string = "";
|
||||
confirmPassword: string = "";
|
||||
hasError: boolean = false;
|
||||
errorMessage: string = "";
|
||||
user: User = {
|
||||
_id: "",
|
||||
login: "",
|
||||
hashPass: "",
|
||||
mail: "",
|
||||
role: {
|
||||
name: "user",
|
||||
permission: 0,
|
||||
},
|
||||
profilePictureUrl: "",
|
||||
dateOfBirth: new Date(),
|
||||
gender: "man",
|
||||
interests: [],
|
||||
isActive: false,
|
||||
createdAt: new Date(),
|
||||
updatedAt: new Date(),
|
||||
};
|
||||
|
||||
|
||||
constructor( private messageService: MessageService,
|
||||
|
|
@ -27,85 +45,103 @@ export class PageRegisterComponent implements OnInit
|
|||
public themeService: ThemeService ) { }
|
||||
|
||||
|
||||
ngOnInit(): void {}
|
||||
// Envoie de l'utilisateur au backend
|
||||
onValider(): void
|
||||
{
|
||||
this.checkField();
|
||||
if(!this.hasError)
|
||||
{
|
||||
if(this.roleName === "advertiser") this.user.role = { name: "advertiser", permission: 5 };
|
||||
else this.user.role = { name: "user", permission: 0 };
|
||||
this.user.hashPass = this.hashage(this.password);
|
||||
|
||||
// FAUX CODE
|
||||
const retour = { status: "succes" };
|
||||
this.myCallback(retour);
|
||||
|
||||
// VRAI CODE
|
||||
/*
|
||||
this.messageService
|
||||
.sendMessage('register', this.user)
|
||||
.subscribe(retour => this.myCallback(retour));
|
||||
*/
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
isValidEmail(email)
|
||||
// Gestion de la réponde du backend
|
||||
myCallback(retour): void
|
||||
{
|
||||
if(retour.status === "error")
|
||||
{
|
||||
console.log(retour);
|
||||
}
|
||||
else
|
||||
{
|
||||
const config = { width: '25%', data: { roleName: this.roleName} };
|
||||
this.dialog
|
||||
.open(PopupConfirmationComponent, config)
|
||||
.afterClosed()
|
||||
.subscribe(result => this.router.navigateByUrl( '/login' ));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 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);
|
||||
}
|
||||
|
||||
|
||||
// Check les champs saisies par l'utilisateur
|
||||
checkField(): void
|
||||
{
|
||||
if(this.pseudo.length === 0) {
|
||||
this.errorMessage = "Veuillez remplir le champ 'pseudo'";
|
||||
if(this.user.login.length === 0) {
|
||||
this.errorMessage = "Veuillez remplir le champ 'login'.";
|
||||
this.hasError = true;
|
||||
}
|
||||
else if(this.email.length === 0)
|
||||
{
|
||||
this.errorMessage = "Veuillez remplir le champ 'email'";
|
||||
else if(this.user.mail.length === 0) {
|
||||
this.errorMessage = "Veuillez remplir le champ 'email'.";
|
||||
this.hasError = true;
|
||||
}
|
||||
else if(!this.isValidEmail(this.email))
|
||||
{
|
||||
else if(!this.isValidEmail(this.user.mail)) {
|
||||
this.errorMessage = "Email invalide";
|
||||
this.hasError = true;
|
||||
}
|
||||
else if(this.role === "")
|
||||
{
|
||||
this.errorMessage = "Veuillez selectionner un type de compte";
|
||||
else if(this.password.length === 0) {
|
||||
this.errorMessage = "Veuillez remplir le champ 'mot de passe'.";
|
||||
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";
|
||||
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;
|
||||
}
|
||||
console.log(this.errorMessage);
|
||||
}
|
||||
|
||||
|
||||
onRegister(): void
|
||||
// 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
|
||||
{
|
||||
console.log(this.role);
|
||||
this.checkField();
|
||||
if(!this.hasError)
|
||||
{
|
||||
let data = {
|
||||
"pseudo": this.pseudo,
|
||||
"email": this.email,
|
||||
"role": this.role,
|
||||
"password": this.password
|
||||
};
|
||||
this.messageService
|
||||
.sendMessage('register', data)
|
||||
.subscribe(retour => this.maCallback(retour))
|
||||
}
|
||||
this.user.interests = myInterets;
|
||||
}
|
||||
|
||||
|
||||
maCallback(retour): void
|
||||
// Fonction de hashage (faible)
|
||||
hashage(input: string): string
|
||||
{
|
||||
if(retour.status === "error") console.log(retour.data)
|
||||
else
|
||||
{
|
||||
const config = { width: '25%', data: {} }
|
||||
this.dialog
|
||||
.open(PopupConfirmationComponent, config )
|
||||
.afterClosed()
|
||||
.subscribe(result => this.router.navigateByUrl( '/connexion' ));
|
||||
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();
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,11 @@
|
|||
<p> Votre inscription a bien été effectué. </p>
|
||||
<p *ngIf="data.roleName === 'user'">
|
||||
Votre inscription a bien été effectuée.
|
||||
</p>
|
||||
|
||||
<p *ngIf="data.roleName === 'advertiser'">
|
||||
Votre inscription est en cours de validation.
|
||||
</p>
|
||||
|
||||
<div style="text-align: right">
|
||||
<button mat-button mat-dialog-close> Continuer </button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,8 +11,4 @@ export class PopupConfirmationComponent
|
|||
constructor( public dialogRef: MatDialogRef<PopupConfirmationComponent>,
|
||||
@Inject(MAT_DIALOG_DATA) public data) {}
|
||||
|
||||
onClick(): void
|
||||
{
|
||||
this.dialogRef.close();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,43 @@
|
|||
<mat-form-field class="example-chip-list" appearance="fill">
|
||||
|
||||
<!-- ------------------------------------------------------------------------------------ -->
|
||||
|
||||
<mat-label>Tags</mat-label>
|
||||
|
||||
<!-- ------------------------------------------------------------------------------------ -->
|
||||
|
||||
<mat-chip-list #chipList aria-label="Fruit selection">
|
||||
|
||||
<mat-chip
|
||||
*ngFor="let interest of myInterests"
|
||||
[selectable]="selectable"
|
||||
[removable]="removable"
|
||||
(removed)="remove(interest)">
|
||||
{{interest}}
|
||||
<button matChipRemove *ngIf="removable">
|
||||
<mat-icon>cancel</mat-icon>
|
||||
</button>
|
||||
</mat-chip>
|
||||
|
||||
<input
|
||||
placeholder="Tapez un tag et pressez 'Entré' pour l'inserer"
|
||||
#tagInput
|
||||
[formControl]="formControl"
|
||||
[matAutocomplete]="auto"
|
||||
[matChipInputFor]="chipList"
|
||||
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
|
||||
(matChipInputTokenEnd)="add($event)">
|
||||
|
||||
</mat-chip-list>
|
||||
|
||||
<!-- ------------------------------------------------------------------------------------ -->
|
||||
|
||||
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
|
||||
<mat-option *ngFor="let interest of filteredInterests | async" [value]="interest">
|
||||
{{interest}}
|
||||
</mat-option>
|
||||
</mat-autocomplete>
|
||||
|
||||
<!-- ------------------------------------------------------------------------------------ -->
|
||||
|
||||
</mat-form-field>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
mat-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -1,20 +1,20 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { InputInterestsComponent } from './input-interests.component';
|
||||
import { InputInterestsProfilComponent } from './input-interests-profil.component';
|
||||
|
||||
describe('InputInterestsComponent', () => {
|
||||
let component: InputInterestsComponent;
|
||||
let fixture: ComponentFixture<InputInterestsComponent>;
|
||||
let component: InputInterestsProfilComponent;
|
||||
let fixture: ComponentFixture<InputInterestsProfilComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ InputInterestsComponent ]
|
||||
declarations: [ InputInterestsProfilComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(InputInterestsComponent);
|
||||
fixture = TestBed.createComponent(InputInterestsProfilComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
|
@ -10,11 +10,11 @@ import {MatAutocompleteSelectedEvent} from "@angular/material/autocomplete";
|
|||
|
||||
|
||||
@Component({
|
||||
selector: 'app-input-interests',
|
||||
templateUrl: './input-interests.component.html',
|
||||
styleUrls: ['./input-interests.component.scss']
|
||||
selector: 'app-input-interests-profil',
|
||||
templateUrl: './input-interests-profil.component.html',
|
||||
styleUrls: ['./input-interests-profil.component.scss']
|
||||
})
|
||||
export class InputInterestsComponent implements OnInit
|
||||
export class InputInterestsProfilComponent implements OnInit
|
||||
{
|
||||
selectable = true;
|
||||
removable = true;
|
||||
|
|
@ -41,7 +41,9 @@
|
|||
<br><br>
|
||||
|
||||
<!-- interets -->
|
||||
<app-input-interests [myInterests]="userCopy.interests" (eventEmitter)="onEventInputInterests($event)"></app-input-interests>
|
||||
<app-input-interests-profil
|
||||
[myInterests]="userCopy.interests"
|
||||
(eventEmitter)="onEventInputInterests($event)"></app-input-interests-profil>
|
||||
|
||||
<!-- divider -->
|
||||
<br><mat-divider></mat-divider><br>
|
||||
|
|
|
|||
|
|
@ -4,13 +4,14 @@
|
|||
--dark-color: #f0f0f0;
|
||||
}
|
||||
html, body { height: 100%; }
|
||||
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
|
||||
body { margin: 0; }
|
||||
|
||||
|
||||
.lightTheme {
|
||||
background: url("assets/lightBackground.jpg") no-repeat center center fixed;
|
||||
font-color: black;
|
||||
border-color: black;
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -18,6 +19,7 @@ body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
|
|||
background: url("assets/darkBackground.webp") no-repeat center center fixed;
|
||||
font-color: white;
|
||||
border-color: white;
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Reference in a new issue