225 lines
7.0 KiB
JavaScript
225 lines
7.0 KiB
JavaScript
import { getTOTPByLink } from "./utils/queryParser.js";
|
|
import { createTOTPCard } from "./ui/card.js";
|
|
import { colors, content } from "./consts.js";
|
|
|
|
let _props = null;
|
|
let editingIndex = -1;
|
|
let tempIssuer = "";
|
|
let tempClient = "";
|
|
let errorMessage = "";
|
|
|
|
function updateStorage(storage) {
|
|
_props.settingsStorage.setItem("TOTPs", JSON.stringify(storage));
|
|
}
|
|
|
|
function GetTOTPList(storage) {
|
|
return storage.map((element, index) => {
|
|
return createTOTPCard({
|
|
element,
|
|
index,
|
|
storage,
|
|
isEditing: editingIndex === index,
|
|
tempIssuer,
|
|
tempClient,
|
|
onIssuerChange: (val) => {
|
|
tempIssuer = val;
|
|
},
|
|
onClientChange: (val) => {
|
|
tempClient = val;
|
|
},
|
|
onRename: () => {
|
|
editingIndex = index;
|
|
tempIssuer = element.issuer;
|
|
tempClient = element.client;
|
|
_props.settingsStorage.setItem("requestUpdate", Math.random());
|
|
},
|
|
onSave: () => {
|
|
storage[index].issuer = tempIssuer;
|
|
storage[index].client = tempClient;
|
|
editingIndex = -1;
|
|
updateStorage(storage);
|
|
},
|
|
onDelete: () => {
|
|
storage.splice(index, 1);
|
|
updateStorage(storage);
|
|
},
|
|
onMoveUp: () => {
|
|
if (index > 0) {
|
|
[storage[index], storage[index - 1]] = [
|
|
storage[index - 1],
|
|
storage[index],
|
|
];
|
|
updateStorage(storage);
|
|
}
|
|
},
|
|
onMoveDown: () => {
|
|
if (index < storage.length - 1) {
|
|
[storage[index], storage[index + 1]] = [
|
|
storage[index + 1],
|
|
storage[index],
|
|
];
|
|
updateStorage(storage);
|
|
}
|
|
},
|
|
isEditInProgress: editingIndex !== -1,
|
|
});
|
|
});
|
|
}
|
|
|
|
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",
|
|
},
|
|
},
|
|
content.addTotpsHint,
|
|
)
|
|
: null;
|
|
|
|
const createButton = TextInput({
|
|
placeholder: content.createButton.placeHolder,
|
|
label: content.createButton.label,
|
|
onChange: (changes) => {
|
|
try {
|
|
errorMessage = "";
|
|
let link = getTOTPByLink(changes);
|
|
|
|
if (Array.isArray(link)) {
|
|
storage.push(...link);
|
|
} else {
|
|
storage.push(link);
|
|
}
|
|
updateStorage(storage);
|
|
} catch (e) {
|
|
errorMessage = e.message;
|
|
updateStorage(storage);
|
|
}
|
|
},
|
|
labelStyle: {
|
|
backgroundColor: colors.notify,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
marginBottom: "10px",
|
|
marginLeft: "10px",
|
|
marginRight: "10px",
|
|
fontSize: "20px",
|
|
color: colors.text,
|
|
borderRadius: "5px",
|
|
height: "45px",
|
|
},
|
|
});
|
|
|
|
const errorText = errorMessage
|
|
? Text(
|
|
{
|
|
style: {
|
|
color: colors.alert,
|
|
textAlign: "center",
|
|
},
|
|
},
|
|
errorMessage,
|
|
)
|
|
: null;
|
|
|
|
const bottomContainer = View(
|
|
{
|
|
style: {
|
|
backgroundColor: colors.bg,
|
|
},
|
|
},
|
|
[
|
|
View(
|
|
{
|
|
style: {
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
marginTop: "10px",
|
|
marginBottom: "10px",
|
|
},
|
|
},
|
|
Link(
|
|
{
|
|
source: content.instructionLink.source,
|
|
},
|
|
content.instructionLink.label,
|
|
),
|
|
),
|
|
errorText,
|
|
createButton,
|
|
].filter(Boolean),
|
|
);
|
|
|
|
const pageContainer = View(
|
|
{
|
|
style: {
|
|
backgroundColor: colors.bg,
|
|
height: "100vh",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
justifyContent: "space-between",
|
|
},
|
|
},
|
|
[
|
|
View(
|
|
{
|
|
style: {
|
|
textAlign: "center",
|
|
},
|
|
},
|
|
[
|
|
storage.length < 1
|
|
? addTOTPsHint
|
|
: Text(
|
|
{
|
|
align: "center",
|
|
paragraph: true,
|
|
style: {
|
|
marginTop: "10px",
|
|
marginBottom: "10px",
|
|
color: colors.bigText,
|
|
fontSize: 23,
|
|
fontWeight: "500",
|
|
verticalAlign: "middle",
|
|
},
|
|
},
|
|
content.totpRecordsHint,
|
|
),
|
|
],
|
|
),
|
|
|
|
View(
|
|
{
|
|
style: {
|
|
height: "100%",
|
|
overflowX: "hidden",
|
|
overflowY: "auto",
|
|
backgroundColor: colors.bg,
|
|
},
|
|
},
|
|
[...totpEntrys],
|
|
),
|
|
|
|
bottomContainer,
|
|
],
|
|
);
|
|
|
|
return pageContainer;
|
|
},
|
|
});
|