Merge pull request #109 from Cambalab/0.0.4

0.0.4

CHANGELOG.md

@@ -1,5 +1,36 @@
 # Change Log
 
+## [v0.0.4](https://github.com/Cambalab/vue-admin/tree/v0.0.4) (2019-04-02)
+[Full Changelog](https://github.com/Cambalab/vue-admin/compare/v0.0.13...v0.0.4)
+
+**Implemented enhancements:**
+
+- Expose Auth action Types in the distributed version [\#107](https://github.com/Cambalab/vue-admin/issues/107)
+
+**Merged pull requests:**
+
+- Updates index.js [\#108](https://github.com/Cambalab/vue-admin/pull/108) ([sgobotta](https://github.com/sgobotta))
+
+## [v0.0.13](https://github.com/Cambalab/vue-admin/tree/v0.0.13) (2019-04-02)
+[Full Changelog](https://github.com/Cambalab/vue-admin/compare/v0.0.12...v0.0.13)
+
+## [v0.0.12](https://github.com/Cambalab/vue-admin/tree/v0.0.12) (2019-04-02)
+[Full Changelog](https://github.com/Cambalab/vue-admin/compare/v0.0.3...v0.0.12)
+
+**Implemented enhancements:**
+
+- Integrate View's permissions to the route.hooks [\#96](https://github.com/Cambalab/vue-admin/issues/96)
+
+**Fixed bugs:**
+
+- Test Server: users removed from the whitelist [\#103](https://github.com/Cambalab/vue-admin/issues/103)
+
+**Merged pull requests:**
+
+- 96 integrate views permissions to the route hooks [\#106](https://github.com/Cambalab/vue-admin/pull/106) ([sgobotta](https://github.com/sgobotta))
+- Test serer: fixes lost users from the whitelist [\#104](https://github.com/Cambalab/vue-admin/pull/104) ([sgobotta](https://github.com/sgobotta))
+- 0.0.3 [\#102](https://github.com/Cambalab/vue-admin/pull/102) ([sgobotta](https://github.com/sgobotta))
+
 ## [v0.0.3](https://github.com/Cambalab/vue-admin/tree/v0.0.3) (2019-03-31)
 [Full Changelog](https://github.com/Cambalab/vue-admin/compare/v0.0.2...v0.0.3)
 

Docs/Resource.md

@@ -1,4 +1,4 @@
-# `<Resource>` component
+# `<Resource>` component (outdated)
 
 A `<Resource>` component maps one API endpoint to a CRUD interface.
 

README.md

@@ -31,12 +31,21 @@
 npm i --save vue-admin-js
 ```
 
+## Configuration
+
+### Auth Provider
+**You will have to configure a simple adapter to communicate with your REST api.**
+
+**We currently provide a simple example using an axios client in the demo app. Though we intend to keep developing other kind of adapters for different node backend frameworks, they will live in separate packages.**
+
+**Anyways, we hope the axios example encourages you to write your own adapter until we release the adapters guide. The @va-auth module uses the vuex store and expects a user to make use of the action types it provides.**
+
 ## Usage
 
-***App.vue***
+***Your App.vue file***
 ```vue
 <template>
-  <Admin>
+  <Admin :authProvider="authProvider">
     <Resource
       name="articles"
       resourceIdName="id"
@@ -58,6 +67,13 @@ npm i --save vue-admin-js
   import ShowArticles from './components/articles/ShowArticles'
   import CreateArticles from './components/articles/CreateArticles'
   import EditArticles from './components/articles/EditArticles'
+  import createAxiosAdapter from './va-auth-adapter/axios.adapter'
+  import axios from 'axios'
+
+  const authUrl = 'http://localhost:8888/api/auth'
+  const client = axios
+
+  const authProvider = createAxiosAdapter(client, { authUrl })
 
   export default {
     name: 'App',
@@ -67,6 +83,8 @@ npm i --save vue-admin-js
     },
     data() {
       return {
+        authProvider,
+        // Your Components
         ListArticles,
         ShowArticles,
         CreateArticles,
@@ -77,7 +95,7 @@ npm i --save vue-admin-js
 </script>
 ```
 
-***ListArticles.vue***
+***Example of a ListArticles.vue component***
 ```vue
 <template>
   <List>
@@ -151,7 +169,7 @@ npm run test:unit
   <a href="https://camba.coop" target="_blank" rel="noopener noreferrer">
     <img class="margin" width="20" src="public/camba_icon.png" />
   </a>
-  <strong>With :green_heart::purple_heart::heart: from <a href="https://camba.coop" target="_blank" rel="noopener noreferrer">Cambá Coop</a>, Buenos Aires, Argentina</strong>
+  <strong>With :green_heart: :purple_heart: :heart: by <a href="https://camba.coop" target="_blank" rel="noopener noreferrer">Cambá Coop</a> :earth_americas: Buenos Aires, Argentina</strong>
   <a href="https://camba.coop" target="_blank" rel="noopener noreferrer">
     <img class="margin" width="20" src="public/camba_icon.png" />
   </a>

demo/App.vue

@@ -33,17 +33,17 @@ import EditMagazines from './components/magazines/EditMagazines'
 import createAxiosAdapter from './va-auth-adapter/axios.adapter'
 import axios from 'axios'
 
-const authModuleName = 'auth'
+const authFields = { username: 'username', password: 'password' }
 const authUrl = 'http://localhost:8888/api/auth'
 const client = axios
 const storageKey = 'token'
-const userFields = { username: 'username', password: 'password' }
+const userField = 'user'
 
 const authProvider = createAxiosAdapter(client, {
-  authModuleName,
+  authFields,
   authUrl,
   storageKey,
-  userFields,
+  userField,
 })
 
 // Articles Views as Array

demo/va-auth-adapter/axios.adapter.js

@@ -9,29 +9,31 @@ export default (client, options = {}) => {
     } = AuthActionTypes
 
     const {
+      authFields,
       authUrl,
       storageKey,
-      userFields,
+      userField,
     } = Object.assign({
+      authFields: { username: 'username', password: 'password' },
       storageKey: 'token',
-      userFields: { username: 'username', password: 'password' },
+      userField: 'user',
     }, options);
 
     switch (type) {
       case AUTH_LOGIN_REQUEST:
         return new Promise((resolve, reject) => {
           const headers = {
             'Content-Type': 'application/x-www-form-urlencoded',
-            [userFields.username]: params.username,
-            [userFields.password]: params.password
+            [authFields.username]: params.username,
+            [authFields.password]: params.password
           }
           const method = 'post'
           const url = authUrl
 
           client({ url, headers, method })
             .then(response => {
               const { data } = response
-              const { [storageKey]: token, user } = data
+              const { [storageKey]: token, [userField]: user } = data
               // something more secure maybe?
               localStorage.setItem(storageKey, token)
               client.defaults.headers.common['Authorization'] = token
@@ -62,7 +64,9 @@ export default (client, options = {}) => {
           const method = 'get'
           client({ url, headers, method })
             .then(response => {
-              resolve(response)
+              const { data } = response
+              const { [userField]: user } = data
+              resolve(user)
             })
             .catch(error => {
               reject(error)

jest.config.js

@@ -18,7 +18,8 @@ module.exports = {
     '@router(.*)$': '<rootDir>/src/router/$1',
     '@store(.*)$': '<rootDir>/src/store/$1',
     '@templates(.*)$': '<rootDir>/src/templates/src/$1',
-    '@validators(.*)$': '<rootDir>/src/validators/src/$1'
+    '@va-auth(.*)$': '<rootDir>/src/va-auth/src/$1',
+    '@validators(.*)$': '<rootDir>/src/validators/src/$1',
   },
   snapshotSerializers: [
     'jest-serializer-vue'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-admin-js",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "An open source frontend Framework for building admin applications running in the browser, using ES6, Vue.js and Vuetify.js",
   "author": "Camba <info@camba.coop>",
   "scripts": {

src/index.js

@@ -1,23 +1,46 @@
-import Admin from '@components/Admin';
+import {
+  Create,
+  Delete,
+  Edit,
+  EditButton,
+  List,
+  Show
+} from '@components/Actions'
+import Admin from '@components/Admin'
+import AuthTypes from '@va-auth/types'
 import Resource from '@components/Resource'
-import { version } from '../package.json'
+import { name, description, version } from '../package.json'
 
-const components = [ Admin, Resource ];
+const components = [
+  Admin, Resource,
+  Create, Delete, Edit, EditButton, List, Show,
+]
 
 const install = function(Vue) {
   components.forEach(component => {
-    Vue.component(component.name, component);
-  });
-};
+    Vue.component(component.name, component)
+  })
+}
 
 if (typeof window !== 'undefined' && window.Vue) {
-  install(window.Vue);
+  install(window.Vue)
 }
 
-const VueAdmin = {
+export {
+  // Package data
+  name,
+  description,
   version,
+  // Exports Actions components
+  Create,
+  Delete,
+  Edit,
+  EditButton,
+  List,
+  Show,
+  // Exports Core components
   Admin,
-  Resource
-};
-
-export default VueAdmin;
+  Resource,
+  // Exports Types
+  AuthTypes,
+}

src/router/route.bindings.js

@@ -2,6 +2,7 @@ import listUtils from '@store/utils/list.utils'
 import showUtils from '@store/utils/show.utils'
 import createUtils from '@store/utils/create.utils'
 import editUtils from '@store/utils/edit.utils'
+import createAuthUtils from '@va-auth/utils'
 import createRouteHooks from './route.hooks'
 
 /**
@@ -37,6 +38,7 @@ export default ({
   const hasCreate = !!create
   const hasEdit = !!edit
   const resourcePath = `/${resourceName}`
+  const authUtils = createAuthUtils({ store })
   return {
 
     list: ({ wrapper }) => {
@@ -67,6 +69,12 @@ export default ({
       } else {
         // list is an Object
         const { component, isPublic, permissions } = list
+        const routeHooks = createRouteHooks({
+          isPublic,
+          permissions,
+          store: authUtils,
+          userPermissionsField
+        })
         return {
           path: resourcePath,
           name,
@@ -85,7 +93,8 @@ export default ({
           meta: {
             isPublic,
             permissions
-          }
+          },
+          ...routeHooks,
         }
       }
     },
@@ -115,6 +124,12 @@ export default ({
       } else {
         // show is an Object
         const { component, isPublic, permissions } = show
+        const routeHooks = createRouteHooks({
+          isPublic,
+          permissions,
+          store: authUtils,
+          userPermissionsField
+        })
         return {
           path: `${resourcePath}/show/:id`,
           name,
@@ -129,7 +144,8 @@ export default ({
           meta: {
             isPublic,
             permissions
-          }
+          },
+          ...routeHooks,
         }
       }
     },
@@ -162,6 +178,12 @@ export default ({
       } else {
         // create is an Object
         const { component, isPublic, permissions } = create
+        const routeHooks = createRouteHooks({
+          isPublic,
+          permissions,
+          store: authUtils,
+          userPermissionsField
+        })
         return {
           path: `${resourcePath}/create`,
           name,
@@ -176,7 +198,8 @@ export default ({
           meta: {
             isPublic,
             permissions
-          }
+          },
+          ...routeHooks
         }
       }
     },
@@ -209,6 +232,12 @@ export default ({
       } else {
         // edit is an Object
         const { component, isPublic, permissions } = edit
+        const routeHooks = createRouteHooks({
+          isPublic,
+          permissions,
+          store: authUtils,
+          userPermissionsField
+        })
         return {
           path: `${resourcePath}/edit/:id`,
           name,
@@ -223,7 +252,8 @@ export default ({
           meta: {
             isPublic,
             permissions
-          }
+          },
+          ...routeHooks
         }
       }
     }