Lisoveliy/TOTPFit
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

chore: prettier cleanup

Browse Source
This commit is contained in:
Pavel-Savely Savianok 2025-02-26 00:33:40 +03:00
parent cebe95acf5
commit 24e097a253
9 changed files with 318 additions and 296 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.prettierrc.yaml Normal file
View File

@ -0,0 +1 @@
tabWidth: 4

19
app.js
View File

@ -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() {},
})
)
);

77
page/index.js
View File

@ -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'
})
}
})
)
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",
});
},
})
);

6
page/index.s.layout.js
View File

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

44
page/render/index/renderer.js
View File

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

63
page/render/totpRenderer.js
View File

@ -1,18 +1,18 @@
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
*
@ -21,15 +21,15 @@ const statusBarPading = 65
* @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,8 +40,8 @@ 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
@ -51,7 +51,7 @@ export function RenderTOTPContainer(position, issuer, client) {
* @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,8 +62,8 @@ 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
@ -74,9 +74,10 @@ export function RenderOTPValue(position, otpValue) {
* @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,8 +86,8 @@ 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,
});
}
@ -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 }
function getYPos(position) {
return position * (buttonHeight + 10) + statusBarPading;
}

18
page/tip.js
View File

@ -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",
});
},
})
)
);

304
setting/index.js
View File

@ -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))
function updateStorage(storage) {
_props.settingsStorage.setItem("TOTPs", JSON.stringify(storage));
}

64
setting/utils/queryParser.js
View File

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