diff --git a/frontend/components/edit-user.vue b/frontend/components/edit-user.vue
index 78ac492339f34d689639e0a1ff14e401aa399e05..5216f1ba79a2ad9af3b6d965dfb30f46d127c1c1 100644
--- a/frontend/components/edit-user.vue
+++ b/frontend/components/edit-user.vue
@@ -1,29 +1,59 @@
<template>
<b-row class="mb-2">
- <b-col>
+ <b-col cols="3">
{{ user.username }}
</b-col>
- <b-col>
+ <b-col cols="2">
<b-form-input type="password" v-model="user.password" placeholder="password"></b-form-input>
</b-col>
- <b-col>
+ <b-col cols="3">
<b-form-input type="email" v-model="user.email"></b-form-input>
</b-col>
- <b-col>
- <b-button-group class="ml-auto">
+ <b-col cols="1">
+ <b-badge class="mr-1" variant="primary" v-for="role in user.roles" v-bind:key="role">{{role}}</b-badge>
+ </b-col>
+ <b-col cols="3">
+ <b-button-group v-show="!showAddRole">
+ <b-button variant="outline-primary" v-on:click="addRole">Add role</b-button>
<b-button v-show="isModified" variant="outline-primary" v-on:click="savePressed()">Save</b-button>
<b-button variant="outline-danger" v-on:click="$emit('delete')">Delete</b-button>
</b-button-group>
+ <b-form inline @submit="addRole" v-show="showAddRole">
+ <b-form-input
+ style="width: 60%"
+ v-model="newRole"
+ :state="addRoleState"
+ placeholder="Enter role"
+ class="mr-1"
+ trim>
+ </b-form-input>
+ <b-button type="submit" variant="success">Add</b-button>
+ </b-form>
</b-col>
</b-row>
</template>
<script>
export default {
- props: ['user'],
+ props: ['user', 'roles'],
methods: {
savePressed: function(){
this.$emit('save');
this.isModified = false;
+ },
+ addRole: function(evt){
+ evt.preventDefault();
+ if(!this.showAddRole){this.showAddRole = true;}
+ else{
+ if(this.addRoleState){this.user.roles.push(this.newRole)}
+ this.newRole = "";
+ this.showAddRole = false;
+ }
+ }
+ },
+ computed: {
+ addRoleState(){
+ if (!this.roles.includes(this.newRole)){return false}
+ return true;
}
},
watch: {
@@ -34,7 +64,9 @@ export default {
},
data(){
return {
- isModified: false
+ isModified: false,
+ showAddRole: false,
+ newRole: "",
}
}
}
diff --git a/frontend/components/edit-users.vue b/frontend/components/edit-users.vue
index 67d8f0e990c0c4401b7cba3887488be2c92d0570..be623a073fdff50492a9d0cd3640001e26f868bc 100644
--- a/frontend/components/edit-users.vue
+++ b/frontend/components/edit-users.vue
@@ -1,21 +1,25 @@
<template>
<div>
<b-row class="mb-3 mt-3">
- <b-col>
+ <b-col cols="3">
<label>Username</label>
</b-col>
- <b-col>
+ <b-col cols="2">
<label>Password</label>
</b-col>
- <b-col>
- <label>email</label>
+ <b-col cols="3">
+ <label>Email</label>
</b-col>
- <b-col>
+ <b-col cols="1">
+ <label>Roles</label>
+ </b-col>
+ <b-col cols="3">
</b-col>
</b-row>
<edit-user v-for="(user, index) in users"
v-model="users[index]"
v-bind:user="user"
+ v-bind:roles="roles"
v-bind:key="user.username"
v-on:delete="$emit('delete', user.username, index)"
v-on:save="$emit('save', user.username, index)">
@@ -26,6 +30,6 @@
import editUser from '~/components/edit-user'
export default {
components: { editUser },
- props: ['users']
+ props: ['users', 'roles']
}
</script>
diff --git a/frontend/pages/users.vue b/frontend/pages/users.vue
index b1a76b574df6adcb05b925e4bba07fea7dac2828..ee5d3ddfce7928b765f029b3a0a3f5fff8bf5ee2 100644
--- a/frontend/pages/users.vue
+++ b/frontend/pages/users.vue
@@ -6,14 +6,15 @@
All
<b-badge pill variant="primary">{{ users.length }}</b-badge>
</b-list-group-item>
- <b-list-group-item button v-bind:active="role==selectedRole" class="d-flex justify-content-between align-items-center" v-for="role in roles" v-bind:key="role" @click="selectRole(role)">
- {{ role }}
- <b-badge pill variant="primary">{{ role.length }}</b-badge>
+ <b-list-group-item button v-bind:active="role.name==selectedRole" class="d-flex justify-content-between align-items-center" v-for="role in roles" v-bind:key="role.name" @click="selectRole(role.name)">
+ {{ role.name }}
+ <b-badge pill variant="primary">{{ role.users.length }}</b-badge>
</b-list-group-item>
</b-list-group>
</div>
<div class="container">
<edit-users v-bind:users="selectedUsers"
+ v-bind:roles="roleList"
v-model="selectedUsers"
v-on:save="saveUser"
v-on:delete="deleteUser">
@@ -44,7 +45,7 @@
</div>
</b-form>
<edit-user v-bind:user="newUser"
- :roles="roles"
+ :roles="roleList"
v-model="newUser"
v-on:save="addUser"
v-show="userFormVisibility"
@@ -64,9 +65,8 @@ export default {
console.log(username);
console.log(index);
},
- selectRole: function(role){
- console.log(role)
- this.selectedRole = role;
+ selectRole: function(roleName){
+ this.selectedRole = roleName;
},
deleteUser: function(username, index){
axios.post(
@@ -123,6 +123,7 @@ export default {
this.newUser.username = "";
this.newUser.password = "";
this.newUser.email = "";
+ this.newUser.roles = []
this.toggleAddUser();
}
},
@@ -135,7 +136,7 @@ export default {
}
return axios.post(
url, {
- query: "query{allUsers{edges{node{username, email, roles{edges{node{name}}}}}}}"
+ query: "query{allUsers{edges{node{username, email, roles{edges{node{name}}}}}},allRoles{edges{node{name, description, users{edges{node{username}}}}}}}"
}).then((res) => {
return {users: res.data.data.allUsers.edges.map(user => {
var rUser = {};
@@ -146,6 +147,14 @@ export default {
});
rUser["password"] = "";
return rUser;
+ }), roles: res.data.data.allRoles.edges.map(role => {
+ var rRole = {};
+ rRole["name"] = role.node.name;
+ rRole["description"] = role.node.description;
+ rRole["users"] = role.node.users.edges.map(user => {
+ return user.node.username;
+ });
+ return rRole;
})}
}).catch((e) => {
console.log(e);
@@ -156,8 +165,8 @@ export default {
data() {
return {
users: [],
- newUser: {username: "", password: "", email: "", roles: ""},
- roles: ["admin", "guest", "cluster-admin"],
+ newUser: {username: "", password: "", email: "", roles: []},
+ roles: [],
addUserButtonVisibility: true,
usernameFormVisibility: false,
userFormVisibility: false,
@@ -166,6 +175,9 @@ export default {
}
},
computed: {
+ roleList(){
+ return this.roles.map( role => {return role.name})
+ },
newUsernameState(){
if (this.newUser.username.length < 2){return false}
return !this.users.find(function(user){