Add error page and login error redirection

js/src/router/actor.ts

@@ -3,6 +3,7 @@ import CreateGroup from '@/views/Group/Create.vue';
 import Group from '@/views/Group/Group.vue';
 import GroupList from '@/views/Group/GroupList.vue';
 import Identities from '@/views/Account/Identities.vue';
+import { RouteConfig } from 'vue-router';
 
 export enum ActorRouteName {
   IDENTITIES = 'Identities',
@@ -12,7 +13,7 @@ export enum ActorRouteName {
   PROFILE = 'Profile',
 }
 
-export const actorRoutes = [
+export const actorRoutes: RouteConfig[] = [
   {
     path: '/identities',
     name: ActorRouteName.IDENTITIES,

js/src/router/error.ts

@@ -0,0 +1,16 @@
+import { beforeRegisterGuard } from '@/router/guards/register-guard';
+import { RouteConfig } from 'vue-router';
+import ErrorPage from '@/views/Error.vue';
+
+export enum ErrorRouteName {
+  ERROR = 'Error',
+}
+
+export const errorRoutes: RouteConfig[] = [
+  {
+    path: '/error',
+    name: ErrorRouteName.ERROR,
+    component: ErrorPage,
+    beforeEnter: beforeRegisterGuard,
+  },
+];

js/src/router/event.ts

@@ -2,6 +2,7 @@ import EventList from '@/views/Event/EventList.vue';
 import Location from '@/views/Location.vue';
 import CreateEvent from '@/views/Event/Create.vue';
 import Event from '@/views/Event/Event.vue';
+import { RouteConfig } from 'vue-router';
 
 export enum EventRouteName {
   EVENT_LIST = 'EventList',
@@ -11,7 +12,7 @@ export enum EventRouteName {
   LOCATION = 'Location',
 }
 
-export const eventRoutes = [
+export const eventRoutes: RouteConfig[] = [
   {
     path: '/events/list/:location?',
     name: EventRouteName.EVENT_LIST,

js/src/router/guards/auth-guard.ts

@@ -0,0 +1,21 @@
+import { NavigationGuard } from 'vue-router';
+import { UserRouteName } from '@/router/user';
+import { LoginErrorCode } from '@/types/login-error-code.model';
+import { AUTH_TOKEN } from '@/constants';
+
+export const authGuardIfNeeded: NavigationGuard = async function (to, from, next) {
+  if (to.meta.requiredAuth !== true) return next();
+
+  // We can't use "currentUser" from apollo here because we may not have loaded the user from the local storage yet
+  if (!localStorage.getItem(AUTH_TOKEN)) {
+    return next({
+      name: UserRouteName.LOGIN,
+      query: {
+        code: LoginErrorCode.NEED_TO_LOGIN,
+        redirect: to.fullPath,
+      },
+    });
+  }
+
+  return next();
+};

js/src/router/guards/register-guard.ts

@@ -0,0 +1,23 @@
+import { apolloProvider } from '@/vue-apollo';
+import { CONFIG } from '@/graphql/config';
+import { IConfig } from '@/types/config.model';
+import { NavigationGuard } from 'vue-router';
+import { ErrorRouteName } from '@/router/error';
+import { ErrorCode } from '@/types/error-code.model';
+
+export const beforeRegisterGuard: NavigationGuard = async function (to, from, next) {
+  const { data } = await apolloProvider.defaultClient.query({
+    query: CONFIG,
+  });
+
+  const config: IConfig = data.config;
+
+  if (config.registrationsOpen === false) {
+    return next({
+      name: ErrorRouteName.ERROR,
+      query: { code: ErrorCode.REGISTRATION_CLOSED },
+    });
+  }
+
+  return next();
+};

js/src/router/index.ts

@@ -5,6 +5,8 @@ import Home from '@/views/Home.vue';
 import { UserRouteName, userRoutes } from './user';
 import { EventRouteName, eventRoutes } from '@/router/event';
 import { ActorRouteName, actorRoutes } from '@/router/actor';
+import { ErrorRouteName, errorRoutes } from '@/router/error';
+import { authGuardIfNeeded } from '@/router/guards/auth-guard';
 
 Vue.use(Router);
 
@@ -20,6 +22,7 @@ export const RouteName = {
   ...UserRouteName,
   ...EventRouteName,
   ...ActorRouteName,
+  ...ErrorRouteName,
 };
 
 const router = new Router({
@@ -29,6 +32,7 @@ const router = new Router({
     ...userRoutes,
     ...eventRoutes,
     ...actorRoutes,
+    ...errorRoutes,
 
     {
       path: '/',
@@ -46,4 +50,6 @@ const router = new Router({
   ],
 });
 
+router.beforeEach(authGuardIfNeeded);
+
 export default router;

js/src/router/user.ts

@@ -5,6 +5,8 @@ import Validate from '@/views/User/Validate.vue';
 import ResendConfirmation from '@/views/User/ResendConfirmation.vue';
 import SendPasswordReset from '@/views/User/SendPasswordReset.vue';
 import PasswordReset from '@/views/User/PasswordReset.vue';
+import { beforeRegisterGuard } from '@/router/guards/register-guard';
+import { RouteConfig } from 'vue-router';
 
 export enum UserRouteName {
   REGISTER = 'Register',
@@ -16,13 +18,14 @@ export enum UserRouteName {
   LOGIN = 'Login',
 }
 
-export const userRoutes = [
+export const userRoutes: RouteConfig[] = [
   {
     path: '/register/user',
     name: UserRouteName.REGISTER,
     component: RegisterUser,
     props: true,
     meta: { requiredAuth: false },
+    beforeEnter: beforeRegisterGuard,
   },
   {
     path: '/register/profile',