skillbox/client/src/main.js

119 lines
3.1 KiB
JavaScript

import 'babel-polyfill'
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import VueVimeoPlayer from 'vue-vimeo-player'
import apolloClient from './graphql/client'
import VueApollo from 'vue-apollo'
import App from './App'
import router from './router'
import store from '@/store/index'
import VueScrollTo from 'vue-scrollto';
import VueAnalytics from 'vue-analytics';
import {Validator, install as VeeValidate} from 'vee-validate/dist/vee-validate.minimal.esm.js';
import {required, min} from 'vee-validate/dist/rules.esm.js';
import veeDe from 'vee-validate/dist/locale/de';
import {dateFilter} from './filters/date-filter';
Vue.config.productionTip = false;
// TODO: Move into a separate project as a plugin
//
function getRidOfEdges(collection) {
if (typeof collection === 'object' && collection && !Array.isArray(collection)) {
let newObj = {};
for (const k in collection) {
if (k === 'edges') {
return collection.edges.map(edge => getRidOfEdges(edge.node));
} else {
newObj[k] = getRidOfEdges(collection[k]);
if (newObj[k]) {
// delete newObj[k]['__typename']
}
}
}
return newObj
} else {
return collection
}
}
Object.defineProperty(Vue.prototype, '$getRidOfEdges', {value: getRidOfEdges});
Vue.use(VueApollo);
Vue.use(VueAxios, axios);
Vue.use(VueVimeoPlayer);
Vue.use(VueScrollTo, {
duration: 500,
easing: 'ease-out',
offset: -50
});
if (process.env.GOOGLE_ANALYTICS_ID) {
Vue.use(VueAnalytics, {
id: process.env.GOOGLE_ANALYTICS_ID,
router
});
console.log(process.env.GOOGLE_ANALYTICS_ID);
}
// taken from https://stackoverflow.com/questions/36170425/detect-click-outside-element
Vue.directive('click-outside', {
bind(el, binding, vnode) {
el.clickOutsideEvent = event => {
if (!(el === event.target || el.contains(event.target))) {
vnode.context[binding.expression](event);
}
};
document.body.addEventListener('click', el.clickOutsideEvent);
},
unbind(el) {
document.body.removeEventListener('click', el.clickOutsideEvent)
}
});
const apolloProvider = new VueApollo({
defaultClient: apolloClient
});
Validator.extend('required', required);
Validator.extend('min', min);
const dict = {
custom: {
oldPassword: {
required: 'Dein aktuelles Passwort fehlt'
},
newPassword: {
required: 'Dein neues Passwort fehlt',
min: 'Das neue Passwort muss mindestens 8 Zeichen lang sein'
}
}
}
Validator.localize('de', veeDe)
Validator.localize('de', dict)
// https://github.com/baianat/vee-validate/issues/51
Validator.extend('strongPassword', {
getMessage: field => 'Das Passwort muss Grossbuchstaben, Zahlen und Sonderzeichen beinhalten',
validate: value => {
const strongRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*?(),.":{}|<>+])(?=.{8,})/;
return strongRegex.test(value);
}
})
Vue.use(VeeValidate, {
locale: 'de'
});
Vue.filter('date', dateFilter);
/* eslint-disable no-new */
new Vue({
el: '#app',
store,
router,
provide: apolloProvider.provide(),
render: h => h(App)
});