Improve handling when not logged in

cypress/integration/login.spec.ts

@@ -81,6 +81,14 @@ describe('Login', () => {
     cy.get('span').should('contain', 'TestBot');
     // Check API calls have been made.
     cy.wait('@RandomAPICall');
+    // login button gone
+    cy.get('button').should('not.contain', 'Login');
+
+    // Test logout
+    cy.get('[id=avatar-drop]').parent().click();
+    cy.get('.dropdown-menu > a:last').click();
+    cy.get('button').should('contain', 'Login');
+    // login button there again
   });
 
   it('Test Login failed - wrong api url', () => {

src/components/layout/NavBar.vue

@@ -12,24 +12,15 @@
 
       <b-collapse id="nav-collapse" class="text-right text-md-center" is-nav>
         <b-navbar-nav>
-          <router-link
-            v-if="!botStore.activeBot.canRunBacktest"
-            class="nav-link navbar-nav"
-            to="/trade"
+          <router-link v-if="!botStore.canRunBacktest" class="nav-link navbar-nav" to="/trade"
             >Trade</router-link
           >
-          <router-link
-            v-if="!botStore.activeBot.canRunBacktest"
-            class="nav-link navbar-nav"
-            to="/dashboard"
+          <router-link v-if="!botStore.canRunBacktest" class="nav-link navbar-nav" to="/dashboard"
             >Dashboard</router-link
           >
           <router-link class="nav-link navbar-nav" to="/graph">Chart</router-link>
           <router-link class="nav-link navbar-nav" to="/logs">Logs</router-link>
-          <router-link
-            v-if="botStore.activeBot.canRunBacktest"
-            class="nav-link navbar-nav"
-            to="/backtest"
+          <router-link v-if="botStore.canRunBacktest" class="nav-link navbar-nav" to="/backtest"
             >Backtest</router-link
           >
           <BootswatchThemeSelect />
@@ -57,10 +48,17 @@
           </div>
           <li class="d-none d-sm-block nav-item text-secondary mr-2">
             <b-nav-text class="verticalCenter small mr-2">
-              {{ botStore.activeBot.botName || 'No bot selected' }}
+              {{
+                (botStore.activeBotorUndefined && botStore.activeBotorUndefined.botName) ||
+                'No bot selected'
+              }}
             </b-nav-text>
             <b-nav-text class="verticalCenter">
-              {{ botStore.activeBot.isBotOnline ? 'Online' : 'Offline' }}
+              {{
+                botStore.activeBotorUndefined && botStore.activeBotorUndefined.isBotOnline
+                  ? 'Online'
+                  : 'Offline'
+              }}
             </b-nav-text>
           </li>
           <li v-if="botStore.hasBots" class="nav-item">
@@ -86,10 +84,17 @@
               <li class="nav-item text-secondary ml-2 d-sm-none d-flex justify-content-between">
                 <div class="d-flex">
                   <b-nav-text class="verticalCenter small mr-2">
-                    {{ botStore.activeBot.botName || 'No bot selected' }}
+                    {{
+                      (botStore.activeBotorUndefined && botStore.activeBotorUndefined.botName) ||
+                      'No bot selected'
+                    }}
                   </b-nav-text>
                   <b-nav-text class="verticalCenter">
-                    {{ botStore.activeBot.isBotOnline ? 'Online' : 'Offline' }}
+                    {{
+                      botStore.activeBotorUndefined && botStore.activeBotorUndefined.isBotOnline
+                        ? 'Online'
+                        : 'Offline'
+                    }}
                   </b-nav-text>
                 </div>
               </li>
@@ -175,10 +180,10 @@ export default defineComponent({
     const setTitle = () => {
       let title = 'freqUI';
       if (settingsStore.openTradesInTitle === OpenTradeVizOptions.asTitle) {
-        title = `(${botStore.activeBot.openTradeCount}) ${title}`;
+        title = `(${botStore.activeBotorUndefined?.openTradeCount}) ${title}`;
       }
-      if (botStore.activeBot.botName) {
-        title = `${title} - ${botStore.activeBot.botName}`;
+      if (botStore.activeBotorUndefined?.botName) {
+        title = `${title} - ${botStore.activeBotorUndefined?.botName}`;
       }
       document.title = title;
     };
@@ -203,16 +208,16 @@ export default defineComponent({
       const needsUpdate = settingsStore.openTradesInTitle !== state.openTradesInTitle;
       if (needsUpdate) {
         setTitle();
-        setOpenTradesAsPill(botStore.activeBot.openTradeCount);
+        setOpenTradesAsPill(botStore.activeBotorUndefined?.openTradeCount || 0);
       }
     });
 
     watch(
-      () => botStore.activeBot.botName,
+      () => botStore.activeBotorUndefined?.botName,
       () => setTitle(),
     );
     watch(
-      () => botStore.activeBot.openTradeCount,
+      () => botStore.activeBotorUndefined?.openTradeCount,
       () => {
         console.log('openTradeCount changed');
         if (settingsStore.openTradesInTitle === OpenTradeVizOptions.showPill) {

src/components/layout/NavFooter.vue

@@ -3,43 +3,23 @@
     <!-- Only visible on xs (phone) viewport! -->
     <hr class="my-0" />
     <div class="d-flex flex-align-center justify-content-center">
-      <router-link
-        v-if="!botStore.activeBot.canRunBacktest"
-        class="nav-link navbar-nav"
-        to="/open_trades"
-      >
+      <router-link v-if="!botStore.canRunBacktest" class="nav-link navbar-nav" to="/open_trades">
         <OpenTradesIcon />
         Trades
       </router-link>
-      <router-link
-        v-if="!botStore.activeBot.canRunBacktest"
-        class="nav-link navbar-nav"
-        to="/trade_history"
-      >
+      <router-link v-if="!botStore.canRunBacktest" class="nav-link navbar-nav" to="/trade_history">
         <ClosedTradesIcon />
         History
       </router-link>
-      <router-link
-        v-if="!botStore.activeBot.canRunBacktest"
-        class="nav-link navbar-nav"
-        to="/pairlist"
-      >
+      <router-link v-if="!botStore.canRunBacktest" class="nav-link navbar-nav" to="/pairlist">
         <PairListIcon />
         Pairlist
       </router-link>
-      <router-link
-        v-if="!botStore.activeBot.canRunBacktest"
-        class="nav-link navbar-nav"
-        to="/balance"
-      >
+      <router-link v-if="!botStore.canRunBacktest" class="nav-link navbar-nav" to="/balance">
         <BalanceIcon />
         Balance
       </router-link>
-      <router-link
-        v-if="!botStore.activeBot.canRunBacktest"
-        class="nav-link navbar-nav"
-        to="/dashboard"
-      >
+      <router-link v-if="!botStore.canRunBacktest" class="nav-link navbar-nav" to="/dashboard">
         <DashboardIcon />
         Dashboard
       </router-link>

src/stores/ftbotwrapper.ts

@@ -41,6 +41,8 @@ export const useBotStore = defineStore('wrapper', {
     botCount: (state) => Object.keys(state.availableBots).length,
     allBotStores: (state) => Object.values(state.botStores),
     activeBot: (state) => state.botStores[state.selectedBot] as BotSubStore,
+    activeBotorUndefined: (state) => state.botStores[state.selectedBot] as BotSubStore | undefined,
+    canRunBacktest: (state) => state.botStores[state.selectedBot]?.canRunBacktest ?? false,
     selectedBotObj: (state) => state.availableBots[state.selectedBot],
     nextBotId: (state) => {
       let botCount = Object.keys(state.availableBots).length;
@@ -149,6 +151,8 @@ export const useBotStore = defineStore('wrapper', {
       botStore.botAdded();
       this.botStores[bot.botId] = botStore;
       this.availableBots[bot.botId] = bot;
+      this.botStores = { ...this.botStores };
+      this.availableBots = { ...this.availableBots };
     },
     renameBot(bot: RenameBotPayload) {
       if (!Object.keys(this.availableBots).includes(bot.botId)) {
@@ -166,6 +170,8 @@ export const useBotStore = defineStore('wrapper', {
 
         delete this.botStores[botId];
         delete this.availableBots[botId];
+        this.botStores = { ...this.botStores };
+        this.availableBots = { ...this.availableBots };
         // commit('removeBot', botId);
       } else {
         console.warn(`bot ${botId} not found! could not remove`);