TOTPFit/setting/index.js

import { getTOTPByLink } from './utils/queryParser.js'

let _props = null;

AppSettingsPage({
  build(props) {
    _props = props;

    console.log(props.settingsStorage.getItem("TOTPs"))
    const storage = JSON.parse(props.settingsStorage.getItem("TOTPs") ?? "[]")
    const totpEntrys = GetTOTPList(storage)
    const createButton = TextInput({
      placeholder: "otpauth://",
      label: "Add new OTP Link",
      onChange: (changes) => {
        var link = getTOTPByLink(changes)
        if(link == null){
          console.log("link is invalid")
          return;
        }
        storage.push(link)
        updateStorage(storage)
      },
      labelStyle: {
        backgroundColor: "#14213D",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        margin: "10px",
        flexGrow: 1,
        fontSize: "20px",
        color: "#FFFFFF",
        borderRadius: "5px"
      }
    });

    var body = Section(
      {
        style: {
          backgroundColor: "black",
          minHeight: "100vh",
        },
      },
      [
        View(
          {
            style: {
              textAlign: "center",
            },
          },
          Text(
            {
              align: "center",
              paragraph: true,
              style: {
                marginBottom: "10px",
                color: "#fff",
                fontSize: 23,
                verticalAlign: "middle",
              },
            },
            "TOTPS:"
          )
        ),
        ...totpEntrys,
        createButton
      ]
    );
    return body;
  },
});

function GetTOTPList(storage){
  let totpEntrys = [];
  let counter = 0;
  storage.forEach((element) => {
    const elementId = counter;
    const textInput = TextInput({
      placeholder: "otpauth://",
      label: "Change OTP link",
      onChange: (changes) => {
        try{
        storage[elementId] = getTOTPByLink(changes)
        updateStorage(storage)
        }
        catch(err){
          console.log(err)
        }
      },
      labelStyle: {
        backgroundColor: "#14213D",
        textAlign: "center",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        margin: "10px",
        flexGrow: 1,
        fontSize: "20px",
        color: "#E5E5E5",
        borderRadius: "5px"
      },
    });
    const textBig = Text(
      {
        align: "center",
        style: {
          color: "#ffffff",
          fontSize: "16px"
        },
        paragraph: true,
      },
      `${element.issuer}: ${element.client}`
    );
    const delButton = Button(
      {
        onClick: () => {
          storage = storage.filter(x => storage.indexOf(x) != elementId)
          updateStorage(storage)
        },
        style: {
          backgroundColor: "#ba181b",
          fontSize: "18px",
          color: "#ffffff",
          height: "fit-content",
          margin: "10px"
        },
        label: "DEL"
      }
    );
    const text = Text(
      {
        style: {
          color: "#ffffff",
          fontSize: "14px"
        },
        align: "center"
      },
      `${element.hashType} | ${element.digits} digits | ${element.fetchTime} seconds | offset ${element.timeOffset} seconds`
    );
    const view = View(
      {
        style: {
          textAlign: "center",
          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){
  console.log("new storage is:")
  console.log(storage)
  _props.settingsStorage.setItem('TOTPs', JSON.stringify(storage))
}