refactor: render logic moved into totpRenderer.js

This commit is contained in:
Савелий Савенок 2024-11-19 20:01:36 +03:00
parent fbac44b48b
commit 50de1c0b57
3 changed files with 138 additions and 92 deletions

18
app.js
View File

@ -4,14 +4,20 @@ 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) {

View File

@ -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;
}
}

116
page/render/totpRenderer.js Normal file
View 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) }