README.md

@@ -1,22 +1,15 @@
 # TOTPFIT 
+### Another 2FAuthenticator based on TOTP for Zepp Amazfit GTS 4 with Google Authenticator migration Support
 
-### Another 2FAuthenticator based on TOTP for Zepp OS with Google Authenticator and Proton Authenticator support
+![alt text](docs/assets/image2.png)
-
-![alt text](docs/assets/image2.png)![alt text](docs/assets/image.jpg)
 
 ### Features:
-
+- Supports of ```otpauth://``` links with parameters "client", "issuer", "algorithm", "digits", "period", "offset"
-- Support of `otpauth://` links with parameters "client", "issuer", "algorithm", "digits", "period", "offset"
+- Addition/Edition/Deletion of TOTPs from mobile app
-- Support of Google Authenticator migration links formated: `otpauth-migration://offline?data=...`
+- Support of Google Authenticator migration links formated: ```otpauth-migration://offline?data=...``` (At this stage with only 6 digits and only 30 seconds period)
-- Support of **Proton Authenticator** export with parameters "client", "issuer", "algorithm", "digits", "period", "offset" **(BETA)**
-- Addition/Sort/Edition/Deletion of TOTPs from mobile app
 
 ### Guides:
 
 [How to add 2FA TOTP records (keys) on app](/docs/guides/how-to-add-totps/README.md)
 
-#### This repo has mirror for public issues on [GitHub](https://github.com/Lisoveliy/totpfit)
+#### This repo has mirror for issues on [GitHub](https://github.com/Lisoveliy/totpfit)
-
-#### To contribute on this repo you must use my [Gitea](https://git.lisoveliy.su/Lisoveliy/totpfit)
-
-Don't be shy to contact me for access!

app-side/index.js

@@ -1,13 +1,17 @@
-import { BaseSideService } from "@zeppos/zml/base-side";
+import { BaseSideService } from "@zeppos/zml/base-side"
 
 AppSideService(
-    BaseSideService({
+  BaseSideService(
-        onInit() {},
+    {
+      onInit(){
+
+      },
       onRequest(request, response){
-            if (request.method === "totps") {
+        if(request.method === 'totps'){
-                response(null, settings.settingsStorage.getItem("TOTPs"));
+          response(null, settings.settingsStorage.getItem('TOTPs'))
         }
       },
-        onSettingsChange() {},
+      onSettingsChange(){ }
-    }),
+    }
-);
+  )
+)

app.js

@@ -7,5 +7,5 @@ App(
         },
         onCreate() {},
         onDestroy() {},
-    }),
+    })
 );

app.json

@@ -6,13 +6,16 @@
     "appType": "app",
     "version": {
       "code": 1,
-            "name": "1.4.0"
+      "name": "1.3.0"
     },
     "icon": "icon.png",
     "vender": "zepp",
-        "description": "Another 2FAuthenticator based on TOTP for Zepp OS"
+    "description": "Another 2FAuthenticator based on TOTP for Zepp Amazfit GTS 4"
   },
-    "permissions": ["data:os.device.info", "device:os.local_storage"],
+  "permissions": [
+    "data:os.device.info",
+    "device:os.local_storage"
+  ],
   "runtime": {
     "apiVersion": {
       "compatible": "3.0.0",
@@ -24,7 +27,10 @@
     "default": {
       "module": {
         "page": {
-                    "pages": ["page/index", "page/tip"]
+          "pages": [
+            "page/index",
+            "page/tip"
+          ]
         },
         "app-side": {
           "path": "app-side/index"
@@ -37,11 +43,6 @@
         {
           "st": "s",
           "dw": 390
-                },
-
-                {
-                    "st": "r",
-                    "dw": 390
         }
       ]
     }

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

@@ -6,7 +6,7 @@ To add 2FA TOTP records using 2FA TOTP QR-Codes, you must scan QR-Code of servic
 
 ![QR Code with URI](image.png)
 
-Copy this URI string and paste it to app using button _"Add new TOTP record"_:
+Copy this URI string and paste it to app using button *"Add new TOTP record"*:
 
 ![Add new TOTP record popup](image-2.png)
 
@@ -14,41 +14,24 @@ 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 records using migration from Google Authenticator app, you must go to menu, select "Transfer accounts" -> "Export accounts"
+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 scan (decode) it to a URI. Use any app providing scan from image, ex: "Search screen" function (Google Lens) on Google Assistant.
+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"_:
+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 from Google Authenticator will appear on page
+Then press OK, all selected records on Google Authenticator will appear on page
 
 ![Added records from otpauth-migration](image-7.png)
 
-### If you use Proton Authenticator
+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.
-
-To add 2FA TOTP records from Proton Authenticator you must go to settings and press "Export":
-![alt text](photo_2025-08-08_17-10-27.jpg)
-
-After this save file and open it on text editor:
-
-![alt text](photo_2025-08-08_17-10-35.jpg)
-
-![alt text](photo_2025-08-08_17-10-41.jpg)
-
-Copy all stuff from file at clipboard and import in application:
-
-![alt text](photo_2025-08-08_17-10-38.jpg)
-
-![alt text](<Снимок экрана_20250808_170854.png>)
-
-Then press OK, records will appear on page:
-
-![alt text](<Снимок экрана_20250808_170912.png>)

lib/protobuf-decoder/hexUtils.js

@@ -1,4 +1,4 @@
-import { Buffer } from "buffer";
+import { Buffer } from 'buffer'
 
 export function parseInput(input) {
   const normalizedInput = input.replace(/\s/g, "");
@@ -33,5 +33,4 @@ export function bufferLeToBeHex(buffer) {
   return output;
 }
 
-export const bufferToPrettyHex = (b) =>
+export const bufferToPrettyHex = b => [...b].map(c => c.toString(16).padStart(2, '0')).join(' ');
-    [...b].map((c) => c.toString(16).padStart(2, "0")).join(" ");

lib/protobuf-decoder/protobufDecoder.js

@@ -48,7 +48,7 @@ export class BufferReader {
         "Not enough bytes left. Requested: " +
           length +
           " left: " +
-                    bytesAvailable,
+          bytesAvailable
       );
     }
   }
@@ -66,7 +66,7 @@ export const TYPES = {
   VARINT: 0,
   FIXED64: 1,
   LENDELIM: 2,
-    FIXED32: 5,
+  FIXED32: 5
 };
 
 export function decodeProto(buffer) {
@@ -102,7 +102,7 @@ export function decodeProto(buffer) {
         byteRange,
         index,
         type,
-                value,
+        value
       });
     }
   } catch (err) {
@@ -112,7 +112,7 @@ export function decodeProto(buffer) {
 
   return {
     parts,
-        leftOver: reader.readBuffer(reader.leftBytes()),
+    leftOver: reader.readBuffer(reader.leftBytes())
   };
 }
 

lib/protobuf-decoder/varintUtils.js

@@ -18,6 +18,6 @@ export function decodeVarint(buffer, offset) {
 
 	return {
 		value: res,
-        length: shift / 7,
+		length: shift / 7
 	};
 }

lib/totp-quickjs/OTPGenerator.js

@@ -1,6 +1,6 @@
 import { decode } from "./base32decoder.js";
 import jsSHA from "jssha";
-("use bigint");
+"use bigint"
 /**
  * get HOTP based on counter
  * @param {BigInt} counter BigInt counter of HOTP
@@ -9,30 +9,30 @@ import jsSHA from "jssha";
  * @param {string} [hashType='SHA-1'] type of hash (more in jsSHA documentation)
  * @returns HOTP string
  */
-export function getHOTP(counter, secret, digits = 6, hashType = "SHA-1") {
+export function getHOTP(counter, secret, digits = 6, hashType = 'SHA-1'){
+
     //Stage 1: Prepare data
-    const rawDataCounter = new DataView(new ArrayBuffer(8));
+    const rawDataCounter = new DataView(new ArrayBuffer(8))
-    rawDataCounter.setUint32(4, counter);
+    rawDataCounter.setUint32(4, counter)
-    const bCounter = new Uint8Array(rawDataCounter.buffer);
+    
-    const bSecret = new Uint8Array(
+    const bCounter = new Uint8Array(rawDataCounter.buffer)
-        decode(secret)
+    const bSecret = new Uint8Array(decode(secret).match(/.{1,2}/g).map(chunk => parseInt(chunk, 16))); //confirmed
-            .match(/.{1,2}/g)
+    
-            .map((chunk) => parseInt(chunk, 16)),
-    ); //confirmed
     //Stage 2: Hash data
-    const jssha = new jsSHA(hashType, "UINT8ARRAY");
+    const jssha = new jsSHA(hashType, 'UINT8ARRAY')
-    jssha.setHMACKey(bSecret, "UINT8ARRAY");
+    jssha.setHMACKey(bSecret, 'UINT8ARRAY')
-    jssha.update(bCounter);
+    jssha.update(bCounter)
-    const hmacResult = jssha.getHMAC("UINT8ARRAY"); //confirmed
+    const hmacResult = jssha.getHMAC('UINT8ARRAY') //confirmed
+    
     //Stage 3: Dynamic truncate
     const offsetB = hmacResult[19] & 0xf;
-    const P = hmacResult.slice(offsetB, offsetB + 4);
+    const P = hmacResult.slice(offsetB, offsetB + 4)
     P[0] = P[0] & 0x7f;
+    
     //Stage 4: Format string
-    let res = (
+    let res = (new DataView(P.buffer).getInt32(0) % Math.pow(10, digits)).toString()
-        new DataView(P.buffer).getInt32(0) % Math.pow(10, digits)
+    while(res.length < digits)
-    ).toString();
+        res = '0' + res;
-    while (res.length < digits) res = "0" + res;
     return res;
 }
 
@@ -46,14 +46,8 @@ export function getHOTP(counter, secret, digits = 6, hashType = "SHA-1") {
  * @param {string} [hashType='SHA-1'] type of hash (more in jsSHA documentation)
  * @returns TOTP string
  */
-export function getTOTP(
+export function getTOTP(secret, digits = 6, time = Date.now(), fetchTime = 30, timeOffset = 0, hashType = 'SHA-1')
-    secret,
+{
-    digits = 6,
+    const unixTime = Math.round((time / 1000 + timeOffset) / fetchTime)
-    time = Date.now(),
+    return getHOTP(BigInt(unixTime), secret, digits)
-    fetchTime = 30,
-    timeOffset = 0,
-    hashType = "SHA-1",
-) {
-    const unixTime = Math.round((time / 1000n + timeOffset) / fetchTime);
-    return getHOTP(BigInt(unixTime), secret, digits, hashType);
 }

lib/totp-quickjs/base32decoder.js

@@ -26,37 +26,35 @@ function leftpad(str, len, pad) {
 }
 
 export function encode(bytes) {
-    const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ234567";
+    const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ234567';
     let bits = 0;
     let value = 0;
-    let output = "";
+    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];
+            output += alphabet[(value >>> (bits - 5)) & 0x1F];
             bits -= 5;
         }
     }
 
     if (bits > 0) {
-        output += alphabet[(value << (5 - bits)) & 0x1f];
+        output += alphabet[(value << (5 - bits)) & 0x1F];
     }
 
     const paddingLength = (8 - (output.length % 8)) % 8;
-    output += "=".repeat(paddingLength);
+    output += '='.repeat(paddingLength);
 
     return output;
 }
 
 export function base64decode(base64) {
-    const chars =
+    const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
-        "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
     let result = [];
-    let i = 0,
+    let i = 0, j = 0;
-        j = 0;
     let b1, b2, b3, b4;
 
     while (i < base64.length) {

lib/totp-quickjs/index.js

@@ -1,4 +1,4 @@
-import { getHOTP } from "./OTPGenerator.js";
+import { getHOTP } from "./OTPGenerator.js"
 /**
  * TOTP instance
  */
@@ -13,33 +13,31 @@ export class TOTP {
      * @param {number} [timeOffset=0] time offset for token in seconds 
      * @param {string} [hashType='SHA-1'] type of hash (more in jsSHA documentation)
      */
-    constructor(
+    constructor(secret,
-        secret,
         issuer,
         client,
         digits = 6,
         fetchTime = 30,
         timeOffset = 0,
-        hashType = "SHA-1",
+        hashType = 'SHA-1') {
-    ) {
+        this.secret = secret
-        this.secret = secret;
+        this.issuer = issuer
-        this.issuer = issuer;
+        this.client = client
-        this.client = client;
+        this.digits = digits
-        this.digits = digits;
+        this.fetchTime = fetchTime
-        this.fetchTime = fetchTime;
+        this.timeOffset = timeOffset
-        this.timeOffset = timeOffset;
+        this.hashType = hashType
-        this.hashType = hashType;
     }
     static copy(totp){
         return new TOTP(
-            (secret = totp.secret),
+        secret = totp.secret,
-            (issuer = totp.TOTPissuer),
+        issuer = totp.TOTPissuer,
-            (client = totp.client),
+        client = totp.client,
-            (digits = totp.digits),
+        digits = totp.digits,
-            (fetchTime = totp.fetchTime),
+        fetchTime = totp.fetchTime,
-            (timeOffset = totp.timeOffset),
+        timeOffset = totp.timeOffset,
-            (hashType = totp.hashType),
+        hashType = totp.hashType
-        );
+        )
     }
     /**
      * 
@@ -47,22 +45,16 @@ export class TOTP {
      * @returns OTP instance
      */
     getOTP(time = Date.now()) {
-        const unixTime = (time / 1000 + this.timeOffset) / this.fetchTime;
+        const unixTime = (time / 1000 + this.timeOffset) / this.fetchTime
-        const otp = getHOTP(
+        const otp = getHOTP(Math.floor(unixTime), this.secret, this.digits)
-            Math.floor(unixTime),
+        const expireTime = time +
-            this.secret,
-            this.digits,
-            this.hashType,
-        );
-        const expireTime =
-            time +
             (this.fetchTime -
-                ((time / 1000 + this.timeOffset) % this.fetchTime)) *
+                (time / 1000 + this.timeOffset) %
-                1000;
+                this.fetchTime) * 1000
-        const createdTime =
+        const createdTime = time - (((time / 1000 + this.timeOffset) % 
-            time - ((time / 1000 + this.timeOffset) % this.fetchTime) * 1000;
+        this.fetchTime) * 1000)
         
-        return new OTP(otp, createdTime, expireTime);
+        return new OTP(otp, createdTime, expireTime)
     }
 }
 
@@ -77,8 +69,8 @@ export class OTP {
      * @param {number} expireTime time in unix epoch to expire OTP 
      */
     constructor(otp, createdTime, expireTime) {
-        this.otp = otp;
+        this.otp = otp
-        this.createdTime = createdTime;
+        this.createdTime = createdTime
-        this.expireTime = expireTime;
+        this.expireTime = expireTime
     }
 }

package.json

@@ -1,13 +1,12 @@
 {
   "name": "totpfit",
-    "version": "1.4.0",
+  "version": "1.3.0",
-    "description": "Another 2FAuthenticator based on TOTP for Zepp OS with Google Authenticator and Proton Authenticator support",
+  "description": "Another 2FAuthenticator based on TOTP for Zepp Amazfit GTS 4",
   "main": "app.js",
   "author": "Lisoveliy",
   "license": "MIT",
   "devDependencies": {
-        "@zeppos/device-types": "^3.0.0",
+    "@zeppos/device-types": "^3.0.0"
-        "prettier": "3.6.2"
   },
   "dependencies": {
     "@zeppos/zml": "^0.0.27",

page/index.js

@@ -2,18 +2,14 @@ import { RenderAddButton } from "./render/totpRenderer";
 import { initLoop } from "./render/index/renderer";
 import { BasePage } from "@zeppos/zml/base-page";
 import { LocalStorage } from "@zos/storage";
-import { setPageBrightTime } from "@zos/display";
 
 const app = getApp();
 
-const brightTimeMs = 300000;
-
 let waitForFetch = true;
 
 Page(
     BasePage({
         onInit() {
-            setPageBrightTime({ brightTime: brightTimeMs });
             this.getTOTPData()
                 .then((x) => {
                     app._options.globalData.TOTPS = JSON.parse(x) ?? [];
@@ -21,7 +17,7 @@ Page(
                     let localStorage = new LocalStorage();
                     localStorage.setItem(
                         "TOTPs",
-                        JSON.stringify(app._options.globalData.TOTPS),
+                        JSON.stringify(app._options.globalData.TOTPS)
                     );
                     this.initPage();
                 })
@@ -30,9 +26,10 @@ Page(
                     try{
                         let localStorage = new LocalStorage();
                         app._options.globalData.TOTPS = JSON.parse(
-                            localStorage.getItem("TOTPs", []),
+                        localStorage.getItem("TOTPs", [])
                         );
-                    } catch {
+                    }
+                    catch{
                         app._options.globalData.TOTPS = [];
                     }
                     this.initPage();
@@ -59,5 +56,5 @@ Page(
                 method: "totps",
             });
         },
-    }),
+    })
 );

page/render/index/renderer.js

@@ -22,16 +22,15 @@ function renderContainers(buffer) {
 }
 
 const renderData = [];
-
 function renderTOTPs(buffer) {
     for (let i = 0; i < buffer.length; i++) {
         let otpData = TOTP.copy(buffer[i]).getOTP();
         renderData[i] = {
-            OTP: RenderOTPValue(i, formatOTP(otpData.otp)),
+            OTP: RenderOTPValue(i, otpData.otp),
             expireBar: RenderExpireBar(
                 i,
                 otpData.createdTime,
-                buffer[i].fetchTime,
+                buffer[i].fetchTime
             ),
         };
         setInterval(() => {
@@ -39,7 +38,7 @@ function renderTOTPs(buffer) {
                 (Date.now() - otpData.createdTime) /
                     1000 /
                     buffer[i].fetchTime -
-                    1,
+                    1
             );
 
             renderData[i].expireBar.setProperty(prop.MORE, {
@@ -50,15 +49,9 @@ function renderTOTPs(buffer) {
             if (otpData.expireTime < Date.now()) {
                 otpData = TOTP.copy(buffer[i]).getOTP();
                 renderData[i].OTP.setProperty(prop.MORE, {
-                    text: formatOTP(otpData.otp),
+                    text: otpData.otp,
                 });
             }
         }, 50);
     }
 }
-
-function formatOTP(otp) {
-    if (otp.length === 6) return `${otp.substring(0, 3)} ${otp.substring(3)}`;
-
-    return otp;
-}

page/render/totpRenderer.js

@@ -77,7 +77,7 @@ export function RenderOTPValue(position, otpValue) {
 export function RenderExpireBar(position, createdTime, fetchTime) {
     const yPos = getYPos(position);
     const expireDif = Math.abs(
-        (Date.now() - createdTime) / 1000 / fetchTime - 1,
+        (Date.now() - createdTime) / 1000 / fetchTime - 1
     );
     return createWidget(widget.ARC, {
         x: buttonWidth - 50,

page/tip.js

@@ -27,5 +27,5 @@ Page(
                 text: "To add TOTP record open\n settings on Zepp app",
             });
         },
-    }),
+    })
 );

setting/consts.js

@@ -1,50 +0,0 @@
-export const colors = {
-    bg: "#101010",
-    linkBg: "#ffffffc0",
-    secondaryBg: "#282828",
-    text: "#fafafa",
-    alert: "#ad3c23",
-    notify: "#555555",
-    bigText: "#fafafa",
-};
-
-export const content = {
-    addTotpsHint:
-        "For add a 2FA TOTP record you must have otpauth:// link otpauth-migration://" +
-        "link from Google Authenticator Migration QR-Code or Proton authenticator Export JSON string." +
-        "If you have a questions - check instruction below!",
-    totpRecordsHint: "TOTP records:",
-    createButton: {
-        placeHolder: "otpauth(-migration)://",
-        label: "Add new TOTP record",
-    },
-    instructionLink: {
-        label: "Instruction | Report issue (GitHub)",
-        source: "https://github.com/Lisoveliy/totpfit/blob/main/docs/guides/how-to-add-totps/README.md",
-    },
-    changeButton: {
-        label: "Change TOTP link",
-        placeHolder: "otpauth(-migration)://",
-    },
-    renameButtons: {
-        rename: "Rename",
-        renameIssuer: "Rename Issuer",
-        renameClient: "Rename Client",
-    },
-    saveButton: {
-        label: "Save",
-    },
-    deleteButton: {
-        label: "Delete",
-    },
-    totpLabelText: {
-        eval(issuer, client) {
-            return `${issuer}: ${client}`;
-        },
-    },
-    totpDescText: {
-        eval(hashType, digits, fetchTime, timeOffset) {
-            return `${hashType} | ${digits} digits | ${fetchTime} seconds | ${timeOffset} sec offset`;
-        },
-    },
-};

setting/index.js

@@ -1,82 +1,26 @@
 import { getTOTPByLink } from "./utils/queryParser.js";
-import { createTOTPCard } from "./ui/card.js";
-import { colors, content } from "./consts.js";
 
 let _props = null;
-let editingIndex = -1;
-let tempIssuer = "";
-let tempClient = "";
-let errorMessage = "";
 
-function updateStorage(storage) {
+const colors = {
-    _props.settingsStorage.setItem("TOTPs", JSON.stringify(storage));
+    bg: "#101010",
-}
+    linkBg: "#ffffffc0",
-
+    secondaryBg: "#282828",
-function GetTOTPList(storage) {
+    text: "#fafafa",
-    return storage.map((element, index) => {
+    alert: "#ad3c23",
-        return createTOTPCard({
+    notify: "#555555",
-            element,
+    bigText: "#fafafa"
-            index,
+};
-            storage,
-            isEditing: editingIndex === index,
-            tempIssuer,
-            tempClient,
-            onIssuerChange: (val) => {
-                tempIssuer = val;
-            },
-            onClientChange: (val) => {
-                tempClient = val;
-            },
-            onRename: () => {
-                editingIndex = index;
-                tempIssuer = element.issuer;
-                tempClient = element.client;
-                _props.settingsStorage.setItem("requestUpdate", Math.random());
-            },
-            onSave: () => {
-                storage[index].issuer = tempIssuer;
-                storage[index].client = tempClient;
-                editingIndex = -1;
-                updateStorage(storage);
-            },
-            onDelete: () => {
-                storage.splice(index, 1);
-                updateStorage(storage);
-            },
-            onMoveUp: () => {
-                if (index > 0) {
-                    [storage[index], storage[index - 1]] = [
-                        storage[index - 1],
-                        storage[index],
-                    ];
-                    updateStorage(storage);
-                }
-            },
-            onMoveDown: () => {
-                if (index < storage.length - 1) {
-                    [storage[index], storage[index + 1]] = [
-                        storage[index + 1],
-                        storage[index],
-                    ];
-                    updateStorage(storage);
-                }
-            },
-            isEditInProgress: editingIndex !== -1,
-        });
-    });
-}
 
 AppSettingsPage({
     build(props) {
         _props = props;
         const storage = JSON.parse(
-            props.settingsStorage.getItem("TOTPs") ?? "[]",
+            props.settingsStorage.getItem("TOTPs") ?? "[]"
         );
         const totpEntrys = GetTOTPList(storage);
-        const addTOTPsHint =
+        const addTOTPsHint = storage.length < 1 ?
-            storage.length < 1
+            Text({
-                ? Text(
-                      {
                 paragraph: true,
                 align: "center",
                 style: {
@@ -87,92 +31,45 @@ AppSettingsPage({
                     verticalAlign: "middle",
                 },
             },
-                      content.addTotpsHint,
+                "For add a 2FA TOTP record you must have otpauth:// link or otpauth-migration:// link from Google Authenticator Migration QR-Code"
-                  )
+            ) : null;
-                : null;
-
         const createButton = TextInput({
-            placeholder: content.createButton.placeHolder,
+            placeholder: "otpauth(-migration)://",
-            label: content.createButton.label,
+            label: "Add new TOTP record",
             onChange: (changes) => {
-                try {
-                    errorMessage = "";
                 let link = getTOTPByLink(changes);
+                if (link == null) {
+                    console.log("link is invalid");
+                    return;
+                }
 
-                    if (Array.isArray(link)) {
+                if (Array.isArray(link))
                     storage.push(...link);
-                    } else {
+                else storage.push(link);
-                        storage.push(link);
+
-                    }
                 updateStorage(storage);
-                } catch (e) {
-                    errorMessage = e.message;
-                    updateStorage(storage);
-                }
             },
             labelStyle: {
                 backgroundColor: colors.notify,
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",
-                marginBottom: "10px",
+                margin: "10px",
-                marginLeft: "10px",
-                marginRight: "10px",
                 fontSize: "20px",
                 color: colors.text,
                 borderRadius: "5px",
-                height: "45px",
+                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
             },
         });
 
-        const errorText = errorMessage
+        var body = Section(
-            ? Text(
-                  {
-                      style: {
-                          color: colors.alert,
-                          textAlign: "center",
-                      },
-                  },
-                  errorMessage,
-              )
-            : null;
-
-        const bottomContainer = View(
             {
                 style: {
                     backgroundColor: colors.bg,
-                },
+                    minHeight: "100vh",
-            },
-            [
-                View(
-                    {
-                        style: {
-                            display: "flex",
-                            justifyContent: "center",
-                            marginTop: "10px",
-                            marginBottom: "10px",
-                        },
-                    },
-                    Link(
-                        {
-                            source: content.instructionLink.source,
-                        },
-                        content.instructionLink.label,
-                    ),
-                ),
-                errorText,
-                createButton,
-            ].filter(Boolean),
-        );
-
-        const pageContainer = View(
-            {
-                style: {
-                    backgroundColor: colors.bg,
-                    height: "100vh",
-                    display: "flex",
-                    flexDirection: "column",
-                    justifyContent: "space-between",
                 },
             },
             [
@@ -182,15 +79,11 @@ AppSettingsPage({
                             textAlign: "center",
                         },
                     },
-                    [
+                    storage.length < 1 ? addTOTPsHint : Text(
-                        storage.length < 1
-                            ? addTOTPsHint
-                            : Text(
                         {
                             align: "center",
                             paragraph: true,
                             style: {
-                                          marginTop: "10px",
                                 marginBottom: "10px",
                                 color: colors.bigText,
                                 fontSize: 23,
@@ -198,27 +91,130 @@ AppSettingsPage({
                                 verticalAlign: "middle",
                             },
                         },
-                                  content.totpRecordsHint,
+                        "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(-migration)://",
+            label: "Change TOTP link",
+            onChange: (changes) => {
+                try {
+                    let link = getTOTPByLink(changes);
+                    if (Array.isArray(link))
+                        return;
+
+                    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: {
-                            height: "100%",
+                            display: "grid",
-                            overflowX: "hidden",
+                            gridTemplateColumns: "1fr 100px",
-                            overflowY: "auto",
-                            backgroundColor: colors.bg,
                         },
                     },
-                    [...totpEntrys],
+                    [textInput, delButton]
                 ),
-
+            ]
-                bottomContainer,
-            ],
         );
-
+        totpEntrys.push({ text: text, view: view });
-        return pageContainer;
+        counter++;
-    },
     });
+
+    return totpEntrys.map((x) => x.view);
+}
+
+function updateStorage(storage) {
+    _props.settingsStorage.setItem("TOTPs", JSON.stringify(storage));
+}

setting/ui/card.js

@@ -1,187 +0,0 @@
-import { colors, content } from "../consts";
-
-export function createTOTPCard({
-    element,
-    index,
-    storage,
-    isEditing,
-    tempIssuer,
-    tempClient,
-    onRename,
-    onSave,
-    onDelete,
-    onMoveUp,
-    onMoveDown,
-    onIssuerChange,
-    onClientChange,
-    isEditInProgress,
-}) {
-    const infoView = View(
-        {
-            style: {
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "flex-start",
-            },
-        },
-        isEditing
-            ? [
-                  TextInput({
-                      label: content.renameButtons.renameIssuer,
-                      value: tempIssuer,
-                      onChange: onIssuerChange,
-                      labelStyle: {
-                          backgroundColor: colors.notify,
-                          display: "flex",
-                          alignItems: "center",
-                          justifyContent: "center",
-                          margin: "10px",
-                          fontSize: "20px",
-                          color: colors.text,
-                          borderRadius: "5px",
-                          height: "40px",
-                          width: "200px",
-                      },
-                      subStyle: {
-                          display: "none",
-                      },
-                  }),
-                  TextInput({
-                      label: content.renameButtons.renameClient,
-                      value: tempClient,
-                      onChange: onClientChange,
-                      labelStyle: {
-                          backgroundColor: colors.notify,
-                          display: "flex",
-                          alignItems: "center",
-                          justifyContent: "center",
-                          margin: "10px",
-                          fontSize: "20px",
-                          color: colors.text,
-                          borderRadius: "5px",
-                          height: "40px",
-                          width: "200px",
-                      },
-                      subStyle: {
-                          display: "none",
-                      },
-                  }),
-              ]
-            : [
-                  Text(
-                      {
-                          style: {
-                              color: colors.text,
-                              marginBottom: "2px",
-                              fontWeight: "600",
-                          },
-                      },
-                      `Issuer: ${element.issuer}`,
-                  ),
-                  Text(
-                      { style: { color: colors.text, fontWeight: "600" } },
-                      `Client: ${element.client}`,
-                  ),
-              ],
-    );
-
-    const buttonsView = View(
-        { style: { display: "flex", flexDirection: "row" } },
-        isEditing
-            ? [
-                  Button({
-                      label: content.saveButton.label,
-                      style: {
-                          margin: "5px",
-                          backgroundColor: "#28a745",
-                          color: colors.text,
-                      },
-                      onClick: onSave,
-                  }),
-              ]
-            : [
-                  Button({
-                      label: content.renameButtons.rename,
-                      style: {
-                          margin: "5px",
-                          backgroundColor: colors.notify,
-                          color: colors.text,
-                      },
-                      onClick: onRename,
-                  }),
-                  !isEditInProgress
-                      ? Button({
-                            label: content.deleteButton.label,
-                            style: {
-                                margin: "5px",
-                                backgroundColor: colors.alert,
-                                color: colors.text,
-                            },
-                            onClick: onDelete,
-                        })
-                      : null,
-              ],
-    );
-
-    const reorderView = View(
-        { style: { display: "flex", flexDirection: "column" } },
-        [
-            Button({
-                label: "⬆",
-                disabled: index === 0,
-                style: {
-                    margin: "2px",
-                    color: colors.text,
-                    backgroundColor: colors.notify,
-                },
-                onClick: onMoveUp,
-            }),
-            Button({
-                label: "⬇",
-                disabled: index === storage.length - 1,
-                style: {
-                    margin: "2px",
-                    color: colors.text,
-                    backgroundColor: colors.notify,
-                },
-                onClick: onMoveDown,
-            }),
-        ],
-    );
-
-    const mainContent = View({ style: { flexGrow: 1, padding: "5px" } }, [
-        infoView,
-        Text(
-            {
-                style: {
-                    color: colors.text,
-                    fontSize: "14px",
-                    marginTop: "5px",
-                },
-            },
-            content.totpDescText.eval(
-                element.hashType,
-                element.digits,
-                element.fetchTime,
-                element.timeOffset,
-            ),
-        ),
-        buttonsView,
-    ]);
-
-    return View(
-        {
-            style: {
-                display: "flex",
-                flexDirection: "row",
-                justifyContent: "space-between",
-                alignItems: "center",
-                backgroundColor: colors.secondaryBg,
-                borderRadius: "5px",
-                margin: "10px",
-                padding: "5px",
-            },
-        },
-        [mainContent, reorderView],
-    );
-}

setting/utils/protonBackupExport.js

@@ -1,11 +0,0 @@
-export class ProtonBackupExport {
-    version;
-    entries = Array.of(ProtonTotpRecord);
-}
-
-export class ProtonTotpRecord {
-    content = {
-        uri,
-        entry_type,
-    };
-}

setting/utils/queryParser.js

@@ -1,29 +1,17 @@
 import { decodeProto, TYPES } from "../../lib/protobuf-decoder/protobufDecoder";
 import { TOTP } from "../../lib/totp-quickjs";
 import { base64decode, encode } from "../../lib/totp-quickjs/base32decoder";
-import { ProtonBackupExport } from "./protonBackupExport";
 
-const otpauthScheme = "otpauth://";
+const otpauthScheme = "otpauth:/";
-const googleMigrationScheme = "otpauth-migration://";
+const googleMigrationScheme = "otpauth-migration:/";
+
 export function getTOTPByLink(link) {
-    try {
+	if (link.includes(otpauthScheme))
-        //proton export
+		return getByOtpauthScheme(link)
-        const json = JSON.parse(link);
+	if (link.includes(googleMigrationScheme))
-        console.log(json);
+		return getByGoogleMigrationScheme(link)
-        return getByProtonBackup(json);
+
-    } catch (e) {
+	return null;
-        if (link.startsWith(googleMigrationScheme)) {
-            //google migration export
-            return getByGoogleMigrationScheme(link);
-        }
-        if (link.startsWith(otpauthScheme)) {
-            //otpauth export
-            return getByOtpauthScheme(link);
-        }
-        throw new Error(
-            `Unsupported link type. Please use an otpauth:// or otpauth-migration:// link\n ERR: ${e}`,
-        );
-    }
 }
 
 function getHashType(algorithm) {
@@ -33,167 +21,92 @@ function getHashType(algorithm) {
 	else return "SHA-1";
 }
 
-function getByProtonBackup(protonjson) {
-    try {
-        if ("entries" in protonjson && protonjson.version == 1) {
-            //Is proton export?
-            console.log(1);
-            const protonBE = Object.assign(
-                new ProtonBackupExport(),
-                protonjson,
-            );
-            const res = protonBE.entries.map((x) => {
-                return getByOtpauthScheme(x.content.uri);
-            });
-            console.log(res);
-            return res;
-        } else throw new Error("use proton export backup with version: 1");
-    } catch (e) {
-        console.log(e);
-        throw new Error(`Unsupported JSON type: ${e}`);
-    }
-}
-
 function getByOtpauthScheme(link) {
 	try {
-        let args = link.split("?");
+		let args = link.split("/", otpauthScheme.length);
-        let path = args[0];
+		let type = args[2]; //Returns 'hotp' or 'totp'
-        let params = args[1];
+		let issuer = args[3].split(":")[0]?.split("?")[0]; //Returns issuer
-
+		let client =
-        let pathParts = path.split("/");
+			args[3].split(":")[1]?.split("?")[0] ??
-        let type = pathParts[2]; //hotp or totp
+			args[3].split(":")[0]?.split("?")[0]; //Returns client
-        let label = decodeURIComponent(pathParts[3]);
+		let secret = args[3].split("secret=")[1]?.split("&")[0]; //Returns secret
-
+		let period = args[3].split("period=")[1]?.split("&")[0]; //Returns period
-        let issuerFromLabel = label.includes(":") ? label.split(":")[0] : null;
+		let digits = args[3].split("digit=")[1]?.split("&")[0]; //Returns digits
-        let client = label.includes(":") ? label.split(":")[1].trim() : label;
+		let algorithm = args[3].split("algorithm=")[1]?.split("&")[0]; //Returns algorithm
-        client = decodeURIComponent(client);
+		let offset = args[3].split("offset=")[1]?.split("&")[0] ?? 0; //Returns offset
-
-        let secret = params.match(/secret=([^&]*)/)?.[1];
-        let issuerFromParams = params.match(/issuer=([^&]*)/)?.[1];
-
-        let issuer = issuerFromParams
-            ? decodeURIComponent(issuerFromParams)
-            : decodeURIComponent(issuerFromLabel);
-        if (!issuer) issuer = client;
-
-        let period = params.match(/period=([^&]*)/)?.[1];
-        let digits = params.match(/digits=([^&]*)/)?.[1];
-        let algorithm = params.match(/algorithm=([^&]*)/)?.[1];
-        let offset = params.match(/offset=([^&]*)/)?.[1] ?? 0;
 
 		if (type.toLowerCase() != "totp")
 			throw new Error("Type is not valid, requires 'TOTP'");
 
-        if (!secret) throw new Error("Secret not defined");
+		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) || 6,
+			Number(digits),
-            Number(period) || 30,
+			Number(period),
 			Number(offset),
-            getHashType(algorithm),
+			getHashType(algorithm)
 		);
 	} catch (err) {
-        console.log("Failed to parse otpauth scheme:", err);
+		console.log(err)
-        throw new Error(
+		return null;
-            `Invalid otpauth:// link. Please check the link and try again. ERR: ${err}`,
-        );
 	}
 }
 
 function getByGoogleMigrationScheme(link) {
-    try {
-        const data = link.split("data=")[1];
-        if (!data) return null;
 
-        const decodedData = decodeURIComponent(data);
+	let data = link.split("data=")[1]; //Returns base64 encoded data
-        const buffer = base64decode(decodedData);
+	data = decodeURIComponent(data);
-        const proto = decodeProto(buffer);
+	let decode = base64decode(data);
+	let proto = decodeProto(decode);
 
-        const totps = [];
+	let protoTotps = [];
-        const otpParameters = proto.parts.filter(
-            (p) => p.index === 1 && p.type === TYPES.LENDELIM,
-        );
 
-        otpParameters.forEach((part) => {
+	proto.parts.forEach(part => {
-            const totp = parseSingleMigrationEntry(part);
+		if (part.type == TYPES.LENDELIM) {
-            if (totp) {
+			protoTotps.push(decodeProto(part.value));
-                totps.push(totp);
 		}
 	});
 
-        return totps.length > 0 ? totps : null;
+	let totps = [];
-    } catch (err) {
+	protoTotps.forEach(x => {
-        console.log("Failed to parse Google Migration scheme:", err);
+		let type = x.parts.filter(x => x.index == 6)[0]; //find type of OTP
-        throw new Error(
+		if (type.value !== '2') {
-            "Invalid otpauth-migration:// link. Failed to parse migration data.",
+			console.log("ERR: it's a not TOTP record")
-        );
+			return;
-    }
 		}
+		let secret = x.parts.filter(x => x.index == 1)[0].value;
+		secret = encode(secret);
 
-function parseSingleMigrationEntry(part) {
+		let name = bytesToString(x.parts.filter(x => x.index == 2)[0].value);
-    const totpProto = decodeProto(part.value);
+		let issuer = bytesToString(x.parts.filter(x => x.index == 3)[0].value);
-    const otpData = {};
 
-    const protoPartHandlers = {
+		totps.push(new TOTP(
-        1: (p) => {
+			secret,
-            otpData.secret = encode(p.value);
+			issuer,
-        },
+			name,
-        2: (p) => {
+			6,
-            otpData.name = bytesToString(p.value);
-        },
-        3: (p) => {
-            otpData.issuer = bytesToString(p.value);
-        },
-        4: (p) => {
-            otpData.algorithm = p.value;
-        },
-        5: (p) => {
-            otpData.digits = p.value;
-        },
-        6: (p) => {
-            otpData.type = p.value;
-        },
-    };
-
-    totpProto.parts.forEach((p) => {
-        const handler = protoPartHandlers[p.index];
-        if (handler) {
-            handler(p);
-        }
-    });
-
-    if (otpData.type !== "2") {
-        return null;
-    }
-
-    const digitsMap = { 1: 6, 2: 8 };
-    const algoMap = { 1: "SHA-1", 2: "SHA-256", 3: "SHA-512" };
-
-    const finalDigits = digitsMap[otpData.digits] || 6;
-    const finalAlgo = algoMap[otpData.algorithm] || "SHA-1";
-    const finalIssuer = otpData.issuer || otpData.name;
-    const finalName = otpData.name;
-
-    if (!otpData.secret || !finalName) {
-        throw new Error("Skipping record with missing secret or name.");
-    }
-
-    return new TOTP(
-        otpData.secret,
-        finalIssuer,
-        finalName,
-        finalDigits,
 			30,
 			0,
-        finalAlgo,
+			"SHA-1"
-    );
+		));
+	});
+
+	return totps;
+
 }
 
 function bytesToString(bytes) {
-    let str = "";
+	let str = '';
 	for (let i = 0; i < bytes.length; i++) {
 		str += String.fromCharCode(bytes[i]);
 	}