Added docker config

Added toast and copy to clipboard functionality

.dockerignore

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

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

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

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 {
@@ -111,4 +117,15 @@ label {
   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,14 @@
+export function toast(element: HTMLDivElement, message: string) {
+    // Target our predefined DIV that will hold toast messages.
+    const toastDiv = element.getElementsByClassName('toast')
+ 
+    // 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

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

src/tokenTimer.ts

@@ -1,28 +0,0 @@
-import { displayToken } from "./token";
-
-class Timer {
-  constructor(public counter = 30, public element: HTMLDivElement, public account: string, public secret: string) {
-  
-      let intervalId = setInterval(() => {
-          this.counter = this.counter - 1;
-          console.log(this.counter)
-          if(this.counter === 0) clearInterval(intervalId)
-          element.innerHTML = `<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>
-    </fieldset>
-    <fieldset>
-    <label></label>
-    <p>${this.counter}</p>
-    </div>`
-          return this.element
-
-      }, 1000)
-  }
-}
-export default Timer

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