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

refactor: moved all literals to object constants

Browse Source
This commit is contained in:
Pavel-Savely Savianok 2025-07-24 17:28:22 +03:00
parent 69dddcebb5
commit 8c8b761c10
2 changed files with 99 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
setting/consts.js Normal file
View File

@ -0,0 +1,34 @@
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",
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: this.createButton.placeHolder
},
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`; }
}
};

131
setting/index.js
View File

@ -1,17 +1,8 @@
import { getTOTPByLink } from "./utils/queryParser.js"; import { getTOTPByLink } from "./utils/queryParser.js";
import { colors, content } from "./consts.js";
let _props = null; let _props = null;
const colors = {
bg: "#101010",
linkBg: "#ffffffc0",
secondaryBg: "#282828",
text: "#fafafa",
alert: "#ad3c23",
notify: "#555555",
bigText: "#fafafa",
};
AppSettingsPage({ AppSettingsPage({
build(props) { build(props) {
_props = props; _props = props;
@ -22,23 +13,23 @@ AppSettingsPage({
const addTOTPsHint = const addTOTPsHint =
storage.length < 1 storage.length < 1
? Text( ? Text(
{ {
paragraph: true, paragraph: true,
align: "center", align: "center",
style: { style: {
paddingTop: "10px", paddingTop: "10px",
marginBottom: "10px", marginBottom: "10px",
color: colors.text, color: colors.text,
fontSize: 16, fontSize: 16,
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) => {
let link = getTOTPByLink(changes); let link = getTOTPByLink(changes);
if (link == null) { if (link == null) {
@ -84,19 +75,19 @@ AppSettingsPage({
storage.length < 1 storage.length < 1
? addTOTPsHint ? addTOTPsHint
: Text( : Text(
{ {
align: "center", align: "center",
paragraph: true, paragraph: true,
style: { style: {
marginBottom: "10px", marginBottom: "10px",
color: colors.bigText, color: colors.bigText,
fontSize: 23, fontSize: 23,
fontWeight: "500", fontWeight: "500",
verticalAlign: "middle", verticalAlign: "middle",
}, },
}, },
"TOTP records:", "TOTP records:",
), ),
), ),
...totpEntrys, ...totpEntrys,
createButton, createButton,
@ -109,9 +100,9 @@ AppSettingsPage({
}, },
Link( Link(
{ {
source: "https://github.com/Lisoveliy/totpfit/blob/main/docs/guides/how-to-add-totps/README.md", source: content.instructionLink.source,
}, },
"Instruction | Report issue (GitHub)", content.instructionLink.label,
), ),
), ),
], ],
@ -120,14 +111,31 @@ AppSettingsPage({
}, },
}); });
/**
* Get DOM elements of TOTP records
* @param {*} storage Array of TOTP objects
* @returns Array of DOM elements
*/
function GetTOTPList(storage) { function GetTOTPList(storage) {
let totpEntrys = []; let totpEntrys = [];
let counter = 0; let counter = 0;
storage.forEach((element) => { storage.forEach((element) => {
const elementId = counter; const elementId = counter;
const textInput = TextInput({ const totpLabelText = Text(
placeholder: "otpauth(-migration)://", {
label: "Change TOTP link", align: "center",
style: {
color: colors.text,
fontSize: "18px",
fontWeight: "500",
},
paragraph: true,
},
content.totpLabelText.eval(element.issuer, element.client),
);
const changeButton = TextInput({
placeholder: content.changeButton.placeHolder,
label: content.changeButton.label,
onChange: (changes) => { onChange: (changes) => {
try { try {
let link = getTOTPByLink(changes); let link = getTOTPByLink(changes);
@ -152,19 +160,17 @@ function GetTOTPList(storage) {
borderRadius: "5px", borderRadius: "5px",
}, },
}); });
const textBig = Text( const totpDescText = Text(
{ {
align: "center",
style: { style: {
color: colors.text, color: colors.text,
fontSize: "18px", fontSize: "14px",
fontWeight: "500",
}, },
paragraph: true, align: "center",
}, },
`${element.issuer}: ${element.client}`, content.totpDescText.eval(element.hashType, element.digits, element.fetchTime, element.timeOffset),
); );
const delButton = Button({ const deleteButton = Button({
onClick: () => { onClick: () => {
storage = storage.filter( storage = storage.filter(
(x) => storage.indexOf(x) != elementId, (x) => storage.indexOf(x) != elementId,
@ -178,31 +184,20 @@ function GetTOTPList(storage) {
height: "fit-content", height: "fit-content",
margin: "10px", margin: "10px",
}, },
label: "Delete", label: content.deleteButton.label,
}); });
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( const view = View(
{ {
style: { style: {
textAlign: "center", textAlign: "center",
backgroundColor: colors.secondaryBg, backgroundColor: colors.secondaryBg,
//border: "2px solid white",
borderRadius: "5px", borderRadius: "5px",
margin: "10px", margin: "10px",
}, },
}, },
[ [
textBig, totpLabelText,
text, totpDescText,
View( View(
{ {
style: { style: {
@ -210,17 +205,21 @@ function GetTOTPList(storage) {
gridTemplateColumns: "1fr 100px", gridTemplateColumns: "1fr 100px",
}, },
}, },
[textInput, delButton], [changeButton, deleteButton],
), ),
], ],
); );
totpEntrys.push({ text: text, view: view }); totpEntrys.push({ text: totpDescText, view: view });
counter++; counter++;
}); });
return totpEntrys.map((x) => x.view); return totpEntrys.map((x) => x.view);
} }
/**
* Update
* @param {*} storage Array of TOTP objects
*/
function updateStorage(storage) { function updateStorage(storage) {
_props.settingsStorage.setItem("TOTPs", JSON.stringify(storage)); _props.settingsStorage.setItem("TOTPs", JSON.stringify(storage));
} }