profil: api implements edit user profile

2025-12-13 07:45:54 +00:00 · 2021-06-02 16:31:42 +02:00 · 2021-06-02 16:31:42 +02:00 · 178a03eca3
commit 178a03eca3
parent 616c0fdab2
8 changed files with 133 additions and 78 deletions
--- a/frontend/src/apis/loginAPI.js
+++ b/frontend/src/apis/loginAPI.js
@ -78,6 +78,47 @@ const loginAPI = {
      CONFIG.LOGIN_API_URL + 'loginViaEmailVerificationCode?emailVerificationCode=' + optin,
    )
  },
+  getUserInfos: async (sessionId, email) => {
+    const payload = {
+      session_id: sessionId,
+      email: email,
+      ask: ['user.first_name', 'user.last_name'],
+    }
+    return apiPost(CONFIG.LOGIN_API_URL + 'getUserInfos', payload)
+  },
+  updateUserInfos: async (sessionId, email, firstName, lastName /*, description */) => {
+    const payload = {
+      session_id: sessionId,
+      email,
+      update: {
+        'User.first_name': firstName,
+        'User.last_name': lastName,
+        /* 'User.description': description, */
+      },
+    }
+    return apiPost(CONFIG.LOGIN_API_URL + 'updateUserInfos', payload)
+  },
+
+  //  `POST http://localhost/login_api/getUserInfos`
+  //
+  // with:
+  //
+  // ```json
+  // {
+  //	"session_id": -127182,
+  //	"email": "max.musterman@gmail.de",
+  //	"ask": [
+  //		"EmailVerificationCode.Register",
+  //		"loginServer.path",
+  //		"user.pubkeyhex",
+  //		"user.first_name",
+  //		"user.last_name",
+  //		"user.disabled",
+  //		"user.email_checked",
+  //		"user.language"
+  //  	]
+  // }
+
  changePassword: async (sessionId, email, password) => {
    const payload = {
      session_id: sessionId,
@ -99,16 +140,6 @@ const loginAPI = {
    }
    return apiPost(CONFIG.LOGIN_API_URL + 'updateUserInfos', payload)
  },
-  changeEmailProfil: async (sessionId, email, emailNew) => {
-    const payload = {
-      session_id: sessionId,
-      email,
-      update: {
-        'User.emailNew': emailNew,
-      },
-    }
-    return apiPost(CONFIG.LOGIN_API_URL + 'updateUserInfos', payload)
-  },
  changeUsernameProfil: async (sessionId, email, usernameNew) => {
    const payload = {
      session_id: sessionId,
@ -129,18 +160,6 @@ const loginAPI = {
    }
    return apiPost(CONFIG.LOGIN_API_URL + 'updateUserInfos', payload)
  },
-  updateUserdata: async (sessionId, email, firstName, lastName, description) => {
-    const payload = {
-      session_id: sessionId,
-      email,
-      update: {
-        'User.first_name': firstName,
-        'User.last_name': lastName,
-        'User.description': description,
-      },
-    }
-    return apiPost(CONFIG.LOGIN_API_URL + 'updateUserInfos', payload)
-  },
 }

 export default loginAPI
--- a/frontend/src/store/store.js
+++ b/frontend/src/store/store.js
@ -13,6 +13,10 @@ export const mutations = {
  sessionId: (state, sessionId) => {
    state.sessionId = sessionId
  },
+  username: (state, username) => {
+    // console.log('store username mutation', username)
+    state.username = username
+  },
 }

 export const actions = {
@ -20,10 +24,12 @@ export const actions = {
    commit('sessionId', data.sessionId)
    commit('email', data.user.email)
    commit('language', data.user.language)
+    commit('username', data.user.username ? '' : 'teststoreusername')
  },
  logout: ({ commit, state }) => {
    commit('sessionId', null)
    commit('email', null)
+    commit('username', null)
    sessionStorage.clear()
  },
 }
@ -39,6 +45,7 @@ export const store = new Vuex.Store({
    email: '',
    language: null,
    modals: false,
+    username: 'testname',
  },
  getters: {},
  // Syncronous mutation of the state
--- a/frontend/src/store/store.test.js
+++ b/frontend/src/store/store.test.js
@ -40,7 +40,7 @@ describe('Vuex store', () => {
          { commit, state },
          { sessionId: 1234, user: { email: 'someone@there.is', language: 'en' } },
        )
-        expect(commit).toHaveBeenCalledTimes(3)
+        expect(commit).toHaveBeenCalledTimes(4)
      })

      it('commits sessionId', () => {
@ -74,7 +74,7 @@ describe('Vuex store', () => {

      it('calls two commits', () => {
        logout({ commit, state })
-        expect(commit).toHaveBeenCalledTimes(2)
+        expect(commit).toHaveBeenCalledTimes(3)
      })

      it('commits sessionId', () => {
--- a/frontend/src/views/Layout/DashboardLayout_gdd.vue
+++ b/frontend/src/views/Layout/DashboardLayout_gdd.vue
@ -87,8 +87,6 @@ export default {
      pending: true,
      UserProfileTestData: {
        username: 'Mustermax',
-        name: 'Max',
-        lastname: 'Mustermann',
        desc:
          'Max Mustermann seine Beschreibung. Max Mustermann seine Beschreibung. Max Mustermann seine Beschreibung. Max Mustermann seine Beschreibung. ',
      },
--- a/frontend/src/views/Pages/UserProfile/UserCard.vue
+++ b/frontend/src/views/Pages/UserProfile/UserCard.vue
@ -14,7 +14,7 @@
            <span class="description">GDD</span>
          </div>
          <div>
-            <span class="heading">{{ $n(transactionCount) }}</span>
+            <span class="heading">{{ transactionCount }}</span>
            <span class="description">{{ $t('transactions') }}</span>
          </div>
          <div>
--- a/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue
+++ b/frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue
@ -25,10 +25,10 @@
            <small>{{ $t('form.firstname') }}</small>
          </b-col>
          <b-col v-if="edit_userdata" class="col-md-9 col-sm-10">
-            {{ UserProfileTestData.name }}
+            {{ userdata.first_name }}
          </b-col>
          <b-col v-else class="col-md-9 col-sm-10">
-            <b-input type="text" v-model="name"></b-input>
+            <b-input type="text" v-model="form.first_name"></b-input>
          </b-col>
        </b-row>
        <b-row class="mb-3">
@ -36,10 +36,10 @@
            <small>{{ $t('form.lastname') }}</small>
          </b-col>
          <b-col v-if="edit_userdata" class="col-md-9 col-sm-10">
-            {{ UserProfileTestData.lastname }}
+            {{ userdata.last_name }}
          </b-col>
          <b-col v-else class="col-md-9 col-sm-10">
-            <b-input type="text" v-model="lastname"></b-input>
+            <b-input type="text" v-model="form.last_name"></b-input>
          </b-col>
        </b-row>
        <b-row class="mb-3">
@ -50,12 +50,7 @@
            {{ UserProfileTestData.desc }}
          </b-col>
          <b-col v-else class="col-md-9 col-sm-10">
-            <b-textarea
-              rows="3"
-              max-rows="6"
-              placeholder="UserProfileTestData.dec"
-              v-model="dec"
-            ></b-textarea>
+            <b-textarea rows="3" max-rows="6" v-model="form.desc"></b-textarea>
          </b-col>
        </b-row>
      </div>
@ -63,39 +58,37 @@
  </b-card>
 </template>
 <script>
-import loginAPI from '../../../apis/loginAPI'
-
 export default {
  name: 'FormUserData',
-
+  props: {
+    userdata: { type: Object },
+    UserProfileTestData: { type: Object },
+  },
  data() {
    return {
      edit_userdata: true,
      sessionId: null,
      email: null,
-      name: this.UserProfileTestData.name,
-      lastname: this.UserProfileTestData.lastname,
-      desc: this.UserProfileTestData.desc,
+      form: {
+        first_name: this.userdata.first_name,
+        last_name: this.userdata.last_name,
+        desc: this.UserProfileTestData.desc,
+      },
    }
  },
-  props: {
-    UserProfileTestData: { type: Object },
-  },
  methods: {
    async onSubmit() {
-      // console.log(this.$props.UserProfileTestData)
-      const result = await loginAPI.updateUserdata(
-        this.sessionId,
-        this.email,
-        this.name,
-        this.lastname,
-        this.desc,
-      )
-      if (result.success) {
-        alert('updateUserdata success')
-      } else {
-        alert(result.result.message)
-      }
+      // this.$emit('update-userdata')
+      // console.log("form name:", this.first_name)
+      // console.log("form nachname:", this.last_name)
+      // console.log("form desc:", this.desc)
+      //  if (result.success) {
+      //    console.log("updateUserdata success")
+      //    console.log(result)
+      //
+      //  } else {
+      //    alert(result.result.message)
+      //  }
    },
  },
 }
--- a/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue
+++ b/frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue
@ -7,9 +7,6 @@
            <span>{{ $t('form.username') }} {{ $t('form.change') }}</span>
          </a>
          <div v-else>
-            <a href="#formusername" @click="onSubmit">
-              <span class="mr-4 text-success display-4">{{ $t('form.save') }}</span>
-            </a>
            <a href="#formusername" @click="edit_username = !edit_username">
              <span>
                <b>{{ $t('form.cancel') }}</b>
@ -23,12 +20,21 @@
        <b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
          <small>{{ $t('form.username') }}</small>
        </b-col>
-        <b-col v-if="edit_username" class="col-md-9 col-sm-10">@{{ username }}</b-col>
+        <b-col v-if="edit_username" class="col-md-9 col-sm-10">@{{ $store.state.username }}</b-col>
        <b-col v-else class="col-md-9 col-sm-10">
-          <b-input type="text" v-model="this.username"></b-input>
-          <div>
-            {{ $t('form.change_username_info') }}
-          </div>
+          <validation-observer v-slot="{ handleSubmit }" ref="formValidator">
+            <b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
+              <b-form-input v-model="username" :placeholder="$store.state.username"></b-form-input>
+              <div>
+                {{ $t('form.change_username_info') }}
+              </div>
+              <div class="text-center" ref="submitButton">
+                <b-button type="submit" class="mt-4">
+                  {{ $t('form.save') }}
+                </b-button>
+              </div>
+            </b-form>
+          </validation-observer>
        </b-col>
      </b-row>
    </b-container>
@ -42,12 +48,9 @@ export default {
  data() {
    return {
      edit_username: true,
-      username: this.UserProfileTestData.username,
+      username: '',
    }
  },
-  props: {
-    UserProfileTestData: { type: Object },
-  },
  methods: {
    async onSubmit() {
      // console.log(this.data)
--- a/frontend/src/views/Pages/UserProfileOverview.vue
+++ b/frontend/src/views/Pages/UserProfileOverview.vue
@ -1,17 +1,19 @@
 <template>
  <b-container fluid>
    <user-card :balance="balance" :transactionCount="transactionCount"></user-card>
-
-    <form-user-data :UserProfileTestData="UserProfileTestData" />
-    <form-username :UserProfileTestData="UserProfileTestData" />
-    <form-user-mail />
+    <form-user-data
+      :userdata="userdata"
+      @update-userdata="updateUserdata"
+      :UserProfileTestData="UserProfileTestData"
+    />
+    <form-username />
    <form-user-passwort />
  </b-container>
 </template>
 <script>
+import loginAPI from '../../apis/loginAPI'
 import UserCard from './UserProfile/UserCard.vue'
 import FormUserData from './UserProfile/UserCard_FormUserData.vue'
-import FormUserMail from './UserProfile/UserCard_FormUserMail.vue'
 import FormUsername from './UserProfile/UserCard_FormUsername.vue'
 import FormUserPasswort from './UserProfile/UserCard_FormUserPasswort.vue'

@ -19,7 +21,6 @@ export default {
  components: {
    UserCard,
    FormUserData,
-    FormUserMail,
    FormUsername,
    FormUserPasswort,
  },
@ -28,7 +29,41 @@ export default {
    transactionCount: { type: Number, default: 0 },
    UserProfileTestData: { type: Object },
  },
-  methods: {},
+  data() {
+    return {
+      userdata: {},
+    }
+  },
+  methods: {
+    async getUserdata() {
+      const result = await loginAPI.getUserInfos(
+        this.$store.state.sessionId,
+        this.$store.state.email,
+      )
+      // console.log(result.result.data.userData)
+      if (result.success) {
+        this.userdata = result.result.data.userData
+      } else {
+        alert(result.result.message)
+      }
+    },
+    async updateUserdata(data) {
+      // console.log(data)
+      const result = await loginAPI.updateUserInfos(
+        this.$store.state.sessionId,
+        this.$store.state.email,
+      )
+      // console.log(result)
+      if (result.success) {
+        alert(result)
+      } else {
+        alert(result.result.message)
+      }
+    },
+  },
+  async created() {
+    this.getUserdata()
+  },
 }
 </script>
 <style></style>