diff --git a/README.md b/README.md index e958a1d..4609757 100644 --- a/README.md +++ b/README.md @@ -1,17 +1,15 @@ # TOTPFIT -### Another 2FAuthenticator based on TOTP for Zepp Amazfit GTS 4 +### Another 2FAuthenticator based on TOTP for Zepp Amazfit GTS 4 with Google Authenticator migration Support ![alt text](docs/assets/image2.png) ### Features: - Supports of otpauth links with parameters "issuer", "algorithm", "digits", "period" -- Addition/Edition/Deletion of TOTPs from mobile settings app +- Addition/Edition/Deletion of TOTPs from mobile app +- Support of google migration links formated: ```otpauth-migration://offline?data=...``` -### Google Migration Support: -- Support of google migration links formated: ```otpauth-migration://offline?data=...``` (BETA) +### Guides: -### Screenshots: +[How to add 2FA TOTP records (keys) on app](/docs/guides/how-to-add-totps/README.md) -![alt text](docs/assets/image2.png) - -![alt text](docs/assets/image.png) \ No newline at end of file +#### This repo has mirror for issues on [GitHub](https://github.com/Lisoveliy/totpfit) \ No newline at end of file diff --git a/app.json b/app.json index 2578602..bdcd7c5 100644 --- a/app.json +++ b/app.json @@ -6,7 +6,7 @@ "appType": "app", "version": { "code": 1, - "name": "1.2.2" + "name": "1.3" }, "icon": "icon.png", "vender": "zepp", diff --git a/docs/guides/how-to-add-totps/README.md b/docs/guides/how-to-add-totps/README.md new file mode 100644 index 0000000..6c9b437 --- /dev/null +++ b/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. \ No newline at end of file diff --git a/docs/guides/how-to-add-totps/image-2.png b/docs/guides/how-to-add-totps/image-2.png new file mode 100644 index 0000000..ae8d038 Binary files /dev/null and b/docs/guides/how-to-add-totps/image-2.png differ diff --git a/docs/guides/how-to-add-totps/image-4.png b/docs/guides/how-to-add-totps/image-4.png new file mode 100644 index 0000000..66dd003 Binary files /dev/null and b/docs/guides/how-to-add-totps/image-4.png differ diff --git a/docs/guides/how-to-add-totps/image-5.png b/docs/guides/how-to-add-totps/image-5.png new file mode 100644 index 0000000..9b6ca4d Binary files /dev/null and b/docs/guides/how-to-add-totps/image-5.png differ diff --git a/docs/guides/how-to-add-totps/image-6.png b/docs/guides/how-to-add-totps/image-6.png new file mode 100644 index 0000000..57fdc9b Binary files /dev/null and b/docs/guides/how-to-add-totps/image-6.png differ diff --git a/docs/guides/how-to-add-totps/image-7.png b/docs/guides/how-to-add-totps/image-7.png new file mode 100644 index 0000000..4afb0f4 Binary files /dev/null and b/docs/guides/how-to-add-totps/image-7.png differ diff --git a/docs/guides/how-to-add-totps/image.png b/docs/guides/how-to-add-totps/image.png new file mode 100644 index 0000000..1efd5e4 Binary files /dev/null and b/docs/guides/how-to-add-totps/image.png differ diff --git a/package.json b/package.json index f87dd91..2c88185 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "totpfit", - "version": "1.2.2", + "version": "1.3", "description": "Another 2FAuthenticator based on TOTP for Zepp Amazfit GTS 4", "main": "app.js", "author": "Lisoveliy", diff --git a/setting/index.js b/setting/index.js index 03e27a1..fb0641b 100644 --- a/setting/index.js +++ b/setting/index.js @@ -2,6 +2,16 @@ 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; @@ -9,9 +19,23 @@ AppSettingsPage({ 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", + }, + }, + "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://", - label: "Add new OTP Link", + placeholder: "otpauth(-migration)://", + label: "Add new TOTP record", onChange: (changes) => { let link = getTOTPByLink(changes); if (link == null) { @@ -19,29 +43,32 @@ AppSettingsPage({ return; } - if(Array.isArray(link)) + if (Array.isArray(link)) storage.push(...link); else storage.push(link); updateStorage(storage); }, labelStyle: { - backgroundColor: "#14213D", + backgroundColor: colors.notify, display: "flex", alignItems: "center", justifyContent: "center", margin: "10px", - flexGrow: 1, fontSize: "20px", - color: "#FFFFFF", + 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( { style: { - backgroundColor: "black", + backgroundColor: colors.bg, minHeight: "100vh", }, }, @@ -52,22 +79,34 @@ AppSettingsPage({ textAlign: "center", }, }, - Text( + storage.length < 1 ? addTOTPsHint : Text( { align: "center", paragraph: true, style: { marginBottom: "10px", - color: "#fff", + color: colors.bigText, fontSize: 23, + fontWeight: "500", verticalAlign: "middle", }, }, - "TOTPS:" + "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; @@ -80,14 +119,14 @@ function GetTOTPList(storage) { storage.forEach((element) => { const elementId = counter; const textInput = TextInput({ - placeholder: "otpauth://", - label: "Change OTP link", + placeholder: "otpauth(-migration)://", + label: "Change TOTP link", onChange: (changes) => { try { let link = getTOTPByLink(changes); - if(Array.isArray(link)) + if (Array.isArray(link)) return; - + storage[elementId] = link; updateStorage(storage); } catch (err) { @@ -95,7 +134,7 @@ function GetTOTPList(storage) { } }, labelStyle: { - backgroundColor: "#14213D", + backgroundColor: colors.notify, textAlign: "center", display: "flex", alignItems: "center", @@ -103,7 +142,7 @@ function GetTOTPList(storage) { margin: "10px", flexGrow: 1, fontSize: "20px", - color: "#E5E5E5", + color: colors.text, borderRadius: "5px", }, }); @@ -111,8 +150,9 @@ function GetTOTPList(storage) { { align: "center", style: { - color: "#ffffff", - fontSize: "16px", + color: colors.text, + fontSize: "18px", + fontWeight: "500" }, paragraph: true, }, @@ -126,29 +166,30 @@ function GetTOTPList(storage) { updateStorage(storage); }, style: { - backgroundColor: "#ba181b", + backgroundColor: colors.alert, fontSize: "18px", - color: "#ffffff", + color: colors.text, height: "fit-content", margin: "10px", }, - label: "DEL", + label: "Delete", }); const text = Text( { style: { - color: "#ffffff", + color: colors.text, fontSize: "14px", }, align: "center", }, - `${element.hashType} | ${element.digits} digits | ${element.fetchTime} seconds | offset ${element.timeOffset} seconds` + `${element.hashType} | ${element.digits} digits | ${element.fetchTime} seconds | ${element.timeOffset} sec offset` ); const view = View( { style: { textAlign: "center", - border: "2px solid white", + backgroundColor: colors.secondaryBg, + //border: "2px solid white", borderRadius: "5px", margin: "10px", },