From 24e097a253b0d3da88e5070619c284833ceab688 Mon Sep 17 00:00:00 2001 From: Savely Savianok <1986developer@gmail.com> Date: Wed, 26 Feb 2025 00:33:40 +0300 Subject: [PATCH] chore: prettier cleanup --- .prettierrc.yaml | 1 + app.js | 19 +-- page/index.js | 77 +++++---- page/index.s.layout.js | 6 +- page/render/index/renderer.js | 52 +++--- page/render/totpRenderer.js | 71 ++++---- page/tip.js | 18 +- setting/index.js | 306 ++++++++++++++++++---------------- setting/utils/queryParser.js | 64 +++---- 9 files changed, 318 insertions(+), 296 deletions(-) create mode 100644 .prettierrc.yaml diff --git a/.prettierrc.yaml b/.prettierrc.yaml new file mode 100644 index 0000000..68ea04d --- /dev/null +++ b/.prettierrc.yaml @@ -0,0 +1 @@ +tabWidth: 4 \ No newline at end of file diff --git a/app.js b/app.js index 740ea28..49d65b6 100644 --- a/app.js +++ b/app.js @@ -1,14 +1,11 @@ -import { BaseApp } from "@zeppos/zml/base-app" +import { BaseApp } from "@zeppos/zml/base-app"; App( - BaseApp( - { - globalData: { - TOTPS: [] - }, - onCreate() { - }, - onDestroy() { - } + BaseApp({ + globalData: { + TOTPS: [], + }, + onCreate() {}, + onDestroy() {}, }) -) \ No newline at end of file +); diff --git a/page/index.js b/page/index.js index 43ceff0..686e917 100644 --- a/page/index.js +++ b/page/index.js @@ -1,43 +1,42 @@ -import { RenderAddButton } from './render/totpRenderer' -import { initLoop } from './render/index/renderer' -import { BasePage } from '@zeppos/zml/base-page' +import { RenderAddButton } from "./render/totpRenderer"; +import { initLoop } from "./render/index/renderer"; +import { BasePage } from "@zeppos/zml/base-page"; -const app = getApp() +const app = getApp(); let waitForFetch = true; Page( - BasePage({ - onInit() { - this.getTOTPData().then((x) => { - app._options.globalData.TOTPS = JSON.parse(x) ?? [] - this.initPage() - }) - .catch((x) => { - app._options.globalData.TOTPS = [] - this.initPage() - }) - }, - build() { - let fetch = setInterval(() => { - if(waitForFetch) - return; + BasePage({ + onInit() { + this.getTOTPData() + .then((x) => { + app._options.globalData.TOTPS = JSON.parse(x) ?? []; + this.initPage(); + }) + .catch((x) => { + app._options.globalData.TOTPS = []; + this.initPage(); + }); + }, + build() { + let fetch = setInterval(() => { + if (waitForFetch) return; - clearInterval(fetch); - const buffer = app._options.globalData.TOTPS - if (buffer.length < 1){ - RenderAddButton('page/tip') - } - else { - initLoop(buffer) - } - }, 100); - }, - initPage() { - waitForFetch = false; - }, - getTOTPData() { - return this.request({ - method: 'totps' - }) - } - }) -) \ No newline at end of file + clearInterval(fetch); + const buffer = app._options.globalData.TOTPS; + if (buffer.length < 1) { + RenderAddButton("page/tip"); + } else { + initLoop(buffer); + } + }, 100); + }, + initPage() { + waitForFetch = false; + }, + getTOTPData() { + return this.request({ + method: "totps", + }); + }, + }) +); diff --git a/page/index.s.layout.js b/page/index.s.layout.js index 7bf6175..6da0317 100644 --- a/page/index.s.layout.js +++ b/page/index.s.layout.js @@ -1,6 +1,6 @@ import { px } from "@zos/utils"; export const TEXT_STYLE = { - x: px(0), - y: px(0), -} + x: px(0), + y: px(0), +}; diff --git a/page/render/index/renderer.js b/page/render/index/renderer.js index b0e40b3..7db9e67 100644 --- a/page/render/index/renderer.js +++ b/page/render/index/renderer.js @@ -1,45 +1,57 @@ import { prop } from "@zos/ui"; import { TOTP } from "../../../lib/totp-quickjs"; -import { RenderExpireBar, RenderOTPValue, RenderTOTPContainer } from '../totpRenderer' +import { + RenderExpireBar, + RenderOTPValue, + RenderTOTPContainer, +} from "../totpRenderer"; /** - * - * @param {Array} buffer + * + * @param {Array} buffer */ export function initLoop(buffer) { - renderContainers(buffer) - renderTOTPs(buffer) + renderContainers(buffer); + renderTOTPs(buffer); } function renderContainers(buffer) { for (let i = 0; i < buffer.length; i++) { - RenderTOTPContainer(i, buffer[i].issuer, buffer[i].client) + RenderTOTPContainer(i, buffer[i].issuer, buffer[i].client); } } -const renderData = [] +const renderData = []; function renderTOTPs(buffer) { for (let i = 0; i < buffer.length; i++) { - let otpData = TOTP.copy(buffer[i]).getOTP() + let otpData = TOTP.copy(buffer[i]).getOTP(); renderData[i] = { OTP: RenderOTPValue(i, otpData.otp), - expireBar: RenderExpireBar(i, otpData.createdTime, buffer[i].fetchTime) - } + expireBar: RenderExpireBar( + i, + otpData.createdTime, + buffer[i].fetchTime + ), + }; setInterval(() => { - const expireDif = Math.abs((((Date.now() - otpData.createdTime) / 1000) - / buffer[i].fetchTime) - 1) + const expireDif = Math.abs( + (Date.now() - otpData.createdTime) / + 1000 / + buffer[i].fetchTime - + 1 + ); renderData[i].expireBar.setProperty(prop.MORE, { - end_angle: (expireDif * 360) - 90, + end_angle: expireDif * 360 - 90, color: expireDif > 0.25 ? 0x1ca9c9 : 0xfa0404, - }) - + }); + if (otpData.expireTime < Date.now()) { - otpData = TOTP.copy(buffer[i]).getOTP() + otpData = TOTP.copy(buffer[i]).getOTP(); renderData[i].OTP.setProperty(prop.MORE, { - text: otpData.otp - }) + text: otpData.otp, + }); } - }, 50) + }, 50); } -} \ No newline at end of file +} diff --git a/page/render/totpRenderer.js b/page/render/totpRenderer.js index 6a1a449..be44e40 100644 --- a/page/render/totpRenderer.js +++ b/page/render/totpRenderer.js @@ -1,35 +1,35 @@ -import { getDeviceInfo } from '@zos/device' -import { push } from '@zos/router' -import { createWidget, widget, align, text_style } from '@zos/ui' +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 { 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 -const statusBarPading = 65 +const textColor = 0xa0a0a0; //Color of TOTP description text +const textSize = 24; //Size of TOTP description text +const statusBarPading = 65; /** 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) + const yPos = getYPos(position); createWidget(widget.FILL_RECT, { x: width / 2 - buttonWidth / 2, y: yPos, w: buttonWidth, h: buttonHeight, color: containerColor, - radius: containerRadius - }) + radius: containerRadius, + }); createWidget(widget.TEXT, { x: 0 + (width - buttonWidth) / 2, y: yPos + 10, @@ -40,18 +40,18 @@ export function RenderTOTPContainer(position, issuer, client) { align_h: align.CENTER_H, align_v: align.CENTER_V, text_style: text_style.NONE, - text: issuer + ': ' + client - }) + 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) + const yPos = getYPos(position); return createWidget(widget.TEXT, { x: 0, y: yPos + 50, @@ -62,21 +62,22 @@ export function RenderOTPValue(position, otpValue) { align_h: align.CENTER_H, align_v: align.CENTER_V, text_style: text_style.NONE, - text: otpValue - }) + 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) + const yPos = getYPos(position); + const expireDif = Math.abs( + (Date.now() - createdTime) / 1000 / fetchTime - 1 + ); return createWidget(widget.ARC, { x: buttonWidth - 50, y: yPos + 52, @@ -85,13 +86,13 @@ export function RenderExpireBar(position, createdTime, fetchTime) { line_width: 5, color: expireDif > 0.25 ? 0x1ca9c9 : 0xfa0404, start_angle: -90, - end_angle: (expireDif * 360) - 90, - text: expireDif + 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) { @@ -100,17 +101,19 @@ export function RenderAddButton(pagePath) { y: height / 2 - 20, w: 80, h: 80, - text: '+', + text: "+", radius: 50, text_size: 40, normal_color: 0x303030, press_color: 0x181c18, click_func: () => { push({ - url: pagePath - }) - } - }) + url: pagePath, + }); + }, + }); } -function getYPos(position) { return position * (buttonHeight + 10) + statusBarPading } \ No newline at end of file +function getYPos(position) { + return position * (buttonHeight + 10) + statusBarPading; +} diff --git a/page/tip.js b/page/tip.js index 44cb60e..94a42e0 100644 --- a/page/tip.js +++ b/page/tip.js @@ -1,6 +1,6 @@ import { createWidget, widget, align } from "@zos/ui"; import { getDeviceInfo } from "@zos/device"; -import { onGesture, GESTURE_LEFT } from '@zos/interaction' +import { onGesture, GESTURE_LEFT } from "@zos/interaction"; import { back } from "@zos/router"; import { BasePage } from "@zeppos/zml/base-page"; Page( @@ -9,13 +9,13 @@ Page( onGesture({ callback(event) { if (event === GESTURE_LEFT) { - back() + back(); } - } - }) + }, + }); }, build() { - const { width, height } = getDeviceInfo() + const { width, height } = getDeviceInfo(); createWidget(widget.TEXT, { x: 0, w: width, @@ -24,8 +24,8 @@ Page( text_size: 30, align_h: align.CENTER_H, align_v: align.CENTER_V, - text: 'To add TOTP record open\n settings on Zepp app' - }) - } + text: "To add TOTP record open\n settings on Zepp app", + }); + }, }) -) \ No newline at end of file +); diff --git a/setting/index.js b/setting/index.js index 579ac75..d9276b2 100644 --- a/setting/index.js +++ b/setting/index.js @@ -1,162 +1,172 @@ -import { getTOTPByLink } from './utils/queryParser.js' +import { getTOTPByLink } from "./utils/queryParser.js"; let _props = null; AppSettingsPage({ - build(props) { - _props = props; + build(props) { + _props = props; - const storage = JSON.parse(props.settingsStorage.getItem("TOTPs") ?? "[]") - const totpEntrys = GetTOTPList(storage) - const createButton = TextInput({ - placeholder: "otpauth://", - label: "Add new OTP Link", - onChange: (changes) => { - var link = getTOTPByLink(changes) - if(link == null){ - console.log("link is invalid") - return; - } - storage.push(link) - updateStorage(storage) - }, - labelStyle: { - backgroundColor: "#14213D", - display: "flex", - alignItems: "center", - justifyContent: "center", - margin: "10px", - flexGrow: 1, - fontSize: "20px", - color: "#FFFFFF", - borderRadius: "5px" - } - }); - - var body = Section( - { - style: { - backgroundColor: "black", - minHeight: "100vh", - }, - }, - [ - View( - { - style: { - textAlign: "center", + const storage = JSON.parse( + props.settingsStorage.getItem("TOTPs") ?? "[]" + ); + const totpEntrys = GetTOTPList(storage); + const createButton = TextInput({ + placeholder: "otpauth://", + label: "Add new OTP Link", + onChange: (changes) => { + var link = getTOTPByLink(changes); + if (link == null) { + console.log("link is invalid"); + return; + } + storage.push(link); + updateStorage(storage); }, - }, - Text( + labelStyle: { + backgroundColor: "#14213D", + display: "flex", + alignItems: "center", + justifyContent: "center", + margin: "10px", + flexGrow: 1, + fontSize: "20px", + color: "#FFFFFF", + borderRadius: "5px", + }, + }); + + var body = Section( { - align: "center", - paragraph: true, - style: { - marginBottom: "10px", - color: "#fff", - fontSize: 23, - verticalAlign: "middle", - }, + style: { + backgroundColor: "black", + minHeight: "100vh", + }, }, - "TOTPS:" - ) - ), - ...totpEntrys, - createButton - ] - ); - return body; - }, + [ + View( + { + style: { + textAlign: "center", + }, + }, + Text( + { + align: "center", + paragraph: true, + style: { + marginBottom: "10px", + color: "#fff", + fontSize: 23, + verticalAlign: "middle", + }, + }, + "TOTPS:" + ) + ), + ...totpEntrys, + createButton, + ] + ); + return body; + }, }); -function GetTOTPList(storage){ - let totpEntrys = []; - let counter = 0; - storage.forEach((element) => { - const elementId = counter; - const textInput = TextInput({ - placeholder: "otpauth://", - label: "Change OTP link", - onChange: (changes) => { - try{ - storage[elementId] = getTOTPByLink(changes) - updateStorage(storage) - } - catch(err){ - console.log(err) - } - }, - labelStyle: { - backgroundColor: "#14213D", - textAlign: "center", - display: "flex", - alignItems: "center", - justifyContent: "center", - margin: "10px", - flexGrow: 1, - fontSize: "20px", - color: "#E5E5E5", - borderRadius: "5px" - }, +function GetTOTPList(storage) { + let totpEntrys = []; + let counter = 0; + storage.forEach((element) => { + const elementId = counter; + const textInput = TextInput({ + placeholder: "otpauth://", + label: "Change OTP link", + onChange: (changes) => { + try { + storage[elementId] = getTOTPByLink(changes); + updateStorage(storage); + } catch (err) { + console.log(err); + } + }, + labelStyle: { + backgroundColor: "#14213D", + textAlign: "center", + display: "flex", + alignItems: "center", + justifyContent: "center", + margin: "10px", + flexGrow: 1, + fontSize: "20px", + color: "#E5E5E5", + borderRadius: "5px", + }, + }); + const textBig = Text( + { + align: "center", + style: { + color: "#ffffff", + fontSize: "16px", + }, + paragraph: true, + }, + `${element.issuer}: ${element.client}` + ); + const delButton = Button({ + onClick: () => { + storage = storage.filter( + (x) => storage.indexOf(x) != elementId + ); + updateStorage(storage); + }, + style: { + backgroundColor: "#ba181b", + fontSize: "18px", + color: "#ffffff", + height: "fit-content", + margin: "10px", + }, + label: "DEL", + }); + const text = Text( + { + style: { + color: "#ffffff", + fontSize: "14px", + }, + align: "center", + }, + `${element.hashType} | ${element.digits} digits | ${element.fetchTime} seconds | offset ${element.timeOffset} seconds` + ); + const view = View( + { + style: { + textAlign: "center", + border: "2px solid white", + borderRadius: "5px", + margin: "10px", + }, + }, + [ + textBig, + text, + View( + { + style: { + display: "grid", + gridTemplateColumns: "1fr 100px", + }, + }, + [textInput, delButton] + ), + ] + ); + totpEntrys.push({ text: text, view: view }); + counter++; }); - const textBig = Text( - { - align: "center", - style: { - color: "#ffffff", - fontSize: "16px" - }, - paragraph: true, - }, - `${element.issuer}: ${element.client}` - ); - const delButton = Button( - { - onClick: () => { - storage = storage.filter(x => storage.indexOf(x) != elementId) - updateStorage(storage) - }, - style: { - backgroundColor: "#ba181b", - fontSize: "18px", - color: "#ffffff", - height: "fit-content", - margin: "10px" - }, - label: "DEL" - } - ); - const text = Text( - { - style: { - color: "#ffffff", - fontSize: "14px" - }, - align: "center" - }, - `${element.hashType} | ${element.digits} digits | ${element.fetchTime} seconds | offset ${element.timeOffset} seconds` - ); - const view = View( - { - style: { - textAlign: "center", - border: "2px solid white", - borderRadius: "5px", - margin: "10px" - }, - }, - [textBig, text, View({style: { - display: "grid", - gridTemplateColumns: "1fr 100px" - }}, [textInput, delButton])] - ); - totpEntrys.push({ text: text, view: view }); - counter++; - }); - return totpEntrys.map(x => x.view); + return totpEntrys.map((x) => x.view); } -function updateStorage(storage){ - _props.settingsStorage.setItem('TOTPs', JSON.stringify(storage)) -} \ No newline at end of file +function updateStorage(storage) { + _props.settingsStorage.setItem("TOTPs", JSON.stringify(storage)); +} diff --git a/setting/utils/queryParser.js b/setting/utils/queryParser.js index a63430c..c999285 100644 --- a/setting/utils/queryParser.js +++ b/setting/utils/queryParser.js @@ -3,43 +3,43 @@ import { TOTP } from "../../lib/totp-quickjs"; const otpScheme = "otpauth:/"; export function getTOTPByLink(link) { - try { - let args = link.split("/", otpScheme.length); - let type = args[2]; //Returns 'hotp' or 'totp' - let issuer = args[3].split(":")[0]?.split("?")[0]; //Returns issuer - let client = - args[3].split(":")[1]?.split("?")[0] ?? - args[3].split(":")[0]?.split("?")[0]; //Returns client - let secret = args[3].split("secret=")[1]?.split("&")[0]; //Returns secret - let period = args[3].split("period=")[1]?.split("&")[0]; //Returns period - let digits = args[3].split("digits=")[1]?.split("&")[0]; //Returns digits - let algorithm = args[3].split("algorithm=")[1]?.split("&")[0]; //Returns algorithm + try { + let args = link.split("/", otpScheme.length); + let type = args[2]; //Returns 'hotp' or 'totp' + let issuer = args[3].split(":")[0]?.split("?")[0]; //Returns issuer + let client = + args[3].split(":")[1]?.split("?")[0] ?? + args[3].split(":")[0]?.split("?")[0]; //Returns client + let secret = args[3].split("secret=")[1]?.split("&")[0]; //Returns secret + let period = args[3].split("period=")[1]?.split("&")[0]; //Returns period + let digits = args[3].split("digits=")[1]?.split("&")[0]; //Returns digits + let algorithm = args[3].split("algorithm=")[1]?.split("&")[0]; //Returns algorithm - if (type.toLowerCase() != "totp") - throw new Error("Type is not valid, requires 'TOTP'"); + if (type.toLowerCase() != "totp") + throw new Error("Type is not valid, requires 'TOTP'"); - if (secret === undefined) throw new Error("Secret not defined"); + if (secret === undefined) throw new Error("Secret not defined"); - issuer = issuer.replace("%20", " "); - client = client.replace("%20", " "); + issuer = issuer.replace("%20", " "); + client = client.replace("%20", " "); - return new TOTP( - secret, - issuer, - client, - digits, - period, - 0, - getHashType(algorithm) - ); - } catch (err) { - return null; - } + return new TOTP( + secret, + issuer, + client, + digits, + period, + 0, + getHashType(algorithm) + ); + } catch (err) { + return null; + } } function getHashType(algorithm) { - if (algorithm == "SHA1") return "SHA-1"; - if (algorithm == "SHA256") return "SHA-256"; - if (algorithm == "SHA512") return "SHA-512"; - else return "SHA-1"; + if (algorithm == "SHA1") return "SHA-1"; + if (algorithm == "SHA256") return "SHA-256"; + if (algorithm == "SHA512") return "SHA-512"; + else return "SHA-1"; }