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

19
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

81
page/index.js
View File

@ -1,47 +1,42 @@
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((x) => {
.catch(() => { app._options.globalData.TOTPS = [];
app._options.globalData.TOTPS = localStorage.getItem('TOTPs') ?? [] this.initPage();
this.initPage() });
}) },
}, build() {
build() { let fetch = setInterval(() => {
let fetch = setInterval(() => { if (waitForFetch) return;
if(waitForFetch)
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); },
}, initPage() {
initPage() { waitForFetch = false;
waitForFetch = false; },
}, getTOTPData() {
getTOTPData() { return this.request({
return this.request({ method: "totps",
method: 'totps' });
}) },
} })
}) );
)

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

@ -1,6 +1,6 @@
import { px } from "@zos/utils"; 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",
}) });
} },
}) })
) );

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; let _props = null;
AppSettingsPage({ 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 createButton = TextInput({ );
placeholder: "otpauth://", const totpEntrys = GetTOTPList(storage);
label: "Add new OTP Link", const createButton = TextInput({
onChange: (changes) => { placeholder: "otpauth://",
var link = getTOTPByLink(changes) label: "Add new OTP Link",
if(link == null){ onChange: (changes) => {
console.log("link is invalid") var link = getTOTPByLink(changes);
return; if (link == null) {
} console.log("link is invalid");
storage.push(link) return;
updateStorage(storage) }
}, storage.push(link);
labelStyle: { updateStorage(storage);
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",
}, },
}, labelStyle: {
Text( backgroundColor: "#14213D",
display: "flex",
alignItems: "center",
justifyContent: "center",
margin: "10px",
flexGrow: 1,
fontSize: "20px",
color: "#FFFFFF",
borderRadius: "5px",
},
});
var body = Section(
{ {
align: "center", style: {
paragraph: true, backgroundColor: "black",
style: { minHeight: "100vh",
marginBottom: "10px", },
color: "#fff",
fontSize: 23,
verticalAlign: "middle",
},
}, },
"TOTPS:" [
) View(
), {
...totpEntrys, style: {
createButton textAlign: "center",
] },
); },
return body; Text(
}, {
align: "center",
paragraph: true,
style: {
marginBottom: "10px",
color: "#fff",
fontSize: 23,
verticalAlign: "middle",
},
},
"TOTPS:"
)
),
...totpEntrys,
createButton,
]
);
return body;
},
}); });
function GetTOTPList(storage){ function GetTOTPList(storage) {
let totpEntrys = []; let totpEntrys = [];
let counter = 0; let counter = 0;
storage.forEach((element) => { storage.forEach((element) => {
const elementId = counter; const elementId = counter;
const textInput = TextInput({ const textInput = TextInput({
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: { backgroundColor: "#14213D",
backgroundColor: "#14213D", textAlign: "center",
textAlign: "center", display: "flex",
display: "flex", alignItems: "center",
alignItems: "center", justifyContent: "center",
justifyContent: "center", margin: "10px",
margin: "10px", flexGrow: 1,
flexGrow: 1, fontSize: "20px",
fontSize: "20px", color: "#E5E5E5",
color: "#E5E5E5", borderRadius: "5px",
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){ function updateStorage(storage) {
_props.settingsStorage.setItem('TOTPs', 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:/"; const otpScheme = "otpauth:/";
export function getTOTPByLink(link) { export function getTOTPByLink(link) {
try { try {
let args = link.split("/", otpScheme.length); let args = link.split("/", otpScheme.length);
let type = args[2]; //Returns 'hotp' or 'totp' let type = args[2]; //Returns 'hotp' or 'totp'
let issuer = args[3].split(":")[0]?.split("?")[0]; //Returns issuer let issuer = args[3].split(":")[0]?.split("?")[0]; //Returns issuer
let client = let client =
args[3].split(":")[1]?.split("?")[0] ?? args[3].split(":")[1]?.split("?")[0] ??
args[3].split(":")[0]?.split("?")[0]; //Returns client args[3].split(":")[0]?.split("?")[0]; //Returns client
let secret = args[3].split("secret=")[1]?.split("&")[0]; //Returns secret let secret = args[3].split("secret=")[1]?.split("&")[0]; //Returns secret
let period = args[3].split("period=")[1]?.split("&")[0]; //Returns period let period = args[3].split("period=")[1]?.split("&")[0]; //Returns period
let digits = args[3].split("digits=")[1]?.split("&")[0]; //Returns digits let digits = args[3].split("digits=")[1]?.split("&")[0]; //Returns digits
let algorithm = args[3].split("algorithm=")[1]?.split("&")[0]; //Returns algorithm let algorithm = args[3].split("algorithm=")[1]?.split("&")[0]; //Returns algorithm
if (type.toLowerCase() != "totp") if (type.toLowerCase() != "totp")
throw new Error("Type is not valid, requires '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", " "); issuer = issuer.replace("%20", " ");
client = client.replace("%20", " "); client = client.replace("%20", " ");
return new TOTP( return new TOTP(
secret, secret,
issuer, issuer,
client, client,
digits, digits,
period, period,
0, 0,
getHashType(algorithm) getHashType(algorithm)
); );
} catch (err) { } catch (err) {
return null; return null;
} }
} }
function getHashType(algorithm) { function getHashType(algorithm) {
if (algorithm == "SHA1") return "SHA-1"; if (algorithm == "SHA1") return "SHA-1";
if (algorithm == "SHA256") return "SHA-256"; if (algorithm == "SHA256") return "SHA-256";
if (algorithm == "SHA512") return "SHA-512"; if (algorithm == "SHA512") return "SHA-512";
else return "SHA-1"; else return "SHA-1";
} }