saving rpc credentials in localstorage, now rpc credentials are stored client side

app/app.py

@@ -7,6 +7,12 @@ from src import create_wallet, read_rpc_config
 
 app = Flask(__name__, static_folder="static")
 
+# Function to establish an RPC connection to the Bitcoin node
+def connect_to_node(rpc_host, rpc_port, rpc_user, rpc_password):
+    rpc_connection = AuthServiceProxy(
+        f"http://{rpc_user}:{rpc_password}@{rpc_host}:{rpc_port}"
+    )
+    return rpc_connection
 
 @app.route("/")
 def show_wallet_form():
@@ -19,14 +25,20 @@ def handle_create_wallet():
     result = create_wallet(wallet_name)
     return jsonify({"message": result})
 
-
+# Fetch wallets route using RPC credentials from localStorage
 @app.route("/wallets", methods=["GET"])
 def list_wallets():
     try:
-        rpc_host, rpc_port, rpc_user, rpc_password = read_rpc_config()
+        # Retrieve RPC credentials from localStorage (cookies)
-        rpc_connection = AuthServiceProxy(
+        rpc_host = request.cookies.get("rpcHost")
-            f"http://{rpc_user}:{rpc_password}@{rpc_host}:{rpc_port}"
+        rpc_port = request.cookies.get("rpcPort")
-        )
+        rpc_user = request.cookies.get("rpcUser")
+        rpc_password = request.cookies.get("rpcPassword")
+
+        # Establish connection to Bitcoin node using RPC credentials
+        rpc_connection = connect_to_node(rpc_host, rpc_port, rpc_user, rpc_password)
+
+        # Fetch wallet list using the established connection
         wallet_list = rpc_connection.listwallets()
         return jsonify({"wallets": wallet_list})  # Return JSON response with wallets
     except JSONRPCException as json_exception:
@@ -37,16 +49,16 @@ def list_wallets():
         return jsonify({"error": error_message})  # Return JSON error response
 
 
+
 # Route to get the current RPC configuration
 @app.route("/get_rpc_config", methods=["GET"])
 def get_rpc_config():
-    rpc_host, rpc_port, rpc_user, rpc_password = read_rpc_config()
     return jsonify(
         {
-            "rpcHost": rpc_host,
+            "rpcHost": request.cookies.get("rpcHost"),
-            "rpcPort": rpc_port,
+            "rpcPort": request.cookies.get("rpcPort"),
-            "rpcUser": rpc_user,
+            "rpcUser": request.cookies.get("rpcUser"),
-            "rpcPassword": rpc_password,
+            "rpcPassword": request.cookies.get("rpcPassword"),
         }
     )
 
@@ -54,28 +66,23 @@ def get_rpc_config():
 # Route to update the RPC configuration
 @app.route("/update_rpc_config", methods=["POST"])
 def update_rpc_config():
-    rpc_host = request.form["rpcHost"]
-    rpc_port = request.form["rpcPort"]
-    rpc_user = request.form["rpcUser"]
-    rpc_password = request.form["rpcPassword"]
-
-    # Update the RPC configuration file or database with the new values
-    # You may want to perform validation or error handling here
-
-    # For demonstration purposes, let's update the configuration and return success
     try:
-        with open("rpc_config.json", "w") as config_file:
+        # Extract RPC config from the POST request
-            config = {
+        rpc_host = request.form["rpcHost"]
-                "rpc_host": rpc_host,
+        rpc_port = request.form["rpcPort"]
-                "rpc_port": rpc_port,
+        rpc_user = request.form["rpcUser"]
-                "rpc_user": rpc_user,
+        rpc_password = request.form["rpcPassword"]
-                "rpc_password": rpc_password,
+
-            }
+        # Update localStorage with the new values
-            json.dump(config, config_file)
+        response = jsonify({"message": "RPC configuration updated successfully."})
-        return jsonify({"message": "RPC configuration updated successfully."})
+        response.set_cookie("rpcHost", value=rpc_host)
+        response.set_cookie("rpcPort", value=rpc_port)
+        response.set_cookie("rpcUser", value=rpc_user)
+        response.set_cookie("rpcPassword", value=rpc_password)
+        return response
     except Exception as e:
         return jsonify({"message": f"Error updating RPC configuration: {str(e)}"})
 
 
 if __name__ == "__main__":
-    app.run(debug=True)
+    app.run(debug=True)

app/static/java/rpcResult.js

@@ -1,29 +1,64 @@
-fetch('/get_rpc_config')
+// Function to fetch and display RPC config
-    .then(response => response.json())
+function fetchRPCConfig() {
-    .then(data => {
+    fetch('/get_rpc_config')
-        document.getElementById('rpcHost').value = data.rpcHost;
-        document.getElementById('rpcPort').value = data.rpcPort;
-        document.getElementById('rpcUser').value = data.rpcUser;
-        document.getElementById('rpcPassword').value = data.rpcPassword;
-    })
-    .catch(error => {
-        console.error('Error:', error);
-    });
-
-    document.getElementById('rpcConfigForm').addEventListener('submit', function(event) {
-        event.preventDefault();
-        const form = event.target;
-        const formData = new FormData(form);
-
-        fetch('/update_rpc_config', {
-            method: 'POST',
-            body: formData
-        })
         .then(response => response.json())
         .then(data => {
-            document.getElementById('rpcResult').innerHTML = data.message;
+            // Check if the config exists in localStorage, if not, use the fetched data
+            const rpcHost = localStorage.getItem('rpcHost') || data.rpcHost;
+            const rpcPort = localStorage.getItem('rpcPort') || data.rpcPort;
+            const rpcUser = localStorage.getItem('rpcUser') || data.rpcUser;
+            const rpcPassword = localStorage.getItem('rpcPassword') || data.rpcPassword;
+
+            document.getElementById('rpcHost').value = rpcHost;
+            document.getElementById('rpcPort').value = rpcPort;
+            document.getElementById('rpcUser').value = rpcUser;
+            document.getElementById('rpcPassword').value = rpcPassword;
         })
         .catch(error => {
             console.error('Error:', error);
         });
-    });
+}
+
+// Function to save RPC config to localStorage and update the server
+function saveRPCConfig() {
+    const rpcHost = document.getElementById('rpcHost').value;
+    const rpcPort = document.getElementById('rpcPort').value;
+    const rpcUser = document.getElementById('rpcUser').value;
+    const rpcPassword = document.getElementById('rpcPassword').value;
+
+    // Save to localStorage
+    localStorage.setItem('rpcHost', rpcHost);
+    localStorage.setItem('rpcPort', rpcPort);
+    localStorage.setItem('rpcUser', rpcUser);
+    localStorage.setItem('rpcPassword', rpcPassword);
+
+    // Update the server with the new config
+    const formData = new FormData();
+    formData.append('rpcHost', rpcHost);
+    formData.append('rpcPort', rpcPort);
+    formData.append('rpcUser', rpcUser);
+    formData.append('rpcPassword', rpcPassword);
+
+    fetch('/update_rpc_config', {
+        method: 'POST',
+        body: formData
+    })
+    .then(response => response.json())
+    .then(data => {
+        document.getElementById('rpcResult').innerHTML = data.message;
+    })
+    .catch(error => {
+        console.error('Error:', error);
+    });
+}
+
+// Call fetchRPCConfig function on page load to get the config
+document.addEventListener('DOMContentLoaded', function() {
+    fetchRPCConfig();
+});
+
+// Listen for form submission to update config
+document.getElementById('rpcConfigForm').addEventListener('submit', function(event) {
+    event.preventDefault();
+    saveRPCConfig();
+});

app/static/style/output.css

@@ -540,29 +540,33 @@ video {
   --tw-backdrop-sepia:  ;
 }
 
-.ml-4 {
+.static {
-  margin-left: 1rem;
+  position: static;
 }
 
 .mb-4 {
   margin-bottom: 1rem;
 }
 
-.mt-6 {
-  margin-top: 1.5rem;
-}
-
 .ml-2 {
   margin-left: 0.5rem;
 }
 
+.ml-4 {
+  margin-left: 1rem;
+}
+
+.mt-6 {
+  margin-top: 1.5rem;
+}
+
 .rounded-sm {
   border-radius: 0.125rem;
 }
 
-.bg-green-500 {
+.bg-green-600 {
   --tw-bg-opacity: 1;
-  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
+  background-color: rgb(22 163 74 / var(--tw-bg-opacity));
 }
 
 .bg-neutral-800 {
@@ -570,11 +574,6 @@ video {
   background-color: rgb(38 38 38 / var(--tw-bg-opacity));
 }
 
-.bg-green-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(22 163 74 / var(--tw-bg-opacity));
-}
-
 .bg-red-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(220 38 38 / var(--tw-bg-opacity));
@@ -588,11 +587,6 @@ video {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
-.text-lg {
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-}
-
 .text-xl {
   font-size: 1.25rem;
   line-height: 1.75rem;