Added toast and copy to clipboard functionality

Features/timer

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 {
@@ -101,4 +107,25 @@ 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,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/tokenList.ts

@@ -2,9 +2,7 @@ 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,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/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