From 1dc1109482427964335622e8fa5d3f57cac937a7 Mon Sep 17 00:00:00 2001 From: Styve Lioumba <37368019+StyveLioumba@users.noreply.github.com> Date: Thu, 26 Sep 2024 19:08:25 +0200 Subject: [PATCH] base de l'authentification (#4) Co-authored-by: styve Lioumba --- README.md | 3 + src/app/app.component.scss | 4 +- src/app/app.routes.ts | 10 +++ .../authentification/auth/auth.component.html | 86 +++++++++++++++++++ .../authentification/auth/auth.component.scss | 0 .../auth/auth.component.spec.ts | 23 +++++ .../authentification/auth/auth.component.ts | 16 ++++ .../authentification-routing.module.ts | 24 ++++++ .../authentification.module.ts | 14 +++ .../my-profile/my-profile-routing.module.ts | 14 +++ .../my-profile/my-profile.component.html | 1 + .../my-profile/my-profile.component.scss | 0 .../my-profile/my-profile.component.spec.ts | 23 +++++ .../routes/my-profile/my-profile.component.ts | 12 +++ .../routes/my-profile/my-profile.module.ts | 14 +++ .../components/nav-bar/nav-bar.component.html | 7 +- .../features/login/login.component.html | 56 ++++++++++++ .../features/login/login.component.scss | 0 .../features/login/login.component.spec.ts | 23 +++++ .../shared/features/login/login.component.ts | 35 ++++++++ .../features/register/register.component.html | 67 +++++++++++++++ .../features/register/register.component.scss | 0 .../register/register.component.spec.ts | 23 +++++ .../features/register/register.component.ts | 35 ++++++++ tailwind.config.js | 7 ++ 25 files changed, 491 insertions(+), 6 deletions(-) create mode 100644 src/app/routes/authentification/auth/auth.component.html create mode 100644 src/app/routes/authentification/auth/auth.component.scss create mode 100644 src/app/routes/authentification/auth/auth.component.spec.ts create mode 100644 src/app/routes/authentification/auth/auth.component.ts create mode 100644 src/app/routes/authentification/authentification-routing.module.ts create mode 100644 src/app/routes/authentification/authentification.module.ts create mode 100644 src/app/routes/my-profile/my-profile-routing.module.ts create mode 100644 src/app/routes/my-profile/my-profile.component.html create mode 100644 src/app/routes/my-profile/my-profile.component.scss create mode 100644 src/app/routes/my-profile/my-profile.component.spec.ts create mode 100644 src/app/routes/my-profile/my-profile.component.ts create mode 100644 src/app/routes/my-profile/my-profile.module.ts create mode 100644 src/app/shared/features/login/login.component.html create mode 100644 src/app/shared/features/login/login.component.scss create mode 100644 src/app/shared/features/login/login.component.spec.ts create mode 100644 src/app/shared/features/login/login.component.ts create mode 100644 src/app/shared/features/register/register.component.html create mode 100644 src/app/shared/features/register/register.component.scss create mode 100644 src/app/shared/features/register/register.component.spec.ts create mode 100644 src/app/shared/features/register/register.component.ts diff --git a/README.md b/README.md index 932d458..e1ec9d9 100644 --- a/README.md +++ b/README.md @@ -1 +1,4 @@ # TrouveTonProfile + +## Description +Trouve Ton Profile est une plateforme innovante qui permet à chacun de trouver facilement des professionnels qualifiés dans tous les domaines de la vie quotidienne. Que tu cherches un électricien, un plombier, un développeur, ou tout autre expert, la plateforme te permet de parcourir rapidement des profils, de découvrir leurs compétences, et de sélectionner la personne idéale pour répondre à tes besoins. Conçue pour faciliter l'accès à des talents locaux et spécialisés, Trouve Ton Profile est l'outil incontournable pour simplifier les tâches du quotidien en connectant les personnes à des solutions fiables et adaptées. diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 371155f..400a29e 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -4,8 +4,8 @@ main { min-height: 100vh; /* Minimum 100% de la hauteur de la fenêtre */ } -#content { - flex-grow: 1; /* Cette zone grandit pour remplir l'espace restant */ +.content { + flex: 1; /* Cette zone grandit pour remplir l'espace restant */ padding: 20px; } diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index 7688556..225f904 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -16,6 +16,16 @@ export const routes: Routes = [ title: 'Liste des profiles', loadChildren: () => import('@app/routes/profile/profile.module').then(m => m.ProfileModule) }, + { + path:'auth', + title: 'Authentification', + loadChildren: () => import('@app/routes/authentification/authentification.module').then(m => m.AuthentificationModule) + }, + { + path: 'my-profile', + title: 'Mon profile', + loadChildren: () => import('@app/routes/my-profile/my-profile.module').then(m => m.MyProfileModule) + }, { path: 'not-found', title: 'Page non trouvée', diff --git a/src/app/routes/authentification/auth/auth.component.html b/src/app/routes/authentification/auth/auth.component.html new file mode 100644 index 0000000..2b49e17 --- /dev/null +++ b/src/app/routes/authentification/auth/auth.component.html @@ -0,0 +1,86 @@ +
+ +
+
+
+ +
+
+
+ + + + + + + +
+
+

Connexion

+

+ connectez vous avec: +

+
+
+ + + +
+ +
+

+ ou vos identifiants +

+
+ + +
+
+
+
+
+
+ + diff --git a/src/app/routes/authentification/auth/auth.component.scss b/src/app/routes/authentification/auth/auth.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/routes/authentification/auth/auth.component.spec.ts b/src/app/routes/authentification/auth/auth.component.spec.ts new file mode 100644 index 0000000..a3af398 --- /dev/null +++ b/src/app/routes/authentification/auth/auth.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AuthComponent } from './auth.component'; + +describe('AuthComponent', () => { + let component: AuthComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [AuthComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(AuthComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/routes/authentification/auth/auth.component.ts b/src/app/routes/authentification/auth/auth.component.ts new file mode 100644 index 0000000..a1dbd26 --- /dev/null +++ b/src/app/routes/authentification/auth/auth.component.ts @@ -0,0 +1,16 @@ +import { Component } from '@angular/core'; +import {RouterLink, RouterOutlet} from "@angular/router"; + +@Component({ + selector: 'app-auth', + standalone: true, + imports: [ + RouterOutlet, + RouterLink + ], + templateUrl: './auth.component.html', + styleUrl: './auth.component.scss' +}) +export class AuthComponent { + +} diff --git a/src/app/routes/authentification/authentification-routing.module.ts b/src/app/routes/authentification/authentification-routing.module.ts new file mode 100644 index 0000000..1d261dd --- /dev/null +++ b/src/app/routes/authentification/authentification-routing.module.ts @@ -0,0 +1,24 @@ +import {NgModule} from '@angular/core'; +import {RouterModule, Routes} from '@angular/router'; +import {RegisterComponent} from "@app/shared/features/register/register.component"; +import {AuthComponent} from "@app/routes/authentification/auth/auth.component"; +import {LoginComponent} from "@app/shared/features/login/login.component"; + +const routes: Routes = [ + { + path: '', component: AuthComponent, children: [ + + {path: '', component: LoginComponent}, + {path: 'register', component: RegisterComponent}, + ] + }, + {path: 'not-found', loadChildren: () => import('@app/routes/not-found/not-found.module').then(m => m.NotFoundModule)}, + {path: '**', redirectTo: 'not-found'} +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class AuthentificationRoutingModule { +} diff --git a/src/app/routes/authentification/authentification.module.ts b/src/app/routes/authentification/authentification.module.ts new file mode 100644 index 0000000..f575913 --- /dev/null +++ b/src/app/routes/authentification/authentification.module.ts @@ -0,0 +1,14 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { AuthentificationRoutingModule } from './authentification-routing.module'; + + +@NgModule({ + declarations: [], + imports: [ + CommonModule, + AuthentificationRoutingModule + ] +}) +export class AuthentificationModule { } diff --git a/src/app/routes/my-profile/my-profile-routing.module.ts b/src/app/routes/my-profile/my-profile-routing.module.ts new file mode 100644 index 0000000..e10fe35 --- /dev/null +++ b/src/app/routes/my-profile/my-profile-routing.module.ts @@ -0,0 +1,14 @@ +import {NgModule} from '@angular/core'; +import {RouterModule, Routes} from '@angular/router'; +import {MyProfileComponent} from "@app/routes/my-profile/my-profile.component"; + +const routes: Routes = [ + {path: '', component: MyProfileComponent} +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class MyProfileRoutingModule { +} diff --git a/src/app/routes/my-profile/my-profile.component.html b/src/app/routes/my-profile/my-profile.component.html new file mode 100644 index 0000000..081d224 --- /dev/null +++ b/src/app/routes/my-profile/my-profile.component.html @@ -0,0 +1 @@ +

my-profile works!

diff --git a/src/app/routes/my-profile/my-profile.component.scss b/src/app/routes/my-profile/my-profile.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/routes/my-profile/my-profile.component.spec.ts b/src/app/routes/my-profile/my-profile.component.spec.ts new file mode 100644 index 0000000..aa75630 --- /dev/null +++ b/src/app/routes/my-profile/my-profile.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MyProfileComponent } from './my-profile.component'; + +describe('MyProfileComponent', () => { + let component: MyProfileComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [MyProfileComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(MyProfileComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/routes/my-profile/my-profile.component.ts b/src/app/routes/my-profile/my-profile.component.ts new file mode 100644 index 0000000..21d4ef3 --- /dev/null +++ b/src/app/routes/my-profile/my-profile.component.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-my-profile', + standalone: true, + imports: [], + templateUrl: './my-profile.component.html', + styleUrl: './my-profile.component.scss' +}) +export class MyProfileComponent { + +} diff --git a/src/app/routes/my-profile/my-profile.module.ts b/src/app/routes/my-profile/my-profile.module.ts new file mode 100644 index 0000000..f2ba53b --- /dev/null +++ b/src/app/routes/my-profile/my-profile.module.ts @@ -0,0 +1,14 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { MyProfileRoutingModule } from './my-profile-routing.module'; + + +@NgModule({ + declarations: [], + imports: [ + CommonModule, + MyProfileRoutingModule + ] +}) +export class MyProfileModule { } diff --git a/src/app/shared/components/nav-bar/nav-bar.component.html b/src/app/shared/components/nav-bar/nav-bar.component.html index e642f5e..6457607 100644 --- a/src/app/shared/components/nav-bar/nav-bar.component.html +++ b/src/app/shared/components/nav-bar/nav-bar.component.html @@ -1,4 +1,4 @@ -
+
+ Mot de passe oublié? + + + +
+ +
+
+
+ + +
+
+
+

Vous n'avez pas de compte? + Créez-en ici +

+
+ diff --git a/src/app/shared/features/login/login.component.scss b/src/app/shared/features/login/login.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/shared/features/login/login.component.spec.ts b/src/app/shared/features/login/login.component.spec.ts new file mode 100644 index 0000000..1e19e5d --- /dev/null +++ b/src/app/shared/features/login/login.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LoginComponent } from './login.component'; + +describe('LoginComponent', () => { + let component: LoginComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [LoginComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(LoginComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/features/login/login.component.ts b/src/app/shared/features/login/login.component.ts new file mode 100644 index 0000000..3c88f22 --- /dev/null +++ b/src/app/shared/features/login/login.component.ts @@ -0,0 +1,35 @@ +import {Component, inject, output} from '@angular/core'; +import {Router, RouterLink} from "@angular/router"; +import {FormBuilder, FormControl, ReactiveFormsModule, Validators} from "@angular/forms"; + +@Component({ + selector: 'app-login', + standalone: true, + imports: [ + RouterLink, + ReactiveFormsModule + ], + templateUrl: './login.component.html', + styleUrl: './login.component.scss' +}) +export class LoginComponent { + private formBuilder = inject(FormBuilder); + private router = inject(Router); + loginForm = this.formBuilder.group({ + email: new FormControl('', Validators.required), + password: new FormControl('', Validators.required) + }); + + formSubmitted = output() + + onSubmit() { + if (this.loginForm.invalid) { + return; + } + const data = this.loginForm.getRawValue(); + this.formSubmitted.emit(data); + + this.router.navigate(['/my-profile']) + } + +} diff --git a/src/app/shared/features/register/register.component.html b/src/app/shared/features/register/register.component.html new file mode 100644 index 0000000..39cfee3 --- /dev/null +++ b/src/app/shared/features/register/register.component.html @@ -0,0 +1,67 @@ +
+ +
+
+ + + + + + + + +
+
+ +
+
+ + + + + + + +
+
+ +
+
+
+ + + + + + + + +
+
+
+ +
+ +
+
+

Vous avez un compte? + Connectez vous ici +

+
+
diff --git a/src/app/shared/features/register/register.component.scss b/src/app/shared/features/register/register.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/shared/features/register/register.component.spec.ts b/src/app/shared/features/register/register.component.spec.ts new file mode 100644 index 0000000..3a5dfc8 --- /dev/null +++ b/src/app/shared/features/register/register.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RegisterComponent } from './register.component'; + +describe('RegisterComponent', () => { + let component: RegisterComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [RegisterComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(RegisterComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/features/register/register.component.ts b/src/app/shared/features/register/register.component.ts new file mode 100644 index 0000000..12326ca --- /dev/null +++ b/src/app/shared/features/register/register.component.ts @@ -0,0 +1,35 @@ +import {Component, inject, output} from '@angular/core'; +import {Router, RouterLink} from "@angular/router"; +import {FormBuilder, FormControl, ReactiveFormsModule, Validators} from "@angular/forms"; + +@Component({ + selector: 'app-register', + standalone: true, + imports: [ + RouterLink, + ReactiveFormsModule + ], + templateUrl: './register.component.html', + styleUrl: './register.component.scss' +}) +export class RegisterComponent { + private formBuilder = inject(FormBuilder); + private router = inject(Router); + protected registerForm = this.formBuilder.group({ + name: new FormControl('', Validators.required), + email: new FormControl('', Validators.required), + password: new FormControl('', Validators.required) + }); + + formSubmitted = output() + + onSubmit() { + if (this.registerForm.invalid) { + return; + } + const data = this.registerForm.getRawValue(); + this.formSubmitted.emit(data); + + this.router.navigate(['/auth']) + } +} diff --git a/tailwind.config.js b/tailwind.config.js index 5ccbb72..e14b664 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -8,6 +8,13 @@ module.exports = { extend: { backgroundColor: ['dark'], textColor: ['dark'], + boxShadow: { + oauthBtn: + 'inset -2px -2px 8px 0px rgba(0, 0, 0, 0.25), 2px 2px 8px 0px rgba(0, 0, 0, 0.25)', + }, + backgroundImage: { + auth: 'url("https://images.unsplash.com/photo-1477346611705-65d1883cee1e?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D")', + }, }, }, plugins: [],