feat: added support for time indicator

This commit is contained in:
Савелий Савенок 2024-11-13 18:12:34 +03:00
parent f16d7374f4
commit f63b70c365
6 changed files with 204 additions and 112 deletions

20
app.js
View File

@ -1,8 +1,22 @@
import { TOTP } from "./lib/totp-quickjs"
import { LocalStorage } from "@zos/storage"
const localStorage = new LocalStorage()
App({ App({
globalData: {}, globalData: {
onCreate(options) { TOTPS: localStorage.getItem('TOTPs') || []
console.log('app on create invoke')
}, },
onCreate(options) {
localStorage.setItem('TOTPs', [
new TOTP('JBSWY3DPEHPK3PXP', 'GitHub', 'Lisoveliy'),
new TOTP('JBSWY3DPEHPK3PXP', 'GitHub', 'Lisoveliy'),
new TOTP('JBSWY3DPEHPK3PXP', 'GitHub', 'Lisoveliy'),
new TOTP('JBSWY3DPEHPK3PXP', 'GitHub', 'Lisoveliy'),
new TOTP('JBSWY3DPEHPK3PXP', 'GitHub', 'Lisoveliy'),
new TOTP('JBSWY3DPEHPK3PXPAF', 'my.contabo.com', 'Contabo-Customer-Control-Panel-11755808'),
new TOTP('JBSWY3DPEHPK3PXP', 'GitHub', 'Lisoveliy'),
new TOTP('JBSWY3DPEHPK3PXPAF', 'my.contabo.com', 'Contabo-Customer-Control-Panel-11755808')])
},
onDestroy(options) { onDestroy(options) {
console.log('app on destroy invoke') console.log('app on destroy invoke')

View File

@ -13,7 +13,8 @@
"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": {

View File

@ -13,10 +13,10 @@ export function getHOTP(counter, secret, digits = 6, hashType = 'SHA-1'){
//Stage 1: Prepare data //Stage 1: Prepare data
const rawDataCounter = new DataView(new ArrayBuffer(8)) const rawDataCounter = new DataView(new ArrayBuffer(8))
rawDataCounter.setUint32(0, counter >> 32)
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

View File

@ -1,61 +1,77 @@
import { getHOTP } from "./OTPGenerator.js" import { getHOTP } from "./OTPGenerator.js"
"use bigint"
/** /**
* TOTP instance * TOTP instance
*/ */
export class TOTP{ export class TOTP {
/** /**
* *
* @param {string} secret base32 encoded string * @param {string} secret base32 encoded string
* @param {string} issuer issuer of TOTP * @param {string} issuer issuer of TOTP
* @param {string} client client of TOTP
* @param {number} [digits=6] number of digits in OTP token * @param {number} [digits=6] number of digits in OTP token
* @param {number} [fetchTime=30] period of token in seconds * @param {number} [fetchTime=30] period of token in seconds
* @param {number} [timeOffset=0] time offset for token in seconds * @param {number} [timeOffset=0] time offset for token in seconds
* @param {string} [hashType='SHA-1'] type of hash (more in jsSHA documentation) * @param {string} [hashType='SHA-1'] type of hash (more in jsSHA documentation)
*/ */
constructor(secret, constructor(secret,
issuer, issuer,
digits = 6, client,
fetchTime = 30, digits = 6,
timeOffset = 0, fetchTime = 30,
hashType = 'SHA-1') timeOffset = 0,
{ hashType = 'SHA-1') {
this.secret = secret this.secret = secret
this.issuer = issuer this.issuer = issuer
this.digits = digits this.client = client
this.fetchTime = fetchTime this.digits = digits
this.timeOffset = timeOffset this.fetchTime = fetchTime
this.hashType = hashType this.timeOffset = timeOffset
} this.hashType = hashType
}
static copy(totp){
return new TOTP(
secret = totp.secret,
issuer = totp.TOTPissuer,
client = totp.client,
digits = totp.digits,
fetchTime = totp.fetchTime,
timeOffset = totp.timeOffset,
hashType = totp.hashType
)
}
/** /**
* *
* @param {number} time time for counter (default unix time epoch) * @param {number} time time for counter (default unix time epoch)
* @returns OTP instance * @returns OTP instance
*/ */
getOTP(time = Date.now()){ getOTP(time = Date.now()) {
const unixTime = (time / 1000 + this.timeOffset) / this.fetchTime const unixTime = (time / 1000 + this.timeOffset) / this.fetchTime
const otp = getHOTP(Math.floor(unixTime), this.secret, this.digits) const otp = getHOTP(Math.floor(unixTime), this.secret, this.digits)
const expireTime = time + const expireTime = time +
(this.fetchTime - (this.fetchTime -
(time / 1000 + this.timeOffset) % (time / 1000 + this.timeOffset) %
this.fetchTime) * 1000 this.fetchTime) * 1000
const createdTime = time - (((time / 1000 + this.timeOffset) %
return new OTP(otp, expireTime) this.fetchTime) * 1000)
return new OTP(otp, createdTime, expireTime)
} }
} }
/** /**
* Class for TOTP.getOTP result * Class for TOTP.getOTP result
*/ */
export class OTP{ export class OTP {
/** /**
* *
* @param {string} otp OTP string * @param {string} otp OTP string
* @param {number} expireTime time in seconds to reset OTP * @param {number} createdTime time in unix epoch created OTP
* @param {number} expireTime time in unix epoch to expire OTP
*/ */
constructor(otp, expireTime) constructor(otp, createdTime, expireTime) {
{
this.otp = otp this.otp = otp
this.createdTime = createdTime
this.expireTime = expireTime this.expireTime = expireTime
} }
} }

View File

@ -1,76 +1,148 @@
import { getDeviceInfo } from '@zos/device' import { getDeviceInfo } from '@zos/device'
import { TOTP } from '../lib/totp-quickjs'
import { push } from '@zos/router' import { push } from '@zos/router'
import { setStatusBarVisible, createWidget, widget, align, prop, text_style, event } from '@zos/ui' import { setStatusBarVisible, createWidget, widget, align, prop, text_style, event, deleteWidget } from '@zos/ui'
import { TOTPBuffer } from './totplogic/totps.js' const app = getApp()
const renderWidgets = []
Page({ Page({
build() { onInit() {
setStatusBarVisible(false); const buffer = app._options.globalData.TOTPS
buf = new TOTPBuffer(); console.log(buffer.length)
if (buffer.length < 1)
setStatusBarVisible(true)
else
setStatusBarVisible(false)
},
build() {
const buffer = app._options.globalData.TOTPS
if (buffer.length < 1) {
const { width, height } = getDeviceInfo() createWidget(widget.BUTTON, {
buffer = buf.getTOTPs(); x: width / 2 - 40,
if(buffer.length < 1){ y: height / 2 - 20,
createWidget(widget.BUTTON, { w: 80,
x: width / 2 - 40, h: 80,
y: height / 2 - 20, text: '+',
w: 80, radius: 50,
h: 80, text_size: 40,
text: '+', normal_color: 0x303030,
radius: 50, press_color: 0x181c18,
text_size: 40, click_func: () => {
normal_color: 0x303030, push({
press_color: 0x181c18, url: 'page/tip'
click_func: () => { })
push({ }
url: 'page/tip' })
})
}
})
}else{
const buttonWidth = width - width / 20;
const buttonHeight = height / 4;
const margin = 10;
let totpHeight = margin;
for(let i = 0; i < buffer.length; i++){
console.log(buffer[i])
createWidget(widget.FILL_RECT, {
x: width / 2 - buttonWidth / 2,
y: totpHeight,
w: buttonWidth,
h: buttonHeight,
color: 0x303030,
radius: 20
})
createWidget(widget.TEXT, {
x: 0,
y: totpHeight + 10,
w: width,
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].expireTime - Date.now()) / 1000
})
createWidget(widget.TEXT, {
x: 0,
y: totpHeight + 60,
w: width,
h: 36,
color: 0xffffff,
text_size: 36,
align_h: align.CENTER_H,
align_v: align.CENTER_V,
text_style: text_style.NONE,
text: buffer[i].otp
})
totpHeight += margin + buttonHeight; } else {
} renderContainers(buffer)
} renderTOTPs(buffer)
} setInterval(() => {
renderWidgets.forEach(x => deleteWidget(x))
renderTOTPs(buffer)
}, 500)
}
}
}) })
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;
}
}
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)
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
})
)
totpHeight += margin + buttonHeight;
}
}
function RenderExpireWg(otpData, totpHeight, buttonWidth, buffer, i) {
const interval = setInterval(() => {
const expireDif = Math.abs((((Date.now() - otpData.createdTime) / 1000)
/ buffer[i].fetchTime) - 1)
if (Date.now() > otpData.expireTime) {
clearInterval(interval)
return
}
deleteWidget(expireTimeWg)
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
})
}, 100)
}

View File

@ -1,11 +0,0 @@
import { TOTP } from "../../lib/totp-quickjs";
export class TOTPBuffer{
constructor(){
}
getTOTPs(){
return [new TOTP('JBSWY3DPEHPK3PXP').getOTP()]
}
}