Refactored to show correct time. Still needs to be made dynamic

src/style.css

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

src/token.ts

@@ -1,8 +1,22 @@
 import totp from 'totp-generator'
 const period = 30
 const digits = 6
-
+let token = ''
 export function displayToken(secret) {
+  async function generateTOTP() {
+    const token = totp(secret.replaceAll(' ', '').trim(), {
+      digits,
+      period,
+    })
+
+    const secondsSinceEpoch = Math.ceil(Date.now() / 1000) - 1
+    const secondsSinceStart = 0 + (secondsSinceEpoch % period)
+    const secondsRemaining = period - (secondsSinceEpoch % period)
+    console.log('this is broken')
+    setResult(token)
+    setRunningTime(secondsSinceStart)
+    setSecondsTillExpiration(secondsRemaining)
+  }
   const token = totp(secret.replace(/ /g, '').trim(), {
     digits,
     period,

src/tokenList.ts

@@ -4,7 +4,12 @@ import { tokens } from "./tokens";
 export function tokenList() {
   const element = document.createElement("div");
   element.classList.add("test");
-  return `<form id="tokens">${tokens.map((token) =>
+  const div = document.createElement('div')
-    displayTokenListItem(token.account, token.secret, element)
+  div.append('<form id="tokens">')
-  )}</form>`;
+  document.querySelector<HTMLDivElement>("#app")!.innerHTML += '<form id="tokens">'
+  tokens.map(async (token) => {
+    const el = await displayTokenListItem(token.account, token.secret, element)
+    document.querySelector<HTMLDivElement>("#app")!.innerHTML += el
+  })
+
 }

src/tokenListItem.ts

@@ -1,6 +1,28 @@
 import {displayToken} from './token'
-export function displayTokenListItem(account: string, secret: string, element: HTMLDivElement){
+import Timer from './tokenTimer';
+import totp from 'totp-generator'
+const period = 30
+const digits = 6
+let token = ''
+async function generateTOTP(secret: string): Promise<{secondsSinceStart: number, secondsRemaining: number}>{
+  const token = totp(secret.replace(/ /, '').trim(), {
+    digits,
+    period,
+  })
 
+  const secondsSinceEpoch = Math.ceil(Date.now() / 1000) - 1
+  const secondsSinceStart = 0 + (secondsSinceEpoch % period)
+  const secondsRemaining = period - (secondsSinceEpoch % period)
+  return {
+    secondsSinceStart,
+    secondsRemaining
+  }
+}
+export async function displayTokenListItem(account: string, secret: string, element: HTMLDivElement){
+  const period = 30
+  const digits = 6
+  const {secondsRemaining, secondsSinceStart} = await generateTOTP(secret)
+  const token = await displayToken(secret)
     return element.innerHTML = `<div class="fieldset-wrapper">
     <fieldset>
       <label>Account</label>
@@ -8,7 +30,10 @@ export function displayTokenListItem(account: string, secret: string, element: H
     </fieldset>
     <fieldset>
       <label>Code</label>
-      <p data-test-id="secret">${displayToken(secret)}</p>
+      <p data-test-id="secret">${await displayToken(secret)}</p>
     </fieldset>
+    <fieldset>
+    <label></label>
+    <p>${await Timer(secondsSinceStart, secondsRemaining)}</p>
     </div>`;
 }

src/tokenTimer.ts

@@ -0,0 +1,12 @@
+
+function Timer(runningTime: number, secondsTillExpiration: number) {
+
+const color = 'cream'
+  return (
+    `<div class="timer" style="background: conic-gradient(transparent ${(100 / 30) * runningTime}%, gainsboro 0)">
+      ${secondsTillExpiration}
+    </div>`
+  )
+}
+
+export default Timer