Refactor Message props

frontend/src/components/Message/Message.spec.js

@@ -4,19 +4,12 @@ import Message from './Message'
 const localVue = global.localVue
 
 const propsData = {
-  kind: 'forgot-password-success',
+  headline: 'site.thx.title',
+  subtitle: 'site.thx.email',
+  buttonText: 'login',
+  linkTo: '/login',
 }
 
-// Wolle const createMockObject = () => {
-//   return {
-//     $t: jest.fn((t) => t),
-//     $route: {
-//       params: {
-//         comingFrom,
-//       },
-//     },
-//   }
-// }
 const mocks = {
   $t: jest.fn((t) => t),
 }
@@ -43,7 +36,7 @@ describe('Message', () => {
       expect(wrapper.find('.test-message-button').text()).toBe('login')
     })
 
-    it('links the redirect button to /login', () => {
+    it('button link redirects to /login', () => {
       // Wolle console.log(wrapper.html())
       expect(wrapper.find('a.btn').attributes('href')).toBe('/login')
     })

frontend/src/components/Message/Message.vue

@@ -5,17 +5,17 @@
       <b-container>
         <div class="header-body text-center mb-7">
           <!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys-->
-          <p class="h1 test-message-headline">{{ $t(displaySetup.headline) }}</p>
+          <p class="h1 test-message-headline">{{ $t(headline) }}</p>
           <!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys-->
-          <p class="h4 test-message-subtitle">{{ $t(displaySetup.subtitle) }}</p>
+          <p class="h4 test-message-subtitle">{{ $t(subtitle) }}</p>
           <hr />
           <b-button
-            v-if="displaySetup.linkTo"
+            v-if="buttonText"
             class="test-message-button"
-            :to="displaySetup.linkTo + (code ? `/${code}` : '')"
+            :to="linkTo + (code ? `/${code}` : '')"
           >
             <!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys-->
-            {{ $t(displaySetup.button) }}
+            {{ $t(buttonText) }}
           </b-button>
         </div>
       </b-container>
@@ -25,55 +25,14 @@
 </template>
 
 <script>
-const textFields = {
-  'forgot-password-success': {
-    headline: 'site.thx.title',
-    subtitle: 'site.thx.email',
-    button: 'login',
-    linkTo: '/login',
-  },
-  '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',
-    linkTo: '/login',
-  },
-  register: {
-    headline: 'site.thx.title',
-    subtitle: 'site.thx.register',
-    button: 'site.login.signin',
-    linkTo: '/login',
-  },
-  'check-email': {
-    headline: 'site.thx.title',
-    subtitle: 'site.thx.checkEmail',
-    button: 'login',
-    linkTo: '/login',
-  },
-  login: {
-    headline: 'site.thx.errorTitle',
-    subtitle: 'site.thx.activateEmail',
-    button: 'settings.password.reset',
-    linkTo: '/forgot-password',
-  },
-}
-
 export default {
   name: 'Message',
   props: {
-    kind: { type: String, required: true },
-    code: { type: String, default: '' },
-  },
-  data() {
-    return {
-      displaySetup: textFields[this.kind],
-    }
+    headline: { type: String, required: true },
+    subtitle: { type: String, required: true },
+    buttonText: { type: String, required: false, default: null },
+    linkTo: { type: String, required: false, default: null },
+    code: { type: String, required: false, default: null },
   },
 }
 </script>

frontend/src/pages/ForgotPassword.spec.js

@@ -116,11 +116,15 @@ describe('ForgotPassword', () => {
               await flushPromises()
             })
 
-            it('shows error message', () => {
+            it('shows error title, subtitle, login button', () => {
               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('button link redirects to /login', () => {
+              expect(wrapper.find('.test-message-button').attributes('href')).toBe('/login')
+            })
           })
 
           describe('success', () => {
@@ -136,11 +140,15 @@ describe('ForgotPassword', () => {
               await flushPromises()
             })
 
-            it('shows thx, email, send, login button', () => {
+            it('shows success title, subtitle, login button', () => {
               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')
             })
+
+            it('button link redirects to /login', () => {
+              expect(wrapper.find('.test-message-button').attributes('href')).toBe('/login')
+            })
           })
         })
       })

frontend/src/pages/ForgotPassword.vue

@@ -37,7 +37,22 @@
       </div>
     </b-container>
     <b-container v-else class="mt--8 p-1">
-      <message :kind="success ? 'forgot-password-success' : 'forgot-password-error'" />
+      <!-- eslint-disable @intlify/vue-i18n/no-dynamic-keys-->
+      <message
+        v-if="success"
+        :headline="$t('site.thx.title')"
+        :subtitle="$t('site.thx.email')"
+        buttonText="login"
+        linkTo="/login"
+      />
+      <message
+        v-else
+        :headline="$t('site.thx.errorTitle')"
+        :subtitle="$t('error.email-already-sent')"
+        buttonText="login"
+        linkTo="/login"
+      />
+      <!-- eslint-enable @intlify/vue-i18n/no-dynamic-keys-->
     </b-container>
   </div>
 </template>