feat: added support for time indicator

app.js

@@ -1,8 +1,22 @@
+import { TOTP } from "./lib/totp-quickjs"
+import { LocalStorage } from "@zos/storage"
+
+const localStorage = new LocalStorage()
 App({
-  globalData: {},
+  globalData: {
-  onCreate(options) {
+    TOTPS: localStorage.getItem('TOTPs') || []
-    console.log('app on create invoke')
   },
+  onCreate(options) {
+     localStorage.setItem('TOTPs', [
+       new TOTP('JBSWY3DPEHPK3PXP', 'GitHub', 'Lisoveliy'),
+       new TOTP('JBSWY3DPEHPK3PXP', 'GitHub', 'Lisoveliy'),
+       new TOTP('JBSWY3DPEHPK3PXP', 'GitHub', 'Lisoveliy'),
+       new TOTP('JBSWY3DPEHPK3PXP', 'GitHub', 'Lisoveliy'),
+       new TOTP('JBSWY3DPEHPK3PXP', 'GitHub', 'Lisoveliy'),
+       new TOTP('JBSWY3DPEHPK3PXPAF', 'my.contabo.com', 'Contabo-Customer-Control-Panel-11755808'),
+       new TOTP('JBSWY3DPEHPK3PXP', 'GitHub', 'Lisoveliy'),
+       new TOTP('JBSWY3DPEHPK3PXPAF', 'my.contabo.com', 'Contabo-Customer-Control-Panel-11755808')])
+   },
 
   onDestroy(options) {
     console.log('app on destroy invoke')

app.json

@@ -13,7 +13,8 @@
     "description": "TOTP Authenticator for Amazfit devices"
   },
   "permissions": [
-    "data:os.device.info"
+    "data:os.device.info",
+    "device:os.local_storage"
   ],
   "runtime": {
     "apiVersion": {

lib/totp-quickjs/OTPGenerator.js

@@ -13,10 +13,10 @@ export function getHOTP(counter, secret, digits = 6, hashType = 'SHA-1'){
 
     //Stage 1: Prepare data
     const rawDataCounter = new DataView(new ArrayBuffer(8))
-    rawDataCounter.setUint32(0, counter >> 32)
     rawDataCounter.setUint32(4, counter)
+    
     const bCounter = new Uint8Array(rawDataCounter.buffer)
-
+    console.log(bCounter)
     const bSecret = new Uint8Array(decode(secret).match(/.{1,2}/g).map(chunk => parseInt(chunk, 16))); //confirmed
     
     //Stage 2: Hash data

lib/totp-quickjs/index.js

@@ -1,61 +1,77 @@
 import { getHOTP } from "./OTPGenerator.js"
-"use bigint"
 /**
  * TOTP instance
  */
-export class TOTP{
+export class TOTP {
     /**
      * 
      * @param {string} secret base32 encoded string 
      * @param {string} issuer issuer of TOTP
+     * @param {string} client client of TOTP
      * @param {number} [digits=6] number of digits in OTP token
      * @param {number} [fetchTime=30] period of token in seconds
      * @param {number} [timeOffset=0] time offset for token in seconds 
      * @param {string} [hashType='SHA-1'] type of hash (more in jsSHA documentation)
      */
-    constructor(secret, 
+    constructor(secret,
-                issuer,
+        issuer,
-                digits = 6,
+        client,
-                fetchTime = 30, 
+        digits = 6,
-                timeOffset = 0, 
+        fetchTime = 30,
-                hashType = 'SHA-1')
+        timeOffset = 0,
-        {
+        hashType = 'SHA-1') {
-            this.secret = secret
+        this.secret = secret
-            this.issuer = issuer
+        this.issuer = issuer
-            this.digits = digits
+        this.client = client
-            this.fetchTime = fetchTime
+        this.digits = digits
-            this.timeOffset = timeOffset
+        this.fetchTime = fetchTime
-            this.hashType = hashType
+        this.timeOffset = timeOffset
-        }
+        this.hashType = hashType
+    }
+    static copy(totp){
+        return new TOTP(
+        secret = totp.secret,
+        issuer = totp.TOTPissuer,
+        client = totp.client,
+        digits = totp.digits,
+        fetchTime = totp.fetchTime,
+        timeOffset = totp.timeOffset,
+        hashType = totp.hashType
+        )
+    }
     /**
      * 
      * @param {number} time time for counter (default unix time epoch)
      * @returns OTP instance
      */
-    getOTP(time = Date.now()){
+    getOTP(time = Date.now()) {
         const unixTime = (time / 1000 + this.timeOffset) / this.fetchTime
         const otp = getHOTP(Math.floor(unixTime), this.secret, this.digits)
-        const expireTime = time + 
+        const expireTime = time +
-                                (this.fetchTime - 
+            (this.fetchTime -
-                                (time / 1000 + this.timeOffset) % 
+                (time / 1000 + this.timeOffset) %
-                                this.fetchTime) * 1000
+                this.fetchTime) * 1000
-
+        const createdTime = time - (((time / 1000 + this.timeOffset) % 
-        return new OTP(otp, expireTime)
+        this.fetchTime) * 1000)
+        
+        
+        return new OTP(otp, createdTime, expireTime)
     }
 }
 
 /**
  * Class for TOTP.getOTP result
  */
-export class OTP{
+export class OTP {
     /**
      * 
      * @param {string} otp OTP string
-     * @param {number} expireTime time in seconds to reset OTP 
+     * @param {number} createdTime time in unix epoch created OTP 
+     * @param {number} expireTime time in unix epoch to expire OTP 
      */
-    constructor(otp, expireTime)
+    constructor(otp, createdTime, expireTime) {
-    {
         this.otp = otp
+        this.createdTime = createdTime
         this.expireTime = expireTime
     }
 }

page/index.js

@@ -1,76 +1,148 @@
 import { getDeviceInfo } from '@zos/device'
+import { TOTP } from '../lib/totp-quickjs'
 import { push } from '@zos/router'
-import { setStatusBarVisible, createWidget, widget, align, prop, text_style, event } from '@zos/ui'
+import { setStatusBarVisible, createWidget, widget, align, prop, text_style, event, deleteWidget } from '@zos/ui'
 
-import { TOTPBuffer } from './totplogic/totps.js'
+const app = getApp()
+const renderWidgets = []
 
 Page({
-  build() {
+	onInit() {
-    setStatusBarVisible(false);
+		const buffer = app._options.globalData.TOTPS
-    buf = new TOTPBuffer();
+		console.log(buffer.length)
+		if (buffer.length < 1)
+			setStatusBarVisible(true)
+		else
+			setStatusBarVisible(false)
+	},
+	build() {
+		const buffer = app._options.globalData.TOTPS
+		if (buffer.length < 1) {
 
-    const { width, height } = getDeviceInfo()
+			createWidget(widget.BUTTON, {
-    buffer = buf.getTOTPs();
+				x: width / 2 - 40,
-    if(buffer.length < 1){
+				y: height / 2 - 20,
-      createWidget(widget.BUTTON, {
+				w: 80,
-        x: width / 2 - 40,
+				h: 80,
-        y: height / 2 - 20,
+				text: '+',
-        w: 80,
+				radius: 50,
-        h: 80,
+				text_size: 40,
-        text: '+',
+				normal_color: 0x303030,
-        radius: 50,
+				press_color: 0x181c18,
-        text_size: 40,
+				click_func: () => {
-        normal_color: 0x303030,
+					push({
-        press_color: 0x181c18,
+						url: 'page/tip'
-        click_func: () => {
+					})
-          push({
+				}
-            url: 'page/tip'
+			})
-          })
-        }
-      })
-    }else{
-      const buttonWidth = width - width / 20;
-      const buttonHeight = height / 4;
-      const margin = 10;
-      let totpHeight = margin;
-    
-      for(let i = 0; i < buffer.length; i++){
-        console.log(buffer[i])
-        createWidget(widget.FILL_RECT, {
-          x: width / 2 - buttonWidth / 2,
-          y: totpHeight,
-          w: buttonWidth,
-          h: buttonHeight,
-          color: 0x303030,
-          radius: 20
-        })
-        createWidget(widget.TEXT, {
-          x: 0,
-          y: totpHeight + 10,
-          w: width,
-          h: 26,
-          color: 0xa0a0a0,
-          text_size: 24,
-          align_h: align.CENTER_H,
-          align_v: align.CENTER_V,
-          text_style: text_style.NONE,
-          text: (buffer[i].expireTime - Date.now()) / 1000
-        })
-        createWidget(widget.TEXT, {
-          x: 0,
-          y: totpHeight + 60,
-          w: width,
-          h: 36,
-          color: 0xffffff,
-          text_size: 36,
-          align_h: align.CENTER_H,
-          align_v: align.CENTER_V,
-          text_style: text_style.NONE,
-          text: buffer[i].otp
-        })
 
-        totpHeight += margin + buttonHeight;
+		} else {
-      }
+			renderContainers(buffer)
-    }
+			renderTOTPs(buffer)
-  }
+			setInterval(() => {
+				renderWidgets.forEach(x => deleteWidget(x))
+				renderTOTPs(buffer)
+			}, 500)
+		}
+	}
 })
+
+function renderContainers(buffer) {
+	const { width, height } = getDeviceInfo()
+	const buttonWidth = width - width / 20;
+	const buttonHeight = height / 4;
+	const margin = 10;
+	let totpHeight = margin;
+
+	for (let i = 0; i < buffer.length; i++) {
+		const otpData = TOTP.copy(buffer[i]).getOTP()
+		createWidget(widget.FILL_RECT, {
+			x: width / 2 - buttonWidth / 2,
+			y: totpHeight,
+			w: buttonWidth,
+			h: buttonHeight,
+			color: 0x303030,
+			radius: 20
+		})
+		createWidget(widget.TEXT, {
+			x: 0 + (width - buttonWidth) / 2,
+			y: totpHeight + 10,
+			w: width - (width - buttonWidth),
+			h: 26,
+			color: 0xa0a0a0,
+			text_size: 24,
+			align_h: align.CENTER_H,
+			align_v: align.CENTER_V,
+			text_style: text_style.NONE,
+			text: buffer[i].issuer + ': ' + buffer[i].client
+		})
+
+		totpHeight += margin + buttonHeight;
+	}
+}
+function renderTOTPs(buffer) {
+	const { width, height } = getDeviceInfo()
+	const buttonWidth = width - width / 20;
+	const buttonHeight = height / 4;
+	const margin = 10;
+	let totpHeight = margin;
+
+	for (let i = 0; i < buffer.length; i++) {
+		const otpData = TOTP.copy(buffer[i]).getOTP()
+		renderWidgets.push(
+			createWidget(widget.TEXT, {
+				x: 0,
+				y: totpHeight + 50,
+				w: width,
+				h: 40,
+				color: 0xffffff,
+				text_size: 40,
+				align_h: align.CENTER_H,
+				align_v: align.CENTER_V,
+				text_style: text_style.NONE,
+				text: otpData.otp
+			}))
+
+		const expireDif = Math.abs((((Date.now() - otpData.createdTime) / 1000)
+			/ buffer[i].fetchTime) - 1)
+		renderWidgets.push(
+			expireTimeWg = createWidget(widget.ARC, {
+				x: buttonWidth - 50,
+				y: totpHeight + 52,
+				w: 40,
+				h: 40,
+				line_width: 5,
+				color: 0x1ca9c9,
+				start_angle: -90,
+				end_angle: (expireDif * 360) - 90,
+				text: expireDif
+			})
+		)
+
+		totpHeight += margin + buttonHeight;
+	}
+}
+
+function RenderExpireWg(otpData, totpHeight, buttonWidth, buffer, i) {
+	const interval = setInterval(() => {
+		const expireDif = Math.abs((((Date.now() - otpData.createdTime) / 1000)
+			/ buffer[i].fetchTime) - 1)
+		if (Date.now() > otpData.expireTime) {
+			clearInterval(interval)
+			return
+		}
+
+		deleteWidget(expireTimeWg)
+		expireTimeWg = createWidget(widget.ARC, {
+			x: buttonWidth - 50,
+			y: totpHeight + 52,
+			w: 40,
+			h: 40,
+			line_width: 5,
+			color: 0x1ca9c9,
+			start_angle: -90,
+			end_angle: (expireDif * 360) - 90,
+			text: expireDif
+		})
+	}, 100)
+}

page/totplogic/totps.js

@@ -1,11 +0,0 @@
-import { TOTP } from "../../lib/totp-quickjs";
-
-export class TOTPBuffer{
-    constructor(){
-
-    }
-
-    getTOTPs(){
-        return [new TOTP('JBSWY3DPEHPK3PXP').getOTP()]
-    }
-}