page sign

package.json

@@ -7,7 +7,7 @@
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
-    "api": "json-server db.json"
+    "api": "json-server-auth db.json"
   },
   "private": true,
   "dependencies": {
@@ -33,6 +33,7 @@
     "@types/node": "^12.11.1",
     "@types/underscore": "^1.11.4",
     "jasmine-core": "~3.10.0",
+    "json-server-auth": "^2.1.0",
     "karma": "~6.3.0",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage": "~2.0.3",

src/app/app-routing.module.ts

@@ -8,6 +8,10 @@ const routes: Routes = [
   { path: '', redirectTo: 'home', pathMatch: 'full' },
   { path: 'home', component: PageAccueilComponent },
   { path: 'details', component: PageDetailsComponent },
+  { path: 'account', 
+    loadChildren: () => import('./modules/account/account.module')
+    .then(m => m.AccountModule) 
+  },
   { path: '**', component: PageNotFoundComponent }
 ];
 

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

@@ -14,6 +14,9 @@
             <div class="navbar-nav">
                 <a routerLink="home" routerLinkActive="active-custom" class="nav-link">Accueil</a>
                 <a routerLink="details" routerLinkActive="active-custom" class="nav-link">Details</a>
+                <a routerLink="account" routerLinkActive="active-custom" class="nav-link">Compte utilisateur</a>
+                <a routerLink="account/signin" routerLinkActive="active-custom" class="nav-link">Se connecter</a>
+                <a routerLink="account/signup" routerLinkActive="active-custom" class="nav-link">S'inscrire</a>
                 <a class="nav-link">Panier</a>
                 <a class="nav-link disabled">Plus d'option bientôt</a>
                 <a class="nav-link disabled" *ngIf="likeCounter == 0"> Pas de plante likée</a>

src/app/modules/account/account-routing.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { any } from 'underscore';
+import { PageForgotPasswordComponent } from './pages/page-forgot-password/page-forgot-password.component';
+import { PageResetPasswordComponent } from './pages/page-reset-password/page-reset-password.component';
+import { PageSigninComponent } from './pages/page-signin/page-signin.component';
+import { PageSignupnComponent } from './pages/page-signupn/page-signupn.component';
+
+const routes: Routes = [
+  { path: '', redirectTo: 'signin', pathMatch: 'full' },
+  { path: 'signin', component: PageSigninComponent },
+  { path: 'signup', component: PageSignupnComponent },
+  { path: 'forgot-password', component: PageForgotPasswordComponent },
+  { path: 'reset-password', component: PageResetPasswordComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class AccountRoutingModule { }

src/app/modules/account/account.module.ts

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { AccountRoutingModule } from './account-routing.module';
+import { PageSigninComponent } from './pages/page-signin/page-signin.component';
+import { PageSignupnComponent } from './pages/page-signupn/page-signupn.component';
+import { PageForgotPasswordComponent } from './pages/page-forgot-password/page-forgot-password.component';
+import { PageResetPasswordComponent } from './pages/page-reset-password/page-reset-password.component';
+import { FormsModule } from '@angular/forms';
+
+
+@NgModule({
+  declarations: [
+    PageSigninComponent,
+    PageSignupnComponent,
+    PageForgotPasswordComponent,
+    PageResetPasswordComponent
+  ],
+  imports: [
+    CommonModule,
+    AccountRoutingModule,
+    FormsModule
+  ]
+})
+export class AccountModule { }

src/app/modules/account/pages/page-forgot-password/page-forgot-password.component.html

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

src/app/modules/account/pages/page-forgot-password/page-forgot-password.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PageForgotPasswordComponent } from './page-forgot-password.component';
+
+describe('PageForgotPasswordComponent', () => {
+  let component: PageForgotPasswordComponent;
+  let fixture: ComponentFixture<PageForgotPasswordComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PageForgotPasswordComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PageForgotPasswordComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/account/pages/page-forgot-password/page-forgot-password.component.ts

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

src/app/modules/account/pages/page-reset-password/page-reset-password.component.html

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

src/app/modules/account/pages/page-reset-password/page-reset-password.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PageResetPasswordComponent } from './page-reset-password.component';
+
+describe('PageResetPasswordComponent', () => {
+  let component: PageResetPasswordComponent;
+  let fixture: ComponentFixture<PageResetPasswordComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PageResetPasswordComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PageResetPasswordComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/account/pages/page-reset-password/page-reset-password.component.ts

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

src/app/modules/account/pages/page-signin/page-signin.component.html

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

src/app/modules/account/pages/page-signin/page-signin.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PageSigninComponent } from './page-signin.component';
+
+describe('PageSigninComponent', () => {
+  let component: PageSigninComponent;
+  let fixture: ComponentFixture<PageSigninComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PageSigninComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PageSigninComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/account/pages/page-signin/page-signin.component.ts

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

src/app/modules/account/pages/page-signupn/page-signupn.component.html

@@ -0,0 +1,18 @@
+<div class="signup-form text-center">
+    <main class="form-signup">
+        <form (ngSubmit)="onSubmit(signupForm)" #signupForm="ngForm">
+            <h1>Merci de vous inscrire</h1>
+            <div class="form-floating">
+                <input type="email" class="form-control" id="floatingInput" placeholder="" name="email" required ngModel>
+                <label for="floatingInput">Adresse email</label>
+            </div>
+            <div class="form-floating">
+                <input type="password" class="form-control" id="floatingPassword" placeholder="" name="password"
+                    required ngModel>
+                <label for="floatingPassword">Mot de passe</label>
+            </div>
+
+            <button class="w-100 btn btn-lg btn-success" type="submit" [disabled]="signupForm.invalid">Je m'inscris !</button>
+        </form>
+    </main>
+</div>

src/app/modules/account/pages/page-signupn/page-signupn.component.scss

@@ -0,0 +1,32 @@
+.signup-form {
+    height: 100vh;
+    padding-top: 40px;
+    background-color: #f5f5f5;
+}
+
+.form-signup {
+    width: 100%;
+    max-width: 330px;
+    padding: 15px;
+    margin: auto;
+}
+
+.form-signup .checkbox {
+    font-weight: 400;
+}
+
+.form-signup .form-floating:focus-within {
+    z-index: 2;
+}
+
+.form-signup input[type="email"] {
+    margin-bottom: -1px;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.form-signup input[type="password"] {
+    margin-bottom: 10px;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}

src/app/modules/account/pages/page-signupn/page-signupn.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PageSignupnComponent } from './page-signupn.component';
+
+describe('PageSignupnComponent', () => {
+  let component: PageSignupnComponent;
+  let fixture: ComponentFixture<PageSignupnComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PageSignupnComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PageSignupnComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/account/pages/page-signupn/page-signupn.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+import { AuthService } from '../../services/auth.service';
+
+@Component({
+  selector: 'app-page-signupn',
+  templateUrl: './page-signupn.component.html',
+  styleUrls: ['./page-signupn.component.scss']
+})
+export class PageSignupnComponent implements OnInit {
+
+  constructor(private authService: AuthService) { }
+
+  ngOnInit(): void {
+  }
+
+  public onSubmit(objectForm: any): void {
+    console.log(objectForm.form.value);
+    const email = objectForm.form.value.email;
+    const password = objectForm.form.value.password;
+
+    this.authService.signup(email, password).subscribe(
+      resp => console.log(resp)
+    );
+  }
+
+}

src/app/modules/account/services/auth.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AuthService } from './auth.service';
+
+describe('AuthService', () => {
+  let service: AuthService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(AuthService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/modules/account/services/auth.service.ts

@@ -0,0 +1,24 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { environment } from 'src/environments/environment';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthService {
+  private apiUrl: string;
+
+  constructor(private http: HttpClient) {
+    this.apiUrl = environment.apiUrl;
+   }
+
+   signup(email: string, password: string): Observable<any> {
+     const body = {
+       email: email,
+       password: password
+     };
+
+    return this.http.post(`${this.apiUrl}/register`, body);
+   }
+}

src/environments/environment.prod.ts

@@ -1,3 +1,4 @@
 export const environment = {
-  production: true
+  production: true,
+  apiUrl: ""
 };

src/environments/environment.ts

@@ -3,7 +3,8 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false
+  production: false,
+  apiUrl: "http://localhost:3000"
 };
 
 /*