[WIP] Add permissions groups store, handlers and login functionality

frontend/package.json

@@ -34,11 +34,11 @@
  },
  "dependencies": {
  "@johmun/vue-tags-input": "^2.1.0",
- "core-js": "^2.6.5",
  "acorn": "^6.0.5",
  "animate.css": "3.7.2",
  "axios": "^0.19.0",
  "bulma": "^0.7.5",
+ "core-js": "^2.6.5",
  "font-awesome": "^4.7.0",
  "jdenticon": "^2.1.1",
  "lodash": "^4.17.11",
@@ -49,6 +49,7 @@
  "shelljs": "^0.8.3",
  "vis": "^4.21.0",
  "vue": "^2.6.10",
+ "vue-bulma-collapse": "^1.0.3",
  "vue-bulma-collapse-fixed": "^1.0.4",
  "vue-bulma-datepicker": "^1.3.6",
  "vue-bulma-expanding": "^0.0.1",

frontend/src/store/modules/menu/index.js

@@ -37,6 +37,14 @@ const state = {
  icon: 'fa-cogs'
  },
  component: lazyLoading('settings', true)
+ },
+ {
+ name: 'Permissions',
+ path: '/permissions',
+ meta: {
+ icon: 'fa-users'
+ },
+ component: lazyLoading('permissions', true)
  }
  ]
 }

frontend/src/views/permissions/index.vue

@@ -0,0 +1,102 @@
+<template>
+ <div class="tile is-ancestor">
+ <div class="tile is-vertical">
+ <tabs type="boxed" :is-fullwidth="false" alignment="centered" size="large">
+ <tab-pane label="User Roles" icon="fa fa-user">
+ <manage-permissions :users="users" :permission-options="permissionOptions"/>
+ </tab-pane>
+ <tab-pane label="User Groups" icon="fa fa-users">
+ <manage-groups :groups="groups" :permission-options="permissionOptions"/>
+ </tab-pane>
+ </tabs>
+ </div>
+ </div>
+</template>
+
+<script>
+import { TabPane, Tabs } from 'vue-bulma-tabs'
+import ManagePermissions from './permissions/manage-permissions'
+import ManageGroups from './permissions/manage-groups'
+import { EventBus } from '../../main'
+
+export default {
+ components: {
+ ManagePermissions,
+ ManageGroups,
+ Tabs,
+ TabPane
+ },
+
+ data () {
+ return {
+ groups: [],
+ users: [],
+ permissionOptions: []
+ }
+ },
+
+ mounted () {
+ this.fetchData()
+ EventBus.$on('refreshGroups', this.fetchData)
+ },
+
+ watch: {
+ '$route': 'fetchData'
+ },
+
+ methods: {
+ fetchData () {
+ this.$http.get('/api/v1/permission')
+ .then(response => {
+ if (response.data) {
+ this.permissionOptions = response.data
+ }
+ })
+ .catch((error) => {
+ this.$onError(error)
+ })
+ this.$http
+ .get('/api/v1/permission/group', { showProgressBar: false })
+ .then(response => {
+ if (response.data) {
+ this.groups = response.data
+ }
+ })
+ .catch((error) => {
+ this.$onError(error)
+ })
+ this.$http
+ .get('/api/v1/users', { showProgressBar: false })
+ .then(response => {
+ if (response.data) {
+ this.users = response.data
+ }
+ })
+ .catch((error) => {
+ this.$onError(error)
+ })
+ },
+
+ close () {
+ }
+ }
+}
+</script>
+
+<style lang="scss">
+
+ .tabs {
+ margin: 10px;
+
+ .tab-content {
+ min-height: 50px;
+ }
+ }
+
+ .tabs.is-boxed li.is-active a {
+ background-color: transparent;
+ border-color: transparent;
+ border-bottom-color: #4da2fc !important;
+ }
+
+</style>

frontend/src/views/permissions/permissions/manage-groups.vue

@@ -0,0 +1,179 @@
+<template>
+ <div>
+ <a class="button is-primary" v-on:click="toggleNew(true)">
+ <span class="icon">
+ <i class="fa fa-user-plus"></i>
+ </span>
+ <span>Add Group</span>
+ </a><br><br>
+ <div class="tile is-ancestor">
+ <div class="tile is-horizontal is-parent is-3">
+ <article class="tile is-child notification content-article box">
+ <p class="control has-icons-left">
+ <input v-model="search" class="input is-medium input-bar" type="text" placeholder="Search">
+ <span class="icon is-small is-left"><i class="fa fa-search"></i></span>
+ </p>
+ <br>
+ <table class="table is-narrow is-fullwidth table-general table-users">
+ <thead>
+ <tr>
+ <th width="300">Groups</th>
+ </tr>
+ </thead>
+ <tbody v-if="filteredGroups.length > 0">
+ <tr v-for="group in filteredGroups" :key="group.name">
+ <td class="user-row" @click="selectGroup(group)">{{group.name}}</td>
+ </tr>
+ </tbody>
+ <tbody v-if="filteredGroups.length === 0">
+ <tr>
+ <td class="user-row"><i>No results.</i></td>
+ </tr>
+ </tbody>
+ </table>
+ </article>
+ </div>
+ <div class="tile is-horizontal is-parent is-9">
+ <article class="tile is-child notification content-article box">
+ <div v-if="isNew">
+ <h4 class="title is-4">User Groups: New</h4>
+ <input class="input is-medium input-bar" v-focus v-model="name" type="text" placeholder="Name">
+ <br><br>
+ <input class="input is-medium input-bar" v-focus v-model="description" type="text"
+ placeholder="Description">
+ <br><br>
+ <permission-tables @input="setRoles" :permission-options="permissionOptions"/>
+ <div style="float: left;">
+ <button class="button is-primary" v-on:click="addNew">Add</button>
+ </div>
+ </div>
+ <div v-if="!isNew && name !== ''">
+ <h4 class="title">User Groups: {{name}}</h4>
+ <h4 class="subtitle">{{description ? description : 'No description'}}</h4>
+ <permission-tables :value="roles" @input="setRoles" :permission-options="permissionOptions"/>
+ <div style="float: left; margin-top: 20px;">
+ <button class="button is-primary" v-on:click="save">Save</button>
+ </div>
+ </div>
+ <div v-if="!isNew && name === ''">
+ <h4 class="title">User Groups</h4>
+ <p>Please select an existing group or create a new one.</p>
+ </div>
+ </article>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import PermissionTables from './permission-tables'
+import { EventBus } from '../../../main'
+
+export default {
+ name: 'manage-groups',
+ components: { PermissionTables },
+ props: {
+ reset: Function,
+ groups: Array,
+ permissionOptions: Array
+ },
+ computed: {
+ filteredGroups () {
+ return this.groups.filter(g => {
+ return g.name.toLowerCase().includes(this.search.toLowerCase())
+ })
+ }
+ },
+ data () {
+ return {
+ search: '',
+ isNew: false,
+ roles: [],
+ name: '',
+ description: ''
+ }
+ },
+ methods: {
+ setRoles (roles) {
+ this.roles = roles
+ },
+ selectGroup (group) {
+ this.toggleNew(false)
+ this.$http
+ .get(`/api/v1/permission/group/${group.name}`, { showProgressBar: false })
+ .then(response => {
+ if (response.data) {
+ this.name = group.name
+ this.description = group.description
+ this.roles = response.data.roles
+ }
+ })
+ .catch((error) => {
+ this.$onError(error)
+ })
+ },
+ toggleNew (value) {
+ this.name = ''
+ this.description = ''
+ this.roles = []
+ this.isNew = value
+ },
+ addNew () {
+ const perms = {
+ name: this.name,
+ roles: this.roles,
+ description: this.description
+ }
+ this.$http
+ .post(`/api/v1/permission/group`, perms)
+ .then(() => {
+ this.$onSuccess('Group Added', 'Permission group added successfully.')
+ EventBus.$emit('refreshGroups')
+ })
+ .catch((error) => this.$onError(error))
+ },
+ save () {
+ const perms = {
+ name: this.name,
+ roles: this.roles,
+ description: this.description
+ }
+ this.$http
+ .put(`/api/v1/permission/group`, perms)
+ .then(() => {
+ this.$onSuccess('Group Updated', 'Permission group updated successfully.')
+ EventBus.$emit('refreshGroups')
+ })
+ .catch((error) => this.$onError(error))
+ }
+ }
+}
+</script>
+
+<style scoped>
+ .user-row {
+ cursor: pointer;
+ }
+
+ .table-general {
+ background: #413F4A;
+ border: 2px solid #000;
+ }
+
+ .table-general th {
+ border: 2px solid #000;
+ background: #2c2b32;
+ color: #4da2fc;
+ }
+
+ .table-general td {
+ border: 2px solid #000;
+ color: #8c91a0;
+ }
+
+ .table-users td:hover {
+ border: 2px solid #000;
+ background: #575463;
+ cursor: pointer;
+ }
+</style>

frontend/src/views/settings/permissions/manage-permissions.vue → frontend/src/views/permissions/permissions/manage-permissions.vue

@@ -14,14 +14,14 @@
  </tr>
  </thead>
  <tbody>
- <div v-if="filteredUsers.length > 0" >
- <tr v-for="user in filteredUsers" :key="user.username">
- <td class="user-row" @click="fetchData(user)">{{user.username}}</td>
- </tr>
- </div>
- <tr v-if="filteredUsers.length === 0">
- <td class="user-row"><i>No results.</i></td>
+ <div v-if="filteredUsers.length > 0" >
+ <tr v-for="user in filteredUsers" :key="user.username">
+ <td class="user-row" @click="fetchData(user)">{{user.username}}</td>
  </tr>
+ </div>
+ <tr v-if="filteredUsers.length === 0">
+ <td class="user-row"><i>No results.</i></td>
+ </tr>
  </tbody>
  </table>
  </article>
@@ -72,7 +72,7 @@
 </template>
 
 <script>
-import { EventBus } from '../../../main.js'
+import { EventBus } from '../../../main'
 
 export default {
  name: 'manage-permissions',