Create Message component

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

@@ -0,0 +1,101 @@
+import { mount } from '@vue/test-utils'
+import Thx from './Message'
+
+const localVue = global.localVue
+
+const createMockObject = (comingFrom) => {
+  return {
+    $t: jest.fn((t) => t),
+    $route: {
+      params: {
+        comingFrom,
+      },
+    },
+  }
+}
+
+describe('Message', () => {
+  let wrapper
+
+  const Wrapper = (mocks) => {
+    return mount(Thx, { localVue, mocks })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper(createMockObject('forgotPassword'))
+    })
+
+    it('renders the thx page', () => {
+      expect(wrapper.find('div.header').exists()).toBeTruthy()
+    })
+
+    it('renders the title', () => {
+      expect(wrapper.find('p.h1').text()).toBe('site.thx.title')
+    })
+  })
+
+  describe('coming from /forgot-password', () => {
+    beforeEach(() => {
+      wrapper = Wrapper(createMockObject('forgotPassword'))
+    })
+
+    it('renders the thanks text', () => {
+      expect(wrapper.find('p.h4').text()).toBe('site.thx.email')
+    })
+
+    it('renders the thanks redirect button', () => {
+      expect(wrapper.find('a.btn').text()).toBe('login')
+    })
+
+    it('links the redirect button to /login', () => {
+      expect(wrapper.find('a.btn').attributes('href')).toBe('/login')
+    })
+  })
+
+  describe('coming from /reset-password', () => {
+    beforeEach(() => {
+      wrapper = Wrapper(createMockObject('resetPassword'))
+    })
+
+    it('renders the thanks text', () => {
+      expect(wrapper.find('p.h4').text()).toBe('site.thx.reset')
+    })
+
+    it('renders the thanks redirect button', () => {
+      expect(wrapper.find('a.btn').text()).toBe('login')
+    })
+
+    it('links the redirect button to /login', () => {
+      expect(wrapper.find('a.btn').attributes('href')).toBe('/login')
+    })
+  })
+
+  describe('coming from /register', () => {
+    beforeEach(() => {
+      wrapper = Wrapper(createMockObject('register'))
+    })
+
+    it('renders the thanks text', () => {
+      expect(wrapper.find('p.h4').text()).toBe('site.thx.register')
+    })
+  })
+
+  describe('coming from /login', () => {
+    beforeEach(() => {
+      wrapper = Wrapper(createMockObject('login'))
+    })
+
+    it('renders the thanks text', () => {
+      expect(wrapper.find('p.h4').text()).toBe('site.thx.activateEmail')
+    })
+
+    it('renders the thanks redirect button', () => {
+      expect(wrapper.find('a.btn').text()).toBe('settings.password.reset')
+    })
+
+    it('links the redirect button to /forgot-password', () => {
+      expect(wrapper.find('a.btn').attributes('href')).toBe('/forgot-password')
+    })
+  })
+})

frontend/src/components/Message/Message.vue

@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <!-- Header -->
+    <div class="header py-7 py-lg-8 pt-lg-9">
+      <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>
+          <!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys-->
+          <p class="h4">{{ $t(displaySetup.subtitle) }}</p>
+          <hr />
+          <b-button v-if="$route.params.code" :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">
+            <!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys-->
+            {{ $t(displaySetup.button) }}
+          </b-button>
+        </div>
+      </b-container>
+    </div>
+    <!-- Page content -->
+  </div>
+</template>
+
+<script>
+const textFields = {
+  forgotPassword: {
+    headline: 'site.thx.title',
+    subtitle: 'site.thx.email',
+    button: 'login',
+    linkTo: '/login',
+  },
+  resetPassword: {
+    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',
+  },
+  checkEmail: {
+    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 },
+  },
+  data() {
+    return {
+      displaySetup: textFields[this.kind]
+    }
+  },
+}
+</script>

frontend/src/pages/ForgotPassword.vue

@@ -36,16 +36,21 @@
         <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>
   </div>
 </template>
 <script>
 import { forgotPassword } from '@/graphql/mutations'
 import InputEmail from '@/components/Inputs/InputEmail'
+import Message from '@/components/Message/Message'
 
 export default {
   name: 'ForgotPassword',
   components: {
     InputEmail,
+    Message,
   },
   data() {
     return {