fix: fixed digit parameter resolve

Reviewed-on: http://git.lisoveliy.su/Lisoveliy/TOTPFit/pulls/8

.prettierrc.yaml

@@ -0,0 +1 @@
+tabWidth: 4

README.md

@@ -1,4 +1,15 @@
-# TOTPFIT - Another 2FAuthenticator based on TOTP for Zepp Amazfit GTS 4
+# TOTPFIT 
+### Another 2FAuthenticator based on TOTP for Zepp Amazfit GTS 4 with Google Authenticator migration Support
 
-Features:
-- Supports otpauth links with parameters "issuer", "algorithm", "digits", "period"
+![alt text](docs/assets/image2.png)
+
+### Features:
+- Supports of otpauth links with parameters "issuer", "algorithm", "digits", "period"
+- Addition/Edition/Deletion of TOTPs from mobile app
+- Support of google migration links formated: ```otpauth-migration://offline?data=...```
+
+### Guides:
+
+[How to add 2FA TOTP records (keys) on app](/docs/guides/how-to-add-totps/README.md)
+
+#### This repo has mirror for issues on [GitHub](https://github.com/Lisoveliy/totpfit)

app-side/index.js

@@ -6,11 +6,12 @@ AppSideService(
       onInit(){
 
       },
-      onRequest(req, res){
-        if(req.method === 'totps'){
-          res(null, settings.settingsStorage.getItem('TOTPs'))
+      onRequest(request, response){
+        if(request.method === 'totps'){
+          response(null, settings.settingsStorage.getItem('TOTPs'))
         }
-      }
+      },
+      onSettingsChange(){ }
     }
   )
 )

app.js

@@ -1,14 +1,11 @@
-import { BaseApp } from "@zeppos/zml/base-app"
+import { BaseApp } from "@zeppos/zml/base-app";
 
 App(
-  BaseApp(
-    {
-      globalData: {
-        TOTPS: []
-      },
-      onCreate() {
-      },    
-      onDestroy() {
-      }
+    BaseApp({
+        globalData: {
+            TOTPS: [],
+        },
+        onCreate() {},
+        onDestroy() {},
     })
-)
+);

app.json

@@ -6,11 +6,11 @@
     "appType": "app",
     "version": {
       "code": 1,
-      "name": "1.0.0"
+      "name": "1.3"
     },
     "icon": "icon.png",
     "vender": "zepp",
-    "description": "TOTP Authenticator for Amazfit devices"
+    "description": "Another 2FAuthenticator based on TOTP for Zepp Amazfit GTS 4"
   },
   "permissions": [
     "data:os.device.info",
@@ -53,4 +53,4 @@
     }
   },
   "defaultLanguage": "en-US"
-}
+}

docs/guides/how-to-add-totps/README.md

@@ -0,0 +1,37 @@
+# How to add 2FA TOTP records (keys) on app
+
+### If you use default 2FA otpauth:// links
+
+To add 2FA TOTP records using 2FA TOTP QR-Codes, you must scan QR-Code of service providing 2FA and scan (decode) it to a URI. If you have screenshot of QR-Code -- scan it on any app providing scan from image, ex: Search screen on Google Assistant. For example, this QR-Code will represent next URI string:
+
+![QR Code with URI](image.png)
+
+Copy this URI string and paste it to app using button *"Add new TOTP record"*:
+
+![Add new TOTP record popup](image-2.png)
+
+Then press OK, record will appear on page
+
+![Added record](image-4.png)
+
+You can edit your otpauth:// records using button "Change TOTP link". Your previous record will be replaced with a new otpauth:// link entered on text field, and previous link will not be shown on field.
+
+### If you use google migrations (otpauth-migration:// links)
+
+To add 2FA TOTP recods using migration from Google Authenticator app, you must go to menu, select "Transfer accounts" -> "Export accounts" 
+
+Select codes then screenshot QR code and and scan (decode) it to a URI. Use any app providing scan from image, ex: "Search screen" function (Google Lens) on Google Assistant.
+
+For example, this QR-Code will represent next URI string:
+
+![Google lens scan from Google Authenticator](image-5.png)
+
+After scaning copy this URI string and paste it to app using button *"Add new TOTP record"*:
+
+![Add new TOTP record using otpauth-migration](image-6.png)
+
+Then press OK, all selected records on Google Authenticator will appear on page
+
+![Added records from otpauth-migration](image-7.png)
+
+You can edit your records using button "Change TOTP link". Your previous record will be replaced with a new otpauth:// link entered on text field, and previous link will not be shown on field.

lib/protobuf-decoder/hexUtils.js

@@ -0,0 +1,36 @@
+import { Buffer } from 'buffer'
+
+export function parseInput(input) {
+  const normalizedInput = input.replace(/\s/g, "");
+  const normalizedHexInput = normalizedInput.replace(/0x/g, "").toLowerCase();
+  if (isHex(normalizedHexInput)) {
+    return Buffer.from(normalizedHexInput, "hex");
+  } else {
+    return Buffer.from(normalizedInput, "base64");
+  }
+}
+
+export function isHex(string) {
+  let result = true;
+  for (const char of string) {
+    if (!((char >= "a" && char <= "f") || (char >= "0" && char <= "9"))) {
+      result = false;
+    }
+  }
+  return result;
+}
+
+export function bufferLeToBeHex(buffer) {
+  let output = "";
+  for (const v of buffer) {
+    const hex = v.toString(16);
+    if (hex.length === 1) {
+      output = "0" + hex + output;
+    } else {
+      output = hex + output;
+    }
+  }
+  return output;
+}
+
+export const bufferToPrettyHex = b => [...b].map(c => c.toString(16).padStart(2, '0')).join(' ');

lib/protobuf-decoder/protobufDecoder.js

@@ -0,0 +1,132 @@
+import { decodeVarint } from "./varintUtils";
+
+export class BufferReader {
+  constructor(buffer) {
+    this.buffer = buffer;
+    this.offset = 0;
+  }
+
+  readVarInt() {
+    const result = decodeVarint(this.buffer, this.offset);
+    this.offset += result.length;
+
+    return result.value;
+  }
+
+  readBuffer(length) {
+    this.checkByte(length);
+    const result = this.buffer.slice(this.offset, this.offset + length);
+    this.offset += length;
+
+    return result;
+  }
+
+  // gRPC has some additional header - remove it
+  trySkipGrpcHeader() {
+    const backupOffset = this.offset;
+
+    if (this.buffer[this.offset] === 0 && this.leftBytes() >= 5) {
+      this.offset++;
+      const length = this.buffer.readInt32BE(this.offset);
+      this.offset += 4;
+
+      if (length > this.leftBytes()) {
+        // Something is wrong, revert
+        this.offset = backupOffset;
+      }
+    }
+  }
+
+  leftBytes() {
+    return this.buffer.length - this.offset;
+  }
+
+  checkByte(length) {
+    const bytesAvailable = this.leftBytes();
+    if (length > bytesAvailable) {
+      throw new Error(
+        "Not enough bytes left. Requested: " +
+          length +
+          " left: " +
+          bytesAvailable
+      );
+    }
+  }
+
+  checkpoint() {
+    this.savedOffset = this.offset;
+  }
+
+  resetToCheckpoint() {
+    this.offset = this.savedOffset;
+  }
+}
+
+export const TYPES = {
+  VARINT: 0,
+  FIXED64: 1,
+  LENDELIM: 2,
+  FIXED32: 5
+};
+
+export function decodeProto(buffer) {
+  const reader = new BufferReader(buffer);
+  const parts = [];
+  reader.trySkipGrpcHeader();
+
+  try {
+    while (reader.leftBytes() > 0) {
+      reader.checkpoint();
+
+      const byteRange = [reader.offset];
+      const indexType = parseInt(reader.readVarInt().toString());
+      const type = indexType & 0b111;
+      const index = indexType >> 3;
+
+      let value;
+      if (type === TYPES.VARINT) {
+        value = reader.readVarInt().toString();
+      } else if (type === TYPES.LENDELIM) {
+        const length = parseInt(reader.readVarInt().toString());
+        value = reader.readBuffer(length);
+      } else if (type === TYPES.FIXED32) {
+        value = reader.readBuffer(4);
+      } else if (type === TYPES.FIXED64) {
+        value = reader.readBuffer(8);
+      } else {
+        throw new Error("Unknown type: " + type);
+      }
+      byteRange.push(reader.offset);
+
+      parts.push({
+        byteRange,
+        index,
+        type,
+        value
+      });
+    }
+  } catch (err) {
+    reader.resetToCheckpoint();
+    console.log(err);
+  }
+
+  return {
+    parts,
+    leftOver: reader.readBuffer(reader.leftBytes())
+  };
+}
+
+export function typeToString(type, subType) {
+  switch (type) {
+    case TYPES.VARINT:
+      return "varint";
+    case TYPES.LENDELIM:
+      return subType || "len_delim";
+    case TYPES.FIXED32:
+      return "fixed32";
+    case TYPES.FIXED64:
+      return "fixed64";
+    default:
+      return "unknown";
+  }
+}

lib/protobuf-decoder/varintUtils.js

@@ -0,0 +1,23 @@
+export function decodeVarint(buffer, offset) {
+	let res = 0;
+	let shift = 0;
+	let byte = 0;
+
+	do {
+		if (offset >= buffer.length) {
+			throw new RangeError("Index out of bound decoding varint");
+		}
+
+		byte = buffer[offset++];
+
+		const multiplier = 2 ** shift;
+		const thisByteValue = (byte & 0x7f) * multiplier;
+		shift += 7;
+		res = res + thisByteValue;
+	} while (byte >= 0x80);
+
+	return {
+		value: res,
+		length: shift / 7
+	};
+}

lib/totp-quickjs/OTPGenerator.js

@@ -16,7 +16,6 @@ export function getHOTP(counter, secret, digits = 6, hashType = 'SHA-1'){
     rawDataCounter.setUint32(4, counter)
     
     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

lib/totp-quickjs/base32decoder.js

@@ -23,4 +23,58 @@ function leftpad(str, len, pad) {
 			(str = new Array(len + 1 - str.length).join(pad) + str),
 		str
 	);
+}
+
+export function encode(bytes) {
+    const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ234567';
+    let bits = 0;
+    let value = 0;
+    let output = '';
+
+    for (let i = 0; i < bytes.length; i++) {
+        value = (value << 8) | bytes[i];
+        bits += 8;
+
+        while (bits >= 5) {
+            output += alphabet[(value >>> (bits - 5)) & 0x1F];
+            bits -= 5;
+        }
+    }
+
+    if (bits > 0) {
+        output += alphabet[(value << (5 - bits)) & 0x1F];
+    }
+
+    const paddingLength = (8 - (output.length % 8)) % 8;
+    output += '='.repeat(paddingLength);
+
+    return output;
+}
+
+export function base64decode(base64) {
+    const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
+    let result = [];
+    let i = 0, j = 0;
+    let b1, b2, b3, b4;
+
+    while (i < base64.length) {
+        b1 = chars.indexOf(base64.charAt(i++));
+        b2 = chars.indexOf(base64.charAt(i++));
+        b3 = chars.indexOf(base64.charAt(i++));
+        b4 = chars.indexOf(base64.charAt(i++));
+
+        if (b1 === -1 || b2 === -1) break;
+
+        result[j++] = (b1 << 2) | (b2 >> 4);
+
+        if (b3 !== -1) {
+            result[j++] = ((b2 & 15) << 4) | (b3 >> 2);
+        }
+
+        if (b4 !== -1) {
+            result[j++] = ((b3 & 3) << 6) | b4;
+        }
+    }
+
+    return result.slice(0, j);
 }

package.json

@@ -1,12 +1,9 @@
 {
   "name": "totpfit",
-  "version": "1.0.0",
-  "description": "TOTP Authenticator for Amazfit devices",
+  "version": "1.3",
+  "description": "Another 2FAuthenticator based on TOTP for Zepp Amazfit GTS 4",
   "main": "app.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "author": "",
+  "author": "Lisoveliy",
   "license": "MIT",
   "devDependencies": {
     "@zeppos/device-types": "^3.0.0"

page/index.js

@@ -1,47 +1,60 @@
-import { RenderAddButton } from './render/totpRenderer'
-import { initLoop } from './render/index/renderer'
-import { BasePage } from '@zeppos/zml/base-page'
-import { LocalStorage } from "@zos/storage"
+import { RenderAddButton } from "./render/totpRenderer";
+import { initLoop } from "./render/index/renderer";
+import { BasePage } from "@zeppos/zml/base-page";
+import { LocalStorage } from "@zos/storage";
+
+const app = getApp();
 
-const localStorage = new LocalStorage()
-const app = getApp()
 let waitForFetch = true;
-Page(
-	BasePage({
-		onInit() {
-			this.getTOTPData().then((x) => {
-				console.log(x)
-				localStorage.setItem('TOTPs', x ?? [])
-				app._options.globalData.TOTPS = x ?? []
-				this.initPage();
-			})
-			.catch(() => {
-			 	app._options.globalData.TOTPS = localStorage.getItem('TOTPs') ?? []
-				this.initPage()
-			 })
-		},
-		build() {
-			let fetch = setInterval(() => {
-				if(waitForFetch)
-					return;
 
-				clearInterval(fetch);
-				const buffer = app._options.globalData.TOTPS
-				if (buffer.length < 1){
-					RenderAddButton('page/tip')
-				}
-				else {
-					initLoop(buffer)
-				}
-			}, 100);
-		},
-		initPage() {
-			waitForFetch = false;
-		},
-		getTOTPData() {
-			return this.request({
-				method: 'totps'
-			})
-		}
-	})
-)
+Page(
+    BasePage({
+        onInit() {
+            this.getTOTPData()
+                .then((x) => {
+                    app._options.globalData.TOTPS = JSON.parse(x) ?? [];
+                    
+                    let localStorage = new LocalStorage();
+                    localStorage.setItem(
+                        "TOTPs",
+                        JSON.stringify(app._options.globalData.TOTPS)
+                    );
+                    this.initPage();
+                })
+                .catch((x) => {
+                    console.log(`Init failed: ${x}`);
+                    try{
+                        let localStorage = new LocalStorage();
+                        app._options.globalData.TOTPS = JSON.parse(
+                        localStorage.getItem("TOTPs", [])
+                        );
+                    }
+                    catch{
+                        app._options.globalData.TOTPS = [];
+                    }
+                    this.initPage();
+                });
+        },
+        build() {
+            let fetch = setInterval(() => {
+                if (waitForFetch) return;
+
+                clearInterval(fetch);
+                const buffer = app._options.globalData.TOTPS;
+                if (buffer.length < 1) {
+                    RenderAddButton("page/tip");
+                } else {
+                    initLoop(buffer);
+                }
+            }, 100);
+        },
+        initPage() {
+            waitForFetch = false;
+        },
+        getTOTPData() {
+            return this.request({
+                method: "totps",
+            });
+        },
+    })
+);

page/index.s.layout.js

@@ -1,6 +1,6 @@
 import { px } from "@zos/utils";
 
 export const TEXT_STYLE = {
-  x: px(0),
-  y: px(0),
-}
+    x: px(0),
+    y: px(0),
+};

page/render/index/renderer.js

@@ -1,46 +1,57 @@
 import { prop } from "@zos/ui";
 import { TOTP } from "../../../lib/totp-quickjs";
-import { RenderExpireBar, RenderOTPValue, RenderTOTPContainer } from '../totpRenderer'
+import {
+    RenderExpireBar,
+    RenderOTPValue,
+    RenderTOTPContainer,
+} from "../totpRenderer";
 
 /**
- * 
- * @param {Array<TOTP>} buffer 
+ *
+ * @param {Array<TOTP>} buffer
  */
 export function initLoop(buffer) {
-    renderContainers(buffer)
-    renderTOTPs(buffer)
+    renderContainers(buffer);
+    renderTOTPs(buffer);
 }
 
 function renderContainers(buffer) {
     for (let i = 0; i < buffer.length; i++) {
-        RenderTOTPContainer(i, buffer[i].issuer, buffer[i].client)
+        RenderTOTPContainer(i, buffer[i].issuer, buffer[i].client);
     }
 }
-const renderData = []
 
+const renderData = [];
 function renderTOTPs(buffer) {
     for (let i = 0; i < buffer.length; i++) {
-        let otpData = TOTP.copy(buffer[i]).getOTP()
-        console.log(otpData.otp)
+        let otpData = TOTP.copy(buffer[i]).getOTP();
         renderData[i] = {
             OTP: RenderOTPValue(i, otpData.otp),
-            expireBar: RenderExpireBar(i, otpData.createdTime, buffer[i].fetchTime)
-        }
+            expireBar: RenderExpireBar(
+                i,
+                otpData.createdTime,
+                buffer[i].fetchTime
+            ),
+        };
         setInterval(() => {
-            const expireDif = Math.abs((((Date.now() - otpData.createdTime) / 1000)
-                / buffer[i].fetchTime) - 1)
+            const expireDif = Math.abs(
+                (Date.now() - otpData.createdTime) /
+                    1000 /
+                    buffer[i].fetchTime -
+                    1
+            );
 
             renderData[i].expireBar.setProperty(prop.MORE, {
-                end_angle: (expireDif * 360) - 90,
+                end_angle: expireDif * 360 - 90,
                 color: expireDif > 0.25 ? 0x1ca9c9 : 0xfa0404,
-            })
-            
+            });
+
             if (otpData.expireTime < Date.now()) {
-                otpData = TOTP.copy(buffer[i]).getOTP()
+                otpData = TOTP.copy(buffer[i]).getOTP();
                 renderData[i].OTP.setProperty(prop.MORE, {
-                    text: otpData.otp
-                })
+                    text: otpData.otp,
+                });
             }
-        }, 50)
+        }, 50);
     }
-}
+}

page/render/totpRenderer.js

@@ -1,35 +1,36 @@
-import { getDeviceInfo } from '@zos/device'
-import { push } from '@zos/router'
-import { createWidget, widget, align, text_style } from '@zos/ui'
+import { getDeviceInfo } from "@zos/device";
+import { push } from "@zos/router";
+import { createWidget, widget, align, text_style } from "@zos/ui";
 
 //Renderer module for TOTPs page
 
-const { width, height } = getDeviceInfo()
-const buttonWidth = width - width / 20 //Width of container
-const buttonHeight = height / 4 //Height of container
-const containerColor = 0x303030 //Color of container
-const containerRadius = 20 //Corner radius of container
+const { width, height } = getDeviceInfo();
+const buttonWidth = width - width / 20; //Width of container
+const buttonHeight = height / 4; //Height of container
 
-const textColor = 0xa0a0a0 //Color of TOTP description text
-const textSize = 24 //Size of TOTP description text
-const statusBarPading = 65
+const containerColor = 0x303030; //Color of container
+const containerRadius = 20; //Corner radius of container
+
+const textColor = 0xa0a0a0; //Color of TOTP description text
+const textSize = 24; //Size of TOTP description text
+const statusBarPading = 65;
 
 /** Function for render box container for TOTP values
- * 
+ *
  * @param {number} position position offset of container
  * @param {string} issuer issuer of TOTP
  * @param {string} client client of TOTP
  */
 export function RenderTOTPContainer(position, issuer, client) {
-    const yPos = getYPos(position)
+    const yPos = getYPos(position);
     createWidget(widget.FILL_RECT, {
         x: width / 2 - buttonWidth / 2,
         y: yPos,
         w: buttonWidth,
         h: buttonHeight,
         color: containerColor,
-        radius: containerRadius
-    })
+        radius: containerRadius,
+    });
     createWidget(widget.TEXT, {
         x: 0 + (width - buttonWidth) / 2,
         y: yPos + 10,
@@ -40,18 +41,18 @@ export function RenderTOTPContainer(position, issuer, client) {
         align_h: align.CENTER_H,
         align_v: align.CENTER_V,
         text_style: text_style.NONE,
-        text: issuer + ': ' + client
-    })
+        text: issuer + ": " + client,
+    });
 }
 
 /** Render OTP Value on container
- * 
+ *
  * @param {number} position position offset of container
  * @param {string} otpValue value to display
  * @returns widget with OTP
  */
 export function RenderOTPValue(position, otpValue) {
-    const yPos = getYPos(position)
+    const yPos = getYPos(position);
     return createWidget(widget.TEXT, {
         x: 0,
         y: yPos + 50,
@@ -62,21 +63,22 @@ export function RenderOTPValue(position, otpValue) {
         align_h: align.CENTER_H,
         align_v: align.CENTER_V,
         text_style: text_style.NONE,
-        text: otpValue
-    })
+        text: otpValue,
+    });
 }
 
 /** Render expire bar
- * 
+ *
  * @param {} position position offset of container
  * @param {*} createdTime UNIX epoch time of creation
  * @param {*} fetchTime time in seconds to fetch value
  * @returns widget with bar
  */
 export function RenderExpireBar(position, createdTime, fetchTime) {
-    const yPos = getYPos(position)
-    const expireDif = Math.abs((((Date.now() - createdTime) / 1000)
-        / fetchTime) - 1)
+    const yPos = getYPos(position);
+    const expireDif = Math.abs(
+        (Date.now() - createdTime) / 1000 / fetchTime - 1
+    );
     return createWidget(widget.ARC, {
         x: buttonWidth - 50,
         y: yPos + 52,
@@ -85,13 +87,13 @@ export function RenderExpireBar(position, createdTime, fetchTime) {
         line_width: 5,
         color: expireDif > 0.25 ? 0x1ca9c9 : 0xfa0404,
         start_angle: -90,
-        end_angle: (expireDif * 360) - 90,
-        text: expireDif
+        end_angle: expireDif * 360 - 90,
+        text: expireDif,
     });
 }
 
 /** Function for render 'Add' button on center of screen
- * 
+ *
  * @param {string} pagePath destination to page onClick ex: 'page/index'
  */
 export function RenderAddButton(pagePath) {
@@ -100,17 +102,19 @@ export function RenderAddButton(pagePath) {
         y: height / 2 - 20,
         w: 80,
         h: 80,
-        text: '+',
+        text: "+",
         radius: 50,
         text_size: 40,
         normal_color: 0x303030,
         press_color: 0x181c18,
         click_func: () => {
             push({
-                url: pagePath
-            })
-        }
-    })
+                url: pagePath,
+            });
+        },
+    });
 }
 
-function getYPos(position) { return position * (buttonHeight + 10) + statusBarPading }
+function getYPos(position) {
+    return position * (buttonHeight + 10) + statusBarPading;
+}

page/tip.js

@@ -1,6 +1,6 @@
 import { createWidget, widget, align } from "@zos/ui";
 import { getDeviceInfo } from "@zos/device";
-import { onGesture, GESTURE_LEFT } from '@zos/interaction'
+import { onGesture, GESTURE_LEFT } from "@zos/interaction";
 import { back } from "@zos/router";
 import { BasePage } from "@zeppos/zml/base-page";
 Page(
@@ -9,13 +9,13 @@ Page(
             onGesture({
                 callback(event) {
                     if (event === GESTURE_LEFT) {
-                        back()
+                        back();
                     }
-                }
-            })
+                },
+            });
         },
         build() {
-            const { width, height } = getDeviceInfo()
+            const { width, height } = getDeviceInfo();
             createWidget(widget.TEXT, {
                 x: 0,
                 w: width,
@@ -24,8 +24,8 @@ Page(
                 text_size: 30,
                 align_h: align.CENTER_H,
                 align_v: align.CENTER_V,
-                text: 'To add TOTP record open\n settings on Zepp app'
-            })
-        }
+                text: "To add TOTP record open\n settings on Zepp app",
+            });
+        },
     })
-)
+);

setting/index.js

@@ -1,162 +1,220 @@
-import { getTOTPByLink } from './utils/queryParser.js'
+import { getTOTPByLink } from "./utils/queryParser.js";
 
 let _props = null;
 
+const colors = {
+    bg: "#101010",
+    linkBg: "#ffffffc0",
+    secondaryBg: "#282828",
+    text: "#fafafa",
+    alert: "#ad3c23",
+    notify: "#555555",
+    bigText: "#fafafa"
+};
+
 AppSettingsPage({
-  build(props) {
-    _props = props;
-
-    const storage = props.settingsStorage.getItem("TOTPs") ?? []
-    const totpEntrys = GetTOTPList(storage)
-    const createButton = TextInput({
-      placeholder: "otpauth://",
-      label: "Add new OTP Link",
-      onChange: (changes) => {
-        var link = getTOTPByLink(changes)
-        if(link == null){
-          console.log("link is invalid")
-          return;
-        }
-        storage.push(link)
-        updateStorage(storage)
-      },
-      labelStyle: {
-        backgroundColor: "#14213D",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        margin: "10px",
-        flexGrow: 1,
-        fontSize: "20px",
-        color: "#FFFFFF",
-        borderRadius: "5px"
-      }
-    });
-
-    var body = Section(
-      {
-        style: {
-          backgroundColor: "black",
-          minHeight: "100vh",
-        },
-      },
-      [
-        View(
-          {
-            style: {
-              textAlign: "center",
+    build(props) {
+        _props = props;
+        const storage = JSON.parse(
+            props.settingsStorage.getItem("TOTPs") ?? "[]"
+        );
+        const totpEntrys = GetTOTPList(storage);
+        const addTOTPsHint = storage.length < 1 ?
+            Text({
+                paragraph: true,
+                align: "center",
+                style: {
+                    paddingTop: "10px",
+                    marginBottom: "10px",
+                    color: colors.text,
+                    fontSize: 16,
+                    verticalAlign: "middle",
+                },
             },
-          },
-          Text(
+                "For add a 2FA TOTP record you must have otpauth:// link or otpauth-migration:// link from Google Authenticator Migration QR-Code"
+            ) : null;
+        const createButton = TextInput({
+            placeholder: "otpauth(-migration)://",
+            label: "Add new TOTP record",
+            onChange: (changes) => {
+                let link = getTOTPByLink(changes);
+                if (link == null) {
+                    console.log("link is invalid");
+                    return;
+                }
+
+                if (Array.isArray(link))
+                    storage.push(...link);
+                else storage.push(link);
+
+                updateStorage(storage);
+            },
+            labelStyle: {
+                backgroundColor: colors.notify,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                margin: "10px",
+                fontSize: "20px",
+                color: colors.text,
+                borderRadius: "5px",
+                position: storage.length < 1 ? "absolute" : null, //TODO: Сделать что-то с этим кошмаром
+                bottom: storage.length < 1 ? "0px" : null,
+                left: storage.length < 1 ? "0px" : null,
+                right: storage.length < 1 ? "0px" : null
+            },
+        });
+
+        var body = Section(
             {
-              align: "center",
-              paragraph: true,
-              style: {
-                marginBottom: "10px",
-                color: "#fff",
-                fontSize: 23,
-                verticalAlign: "middle",
-              },
+                style: {
+                    backgroundColor: colors.bg,
+                    minHeight: "100vh",
+                },
             },
-            "TOTPS:"
-          )
-        ),
-        ...totpEntrys,
-        createButton
-      ]
-    );
-    return body;
-  },
+            [
+                View(
+                    {
+                        style: {
+                            textAlign: "center",
+                        },
+                    },
+                    storage.length < 1 ? addTOTPsHint : Text(
+                        {
+                            align: "center",
+                            paragraph: true,
+                            style: {
+                                marginBottom: "10px",
+                                color: colors.bigText,
+                                fontSize: 23,
+                                fontWeight: "500",
+                                verticalAlign: "middle",
+                            },
+                        },
+                        "TOTP records:"
+                    )
+                ),
+                ...totpEntrys,
+                createButton,
+                View({
+                    style: {
+                        display: "flex",
+                        justifyContent: "center"
+                    }
+                },
+                    Link({
+                        source: "https://github.com/Lisoveliy/totpfit/blob/main/docs/guides/how-to-add-totps/README.md"
+                    },
+                        "Instruction | Report issue (GitHub)")
+                ),
+            ]
+        );
+        return body;
+    },
 });
 
-function GetTOTPList(storage){
-  let totpEntrys = [];
-  let counter = 0;
-  storage.forEach((element) => {
-    const elementId = counter;
-    const textInput = TextInput({
-      placeholder: "otpauth://",
-      label: "Change OTP link",
-      onChange: (changes) => {
-        try{
-        storage[elementId] = getTOTPByLink(changes)
-        updateStorage(storage)
-        }
-        catch(err){
-          console.log(err)
-        }
-      },
-      labelStyle: {
-        backgroundColor: "#14213D",
-        textAlign: "center",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        margin: "10px",
-        flexGrow: 1,
-        fontSize: "20px",
-        color: "#E5E5E5",
-        borderRadius: "5px"
-      },
-    });
-    const textBig = Text(
-      {
-        align: "center",
-        style: {
-          color: "#ffffff",
-          fontSize: "16px"
-        },
-        paragraph: true,
-      },
-      `${element.issuer}: ${element.client}`
-    );
-    const delButton = Button(
-      {
-        onClick: () => {
-          storage = storage.filter(x => storage.indexOf(x) != elementId)
-          updateStorage(storage)
-        },
-        style: {
-          backgroundColor: "#ba181b",
-          fontSize: "18px",
-          color: "#ffffff",
-          height: "fit-content",
-          margin: "10px"
-        },
-        label: "DEL"
-      }
-    );
-    const text = Text(
-      {
-        style: {
-          color: "#ffffff",
-          fontSize: "14px"
-        },
-        align: "center"
-      },
-      `${element.hashType} | ${element.digits} digits | ${element.fetchTime} seconds | offset ${element.timeOffset} seconds`
-    );
-    const view = View(
-      {
-        style: {
-          textAlign: "center",
-          border: "2px solid white",
-          borderRadius: "5px",
-          margin: "10px"
-        },
-      },
-      [textBig, text, View({style: {
-        display: "grid",
-        gridTemplateColumns: "1fr 100px"
-      }}, [textInput, delButton])]
-    );
-    totpEntrys.push({ text: text, view: view });
-    counter++;
-  });
+function GetTOTPList(storage) {
+    let totpEntrys = [];
+    let counter = 0;
+    storage.forEach((element) => {
+        const elementId = counter;
+        const textInput = TextInput({
+            placeholder: "otpauth(-migration)://",
+            label: "Change TOTP link",
+            onChange: (changes) => {
+                try {
+                    let link = getTOTPByLink(changes);
+                    if (Array.isArray(link))
+                        return;
 
-  return totpEntrys.map(x => x.view);
+                    storage[elementId] = link;
+                    updateStorage(storage);
+                } catch (err) {
+                    console.log(err);
+                }
+            },
+            labelStyle: {
+                backgroundColor: colors.notify,
+                textAlign: "center",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                margin: "10px",
+                flexGrow: 1,
+                fontSize: "20px",
+                color: colors.text,
+                borderRadius: "5px",
+            },
+        });
+        const textBig = Text(
+            {
+                align: "center",
+                style: {
+                    color: colors.text,
+                    fontSize: "18px",
+                    fontWeight: "500"
+                },
+                paragraph: true,
+            },
+            `${element.issuer}: ${element.client}`
+        );
+        const delButton = Button({
+            onClick: () => {
+                storage = storage.filter(
+                    (x) => storage.indexOf(x) != elementId
+                );
+                updateStorage(storage);
+            },
+            style: {
+                backgroundColor: colors.alert,
+                fontSize: "18px",
+                color: colors.text,
+                height: "fit-content",
+                margin: "10px",
+            },
+            label: "Delete",
+        });
+        const text = Text(
+            {
+                style: {
+                    color: colors.text,
+                    fontSize: "14px",
+                },
+                align: "center",
+            },
+            `${element.hashType} | ${element.digits} digits | ${element.fetchTime} seconds | ${element.timeOffset} sec offset`
+        );
+        const view = View(
+            {
+                style: {
+                    textAlign: "center",
+                    backgroundColor: colors.secondaryBg,
+                    //border: "2px solid white",
+                    borderRadius: "5px",
+                    margin: "10px",
+                },
+            },
+            [
+                textBig,
+                text,
+                View(
+                    {
+                        style: {
+                            display: "grid",
+                            gridTemplateColumns: "1fr 100px",
+                        },
+                    },
+                    [textInput, delButton]
+                ),
+            ]
+        );
+        totpEntrys.push({ text: text, view: view });
+        counter++;
+    });
+
+    return totpEntrys.map((x) => x.view);
 }
 
-function updateStorage(storage){
-  _props.settingsStorage.setItem('TOTPs', storage)
-}
+function updateStorage(storage) {
+    _props.settingsStorage.setItem("TOTPs", JSON.stringify(storage));
+}

setting/utils/queryParser.js

@@ -1,45 +1,114 @@
+import { decodeProto, TYPES } from "../../lib/protobuf-decoder/protobufDecoder";
 import { TOTP } from "../../lib/totp-quickjs";
+import { base64decode, encode } from "../../lib/totp-quickjs/base32decoder";
 
-const otpScheme = "otpauth:/";
+const otpauthScheme = "otpauth:/";
+const googleMigrationScheme = "otpauth-migration:/";
 
 export function getTOTPByLink(link) {
-  try {
-    let args = link.split("/", otpScheme.length);
-    let type = args[2]; //Returns 'hotp' or 'totp'
-    let issuer = args[3].split(":")[0]?.split("?")[0]; //Returns issuer
-    let client =
-      args[3].split(":")[1]?.split("?")[0] ??
-      args[3].split(":")[0]?.split("?")[0]; //Returns client
-    let secret = args[3].split("secret=")[1]?.split("&")[0]; //Returns secret
-    let period = args[3].split("period=")[1]?.split("&")[0]; //Returns period
-    let digits = args[3].split("digits=")[1]?.split("&")[0]; //Returns digits
-    let algorithm = args[3].split("algorithm=")[1]?.split("&")[0]; //Returns algorithm
+	if (link.includes(otpauthScheme))
+		return getByOtpauthScheme(link)
+	if (link.includes(googleMigrationScheme))
+		return getByGoogleMigrationScheme(link)
 
-    if (type.toLowerCase() != "totp")
-      throw new Error("Type is not valid, requires 'TOTP'");
-
-    if (secret === undefined) throw new Error("Secret not defined");
-
-    issuer = issuer.replace("%20", " ");
-    client = client.replace("%20", " ");
-
-    return new TOTP(
-      secret,
-      issuer,
-      client,
-      digits,
-      period,
-      0,
-      getHashType(algorithm)
-    );
-  } catch (err) {
-    return null;
-  }
+	return null;
 }
 
 function getHashType(algorithm) {
-  if (algorithm == "SHA1") return "SHA-1";
-  if (algorithm == "SHA256") return "SHA-256";
-  if (algorithm == "SHA512") return "SHA-512";
-  else return "SHA-1";
+	if (algorithm == "SHA1") return "SHA-1";
+	if (algorithm == "SHA256") return "SHA-256";
+	if (algorithm == "SHA512") return "SHA-512";
+	else return "SHA-1";
 }
+
+function getByOtpauthScheme(link) {
+	try {
+		let args = link.split("/", otpauthScheme.length);
+		let type = args[2]; //Returns 'hotp' or 'totp'
+		let issuer = args[3].split(":")[0]?.split("?")[0]; //Returns issuer
+		let client =
+			args[3].split(":")[1]?.split("?")[0] ??
+			args[3].split(":")[0]?.split("?")[0]; //Returns client
+		let secret = args[3].split("secret=")[1]?.split("&")[0]; //Returns secret
+		let period = args[3].split("period=")[1]?.split("&")[0]; //Returns period
+		let digits = args[3].split("digit=")[1]?.split("&")[0]; //Returns digits
+		let algorithm = args[3].split("algorithm=")[1]?.split("&")[0]; //Returns algorithm
+		let offset = args[3].split("offset=")[1]?.split("&")[0] ?? 0; //Returns offset
+
+		if (type.toLowerCase() != "totp")
+			throw new Error("Type is not valid, requires 'TOTP'");
+
+		if (secret === undefined) throw new Error("Secret not defined");
+
+		if (issuer == client) {
+			issuer = args[3].split("issuer=")[1]?.split("&")[0];
+		}
+
+		issuer = decodeURIComponent(issuer);
+		client = decodeURIComponent(client);
+
+		return new TOTP(
+			secret,
+			issuer,
+			client,
+			Number(digits),
+			Number(period),
+			Number(offset),
+			getHashType(algorithm)
+		);
+	} catch (err) {
+		console.log(err)
+		return null;
+	}
+}
+
+function getByGoogleMigrationScheme(link) {
+
+	let data = link.split("data=")[1]; //Returns base64 encoded data
+	data = decodeURIComponent(data);
+	let decode = base64decode(data);
+	let proto = decodeProto(decode);
+
+	let protoTotps = [];
+
+	proto.parts.forEach(part => {
+		if (part.type == TYPES.LENDELIM) {
+			protoTotps.push(decodeProto(part.value));
+		}
+	});
+
+	let totps = [];
+	protoTotps.forEach(x => {
+		let type = x.parts.filter(x => x.index == 6)[0]; //find type of OTP
+		if (type.value !== '2') {
+			console.log("ERR: it's a not TOTP record")
+			return;
+		}
+		let secret = x.parts.filter(x => x.index == 1)[0].value;
+		secret = encode(secret);
+
+		let name = bytesToString(x.parts.filter(x => x.index == 2)[0].value);
+		let issuer = bytesToString(x.parts.filter(x => x.index == 3)[0].value);
+
+		totps.push(new TOTP(
+			secret,
+			issuer,
+			name,
+			6,
+			30,
+			0,
+			"SHA-1"
+		));
+	});
+
+	return totps;
+
+}
+
+function bytesToString(bytes) {
+	let str = '';
+	for (let i = 0; i < bytes.length; i++) {
+		str += String.fromCharCode(bytes[i]);
+	}
+	return str;
+}