Merge pull request #55 from sourcefuse/GH-20-D

feat(arc-docs):auth module. documentation

projects/arc-docs/src/app/docs/auth-doc/auth-doc-routing.module.ts

@@ -0,0 +1,21 @@
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
+import {DocIntrodutionComponent} from './components/doc-introdution/doc-introdution.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    redirectTo: 'authDocIntro',
+    pathMatch: 'full',
+  },
+  {
+    path: 'authDocIntro',
+    component: DocIntrodutionComponent,
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class AuthDocRoutingModule {}

projects/arc-docs/src/app/docs/auth-doc/auth-doc.module.ts

@@ -0,0 +1,19 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+
+import {AuthDocRoutingModule} from './auth-doc-routing.module';
+import {DocIntrodutionComponent} from './components/doc-introdution/doc-introdution.component';
+import {CliWrapperComponent} from '@project-lib/components/cli-wrapper/cli-wrapper.component';
+import {ThemeModule} from '@project-lib/theme/theme.module';
+
+@NgModule({
+  declarations: [DocIntrodutionComponent],
+
+  imports: [
+    CommonModule,
+    AuthDocRoutingModule,
+    ThemeModule,
+    CliWrapperComponent,
+  ],
+})
+export class AuthDocModule {}

projects/arc-docs/src/app/docs/auth-doc/components/doc-introdution/doc-introdution.component.html

@@ -0,0 +1,66 @@
+<div class="intro-wrapper">
+  <div class="1st-phase">
+    <nb-card>
+      <nb-card-header fixed>
+        <h2 class="nb-card-header-title">Auth Module</h2>
+      </nb-card-header>
+      <nb-card-body>
+        <p>
+          The main goal of the Auth module is to provide a pluggable set of
+          components and services for easier setup of the authentication layer
+          for Angular applications. The module separates the UI part
+          (login/register/etc components) from the business logic with the help
+          of the authentication
+        </p>
+        <div class="note">
+          <p>NOTE:</p>
+          <a
+            href="https://github.com/sourcefuse/loopback4-microservice-catalog/tree/master/services/authentication-service"
+            >The setup still requires communication with backend services.
+          </a>
+        </div>
+      </nb-card-body>
+    </nb-card>
+
+    <nb-card>
+      <nb-card-header fixed>
+        <h2 class="nb-card-header-title">Authentication UI components</h2>
+      </nb-card-header>
+      <nb-card-body>
+        <ul>
+          <li>Login</li>
+          <li>Sign Up</li>
+          <li>Forget Password</li>
+          <li>Reset Password</li>
+        </ul>
+        <p>You can use the built-in components</p>
+      </nb-card-body>
+    </nb-card>
+
+    <nb-card>
+      <nb-card-header fixed>
+        <h2 class="nb-card-header-title">Auth Strategies</h2>
+      </nb-card-header>
+      <nb-card-body>
+        <div class="note" *ngFor="let list of strategyList">
+          {{ list.Data }}
+        </div>
+      </nb-card-body>
+    </nb-card>
+
+    <nb-card>
+      <nb-card-header fixed>
+        <h2 class="nb-card-header-title">Helping services</h2>
+      </nb-card-header>
+      <nb-card-body>
+        <ul>
+          <div>
+            <li *ngFor="let data of helpingData">
+              <p>{{ data.list }}</p>
+            </li>
+          </div>
+        </ul>
+      </nb-card-body>
+    </nb-card>
+  </div>
+</div>

projects/arc-docs/src/app/docs/auth-doc/components/doc-introdution/doc-introdution.component.scss

@@ -0,0 +1,15 @@
+.note {
+  background-color: #e0f7fa; 
+  border-left: 4px solid #036ea3; 
+  padding: 16px;
+  margin: 16px 0;
+
+}
+a {
+  text-decoration: none;
+  color: #19a5ff;
+}
+
+a:hover {
+  text-decoration: underline; 
+}

projects/arc-docs/src/app/docs/auth-doc/components/doc-introdution/doc-introdution.component.spec.ts

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

projects/arc-docs/src/app/docs/auth-doc/components/doc-introdution/doc-introdution.component.ts

@@ -0,0 +1,44 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'app-doc-introdution',
+  templateUrl: './doc-introdution.component.html',
+  styleUrls: ['./doc-introdution.component.scss'],
+})
+export class DocIntrodutionComponent {
+  strategyList: object[] = [
+    {
+      Data: ' AuthService: Describes how to handle login and logout with Authentication.',
+    },
+    {
+      Data: 'AuthGuard: Explains how to protect routes based on the users authentication state.',
+    },
+    {
+      Data: 'AppComponent: Shows how to manage user state and provide login/logout functionality in the UI.',
+    },
+    {
+      Data: '  AppRoutingModule: Demonstrates how to configure routes and apply authentication guards.',
+    },
+  ];
+
+  helpingData: object[] = [
+    {
+      list: `AuthService: AuthService is a service that handles all authentication-related operations
+       in an Angular application . It provides methods for logging in and signing up users 
+       using various authentication strategies, managing the current users authentication state, and handling logout.`,
+    },
+    {
+      list: `AuthGaurd: AuthGuard is a route guard in Angular that prevents unauthorized access to certain routes in your application. 
+      It checks if a user is authenticated before allowing access to a route, ensuring that only 
+      authenticated users can access protected routes.`,
+    },
+    {
+      list: `SessionStoreService: SessionStoreService is an Angular service that provides a simple API for interacting with the browser's 
+      session storage. It allows you to store, retrieve, and remove data that persists for the duration of the page session.`,
+    },
+    {
+      list: `ApiService: ApiService is an Angular service that provides a simple API for interacting with a backend server. 
+      It handles HTTP requests and responses, making it easy to perform CRUD (Create, Read, Update, Delete) operations.`,
+    },
+  ];
+}

projects/arc-docs/src/app/docs/docs-routing.module.ts

@@ -19,6 +19,11 @@ const routes: Routes = [
         loadChildren: () =>
           import('./guide/guide.module').then(m => m.GuideModule),
       },
+      {
+        path: 'auth-doc',
+        loadChildren: () =>
+          import('./auth-doc/auth-doc.module').then(m => m.AuthDocModule),
+      },
     ],
   },
 ];