feat: username input and small fixes

frontend/quasar.config.js

@@ -93,7 +93,7 @@ export default defineConfig((/* ctx */) => {
       // directives: [],
 
       // Quasar plugins
-      plugins: [],
+      plugins: ["Notify"],
     },
 
     // animations: 'all', // --- includes all animations

frontend/src/boot/axios.js

@@ -0,0 +1,13 @@
+import { boot } from 'quasar/wrappers';
+import axios from 'axios';
+
+const api = axios.create({
+  baseURL: "https://localhost:5555"
+});
+
+export default boot(({ app }) => {
+  app.config.globalProperties.$axios = axios;
+  app.config.globalProperties.$api = api;
+});
+
+export { api };

frontend/src/boot/healthcheck.js

@@ -1,11 +1,11 @@
-import axios from "axios";
+import { api } from 'src/boot/axios';
 
 export default async () => {
 
 
     try {
 
-        const response = await axios.get("https://localhost:5555/api/healthcheck");
+        const response = await api.get("/api/healthcheck");
 
         if (!response.data || response.data.status !== "ok") {
             console.log("a")

frontend/src/layouts/MainLayout.vue

@@ -19,6 +19,12 @@
           </q-item-section>
         </q-item>
 
+        <q-item clickable v-ripple to="/user/username">
+          <q-item-section>
+            Set Username
+          </q-item-section>
+        </q-item>
+
         <q-expansion-item
           label="Tests"
           icon="folder"

frontend/src/pages/user/usernamePage.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="q-pa-md flex flex-center">
+    <q-card
+      class="q-pa-lg shadow-3"
+      style="width: 400px; max-width: 90vw; border-radius: 16px;"
+    >
+      <q-card-section class="text-center">
+        <div class="text-h6 q-mt-md">Enter Username</div>
+      </q-card-section>
+
+      <q-card-section>
+        <q-input
+          v-model="user.username"
+          filled
+          label="Username"
+          maxlength="32"
+          counter
+          dense
+          style="border-radius: 6px;"
+        >
+          <template #prepend>
+            <q-icon name="account_circle" />
+          </template>
+        </q-input>
+      </q-card-section>
+
+      <q-card-actions align="center">
+        <q-btn
+          label="Go!"
+          color="primary"
+          @click="setUsername"
+          rounded
+          unelevated
+          size="lg"
+          class="full-width"
+        />
+      </q-card-actions>
+    </q-card>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useQuasar } from "quasar";
+import { api } from 'src/boot/axios';
+
+const $q = useQuasar();
+const user = ref({ username:"", id:0 });
+
+async function setUsername() {
+    if (!user.value.username) {
+        $q.notify({
+            type: "negative",
+            message: "Please enter a username!",
+        });
+        return;
+    }
+
+    api.post('/api/users', {
+      username: user.value.username+"aaaaaa"
+    })
+    
+    .then(function (response) {
+      console.log(response);
+
+      localStorage.setItem("username", user.value.username);
+      localStorage.setItem("id", user.value.id);
+
+      $q.notify({
+        type: "positive",
+        message: `Success!`,
+      });
+
+    })
+    
+    .catch(function (error) {
+      console.log(error);
+      window.location.href = '/#/error?msg=API%20unreachable';
+    });
+}
+</script>

frontend/src/router/routes.js

@@ -8,6 +8,8 @@ const routes = [
       { path: 'test_NumbersPage', component: () => import('src/pages/test/testNumbersPage.vue') },
       { path: 'test_WebSpeechApi', component: () => import('src/pages/test/testWebSpeechApi.vue') },
 
+      { path: 'user/username', component: () => import('src/pages/user/usernamePage.vue') },
+
       { path: 'error', component: () => import('pages/ErrorPage.vue') }
     ],
   },