Login, Download and visuals update

cista-front/src/components/FileExplorer.vue

@@ -1,5 +1,6 @@
 <template>
     <main>
+      <context-holder />
       <!-- <h2 v-if="!documentStore.loading && documentStore.error"> {{ documentStore.error }} </h2> -->
       <div class="carousel-container"  v-if="!documentStore.loading && documentStore.mainDocument[0] && documentStore.mainDocument[0].type === 'file'">
         <FileCarousel></FileCarousel>
@@ -32,13 +33,27 @@
               <template #content>
                 <div class="more-action">
                   <div class="action-container">
-                    <a-button type="text" class="action-button" :icon="h(ImportOutlined)"/>Open
+                    <a :href="`${record.type === 'folder'? linkBasePath+'#' : filesBasePath}/${record.name}`">
+                      <a-button type="text" class="action-button" :icon="h(ImportOutlined)"/> 
+                    </a>
+                    Open
+                  </div>
+                  <div v-if="record.type === 'folder-file'" class="action-container">
+                    <a :href="`${filesBasePath}/${record.name}`" download>
+                      <a-button type="text" class="action-button" :icon="h(DownloadOutlined)"/> 
+                    </a>
+                    Download
                   </div>
                   <div class="action-container">
-                    <a-button type="text" class="action-button" :icon="h(EditOutlined)"/> Rename
+                    <a-button type="text" class="action-button" @click="edit(record.key)" :icon="h(EditOutlined)"/> Rename
                   </div>
                   <div class="action-container">
-                    <a-button type="text" class="action-button" :icon="h(LinkOutlined)"/> Share
+                    <a-button 
+                      type="text" 
+                      class="action-button" 
+                      @click="share(`${record.type === 'folder'? linkBasePath+'/#' : filesBasePath}/${record.name}`)" 
+                      :icon="h(LinkOutlined)"
+                    /> Share
                   </div>
                   <div class="action-container">
                     <a-button type="text" class="action-button" :icon="h(CopyOutlined)"/> Copy
@@ -69,14 +84,14 @@
   import { EditOutlined, ImportOutlined, CheckOutlined,CopyOutlined, ScissorOutlined, LinkOutlined, DownloadOutlined, DeleteOutlined, EllipsisOutlined } from '@ant-design/icons-vue'
   import type { TableColumnsType } from 'ant-design-vue';
   import Router from '@/router/index';
+  import { message } from 'ant-design-vue';
   import type { Document, FolderDocument } from '@/repositories/Document';
   import FileCarousel from './FileCarousel.vue';
 
+  const [messageApi, contextHolder] = message.useMessage();
+
   type Key = string | number;
   const documentStore = useDocumentStore()
-  watchEffect(()=>{
-    console.log(documentStore.mainDocument)
-  })
   const editableData: UnwrapRef<Record<string, Document>> = reactive({});
   const state = reactive<{
     selectedRowKeys: Key[];
@@ -143,7 +158,10 @@
     Object.assign(documentStore.mainDocument.filter(item => key === item.key)[0], editableData[key]);
     delete editableData[key];
   };
-
+  const share = async (url : string) => {
+    await navigator.clipboard.writeText(location.origin + url)
+    messageApi.success("Link successfully copied to the clipboard");
+  }
   </script>
 
   <style>

cista-front/src/components/FileViewer.vue

@@ -30,11 +30,6 @@ import { url_document_get } from '@/repositories/Document';
 
 const dataURL = ref('')
 watchEffect(()=>{
-  console.log('😎😎😎😎')
-  console.log(url_document_get)
-  console.log(Router.currentRoute)
-  console.log(Router.currentRoute.value.path)
-  console.log('----------')
   dataURL.value = new URL(
     url_document_get + Router.currentRoute.value.path, 
     location.origin

cista-front/src/components/HeaderMain.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { useDocumentStore } from '@/stores/documents'
+import LoginModal from '@/components/LoginModal.vue'
 import UploadButton from '@/components/UploadButton.vue'
 import { InfoCircleOutlined, SettingOutlined, PlusSquareOutlined, SearchOutlined, DeleteOutlined, DownloadOutlined, FileAddFilled, LinkOutlined, FolderAddFilled, FileFilled, FolderFilled } from '@ant-design/icons-vue'
-import { h, ref, defineProps  } from 'vue';
+import { h, ref  } from 'vue';
 
 const documentStore = useDocumentStore()
 const searchQuery = ref<string>('')
@@ -94,8 +95,8 @@ function download(){
         </a-tooltip>
       </template>
     </div>
-
     <div class="actions-list">
+      <LoginModal></LoginModal>
       <template v-if="showSearchInput">
         <a-input-search
         v-model="searchQuery"

cista-front/src/components/LoginModal.vue

@@ -0,0 +1,90 @@
+<template>
+    <a-tooltip title="Login">
+        <template v-if="DocumentStore.isUserLogged">
+            <a-button @click="logout" type="text" class="action-button" :icon="h(UserDeleteOutlined)" />
+        </template>
+        <template v-else>
+            <a-button @click="showModal" type="text" class="action-button" :icon="h(UserOutlined)" />
+        </template>
+    </a-tooltip>
+    <a-modal v-model:open="DocumentStore.user.isOpenLoginModal" :confirm-loading="confirmLoading" okText="Login" @ok="login">
+        <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>
+                <h3 v-if="loginForm.error.length > 0" class="error-text">{{loginForm.error}}</h3>
+            </a-form>
+        </div>
+    </a-modal>
+</template>
+  
+<script lang="ts" setup>
+import { ref, h } from 'vue';
+import { UserOutlined, UserDeleteOutlined } from '@ant-design/icons-vue';
+import { useDocumentStore } from '@/stores/documents';
+import { loginUser, logoutUser } from '@/repositories/User';
+import type { ISimpleError } from '@/repositories/Client';
+
+const DocumentStore = useDocumentStore();
+const confirmLoading = ref<boolean>(false);
+
+const showModal = () => {
+    DocumentStore.user.isOpenLoginModal = true;
+};
+const logout = async () => {
+    try {
+        await logoutUser();
+    } catch (error) {} finally {
+        location.reload();
+    }
+}
+
+const loginForm = ref({
+    username: '',
+    password: '',
+    error: '',
+});
+
+const login = async () => {
+    try {
+        loginForm.value.error = '';
+        confirmLoading.value = true;
+        const user = await loginUser(loginForm.value.username, loginForm.value.password);
+        if(user){
+            location.reload();
+        }
+    } catch (error) {
+        const httpError = error as ISimpleError
+        if(httpError.name){
+            loginForm.value.error = httpError.message 
+        }
+    }finally{
+        confirmLoading.value = false;
+    }
+};
+</script>
+  
+<style scoped>
+.login-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 30vh;
+}
+.button-login {
+    background-color: var(--secondary-color);
+    color: var(--secondary-background);
+}
+.ant-btn-primary:not(:disabled):hover{
+    background-color: var(--blue-color);
+
+}
+.error-text {
+    color :var(--red-color)
+}
+</style>
+