Page de connexion presque prête. Il manque la redirection de page en fonction du role

src/app/page-connexion/page-connexion.component.ts

@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-page-connexion',
-  templateUrl: './page-connexion.component.html',
-  styleUrls: ['./page-connexion.component.scss']
-})
-export class PageConnexionComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}

src/app/page-register/page-register.component.html

@@ -1 +0,0 @@
-<p>page-register works!</p>

src/app/page-register/page-register.component.ts

@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-page-register',
-  templateUrl: './page-register.component.html',
-  styleUrls: ['./page-register.component.scss']
-})
-export class PageRegisterComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}

src/app/pourLes3Roles/page-connexion/page-connexion.component.html

@@ -5,32 +5,35 @@
     <div class="boite">
         <h1> Connexion </h1>
 
+        <!-- Email -->
         <div class="row">
             <div class="col-4 label"> Email: &nbsp; </div>
             <div class="col-8 champ">
-                <input type="text" size="20">
+                <input type="text" [(ngModel)]="email">
             </div>
         </div>
 
+        <!-- Mot de passe -->
         <div class="row">
             <div class="col-4 label"> Mot de passe: &nbsp; </div>
             <div class="col-8 champ">
-                <input type="text" size="20">
+                <input type="text" [(ngModel)]="password">
             </div>
         </div>
 
+        <!-- Boutons -->
         <div class="row">
             <div class="col-6">
-                <button> Se connecter </button>
+                <button (click)="onSeConnecter()"> Se connecter </button>
             </div>
-            <div class="col-6 justify-content-center">
+            <div class="col-6" style="text-align: right">
-                <button> S'inscrire </button>
+                <button routerLink="/register"> S'inscrire </button>
             </div>
         </div>
 
+        <!-- Mot de passe oublié -->
         <div style="text-align: right">
-            <a routerLink="/register" class="lien"> Mot de passe oublié ? </a>
+            <a class="lien" href="https://pixar.fandom.com/wiki/Sadness"> Mot de passe oublié ? </a>
         </div>
-
     </div>
 </div>

src/app/pourLes3Roles/page-connexion/page-connexion.component.scss

@@ -6,12 +6,12 @@ h1 {
 .boite {
   margin-left: auto;
   margin-right: auto;
-  width: 25%;
+  width: 450px;
   margin-top: 50vh;
-  transform: translateY(-60%);
+  transform: translateY(-100%);
   border: solid 3px black;
   border-radius: 10px;
-  padding: 20px 10px 20px 10px;
+  padding: 20px 40px 20px 20px;
   background-color: #dcdcdc;
 }
 
@@ -30,12 +30,17 @@ h1 {
   padding: 0px
 }
 
+input {
+  width: 100%;
+}
+
 button {
-  width: 90%
+  width: 100%;
+  margin-right: 0px;
 }
 
 .col-6 {
-  text-align: center;
+  //text-align: center;
 }
 
 .lien {

src/app/pourLes3Roles/page-connexion/page-connexion.component.ts

@@ -0,0 +1,43 @@
+import { Component, OnInit } from '@angular/core';
+import {MessageService} from "../../utils/message/message.service";
+import {Router} from "@angular/router";
+
+
+@Component({
+    selector: 'app-page-connexion',
+    templateUrl: './page-connexion.component.html',
+    styleUrls: ['./page-connexion.component.scss']
+})
+export class PageConnexionComponent implements OnInit
+{
+    email: string = ""
+    password: string = ""
+
+    constructor( private messageService: MessageService,
+                 private router: Router) { }
+
+
+    ngOnInit(): void {}
+
+
+	onSeConnecter(): void
+	{
+        let data = {
+            "email": this.email,
+            "password": this.password
+        };
+        this.messageService
+            .sendMessage('connexion', data)
+            .subscribe( retour => this.maCallback(retour))
+	}
+
+
+    maCallback(retour): void
+    {
+        if(retour.status === "error") console.log(retour.data)
+        else {
+            console.log(retour.data)
+            //this.router.navigateByUrl( '/search' );
+        }
+    }
+}

src/app/pourLes3Roles/register/page-register/page-register.component.html

@@ -0,0 +1,50 @@
+<div class="conteneur">
+
+    <app-nav-bar complete="false"></app-nav-bar>
+
+    <div class="boite">
+        <h1> Inscription </h1>
+
+        <!-- Pseudo -->
+        <div class="row">
+            <div class="col-6 label"> Pseudo: &nbsp; </div>
+            <div class="col-6 champ">
+                <input type="text" [(ngModel)]="pseudo">
+            </div>
+        </div>
+
+        <!-- Email -->
+        <div class="row">
+            <div class="col-6 label"> Email: &nbsp; </div>
+            <div class="col-6 champ">
+                <input type="email" [(ngModel)]="email">
+            </div>
+        </div>
+
+        <!-- Mot de passe -->
+        <div class="row">
+            <div class="col-6 label"> Mot de passe: &nbsp; </div>
+            <div class="col-6 champ">
+                <input type="text" [(ngModel)]="password">
+            </div>
+        </div>
+
+        <!-- Confirmation mot de passe -->
+        <div class="row">
+            <div class="col-6 label"> Confirmer le mot de passe: &nbsp; </div>
+            <div class="col-6 champ">
+                <input type="text" [(ngModel)]="confirmPassword">
+            </div>
+        </div>
+
+        <!-- Bouton valider -->
+        <div style="width: 100%; margin-top: 30px">
+            <button (click)="onValider()"> Valider </button>
+        </div>
+
+        <!-- Message d'erreur -->
+        <div *ngIf="hasError" style="text-align: center">
+            <span class="mat-error"> {{errorMessage}} </span>
+        </div>
+    </div>
+</div>

src/app/pourLes3Roles/register/page-register/page-register.component.scss

@@ -0,0 +1,42 @@
+h1 {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.boite {
+  margin-left: auto;
+  margin-right: auto;
+  width: 550px;
+  margin-top: 50vh;
+  transform: translateY(-100%);
+  border: solid 3px black;
+  border-radius: 10px;
+  padding: 20px 40px 20px 40px;
+  background-color: #dcdcdc;
+}
+
+input {
+  width: 100%;
+}
+
+.row {
+  margin: 15px 0px 15px 0px
+}
+
+.label {
+  text-align: right;
+  margin-right: 0px;
+  padding: 0px;
+}
+
+.champ {
+  margin: 0px;
+  padding: 0px
+}
+
+button {
+  width: 100%;
+  margin-right: 0px;
+  background-color: #969696;
+  border: solid 2px black;
+}

src/app/pourLes3Roles/register/page-register/page-register.component.ts

@@ -0,0 +1,84 @@
+import { Component, OnInit } from '@angular/core';
+import {MessageService} from "../../outils/message/message.service";
+import {Router} from "@angular/router";
+import {MatDialog} from "@angular/material/dialog";
+import {PopupConfirmationComponent} from "../popup-confirmation/popup-confirmation.component";
+
+@Component({
+  selector: 'app-page-register',
+  templateUrl: './page-register.component.html',
+  styleUrls: ['./page-register.component.scss']
+})
+export class PageRegisterComponent implements OnInit
+{
+    pseudo: string = "";
+    email: string = "" ;
+    password: string = "";
+    confirmPassword: string = "";
+    hasError: boolean = false;
+    errorMessage: string = "";
+
+
+    constructor( private messageService: MessageService,
+                 private router: Router,
+                 public dialog: MatDialog ) { }
+
+
+    ngOnInit(): void {}
+
+
+    verifierChamps(): void
+    {
+        if(this.pseudo.length === 0) {
+            this.errorMessage = "Veuillez remplir le champ 'pseudo'"
+            this.hasError = true;
+        }
+        else if(this.email.length === 0)
+        {
+            this.errorMessage = "Veuillez remplir le champ 'email'"
+            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.hasError = false;
+        }
+    }
+
+
+    onValider(): void
+    {
+        this.verifierChamps()
+        console.log(this.hasError)
+        if(!this.hasError)
+        {
+            let data = { "pseudo": this.pseudo, "email": this.email, "password": this.password }
+            this.messageService
+                .sendMessage('register', data)
+                .subscribe(retour => this.maCallback(retour))
+        }
+    }
+
+
+    maCallback(retour): void
+    {
+        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' ));
+        }
+    }
+
+}

src/app/utils/nav-bar/nav-bar.component.html

@@ -1,12 +1,13 @@
 <div *ngIf="complete">
     <ul>
         <li>
-            <a style="color: white ; background-color: black"> StreamNotFound </a>
+            <a routerLink="/connexion" style="color: white ; background-color: black">
+                StreamNotFound
+            </a>
+        </li>
+        <li style="float:right; margin-right: 20px;">
+            <mat-slide-toggle></mat-slide-toggle>
         </li>
-        <label class="switch">
-            <input type="checkbox">
-            <span class="slider round"></span>
-        </label>
     </ul>
 </div>
 

src/app/utils/nav-bar/nav-bar.component.scss

@@ -1,3 +1,7 @@
+mat-slide-toggle {
+  margin-top: 20px;
+}
+
 
 ul {
   list-style-type: none;