johanneslichtenberger

lib-app-helper.js

//Location: lib/app/helpers.js

const API_HOST = process.env.AXIOS_BASE_URL;
const API_PATH = process.env.AXIOS_REST_PATH;

/**
 *
 * @type {{withPath(*): *, getHostUrl(): *}}
 */
const LocationHelper = {
  getHostUrl() {
    return API_HOST;
  },

  withPath(path) {
    return this.getHostUrl() + path;
  }
};

/**
 *
 * @type {{withPath(*): *, getUrl(): *, reformatViolation(*): *, getHostUrl(): *, getPath(): *}}
 */
const ApiHelper = {
  getHostUrl() {
    return API_HOST;
  },

  getPath() {
    return API_PATH;
  },

  getUrl() {
    return (this.getHostUrl() + this.getPath());
  },

  withPath(path) {
    return this.getUrl() + path;
  },

  withFullPath(path) {
    return this.getHostUrl() + path;
  },

  remapViolations(response) {
    const data = response.data;
    const error = data['hydra:description'] ? data['hydra:description'] : response.statusText;
    const errors = { _error: error };
    data['violations'].map(violation =>
      Object.assign(errors, { [violation['propertyPath']]: violation.message }));
    return errors;
  }
};

/**
 *
 */
export {
  LocationHelper,
  ApiHelper
}

nuxt.config.js

//Location nuxt.config.js

const webpack = require("webpack");
require('dotenv').config();

export default {
  mode: process.env.NUXT_MODE,

  head: {
    title: process.env.DEFAULT_TITLE,
    meta: [
      {charset: 'utf-8'},
      {name: 'viewport', content: 'width=device-width, initial-scale=1'},
      {hid: 'description', name: 'description', content: process.env.DEFAULT_DESCRIPTION}
    ],
    link: [
      {rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'}
    ]
  },
  /*
  ** Customize the progress-bar color
  */
  loading: {color: '#00b9ff'},
  /*
  ** Global CSS
  */
  css: [
    'animate.css/animate.min.css',
    'vue-multiselect/dist/vue-multiselect.min.css',
    '@fortawesome/fontawesome-free/css/brands.css',
    '@fortawesome/fontawesome-free/css/regular.css',
    '@fortawesome/fontawesome-free/css/solid.css',
    '@fortawesome/fontawesome-free/css/fontawesome.css',
    'simple-line-icons/css/simple-line-icons.css',
    '~/assets/scss/whirl/whirl.scss',
    '~/assets/scss/bootstrap.scss',
    '~/assets/scss/app.scss'
  ],
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    '~/plugins/axios',
    '~/plugins/vee-validate.js',
    {src: '~/plugins/modernizr/modernizr-plugin.js', ssr: false},
    { src: '~/plugins/infinite-loading.js', ssr: false }
  ],
  /*
  ** Nuxt.js dev-modules
  */
  buildModules: [
    '@nuxtjs/moment'
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
    '@nuxtjs/dotenv',
    '@nuxtjs/axios',
    '@nuxtjs/auth',
    'bootstrap-vue/nuxt',
    '@nuxtjs/toast',
    ['nuxt-i18n', {
      locales: [
        {
          name: 'English',
          code: 'en',
          file: 'en.js'
        },
        {
          name: 'French',
          code: 'fr',
          file: 'fr.js'
        }
      ],
      langDir: 'lang/',
      defaultLocale: 'en',
      lazy: true
    }],
  ],
  axios: {
    baseURL: process.env.AXIOS_BASE_URL
  },
  auth: {
    strategies: {
      local: {
        endpoints: {
          login: {
            url: process.env.AUTH_LOGIN_URL,
            method: 'post',
            propertyName: false,
            withCredentials: true
          },
          user: {
            url: process.env.AUTH_PROFILE_URL,
            method: 'get',
            withCredentials: true,
            propertyName: false
          },
          logout: false
        },
        tokenRequired: false,
        tokenType: false
      },
      redirect: {
        login: '/login',
        home: '/home',
        logout: '/login'
      }
    }
  },
  toast: {
    position: "bottom-right",
    theme: "bubble",
    register: [ // Register custom toasts
      {
        name: 'app-error',
        message: 'Oops...Something went wrong',
        options: {
          type: 'error'
        }
      }
    ]
  },

  /*
  ** Build configuration
  */
  build: {
    extractCSS: true,
    transpile: ["vee-validate/dist/rules"],
    extend(config, {isDev, isClient}) {

    },
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jquery: 'jquery',
        'window.jQuery': 'jquery',
        jQuery: 'jquery'
      })
    ]
  },
  server: {
    port: process.env.SERVER_PORT,
    host: process.env.SERVER_HOST,
  },
  watchers: {
    webpack: {
      aggregateTimeout: 300,
      poll: 1000
    }
  }
}

plugins-axios.js

//Location: plugins/axios.js

export default function ({ $axios, redirect }) {

  $axios.onRequest(config => {
    config.headers.common['Content-Type'] = 'application/json';
    config.headers.common['Accept'] = 'application/json';
    
    config.headers.put['Content-Type'] = 'application/json';
    config.headers.put['Accept'] = 'application/json';
    
    config.headers.post['Content-Type'] = 'application/json';
    config.headers.post['Accept'] = 'application/json';
  });

  $axios.onError(error => {
    const code = parseInt(error.response && error.response.status);
    if (code === 401) {
      redirect('/login');
    }
  });
}

store-security-actions.js

//Location: store/security/actions.js

import * as types from './mutation-types';

export default {
  async login({commit}, payload) {
    commit(types.AUTHENTICATING);
    try {
      let response = await this.$auth.loginWith('local', {
        data: {
          email: payload.email,
          password: payload.password
        },
        withCredentials: true
      });
      commit(types.AUTHENTICATING_SUCCESS, response);
      this.$toast.success("Logged in", {duration: 2000});
      return response;
    } catch (error) {
      if (error.response && error.response.status === 401) {
        error = 'Invalid Credentials';
        this.$toast.error(error, {duration: 3000});
      }
      commit(types.AUTHENTICATING_ERROR, error);
      return null;
    }
  }
};

store-user-password.js

//Location: store/user/password.js

import {ApiHelper} from '~/lib/client/helpers';

const RESET = 'PASSWORD_UPDATE_RESET',
  SET_ERROR = 'PASSWORD_UPDATE_SET_ERROR',
  SET_UPDATED = 'PASSWORD_UPDATE_SET_UPDATED',
  SET_VIOLATIONS = 'PASSWORD_UPDATE_SET_VIOLATIONS',
  TOGGLE_LOADING = 'PASSWORD_UPDATE_TOGGLE_LOADING',
  UPDATE_RETRIEVED = 'PASSWORD_UPDATE_UPDATE_RETRIEVED';

export default {
  namespaced: true,
  state() {
    return {
      error: '',
      isLoading: false,
      updated: null,
      violations: {}
    }
  },

  mutations: {
    [RESET](state) {
      Object.assign(state, {
        error: '',
        isLoading: false,
        updated: null,
        violations: {}
      })
    },

    [SET_ERROR](state, error) {
      Object.assign(state, {error})
    },

    [TOGGLE_LOADING](state) {
      Object.assign(state, {isLoading: (!state.isLoading)})
    },

    [SET_UPDATED](state, updated) {
      Object.assign(state, {error: '', updated, violations: {}})
    },

    [SET_VIOLATIONS](state, violations) {
      Object.assign(state, {violations})
    }
  },

  getters: {
    error: state => state.error,
    isLoading: state => state.isLoading,
    updated: state => state.updated,
    violations: state => state.violations
  },

  actions: {
    async update({commit}, {path, values}) {
      if (!path) {
        throw new Error('DEV: API PATH not defined');
      }

      if (!values) {
        throw new Error('DEV: Value is empty');
      }
      let url = ApiHelper.withPath(path);

      try {
        commit(SET_ERROR, '');
        commit(TOGGLE_LOADING);

        let response = await this.$axios.$put(url, values, {
          withCredentials: true, 'headers': {
            'Content-Type': 'application/ld+json',
            'Accept': 'application/ld+json'
          }
        });

        commit(TOGGLE_LOADING);
        commit(SET_UPDATED, response);
        return response;
      } catch (error) {
        if (error.response && error.response.status === 400) {
          let violations = ApiHelper.remapViolations(error.response);
          commit(SET_VIOLATIONS, violations);
        }
        commit(TOGGLE_LOADING);
        commit(SET_ERROR, error);
        return null;
      }
    },

    updateRetrieved({commit}, updated) {
      commit(UPDATE_RETRIEVED, updated);
    },

    reset({commit}) {
      commit(RESET);
    }
  }
}