Only show logout when logged in

src/assets/staticData/alertTypes.js

@@ -0,0 +1,8 @@
+const types = Object.freeze({
+  SUCCESS: 'Success',
+  INFO: 'Info',
+  WARNING: 'Warning',
+  ERROR: 'Error',
+});
+
+export default types;

src/components/shared/alert.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="container">
+    <!-- eslint-disable max-len -->
+    <div class="alert alert-success" v-if="type === 'SUCCESS'">
+      <eva-icon name="checkmark-outline"></eva-icon>
+      <strong>{{ text }}</strong>
+    </div>
+    <div class="alert alert-info" v-if="type === 'INFO'">
+      <eva-icon name="info-outline"></eva-icon>
+      <strong>{{ text }}</strong>
+    </div>
+    <div class="alert alert-warning" v-if="type === 'WARNING'">
+      <eva-icon name="alert-circle-outline"></eva-icon>
+      <strong>{{ text }}</strong>
+    </div>
+    <div class="alert alert-danger" v-if="type === 'ERROR'">
+      <eva-icon name="slash-outline"></eva-icon>
+      <strong>{{ text }}</strong>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Alert',
+  data() {
+    return {
+      alertTypes: {
+        SUCCESS: 'Success',
+        INFO: 'Info',
+        WARNING: 'Warning',
+        ERROR: 'Error',
+      },
+    };
+  },
+  props: {
+    text: null,
+    type: null,
+  },
+};
+</script>
+
+<style>
+</style>

src/components/shared/navBar.vue

@@ -60,6 +60,7 @@
                   @click="routerGoTo('/timeshare/sell')"
                 >To Sell</a>
                 <a
+                  v-if="showLogout"
                   class="dropdown-item cursor-pointer"
                   @click="routerGoTo('/timeshare/sell')"
                 >My Timeshare Weeks</a>
@@ -103,12 +104,14 @@
                   class="dropdown-item cursor-pointer"
                   @click="routerGoTo('/property/Residential/Rental')"
                 >To Rent Residential Properties</a>
-                <hr />
+                <hr v-if="showLogout" />
                 <a
+                  v-if="showLogout"
                   class="dropdown-item cursor-pointer"
                   @click="routerGoTo('/property/list/Commercial/MyListings')"
                 >My Commercial Properties</a>
                 <a
+                  v-if="showLogout"
                   class="dropdown-item cursor-pointer"
                   @click="routerGoTo('/property/list/Residential/MyListings')"
                 >My Residential Properties</a>
@@ -179,6 +182,7 @@
             <li class="nav-item dropdown">
               <a
                 class="nav-link"
+                v-if="hideLogin"
                 @click="routerGoTo('/user/login')"
                 id="navbarDropdown"
                 role="button"
@@ -187,6 +191,18 @@
                 aria-expanded="false"
               >Login</a>
             </li>
+            <li class="nav-item dropdown">
+              <span v-if="showLogout">
+                <a class="nav-link" @click="logout()">Logout</a>
+              </span>
+              <span v-else></span>
+            </li>
+            <li>
+              <span v-if="showLogout">
+                <a>Welcome! {{ }}</a>
+              </span>
+              <span v-else></span>
+            </li>
           </ul>
         </div>
       </div>
@@ -202,10 +218,6 @@
         </button>
       </div>
     </div>
-    <span v-if="showLogout">
-      <a @click="logout()">Logout</a>
-    </span>
-    <span v-else></span>
   </nav>
 </template>
 
@@ -220,6 +232,9 @@ export default {
     showLogout() {
       return this.$store.state.authentication.status === 'success';
     },
+    hideLogin() {
+      return this.$store.state.authentication.status !== 'success';
+    },
     Logout() {
       return this.$store.state.authentication.methods.logout;
     },

src/components/user/loginPage.vue

@@ -8,6 +8,11 @@
             <h4>Login</h4>
             <br />
           </div>
+          <!-- <alert :text="'Login successful'" :type="'SUCCESS'" />
+          <alert :text="'User does not exist, please register'" :type="'ERROR'" />
+          <alert :text="'Username is incorrect'" :type="'WARNING'" />
+          <alert :text="'Password is incorrect'" :type="'WARNING'" />
+          <alert :text="'Caps Lock is on'" :type="'INFO'" />-->
           <div class="row">
             <div class="col-md-11" style="margin-bottom: 1em">
               <div class="input-group mb-3">
@@ -76,6 +81,7 @@
         <div class="form">
           <h5>Trouble signing in?</h5>
           <div>
+            <!-- <alert :text="'Username & password request email sent'" :type="'SUCCESS'" /> -->
             <div class="row">
               <div class="input-group-prepend">
                 <span class="input-group-text">
@@ -97,11 +103,13 @@
 
 <script>
 import { mapActions, mapState } from 'vuex';
-// import axios from 'axios';
-// import User from '../../assets/Log';
+import alert from '../shared/alert.vue';
 
 export default {
   name: 'Login',
+  components: {
+    alert,
+  },
   data() {
     return {
       username: '',

vue.config.js

@@ -2,7 +2,7 @@ module.exports = {
   devServer: {
     proxy: {
       '/api': {
-        target: 'http://192.168.6.188:5000',
+        target: 'http://localhost:57260',
         changeOrigin: true,
       },
     },