skillbox/client/src/main.js

import 'core-js/stable';
import {createApp, configureCompat } from 'vue';
import VueVimeoPlayer from 'vue-vimeo-player';
import apolloClientFactory from './graphql/client';
import App from './App.vue';
import {postLoginRedirectUrlKey, router} from './router';
import { store } from '@/store';
import VueScrollTo from 'vue-scrollto';
import autoGrow from '@/directives/auto-grow';
import clickOutside from '@/directives/click-outside';
import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
import VueModal from '@/plugins/modal';
import VueRemoveEdges from '@/plugins/edges';
import VueMatomo from 'vue-matomo';
import VueLogger from 'vuejs3-logger';
import { createApolloProvider } from '@vue/apollo-option';
import { joiningClass, loginRequired, unauthorizedAccess } from '@/router/guards';
import flavorPlugin from '@/plugins/flavor';

const publicApolloClient = apolloClientFactory('/api/graphql-public/', null);
const privateApolloClient = apolloClientFactory('/api/graphql/', networkErrorCallback);

const apolloProvider = createApolloProvider({
  clients: {
    publicClient: publicApolloClient,
  },
  defaultClient: privateApolloClient,
});

configureCompat({
  MODE: 2
});

const app = createApp(App);

app.use(store);

const isProduction = process.env.NODE_ENV === 'production';

app.use(VueModal);
app.use(VueRemoveEdges);
app.use(VueVimeoPlayer);
app.use(VueLogger, {
  isEnabled: true,
  logLevel: isProduction ? 'error' : 'debug',
  stringifyArguments: false,
  showConsoleColors: true,
});
app.use(apolloProvider);
app.use(router);

// VueScrollTo.setDefaults({
//   duration: 500,
//   easing: 'ease-out',
//   offset: -50,
// });

app.directive('scroll-to', VueScrollTo);


app.use(flavorPlugin);

if (process.env.MATOMO_HOST) {
  app.use(VueMatomo, {
    host: process.env.MATOMO_HOST,
    siteId: process.env.MATOMO_SITE_ID,
    router: router,
  });
}

app.directive('click-outside', clickOutside);
app.directive('auto-grow', autoGrow);

/* guards */



function redirectUsersWithoutValidLicense() {
  return privateApolloClient.query({
    query: ME_QUERY,
  }).then(({data}) => data.me.expiryDate == null);
}

function redirectStudentsWithoutClass() {
  return privateApolloClient.query({
    query: ME_QUERY,
  }).then(({data}) => data.me.schoolClasses.length === 0 && !data.me.isTeacher);
}

function redirectUsersToOnboarding() {
  return privateApolloClient.query({
    query: ME_QUERY,
  }).then(({data}) => !data.me.onboardingVisited);
}

function networkErrorCallback(statusCode) {
  if (statusCode === 402) {
    router.push({name: 'licenseActivation'});
  }
}


router.beforeEach(async (to, from, next) => {
  // todo: make logger work outside vue app
  // const logger = inject('vuejs3-logger');
  // logger.$log.debug('navigation guard called', to, from);
  if (to.path === '/logout') {
    await publicApolloClient.resetStore();
    if (process.env.LOGOUT_REDIRECT_URL) {
      location.replace(`https://sso.hep-verlag.ch/logout?return_to=${process.env.LOGOUT_REDIRECT_URL}`);
      next(false);
      return;
    } else {
      next({name: 'hello'});
      return;
    }
  }

  if (unauthorizedAccess(to)) {
    //logger.$log.debug('unauthorized', to);
    const postLoginRedirectionUrl = to.path;
    const redirectUrl = `/hello/`;

    if (window.localStorage) {
      localStorage.setItem(postLoginRedirectUrlKey, postLoginRedirectionUrl);
    }

    // logger.$log.debug('redirecting to hello', to);
    next(redirectUrl);
    return;
  }

  if (to.name && to.name !== 'licenseActivation' && loginRequired(to) && await redirectUsersWithoutValidLicense()) {
    // logger.$log.debug('redirecting to licenseActivation', to, null);
    console.log('redirecting to licenseActivation', to, null);
    next({name: 'licenseActivation'});
    return;
  }

  if (!joiningClass(to) && loginRequired(to) && await redirectStudentsWithoutClass()) {
    //logger.$log.debug('redirecting to join-class', to);
    //logger.$log.debug('await redirectStudentsWithoutClass()', await redirectStudentsWithoutClass());
    next({name: 'join-class'});
    return;
  }

  if ((to.name && to.name.indexOf('onboarding') === -1) && !joiningClass(to) && loginRequired(to) && await redirectUsersToOnboarding()) {
    //logger.$log.debug('redirecting to onboarding-start', to);
    next({name: 'onboarding-start'});
    return;
  }

  //logger.$log.debug('End of Guard reached', to);
  next();
});

app.mount('#app');