Initialize VUE project with WS connection, main pages, and various small features

cista-front/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>

cista-front/src/views/ExplorerView.vue

@@ -0,0 +1,36 @@
+<template>
+  <FileExplorer></FileExplorer>
+</template>
+
+<script setup lang="ts">
+import { watchEffect } from 'vue'
+import { useDocumentStore } from '@/stores/documents'
+import Router from '@/router/index';
+import FileExplorer from '@/components/FileExplorer.vue';
+
+const documentStore = useDocumentStore()
+
+function isFile(path: string) {
+  if (path.includes('.') && !path.endsWith('.')) {
+    return true;
+  } else {
+    return false;
+  }
+}
+
+watchEffect(async () => {
+  const path = new String(Router.currentRoute.value.path) as string
+  const file = isFile(path)
+  if(!file){
+    documentStore.setActualDocument(path.toString())
+  }else {
+    documentStore.setActualDocumentFile(path)
+  }
+  setTimeout( () => {
+    documentStore.loading = false
+  }, 2000)
+})
+
+</script>
+
+<style scoped></style>

cista-front/src/views/HomeView.vue

@@ -1,9 +0,0 @@
-<script setup lang="ts">
-import TheWelcome from '../components/TheWelcome.vue'
-</script>
-
-<template>
-  <main>
-    <TheWelcome />
-  </main>
-</template>

cista-front/src/views/LoginView.vue

@@ -0,0 +1,46 @@
+<template>
+    <div class="login-container">
+        <a-form :model="loginForm">
+            <a-form-item label="Username" prop="username" :rules="[{ required: true, message: 'Please input your username!' }]">
+                <a-input v-model:value="loginForm.username" />
+            </a-form-item>
+            <a-form-item label="Password" prop="password" :rules="[{ required: true, message: 'Please input your password!' }]">
+                <a-input type="password" v-model:value="loginForm.password" />
+            </a-form-item>
+            <a-form-item>
+                <a-button type="primary" @click="login" class="button-login">Login</a-button>
+            </a-form-item>
+        </a-form>
+    </div>
+</template>
+  
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const loginForm = ref({
+    username: '',
+    password: '',
+});
+
+const login = () => {
+    
+};
+</script>
+  
+<style scoped>
+.login-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+.button-login {
+    background-color: var(--secondary-color);
+    color: var(--secondary-background);
+}
+.ant-btn-primary:not(:disabled):hover{
+    background-color: var(--blue-color);
+
+}
+</style>
+