[Remove Vuetify from Studio] Informative pages in Accounts

[MisRob]

🙂 Looking for an issue? Welcome! This issue is open for contribution. If this is the first time you’re requesting an issue, please:

• Read Contributing guidelines carefully. Pay extra attention to Using generative AI. Pull requests and comments that don’t follow the guidelines won’t be answered.
• Confirm that you’ve read the guidelines in your comment.

Overview

Complexity: Low

Context

One example of affected pages:

The Change

Remove Vuetify dependencies from the following pages:

• accounts/pages/accountDeleted/AccountDeleted.vue
• accounts/pages/activateAccount/AccountCreated.vue
• accounts/pages/activateAccount/AccountNotActivated.vue
• accounts/pages/activateAccount/ActivationExpired.vue
• accounts/pages/activateAccount/ActivationLinkReSent.vue
• accounts/pages/activateAccount/ActivationSent.vue
• accounts/pages/resetPassword/PasswordInstructionsSent.vue
• accounts/pages/resetPassword/ResetLinkExpired.vue
• accounts/pages/resetPassword/ResetPasswordSuccess.vue

By:

• Create a new component StudioMessageLayout
  • A parallel to MessageLayout but with no Vuetify V... components
  • Utilize StudioPage and custom styling to achieve the same visual output:

    // StudioMessageLayout.vue
    
    <template>
      <StudioPage ...>
        ...
      </StudioPage>
    </template>

• Use StudioMessageLayout instead of MessageLayout on the aforementioned pages

Ensure that all interactions are functional as before. Provide before/after screenshot of each page. Do not modify MessageLayout. Do not refactor any other areas of the codebase.

How to Get There

• Find URLs of all affected pages in accounts/router.js
  • For example, for AccountDeleted.vue navigate to /accounts/#/account-deleted URL

Guidance

• Find detailed guidance with many code examples in KDS documentation
• Read the project for more useful references

Out of Scope

• Do not modify MessageLayout
• Do not refactor any other areas of the codebase

Expected UI/UX changes

• None

Acceptance Criteria

These are general acceptance criteria for the project. For each sub-issue, consider which are relevant.

General

• The specification above is followed.
• Except for "Expected UI/UX changes," there are no functional or visual differences in user experience.
• There are no regressions in the printing preview
• There are no ::v-deep or /deep/ selectors.
• All user interactions are manually tested with no regressions.
• Pull request includes screenshots.

a11y and i18n

See the project's "Guidance" for useful references.

• Implementation meets a11y standards
• All components are LTR and RTL compliant (preview with pnpm run devserver since :hot doesn't render RTL properly)
• All user-facing strings are translated properly
• The notranslate class been added to elements that shouldn't be translated by Google Chrome's automatic translation feature (e.g. user-generated text)
• Mobile experience is reasonable

Unit tests

• If there is a unit test suite already, it is meaningfully updated (even if tests don't fail)
• If there is no unit test suite, a new one is created. Do not use obsolete @vue/test-utils approach. Instead, use @testing-library/vue (Vue Testing Library).

References

Sub-issue of #5060

[kart-u]

hello @MisRob!
I want to work on this can you please assign this to me

[MisRob]

Hi @kart-u, happy to hear from you. I would prefer to assign you with a new issue after the other, currently assigned, issue is addressed - I believe you still have it in progress?

[AadarshM07]

Hi @MisRob , if it is okay, I would like to work on this as well. I believe I can contribute effectively.

[MisRob]

Hi @AadarshM07, thank you - assigned.

[MisRob]

@kart-u by the way, there will be more new issues in the upcoming weeks so take your time to wrap up the task in progress and then we'll be happy to assign you a new one :) Thank you!