From f42e850ad0778c147bead82a91d3805c81b66150 Mon Sep 17 00:00:00 2001
From: Jannik Schönartz
Date: Mon, 25 Feb 2019 06:52:15 +0000
Subject: [webapp/user] Add user management module for creating / deleting user
 accounts

---
 webapp/src/components/UserModuleEdit.vue | 95 ++++++++++++++++++++++++++++++++
 1 file changed, 95 insertions(+)
 create mode 100644 webapp/src/components/UserModuleEdit.vue

(limited to 'webapp/src/components/UserModuleEdit.vue')

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>
-- 
cgit v1.2.3-55-g7522

