feat(staged): created new interface for settings app

setting/i18n/en-US.po

@@ -1,2 +0,0 @@
-msgid "example"
-msgstr "This is an example in app-side"

setting/index.js

@@ -1,37 +1,112 @@
 AppSettingsPage({
   build(props) {
-    const storage = props.settingsStorage.getItem('TOTPs')
-    //props.settingsStorage.setItem('TOTPS')
-    console.log(storage)
-    const totpButtons = []
-    storage.forEach(element => {
-      totpButtons.push(
-        View({
-          style:
+    const storage = props.settingsStorage.getItem("TOTPs");
+    const totpEntrys = GetTOTPList(storage);
+
+    var body = Section(
       {
+        style: {
+          backgroundColor: "black",
+          minHeight: "100vh",
+        },
+      },
+      [
+        View(
+          {
+            style: {
               textAlign: "center",
-            marginBottom: "10px"
-          }
             },
-          [Button({
-            style: { width: "95%" },
-            label: `${element.issuer}: ${element.client}`,
-            onClick: (el) => {
-              props.settingsStorage.setItem("TOTPs", storage)
-            }
-          }), Text({
-            align: 'center',
-          }, `${element.hashType} | ${element.digits} digits | ${element.fetchTime} seconds | offset ${element.timeOffset} seconds`)]))
+          },
+          Text(
+            {
+              align: "center",
+              paragraph: true,
+              style: {
+                marginBottom: "10px",
+                color: "#fff",
+                fontSize: 23,
+                verticalAlign: "middle",
+              },
+            },
+            "TOTPS:"
+          )
+        ),
+        ...totpEntrys
+      ]
+    );
+    return body;
+  },
+});
+
+function GetTOTPList(storage){
+  let totpEntrys = [];
+  let counter = 0;
+  storage.forEach((element) => {
+    const textInput = TextInput({
+      placeholder: "otplink",
+      label: "Change OTP link",
+      labelStyle: {
+        backgroundColor: "#14213D",
+        textAlign: "center",
+        width: "70vw",
+        margin: "10px",
+        fontSize: "20px",
+        color: "#E5E5E5",
+        borderRadius: "5px"
+      },
     });
-    var sec = Section({}, [
-      View({
-        style: { textAlign: "center" }
+    const textBig = Text(
+      {
+        align: "center",
+        style: {
+          color: "#ffffff",
+          fontSize: "16px"
         },
-        Text({
-          align: 'center',
-        }, 'TOTPS:'))
-      ,
-      ...totpButtons])
-    return sec;
+        paragraph: true,
+      },
+      `${element.issuer}: ${element.client}`
+    );
+    const delButton = Button(
+      {
+        onClick: (el) => {
+          storage = storage.filter(x => storage.indexOf(x) != counter - 1)
+        },
+        style: {
+          backgroundColor: "#ba181b",
+          fontSize: "20px",
+          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: "flex"
+      }}, [textInput, delButton])]
+    );
+    totpEntrys.push({ text: text, view: view });
+    counter++;
+  });
+
+  return totpEntrys.map(x => x.view);
+}