add auth guard, hide register button after login

danielbednarz · May 14, 2022 · a067f82 · a067f82
1 parent b74d8f5
commit a067f82
Show file tree

Hide file tree

Showing 8 changed files with 76 additions and 13 deletions.
diff --git a/CloudDrive.Data.Repositories/Repositories/FileRepository.cs b/CloudDrive.Data.Repositories/Repositories/FileRepository.cs
@@ -15,7 +15,7 @@ public FileRepository(MainDatabaseContext context) : base(context)
 
         public async Task<List<FileDataDTO>> GetUserFiles(int userId)
         {
-            return await _context.Files.Where(x => x.UserId == userId).Select(x => new FileDataDTO
+            return await _context.Files.Where(x => x.UserId == userId && x.IsDeleted == false).Select(x => new FileDataDTO
             {
                 Id = x.Id,
                 Name = x.Name,

diff --git a/CloudDrive.Vue/src/components/FilesGrid.vue b/CloudDrive.Vue/src/components/FilesGrid.vue
@@ -16,6 +16,14 @@
         <template v-slot:item="props">
           <div class="q-pa-xs col-2">
             <q-card class="file-card bg-secondary text-black">
+              <q-card-actions class="delete-button" text-align="right">
+                <q-btn
+                  flat
+                  round
+                  icon="fa-solid fa-trash"
+                  @click="tryDelete(props.row.relativePath)"
+                />
+              </q-card-actions>
               <q-card-section class="text-center">
                 <i class="fa-solid fa-file text-h5"></i>
                 <div class="text-body2">{{ props.row.name }}</div>
@@ -76,7 +84,17 @@ export default {
   computed: {},
   methods: {
     ...mapActions(useDirectoryStore, ["getDirectoriesToSelectList"]),
-    ...mapActions(useFileStore, ["getUserFiles"]),
+    ...mapActions(useFileStore, ["getUserFiles", "deleteFile"]),
+    async tryDelete(relativePath) {
+      await this.deleteFile(relativePath);
+      this.getUserFiles().then((response) => {
+        this.files = response;
+        this.$q.notify({
+          type: "positive",
+          message: `Plik usunięty pomyślnie!`,
+        });
+      });
+    },
   },
   mounted() {
     this.getUserFiles().then((response) => {
@@ -97,4 +115,8 @@ export default {
   opacity: 1;
   cursor: pointer;
 }
+.delete-button {
+  padding: 0;
+  margin-left: auto;
+}
 </style>
diff --git a/CloudDrive.Vue/src/components/LoginForm.vue b/CloudDrive.Vue/src/components/LoginForm.vue
@@ -80,6 +80,10 @@ export default {
       connectToHub(this.currentUser.username, this.$q);
 
       this.closePopover();
+      this.$q.notify({
+        type: "info",
+        message: `Zalogowano pomyślnie`,
+      });
     },
   },
   mounted() {

diff --git a/CloudDrive.Vue/src/layouts/MainLayout.vue b/CloudDrive.Vue/src/layouts/MainLayout.vue
@@ -141,9 +141,10 @@ export default {
     tryLogout() {
       this.logout();
       this.$q.notify({
-        type: "positive",
-        message: `Wylogowano pomyślnie!`,
+        type: "info",
+        message: `Wylogowano pomyślnie`,
       });
+      this.$router.push({ name: "home" });
     },
   },
   mounted() {

diff --git a/CloudDrive.Vue/src/pages/IndexPage.vue b/CloudDrive.Vue/src/pages/IndexPage.vue
@@ -20,7 +20,8 @@
               class="q-mr-md"
             />
           </div> -->
-          <div>
+          <div v-if="loggedInUser.token"></div>
+          <div v-else>
             <q-btn
               color="secondary"
               text-color="black"
@@ -45,7 +46,7 @@
 <script>
 import MainContainer from "../components/MainContainer";
 import RegisterForm from "../components/RegisterForm";
-import { mapState } from "pinia";
+import { mapState, mapWritableState } from "pinia";
 import { useAuthenticationStore } from "../stores/authentication.js";
 
 export default {
@@ -55,12 +56,14 @@ export default {
     RegisterForm,
   },
   computed: {
-    ...mapState(useAuthenticationStore, ["user"]),
+    ...mapState(useAuthenticationStore, ["currentUser"]),
+    loggedInUser() {
+      return this.currentUser;
+    },
   },
   data() {
     return {
       isRegisterPopoverVisible: false,
-      currentUser: JSON.parse(localStorage.getItem("user")),
     };
   },
   methods: {

diff --git a/CloudDrive.Vue/src/router/index.js b/CloudDrive.Vue/src/router/index.js
@@ -35,10 +35,5 @@ export default route(function (/* { store, ssrContext } */) {
     ),
   });
 
-  // Router.beforeEach((to, from, next) => {
-  //   if (to.name == "upload") next();
-  //   else next({ name: "upload" });
-  // });
-
   return Router;
 });
diff --git a/CloudDrive.Vue/src/router/routes.js b/CloudDrive.Vue/src/router/routes.js
@@ -1,3 +1,5 @@
+import { Notify } from "quasar";
+
 const routes = [
   {
     path: "/",
@@ -11,11 +13,13 @@ const routes = [
       {
         path: "drive",
         name: "drive",
+        beforeEnter: (to, from, next) => authGuard(to, from, next),
         component: () => import("pages/DrivePage.vue"),
       },
       {
         path: "upload",
         name: "upload",
+        beforeEnter: (to, from, next) => authGuard(to, from, next),
         component: () => import("pages/UploadPage.vue"),
       },
     ],
@@ -27,4 +31,22 @@ const routes = [
   },
 ];
 
+function authGuard(to, from, next) {
+  let isAuthenticated = false;
+  if (localStorage.getItem("user")) {
+    isAuthenticated = true;
+  } else {
+    isAuthenticated = false;
+  }
+  if (isAuthenticated) {
+    next();
+  } else {
+    Notify.create({
+      message: "Dostęp wzbroniony dla niezalogowanego użytkownika!",
+      color: "negative",
+    });
+    next({ name: "home" });
+  }
+}
+
 export default routes;
diff --git a/CloudDrive.Vue/src/stores/file.js b/CloudDrive.Vue/src/stores/file.js
@@ -21,5 +21,21 @@ export const useFileStore = defineStore({
           });
       });
     },
+
+    async deleteFile(relativePath) {
+      if (
+        authenticationStore.currentUser &&
+        authenticationStore.currentUser.token
+      ) {
+        await api.delete("/File/deleteFile", {
+          headers: {
+            Authorization: `Bearer ${authenticationStore.currentUser.token}`,
+          },
+          params: {
+            relativePath: relativePath,
+          },
+        });
+      }
+    },
   },
 });