chore: Migrate all instances of old vuelidate to new v2 syntax [CW-3274] (#9623)
Removes all the old vuelidate syntax and replaced it with the new `useValidate` composable and the `v$` helper. | Component | Path | Migrated | Tested | |------------------------------------|--------------------------------------------------------------|-----------------------------------------------|--------| | Login page | app/javascript/v3/views/login/Index.vue | ✅ | ✅ | | Custom Attributes settings page | app/javascript/dashboard/components/CustomAttribute.vue | ✅ | ✅ | | Account settings page | app/javascript/dashboard/routes/dashboard/settings/account/Index.vue | ✅ | ✅ | | Add Account Modal | app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue | ✅ | ✅ | | AICTA Modal | app/javascript/dashboard/components/widgets/AICTAModal.vue | ✅ | ✅ | | Conversation Advanced Filters | app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue | deprecated `$each` prop in validations object | | | Email Transript Modal | app/javascript/dashboard/components/widgets/conversation/EmailTranscriptModal.vue | ✅ | ✅ | | Linear Create Issue | app/javascript/dashboard/components/widgets/conversation/linear/CreateIssue.vue | ✅ | ✅ | | Template Parser | app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplateParser.vue | ✅ | | | Delete Confirmation Modal | app/javascript/dashboard/components/widgets/modal/ConfirmDeleteModal.vue | ✅ | ✅ | | Add Custom Attribute | app/javascript/dashboard/modules/contact/components/AddCustomAttribute.vue | ✅ | ✅ | | Merge Contacts | app/javascript/dashboard/modules/contact/components/MergeContact.vue | ✅ | ✅ | | Contacts Advanced Filters | app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue | deprecated `$each` prop in validations object | | | Contact Form | app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue | ✅ | ✅ | | Conversation Form | app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue | ✅ | ✅ | | Add Custom Views | app/javascript/dashboard/routes/dashboard/customviews/AddCustomViews.vue | ✅ | ✅ | | Add Locale | app/javascript/dashboard/routes/dashboard/helpcenter/components/AddLocale.vue | ✅ | ✅ | | Portal Settings Basic Form | /app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue | ✅ | ✅ | | Portal Settings Customization Form | /app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue | ✅ | ✅ | | Add Category | app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/AddCategory.vue | ✅ | ✅ | | Edit Category | app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue | ✅ | ✅ | | CSML Bot Editor | app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLBotEditor.vue | ✅ | ✅ | | Add Agent | app/javascript/dashboard/routes/dashboard/settings/agents/AddAgent.vue | ✅ | ✅ | | Edit Agent | app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue | ✅ | ✅ | | Add Attribute | app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue | ✅ | ✅ | | Edit Attribute | app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue | ✅ | ✅ | | Add Campaign | app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue | ✅ | ✅ | | Edit Campaign | app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue | ✅ | ✅ | | Add Canned | app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue | ✅ | ✅ | | Edit Canned | app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue | ✅ | ✅ | | IMAP Settings | app/javascript/dashboard/routes/dashboard/settings/inbox/ImapSettings.vue | ✅ | ✅ | | SMTP Settings | app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue | ✅ | ✅ | | Widget Builder | app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue | ✅ | ✅ | | 360 Dialog Whatsapp | app/javascript/dashboard/routes/dashboard/settings/inbox/channels/360DialogWhatsapp.vue | ✅ | ✅ | | Inbox API settings | app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Api.vue | ✅ | ✅ | | SMS Bandwidth settings | app/javascript/dashboard/routes/dashboard/settings/inbox/channels/BandwidthSms.vue | ✅ | ✅ | | Cloud Whatsapp Settings | app/javascript/dashboard/routes/dashboard/settings/inbox/channels/CloudWhatsapp.vue | ✅ | ✅ | | Facebook Settings | app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue | ✅ | ✅ | | Line Settings | app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Line.vue | ✅ | ✅ | | Telegram Settings | app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Telegram.vue | ✅ | ✅ | | Twillio Settings | app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twilio.vue | ✅ | ✅ | | Forward To option settings | app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/ForwardToOption.vue | ✅ | ✅ | | Microsoft settings | app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/Microsoft.vue | ✅ | ✅ | | Collaborators page | app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CollaboratorsPage.vue | ✅ | ✅ | | Configuration Page | app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue | ✅ | ✅ | | Dashboard App Modal Settings | app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppModal.vue | ✅ | ✅ | | Settings - Webhook Form | app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookForm.vue | ✅ | ✅ | | Macro Form | app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue | deprecated `$each` prop in validations object | | | Change Password | app/javascript/dashboard/routes/dashboard/settings/profile/ChangePassword.vue | ✅ | ✅ | | settings - User Basic Details | app/javascript/dashboard/routes/dashboard/settings/profile/UserBasicDetails.vue | ✅ | ✅ | | Password Edit | app/javascript/v3/views/auth/password/Edit.vue | ✅ | ✅ | | Password Reset form | app/javascript/v3/views/auth/reset/password/Index.vue | ✅ | ✅ | | Signup form | app/javascript/v3/views/auth/signup/components/Signup/Form.vue | ✅ | ✅ | | Login form | app/javascript/v3/views/login/Index.vue | ✅ | ✅ | | Custom Attributes | app/javascript/dashboard/components/CustomAttribute.vue | ✅ | ✅ | | Reply Email Head | app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue | ✅ | ✅ | | Methods Mixin | app/javascript/dashboard/mixins/automations/methodsMixin.js | ✅ | ✅ | | Validations mixin | app/javascript/dashboard/routes/dashboard/settings/labels/validationMixin.js | ✅ | ✅ | | SLA Form | app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue | ✅ | ✅ | | SLA Time Input | app/javascript/dashboard/routes/dashboard/settings/sla/SlaTimeInput.vue | ✅ | ✅ | | SLA Validation Mixin | app/javascript/dashboard/routes/dashboard/settings/sla/validationMixin.js | ✅ | ✅ | | Team Form | app/javascript/dashboard/routes/dashboard/settings/teams/TeamForm.vue | ✅ | ✅ | | Add Agents | app/javascript/dashboard/routes/dashboard/settings/teams/Create/AddAgents.vue | ✅ | ✅ | | Edit Agents | app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditAgents.vue | ✅ | ✅ | --------- Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com> Co-authored-by: Shivam Mishra <scm.mymail@gmail.com> Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> Co-authored-by: Pranav <pranav@chatwoot.com>
This commit is contained in:
Fayaz Ahmed
@@ -18,25 +18,25 @@
|
||||
class="mt-3"
|
||||
name="password"
|
||||
type="password"
|
||||
:has-error="$v.credentials.password.$error"
|
||||
:has-error="v$.credentials.password.$error"
|
||||
:error-message="$t('SET_NEW_PASSWORD.PASSWORD.ERROR')"
|
||||
:placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
|
||||
@blur="$v.credentials.password.$touch"
|
||||
@blur="v$.credentials.password.$touch"
|
||||
/>
|
||||
<form-input
|
||||
v-model.trim="credentials.confirmPassword"
|
||||
class="mt-3"
|
||||
name="confirm_password"
|
||||
type="password"
|
||||
:has-error="$v.credentials.confirmPassword.$error"
|
||||
:has-error="v$.credentials.confirmPassword.$error"
|
||||
:error-message="$t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.ERROR')"
|
||||
:placeholder="$t('SET_NEW_PASSWORD.CONFIRM_PASSWORD.PLACEHOLDER')"
|
||||
@blur="$v.credentials.confirmPassword.$touch"
|
||||
@blur="v$.credentials.confirmPassword.$touch"
|
||||
/>
|
||||
<submit-button
|
||||
:disabled="
|
||||
$v.credentials.password.$invalid ||
|
||||
$v.credentials.confirmPassword.$invalid ||
|
||||
v$.credentials.password.$invalid ||
|
||||
v$.credentials.confirmPassword.$invalid ||
|
||||
newPasswordAPI.showLoading
|
||||
"
|
||||
:button-text="$t('SET_NEW_PASSWORD.SUBMIT')"
|
||||
@@ -48,7 +48,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { required, minLength } from 'vuelidate/lib/validators';
|
||||
import { useVuelidate } from '@vuelidate/core';
|
||||
import { required, minLength } from '@vuelidate/validators';
|
||||
import { useAlert } from 'dashboard/composables';
|
||||
import FormInput from '../../../components/Form/Input.vue';
|
||||
import SubmitButton from '../../../components/Button/SubmitButton.vue';
|
||||
@@ -65,6 +66,9 @@ export default {
|
||||
redirectUrl: { type: String, default: '' },
|
||||
config: { type: String, default: '' },
|
||||
},
|
||||
setup() {
|
||||
return { v$: useVuelidate() };
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// We need to initialize the component with any
|
||||
|
||||
@@ -25,13 +25,13 @@
|
||||
<form-input
|
||||
v-model.trim="credentials.email"
|
||||
name="email_address"
|
||||
:has-error="$v.credentials.email.$error"
|
||||
:has-error="v$.credentials.email.$error"
|
||||
:error-message="$t('RESET_PASSWORD.EMAIL.ERROR')"
|
||||
:placeholder="$t('RESET_PASSWORD.EMAIL.PLACEHOLDER')"
|
||||
@input="$v.credentials.email.$touch"
|
||||
@input="v$.credentials.email.$touch"
|
||||
/>
|
||||
<SubmitButton
|
||||
:disabled="$v.credentials.email.$invalid || resetPassword.showLoading"
|
||||
:disabled="v$.credentials.email.$invalid || resetPassword.showLoading"
|
||||
:button-text="$t('RESET_PASSWORD.SUBMIT')"
|
||||
:loading="resetPassword.showLoading"
|
||||
/>
|
||||
@@ -47,9 +47,10 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useVuelidate } from '@vuelidate/core';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { useAlert } from 'dashboard/composables';
|
||||
import { required, minLength, email } from 'vuelidate/lib/validators';
|
||||
import { required, minLength, email } from '@vuelidate/validators';
|
||||
import globalConfigMixin from 'shared/mixins/globalConfigMixin';
|
||||
import FormInput from '../../../../components/Form/Input.vue';
|
||||
import { resetPassword } from '../../../../api/auth';
|
||||
@@ -58,6 +59,9 @@ import SubmitButton from '../../../../components/Button/SubmitButton.vue';
|
||||
export default {
|
||||
components: { FormInput, SubmitButton },
|
||||
mixins: [globalConfigMixin],
|
||||
setup() {
|
||||
return { v$: useVuelidate() };
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
credentials: { email: '' },
|
||||
|
||||
@@ -6,46 +6,46 @@
|
||||
v-model.trim="credentials.fullName"
|
||||
name="full_name"
|
||||
class="flex-1"
|
||||
:class="{ error: $v.credentials.fullName.$error }"
|
||||
:class="{ error: v$.credentials.fullName.$error }"
|
||||
:label="$t('REGISTER.FULL_NAME.LABEL')"
|
||||
:placeholder="$t('REGISTER.FULL_NAME.PLACEHOLDER')"
|
||||
:has-error="$v.credentials.fullName.$error"
|
||||
:has-error="v$.credentials.fullName.$error"
|
||||
:error-message="$t('REGISTER.FULL_NAME.ERROR')"
|
||||
@blur="$v.credentials.fullName.$touch"
|
||||
@blur="v$.credentials.fullName.$touch"
|
||||
/>
|
||||
<form-input
|
||||
v-model.trim="credentials.accountName"
|
||||
name="account_name"
|
||||
class="flex-1 ml-2"
|
||||
:class="{ error: $v.credentials.accountName.$error }"
|
||||
:class="{ error: v$.credentials.accountName.$error }"
|
||||
:label="$t('REGISTER.COMPANY_NAME.LABEL')"
|
||||
:placeholder="$t('REGISTER.COMPANY_NAME.PLACEHOLDER')"
|
||||
:has-error="$v.credentials.accountName.$error"
|
||||
:has-error="v$.credentials.accountName.$error"
|
||||
:error-message="$t('REGISTER.COMPANY_NAME.ERROR')"
|
||||
@blur="$v.credentials.accountName.$touch"
|
||||
@blur="v$.credentials.accountName.$touch"
|
||||
/>
|
||||
</div>
|
||||
<form-input
|
||||
v-model.trim="credentials.email"
|
||||
type="email"
|
||||
name="email_address"
|
||||
:class="{ error: $v.credentials.email.$error }"
|
||||
:class="{ error: v$.credentials.email.$error }"
|
||||
:label="$t('REGISTER.EMAIL.LABEL')"
|
||||
:placeholder="$t('REGISTER.EMAIL.PLACEHOLDER')"
|
||||
:has-error="$v.credentials.email.$error"
|
||||
:has-error="v$.credentials.email.$error"
|
||||
:error-message="$t('REGISTER.EMAIL.ERROR')"
|
||||
@blur="$v.credentials.email.$touch"
|
||||
@blur="v$.credentials.email.$touch"
|
||||
/>
|
||||
<form-input
|
||||
v-model.trim="credentials.password"
|
||||
type="password"
|
||||
name="password"
|
||||
:class="{ error: $v.credentials.password.$error }"
|
||||
:class="{ error: v$.credentials.password.$error }"
|
||||
:label="$t('LOGIN.PASSWORD.LABEL')"
|
||||
:placeholder="$t('SET_NEW_PASSWORD.PASSWORD.PLACEHOLDER')"
|
||||
:has-error="$v.credentials.password.$error"
|
||||
:has-error="v$.credentials.password.$error"
|
||||
:error-message="passwordErrorText"
|
||||
@blur="$v.credentials.password.$touch"
|
||||
@blur="v$.credentials.password.$touch"
|
||||
/>
|
||||
<div v-if="globalConfig.hCaptchaSiteKey" class="mb-3">
|
||||
<vue-hcaptcha
|
||||
@@ -79,7 +79,8 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { required, minLength, email } from 'vuelidate/lib/validators';
|
||||
import { useVuelidate } from '@vuelidate/core';
|
||||
import { required, minLength, email } from '@vuelidate/validators';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { useAlert } from 'dashboard/composables';
|
||||
import globalConfigMixin from 'shared/mixins/globalConfigMixin';
|
||||
@@ -100,6 +101,9 @@ export default {
|
||||
VueHcaptcha,
|
||||
},
|
||||
mixins: [globalConfigMixin],
|
||||
setup() {
|
||||
return { v$: useVuelidate() };
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
credentials: {
|
||||
@@ -155,7 +159,7 @@ export default {
|
||||
return true;
|
||||
},
|
||||
passwordErrorText() {
|
||||
const { password } = this.$v.credentials;
|
||||
const { password } = this.v$.credentials;
|
||||
if (!password.$error) {
|
||||
return '';
|
||||
}
|
||||
@@ -173,8 +177,8 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
async submit() {
|
||||
this.$v.$touch();
|
||||
if (this.$v.$invalid) {
|
||||
this.v$.$touch();
|
||||
if (this.v$.$invalid) {
|
||||
this.resetCaptcha();
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -50,8 +50,8 @@
|
||||
required
|
||||
:label="$t('LOGIN.EMAIL.LABEL')"
|
||||
:placeholder="$t('LOGIN.EMAIL.PLACEHOLDER')"
|
||||
:has-error="$v.credentials.email.$error"
|
||||
@input="$v.credentials.email.$touch"
|
||||
:has-error="v$.credentials.email.$error"
|
||||
@input="v$.credentials.email.$touch"
|
||||
/>
|
||||
<form-input
|
||||
v-model.trim="credentials.password"
|
||||
@@ -62,8 +62,8 @@
|
||||
:tabindex="2"
|
||||
:label="$t('LOGIN.PASSWORD.LABEL')"
|
||||
:placeholder="$t('LOGIN.PASSWORD.PLACEHOLDER')"
|
||||
:has-error="$v.credentials.password.$error"
|
||||
@input="$v.credentials.password.$touch"
|
||||
:has-error="v$.credentials.password.$error"
|
||||
@input="v$.credentials.password.$touch"
|
||||
>
|
||||
<p v-if="!globalConfig.disableUserProfileUpdate">
|
||||
<router-link
|
||||
@@ -91,8 +91,9 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useVuelidate } from '@vuelidate/core';
|
||||
import { required, email } from '@vuelidate/validators';
|
||||
import { useAlert } from 'dashboard/composables';
|
||||
import { required, email } from 'vuelidate/lib/validators';
|
||||
import globalConfigMixin from 'shared/mixins/globalConfigMixin';
|
||||
import SubmitButton from '../../components/Button/SubmitButton.vue';
|
||||
import { mapGetters } from 'vuex';
|
||||
@@ -122,6 +123,9 @@ export default {
|
||||
email: { type: String, default: '' },
|
||||
authError: { type: String, default: '' },
|
||||
},
|
||||
setup() {
|
||||
return { v$: useVuelidate() };
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// We need to initialize the component with any
|
||||
@@ -194,7 +198,7 @@ export default {
|
||||
useAlert(this.loginApi.message);
|
||||
},
|
||||
submitLogin() {
|
||||
if (this.$v.credentials.email.$invalid && !this.email) {
|
||||
if (this.v$.credentials.email.$invalid && !this.email) {
|
||||
this.showAlertMessage(this.$t('LOGIN.EMAIL.ERROR'));
|
||||
return;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user