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

v1.0.1 #2

Merged
Lisoveliy merged 5 commits from dev into main 2025-02-25 22:35:27 +01:00
Conversation 0 Commits 5 Files Changed 12 +326 -310
12 changed files with 326 additions and 310 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

9
app-side/index.js
View File

@ -6,11 +6,12 @@ AppSideService(
onInit(){ onInit(){
}, },
onRequest(req, res){ onRequest(request, response){
if(req.method === 'totps'){ if(request.method === 'totps'){
res(null, settings.settingsStorage.getItem('TOTPs')) response(null, settings.settingsStorage.getItem('TOTPs'))
}
} }
},
onSettingsChange(){ }
} }
) )
) )

15
app.js
View File

@ -1,14 +1,11 @@
import { BaseApp } from "@zeppos/zml/base-app" import { BaseApp } from "@zeppos/zml/base-app";
App( App(
BaseApp( BaseApp({
{
globalData: { globalData: {
TOTPS: [] TOTPS: [],
}, },
onCreate() { onCreate() {},
}, onDestroy() {},
onDestroy() {
}
}) })
) );

5
app.json
View File

@ -6,15 +6,14 @@
"appType": "app", "appType": "app",
"version": { "version": {
"code": 1, "code": 1,
"name": "1.0.0" "name": "1.0.1"
}, },
"icon": "icon.png", "icon": "icon.png",
"vender": "zepp", "vender": "zepp",
"description": "TOTP Authenticator for Amazfit devices" "description": "TOTP Authenticator for Amazfit devices"
}, },
"permissions": [ "permissions": [
"data:os.device.info", "data:os.device.info"
"device:os.local_storage"
], ],
"runtime": { "runtime": {
"apiVersion": { "apiVersion": {

1
lib/totp-quickjs/OTPGenerator.js
View File

@ -16,7 +16,6 @@ export function getHOTP(counter, secret, digits = 6, hashType = 'SHA-1'){
rawDataCounter.setUint32(4, counter) rawDataCounter.setUint32(4, counter)
const bCounter = new Uint8Array(rawDataCounter.buffer) const bCounter = new Uint8Array(rawDataCounter.buffer)
console.log(bCounter)
const bSecret = new Uint8Array(decode(secret).match(/.{1,2}/g).map(chunk => parseInt(chunk, 16))); //confirmed const bSecret = new Uint8Array(decode(secret).match(/.{1,2}/g).map(chunk => parseInt(chunk, 16))); //confirmed
//Stage 2: Hash data //Stage 2: Hash data

47
page/index.js
View File

@ -1,37 +1,32 @@
import { RenderAddButton } from './render/totpRenderer' import { RenderAddButton } from "./render/totpRenderer";
import { initLoop } from './render/index/renderer' import { initLoop } from "./render/index/renderer";
import { BasePage } from '@zeppos/zml/base-page' import { BasePage } from "@zeppos/zml/base-page";
import { LocalStorage } from "@zos/storage"
const localStorage = new LocalStorage() const app = getApp();
const app = getApp()
let waitForFetch = true; let waitForFetch = true;
Page( Page(
BasePage({ BasePage({
onInit() { onInit() {
this.getTOTPData().then((x) => { this.getTOTPData()
console.log(x) .then((x) => {
localStorage.setItem('TOTPs', x ?? []) app._options.globalData.TOTPS = JSON.parse(x) ?? [];
app._options.globalData.TOTPS = x ?? []
this.initPage(); this.initPage();
}) })
.catch(() => { .catch((x) => {
app._options.globalData.TOTPS = localStorage.getItem('TOTPs') ?? [] app._options.globalData.TOTPS = [];
this.initPage() this.initPage();
}) });
}, },
build() { build() {
let fetch = setInterval(() => { let fetch = setInterval(() => {
if(waitForFetch) if (waitForFetch) return;
return;
clearInterval(fetch); clearInterval(fetch);
const buffer = app._options.globalData.TOTPS const buffer = app._options.globalData.TOTPS;
if (buffer.length < 1){ if (buffer.length < 1) {
RenderAddButton('page/tip') RenderAddButton("page/tip");
} } else {
else { initLoop(buffer);
initLoop(buffer)
} }
}, 100); }, 100);
}, },
@ -40,8 +35,8 @@ Page(
}, },
getTOTPData() { getTOTPData() {
return this.request({ return this.request({
method: 'totps' method: "totps",
});
},
}) })
} );
})
)

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

@ -3,4 +3,4 @@ import { px } from "@zos/utils";
export const TEXT_STYLE = { export const TEXT_STYLE = {
x: px(0), x: px(0),
y: px(0), y: px(0),
} };

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

@ -1,46 +1,57 @@
import { prop } from "@zos/ui"; import { prop } from "@zos/ui";
import { TOTP } from "../../../lib/totp-quickjs"; import { TOTP } from "../../../lib/totp-quickjs";
import { RenderExpireBar, RenderOTPValue, RenderTOTPContainer } from '../totpRenderer' import {
RenderExpireBar,
RenderOTPValue,
RenderTOTPContainer,
} from "../totpRenderer";
/** /**
* *
* @param {Array<TOTP>} buffer * @param {Array<TOTP>} buffer
*/ */
export function initLoop(buffer) { export function initLoop(buffer) {
renderContainers(buffer) renderContainers(buffer);
renderTOTPs(buffer) renderTOTPs(buffer);
} }
function renderContainers(buffer) { function renderContainers(buffer) {
for (let i = 0; i < buffer.length; i++) { 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) { function renderTOTPs(buffer) {
for (let i = 0; i < buffer.length; i++) { for (let i = 0; i < buffer.length; i++) {
let otpData = TOTP.copy(buffer[i]).getOTP() let otpData = TOTP.copy(buffer[i]).getOTP();
console.log(otpData.otp)
renderData[i] = { renderData[i] = {
OTP: RenderOTPValue(i, otpData.otp), OTP: RenderOTPValue(i, otpData.otp),
expireBar: RenderExpireBar(i, otpData.createdTime, buffer[i].fetchTime) expireBar: RenderExpireBar(
} i,
otpData.createdTime,
buffer[i].fetchTime
),
};
setInterval(() => { setInterval(() => {
const expireDif = Math.abs((((Date.now() - otpData.createdTime) / 1000) const expireDif = Math.abs(
/ buffer[i].fetchTime) - 1) (Date.now() - otpData.createdTime) /
1000 /
buffer[i].fetchTime -
1
);
renderData[i].expireBar.setProperty(prop.MORE, { renderData[i].expireBar.setProperty(prop.MORE, {
end_angle: (expireDif * 360) - 90, end_angle: expireDif * 360 - 90,
color: expireDif > 0.25 ? 0x1ca9c9 : 0xfa0404, color: expireDif > 0.25 ? 0x1ca9c9 : 0xfa0404,
}) });
if (otpData.expireTime < Date.now()) { if (otpData.expireTime < Date.now()) {
otpData = TOTP.copy(buffer[i]).getOTP() otpData = TOTP.copy(buffer[i]).getOTP();
renderData[i].OTP.setProperty(prop.MORE, { 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 { getDeviceInfo } from "@zos/device";
import { push } from '@zos/router' import { push } from "@zos/router";
import { createWidget, widget, align, text_style } from '@zos/ui' import { createWidget, widget, align, text_style } from "@zos/ui";
//Renderer module for TOTPs page //Renderer module for TOTPs page
const { width, height } = getDeviceInfo() const { width, height } = getDeviceInfo();
const buttonWidth = width - width / 20 //Width of container const buttonWidth = width - width / 20; //Width of container
const buttonHeight = height / 4 //Height of container const buttonHeight = height / 4; //Height of container
const containerColor = 0x303030 //Color of container const containerColor = 0x303030; //Color of container
const containerRadius = 20 //Corner radius of container const containerRadius = 20; //Corner radius of container
const textColor = 0xa0a0a0 //Color of TOTP description text const textColor = 0xa0a0a0; //Color of TOTP description text
const textSize = 24 //Size of TOTP description text const textSize = 24; //Size of TOTP description text
const statusBarPading = 65 const statusBarPading = 65;
/** Function for render box container for TOTP values /** Function for render box container for TOTP values
* *
@ -21,15 +21,15 @@ const statusBarPading = 65
* @param {string} client client of TOTP * @param {string} client client of TOTP
*/ */
export function RenderTOTPContainer(position, issuer, client) { export function RenderTOTPContainer(position, issuer, client) {
const yPos = getYPos(position) const yPos = getYPos(position);
createWidget(widget.FILL_RECT, { createWidget(widget.FILL_RECT, {
x: width / 2 - buttonWidth / 2, x: width / 2 - buttonWidth / 2,
y: yPos, y: yPos,
w: buttonWidth, w: buttonWidth,
h: buttonHeight, h: buttonHeight,
color: containerColor, color: containerColor,
radius: containerRadius radius: containerRadius,
}) });
createWidget(widget.TEXT, { createWidget(widget.TEXT, {
x: 0 + (width - buttonWidth) / 2, x: 0 + (width - buttonWidth) / 2,
y: yPos + 10, y: yPos + 10,
@ -40,8 +40,8 @@ export function RenderTOTPContainer(position, issuer, client) {
align_h: align.CENTER_H, align_h: align.CENTER_H,
align_v: align.CENTER_V, align_v: align.CENTER_V,
text_style: text_style.NONE, text_style: text_style.NONE,
text: issuer + ': ' + client text: issuer + ": " + client,
}) });
} }
/** Render OTP Value on container /** Render OTP Value on container
@ -51,7 +51,7 @@ export function RenderTOTPContainer(position, issuer, client) {
* @returns widget with OTP * @returns widget with OTP
*/ */
export function RenderOTPValue(position, otpValue) { export function RenderOTPValue(position, otpValue) {
const yPos = getYPos(position) const yPos = getYPos(position);
return createWidget(widget.TEXT, { return createWidget(widget.TEXT, {
x: 0, x: 0,
y: yPos + 50, y: yPos + 50,
@ -62,8 +62,8 @@ export function RenderOTPValue(position, otpValue) {
align_h: align.CENTER_H, align_h: align.CENTER_H,
align_v: align.CENTER_V, align_v: align.CENTER_V,
text_style: text_style.NONE, text_style: text_style.NONE,
text: otpValue text: otpValue,
}) });
} }
/** Render expire bar /** Render expire bar
@ -74,9 +74,10 @@ export function RenderOTPValue(position, otpValue) {
* @returns widget with bar * @returns widget with bar
*/ */
export function RenderExpireBar(position, createdTime, fetchTime) { export function RenderExpireBar(position, createdTime, fetchTime) {
const yPos = getYPos(position) const yPos = getYPos(position);
const expireDif = Math.abs((((Date.now() - createdTime) / 1000) const expireDif = Math.abs(
/ fetchTime) - 1) (Date.now() - createdTime) / 1000 / fetchTime - 1
);
return createWidget(widget.ARC, { return createWidget(widget.ARC, {
x: buttonWidth - 50, x: buttonWidth - 50,
y: yPos + 52, y: yPos + 52,
@ -85,8 +86,8 @@ export function RenderExpireBar(position, createdTime, fetchTime) {
line_width: 5, line_width: 5,
color: expireDif > 0.25 ? 0x1ca9c9 : 0xfa0404, color: expireDif > 0.25 ? 0x1ca9c9 : 0xfa0404,
start_angle: -90, start_angle: -90,
end_angle: (expireDif * 360) - 90, end_angle: expireDif * 360 - 90,
text: expireDif text: expireDif,
}); });
} }
@ -100,17 +101,19 @@ export function RenderAddButton(pagePath) {
y: height / 2 - 20, y: height / 2 - 20,
w: 80, w: 80,
h: 80, h: 80,
text: '+', text: "+",
radius: 50, radius: 50,
text_size: 40, text_size: 40,
normal_color: 0x303030, normal_color: 0x303030,
press_color: 0x181c18, press_color: 0x181c18,
click_func: () => { click_func: () => {
push({ 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 { createWidget, widget, align } from "@zos/ui";
import { getDeviceInfo } from "@zos/device"; 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 { back } from "@zos/router";
import { BasePage } from "@zeppos/zml/base-page"; import { BasePage } from "@zeppos/zml/base-page";
Page( Page(
@ -9,13 +9,13 @@ Page(
onGesture({ onGesture({
callback(event) { callback(event) {
if (event === GESTURE_LEFT) { if (event === GESTURE_LEFT) {
back() back();
} }
} },
}) });
}, },
build() { build() {
const { width, height } = getDeviceInfo() const { width, height } = getDeviceInfo();
createWidget(widget.TEXT, { createWidget(widget.TEXT, {
x: 0, x: 0,
w: width, w: width,
@ -24,8 +24,8 @@ Page(
text_size: 30, text_size: 30,
align_h: align.CENTER_H, align_h: align.CENTER_H,
align_v: align.CENTER_V, 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",
});
},
}) })
} );
})
)

84
setting/index.js
View File

@ -1,4 +1,4 @@
import { getTOTPByLink } from './utils/queryParser.js' import { getTOTPByLink } from "./utils/queryParser.js";
let _props = null; let _props = null;
@ -6,19 +6,21 @@ AppSettingsPage({
build(props) { build(props) {
_props = props; _props = props;
const storage = props.settingsStorage.getItem("TOTPs") ?? [] const storage = JSON.parse(
const totpEntrys = GetTOTPList(storage) props.settingsStorage.getItem("TOTPs") ?? "[]"
);
const totpEntrys = GetTOTPList(storage);
const createButton = TextInput({ const createButton = TextInput({
placeholder: "otpauth://", placeholder: "otpauth://",
label: "Add new OTP Link", label: "Add new OTP Link",
onChange: (changes) => { onChange: (changes) => {
var link = getTOTPByLink(changes) var link = getTOTPByLink(changes);
if(link == null){ if (link == null) {
console.log("link is invalid") console.log("link is invalid");
return; return;
} }
storage.push(link) storage.push(link);
updateStorage(storage) updateStorage(storage);
}, },
labelStyle: { labelStyle: {
backgroundColor: "#14213D", backgroundColor: "#14213D",
@ -29,8 +31,8 @@ AppSettingsPage({
flexGrow: 1, flexGrow: 1,
fontSize: "20px", fontSize: "20px",
color: "#FFFFFF", color: "#FFFFFF",
borderRadius: "5px" borderRadius: "5px",
} },
}); });
var body = Section( var body = Section(
@ -62,14 +64,14 @@ AppSettingsPage({
) )
), ),
...totpEntrys, ...totpEntrys,
createButton createButton,
] ]
); );
return body; return body;
}, },
}); });
function GetTOTPList(storage){ function GetTOTPList(storage) {
let totpEntrys = []; let totpEntrys = [];
let counter = 0; let counter = 0;
storage.forEach((element) => { storage.forEach((element) => {
@ -78,12 +80,11 @@ function GetTOTPList(storage){
placeholder: "otpauth://", placeholder: "otpauth://",
label: "Change OTP link", label: "Change OTP link",
onChange: (changes) => { onChange: (changes) => {
try{ try {
storage[elementId] = getTOTPByLink(changes) storage[elementId] = getTOTPByLink(changes);
updateStorage(storage) updateStorage(storage);
} } catch (err) {
catch(err){ console.log(err);
console.log(err)
} }
}, },
labelStyle: { labelStyle: {
@ -96,7 +97,7 @@ function GetTOTPList(storage){
flexGrow: 1, flexGrow: 1,
fontSize: "20px", fontSize: "20px",
color: "#E5E5E5", color: "#E5E5E5",
borderRadius: "5px" borderRadius: "5px",
}, },
}); });
const textBig = Text( const textBig = Text(
@ -104,35 +105,35 @@ function GetTOTPList(storage){
align: "center", align: "center",
style: { style: {
color: "#ffffff", color: "#ffffff",
fontSize: "16px" fontSize: "16px",
}, },
paragraph: true, paragraph: true,
}, },
`${element.issuer}: ${element.client}` `${element.issuer}: ${element.client}`
); );
const delButton = Button( const delButton = Button({
{
onClick: () => { onClick: () => {
storage = storage.filter(x => storage.indexOf(x) != elementId) storage = storage.filter(
updateStorage(storage) (x) => storage.indexOf(x) != elementId
);
updateStorage(storage);
}, },
style: { style: {
backgroundColor: "#ba181b", backgroundColor: "#ba181b",
fontSize: "18px", fontSize: "18px",
color: "#ffffff", color: "#ffffff",
height: "fit-content", height: "fit-content",
margin: "10px" margin: "10px",
}, },
label: "DEL" label: "DEL",
} });
);
const text = Text( const text = Text(
{ {
style: { style: {
color: "#ffffff", color: "#ffffff",
fontSize: "14px" fontSize: "14px",
}, },
align: "center" align: "center",
}, },
`${element.hashType} | ${element.digits} digits | ${element.fetchTime} seconds | offset ${element.timeOffset} seconds` `${element.hashType} | ${element.digits} digits | ${element.fetchTime} seconds | offset ${element.timeOffset} seconds`
); );
@ -142,21 +143,30 @@ function GetTOTPList(storage){
textAlign: "center", textAlign: "center",
border: "2px solid white", border: "2px solid white",
borderRadius: "5px", borderRadius: "5px",
margin: "10px" margin: "10px",
}, },
}, },
[textBig, text, View({style: { [
textBig,
text,
View(
{
style: {
display: "grid", display: "grid",
gridTemplateColumns: "1fr 100px" gridTemplateColumns: "1fr 100px",
}}, [textInput, delButton])] },
},
[textInput, delButton]
),
]
); );
totpEntrys.push({ text: text, view: view }); totpEntrys.push({ text: text, view: view });
counter++; counter++;
}); });
return totpEntrys.map(x => x.view); return totpEntrys.map((x) => x.view);
} }
function updateStorage(storage){ function updateStorage(storage) {
_props.settingsStorage.setItem('TOTPs', storage) _props.settingsStorage.setItem("TOTPs", JSON.stringify(storage));
} }