feat: added support for time indicator

app.js

@@ -1,7 +1,21 @@
+import { TOTP } from "./lib/totp-quickjs"
+import { LocalStorage } from "@zos/storage"
+
+const localStorage = new LocalStorage()
 App({
-  globalData: {},
+  globalData: {
+    TOTPS: localStorage.getItem('TOTPs') || []
+  },
   onCreate(options) {
-    console.log('app on create invoke')
+     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) {

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)
     
+    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,13 +1,13 @@
 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 
@@ -15,47 +15,63 @@ export class TOTP{
      */
     constructor(secret,
         issuer,
+        client,
         digits = 6,
         fetchTime = 30,
         timeOffset = 0,
-                hashType = 'SHA-1')
-        {
+        hashType = 'SHA-1') {
         this.secret = secret
         this.issuer = issuer
+        this.client = client
         this.digits = digits
         this.fetchTime = fetchTime
         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 +
             (this.fetchTime -
                 (time / 1000 + this.timeOffset) %
                 this.fetchTime) * 1000
+        const createdTime = time - (((time / 1000 + this.timeOffset) % 
+        this.fetchTime) * 1000)
         
-        return new OTP(otp, expireTime)
+        
+        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,17 +1,24 @@
 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({
+	onInit() {
+		const buffer = app._options.globalData.TOTPS
+		console.log(buffer.length)
+		if (buffer.length < 1)
+			setStatusBarVisible(true)
+		else
+			setStatusBarVisible(false)
+	},
 	build() {
-    setStatusBarVisible(false);
-    buf = new TOTPBuffer();
+		const buffer = app._options.globalData.TOTPS
+		if (buffer.length < 1) {
 
-    const { width, height } = getDeviceInfo()
-    buffer = buf.getTOTPs();
-    if(buffer.length < 1){
 			createWidget(widget.BUTTON, {
 				x: width / 2 - 40,
 				y: height / 2 - 20,
@@ -28,14 +35,27 @@ Page({
 					})
 				}
 			})
-    }else{
+
+		} 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++){
-        console.log(buffer[i])
+	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,
@@ -45,32 +65,84 @@ Page({
 			radius: 20
 		})
 		createWidget(widget.TEXT, {
-          x: 0,
+			x: 0 + (width - buttonWidth) / 2,
 			y: totpHeight + 10,
-          w: width,
+			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].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
+			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()]
-    }
-}