password can be reseted

frontend/src/locales/de.json

@@ -5,6 +5,7 @@
   "logout":"Abmelden",
   "login":"Login",
   "signup": "Registrieren",
+  "reset": "Passwort zurücksetzen",
   "imprint":"Impressum",
   "privacy_policy":"Datenschutzerklärung",
   "members_area": "Mitgliedsbereich",
@@ -110,5 +111,9 @@
       "submit":"Einreichen",
       "hours_report":"Stundenbericht"
     }
+  },
+  "reset-password": {
+    "title": "Passwort Zurücksetzen",
+    "text": "Jetzt kannst du ein neues Passwort speichern, mit dem du dich zukünfitg in der GRADIDO App anmelden kannst."
   }
 }

frontend/src/locales/en.json

@@ -5,6 +5,7 @@
   "logout":"Logout",
   "login":"Login",
   "signup": "Sign up",
+  "reset": "Reset password",
   "imprint":"Legal notice",
   "privacy_policy":"Privacy policy",
   "members_area": "Member's area",
@@ -110,5 +111,9 @@
       "submit":"submit",
       "hours_report":"Hourly report"
     }
+  },
+  "reset-password": {
+    "title": "Reset Password",
+    "text": "Now you can save a new password to login to the GRADIDO App in the future."
   }
 }

frontend/src/views/Pages/Login.vue

@@ -111,7 +111,6 @@ export default {
   methods: {
     async onSubmit() {
       const result = await loginAPI.login(this.model.email, this.model.password)
-      console.log(result.data)
       if (result.success) {
         this.$store.dispatch('login', {
           session_id: result.result.data.session_id,

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

@@ -1,35 +1,30 @@
-import { mount, RouterLinkStub } from '@vue/test-utils'
-import Vuex from 'vuex'
-import flushPromises from 'flush-promises'
+import { mount } from '@vue/test-utils'
+import VueRouter from 'vue-router'
+import routes from '../../routes/routes'
 
 import ResetPassword from './ResetPassword'
 
 const localVue = global.localVue
 
+const router = new VueRouter({ routes })
+
 describe('ResetPassword', () => {
   let wrapper
 
+  let emailVerification = jest.fn()
+
   let mocks = {
     $i18n: {
       locale: 'en',
     },
     $t: jest.fn((t) => t),
-  }
-
-  let state = {
-    // loginfail: false,
-  }
-
-  let store = new Vuex.Store({
-    state,
-  })
-
-  let stubs = {
-    RouterLink: RouterLinkStub,
+    loginAPI: {
+      loginViaEmailVerificationCode: emailVerification,
+    },
   }
 
   const Wrapper = () => {
-    return mount(ResetPassword, { localVue, mocks, store, stubs })
+    return mount(ResetPassword, { localVue, mocks, router })
   }
 
   describe('mount', () => {
@@ -37,7 +32,20 @@ describe('ResetPassword', () => {
       wrapper = Wrapper()
     })
 
-    it('renders the Reset Password form', () => {
+    /*
+    it('calls the email verification when created', () => {
+      const spy = jest.spyOn(wrapper.vm, 'authenticate')
+      expect(spy).toBeCalled()
+    })
+    */
+
+    it('does not render the Reset Password form when not authenticated', async () => {
+      expect(wrapper.find('div.resetpwd-form').exists()).toBeFalsy()
+    })
+
+    it('renders the Reset Password form', async () => {
+      wrapper.setData({ authenticated: true })
+      await wrapper.vm.$nextTick()
       expect(wrapper.find('div.resetpwd-form').exists()).toBeTruthy()
     })
 

frontend/src/views/Pages/ResetPassword.vue

@@ -6,11 +6,8 @@
         <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>Reset Password</h1>
-              <div class="pb-4">
-                Jetzt kannst du ein neues Passwort speichern, mit welchem du dich zukünfitg in der
-                GRADIDO App anmelden kannst.
-              </div>
+              <h1>{{ $t('reset-password.title') }}</h1>
+              <div class="pb-4">{{ $t('reset-password.text') }}</div>
             </b-col>
           </b-row>
         </div>
@@ -78,7 +75,7 @@
                     v-if="passwordsFilled && samePasswords && passwordValidation.valid"
                   >
                     <b-button type="submit" variant="secondary" class="mt-4">
-                      {{ $t('signup') }}
+                      {{ $t('reset') }}
                     </b-button>
                   </div>
                 </b-form>
@@ -108,18 +105,32 @@ export default {
       submitted: false,
       authenticated: false,
       session_id: null,
+      email: null,
     }
   },
   methods: {
     togglePasswordVisibility() {
       this.passwordVisible = !this.passwordVisible
     },
-    onSubmit() {
-      this.$store.dispatch('createUser', {
-        password: this.model.password,
-      })
-      this.model.password = ''
-      this.$router.push('/thx')
+    async onSubmit() {
+      const result = await loginAPI.changePassword(this.session_id, this.email, this.password)
+      if (result.success) {
+        this.password = ''
+        this.$router.push('/thx')
+      } else {
+        alert(result.result.message)
+      }
+    },
+    async authenticate() {
+      const optin = this.$route.params.optin
+      const result = await loginAPI.loginViaEmailVerificationCode(optin)
+      if (result.success) {
+        this.authenticated = true
+        this.session_id = result.result.data.session_id
+        this.email = result.result.data.user.email
+      } else {
+        alert(result.result.message)
+      }
     },
   },
   computed: {
@@ -143,14 +154,7 @@ export default {
     },
   },
   async created() {
-    const optin = this.$route.params.optin
-    const result = await loginAPI.loginViaEmailVerificationCode(optin)
-    if (result.success) {
-      this.authenticated = true
-      this.session_id = result.result.data.session_id
-    } else {
-      alert(result.result.message)
-    }
+    this.authenticate()
   },
 }
 </script>