Merge pull request #5 from Popovkov57/development

Development

src/app/admin/admin.component.html

@@ -0,0 +1,3 @@
+<div class="bg-info p-2 text-white">
+    <h3>Placeholder for Admin Features</h3>
+</div>

src/app/admin/admin.component.ts

@@ -0,0 +1,7 @@
+import { Component } from "@angular/core";
+
+@Component({
+    templateUrl: "admin.component.html"
+})
+
+export class AdminComponent {}

src/app/admin/admin.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { FormsModule } from "@angular/forms";
+import { RouterModule } from "@angular/router";
+import { AuthComponent } from "./auth.component";
+import { AdminComponent } from "./admin.component";
+import { AuthGard } from "./auth.gard";
+
+let routing = RouterModule.forChild([
+    { path: "auth", component: AuthComponent },
+    { path: "main", component: AdminComponent, canActivate: [AuthGard] },
+    { path: "**", redirectTo: "auth" },
+])
+
+@NgModule({
+    imports: [CommonModule, FormsModule, routing],
+    providers: [AuthGard],
+    declarations: [AuthComponent, AdminComponent]
+})
+export class AdminModule{}

src/app/admin/auth.component.html

@@ -0,0 +1,22 @@
+<div class="bg-info p-2 text-center">
+    <h3>SportsStore Admin</h3>
+</div>
+<div class="bg-danger mt-2 p-2 text-center text-white" *ngIf="errorMessage != null">
+    {{ errorMessage }}
+</div>
+<div class="p-2">
+    <form novalidate #form="ngForm" (ngSubmit)="authenticate(form)">
+        <div class="form-group">
+            <label>Name</label>
+            <input class="form-control" name="username" [(ngModel)]="username" required />
+        </div>
+        <div class="form-group">
+            <label>Password</label>
+            <input class="form-control" type="password" name="password" [(ngModel)]="password" required />
+        </div>
+        <div class="text-center">
+            <button class="btn btn-secondary m-1" routerLink="/">Go back></button>
+            <button class="btn btn-primary m-1" type="submit">Log in</button>
+        </div>
+    </form>
+</div>

src/app/admin/auth.component.ts

@@ -0,0 +1,31 @@
+import { Component } from "@angular/core";
+import { NgForm } from "@angular/forms";
+import { Router } from "@angular/router";
+import { AuthService } from "../model/auth.service";
+
+@Component({
+    templateUrl: "auth.component.html"
+})
+
+export class AuthComponent {
+
+    public username: string;
+    public password: string;
+    public errorMessage: string;
+
+    constructor(private router: Router, private auth: AuthService){}
+
+    authenticate(form: NgForm) {
+        if (form.valid) {
+            //perform authentication
+            this.auth.authenticate(this.username, this.password).subscribe(response => {
+                if (response) {
+                    this.router.navigateByUrl("/admin/main");
+                }
+                this.errorMessage = "Authentication Failed"
+            })
+        } else {
+            this.errorMessage = "Form data invalid";
+        }
+    }
+}

src/app/admin/auth.gard.ts

@@ -0,0 +1,18 @@
+import { Inject, Injectable } from "@angular/core";
+import { ActivatedRouteSnapshot, RouterStateSnapshot, Router } from "@angular/router";
+import { AuthService } from "../model/auth.service";
+
+@Injectable()
+export class AuthGard {
+
+    constructor(private router: Router, private auth: AuthService) {}
+
+    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
+        if (!this.auth.authenticated) {
+            this.router.navigateByUrl("/admin/auth");
+            return false;
+        }
+        return true;
+    }
+
+}

src/app/app.module.ts

@@ -12,6 +12,7 @@ import { StoreFirstGuard } from './storeFirst.guard';
   imports: [BrowserModule, StoreModule,
     RouterModule.forRoot([
       { 
+
         path: "store", component: StoreComponent,
         canActivate: [StoreFirstGuard]
       },
@@ -23,6 +24,11 @@ import { StoreFirstGuard } from './storeFirst.guard';
         path: "checkout", component: CheckoutComponent,
         canActivate: [StoreFirstGuard]
       },
+      {
+        path: "admin",
+        loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
+        canActivate: [StoreFirstGuard]
+      },
       { path: "**", redirectTo: "/store" }
     ])],
   providers: [StoreFirstGuard],

src/app/model/auth.service.ts

@@ -0,0 +1,22 @@
+import { Injectable } from "@angular/core";
+import { Observable } from "rxjs";
+import { RestDataSource } from "./rest.datasource";
+
+@Injectable()
+export class AuthService {
+
+    constructor(private datasource: RestDataSource) {}
+
+    authenticate(username: string, password: string): Observable<boolean> {
+        return this.datasource.authenticate(username, password);
+    }
+
+    get authenticated(): boolean {
+        return this.datasource.auth_token != null;
+    }
+
+    clear() {
+        this.datasource.auth_token = null;
+    }
+
+}

src/app/model/model.module.ts

@@ -4,9 +4,14 @@ import { StaticDataSource } from "./static.datasource";
 import { Cart } from "./cart.model";
 import { Order } from "./order.model";
 import { OrderRepository } from "./order.repository";
+import { RestDataSource } from "./rest.datasource";
+import { HttpClientModule } from "@angular/common/http";
+import { AuthService } from "./auth.service";
 
 @NgModule({
-    providers: [ProductRepository, StaticDataSource, Cart, Order, OrderRepository]
+    imports: [HttpClientModule],
+    providers: [ProductRepository, Cart, Order, OrderRepository, 
+        { provide: StaticDataSource, useClass: RestDataSource }, RestDataSource, AuthService]
 })
 
 export class ModelModule {}

src/app/model/rest.datasource.ts

@@ -0,0 +1,39 @@
+import { Injectable } from "@angular/core";
+import { HttpClient } from "@angular/common/http";
+import { Observable } from "rxjs";
+import { Product } from "./product.model";
+import { Cart } from "./cart.model";
+import { Order } from "./order.model";
+import { map } from "rxjs";
+
+const PROTOCOL = "http";
+const PORT = 3500;
+
+@Injectable()
+export class RestDataSource {
+
+    baseUrl: string;
+    auth_token: string;
+
+    constructor(private http: HttpClient) {
+        this.baseUrl = `${PROTOCOL}://${location.hostname}:${PORT}/`
+    }
+
+    getProducts(): Observable<Product[]> {
+        return this.http.get<Product[]>(this.baseUrl + "products");
+    }
+
+    saveOrder(order: Order): Observable<Order> {
+        console.log(JSON.stringify(order));
+        return this.http.post<Order>(this.baseUrl + "orders", order);
+    }
+
+    authenticate(user: string, pass: string): Observable<boolean> {
+        return this.http.post<any>(this.baseUrl + "login", {
+            name: user, password: pass
+        }).pipe(map(response => {
+            this.auth_token = response.success ? response.token : null;
+            return response.success;
+        }))
+    }
+}

src/app/store/store.component.html

@@ -14,6 +14,9 @@
                 <button *ngFor="let category of categories" [class.active]="category == selectedCategory" class="btn btn-outline-primary btn-block" (click)="changeCategory(category)">
                     {{category}}
                 </button>
+                <button class="btn btn-block btn-danger m-t-3" routerLink="/admin">
+                    Admin
+                </button>
             </div>
         </div>
         <div class="col-9 p-2">