From d55287531bb0b5ecad64c481e373d67a20934add Mon Sep 17 00:00:00 2001 From: MiharyR Date: Fri, 12 Nov 2021 19:42:39 +0100 Subject: [PATCH] realisation de la page register --- src/app/app.module.ts | 10 +- .../navbar-before-connexion.component.scss | 8 +- .../input-interests-register.component.html} | 0 .../input-interests-register.component.scss} | 0 ...input-interests-register.component.spec.ts | 25 ++ .../input-interests-register.component.ts | 81 ++++++ .../page-register.component.html | 264 ++++++++++++++---- .../page-register.component.scss | 80 ++---- .../page-register/page-register.component.ts | 134 +++++---- .../popup-confirmation.component.html | 9 +- .../popup-confirmation.component.ts | 4 - .../input-interests-profil.component.html | 43 +++ .../input-interests-profil.component.scss | 3 + .../input-interests-profil.component.spec.ts} | 10 +- .../input-interests-profil.component.ts} | 8 +- .../popup-update-user.component.html | 4 +- src/styles.scss | 4 +- 17 files changed, 495 insertions(+), 192 deletions(-) rename src/app/{user/myProfil/input-interests/input-interests.component.html => beforeConnexion/register/input-interests-register/input-interests-register.component.html} (100%) rename src/app/{user/myProfil/input-interests/input-interests.component.scss => beforeConnexion/register/input-interests-register/input-interests-register.component.scss} (100%) create mode 100644 src/app/beforeConnexion/register/input-interests-register/input-interests-register.component.spec.ts create mode 100644 src/app/beforeConnexion/register/input-interests-register/input-interests-register.component.ts create mode 100644 src/app/user/myProfil/input-interests-profil/input-interests-profil.component.html create mode 100644 src/app/user/myProfil/input-interests-profil/input-interests-profil.component.scss rename src/app/user/myProfil/{input-interests/input-interests.component.spec.ts => input-interests-profil/input-interests-profil.component.spec.ts} (55%) rename src/app/user/myProfil/{input-interests/input-interests.component.ts => input-interests-profil/input-interests-profil.component.ts} (92%) diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 7a04744..0f3fe41 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -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] diff --git a/src/app/beforeConnexion/navbar-before-connexion/navbar-before-connexion.component.scss b/src/app/beforeConnexion/navbar-before-connexion/navbar-before-connexion.component.scss index cd9cc96..a0782b3 100644 --- a/src/app/beforeConnexion/navbar-before-connexion/navbar-before-connexion.component.scss +++ b/src/app/beforeConnexion/navbar-before-connexion/navbar-before-connexion.component.scss @@ -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 { diff --git a/src/app/user/myProfil/input-interests/input-interests.component.html b/src/app/beforeConnexion/register/input-interests-register/input-interests-register.component.html similarity index 100% rename from src/app/user/myProfil/input-interests/input-interests.component.html rename to src/app/beforeConnexion/register/input-interests-register/input-interests-register.component.html diff --git a/src/app/user/myProfil/input-interests/input-interests.component.scss b/src/app/beforeConnexion/register/input-interests-register/input-interests-register.component.scss similarity index 100% rename from src/app/user/myProfil/input-interests/input-interests.component.scss rename to src/app/beforeConnexion/register/input-interests-register/input-interests-register.component.scss diff --git a/src/app/beforeConnexion/register/input-interests-register/input-interests-register.component.spec.ts b/src/app/beforeConnexion/register/input-interests-register/input-interests-register.component.spec.ts new file mode 100644 index 0000000..9917b1a --- /dev/null +++ b/src/app/beforeConnexion/register/input-interests-register/input-interests-register.component.spec.ts @@ -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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ InputInterestsRegisterComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(InputInterestsRegisterComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/beforeConnexion/register/input-interests-register/input-interests-register.component.ts b/src/app/beforeConnexion/register/input-interests-register/input-interests-register.component.ts new file mode 100644 index 0000000..9afdeee --- /dev/null +++ b/src/app/beforeConnexion/register/input-interests-register/input-interests-register.component.ts @@ -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; + @Input() myInterests: string[] = []; + allInterests: string[] = []; + @Output() eventEmitter = new EventEmitter(); + @ViewChild('tagInput') tagInput: ElementRef; + + + 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)); + } + +} diff --git a/src/app/beforeConnexion/register/page-register/page-register.component.html b/src/app/beforeConnexion/register/page-register/page-register.component.html index f895077..1b9db31 100644 --- a/src/app/beforeConnexion/register/page-register/page-register.component.html +++ b/src/app/beforeConnexion/register/page-register/page-register.component.html @@ -1,71 +1,217 @@
-
+ + + + - -
-
- - -
- User Icon + + + Type de compte +
+ + Utilisateur standard    + Annonceur + +
+
+
+ - -
- - - Login - - -
- - - - Email - - -
- - - - Type de compte - - Utilisateur - Annonceur - - -
- - - - Mot de passe - - -
- - - - Confirmation mot de passe - - -
- - -
- {{errorMessage}} -
- - - -
+ + + Compte & Informations personelles +
+ +
+ + +
+
+ + + + + + Dernière étape + + + + +
+ + +
-
+ - -
+
+ + + + + + + +
+
+ + +
+

Compte

+ + + + Login + + +
+ + + + Mot de passe + + +
+ + + + Confirmation mot de passe + + +
+ + +
+

Informations personelles

+ + + + Email + + +
+ + + + Homme     + Femme + +

+ + + + Date de naissance + + + + + +
+ +
+ + + + + + + + + + + + Login + + +
+ + + + Email + + +
+ + + + Mot de passe + + +
+ + + + Confirmation mot de passe + + + + + + + + + + + + + +
+ Cliquer sur valider pour soumettre l'inscription. +
+ + +
+
+ +
+
Login:
+
{{user.login}}
+
+ +
+
Mail:
+
{{user.mail}}
+
+ +
+
Date de naissance:
+
{{ user.dateOfBirth | date:'dd/LL/YYYY' }}
+
+ +
+
Sexe:
+
+ Homme + Femme +
+
+ +
+
Centres d'intérêt:
+
+
• {{interest}}
+
+
+
+ + + + + + + + + + {{errorMessage}} + diff --git a/src/app/beforeConnexion/register/page-register/page-register.component.scss b/src/app/beforeConnexion/register/page-register/page-register.component.scss index 4d01f39..e3f4d3a 100644 --- a/src/app/beforeConnexion/register/page-register/page-register.component.scss +++ b/src/app/beforeConnexion/register/page-register/page-register.component.scss @@ -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; } diff --git a/src/app/beforeConnexion/register/page-register/page-register.component.ts b/src/app/beforeConnexion/register/page-register/page-register.component.ts index 86ce8f4..0a0911d 100644 --- a/src/app/beforeConnexion/register/page-register/page-register.component.ts +++ b/src/app/beforeConnexion/register/page-register/page-register.component.ts @@ -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(); } } diff --git a/src/app/beforeConnexion/register/popup-confirmation/popup-confirmation.component.html b/src/app/beforeConnexion/register/popup-confirmation/popup-confirmation.component.html index 1eebca5..1cd51fe 100644 --- a/src/app/beforeConnexion/register/popup-confirmation/popup-confirmation.component.html +++ b/src/app/beforeConnexion/register/popup-confirmation/popup-confirmation.component.html @@ -1,4 +1,11 @@ -

Votre inscription a bien été effectué.

+

+ Votre inscription a bien été effectuée. +

+ +

+ Votre inscription est en cours de validation. +

+
diff --git a/src/app/beforeConnexion/register/popup-confirmation/popup-confirmation.component.ts b/src/app/beforeConnexion/register/popup-confirmation/popup-confirmation.component.ts index 09d5501..fdb461c 100644 --- a/src/app/beforeConnexion/register/popup-confirmation/popup-confirmation.component.ts +++ b/src/app/beforeConnexion/register/popup-confirmation/popup-confirmation.component.ts @@ -11,8 +11,4 @@ export class PopupConfirmationComponent constructor( public dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) public data) {} - onClick(): void - { - this.dialogRef.close(); - } } diff --git a/src/app/user/myProfil/input-interests-profil/input-interests-profil.component.html b/src/app/user/myProfil/input-interests-profil/input-interests-profil.component.html new file mode 100644 index 0000000..847d672 --- /dev/null +++ b/src/app/user/myProfil/input-interests-profil/input-interests-profil.component.html @@ -0,0 +1,43 @@ + + + + + Tags + + + + + + + {{interest}} + + + + + + + + + + + + {{interest}} + + + + + + diff --git a/src/app/user/myProfil/input-interests-profil/input-interests-profil.component.scss b/src/app/user/myProfil/input-interests-profil/input-interests-profil.component.scss new file mode 100644 index 0000000..c7acb4b --- /dev/null +++ b/src/app/user/myProfil/input-interests-profil/input-interests-profil.component.scss @@ -0,0 +1,3 @@ +mat-form-field { + width: 100%; +} diff --git a/src/app/user/myProfil/input-interests/input-interests.component.spec.ts b/src/app/user/myProfil/input-interests-profil/input-interests-profil.component.spec.ts similarity index 55% rename from src/app/user/myProfil/input-interests/input-interests.component.spec.ts rename to src/app/user/myProfil/input-interests-profil/input-interests-profil.component.spec.ts index ca6a4fa..0dd8314 100644 --- a/src/app/user/myProfil/input-interests/input-interests.component.spec.ts +++ b/src/app/user/myProfil/input-interests-profil/input-interests-profil.component.spec.ts @@ -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; + let component: InputInterestsProfilComponent; + let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ InputInterestsComponent ] + declarations: [ InputInterestsProfilComponent ] }) .compileComponents(); }); beforeEach(() => { - fixture = TestBed.createComponent(InputInterestsComponent); + fixture = TestBed.createComponent(InputInterestsProfilComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/src/app/user/myProfil/input-interests/input-interests.component.ts b/src/app/user/myProfil/input-interests-profil/input-interests-profil.component.ts similarity index 92% rename from src/app/user/myProfil/input-interests/input-interests.component.ts rename to src/app/user/myProfil/input-interests-profil/input-interests-profil.component.ts index 663b95f..5dc370e 100644 --- a/src/app/user/myProfil/input-interests/input-interests.component.ts +++ b/src/app/user/myProfil/input-interests-profil/input-interests-profil.component.ts @@ -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; diff --git a/src/app/user/myProfil/popup-update-user/popup-update-user.component.html b/src/app/user/myProfil/popup-update-user/popup-update-user.component.html index a563c67..14b4fbb 100644 --- a/src/app/user/myProfil/popup-update-user/popup-update-user.component.html +++ b/src/app/user/myProfil/popup-update-user/popup-update-user.component.html @@ -41,7 +41,9 @@

- +

diff --git a/src/styles.scss b/src/styles.scss index f4c4a3a..5c44745 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -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; }