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

18
app.js
View File

@ -1,7 +1,21 @@
import { TOTP } from "./lib/totp-quickjs"
import { LocalStorage } from "@zos/storage"
const localStorage = new LocalStorage()
App({
globalData: {},
globalData: {
TOTPS: localStorage.getItem('TOTPs') || []
},
onCreate(options) {
console.log('app on create invoke')
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) {

View File

@ -13,7 +13,8 @@
"description": "TOTP Authenticator for Amazfit devices"
},
"permissions": [
"data:os.device.info"
"data:os.device.info",
"device:os.local_storage"
],
"runtime": {
"apiVersion": {

View File

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

View File

@ -1,13 +1,13 @@
import { getHOTP } from "./OTPGenerator.js"
"use bigint"
/**
* TOTP instance
*/
export class TOTP{
export class TOTP {
/**
*
* @param {string} secret base32 encoded string
* @param {string} issuer issuer of TOTP
* @param {string} client client of TOTP
* @param {number} [digits=6] number of digits in OTP token
* @param {number} [fetchTime=30] period of token in seconds
* @param {number} [timeOffset=0] time offset for token in seconds
@ -15,47 +15,63 @@ export class TOTP{
*/
constructor(secret,
issuer,
client,
digits = 6,
fetchTime = 30,
timeOffset = 0,
hashType = 'SHA-1')
{
hashType = 'SHA-1') {
this.secret = secret
this.issuer = issuer
this.client = client
this.digits = digits
this.fetchTime = fetchTime
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)
* @returns OTP instance
*/
getOTP(time = Date.now()){
getOTP(time = Date.now()) {
const unixTime = (time / 1000 + this.timeOffset) / this.fetchTime
const otp = getHOTP(Math.floor(unixTime), this.secret, this.digits)
const expireTime = time +
(this.fetchTime -
(time / 1000 + this.timeOffset) %
this.fetchTime) * 1000
const createdTime = time - (((time / 1000 + this.timeOffset) %
this.fetchTime) * 1000)
return new OTP(otp, expireTime)
return new OTP(otp, createdTime, expireTime)
}
}
/**
* Class for TOTP.getOTP result
*/
export class OTP{
export class OTP {
/**
*
* @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.createdTime = createdTime
this.expireTime = expireTime
}
}

View File

@ -1,17 +1,24 @@
import { getDeviceInfo } from '@zos/device'
import { TOTP } from '../lib/totp-quickjs'
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({
onInit() {
const buffer = app._options.globalData.TOTPS
console.log(buffer.length)
if (buffer.length < 1)
setStatusBarVisible(true)
else
setStatusBarVisible(false)
},
build() {
setStatusBarVisible(false);
buf = new TOTPBuffer();
const buffer = app._options.globalData.TOTPS
if (buffer.length < 1) {
const { width, height } = getDeviceInfo()
buffer = buf.getTOTPs();
if(buffer.length < 1){
createWidget(widget.BUTTON, {
x: width / 2 - 40,
y: height / 2 - 20,
@ -28,14 +35,27 @@ Page({
})
}
})
}else{
} 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++){
console.log(buffer[i])
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,
@ -45,32 +65,84 @@ Page({
radius: 20
})
createWidget(widget.TEXT, {
x: 0,
x: 0 + (width - buttonWidth) / 2,
y: totpHeight + 10,
w: width,
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].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
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()]
}
}