create security/overview component

Author: Machometec

src/app/security/overview/overview.component.css

@@ -0,0 +1,48 @@
+<div class="container pt-3">
+   <div class="row">
+      <div id="sidebar" style="width: 260px;">
+         <app-sidebar></app-sidebar>
+      </div>
+      <div id="content" class="flex-grow-1" style="width: 400px;">
+         <article>
+            <h1>Overview</h1>
+            <hr>
+            <p>
+               DevNet Web provides many security tools and libraries for building secure web applications and APIs, and these security features are:
+            </p>
+            <ul>
+               <li>Cookie-based Authentication</li>
+               <li>Token-based Authentication</li>
+               <li>Policy-based Authorisation</li>
+               <li>Role-based Authorisation</li>
+               <li>Identity Manager</li>
+               <li>CSRF Prevention</li>
+            </ul>
+            <br>
+            <h3>Requirement</h3>
+            <p>
+               These security features are part of the DevNet Web package, and if it's not already installed on your system or project, you still can install it using the composer command line:
+            </p>
+            <pre><code class="language-shell">composer require devnet/web</code></pre>
+            <p>
+               Optionally, you may need the DevNet Entity ORM package if you want to use the Identity manager.
+            </p>
+            <pre><code class="language-shell">composer require devnet/entity</code></pre>
+         </article>
+         <nav class="no-print" aria-label="Page navigation">
+            <ul class="nav-page">
+               <li class="nav-page-item">
+                  <a class="nav-page-link" routerLink="/docs/entity/migrations">
+                     <i class="chevron left"></i> Previous
+                  </a>
+               </li>
+               <li class="nav-page-item">
+                  <a class="nav-page-link" routerLink="/docs/security/authentication">
+                     Next <i class="chevron right"></i>
+                  </a>
+               </li>
+            </ul>
+         </nav>
+      </div>
+   </div>
+</div>

src/app/security/overview/overview.component.html

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

src/app/security/overview/overview.component.spec.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+import hljs from 'highlight.js/lib/common';
+
+@Component({
+  selector: 'security-overview',
+  templateUrl: './overview.component.html',
+  styleUrls: ['./overview.component.css']
+})
+export class OverviewComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+    hljs.highlightAll();
+  }
+
+}

src/app/security/overview/overview.component.ts

@@ -1,7 +1,11 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { OverviewComponent } from './overview/overview.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  { path: 'docs/security/overview', component: OverviewComponent },
+  { path: 'docs/security', redirectTo: 'docs/security/overview', pathMatch: 'full' }
+];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],

src/app/security/security-routing.module.ts

@@ -2,9 +2,12 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SecurityRoutingModule } from './security-routing.module';
 import { SharedModule } from '../shared/shared.module';
+import { OverviewComponent } from './overview/overview.component';
 
 @NgModule({
-  declarations: [],
+  declarations: [
+    OverviewComponent
+  ],
   imports: [
     CommonModule,
     SecurityRoutingModule,

src/app/security/security.module.ts

@@ -82,10 +82,10 @@
          <div class="collapse" id="security-collapse" data-bs-parent="#menu" routerLinkActive="show">
             <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
                <li><a class="link-dark d-inline-flex text-decoration-none rounded" routerLink="/docs/security/overview" routerLinkActive="fw-bold">Overview</a></li>
-               <li><a class="link-dark d-inline-flex text-decoration-none rounded" routerLink="/docs/security/antiforgery" routerLinkActive="fw-bold">Antiforgery</a></li>
                <li><a class="link-dark d-inline-flex text-decoration-none rounded" routerLink="/docs/security/authentication" routerLinkActive="fw-bold">Authentication</a></li>
                <li><a class="link-dark d-inline-flex text-decoration-none rounded" routerLink="/docs/security/authorisation" routerLinkActive="fw-bold">Authorisation</a></li>
                <li><a class="link-dark d-inline-flex text-decoration-none rounded" routerLink="/docs/security/identity" routerLinkActive="fw-bold">Identity Manager</a></li>
+               <li><a class="link-dark d-inline-flex text-decoration-none rounded" routerLink="/docs/security/antiforgery" routerLinkActive="fw-bold">CSRF Prevention</a></li>
             </ul>
          </div>
       </li>