FIX: UI doesn't load for non-user on share (#51)

Co-authored-by: Graham Steffaniak <graham.steffaniak@autodesk.com>

backend/filebrowser.yaml

@@ -3,7 +3,7 @@ server:
   baseURL: "/"
 auth:
   method: password
-  signup: false
+  signup: true
 userDefaults:
   darkMode: true
   disableSettings: false

frontend/src/components/Search.vue

@@ -1,12 +1,31 @@
 <template>
-  <div id="search" @click="open" v-bind:class="{ active, ongoing, 'dark-mode': isDarkMode }">
+  <div
+    id="search"
+    @click="open"
+    v-bind:class="{ active, ongoing, 'dark-mode': isDarkMode }"
+  >
     <div id="input">
-      <button v-if="active" class="action" @click="close" :aria-label="$t('buttons.close')" :title="$t('buttons.close')">
+      <button
+        v-if="active"
+        class="action"
+        @click="close"
+        :aria-label="$t('buttons.close')"
+        :title="$t('buttons.close')"
+      >
         <i class="material-icons">close</i>
       </button>
       <i v-else class="material-icons">search</i>
-      <input class="main-input" type="text" @keyup.exact="keyup" @input="submit" ref="input" :autofocus="active"
+      <input
-        v-model.trim="value" :aria-label="$t('search.search')" :placeholder="$t('search.search')" />
+        class="main-input"
+        type="text"
+        @keyup.exact="keyup"
+        @input="submit"
+        ref="input"
+        :autofocus="active"
+        v-model.trim="value"
+        :aria-label="$t('search.search')"
+        :placeholder="$t('search.search')"
+      />
     </div>
     <div v-if="isMobile && active" id="result" :class="{ hidden: !active }" ref="result">
       <div id="result-list">
@@ -14,7 +33,12 @@
           Search Context: {{ getContext(this.$route.path) }}
         </div>
         <ul v-show="results.length > 0">
-          <li v-for="(s, k) in results" :key="k" @click.stop.prevent="navigateTo(s.url)" style="cursor: pointer">
+          <li
+            v-for="(s, k) in results"
+            :key="k"
+            @click.stop.prevent="navigateTo(s.url)"
+            style="cursor: pointer"
+          >
             <router-link to="#" event="">
               <i v-if="s.dir" class="material-icons folder-icons"> folder </i>
               <i v-else-if="s.audio" class="material-icons audio-icons"> volume_up </i>
@@ -37,15 +61,26 @@
           </div>
         </div>
         <template v-if="isEmpty">
-          <button class="mobile-boxes" v-if="value.length === 0 && !showBoxes" @click="resetSearchFilters()">
+          <button
+            class="mobile-boxes"
+            v-if="value.length === 0 && !showBoxes"
+            @click="resetSearchFilters()"
+          >
             Reset filters
           </button>
           <template v-if="value.length === 0 && showBoxes">
             <div class="boxes">
               <h3>{{ $t("search.types") }}</h3>
               <div>
-                <div class="mobile-boxes" tabindex="0" v-for="(v, k) in boxes" :key="k" role="button"
+                <div
-                  @click="addToTypes('type:' + k)" :aria-label="v.label">
+                  class="mobile-boxes"
+                  tabindex="0"
+                  v-for="(v, k) in boxes"
+                  :key="k"
+                  role="button"
+                  @click="addToTypes('type:' + k)"
+                  :aria-label="v.label"
+                >
                   <i class="material-icons">{{ v.icon }}</i>
                   <p>{{ v.label }}</p>
                 </div>
@@ -90,26 +125,51 @@
             </p>
           </div>
           <template>
-            <ButtonGroup :buttons="folderSelect" @button-clicked="addToTypes" @remove-button-clicked="removeFromTypes"
+            <ButtonGroup
-              @disableAll="folderSelectClicked()" @enableAll="resetButtonGroups()" />
+              :buttons="folderSelect"
-            <ButtonGroup :buttons="typeSelect" @button-clicked="addToTypes" @remove-button-clicked="removeFromTypes"
+              @button-clicked="addToTypes"
-              :isDisabled="isTypeSelectDisabled" />
+              @remove-button-clicked="removeFromTypes"
+              @disableAll="folderSelectClicked()"
+              @enableAll="resetButtonGroups()"
+            />
+            <ButtonGroup
+              :buttons="typeSelect"
+              @button-clicked="addToTypes"
+              @remove-button-clicked="removeFromTypes"
+              :isDisabled="isTypeSelectDisabled"
+            />
             <div class="sizeConstraints">
               <div class="sizeInputWrapper">
                 <p>Smaller Than:</p>
-                <input class="sizeInput" v-model="smallerThan" type="number" min="0" placeholder="number" />
+                <input
+                  class="sizeInput"
+                  v-model="smallerThan"
+                  type="number"
+                  min="0"
+                  placeholder="number"
+                />
                 <p>MB</p>
               </div>
               <div class="sizeInputWrapper">
                 <p>Larger Than:</p>
-                <input class="sizeInput" v-model="largerThan" type="number" placeholder="number" />
+                <input
+                  class="sizeInput"
+                  v-model="largerThan"
+                  type="number"
+                  placeholder="number"
+                />
                 <p>MB</p>
               </div>
             </div>
           </template>
         </template>
         <ul v-show="results.length > 0">
-          <li v-for="(s, k) in results" :key="k" @click.stop.prevent="navigateTo(s.url)" style="cursor: pointer">
+          <li
+            v-for="(s, k) in results"
+            :key="k"
+            @click.stop.prevent="navigateTo(s.url)"
+            style="cursor: pointer"
+          >
             <router-link to="#" event="">
               <i v-if="s.dir" class="material-icons folder-icons"> folder </i>
               <i v-else-if="s.audio" class="material-icons audio-icons"> volume_up </i>
@@ -142,7 +202,7 @@
   border-right: 1px solid gray;
 }
 
-#result-desktop>#result-list {
+#result-desktop > #result-list {
   max-height: 80vh;
   width: 35em;
   overflow: scroll;
@@ -180,8 +240,8 @@
 #search.active #result-desktop ul li a {
   display: flex;
   align-items: center;
-  padding: .3em 0;
+  padding: 0.3em 0;
-  margin-right: .3em;
+  margin-right: 0.3em;
 }
 
 #search #result-list.active {
@@ -204,10 +264,10 @@
 
 /* Search */
 #search {
-  background-color:unset;
+  background-color: unset;
-  z-index:3;
+  z-index: 3;
   position: fixed;
-  top: .5em;
+  top: 0.5em;
   min-width: 35em;
   left: 50%;
   -webkit-transform: translateX(-50%);
@@ -259,7 +319,6 @@
   direction: rtl;
 }
 
-
 #search #result {
   padding-top: 1em;
   overflow: hidden;
@@ -280,7 +339,7 @@ body.rtl #search #result {
   direction: ltr;
 }
 
-#search #result>div>*:first-child {
+#search #result > div > *:first-child {
   margin-top: 0;
 }
 
@@ -290,7 +349,7 @@ body.rtl #search #result {
 }
 
 /* Search Results */
-body.rtl #search #result ul>* {
+body.rtl #search #result ul > * {
   direction: ltr;
   text-align: left;
 }
@@ -415,7 +474,7 @@ body.rtl #search .boxes h3 {
   width: 5em;
   border-radius: 1em;
   padding: 1em;
-  backdrop-filter: invert(.1);
+  backdrop-filter: invert(0.1);
   border: none !important;
 }
 
@@ -431,7 +490,7 @@ body.rtl #search .boxes h3 {
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  border: 1px solid #ccc
+  border: 1px solid #ccc;
 }
 
 .helpButton {
@@ -457,6 +516,7 @@ body.rtl #search .boxes h3 {
 import ButtonGroup from "./ButtonGroup.vue";
 import { mapState, mapGetters, mapMutations } from "vuex";
 import { search } from "@/api";
+import { darkMode } from "@/utils/constants";
 
 var boxes = {
   folder: { label: "folders", icon: "folder" },
@@ -506,12 +566,11 @@ export default {
       const resultList = document.getElementById("result-list");
       if (!active) {
         resultList.classList.remove("active");
-        return
+        return;
       }
       setTimeout(() => {
         resultList.classList.add("active");
       }, 100);
-
     },
     show(val, old) {
       this.active = val === "search";
@@ -543,7 +602,7 @@ export default {
     ...mapState(["user", "show"]),
     ...mapGetters(["isListing"]),
     isDarkMode() {
-      return this.user.darkMode === true
+      return this.user && this.user.darkMode ? this.user.darkMode : darkMode;
     },
     showBoxes() {
       return this.searchTypes == "";
@@ -630,7 +689,6 @@ export default {
         return false;
       }
       this.searchTypes = this.searchTypes + string + " ";
-
     },
     resetSearchFilters() {
       this.searchTypes = "";

frontend/src/components/Sidebar.vue

@@ -1,59 +1,99 @@
 <template>
   <nav :class="{ active, 'dark-mode': isDarkMode }">
     <template v-if="isLogged">
-      <button class="action" @click="toRoot" :aria-label="$t('sidebar.myFiles')" :title="$t('sidebar.myFiles')">
+      <button
+        class="action"
+        @click="toRoot"
+        :aria-label="$t('sidebar.myFiles')"
+        :title="$t('sidebar.myFiles')"
+      >
         <i class="material-icons">folder</i>
         <span>{{ $t("sidebar.myFiles") }}</span>
       </button>
       <div v-if="user.perm.create">
-        <button @click="$store.commit('showHover', 'newDir')" class="action" :aria-label="$t('sidebar.newFolder')"
+        <button
-          :title="$t('sidebar.newFolder')">
+          @click="$store.commit('showHover', 'newDir')"
+          class="action"
+          :aria-label="$t('sidebar.newFolder')"
+          :title="$t('sidebar.newFolder')"
+        >
           <i class="material-icons">create_new_folder</i>
           <span>{{ $t("sidebar.newFolder") }}</span>
         </button>
-        <button @click="$store.commit('showHover', 'newFile')" class="action" :aria-label="$t('sidebar.newFile')"
+        <button
-          :title="$t('sidebar.newFile')">
+          @click="$store.commit('showHover', 'newFile')"
+          class="action"
+          :aria-label="$t('sidebar.newFile')"
+          :title="$t('sidebar.newFile')"
+        >
           <i class="material-icons">note_add</i>
           <span>{{ $t("sidebar.newFile") }}</span>
         </button>
-        <button id="upload-button" @click="upload($event)" class="action" >
+        <button id="upload-button" @click="upload($event)" class="action">
           <i class="material-icons">file_upload</i>
           <span>Upload file</span>
         </button>
       </div>
       <div>
-        <button class="action" @click="toSettings" :aria-label="$t('sidebar.settings')" :title="$t('sidebar.settings')">
+        <button
+          class="action"
+          @click="toSettings"
+          :aria-label="$t('sidebar.settings')"
+          :title="$t('sidebar.settings')"
+        >
           <i class="material-icons">settings_applications</i>
           <span>{{ $t("sidebar.settings") }}</span>
         </button>
 
-        <button v-if="canLogout" @click="logout" class="action" id="logout" :aria-label="$t('sidebar.logout')"
+        <button
-          :title="$t('sidebar.logout')">
+          v-if="canLogout"
+          @click="logout"
+          class="action"
+          id="logout"
+          :aria-label="$t('sidebar.logout')"
+          :title="$t('sidebar.logout')"
+        >
           <i class="material-icons">exit_to_app</i>
           <span>{{ $t("sidebar.logout") }}</span>
         </button>
       </div>
     </template>
     <template v-else>
-      <router-link class="action" to="/login" :aria-label="$t('sidebar.login')" :title="$t('sidebar.login')">
+      <router-link
+        class="action"
+        to="/login"
+        :aria-label="$t('sidebar.login')"
+        :title="$t('sidebar.login')"
+      >
         <i class="material-icons">exit_to_app</i>
         <span>{{ $t("sidebar.login") }}</span>
       </router-link>
-      <router-link v-if="signup" class="action" to="/login" :aria-label="$t('sidebar.signup')"
+      <router-link
-        :title="$t('sidebar.signup')">
+        v-if="signup"
+        class="action"
+        to="/login"
+        :aria-label="$t('sidebar.signup')"
+        :title="$t('sidebar.signup')"
+      >
         <i class="material-icons">person_add</i>
         <span>{{ $t("sidebar.signup") }}</span>
       </router-link>
     </template>
-    <div class="credits" v-if="$router.currentRoute.path.includes('/files/') && !disableUsedPercentage
+    <div
-      ">
+      class="credits"
+      v-if="$router.currentRoute.path.includes('/files/') && !disableUsedPercentage"
+    >
       <progress-bar :val="usage.usedPercentage" size="medium"></progress-bar>
-      <span style="text-align:center">{{ usage.usedPercentage }}%</span>
+      <span style="text-align: center">{{ usage.usedPercentage }}%</span>
       <span>{{ usage.used }} of {{ usage.total }} used</span>
-      <br>
+      <br />
       <span v-if="disableExternal">File Browser</span>
       <span v-else>
-        <a rel="noopener noreferrer" target="_blank" href="https://github.com/gtsteffaniak/filebrowser">
+        <a
+          rel="noopener noreferrer"
+          target="_blank"
+          href="https://github.com/gtsteffaniak/filebrowser"
+        >
           File Browser
         </a>
       </span>
@@ -79,6 +119,7 @@ import {
 import { files as api } from "@/api";
 import ProgressBar from "vue-simple-progress";
 import prettyBytes from "pretty-bytes";
+import { darkMode } from "@/utils/constants";
 
 export default {
   name: "sidebar",
@@ -88,7 +129,7 @@ export default {
   computed: {
     ...mapState(["user"]),
     isDarkMode() {
-      return this.user.darkMode === true
+      return this.user && this.user.darkMode ? this.user.darkMode : darkMode;
     },
     ...mapGetters(["isLogged"]),
     active() {
@@ -130,11 +171,11 @@ export default {
   },
   methods: {
     toRoot() {
-      this.$router.push({ path: "/files/" }, () => { });
+      this.$router.push({ path: "/files/" }, () => {});
       this.$store.commit("closeHovers");
     },
     toSettings() {
-      this.$router.push({ path: "/settings" }, () => { });
+      this.$router.push({ path: "/settings" }, () => {});
       this.$store.commit("closeHovers");
     },
     help() {

frontend/src/views/Layout.vue

@@ -16,14 +16,16 @@
 </template>
 
 <script>
-import editorBar from "./bars/EditorBar.vue"
+import editorBar from "./bars/EditorBar.vue";
-import defaultBar from "./bars/Default.vue"
+import defaultBar from "./bars/Default.vue";
-import listingBar from "./bars/ListingBar.vue"
+import listingBar from "./bars/ListingBar.vue";
 import Prompts from "@/components/prompts/Prompts";
 import { mapState, mapGetters } from "vuex";
 import Sidebar from "@/components/Sidebar.vue";
 import UploadFiles from "../components/prompts/UploadFiles";
 import { enableExec } from "@/utils/constants";
+import { darkMode } from "@/utils/constants";
+
 export default {
   name: "layout",
   components: {
@@ -46,7 +48,7 @@ export default {
     ...mapGetters(["isLogged", "progress", "isListing"]),
     ...mapState(["req", "user", "state"]),
     isDarkMode() {
-      return this.user.darkMode === true
+      return this.user && this.user.darkMode ? this.user.darkMode : darkMode;
     },
     isExecEnabled: () => enableExec,
     currentView() {
@@ -56,10 +58,7 @@ export default {
 
       if (this.req.isDir) {
         return "listing";
-      } else if (
+      } else if (this.req.type === "text" || this.req.type === "textImmutable") {
-        this.req.type === "text" ||
-        this.req.type === "textImmutable"
-      ) {
         return "editor";
       } else {
         return "preview";
@@ -75,28 +74,25 @@ export default {
   },
   methods: {
     getTitle() {
-      let title = "Title"
+      let title = "Title";
-      if (this.$route.path.startsWith('/settings/')) {
+      if (this.$route.path.startsWith("/settings/")) {
-        title = "Settings"
+        title = "Settings";
       }
-      return title
+      return title;
     },
   },
 };
 </script>
 
 <style>
-
 /* Use the class .dark-mode to apply styles conditionally */
 .dark-mode {
   background: var(--background);
   color: var(--textPrimary);
 }
 
-
 /* Header */
 .dark-mode-header {
-  color:white;
   background: var(--surfacePrimary);
 }
 
@@ -107,5 +103,4 @@ export default {
     backdrop-filter: blur(16px) invert(0.1);
   }
 }
-
+</style>
-</style>