Skip to content

[Remove Vuetify from Studio] 'Activation failed' page #6026

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
LightCreator1007 wants to merge 3 commits into
base: unstable
Choose a base branch
from
+54 −21
Open

[Remove Vuetify from Studio] 'Activation failed' page #6026

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
03897c4
refactor: removed vuetify from request new activation link page
LightCreator1007 Jul 2, 2026
04827f1
fixes
LightCreator1007 Jul 2, 2026
790052e
[pre-commit.ci lite] apply automatic fixes
pre-commit-ci-lite[bot] Jul 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 54 additions & 21 deletions ...tion/contentcuration/frontend/accounts/pages/activateAccount/RequestNewActivationLink.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,62 +1,81 @@
<template>

<MessageLayout
<StudioMessageLayout
:header="$tr('activationExpiredTitle')"
:text="$tr('activationExpiredText')"
>
<VForm
ref="form"
lazy-validation
<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] : []"

@rtibblesbot rtibblesbot Jul 3, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: With generateFormMixin, the email setter runs the validator on every v-model update, so errorMessages can now appear after the very first keystroke rather than on blur/submit as before. Matches Create.vue's existing behavior, but flagging since it's a UX change not called out in the issue.

/>
<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 { generateFormMixin } from 'shared/mixins';

const formMixin = generateFormMixin({
email: {
required: true,
validator: v => Boolean(v && v.trim()) && /\S+@\S+\.\S+/.test(v),

@rtibblesbot rtibblesbot Jul 3, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: This regex (/\S+@\S+\.\S+/) is stricter than the original EmailField's /.+@.+\..+/ — the old pattern's . allowed embedded whitespace, this one rejects it. Same tightening already exists in the merged Create.vue, so likely intentional, but worth a quick confirm since the issue's scope says no functional differences beyond the listed UI changes.

},
});

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()) {
return this.$tr('fieldRequiredMessage');
}
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(() => {});
})
Expand All @@ -71,6 +90,9 @@
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',
fieldRequiredMessage: 'This field is required',

@rtibblesbot rtibblesbot Jul 3, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: fieldRequiredMessage: 'This field is required' duplicates the existing shared string commonStrings.$tr('fieldRequired') (shared/translator.js), already reused in Create.vue and shared/utils/validation.js. Per the i18n hoisting convention (3+ usages → shared string), consider importing commonStrings instead of declaring a fourth local copy — keeps translations in sync if the wording ever changes.

emailValidationMessage: 'Please enter a valid email',

@rtibblesbot rtibblesbot Jul 3, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: 'Please enter a valid email' differs by one word from Create.vue's near-identical string 'Please enter a valid email address'. Consider aligning the wording so translators/users see identical messaging for the identical validation rule on both account pages.

},
};

Expand All @@ -79,6 +101,17 @@

<style lang="scss" scoped>

form {

@rtibblesbot rtibblesbot Jul 3, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nitpick: Selecting by bare HTML tag (form { ... }) fails the "grep test" convention used elsewhere in this codebase (e.g. Create.vue's .form-container). Low blast radius here since it's scoped with a single <form>, but a class name would stay grep-able if the template grows.

width: 400px;
max-width: 100%;
text-align: left;
}

.banner {
width: 100%;
margin-bottom: 16px;
}

.w-100 {
width: 100%;
}
Expand Down
Loading