Lisoveliy/TOTPFit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: added sort for totps, added possibility to change issuer and client name

Browse Source
This commit is contained in:
Pavel-Savely Savianok 2025-08-08 15:34:34 +03:00
parent d45be3ee68
commit 259c2cdd2e
5 changed files with 142 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.prettierrc.yaml
View File

@ -1 +1 @@
tabWidth: 4 tabWidth: 4

9
lib/totp-quickjs/index.js
View File

@ -48,12 +48,17 @@ export class TOTP {
*/ */
getOTP(time = Date.now()) { getOTP(time = Date.now()) {
const unixTime = (time / 1000 + this.timeOffset) / this.fetchTime; const unixTime = (time / 1000 + this.timeOffset) / this.fetchTime;
const otp = getHOTP(Math.floor(unixTime), this.secret, this.digits, this.hashType); const otp = getHOTP(
Math.floor(unixTime),
this.secret,
this.digits,
this.hashType,
);
const expireTime = const expireTime =
time + time +
(this.fetchTime - (this.fetchTime -
((time / 1000 + this.timeOffset) % this.fetchTime)) * ((time / 1000 + this.timeOffset) % this.fetchTime)) *
1000; 1000;
const createdTime = const createdTime =
time - ((time / 1000 + this.timeOffset) % this.fetchTime) * 1000; time - ((time / 1000 + this.timeOffset) % this.fetchTime) * 1000;

40
setting/consts.js Normal file
View File

@ -0,0 +1,40 @@
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 or otpauth-migration:// link from Google Authenticator Migration QR-Code",
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)://",
},
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`;
},
},
};

72
setting/index.js
View File

@ -1,5 +1,6 @@
import { getTOTPByLink } from "./utils/queryParser.js"; import { getTOTPByLink } from "./utils/queryParser.js";
import { createTOTPCard } from "./ui/card.js"; import { createTOTPCard } from "./ui/card.js";
import { colors, content } from "./consts.js";
let _props = null; let _props = null;
let editingIndex = -1; let editingIndex = -1;
@ -7,16 +8,6 @@ let tempIssuer = "";
let tempClient = ""; let tempClient = "";
let errorMessage = ""; let errorMessage = "";
const colors = {
bg: "#101010",
linkBg: "#ffffffc0",
secondaryBg: "#282828",
text: "#fafafa",
alert: "#ad3c23",
notify: "#555555",
bigText: "#fafafa",
};
function updateStorage(storage) { function updateStorage(storage) {
_props.settingsStorage.setItem("TOTPs", JSON.stringify(storage)); _props.settingsStorage.setItem("TOTPs", JSON.stringify(storage));
} }
@ -95,20 +86,20 @@ AppSettingsPage({
verticalAlign: "middle", verticalAlign: "middle",
}, },
}, },
"For add a 2FA TOTP record you must have otpauth:// link or otpauth-migration:// link from Google Authenticator Migration QR-Code", content.addTotpsHint,
) )
: null; : null;
const createButton = TextInput({ const createButton = TextInput({
placeholder: "otpauth(-migration)://", placeholder: content.createButton.placeHolder,
label: "Add new TOTP record", label: content.createButton.label,
onChange: (changes) => { onChange: (changes) => {
try { try {
errorMessage = ""; errorMessage = "";
let link = getTOTPByLink(changes); let link = getTOTPByLink(changes);
if (link == null) { if (link == null) {
throw new Error( throw new Error(
"Unsupported link type. Please use an otpauth:// or otpauth-migration:// link.", "Unsupported link type. Please use an otpauth:// or otpauth-migration:// link",
); );
} }
@ -132,7 +123,6 @@ AppSettingsPage({
fontSize: "20px", fontSize: "20px",
color: colors.text, color: colors.text,
borderRadius: "5px", borderRadius: "5px",
width: "100%",
height: "45px", height: "45px",
}, },
}); });
@ -143,7 +133,6 @@ AppSettingsPage({
style: { style: {
color: colors.alert, color: colors.alert,
textAlign: "center", textAlign: "center",
margin: "5px",
}, },
}, },
errorMessage, errorMessage,
@ -153,11 +142,29 @@ AppSettingsPage({
const bottomContainer = View( const bottomContainer = View(
{ {
style: { style: {
padding: "5px 0px",
backgroundColor: colors.bg, backgroundColor: colors.bg,
}, },
}, },
[errorText, createButton].filter(Boolean), [
View(
{
style: {
display: "flex",
justifyContent: "center",
marginTop: "20px",
marginBottom: "20px",
},
},
Link(
{
source: content.instructionLink.source,
},
content.instructionLink.label,
),
),
errorText,
createButton,
].filter(Boolean),
); );
const pageContainer = View( const pageContainer = View(
@ -185,6 +192,7 @@ AppSettingsPage({
align: "center", align: "center",
paragraph: true, paragraph: true,
style: { style: {
marginTop: "10px",
marginBottom: "10px", marginBottom: "10px",
color: colors.bigText, color: colors.bigText,
fontSize: 23, fontSize: 23,
@ -192,7 +200,7 @@ AppSettingsPage({
verticalAlign: "middle", verticalAlign: "middle",
}, },
}, },
"TOTP records:", content.totpRecordsHint,
), ),
], ],
), ),
@ -200,29 +208,13 @@ AppSettingsPage({
View( View(
{ {
style: { style: {
flexGrow: 1, height: "100%",
overflow: "scroll", overflowX: "hidden",
overflowY: "auto",
backgroundColor: colors.bg,
}, },
}, },
[ [...totpEntrys],
...totpEntrys,
View(
{
style: {
display: "flex",
justifyContent: "center",
marginTop: "20px",
marginBottom: "20px",
},
},
Link(
{
source: "https://github.com/Lisoveliy/totpfit/blob/main/docs/guides/how-to-add-totps/README.md",
},
"Instruction | Report issue (GitHub)",
),
),
],
), ),
bottomContainer, bottomContainer,

78
setting/ui/card.js
View File

@ -1,3 +1,5 @@
import { colors, content } from "../consts";
export function createTOTPCard({ export function createTOTPCard({
element, element,
index, index,
@ -13,13 +15,6 @@ export function createTOTPCard({
onIssuerChange, onIssuerChange,
onClientChange, onClientChange,
}) { }) {
const colors = {
secondaryBg: "#282828",
text: "#fafafa",
alert: "#ad3c23",
notify: "#555555",
};
const infoView = View( const infoView = View(
{ {
style: { style: {
@ -31,23 +26,59 @@ export function createTOTPCard({
isEditing isEditing
? [ ? [
TextInput({ TextInput({
label: "Issuer", label: "Rename Issuer",
value: tempIssuer, value: tempIssuer,
onChange: onIssuerChange, 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({ TextInput({
label: "Client", label: "Rename client",
value: tempClient, value: tempClient,
onChange: onClientChange, 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( Text(
{ style: { color: colors.text, marginBottom: "2px" } }, {
style: {
color: colors.text,
marginBottom: "2px",
fontWeight: "600",
},
},
`Issuer: ${element.issuer}`, `Issuer: ${element.issuer}`,
), ),
Text( Text(
{ style: { color: colors.text } }, { style: { color: colors.text, fontWeight: "600" } },
`Client: ${element.client}`, `Client: ${element.client}`,
), ),
], ],
@ -93,15 +124,25 @@ export function createTOTPCard({
{ style: { display: "flex", flexDirection: "column" } }, { style: { display: "flex", flexDirection: "column" } },
[ [
Button({ Button({
label: "↑", label: "⬆",
disabled: index === 0, disabled: index === 0,
style: { width: "50px", margin: "2px" }, style: {
width: "50px",
margin: "2px",
color: colors.text,
backgroundColor: colors.notify,
},
onClick: onMoveUp, onClick: onMoveUp,
}), }),
Button({ Button({
label: "↓", label: "⬇",
disabled: index === storage.length - 1, disabled: index === storage.length - 1,
style: { width: "50px", margin: "2px" }, style: {
width: "50px",
margin: "2px",
color: colors.text,
backgroundColor: colors.notify,
},
onClick: onMoveDown, onClick: onMoveDown,
}), }),
], ],
@ -117,7 +158,12 @@ export function createTOTPCard({
marginTop: "5px", marginTop: "5px",
}, },
}, },
`${element.hashType} | ${element.digits} digits | ${element.fetchTime} seconds | ${element.timeOffset} sec offset`, content.totpDescText.eval(
element.hashType,
element.digits,
element.fetchTime,
element.timeOffset,
),
), ),
buttonsView, buttonsView,
]); ]);