From a1afcacfe5ddf7efac1a2da63499b76a14bc530a Mon Sep 17 00:00:00 2001
From: lwcrosier <lwc5402@psu.edu>
Date: Wed, 3 Dec 2025 21:25:58 -0500
Subject: [PATCH] 12/03/2025

---
 Notes                      | 26 ++++++++++++++
 caddy-admin.json           | 12 +++++++
 caddy-admin.sh             | 12 +++++++
 src/App.vue                | 14 +++++++-
 src/getConfig.js           |  0
 src/main.js                |  4 +++
 src/router/index.js        |  2 ++
 src/views/ConfigView.vue   |  5 ---
 src/views/HomeView.vue     | 71 ++++++++++++++++++++++++++++++++++++--
 src/views/HomeView.vue.bak |  5 +++
 10 files changed, 143 insertions(+), 8 deletions(-)
 create mode 100644 Notes
 create mode 100644 caddy-admin.json
 create mode 100644 caddy-admin.sh
 create mode 100644 src/getConfig.js
 delete mode 100644 src/views/ConfigView.vue
 create mode 100644 src/views/HomeView.vue.bak

diff --git a/Notes b/Notes
new file mode 100644
index 0000000..11b8b8c
--- /dev/null
+++ b/Notes
@@ -0,0 +1,26 @@
+Setting up a CORS proxy in a Vue.js application is typically done during development to bypass Cross-Origin Resource Sharing (CORS) restrictions. This is achieved using the devServer.proxy option in your vue.config.js file.
+Steps to set up a CORS proxy in Vue.js:
+Create vue.config.js: If you don't already have one, create a vue.config.js file in the root of your Vue project (at the same level as package.json).
+Configure the proxy: Add the devServer.proxy configuration within module.exports in vue.config.js.
+JavaScript
+
+    // vue.config.js
+    module.exports = {
+      devServer: {
+        proxy: {
+          // Proxy all requests starting with '/api' to your backend server
+          '^/api': {
+            target: 'http://localhost:3000', // Replace with your backend server URL
+            changeOrigin: true, // Needed for virtual hosted sites
+            // pathRewrite: { '^/api': '' } // Optional: Remove '/api' prefix from the request path sent to the backend
+          },
+          // You can add more proxy rules for different paths if needed
+          // '^/another-path': {
+          //   target: 'http://another-backend.com',
+          //   changeOrigin: true,
+          // },
+        },
+        // For simpler cases where you want to proxy all unknown requests to a single backend
+        // proxy: 'http://localhost:4000',
+      },
+    };
\ No newline at end of file
diff --git a/caddy-admin.json b/caddy-admin.json
new file mode 100644
index 0000000..571b27c
--- /dev/null
+++ b/caddy-admin.json
@@ -0,0 +1,12 @@
+{
+  "admin": {
+    "listen": "localhost:2019",
+    "enforce_origin": true,
+    "origins": [
+      "*",
+      "http://localhost:2019",
+      "http://localhost:5173",
+      "http://*:*"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/caddy-admin.sh b/caddy-admin.sh
new file mode 100644
index 0000000..287a2a3
--- /dev/null
+++ b/caddy-admin.sh
@@ -0,0 +1,12 @@
+{
+    admin: 2019 {
+        enforce_origin: "false"
+    }
+}
+
+Can run the following command to turn it off:
+
+
+curl -X PATCH http://localhost:2019/config/admin/enforce_origin -H "Content-Type: application/json"  -d 'false'
+
+
diff --git a/src/App.vue b/src/App.vue
index 8c52d24..00f3e25 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,17 @@
 <template>
-  <RouterView />
+  <div class="gradient-background">
+    <RouterView />
+  </div>
 </template>
 
+<style scoped>
+  .gradient-background {
+    background-image: linear-gradient(to right, #ff7e5f, #feb47b);
+    /* You can adjust direction and colors as needed */
+    min-height: 100vh; /* Example: to fill the viewport height */
+    display: flex;
+    color: white;
+    }
+</style>
+
 <script></script>
\ No newline at end of file
diff --git a/src/getConfig.js b/src/getConfig.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/main.js b/src/main.js
index 5998bfd..e17af22 100644
--- a/src/main.js
+++ b/src/main.js
@@ -11,4 +11,8 @@ const app = createApp(App)
 app.use(createPinia())
 app.use(router)
 
+app.config.errorHandler = (err) => {
+    console.log(err);
+}
+
 app.mount('#app')
diff --git a/src/router/index.js b/src/router/index.js
index 55855ea..f44702d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -9,11 +9,13 @@ const router = createRouter({
       name: 'home',
       component: HomeView,
     },
+    /*
     {
       path: '/config',
       name: 'Config',
       component: () => import('../views/ConfigView.vue')
     }
+    */
   ],
 })
 
diff --git a/src/views/ConfigView.vue b/src/views/ConfigView.vue
deleted file mode 100644
index aeca395..0000000
--- a/src/views/ConfigView.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-    <div class="container">
-        <button class="btn btn-primary">Get Config</button>
-    </div>
-</template>
\ No newline at end of file
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 43d1f29..353590b 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,5 +1,72 @@
 <template>
-  <div></div>
+    <div class="container">
+        <button class="btn btn-primary" @click="fetchData">Get Config</button>
+    <br/>
+
+    <p> {{ myData }}</p>
+
+    </div>
+
 </template>
 
-<script setup></script>
\ No newline at end of file
+<script>
+
+    export default {
+        data() {
+            return {
+                myData: null,
+                isLoading: false,
+                error: null
+            };
+        },
+        methods: {
+            async fetchData() {
+                this.isLoading = true;
+                this.error = null;
+            
+                let fetch_data = null;
+
+                fetch('http://localhost:2019/config/', {
+                        mode: 'cors',
+                        method: 'GET'
+                    })
+                //.then(response => console.log(response))
+                .then(response => response.json())
+                //then(responseJson => fetch_data = responseJson)
+                //.then(data => console.log(data))
+                .then(data => {
+                    fetch_data = data;
+                    this.myData = data;
+                })
+                .catch(error => {
+                        console.error('Error:', error);
+                        this.error = error;
+                    }
+                );
+
+                // Wait for the above fetch request to complete.  
+                // Keep waiting until fetch completes or there is an error
+                /*
+                var isCompleted = false;
+                do {
+                    await new Promise(r => setTimeout(r, 2000));
+                    if (fetch_data !== null || this.error !== null) {
+                        isCompleted = true;
+                    }
+                } while (isCompleted === false);
+                */
+
+                //const response = fetch('http://localhost:2019/config/');
+                //if (!response.ok){
+                //    throw new Error (`Http error! status: ${response.status}`);
+                //}
+
+                //const config = (await response).json();
+                //console.log('fetched caddy config!');
+
+
+            }
+        }
+    }
+
+</script>
\ No newline at end of file
diff --git a/src/views/HomeView.vue.bak b/src/views/HomeView.vue.bak
new file mode 100644
index 0000000..83b29d7
--- /dev/null
+++ b/src/views/HomeView.vue.bak
@@ -0,0 +1,5 @@
+<template>
+  <div></div>
+</template>
+
+<script></script>
\ No newline at end of file