integrated vuejs into theme (builded with webpack
This commit is contained in:
parent
c344c09c96
commit
9dfc5af5c0
|
|
@ -0,0 +1,11 @@
|
||||||
|
{
|
||||||
|
"presets": [
|
||||||
|
["@babel/preset-env", {
|
||||||
|
"modules": "commonjs",
|
||||||
|
"targets": {
|
||||||
|
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"],
|
||||||
|
"node": "current"
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
/build/
|
||||||
|
/config/
|
||||||
|
/web/
|
||||||
|
!/web/themes/custom/
|
||||||
|
!/web/modules/custom/
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
module.exports =
|
||||||
|
root: true,
|
||||||
|
parserOptions: {
|
||||||
|
parser: 'babel-eslint'
|
||||||
|
},
|
||||||
|
env: {
|
||||||
|
browser: true,
|
||||||
|
node: true,
|
||||||
|
mocha: true
|
||||||
|
},
|
||||||
|
globals: {
|
||||||
|
"expect": true,
|
||||||
|
"jQuery": false
|
||||||
|
},
|
||||||
|
extends: [
|
||||||
|
'./web/core/.eslintrc.json',
|
||||||
|
'plugin:vue/recommended',
|
||||||
|
'plugin:vue-a11y/base',
|
||||||
|
'standard'
|
||||||
|
],
|
||||||
|
plugins: [
|
||||||
|
'vue',
|
||||||
|
'vue-a11y'
|
||||||
|
],
|
||||||
|
rules: {
|
||||||
|
'generator-star-spacing': 'off',
|
||||||
|
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
'use strict'
|
||||||
|
|
||||||
|
const path = require('path')
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
resolve: function (dir) {
|
||||||
|
return path.join(__dirname, '..', dir)
|
||||||
|
},
|
||||||
|
|
||||||
|
assetsPath: function (_path) {
|
||||||
|
const assetsSubDirectory = 'static'
|
||||||
|
return path.posix.join(assetsSubDirectory, _path)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,85 @@
|
||||||
|
'use strict'
|
||||||
|
|
||||||
|
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
||||||
|
const { VueLoaderPlugin } = require('vue-loader')
|
||||||
|
|
||||||
|
const utils = require('./utils')
|
||||||
|
|
||||||
|
const themePath = 'web/themes/custom/materiotheme'
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
resolve: {
|
||||||
|
extensions: ['.js', '.vue', '.json'],
|
||||||
|
alias: {
|
||||||
|
'theme': utils.resolve(themePath),
|
||||||
|
'vuejs': utils.resolve(themePath+'/vuejs')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
entry: {
|
||||||
|
'main': utils.resolve(themePath + '/assets/scripts/main.js'),
|
||||||
|
},
|
||||||
|
output: {
|
||||||
|
path: utils.resolve(themePath + '/assets/dist/'),
|
||||||
|
filename: '[name].js'
|
||||||
|
},
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
test: /\.(js|vue)$/,
|
||||||
|
loader: 'eslint-loader',
|
||||||
|
enforce: 'pre',
|
||||||
|
exclude: /node_modules/,
|
||||||
|
options: {
|
||||||
|
emitError: true,
|
||||||
|
emitWarning: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.vue$/,
|
||||||
|
use: 'vue-loader'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.js$/,
|
||||||
|
use: {
|
||||||
|
loader: 'babel-loader',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// , {
|
||||||
|
// test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
|
||||||
|
// use: {
|
||||||
|
// loader: 'url-loader',
|
||||||
|
// options: {
|
||||||
|
// limit: 10000,
|
||||||
|
// name: utils.assetsPath('img/[name].[hash:7].[ext]')
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }, {
|
||||||
|
// test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
|
||||||
|
// use: {
|
||||||
|
// loader: 'url-loader',
|
||||||
|
// options: {
|
||||||
|
// limit: 10000,
|
||||||
|
// name: utils.assetsPath('media/[name].[hash:7].[ext]')
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }, {
|
||||||
|
// test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
|
||||||
|
// use: {
|
||||||
|
// loader: 'url-loader',
|
||||||
|
// options: {
|
||||||
|
// limit: 10000,
|
||||||
|
// name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
plugins: [
|
||||||
|
new MiniCssExtractPlugin({
|
||||||
|
path: utils.resolve(themePath + '/assets/dist/'),
|
||||||
|
filename: '[name].css'
|
||||||
|
}),
|
||||||
|
new VueLoaderPlugin()
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
'use strict'
|
||||||
|
|
||||||
|
const webpack = require('webpack')
|
||||||
|
const merge = require('webpack-merge')
|
||||||
|
const baseConfig = require('./webpack.config.base')
|
||||||
|
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
||||||
|
|
||||||
|
module.exports = merge(baseConfig, {
|
||||||
|
mode: 'development',
|
||||||
|
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
test: /\.css$/,
|
||||||
|
use: [
|
||||||
|
process.env.NODE_ENV !== 'production'
|
||||||
|
? 'vue-style-loader'
|
||||||
|
: MiniCssExtractPlugin.loader,
|
||||||
|
// 'vue-style-loader',
|
||||||
|
'css-loader'
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
test: /\.scss$/,
|
||||||
|
use: [
|
||||||
|
process.env.NODE_ENV !== 'production'
|
||||||
|
? 'vue-style-loader'
|
||||||
|
: MiniCssExtractPlugin.loader,
|
||||||
|
// 'vue-style-loader',
|
||||||
|
'css-loader',
|
||||||
|
'sass-loader'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
plugins: [
|
||||||
|
// new webpack.HotModuleReplacementPlugin()
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
'use strict'
|
||||||
|
|
||||||
|
const merge = require('webpack-merge')
|
||||||
|
const baseConfig = require('./webpack.config.base')
|
||||||
|
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
|
||||||
|
|
||||||
|
module.exports = merge(baseConfig, {
|
||||||
|
mode: 'production',
|
||||||
|
optimization: {
|
||||||
|
splitChunks: {
|
||||||
|
cacheGroups: {
|
||||||
|
commons: {
|
||||||
|
test: /[\\/]node_modules[\\/]/,
|
||||||
|
name: "vendor",
|
||||||
|
chunks: "all",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
test: /\.css?$/,
|
||||||
|
use: [
|
||||||
|
MiniCssExtractPlugin.loader,
|
||||||
|
'css-loader'
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
test: /\.styl(us)?$/,
|
||||||
|
use: [
|
||||||
|
MiniCssExtractPlugin.loader,
|
||||||
|
'css-loader',
|
||||||
|
'sass-loader'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
// new MiniCssExtractPlugin({
|
||||||
|
// filename: 'main.css'
|
||||||
|
// })
|
||||||
|
]
|
||||||
|
})
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,61 @@
|
||||||
|
{
|
||||||
|
"name": "materio.com",
|
||||||
|
"version": "1.1.0",
|
||||||
|
"description": "A Drupal 8 Vuejs template using Webpack 4 for materio.com",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "webpack --progress --watch --config build/webpack.config.dev.js",
|
||||||
|
"prod": "webpack --config build/webpack.config.prod.js",
|
||||||
|
"lint": "eslint --ext .js,.vue src",
|
||||||
|
"lint:fix": "eslint --ext .js,.vue src --fix",
|
||||||
|
"test": "jest --config test/jest.config.js",
|
||||||
|
"test:debug": "node --inspect node_modules/.bin/jest --runInBand --config test/jest.config.js"
|
||||||
|
},
|
||||||
|
"keywords": [
|
||||||
|
"Vue",
|
||||||
|
"Webpack 4"
|
||||||
|
],
|
||||||
|
"author": "Bachir Soussi Chiadmi",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"axios": "^0.18.0",
|
||||||
|
"vue": "^2.6.10",
|
||||||
|
"vue-meta": "^1.6.0",
|
||||||
|
"vue-router": "^3.0.2",
|
||||||
|
"vuex": "^3.1.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@babel/core": "^7.4.0",
|
||||||
|
"@babel/preset-env": "^7.4.2",
|
||||||
|
"@vue/test-utils": "^1.0.0-beta.29",
|
||||||
|
"babel-core": "^7.0.0-bridge.0",
|
||||||
|
"babel-eslint": "^10.0.1",
|
||||||
|
"babel-jest": "^24.5.0",
|
||||||
|
"babel-loader": "^8.0.5",
|
||||||
|
"copy-webpack-plugin": "^5.0.2",
|
||||||
|
"css-loader": "^2.1.1",
|
||||||
|
"eslint": "^5.15.3",
|
||||||
|
"eslint-config-standard": "^12.0.0",
|
||||||
|
"eslint-loader": "^2.1.2",
|
||||||
|
"eslint-plugin-import": "^2.16.0",
|
||||||
|
"eslint-plugin-node": "^8.0.1",
|
||||||
|
"eslint-plugin-promise": "^4.0.1",
|
||||||
|
"eslint-plugin-standard": "^4.0.0",
|
||||||
|
"eslint-plugin-vue": "^5.2.2",
|
||||||
|
"eslint-plugin-vue-a11y": "0.0.28",
|
||||||
|
"mini-css-extract-plugin": "^0.5.0",
|
||||||
|
"node-sass": "^4.11.0",
|
||||||
|
"sass-loader": "^7.1.0",
|
||||||
|
"style-loader": "^0.23.1",
|
||||||
|
"uglify-es": "^3.3.9",
|
||||||
|
"url-loader": "^1.1.2",
|
||||||
|
"vue-jest": "^3.0.4",
|
||||||
|
"vue-loader": "^15.7.0",
|
||||||
|
"vue-server-renderer": "^2.6.10",
|
||||||
|
"vue-style-loader": "^4.1.2",
|
||||||
|
"vue-template-compiler": "^2.6.10",
|
||||||
|
"webpack": "^4.29.6",
|
||||||
|
"webpack-cli": "^3.3.0",
|
||||||
|
"webpack-merge": "^4.2.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
1
web/themes/custom/materiotheme/assets/dist/3f2f1fc790d5507ed234.hot-update.json
vendored
Normal file
1
web/themes/custom/materiotheme/assets/dist/3f2f1fc790d5507ed234.hot-update.json
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
{"h":"9b06c7ef8366e03bb4ea","c":{"main":true}}
|
||||||
15
web/themes/custom/materiotheme/assets/dist/main.3f2f1fc790d5507ed234.hot-update.js
vendored
Normal file
15
web/themes/custom/materiotheme/assets/dist/main.3f2f1fc790d5507ed234.hot-update.js
vendored
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
webpackHotUpdate("main",{
|
||||||
|
|
||||||
|
/***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./web/themes/custom/materiotheme/vuejs/components/Login.vue?vue&type=template&id=39c106f7&scoped=true&lang=html&":
|
||||||
|
/*!******************************************************************************************************************************************************************************************************************************************************!*\
|
||||||
|
!*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./web/themes/custom/materiotheme/vuejs/components/Login.vue?vue&type=template&id=39c106f7&scoped=true&lang=html& ***!
|
||||||
|
\******************************************************************************************************************************************************************************************************************************************************/
|
||||||
|
/*! exports provided: render, staticRenderFns */
|
||||||
|
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
||||||
|
|
||||||
|
"use strict";
|
||||||
|
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });\nvar render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\"div\", { attrs: { id: \"block-userlogin\" } }, [\n _c(\"h2\", [_vm._v(\"Login Hello!\")]),\n _vm._v(\" \"),\n _c(\"section\", [\n _c(\"input\", {\n directives: [\n {\n name: \"model\",\n rawName: \"v-model\",\n value: _vm.mail,\n expression: \"mail\"\n }\n ],\n staticClass: \"form-email\",\n attrs: {\n id: \"edit-name\",\n type: \"text\",\n placeholder: \"Email\",\n name: \"name\"\n },\n domProps: { value: _vm.mail },\n on: {\n keyup: function($event) {\n if (\n !$event.type.indexOf(\"key\") &&\n _vm._k($event.keyCode, \"enter\", 13, $event.key, \"Enter\")\n ) {\n return null\n }\n return _vm.login($event)\n },\n input: function($event) {\n if ($event.target.composing) {\n return\n }\n _vm.mail = $event.target.value\n }\n }\n }),\n _vm._v(\" \"),\n _c(\"input\", {\n directives: [\n {\n name: \"model\",\n rawName: \"v-model\",\n value: _vm.password,\n expression: \"password\"\n }\n ],\n staticClass: \"form-text\",\n attrs: {\n id: \"edit-pass\",\n type: \"password\",\n placeholder: \"Password\",\n name: \"pass\"\n },\n domProps: { value: _vm.password },\n on: {\n keyup: function($event) {\n if (\n !$event.type.indexOf(\"key\") &&\n _vm._k($event.keyCode, \"enter\", 13, $event.key, \"Enter\")\n ) {\n return null\n }\n return _vm.login($event)\n },\n input: function($event) {\n if ($event.target.composing) {\n return\n }\n _vm.password = $event.target.value\n }\n }\n }),\n _vm._v(\" \"),\n _c(\n \"button\",\n {\n staticClass: \"button\",\n attrs: { id: \"edit-submit\" },\n on: {\n click: function($event) {\n $event.stopPropagation()\n return _vm.login($event)\n }\n }\n },\n [_vm._v(\"\\n login\\n \")]\n )\n ])\n ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Login.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options");
|
||||||
|
|
||||||
|
/***/ })
|
||||||
|
|
||||||
|
})
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -1,3 +0,0 @@
|
||||||
|
|
||||||
(function($,Drupal,drupalSettings){MaterioTheme=function(){var _$body=$('body');function init(){void 0;};init();}
|
|
||||||
$(document).ready(function($){if(drupalSettings.path.isFront){var materiotheme=new MaterioTheme();}else{$('body').attr('booted','booted');}});})(jQuery,Drupal,drupalSettings);
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,19 @@
|
||||||
(function($, Drupal, drupalSettings) {
|
import Vue from 'vue'
|
||||||
|
import store from 'vuejs/store'
|
||||||
|
import VLogin from 'vuejs/components/Login'
|
||||||
|
|
||||||
MaterioTheme = function(){
|
// require('theme/assets/styles/main.scss');
|
||||||
var _$body = $('body');
|
import 'theme/assets/styles/main.scss'
|
||||||
|
|
||||||
|
(function(Drupal, drupalSettings) {
|
||||||
|
|
||||||
|
var v_login = new Vue({
|
||||||
|
store,
|
||||||
|
render: h => h(VLogin)
|
||||||
|
}).$mount('#block-userlogin')
|
||||||
|
|
||||||
|
|
||||||
|
var MaterioTheme = function(){
|
||||||
// var _is_front = drupalSettings.path.isFront;
|
// var _is_front = drupalSettings.path.isFront;
|
||||||
|
|
||||||
// ___ _ _
|
// ___ _ _
|
||||||
|
|
@ -17,12 +29,12 @@
|
||||||
init();
|
init();
|
||||||
} // end MaterioTheme()
|
} // end MaterioTheme()
|
||||||
|
|
||||||
$(document).ready(function($) {
|
// $(document).ready(function($) {
|
||||||
if(drupalSettings.path.isFront){
|
// if(drupalSettings.path.isFront){
|
||||||
var materiotheme = new MaterioTheme();
|
var materiotheme = new MaterioTheme();
|
||||||
}else{
|
// }else{
|
||||||
$('body').attr('booted', 'booted');
|
// $('body').attr('booted', 'booted');
|
||||||
}
|
// }
|
||||||
});
|
// });
|
||||||
|
|
||||||
})(jQuery, Drupal, drupalSettings);
|
})(Drupal, drupalSettings);
|
||||||
|
|
|
||||||
|
|
@ -6,12 +6,12 @@
|
||||||
// @Last modified time: 20-12-2017
|
// @Last modified time: 20-12-2017
|
||||||
// @License: GPL-V3
|
// @License: GPL-V3
|
||||||
|
|
||||||
@import 'base/reset';
|
@import './base/reset';
|
||||||
@import 'base/variables';
|
@import './base/variables';
|
||||||
@import 'base/colors';
|
@import './base/colors';
|
||||||
@import 'base/grid';
|
@import './base/grid';
|
||||||
@import 'base/layout';
|
@import './base/layout';
|
||||||
@import 'base/fonts';
|
@import './base/fonts';
|
||||||
|
|
||||||
|
|
||||||
html{
|
html{
|
||||||
|
|
@ -4,7 +4,7 @@ global-css:
|
||||||
theme:
|
theme:
|
||||||
assets/fonts/ubuntu/ubuntu.css: {}
|
assets/fonts/ubuntu/ubuntu.css: {}
|
||||||
assets/fonts/icon/foundation-icons.css: {}
|
assets/fonts/icon/foundation-icons.css: {}
|
||||||
assets/dist/styles/app.min.css: {}
|
assets/dist/main.css: {}
|
||||||
|
|
||||||
global-js:
|
global-js:
|
||||||
version: VERSION
|
version: VERSION
|
||||||
|
|
@ -12,14 +12,14 @@ global-js:
|
||||||
# assets/dist/bower/jquery.hotkeys.js: { scope: footer }
|
# assets/dist/bower/jquery.hotkeys.js: { scope: footer }
|
||||||
# assets/dist/bower/imagesloaded.pkgd.min.js: { minified: true }
|
# assets/dist/bower/imagesloaded.pkgd.min.js: { minified: true }
|
||||||
# assets/dist/bower/masonry.pkgd.min.js: { minified: true }
|
# assets/dist/bower/masonry.pkgd.min.js: { minified: true }
|
||||||
assets/dist/scripts/main.min.js: { minified: true }
|
assets/dist/main.js: { }
|
||||||
dependencies:
|
dependencies:
|
||||||
- core/drupal
|
- core/drupal
|
||||||
# - core/drupal.ajax
|
# - core/drupal.ajax
|
||||||
# - core/drupal.autocomplete
|
# - core/drupal.autocomplete
|
||||||
- core/matchmedia
|
- core/matchmedia
|
||||||
- core/matchmedia.addListener
|
- core/matchmedia.addListener
|
||||||
- core/jquery
|
# - core/jquery
|
||||||
# - core/jquery.once
|
# - core/jquery.once
|
||||||
# - core/jquery.ui.draggable
|
# - core/jquery.ui.draggable
|
||||||
# - core/jquery.ui.dropable
|
# - core/jquery.ui.dropable
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,76 @@
|
||||||
|
<template lang="html">
|
||||||
|
<div id="block-userlogin" class="">
|
||||||
|
<h2>Login Hello!</h2>
|
||||||
|
<section>
|
||||||
|
<input
|
||||||
|
id="edit-name"
|
||||||
|
class="form-email"
|
||||||
|
type="text"
|
||||||
|
placeholder="Email" name="name"
|
||||||
|
v-model="mail"
|
||||||
|
@keyup.enter="login"/>
|
||||||
|
<input
|
||||||
|
id="edit-pass"
|
||||||
|
class="form-text"
|
||||||
|
type="password"
|
||||||
|
placeholder="Password" name="pass"
|
||||||
|
v-model="password"
|
||||||
|
@keyup.enter="login"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
id="edit-submit"
|
||||||
|
class="button"
|
||||||
|
@click.stop="login"
|
||||||
|
>
|
||||||
|
login
|
||||||
|
</button>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// https://github.com/alvar0hurtad0/drupal-vuejs-todo
|
||||||
|
|
||||||
|
import { mapState, mapActions } from 'vuex'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
mail: '',
|
||||||
|
password: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState(['User']),
|
||||||
|
// ...mapState({
|
||||||
|
// isloggedin: state => state.user.isloggedin,
|
||||||
|
// username: state => state.user.username,
|
||||||
|
// token: state => state.user.token
|
||||||
|
// })
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
...mapActions({
|
||||||
|
getToken: 'User/getToken'
|
||||||
|
}),
|
||||||
|
|
||||||
|
// usernameInputHandler(input) {
|
||||||
|
// this.username = input;
|
||||||
|
// },
|
||||||
|
// passwordInputHandler(input) {
|
||||||
|
// this.password = input;
|
||||||
|
// },
|
||||||
|
|
||||||
|
login () {
|
||||||
|
this.getToken({
|
||||||
|
mail: this.mail,
|
||||||
|
pass: this.password
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
import axios from 'axios'
|
||||||
|
|
||||||
|
// console.log('drupalSettings', drupalSettings);
|
||||||
|
|
||||||
|
export const HTTP = axios.create({
|
||||||
|
baseURL: `http://dev.materio.com`,
|
||||||
|
headers: {
|
||||||
|
Authorization: 'Bearer {token}'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
import Vue from 'vue'
|
||||||
|
import Vuex from 'vuex'
|
||||||
|
import User from './modules/user'
|
||||||
|
|
||||||
|
// https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart
|
||||||
|
|
||||||
|
Vue.use(Vuex)
|
||||||
|
export default new Vuex.Store({
|
||||||
|
modules: {
|
||||||
|
User
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,59 @@
|
||||||
|
import { HTTP } from 'vuejs/rest/http-axios'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
namespaced: true,
|
||||||
|
|
||||||
|
// initial state
|
||||||
|
state : {
|
||||||
|
isloggedin: false,
|
||||||
|
username: '',
|
||||||
|
token: null
|
||||||
|
},
|
||||||
|
|
||||||
|
// getters
|
||||||
|
getters : {},
|
||||||
|
|
||||||
|
// mutations
|
||||||
|
mutations : {
|
||||||
|
// setUser (state, posts) {
|
||||||
|
// state.all = posts
|
||||||
|
// }
|
||||||
|
// setOpened (state, post) {
|
||||||
|
// state.opened = post
|
||||||
|
// },
|
||||||
|
// clearOpened (state) {
|
||||||
|
// state.opened = null
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
|
||||||
|
// actions
|
||||||
|
actions : {
|
||||||
|
getToken ({ commit, state }, data) {
|
||||||
|
// console.log('getToken data', data)
|
||||||
|
|
||||||
|
let config = {
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// console.log('data', data)
|
||||||
|
// console.log('config', config)
|
||||||
|
|
||||||
|
HTTP.post('/user/login?_format=json', data, config)
|
||||||
|
.then(response => {
|
||||||
|
console.log('response', response)
|
||||||
|
// cb(response.data)
|
||||||
|
})
|
||||||
|
.catch(({ error }) => {
|
||||||
|
console.log('Issue with login', error);
|
||||||
|
Promise.reject(error);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// ,
|
||||||
|
// logout ({ commit }) {
|
||||||
|
//
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue