Add Admin module

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,18 @@
+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";
+
+let routing = RouterModule.forChild([
+    { path: "auth", component: AuthComponent },
+    { path: "main", component: AdminComponent },
+    { path: "**", redirectTo: "auth" },
+])
+
+@NgModule({
+    imports: [CommonModule, FormsModule, routing],
+    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,25 @@
+import { Component } from "@angular/core";
+import { NgForm } from "@angular/forms";
+import { Router } from "@angular/router";
+
+@Component({
+    templateUrl: "auth.component.html"
+})
+
+export class AuthComponent {
+
+    public username: string;
+    public password: string;
+    public errorMessage: string;
+
+    constructor(private router: Router){}
+
+    authenticate(form: NgForm) {
+        if (form.valid) {
+            //perform authentication
+            this.router.navigateByUrl("/admin/main");
+        } else {
+            this.errorMessage = "Form data invalid";
+        }
+    }
+}

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/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">