Updated vuejs and vuetify.

2026-10-17 05:41:25 +02:00 · 2020-10-16 09:03:47 +02:00
parent 8898eda7c4
commit 110c527671
64 changed files with 10687 additions and 17091 deletions
@@ -1,18 +0,0 @@
-{
-  "presets": [
-    ["env", {
-      "modules": false,
-      "targets": {
-        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
-      }
-    }],
-    "stage-2"
-  ],
-  "plugins": ["transform-vue-jsx", "transform-runtime"],
-  "env": {
-    "test": {
-      "presets": ["env", "stage-2"],
-      "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
-    }
-  }
-}
@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead
@@ -1,9 +1,5 @@
-root = true
-
-[*]
-charset = utf-8
+[*.{js,jsx,ts,tsx,vue}]
 indent_style = space
 indent_size = 2
-end_of_line = lf
-insert_final_newline = true
 trim_trailing_whitespace = true
+insert_final_newline = true
@@ -0,0 +1 @@
+VUE_APP_API_BASE_URL=http://localhost:8000/api/v1
@@ -1,5 +0,0 @@
-/build/
-/config/
-/dist/
-/*.js
-/test/unit/coverage/
@@ -1,42 +1,28 @@
-// https://eslint.org/docs/user-guide/configuring
-
 module.exports = {
  root: true,
+  env: {
+    node: true
+  },
+  extends: [
+    'plugin:vue/essential',
+    '@vue/standard'
+  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
-  env: {
-    browser: true
-  },
-  extends: [
-    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
-    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
-    'plugin:vue/essential',
-    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
-    'standard'
-  ],
-  // required to lint *.vue files
-  plugins: ['vue'],
-  // add your custom rules here
  rules: {
-    // allow async-await
-    'generator-star-spacing': 'off',
-    // allow debugger during development
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    indent: ['error', 4]
-    // 'space-before-function-paren': ['error', 'never']
-  }
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
+  },
+  overrides: [
+    {
+      files: [
+        '**/__tests__/*.{j,t}s?(x)',
+        '**/tests/unit/**/*.spec.{j,t}s?(x)'
+      ],
+      env: {
+        mocha: true
+      }
+    }
+  ]
 }
-
-// {
-//   "eslint.enable": true,
-//   "eslint.autoFixOnSave": true,
-//   "eslint.run": "onType",
-//   "eslint.options": {
-//     "extensions": [".js", ".vue"]
-//   },
-//   "eslint.validate": [{
-//     "language": "vue",
-//     "autoFix": true
-//   }]
-// }
@@ -1,10 +1,17 @@
 .DS_Store
-node_modules/
-/dist/
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-/test/unit/coverage/
+pnpm-debug.log*

 # Editor directories and files
 .idea
@@ -13,3 +20,4 @@ yarn-error.log*
 *.ntvs*
 *.njsproj
 *.sln
+*.sw?
@@ -1,10 +0,0 @@
-// https://github.com/michael-ciniawsky/postcss-load-config
-
-module.exports = {
-  "plugins": {
-    "postcss-import": {},
-    "postcss-url": {},
-    // to edit target browsers: use "browserslist" field in package.json
-    "autoprefixer": {}
-  }
-}
@@ -1,27 +1,29 @@
 # frontend

-> Vue.js frontend for Modoboa
-
-## Build Setup
-
-``` bash
-# install dependencies
-npm install
-
-# serve with hot reload at localhost:8080
-npm run dev
-
-# build for production with minification
-npm run build
-
-# build for production and view the bundle analyzer report
-npm run build --report
-
-# run unit tests
-npm run unit
-
-# run all tests
-npm test
+## Project setup
+```
+yarn install
 ```

-For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
+### Compiles and hot-reloads for development
+```
+yarn serve
+```
+
+### Compiles and minifies for production
+```
+yarn build
+```
+
+### Run your unit tests
+```
+yarn test:unit
+```
+
+### Lints and fixes files
+```
+yarn lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}
@@ -1,41 +0,0 @@
-'use strict'
-require('./check-versions')()
-
-process.env.NODE_ENV = 'production'
-
-const ora = require('ora')
-const rm = require('rimraf')
-const path = require('path')
-const chalk = require('chalk')
-const webpack = require('webpack')
-const config = require('../config')
-const webpackConfig = require('./webpack.prod.conf')
-
-const spinner = ora('building for production...')
-spinner.start()
-
-rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
-  if (err) throw err
-  webpack(webpackConfig, (err, stats) => {
-    spinner.stop()
-    if (err) throw err
-    process.stdout.write(stats.toString({
-      colors: true,
-      modules: false,
-      children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
-      chunks: false,
-      chunkModules: false
-    }) + '\n\n')
-
-    if (stats.hasErrors()) {
-      console.log(chalk.red('  Build failed with errors.\n'))
-      process.exit(1)
-    }
-
-    console.log(chalk.cyan('  Build complete.\n'))
-    console.log(chalk.yellow(
-      '  Tip: built files are meant to be served over an HTTP server.\n' +
-      '  Opening index.html over file:// won\'t work.\n'
-    ))
-  })
-})
@@ -1,54 +0,0 @@
-'use strict'
-const chalk = require('chalk')
-const semver = require('semver')
-const packageConfig = require('../package.json')
-const shell = require('shelljs')
-
-function exec (cmd) {
-  return require('child_process').execSync(cmd).toString().trim()
-}
-
-const versionRequirements = [
-  {
-    name: 'node',
-    currentVersion: semver.clean(process.version),
-    versionRequirement: packageConfig.engines.node
-  }
-]
-
-if (shell.which('npm')) {
-  versionRequirements.push({
-    name: 'npm',
-    currentVersion: exec('npm --version'),
-    versionRequirement: packageConfig.engines.npm
-  })
-}
-
-module.exports = function () {
-  const warnings = []
-
-  for (let i = 0; i < versionRequirements.length; i++) {
-    const mod = versionRequirements[i]
-
-    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
-      warnings.push(mod.name + ': ' +
-        chalk.red(mod.currentVersion) + ' should be ' +
-        chalk.green(mod.versionRequirement)
-      )
-    }
-  }
-
-  if (warnings.length) {
-    console.log('')
-    console.log(chalk.yellow('To use this template, you must update following to modules:'))
-    console.log()
-
-    for (let i = 0; i < warnings.length; i++) {
-      const warning = warnings[i]
-      console.log('  ' + warning)
-    }
-
-    console.log()
-    process.exit(1)
-  }
-}
@@ -1,101 +0,0 @@
-'use strict'
-const path = require('path')
-const config = require('../config')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
-const packageConfig = require('../package.json')
-
-exports.assetsPath = function (_path) {
-  const assetsSubDirectory = process.env.NODE_ENV === 'production'
-    ? config.build.assetsSubDirectory
-    : config.dev.assetsSubDirectory
-
-  return path.posix.join(assetsSubDirectory, _path)
-}
-
-exports.cssLoaders = function (options) {
-  options = options || {}
-
-  const cssLoader = {
-    loader: 'css-loader',
-    options: {
-      sourceMap: options.sourceMap
-    }
-  }
-
-  const postcssLoader = {
-    loader: 'postcss-loader',
-    options: {
-      sourceMap: options.sourceMap
-    }
-  }
-
-  // generate loader string to be used with extract text plugin
-  function generateLoaders (loader, loaderOptions) {
-    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
-
-    if (loader) {
-      loaders.push({
-        loader: loader + '-loader',
-        options: Object.assign({}, loaderOptions, {
-          sourceMap: options.sourceMap
-        })
-      })
-    }
-
-    // Extract CSS when that option is specified
-    // (which is the case during production build)
-    if (options.extract) {
-      return ExtractTextPlugin.extract({
-        use: loaders,
-        fallback: 'vue-style-loader'
-      })
-    } else {
-      return ['vue-style-loader'].concat(loaders)
-    }
-  }
-
-  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
-  return {
-    css: generateLoaders(),
-    postcss: generateLoaders(),
-    less: generateLoaders('less'),
-    sass: generateLoaders('sass', { indentedSyntax: true }),
-    scss: generateLoaders('sass'),
-    stylus: generateLoaders('stylus'),
-    styl: generateLoaders('stylus')
-  }
-}
-
-// Generate loaders for standalone style files (outside of .vue)
-exports.styleLoaders = function (options) {
-  const output = []
-  const loaders = exports.cssLoaders(options)
-
-  for (const extension in loaders) {
-    const loader = loaders[extension]
-    output.push({
-      test: new RegExp('\\.' + extension + '$'),
-      use: loader
-    })
-  }
-
-  return output
-}
-
-exports.createNotifierCallback = () => {
-  const notifier = require('node-notifier')
-
-  return (severity, errors) => {
-    if (severity !== 'error') return
-
-    const error = errors[0]
-    const filename = error.file && error.file.split('!').pop()
-
-    notifier.notify({
-      title: packageConfig.name,
-      message: severity + ': ' + error.name,
-      subtitle: filename || '',
-      icon: path.join(__dirname, 'logo.png')
-    })
-  }
-}
@@ -1,23 +0,0 @@
-'use strict'
-const utils = require('./utils')
-const config = require('../config')
-const isProduction = process.env.NODE_ENV === 'production'
-const sourceMapEnabled = isProduction
-  ? config.build.productionSourceMap
-  : config.dev.cssSourceMap
-
-module.exports = {
-  loaders: utils.cssLoaders({
-    sourceMap: sourceMapEnabled,
-    extract: isProduction,
-    scss: 'style!css!sass'
-  }),
-  cssSourceMap: sourceMapEnabled,
-  cacheBusting: config.dev.cacheBusting,
-  transformToRequire: {
-    video: ['src', 'poster'],
-    source: 'src',
-    img: 'src',
-    image: 'xlink:href'
-  }
-}
@@ -1,103 +0,0 @@
-'use strict'
-const path = require('path')
-const utils = require('./utils')
-const config = require('../config')
-const vueLoaderConfig = require('./vue-loader.conf')
-const BundleTracker = require('webpack-bundle-tracker')
-
-function resolve (dir) {
-  return path.join(__dirname, '..', dir)
-}
-
-const createLintingRule = () => ({
-  test: /\.(js|vue)$/,
-  loader: 'eslint-loader',
-  enforce: 'pre',
-  include: [resolve('src'), resolve('test')],
-  options: {
-    formatter: require('eslint-friendly-formatter'),
-    emitWarning: !config.dev.showEslintErrorsInOverlay
-  }
-})
-
-module.exports = {
-  context: path.resolve(__dirname, '../'),
-  entry: {
-    app: './src/main.js'
-  },
-  plugins: process.env.NODE_ENV === 'production'
-    ? [new BundleTracker({
-        path: config.build.assetsRoot,
-        filename: utils.assetsPath('webpack-stats.json')
-      })]
-    : [new BundleTracker({filename: './webpack-stats.json'})],
-  output: {
-    path: config.build.assetsRoot,
-    filename: '[name].js',
-    publicPath: process.env.NODE_ENV === 'production'
-      ? config.build.assetsPublicPath
-      : config.dev.assetsPublicPath
-  },
-  resolve: {
-    extensions: ['.js', '.vue', '.json'],
-    alias: {
-      'vue$': 'vue/dist/vue.esm.js',
-      '@': resolve('src'),
-    }
-  },
-  module: {
-    rules: [
-      ...(config.dev.useEslint ? [createLintingRule()] : []),
-      {
-        test: /\.vue$/,
-        loader: 'vue-loader',
-        options: vueLoaderConfig
-      },
-      {
-        test: /\.s[a|c]ss$/,
-        loader: 'style!css!sass'
-      },
-      {
-        test: /\.js$/,
-        loader: 'babel-loader',
-        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
-      },
-      {
-        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
-        loader: 'url-loader',
-        options: {
-          limit: 10000,
-          name: utils.assetsPath('img/[name].[hash:7].[ext]')
-        }
-      },
-      {
-        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
-        loader: 'url-loader',
-        options: {
-          limit: 10000,
-          name: utils.assetsPath('media/[name].[hash:7].[ext]')
-        }
-      },
-      {
-        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
-        loader: 'url-loader',
-        options: {
-          limit: 10000,
-          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
-        }
-      }
-    ]
-  },
-  node: {
-    // prevent webpack from injecting useless setImmediate polyfill because Vue
-    // source contains it (although only uses it if it's native).
-    setImmediate: false,
-    // prevent webpack from injecting mocks to Node native modules
-    // that does not make sense for the client
-    dgram: 'empty',
-    fs: 'empty',
-    net: 'empty',
-    tls: 'empty',
-    child_process: 'empty'
-  }
-}
@@ -1,98 +0,0 @@
-'use strict'
-const utils = require('./utils')
-const webpack = require('webpack')
-const config = require('../config')
-const merge = require('webpack-merge')
-const path = require('path')
-const baseWebpackConfig = require('./webpack.base.conf')
-const CopyWebpackPlugin = require('copy-webpack-plugin')
-const HtmlWebpackPlugin = require('html-webpack-plugin')
-const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
-const portfinder = require('portfinder')
-
-const HOST = process.env.HOST
-const PORT = process.env.PORT && Number(process.env.PORT)
-
-const devWebpackConfig = merge(baseWebpackConfig, {
-  module: {
-    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
-  },
-  // cheap-module-eval-source-map is faster for development
-  devtool: config.dev.devtool,
-
-  // these devServer options should be customized in /config/index.js
-  devServer: {
-    clientLogLevel: 'warning',
-    historyApiFallback: {
-      rewrites: [
-        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
-      ],
-    },
-    hot: true,
-    contentBase: false, // since we use CopyWebpackPlugin.
-    compress: true,
-    host: HOST || config.dev.host,
-    port: PORT || config.dev.port,
-    open: config.dev.autoOpenBrowser,
-    overlay: config.dev.errorOverlay
-      ? { warnings: false, errors: true }
-      : false,
-    publicPath: config.dev.assetsPublicPath,
-    proxy: config.dev.proxyTable,
-    quiet: true, // necessary for FriendlyErrorsPlugin
-    watchOptions: {
-      poll: config.dev.poll,
-    },
-    headers: {
-     'Access-Control-Allow-Origin': '*'
-    }
-  },
-    plugins: [
-        new webpack.DefinePlugin({
-      'process.env': require('../config/dev.env')
-    }),
-    new webpack.HotModuleReplacementPlugin(),
-    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
-    new webpack.NoEmitOnErrorsPlugin(),
-    // https://github.com/ampedandwired/html-webpack-plugin
-    new HtmlWebpackPlugin({
-      filename: 'index.html',
-      template: 'index.html',
-      inject: true
-    }),
-    // copy custom static assets
-    new CopyWebpackPlugin([
-      {
-        from: path.resolve(__dirname, '../static'),
-        to: config.dev.assetsSubDirectory,
-        ignore: ['.*']
-      }
-    ])
-  ]
-})
-
-module.exports = new Promise((resolve, reject) => {
-  portfinder.basePort = process.env.PORT || config.dev.port
-  portfinder.getPort((err, port) => {
-    if (err) {
-      reject(err)
-    } else {
-      // publish the new Port, necessary for e2e tests
-      process.env.PORT = port
-      // add port to devServer config
-      devWebpackConfig.devServer.port = port
-
-      // Add FriendlyErrorsPlugin
-      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
-        compilationSuccessInfo: {
-          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
-        },
-        onErrors: config.dev.notifyOnErrors
-        ? utils.createNotifierCallback()
-        : undefined
-      }))
-
-      resolve(devWebpackConfig)
-    }
-  })
-})
@@ -1,149 +0,0 @@
-'use strict'
-const path = require('path')
-const utils = require('./utils')
-const webpack = require('webpack')
-const config = require('../config')
-const merge = require('webpack-merge')
-const baseWebpackConfig = require('./webpack.base.conf')
-const CopyWebpackPlugin = require('copy-webpack-plugin')
-const HtmlWebpackPlugin = require('html-webpack-plugin')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
-const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
-
-const env = process.env.NODE_ENV === 'testing'
-  ? require('../config/test.env')
-  : require('../config/prod.env')
-
-const webpackConfig = merge(baseWebpackConfig, {
-  module: {
-    rules: utils.styleLoaders({
-      sourceMap: config.build.productionSourceMap,
-      extract: true,
-      usePostCSS: true
-    })
-  },
-  devtool: config.build.productionSourceMap ? config.build.devtool : false,
-  output: {
-    path: config.build.assetsRoot,
-    filename: utils.assetsPath('js/[name].[chunkhash].js'),
-    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
-  },
-  plugins: [
-    // http://vuejs.github.io/vue-loader/en/workflow/production.html
-    new webpack.DefinePlugin({
-      'process.env': env
-    }),
-    new UglifyJsPlugin({
-      uglifyOptions: {
-        compress: {
-          warnings: false
-        }
-      },
-      sourceMap: config.build.productionSourceMap,
-      parallel: true
-    }),
-    // extract css into its own file
-    new ExtractTextPlugin({
-      filename: utils.assetsPath('css/[name].[contenthash].css'),
-      // Setting the following option to `false` will not extract CSS from codesplit chunks.
-      // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
-      // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 
-      // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
-      allChunks: true,
-    }),
-    // Compress extracted CSS. We are using this plugin so that possible
-    // duplicated CSS from different components can be deduped.
-    new OptimizeCSSPlugin({
-      cssProcessorOptions: config.build.productionSourceMap
-        ? { safe: true, map: { inline: false } }
-        : { safe: true }
-    }),
-    // generate dist index.html with correct asset hash for caching.
-    // you can customize output by editing /index.html
-    // see https://github.com/ampedandwired/html-webpack-plugin
-    new HtmlWebpackPlugin({
-      filename: process.env.NODE_ENV === 'testing'
-        ? 'index.html'
-        : config.build.index,
-      template: 'index.html',
-      inject: true,
-      minify: {
-        removeComments: true,
-        collapseWhitespace: true,
-        removeAttributeQuotes: true
-        // more options:
-        // https://github.com/kangax/html-minifier#options-quick-reference
-      },
-      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
-      chunksSortMode: 'dependency'
-    }),
-    // keep module.id stable when vendor modules does not change
-    new webpack.HashedModuleIdsPlugin(),
-    // enable scope hoisting
-    new webpack.optimize.ModuleConcatenationPlugin(),
-    // split vendor js into its own file
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'vendor',
-      minChunks (module) {
-        // any required modules inside node_modules are extracted to vendor
-        return (
-          module.resource &&
-          /\.js$/.test(module.resource) &&
-          module.resource.indexOf(
-            path.join(__dirname, '../node_modules')
-          ) === 0
-        )
-      }
-    }),
-    // extract webpack runtime and module manifest to its own file in order to
-    // prevent vendor hash from being updated whenever app bundle is updated
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'manifest',
-      minChunks: Infinity
-    }),
-    // This instance extracts shared chunks from code splitted chunks and bundles them
-    // in a separate chunk, similar to the vendor chunk
-    // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'app',
-      async: 'vendor-async',
-      children: true,
-      minChunks: 3
-    }),
-
-    // copy custom static assets
-    new CopyWebpackPlugin([
-      {
-        from: path.resolve(__dirname, '../static'),
-        to: config.build.assetsSubDirectory,
-        ignore: ['.*']
-      }
-    ])
-  ]
-})
-
-if (config.build.productionGzip) {
-  const CompressionWebpackPlugin = require('compression-webpack-plugin')
-
-  webpackConfig.plugins.push(
-    new CompressionWebpackPlugin({
-      asset: '[path].gz[query]',
-      algorithm: 'gzip',
-      test: new RegExp(
-        '\\.(' +
-        config.build.productionGzipExtensions.join('|') +
-        ')$'
-      ),
-      threshold: 10240,
-      minRatio: 0.8
-    })
-  )
-}
-
-if (config.build.bundleAnalyzerReport) {
-  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
-  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
-}
-
-module.exports = webpackConfig
@@ -1,7 +0,0 @@
-'use strict'
-const merge = require('webpack-merge')
-const prodEnv = require('./prod.env')
-
-module.exports = merge(prodEnv, {
-  NODE_ENV: '"development"'
-})
@@ -1,76 +0,0 @@
-'use strict'
-// Template version: 1.3.1
-// see http://vuejs-templates.github.io/webpack for documentation.
-
-const path = require('path')
-
-module.exports = {
-  dev: {
-
-    // Paths
-    assetsSubDirectory: 'static',
-    assetsPublicPath: 'http://localhost:8080/',
-    proxyTable: {},
-
-    // Various Dev Server settings
-    host: 'localhost', // can be overwritten by process.env.HOST
-    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
-    autoOpenBrowser: false,
-    errorOverlay: true,
-    notifyOnErrors: true,
-    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
-
-    // Use Eslint Loader?
-    // If true, your code will be linted during bundling and
-    // linting errors and warnings will be shown in the console.
-    useEslint: true,
-    // If true, eslint errors and warnings will also be shown in the error overlay
-    // in the browser.
-    showEslintErrorsInOverlay: false,
-
-    /**
-     * Source Maps
-     */
-
-    // https://webpack.js.org/configuration/devtool/#development
-    devtool: 'cheap-module-eval-source-map',
-
-    // If you have problems debugging vue-files in devtools,
-    // set this to false - it *may* help
-    // https://vue-loader.vuejs.org/en/options.html#cachebusting
-    cacheBusting: true,
-
-    cssSourceMap: true
-  },
-
-  build: {
-    // Template for index.html
-    index: path.resolve(__dirname, '../dist/index.html'),
-
-    // Paths
-    assetsRoot: path.resolve(__dirname, '../../modoboa/static'),
-    assetsSubDirectory: 'admin',
-    assetsPublicPath: '/sitestatic/',
-
-    /**
-     * Source Maps
-     */
-
-    productionSourceMap: true,
-    // https://webpack.js.org/configuration/devtool/#production
-    devtool: '#source-map',
-
-    // Gzip off by default as many popular static hosts such as
-    // Surge or Netlify already gzip all static assets for you.
-    // Before setting to `true`, make sure to:
-    // npm install --save-dev compression-webpack-plugin
-    productionGzip: false,
-    productionGzipExtensions: ['js', 'css'],
-
-    // Run the build command with an extra argument to
-    // View the bundle analyzer report after build finishes:
-    // `npm run build --report`
-    // Set to `true` or `false` to always turn it on or off
-    bundleAnalyzerReport: process.env.npm_config_report
-  }
-}
@@ -1,4 +0,0 @@
-'use strict'
-module.exports = {
-  NODE_ENV: '"production"'
-}
@@ -1,7 +0,0 @@
-'use strict'
-const merge = require('webpack-merge')
-const devEnv = require('./dev.env')
-
-module.exports = merge(devEnv, {
-  NODE_ENV: '"testing"'
-})
@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <title>frontend</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>
@@ -1,91 +1,45 @@
 {
  "name": "frontend",
-  "version": "1.0.0",
-  "description": "Vue.js frontend for Modoboa",
-  "author": "Antoine Nguyen <tonio@ngyn.org>",
+  "version": "0.1.0",
  "private": true,
  "scripts": {
-    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
-    "start": "npm run dev",
-    "unit": "jest --config test/unit/jest.conf.js --coverage",
-    "test": "npm run unit",
-    "lint": "eslint --ext .js,.vue src test/unit",
-    "build": "node build/build.js"
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "test:unit": "vue-cli-service test:unit",
+    "lint": "vue-cli-service lint"
  },
  "dependencies": {
-    "@mdi/font": "^2.2.43",
-    "js-cookie": "^2.2.0",
-    "material-design-icons-iconfont": "^3.0.3",
-    "vue": "^2.5.2",
-    "vue-resource": "^1.5.0",
-    "vue-router": "^3.0.1",
-    "vuetify": "^1.2.0",
-    "vuex": "^3.0.1"
+    "core-js": "^3.6.5",
+    "js-cookie": "^2.2.1",
+    "vue": "^2.6.11",
+    "vue-cookie": "^1.1.4",
+    "vue-router": "^3.2.0",
+    "vuetify": "^2.2.11",
+    "vuex": "^3.4.0"
  },
  "devDependencies": {
-    "autoprefixer": "^7.1.2",
-    "babel-core": "^6.22.1",
-    "babel-eslint": "^8.2.1",
-    "babel-helper-vue-jsx-merge-props": "^2.0.3",
-    "babel-jest": "^21.0.2",
-    "babel-loader": "^7.1.1",
-    "babel-plugin-dynamic-import-node": "^1.2.0",
-    "babel-plugin-syntax-jsx": "^6.18.0",
-    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
-    "babel-plugin-transform-runtime": "^6.22.0",
-    "babel-plugin-transform-vue-jsx": "^3.5.0",
-    "babel-preset-env": "^1.3.2",
-    "babel-preset-stage-2": "^6.22.0",
-    "chalk": "^2.0.1",
-    "copy-webpack-plugin": "^4.0.1",
-    "css-loader": "^0.28.0",
-    "eslint": "^4.19.1",
-    "eslint-config-standard": "^10.2.1",
-    "eslint-friendly-formatter": "^3.0.0",
-    "eslint-loader": "^1.7.1",
-    "eslint-plugin-import": "^2.7.0",
-    "eslint-plugin-node": "^5.2.0",
-    "eslint-plugin-promise": "^3.4.0",
-    "eslint-plugin-standard": "^3.0.1",
-    "eslint-plugin-vue": "^4.5.0",
-    "extract-text-webpack-plugin": "^3.0.0",
-    "file-loader": "^1.1.4",
-    "friendly-errors-webpack-plugin": "^1.6.1",
-    "html-webpack-plugin": "^2.30.1",
-    "jest": "^22.0.4",
-    "jest-serializer-vue": "^0.3.0",
-    "node-notifier": "^5.1.2",
-    "node-sass": "^4.9.0",
-    "optimize-css-assets-webpack-plugin": "^3.2.0",
-    "ora": "^1.2.0",
-    "portfinder": "^1.0.13",
-    "postcss-import": "^11.0.0",
-    "postcss-loader": "^2.0.8",
-    "postcss-url": "^7.2.1",
-    "rimraf": "^2.6.0",
-    "sass-loader": "^7.0.3",
-    "semver": "^5.3.0",
-    "shelljs": "^0.7.6",
-    "style-loader": "^0.21.0",
-    "uglifyjs-webpack-plugin": "^1.1.1",
-    "url-loader": "^0.5.8",
-    "vue-jest": "^1.0.2",
-    "vue-loader": "^13.3.0",
-    "vue-style-loader": "^3.1.2",
-    "vue-template-compiler": "^2.5.2",
-    "webpack": "^3.6.0",
-    "webpack-bundle-analyzer": "^2.9.0",
-    "webpack-bundle-tracker": "^0.3.0",
-    "webpack-dev-server": "^2.9.1",
-    "webpack-merge": "^4.1.0"
-  },
-  "engines": {
-    "node": ">= 6.0.0",
-    "npm": ">= 3.0.0"
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not ie <= 8"
-  ]
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-router": "~4.5.0",
+    "@vue/cli-plugin-unit-mocha": "~4.5.0",
+    "@vue/cli-plugin-vuex": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "@vue/eslint-config-standard": "^5.1.2",
+    "@vue/test-utils": "^1.0.3",
+    "axios": "^0.18.0",
+    "babel-eslint": "^10.1.0",
+    "chai": "^4.1.2",
+    "eslint": "^6.7.2",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-standard": "^4.0.0",
+    "eslint-plugin-vue": "^6.2.2",
+    "sass": "^1.26.5",
+    "sass-loader": "^8.0.2",
+    "vue-cli-plugin-axios": "~0.0.4",
+    "vue-cli-plugin-vuetify": "~2.0.7",
+    "vue-template-compiler": "^2.6.11",
+    "vuetify-loader": "^1.3.0"
+  }
 }
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
@@ -1,31 +1,43 @@
 <template>
-  <v-app>
-    <navbar ref="navbar"></navbar>
-    <v-toolbar
-        :clipped-left="$vuetify.breakpoint.lgAndUp"
-        color="blue darken-3"
-        dark
-        app
-    >
-      <v-toolbar-title style="width: 300px" class="ml-0 pl-3">
-        <v-toolbar-side-icon @click.stop="$refs.navbar.drawer = !$refs.navbar.drawer">
-        </v-toolbar-side-icon>
-        <span class="hidden-sm-and-down">Modoboa</span>
-      </v-toolbar-title>
-    </v-toolbar>
-    <v-content>
-      <v-container fluid>
-        <router-view/>
-      </v-container>
-    </v-content>
-  </v-app>
+<v-app v-if="!isAuthenticated">
+  <v-main>
+    <v-container fluid fill-height>
+      <router-view />
+    </v-container>
+  </v-main>
+</v-app>
+<v-app v-else>
+  <topbar />
+  <navbar />
+  <v-main>
+    <v-container fluid>
+      <router-view/>
+    </v-container>
+  </v-main>
+</v-app>
 </template>

 <script>
-import Navbar from './components/navigation/Navbar'
+import { mapGetters } from 'vuex'
+import Navbar from '@/components/layout/Navbar'
+import Topbar from '@/components/layout/Topbar'

 export default {
-    name: 'App',
-    components: { Navbar }
+  name: 'App',
+  computed: {
+    ...mapGetters({
+      isAuthenticated: 'auth/isAuthenticated'
+    })
+  },
+  components: {
+    Navbar,
+    Topbar
+  },
+  // created () {
+  //   this.$store.dispatch('auth/initialize')
+  // },
+  data: () => ({
+    //
+  })
 }
 </script>
@@ -1,47 +0,0 @@
-import Vue from 'vue'
-import VueResource from 'vue-resource'
-
-Vue.use(VueResource)
-
-var domainResource = Vue.resource('/api/v1/domains{/pk}/')
-
-export const getDomains = () => {
-    return domainResource.get()
-}
-
-export const createDomain = data => {
-    return domainResource.save(data)
-}
-
-export const updateDomain = data => {
-    return domainResource.update({ pk: data.pk }, data)
-}
-
-var customParametersActions = {
-    applications: {method: 'GET', url: '/api/v1/parameters/applications/'},
-    structure: {method: 'GET', url: '/api/v1/parameters/structure/'}
-}
-var parametersResource = Vue.resource(
-    '/api/v1/parameters{/app}/', {}, customParametersActions)
-
-export const getParametersForApplication = (app) => {
-    return parametersResource.get({app: app})
-}
-
-export const getParametersApplications = () => {
-    return parametersResource.applications()
-}
-
-export const getParametersStructure = (app) => {
-    return parametersResource.structure({app: app})
-}
-
-export const saveParametersForApplication = (app, values) => {
-    return parametersResource.update({app: app}, values)
-}
-
-var logResource = Vue.resource('/api/v1/logs{/pk}/')
-
-export const getLogs = () => {
-    return logResource.get()
-}
@@ -52,10 +52,10 @@
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
-          <v-btn color="blue darken-1" flat @click="cancel">
+          <v-btn color="blue darken-1" text @click="cancel">
            Cancel
          </v-btn>
-          <v-btn color="blue darken-1" flat @click="save">
+          <v-btn color="blue darken-1" text @click="save">
            Save
          </v-btn>
        </v-card-actions>
@@ -65,56 +65,63 @@
 </template>

 <script>
+import { mapGetters } from 'vuex'
+
 export default {
-    data () {
-        return {
-            formErrors: {},
-            domain: {}
-        }
-    },
-    mounted () {
-        var domainPk = this.$route.params.domainPk
-        if (domainPk) {
-            if (!this.$store.state.domainsLoaded) {
-                this.$store.dispatch('getDomains').then(response => {
-                    this.loadDomain(domainPk)
-                })
-            } else {
-                this.loadDomain(domainPk)
-            }
-        }
-    },
-    methods: {
-        loadDomain (pk) {
-            this.domain = JSON.parse(
-                JSON.stringify(this.$store.getters.getDomainByPk(pk))
-            )
-        },
-        onSaveError (response) {
-            this.formErrors = response.data
-        },
-        save () {
-            var action
-            var msg
-            if (this.domain.pk) {
-                action = 'updateDomain'
-                msg = 'Domain updated.'
-            } else {
-                action = 'createDomain'
-                msg = 'Domain created.'
-            }
-            this.$store.dispatch(action, this.domain).then(response => {
-                this.$router.push({ name: 'DomainList' })
-                this.$toast.open({
-                    message: msg,
-                    type: 'is-success',
-                    position: 'is-bottom'
-                })
-            }, this.onSaveError)
-        },
-        cancel () {
-            this.$router.push({ name: 'DomainList' })
-        }
+  data () {
+    return {
+      formErrors: {},
+      domain: {}
    }
+  },
+  computed: {
+    ...mapGetters({
+      getDomainByPk: 'domains/getDomainByPk'
+    })
+  },
+  mounted () {
+    var domainPk = this.$route.params.domainPk
+    if (domainPk) {
+      if (!this.$store.state.domainsLoaded) {
+        this.$store.dispatch('domains/getDomains').then(response => {
+          this.loadDomain(domainPk)
+        })
+      } else {
+        this.loadDomain(domainPk)
+      }
+    }
+  },
+  methods: {
+    loadDomain (pk) {
+      this.domain = JSON.parse(
+        JSON.stringify(this.getDomainByPk(pk))
+      )
+    },
+    onSaveError (response) {
+      this.formErrors = response.data
+    },
+    save () {
+      var action
+      var msg
+      if (this.domain.pk) {
+        action = 'domains/updateDomain'
+        msg = 'Domain updated.'
+      } else {
+        action = 'domains/createDomain'
+        msg = 'Domain created.'
+      }
+      this.$store.dispatch(action, this.domain).then(response => {
+        this.$router.push({ name: 'DomainList' })
+        this.$toast.open({
+          message: msg,
+          type: 'is-success',
+          position: 'is-bottom'
+        })
+      }, this.onSaveError)
+    },
+    cancel () {
+      this.$router.push({ name: 'DomainList' })
+    }
+  }
 }
 </script>
@@ -1,157 +1,125 @@
 <template>
-  <v-layout>
-    <v-flex>
-      <v-toolbar flat color="white">
-        <v-toolbar-title>Domains</v-toolbar-title>
-        <v-divider class="mx-2" inset vertical></v-divider>
-        <v-spacer></v-spacer>
-        <v-text-field
-            v-model="search"
-            append-icon="search"
-            label="Search"
-            single-line
-            hide-details
+<v-layout>
+  <v-flex>
+    <v-toolbar flat color="white">
+      <v-toolbar-title>Domains</v-toolbar-title>
+      <v-divider class="mx-2" inset vertical></v-divider>
+      <v-spacer></v-spacer>
+      <v-text-field
+        v-model="search"
+        append-icon="mdi-magnify"
+        label="Search"
+        single-line
+        hide-details
        ></v-text-field>
-        <v-spacer></v-spacer>
-        <v-btn color="primary" :to="{ name: 'DomainAdd' }">
-          <v-icon>add</v-icon>
+      <v-spacer></v-spacer>
+      <v-btn class="mr-2" fab small>
+        <v-icon>mdi-file-import-outline</v-icon>
+      </v-btn>
+      <v-btn class="mr-2" fab small>
+        <v-icon>mdi-file-export-outline</v-icon>
+      </v-btn>
+      <v-btn fab small color="primary" :to="{ name: 'DomainAdd' }">
+        <v-icon>mdi-plus</v-icon>
+      </v-btn>
+    </v-toolbar>
+    <v-data-table :headers="headers" :items="domains" :search="search" class="elevation-1">
+      <template v-slot:item.actions="{ item }">
+        <v-btn icon small :to="{ name: 'DomainEdit', params: { domainPk: item.pk }}">
+          <v-icon>mdi-circle-edit-outline</v-icon>
        </v-btn>
-      </v-toolbar>
-      <v-data-table :headers="headers" :items="domains" :search="search" class="elevation-1">
-        <template slot="items" slot-scope="props">
-          <td>
-            <v-btn flat icon :to="{ name: 'DomainEdit', params: { domainPk: props.item.pk }}">
-              <v-icon>edit</v-icon>
-            </v-btn>
-            <v-btn flat icon title="Remove" @click="confirmDelete(props.item)">
-              <v-icon>delete</v-icon>
-            </v-btn>
-          </td>
-          <td>
-            <router-link :to="{ name: 'DomainDetail', params: { pk: props.item.pk } }">
-              {{ props.item.name }}
-            </router-link>
-          </td>
-          <td>
-            <v-chip v-if="props.item.dns_status.checks === 'disabled'"
-                    text-color="white" small>Disabled</v-chip>
-            <v-chip v-if="props.item.dns_status.checks === 'pending'"
-                    color="secondary" text-color="white" small>Pending</v-chip>
-            <span v-if="props.item.dns_status.checks === 'active'">
-              <v-chip v-if="props.item.dns_status.mx"
-                      :color="getDNSTagType(props.item.dns_status.mx)"
-                      text-color="white" small
-              >
-                MX
-              </v-chip>
-              <v-chip v-if="props.item.dns_status.dnsbl"
-                      :color="getDNSTagType(props.item.dns_status.dnsbl)"
-                      text-color="white" small
-              >
-                DNSBL
-              </v-chip>
-            </span>
-          </td>
-          <td>
-            <v-progress-linear v-model="props.item.allocated_quota_in_percent"></v-progress-linear>
-          </td>
-        </template>
-      </v-data-table>
-    </v-flex>
-  </v-layout>
-  <!-- <div>
-       <div class="columns">
-       <div class="column">
-       <h1 class="title">Domains</h1>
-       </div>
-       <div class="column">
-       <router-link :to="{ name: 'DomainAdd' }" class="button is-primary">Add</router-link>
-       <b-dropdown>
-       <button class="button" slot="trigger">
-       <span>Actions</span>
-       <b-icon icon="menu-down"></b-icon>
-       </button>
-       <b-dropdown-item>Import</b-dropdown-item>
-       <b-dropdown-item>Export</b-dropdown-item>
-       </b-dropdown>
-       </div>
-       <div class="column">
-       <b-field>
-       <b-input placeholder="Search..." type="search" icon="magnify"></b-input>
-       </b-field>
-       </div>
-       </div>
-       <b-table :data="domains" paginated checkable>
-       <template slot-scope="props">
-       <b-table-column :sortable="false">
-       <router-link :to="{ name: 'DomainEdit', params: { domainPk: props.row.pk }}">
-       <b-icon icon="pencil"></b-icon>
-       </router-link>
-       <a href="#" title="Remove"  @click="confirmDelete(props.row)">
-       <b-icon icon="delete"></b-icon>
-       </a>
-       </b-table-column>
-       <b-table-column sortable field="name" label="Name">
-       {{ props.row.name }}
-       </b-table-column>
-       <b-table-column field="dns_status" label="DNS status">
-       <b-tag v-if="props.row.dns_status.checks === 'disabled'" rounded>Disabled</b-tag>
-       <b-tag v-if="props.row.dns_status.checks === 'pending'" type="is-info" rounded>Pending</b-tag>
-       <b-taglist v-if="props.row.dns_status.checks === 'active'">
-       <b-tag v-if="props.row.dns_status.mx" :type="getDNSTagType(props.row.dns_status.mx)" rounded>MX</b-tag>
-       <b-tag v-if="props.row.dns_status.dnsbl" :type="getDNSTagType(props.row.dns_status.dnsbl)" rounded>DNSBL</b-tag>
-       </b-taglist>
-       </b-table-column>
-       <b-table-column field="quota" label="Quota">
-       <progress class="progress is-primary"
-       :value="props.row.allocated_quota_in_percent" max="100">
-       {{ props.row.allocated_quota_in_percent }}%
-       </progress>
-       </b-table-column>
-       </template>
-       </b-table>
-       </div> -->
+        <v-btn icon small title="Remove" @click="confirmDelete(item)">
+          <v-icon>mdi-delete-outline</v-icon>
+        </v-btn>
+      </template>
+      <template v-slot:item.name="{ item }">
+        <router-link :to="{ name: 'DomainDetail', params: { pk: item.pk } }">
+          {{ item.name }}
+        </router-link>
+      </template>
+      <template v-slot:item.tags="{ }">
+        <v-chip label x-small>Domain</v-chip>
+      </template>
+      <template v-slot:item.dns_status="{ item }">
+        <v-chip v-if="item.dns_status.checks === 'disabled'"
+                label x-small>Disabled</v-chip>
+        <v-chip v-if="item.dns_status.checks === 'pending'"
+                color="secondary" label x-small>Pending</v-chip>
+        <span v-if="item.dns_status.checks === 'active'">
+          <v-chip v-if="item.dns_status.mx"
+                  :color="getDNSTagType(item.dns_status.mx)"
+                  class="mr-1"
+                  label
+                  x-small
+                  >
+            MX
+          </v-chip>
+          <v-chip v-if="item.dns_status.dnsbl"
+                  :color="getDNSTagType(item.dns_status.dnsbl)"
+                  label
+                  x-small
+                  >
+            DNSBL
+          </v-chip>
+        </span>
+      </template>
+      <template v-slot:item.allocated_quota_in_percent="{ item }">
+        <v-progress-linear v-model="item.allocated_quota_in_percent" />
+      </template>
+    </v-data-table>
+  </v-flex>
+  <confirm-dialog v-model="showConfirmDialog"
+                  :message="deleteDomainMsg"
+                  @confirm="deleteDomain" />
+</v-layout>
 </template>

 <script>
 import { mapGetters } from 'vuex'
+import ConfirmDialog from '@/components/layout/ConfirmDialog'

 export default {
-    computed: mapGetters(['domains']),
-    data () {
-        return {
-            headers: [
-                { text: '', value: 'name' },
-                { text: 'Name', value: 'name' },
-                { text: 'DNS status', value: 'dns_status' },
-                { text: 'Quota', value: 'allocated_quota_in_percent' }
-            ],
-            search: ''
-        }
-    },
-    created () {
-        this.$store.dispatch('getDomains')
-    },
-    methods: {
-        confirmDelete (domain) {
-            this.$dialog.prompt({
-                message: `Delete domain ${domain.name}?`,
-                inputAttrs: {
-                    type: 'checkbox',
-                    placeholder: 'Keep mailboxes on filesystem'
-                },
-                onConfirm: value => this.$toast.open(`Your age is: ${value}`)
-            })
-        },
-        getDNSTagType (value) {
-            if (value === 'unknown') {
-                return 'orange'
-            } else if (value === 'ok') {
-                return 'red'
-            } else {
-                return 'green'
-            }
-        }
+  components: {
+    ConfirmDialog
+  },
+  computed: mapGetters({
+    domains: 'domains/domains'
+  }),
+  data () {
+    return {
+      headers: [
+        { text: '', value: 'actions', sortable: false },
+        { text: 'Name', value: 'name' },
+        { text: 'Tags', value: 'tags' },
+        { text: 'DNS status', value: 'dns_status', sortable: false },
+        { text: 'Quota', value: 'allocated_quota_in_percent' }
+      ],
+      deleteDomainMsg: 'Confirm deletion?',
+      selectedDomain: null,
+      showConfirmDialog: false,
+      search: ''
    }
+  },
+  created () {
+    this.$store.dispatch('domains/getDomains')
+  },
+  methods: {
+    confirmDelete (domain) {
+      this.selectedDomain = domain
+      this.showConfirmDialog = true
+    },
+    deleteDomain () {
+
+    },
+    getDNSTagType (value) {
+      if (value === 'unknown') {
+        return 'orange'
+      }
+      if (value === 'ok') {
+        return 'warning'
+      }
+      return 'success'
+    }
+  }
 }
 </script>
@@ -0,0 +1,51 @@
+<template>
+<v-dialog v-model="dialog" max-width="290">
+  <v-card>
+    <v-card-title class="headline">
+      {{ message }}
+    </v-card-title>
+    <v-card-actions>
+      <v-spacer></v-spacer>
+
+      <v-btn
+        text
+        @click="cancel"
+        >
+        No
+      </v-btn>
+      <v-btn
+        color="primary"
+        text
+        @click="confirm"
+        >
+        Yes
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</v-dialog>
+</template>
+
+<script>
+export default {
+  props: ['value', 'message'],
+  computed: {
+    dialog: {
+      get () {
+        return this.value
+      },
+      set (newValue) {
+        this.$emit('input', newValue)
+      }
+    }
+  },
+  methods: {
+    confirm () {
+      this.$emit('confirm')
+      this.dialog = false
+    },
+    cancel () {
+      this.dialog = false
+    }
+  }
+}
+</script>
@@ -0,0 +1,107 @@
+<template>
+  <v-navigation-drawer
+    v-model="drawer"
+    app
+    clipped
+  >
+    <v-list dense>
+      <template v-for="item in items">
+        <v-list-item
+          v-if="!item.children"
+          :to="item.to"
+          link
+          :key="item.title"
+          >
+          <v-list-item-icon v-if="item.icon">
+            <v-icon>{{ item.icon }}</v-icon>
+          </v-list-item-icon>
+
+          <v-list-item-content>
+            <v-list-item-title>{{ item.text }}</v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+        <v-list-group v-else
+                      :key="item.text"
+                      :prepend-icon="item.icon"
+                      no-action>
+          <template v-slot:activator>
+            <v-list-item-title>{{ item.text }}</v-list-item-title>
+          </template>
+
+          <template v-for="subitem in item.children">
+            <v-list-item v-if="!subitem.children"
+                         :key="subitem.text"
+                         :to="subitem.to"
+                         link>
+              <v-list-item-content>
+                <v-list-item-title>{{ subitem.text }}</v-list-item-title>
+              </v-list-item-content>
+            </v-list-item>
+            <v-list-group v-else
+                          :key="subitem.text"
+                          :value="true"
+                          no-action
+                          sub-group>
+              <template v-slot:activator>
+                <v-list-item-title>{{ subitem.text }}</v-list-item-title>
+              </template>
+              <v-list-item v-for="subsubitem in subitem.children"
+                           :key="subsubitem.text"
+                           :to="subsubitem.to"
+                           link>
+                <v-list-item-title>{{ subsubitem.text }}</v-list-item-title>
+              </v-list-item>
+            </v-list-group>
+          </template>
+        </v-list-group>
+      </template>
+    </v-list>
+  </v-navigation-drawer>
+</template>
+
+<script>
+// import * as api from '@/api'
+
+export default {
+  data () {
+    return {
+      drawer: true,
+      items: [
+        {
+          text: 'Dashboard',
+          icon: 'mdi-view-dashboard'
+        },
+        {
+          text: 'Domains',
+          to: { name: 'DomainList' },
+          icon: 'mdi-domain'
+        },
+        {
+          text: 'Identities',
+          icon: 'mdi-account'
+        },
+        {
+          icon: 'mdi-magnify',
+          text: 'Logs',
+          to: { name: 'LogList' }
+        },
+        {
+          icon: 'mdi-cog',
+          text: 'Parameters',
+          children: []
+        }
+      ]
+    }
+  },
+  created () {
+    this.$axios.get('/parameters/applications/').then(response => {
+      response.data.forEach(item => {
+        this.items[4].children.push({
+          text: item.label,
+          to: { name: 'ParametersEdit', params: { app: item.name } }
+        })
+      })
+    })
+  }
+}
+</script>
@@ -0,0 +1,68 @@
+<template>
+<v-app-bar
+  color="primary"
+  dark
+  app
+  clipped-left
+  >
+  <div class="d-flex">
+    <v-img
+      class="mx-2"
+      src="../../assets/Modoboa_RVB-BLANC-SANS.png"
+      contain
+      width="200"
+      />
+  </div>
+  <v-spacer />
+  <v-menu rounded="lg" offset-y>
+    <template v-slot:activator="{ attrs, on }">
+      <v-btn
+        color="white"
+        v-bind="attrs"
+        v-on="on"
+        icon
+        >
+        <v-icon>mdi-account-outline</v-icon>
+      </v-btn>
+    </template>
+    <v-list>
+      <v-list-item
+        v-for="item in items"
+        :key="item.text"
+        @click="item.click"
+        link
+        >
+        <v-list-item-icon v-if="item.icon">
+          <v-icon>{{ item.icon }}</v-icon>
+        </v-list-item-icon>
+        <v-list-item-content>
+          <v-list-item-title>{{ item.text }}</v-list-item-title>
+        </v-list-item-content>
+      </v-list-item>
+    </v-list>
+  </v-menu>
+</v-app-bar>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      items: [
+        {
+          text: 'Logout',
+          icon: 'mdi-logout',
+          click: this.logout
+        }
+      ]
+    }
+  },
+  methods: {
+    logout () {
+      this.$store.dispatch('auth/logout').then(() => {
+        this.$router.push('/login')
+      })
+    }
+  }
+}
+</script>
@@ -7,7 +7,7 @@
        <v-spacer></v-spacer>
        <v-text-field
            v-model="search"
-            append-icon="search"
+            append-icon="mdi-magnify"
            label="Search"
            single-line
            hide-details
@@ -17,7 +17,7 @@
                    :items="logs"
                    :search="search"
                    class="elevation-1"
-                    v-bind:pagination.sync="pagination"
+                    :options.sync="pagination"
      >
        <template slot="items" slot-scope="props">
          <td>{{ props.item.date_created }}</td>
@@ -44,32 +44,27 @@
 </template>

 <script>
-import * as api from '@/api'
-
 export default {
-    data () {
-        return {
-            logs: [],
-            headers: [
-                { text: 'Date', value: 'date_created' },
-                { text: 'Level', value: 'level' },
-                { text: 'Logger', value: 'logger' },
-                { text: 'Message', value: 'message' }
-            ],
-            loading: true,
-            pagination: {
-                sortBy: 'date_created',
-                descending: true,
-                rowsPerPage: 10
-            },
-            search: ''
-        }
-    },
-    created () {
-        api.getLogs().then(response => {
-            this.logs = response.data
-            this.loading = false
-        })
+  data () {
+    return {
+      logs: [],
+      headers: [
+        { text: 'Date', value: 'date_created' },
+        { text: 'Level', value: 'level' },
+        { text: 'Logger', value: 'logger' },
+        { text: 'Message', value: 'message' }
+      ],
+      loading: true,
+      pagination: {
+      },
+      search: ''
    }
+  },
+  created () {
+    this.$axios.get('/logs/').then(response => {
+      this.logs = response.data
+      this.loading = false
+    })
+  }
 }
 </script>
@@ -1,113 +0,0 @@
-<template>
-  <v-navigation-drawer
-      :clipped="$vuetify.breakpoint.lgAndUp"
-      v-model="drawer"
-      app
-  >
-    <v-list dense>
-      <template v-for="item in items">
-        <v-layout
-            v-if="item.heading"
-            :key="item.heading"
-            row
-            align-center
-        >
-          <v-flex xs6>
-            <v-subheader v-if="item.heading">
-              {{ item.heading }}
-            </v-subheader>
-          </v-flex>
-          <v-flex xs6 class="text-xs-center">
-            <a href="#!" class="body-2 black--text">EDIT</a>
-          </v-flex>
-        </v-layout>
-        <v-list-group
-            v-else-if="item.children"
-            v-model="item.model"
-            :key="item.text"
-            :prepend-icon="item.icon"
-            :append-icon="item['icon-alt']"
-        >
-          <v-list-tile slot="activator">
-            <v-list-tile-content>
-              <v-list-tile-title>
-                {{ item.text }}
-              </v-list-tile-title>
-            </v-list-tile-content>
-          </v-list-tile>
-          <v-list-tile
-              v-for="(child, i) in item.children"
-              :key="i"
-              :to="child.to"
-          >
-            <v-list-tile-action v-if="child.icon">
-              <v-icon>{{ child.icon }}</v-icon>
-            </v-list-tile-action>
-            <v-list-tile-content>
-              <v-list-tile-title>
-                {{ child.text }}
-              </v-list-tile-title>
-            </v-list-tile-content>
-          </v-list-tile>
-        </v-list-group>
-        <v-list-tile v-else :key="item.text" :to="item.to">
-          <v-list-tile-action>
-            <v-icon>{{ item.icon }}</v-icon>
-          </v-list-tile-action>
-          <v-list-tile-content>
-            <v-list-tile-title>
-              {{ item.text }}
-            </v-list-tile-title>
-          </v-list-tile-content>
-        </v-list-tile>
-      </template>
-    </v-list>
-  </v-navigation-drawer>
-</template>
-
-<script>
-import * as api from '@/api'
-
-export default {
-    data () {
-        return {
-            drawer: true,
-            items: [
-                {
-                    text: 'Dashboard',
-                    icon: 'dashboard'
-                },
-                {
-                    text: 'Domains',
-                    to: { name: 'DomainList' },
-                    icon: 'domain'
-                },
-                {
-                    text: 'Identities',
-                    icon: 'account_box'
-                },
-                {
-                    icon: 'search',
-                    text: 'Logs',
-                    to: { name: 'LogList' }
-                },
-                {
-                    icon: 'settings',
-                    text: 'Parameters',
-                    children: []
-                }
-            ]
-        }
-    },
-    created () {
-        api.getParametersApplications().then(response => {
-            response.data.forEach(item => {
-                this.items[4].children.push({
-                    text: item.label,
-                    to: { name: 'ParametersEdit', params: {app: item.name} }
-                })
-            })
-        })
-    }
-}
-</script>
@@ -1,110 +1,113 @@
 <template>
-  <v-layout row wrap>
-    <v-flex>
-      <h1>Parameters</h1>
-      <v-tabs v-model="active">
-        <v-tab v-for="(element, index) in structure"
-               :key="index"
-
-               v-if="display(element)"
-        >
-          {{ element.label }}
-        </v-tab>
-        <v-tabs-items>
-          <v-tab-item
-              v-for="(element, index) in structure"
-              :key="index"
-              v-if="display(element)"
+<v-layout>
+  <v-flex>
+    <v-tabs v-model="active">
+      <v-tab v-for="(element, index) in displayableElements"
+             :key="index"
+             >
+        {{ element.label }}
+      </v-tab>
+      <v-tabs-items v-model="active">
+        <v-tab-item
+          v-for="(element, index) in displayableElements"
+          :key="index"
          >
-            <v-card>
-              <v-card-text>
-                <v-checkbox v-for="(param, index) in element.parameters"
-                            :key="index"
+          <v-card>
+            <v-card-text>
+              <template v-for="(param, index) in displayableParams(element.parameters)">
+                <v-checkbox :key="index"
                            :label="param.label"
                            v-model="parameters[param.name]"
-                            v-if="param.widget === 'BooleanField' && display(param)"
-                >
-                </v-checkbox>
-                <v-select :label="param.label"
+                            v-if="param.widget === 'BooleanField'"
+                            />
+                <v-select :key="index"
+                          :label="param.label"
                          v-model="parameters[param.name]"
                          :items="param.choices"
-                          v-else-if="param.widget === 'ChoiceField' && display(param)">
-                </v-select>
+                          v-else-if="param.widget === 'ChoiceField'"
+                          />
                <v-text-field
-                    :label="param.label"
-                    :hint="param.help_text"
-                    v-model="parameters[param.name]"
-                    :error="formErrors[param.name] !== undefined"
-                    :error-messages="formErrors[param.name]"
-                    v-else-if="display(param)"
-                >
-                </v-text-field>
-              </v-card-text>
-            </v-card>
-          </v-tab-item>
-        </v-tabs-items>
-      </v-tabs>
-      <v-btn fixed
-             dark
-             fab
-             bottom
-             right
-             color="green"
-             @click="save"
-      >
-        <v-icon>save</v-icon>
-      </v-btn>
-    </v-flex>
-  </v-layout>
+                  :key="index"
+                  :label="param.label"
+                  :hint="param.help_text"
+                  v-model="parameters[param.name]"
+                  :error="formErrors[param.name] !== undefined"
+                  :error-messages="formErrors[param.name]"
+                  v-else
+                  />
+              </template>
+            </v-card-text>
+          </v-card>
+        </v-tab-item>
+      </v-tabs-items>
+    </v-tabs>
+    <v-btn fixed
+           dark
+           fab
+           bottom
+           right
+           color="green"
+           @click="save"
+           >
+      <v-icon>mdi-content-save</v-icon>
+    </v-btn>
+  </v-flex>
+</v-layout>
 </template>

 <script>
-import * as api from '@/api'
-
 export default {
-    data () {
-        return {
-            active: 0,
-            structure: [],
-            parameters: {},
-            formErrors: {}
-        }
-    },
-    created () {
-        this.loadParams(this.$route.params.app)
-    },
-    watch: {
-        '$route' (to, from) {
-            this.loadParams(to.params.app)
-        }
-    },
-    methods: {
-        loadParams (app) {
-            api.getParametersStructure(app).then(response => {
-                this.structure = response.data
-            })
-            api.getParametersForApplication(app).then(response => {
-                this.parameters = response.data
-            })
-        },
-        display (element) {
-            if (element.display === '') {
-                return true
-            }
-            var [field, value] = element.display.split('=')
-            if (value === 'true' || value === 'false') {
-                value = Boolean(value)
-            }
-            return this.parameters[field] === value
-        },
-        save () {
-            api.saveParametersForApplication(
-                this.$route.params.app, this.parameters
-            ).then(response => {
-            }, response => {
-                this.formErrors = response.data
-            })
-        }
+  data () {
+    return {
+      active: 0,
+      structure: [],
+      parameters: {},
+      formErrors: {}
    }
+  },
+  computed: {
+    displayableElements () {
+      console.log(this.structure)
+      const result = this.structure.filter(element => this.display(element))
+      return result
+    }
+  },
+  created () {
+    this.loadParams(this.$route.params.app)
+  },
+  watch: {
+    '$route' (to, from) {
+      this.loadParams(to.params.app)
+    }
+  },
+  methods: {
+    loadParams (app) {
+      this.$axios.get(`/parameters/structure/?app=${app}`).then(response => {
+        this.structure = response.data
+      })
+      this.$axios.get(`/parameters/${app}/`).then(response => {
+        this.parameters = response.data
+      })
+    },
+    display (element) {
+      if (element.display === '') {
+        return true
+      }
+      var [field, value] = element.display.split('=')
+      if (value === 'true' || value === 'false') {
+        value = Boolean(value)
+      }
+      return this.parameters[field] === value
+    },
+    displayableParams (params) {
+      return params.filter(param => this.display(param))
+    },
+    save () {
+      this.$axios.post(`/parameters/${this.$route.params.app}/`, this.parameters).then(response => {
+      }, response => {
+        this.formErrors = response.data
+      })
+    }
+  }
 }
 </script>
@@ -1,30 +1,16 @@
 import Vue from 'vue'
-/* import Buefy from 'buefy'
- * import 'buefy/lib/buefy.css'
- * import '@mdi/font/css/materialdesignicons.css'
- * */
-import Vuetify from 'vuetify'
-import Cookies from 'js-cookie'
-import 'vuetify/dist/vuetify.min.css'
-import 'material-design-icons-iconfont/dist/material-design-icons.css'
-import App from './App'
+import './plugins/axios'
+import './plugins/vue-cookie'
+import App from './App.vue'
 import router from './router'
 import store from './store'
-
-// Vue.use(Buefy)
-Vue.use(Vuetify)
+import vuetify from './plugins/vuetify'

 Vue.config.productionTip = false

-/* Deal with django CSRF protection */
-let csrftoken = Cookies.get('csrftoken')
-Vue.http.headers.common['X-CSRFTOKEN'] = csrftoken
-
-/* eslint-disable no-new */
 new Vue({
-    el: '#app',
-    router,
-    store,
-    components: { App },
-    template: '<App/>'
-})
+  router,
+  store,
+  vuetify,
+  render: h => h(App)
+}).$mount('#app')
@@ -0,0 +1,87 @@
+'use strict'
+
+import Vue from 'vue'
+import axios from 'axios'
+import Cookies from 'js-cookie'
+
+import router from '../router'
+import store from '../store'
+
+// Full config:  https://github.com/axios/axios#request-config
+axios.defaults.baseURL = process.VUE_APP_API_BASE_URL || ''
+// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
+// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
+
+const config = {
+  baseURL: process.env.VUE_APP_API_BASE_URL || ''
+  // timeout: 60 * 1000 // Timeout
+  // withCredentials: true // Check cross-site Access-Control
+}
+
+const _axios = axios.create(config)
+
+_axios.interceptors.request.use(
+  function (config) {
+    // Do something before request is sent
+    return config
+  },
+  function (error) {
+    // Do something with request error
+    return Promise.reject(error)
+  }
+)
+
+// Add a response interceptor
+_axios.interceptors.response.use(
+  function (response) {
+    // Do something with response data
+    return response
+  },
+  function (error) {
+    if (error.response.status !== 401) {
+      return Promise.reject(error)
+    }
+    const refreshToken = Cookies.get('refreshToken')
+    if (error.config.url === '/token/refresh/' || !refreshToken) {
+      store.dispatch('auth/logout')
+      router.push('/login/')
+      return Promise.reject(error)
+    }
+    return _axios.post('/token/refresh/', { refresh: refreshToken }).then(resp => {
+      Cookies.set('token', resp.data.access, { sameSite: 'strict' })
+      _axios.defaults.headers.common.Authorization = `Bearer ${resp.data.access}`
+      const config = error.config
+      config.headers.Authorization = `Bearer ${resp.data.access}`
+      return new Promise((resolve, reject) => {
+        _axios.request(config).then(resp => {
+          resolve(resp)
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    }).catch(error => {
+      Promise.reject(error)
+    })
+  }
+)
+
+Plugin.install = function (Vue, options) {
+  Vue.axios = _axios
+  window.axios = _axios
+  Object.defineProperties(Vue.prototype, {
+    axios: {
+      get () {
+        return _axios
+      }
+    },
+    $axios: {
+      get () {
+        return _axios
+      }
+    }
+  })
+}
+
+Vue.use(Plugin)
+
+export default Plugin
@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import VueCookie from 'vue-cookie'
+
+Vue.use(VueCookie)
@@ -0,0 +1,14 @@
+import Vue from 'vue'
+import Vuetify from 'vuetify/lib'
+
+Vue.use(Vuetify)
+
+export default new Vuetify({
+  theme: {
+    themes: {
+      light: {
+        primary: '#046BF8'
+      }
+    }
+  }
+})
@@ -1,38 +1,84 @@
 import Vue from 'vue'
-import Router from 'vue-router'
+import VueRouter from 'vue-router'
+
+import store from '@/store'
+
 import DomainList from '@/components/domains/DomainList'
 import DomainForm from '@/components/domains/DomainForm'
 import ParametersForm from '@/components/parameters/ParametersForm'
 import LogList from '@/components/logs/LogList'

-Vue.use(Router)
+Vue.use(VueRouter)

-export default new Router({
-    routes: [
-        {
-            path: '/domains/',
-            name: 'DomainList',
-            component: DomainList
-        },
-        {
-            path: '/domains/add/',
-            name: 'DomainAdd',
-            component: DomainForm
-        },
-        {
-            path: '/domains/:domainPk([0-9]+)/',
-            name: 'DomainEdit',
-            component: DomainForm
-        },
-        {
-            path: '/parameters/:app',
-            name: 'ParametersEdit',
-            component: ParametersForm
-        },
-        {
-            path: '/logs/',
-            name: 'LogList',
-            component: LogList
-        }
-    ]
+const routes = [
+  {
+    path: '/login',
+    name: 'Login',
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import(/* webpackChunkName: "about" */ '../views/Login.vue')
+  },
+  {
+    path: '/domains/',
+    name: 'DomainList',
+    component: DomainList,
+    meta: {
+      requiresAuth: true
+    }
+  },
+  {
+    path: '/domains/add/',
+    name: 'DomainAdd',
+    component: DomainForm,
+    meta: {
+      requiresAuth: true
+    }
+  },
+  {
+    path: '/domains/:domainPk([0-9]+)/',
+    name: 'DomainEdit',
+    component: DomainForm,
+    meta: {
+      requiresAuth: true
+    }
+  },
+  {
+    path: '/parameters/:app',
+    name: 'ParametersEdit',
+    component: ParametersForm,
+    meta: {
+      requiresAuth: true
+    }
+  },
+  {
+    path: '/logs/',
+    name: 'LogList',
+    component: LogList,
+    meta: {
+      requiresAuth: true
+    }
+  }
+]
+
+const router = new VueRouter({
+  mode: 'history',
+  base: process.env.BASE_URL,
+  routes
 })
+
+router.beforeEach((to, from, next) => {
+  if (to.matched.some(record => record.meta.requiresAuth)) {
+    store.dispatch('auth/initialize').then(() => {
+      if (!store.getters['auth/isAuthenticated']) {
+        next('/login/')
+      } else {
+        next()
+      }
+    })
+  } else {
+    next()
+  }
+})
+
+export default router
@@ -1,42 +0,0 @@
-// Import Bulma's core
-@import "~bulma/sass/utilities/_all";
-
-// Set your colors
-$primary: #8c67ef;
-$primary-invert: findColorInvert($primary);
-$twitter: #4099FF;
-$twitter-invert: findColorInvert($twitter);
-
-// Setup $colors to use as bulma classes (e.g. 'is-twitter')
-$colors: ( "white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert), "twitter": ($twitter, $twitter-invert));
-
-// Links
-$link: $primary;
-$link-invert: $primary-invert;
-$link-focus-border: $primary;
-
-// Import Bulma and Buefy styles
-@import "~bulma";
-@import "~buefy/src/scss/buefy";
-
-.is-sidebar-menu {
-  padding: 2.5rem;
-}
-
-.columns {
-  &.is-fullheight {
-    min-height: calc(100vh - ( #{$navbar-height} - .75rem ) );
-    max-height: calc(100vh - ( #{$navbar-height} - .75rem ) );
-    height: calc(100vh - ( #{$navbar-height} - .75rem ) );
-    display: flex;
-    flex-direction: row;
-    justify-content: stretch;
-    .column {
-      overflow-y: auto;
-    } 
-  }
-}
-    
-.is-main-content {
-  padding-top: 20px;
-}
@@ -1,16 +1,15 @@
 import Vue from 'vue'
 import Vuex from 'vuex'

-import domains from './modules/domains'
+import auth from '@/store/modules/auth'
+import domains from '@/store/modules/domains'

 Vue.use(Vuex)

-const options = {
-    modules: {
-        domains
-    },
-    strict: process.env.NODE_ENV !== 'production'
-}
-
-export default new Vuex.Store(options)
-export { options }
+export default new Vuex.Store({
+  modules: {
+    auth,
+    domains
+  },
+  strict: process.env.NODE_ENV !== 'production'
+})
@@ -0,0 +1,64 @@
+import Vue from 'vue'
+import Cookies from 'js-cookie'
+
+function setupAxios (token) {
+  Vue.prototype.$axios.defaults.headers.common.Authorization = `Bearer ${token}`
+  Vue.prototype.$axios.defaults.headers.post['Content-Type'] = 'application/json'
+}
+
+function fetchUser (commit) {
+  return Vue.prototype.$axios.get('/accounts/me').then(resp => {
+    commit('SET_AUTH_USER', { authUser: resp.data, isAuthenticated: true })
+  })
+}
+
+const state = () => ({
+  authUser: {},
+  isAuthenticated: false
+})
+
+const getters = {
+  isAuthenticated: state => state.isAuthenticated
+}
+
+const mutations = {
+  SET_AUTH_USER (state, { authUser, isAuthenticated }) {
+    state.authUser = authUser
+    state.isAuthenticated = isAuthenticated
+  },
+  LOGOUT_USER (state) {
+    state.authUser = null
+    state.isAuthenticated = false
+  }
+}
+
+const actions = {
+  initialize ({ commit, state }) {
+    if (state.isAuthenticated) {
+      return
+    }
+    const token = Cookies.get('token')
+    if (!token) {
+      return
+    }
+    setupAxios(token)
+    return fetchUser(commit)
+  },
+  logout ({ commit }) {
+    return new Promise((resolve, reject) => {
+      delete Vue.prototype.$axios.defaults.headers.common.Authorization
+      Cookies.remove('token')
+      Cookies.remove('refreshToken')
+      commit('LOGOUT_USER')
+      resolve()
+    })
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  mutations,
+  actions
+}
@@ -1,5 +1,4 @@
 import Vue from 'vue'
-import * as api from '@/api'

 // mutation types
 const SET_DOMAINS = 'SET_DOMAINS'
@@ -8,63 +7,64 @@ const UPDATE_DOMAIN = 'UPDATE_DOMAIN'

 // initial state
 const state = {
-    domainsLoaded: false,
-    domains: []
+  domainsLoaded: false,
+  domains: []
 }

 // getters
 const getters = {
-    domains: state => state.domains,
-    getDomainByPk: state => pk => {
-        for (var domain of state.domains) {
-            if (domain.pk === parseInt(pk, 10)) {
-                return domain
-            }
-        }
-        return null
+  domains: state => state.domains,
+  getDomainByPk: state => pk => {
+    for (var domain of state.domains) {
+      if (domain.pk === parseInt(pk, 10)) {
+        return domain
+      }
    }
+    return null
+  }
 }

 // actions
 const actions = {
-    getDomains ({ commit }) {
-        return api.getDomains().then(response => {
-            commit(SET_DOMAINS, { domains: response.data })
-        })
-    },
-    createDomain ({ commit }, data) {
-        return api.createDomain(data).then(response => {
-            commit(ADD_DOMAIN, { domain: response.data })
-        })
-    },
-    updateDomain ({ commit }, data) {
-        return api.updateDomain(data).then(response => {
-            commit(UPDATE_DOMAIN, { domain: response.data })
-        })
-    }
+  getDomains ({ commit }) {
+    return Vue.prototype.$axios.get('/domains/').then(response => {
+      commit(SET_DOMAINS, { domains: response.data })
+    })
+  },
+  createDomain ({ commit }, data) {
+    return Vue.prototype.$axios.post('/domains/', data).then(response => {
+      commit(ADD_DOMAIN, { domain: response.data })
+    })
+  },
+  updateDomain ({ commit }, data) {
+    return Vue.prototype.$axios.put(`/domains/${data.pk}/`, data).then(response => {
+      commit(UPDATE_DOMAIN, { domain: response.data })
+    })
+  }
 }

 // mutations
 const mutations = {
-    [SET_DOMAINS] (state, { domains }) {
-        state.domainsLoaded = true
-        state.domains = domains
-    },
-    [ADD_DOMAIN] (state, { domain }) {
-        state.domains.push(domain)
-    },
-    [UPDATE_DOMAIN] (state, { domain }) {
-        state.domains.filter(function (item, pos) {
-            if (item.pk === domain.pk) {
-                Vue.set(state.domains, pos, domain)
-            }
-        })
-    }
+  [SET_DOMAINS] (state, { domains }) {
+    state.domainsLoaded = true
+    state.domains = domains
+  },
+  [ADD_DOMAIN] (state, { domain }) {
+    state.domains.push(domain)
+  },
+  [UPDATE_DOMAIN] (state, { domain }) {
+    state.domains.filter(function (item, pos) {
+      if (item.pk === domain.pk) {
+        Vue.set(state.domains, pos, domain)
+      }
+    })
+  }
 }

 export default {
-    state,
-    getters,
-    actions,
-    mutations
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations
 }
@@ -0,0 +1,71 @@
+<template>
+<v-layout align-center justify-center>
+  <v-flex xs12 sm8 md4>
+    <v-card class="elevation-12" @keyup.enter="authenticate">
+      <v-toolbar dark color="primary">
+        <v-toolbar-title>Modoboa</v-toolbar-title>
+      </v-toolbar>
+      <v-card-text>
+        <v-text-field label="Utilisateur"
+                      v-model="username"
+                      :error="errors.username !== undefined"
+                      :error-messages="errors.username"
+                      prepend-icon="mdi-account"
+                      >
+        </v-text-field>
+        <v-text-field label="Mot de passe"
+                      type="password"
+                      v-model="password"
+                      :error="errors.password !== undefined"
+                      :error-messages="errors.password"
+                      prepend-icon="mdi-lock"
+                      >
+        </v-text-field>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn color="primary" text @click="authenticate">
+          Connect
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-flex>
+</v-layout>
+</template>
+
+<script>
+import Cookies from 'js-cookie'
+import { mapGetters } from 'vuex'
+
+export default {
+  computed: {
+    ...mapGetters({
+      endpoints: 'auth/endpoints'
+    })
+  },
+  data () {
+    return {
+      username: '',
+      password: '',
+      errors: {}
+    }
+  },
+  methods: {
+    authenticate () {
+      const payload = {
+        username: this.username,
+        password: this.password
+      }
+      this.$axios.post('/token/', payload).then(resp => {
+        Cookies.set('token', resp.data.access, { sameSite: 'strict' })
+        Cookies.set('refreshToken', resp.data.refresh, { sameSite: 'strict' })
+        this.$store.dispatch('auth/initialize').then(() => {
+          this.$router.push('/')
+        })
+      }).catch(err => {
+        console.log(err)
+      })
+    }
+  }
+}
+</script>
@@ -1,7 +0,0 @@
-{
-  "env": { 
-    "jest": true
-  },
-  "globals": { 
-  }
-}
@@ -1,27 +0,0 @@
-const path = require('path')
-
-module.exports = {
-  rootDir: path.resolve(__dirname, '../../'),
-  moduleFileExtensions: [
-    'js',
-    'json',
-    'vue'
-  ],
-  moduleNameMapper: {
-    '^@/(.*)$': '<rootDir>/src/$1'
-  },
-  transform: {
-    '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
-    '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest'
-  },
-  snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
-  setupFiles: ['<rootDir>/test/unit/setup'],
-  mapCoverage: true,
-  coverageDirectory: '<rootDir>/test/unit/coverage',
-  collectCoverageFrom: [
-    'src/**/*.{js,vue}',
-    '!src/main.js',
-    '!src/router/index.js',
-    '!**/node_modules/**'
-  ]
-}
@@ -1,3 +0,0 @@
-import Vue from 'vue'
-
-Vue.config.productionTip = false
@@ -0,0 +1,13 @@
+import { expect } from 'chai'
+import { shallowMount } from '@vue/test-utils'
+import HelloWorld from '@/components/HelloWorld.vue'
+
+describe('HelloWorld.vue', () => {
+  it('renders props.msg when passed', () => {
+    const msg = 'new message'
+    const wrapper = shallowMount(HelloWorld, {
+      propsData: { msg }
+    })
+    expect(wrapper.text()).to.include(msg)
+  })
+})
@@ -0,0 +1,5 @@
+module.exports = {
+  transpileDependencies: [
+    'vuetify'
+  ]
+}
@@ -67,6 +67,7 @@ class AccountViewSet(viewsets.ModelViewSet):
        """Return a serializer."""
        action_dict = {
            "list": serializers.AccountSerializer,
+            "me": serializers.AccountSerializer,
            "retrieve": serializers.AccountSerializer,
            "password": serializers.AccountPasswordSerializer,
            "reset_password": serializers.ResetPasswordSerializer,
@@ -86,6 +87,12 @@ class AccountViewSet(viewsets.ModelViewSet):
            queryset = queryset.filter(mailbox__domain__name=domain)
        return queryset

+    @action(methods=["get"], detail=False)
+    def me(self, request):
+        """Return information about connected user."""
+        serializer = self.get_serializer(request.user)
+        return Response(serializer.data)
+
    @action(methods=["put"], detail=True)
    def password(self, request, pk=None):
        """Change account password."""
@@ -1,7 +1,5 @@
 """Admin views."""

-from __future__ import unicode_literals
-
 from django.views import generic

 from django.contrib.auth import mixins as auth_mixins
@@ -7,5 +7,5 @@ from . import viewsets

 router = routers.SimpleRouter()
 router.register(
-    r"parameters", viewsets.ParametersViewSet, base_name="parameter")
+    r"parameters", viewsets.ParametersViewSet, basename="parameter")
 urlpatterns = router.urls
@@ -1,6 +1,7 @@
 """Parameters viewsets."""

-from rest_framework import decorators, response, viewsets
+from rest_framework import response, viewsets
+from rest_framework.decorators import action

 from . import tools

@@ -10,13 +11,13 @@ class ParametersViewSet(viewsets.ViewSet):

    lookup_value_regex = r"\w+"

-    @decorators.list_route(methods=["get"])
+    @action(methods=["get"], detail=False)
    def applications(self, request):
        """Return application list."""
        applications = tools.registry.get_applications("global")
        return response.Response(applications)

-    @decorators.list_route(methods=["get"])
+    @action(methods=["get"], detail=False)
    def structure(self, request):
        """Return parameter schema."""
        app = request.GET.get("app")
@@ -2,11 +2,19 @@

 from django.urls import include, path

+from rest_framework_simplejwt.views import (
+    TokenObtainPairView,
+    TokenRefreshView,
+)
+
 from modoboa.core.extensions import exts_pool

 app_name = "api"

 urlpatterns = [
+    path('token/', TokenObtainPairView.as_view(), name='token_obtain_pair'),
+    path('token/refresh/', TokenRefreshView.as_view(),
+         name='token_refresh'),
    path('', include("modoboa.core.urls_api")),
    path('', include("modoboa.admin.urls_api")),
    path('', include("modoboa.parameters.urls_api")),
				`@@ -0,0 +1 @@`
				`VUE_APP_API_BASE_URL=http://localhost:8000/api/v1`