Merge pull request #68 from envite-consulting/jonaw1/settings-after-login

Don't show settings when not logged in

Author: hehnle

frontend/src/layouts/default/AppBar.vue

@@ -1,6 +1,9 @@
 <template>
   <v-app-bar color="primary" prominent>
-    <v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
+    <v-app-bar-nav-icon
+      variant="text"
+      @click.stop="drawer = !drawer"
+    ></v-app-bar-nav-icon>
 
     <v-toolbar-title>ProA – {{ currentRouteName }}</v-toolbar-title>
 
@@ -12,25 +15,34 @@
           <v-icon icon="mdi-account-circle"></v-icon>
         </v-btn>
       </template>
-      {{ $t('general.myProfile') }}
+      {{ $t("general.myProfile") }}
     </v-tooltip>
 
-    <v-tooltip location="bottom" v-if="webVersion && isUserLoggedIn && isUserAdmin">
+    <v-tooltip
+      location="bottom"
+      v-if="webVersion && isUserLoggedIn && isUserAdmin"
+    >
       <template v-slot:activator="{ props }">
-        <v-btn v-bind="props" @click="openDialog(SelectedDialog.CREATE_ACCOUNT)">
+        <v-btn
+          v-bind="props"
+          @click="openDialog(SelectedDialog.CREATE_ACCOUNT)"
+        >
           <v-icon icon="mdi-account-plus"></v-icon>
         </v-btn>
       </template>
-      {{ $t('navigation.createAccount') }}
+      {{ $t("navigation.createAccount") }}
     </v-tooltip>
 
-    <v-tooltip location="bottom" v-if="webVersion && isUserLoggedIn && isUserAdmin">
+    <v-tooltip
+      location="bottom"
+      v-if="webVersion && isUserLoggedIn && isUserAdmin"
+    >
       <template v-slot:activator="{ props }">
         <v-btn v-bind="props" @click="$router.push('/ManageUsers')">
           <v-icon icon="mdi-account-multiple"></v-icon>
         </v-btn>
       </template>
-      {{ $t('navigation.manageUsers') }}
+      {{ $t("navigation.manageUsers") }}
     </v-tooltip>
 
     <v-tooltip location="bottom" v-if="webVersion && isUserLoggedIn">
@@ -39,17 +51,12 @@
           <v-icon icon="mdi-logout"></v-icon>
         </v-btn>
       </template>
-      {{ $t('general.' +
-      'signOut') }}
+      {{ $t("general." + "signOut") }}
     </v-tooltip>
 
     <v-menu>
       <template v-slot:activator="{ props }">
-        <v-btn
-          color="white"
-          variant="text"
-          v-bind="props"
-        >
+        <v-btn color="white" variant="text" v-bind="props">
           {{ selectedLanguage.toUpperCase() }}
         </v-btn>
       </template>
@@ -65,7 +72,11 @@
       </v-list>
     </v-menu>
 
-    <v-tooltip :text="$t('general.settings')" location="bottom">
+    <v-tooltip
+      v-if="isUserLoggedIn"
+      :text="$t('general.settings')"
+      location="bottom"
+    >
       <template v-slot:activator="{ props }">
         <v-btn icon v-bind="props" @click="toggleSettings">
           <v-icon>mdi-cog</v-icon>
@@ -75,45 +86,45 @@
   </v-app-bar>
 
   <v-navigation-drawer v-model="drawer" location="left" temporary>
-    <v-list
-      flat dense nav class="py-1 px-0"
-    >
+    <v-list flat dense nav class="py-1 px-0">
       <v-list-item
         @click="$router.push({ path: item.route })"
         v-for="item in items"
         :key="item.title"
         dense
-        :disabled="!store.getSelectedProjectId() && item.title !== $t('navigation.projectOverview')"
+        :disabled="
+          !store.getSelectedProjectId() &&
+          item.title !== $t('navigation.projectOverview')
+        "
         class="px-2"
       >
-        <v-list-item-title class="text-body-1 font-weight-regular">{{ item.title }}</v-list-item-title>
+        <v-list-item-title class="text-body-1 font-weight-regular">{{
+          item.title
+        }}</v-list-item-title>
       </v-list-item>
     </v-list>
   </v-navigation-drawer>
 
-  <SettingsDrawer/>
-
-  <AuthenticationDialog v-if="webVersion"/>
+  <SettingsDrawer />
 
+  <AuthenticationDialog v-if="webVersion" />
 </template>
 
-<style scoped>
-</style>
+<style scoped></style>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
-import { useAppStore } from "@/store/app";
+import { defineComponent } from "vue";
+import { SelectedDialog, useAppStore } from "@/store/app";
 import SettingsDrawer from "@/components/SettingsDrawer.vue";
 import i18n from "@/i18n";
 import AuthenticationDialog from "@/components/Authentication/AuthenticationDialog.vue";
-import { SelectedDialog } from "@/store/app";
 import { Role } from "@/components/ProcessMap/types";
 
-export type LanguageCode = 'en' | 'de';
+export type LanguageCode = "en" | "de";
 
 interface Language {
-  code: LanguageCode
-  name: string
+  code: LanguageCode;
+  name: string;
 }
 
 export default defineComponent({
@@ -126,7 +137,7 @@ export default defineComponent({
     },
     lowerFirstLetter(s: string | undefined) {
       if (!s) {
-        return '';
+        return "";
       }
       return s.charAt(0).toLowerCase() + s.slice(1);
     },
@@ -150,12 +161,12 @@ export default defineComponent({
       drawer: false as boolean,
       group: null,
       selectedLanguage: store.getSelectedLanguage() as LanguageCode,
-      webVersion: (import.meta.env.VITE_APP_MODE === 'web') as boolean,
+      webVersion: (import.meta.env.VITE_APP_MODE === "web") as boolean,
       showEditDialog: false as boolean,
       showProfileDialog: false as boolean,
       showProfileSuccessMessage: false as boolean,
       SelectedDialog: SelectedDialog
-    }
+    };
   },
 
   async mounted() {
@@ -169,38 +180,42 @@ export default defineComponent({
     availableLanguages(): Language[] {
       const availableLanguages: Language[] = [
         {
-          code: 'de',
-          name: this.$t('general.german')
+          code: "de",
+          name: this.$t("general.german")
         },
         {
-          code: 'en',
-          name: this.$t('general.english')
+          code: "en",
+          name: this.$t("general.english")
         }
       ];
-      return availableLanguages.sort((language1, language2) => language1.name.localeCompare(language2.name));
+      return availableLanguages.sort((language1, language2) =>
+        language1.name.localeCompare(language2.name)
+      );
     },
     items() {
       return [
         {
-          title: this.$t('navigation.projectOverview'),
-          route: '/'
+          title: this.$t("navigation.projectOverview"),
+          route: "/"
         },
         {
-          title: this.$t('navigation.processList'),
-          route: '/ProcessList'
+          title: this.$t("navigation.processList"),
+          route: "/ProcessList"
         },
         {
-          title: this.$t('navigation.c8Import'),
-          route: '/CamundaCloudImport'
+          title: this.$t("navigation.c8Import"),
+          route: "/CamundaCloudImport"
         },
         {
-          title: this.$t('navigation.processMap'),
-          route: '/ProcessMap'
+          title: this.$t("navigation.processMap"),
+          route: "/ProcessMap"
         }
       ];
     },
     currentRouteName() {
-      return this.$t('navigation.' + this.lowerFirstLetter(this.$route.name?.toString()));
+      return this.$t(
+        "navigation." + this.lowerFirstLetter(this.$route.name?.toString())
+      );
     },
     isUserLoggedIn() {
       return this.store.getUserToken() != null;
@@ -212,8 +227,8 @@ export default defineComponent({
 
   watch: {
     group() {
-      this.drawer = false
+      this.drawer = false;
     }
   }
-})
+});
 </script>