Simplified code to demonstrate issue with comma

Added akeyless api integration

.dockerignore

@@ -0,0 +1 @@
+node_modules/*

.env.example

@@ -0,0 +1,3 @@
+VITE_AKEYLESS_ACCESS_ID=""
+VITE_AKEYLESS_ACCESS_KEY=""
+VITE_AKEYLESS_KEY_PATH=""

.gitignore

@@ -22,4 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
-tokens.ts
+.env

Dockerfile

@@ -0,0 +1,9 @@
+FROM node:18 AS Build
+WORKDIR /app/node/
+COPY . .
+RUN yarn
+RUN yarn build
+
+FROM nginx AS Production
+WORKDIR /usr/share/nginx/html
+COPY --from=Build /app/node/dist /usr/share/nginx/html/

src/main.ts

@@ -2,7 +2,4 @@ import "./style.css";
 
 import { tokenList } from "./tokenList";
 import rootDiv from "./utils/root";
-
-rootDiv!.innerHTML = `
-  ${tokenList()}
-`;
+rootDiv!.innerHTML = await tokenList();

src/toast.ts

@@ -2,6 +2,11 @@ export function toast(element: HTMLDivElement, message: string) {
     // Target our predefined DIV that will hold toast messages.
     const toastDiv = element.getElementsByClassName('toast')
  
+    const interval = setInterval(() => {
+        toastDiv[0].remove()
+        clearInterval(interval)
+    }, 5000)
+
     // If we currently have a toast displayed, let's remove it from the DOM.
     if (toastDiv && toastDiv.length != 0) {
         for (const el of toastDiv){

src/token.ts

@@ -1,8 +1,7 @@
 import totp from 'totp-generator'
 const period = 30
 const digits = 6
-
-export function displayToken(secret) {
+export function displayToken(secret: string) {
   const token = totp(secret.replace(/ /g, '').trim(), {
     digits,
     period,

src/tokenList.ts

@@ -1,8 +1,9 @@
-import { displayTokenListItem } from "./TokenListItem";
+import { displayTokenListItem } from "./tokenListItem";
 import { tokens } from "./tokens";
-
-export function tokenList() {
-  return `<form id="tokens">${tokens.map((token) =>
+import { Token } from "./utils/types";
+console.log('tokens', tokens)
+export async function tokenList() {
+  return `<form id="tokens">${tokens.map((token: Token) =>
     displayTokenListItem(token.account, token.secret)
   )}</form>`;
 }

src/tokens.example.ts

@@ -1,10 +0,0 @@
-export const tokens = [
-  {
-    account: 'Github',
-    secret: 'AFDAFDAFAFFD',
-  },
-  {
-    account: 'Gmail',
-    secret: 'AFDJKADFJsddfsKLAFSJLK',
-  },
-]

src/tokens.ts

@@ -0,0 +1,10 @@
+export const tokens = [
+    {
+        "account": "Github",
+        "secret": "AFDAFDAFAFFD"
+    },
+    {
+        "account": "Gmail",
+        "secret": "AFDJKADFJsddfsKLAFSJLK"
+    }
+]

src/utils/types.ts

@@ -0,0 +1,15 @@
+import { tokens } from "../tokens";
+
+export interface TokenResponse {
+    token: string;
+    creds: null;
+}
+
+export interface Token {
+    account: string;
+    secret: string;
+  }
+
+export interface GenericAPIResponse {
+    result: string;
+}

tsconfig.json

@@ -0,0 +1,20 @@
+{
+    "compilerOptions": {
+      "target": "ESNext",
+      "lib": ["DOM", "DOM.Iterable", "ESNext"],
+      "types": [],
+      "allowJs": false,
+      "skipLibCheck": false,
+      "esModuleInterop": false,
+      "allowSyntheticDefaultImports": true,
+      "strict": true,
+      "forceConsistentCasingInFileNames": true,
+      "module": "ESNext",
+      "moduleResolution": "Node",
+      "resolveJsonModule": true,
+      "isolatedModules": true,
+      "noEmit": true,
+      "jsx": "react"
+    },
+    "include": ["src"]
+  }