docs(arc-docs): backend integration doc

backend integration doc

GH-26

Author: Deepika516

angular.json

@@ -202,6 +202,14 @@
                 "glob": "**/*",
                 "input": "projects/arc-lib/src/lib/assets/",
                 "output": "/assets/"
+
+              },
+              {
+                "glob": "**/*",
+                "input": "projects/arc-docs/src/assets/",
+                "output": "/assets/"
+                
+                
               }
             ],
 

projects/arc-docs/src/app/constants/doc-menu.constant.ts

@@ -0,0 +1,41 @@
+export const DOCUMENTATION_MENU_ITEMS = [
+  {
+    title: 'Getting Started',
+    icon: 'book-outline',
+    children: [
+      {
+        title: 'Introduction',
+        link: '/docs/getting-started',
+      },
+    ],
+  },
+  {
+    title: 'Guide',
+    icon: 'book-outline',
+    children: [
+      {
+        title: 'Cloning Boilerplate',
+        link: '/docs/guide/clone',
+      },
+      {
+        title: 'Backend Integration',
+        link: '/docs/guide/backend-integration',
+      },
+    ],
+  },
+
+  {
+    title: 'Auth',
+    icon: 'book-outline',
+    children: [
+      {
+        title: 'Introduction',
+        link: '/docs/auth-doc/authDocIntro',
+      },
+      {
+        title: 'Installation',
+        link: '/docs/auth-doc/installation',
+      },
+    ],
+  },
+];

projects/arc-docs/src/app/docs/guide/components/backend-integration-doc/backend-integration-doc.component.html

@@ -1 +1,66 @@
-<p>backend-integration-doc works!</p>
+<div class="intro-wrapper">
+  <div class="1st-phase">
+    <nb-card>
+      <nb-card-header fixed>
+        <h2 class="nb-card-header-title">Overview</h2>
+      </nb-card-header>
+      <nb-card-body>
+        <p>
+          This guide provides the necessary steps to integrate a frontend
+          application with a backend authentication service. It includes
+          boilerplate code to ensure a smooth setup and usage of the
+          authentication service without needing a backend developer.
+        </p>
+      </nb-card-body>
+    </nb-card>
+
+    <nb-card>
+      <nb-card-header fixed>
+        <h2 class="nb-card-header-title">Prerequisites</h2>
+      </nb-card-header>
+      <nb-card-body>
+        <ul>
+          <li>Node.js and npm installed</li>
+          <li>Angular CLI installed</li>
+          <li>PostgreSQL installed</li>
+          <li>Redis installed</li>
+          <li>Basic knowledge of Angular and REST APIs</li>
+        </ul>
+      </nb-card-body>
+    </nb-card>
+
+    <nb-card>
+      <nb-card-header fixed>
+        <h2 class="nb-card-header-title">Backend-setup</h2>
+      </nb-card-header>
+      <nb-card-body>
+        <ol>
+          <li>
+            Before proceeding, ensure you have completed the initial backend
+            setup. If you haven't done so, please follow the
+            <a
+              href="https://github.com/sourcefuse/loopback4-microservice-catalog/tree/master/services/authentication-service"
+              >Backend Setup Documentation </a
+            >.
+          </li>
+          <li>Environment Variables</li>
+          <p>
+            Create a .env file in the root of your project to store your
+            environment variables. This file contains configuration settings for
+            your database, Redis, and other necessary environment variables.
+          </p>
+          Example .env File Create a file named .env and add the following
+          content:
+          <div *ngFor="let env of envVariables">
+            <lib-cli-wrapper [command]="env.command"> </lib-cli-wrapper>
+          </div>
+
+          <li>Run the application:</li>
+          <div *ngFor="let server of runServer">
+            <lib-cli-wrapper [command]="server.command"> </lib-cli-wrapper>
+          </div>
+        </ol>
+      </nb-card-body>
+    </nb-card>
+  </div>
+</div>

projects/arc-docs/src/app/docs/guide/components/backend-integration-doc/backend-integration-doc.component.ts

@@ -5,4 +5,37 @@ import {Component} from '@angular/core';
   templateUrl: './backend-integration-doc.component.html',
   styleUrls: ['./backend-integration-doc.component.scss'],
 })
-export class BackendIntegrationDocComponent {}
+export class BackendIntegrationDocComponent {
+  DataList: object[] = [
+    {
+      lable: 'Install LoopBack CLI if you haven’t already:',
+      listData: 'npm install -g @loopback/cli',
+    },
+    {
+      lable: 'Create a new LoopBack application:',
+      listData: 'lb4 app testapp',
+    },
+  ];
+
+  runServer: object[] = [
+    {
+      command: 'ng serve',
+    },
+  ];
+
+  envVariables: object[] = [
+    {
+      command: `export const environment = {
+        production: false,
+        clientId: '',
+        publicKey: '',
+        homePath: '/main/home',
+        baseApiUrl: '',
+        authServiceUrl: '',
+        userServiceUrl: '',
+        logLevel: 5,
+      };
+      `,
+    },
+  ];
+}

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

@@ -13,6 +13,10 @@ const routes: Routes = [
     path: 'clone',
     component: CloneBoilerplateDocComponent,
   },
+  {
+    path: 'backend-integration',
+    component: BackendIntegrationDocComponent,
+  },
 ];
 
 @NgModule({

projects/arc-lib/src/lib/components/cli-wrapper/cli-wrapper.component.html

@@ -1,4 +1,3 @@
-
 <div class="cli-wrapper">
   <div class="cli">
     <div class="cli-header">

projects/arc-lib/src/lib/components/selector/select/select.component.html

@@ -38,7 +38,7 @@
       *ngFor="let item of visibleTags"
       [text]="asString(item && item[nameField])"
       [ngStyle]="{
-        maxWidth: 'calc(100% - ' + suffixCount * suffixWidth + 'px)'
+        maxWidth: 'calc(100% - ' + suffixCount * suffixWidth + 'px)',
       }"
       [removable]="!disabled"
       (remove)="toggle(item); toggleDropdown()"
@@ -61,7 +61,7 @@
       (click)="$event.stopPropagation(); !allowInput && toggleDropdown()"
       [ngStyle]="{
         minWidth: inputMinWidth + 'px',
-        marginRight: suffixCount * suffixWidth + 'px'
+        marginRight: suffixCount * suffixWidth + 'px',
       }"
     />
   </nb-tag-list>