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

This reverts commit 21b6f0609e.

src/style.css

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

src/tokenListItem.ts

@@ -1,28 +1,6 @@
 import {displayToken} from './token'
-import Timer from './tokenTimer';
+export function displayTokenListItem(account: string, secret: string, element: HTMLDivElement){
-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>
@@ -30,10 +8,7 @@ export async function displayTokenListItem(account: string, secret: string, elem
     </fieldset>
     <fieldset>
       <label>Code</label>
-      <p data-test-id="secret">${await displayToken(secret)}</p>
+      <p data-test-id="secret">${displayToken(secret)}</p>
     </fieldset>
-    <fieldset>
-    <label></label>
-    <p>${await Timer(secondsSinceStart, secondsRemaining)}</p>
     </div>`;
 }

src/tokenTimer.ts

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