summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/UserModuleEdit.vue
diff options
context:
space:
mode:
authorJannik Schönartz2019-02-25 07:52:15 +0100
committerJannik Schönartz2019-02-25 07:52:15 +0100
commitf42e850ad0778c147bead82a91d3805c81b66150 (patch)
tree2b5189a7f8a96ca4a15777a06a71581cd1b93ce3 /webapp/src/components/UserModuleEdit.vue
parent[webapp/datatable] small design fixes (diff)
downloadbas-f42e850ad0778c147bead82a91d3805c81b66150.tar.gz
bas-f42e850ad0778c147bead82a91d3805c81b66150.tar.xz
bas-f42e850ad0778c147bead82a91d3805c81b66150.zip
[webapp/user] Add user management module for creating / deleting user accounts
Diffstat (limited to 'webapp/src/components/UserModuleEdit.vue')
-rw-r--r--webapp/src/components/UserModuleEdit.vue95
1 files changed, 95 insertions, 0 deletions
diff --git a/webapp/src/components/UserModuleEdit.vue b/webapp/src/components/UserModuleEdit.vue
new file mode 100644
index 0000000..77be879
--- /dev/null
+++ b/webapp/src/components/UserModuleEdit.vue
@@ -0,0 +1,95 @@
+<i18n>
+{
+ "en": {
+ "titleExisting": "Edit user",
+ "titleNew": "Create user",
+ "userCreated": "User was successfully created."
+ },
+ "de": {
+ "titleExisting": "Benutzer bearbeiten",
+ "titleNew": "Benutzer erstellen",
+ "userCreated": "Benutzer wurde erfolgreich erstellt."
+ }
+}
+</i18n>
+
+<template>
+ <v-card>
+ <v-card-title primary-title class="dialog-title elevation-3">
+ <div class="headline">{{ dialog.info.id ? $t('titleExisting') : $t('titleNew') }}</div>
+ </v-card-title>
+ <v-card-text style="height: 100%;">
+ <div class="edit-user">
+ <signup v-model="user" ref="editComponent" :id="dialog.info.id"></signup>
+ </div>
+ </v-card-text>
+ <v-divider></v-divider>
+ <v-card-actions>
+ <v-spacer></v-spacer>
+ <v-btn flat="flat" @click="setDialog({ show: false })">{{ $t('cancel') }}</v-btn>
+ <v-btn :color="dialog.info.id ? 'primary' : 'success'" @click="saveUser">{{ dialog.info.id ? $t('save') : $t('create') }}</v-btn>
+ </v-card-actions>
+ </v-card>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import signup from '@/components/UserCreateForm'
+
+export default {
+ name: 'UserModuleEdit',
+ components: {
+ signup
+ },
+ data () {
+ return {
+ user: { }
+ }
+ },
+ computed: {
+ ...mapState('users', ['dialog'])
+ },
+ methods: {
+ setDialog (data) {
+ this.$store.commit('users/setDialog', data)
+ },
+ async saveUser () {
+ if (this.$refs.editComponent.validate()) {
+ var url = '/api/users'
+ if (this.dialog.info.id) {
+ url += '/' + this.dialog.info.id
+ }
+ this.$http.post(url, {
+ username: this.user.username,
+ password: this.user.password,
+ name: this.user.name,
+ email: this.user.email
+ }).then(response => {
+ this.$store.dispatch('users/loadData')
+ this.setDialog({ show: false })
+ this.$snackbar({ color: 'success', text: this.$t('userCreated') })
+ }).catch(error => {
+ if (error.response.data.status === 'USER_ALREADY_EXISTS') {
+ this.$refs.editComponent.setUsernameTakenError()
+ }
+ })
+ }
+ }
+ }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.dialog-title {
+ z-index: 1;
+}
+.selected-list {
+ padding: 30px;
+}
+.edit-user {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+</style>