Merge pull request #212 from gradido/reset-password

feat: Reset Password

configs/login_server/grd_login.properties

@@ -22,7 +22,7 @@ loginServer.db.user = root
 loginServer.db.password = 
 loginServer.db.port = 3306
 
-frontend.checkEmailPath = http://localhost/account/checkEmail
+frontend.checkEmailPath = http://localhost/reset
 
 email.disable = true
 

frontend/src/apis/loginAPI.js

@@ -64,7 +64,6 @@ const loginAPI = {
     return apiPost(CONFIG.LOGIN_API_URL + 'createUser', payload)
   },
   sendEmail: async (email, email_text = 7, email_verification_code_type = 'resetPassword') => {
-    //console.log('api email', email)
     const payload = {
       email,
       email_text,
@@ -72,6 +71,21 @@ const loginAPI = {
     }
     return apiPost(CONFIG.LOGIN_API_URL + 'sendEmail', payload)
   },
+  loginViaEmailVerificationCode: async (optin) => {
+    return apiGet(
+      CONFIG.LOGIN_API_URL + 'loginViaEmailVerificationCode?emailVerificationCode=' + optin,
+    )
+  },
+  changePassword: async (session_id, email, password) => {
+    const payload = {
+      session_id,
+      email,
+      update: {
+        'User.password': password,
+      },
+    }
+    return apiPost(CONFIG.LOGIN_API_URL + 'updateUserInfos', payload)
+  },
 }
 
 export default loginAPI

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/routes/routes.js

@@ -59,7 +59,7 @@ const routes = [
     component: () => import('../views/Pages/ForgotPassword.vue'),
   },
   {
-    path: '/reset',
+    path: '/reset/:optin',
     component: () => import('../views/Pages/ResetPassword.vue'),
   },
   { path: '*', component: NotFound },

frontend/src/views/Pages/Login.vue

@@ -53,7 +53,7 @@
                           </strong>
                         </b-col>
                         <b-col class="text-right">
-                          <a href="#!" @click="closeAlert">
+                          <a @click="closeAlert">
                             <div>
                               <b-icon-exclamation-triangle-fill
                                 class="h2 mb-0"
@@ -88,9 +88,6 @@
               </router-link>
             </b-col>
           </b-row>
-          <b-row>
-            <b-col><router-link to="/reset">reset</router-link></b-col>
-          </b-row>
         </b-col>
       </b-row>
     </b-container>

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

@@ -1,16 +1,13 @@
 <template>
-  <div class="resetpwd-form">
+  <div class="resetpwd-form" v-if="authenticated">
     <!-- Header -->
     <div class="header p-4">
       <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>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>
@@ -91,6 +88,7 @@
   </div>
 </template>
 <script>
+import loginAPI from '../../apis/loginAPI'
 export default {
   name: 'reset',
   data() {
@@ -105,18 +103,34 @@ export default {
       checkPassword: '',
       passwordVisible: false,
       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: {
@@ -139,8 +153,8 @@ export default {
       return { valid: false, errors }
     },
   },
-  created() {
-    //console.log('resetpage', this.$route)
+  async created() {
+    this.authenticate()
   },
 }
 </script>