feat: added support for time indicator
This commit is contained in:
parent
f16d7374f4
commit
f63b70c365
18
app.js
18
app.js
@ -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) {
|
||||
|
3
app.json
3
app.json
@ -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": {
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
}
|
||||
}
|
124
page/index.js
124
page/index.js
@ -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)
|
||||
}
|
||||
|
@ -1,11 +0,0 @@
|
||||
import { TOTP } from "../../lib/totp-quickjs";
|
||||
|
||||
export class TOTPBuffer{
|
||||
constructor(){
|
||||
|
||||
}
|
||||
|
||||
getTOTPs(){
|
||||
return [new TOTP('JBSWY3DPEHPK3PXP').getOTP()]
|
||||
}
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user