c'est la fin du login

creativetimofficial · rkeita31 · Feb 21, 2023 · Feb 21, 2023 · Feb 21, 2023 · Feb 21, 2023
commit cd43913f463179810a247edb94795859fde9841b
diff --git a/src/app/app.routing.ts b/src/app/app.routing.ts
@@ -17,10 +17,10 @@ import { VisiteComponent } from './components/visite/visite.component';
 import { LoginComponent } from './components/login/login.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 
-const routes: Routes =[
+const routes: Routes = [
   {
     path: '',
-    redirectTo: 'login',
+    component: LoginComponent,
     pathMatch: 'full',
   }, {
     path: '',

diff --git a/src/app/components/components.module.ts b/src/app/components/components.module.ts
@@ -17,6 +17,7 @@ import { TerrainComponent } from './terrain/terrain.component';
 import { VisiteComponent } from './visite/visite.component';
 import { LoginComponent } from 'app/components/login/login.component';
 import { FormsModule } from '@angular/forms';
+import { RegistrationComponent } from './registration/registration.component';
 
 @NgModule({
   imports: [
@@ -39,6 +40,7 @@ import { FormsModule } from '@angular/forms';
     TerrainComponent,
     VisiteComponent,
     LoginComponent,
+    RegistrationComponent,
   ],
   exports: [
     FooterComponent,

diff --git a/src/app/components/login/login.component.html b/src/app/components/login/login.component.html
@@ -1,12 +1,35 @@
-<h1>Connectez-vous</h1>
-<form  (submit)="login()">
-  <div>
-    <label for="username">Nom d'utilisateur</label>
-    <input type="text" class="form-control" [(ngModel)]="credentials.username" name="username">
+<style>
+  body {
+    margin-top: 25%;
+    margin-left: 25%;
+  }
+
+  h1 {
+    color: rgb(114, 40, 40, 0.48);
+    font-size: 70px;
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
+  }
+</style>
+
+<div>
+  <img src="assets/img/maison.jpg" alt="photoAgence">
+</div>
+
+<body>
+  <div class="form-group col-md-8" style="text-align: center">
+    <h1>Connectez vous</h1>
+    <form (submit)="login()">
+      <div>
+        <label for="username">Nom d'utilisateur</label>
+        <input type="text" class="form-control" [(ngModel)]="credentials.username" name="username">
+      </div>
+      <div>
+        <label for="password">Mot de passe</label>
+        <input type="text" class="form-control" [(ngModel)]="credentials.password" name="password">
+        <br>
+      </div>
+      <button class="btn btn-primary" type="submit">Se connecter</button>
+      <p>Pas encore de compte ? <a routerLink="/registration">Inscrivez-vous</a></p>
+    </form>
   </div>
-  <div>
-    <label for="password">Mot de passe</label>
-    <input type="text" class="form-control" [(ngModel)]="credentials.password" name="password">
-  </div>
-  <button type="submit">Se connecter</button>
-</form>
+</body>
diff --git a/src/app/components/login/login.component.ts b/src/app/components/login/login.component.ts
@@ -4,42 +4,46 @@ import { NgForm } from '@angular/forms';
 import { Router } from '@angular/router';
 import { AppService } from 'app/app.service';
 
+
 @Component({
   selector: 'app-login',
   templateUrl: './login.component.html',
   styleUrls: ['./login.component.scss']
 })
 export class LoginComponent implements OnInit {
 
-  username! : string;
-  password! : string;
-  credentials = {username : '',password : ''}
-  constructor(private appService:AppService,private httpClient:HttpClient,private router:Router){}
-
 
-  login(){
-    this.appService.authenticate(this.credentials,()=>{this.router.navigateByUrl("/home")});
+  username!: string;
+  password!: string;
+  credentials = { username: '', password: '' }
+  constructor(private appService: AppService, private httpClient: HttpClient, private router: Router) { }
+
+
+  login() {
+    this.appService.authenticate(this.credentials, () => { this.router.navigateByUrl("/home") });
   }
 
+
   /*onSubmit(form:NgForm) {
     // Récupération des données du formulaire
     const username = form.value.username;
     const password = form.value.password;
-
+
+
     // Traitement de la soumission du formulaire
     console.log('Username : ' + username);
     console.log('Password : ' + password);
-
+
+
     // Envoi des données au serveur pour authentification
     // ...
-
+
+
     // Réinitialisation du formulaire
     form.reset();
   }*/
 
+
   ngOnInit(): void {
-
-  }
   }
-
-
+}
diff --git a/src/app/components/registration/registration.component.html b/src/app/components/registration/registration.component.html
@@ -0,0 +1,63 @@
+<h2>Créer un compte</h2>
+<div class="row">
+    <div class="col-md-8">
+        <div class="card card-user">
+            <div class="card-header">
+                <h3 class="card-title">Creer un compte</h3>
+            </div>
+            <div class="card-body">
+                <form (ngSubmit)="saveUtilisateur()">
+                    <div class="row">
+                        <div class="col-md-6 pr-1">
+                            <div class="form-group">
+                                <label>Nom</label>
+                                <input type="text" class="form-control" [(ngModel)]="utilisateur.nomUtilisateur"
+                                    name="nomUtilisateur">
+                            </div>
+                            <div class="form-group">
+                                <label>Prénom</label>
+                                <input type="text" class="form-control" [(ngModel)]="utilisateur.prenomUtilisateur"
+                                    name="prenomUtilisateur">
+                            </div>
+                            <div class="form-group">
+                                <label>Email</label>
+                                <input type="email" class="form-control" [(ngModel)]="utilisateur.emailUtilisateur"
+                                    name="emailUtilisateur">
+                            </div>
+                            <div class="form-group">
+                                <label>Date de Naissance</label>
+                                <input type="date" class="form-control"
+                                    [(ngModel)]="utilisateur.dateNaissanceUtilisateur" name="dateNaissanceUtilisateur">
+                            </div>
+                            <div class="form-group">
+                                <label>Telephone</label>
+                                <input type="tel" class="form-control" [(ngModel)]="utilisateur.numTelUtilisateur"
+                                    name="numTelUtilisateur">
+                            </div>
+                            <div class="form-group">
+                                <label>Nom d'utilisateur</label>
+                                <input type="text" class="form-control" [(ngModel)]="utilisateur.username"
+                                    name="username">
+                            </div>
+                            <div class="form-group">
+                                <label>Mot de passe</label>
+                                <input type="text" class="form-control" [(ngModel)]="utilisateur.password"
+                                    name="password">
+                            </div>
+                            <div class="form-group">
+                                <label>Role</label>
+                                <select [(ngModel)]="utilisateur.roles" name="roles">
+                                    <option value="">Client</option>
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="update ml-auto mr-auto">
+                            <button class="btn btn-primary btn-round">Valider</button>
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
diff --git a/src/app/components/registration/registration.component.scss b/src/app/components/registration/registration.component.scss
diff --git a/src/app/components/registration/registration.component.spec.ts b/src/app/components/registration/registration.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RegistrationComponent } from './registration.component';
+
+describe('RegistrationComponent', () => {
+  let component: RegistrationComponent;
+  let fixture: ComponentFixture<RegistrationComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ RegistrationComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(RegistrationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/registration/registration.component.ts b/src/app/components/registration/registration.component.ts
@@ -0,0 +1,35 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { Utilisateur } from 'app/model/utilisateur';
+import { UtilisateurService } from 'app/services/utilisateur.service';
+
+
+@Component({
+  selector: 'app-registration',
+  templateUrl: './registration.component.html',
+  styleUrls: ['./registration.component.scss']
+})
+export class RegistrationComponent implements OnInit {
+
+
+
+
+  users!: any[]
+  roles!: any[];
+  utilisateur: Utilisateur = new Utilisateur();
+  constructor(private utilisateurService: UtilisateurService, private router: Router) { }
+  ngOnInit(): void {
+
+
+  }
+
+
+  saveUtilisateur() {
+    this.utilisateurService.save(this.utilisateur).subscribe(
+      () => {
+        this.utilisateur = new Utilisateur();
+      }
+    )
+  }
+}
+
diff --git a/src/app/components/utilisateur/utilisateur.component.ts b/src/app/components/utilisateur/utilisateur.component.ts
@@ -40,14 +40,13 @@ export class UtilisateurComponent implements OnInit {
 
 
   //Méthode save : 
-  save() {
-    this.currentFileUpload = this.selectedFiles?.item(0) as File;
-    this.utilisateurService.save(this.currentFileUpload, this.utilisateur).subscribe(() => {
-      this.findAllUtilisateurs();
-      this.utilisateur = new Utilisateur();
-      this.selectedFiles = undefined;
-    })
-
+  saveUtilisateur() {
+    this.utilisateurService.save(this.utilisateur).subscribe(
+      () => {
+        this.findAllUtilisateurs(); // MAJ de la liste des utilisateurs
+        this.utilisateur = new Utilisateur(); // Vider le formulaire pour avoir une nouvelle ligne
+      }
+    )
   }
   deleteUtilisateur(id: number) {
     this.utilisateurService.delete(id).subscribe(

diff --git a/src/app/layouts/admin-layout/admin-layout.module.ts b/src/app/layouts/admin-layout/admin-layout.module.ts
@@ -12,12 +12,13 @@ import { IconsComponent } from '../../icons/icons.component';
 import { MapsComponent } from '../../maps/maps.component';
 import { NotificationsComponent } from '../../notifications/notifications.component';
 import { UpgradeComponent } from '../../upgrade/upgrade.component';
-import {MatButtonModule} from '@angular/material/button';
-import {MatInputModule} from '@angular/material/input';
-import {MatRippleModule} from '@angular/material/core';
-import {MatFormFieldModule} from '@angular/material/form-field';
-import {MatTooltipModule} from '@angular/material/tooltip';
-import {MatSelectModule} from '@angular/material/select';
+import { MatButtonModule } from '@angular/material/button';
+import { MatInputModule } from '@angular/material/input';
+import { MatRippleModule } from '@angular/material/core';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatSelectModule } from '@angular/material/select';
+
 
 @NgModule({
   imports: [
@@ -45,4 +46,4 @@ import {MatSelectModule} from '@angular/material/select';
   ]
 })
 
-export class AdminLayoutModule {}
+export class AdminLayoutModule { }
diff --git a/src/app/layouts/admin-layout/admin-layout.routing.ts b/src/app/layouts/admin-layout/admin-layout.routing.ts
@@ -9,6 +9,7 @@ import { IconsComponent } from '../../icons/icons.component';
 import { MapsComponent } from '../../maps/maps.component';
 import { NotificationsComponent } from '../../notifications/notifications.component';
 import { UpgradeComponent } from '../../upgrade/upgrade.component';
+import { RegistrationComponent } from 'app/components/registration/registration.component';
 
 export const AdminLayoutRoutes: Routes = [
     // {
@@ -63,4 +64,5 @@ export const AdminLayoutRoutes: Routes = [
     { path: 'maps', component: MapsComponent },
     { path: 'notifications', component: NotificationsComponent },
     { path: 'upgrade', component: UpgradeComponent },
+    { path: 'registration', component: RegistrationComponent },
 ];
diff --git a/src/app/services/utilisateur.service.ts b/src/app/services/utilisateur.service.ts
@@ -1,7 +1,9 @@
-import { HttpClient, HttpRequest } from '@angular/common/http';
-import { Injectable } from '@angular/core';
-import { Utilisateur } from 'app/model/utilisateur';
-import { Observable } from 'rxjs';
+import { HttpClient } from "@angular/common/http";
+import { Injectable } from "@angular/core";
+import { Observable } from "rxjs";
+
+
+
 
 @Injectable({
   providedIn: 'root'
@@ -14,18 +16,7 @@ export class UtilisateurService {
 
   public findAll(): Observable<any> { return this.httpClient.get(this.BASE_URL); }
 
-  public save(image: File, utilisateur: Utilisateur): Observable<any> {
-    const formData = new FormData(); //permet d'utiliser le resquestParam de la méthode save de la partie back
-    formData.append('nomFront', utilisateur.nomUtilisateur);
-    formData.append('prenomFront', utilisateur.prenomUtilisateur);
-    formData.append('usernameFront', utilisateur.username);
-    formData.append('passwordFront', utilisateur.password);
-    formData.append('imageFront', image);
-    const requestHttp = new HttpRequest('POST', this.BASE_URL, formData, {
-      reportProgress: true, responseType: 'text'
-    })
-    return this.httpClient.request(requestHttp);
-  }
+  public save(utilisateur: any): Observable<any> { return this.httpClient.post(this.BASE_URL, utilisateur); }
 
   public delete(id: number): Observable<any> { return this.httpClient.delete(this.BASE_URL + "/" + id); }