fix, chore, feat: refactor of settings app, fix of Google Auth migration parse, added rename button(testing), added sort feature, added timeout to screen turning off, formated codes with space between 6-digits codes
Co-authored-by: DemiarUA <demiar97@gmail.com> https://github.com/Lisoveliy/totpfit/pull/1
This commit is contained in:
336
setting/index.js
336
setting/index.js
@@ -1,6 +1,11 @@
|
||||
import { getTOTPByLink } from "./utils/queryParser.js";
|
||||
import { createTOTPCard } from "./ui/card.js";
|
||||
|
||||
let _props = null;
|
||||
let editingIndex = -1;
|
||||
let tempIssuer = "";
|
||||
let tempClient = "";
|
||||
let errorMessage = "";
|
||||
|
||||
const colors = {
|
||||
bg: "#101010",
|
||||
@@ -9,45 +14,114 @@ const colors = {
|
||||
text: "#fafafa",
|
||||
alert: "#ad3c23",
|
||||
notify: "#555555",
|
||||
bigText: "#fafafa"
|
||||
bigText: "#fafafa",
|
||||
};
|
||||
|
||||
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;
|
||||
updateStorage(storage);
|
||||
},
|
||||
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);
|
||||
}
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
AppSettingsPage({
|
||||
build(props) {
|
||||
_props = props;
|
||||
const storage = JSON.parse(
|
||||
props.settingsStorage.getItem("TOTPs") ?? "[]"
|
||||
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 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;
|
||||
try {
|
||||
errorMessage = "";
|
||||
let link = getTOTPByLink(changes);
|
||||
if (link == null) {
|
||||
throw new Error(
|
||||
"Unsupported link type. Please use an otpauth:// or otpauth-migration:// link.",
|
||||
);
|
||||
}
|
||||
|
||||
if (Array.isArray(link)) {
|
||||
storage.push(...link);
|
||||
} else {
|
||||
storage.push(link);
|
||||
}
|
||||
updateStorage(storage);
|
||||
} catch (e) {
|
||||
errorMessage = e.message;
|
||||
updateStorage(storage);
|
||||
}
|
||||
|
||||
if (Array.isArray(link))
|
||||
storage.push(...link);
|
||||
else storage.push(link);
|
||||
|
||||
updateStorage(storage);
|
||||
},
|
||||
labelStyle: {
|
||||
backgroundColor: colors.notify,
|
||||
@@ -58,18 +132,42 @@ AppSettingsPage({
|
||||
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
|
||||
width: "100%",
|
||||
height: "45px",
|
||||
},
|
||||
});
|
||||
|
||||
var body = Section(
|
||||
const errorText = errorMessage
|
||||
? Text(
|
||||
{
|
||||
style: {
|
||||
color: colors.alert,
|
||||
textAlign: "center",
|
||||
margin: "5px",
|
||||
},
|
||||
},
|
||||
errorMessage,
|
||||
)
|
||||
: null; //TODO: Check for work
|
||||
|
||||
const bottomContainer = View(
|
||||
{
|
||||
style: {
|
||||
padding: "5px 0px",
|
||||
backgroundColor: colors.bg,
|
||||
},
|
||||
},
|
||||
[errorText, createButton].filter(Boolean),
|
||||
);
|
||||
|
||||
const pageContainer = View(
|
||||
{
|
||||
style: {
|
||||
backgroundColor: colors.bg,
|
||||
minHeight: "100vh",
|
||||
height: "100vh",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
},
|
||||
},
|
||||
[
|
||||
@@ -79,142 +177,58 @@ AppSettingsPage({
|
||||
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:"
|
||||
)
|
||||
[
|
||||
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",
|
||||
flexGrow: 1,
|
||||
overflow: "scroll",
|
||||
},
|
||||
},
|
||||
[textInput, delButton]
|
||||
[
|
||||
...totpEntrys,
|
||||
View(
|
||||
{
|
||||
style: {
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
marginTop: "20px",
|
||||
marginBottom: "20px",
|
||||
},
|
||||
},
|
||||
Link(
|
||||
{
|
||||
source: "https://github.com/Lisoveliy/totpfit/blob/main/docs/guides/how-to-add-totps/README.md",
|
||||
},
|
||||
"Instruction | Report issue (GitHub)",
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
]
|
||||
|
||||
bottomContainer,
|
||||
],
|
||||
);
|
||||
totpEntrys.push({ text: text, view: view });
|
||||
counter++;
|
||||
});
|
||||
|
||||
return totpEntrys.map((x) => x.view);
|
||||
}
|
||||
|
||||
function updateStorage(storage) {
|
||||
_props.settingsStorage.setItem("TOTPs", JSON.stringify(storage));
|
||||
}
|
||||
return pageContainer;
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user