feat(staging): adding support of app-side service and settings app (part 1)

app-side/index.js

@@ -1,13 +1,13 @@
-import { gettext } from 'i18n'
-
-AppSideService({
-  onInit() {
-    console.log(gettext('example'))
-  },
-
-  onRun() {
-  },
-
-  onDestroy() {
-  }
-})
+AppSideService(
+    {
+      onInit(){
+        settings.settingsStorage.addListener('change', async ({ key, newValue, oldValue }) => {
+             console.log(key)
+             console.log(newValue)
+             const totps = settings.settingsStorage.getItem('TOTPs')
+             const dataBuffer = Buffer.from(totps)
+             messaging.peerSocket.send(dataBuffer.buffer)
+        })
+      }
+    }
+  )

app.json

@@ -18,9 +18,9 @@
   ],
   "runtime": {
     "apiVersion": {
-      "compatible": "3.0.0",
-      "target": "3.0.0",
-      "minVersion": "3.0"
+      "compatible": "3.5.0",
+      "target": "3.5.0",
+      "minVersion": "3.5"
     }
   },
   "targets": {

package.json

@@ -12,6 +12,7 @@
     "@zeppos/device-types": "^3.0.0"
   },
   "dependencies": {
+    "@zeppos/zml": "^0.0.27",
     "jssha": "^3.3.1"
   }
 }

page/index.js

@@ -1,13 +1,8 @@
-import { getDeviceInfo } from '@zos/device'
-import { TOTP } from '../lib/totp-quickjs'
-import { setStatusBarVisible, createWidget, widget, align, prop, text_style, event, deleteWidget } from '@zos/ui'
-import { RenderAddButton, RenderExpireBar, RenderOTPValue, RenderTOTPContainer } from './render/totpRenderer'
+import { setStatusBarVisible } from '@zos/ui'
+import { RenderAddButton } from './render/totpRenderer'
 import { initLoop } from './render/index/renderer'
 
 const app = getApp()
-const { width, height } = getDeviceInfo()
-
-const renderWidgets = []
 
 Page({
 	onInit() {
@@ -25,44 +20,4 @@ Page({
 			initLoop(buffer)
 		}
 	}
-})
-
-function renderContainers(buffer) {
-	for (let i = 0; i < buffer.length; i++) {
-		RenderTOTPContainer(i, buffer[i].issuer, buffer[i].client)
-	}
-}
-function renderTOTPs(buffer) {
-	for (let i = 0; i < buffer.length; i++) {
-		const otpData = TOTP.copy(buffer[i]).getOTP()
-		renderWidgets.push(
-			RenderOTPValue(i, otpData.otp))
-		renderWidgets.push(
-			RenderExpireBar(i, otpData.createdTime, buffer[i].fetchTime)
-		)
-	}
-}
-
-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)
-}
+})

setting/index.js

@@ -1,7 +1,37 @@
-import { gettext } from 'i18n'
-
 AppSettingsPage({
-  build() {
-    console.log(gettext('example'))
+  build(props) {
+    const storage = props.settingsStorage.getItem('TOTPs')
+    //props.settingsStorage.setItem('TOTPS')
+    console.log(storage)
+    const totpButtons = []
+    storage.forEach(element => {
+      totpButtons.push(
+        View({
+          style:
+          {
+            textAlign: "center",
+            marginBottom: "10px"
+          }
+        },
+          [Button({
+            style: { width: "95%" },
+            label: `${element.issuer}: ${element.client}`,
+            onClick: (el) => {
+              props.settingsStorage.setItem("TOTPs", storage)
+            }
+          }), Text({
+            align: 'center',
+          }, `${element.hashType} | ${element.digits} digits | ${element.fetchTime} seconds | offset ${element.timeOffset} seconds`)]))
+    });
+    var sec = Section({}, [
+      View({
+        style: { textAlign: "center" }
+      },
+        Text({
+          align: 'center',
+        }, 'TOTPS:'))
+      ,
+      ...totpButtons])
+      return sec;
   }
 })