Merge pull request #25 from G4brym/add-basic-auth

Add basic auth

packages/dashboard/README.md

@@ -0,0 +1,22 @@
+# R2 Explorer Dashboard
+
+
+Generate PWA icons
+
+```bash
+convert logo.svg -resize '192x192' icons/android-chrome-192x192.png
+convert logo.svg -resize '512x512' icons/android-chrome-512x512.png
+convert logo.svg -resize '154x154' -gravity center -background transparent -extent 192x192 icons/android-chrome-maskable-192x192.png
+convert logo.svg -resize '410x410' -gravity center -background transparent -extent 512x512 icons/android-chrome-maskable-512x512.png
+convert logo.svg -resize '180x180' -background white icons/apple-touch-icon.png
+convert logo.svg -resize '60x60' -background white icons/apple-touch-icon-60x60.png
+convert logo.svg -resize '76x76' -background white icons/apple-touch-icon-76x76.png
+convert logo.svg -resize '120x120' -background white icons/apple-touch-icon-120x120.png
+convert logo.svg -resize '180x180' -background white icons/apple-touch-icon-180x180.png
+convert logo.svg -resize '152x152' -background white icons/apple-touch-icon-152x152.png
+convert logo.svg -resize '16x16' icons/favicon-16x16.png
+convert logo.svg -resize '32x32' icons/favicon-32x32.png
+convert logo.svg -resize '144x144' icons/msapplication-icon-144x144.png
+convert logo.svg -resize '150x150' -background transparent -compose Copy -gravity center -extent 270x270 icons/mstile-150x150.png
+convert logo.svg -resize '512x512' icons/safari-pinned-tab.svg
+```

packages/dashboard/package.json

@@ -14,6 +14,7 @@
     "html-to-text": "^9.0.5",
     "pdfvuer": "^2.0.1",
     "postal-mime": "^1.0.16",
+    "register-service-worker": "^1.7.2",
     "sweetalert2": "^11.4.8",
     "util": "^0.12.4",
     "vue": "^3.2.13",
@@ -23,6 +24,7 @@
   },
   "devDependencies": {
     "@popperjs/core": "^2.11.5",
+    "@vue/cli-plugin-pwa": "~5.0.0",
     "@vue/cli-plugin-router": "~5.0.0",
     "@vue/cli-plugin-vuex": "~5.0.0",
     "@vue/cli-service": "~5.0.0",

packages/dashboard/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /

packages/dashboard/scss/app.scss

@@ -22,7 +22,8 @@ $variable-prefix: 'ct-';
 @import './dark-mode';
 @import './custom-variables';
 @import '../node_modules/bootstrap/scss/bootstrap';
-@import url('https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css');
+@import '../node_modules/bootstrap-icons/font/bootstrap-icons.css';
+//@import url('https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css');
 
 //Components
 @import './custom/components/accordions';

packages/dashboard/src/App.vue

@@ -1,39 +1,15 @@
 <template>
   <div id="wrapper">
-    <!-- Topbar Start -->
-    <TopbarView/>
-    <!-- end Topbar -->
-
-    <!-- ========== Left Sidebar Start ========== -->
-    <SidebarView/>
-    <!-- Left Sidebar End -->
-
-    <!-- ============================================================== -->
-    <!-- Start Page Content here -->
-    <!-- ============================================================== -->
-
-    <div class="content-page">
-      <div class="content">
-        <!-- Start Content-->
-        <div class="container-fluid mobile-wrap">
-          <router-view/>
-        </div>
-        <!-- container -->
-      </div>
-      <!-- content -->
-
-    </div>
+    <router-view />
   </div>
 </template>
 
 <script>
-import TopbarView from '@/components/base/TopbarView'
-import SidebarView from '@/components/base/SidebarView'
-
 export default {
-  components: { TopbarView, SidebarView }
+  async created () {
+    await this.$store.dispatch('checkBasicAuthStorage')
+    this.$store.dispatch('loadServerConfigs')
+    this.$store.dispatch('loadUserDisks')
+  }
 }
 </script>
-
-<style scoped lang="scss">
-</style>

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,14 +74,14 @@ const apiHandler = {
           contentType: file.type
         }))
       }
-    });
+    })
   },
   multipartComplete: (file, folder, parts, uploadId) => {
     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, {
@@ -92,12 +92,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: {
@@ -107,29 +107,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,
@@ -139,35 +139,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

packages/dashboard/src/components/BucketExplorerWrapper.vue

@@ -52,6 +52,7 @@ export default {
         if (this.$route.params.folder !== 'IA==') {  // IA== is empty space
           if (this.$store.state.activeTab === 'email') {
             await this.$store.dispatch('navigate', this.$route.params.folder)
+            await this.$store.dispatch('refreshObjects')
           } else {
             await this.$store.dispatch('navigate', decodeURIComponent(escape(atob(this.$route.params.folder))))
           }

packages/dashboard/src/components/base/BaseLayout.vue

@@ -0,0 +1,37 @@
+<template>
+  <!-- Topbar Start -->
+  <TopbarView/>
+  <!-- end Topbar -->
+
+  <!-- ========== Left Sidebar Start ========== -->
+  <SidebarView/>
+  <!-- Left Sidebar End -->
+
+  <!-- ============================================================== -->
+  <!-- Start Page Content here -->
+  <!-- ============================================================== -->
+
+  <div class="content-page">
+    <div class="content">
+      <!-- Start Content-->
+      <div class="container-fluid mobile-wrap">
+        <slot></slot>
+      </div>
+      <!-- container -->
+    </div>
+    <!-- content -->
+
+  </div>
+</template>
+
+<script>
+import TopbarView from '@/components/base/TopbarView'
+import SidebarView from '@/components/base/SidebarView'
+
+export default {
+  components: { TopbarView, SidebarView }
+}
+</script>
+
+<style scoped lang="scss">
+</style>

packages/dashboard/src/components/base/SidebarView.vue

@@ -45,7 +45,15 @@
 
         <template v-for="bucket in $store.state.buckets" :key="bucket.name">
           <li>
-            <router-link
+            <router-link v-if="$store.state.activeTab === 'email'"
+              :class="{ 'text-black': $store.state.activeBucket === bucket.name }"
+              class="list-group-item border-0"
+              :to="{ name: `email-folder`, params: { bucket: bucket.name, folder: 'inbox' }}"
+            >
+              <i class="bi bi-archive me-2"></i>
+              <span>{{ bucket.name }}</span>
+            </router-link>
+            <router-link v-else
               :class="{ 'text-black': $store.state.activeBucket === bucket.name }"
               class="list-group-item border-0"
               :to="{ name: `${$store.state.activeTab}-home`, params: { bucket: bucket.name }}"
@@ -108,7 +116,7 @@ export default {
       return latestVersion.localeCompare(currectVersion, undefined, { numeric: true, sensitivity: "base" }) === 1;
     }
 
-    axios.get("https://r2-explorer-api.massadas.com/api/releases/latest/").then((response) => {
+    axios.get("https://api.r2explorer.dev/api/releases/latest/").then((response) => {
       this.$watch(
         () => self.$store.state.serverVersion,
         (serverVersion) => {