261 logout pop up

frontend/src/components/LogoutModal.vue

@@ -0,0 +1,35 @@
+<template>
+  <b-modal
+    id="logout-modal"
+    :title="$t('common.are_you_sure')"
+    :ok-title="$t('common.logout')"
+    :cancel-title="$t('common.cancel')"
+    ok-variant="danger"
+    @ok="logout"
+    class="logout-modal"
+  >
+    <p>
+      {{ $t('logout.offline_logout_warning') }}
+    </p>
+  </b-modal>
+</template>
+
+<script>
+import router from '../router';
+import { logoutRoute } from '../router/routes';
+
+export default {
+  name: 'LogoutModal',
+  methods: {
+    logout() {
+      router.push(logoutRoute);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.logout-modal {
+  color: black;
+}
+</style>

frontend/src/components/NavigationItems.vue

@@ -16,7 +16,7 @@
 import flatMap from 'array.prototype.flatmap';
 import { mapState } from 'vuex';
 import { USER } from '../store';
-import { groupBasedRoutes } from '../router/index';
+import { groupBasedRoutes } from '../router/routes';
 
 export default {
   name: 'NavigationItems',

frontend/src/components/Sidebar.vue

@@ -1,12 +1,12 @@
 <template>
-  <ScaleRotate
+  <scale-rotate
     class="mobile-menu"
     v-if="show"
     right
   >
     <b-nav fill>
-      <NavigationItems />
-      <Language />
+      <navigation-items />
+      <language />
 
       <a
         class="out-link"
@@ -18,30 +18,15 @@
           src="../assets/logo_codeforpoznan.svg"
         >
       </a>
-
-      <b-nav-item
-        v-if="user"
-        @click="LOGOUT"
-        to="/logout"
-        key="logout"
-        class="username"
-        :class="{ offline: !isOnline }"
-      >
-        {{ $t('common.logout') }}
-        <p>{{ user.username }}</p>
-      </b-nav-item>
+      <user-details />
     </b-nav>
-  </ScaleRotate>
+  </scale-rotate>
 </template>
 
 <script>
 import { ScaleRotate } from 'vue-burger-menu';
-import { mapActions, mapGetters, mapState } from 'vuex';
-
-import { USER } from '../store';
-import * as actions from '../store/actions';
-import { IS_ONLINE } from '../store/constants';
 
+import UserDetails from './UserDetails.vue';
 import NavigationItems from './NavigationItems.vue';
 import Language from './Language.vue';
 
@@ -51,20 +36,14 @@ export default {
     ScaleRotate,
     NavigationItems,
     Language,
+    UserDetails,
   },
   props: {
     show: {
       type: Boolean,
       required: true,
     },
   },
-  computed: {
-    ...mapState([USER]),
-    ...mapGetters([IS_ONLINE]),
-  },
-  methods: {
-    ...mapActions([actions.LOGOUT]),
-  },
 };
 </script>
 
@@ -79,10 +58,4 @@ export default {
   width: 100%;
   height: 100%;
 }
-
-.offline {
-  cursor: default;
-  pointer-events: none;
-  text-decoration: none;
-}
 </style>

frontend/src/components/Status.vue

@@ -10,8 +10,7 @@
 import { mapState } from 'vuex';
 import { USER } from '../store';
 import { IS_ONLINE } from '../store/constants';
-import { loginRoute } from '../router';
-
+import { loginRoute } from '../router/routes';
 
 export default {
   name: 'Refresh',

frontend/src/components/UserDetails.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <b-nav-item
+      v-if="user"
+      v-b-modal.logout-modal
+      @click="logout"
+      key="logout"
+      class="username"
+    >
+      {{ $t('common.logout') }}
+      <p>{{ user.username }}</p>
+    </b-nav-item>
+    <logout-modal v-if="!isOnline" />
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapState } from 'vuex';
+
+import router from '../router';
+import { logoutRoute } from '../router/routes';
+import { USER } from '../store';
+import { IS_ONLINE } from '../store/constants';
+
+import LogoutModal from './LogoutModal.vue';
+
+export default {
+  name: 'UserDetails',
+  components: {
+    LogoutModal,
+  },
+  computed: {
+    ...mapState([USER]),
+    ...mapGetters([IS_ONLINE]),
+  },
+  methods: {
+    logout() {
+      if (this.isOnline) {
+        router.push(logoutRoute);
+      }
+    },
+  },
+};
+</script>

frontend/src/mixins/GroupGuardMixin.js

@@ -1,8 +1,8 @@
 import store from '../store';
-import { groupBasedRoutes } from '../router';
+import { groupBasedRoutes } from '../router/routes';
 import { reverseObject } from '../services/reverseObject';
 
-const { user } = store.state;
+const { user } = store ? store.state : { user: undefined };
 const groups = user ? user.groups.map(({ name }) => name.toLowerCase()) : [];
 
 const getRouteGroup = (routeName) => {

frontend/src/router/index.js

@@ -1,112 +1,27 @@
 import Vue from 'vue';
 import Router from 'vue-router';
-import flatMap from 'array.prototype.flatmap';
 
-import HomeView from '../views/HomeView.vue';
-import LoginView from '../views/LoginView.vue';
-import DriveFormView from '../views/DriveFormView.vue';
-import DrivesView from '../views/DrivesView.vue';
-import SuccessfulLogoutView from '../views/SuccessfulLogoutView.vue';
-import PassengerView from '../views/PassengerView.vue';
-import PassengerSubmitView from '../views/PassengerSubmitView.vue';
+import flatMap from 'array.prototype.flatmap';
 
 import store from '../store';
-import * as mutations from '../store/mutations';
-import { deleteStorageData } from '../services/api/auth';
 import { isUserLoggedIn } from '../services/api/user';
 
-Vue.use(Router);
+import routes, {
+  openRoutes,
+  homeRoute,
+  pageNotFoundRoute,
+  loginRoute,
+  groupBasedRoutes,
+  allGroupBasedRoutes,
+} from './routes';
 
-export const loginRoute = {
-  path: '/login',
-  name: 'Login',
-  component: LoginView,
-};
-export const driveCreateRoute = {
-  path: '/drive',
-  name: 'Drive',
-  component: DriveFormView,
-};
-export const driveListRoute = {
-  path: '/drives',
-  name: 'Drives',
-  component: DrivesView,
-};
-export const passengerRoute = {
-  path: '/passenger',
-  name: 'Passenger',
-  component: PassengerView,
-};
-export const passengerSubmitRoute = {
-  path: '/confirm',
-  name: 'Confirm',
-  component: PassengerSubmitView,
-};
-export const homeRoute = {
-  path: '/',
-  name: 'Home',
-  component: HomeView,
-};
-export const logoutRoute = {
-  path: '/logout',
-  name: 'Logout',
-  component: SuccessfulLogoutView,
-};
-export const pageNotFoundRoute = {
-  path: '*',
-  name: 'PageNotFound',
-  component: HomeView,
-  props: { pageNotFound: true },
-};
+Vue.use(Router);
 
 const router = new Router({
   mode: 'history',
-  routes: [
-    loginRoute,
-    driveCreateRoute,
-    driveListRoute,
-    passengerRoute,
-    passengerSubmitRoute,
-    homeRoute,
-    pageNotFoundRoute,
-    logoutRoute,
-  ],
+  routes,
 });
 
-export const groupBasedRoutes = {
-  driver: [
-    {
-      text: 'common.new_drive',
-      to: driveCreateRoute,
-      visibleOnMenu: true,
-    },
-    {
-      text: 'common.drives',
-      to: driveListRoute,
-      visibleOnMenu: true,
-    },
-  ],
-  passenger: [
-    {
-      text: 'common.confirm_drive',
-      to: passengerRoute,
-      visibleOnMenu: true,
-    },
-    {
-      text: '',
-      to: passengerSubmitRoute,
-      visibleOnMenu: false,
-    },
-  ],
-};
-
-const allGroupBasedRoutes = [
-  ...groupBasedRoutes.driver,
-  ...groupBasedRoutes.passenger,
-].map(route => route.to.name);
-
-const openRoutes = [loginRoute.name];
-
 router.beforeEach((to, _from, next) => {
   const userLoggedIn = isUserLoggedIn();
 
@@ -115,20 +30,6 @@ router.beforeEach((to, _from, next) => {
     return next({ path: homeRoute.path });
   }
 
-  // user is going to log out
-  if (userLoggedIn && to.name === logoutRoute.name) {
-    store.commit(mutations.SET_USER, null);
-    deleteStorageData();
-    store.commit(mutations.SET_LOGOUT_PROGRESS, true);
-    return next();
-  }
-
-  // user logged out
-  if (store.state.logoutInProgress && to.name === logoutRoute.name) {
-    store.commit(mutations.SET_LOGOUT_PROGRESS, false);
-    return next();
-  }
-
   // route is open
   if (openRoutes.includes(to.name)) {
     return next();
@@ -147,8 +48,8 @@ router.beforeEach((to, _from, next) => {
   if (userLoggedIn && allGroupBasedRoutes.includes(to.name)) {
     const availableRoutes = flatMap(
       store.state.user.groups,
-      group => groupBasedRoutes[group.name.toLowerCase()],
-    ).map(route => route.to.name);
+      (group) => groupBasedRoutes[group.name.toLowerCase()]
+    ).map((route) => route.to.name);
 
     const routeAccessible = availableRoutes.includes(to.name);