feat: added new color palette for settings app, fixed typos, added guide, added link to guide
This commit is contained in:
@@ -2,6 +2,16 @@ 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;
|
||||
@@ -9,9 +19,23 @@ AppSettingsPage({
|
||||
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://",
|
||||
label: "Add new OTP Link",
|
||||
placeholder: "otpauth(-migration)://",
|
||||
label: "Add new TOTP record",
|
||||
onChange: (changes) => {
|
||||
let link = getTOTPByLink(changes);
|
||||
if (link == null) {
|
||||
@@ -19,29 +43,32 @@ AppSettingsPage({
|
||||
return;
|
||||
}
|
||||
|
||||
if(Array.isArray(link))
|
||||
if (Array.isArray(link))
|
||||
storage.push(...link);
|
||||
else storage.push(link);
|
||||
|
||||
updateStorage(storage);
|
||||
},
|
||||
labelStyle: {
|
||||
backgroundColor: "#14213D",
|
||||
backgroundColor: colors.notify,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
margin: "10px",
|
||||
flexGrow: 1,
|
||||
fontSize: "20px",
|
||||
color: "#FFFFFF",
|
||||
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: "black",
|
||||
backgroundColor: colors.bg,
|
||||
minHeight: "100vh",
|
||||
},
|
||||
},
|
||||
@@ -52,22 +79,34 @@ AppSettingsPage({
|
||||
textAlign: "center",
|
||||
},
|
||||
},
|
||||
Text(
|
||||
storage.length < 1 ? addTOTPsHint : Text(
|
||||
{
|
||||
align: "center",
|
||||
paragraph: true,
|
||||
style: {
|
||||
marginBottom: "10px",
|
||||
color: "#fff",
|
||||
color: colors.bigText,
|
||||
fontSize: 23,
|
||||
fontWeight: "500",
|
||||
verticalAlign: "middle",
|
||||
},
|
||||
},
|
||||
"TOTPS:"
|
||||
"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;
|
||||
@@ -80,14 +119,14 @@ function GetTOTPList(storage) {
|
||||
storage.forEach((element) => {
|
||||
const elementId = counter;
|
||||
const textInput = TextInput({
|
||||
placeholder: "otpauth://",
|
||||
label: "Change OTP link",
|
||||
placeholder: "otpauth(-migration)://",
|
||||
label: "Change TOTP link",
|
||||
onChange: (changes) => {
|
||||
try {
|
||||
let link = getTOTPByLink(changes);
|
||||
if(Array.isArray(link))
|
||||
if (Array.isArray(link))
|
||||
return;
|
||||
|
||||
|
||||
storage[elementId] = link;
|
||||
updateStorage(storage);
|
||||
} catch (err) {
|
||||
@@ -95,7 +134,7 @@ function GetTOTPList(storage) {
|
||||
}
|
||||
},
|
||||
labelStyle: {
|
||||
backgroundColor: "#14213D",
|
||||
backgroundColor: colors.notify,
|
||||
textAlign: "center",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
@@ -103,7 +142,7 @@ function GetTOTPList(storage) {
|
||||
margin: "10px",
|
||||
flexGrow: 1,
|
||||
fontSize: "20px",
|
||||
color: "#E5E5E5",
|
||||
color: colors.text,
|
||||
borderRadius: "5px",
|
||||
},
|
||||
});
|
||||
@@ -111,8 +150,9 @@ function GetTOTPList(storage) {
|
||||
{
|
||||
align: "center",
|
||||
style: {
|
||||
color: "#ffffff",
|
||||
fontSize: "16px",
|
||||
color: colors.text,
|
||||
fontSize: "18px",
|
||||
fontWeight: "500"
|
||||
},
|
||||
paragraph: true,
|
||||
},
|
||||
@@ -126,29 +166,30 @@ function GetTOTPList(storage) {
|
||||
updateStorage(storage);
|
||||
},
|
||||
style: {
|
||||
backgroundColor: "#ba181b",
|
||||
backgroundColor: colors.alert,
|
||||
fontSize: "18px",
|
||||
color: "#ffffff",
|
||||
color: colors.text,
|
||||
height: "fit-content",
|
||||
margin: "10px",
|
||||
},
|
||||
label: "DEL",
|
||||
label: "Delete",
|
||||
});
|
||||
const text = Text(
|
||||
{
|
||||
style: {
|
||||
color: "#ffffff",
|
||||
color: colors.text,
|
||||
fontSize: "14px",
|
||||
},
|
||||
align: "center",
|
||||
},
|
||||
`${element.hashType} | ${element.digits} digits | ${element.fetchTime} seconds | offset ${element.timeOffset} seconds`
|
||||
`${element.hashType} | ${element.digits} digits | ${element.fetchTime} seconds | ${element.timeOffset} sec offset`
|
||||
);
|
||||
const view = View(
|
||||
{
|
||||
style: {
|
||||
textAlign: "center",
|
||||
border: "2px solid white",
|
||||
backgroundColor: colors.secondaryBg,
|
||||
//border: "2px solid white",
|
||||
borderRadius: "5px",
|
||||
margin: "10px",
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user