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,25 +66,20 @@ def get_rpc_config():
 # Route to update the RPC configuration
 @app.route("/update_rpc_config", methods=["POST"])
 def update_rpc_config():
+    try:
+        # Extract RPC config from the POST request
         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
+        # Update localStorage with the new values
-    # You may want to perform validation or error handling here
+        response = jsonify({"message": "RPC configuration updated successfully."})
-
+        response.set_cookie("rpcHost", value=rpc_host)
-    # For demonstration purposes, let's update the configuration and return success
+        response.set_cookie("rpcPort", value=rpc_port)
-    try:
+        response.set_cookie("rpcUser", value=rpc_user)
-        with open("rpc_config.json", "w") as config_file:
+        response.set_cookie("rpcPassword", value=rpc_password)
-            config = {
+        return response
-                "rpc_host": rpc_host,
-                "rpc_port": rpc_port,
-                "rpc_user": rpc_user,
-                "rpc_password": rpc_password,
-            }
-            json.dump(config, config_file)
-        return jsonify({"message": "RPC configuration updated successfully."})
     except Exception as e:
         return jsonify({"message": f"Error updating RPC configuration: {str(e)}"})
 

app/static/java/rpcResult.js

@@ -1,19 +1,43 @@
+// Function to fetch and display RPC config
+function fetchRPCConfig() {
     fetch('/get_rpc_config')
         .then(response => response.json())
         .then(data => {
-        document.getElementById('rpcHost').value = data.rpcHost;
+            // Check if the config exists in localStorage, if not, use the fetched data
-        document.getElementById('rpcPort').value = data.rpcPort;
+            const rpcHost = localStorage.getItem('rpcHost') || data.rpcHost;
-        document.getElementById('rpcUser').value = data.rpcUser;
+            const rpcPort = localStorage.getItem('rpcPort') || data.rpcPort;
-        document.getElementById('rpcPassword').value = data.rpcPassword;
+            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);
         });
+}
 
-    document.getElementById('rpcConfigForm').addEventListener('submit', function(event) {
+// Function to save RPC config to localStorage and update the server
-        event.preventDefault();
+function saveRPCConfig() {
-        const form = event.target;
+    const rpcHost = document.getElementById('rpcHost').value;
-        const formData = new FormData(form);
+    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',
@@ -26,4 +50,15 @@ fetch('/get_rpc_config')
     .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;