TOTPFit/setting/index.js

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;
        const storage = JSON.parse(
            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(-migration)://",
            label: "Add new TOTP record",
            onChange: (changes) => {
                let link = getTOTPByLink(changes);
                if (link == null) {
                    console.log("link is invalid");
                    return;
                }

                if (Array.isArray(link))
                    storage.push(...link);
                else storage.push(link);

                updateStorage(storage);
            },
            labelStyle: {
                backgroundColor: colors.notify,
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                margin: "10px",
                fontSize: "20px",
                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: colors.bg,
                    minHeight: "100vh",
                },
            },
            [
                View(
                    {
                        style: {
                            textAlign: "center",
                        },
                    },
                    storage.length < 1 ? addTOTPsHint : Text(
                        {
                            align: "center",
                            paragraph: true,
                            style: {
                                marginBottom: "10px",
                                color: colors.bigText,
                                fontSize: 23,
                                fontWeight: "500",
                                verticalAlign: "middle",
                            },
                        },
                        "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: {
                            display: "grid",
                            gridTemplateColumns: "1fr 100px",
                        },
                    },
                    [textInput, delButton]
                ),
            ]
        );
        totpEntrys.push({ text: text, view: view });
        counter++;
    });

    return totpEntrys.map((x) => x.view);
}

function updateStorage(storage) {
    _props.settingsStorage.setItem("TOTPs", JSON.stringify(storage));
}