Merge pull request #606 from gradido/refactor-reset-password

refactor: Reset Password Page

.github/workflows/test.yml

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

frontend/src/locales/de.json

@@ -141,6 +141,7 @@
   },
   "reset-password": {
     "title": "Passwort zurücksetzen",
-    "text": "Jetzt kannst du ein neues Passwort speichern, mit dem du dich zukünftig in der Gradido-App anmelden kannst."
+    "text": "Jetzt kannst du ein neues Passwort speichern, mit dem du dich zukünftig in der Gradido-App anmelden kannst.",
+    "not-authenticated": "Leider konnten wir dich nicht authentifizieren. Bitte wende dich an den Support."
   }
 }

frontend/src/locales/en.json

@@ -142,6 +142,7 @@
   },
   "reset-password": {
     "title": "Reset Password",
-    "text": "Now you can save a new password to login to the Gradido-App in the future."
+    "text": "Now you can save a new password to login to the Gradido-App in the future.",
+    "not-authenticated": "Unfortunately we could not authenticate you. Please contact the support."
   }
 }

frontend/src/main.js

@@ -2,8 +2,7 @@ import Vue from 'vue'
 import DashboardPlugin from './plugins/dashboard-plugin'
 import App from './App.vue'
 import i18n from './i18n.js'
-// eslint-disable-next-line no-unused-vars
+import './validation-rules'
-import validationRules from './validation-rules'
 
 import { store } from './store/store'
 

frontend/src/views/Pages/Login.spec.js

@@ -131,7 +131,7 @@ describe('Login', () => {
           await wrapper.find('form').trigger('submit')
           await flushPromises()
           expect(wrapper.findAll('div.invalid-feedback').at(1).text()).toBe(
-            'The password field is required',
+            'The form.password field is required',
           )
         })
       })

frontend/src/views/Pages/Login.vue

@@ -27,6 +27,7 @@
                   <input-password
                     :label="$t('form.password')"
                     :placeholder="$t('form.password')"
+                    :name="$t('form.password')"
                     v-model="form.password"
                   ></input-password>
                   <div class="text-center mt-4">

frontend/src/views/Pages/ResetPassword.spec.js

@@ -2,6 +2,23 @@ import { mount, RouterLinkStub } from '@vue/test-utils'
 import loginAPI from '../../apis/loginAPI'
 import ResetPassword from './ResetPassword'
 import flushPromises from 'flush-promises'
+import { extend } from 'vee-validate'
+
+const rules = [
+  'containsLowercaseCharacter',
+  'containsUppercaseCharacter',
+  'containsNumericCharacter',
+  'atLeastEightCharactera',
+  'samePassword',
+]
+
+rules.forEach((rule) => {
+  extend(rule, {
+    validate(value) {
+      return true
+    },
+  })
+})
 
 jest.mock('../../apis/loginAPI')
 
@@ -28,6 +45,7 @@ emailVerificationMock
   .mockReturnValueOnce({ success: false, result: { message: 'error' } })
   .mockReturnValueOnce({ success: false, result: { message: 'error' } })
   .mockReturnValueOnce({ success: false, result: { message: 'error' } })
+  .mockReturnValueOnce({ success: false, result: { message: 'error' } })
   .mockReturnValue(successResponseObject)
 
 changePasswordMock
@@ -81,36 +99,39 @@ describe('ResetPassword', () => {
     })
 
     it('does not render the Reset Password form when not authenticated', () => {
-      expect(wrapper.find('div.resetpwd-form').exists()).toBeFalsy()
+      expect(wrapper.find('form').exists()).toBeFalsy()
     })
 
     it('toasts an error when no valid optin is given', () => {
       expect(toasterMock).toHaveBeenCalledWith('error')
     })
 
+    it('has a message suggesting to contact the support', () => {
+      expect(wrapper.find('div.header').text()).toContain('reset-password.title')
+      expect(wrapper.find('div.header').text()).toContain('reset-password.not-authenticated')
+    })
+
     it('renders the Reset Password form when authenticated', async () => {
-      wrapper.setData({ authenticated: true })
+      await wrapper.setData({ authenticated: true })
-      await wrapper.vm.$nextTick()
       expect(wrapper.find('div.resetpwd-form').exists()).toBeTruthy()
     })
 
     describe('Register header', () => {
       it('has a welcome message', () => {
-        expect(wrapper.find('div.header').text()).toBe('reset-password.title reset-password.text')
+        expect(wrapper.find('div.header').text()).toContain('reset-password.title')
+        expect(wrapper.find('div.header').text()).toContain('reset-password.text')
       })
     })
 
-    /* there is no back button, why?
     describe('links', () => {
       it('has a link "Back"', () => {
         expect(wrapper.findAllComponents(RouterLinkStub).at(0).text()).toEqual('back')
       })
 
       it('links to /login when clicking "Back"', () => {
-        expect(wrapper.findAllComponents(RouterLinkStub).at(0).props().to).toBe('/login')
+        expect(wrapper.findAllComponents(RouterLinkStub).at(0).props().to).toBe('/Login')
       })
     })
-    */
 
     describe('reset password form', () => {
       it('has a register form', () => {
@@ -121,10 +142,6 @@ describe('ResetPassword', () => {
         expect(wrapper.findAll('input[type="password"]').length).toBe(2)
       })
 
-      it('has no submit button when not completely filled', () => {
-        expect(wrapper.find('button[type="submit"]').exists()).toBe(false)
-      })
-
       it('toggles the first input field to text when eye icon is clicked', async () => {
         wrapper.findAll('button').at(0).trigger('click')
         await wrapper.vm.$nextTick()
@@ -140,23 +157,20 @@ describe('ResetPassword', () => {
 
     describe('submit form', () => {
       beforeEach(async () => {
-        wrapper.findAll('input').at(0).setValue('Aa123456')
+        await wrapper.findAll('input').at(0).setValue('Aa123456')
-        wrapper.findAll('input').at(1).setValue('Aa123456')
+        await wrapper.findAll('input').at(1).setValue('Aa123456')
-        await wrapper.vm.$nextTick()
         await flushPromises()
-        wrapper.find('form').trigger('submit')
+        await wrapper.find('form').trigger('submit')
       })
 
       describe('server response with error', () => {
-        it('toasts an error message', async () => {
+        it('toasts an error message', () => {
           expect(toasterMock).toHaveBeenCalledWith('error')
         })
       })
 
       describe('server response with success', () => {
-        it('calls the API', async () => {
+        it('calls the API', () => {
-          await wrapper.vm.$nextTick()
-          await flushPromises()
           expect(changePasswordMock).toHaveBeenCalledWith(1, 'user@example.org', 'Aa123456')
         })
 

frontend/src/views/Pages/ResetPassword.vue

@@ -1,102 +1,34 @@
 <template>
-  <div class="resetpwd-form" v-if="authenticated">
+  <div class="resetpwd-form">
-    <!-- Header -->
+    <b-container>
-    <div class="header p-4">
+      <div class="header p-4" ref="header">
-      <b-container class="container">
         <div class="header-body text-center mb-7">
           <b-row class="justify-content-center">
             <b-col xl="5" lg="6" md="8" class="px-2">
               <h1>{{ $t('reset-password.title') }}</h1>
-              <div class="pb-4">{{ $t('reset-password.text') }}</div>
+              <div class="pb-4" v-if="!pending">
+                <span v-if="authenticated">
+                  {{ $t('reset-password.text') }}
+                </span>
+                <span v-else>
+                  {{ $t('reset-password.not-authenticated') }}
+                </span>
+              </div>
             </b-col>
           </b-row>
         </div>
-      </b-container>
+      </div>
-    </div>
+    </b-container>
-    <!-- Page content -->
     <b-container class="mt--8 p-1">
-      <!-- Table -->
+      <b-row class="justify-content-center" v-if="authenticated">
-      <b-row class="justify-content-center">
         <b-col lg="6" md="8">
           <b-card no-body class="border-0" style="background-color: #ebebeba3 !important">
             <b-card-body class="p-4">
               <validation-observer ref="observer" v-slot="{ handleSubmit }">
                 <b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
-                  <validation-provider
+                  <input-password-confirmation v-model="form" />
-                    :name="$t('form.password')"
+                  <div class="text-center">
-                    :rules="{ required: true }"
+                    <b-button type="submit" variant="primary" class="mt-4">
-                    v-slot="validationContext"
-                  >
-                    <b-form-group
-                      class="mb-5"
-                      :label="$t('form.password')"
-                      label-for="resetPassword"
-                    >
-                      <b-input-group>
-                        <b-form-input
-                          id="resetPassword"
-                          :name="$t('form.password')"
-                          v-model="form.password"
-                          :placeholder="$t('form.password')"
-                          :type="passwordVisible ? 'text' : 'password'"
-                          :state="getValidationState(validationContext)"
-                          aria-describedby="resetPasswordLiveFeedback"
-                        ></b-form-input>
-
-                        <b-input-group-append>
-                          <b-button variant="outline-primary" @click="togglePasswordVisibility">
-                            <b-icon :icon="passwordVisible ? 'eye' : 'eye-slash'" />
-                          </b-button>
-                        </b-input-group-append>
-                      </b-input-group>
-                      <b-form-invalid-feedback id="resetPasswordLiveFeedback">
-                        {{ validationContext.errors[0] }}
-                      </b-form-invalid-feedback>
-                    </b-form-group>
-                  </validation-provider>
-
-                  <b-form-group
-                    class="mb-5"
-                    :label="$t('form.passwordRepeat')"
-                    label-for="resetPasswordRepeat"
-                  >
-                    <b-input-group>
-                      <b-form-input
-                        id="resetPasswordRepeat"
-                        :name="$t('form.passwordRepeat')"
-                        v-model.lazy="form.passwordRepeat"
-                        :placeholder="$t('form.passwordRepeat')"
-                        :type="passwordVisibleRepeat ? 'text' : 'password'"
-                      ></b-form-input>
-
-                      <b-input-group-append>
-                        <b-button variant="outline-primary" @click="togglePasswordRepeatVisibility">
-                          <b-icon :icon="passwordVisibleRepeat ? 'eye' : 'eye-slash'" />
-                        </b-button>
-                      </b-input-group-append>
-                    </b-input-group>
-                  </b-form-group>
-
-                  <transition name="hint" appear>
-                    <div v-if="passwordValidation.errors.length > 0 && !submitted" class="hints">
-                      <ul>
-                        <li v-for="error in passwordValidation.errors" :key="error">
-                          <small>{{ error }}</small>
-                        </li>
-                      </ul>
-                    </div>
-                    <div class="matches" v-else-if="!samePasswords">
-                      <p>
-                        {{ $t('site.signup.dont_match') }}
-                        <i class="ni ni-active-40" color="danger"></i>
-                      </p>
-                    </div>
-                  </transition>
-                  <div
-                    class="text-center"
-                    v-if="passwordsFilled && samePasswords && passwordValidation.valid"
-                  >
-                    <b-button type="submit" variant="secondary" class="mt-4">
                       {{ $t('reset') }}
                     </b-button>
                   </div>
@@ -106,38 +38,36 @@
           </b-card>
         </b-col>
       </b-row>
+      <b-row>
+        <b-col class="text-center py-lg-4">
+          <router-link to="/Login" class="mt-3">{{ $t('back') }}</router-link>
+        </b-col>
+      </b-row>
     </b-container>
   </div>
 </template>
 <script>
 import loginAPI from '../../apis/loginAPI'
+import InputPasswordConfirmation from '../../components/Inputs/InputPasswordConfirmation'
+
 export default {
-  name: 'reset',
+  name: 'ResetPassword',
+  components: {
+    InputPasswordConfirmation,
+  },
   data() {
     return {
       form: {
         password: '',
         passwordRepeat: '',
       },
-      password: '',
-      passwordVisible: false,
-      passwordVisibleRepeat: false,
-      submitted: false,
       authenticated: false,
       sessionId: null,
       email: null,
+      pending: true,
     }
   },
   methods: {
-    getValidationState({ dirty, validated, valid = null }) {
-      return dirty || validated ? valid : null
-    },
-    togglePasswordVisibility() {
-      this.passwordVisible = !this.passwordVisible
-    },
-    togglePasswordRepeatVisibility() {
-      this.passwordVisibleRepeat = !this.passwordVisibleRepeat
-    },
     async onSubmit() {
       const result = await loginAPI.changePassword(this.sessionId, this.email, this.form.password)
       if (result.success) {
@@ -155,7 +85,7 @@ export default {
     },
     async authenticate() {
       const loader = this.$loading.show({
-        container: this.$refs.submitButton,
+        container: this.$refs.header,
       })
       const optin = this.$route.params.optin
       const result = await loginAPI.loginViaEmailVerificationCode(optin)
@@ -167,37 +97,10 @@ export default {
         this.$toast.error(result.result.message)
       }
       loader.hide()
+      this.pending = false
     },
   },
-  computed: {
+  mounted() {
-    samePasswords() {
-      return this.form.password === this.form.passwordRepeat
-    },
-    passwordsFilled() {
-      return this.form.password !== '' && this.form.passwordRepeat !== ''
-    },
-    rules() {
-      return [
-        { message: this.$t('site.signup.lowercase'), regex: /[a-z]+/ },
-        { message: this.$t('site.signup.uppercase'), regex: /[A-Z]+/ },
-        { message: this.$t('site.signup.minimum'), regex: /.{8,}/ },
-        { message: this.$t('site.signup.one_number'), regex: /[0-9]+/ },
-      ]
-    },
-    passwordValidation() {
-      const errors = []
-      for (const condition of this.rules) {
-        if (!condition.regex.test(this.form.password)) {
-          errors.push(condition.message)
-        }
-      }
-      if (errors.length === 0) {
-        return { valid: true, errors }
-      }
-      return { valid: false, errors }
-    },
-  },
-  async created() {
     this.authenticate()
   },
 }

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

@@ -0,0 +1,169 @@
+import { mount } from '@vue/test-utils'
+import UserCardFormUserData from './UserCard_FormUserData'
+import loginAPI from '../../../apis/loginAPI'
+import flushPromises from 'flush-promises'
+
+jest.mock('../../../apis/loginAPI')
+
+const localVue = global.localVue
+
+const mockAPIcall = jest.fn((args) => {
+  return { success: true }
+})
+
+const toastErrorMock = jest.fn()
+const toastSuccessMock = jest.fn()
+const storeCommitMock = jest.fn()
+
+loginAPI.updateUserInfos = mockAPIcall
+
+describe('UserCard_FormUsername', () => {
+  let wrapper
+
+  const mocks = {
+    $t: jest.fn((t) => t),
+    $store: {
+      state: {
+        sessionId: 1,
+        email: 'user@example.org',
+        firstName: 'Peter',
+        lastName: 'Lustig',
+        description: '',
+      },
+      commit: storeCommitMock,
+    },
+    $toast: {
+      success: toastSuccessMock,
+      error: toastErrorMock,
+    },
+  }
+
+  const Wrapper = () => {
+    return mount(UserCardFormUserData, { localVue, mocks })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders the component', () => {
+      expect(wrapper.find('div#userdata_form').exists()).toBeTruthy()
+    })
+
+    it('has an edit icon', () => {
+      expect(wrapper.find('svg.bi-pencil').exists()).toBeTruthy()
+    })
+
+    it('renders the first name', () => {
+      expect(wrapper.findAll('div.col').at(2).text()).toBe('Peter')
+    })
+
+    it('renders the last name', () => {
+      expect(wrapper.findAll('div.col').at(4).text()).toBe('Lustig')
+    })
+
+    it('renders the description', () => {
+      expect(wrapper.findAll('div.col').at(6).text()).toBe('')
+    })
+
+    describe('edit user data', () => {
+      beforeEach(async () => {
+        await wrapper.find('svg.bi-pencil').trigger('click')
+      })
+
+      it('shows an cancel icon', () => {
+        expect(wrapper.find('svg.bi-x-circle').exists()).toBeTruthy()
+      })
+
+      it('closes the input when cancel icon is clicked', async () => {
+        await wrapper.find('svg.bi-x-circle').trigger('click')
+        expect(wrapper.find('input').exists()).toBeFalsy()
+      })
+
+      it('does not change the userdate when cancel is clicked', async () => {
+        await wrapper.findAll('input').at(0).setValue('Petra')
+        await wrapper.findAll('input').at(1).setValue('Lustiger')
+        await wrapper.find('textarea').setValue('Keine Nickelbrille')
+        await wrapper.find('svg.bi-x-circle').trigger('click')
+        expect(wrapper.findAll('div.col').at(2).text()).toBe('Peter')
+        expect(wrapper.findAll('div.col').at(4).text()).toBe('Lustig')
+        expect(wrapper.findAll('div.col').at(6).text()).toBe('')
+      })
+
+      it('has a submit button', () => {
+        expect(wrapper.find('button[type="submit"]').exists()).toBeTruthy()
+      })
+
+      it('does not enable submit button when data is not changed', async () => {
+        await wrapper.find('form').trigger('keyup')
+        expect(wrapper.find('button[type="submit"]').attributes('disabled')).toBe('disabled')
+      })
+
+      describe('successfull submit', () => {
+        beforeEach(async () => {
+          jest.clearAllMocks()
+          await wrapper.findAll('input').at(0).setValue('Petra')
+          await wrapper.findAll('input').at(1).setValue('Lustiger')
+          await wrapper.find('textarea').setValue('Keine Nickelbrille')
+          await wrapper.find('form').trigger('keyup')
+          await wrapper.find('button[type="submit"]').trigger('click')
+          await flushPromises()
+        })
+
+        it('calls the loginAPI', () => {
+          expect(mockAPIcall).toBeCalledWith(1, 'user@example.org', {
+            firstName: 'Petra',
+            lastName: 'Lustiger',
+            description: 'Keine Nickelbrille',
+          })
+        })
+
+        it('commits firstname to store', () => {
+          expect(storeCommitMock).toBeCalledWith('firstName', 'Petra')
+        })
+
+        it('commits lastname to store', () => {
+          expect(storeCommitMock).toBeCalledWith('lastName', 'Lustiger')
+        })
+
+        it('commits description to store', () => {
+          expect(storeCommitMock).toBeCalledWith('description', 'Keine Nickelbrille')
+        })
+
+        it('toasts a success message', () => {
+          expect(toastSuccessMock).toBeCalledWith('site.profil.user-data.change-success')
+        })
+
+        it('has an edit button again', () => {
+          expect(wrapper.find('svg.bi-pencil').exists()).toBeTruthy()
+        })
+      })
+
+      describe('submit results in server error', () => {
+        beforeEach(async () => {
+          jest.clearAllMocks()
+          mockAPIcall.mockReturnValue({ success: false, result: { message: 'Error' } })
+          await wrapper.findAll('input').at(0).setValue('Petra')
+          await wrapper.findAll('input').at(1).setValue('Lustiger')
+          await wrapper.find('textarea').setValue('Keine Nickelbrille')
+          await wrapper.find('form').trigger('keyup')
+          await wrapper.find('button[type="submit"]').trigger('click')
+          await flushPromises()
+        })
+
+        it('calls the loginAPI', () => {
+          expect(mockAPIcall).toBeCalledWith(1, 'user@example.org', {
+            firstName: 'Petra',
+            lastName: 'Lustiger',
+            description: 'Keine Nickelbrille',
+          })
+        })
+
+        it('toasts an error message', () => {
+          expect(toastErrorMock).toBeCalledWith('Error')
+        })
+      })
+    })
+  })
+})

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

@@ -24,6 +24,10 @@ const mockAPIcall = jest.fn((args) => {
   return { success: true }
 })
 
+const toastErrorMock = jest.fn()
+const toastSuccessMock = jest.fn()
+const storeCommitMock = jest.fn()
+
 loginAPI.changeUsernameProfile = mockAPIcall
 
 describe('UserCard_FormUsername', () => {
@@ -37,10 +41,11 @@ describe('UserCard_FormUsername', () => {
         email: 'user@example.org',
         username: '',
       },
-      commit: jest.fn(),
+      commit: storeCommitMock,
     },
     $toast: {
-      success: jest.fn(),
+      success: toastSuccessMock,
+      error: toastErrorMock,
     },
   }
 
@@ -111,10 +116,43 @@ describe('UserCard_FormUsername', () => {
             expect(wrapper.find('div.display-username').text()).toEqual('@username')
           })
 
+          it('commits the username to the store', () => {
+            expect(storeCommitMock).toBeCalledWith('username', 'username')
+          })
+
+          it('toasts an success message', () => {
+            expect(toastSuccessMock).toBeCalledWith('site.profil.user-data.change-success')
+          })
+
           it('has no edit button anymore', () => {
             expect(wrapper.find('svg.bi-pencil').exists()).toBeFalsy()
           })
         })
+
+        describe('submit retruns error', () => {
+          beforeEach(async () => {
+            jest.clearAllMocks()
+            mockAPIcall.mockReturnValue({
+              success: false,
+              result: { message: 'Error' },
+            })
+            await wrapper.find('input[placeholder="Username"]').setValue('username')
+            await wrapper.find('form').trigger('submit')
+            await flushPromises()
+          })
+
+          it('calls the loginAPI', () => {
+            expect(mockAPIcall).toHaveBeenCalledWith(1, 'user@example.org', 'username')
+          })
+
+          it('toasts an error message', () => {
+            expect(toastErrorMock).toBeCalledWith('Error')
+          })
+
+          it('renders an empty username', () => {
+            expect(wrapper.find('div.display-username').text()).toEqual('@')
+          })
+        })
       })
     })
   })