refactor: render logic moved into totpRenderer.js

app.js

@@ -4,15 +4,21 @@ import { LocalStorage } from "@zos/storage"
 const localStorage = new LocalStorage()
 App({
   globalData: {
-    TOTPS: localStorage.getItem('TOTPs') || [
+    TOTPS: localStorage.getItem('TOTPs') || []
-      new TOTP('JBSWY3DPEHPK3PXPQ', 'totp.danhersam.com', 'I', 6, 30, 0, 'SHA-1')
-    ]
   },
   onCreate(options) {
-     localStorage.setItem('TOTPs', [
+    //  localStorage.setItem('TOTPs', [
-      
+    //   new TOTP('JBSWY3DPEHPK3PXPQ', 'totp.danhersam.com', 'Iasd', 6, 30, 0, 'SHA-1'),
-    ])
+    //   new TOTP('JBSWY3DPEHPK3PXPQ', 'totp.danhersam.com', 'Isgfsd', 6, 30, 0, 'SHA-1'),
-   },
+    //   new TOTP('JBSWY3DPEHPK3PXPQ', 'totp.danhersam.com', 'Idfklgj', 6, 30, 0, 'SHA-1'),
+    //   new TOTP('JBSWY3DPEHPK3PXPQ', 'totp.danhersam.com', 'Ibcopiu', 6, 30, 0, 'SHA-1'),
+    //   new TOTP('JBSWY3DPEHPK3PXPQ', 'totp.danhersam.com', 'Ioprfhujoidkfmv', 6, 30, 0, 'SHA-1'),
+    //   new TOTP('JBSWY3DPEHPK3PXPQ', 'totp.danhersam.com', 'If', 6, 30, 0, 'SHA-1'),
+    //   new TOTP('JBSWY3DPEHPK3PXPQ', 'totp.danhersam.com', 'I2', 6, 30, 0, 'SHA-1'),
+    //   new TOTP('JBSWY3DPEHPK3PXPQ', 'totp.danhersam.com', 'I3', 6, 30, 0, 'SHA-1'),
+    //   new TOTP('JBSWY3DPEHPK3PXPQ', 'totp.danhersam.com', 'I4', 6, 30, 0, 'SHA-1')
+    // ])
+  },
 
   onDestroy(options) {
     console.log('app on destroy invoke')

page/index.js

@@ -1,16 +1,17 @@
 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, deleteWidget } from '@zos/ui'
+import { RenderAddButton, RenderExpireBar, RenderOTPValue, RenderTOTPContainer } from './render/totpRenderer'
 
 const app = getApp()
+const { width, height } = getDeviceInfo()
+
 const renderWidgets = []
 
 Page({
 	onInit() {
-		const buffer = app._options.globalData.TOTPS
+		//If app has no saved TOTPs
-		console.log(buffer.length)
+		if (app._options.globalData.TOTPS.length < 1)
-		if (buffer.length < 1)
 			setStatusBarVisible(true)
 		else
 			setStatusBarVisible(false)
@@ -18,24 +19,7 @@ Page({
 	build() {
 		const buffer = app._options.globalData.TOTPS
 		if (buffer.length < 1) {
-
+			RenderAddButton('page/tip')
-			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 {
 			renderContainers(buffer)
 			renderTOTPs(buffer)
@@ -48,78 +32,18 @@ Page({
 })
 
 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()
+		RenderTOTPContainer(i, buffer[i].issuer, buffer[i].client)
-		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, {
+			RenderOTPValue(i, otpData.otp))
-				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, {
+			RenderExpireBar(i, otpData.createdTime, buffer[i].fetchTime)
-				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;
 	}
 }
 

page/render/totpRenderer.js

@@ -0,0 +1,116 @@
+import { getDeviceInfo } from '@zos/device'
+import { push } from '@zos/router'
+import { createWidget, widget, align, text_style } from '@zos/ui'
+
+//Renderer module for TOTPs page
+
+const { width, height } = getDeviceInfo()
+const buttonWidth = width - width / 20 //Width of container
+const buttonHeight = height / 4 //Height of container
+const containerColor = 0x303030 //Color of container
+const containerRadius = 20 //Corner radius of container
+
+const textColor = 0xa0a0a0 //Color of TOTP description text
+const textSize = 24 //Size of TOTP description text
+
+/** Function for render box container for TOTP values
+ * 
+ * @param {number} position position offset of container
+ * @param {string} issuer issuer of TOTP
+ * @param {string} client client of TOTP
+ */
+export function RenderTOTPContainer(position, issuer, client) {
+    const yPos = getYPos(position)
+    createWidget(widget.FILL_RECT, {
+        x: width / 2 - buttonWidth / 2,
+        y: yPos,
+        w: buttonWidth,
+        h: buttonHeight,
+        color: containerColor,
+        radius: containerRadius
+    })
+    createWidget(widget.TEXT, {
+        x: 0 + (width - buttonWidth) / 2,
+        y: yPos + 10,
+        w: width - (width - buttonWidth),
+        h: 26,
+        color: textColor,
+        text_size: textSize,
+        align_h: align.CENTER_H,
+        align_v: align.CENTER_V,
+        text_style: text_style.NONE,
+        text: issuer + ': ' + client
+    })
+}
+
+/** Render OTP Value on container
+ * 
+ * @param {number} position position offset of container
+ * @param {string} otpValue value to display
+ * @returns widget with OTP
+ */
+export function RenderOTPValue(position, otpValue) {
+    const yPos = getYPos(position)
+    return createWidget(widget.TEXT, {
+        x: 0,
+        y: yPos + 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: otpValue
+    })
+}
+
+/** Render expire bar
+ * 
+ * @param {} position position offset of container
+ * @param {*} createdTime UNIX epoch time of creation
+ * @param {*} fetchTime time in seconds to fetch value
+ * @returns widget with bar
+ */
+export function RenderExpireBar(position, createdTime, fetchTime) {
+    const yPos = getYPos(position)
+    const expireDif = Math.abs((((Date.now() - createdTime) / 1000)
+        / fetchTime) - 1)
+
+    return createWidget(widget.ARC, {
+        x: buttonWidth - 50,
+        y: yPos + 52,
+        w: 40,
+        h: 40,
+        line_width: 5,
+        color: 0x1ca9c9,
+        start_angle: -90,
+        end_angle: (expireDif * 360) - 90,
+        text: expireDif
+    });
+}
+
+/** Function for render 'Add' button on center of screen
+ * 
+ * @param {string} pagePath destination to page onClick ex: 'page/index'
+ */
+export function RenderAddButton(pagePath) {
+    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: pagePath
+            })
+        }
+    })
+}
+
+function getYPos(position) { return position * (buttonHeight + 10) }