Finish adding basic auth view and logic

G4brym · Sep 8, 2023 · 693ad74 · 693ad74
1 parent 2caabf8
commit 693ad74
Show file tree

Hide file tree

Showing 7 changed files with 254 additions and 213 deletions.
diff --git a/packages/dashboard/src/App.vue b/packages/dashboard/src/App.vue
@@ -6,7 +6,8 @@
 
 <script>
 export default {
-  created () {
+  async created () {
+    await this.$store.dispatch('checkBasicAuthStorage')
     this.$store.dispatch('loadServerConfigs')
     this.$store.dispatch('loadUserDisks')
   }

diff --git a/packages/dashboard/src/api.js b/packages/dashboard/src/api.js
@@ -1,70 +1,70 @@
-import axios from "axios";
-import store from "./store";
-import preview from "@/preview";
+import axios from 'axios'
+import store from './store'
+import preview from '@/preview'
 
-export function encodeKey(key, path = null) {
+export function encodeKey (key, path = null) {
   if (path) {
-    return btoa(unescape(encodeURIComponent(`${path}${key}`)));
+    return btoa(unescape(encodeURIComponent(`${path}${key}`)))
   }
-  return btoa(unescape(encodeURIComponent(key)));
+  return btoa(unescape(encodeURIComponent(key)))
 }
 
-function getCurrentFolder() {
-  let prefix = store.state.currentFolder;
-  if (store.state.activeTab === "email") {
-    prefix = ".r2-explorer/emails/" + store.state.currentFolder + "/";
+function getCurrentFolder () {
+  let prefix = store.state.currentFolder
+  if (store.state.activeTab === 'email') {
+    prefix = '.r2-explorer/emails/' + store.state.currentFolder + '/'
   }
 
-  return prefix;
+  return prefix
 }
 
 const apiHandler = {
   createFolder: (name) => {
-    const folderPath = store.state.currentFolder + name + "/";
+    const folderPath = store.state.currentFolder + name + '/'
 
     return axios.post(`/api/buckets/${store.state.activeBucket}/folder`, {
       key: encodeKey(folderPath)
-    });
+    })
   },
   deleteObject: (path, name) => {
     return axios.post(`/api/buckets/${store.state.activeBucket}/delete`, {
       key: encodeKey(name, path)
-    });
+    })
   },
   downloadFile: (file, onDownloadProgress, abortControl) => {
-    const extra = {};
-    if (file.preview?.downloadType === "objectUrl" || file.preview?.downloadType === "blob") {
-      extra.responseType = "arraybuffer";
+    const extra = {}
+    if (file.preview?.downloadType === 'objectUrl' || file.preview?.downloadType === 'blob') {
+      extra.responseType = 'arraybuffer'
     }
     if (abortControl) {
-      extra.signal = abortControl.signal;
+      extra.signal = abortControl.signal
     }
     if (onDownloadProgress) {
-      extra.onDownloadProgress = onDownloadProgress;
+      extra.onDownloadProgress = onDownloadProgress
     }
 
-    const filePath = encodeKey(file.name, getCurrentFolder());
+    const filePath = encodeKey(file.name, getCurrentFolder())
 
     return axios.get(
       `/api/buckets/${store.state.activeBucket}/${filePath}`,
       extra
-    );
+    )
   },
   renameObject: (oldName, newName) => {
     return axios.post(`/api/buckets/${store.state.activeBucket}/move`, {
       oldKey: encodeKey(oldName, store.state.currentFolder),
       newKey: encodeKey(newName, store.state.currentFolder)
-    });
+    })
   },
   updateMetadata: (file, metadata) => {
-    const filePath = encodeKey(file.name, getCurrentFolder());
+    const filePath = encodeKey(file.name, getCurrentFolder())
 
     return axios.post(
       `/api/buckets/${store.state.activeBucket}/${filePath}`,
       {
         customMetadata: metadata
       }
-    );
+    )
   },
   multipartCreate: (file, folder) => {
     return axios.post(`/api/buckets/${store.state.activeBucket}/multipart/create`, null, {
@@ -74,15 +74,15 @@ const apiHandler = {
           contentType: file.type
         }))
       }
-    });
+    })
   },
   multipartComplete: (file, folder, parts, uploadId) => {
-    const key = apiHandler.getKey(folder, file.name);
+    const key = apiHandler.getKey(folder, file.name)
     return axios.post(`/api/buckets/${store.state.activeBucket}/multipart/complete`, {
       key: encodeKey(file.name, folder),
       uploadId,
       parts
-    });
+    })
   },
   multipartUpload: (uploadId, partNumber, key, chunk, callback) => {
     return axios.post(`/api/buckets/${store.state.activeBucket}/multipart/upload`, chunk, {
@@ -93,12 +93,12 @@ const apiHandler = {
       },
       onUploadProgress: callback,
       headers: {
-        "Content-Type": "multipart/form-data"
+        'Content-Type': 'multipart/form-data'
       }
-    });
+    })
   },
   uploadObjects: (file, folder, callback) => {
-    folder = folder || store.state.currentFolder;
+    folder = folder || store.state.currentFolder
 
     return axios.post(`/api/buckets/${store.state.activeBucket}/upload`, file, {
       params: {
@@ -108,29 +108,29 @@ const apiHandler = {
         }))
       },
       headers: {
-        "Content-Type": "multipart/form-data"
+        'Content-Type': 'multipart/form-data'
       },
       onUploadProgress: callback
-    });
+    })
   },
   listObjects: async () => {
-    const prefix = getCurrentFolder();
+    const prefix = getCurrentFolder()
 
     const response = await axios.get(`/api/buckets/${store.state.activeBucket}?include=customMetadata&include=httpMetadata`, {
       params: {
-        delimiter: "/",
+        delimiter: '/',
         prefix: encodeKey(prefix)
       }
-    });
+    })
 
-    let files = [];
+    let files = []
     if (response.data.objects) {
-      files = response.data.objects.filter(function(obj) {
-        return !obj.key.endsWith("/");
-      });
-      files = files.map(function(obj) {
-        const name = obj.key.replace(prefix, "");
-        const extension = name.split(".").pop();
+      files = response.data.objects.filter(function (obj) {
+        return !obj.key.endsWith('/')
+      })
+      files = files.map(function (obj) {
+        const name = obj.key.replace(prefix, '')
+        const extension = name.split('.').pop()
 
         return {
           ...obj,
@@ -140,35 +140,35 @@ const apiHandler = {
           preview: preview.getType(name),
           isFile: true,
           hash: encodeKey(name)
-        };
+        }
       }).filter(obj => {
-        return !(store.state.config?.showHiddenFiles !== true && obj.name.startsWith("."));
-      });
+        return !(store.state.config?.showHiddenFiles !== true && obj.name.startsWith('.'))
+      })
     }
 
-    let folders = [];
+    let folders = []
     if (response.data.delimitedPrefixes) {
-      folders = response.data.delimitedPrefixes.map(function(obj) {
-        const split = obj.split("/");
-        const name = split[split.length - 2];
+      folders = response.data.delimitedPrefixes.map(function (obj) {
+        const split = obj.split('/')
+        const name = split[split.length - 2]
 
         return {
-          name: name,
+          name,
           path: store.state.currentFolder,
           key: obj,
           isFolder: true,
           hash: encodeKey(obj)
-        };
+        }
       }).filter(obj => {
-        return !(store.state.config?.showHiddenFiles !== true && obj.name.startsWith("."));
-      });
+        return !(store.state.config?.showHiddenFiles !== true && obj.name.startsWith('.'))
+      })
     }
 
     return {
       files: files.reverse(),
       folders
-    };
+    }
   }
-};
+}
 
-export default apiHandler;
+export default apiHandler
diff --git a/packages/dashboard/src/components/base/TopbarView.vue b/packages/dashboard/src/components/base/TopbarView.vue
@@ -36,7 +36,7 @@
                  data-popper-placement="bottom-end">
 
               <!-- item-->
-              <a href="/cdn-cgi/access/logout" class="dropdown-item notify-item">
+              <a href="#" @click="logout" class="dropdown-item notify-item">
                 <i class="bi bi-box-arrow-right"></i>
                 <span>Logout</span>
               </a>
@@ -130,5 +130,17 @@
   }
 }
 </style>
-<script setup lang="ts">
+<script>
+export default {
+  methods: {
+    logout () {
+      if (this.$store.state.loginMethod === "basic") {
+        localStorage.removeItem('basicAuth')
+        location.reload();
+      } else {
+        window.location.href = "/cdn-cgi/access/logout"
+      }
+    }
+  }
+}
 </script>