feat!: add totp by link "otpauth" function implemented

setting/index.js

@@ -1,10 +1,31 @@
+import { getTOTPByLink } from './utils/queryParser.js'
+
 let _props = null;
 
 AppSettingsPage({
   build(props) {
     _props = props;
-    const storage = props.settingsStorage.getItem("TOTPs");
-    const totpEntrys = GetTOTPList(storage);
+    const storage = props.settingsStorage.getItem("TOTPs")
+    const totpEntrys = GetTOTPList(storage)
+    const createButton = TextInput({
+      placeholder: "otpauth://",
+      label: "Add new OTP Link",
+      onChange: (changes) => {
+        storage.push(getTOTPByLink(changes))
+        updateStorage(storage)
+      },
+      labelStyle: {
+        backgroundColor: "#14213D",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        margin: "10px",
+        flexGrow: 1,
+        fontSize: "20px",
+        color: "#FFFFFF",
+        borderRadius: "5px"
+      }
+    });
 
     var body = Section(
       {
@@ -34,7 +55,8 @@ AppSettingsPage({
             "TOTPS:"
           )
         ),
-        ...totpEntrys
+        ...totpEntrys,
+        createButton
       ]
     );
     return body;
@@ -47,8 +69,12 @@ function GetTOTPList(storage){
   storage.forEach((element) => {
     const elementId = counter;
     const textInput = TextInput({
-      placeholder: "otplink",
+      placeholder: "otpauth://",
       label: "Change OTP link",
+      onChange: (changes) => {
+        storage[elementId] = getTOTPByLink(changes)
+        updateStorage(storage)
+      },
       labelStyle: {
         backgroundColor: "#14213D",
         textAlign: "center",
@@ -75,7 +101,7 @@ function GetTOTPList(storage){
     );
     const delButton = Button(
       {
-        onClick: (el) => {
+        onClick: () => {
           storage = storage.filter(x => storage.indexOf(x) != elementId)
           updateStorage(storage)
         },