Skip to content

Commit 91c5bca

Browse files
committed
docs(arc-docs): auth module doc
auth module documentation GH-26
1 parent 7cdbfb3 commit 91c5bca

File tree

7 files changed

+197
-0
lines changed

7 files changed

+197
-0
lines changed
Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import {NgModule} from '@angular/core';
2+
import {RouterModule, Routes} from '@angular/router';
3+
import {DocIntrodutionComponent} from './components/doc-introdution/doc-introdution.component';
4+
import {InstallationDocComponent} from './components/installation-doc/installation-doc.component';
5+
6+
const routes: Routes = [
7+
{
8+
path: '',
9+
redirectTo: 'authDocIntro',
10+
pathMatch: 'full',
11+
},
12+
{
13+
path: 'authDocIntro',
14+
component: DocIntrodutionComponent,
15+
},
16+
{
17+
path: 'installation',
18+
component: InstallationDocComponent,
19+
},
20+
];
21+
22+
@NgModule({
23+
imports: [RouterModule.forChild(routes)],
24+
exports: [RouterModule],
25+
})
26+
export class AuthDocRoutingModule {}
Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import {NgModule} from '@angular/core';
2+
import {CommonModule} from '@angular/common';
3+
4+
import {AuthDocRoutingModule} from './auth-doc-routing.module';
5+
import {DocIntrodutionComponent} from './components/doc-introdution/doc-introdution.component';
6+
import {CliWrapperComponent} from '@project-lib/components/cli-wrapper/cli-wrapper.component';
7+
import {ThemeModule} from '@project-lib/theme/theme.module';
8+
import {InstallationDocComponent} from './components/installation-doc/installation-doc.component';
9+
10+
@NgModule({
11+
declarations: [DocIntrodutionComponent, InstallationDocComponent],
12+
imports: [
13+
CommonModule,
14+
AuthDocRoutingModule,
15+
ThemeModule,
16+
CliWrapperComponent,
17+
],
18+
})
19+
export class AuthDocModule {}
Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<div class="intro-wrapper">
2+
<div class="1st-phase">
3+
<nb-card>
4+
<nb-card-header fixed>
5+
<h2 class="nb-card-header-title">Auth Module</h2>
6+
</nb-card-header>
7+
<nb-card-body>
8+
<p>
9+
The main goal of the Auth module is to provide a pluggable set of
10+
components and services for easier setup of the authentication layer
11+
for Angular applications. The module separates the UI part
12+
(login/register/etc components) from the business logic with the help
13+
of the authentication
14+
</p>
15+
<div class="note">
16+
<p>NOTE:</p>
17+
<a
18+
href="https://github.com/sourcefuse/loopback4-microservice-catalog/tree/master/services/authentication-service"
19+
>The setup still requires communication with backend services.
20+
</a>
21+
</div>
22+
</nb-card-body>
23+
</nb-card>
24+
25+
<nb-card>
26+
<nb-card-header fixed>
27+
<h2 class="nb-card-header-title">Authentication UI components</h2>
28+
</nb-card-header>
29+
<nb-card-body>
30+
<ul>
31+
<li>Login</li>
32+
<li>Sign Up</li>
33+
<li>Forget Password</li>
34+
<li>Reset Password</li>
35+
</ul>
36+
<p>You can use the built-in components</p>
37+
</nb-card-body>
38+
</nb-card>
39+
40+
<nb-card>
41+
<nb-card-header fixed>
42+
<h2 class="nb-card-header-title">Auth Strategies</h2>
43+
</nb-card-header>
44+
<nb-card-body>
45+
<div class="note" *ngFor="let list of strategyList">
46+
{{ list.Data }}
47+
</div>
48+
</nb-card-body>
49+
</nb-card>
50+
51+
<nb-card>
52+
<nb-card-header fixed>
53+
<h2 class="nb-card-header-title">Helping services</h2>
54+
</nb-card-header>
55+
<nb-card-body>
56+
<ul>
57+
<div>
58+
<li *ngFor="let data of helpingData">
59+
<p>{{ data.list }}</p>
60+
</li>
61+
</div>
62+
</ul>
63+
</nb-card-body>
64+
</nb-card>
65+
</div>
66+
</div>
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
.note {
2+
background-color: #e0f7fa;
3+
border-left: 4px solid #036ea3;
4+
padding: 16px;
5+
margin: 16px 0;
6+
7+
}
8+
a {
9+
text-decoration: none;
10+
color: #19a5ff;
11+
}
12+
13+
a:hover {
14+
text-decoration: underline;
15+
}
Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import {ComponentFixture, TestBed} from '@angular/core/testing';
2+
3+
import {DocIntrodutionComponent} from './doc-introdution.component';
4+
5+
describe('DocIntrodutionComponent', () => {
6+
let component: DocIntrodutionComponent;
7+
let fixture: ComponentFixture<DocIntrodutionComponent>;
8+
9+
beforeEach(async () => {
10+
await TestBed.configureTestingModule({
11+
declarations: [DocIntrodutionComponent],
12+
}).compileComponents();
13+
14+
fixture = TestBed.createComponent(DocIntrodutionComponent);
15+
component = fixture.componentInstance;
16+
fixture.detectChanges();
17+
});
18+
19+
it('should create', () => {
20+
expect(component).toBeTruthy();
21+
});
22+
});
Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import {Component} from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-doc-introdution',
5+
templateUrl: './doc-introdution.component.html',
6+
styleUrls: ['./doc-introdution.component.scss'],
7+
})
8+
export class DocIntrodutionComponent {
9+
strategyList: object[] = [
10+
{
11+
Data: ' AuthService: Describes how to handle login and logout with Authentication.',
12+
},
13+
{
14+
Data: 'AuthGuard: Explains how to protect routes based on the users authentication state.',
15+
},
16+
{
17+
Data: 'AppComponent: Shows how to manage user state and provide login/logout functionality in the UI.',
18+
},
19+
{
20+
Data: ' AppRoutingModule: Demonstrates how to configure routes and apply authentication guards.',
21+
},
22+
];
23+
24+
helpingData: object[] = [
25+
{
26+
list: `AuthService: AuthService is a service that handles all authentication-related operations
27+
in an Angular application using Firebase Authentication. It provides methods for logging in and signing up users
28+
using various authentication strategies, managing the current users authentication state, and handling logout.`,
29+
},
30+
{
31+
list: `AuthGaurd: AuthGuard is a route guard in Angular that prevents unauthorized access to certain routes in your application.
32+
It checks if a user is authenticated before allowing access to a route, ensuring that only
33+
authenticated users can access protected routes.`,
34+
},
35+
{
36+
list: `SessionStoreService: SessionStoreService is an Angular service that provides a simple API for interacting with the browser's
37+
session storage. It allows you to store, retrieve, and remove data that persists for the duration of the page session.`,
38+
},
39+
{
40+
list: `ApiService: ApiService is an Angular service that provides a simple API for interacting with a backend server.
41+
It handles HTTP requests and responses, making it easy to perform CRUD (Create, Read, Update, Delete) operations.`,
42+
},
43+
];
44+
}

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,11 @@ const routes: Routes = [
1919
loadChildren: () =>
2020
import('./guide/guide.module').then(m => m.GuideModule),
2121
},
22+
{
23+
path: 'auth-doc',
24+
loadChildren: () =>
25+
import('./auth-doc/auth-doc.module').then(m => m.AuthDocModule),
26+
},
2227
],
2328
},
2429
];

0 commit comments

Comments
 (0)