Updated timer logic

This reverts commit 21b6f0609e.

src/style.css

@@ -102,3 +102,13 @@ fieldset {
 label {
   font-weight: 300;
 }
+
+.timer {
+  width: 24px;
+  height: 24px;
+  border-radius: 24px;
+  padding: 8px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

src/tokenListItem.ts

@@ -1,14 +1,48 @@
-import {displayToken} from './token'
+import { displayToken } from "./token";
-export function displayTokenListItem(account: string, secret: string, element: HTMLDivElement){
+var secondsSinceEpoch: number;
+var secondsSinceStart: number;
+var secondsRemaining: number;
+secondsSinceStart = 0;
+secondsRemaining = 30;
+const period = 30;
+var token;
 
-    return element.innerHTML = `<div class="fieldset-wrapper">
+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}`)
+    if (timerDiv && tokenDiv) {
+      timerDiv.innerHTML = secondsRemaining.toString();
+      timerDiv.style.background = `conic-gradient(transparent ${
+        (100 / 30) * secondsSinceStart
+      }%, ${secondsRemaining < 10 ? "salmon" : "gainsboro"} 0)`;
+      token = displayToken(secret)
+      tokenDiv.innerHTML = token;
+    }
+
+  }
+  setInterval(() => {
+    countdown();
+  }, 1000);
+  return (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>
+      <p id="secret-${account}"></p>
     </fieldset>
-    </div>`;
+    <fieldset>
+    <label></label>
+    <p><div class="timer" id="timer-${account}">
+    </div></p>
+    </div>`);
 }

src/tokenTimer.ts

@@ -0,0 +1,28 @@
+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