feat: created logic for render totps

lib/totp.js/lib/hotp.js

@@ -12,7 +12,9 @@ export class HOTP {
     this.key = key;
     this.digit = digit;
   }
-
+  static encode(data){
+    return encode(data)
+  }
   /**
    * generate secret key
    * @param {int} len

page/index.js

@@ -1,35 +1,75 @@
 import { getDeviceInfo } from '@zos/device'
 import { push } from '@zos/router'
-import { createWidget, widget } from '@zos/ui'
+import { setStatusBarVisible, createWidget, widget, align, prop, text_style, event } from '@zos/ui'
 
-import {TOTP} from '../lib/totp.js/lib/totp.js'
+import { TOTPBuffer } from './totplogic/totps.js'
 
 Page({
   build() {
-    
-    const totp = new TOTP('asdasd')
+    setStatusBarVisible(false);
+    buf = new TOTPBuffer();
 
-    const {width, height} = getDeviceInfo()
-    createWidget(widget.TEXT, {
-      x: width / 2 - 30,
-      y: height / 2 - 60,
-      text: totp.genOTP()
-    })
-    createWidget(widget.BUTTON,{
-      x: width / 2 - 40,
-      y: height / 2 - 20,
-      w: 80,
-      h: 80,
-      text: '+',
-      radius: 50,
-      text_size: 40,
-      normal_color: 0x303030,
-      press_color: 0x181c18,
-      click_func: () => {
-        push({
-          url: 'page/tip'
+    const { width, height } = getDeviceInfo()
+    buffer = buf.getTOTPs();
+    if(buffer.length < 1){
+      createWidget(widget.BUTTON, {
+        x: width / 2 - 40,
+        y: height / 2 - 20,
+        w: 80,
+        h: 80,
+        text: '+',
+        radius: 50,
+        text_size: 40,
+        normal_color: 0x303030,
+        press_color: 0x181c18,
+        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++){
+        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].name
+        })
+        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].data
+        })
+
+        totpHeight += margin + buttonHeight;
       }
-    })
+    }
   }
 })

page/tip.js

@@ -13,7 +13,6 @@ Page({
         })
     },
     build() {
-        console.log("Page tip opened")
         const {width, height} = getDeviceInfo()
         createWidget(widget.TEXT, {
             x: 0,

page/totplogic/totps.js

@@ -0,0 +1,20 @@
+import { TOTP } from "../../lib/totp.js/lib/totp";
+
+export class TOTPBuffer{
+    constructor(){
+
+    }
+
+    getTOTPs(){
+        return [new TOTPData("Contabo-Customer-Control-Panel-11755808: my.contabo.com", new TOTP(TOTP.encode('UU5WIIWKDNAHUNNL')).genOTP()), 
+            new TOTPData("OTPData", new TOTP(TOTP.encode('LCHJZO23LT3Z2QYNYAYAJXH5HFDZ5YI2')).genOTP()),
+            new TOTPData("test", new TOTP(TOTP.encode('GAXHMZDEGJVG64LP')).genOTP())]
+    }
+}
+
+export class TOTPData{
+    constructor(name, data){
+        this.name = name;
+        this.data = data;
+    }
+}