refactor: render logic moved into totpRenderer.js
This commit is contained in:
parent
fbac44b48b
commit
50de1c0b57
20
app.js
20
app.js
@ -4,15 +4,21 @@ import { LocalStorage } from "@zos/storage"
|
|||||||
const localStorage = new LocalStorage()
|
const localStorage = new LocalStorage()
|
||||||
App({
|
App({
|
||||||
globalData: {
|
globalData: {
|
||||||
TOTPS: localStorage.getItem('TOTPs') || [
|
TOTPS: localStorage.getItem('TOTPs') || []
|
||||||
new TOTP('JBSWY3DPEHPK3PXPQ', 'totp.danhersam.com', 'I', 6, 30, 0, 'SHA-1')
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
onCreate(options) {
|
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) {
|
onDestroy(options) {
|
||||||
console.log('app on destroy invoke')
|
console.log('app on destroy invoke')
|
||||||
|
@ -1,16 +1,17 @@
|
|||||||
import { getDeviceInfo } from '@zos/device'
|
import { getDeviceInfo } from '@zos/device'
|
||||||
import { TOTP } from '../lib/totp-quickjs'
|
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 { setStatusBarVisible, createWidget, widget, align, prop, text_style, event, deleteWidget } from '@zos/ui'
|
||||||
|
import { RenderAddButton, RenderExpireBar, RenderOTPValue, RenderTOTPContainer } from './render/totpRenderer'
|
||||||
|
|
||||||
const app = getApp()
|
const app = getApp()
|
||||||
|
const { width, height } = getDeviceInfo()
|
||||||
|
|
||||||
const renderWidgets = []
|
const renderWidgets = []
|
||||||
|
|
||||||
Page({
|
Page({
|
||||||
onInit() {
|
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)
|
setStatusBarVisible(true)
|
||||||
else
|
else
|
||||||
setStatusBarVisible(false)
|
setStatusBarVisible(false)
|
||||||
@ -18,24 +19,7 @@ Page({
|
|||||||
build() {
|
build() {
|
||||||
const buffer = app._options.globalData.TOTPS
|
const buffer = app._options.globalData.TOTPS
|
||||||
if (buffer.length < 1) {
|
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 {
|
} else {
|
||||||
renderContainers(buffer)
|
renderContainers(buffer)
|
||||||
renderTOTPs(buffer)
|
renderTOTPs(buffer)
|
||||||
@ -48,78 +32,18 @@ Page({
|
|||||||
})
|
})
|
||||||
|
|
||||||
function renderContainers(buffer) {
|
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++) {
|
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) {
|
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++) {
|
for (let i = 0; i < buffer.length; i++) {
|
||||||
const otpData = TOTP.copy(buffer[i]).getOTP()
|
const otpData = TOTP.copy(buffer[i]).getOTP()
|
||||||
renderWidgets.push(
|
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(
|
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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
116
page/render/totpRenderer.js
Normal file
116
page/render/totpRenderer.js
Normal file
@ -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) }
|
Loading…
x
Reference in New Issue
Block a user