[Remove Vuetify from Studio] 'Activation failed' page

contentcuration/contentcuration/frontend/accounts/pages/__tests__/requestNewActivationLink.spec.js

@@ -4,26 +4,27 @@ import Vuex from 'vuex';
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 import RequestNewActivationLink from '../activateAccount/RequestNewActivationLink';
+import commonStrings from 'shared/translator';
 
 Vue.use(Vuex);
 Vue.use(VueRouter);
 let testStore;
 
-function createTestStore() {
+function createTestStore({ sendActivationLink = jest.fn(() => Promise.resolve()) } = {}) {
   testStore = new Vuex.Store({
     modules: {
       account: {
         namespaced: true,
         actions: {
-          sendActivationLink: jest.fn(() => Promise.resolve()),
+          sendActivationLink,
         },
       },
     },
   });
   return testStore;
 }
 
-function renderComponent() {
+function renderComponent(storeOptions) {
   const router = new VueRouter({
     routes: [
       {
@@ -38,21 +39,42 @@ function renderComponent() {
   });
 
   return render(RequestNewActivationLink, {
-    store: createTestStore(),
+    store: createTestStore(storeOptions),
     router,
   });
 }
 
 describe('requestNewActivationLink', () => {
-  it('should show validation error when submitting with invalid email', async () => {
+  it('should show a required-field error when submitting with an empty email', async () => {
     const user = userEvent.setup();
     renderComponent();
 
-    const submitButton = screen.getByRole('button', { name: /submit/i });
+    const submitButton = screen.getByRole('button', {
+      name: RequestNewActivationLink.$trs.submitButton,
+    });
+    await user.click(submitButton);
+
+    await waitFor(() => {
+      expect(screen.getByText(commonStrings.$tr('fieldRequired'))).toBeInTheDocument();
+    });
+  });
+
+  it('should show a validation error when submitting an invalid email', async () => {
+    const user = userEvent.setup();
+    renderComponent();
+
+    const emailInput = screen.getByLabelText(RequestNewActivationLink.$trs.emailLabel);
+    const submitButton = screen.getByRole('button', {
+      name: RequestNewActivationLink.$trs.submitButton,
+    });
+
+    await user.type(emailInput, 'not-an-email');
     await user.click(submitButton);
 
     await waitFor(() => {
-      expect(screen.getByText(/activation failed/i)).toBeInTheDocument();
+      expect(
+        screen.getByText(RequestNewActivationLink.$trs.emailValidationMessage),
+      ).toBeInTheDocument();
     });
   });
 
@@ -61,8 +83,10 @@ describe('requestNewActivationLink', () => {
     renderComponent();
     const sendActivationLink = jest.spyOn(testStore, 'dispatch');
 
-    const emailInput = screen.getByLabelText(/email/i);
-    const submitButton = screen.getByRole('button', { name: /submit/i });
+    const emailInput = screen.getByLabelText(RequestNewActivationLink.$trs.emailLabel);
+    const submitButton = screen.getByRole('button', {
+      name: RequestNewActivationLink.$trs.submitButton,
+    });
 
     await user.type(emailInput, 'test@test.com');
     await user.click(submitButton);
@@ -74,4 +98,23 @@ describe('requestNewActivationLink', () => {
       );
     });
   });
+
+  it('should show a banner when the request fails', async () => {
+    const user = userEvent.setup();
+    renderComponent({ sendActivationLink: jest.fn(() => Promise.reject(new Error('failed'))) });
+
+    const emailInput = screen.getByLabelText(RequestNewActivationLink.$trs.emailLabel);
+    const submitButton = screen.getByRole('button', {
+      name: RequestNewActivationLink.$trs.submitButton,
+    });
+
+    await user.type(emailInput, 'test@test.com');
+    await user.click(submitButton);
+
+    await waitFor(() => {
+      expect(
+        screen.getByText(RequestNewActivationLink.$trs.activationRequestFailed),
+      ).toBeInTheDocument();
+    });
+  });
 });

contentcuration/contentcuration/frontend/accounts/pages/activateAccount/RequestNewActivationLink.vue

@@ -1,62 +1,84 @@
 <template>
 
-  <MessageLayout
+  <StudioMessageLayout
     :header="$tr('activationExpiredTitle')"
     :text="$tr('activationExpiredText')"
   >
-    <VForm
-      ref="form"
-      lazy-validation
+    <form
+      class="request-activation-form"
+      novalidate
       @submit.prevent="requestActivationLink"
     >
-      <Banner
-        :text="$tr('activationRequestFailed')"
-        :value="error"
+      <StudioBanner
+        v-if="error"
         error
-        class="mb-4"
-      />
-      <EmailField
+        class="banner"
+      >
+        {{ $tr('activationRequestFailed') }}
+      </StudioBanner>
+      <StudioEmailField
         v-model="email"
         autofocus
+        :label="$tr('emailLabel')"
+        :errorMessages="errors.email ? [emailErrorText] : []"
       />
       <KButton
         primary
         class="w-100"
         :text="$tr('submitButton')"
         type="submit"
       />
-    </VForm>
-  </MessageLayout>
+    </form>
+  </StudioMessageLayout>
 
 </template>
 
 
 <script>
 
   import { mapActions } from 'vuex';
-  import MessageLayout from '../../components/MessageLayout';
-  import EmailField from 'shared/views/form/EmailField';
-  import Banner from 'shared/views/Banner';
+  import StudioMessageLayout from '../../components/StudioMessageLayout';
+  import StudioEmailField from '../../components/form/StudioEmailField';
+  import StudioBanner from 'shared/views/StudioBanner';
+  import commonStrings from 'shared/translator';
+  import { generateFormMixin } from 'shared/mixins';
+
+  const formMixin = generateFormMixin({
+    email: {
+      required: true,
+      validator: v => Boolean(v && v.trim()) && /.+@.+\..+/.test(v),
+    },
+  });
 
   export default {
     name: 'RequestNewActivationLink',
     components: {
-      MessageLayout,
-      EmailField,
-      Banner,
+      StudioMessageLayout,
+      StudioEmailField,
+      StudioBanner,
     },
+    mixins: [formMixin],
     data() {
       return {
-        email: '',
         error: false,
       };
     },
+    computed: {
+      emailErrorText() {
+        if (!this.email || !this.email.trim()) {
+          /* eslint-disable-next-line kolibri/vue-no-undefined-string-uses */
+          return commonStrings.$tr('fieldRequired');
+        }
+        return this.$tr('emailValidationMessage');
+      },
+    },
     methods: {
       ...mapActions('account', ['sendActivationLink']),
       requestActivationLink() {
         this.error = false;
-        if (this.$refs.form.validate()) {
-          this.sendActivationLink(this.email)
+        const formData = this.clean();
+        if (this.validate(formData)) {
+          this.sendActivationLink(formData.email)
             .then(() => {
               this.$router.replace({ name: 'ActivationLinkReSent' }).catch(() => {});
             })
@@ -71,6 +93,8 @@
       activationExpiredText: 'This activation link has been used already or has expired.',
       submitButton: 'Submit',
       activationRequestFailed: 'Failed to send a new activation link. Please try again.',
+      emailLabel: 'Email',
+      emailValidationMessage: 'Please enter a valid email address',
     },
   };
 
@@ -79,6 +103,17 @@
 
 <style lang="scss" scoped>
 
+  .request-activation-form {
+    width: 400px;
+    max-width: 100%;
+    text-align: left;
+  }
+
+  .banner {
+    width: 100%;
+    margin-bottom: 16px;
+  }
+
   .w-100 {
     width: 100%;
   }