Added akeyless api integration

Added toast and copy to clipboard functionality

.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/env.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+    readonly VITE_AKEYLESS_KEY_PATH: string
+    readonly VITE_AKEYLESS_ACCESS_ID: string
+    readonly VITE_AKEYLESS_ACCESS_KEY: string
+    // more env variables...
+  }
+  
+  interface ImportMeta {
+    readonly env: ImportMetaEnv
+  }

src/main.ts

@@ -1,8 +1,5 @@
 import "./style.css";
 
 import { tokenList } from "./tokenList";
-document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
-  ${tokenList()}
-`;
-
-// setupTokenList(document.querySelector<HTMLDivElement>("#tokens")!);
+import rootDiv from "./utils/root";
+rootDiv!.innerHTML = await tokenList();

src/style.css

@@ -41,6 +41,10 @@ h1 {
   margin: 0 auto;
   padding: 2rem;
   text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column-reverse;
 }
 
 .card {
@@ -81,14 +85,16 @@ button:focus-visible {
 .fieldset-wrapper, form {
   display: flex;
   flex: 1;
+
 }
 form {
   flex-direction: column;
 }
 .fieldset-wrapper {
-  border: 1px solid;
+  border: 1px solid gainsboro;
   padding: 5px;
-  border-bottom: 1px solid;
+  border-radius: 4px;
+  box-shadow: 1px 0px 6px 2px gainsboro;
 }
 
 fieldset {
@@ -102,3 +108,24 @@ fieldset {
 label {
   font-weight: 300;
 }
+
+.timer {
+  width: 24px;
+  height: 24px;
+  border-radius: 24px;
+  padding: 8px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid;
+}
+
+.toast {
+  background-color: lightseagreen;
+  padding: 10px;
+  position: relative;
+  top: 10px;
+  right: 10px;
+  color: white;
+  font-weight: bold;
+}

src/toast.ts

@@ -0,0 +1,19 @@
+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){
+            el.remove()
+        }
+    }
+    
+    // Finally add our toast message.
+    element.innerHTML += `<div class='toast'>${message}</div>`
+}

src/token.test.ts

@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 
-import { assert, expect, test } from 'vitest'
+import { expect, test } from 'vitest'
 import {displayToken} from './token'
 
 test('a 6 digit token is displayed', () => {

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,10 +1,9 @@
-import { displayTokenListItem } from "./TokenListItem";
-import { tokens } from "./tokens";
+import { displayTokenListItem } from "./tokenListItem";
+import { Token, decryptTokensWithAkeyless } from "./utils/api";
 
-export function tokenList() {
-  const element = document.createElement("div");
-  element.classList.add("test");
-  return `<form id="tokens">${tokens.map((token) =>
-    displayTokenListItem(token.account, token.secret, element)
+export async function tokenList() {
+  const decryptedTokens = (await decryptTokensWithAkeyless(import.meta.env.VITE_AKEYLESS_KEY_PATH))
+  return `<form id="tokens">${decryptedTokens.map((token: Token) =>
+    displayTokenListItem(token.account, token.secret)
   )}</form>`;
 }

src/tokenListItem.test.ts

@@ -5,20 +5,7 @@ import { displayTokenListItem } from "./tokenListItem";
 
 test("displays correct account name", () => {
   const div: HTMLDivElement = document.createElement("div");
-  displayTokenListItem("Github", "ABCDEFGHIJKLMNOP", div);
+  displayTokenListItem("Github", "ABCDEFGHIJKLMNOP");
   expect(div.innerHTML).toContain("Github");
 });
 
-test("displays multiple list items", () => {
-  const div: HTMLDivElement = document.createElement("div");
-  displayTokenListItem("Github", "ABCDEFGHIJKLMNOP", div);
-  displayTokenListItem("Gmail", "ABCDEFGHIJKLMNOP", div);
-  const tokens = [
-    { account: "Github", secret: "blahblahblah" },
-    { account: "Gmail", secret: "blahblahblah" },
-  ];
-  tokens.map((token) => displayTokenListItem(token.account, token.secret, div));
-  console.log("dv", div.innerHTML);
-  expect(div.innerHTML).toContain("Github");
-  expect(div.innerHTML).toContain("Gmail");
-});

src/tokenListItem.ts

@@ -1,14 +1,51 @@
-import {displayToken} from './token'
-export function displayTokenListItem(account: string, secret: string, element: HTMLDivElement){
+import { toast } from "./toast";
+import { displayToken } from "./token";
+import rootDiv from "./utils/root"
+let secondsSinceEpoch: number;
+let secondsSinceStart: number = 0;
+let secondsRemaining: number = 30;
+const period: 30 | 60 = 30;
+let token: string;
 
-    return element.innerHTML = `<div class="fieldset-wrapper">
+export function displayTokenListItem(
+  account: string,
+  secret: string,
+) {
+  function countdown() {
+    secondsSinceEpoch = Math.ceil(Date.now() / 1000) - 1;
+    secondsSinceStart = 0 + (secondsSinceEpoch % period);
+    secondsRemaining = period - (secondsSinceEpoch % period);
+    const timerDiv = document.getElementById(`timer-${account}`);
+    const tokenDiv = document.getElementById(`secret-${account}`);
+
+    if (timerDiv && tokenDiv && rootDiv) {
+      timerDiv.innerHTML = secondsRemaining.toString();
+      timerDiv.style.background = `conic-gradient(transparent ${
+        (100 / 30) * secondsSinceStart
+      }%, ${secondsRemaining < 10 ? "salmon" : "lightgreen"} 0)`;
+      token = displayToken(secret);
+      tokenDiv.innerHTML = token;
+      tokenDiv.addEventListener("click", () => {
+        navigator.clipboard.writeText(tokenDiv.innerHTML);
+        toast(rootDiv!, `${tokenDiv.innerHTML} Copied successfully`)
+      });
+    }
+  }
+  setInterval(() => {
+    countdown();
+  }, 1000);
+  return (`<div class="fieldset-wrapper">
     <fieldset>
       <label>Account</label>
         <p data-test-id="account">${account}</p>
     </fieldset>
     <fieldset>
       <label>Code</label>
-      <p data-test-id="secret">${displayToken(secret)}</p>
+      <p id="secret-${account}"></p>
     </fieldset>
-    </div>`;
+    <fieldset>
+    <label></label>
+    <p><div class="timer" id="timer-${account}">
+    </div></p>
+    </div>`);
 }

src/tokens.ts

@@ -0,0 +1 @@
+export const tokens = "AQAAAAEIAd3tVg6Vbzp/2fXBP6JdFoK7A5fu5n8daqwUzGKK3CgAYW+SujAoXcK5R3QgGkUp34Vi/DEtjOU9WNd3vGIMZAUQhngRqDS0rfK3i8kN4/C5oBjhkYhWKY6ABbJtmnI9p4EzfnC5RkZlSpHFNK6yAxk2jJVAFU6ynXkqVZKLamtf+aViyYyX8wI="

src/utils/api.ts

@@ -0,0 +1,68 @@
+import { tokens } from "../tokens";
+
+export interface TokenResponse {
+    token: string;
+    creds: null;
+}
+
+export interface Token {
+    account: string;
+    secret: string;
+  }
+
+export interface GenericAPIResponse {
+    result: string;
+}
+
+const baseUrl = 'https://api.akeyless.io'
+async function fetchAkeylessAuthToken(): Promise<TokenResponse> {
+
+    const options = {
+        method: 'POST',
+        headers: {accept: 'application/json', 'content-type': 'application/json'},
+        body: JSON.stringify({
+          'access-type': 'access_key',
+          'gcp-audience': 'akeyless.io',
+          json: false,
+          'access-id': import.meta.env.VITE_AKEYLESS_ACCESS_ID,
+          'access-key': import.meta.env.VITE_AKEYLESS_ACCESS_KEY
+        })
+      };
+      const token = await fetch(`${baseUrl}/auth`, options)
+      return await token.json()
+
+}
+
+async function encryptTokensWithAkeyless(encryptionKeyName: string): Promise<GenericAPIResponse>{
+    const options = {
+        method: 'POST',
+        headers: {accept: 'application/json', 'content-type': 'application/json'},
+        body: JSON.stringify({
+          json: false,
+          'key-name': encryptionKeyName,
+          plaintext: JSON.stringify(tokens),
+          token: (await fetchAkeylessAuthToken()).token
+        })
+      };
+      
+      const response = await fetch(`${baseUrl}/encrypt`, options)
+      return await response.json()
+}
+
+async function decryptTokensWithAkeyless(encryptionKeyName: string): Promise<Token[]>{
+    const options = {
+        method: 'POST',
+        headers: {accept: 'application/json', 'content-type': 'application/json'},
+        body: JSON.stringify({
+          json: false,
+          'key-name': encryptionKeyName,
+          ciphertext: tokens,
+          token: (await fetchAkeylessAuthToken()).token
+        })
+      };
+      
+      const response = await fetch(`${baseUrl}/decrypt`, options)
+      const decodedTokens = await response.json()
+      return JSON.parse(decodedTokens.result)
+}
+export {fetchAkeylessAuthToken, encryptTokensWithAkeyless, decryptTokensWithAkeyless}

src/utils/root.ts

@@ -0,0 +1,6 @@
+const rootDiv = document.querySelector<HTMLDivElement>("#app")
+if (!rootDiv) {
+    const rootDiv = document.createElement('div')
+    rootDiv.id = 'app'
+}
+export default rootDiv

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"]
+  }