Refactor PasswordForgotten site

frontend/src/components/Message/Message.vue

@@ -1,19 +1,27 @@
 <template>
   <div>
     <!-- Header -->
-    <div class="header py-7 py-lg-8 pt-lg-9">
+    <div class="header py-lg-6">
       <b-container>
         <div class="header-body text-center mb-7">
           <!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys-->
-          <p class="h1">{{ $t(displaySetup.headline) }}</p>
+          <p class="h1 test-message-headline">{{ $t(displaySetup.headline) }}</p>
           <!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys-->
-          <p class="h4">{{ $t(displaySetup.subtitle) }}</p>
+          <p class="h4 test-message-subtitle">{{ $t(displaySetup.subtitle) }}</p>
           <hr />
-          <b-button v-if="$route.params.code" :to="`/login/${$route.params.code}`">
+          <b-button
+            v-if="$route.params.code"
+            class="test-message-button"
+            :to="`/login/${$route.params.code}`"
+          >
             <!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys-->
             {{ $t(displaySetup.button) }}
           </b-button>
-          <b-button v-else-if="displaySetup.linkTo" :to="displaySetup.linkTo">
+          <b-button
+            v-else-if="displaySetup.linkTo"
+            class="test-message-button"
+            :to="displaySetup.linkTo"
+          >
             <!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys-->
             {{ $t(displaySetup.button) }}
           </b-button>
@@ -26,13 +34,19 @@
 
 <script>
 const textFields = {
-  forgotPassword: {
+  'forgot-password-success': {
     headline: 'site.thx.title',
     subtitle: 'site.thx.email',
     button: 'login',
     linkTo: '/login',
   },
-  resetPassword: {
+  'forgot-password-error': {
+    headline: 'site.thx.errorTitle',
+    subtitle: 'error.email-already-sent',
+    button: 'login',
+    linkTo: '/login',
+  },
+  'reset-password': {
     headline: 'site.thx.title',
     subtitle: 'site.thx.reset',
     button: 'login',
@@ -44,7 +58,7 @@ const textFields = {
     button: 'site.login.signin',
     // linkTo: '/login',
   },
-  checkEmail: {
+  'check-email': {
     headline: 'site.thx.title',
     subtitle: 'site.thx.checkEmail',
     button: 'login',
@@ -65,7 +79,7 @@ export default {
   },
   data() {
     return {
-      displaySetup: textFields[this.kind]
+      displaySetup: textFields[this.kind],
     }
   },
 }

frontend/src/pages/ForgotPassword.spec.js

@@ -118,20 +118,25 @@ describe('ForgotPassword', () => {
               await flushPromises()
             })
 
-            it('toasts a standard error message', () => {
-              expect(toastErrorSpy).toBeCalledWith('error.email-already-sent')
+            // Wolle it('toasts a standard error message', () => {
+            //   expect(toastErrorSpy).toBeCalledWith('error.email-already-sent')
+            // })
+            it('shows error message', () => {
+              expect(wrapper.find('.test-message-headline').text()).toBe('site.thx.errorTitle')
+              expect(wrapper.find('.test-message-subtitle').text()).toBe('error.email-already-sent')
+              expect(wrapper.find('.test-message-button').text()).toBe('login')
             })
 
-            it('pushes to "/thx/forgotPassword"', () => {
-              expect(mockAPIcall).toBeCalledWith(
-                expect.objectContaining({
-                  variables: {
-                    email: 'user@example.org',
-                  },
-                }),
-              )
-              expect(mockRouterPush).toHaveBeenCalledWith('/thx/forgotPassword')
-            })
+            // Wolle it('pushes to "/thx/forgotPassword"', () => {
+            //   expect(mockAPIcall).toBeCalledWith(
+            //     expect.objectContaining({
+            //       variables: {
+            //         email: 'user@example.org',
+            //       },
+            //     }),
+            //   )
+            //   expect(mockRouterPush).toHaveBeenCalledWith('/thx/forgotPassword')
+            // })
           })
 
           describe('success', () => {
@@ -147,15 +152,20 @@ describe('ForgotPassword', () => {
               await flushPromises()
             })
 
-            it('pushes to "/thx/forgotPassword"', () => {
-              expect(mockAPIcall).toBeCalledWith(
-                expect.objectContaining({
-                  variables: {
-                    email: 'user@example.org',
-                  },
-                }),
-              )
-              expect(mockRouterPush).toHaveBeenCalledWith('/thx/forgotPassword')
+            // it('pushes to "/thx/forgotPassword"', () => {
+            //   expect(mockAPIcall).toBeCalledWith(
+            //     expect.objectContaining({
+            //       variables: {
+            //         email: 'user@example.org',
+            //       },
+            //     }),
+            //   )
+            //   expect(mockRouterPush).toHaveBeenCalledWith('/thx/forgotPassword')
+            // })
+            it('shows thx', () => {
+              expect(wrapper.find('.test-message-headline').text()).toBe('site.thx.title')
+              expect(wrapper.find('.test-message-subtitle').text()).toBe('site.thx.email')
+              expect(wrapper.find('.test-message-button').text()).toBe('login')
             })
           })
         })

frontend/src/pages/ForgotPassword.vue

@@ -13,7 +13,7 @@
         </div>
       </b-container>
     </div>
-    <b-container class="mt--8 p-1">
+    <b-container v-if="!showPageMessage" class="mt--8 p-1">
       <b-row class="justify-content-center">
         <b-col lg="6" md="8">
           <b-card no-body class="border-0 gradido-custom-background">
@@ -36,8 +36,8 @@
         <router-link to="/login" class="mt-3">{{ $t('back') }}</router-link>
       </div>
     </b-container>
-    <b-container class="mt--8 p-1">
-      <message kind="forgotPassword" />
+    <b-container v-else class="mt--8 p-1">
+      <message :kind="success ? 'forgot-password-success' : 'forgot-password-error'" />
     </b-container>
   </div>
 </template>
@@ -54,11 +54,13 @@ export default {
   },
   data() {
     return {
-      disable: 'disabled',
+      // Wolle disable: 'disabled',
       form: {
         email: '',
       },
       subtitle: 'settings.password.subtitle',
+      showPageMessage: false,
+      success: null,
     }
   },
   methods: {
@@ -71,15 +73,17 @@ export default {
           },
         })
         .then(() => {
-          this.$router.push('/thx/forgotPassword')
+          this.showPageMessage = true
+          this.success = true
         })
         .catch(() => {
-          this.toastError(this.$t('error.email-already-sent'))
-          this.$router.push('/thx/forgotPassword')
+          this.showPageMessage = true
+          this.success = false
         })
     },
   },
   created() {
+    // Wolle: what shall happen here? change needed?
     if (this.$route.params.comingFrom) {
       this.subtitle = 'settings.password.resend_subtitle'
     }