Add logout confirmation screen

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "arrowParens": "always"
+}

frontend/src/App.vue

@@ -4,7 +4,7 @@
     <Header />
     <ScaleRotate
       class="mobile-menu"
-      v-if="!isLogin"
+      v-if="!isLogin && !isConfirmationPage && !isLogout"
       right>
       <NavigationItems />
     </ScaleRotate>
@@ -35,7 +35,9 @@ import Refresh from './components/Refresh.vue';
 import Status from './components/Status.vue';
 import store, { LANGUAGE } from './store';
 import NavigationItems from './components/NavigationItems.vue';
-import { loginRoute } from './router';
+
+import { confirmationRoute, loginRoute, logoutRoute, successfulLogoutRoute } from './router';
+
 import { SYNC } from './store/constants';
 import { FETCH_USER } from './store/actions';
 
@@ -47,6 +49,13 @@ export default {
     isLogin() {
       return this.$router.currentRoute.path === loginRoute.path;
     },
+    isLogout() {
+      return this.$router.currentRoute.path === successfulLogoutRoute.path ||
+             this.$router.currentRoute.path === logoutRoute.path;
+    },
+    isConfirmationPage() {
+      return this.$route.name === confirmationRoute.name;
+    },
   },
   methods: {
     ...mapActions({

frontend/src/router/index.js

@@ -5,6 +5,7 @@ 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 { getItem } from '../services/localStore';
 import store from '../store';
 import * as mutations from '../store/mutations';
@@ -38,6 +39,11 @@ export const logoutRoute = {
   path: '/logout',
   name: 'Logout',
 };
+export const successfulLogoutRoute = {
+  path: '/logout_success',
+  name: 'SuccesfulLogout',
+  component: SuccessfulLogoutView,
+};
 export const pageNotFoundRoute = {
   path: '*',
   name: 'PageNotFound',
@@ -54,12 +60,15 @@ const router = new Router({
     homeRoute,
     pageNotFoundRoute,
     logoutRoute,
+    successfulLogoutRoute,
   ],
 });
 
-const openRoutes = [loginRoute.name];
+const openRoutes = [loginRoute.name, successfulLogoutRoute.name];
 
 router.beforeEach((to, _from, next) => {
+  const userLoggedIn = getItem(tokenKey);
+
   // 404 if not route matches
   if (to.name === pageNotFoundRoute.name) {
     return next({ path: homeRoute.path });
@@ -68,22 +77,19 @@ router.beforeEach((to, _from, next) => {
   if (to.name === logoutRoute.name) {
     store.commit(mutations.SET_USER, null);
     deleteToken();
-    return next({ path: homeRoute.path });
+    return next(successfulLogoutRoute.path);
   }
 
   if (openRoutes.includes(to.name)) {
     return next();
   }
 
-  if (!getItem(tokenKey) && !openRoutes.includes(to.name)) {
+  // Redirect to login if user tries to access closed route without token
+  if (!userLoggedIn && !openRoutes.includes(to.name)) {
     return next({ path: loginRoute.path });
   }
-
-  if (to.name === loginRoute.name && getItem(tokenKey)) {
-    return next({ path: homeRoute.path });
-  }
-
-  if (to.name === loginRoute.name && getItem(tokenKey)) {
+  // Redirect home if logged-in user tries to access login route
+  if (userLoggedIn && (to.name === loginRoute.name || to.name === successfulLogoutRoute.name)) {
     return next({ path: homeRoute.path });
   }
   return next();

frontend/src/store/actions.js

@@ -4,8 +4,14 @@ import { getMyself } from '../services/api/user';
 import * as mutations from './mutations';
 import { mapDrive } from './helpers';
 import { i18n } from '../main';
-import { actions as apiActions, namespaces, SYNC, SYNC_ITEM_SUCCESS, SYNC_ITEM_FAILURE,
-  UNSYNCHRONISED_DRIVES } from './constants';
+import {
+  actions as apiActions,
+  namespaces,
+  SYNC,
+  SYNC_ITEM_SUCCESS,
+  SYNC_ITEM_FAILURE,
+  UNSYNCHRONISED_DRIVES,
+} from './constants';
 
 export const FETCH_USER = 'FETCH_USER';
 export const LOGIN = 'LOGIN';
@@ -33,7 +39,9 @@ export const actions = {
       .then((token) => {
         commit(mutations.SET_LOGIN_ERROR, null);
         saveToken(token);
-        dispatch(FETCH_USER, { callback: () => window.location.replace('/drive') });
+        dispatch(FETCH_USER, {
+          callback: () => window.location.replace('/drive'),
+        });
       })
       .catch(() => {
         commit(mutations.SET_LOGIN_ERROR, i18n.tc('login.login_error'));
@@ -46,7 +54,7 @@ export const actions = {
   [LOGOUT]({ commit }) {
     commit(mutations.SET_USER, null);
     deleteToken();
-    window.location.replace(login.path);
+    window.location.replace('/logout_success');
   },
 
   [SUBMIT]({ commit, dispatch }, { form }) {
@@ -65,7 +73,11 @@ export const actions = {
       return;
     }
 
-    if (state[UNSYNCHRONISED_DRIVES].length === 0 || !state.user || !navigator.onLine) {
+    if (
+      state[UNSYNCHRONISED_DRIVES].length === 0 ||
+      !state.user ||
+      !navigator.onLine
+    ) {
       return;
     }
 
@@ -79,7 +91,10 @@ export const actions = {
       if (e.response && e.response.status === 409) {
         // was synced previously
         commit(SYNC_ITEM_SUCCESS, timestamp);
-      } else if (e.response && (e.response.status === 400 || e.response.status === 500)) {
+      } else if (
+        e.response &&
+        (e.response.status === 400 || e.response.status === 500)
+      ) {
         commit(SYNC_ITEM_FAILURE, timestamp);
       }
     }

frontend/src/translations.json

@@ -11,7 +11,7 @@
       "new_drive": "Додати новий маршрут",
       "no": "ні",
       "page_not_found": "страница, которую вы ищете, не существует",
-      "drives":"Маршрути",
+      "drives": "Маршрути",
       "unexpected_error": "Сталася несподівана помилка. Зверніться до адміністратора.",
       "yes": "так"
     },
@@ -34,8 +34,7 @@
       "project": "Проект",
       "start_location": "Початковий пункт поїздки",
       "starting_mileage": "Початкове значення вимірювального приладу",
-      "start_mileage_error":
-        "Початкове значення вимірювального приладу має неправильне значення",
+      "start_mileage_error": "Початкове значення вимірювального приладу має неправильне значення",
       "submit": "Надіслати",
       "validation_error": "Потрібно заповнити {field}"
     },
@@ -44,8 +43,7 @@
       "description": "Опис:",
       "ending_mileage": "Кінцеве значення вимірювального приладу",
       "from_to": "Від {from} до {destination} (Кінцевий пункт поїздки)",
-      "no_driver_drives":
-        "У базі даних не зберігається цього маршруту.Ви можете додати новий маршрут, вибравши опцію з меню.",
+      "no_driver_drives": "У базі даних не зберігається цього маршруту.Ви можете додати новий маршрут, вибравши опцію з меню.",
       "synced_drives": "Минулі поїздки",
       "project": "Проект",
       "starting_mileage": "Початкове значення вимірювального приладу",
@@ -63,6 +61,11 @@
       "username": "Ім'я користувача",
       "username_required": "Запит імені користувача"
     },
+    "logout": {
+      "thank_you": "Thank you!",
+      "successfully_logged_out": "Successfully logged out.",
+      "login_again": "Login again"
+    },
     "refresh": {
       "new_version": "Доступна нова версія вебсайту",
       "reload": "Перезавантаження системи"
@@ -79,8 +82,7 @@
       "about": "About",
       "error": "Error",
       "home": "Home",
-      "intro":
-        "The Polish Humanitarian Action is a Polish non-governmental organisation which operates in Poland and other countries. Its mission is \"to make the world a better place through alleviation of human suffering and promotion of humanitarian values\".",
+      "intro": "The Polish Humanitarian Action is a Polish non-governmental organisation which operates in Poland and other countries. Its mission is \"to make the world a better place through alleviation of human suffering and promotion of humanitarian values\".",
       "loading": "Loading",
       "login": "Login",
       "logout": "Logout",
@@ -119,8 +121,7 @@
       "description": "Description:",
       "ending_mileage": "Ending mileage:",
       "from_to": "From {from} to {destination}",
-      "no_driver_drives":
-        "You have no drives stored in database. You can add a new drive by choosing option from the menu.",
+      "no_driver_drives": "You have no drives stored in database. You can add a new drive by choosing option from the menu.",
       "synced_drives": "Previous drives",
       "project": "Project",
       "starting_mileage": "Starting mileage:",
@@ -138,6 +139,11 @@
       "username": "Username",
       "username_required": "Username is required"
     },
+    "logout": {
+      "thank_you": "Thank you!",
+      "successfully_logged_out": "Successfully logged out.",
+      "login_again": "Login again"
+    },
     "refresh": {
       "new_version": "A new version of website is available.",
       "reload": "Reload"
@@ -154,8 +160,7 @@
       "about": "O nas",
       "error": "Błąd",
       "home": "Strona główna",
-      "intro":
-       "Polska Akcja Humanitarna jest polską organizacją pozarządową działającą w Polsce i innych krajach. Jego misją jest \"jest uczynienie świata lepszym miejscem poprzez łagodzenie ludzkiego cierpienia i promowanie wartości humanitarnych\".",
+      "intro": "Polska Akcja Humanitarna jest polską organizacją pozarządową działającą w Polsce i innych krajach. Jego misją jest \"jest uczynienie świata lepszym miejscem poprzez łagodzenie ludzkiego cierpienia i promowanie wartości humanitarnych\".",
       "loading": "Ładowanie",
       "login": "Zaloguj",
       "logout": "Wyloguj",
@@ -194,8 +199,7 @@
       "description": "Opis trasy:",
       "ending_mileage": "Końcowy stan licznika:",
       "from_to": "Z {from} do {destination}",
-      "no_driver_drives":
-        "Nie masz żadnych tras zapisanych w bazie danych. Możesz dodać nową trasę, wybierając opcję z menu.",
+      "no_driver_drives": "Nie masz żadnych tras zapisanych w bazie danych. Możesz dodać nową trasę, wybierając opcję z menu.",
       "synced_drives": "Poprzednie przejazdy",
       "project": "Projekt",
       "starting_mileage": "Początkowy stan licznika:",
@@ -209,6 +213,11 @@
       "username": "Nazwa użytkownika",
       "username_required": "Nazwa użytkownika jest wymagana"
     },
+    "logout": {
+      "thank_you": "Dziękujemy!",
+      "successfully_logged_out": "Wylogowano pomyślnie.",
+      "login_again": "Zaloguj się ponownie"
+    },
     "refresh": {
       "new_version": "Jest dostępna nowa wersja strony.",
       "reload": "Odśwież"

frontend/src/views/SuccessfulLogoutView.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <h1>{{ $t('logout.thank_you') }}</h1>
+    <p>{{ $t('logout.successfully_logged_out') }}</p>
+    <a href="/login">{{ $t('logout.login_again') }}</a>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SuccessfulLogoutView',
+};
+</script>