frontend: profile test forwarding

crates/frontend/package-lock.json

@@ -9,6 +9,7 @@
             "version": "0.0.0",
             "dependencies": {
                 "autoprefixer": "^10.4.18",
+                "axios": "^1.6.8",
                 "postcss": "^8.4.35",
                 "tailwindcss": "^3.4.1",
                 "vue": "^3.3.11",
@@ -1419,6 +1420,11 @@
             "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
             "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
         },
+        "node_modules/asynckit": {
+            "version": "0.4.0",
+            "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+            "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+        },
         "node_modules/autoprefixer": {
             "version": "10.4.18",
             "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.18.tgz",
@@ -1455,6 +1461,16 @@
                 "postcss": "^8.1.0"
             }
         },
+        "node_modules/axios": {
+            "version": "1.6.8",
+            "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
+            "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
+            "dependencies": {
+                "follow-redirects": "^1.15.6",
+                "form-data": "^4.0.0",
+                "proxy-from-env": "^1.1.0"
+            }
+        },
         "node_modules/balanced-match": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -1620,6 +1636,17 @@
             "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
             "dev": true
         },
+        "node_modules/combined-stream": {
+            "version": "1.0.8",
+            "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+            "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+            "dependencies": {
+                "delayed-stream": "~1.0.0"
+            },
+            "engines": {
+                "node": ">= 0.8"
+            }
+        },
         "node_modules/commander": {
             "version": "4.1.1",
             "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -1692,6 +1719,14 @@
                 }
             }
         },
+        "node_modules/delayed-stream": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+            "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+            "engines": {
+                "node": ">=0.4.0"
+            }
+        },
         "node_modules/didyoumean": {
             "version": "1.2.2",
             "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -1833,6 +1868,25 @@
                 "node": ">=8"
             }
         },
+        "node_modules/follow-redirects": {
+            "version": "1.15.6",
+            "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+            "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
+            "funding": [
+                {
+                    "type": "individual",
+                    "url": "https://github.com/sponsors/RubenVerborgh"
+                }
+            ],
+            "engines": {
+                "node": ">=4.0"
+            },
+            "peerDependenciesMeta": {
+                "debug": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/foreground-child": {
             "version": "3.1.1",
             "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.1.1.tgz",
@@ -1848,6 +1902,19 @@
                 "url": "https://github.com/sponsors/isaacs"
             }
         },
+        "node_modules/form-data": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+            "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+            "dependencies": {
+                "asynckit": "^0.4.0",
+                "combined-stream": "^1.0.8",
+                "mime-types": "^2.1.12"
+            },
+            "engines": {
+                "node": ">= 6"
+            }
+        },
         "node_modules/fraction.js": {
             "version": "4.3.7",
             "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -2160,6 +2227,25 @@
                 "node": ">=8.6"
             }
         },
+        "node_modules/mime-db": {
+            "version": "1.52.0",
+            "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+            "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
+        "node_modules/mime-types": {
+            "version": "2.1.35",
+            "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+            "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+            "dependencies": {
+                "mime-db": "1.52.0"
+            },
+            "engines": {
+                "node": ">= 0.6"
+            }
+        },
         "node_modules/minimatch": {
             "version": "9.0.3",
             "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
@@ -2531,6 +2617,11 @@
             "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
             "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
         },
+        "node_modules/proxy-from-env": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+            "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+        },
         "node_modules/queue-microtask": {
             "version": "1.2.3",
             "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",

crates/frontend/package.json

@@ -12,6 +12,7 @@
     },
     "dependencies": {
         "autoprefixer": "^10.4.18",
+        "axios": "^1.6.8",
         "postcss": "^8.4.35",
         "tailwindcss": "^3.4.1",
         "vue": "^3.3.11",

crates/frontend/src/components/Login.vue

@@ -1,23 +1,37 @@
 <script setup lang="ts">
+import { ref } from 'vue';
+import router from '@/router';
+
 const email = defineModel("email");
 const password = defineModel("password");
+const errorMessage = ref(null);
 
 async function login() {
-    const response = await fetch(
+    await fetch(import.meta.hot ? "http://localhost:54600/api/v1/login_user" : "/api/v1/login_user", {
-        "http://0.0.0.0:54600/api/v1/login_user",
+        method: "POST",
-        {
+        headers: {
-            method: "POST",
+            "Content-Type": "application/json",
-            headers: {
+            //"Access-Control-Allow-Origin": "*"
-                "Content-Type": "application/json",
+        },
-            },
+        credentials: "include",
-            credentials: "include",
+        //mode: "cors",
-            mode: "cors",
+        body: JSON.stringify({ email: email.value, password: password.value })
-            body: JSON.stringify({ email: email.value, password: password.value })
+    })
-        }
+        .then(async response => {
-    );
+            //const isJson = response.headers.get('content-type')?.includes('application/json');
+            const data = await response.json();
 
-    let { status, token } = await response.json();
+            if (!response.ok) {
-    console.log(status);
+                const error = (data && data.message) || response.status;
+                return Promise.reject(error);
+            }
+
+            router.push({ path: '/me' });
+        })
+        .catch(error => {
+            errorMessage.value = error;
+            console.error(error);
+        });
 };
 </script>
 
@@ -41,5 +55,7 @@ async function login() {
                     In</button>
             </div>
         </form>
+        <p v-if="errorMessage" class="text-center pt-3 pb-3 bg-orange-900 rounded border border-orange-700">{{
+                    errorMessage }}</p>
     </div>
 </template>

crates/frontend/src/main.ts

@@ -4,6 +4,8 @@ import router from '@/router';
 
 import '@/assets/style.css';
 
+import Me from '@/views/Me.vue'
+import Home from '@/views/Home.vue'
 createApp(App)
     .use(router)
     .mount('#app');

crates/frontend/src/router.ts

@@ -4,7 +4,8 @@ const router = createRouter({
     history: createWebHistory(),
     routes: [
         { path: '/', component: () => import('./views/Home.vue') },
-        { path: '/user/login', component: () => import('./views/SignIn.vue') }
+        { path: '/user/login', component: () => import('./views/SignIn.vue') },
+        { path: '/me', component: () => import('./views/Me.vue') }
     ]
 });
 

crates/frontend/src/views/Me.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import Base from '@/views/Base.vue';
+import { ref, onMounted } from 'vue';
+import axios from 'axios';
+
+const email = ref(null);
+const name = ref(null);
+const is_admin = ref(null);
+const errorMessage = ref(null);
+
+onMounted(async () => {
+    const asd = await fetch(import.meta.hot ? "http://localhost:54600/api/v1/me" : "/api/v1/me", {
+        method: "GET",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        credentials: "include",
+        mode: "cors",
+    })
+        .then(async response => {
+            const isJson = response.headers.get('content-type')?.includes('application/json');
+            const data = isJson && await response.json();
+
+            if (!response.ok) {
+                const error = (data && data.message) || response.status;
+                return Promise.reject(error);
+            }
+
+            name.value = data.data.user.name;
+            email.value = data.data.user.email;
+            is_admin.value = data.data.user.is_admin;
+        })
+        .catch(error => {
+            errorMessage.value = error;
+            console.error("Error occured:", error);
+        });
+})
+</script>
+
+<template>
+    <Base>
+    <p v-if="errorMessage" class="text-center pt-3 pb-3 bg-orange-900 rounded border border-orange-700">{{
+        errorMessage }}</p>
+    <p>{{ name }}</p>
+    <p>{{ email }}</p>
+    <p>{{ is_admin }}</p>
+    </Base>
+</template>