Login finished

frontend/src/components/HelloWorld.vue

@@ -1,54 +0,0 @@
-<script setup>
-    defineProps({
-        msg: {
-            type: String,
-            required: true
-        }
-    });
-</script>
-
-<template>
-    <div class="greetings">
-        <h1 class="green">{{ msg }}</h1>
-        <h3>
-            You’ve successfully created a project with
-            <a
-                href="https://vitejs.dev/"
-                target="_blank"
-                rel="noopener"
-                >Vite</a
-            >
-            +
-            <a
-                href="https://vuejs.org/"
-                target="_blank"
-                rel="noopener"
-                >Vue 3</a
-            >.
-        </h3>
-    </div>
-</template>
-
-<style scoped>
-    h1 {
-        font-weight: 500;
-        font-size: 2.6rem;
-        top: -10px;
-    }
-
-    h3 {
-        font-size: 1.2rem;
-    }
-
-    .greetings h1,
-    .greetings h3 {
-        text-align: center;
-    }
-
-    @media (min-width: 1024px) {
-        .greetings h1,
-        .greetings h3 {
-            text-align: left;
-        }
-    }
-</style>

frontend/src/components/TheWelcome.vue

@@ -1,179 +0,0 @@
-<script setup>
-import WelcomeItem from './WelcomeItem.vue';
-import DocumentationIcon from './icons/IconDocumentation.vue';
-import ToolingIcon from './icons/IconTooling.vue';
-import EcosystemIcon from './icons/IconEcosystem.vue';
-import CommunityIcon from './icons/IconCommunity.vue';
-import SupportIcon from './icons/IconSupport.vue';
-</script>
-
-<template>
-    <!-- <div data-testid="greetings"><h1>You did it!</h1></div>
-
-    <WelcomeItem>
-        <template #icon>
-            <DocumentationIcon />
-        </template>
-        <template #heading>Documentation</template>
-
-        Vue’s
-        <a
-            href="https://vuejs.org/"
-            target="_blank"
-            class="font-medium text-primary hover:underline"
-            rel="noopener"
-            >official documentation</a
-        >
-        provides you with all information you need to get started.
-    </WelcomeItem>
-
-    <WelcomeItem>
-        <template #icon>
-            <ToolingIcon />
-        </template>
-        <template #heading>Tooling</template>
-
-        This project is served and bundled with
-        <a
-            href="https://vitejs.dev/guide/features.html"
-            target="_blank"
-            class="font-medium text-primary hover:underline"
-            rel="noopener"
-            >Vite</a
-        >. The recommended IDE setup is
-        <a
-            href="https://code.visualstudio.com/"
-            target="_blank"
-            class="font-medium text-primary hover:underline"
-            rel="noopener"
-            >VSCode</a
-        >
-        +
-        <a
-            href="https://github.com/johnsoncodehk/volar"
-            target="_blank"
-            class="font-medium text-primary hover:underline"
-            rel="noopener"
-            >Volar</a
-        >. If you need to test your components and web pages, check out
-        <a
-            href="https://www.cypress.io/"
-            target="_blank"
-            class="font-medium text-primary hover:underline"
-            rel="noopener"
-            >Cypress</a
-        >
-        and
-        <a
-            href="https://on.cypress.io/component"
-            target="_blank"
-            class="font-medium text-primary hover:underline"
-            >Cypress Component Testing</a
-        >.
-
-        <br />
-
-        More instructions are available in <code>README.md</code>.
-    </WelcomeItem>
-
-    <WelcomeItem>
-        <template #icon>
-            <EcosystemIcon />
-        </template>
-        <template #heading>Ecosystem</template>
-
-        Get official tools and libraries for your project:
-        <a
-            href="https://pinia.vuejs.org/"
-            target="_blank"
-            class="font-medium text-primary hover:underline"
-            rel="noopener"
-            >Pinia</a
-        >,
-        <a
-            href="https://router.vuejs.org/"
-            target="_blank"
-            class="font-medium text-primary hover:underline"
-            rel="noopener"
-            >Vue Router</a
-        >,
-        <a
-            href="https://test-utils.vuejs.org/"
-            target="_blank"
-            class="font-medium text-primary hover:underline"
-            rel="noopener"
-            >Vue Test Utils</a
-        >, and
-        <a
-            href="https://github.com/vuejs/devtools"
-            target="_blank"
-            class="font-medium text-primary hover:underline"
-            rel="noopener"
-            >Vue Dev Tools</a
-        >. If you need more resources, we suggest paying
-        <a
-            href="https://github.com/vuejs/awesome-vue"
-            target="_blank"
-            class="font-medium text-primary hover:underline"
-            rel="noopener"
-            >Awesome Vue</a
-        >
-        a visit.
-    </WelcomeItem>
-
-    <WelcomeItem>
-        <template #icon>
-            <CommunityIcon />
-        </template>
-        <template #heading>Community</template>
-
-        Got stuck? Ask your question on
-        <a
-            href="https://chat.vuejs.org"
-            target="_blank"
-            class="font-medium text-primary hover:underline"
-            rel="noopener"
-            >Vue Land</a
-        >, our official Discord server, or
-        <a
-            href="https://stackoverflow.com/questions/tagged/vue.js"
-            target="_blank"
-            class="font-medium text-primary hover:underline"
-            rel="noopener"
-            >StackOverflow</a
-        >. You should also subscribe to
-        <a
-            href="https://news.vuejs.org"
-            target="_blank"
-            class="font-medium text-primary hover:underline"
-            rel="noopener"
-            >our mailing list</a
-        >
-        and follow the official
-        <a
-            href="https://twitter.com/vuejs"
-            target="_blank"
-            class="font-medium text-primary hover:underline"
-            rel="noopener"
-            >@vuejs</a
-        >
-        twitter account for latest news in the Vue world.
-    </WelcomeItem>
-
-    <WelcomeItem>
-        <template #icon>
-            <SupportIcon />
-        </template>
-        <template #heading>Support Vue</template>
-
-        As an independent project, Vue relies on community backing for its sustainability. You can help us by
-        <a
-            href="https://vuejs.org/sponsor/"
-            target="_blank"
-            class="font-medium text-primary hover:underline"
-            rel="noopener"
-            >becoming a sponsor</a
-        >.
-    </WelcomeItem> -->
-
-</template>

frontend/src/components/WelcomeItem.vue

@@ -1,15 +0,0 @@
-<template>
-    <div class="item">
-        <i>
-            <slot name="icon"></slot>
-        </i>
-        <div class="details">
-            <h3>
-                <slot name="heading"></slot>
-            </h3>
-            <slot></slot>
-        </div>
-    </div>
-</template>
-
-<style scoped></style>

frontend/src/layout/AppLayout.vue

@@ -68,7 +68,6 @@ const isOutsideClicked = (event) => {
             </div>
             <app-footer></app-footer>
         </div>
-        <app-config></app-config>
         <div class="layout-mask"></div>
     </div>
 </template>

frontend/src/layout/AppMenu.vue

@@ -9,7 +9,6 @@ const model = ref([
         items: [
             { label: 'Dashboard', icon: 'pi pi-fw pi-home', to: '/home' },
             { label: 'Chart', icon: 'pi pi-fw pi-chart-bar', to: '/charts' }]
-
     }
 ]);
 </script>

frontend/src/main.js

@@ -10,6 +10,8 @@ import Chart from 'primevue/chart';
 import Dropdown from 'primevue/dropdown';
 import InputText from 'primevue/inputtext';
 import Password from 'primevue/password';
+import Ripple from 'primevue/ripple';
+import StyleClass from 'primevue/styleclass';
 import '@/assets/styles.scss';
 
 const app = createApp(App);
@@ -19,6 +21,9 @@ app.use(router);
 
 app.use(PrimeVue, { ripple: true });
 
+app.directive('ripple', Ripple);
+app.directive('styleclass', StyleClass);
+
 app.component('Button', Button);
 app.component('Chart', Chart);
 app.component('Dropdown', Dropdown);

frontend/src/router/index.js

@@ -3,6 +3,7 @@ import AppLayout from '@/layout/AppLayout.vue';
 import HomeView from '../views/HomeView.vue';
 import Landing from '../views/Landing.vue';
 import Login from '../views/Login.vue';
+import Chart from '@/views/menu/Chart.vue';
 
 const router = createRouter({
     history: createWebHistory(import.meta.env.BASE_URL),
@@ -27,8 +28,8 @@ const router = createRouter({
                 {
                     path: '/charts',
                     name: 'charts',
-                    component: () => import('@/views/menu/Chart.vue')
-                },
+                    component: Chart
+                }/* ,
                 {
                     path: '/about',
                     name: 'about',
@@ -37,7 +38,7 @@ const router = createRouter({
                     // which is lazy-loaded when the route is visited.
 
                     component: () => import('../views/AboutView.vue')
-                }
+                } */
             ]
         }
     ]

frontend/src/utils/Auth.js

@@ -0,0 +1,55 @@
+import { useRouter } from 'vue-router';
+import axios from 'axios';
+
+var auth = {
+    getTokenHeader() {
+        const token = localStorage.getItem('token');
+
+        var config = {
+            headers: { Authorization: `Bearer ${token}` }
+        };
+
+        return config;
+    },
+    checkToken(redirect = true, callback = null) {
+        const url = new URL(window.location.href);
+        const api = (url.port == "5173") ? "http://localhost:3001" : "/api";
+
+        const config = this.getTokenHeader();
+
+        const router = useRouter();
+        axios
+            .get(api + "/auth",
+                config
+            )
+            .then((response) => {
+                if (response.status === 204) {
+                    if (callback !== null) {
+                        callback(false);
+                    }
+                }
+                else {
+                    if (callback !== null) {
+                        callback(true);
+                    }
+                }
+            })
+            .catch((err) => {
+                if (err || !err) {
+                    if (redirect === true) {
+                        if (callback !== null) {
+                            callback(false);
+                        }
+                        router.replace("/");
+                    }
+                    else {
+                        if (callback !== null) {
+                            callback(false);
+                        }
+                    }
+                }
+            });
+    }
+}
+
+export default auth;

frontend/src/views/AboutView.vue

@@ -1,15 +0,0 @@
-<template>
-    <div class="about">
-        <h1>This is an about page</h1>
-    </div>
-</template>
-
-<style>
-    @media (min-width: 1024px) {
-        .about {
-            min-height: 100vh;
-            display: flex;
-            align-items: center;
-        }
-    }
-</style>

frontend/src/views/HomeView.vue

@@ -1,9 +1,18 @@
 <script setup>
-    import TheWelcome from '../components/TheWelcome.vue';
+import auth from '../utils/Auth';
+import { onMounted } from 'vue';
+
+onMounted(() => {
+    checkAuth();
+})
+
+const checkAuth = () => {
+    auth.checkToken(true);
+};
 </script>
 
 <template>
     <main>
-        <TheWelcome />
+
     </main>
 </template>

frontend/src/views/Landing.vue

@@ -1,8 +1,4 @@
 <script setup>
-import { useLayout } from '@/layout/composables/layout';
-import { computed } from 'vue';
-
-const { layoutConfig, contextPath } = useLayout();
 
 const smoothScroll = (id) => {
     document.querySelector(id).scrollIntoView({
@@ -10,9 +6,6 @@ const smoothScroll = (id) => {
     });
 };
 
-const logoUrl = computed(() => {
-    return `${contextPath}layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`;
-});
 </script>
 
 <template>
@@ -30,11 +23,10 @@ const logoUrl = computed(() => {
                     <ul
                         class="list-none p-0 m-0 flex lg:align-items-center select-none flex-column lg:flex-row cursor-pointer">
                         <li>
-                            <a @click="smoothScroll('#hero')"
-                                class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3 p-ripple" v-ripple
-                                href="home">
+                            <router-link to="/home"
+                                class="flex m-0 md:ml-5 px-0 py-3 text-900 font-medium line-height-3 p-ripple" v-ripple>
                                 <span>Home</span>
-                            </a>
+                            </router-link>
                         </li>
                         <li>
                             <a @click="smoothScroll('#features')"
@@ -58,11 +50,11 @@ const logoUrl = computed(() => {
                     </ul>
                     <div
                         class="flex justify-content-between lg:block border-top-1 lg:border-top-none surface-border py-3 lg:py-0 mt-3 lg:mt-0">
-                        <a href="/login">
+                        <router-link to="/login">
                             <Button label="Login"
                                 class="p-button-text p-button-rounded border-none font-light text-white line-height-2 bg-blue-500">
                             </Button>
-                        </a>
+                        </router-link>
                     </div>
 
                 </div>
@@ -105,8 +97,8 @@ const logoUrl = computed(() => {
                         <h2 class="line-height-1 text-900 text-4xl font-normal">Alai</h2>
                         <span class="text-700 text-2xl line-height-3 ml-0 md:ml-2" style="max-width: 650px">Alai is a
                             2D-based platform videogame made with a friendly and easy-to-use game engine called
-                            "Godot". Alai contains within the game a player registration menu and recollection of data
-                            for each playthrough so the data can be analyzed for future use</span>
+                            "Godot". Alai contains within the game a data harvest trait
+                            for each playthrough, with the purpose to analyze the information for future use</span>
                     </div>
                 </div>
 
@@ -119,7 +111,7 @@ const logoUrl = computed(() => {
                         <h2 class="line-height-1 text-900 text-4xl font-normal">Obelisk</h2>
                         <span class="text-700 text-2xl line-height-3 mr-0 md:mr-2" style="max-width: 650px">A compiled
                             and declarative self-made language with the purpose of the creation of an Artifitial
-                            Intelligence, inspired on the logical language "Prolog"</span>
+                            Intelligence, inspired by the logical language "Prolog"</span>
                     </div>
 
                     <div class="flex justify-content-end flex-order-1 sm:flex-order-2 col-12 lg:col-6 bg-yellow-100 p-0"

frontend/src/views/Login.vue

@@ -1,9 +1,31 @@
 <script setup>
 import { ref } from 'vue';
-
+import axios from 'axios';
 const username = ref('');
 const password = ref('');
 
+
+async function onLoginClick() {
+    var login =
+    {
+        username: username.value,
+        password: password.value
+    };
+    try {
+        const response = await axios.post(`http://localhost:3001/login`, login);
+        console.log(response);
+        if (response.status === 200) {
+            localStorage.setItem('token', response.data.token);
+        }
+    }
+    catch (error) {
+        console.error(error);
+    }
+
+}
+
+
+
 </script>
 
 <template>
@@ -27,7 +49,9 @@ const password = ref('');
                         <Password id="password1" v-model="password" placeholder="Password" :toggleMask="true"
                             class="w-full mb-3" inputClass="w-full" inputStyle="padding:1rem" :feedback="false">
                         </Password>
-                        <Button label="Log In" class="w-full p-3 text-xl"></Button>
+                        <router-link to="/home">
+                            <Button label="Log In" class="w-full p-3 text-xl" @click="onLoginClick()"></Button>
+                        </router-link>
                     </div>
                 </div>
             </div>

frontend/src/views/menu/Chart.vue

@@ -1,6 +1,7 @@
 <script setup>
-import { ref, watch } from 'vue';
+import { ref, watch, onMounted } from 'vue';
 import { useLayout } from '@/layout/composables/layout';
+import auth from '../../utils/Auth';
 
 const { layoutConfig } = useLayout();
 let documentStyle = getComputedStyle(document.documentElement);
@@ -11,7 +12,6 @@ let surfaceBorder = documentStyle.getPropertyValue('--surface-border');
 const lineData = ref(null);
 const lineOptions = ref(null);
 
-
 const setColorOptions = () => {
     documentStyle = getComputedStyle(document.documentElement);
     textColor = documentStyle.getPropertyValue('--text-color');
@@ -80,6 +80,13 @@ watch(
     { immediate: true }
 );
 
+onMounted(() => {
+    checkAuth();
+})
+
+const checkAuth = () => {
+    auth.checkToken(true);
+};
 </script>
 
 <template>

package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "axios": "^1.2.6"
+  }
+}

yarn.lock

@@ -0,0 +1,60 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+  integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
+
+axios@^1.2.6:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.2.6.tgz#eacb6d065baa11bad5959e7ffa0cb6745c65f392"
+  integrity sha512-rC/7F08XxZwjMV4iuWv+JpD3E0Ksqg9nac4IIg6RwNuF0JTeWoCo/mBNG54+tNhhI11G3/VDRbdDQTs9hGp4pQ==
+  dependencies:
+    follow-redirects "^1.15.0"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
+combined-stream@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
+  integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
+  dependencies:
+    delayed-stream "~1.0.0"
+
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+  integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
+
+follow-redirects@^1.15.0:
+  version "1.15.2"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13"
+  integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
+
+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
+mime-db@1.52.0:
+  version "1.52.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
+  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
+
+mime-types@^2.1.12:
+  version "2.1.35"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+  dependencies:
+    mime-db "1.52.0"
+
+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==