Finish initial pwa support

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/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/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/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) => {

packages/dashboard/src/store/index.js

@@ -42,7 +42,11 @@ export default createStore({
     },
     changeBucket(state, payload) {
       state.activeBucket = payload;
-      state.currentFolder = "";
+      if (this.state.activeTab === "email") {
+        state.currentFolder = "inbox";
+      } else {
+        state.currentFolder = "";
+      }
     },
     changeTab(state, payload) {
       if (payload === state.activeTab) {
@@ -62,7 +66,9 @@ export default createStore({
       state.buckets = data.buckets;
 
       if (state.activeBucket === null && data.buckets.length > 0) {
-        router.push({ name: "storage-home", params: { bucket: data.buckets[0].name } });
+        const targetView = (location.pathname.startsWith('/email')) ? 'email-home' : 'storage-home'
+
+        router.push({ name: targetView, params: { bucket: data.buckets[0].name } });
       }
     },
     loadServerConfigs(state, data) {
@@ -164,7 +170,7 @@ export default createStore({
       axios.get("/api/server/config").then((response) => {
         commit("loadServerConfigs", response.data);
       }).catch(function(error) {
-        if (error.response.status === 401) {
+        if (error.response?.status === 401) {
           router.push({ name: "login"});
         }
       });

packages/dashboard/src/views/auth/LoginView.vue

@@ -3,7 +3,7 @@
     <div class="container">
       <div class="row justify-content-center">
         <div class="col-md-8 col-lg-6 col-xl-4">
-          <div class="card bg-pattern">
+          <div class="card">
 
             <div class="card-body p-4">
 

packages/dashboard/vue.config.js

@@ -1,17 +1,33 @@
 module.exports = {
   pwa: {
-    name: "R2 Explorer",
-    themeColor: "#4DBA87",
-    msTileColor: "#000000",
-    appleMobileWebAppCapable: "yes",
-    appleMobileWebAppStatusBarStyle: "black",
+    name: 'R2 Explorer',
+    themeColor: '#4DBA87',
+    background_color: '#ffffff',
+    display: 'standalone',
+    msTileColor: '#ffffff',
+    appleMobileWebAppCapable: 'yes',
+    appleMobileWebAppStatusBarStyle: 'white',
+    shortcuts: [
+      {
+        name: 'Email Explorer',
+        description: 'Navigate your R2 Explorer Emails',
+        url: '/emails/',
+        icons: [{ src: '/img/icons/android-chrome-192x192.png', sizes: '192x192' }]
+      },
+      {
+        name: 'R2 Explorer',
+        description: 'Navigate your R2 Explorer Files',
+        url: '/storage',
+        icons: [{ src: '/img/icons/android-chrome-192x192.png', sizes: '192x192' }]
+      }
+    ]
 
     // configure the workbox plugin
-    workboxPluginMode: "InjectManifest",
-    workboxOptions: {
-      // swSrc is required in InjectManifest mode.
-      swSrc: "dev/sw.js"
-      // ...other Workbox options...
-    }
+    // workboxPluginMode: "InjectManifest",
+    // workboxOptions: {
+    // swSrc is required in InjectManifest mode.
+    // swSrc: "dev/sw.js"
+    // ...other Workbox options...
+    // }
   }
-};
+}

worker/src/dashbord.ts

@@ -36,7 +36,7 @@ export async function dashboardProxy(request: any, env: any, context: Context) {
       `${dashboardUrl}${path}`
     )
 
-  result = new Response(await response.text(), {
+  result = new Response(await response.body, {
     status: response.status,
     headers: {
       'Content-Type': response.headers.get('Content-Type'),

worker/src/index.ts

@@ -34,7 +34,7 @@ export function R2Explorer(config?: R2ExplorerConfig) {
   const { preflight, corsify } = createCors();
 
   if (config.cors === true) {
-    router.all("*", preflight);
+    router.all("/api*", preflight);
   }
 
   // Check Access JWT first
@@ -52,7 +52,7 @@ export function R2Explorer(config?: R2ExplorerConfig) {
         scheme: "basic"
       }
     );
-    router.all("*", validateBasicAuth);
+    router.all("/api*", validateBasicAuth);
   }
 
   router.all("/api/server/*", serverRouter);

worker/src/server/api/getInfo.ts

@@ -16,12 +16,12 @@ export class GetInfo extends OpenAPIRoute {
     context: Context,
     data: any
   ) {
-    const config = {...context.config}
-    delete config.basicAuth
+    const serverConfig = {...context.config}
+    delete serverConfig.basicAuth
 
     return {
       version: config.version,
-      config: config,
+      config: serverConfig,
       user: {
         username: context.username
       }