diff --git a/app.js b/app.js index e69bcef..7b3afc2 100644 --- a/app.js +++ b/app.js @@ -4,15 +4,21 @@ import { LocalStorage } from "@zos/storage" const localStorage = new LocalStorage() App({ globalData: { - TOTPS: localStorage.getItem('TOTPs') || [ - new TOTP('JBSWY3DPEHPK3PXPQ', 'totp.danhersam.com', 'I', 6, 30, 0, 'SHA-1') - ] + TOTPS: localStorage.getItem('TOTPs') || [] }, 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') diff --git a/page/index.js b/page/index.js index 2f4cc74..8fb015d 100644 --- a/page/index.js +++ b/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 - console.log(buffer.length) - if (buffer.length < 1) + //If app has no saved TOTPs + if (app._options.globalData.TOTPS.length < 1) setStatusBarVisible(true) else setStatusBarVisible(false) @@ -18,24 +19,7 @@ Page({ build() { const buffer = app._options.globalData.TOTPS 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' - }) - } - }) - + RenderAddButton('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() - 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; + RenderTOTPContainer(i, buffer[i].issuer, buffer[i].client) } } 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) + RenderOTPValue(i, otpData.otp)) 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 - }) + RenderExpireBar(i, otpData.createdTime, buffer[i].fetchTime) ) - - totpHeight += margin + buttonHeight; } } diff --git a/page/render/totpRenderer.js b/page/render/totpRenderer.js new file mode 100644 index 0000000..c277e66 --- /dev/null +++ b/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) } \ No newline at end of file