feat: added support for time indicator
This commit is contained in:
parent
f16d7374f4
commit
f63b70c365
20
app.js
20
app.js
@ -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')
|
||||||
|
3
app.json
3
app.json
@ -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": {
|
||||||
|
@ -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
|
||||||
|
@ -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
|
||||||
}
|
}
|
||||||
}
|
}
|
208
page/index.js
208
page/index.js
@ -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)
|
||||||
|
}
|
||||||
|
@ -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