From d58070c5ba675eaae9bea4d71d4e78d0fb217466 Mon Sep 17 00:00:00 2001
From: Charles Showalter <cshowalter@xtechnology.org>
Date: Fri, 20 May 2022 13:39:46 -0700
Subject: [PATCH] Start adding Login and Register Components

---
 .../src/app/account/account-routing.module.ts | 20 ++++++++
 client/src/app/account/account.module.ts      | 19 ++++++++
 client/src/app/account/account.service.ts     | 48 +++++++++++++++++++
 .../app/account/login/login.component.html    | 17 +++++++
 .../app/account/login/login.component.scss    |  0
 .../src/app/account/login/login.component.ts  | 15 ++++++
 .../account/register/register.component.html  |  1 +
 .../account/register/register.component.scss  |  0
 .../account/register/register.component.ts    | 15 ++++++
 client/src/app/app-routing.module.ts          |  1 +
 .../app/core/nav-bar/nav-bar.component.html   |  4 +-
 client/src/app/shared/models/address.ts       |  8 ++++
 client/src/app/shared/models/user.ts          |  5 ++
 13 files changed, 151 insertions(+), 2 deletions(-)
 create mode 100644 client/src/app/account/account-routing.module.ts
 create mode 100644 client/src/app/account/account.module.ts
 create mode 100644 client/src/app/account/account.service.ts
 create mode 100644 client/src/app/account/login/login.component.html
 create mode 100644 client/src/app/account/login/login.component.scss
 create mode 100644 client/src/app/account/login/login.component.ts
 create mode 100644 client/src/app/account/register/register.component.html
 create mode 100644 client/src/app/account/register/register.component.scss
 create mode 100644 client/src/app/account/register/register.component.ts
 create mode 100644 client/src/app/shared/models/address.ts
 create mode 100644 client/src/app/shared/models/user.ts

diff --git a/client/src/app/account/account-routing.module.ts b/client/src/app/account/account-routing.module.ts
new file mode 100644
index 0000000..796dd6f
--- /dev/null
+++ b/client/src/app/account/account-routing.module.ts
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { LoginComponent } from './login/login.component';
+import { RegisterComponent } from './register/register.component';
+import { RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [
+  {path: 'login', component: LoginComponent},
+  {path: 'register', component: RegisterComponent}
+];
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    RouterModule.forChild(routes)
+  ],
+  exports: [RouterModule]
+})
+export class AccountRoutingModule { }
diff --git a/client/src/app/account/account.module.ts b/client/src/app/account/account.module.ts
new file mode 100644
index 0000000..205301a
--- /dev/null
+++ b/client/src/app/account/account.module.ts
@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { LoginComponent } from './login/login.component';
+import { RegisterComponent } from './register/register.component';
+import { AccountRoutingModule } from './account-routing.module';
+
+
+
+@NgModule({
+  declarations: [
+    LoginComponent,
+    RegisterComponent
+  ],
+  imports: [
+    CommonModule,
+    AccountRoutingModule
+  ]
+})
+export class AccountModule { }
diff --git a/client/src/app/account/account.service.ts b/client/src/app/account/account.service.ts
new file mode 100644
index 0000000..a5ebcc6
--- /dev/null
+++ b/client/src/app/account/account.service.ts
@@ -0,0 +1,48 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+import { BehaviorSubject, map } from 'rxjs';
+import { environment } from 'src/environments/environment';
+import { IUser } from '../shared/models/user';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AccoutService {
+  baseUrl = environment.apiUrl;
+  private currentUserSource = new BehaviorSubject<IUser>(null);
+  currentUser$ = this.currentUserSource.asObservable();
+
+  constructor(private http: HttpClient, private router: Router) { }
+
+  login(values: any){
+    return this.http.post(this.baseUrl + 'account/login', values).pipe(
+      map((user: IUser) =>{
+        if(user) {
+          localStorage.setItem('token', user.token);
+          this.currentUserSource.next(user);
+        }
+      })
+    );
+  }
+
+  register(values: any){
+    return this.http.post(this.baseUrl + 'account/register', values).pipe(
+      map((user:IUser) => {
+        if(user){
+          localStorage.setItem('token', user.token);
+        }
+      })
+    );
+  }
+
+  logout(){
+    localStorage.removeItem('token');
+    this.currentUserSource.next(null);
+    this.router.navigateByUrl('/');
+  }
+
+  checkEmailExists(email: string){
+    return this.http.get(this.baseUrl + '/account/emailexists?email=' + email);
+  }
+}
diff --git a/client/src/app/account/login/login.component.html b/client/src/app/account/login/login.component.html
new file mode 100644
index 0000000..4af8ac5
--- /dev/null
+++ b/client/src/app/account/login/login.component.html
@@ -0,0 +1,17 @@
+<div class="d-flex justify-content-center mt-5">
+  <div class="col-3">
+    <form>
+      <h1 class="h3 mb-3 fw-normal text-center">Login</h1>
+
+      <div class="form-floating mb-2">
+        <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
+        <label for="floatingInput">Email address</label>
+      </div>
+      <div class="form-floating mb-2">
+        <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
+        <label for="floatingPassword">Password</label>
+      </div>
+      <button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
+    </form>
+  </div>
+</div>
diff --git a/client/src/app/account/login/login.component.scss b/client/src/app/account/login/login.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/app/account/login/login.component.ts b/client/src/app/account/login/login.component.ts
new file mode 100644
index 0000000..c74528f
--- /dev/null
+++ b/client/src/app/account/login/login.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.scss']
+})
+export class LoginComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/client/src/app/account/register/register.component.html b/client/src/app/account/register/register.component.html
new file mode 100644
index 0000000..6b0ba2e
--- /dev/null
+++ b/client/src/app/account/register/register.component.html
@@ -0,0 +1 @@
+<p>register works!</p>
diff --git a/client/src/app/account/register/register.component.scss b/client/src/app/account/register/register.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/app/account/register/register.component.ts b/client/src/app/account/register/register.component.ts
new file mode 100644
index 0000000..8f62eda
--- /dev/null
+++ b/client/src/app/account/register/register.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-register',
+  templateUrl: './register.component.html',
+  styleUrls: ['./register.component.scss']
+})
+export class RegisterComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/client/src/app/app-routing.module.ts b/client/src/app/app-routing.module.ts
index 12264f8..7fc0121 100644
--- a/client/src/app/app-routing.module.ts
+++ b/client/src/app/app-routing.module.ts
@@ -13,6 +13,7 @@ const routes: Routes = [
   {path: 'shop', loadChildren: ()=> import('./shop/shop.module').then(mod => mod.ShopModule), data: {breadcrumb: 'Shop'}},
   {path: 'basket', loadChildren: ()=> import('./basket/basket.module').then(mod => mod.BasketModule), data: {breadcrumb: 'Shopping Cart'}},
   {path: 'checkout', loadChildren: ()=> import('./checkout/checkout.module').then(mod => mod.CheckoutModule), data: {breadcrumb: 'Checkout'}},
+  {path: 'account', loadChildren: ()=> import('./account/account.module').then(mod => mod.AccountModule), data: {breadcrumb: {skip: true}}},
   {path: '**', redirectTo: 'not-found', pathMatch: 'full'}
 ];
 
diff --git a/client/src/app/core/nav-bar/nav-bar.component.html b/client/src/app/core/nav-bar/nav-bar.component.html
index a17bd4a..8a707b4 100644
--- a/client/src/app/core/nav-bar/nav-bar.component.html
+++ b/client/src/app/core/nav-bar/nav-bar.component.html
@@ -10,8 +10,8 @@
             <i class="fa fa-shopping-cart fa-2x me-3 text-dark"></i>
             <div *ngIf="(basket$ | async) as basket" class="cart-no">{{basket.items.length}}</div>
         </a>
-        <a class="btn btn-outline-secondary me-3" href="#">Login</a>
-        <a class="btn btn-outline-secondary me-3" href="#">Sign up</a>
+        <a routerLink="/account/login" class="btn btn-outline-secondary me-3" href="#">Login</a>
+        <a routerLink="/account/register" class="btn btn-outline-secondary me-3" href="#">Sign up</a>
     </div>
 
 </div>
diff --git a/client/src/app/shared/models/address.ts b/client/src/app/shared/models/address.ts
new file mode 100644
index 0000000..6ab08d5
--- /dev/null
+++ b/client/src/app/shared/models/address.ts
@@ -0,0 +1,8 @@
+export interface IAddress {
+  firstName: string;
+  lastName: string;
+  street: string;
+  city: string;
+  state: string;
+  zipCode: string;
+}
diff --git a/client/src/app/shared/models/user.ts b/client/src/app/shared/models/user.ts
new file mode 100644
index 0000000..a21a030
--- /dev/null
+++ b/client/src/app/shared/models/user.ts
@@ -0,0 +1,5 @@
+export interface IUser {
+  email: string;
+  displayName: string;
+  token: string;
+}