From 21b6f0609eb9d27f4ed62b082b647671bc56c020 Mon Sep 17 00:00:00 2001
From: Mike Conrad <mike@enxo.co>
Date: Sun, 27 Aug 2023 10:51:06 -0400
Subject: [PATCH 1/3] Refactored to show correct time.  Still needs to be made
 dynamic

---
 src/style.css        | 13 ++++++++++++-
 src/token.ts         | 16 +++++++++++++++-
 src/tokenList.ts     | 11 ++++++++---
 src/tokenListItem.ts | 29 +++++++++++++++++++++++++++--
 src/tokenTimer.ts    | 12 ++++++++++++
 5 files changed, 74 insertions(+), 7 deletions(-)
 create mode 100644 src/tokenTimer.ts

diff --git a/src/style.css b/src/style.css
index edb7663..039a379 100644
--- a/src/style.css
+++ b/src/style.css
@@ -101,4 +101,15 @@ fieldset {
 
 label {
   font-weight: 300;
-}
\ No newline at end of file
+}
+.timer {
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  border-radius: 24px;
+  padding: 8px 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  
+}
diff --git a/src/token.ts b/src/token.ts
index a2ad1eb..e364ba6 100644
--- a/src/token.ts
+++ b/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,
diff --git a/src/tokenList.ts b/src/tokenList.ts
index 9136b65..98e949f 100644
--- a/src/tokenList.ts
+++ b/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) =>
-    displayTokenListItem(token.account, token.secret, element)
-  )}</form>`;
+  const div = document.createElement('div')
+  div.append('<form id="tokens">')
+  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
+  })
+
 }
diff --git a/src/tokenListItem.ts b/src/tokenListItem.ts
index 1526524..f9dd4b1 100644
--- a/src/tokenListItem.ts
+++ b/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>`;
 }
\ No newline at end of file
diff --git a/src/tokenTimer.ts b/src/tokenTimer.ts
new file mode 100644
index 0000000..1513128
--- /dev/null
+++ b/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

From 9a89dc5365fda8792e9182b510fbe20cb3511055 Mon Sep 17 00:00:00 2001
From: Mike Conrad <mike@enxo.co>
Date: Sun, 27 Aug 2023 11:16:13 -0400
Subject: [PATCH 2/3] Revert "Refactored to show correct time.  Still needs to
 be made dynamic"

This reverts commit 21b6f0609eb9d27f4ed62b082b647671bc56c020.
---
 src/style.css        | 13 +------------
 src/token.ts         | 16 +---------------
 src/tokenList.ts     | 11 +++--------
 src/tokenListItem.ts | 29 ++---------------------------
 src/tokenTimer.ts    | 12 ------------
 5 files changed, 7 insertions(+), 74 deletions(-)
 delete mode 100644 src/tokenTimer.ts

diff --git a/src/style.css b/src/style.css
index 039a379..edb7663 100644
--- a/src/style.css
+++ b/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;
-  
-}
+}
\ No newline at end of file
diff --git a/src/token.ts b/src/token.ts
index e364ba6..a2ad1eb 100644
--- a/src/token.ts
+++ b/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
-    const secondsSinceStart = 0 + (secondsSinceEpoch % period)
-    const secondsRemaining = period - (secondsSinceEpoch % period)
-    console.log('this is broken')
-    setResult(token)
-    setRunningTime(secondsSinceStart)
-    setSecondsTillExpiration(secondsRemaining)
-  }
+export function displayToken(secret) {
   const token = totp(secret.replace(/ /g, '').trim(), {
     digits,
     period,
diff --git a/src/tokenList.ts b/src/tokenList.ts
index 98e949f..9136b65 100644
--- a/src/tokenList.ts
+++ b/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')
-  div.append('<form id="tokens">')
-  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
-  })
-
+  return `<form id="tokens">${tokens.map((token) =>
+    displayTokenListItem(token.account, token.secret, element)
+  )}</form>`;
 }
diff --git a/src/tokenListItem.ts b/src/tokenListItem.ts
index f9dd4b1..1526524 100644
--- a/src/tokenListItem.ts
+++ b/src/tokenListItem.ts
@@ -1,28 +1,6 @@
 import {displayToken} from './token'
-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,
-  })
+export function displayTokenListItem(account: string, secret: string, element: HTMLDivElement){
 
-  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>`;
 }
\ No newline at end of file
diff --git a/src/tokenTimer.ts b/src/tokenTimer.ts
deleted file mode 100644
index 1513128..0000000
--- a/src/tokenTimer.ts
+++ /dev/null
@@ -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

From 147717f130b82056ecedaf6299171eb0a8c423f4 Mon Sep 17 00:00:00 2001
From: Mike Conrad <mike@enxo.co>
Date: Sun, 27 Aug 2023 12:03:44 -0400
Subject: [PATCH 3/3] Updated timer logic

---
 src/style.css        | 10 ++++++++++
 src/tokenListItem.ts | 46 ++++++++++++++++++++++++++++++++++++++------
 src/tokenTimer.ts    | 28 +++++++++++++++++++++++++++
 3 files changed, 78 insertions(+), 6 deletions(-)
 create mode 100644 src/tokenTimer.ts

diff --git a/src/style.css b/src/style.css
index edb7663..1970da4 100644
--- a/src/style.css
+++ b/src/style.css
@@ -101,4 +101,14 @@ fieldset {
 
 label {
   font-weight: 300;
+}
+
+.timer {
+  width: 24px;
+  height: 24px;
+  border-radius: 24px;
+  padding: 8px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
\ No newline at end of file
diff --git a/src/tokenListItem.ts b/src/tokenListItem.ts
index 1526524..c16ce3c 100644
--- a/src/tokenListItem.ts
+++ b/src/tokenListItem.ts
@@ -1,14 +1,48 @@
-import {displayToken} from './token'
-export function displayTokenListItem(account: string, secret: string, element: HTMLDivElement){
+import { displayToken } from "./token";
+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>`;
-}
\ No newline at end of file
+    <fieldset>
+    <label></label>
+    <p><div class="timer" id="timer-${account}">
+    </div></p>
+    </div>`);
+}
diff --git a/src/tokenTimer.ts b/src/tokenTimer.ts
new file mode 100644
index 0000000..a352253
--- /dev/null
+++ b/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
\ No newline at end of file