Merge pull request #561 from gradido/change-password-form

fix: Change Password Form

.github/workflows/test.yml

@@ -212,7 +212,7 @@ jobs:
           report_name: Coverage Frontend
           type: lcov
           result_path: ./coverage/lcov.info
-          min_coverage: 31
+          min_coverage: 32
           token: ${{ github.token }}
   
   ##############################################################################

frontend/src/apis/loginAPI.js

@@ -113,8 +113,8 @@ const loginAPI = {
       session_id: sessionId,
       email,
       update: {
-        'User.password': password,
+        'User.password_old': password,
-        'User.passwordNew': passwordNew,
+        'User.password': passwordNew,
       },
     }
     return apiPost(CONFIG.LOGIN_API_URL + 'updateUserInfos', payload)

frontend/src/locales/de.json

@@ -39,6 +39,7 @@
     "password_new":"neues Passwort",
     "password_new_repeat":"neues Passwort wiederholen",
     "change": "ändern",
+    "change-password": "Passwort ändern",
     "amount":"Betrag",
     "memo":"Nachricht für den Empfänger",
     "message":"Nachricht",
@@ -64,7 +65,8 @@
     "change_username_info": "Einmal gespeichert, kann der Username ncht mehr geändert werden!"
   },
   "error": {
-    "error":"Fehler"
+    "error":"Fehler",
+    "change-password": "Fehler beim Ändern des Passworts"
   },
   "transaction":{
     "show_all":"Alle <strong>{count}</strong> Transaktionen ansehen",

frontend/src/locales/en.json

@@ -39,6 +39,7 @@
     "password_new":"New password",
     "password_new_repeat":"Repeat new password",
     "change": "change",
+    "change-password": "Change password",
     "amount":"Amount",
     "memo":"Message for the recipient",
     "message":"Message",
@@ -64,7 +65,8 @@
     "change_username_info": "Once saved, the username cannot be changed again!"
   },
   "error": {
-    "error":"Error"
+    "error":"Error",
+    "change-password": "Error while changing password"
   },
   "transaction":{
     "show_all":"View all <strong>{count}</strong> transactions.",

frontend/src/views/Layout/DashboardLayout_gdd.vue

@@ -144,9 +144,6 @@ export default {
   mounted() {
     this.initScrollbar()
   },
-  created() {
-    this.updateTransactions({ firstPage: 1, items: 5 })
-  },
 }
 </script>
 <style lang="scss">

frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.spec.js

@@ -0,0 +1,127 @@
+import { mount } from '@vue/test-utils'
+import UserCardFormPasswort from './UserCard_FormUserPasswort'
+import loginAPI from '../../../apis/loginAPI'
+// import flushPromises from 'flush-promises'
+
+jest.mock('../../../apis/loginAPI')
+
+const localVue = global.localVue
+
+const changePasswordProfileMock = jest.fn()
+loginAPI.changePasswordProfile = changePasswordProfileMock
+
+const toastSuccessMock = jest.fn()
+const toastErrorMock = jest.fn()
+
+describe('UserCardFormUserPasswort', () => {
+  let wrapper
+
+  const mocks = {
+    $t: jest.fn((t) => t),
+    $store: {
+      state: {
+        sessionId: 1,
+        email: 'user@example.org',
+      },
+    },
+    $toast: {
+      success: toastSuccessMock,
+      error: toastErrorMock,
+    },
+  }
+
+  const Wrapper = () => {
+    return mount(UserCardFormPasswort, { localVue, mocks })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders the component', () => {
+      expect(wrapper.find('div#change_pwd').exists()).toBeTruthy()
+    })
+
+    it('has a change password button', () => {
+      expect(wrapper.find('a').exists()).toBeTruthy()
+    })
+
+    it('has a change password button with text "form.change-password"', () => {
+      expect(wrapper.find('a').text()).toEqual('form.change-password')
+    })
+
+    it('has a change password button with a pencil icon', () => {
+      expect(wrapper.find('svg.bi-pencil').exists()).toBeTruthy()
+    })
+
+    describe('change password from', () => {
+      let form
+
+      beforeEach(async () => {
+        wrapper.find('a').trigger('click')
+        await wrapper.vm.$nextTick()
+        form = wrapper.find('form')
+      })
+
+      it('has a change password form', () => {
+        expect(form.exists()).toBeTruthy()
+      })
+
+      it('has a cancel button', () => {
+        expect(form.find('svg.bi-x-circle').exists()).toBeTruthy()
+      })
+
+      it('closes the form when cancel button is clicked', async () => {
+        form.find('svg.bi-x-circle').trigger('click')
+        await wrapper.vm.$nextTick()
+        expect(wrapper.find('input').exists()).toBeFalsy()
+      })
+
+      it('has three input fields', () => {
+        expect(form.findAll('input')).toHaveLength(3)
+      })
+
+      it('switches the first input type to text when show password is clicked', async () => {
+        form.findAll('button').at(0).trigger('click')
+        await wrapper.vm.$nextTick()
+        expect(form.findAll('input').at(0).attributes('type')).toEqual('text')
+      })
+
+      it('switches the second input type to text when show password is clicked', async () => {
+        form.findAll('button').at(1).trigger('click')
+        await wrapper.vm.$nextTick()
+        expect(form.findAll('input').at(1).attributes('type')).toEqual('text')
+      })
+
+      it('switches the third input type to text when show password is clicked', async () => {
+        form.findAll('button').at(2).trigger('click')
+        await wrapper.vm.$nextTick()
+        expect(form.findAll('input').at(2).attributes('type')).toEqual('text')
+      })
+
+      it('has a submit button', () => {
+        expect(form.find('button[type="submit"]').exists()).toBeTruthy()
+      })
+
+      /*
+      describe('submit', () => {
+        beforeEach(async () => {
+          await form.findAll('input').at(0).setValue('1234')
+          await form.findAll('input').at(1).setValue('Aa123456')
+          await form.findAll('input').at(2).setValue('Aa123456')
+          form.trigger('submit')
+          await wrapper.vm.$nextTick()
+          await flushPromises()
+        })
+
+        it('calls the API', async () => {
+          await wrapper.vm.$nextTick()
+          await flushPromises()
+expect(changePasswordProfileMock).toHaveBeenCalledWith(1, 'user@example.org', '1234', 'Aa123456')
+        })
+      })
+      */
+    })
+  })
+})

frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.vue

@@ -4,14 +4,14 @@
       <b-form @keyup.prevent="loadSubmitButton">
         <b-row class="mb-4 text-right">
           <b-col class="text-right">
-            <a href="#change_pwd" v-if="edit_pwd" @click="edit_pwd = !edit_pwd">
+            <a href="#change_pwd" v-if="!editPassword" @click="editPassword = !editPassword">
-              <span>{{ $t('form.password') }} {{ $t('form.change') }}</span>
+              <span>{{ $t('form.change-password') }}</span>
               <b-icon class="pointer ml-3" icon="pencil" />
             </a>
 
             <b-icon
               v-else
-              @click="edit_pwd = !edit_pwd"
+              @click="cancelEdit()"
               class="pointer"
               icon="x-circle"
               variant="danger"
@@ -19,7 +19,7 @@
           </b-col>
         </b-row>
 
-        <div v-if="!edit_pwd">
+        <div v-if="editPassword">
           <b-row class="mb-5">
             <b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
               <small>{{ $t('form.password_old') }}</small>
@@ -105,7 +105,7 @@
             </b-col>
           </b-row>
 
-          <b-row class="text-right" v-if="!edit_pwd">
+          <b-row class="text-right" v-if="editPassword">
             <b-col>
               <div class="text-right" ref="submitButton">
                 <b-button
@@ -132,7 +132,7 @@ export default {
   name: 'FormUserPasswort',
   data() {
     return {
-      edit_pwd: true,
+      editPassword: false,
       email: null,
       password: '',
       passwordNew: '',
@@ -144,6 +144,12 @@ export default {
     }
   },
   methods: {
+    cancelEdit() {
+      this.editPassword = false
+      this.password = ''
+      this.passwordNew = ''
+      this.passwordNewRepeat = ''
+    },
     togglePasswordVisibilityNewPwd() {
       this.passwordVisibleNewPwd = !this.passwordVisibleNewPwd
     },
@@ -165,19 +171,20 @@ export default {
         this.loading = true
       }
     },
-    async onSubmit() {
+    async onSubmit(event) {
-      // console.log(this.data)
+      event.preventDefault()
       const result = await loginAPI.changePasswordProfile(
         this.$store.state.sessionId,
-        this.email,
+        this.$store.state.email,
         this.password,
         this.passwordNew,
       )
       if (result.success) {
-        alert('changePassword success')
+        this.$toast.success(this.$t('site.thx.reset'))
       } else {
-        alert(result.result.message)
+        this.$toast.error(this.$t('error.change-password'))
       }
+      this.cancelEdit()
     },
   },
   computed: {