Merge pull request #56 from sourcefuse/GH-20-E

feat(arc-docs)-documentation of installation

Author: yeshamavani

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

@@ -6,11 +6,13 @@ import {AppComponent} from './app.component';
 import {ThemeModule} from '@project-lib/theme/theme.module';
 import {HeaderComponent} from '@project-lib/components/header/header.component';
 import {SidebarComponent} from '@project-lib/components/sidebar/sidebar.component';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 
 @NgModule({
   declarations: [AppComponent],
   imports: [
     BrowserModule,
+    BrowserAnimationsModule,
     AppRoutingModule,
     ThemeModule.forRoot('default'),
     HeaderComponent,

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

@@ -1,6 +1,7 @@
 import {NgModule} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
 import {DocIntrodutionComponent} from './components/doc-introdution/doc-introdution.component';
+import {InstallationDocComponent} from './components/installation-doc/installation-doc.component';
 
 const routes: Routes = [
   {
@@ -12,6 +13,10 @@ const routes: Routes = [
     path: 'authDocIntro',
     component: DocIntrodutionComponent,
   },
+  {
+    path: 'installation',
+    component: InstallationDocComponent,
+  },
 ];
 
 @NgModule({

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

@@ -5,9 +5,10 @@ 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';
+import {InstallationDocComponent} from './components/installation-doc/installation-doc.component';
 
 @NgModule({
-  declarations: [DocIntrodutionComponent],
+  declarations: [DocIntrodutionComponent, InstallationDocComponent],
 
   imports: [
     CommonModule,

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

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

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

@@ -0,0 +1,69 @@
+<div class="intro-wrapper">
+  <div class="1st-phase">
+    <nb-card>
+      <nb-card-header fixed>
+        <h2 class="nb-card-header-title">Install the module</h2>
+      </nb-card-header>
+      <nb-card-body>
+        <p>
+          First, Install the module as it's distributed as npm package. Make
+          sure you have the Nebular Theme module up and running. Nebular Theme
+          is required to use built-in Auth Components.
+        </p>
+      </nb-card-body>
+    </nb-card>
+
+    <nb-card>
+      <nb-card-header fixed>
+        <h2 class="nb-card-header-title">HttpClientModule</h2>
+      </nb-card-header>
+      <nb-card-body>
+        <p>
+          Auth module utilizes features of HttpClientModule and since it should
+          only be imported in the root module, please make sure you've done
+          this:
+        </p>
+        <div class="wrapper" *ngFor="let data of dataWrapper">
+          {{ data.code }}
+        </div>
+      </nb-card-body>
+    </nb-card>
+
+    <nb-card>
+      <nb-card-header fixed>
+        <h2 class="nb-card-header-title">Configure a strategy</h2>
+      </nb-card-header>
+      <nb-card-body>
+        <p>
+          Now, let's configure the module by specifying available strategies, in
+          our case, we add NbPasswordAuthStrategy. To add a strategy we need to
+          call static setup method to pass a list of options:
+        </p>
+        <img
+          height="300px"
+          width="500px"
+          src="../../.././../../assets/env img/authmodule.png"
+          alt="moduleImg"
+        />
+      </nb-card-body>
+    </nb-card>
+
+    <nb-card>
+      <nb-card-header fixed>
+        <h2 class="nb-card-header-title">Enable Auth Components</h2>
+      </nb-card-header>
+      <nb-card-body>
+        <p>
+          we need to configure Auth Components routes, and add those into your
+          app-routing.module.ts
+        </p>
+        <img
+          height="600px"
+          width="500px"
+          src="../../.././../../assets/env img/route.png"
+          alt="routeImg"
+        />
+      </nb-card-body>
+    </nb-card>
+  </div>
+</div>

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

@@ -0,0 +1,7 @@
+.wrapper {
+    background-color:  #0a0b0c ;
+    border-left: 4px solid  #e0f7fa;
+    padding: 16px;
+    margin: 16px 0;
+    color: #e0f7fa;
+  }

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

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

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

@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'app-installation-doc',
+  templateUrl: './installation-doc.component.html',
+  styleUrls: ['./installation-doc.component.scss'],
+})
+export class InstallationDocComponent {
+  dataWrapper: object[] = [
+    {
+      code: `import { HttpClientModule } from '@angular/common/http';`,
+    },
+  ];
+}