Remove Vuetify from Forgot password page

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

@@ -1,6 +1,7 @@
 import { render, screen, fireEvent, waitFor } from '@testing-library/vue';
 import VueRouter from 'vue-router';
 import ForgotPassword from '../resetPassword/ForgotPassword';
+import commonStrings from 'shared/translator';
 
 const sendPasswordResetLinkMock = jest.fn(() => Promise.resolve());
 
@@ -40,21 +41,52 @@ describe('ForgotPassword', () => {
     expect(screen.getByText('Reset your password')).toBeInTheDocument();
     expect(screen.getByLabelText('Email')).toBeInTheDocument();
     expect(screen.getByRole('button', { name: 'Submit' })).toBeInTheDocument();
+    expect(screen.queryByTestId('error-banner')).not.toBeInTheDocument();
   });
 
   it('should not submit form with empty email', async () => {
     renderComponent();
     await fireEvent.click(screen.getByRole('button', { name: 'Submit' }));
+    await waitFor(() => {
+      expect(screen.getByTestId('email-field')).toHaveTextContent(
+        commonStrings.$tr('fieldRequired'),
+      );
+    });
     expect(sendPasswordResetLinkMock).not.toHaveBeenCalled();
   });
 
   it('should not submit form with invalid email', async () => {
     renderComponent();
     await fireEvent.update(screen.getByLabelText(/email/i), 'invalid-email');
     await fireEvent.click(screen.getByRole('button', { name: 'Submit' }));
+    await waitFor(() => {
+      expect(screen.getByTestId('email-field')).toHaveTextContent(
+        ForgotPassword.$trs.emailValidationMessage,
+      );
+    });
     expect(sendPasswordResetLinkMock).not.toHaveBeenCalled();
   });
 
+  it('should not show validation error while typing', async () => {
+    renderComponent();
+    await fireEvent.update(screen.getByLabelText(/email/i), 'invalid-email');
+    expect(screen.getByTestId('email-field')).not.toHaveTextContent(
+      ForgotPassword.$trs.emailValidationMessage,
+    );
+  });
+
+  it('should show validation error on blur', async () => {
+    renderComponent();
+    const emailInput = screen.getByLabelText(/email/i);
+    await fireEvent.update(emailInput, 'invalid-email');
+    await fireEvent.blur(emailInput);
+    await waitFor(() => {
+      expect(screen.getByTestId('email-field')).toHaveTextContent(
+        ForgotPassword.$trs.emailValidationMessage,
+      );
+    });
+  });
+
   it('should submit form with valid email and navigate to success page', async () => {
     sendPasswordResetLinkMock.mockResolvedValue({});
     const { router } = renderComponent();
@@ -74,6 +106,8 @@ describe('ForgotPassword', () => {
     renderComponent();
     await fireEvent.update(screen.getByLabelText(/email/i), 'test@test.com');
     await fireEvent.click(screen.getByRole('button', { name: 'Submit' }));
-    expect(await screen.findByTestId('error-banner')).toBeInTheDocument();
+    expect(await screen.findByTestId('error-banner')).toHaveTextContent(
+      ForgotPassword.$trs.forgotPasswordFailed,
+    );
   });
 });

contentcuration/contentcuration/frontend/accounts/pages/resetPassword/ForgotPassword.vue

@@ -1,63 +1,89 @@
 <template>
 
-  <MessageLayout
+  <StudioMessageLayout
     :header="$tr('forgotPasswordTitle')"
     :text="$tr('forgotPasswordPrompt')"
   >
-    <VForm
-      ref="form"
-      lazy-validation
+    <form
+      class="forgot-password-form"
+      novalidate
       @submit.prevent="submit"
     >
-      <Banner
-        :text="$tr('forgotPasswordFailed')"
-        :value="error"
+      <StudioBanner
+        v-if="error"
         error
-        class="mb-4"
+        class="banner"
         data-testid="error-banner"
-      />
-      <EmailField
+      >
+        {{ $tr('forgotPasswordFailed') }}
+      </StudioBanner>
+      <StudioEmailField
         v-model="email"
         autofocus
+        data-testid="email-field"
+        :label="$tr('emailLabel')"
+        :errorMessages="showEmailError && errors.email ? [emailErrorText] : []"
+        @blur="showEmailError = true"
       />
       <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: 'ForgotPassword',
     components: {
-      MessageLayout,
-      EmailField,
-      Banner,
+      StudioMessageLayout,
+      StudioEmailField,
+      StudioBanner,
     },
+    mixins: [formMixin],
     data() {
       return {
-        email: '',
         error: false,
+        showEmailError: 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', ['sendPasswordResetLink']),
       submit() {
         this.error = false;
-        if (this.$refs.form.validate()) {
-          this.sendPasswordResetLink(this.email)
+        this.showEmailError = true;
+        const formData = this.clean();
+        if (this.validate(formData)) {
+          this.sendPasswordResetLink(formData.email)
             .then(() => {
               this.$router
                 .push({
@@ -77,6 +103,8 @@
         'Please enter your email address to receive instructions for resetting your password',
       submitButton: 'Submit',
       forgotPasswordFailed: 'Failed to send a password reset link. Please try again.',
+      emailLabel: 'Email',
+      emailValidationMessage: 'Please enter a valid email',
     },
   };
 
@@ -85,6 +113,17 @@
 
 <style lang="scss" scoped>
 
+  .forgot-password-form {
+    width: 400px;
+    max-width: 100%;
+    text-align: left;
+  }
+
+  .banner {
+    width: 100%;
+    margin-bottom: 16px;
+  }
+
   .w-100 {
     width: 100%;
   }