refactor: moved all literals to object constants

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

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`; }
}
};

View File

@ -1,17 +1,8 @@
import { getTOTPByLink } from "./utils/queryParser.js";
import { colors, content } from "./consts.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;
@ -22,23 +13,23 @@ AppSettingsPage({
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",
)
{
paragraph: true,
align: "center",
style: {
paddingTop: "10px",
marginBottom: "10px",
color: colors.text,
fontSize: 16,
verticalAlign: "middle",
},
},
content.addTotpsHint,
)
: null;
const createButton = TextInput({
placeholder: "otpauth(-migration)://",
label: "Add new TOTP record",
placeholder: content.createButton.placeHolder,
label: content.createButton.label,
onChange: (changes) => {
let link = getTOTPByLink(changes);
if (link == null) {
@ -84,19 +75,19 @@ AppSettingsPage({
storage.length < 1
? addTOTPsHint
: Text(
{
align: "center",
paragraph: true,
style: {
marginBottom: "10px",
color: colors.bigText,
fontSize: 23,
fontWeight: "500",
verticalAlign: "middle",
},
},
"TOTP records:",
),
{
align: "center",
paragraph: true,
style: {
marginBottom: "10px",
color: colors.bigText,
fontSize: 23,
fontWeight: "500",
verticalAlign: "middle",
},
},
"TOTP records:",
),
),
...totpEntrys,
createButton,
@ -109,9 +100,9 @@ AppSettingsPage({
},
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) {
let totpEntrys = [];
let counter = 0;
storage.forEach((element) => {
const elementId = counter;
const textInput = TextInput({
placeholder: "otpauth(-migration)://",
label: "Change TOTP link",
const totpLabelText = Text(
{
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) => {
try {
let link = getTOTPByLink(changes);
@ -152,19 +160,17 @@ function GetTOTPList(storage) {
borderRadius: "5px",
},
});
const textBig = Text(
const totpDescText = Text(
{
align: "center",
style: {
color: colors.text,
fontSize: "18px",
fontWeight: "500",
fontSize: "14px",
},
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: () => {
storage = storage.filter(
(x) => storage.indexOf(x) != elementId,
@ -178,31 +184,20 @@ function GetTOTPList(storage) {
height: "fit-content",
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(
{
style: {
textAlign: "center",
backgroundColor: colors.secondaryBg,
//border: "2px solid white",
borderRadius: "5px",
margin: "10px",
},
},
[
textBig,
text,
totpLabelText,
totpDescText,
View(
{
style: {
@ -210,17 +205,21 @@ function GetTOTPList(storage) {
gridTemplateColumns: "1fr 100px",
},
},
[textInput, delButton],
[changeButton, deleteButton],
),
],
);
totpEntrys.push({ text: text, view: view });
totpEntrys.push({ text: totpDescText, view: view });
counter++;
});
return totpEntrys.map((x) => x.view);
}
/**
* Update
* @param {*} storage Array of TOTP objects
*/
function updateStorage(storage) {
_props.settingsStorage.setItem("TOTPs", JSON.stringify(storage));
}