Added Credentials page and backend

src/app/components/pages/tool-list/tool-list.component.html

@@ -1,4 +1,25 @@
 <div class="container">
     <app-title title="Tool List"></app-title>
-    <tool *ngFor="let tool of tools" [name]="tool.name" [url]="tool.url" [userName]="tool.userName" [password]="tool.password"></tool>
+    <div class="table-container">
+        <div class="table">
+            <table>
+                <thead>
+                    <tr>
+                        <th>Service Name</th>
+                        <th>User Name</th>
+                        <th>Password</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr *ngFor="let rowData of credList; let i = index">
+                        <td><a [href]="rowData.url">{{rowData.name}}</a></td>
+                        <td>{{rowData.userName}}</td>
+                        <td>{{rowData.password}}</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+
+    <!-- <tool *ngFor="let cred of credList" [name]="cred.name" [url]="cred.url" [userName]="cred.userName" [password]="cred.password"></tool> -->
 </div>

src/app/components/pages/tool-list/tool-list.component.scss

@@ -1,7 +1,96 @@
-.container {
+@import './../../../shared/scss/colors.scss';
+
+.table-container {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    margin-top: 2rem;
-}
+    
+}
+
+.table{
+    padding: 0rem 2rem;
+}
+
+table {
+    margin-left: 1rem;
+}
+
+table, tr, td {
+    border-collapse: collapse;
+    border: none;
+}
+
+th{
+    color: $txt-heading-color;
+    font-size: 1.5rem;
+    padding-bottom: 3rem;
+    position:sticky;
+}
+
+tbody tr {
+    transition: all 0.3s 
+}
+
+tbody tr:hover {
+    transform: scale(1.01);
+    background-color: rgba($hover-color,0.5);
+    border-collapse: collapse;
+    border: none;
+}
+
+td:first-child{
+    border-radius: 1rem 0rem 0rem 1rem;
+    padding-left: 2rem;
+}
+
+td:nth-child(3){
+    transition: color 0.09s ease-in-out;
+}
+td:last-child{
+    border-radius: 0rem 1rem 1rem 0rem;
+    padding-right: 2rem;
+}
+
+td:nth-child(3):active {
+    color: rgb(168, 168, 168);
+}
+
+tr:nth-child(even) {
+   background-color: rgba(0,0,0,0.03);
+}
+
+td {
+    padding: 0.7rem 1.5rem;
+    -webkit-user-select: none; /* Safari */
+    -ms-user-select: none; /* IE 10 and IE 11 */
+    user-select: none; /* Standard syntax */
+    max-width: 300px;
+}
+
+.actions {
+    display: grid;
+}
+
+.complete{
+    background-color: $txt-heading-color;
+    border: none;
+    height: 2rem;
+    width: 2.5rem;
+    border-radius: 10px;
+    &:hover {
+        background-color: darken($txt-heading-color, 20);
+    }
+}
+
+.delete {
+    background-color: $danger;
+    border: none;
+    height: 2rem;
+    width: 2.5rem;
+    border-radius: 10px;
+    margin-top: 5px;
+    &:hover {
+        background-color: darken($danger, 20);
+    }
+}

src/app/components/pages/tool-list/tool-list.component.ts

@@ -4,6 +4,7 @@ import { ToolListService } from '../../../shared/module/tool-list.module';
 import { Tool } from '../../../shared/model/tool.model';
 import { CommonModule } from '@angular/common';
 import { TitleComponent } from "../../partials/title/title.component";
+import { credService } from './tool-list.service';
 
 @Component({
   selector: 'app-tool-list',
@@ -13,12 +14,15 @@ import { TitleComponent } from "../../partials/title/title.component";
   styleUrl: './tool-list.component.scss'
 })
 export class ToolListComponent implements OnInit {
-  tools!: Tool[];
+  credList!: Tool[];
 
-  constructor(private toolListService: ToolListService) {}
+  constructor(private toolListService: ToolListService, private credService: credService) {}
 
   ngOnInit() {
-    this.tools = this.toolListService.getAllTools()
+    // this.tools = this.toolListService.getAllTools()
+    this.credService.getAllCreds().subscribe((creds)=>{
+      this.credList = creds;
+    })
   }
   
 }

src/app/components/pages/tool-list/tool-list.service.ts

@@ -0,0 +1,18 @@
+import { Injectable } from "@angular/core";
+import { Observable } from "rxjs";
+import { Tool } from "../../../shared/model/tool.model";
+import { HttpClient } from "@angular/common/http";
+import { SECRET_URL } from "../../../shared/constants/backend";
+
+@Injectable({
+    providedIn: 'root'
+})
+
+export class credService {
+
+    constructor(private httpClient: HttpClient){}
+    
+    getAllCreds(): Observable<Tool[]> {
+        return this.httpClient.get<Tool[]>(SECRET_URL)
+    }
+}