akadmin/chatwoot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Upgrade @vuelidate to 2.x

Browse Source
This commit is contained in:
Pranav Raj S
2024-01-25 12:15:21 -08:00
parent c33c844039
commit 1fe3960285
81 changed files with 866 additions and 601 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/dashboard/components/CustomAttribute.vue
+19 -9
View File
@@ -13,7 +13,7 @@
<div class="flex items-center justify-between w-full">
<span
class="attribute-name"
:class="{ error: $v.editedValue.$error }"
:class="{ error: v$.editedValue.$error }"
>
{{ label }}
</span>
@@ -39,8 +39,8 @@
:type="inputType"
class="input-group-field"
autofocus="true"
:class="{ error: $v.editedValue.$error }"
@blur="$v.editedValue.$touch"
:class="{ error: v$.editedValue.$error }"
@blur="v$.editedValue.$touch"
@keyup.enter="onUpdate"
/>
<div class="input-group-button">
@@ -122,12 +122,13 @@
<script>
import { format, parseISO } from 'date-fns';
import { required, url } from 'vuelidate/lib/validators';
import { required, url } from '@vuelidate/validators';
import { BUS_EVENTS } from 'shared/constants/busEvents';
import MultiselectDropdown from 'shared/components/ui/MultiselectDropdown.vue';
import { isValidURL } from '../helper/URLHelper';
import customAttributeMixin from '../mixins/customAttributeMixin';
const DATE_FORMAT = 'yyyy-MM-dd';
import { useVuelidate } from '@vuelidate/core';
export default {
components: {
@@ -149,6 +150,9 @@ export default {
attributeKey: { type: String, required: true },
contactId: { type: Number, default: null },
},
setup() {
return { v$: useVuelidate() };
},
data() {
return {
isEditing: false,
@@ -206,13 +210,13 @@ export default {
return this.isAttributeTypeLink ? 'url' : this.attributeType;
},
shouldShowErrorMessage() {
return this.$v.editedValue.$error;
return this.v$.editedValue.$error;
},
errorMessage() {
if (this.$v.editedValue.url) {
if (this.v$.editedValue.url) {
return this.$t('CUSTOM_ATTRIBUTES.VALIDATIONS.INVALID_URL');
}
if (!this.$v.editedValue.regexValidation) {
if (!this.v$.editedValue.regexValidation) {
return this.regexCue
? this.regexCue
: this.$t('CUSTOM_ATTRIBUTES.VALIDATIONS.INVALID_INPUT');
@@ -280,8 +284,8 @@ export default {
this.attributeType === 'date'
? parseISO(this.editedValue)
: this.editedValue;
this.$v.$touch();
if (this.$v.$invalid) {
this.v$.$touch();
if (this.v$.$invalid) {
return;
}
this.isEditing = false;
@@ -302,11 +306,14 @@ export default {
.checkbox-wrap {
@apply flex items-center;
}
.checkbox {
@apply my-0 mr-2 ml-0;
}
.attribute-name {
@apply w-full text-slate-800 dark:text-slate-100;
&.error {
@apply text-red-400 dark:text-red-500;
}
@@ -323,6 +330,7 @@ export default {
.value {
@apply bg-slate-50 dark:bg-slate-700 mb-0;
}
.edit-button {
@apply block;
}
@@ -332,10 +340,12 @@ export default {
::v-deep {
.selector-wrap {
@apply m-0 top-1;
.selector-name {
@apply ml-0;
}
}
.name {
@apply ml-0;
}
app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue
+9 -5
View File
@@ -19,13 +19,13 @@
<form class="flex flex-col w-full" @submit.prevent="addAccount">
<div class="w-full">
<label :class="{ error: $v.accountName.$error }">
<label :class="{ error: v$.accountName.$error }">
{{ $t('CREATE_ACCOUNT.FORM.NAME.LABEL') }}
<input
v-model.trim="accountName"
type="text"
:placeholder="$t('CREATE_ACCOUNT.FORM.NAME.PLACEHOLDER')"
@input="$v.accountName.$touch"
@input="v$.accountName.$touch"
/>
</label>
</div>
@@ -33,8 +33,8 @@
<div class="w-full">
<woot-submit-button
:disabled="
$v.accountName.$invalid ||
$v.accountName.$invalid ||
v$.accountName.$invalid ||
v$.accountName.$invalid ||
uiFlags.isCreating
"
:button-text="$t('CREATE_ACCOUNT.FORM.SUBMIT')"
@@ -49,9 +49,10 @@
</template>
<script>
import { required, minLength } from 'vuelidate/lib/validators';
import { required, minLength } from '@vuelidate/validators';
import { mapGetters } from 'vuex';
import alertMixin from 'shared/mixins/alertMixin';
import { useVuelidate } from '@vuelidate/core';
export default {
mixins: [alertMixin],
@@ -65,6 +66,9 @@ export default {
default: true,
},
},
setup() {
return { v$: useVuelidate() };
},
data() {
return {
accountName: '',
app/javascript/dashboard/components/widgets/AICTAModal.vue
+8 -4
View File
@@ -12,11 +12,11 @@
<woot-input
v-model="value"
type="text"
:class="{ error: $v.value.$error }"
:class="{ error: v$.value.$error }"
:placeholder="
$t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.KEY_PLACEHOLDER')
"
@blur="$v.value.$touch"
@blur="v$.value.$touch"
/>
</div>
<div class="flex flex-row justify-between gap-2 py-2 px-0 w-full">
@@ -27,7 +27,7 @@
<woot-button variant="clear" @click.prevent="onDismiss">
{{ $t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.BUTTONS.DISMISS') }}
</woot-button>
<woot-button :is-disabled="$v.value.$invalid">
<woot-button :is-disabled="v$.value.$invalid">
{{ $t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.BUTTONS.FINISH') }}
</woot-button>
</div>
@@ -37,15 +37,19 @@
</template>
<script>
import { required } from 'vuelidate/lib/validators';
import { required } from '@vuelidate/validators';
import { mapGetters } from 'vuex';
import aiMixin from 'dashboard/mixins/aiMixin';
import alertMixin from 'shared/mixins/alertMixin';
import uiSettingsMixin from 'dashboard/mixins/uiSettings';
import { OPEN_AI_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
import { useVuelidate } from '@vuelidate/core';
export default {
mixins: [aiMixin, alertMixin, uiSettingsMixin],
setup() {
return { v$: useVuelidate() };
},
data() {
return {
value: '',
app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
+8 -4
View File
@@ -41,7 +41,7 @@
:show-query-operator="i !== appliedFilters.length - 1"
:show-user-input="showUserInput(appliedFilters[i].filter_operator)"
:grouped-filters="true"
:v="$v.appliedFilters.$each[i]"
:v="v$.appliedFilters.$each[i]"
@resetFilter="resetFilter(i, appliedFilters[i])"
@removeFilter="removeFilter(i)"
/>
@@ -80,7 +80,7 @@
<script>
import alertMixin from 'shared/mixins/alertMixin';
import { required, requiredIf } from 'vuelidate/lib/validators';
import { required, requiredIf } from '@vuelidate/validators';
import FilterInputBox from '../FilterInput/Index.vue';
import languages from './advancedFilterItems/languages';
import countries from 'shared/constants/countries.js';
@@ -89,6 +89,7 @@ import { filterAttributeGroups } from './advancedFilterItems';
import filterMixin from 'shared/mixins/filterMixin';
import * as OPERATORS from 'dashboard/components/widgets/FilterInput/FilterOperatorTypes.js';
import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
import { useVuelidate } from '@vuelidate/core';
export default {
components: {
@@ -117,6 +118,9 @@ export default {
default: false,
},
},
setup() {
return { v$: useVuelidate() };
},
validations: {
appliedFilters: {
required,
@@ -347,8 +351,8 @@ export default {
}
},
submitFilterQuery() {
this.$v.$touch();
if (this.$v.$invalid) return;
this.v$.$touch();
if (this.v$.$invalid) return;
this.$store.dispatch(
'setConversationFilters',
JSON.parse(JSON.stringify(this.appliedFilters))
app/javascript/dashboard/components/widgets/conversation/EmailTranscriptModal.vue
+10 -5
View File
@@ -45,14 +45,14 @@
}}</label>
</div>
<div v-if="sentToOtherEmailAddress" class="w-[50%] mt-1">
<label :class="{ error: $v.email.$error }">
<label :class="{ error: v$.email.$error }">
<input
v-model.trim="email"
type="text"
:placeholder="$t('EMAIL_TRANSCRIPT.FORM.EMAIL.PLACEHOLDER')"
@input="$v.email.$touch"
@input="v$.email.$touch"
/>
<span v-if="$v.email.$error" class="message">
<span v-if="v$.email.$error" class="message">
{{ $t('EMAIL_TRANSCRIPT.FORM.EMAIL.ERROR') }}
</span>
</label>
@@ -73,8 +73,10 @@
</template>
<script>
import { required, minLength, email } from 'vuelidate/lib/validators';
import { required, minLength, email } from '@vuelidate/validators';
import alertMixin from 'shared/mixins/alertMixin';
import { useVuelidate } from '@vuelidate/core';
export default {
mixins: [alertMixin],
props: {
@@ -87,6 +89,9 @@ export default {
default: () => ({}),
},
},
setup() {
return { v$: useVuelidate() };
},
data() {
return {
email: '',
@@ -108,7 +113,7 @@ export default {
isFormValid() {
if (this.selectedType) {
if (this.sentToOtherEmailAddress) {
return !!this.email && !this.$v.email.$error;
return !!this.email && !this.v$.email.$error;
}
return true;
}
app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue
+15 -12
View File
@@ -1,15 +1,15 @@
<template>
<div>
<div v-if="toEmails">
<div class="input-group small" :class="{ error: $v.toEmailsVal.$error }">
<div class="input-group small" :class="{ error: v$.toEmailsVal.$error }">
<label class="input-group-label">
{{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.TO') }}
</label>
<div class="input-group-field">
<woot-input
v-model.trim="$v.toEmailsVal.$model"
v-model.trim="v$.toEmailsVal.$model"
type="text"
:class="{ error: $v.toEmailsVal.$error }"
:class="{ error: v$.toEmailsVal.$error }"
:placeholder="$t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.PLACEHOLDER')"
@blur="onBlur"
/>
@@ -17,15 +17,15 @@
</div>
</div>
<div class="input-group-wrap">
<div class="input-group small" :class="{ error: $v.ccEmailsVal.$error }">
<div class="input-group small" :class="{ error: v$.ccEmailsVal.$error }">
<label class="input-group-label">
{{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.LABEL') }}
</label>
<div class="input-group-field">
<woot-input
v-model.trim="$v.ccEmailsVal.$model"
v-model.trim="v$.ccEmailsVal.$model"
type="text"
:class="{ error: $v.ccEmailsVal.$error }"
:class="{ error: v$.ccEmailsVal.$error }"
:placeholder="$t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.PLACEHOLDER')"
@blur="onBlur"
/>
@@ -39,20 +39,20 @@
{{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.ADD_BCC') }}
</woot-button>
</div>
<span v-if="$v.ccEmailsVal.$error" class="message">
<span v-if="v$.ccEmailsVal.$error" class="message">
{{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.ERROR') }}
</span>
</div>
<div v-if="showBcc" class="input-group-wrap">
<div class="input-group small" :class="{ error: $v.bccEmailsVal.$error }">
<div class="input-group small" :class="{ error: v$.bccEmailsVal.$error }">
<label class="input-group-label">
{{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.BCC.LABEL') }}
</label>
<div class="input-group-field">
<woot-input
v-model.trim="$v.bccEmailsVal.$model"
v-model.trim="v$.bccEmailsVal.$model"
type="text"
:class="{ error: $v.bccEmailsVal.$error }"
:class="{ error: v$.bccEmailsVal.$error }"
:placeholder="
$t('CONVERSATION.REPLYBOX.EMAIL_HEAD.BCC.PLACEHOLDER')
"
@@ -60,7 +60,7 @@
/>
</div>
</div>
<span v-if="$v.bccEmailsVal.$error" class="message">
<span v-if="v$.bccEmailsVal.$error" class="message">
{{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.BCC.ERROR') }}
</span>
</div>
@@ -137,7 +137,7 @@ export default {
this.showBcc = true;
},
onBlur() {
this.$v.$touch();
this.v$.$touch();
this.$emit('update:bccEmails', this.bccEmailsVal);
this.$emit('update:ccEmails', this.ccEmailsVal);
this.$emit('update:toEmails', this.toEmailsVal);
@@ -149,12 +149,14 @@ export default {
.input-group-wrap .message {
@apply text-sm text-red-500 dark:text-red-500;
}
.input-group {
@apply border-b border-solid border-slate-75 dark:border-slate-700 my-1;
.input-group-label {
@apply border-transparent bg-transparent text-xs font-semibold pl-0;
}
.input-group-field::v-deep input {
@apply mb-0 border-transparent;
}
@@ -162,6 +164,7 @@ export default {
.input-group.error {
@apply border-b-red-500 dark:border-b-red-500;
.input-group-label {
@apply text-red-500 dark:text-red-500;
}
app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplateParser.vue
+8 -1
View File
@@ -45,7 +45,9 @@ const allKeysRequired = value => {
const keys = Object.keys(value);
return keys.every(key => value[key]);
};
import { requiredIf } from 'vuelidate/lib/validators';
import { useVuelidate } from '@vuelidate/core';
import { requiredIf } from '@vuelidate/validators';
export default {
props: {
template: {
@@ -53,6 +55,9 @@ export default {
default: () => {},
},
},
setup() {
return { v$: useVuelidate() };
},
validations: {
processedParams: {
requiredIfKeysPresent: requiredIf('variables'),
@@ -149,9 +154,11 @@ footer {
@apply ml-2.5;
}
}
.error {
@apply bg-red-100 dark:bg-red-100 rounded-md text-red-800 dark:text-red-800 p-2.5 text-center;
}
.template-input {
@apply bg-slate-25 dark:bg-slate-900 text-slate-700 dark:text-slate-100;
}
app/javascript/dashboard/components/widgets/conversation/helpers/emailHeadHelper.js
+1 -1
View File
@@ -1,4 +1,4 @@
import emailValidator from 'vuelidate/lib/validators/email';
import emailValidator from '@vuelidate/validators/email';
export const validEmailsByComma = value => {
if (!value.length) return true;
app/javascript/dashboard/components/widgets/modal/ConfirmDeleteModal.vue
+8 -5
View File
@@ -6,12 +6,12 @@
<woot-input
v-model="value"
type="text"
:class="{ error: $v.value.$error }"
:class="{ error: v$.value.$error }"
:placeholder="confirmPlaceHolderText"
@blur="$v.value.$touch"
@blur="v$.value.$touch"
/>
<div class="button-wrapper">
<woot-button color-scheme="alert" :is-disabled="$v.value.$invalid">
<woot-button color-scheme="alert" :is-disabled="v$.value.$invalid">
{{ confirmText }}
</woot-button>
<woot-button class="clear" @click.prevent="closeModal">
@@ -23,14 +23,14 @@
</template>
<script>
import { required } from 'vuelidate/lib/validators';
import { required } from '@vuelidate/validators';
import Modal from '../../Modal.vue';
import { useVuelidate } from '@vuelidate/core';
export default {
components: {
Modal,
},
props: {
show: {
type: Boolean,
@@ -61,6 +61,9 @@ export default {
default: '',
},
},
setup() {
return { v$: useVuelidate() };
},
data() {
return {
value: '',
app/javascript/dashboard/mixins/automations/methodsMixin.js
+2 -2
View File
@@ -150,8 +150,8 @@ export default {
}
},
submitAutomation() {
this.$v.$touch();
if (this.$v.$invalid) return;
this.v$.$touch();
if (this.v$.$invalid) return;
const automation = generateAutomationPayload(this.automation);
this.$emit('saveAutomation', automation, this.mode);
},
app/javascript/dashboard/mixins/automations/validationsMixin.js
+5 -1
View File
@@ -1,6 +1,10 @@
import { required, requiredIf } from 'vuelidate/lib/validators';
import { required, requiredIf } from '@vuelidate/validators';
import { useVuelidate } from '@vuelidate/core';
export default {
setup() {
return { v$: useVuelidate() };
},
validations: {
automation: {
name: {
app/javascript/dashboard/modules/contact/components/AddCustomAttribute.vue
+9 -5
View File
@@ -8,12 +8,12 @@
<form class="w-full" @submit.prevent="addCustomAttribute">
<woot-input
v-model.trim="attributeName"
:class="{ error: $v.attributeName.$error }"
:class="{ error: v$.attributeName.$error }"
class="w-full"
:error="attributeNameError"
:label="$t('CUSTOM_ATTRIBUTES.FORM.NAME.LABEL')"
:placeholder="$t('CUSTOM_ATTRIBUTES.FORM.NAME.PLACEHOLDER')"
@input="$v.attributeName.$touch"
@input="v$.attributeName.$touch"
/>
<woot-input
v-model.trim="attributeValue"
@@ -23,7 +23,7 @@
/>
<div class="flex justify-end items-center py-2 px-0 gap-2">
<woot-button
:is-disabled="$v.attributeName.$invalid || isCreating"
:is-disabled="v$.attributeName.$invalid || isCreating"
:is-loading="isCreating"
>
{{ $t('CUSTOM_ATTRIBUTES.FORM.CREATE') }}
@@ -39,7 +39,8 @@
<script>
import Modal from 'dashboard/components/Modal.vue';
import alertMixin from 'shared/mixins/alertMixin';
import { required, minLength } from 'vuelidate/lib/validators';
import { required, minLength } from '@vuelidate/validators';
import { useVuelidate } from '@vuelidate/core';
export default {
components: {
@@ -56,6 +57,9 @@ export default {
default: false,
},
},
setup() {
return { v$: useVuelidate() };
},
data() {
return {
attributeValue: '',
@@ -70,7 +74,7 @@ export default {
},
computed: {
attributeNameError() {
if (this.$v.attributeName.$error) {
if (this.v$.attributeName.$error) {
return this.$t('CUSTOM_ATTRIBUTES.FORM.NAME.ERROR');
}
return '';
app/javascript/dashboard/modules/contact/components/MergeContact.vue
+10 -5
View File
@@ -4,7 +4,7 @@
<div>
<div
class="mt-1 multiselect-wrap--medium"
:class="{ error: $v.parentContact.$error }"
:class="{ error: v$.parentContact.$error }"
>
<label class="multiselect__label">
{{ $t('MERGE_CONTACTS.PARENT.TITLE') }}
@@ -52,7 +52,7 @@
{{ $t('AGENT_MGMT.SEARCH.NO_RESULTS') }}
</span>
</multiselect>
<span v-if="$v.parentContact.$error" class="message">
<span v-if="v$.parentContact.$error" class="message">
{{ $t('MERGE_CONTACTS.FORM.CHILD_CONTACT.ERROR') }}
</span>
</div>
@@ -115,7 +115,8 @@
<script>
import alertMixin from 'shared/mixins/alertMixin';
import { required } from 'vuelidate/lib/validators';
import { required } from '@vuelidate/validators';
import { useVuelidate } from '@vuelidate/core';
import MergeContactSummary from 'dashboard/modules/contact/components/MergeContactSummary.vue';
import ContactDropdownItem from './ContactDropdownItem.vue';
@@ -141,6 +142,10 @@ export default {
default: () => [],
},
},
setup() {
return { v$: useVuelidate() };
},
validations: {
primaryContact: {
required,
@@ -165,8 +170,8 @@ export default {
this.$emit('search', query);
},
onSubmit() {
this.$v.$touch();
if (this.$v.$invalid) {
this.v$.$touch();
if (this.v$.$invalid) {
return;
}
this.$emit('submit', this.parentContact.id);
app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue
+9 -4
View File
@@ -41,7 +41,7 @@
:dropdown-values="getDropdownValues(appliedFilters[i].attribute_key)"
:show-query-operator="i !== appliedFilters.length - 1"
:show-user-input="showUserInput(appliedFilters[i].filter_operator)"
:v="$v.appliedFilters.$each[i]"
:v="v$.appliedFilters.$each[i]"
@resetFilter="resetFilter(i, appliedFilters[i])"
@removeFilter="removeFilter(i)"
/>
@@ -90,7 +90,7 @@
<script>
import alertMixin from 'shared/mixins/alertMixin';
import { required } from 'vuelidate/lib/validators';
import { required } from '@vuelidate/validators';
import FilterInputBox from '../../../../components/widgets/FilterInput/Index.vue';
import countries from 'shared/constants/countries.js';
import { mapGetters } from 'vuex';
@@ -98,6 +98,8 @@ import { filterAttributeGroups } from '../contactFilterItems';
import filterMixin from 'shared/mixins/filterMixin';
import * as OPERATORS from 'dashboard/components/widgets/FilterInput/FilterOperatorTypes.js';
import { CONTACTS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
import { useVuelidate } from '@vuelidate/core';
export default {
components: {
FilterInputBox,
@@ -125,6 +127,9 @@ export default {
default: '',
},
},
setup() {
return { v$: useVuelidate() };
},
validations: {
appliedFilters: {
required,
@@ -314,8 +319,8 @@ export default {
}
},
submitFilterQuery() {
this.$v.$touch();
if (this.$v.$invalid) return;
this.v$.$touch();
if (this.v$.$invalid) return;
this.$store.dispatch(
'contacts/setContactFilters',
JSON.parse(JSON.stringify(this.appliedFilters))
app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
+15 -11
View File
@@ -18,38 +18,38 @@
</div>
<div>
<div class="w-full">
<label :class="{ error: $v.name.$error }">
<label :class="{ error: v$.name.$error }">
{{ $t('CONTACT_FORM.FORM.NAME.LABEL') }}
<input
v-model.trim="name"
type="text"
:placeholder="$t('CONTACT_FORM.FORM.NAME.PLACEHOLDER')"
@input="$v.name.$touch"
@input="v$.name.$touch"
/>
</label>
<label :class="{ error: $v.email.$error }">
<label :class="{ error: v$.email.$error }">
{{ $t('CONTACT_FORM.FORM.EMAIL_ADDRESS.LABEL') }}
<input
v-model.trim="email"
type="text"
:placeholder="$t('CONTACT_FORM.FORM.EMAIL_ADDRESS.PLACEHOLDER')"
@input="$v.email.$touch"
@input="v$.email.$touch"
/>
<span v-if="$v.email.$error" class="message">
<span v-if="v$.email.$error" class="message">
{{ $t('CONTACT_FORM.FORM.EMAIL_ADDRESS.ERROR') }}
</span>
</label>
</div>
</div>
<div class="w-full">
<label :class="{ error: $v.description.$error }">
<label :class="{ error: v$.description.$error }">
{{ $t('CONTACT_FORM.FORM.BIO.LABEL') }}
<textarea
v-model.trim="description"
type="text"
:placeholder="$t('CONTACT_FORM.FORM.BIO.PLACEHOLDER')"
@input="$v.description.$touch"
@input="v$.description.$touch"
/>
</label>
</div>
@@ -67,7 +67,7 @@
:error="isPhoneNumberNotValid"
:placeholder="$t('CONTACT_FORM.FORM.PHONE_NUMBER.PLACEHOLDER')"
@input="onPhoneNumberInputChange"
@blur="$v.phoneNumber.$touch"
@blur="v$.phoneNumber.$touch"
@setCode="setPhoneCode"
/>
<span v-if="isPhoneNumberNotValid" class="message">
@@ -151,10 +151,11 @@ import {
DuplicateContactException,
ExceptionWithMessage,
} from 'shared/helpers/CustomErrors';
import { required, email } from 'vuelidate/lib/validators';
import { required, email } from '@vuelidate/validators';
import countries from 'shared/constants/countries.js';
import { isPhoneNumberValid } from 'shared/helpers/Validators';
import parsePhoneNumber from 'libphonenumber-js';
import { useVuelidate } from '@vuelidate/core';
export default {
mixins: [alertMixin],
@@ -172,6 +173,9 @@ export default {
default: () => {},
},
},
setup() {
return { v$: useVuelidate() };
},
data() {
return {
countries: countries,
@@ -364,8 +368,8 @@ export default {
}
},
async handleSubmit() {
this.$v.$touch();
if (this.$v.$invalid || this.isPhoneNumberNotValid) {
this.v$.$touch();
if (this.v$.$invalid || this.isPhoneNumberNotValid) {
return;
}
try {
app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue
+22 -15
View File
@@ -13,7 +13,7 @@
</label>
<div
class="multiselect-wrap--small"
:class="{ 'has-multi-select-error': $v.targetInbox.$error }"
:class="{ 'has-multi-select-error': v$.targetInbox.$error }"
>
<multiselect
v-model="targetInbox"
@@ -47,8 +47,8 @@
</template>
</multiselect>
</div>
<label :class="{ error: $v.targetInbox.$error }">
<span v-if="$v.targetInbox.$error" class="message">
<label :class="{ error: v$.targetInbox.$error }">
<span v-if="v$.targetInbox.$error" class="message">
{{ $t('NEW_CONVERSATION.FORM.INBOX.ERROR') }}
</span>
</label>
@@ -76,15 +76,15 @@
</div>
<div v-if="isAnEmailInbox" class="w-full">
<div class="w-full">
<label :class="{ error: $v.subject.$error }">
<label :class="{ error: v$.subject.$error }">
{{ $t('NEW_CONVERSATION.FORM.SUBJECT.LABEL') }}
<input
v-model="subject"
type="text"
:placeholder="$t('NEW_CONVERSATION.FORM.SUBJECT.PLACEHOLDER')"
@input="$v.subject.$touch"
@input="v$.subject.$touch"
/>
<span v-if="$v.subject.$error" class="message">
<span v-if="v$.subject.$error" class="message">
{{ $t('NEW_CONVERSATION.FORM.SUBJECT.ERROR') }}
</span>
</label>
@@ -112,13 +112,13 @@
<woot-message-editor
v-model="message"
class="message-editor"
:class="{ editor_warning: $v.message.$error }"
:class="{ editor_warning: v$.message.$error }"
:enable-variables="true"
:signature="signatureToApply"
:allow-signature="true"
:placeholder="$t('NEW_CONVERSATION.FORM.MESSAGE.PLACEHOLDER')"
@toggle-canned-menu="toggleCannedMenu"
@blur="$v.message.$touch"
@blur="v$.message.$touch"
>
<template #footer>
<message-signature-missing-alert
@@ -138,7 +138,7 @@
</div>
</template>
</woot-message-editor>
<span v-if="$v.message.$error" class="editor-warning__message">
<span v-if="v$.message.$error" class="editor-warning__message">
{{ $t('NEW_CONVERSATION.FORM.MESSAGE.ERROR') }}
</span>
</div>
@@ -149,16 +149,16 @@
@on-select-template="toggleWaTemplate"
@on-send="onSendWhatsAppReply"
/>
<label v-else :class="{ error: $v.message.$error }">
<label v-else :class="{ error: v$.message.$error }">
{{ $t('NEW_CONVERSATION.FORM.MESSAGE.LABEL') }}
<textarea
v-model="message"
class="min-h-[5rem]"
type="text"
:placeholder="$t('NEW_CONVERSATION.FORM.MESSAGE.PLACEHOLDER')"
@input="$v.message.$touch"
@input="v$.message.$touch"
/>
<span v-if="$v.message.$error" class="message">
<span v-if="v$.message.$error" class="message">
{{ $t('NEW_CONVERSATION.FORM.MESSAGE.ERROR') }}
</span>
</label>
@@ -247,7 +247,7 @@ import alertMixin from 'shared/mixins/alertMixin';
import { INBOX_TYPES } from 'shared/mixins/inboxMixin';
import { ExceptionWithMessage } from 'shared/helpers/CustomErrors';
import { getInboxSource } from 'dashboard/helper/inbox';
import { required, requiredIf } from 'vuelidate/lib/validators';
import { required, requiredIf } from '@vuelidate/validators';
import inboxMixin from 'shared/mixins/inboxMixin';
import FileUpload from 'vue-upload-component';
import AttachmentPreview from 'dashboard/components/widgets/AttachmentsPreview';
@@ -258,6 +258,7 @@ import {
removeSignature,
} from 'dashboard/helper/editorHelper';
import uiSettingsMixin from 'dashboard/mixins/uiSettings';
import { useVuelidate } from '@vuelidate/core';
export default {
components: {
@@ -286,6 +287,9 @@ export default {
default: '',
},
},
setup() {
return { v$: useVuelidate() };
},
data() {
return {
name: '',
@@ -494,8 +498,8 @@ export default {
},
onFormSubmit() {
const isFromWhatsApp = false;
this.$v.$touch();
if (this.$v.$invalid) {
this.v$.$touch();
if (this.v$.$invalid) {
return;
}
this.createConversation({
@@ -571,6 +575,7 @@ export default {
.file-uploads {
@apply text-start;
}
.multiselect-wrap--small.has-multi-select-error {
::v-deep {
.multiselect__tags {
@@ -583,9 +588,11 @@ export default {
.mention--box {
@apply left-0 m-auto right-0 top-auto h-fit;
}
.multiselect .multiselect__content .multiselect__option span {
@apply inline-flex w-6 text-slate-600 dark:text-slate-400;
}
.multiselect .multiselect__content .multiselect__option {
@apply py-0.5 px-1;
}
app/javascript/dashboard/routes/dashboard/customviews/AddCustomViews.vue
+11 -8
View File
@@ -8,11 +8,11 @@
:label="$t('FILTER.CUSTOM_VIEWS.ADD.LABEL')"
type="text"
:error="
$v.name.$error ? $t('FILTER.CUSTOM_VIEWS.ADD.ERROR_MESSAGE') : ''
v$.name.$error ? $t('FILTER.CUSTOM_VIEWS.ADD.ERROR_MESSAGE') : ''
"
:class="{ error: $v.name.$error }"
:class="{ error: v$.name.$error }"
:placeholder="$t('FILTER.CUSTOM_VIEWS.ADD.PLACEHOLDER')"
@blur="$v.name.$touch"
@blur="v$.name.$touch"
/>
<div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
@@ -29,9 +29,10 @@
</template>
<script>
import { required, minLength } from 'vuelidate/lib/validators';
import { required, minLength } from '@vuelidate/validators';
import alertMixin from 'shared/mixins/alertMixin';
import { CONTACTS_EVENTS } from '../../../helper/AnalyticsHelper/events';
import { useVuelidate } from '@vuelidate/core';
export default {
mixins: [alertMixin],
@@ -49,7 +50,9 @@ export default {
default: () => {},
},
},
setup() {
return { v$: useVuelidate() };
},
data() {
return {
show: true,
@@ -59,7 +62,7 @@ export default {
computed: {
isButtonDisabled() {
return this.$v.name.$invalid;
return this.v$.name.$invalid;
},
},
@@ -75,8 +78,8 @@ export default {
this.$emit('close');
},
async saveCustomViews() {
this.$v.$touch();
if (this.$v.$invalid) {
this.v$.$touch();
if (this.v$.$invalid) {
return;
}
try {
app/javascript/dashboard/routes/dashboard/helpcenter/components/AddLocale.vue
+11 -5
View File
@@ -7,7 +7,7 @@
/>
<form class="w-full" @submit.prevent="onCreate">
<div class="w-full">
<label :class="{ error: $v.selectedLocale.$error }">
<label :class="{ error: v$.selectedLocale.$error }">
{{ $t('HELP_CENTER.PORTAL.ADD_LOCALE.LOCALE.LABEL') }}
<select v-model="selectedLocale">
<option
@@ -18,7 +18,7 @@
{{ locale.name }}-{{ locale.code }}
</option>
</select>
<span v-if="$v.selectedLocale.$error" class="message">
<span v-if="v$.selectedLocale.$error" class="message">
{{ $t('HELP_CENTER.PORTAL.ADD_LOCALE.LOCALE.ERROR') }}
</span>
</label>
@@ -41,9 +41,11 @@
<script>
import Modal from 'dashboard/components/Modal.vue';
import alertMixin from 'shared/mixins/alertMixin';
import { required } from 'vuelidate/lib/validators';
import { required } from '@vuelidate/validators';
import allLocales from 'shared/constants/locales.js';
import { PORTALS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
import { useVuelidate } from '@vuelidate/core';
export default {
components: {
Modal,
@@ -59,6 +61,9 @@ export default {
default: () => ({}),
},
},
setup() {
return { v$: useVuelidate() };
},
data() {
return {
selectedLocale: '',
@@ -94,8 +99,8 @@ export default {
},
methods: {
async onCreate() {
this.$v.$touch();
if (this.$v.$invalid) {
this.v$.$touch();
if (this.v$.$invalid) {
return;
}
const updatedLocales = this.addedLocales;
@@ -137,6 +142,7 @@ export default {
input {
margin-bottom: 0;
}
.message {
margin-top: 0;
}
app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue
+18 -13
View File
@@ -42,35 +42,35 @@
<div class="mb-4">
<woot-input
v-model.trim="name"
:class="{ error: $v.name.$error }"
:class="{ error: v$.name.$error }"
:error="nameError"
:label="$t('HELP_CENTER.PORTAL.ADD.NAME.LABEL')"
:placeholder="$t('HELP_CENTER.PORTAL.ADD.NAME.PLACEHOLDER')"
:help-text="$t('HELP_CENTER.PORTAL.ADD.NAME.HELP_TEXT')"
@blur="$v.name.$touch"
@blur="v$.name.$touch"
@input="onNameChange"
/>
</div>
<div class="mb-4">
<woot-input
v-model.trim="slug"
:class="{ error: $v.slug.$error }"
:class="{ error: v$.slug.$error }"
:error="slugError"
:label="$t('HELP_CENTER.PORTAL.ADD.SLUG.LABEL')"
:placeholder="$t('HELP_CENTER.PORTAL.ADD.SLUG.PLACEHOLDER')"
:help-text="domainHelpText"
@blur="$v.slug.$touch"
@blur="v$.slug.$touch"
/>
</div>
<div class="mb-4">
<woot-input
v-model.trim="domain"
:class="{ error: $v.domain.$error }"
:class="{ error: v$.domain.$error }"
:label="$t('HELP_CENTER.PORTAL.ADD.DOMAIN.LABEL')"
:placeholder="$t('HELP_CENTER.PORTAL.ADD.DOMAIN.PLACEHOLDER')"
:help-text="domainExampleHelpText"
:error="domainError"
@blur="$v.domain.$touch"
@blur="v$.domain.$touch"
/>
</div>
</div>
@@ -78,7 +78,7 @@
<div class="flex-end">
<woot-button
:is-loading="isSubmitting"
:is-disabled="$v.$invalid"
:is-disabled="v$.$invalid"
@click="onSubmitClick"
>
{{ submitButtonText }}
@@ -88,8 +88,9 @@
</template>
<script>
import { required, minLength } from 'vuelidate/lib/validators';
import { required, minLength } from '@vuelidate/validators';
import { isDomain } from 'shared/helpers/Validators';
import { useVuelidate } from '@vuelidate/core';
import alertMixin from 'shared/mixins/alertMixin';
import { convertToCategorySlug } from 'dashboard/helper/commons.js';
@@ -118,6 +119,9 @@ export default {
default: '',
},
},
setup() {
return { v$: useVuelidate() };
},
data() {
return {
name: '',
@@ -144,19 +148,19 @@ export default {
},
computed: {
nameError() {
if (this.$v.name.$error) {
if (this.v$.name.$error) {
return this.$t('HELP_CENTER.CATEGORY.ADD.NAME.ERROR');
}
return '';
},
slugError() {
if (this.$v.slug.$error) {
if (this.v$.slug.$error) {
return this.$t('HELP_CENTER.CATEGORY.ADD.SLUG.ERROR');
}
return '';
},
domainError() {
if (this.$v.domain.$error) {
if (this.v$.domain.$error) {
return this.$t('HELP_CENTER.PORTAL.ADD.DOMAIN.ERROR');
}
return '';
@@ -192,8 +196,8 @@ export default {
this.slug = convertToCategorySlug(this.name);
},
onSubmitClick() {
this.$v.$touch();
if (this.$v.$invalid) {
this.v$.$touch();
if (this.v$.$invalid) {
return;
}
@@ -251,6 +255,7 @@ export default {
input {
@apply mb-1;
}
.help-text {
@apply mb-0;
}
app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsCustomizationForm.vue
+13 -8
View File
@@ -47,12 +47,12 @@
"
:help-text="homepageExampleHelpText"
:error="
$v.homePageLink.$error
v$.homePageLink.$error
? $t('HELP_CENTER.PORTAL.ADD.HOME_PAGE_LINK.ERROR')
: ''
"
:class="{ error: $v.homePageLink.$error }"
@blur="$v.homePageLink.$touch"
:class="{ error: v$.homePageLink.$error }"
@blur="v$.homePageLink.$touch"
/>
</div>
</div>
@@ -60,7 +60,7 @@
<div class="flex-end">
<woot-button
:is-loading="isSubmitting"
:is-disabled="$v.$invalid"
:is-disabled="v$.$invalid"
@click="onSubmitClick"
>
{{
@@ -74,8 +74,9 @@
</template>
<script>
import { url } from 'vuelidate/lib/validators';
import { url } from '@vuelidate/validators';
import { getRandomColor } from 'dashboard/helper/labelColor';
import { useVuelidate } from '@vuelidate/core';
import alertMixin from 'shared/mixins/alertMixin';
import wootConstants from 'dashboard/constants/globals';
@@ -83,7 +84,6 @@ import wootConstants from 'dashboard/constants/globals';
const { EXAMPLE_URL } = wootConstants;
export default {
components: {},
mixins: [alertMixin],
props: {
portal: {
@@ -95,6 +95,9 @@ export default {
default: false,
},
},
setup() {
return { v$: useVuelidate() };
},
data() {
return {
color: '#000',
@@ -132,8 +135,8 @@ export default {
}
},
onSubmitClick() {
this.$v.$touch();
if (this.$v.$invalid) {
this.v$.$touch();
if (this.v$.$invalid) {
return;
}
const portal = {
@@ -158,9 +161,11 @@ export default {
input {
@apply mb-1;
}
.help-text {
@apply mb-0;
}
.colorpicker--selected {
@apply mb-0;
}
app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/AddCategory.vue
+11 -7
View File
@@ -25,20 +25,20 @@
:label="$t('HELP_CENTER.CATEGORY.ADD.NAME.LABEL')"
:placeholder="$t('HELP_CENTER.CATEGORY.ADD.NAME.PLACEHOLDER')"
:help-text="$t('HELP_CENTER.CATEGORY.ADD.NAME.HELP_TEXT')"
:has-error="$v.name.$error"
:has-error="v$.name.$error"
:error-message="$t('HELP_CENTER.CATEGORY.ADD.NAME.ERROR')"
@name-change="onNameChange"
@icon-change="onClickInsertEmoji"
/>
<woot-input
v-model.trim="slug"
:class="{ error: $v.slug.$error }"
:class="{ error: v$.slug.$error }"
class="w-full"
:error="slugError"
:label="$t('HELP_CENTER.CATEGORY.ADD.SLUG.LABEL')"
:placeholder="$t('HELP_CENTER.CATEGORY.ADD.SLUG.PLACEHOLDER')"
:help-text="$t('HELP_CENTER.CATEGORY.ADD.SLUG.HELP_TEXT')"
@input="$v.slug.$touch"
@input="v$.slug.$touch"
/>
<label>
{{ $t('HELP_CENTER.CATEGORY.ADD.DESCRIPTION.LABEL') }}
@@ -68,10 +68,11 @@
<script>
import alertMixin from 'shared/mixins/alertMixin';
import { required, minLength } from 'vuelidate/lib/validators';
import { required, minLength } from '@vuelidate/validators';
import { convertToCategorySlug } from 'dashboard/helper/commons.js';
import { PORTALS_EVENTS } from '../../../../../helper/AnalyticsHelper/events';
import CategoryNameIconInput from './NameEmojiInput.vue';
import { useVuelidate } from '@vuelidate/core';
export default {
components: { CategoryNameIconInput },
@@ -94,6 +95,9 @@ export default {
default: '',
},
},
setup() {
return { v$: useVuelidate() };
},
data() {
return {
name: '',
@@ -118,7 +122,7 @@ export default {
: this.portalSlug;
},
slugError() {
if (this.$v.slug.$error) {
if (this.v$.slug.$error) {
return this.$t('HELP_CENTER.CATEGORY.ADD.SLUG.ERROR');
}
return '';
@@ -148,8 +152,8 @@ export default {
description,
locale,
};
this.$v.$touch();
if (this.$v.$invalid) {
this.v$.$touch();
if (this.v$.$invalid) {
return;
}
try {
app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue
+12 -7
View File
@@ -25,7 +25,7 @@
:label="$t('HELP_CENTER.CATEGORY.EDIT.NAME.LABEL')"
:placeholder="$t('HELP_CENTER.CATEGORY.EDIT.NAME.PLACEHOLDER')"
:help-text="$t('HELP_CENTER.CATEGORY.EDIT.NAME.HELP_TEXT')"
:has-error="$v.name.$error"
:has-error="v$.name.$error"
:error-message="$t('HELP_CENTER.CATEGORY.ADD.NAME.ERROR')"
:existing-name="category.name"
:saved-icon="category.icon"
@@ -34,13 +34,13 @@
/>
<woot-input
v-model.trim="slug"
:class="{ error: $v.slug.$error }"
:class="{ error: v$.slug.$error }"
class="w-full"
:error="slugError"
:label="$t('HELP_CENTER.CATEGORY.EDIT.SLUG.LABEL')"
:placeholder="$t('HELP_CENTER.CATEGORY.EDIT.SLUG.PLACEHOLDER')"
:help-text="$t('HELP_CENTER.CATEGORY.EDIT.SLUG.HELP_TEXT')"
@input="$v.slug.$touch"
@input="v$.slug.$touch"
/>
<label>
{{ $t('HELP_CENTER.CATEGORY.EDIT.DESCRIPTION.LABEL') }}
@@ -70,10 +70,11 @@
<script>
import alertMixin from 'shared/mixins/alertMixin';
import { required, minLength } from 'vuelidate/lib/validators';
import { required, minLength } from '@vuelidate/validators';
import { convertToCategorySlug } from 'dashboard/helper/commons.js';
import { PORTALS_EVENTS } from '../../../../../helper/AnalyticsHelper/events';
import CategoryNameIconInput from './NameEmojiInput.vue';
import { useVuelidate } from '@vuelidate/core';
export default {
components: { CategoryNameIconInput },
@@ -100,6 +101,9 @@ export default {
default: '',
},
},
setup() {
return { v$: useVuelidate() };
},
data() {
return {
id: this.category.id,
@@ -120,7 +124,7 @@ export default {
},
computed: {
slugError() {
if (this.$v.slug.$error) {
if (this.v$.slug.$error) {
return this.$t('HELP_CENTER.CATEGORY.ADD.SLUG.ERROR');
}
return '';
@@ -159,8 +163,8 @@ export default {
slug,
description,
};
this.$v.$touch();
if (this.$v.$invalid) {
this.v$.$touch();
if (this.v$.$invalid) {
return;
}
try {
@@ -190,6 +194,7 @@ export default {
.article-info {
width: 100%;
margin: 0 0 var(--space-normal);
.value {
color: var(--s-600);
}
app/javascript/dashboard/routes/dashboard/settings/account/Index.vue
+15 -11
View File
@@ -13,19 +13,19 @@
<p>{{ $t('GENERAL_SETTINGS.FORM.GENERAL_SECTION.NOTE') }}</p>
</div>
<div class="p-4 flex-grow-0 flex-shrink-0 flex-[50%]">
<label :class="{ error: $v.name.$error }">
<label :class="{ error: v$.name.$error }">
{{ $t('GENERAL_SETTINGS.FORM.NAME.LABEL') }}
<input
v-model="name"
type="text"
:placeholder="$t('GENERAL_SETTINGS.FORM.NAME.PLACEHOLDER')"
@blur="$v.name.$touch"
@blur="v$.name.$touch"
/>
<span v-if="$v.name.$error" class="message">
<span v-if="v$.name.$error" class="message">
{{ $t('GENERAL_SETTINGS.FORM.NAME.ERROR') }}
</span>
</label>
<label :class="{ error: $v.locale.$error }">
<label :class="{ error: v$.locale.$error }">
{{ $t('GENERAL_SETTINGS.FORM.LANGUAGE.LABEL') }}
<select v-model="locale">
<option
@@ -36,7 +36,7 @@
{{ lang.name }}
</option>
</select>
<span v-if="$v.locale.$error" class="message">
<span v-if="v$.locale.$error" class="message">
{{ $t('GENERAL_SETTINGS.FORM.LANGUAGE.ERROR') }}
</span>
</label>
@@ -68,7 +68,7 @@
</label>
<label
v-if="showAutoResolutionConfig"
:class="{ error: $v.autoResolveDuration.$error }"
:class="{ error: v$.autoResolveDuration.$error }"
>
{{ $t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.LABEL') }}
<input
@@ -77,9 +77,9 @@
:placeholder="
$t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.PLACEHOLDER')
"
@blur="$v.autoResolveDuration.$touch"
@blur="v$.autoResolveDuration.$touch"
/>
<span v-if="$v.autoResolveDuration.$error" class="message">
<span v-if="v$.autoResolveDuration.$error" class="message">
{{ $t('GENERAL_SETTINGS.FORM.AUTO_RESOLVE_DURATION.ERROR') }}
</span>
</label>
@@ -129,7 +129,7 @@
</template>
<script>
import { required, minValue, maxValue } from 'vuelidate/lib/validators';
import { required, minValue, maxValue } from '@vuelidate/validators';
import { mapGetters } from 'vuex';
import alertMixin from 'shared/mixins/alertMixin';
import configMixin from 'shared/mixins/configMixin';
@@ -138,9 +138,13 @@ import { FEATURE_FLAGS } from '../../../../featureFlags';
import semver from 'semver';
import uiSettingsMixin from 'dashboard/mixins/uiSettings';
import { getLanguageDirection } from 'dashboard/components/widgets/conversation/advancedFilterItems/languages';
import { useVuelidate } from '@vuelidate/core';
export default {
mixins: [accountMixin, alertMixin, configMixin, uiSettingsMixin],
setup() {
return { v$: useVuelidate() };
},
data() {
return {
id: '',
@@ -251,8 +255,8 @@ export default {
},
async updateAccount() {
this.$v.$touch();
if (this.$v.$invalid) {
this.v$.$touch();
if (this.v$.$invalid) {
this.showAlert(this.$t('GENERAL_SETTINGS.FORM.ERROR'));
return;
}
app/javascript/dashboard/routes/dashboard/settings/agentBots/components/CSMLBotEditor.vue
+10 -6
View File
@@ -5,7 +5,7 @@
<div class="h-[calc(100vh-56px)] relative">
<csml-monaco-editor v-model="bot.csmlContent" class="w-full h-full" />
<div
v-if="$v.bot.csmlContent.$error"
v-if="v$.bot.csmlContent.$error"
class="bg-red-100 dark:bg-red-200 text-white dark:text-white absolute bottom-0 w-full p-2.5 flex items-center text-xs justify-center flex-shrink-0"
>
<span>{{ $t('AGENT_BOTS.CSML_BOT_EDITOR.BOT_CONFIG.ERROR') }}</span>
@@ -18,14 +18,14 @@
@submit.prevent="onSubmit"
>
<div>
<label :class="{ error: $v.bot.name.$error }">
<label :class="{ error: v$.bot.name.$error }">
{{ $t('AGENT_BOTS.CSML_BOT_EDITOR.NAME.LABEL') }}
<input
v-model="bot.name"
type="text"
:placeholder="$t('AGENT_BOTS.CSML_BOT_EDITOR.NAME.PLACEHOLDER')"
/>
<span v-if="$v.bot.name.$error" class="message">
<span v-if="v$.bot.name.$error" class="message">
{{ $t('AGENT_BOTS.CSML_BOT_EDITOR.NAME.ERROR') }}
</span>
</label>
@@ -50,8 +50,9 @@
</template>
<script>
import { required } from 'vuelidate/lib/validators';
import { required } from '@vuelidate/validators';
import CsmlMonacoEditor from './CSMLMonacoEditor.vue';
import { useVuelidate } from '@vuelidate/core';
export default {
components: { CsmlMonacoEditor },
@@ -61,6 +62,9 @@ export default {
default: () => {},
},
},
setup() {
return { v$: useVuelidate() };
},
validations: {
bot: {
name: { required },
@@ -78,8 +82,8 @@ export default {
},
methods: {
onSubmit() {
this.$v.$touch();
if (this.$v.$invalid) {
this.v$.$touch();
if (this.v$.$invalid) {
return;
}
this.$emit('submit', {
app/javascript/dashboard/routes/dashboard/settings/agents/AddAgent.vue
+13 -9
View File
@@ -11,37 +11,37 @@
@submit.prevent="addAgent()"
>
<div class="w-full">
<label :class="{ error: $v.agentName.$error }">
<label :class="{ error: v$.agentName.$error }">
{{ $t('AGENT_MGMT.ADD.FORM.NAME.LABEL') }}
<input
v-model.trim="agentName"
type="text"
:placeholder="$t('AGENT_MGMT.ADD.FORM.NAME.PLACEHOLDER')"
@input="$v.agentName.$touch"
@input="v$.agentName.$touch"
/>
</label>
</div>
<div class="w-full">
<label :class="{ error: $v.agentType.$error }">
<label :class="{ error: v$.agentType.$error }">
{{ $t('AGENT_MGMT.ADD.FORM.AGENT_TYPE.LABEL') }}
<select v-model="agentType">
<option v-for="role in roles" :key="role.name" :value="role.name">
{{ role.label }}
</option>
</select>
<span v-if="$v.agentType.$error" class="message">
<span v-if="v$.agentType.$error" class="message">
{{ $t('AGENT_MGMT.ADD.FORM.AGENT_TYPE.ERROR') }}
</span>
</label>
</div>
<div class="w-full">
<label :class="{ error: $v.agentEmail.$error }">
<label :class="{ error: v$.agentEmail.$error }">
{{ $t('AGENT_MGMT.ADD.FORM.EMAIL.LABEL') }}
<input
v-model.trim="agentEmail"
type="text"
:placeholder="$t('AGENT_MGMT.ADD.FORM.EMAIL.PLACEHOLDER')"
@input="$v.agentEmail.$touch"
@input="v$.agentEmail.$touch"
/>
</label>
</div>
@@ -49,8 +49,8 @@
<div class="w-full">
<woot-submit-button
:disabled="
$v.agentEmail.$invalid ||
$v.agentName.$invalid ||
v$.agentEmail.$invalid ||
v$.agentName.$invalid ||
uiFlags.isCreating
"
:button-text="$t('AGENT_MGMT.ADD.FORM.SUBMIT')"
@@ -67,8 +67,9 @@
</template>
<script>
import { required, minLength, email } from 'vuelidate/lib/validators';
import { required, minLength, email } from '@vuelidate/validators';
import { mapGetters } from 'vuex';
import { useVuelidate } from '@vuelidate/core';
export default {
props: {
@@ -77,6 +78,9 @@ export default {
default: () => {},
},
},
setup() {
return { v$: useVuelidate() };
},
data() {
return {
agentName: '',
app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue
+13 -9
View File
@@ -4,33 +4,33 @@
<woot-modal-header :header-title="pageTitle" />
<form class="w-full" @submit.prevent="editAgent()">
<div class="w-full">
<label :class="{ error: $v.agentName.$error }">
<label :class="{ error: v$.agentName.$error }">
{{ $t('AGENT_MGMT.EDIT.FORM.NAME.LABEL') }}
<input
v-model.trim="agentName"
type="text"
:placeholder="$t('AGENT_MGMT.EDIT.FORM.NAME.PLACEHOLDER')"
@input="$v.agentName.$touch"
@input="v$.agentName.$touch"
/>
</label>
</div>
<div class="w-full">
<label :class="{ error: $v.agentType.$error }">
<label :class="{ error: v$.agentType.$error }">
{{ $t('AGENT_MGMT.EDIT.FORM.AGENT_TYPE.LABEL') }}
<select v-model="agentType">
<option v-for="role in roles" :key="role.name" :value="role.name">
{{ role.label }}
</option>
</select>
<span v-if="$v.agentType.$error" class="message">
<span v-if="v$.agentType.$error" class="message">
{{ $t('AGENT_MGMT.EDIT.FORM.AGENT_TYPE.ERROR') }}
</span>
</label>
</div>
<div class="w-full">
<label :class="{ error: $v.agentAvailability.$error }">
<label :class="{ error: v$.agentAvailability.$error }">
{{ $t('PROFILE_SETTINGS.FORM.AVAILABILITY.LABEL') }}
<select v-model="agentAvailability">
<option
@@ -41,7 +41,7 @@
{{ role.label }}
</option>
</select>
<span v-if="$v.agentAvailability.$error" class="message">
<span v-if="v$.agentAvailability.$error" class="message">
{{ $t('AGENT_MGMT.EDIT.FORM.AGENT_AVAILABILITY.ERROR') }}
</span>
</label>
@@ -50,8 +50,8 @@
<div class="w-[50%]">
<woot-submit-button
:disabled="
$v.agentType.$invalid ||
$v.agentName.$invalid ||
v$.agentType.$invalid ||
v$.agentName.$invalid ||
uiFlags.isUpdating
"
:button-text="$t('AGENT_MGMT.EDIT.FORM.SUBMIT')"
@@ -77,12 +77,13 @@
</template>
<script>
import { required, minLength } from 'vuelidate/lib/validators';
import { required, minLength } from '@vuelidate/validators';
import { mapGetters } from 'vuex';
import WootSubmitButton from '../../../../components/buttons/FormSubmitButton.vue';
import Modal from '../../../../components/Modal.vue';
import Auth from '../../../../api/auth';
import wootConstants from 'dashboard/constants/globals';
import { useVuelidate } from '@vuelidate/core';
const { AVAILABILITY_STATUS_KEYS } = wootConstants;
@@ -117,6 +118,9 @@ export default {
required: true,
},
},
setup() {
return { v$: useVuelidate() };
},
data() {
return {
roles: [
app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue
+29 -19
View File
@@ -5,14 +5,14 @@
<form class="flex w-full" @submit.prevent="addAttributes">
<div class="w-full">
<label :class="{ error: $v.attributeModel.$error }">
<label :class="{ error: v$.attributeModel.$error }">
{{ $t('ATTRIBUTES_MGMT.ADD.FORM.MODEL.LABEL') }}
<select v-model="attributeModel">
<option v-for="model in models" :key="model.id" :value="model.id">
{{ model.option }}
</option>
</select>
<span v-if="$v.attributeModel.$error" class="message">
<span v-if="v$.attributeModel.$error" class="message">
{{ $t('ATTRIBUTES_MGMT.ADD.FORM.MODEL.ERROR') }}
</span>
</label>
@@ -20,46 +20,46 @@
v-model="displayName"
:label="$t('ATTRIBUTES_MGMT.ADD.FORM.NAME.LABEL')"
type="text"
:class="{ error: $v.displayName.$error }"
:class="{ error: v$.displayName.$error }"
:error="
$v.displayName.$error
v$.displayName.$error
? $t('ATTRIBUTES_MGMT.ADD.FORM.NAME.ERROR')
: ''
"
:placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.NAME.PLACEHOLDER')"
@input="onDisplayNameChange"
@blur="$v.displayName.$touch"
@blur="v$.displayName.$touch"
/>
<woot-input
v-model="attributeKey"
:label="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.LABEL')"
type="text"
:class="{ error: $v.attributeKey.$error }"
:error="$v.attributeKey.$error ? keyErrorMessage : ''"
:class="{ error: v$.attributeKey.$error }"
:error="v$.attributeKey.$error ? keyErrorMessage : ''"
:placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.PLACEHOLDER')"
@blur="$v.attributeKey.$touch"
@blur="v$.attributeKey.$touch"
/>
<label :class="{ error: $v.description.$error }">
<label :class="{ error: v$.description.$error }">
{{ $t('ATTRIBUTES_MGMT.ADD.FORM.DESC.LABEL') }}
<textarea
v-model="description"
rows="3"
type="text"
:placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.DESC.PLACEHOLDER')"
@blur="$v.description.$touch"
@blur="v$.description.$touch"
/>
<span v-if="$v.description.$error" class="message">
<span v-if="v$.description.$error" class="message">
{{ $t('ATTRIBUTES_MGMT.ADD.FORM.DESC.ERROR') }}
</span>
</label>
<label :class="{ error: $v.attributeType.$error }">
<label :class="{ error: v$.attributeType.$error }">
{{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LABEL') }}
<select v-model="attributeType">
<option v-for="type in types" :key="type.id" :value="type.id">
{{ type.option }}
</option>
</select>
<span v-if="$v.attributeType.$error" class="message">
<span v-if="v$.attributeType.$error" class="message">
{{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.ERROR') }}
</span>
</label>
@@ -126,11 +126,12 @@
</template>
<script>
import { required, minLength } from 'vuelidate/lib/validators';
import { required, minLength } from '@vuelidate/validators';
import { mapGetters } from 'vuex';
import { convertToAttributeSlug } from 'dashboard/helper/commons.js';
import { ATTRIBUTE_MODELS, ATTRIBUTE_TYPES } from './constants';
import alertMixin from 'shared/mixins/alertMixin';
import { useVuelidate } from '@vuelidate/core';
export default {
mixins: [alertMixin],
@@ -140,6 +141,9 @@ export default {
default: () => {},
},
},
setup() {
return { v$: useVuelidate() };
},
data() {
return {
@@ -175,14 +179,14 @@ export default {
},
isButtonDisabled() {
return (
this.$v.displayName.$invalid ||
this.$v.description.$invalid ||
this.v$.displayName.$invalid ||
this.v$.description.$invalid ||
this.uiFlags.isCreating ||
this.isTagInputInvalid
);
},
keyErrorMessage() {
if (!this.$v.attributeKey.isKey) {
if (!this.v$.attributeKey.isKey) {
return this.$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.IN_VALID');
}
return this.$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.ERROR');
@@ -238,8 +242,8 @@ export default {
this.regexEnabled = !this.regexEnabled;
},
async addAttributes() {
this.$v.$touch();
if (this.$v.$invalid) {
this.v$.$touch();
if (this.v$.$invalid) {
return;
}
if (!this.regexEnabled) {
@@ -277,13 +281,16 @@ export default {
padding: 0 var(--space-small) var(--space-small) 0;
font-family: monospace;
}
.multiselect--wrap {
margin-bottom: var(--space-normal);
.error-message {
color: var(--r-400);
font-size: var(--font-size-small);
font-weight: var(--font-weight-normal);
}
.invalid {
::v-deep {
.multiselect__tags {
@@ -292,13 +299,16 @@ export default {
}
}
}
::v-deep {
.multiselect {
margin-bottom: 0;
}
.multiselect__content-wrapper {
display: none;
}
.multiselect--active .multiselect__tags {
border-radius: var(--border-radius-normal);
}
app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue
+27 -17
View File
@@ -7,46 +7,46 @@
v-model.trim="displayName"
:label="$t('ATTRIBUTES_MGMT.ADD.FORM.NAME.LABEL')"
type="text"
:class="{ error: $v.displayName.$error }"
:class="{ error: v$.displayName.$error }"
:error="
$v.displayName.$error
v$.displayName.$error
? $t('ATTRIBUTES_MGMT.ADD.FORM.NAME.ERROR')
: ''
"
:placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.NAME.PLACEHOLDER')"
@blur="$v.displayName.$touch"
@blur="v$.displayName.$touch"
/>
<woot-input
v-model.trim="attributeKey"
:label="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.LABEL')"
type="text"
:class="{ error: $v.attributeKey.$error }"
:error="$v.attributeKey.$error ? keyErrorMessage : ''"
:class="{ error: v$.attributeKey.$error }"
:error="v$.attributeKey.$error ? keyErrorMessage : ''"
:placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.PLACEHOLDER')"
readonly
@blur="$v.attributeKey.$touch"
@blur="v$.attributeKey.$touch"
/>
<label :class="{ error: $v.description.$error }">
<label :class="{ error: v$.description.$error }">
{{ $t('ATTRIBUTES_MGMT.ADD.FORM.DESC.LABEL') }}
<textarea
v-model.trim="description"
rows="5"
type="text"
:placeholder="$t('ATTRIBUTES_MGMT.ADD.FORM.DESC.PLACEHOLDER')"
@blur="$v.description.$touch"
@blur="v$.description.$touch"
/>
<span v-if="$v.description.$error" class="message">
<span v-if="v$.description.$error" class="message">
{{ $t('ATTRIBUTES_MGMT.ADD.FORM.DESC.ERROR') }}
</span>
</label>
<label :class="{ error: $v.attributeType.$error }">
<label :class="{ error: v$.attributeType.$error }">
{{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.LABEL') }}
<select v-model="attributeType" disabled>
<option v-for="type in types" :key="type.id" :value="type.id">
{{ type.option }}
</option>
</select>
<span v-if="$v.attributeType.$error" class="message">
<span v-if="v$.attributeType.$error" class="message">
{{ $t('ATTRIBUTES_MGMT.ADD.FORM.TYPE.ERROR') }}
</span>
</label>
@@ -109,12 +109,13 @@
<script>
import { mapGetters } from 'vuex';
import { required, minLength } from 'vuelidate/lib/validators';
import { required, minLength } from '@vuelidate/validators';
import { ATTRIBUTE_TYPES } from './constants';
import alertMixin from 'shared/mixins/alertMixin';
import customAttributeMixin from '../../../../mixins/customAttributeMixin';
import { useVuelidate } from '@vuelidate/core';
export default {
components: {},
mixins: [alertMixin, customAttributeMixin],
props: {
selectedAttribute: {
@@ -126,6 +127,9 @@ export default {
default: false,
},
},
setup() {
return { v$: useVuelidate() };
},
data() {
return {
displayName: '',
@@ -173,7 +177,7 @@ export default {
return this.values.map(item => item.name);
},
isButtonDisabled() {
return this.$v.description.$invalid || this.isMultiselectInvalid;
return this.v$.description.$invalid || this.isMultiselectInvalid;
},
isMultiselectInvalid() {
return (
@@ -194,7 +198,7 @@ export default {
).id;
},
keyErrorMessage() {
if (!this.$v.attributeKey.isKey) {
if (!this.v$.attributeKey.isKey) {
return this.$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.IN_VALID');
}
return this.$t('ATTRIBUTES_MGMT.ADD.FORM.KEY.ERROR');
@@ -237,8 +241,8 @@ export default {
this.values = this.setAttributeListValue;
},
async editAttributes() {
this.$v.$touch();
if (this.$v.$invalid) {
this.v$.$touch();
if (this.v$.$invalid) {
return;
}
if (!this.regexEnabled) {
@@ -277,13 +281,16 @@ export default {
padding: 0 var(--space-small) var(--space-small) 0;
font-family: monospace;
}
.multiselect--wrap {
margin-bottom: var(--space-normal);
.error-message {
color: var(--r-400);
font-size: var(--font-size-small);
font-weight: var(--font-weight-normal);
}
.invalid {
::v-deep {
.multiselect__tags {
@@ -292,13 +299,16 @@ export default {
}
}
}
::v-deep {
.multiselect {
margin-bottom: 0;
}
.multiselect__content-wrapper {
display: none;
}
.multiselect--active .multiselect__tags {
border-radius: var(--border-radius-normal);
}
app/javascript/dashboard/routes/dashboard/settings/automation/AddAutomationRule.vue
+11 -10
View File
@@ -7,30 +7,30 @@
v-model="automation.name"
:label="$t('AUTOMATION.ADD.FORM.NAME.LABEL')"
type="text"
:class="{ error: $v.automation.name.$error }"
:class="{ error: v$.automation.name.$error }"
:error="
$v.automation.name.$error
v$.automation.name.$error
? $t('AUTOMATION.ADD.FORM.NAME.ERROR')
: ''
"
:placeholder="$t('AUTOMATION.ADD.FORM.NAME.PLACEHOLDER')"
@blur="$v.automation.name.$touch"
@blur="v$.automation.name.$touch"
/>
<woot-input
v-model="automation.description"
:label="$t('AUTOMATION.ADD.FORM.DESC.LABEL')"
type="text"
:class="{ error: $v.automation.description.$error }"
:class="{ error: v$.automation.description.$error }"
:error="
$v.automation.description.$error
v$.automation.description.$error
? $t('AUTOMATION.ADD.FORM.DESC.ERROR')
: ''
"
:placeholder="$t('AUTOMATION.ADD.FORM.DESC.PLACEHOLDER')"
@blur="$v.automation.description.$touch"
@blur="v$.automation.description.$touch"
/>
<div class="event_wrapper">
<label :class="{ error: $v.automation.event_name.$error }">
<label :class="{ error: v$.automation.event_name.$error }">
{{ $t('AUTOMATION.ADD.FORM.EVENT.LABEL') }}
<select v-model="automation.event_name" @change="onEventChange()">
<option
@@ -41,7 +41,7 @@
{{ event.value }}
</option>
</select>
<span v-if="$v.automation.event_name.$error" class="message">
<span v-if="v$.automation.event_name.$error" class="message">
{{ $t('AUTOMATION.ADD.FORM.EVENT.ERROR') }}
</span>
</label>
@@ -73,7 +73,7 @@
:custom-attribute-type="
getCustomAttributeType(automation.conditions[i].attribute_key)
"
:v="$v.automation.conditions.$each[i]"
:v="v$.automation.conditions.$each[i]"
@resetFilter="resetFilter(i, automation.conditions[i])"
@removeFilter="removeFilter(i)"
/>
@@ -110,7 +110,7 @@
:show-action-input="
showActionInput(automation.actions[i].action_name)
"
:v="$v.automation.actions.$each[i]"
:v="v$.automation.actions.$each[i]"
@resetAction="resetAction(i)"
@removeAction="removeAction(i)"
/>
@@ -228,6 +228,7 @@ export default {
select {
@apply m-0;
}
.info-message {
@apply text-xs text-green-500 dark:text-green-500 text-right;
}
app/javascript/dashboard/routes/dashboard/settings/automation/EditAutomationRule.vue
+11 -10
View File
@@ -7,30 +7,30 @@
v-model="automation.name"
:label="$t('AUTOMATION.ADD.FORM.NAME.LABEL')"
type="text"
:class="{ error: $v.automation.name.$error }"
:class="{ error: v$.automation.name.$error }"
:error="
$v.automation.name.$error
v$.automation.name.$error
? $t('AUTOMATION.ADD.FORM.NAME.ERROR')
: ''
"
:placeholder="$t('AUTOMATION.ADD.FORM.NAME.PLACEHOLDER')"
@blur="$v.automation.name.$touch"
@blur="v$.automation.name.$touch"
/>
<woot-input
v-model="automation.description"
:label="$t('AUTOMATION.ADD.FORM.DESC.LABEL')"
type="text"
:class="{ error: $v.automation.description.$error }"
:class="{ error: v$.automation.description.$error }"
:error="
$v.automation.description.$error
v$.automation.description.$error
? $t('AUTOMATION.ADD.FORM.DESC.ERROR')
: ''
"
:placeholder="$t('AUTOMATION.ADD.FORM.DESC.PLACEHOLDER')"
@blur="$v.automation.description.$touch"
@blur="v$.automation.description.$touch"
/>
<div class="event_wrapper">
<label :class="{ error: $v.automation.event_name.$error }">
<label :class="{ error: v$.automation.event_name.$error }">
{{ $t('AUTOMATION.ADD.FORM.EVENT.LABEL') }}
<select v-model="automation.event_name" @change="onEventChange()">
<option
@@ -41,7 +41,7 @@
{{ event.value }}
</option>
</select>
<span v-if="$v.automation.event_name.$error" class="message">
<span v-if="v$.automation.event_name.$error" class="message">
{{ $t('AUTOMATION.ADD.FORM.EVENT.ERROR') }}
</span>
</label>
@@ -70,7 +70,7 @@
getCustomAttributeType(automation.conditions[i].attribute_key)
"
:show-query-operator="i !== automation.conditions.length - 1"
:v="$v.automation.conditions.$each[i]"
:v="v$.automation.conditions.$each[i]"
@resetFilter="resetFilter(i, automation.conditions[i])"
@removeFilter="removeFilter(i)"
/>
@@ -103,7 +103,7 @@
:action-types="automationActionTypes"
:dropdown-values="getActionDropdownValues(action.action_name)"
:show-action-input="showActionInput(action.action_name)"
:v="$v.automation.actions.$each[i]"
:v="v$.automation.actions.$each[i]"
:initial-file-name="getFileName(action, automation.files)"
@resetAction="resetAction(i)"
@removeAction="removeAction(i)"
@@ -206,6 +206,7 @@ export default {
select {
@apply m-0;
}
.info-message {
@apply text-xs text-green-500 dark:text-green-500 text-right;
}
app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue
+30 -26
View File
@@ -10,10 +10,10 @@
v-model="title"
:label="$t('CAMPAIGN.ADD.FORM.TITLE.LABEL')"
type="text"
:class="{ error: $v.title.$error }"
:error="$v.title.$error ? $t('CAMPAIGN.ADD.FORM.TITLE.ERROR') : ''"
:class="{ error: v$.title.$error }"
:error="v$.title.$error ? $t('CAMPAIGN.ADD.FORM.TITLE.ERROR') : ''"
:placeholder="$t('CAMPAIGN.ADD.FORM.TITLE.PLACEHOLDER')"
@blur="$v.title.$touch"
@blur="v$.title.$touch"
/>
<div v-if="isOngoingType" class="editor-wrap">
@@ -24,38 +24,38 @@
<woot-message-editor
v-model="message"
class="message-editor"
:class="{ editor_warning: $v.message.$error }"
:class="{ editor_warning: v$.message.$error }"
:placeholder="$t('CAMPAIGN.ADD.FORM.MESSAGE.PLACEHOLDER')"
@blur="$v.message.$touch"
@blur="v$.message.$touch"
/>
<span v-if="$v.message.$error" class="editor-warning__message">
<span v-if="v$.message.$error" class="editor-warning__message">
{{ $t('CAMPAIGN.ADD.FORM.MESSAGE.ERROR') }}
</span>
</div>
</div>
<label v-else :class="{ error: $v.message.$error }">
<label v-else :class="{ error: v$.message.$error }">
{{ $t('CAMPAIGN.ADD.FORM.MESSAGE.LABEL') }}
<textarea
v-model="message"
rows="5"
type="text"
:placeholder="$t('CAMPAIGN.ADD.FORM.MESSAGE.PLACEHOLDER')"
@blur="$v.message.$touch"
@blur="v$.message.$touch"
/>
<span v-if="$v.message.$error" class="message">
<span v-if="v$.message.$error" class="message">
{{ $t('CAMPAIGN.ADD.FORM.MESSAGE.ERROR') }}
</span>
</label>
<label :class="{ error: $v.selectedInbox.$error }">
<label :class="{ error: v$.selectedInbox.$error }">
{{ $t('CAMPAIGN.ADD.FORM.INBOX.LABEL') }}
<select v-model="selectedInbox" @change="onChangeInbox($event)">
<option v-for="item in inboxes" :key="item.name" :value="item.id">
{{ item.name }}
</option>
</select>
<span v-if="$v.selectedInbox.$error" class="message">
<span v-if="v$.selectedInbox.$error" class="message">
{{ $t('CAMPAIGN.ADD.FORM.INBOX.ERROR') }}
</span>
</label>
@@ -63,7 +63,7 @@
<label
v-if="isOnOffType"
class="multiselect-wrap--small"
:class="{ error: $v.selectedAudience.$error }"
:class="{ error: v$.selectedAudience.$error }"
>
{{ $t('CAMPAIGN.ADD.FORM.AUDIENCE.LABEL') }}
<multiselect
@@ -79,17 +79,17 @@
selected-label
:select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
:deselect-label="$t('FORMS.MULTISELECT.ENTER_TO_REMOVE')"
@blur="$v.selectedAudience.$touch"
@select="$v.selectedAudience.$touch"
@blur="v$.selectedAudience.$touch"
@select="v$.selectedAudience.$touch"
/>
<span v-if="$v.selectedAudience.$error" class="message">
<span v-if="v$.selectedAudience.$error" class="message">
{{ $t('CAMPAIGN.ADD.FORM.AUDIENCE.ERROR') }}
</span>
</label>
<label
v-if="isOngoingType"
:class="{ error: $v.selectedSender.$error }"
:class="{ error: v$.selectedSender.$error }"
>
{{ $t('CAMPAIGN.ADD.FORM.SENT_BY.LABEL') }}
<select v-model="selectedSender">
@@ -101,7 +101,7 @@
{{ sender.name }}
</option>
</select>
<span v-if="$v.selectedSender.$error" class="message">
<span v-if="v$.selectedSender.$error" class="message">
{{ $t('CAMPAIGN.ADD.FORM.SENT_BY.ERROR') }}
</span>
</label>
@@ -121,26 +121,26 @@
v-model="endPoint"
:label="$t('CAMPAIGN.ADD.FORM.END_POINT.LABEL')"
type="text"
:class="{ error: $v.endPoint.$error }"
:class="{ error: v$.endPoint.$error }"
:error="
$v.endPoint.$error ? $t('CAMPAIGN.ADD.FORM.END_POINT.ERROR') : ''
v$.endPoint.$error ? $t('CAMPAIGN.ADD.FORM.END_POINT.ERROR') : ''
"
:placeholder="$t('CAMPAIGN.ADD.FORM.END_POINT.PLACEHOLDER')"
@blur="$v.endPoint.$touch"
@blur="v$.endPoint.$touch"
/>
<woot-input
v-if="isOngoingType"
v-model="timeOnPage"
:label="$t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.LABEL')"
type="text"
:class="{ error: $v.timeOnPage.$error }"
:class="{ error: v$.timeOnPage.$error }"
:error="
$v.timeOnPage.$error
v$.timeOnPage.$error
? $t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.ERROR')
: ''
"
:placeholder="$t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.PLACEHOLDER')"
@blur="$v.timeOnPage.$touch"
@blur="v$.timeOnPage.$touch"
/>
<label v-if="isOngoingType">
<input
@@ -176,13 +176,14 @@
<script>
import { mapGetters } from 'vuex';
import { required } from 'vuelidate/lib/validators';
import { required } from '@vuelidate/validators';
import alertMixin from 'shared/mixins/alertMixin';
import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
import campaignMixin from 'shared/mixins/campaignMixin';
import WootDateTimePicker from 'dashboard/components/ui/DateTimePicker.vue';
import { URLPattern } from 'urlpattern-polyfill';
import { CAMPAIGNS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
import { useVuelidate } from '@vuelidate/core';
export default {
components: {
@@ -191,6 +192,9 @@ export default {
},
mixins: [alertMixin, campaignMixin],
setup() {
return { v$: useVuelidate() };
},
data() {
return {
title: '',
@@ -343,8 +347,8 @@ export default {
return campaignDetails;
},
async addCampaign() {
this.$v.$touch();
if (this.$v.$invalid) {
this.v$.$touch();
if (this.v$.$invalid) {
return;
}
try {
app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue
+23 -19
View File
@@ -7,10 +7,10 @@
v-model="title"
:label="$t('CAMPAIGN.ADD.FORM.TITLE.LABEL')"
type="text"
:class="{ error: $v.title.$error }"
:error="$v.title.$error ? $t('CAMPAIGN.ADD.FORM.TITLE.ERROR') : ''"
:class="{ error: v$.title.$error }"
:error="v$.title.$error ? $t('CAMPAIGN.ADD.FORM.TITLE.ERROR') : ''"
:placeholder="$t('CAMPAIGN.ADD.FORM.TITLE.PLACEHOLDER')"
@blur="$v.title.$touch"
@blur="v$.title.$touch"
/>
<div class="editor-wrap">
<label>
@@ -20,28 +20,28 @@
v-model="message"
class="message-editor"
:is-format-mode="true"
:class="{ editor_warning: $v.message.$error }"
:class="{ editor_warning: v$.message.$error }"
:placeholder="$t('CAMPAIGN.ADD.FORM.MESSAGE.PLACEHOLDER')"
@input="$v.message.$touch"
@input="v$.message.$touch"
/>
<span v-if="$v.message.$error" class="editor-warning__message">
<span v-if="v$.message.$error" class="editor-warning__message">
{{ $t('CAMPAIGN.ADD.FORM.MESSAGE.ERROR') }}
</span>
</div>
<label :class="{ error: $v.selectedInbox.$error }">
<label :class="{ error: v$.selectedInbox.$error }">
{{ $t('CAMPAIGN.ADD.FORM.INBOX.LABEL') }}
<select v-model="selectedInbox" @change="onChangeInbox($event)">
<option v-for="item in inboxes" :key="item.id" :value="item.id">
{{ item.name }}
</option>
</select>
<span v-if="$v.selectedInbox.$error" class="message">
<span v-if="v$.selectedInbox.$error" class="message">
{{ $t('CAMPAIGN.ADD.FORM.INBOX.ERROR') }}
</span>
</label>
<label :class="{ error: $v.selectedSender.$error }">
<label :class="{ error: v$.selectedSender.$error }">
{{ $t('CAMPAIGN.ADD.FORM.SENT_BY.LABEL') }}
<select v-model="selectedSender">
<option
@@ -52,7 +52,7 @@
{{ sender.name }}
</option>
</select>
<span v-if="$v.selectedSender.$error" class="message">
<span v-if="v$.selectedSender.$error" class="message">
{{ $t('CAMPAIGN.ADD.FORM.SENT_BY.ERROR') }}
</span>
</label>
@@ -60,25 +60,25 @@
v-model="endPoint"
:label="$t('CAMPAIGN.ADD.FORM.END_POINT.LABEL')"
type="text"
:class="{ error: $v.endPoint.$error }"
:class="{ error: v$.endPoint.$error }"
:error="
$v.endPoint.$error ? $t('CAMPAIGN.ADD.FORM.END_POINT.ERROR') : ''
v$.endPoint.$error ? $t('CAMPAIGN.ADD.FORM.END_POINT.ERROR') : ''
"
:placeholder="$t('CAMPAIGN.ADD.FORM.END_POINT.PLACEHOLDER')"
@blur="$v.endPoint.$touch"
@blur="v$.endPoint.$touch"
/>
<woot-input
v-model="timeOnPage"
:label="$t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.LABEL')"
type="text"
:class="{ error: $v.timeOnPage.$error }"
:class="{ error: v$.timeOnPage.$error }"
:error="
$v.timeOnPage.$error
v$.timeOnPage.$error
? $t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.ERROR')
: ''
"
:placeholder="$t('CAMPAIGN.ADD.FORM.TIME_ON_PAGE.PLACEHOLDER')"
@blur="$v.timeOnPage.$touch"
@blur="v$.timeOnPage.$touch"
/>
<label>
<input
@@ -113,11 +113,12 @@
<script>
import { mapGetters } from 'vuex';
import { required } from 'vuelidate/lib/validators';
import { required } from '@vuelidate/validators';
import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
import alertMixin from 'shared/mixins/alertMixin';
import campaignMixin from 'shared/mixins/campaignMixin';
import { URLPattern } from 'urlpattern-polyfill';
import { useVuelidate } from '@vuelidate/core';
export default {
components: {
@@ -130,6 +131,9 @@ export default {
default: () => {},
},
},
setup() {
return { v$: useVuelidate() };
},
data() {
return {
title: '',
@@ -252,8 +256,8 @@ export default {
this.loadInboxMembers();
},
async editCampaign() {
this.$v.$touch();
if (this.$v.$invalid) {
this.v$.$touch();
if (this.v$.$invalid) {
return;
}
try {
app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue
+14 -10
View File
@@ -7,38 +7,38 @@
/>
<form class="flex flex-col w-full" @submit.prevent="addCannedResponse()">
<div class="w-full">
<label :class="{ error: $v.shortCode.$error }">
<label :class="{ error: v$.shortCode.$error }">
{{ $t('CANNED_MGMT.ADD.FORM.SHORT_CODE.LABEL') }}
<input
v-model.trim="shortCode"
type="text"
:placeholder="$t('CANNED_MGMT.ADD.FORM.SHORT_CODE.PLACEHOLDER')"
@input="$v.shortCode.$touch"
@input="v$.shortCode.$touch"
/>
</label>
</div>
<div class="w-full">
<label :class="{ error: $v.content.$error }">
<label :class="{ error: v$.content.$error }">
{{ $t('CANNED_MGMT.ADD.FORM.CONTENT.LABEL') }}
</label>
<div class="editor-wrap">
<woot-message-editor
v-model="content"
class="message-editor"
:class="{ editor_warning: $v.content.$error }"
:class="{ editor_warning: v$.content.$error }"
:enable-variables="true"
:enable-canned-responses="false"
:placeholder="$t('CANNED_MGMT.ADD.FORM.CONTENT.PLACEHOLDER')"
@blur="$v.content.$touch"
@blur="v$.content.$touch"
/>
</div>
</div>
<div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
<woot-submit-button
:disabled="
$v.content.$invalid ||
$v.shortCode.$invalid ||
v$.content.$invalid ||
v$.shortCode.$invalid ||
addCanned.showLoading
"
:button-text="$t('CANNED_MGMT.ADD.FORM.SUBMIT')"
@@ -54,12 +54,13 @@
</template>
<script>
import { required, minLength } from 'vuelidate/lib/validators';
import { required, minLength } from '@vuelidate/validators';
import WootSubmitButton from '../../../../components/buttons/FormSubmitButton.vue';
import Modal from '../../../../components/Modal.vue';
import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
import alertMixin from 'shared/mixins/alertMixin';
import { useVuelidate } from '@vuelidate/core';
export default {
components: {
@@ -78,6 +79,9 @@ export default {
default: () => {},
},
},
setup() {
return { v$: useVuelidate() };
},
data() {
return {
shortCode: '',
@@ -102,8 +106,8 @@ export default {
resetForm() {
this.shortCode = '';
this.content = '';
this.$v.shortCode.$reset();
this.$v.content.$reset();
this.v$.shortCode.$reset();
this.v$.content.$reset();
},
addCannedResponse() {
// Show loading on button
app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue
+15 -11
View File
@@ -4,38 +4,38 @@
<woot-modal-header :header-title="pageTitle" />
<form class="flex flex-col w-full" @submit.prevent="editCannedResponse()">
<div class="w-full">
<label :class="{ error: $v.shortCode.$error }">
<label :class="{ error: v$.shortCode.$error }">
{{ $t('CANNED_MGMT.EDIT.FORM.SHORT_CODE.LABEL') }}
<input
v-model.trim="shortCode"
type="text"
:placeholder="$t('CANNED_MGMT.EDIT.FORM.SHORT_CODE.PLACEHOLDER')"
@input="$v.shortCode.$touch"
@input="v$.shortCode.$touch"
/>
</label>
</div>
<div class="w-full">
<label :class="{ error: $v.content.$error }">
<label :class="{ error: v$.content.$error }">
{{ $t('CANNED_MGMT.EDIT.FORM.CONTENT.LABEL') }}
</label>
<div class="editor-wrap">
<woot-message-editor
v-model="content"
class="message-editor"
:class="{ editor_warning: $v.content.$error }"
:class="{ editor_warning: v$.content.$error }"
:enable-variables="true"
:enable-canned-responses="false"
:placeholder="$t('CANNED_MGMT.EDIT.FORM.CONTENT.PLACEHOLDER')"
@blur="$v.content.$touch"
@blur="v$.content.$touch"
/>
</div>
</div>
<div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
<woot-submit-button
:disabled="
$v.content.$invalid ||
$v.shortCode.$invalid ||
v$.content.$invalid ||
v$.shortCode.$invalid ||
editCanned.showLoading
"
:button-text="$t('CANNED_MGMT.EDIT.FORM.SUBMIT')"
@@ -52,11 +52,12 @@
<script>
/* eslint no-console: 0 */
import { required, minLength } from 'vuelidate/lib/validators';
import { required, minLength } from '@vuelidate/validators';
import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
import WootSubmitButton from '../../../../components/buttons/FormSubmitButton.vue';
import alertMixin from 'shared/mixins/alertMixin';
import Modal from '../../../../components/Modal.vue';
import { useVuelidate } from '@vuelidate/core';
export default {
components: {
@@ -71,6 +72,9 @@ export default {
edshortCode: { type: String, default: '' },
onClose: { type: Function, default: () => {} },
},
setup() {
return { v$: useVuelidate() };
},
data() {
return {
editCanned: {
@@ -98,14 +102,14 @@ export default {
},
methods: {
setPageName({ name }) {
this.$v.content.$touch();
this.v$.content.$touch();
this.content = name;
},
resetForm() {
this.shortCode = '';
this.content = '';
this.$v.shortCode.$reset();
this.$v.content.$reset();
this.v$.shortCode.$reset();
this.v$.content.$reset();
},
editCannedResponse() {
// Show loading on button
app/javascript/dashboard/routes/dashboard/settings/inbox/AddAgents.vue
+3 -3
View File
@@ -9,7 +9,7 @@
</div>
<div class="w-[60%]">
<div class="w-full">
<label :class="{ error: $v.selectedAgents.$error }">
<label :class="{ error: v$.selectedAgents.$error }">
{{ $t('INBOX_MGMT.ADD.AGENTS.TITLE') }}
<multiselect
v-model="selectedAgents"
@@ -24,9 +24,9 @@
:select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
:deselect-label="$t('FORMS.MULTISELECT.ENTER_TO_REMOVE')"
:placeholder="$t('INBOX_MGMT.ADD.AGENTS.PICK_AGENTS')"
@select="$v.selectedAgents.$touch"
@select="v$.selectedAgents.$touch"
/>
<span v-if="$v.selectedAgents.$error" class="message">
<span v-if="v$.selectedAgents.$error" class="message">
{{ $t('INBOX_MGMT.ADD.AGENTS.VALIDATION_ERROR') }}
</span>
</label>
app/javascript/dashboard/routes/dashboard/settings/inbox/ImapSettings.vue
+14 -10
View File
@@ -18,37 +18,37 @@
<div v-if="isIMAPEnabled" class="imap-details-wrap">
<woot-input
v-model.trim="address"
:class="{ error: $v.address.$error }"
:class="{ error: v$.address.$error }"
class="medium-9 columns"
:label="$t('INBOX_MGMT.IMAP.ADDRESS.LABEL')"
:placeholder="$t('INBOX_MGMT.IMAP.ADDRESS.PLACE_HOLDER')"
@blur="$v.address.$touch"
@blur="v$.address.$touch"
/>
<woot-input
v-model="port"
type="number"
:class="{ error: $v.port.$error }"
:class="{ error: v$.port.$error }"
class="medium-9 columns"
:label="$t('INBOX_MGMT.IMAP.PORT.LABEL')"
:placeholder="$t('INBOX_MGMT.IMAP.PORT.PLACE_HOLDER')"
@blur="$v.port.$touch"
@blur="v$.port.$touch"
/>
<woot-input
v-model="login"
:class="{ error: $v.login.$error }"
:class="{ error: v$.login.$error }"
class="medium-9 columns"
:label="$t('INBOX_MGMT.IMAP.LOGIN.LABEL')"
:placeholder="$t('INBOX_MGMT.IMAP.LOGIN.PLACE_HOLDER')"
@blur="$v.login.$touch"
@blur="v$.login.$touch"
/>
<woot-input
v-model="password"
:class="{ error: $v.password.$error }"
:class="{ error: v$.password.$error }"
class="medium-9 columns"
:label="$t('INBOX_MGMT.IMAP.PASSWORD.LABEL')"
:placeholder="$t('INBOX_MGMT.IMAP.PASSWORD.PLACE_HOLDER')"
type="password"
@blur="$v.password.$touch"
@blur="v$.password.$touch"
/>
<label for="toggle-enable-ssl">
<input
@@ -62,7 +62,7 @@
<woot-submit-button
:button-text="$t('INBOX_MGMT.IMAP.UPDATE')"
:loading="uiFlags.isUpdatingIMAP"
:disabled="($v.$invalid && isIMAPEnabled) || uiFlags.isUpdatingIMAP"
:disabled="(v$.$invalid && isIMAPEnabled) || uiFlags.isUpdatingIMAP"
/>
</form>
</settings-section>
@@ -73,7 +73,8 @@
import { mapGetters } from 'vuex';
import alertMixin from 'shared/mixins/alertMixin';
import SettingsSection from 'dashboard/components/SettingsSection.vue';
import { required, minLength } from 'vuelidate/lib/validators';
import { required, minLength } from '@vuelidate/validators';
import { useVuelidate } from '@vuelidate/core';
export default {
components: {
@@ -86,6 +87,9 @@ export default {
default: () => ({}),
},
},
setup() {
return { v$: useVuelidate() };
},
data() {
return {
isIMAPEnabled: false,
app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
+8 -8
View File
@@ -38,21 +38,21 @@
<woot-input
v-model.trim="selectedInboxName"
class="w-[75%] pb-4"
:class="{ error: $v.selectedInboxName.$error }"
:class="{ error: v$.selectedInboxName.$error }"
:label="inboxNameLabel"
:placeholder="inboxNamePlaceHolder"
:error="
$v.selectedInboxName.$error
v$.selectedInboxName.$error
? $t('INBOX_MGMT.ADD.CHANNEL_NAME.ERROR')
: ''
"
@blur="$v.selectedInboxName.$touch"
@blur="v$.selectedInboxName.$touch"
/>
<woot-input
v-if="isAPIInbox"
v-model.trim="webhookUrl"
class="w-[75%] pb-4"
:class="{ error: $v.webhookUrl.$error }"
:class="{ error: v$.webhookUrl.$error }"
:label="
$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WEBHOOK_URL.LABEL')
"
@@ -60,11 +60,11 @@
$t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WEBHOOK_URL.PLACEHOLDER')
"
:error="
$v.webhookUrl.$error
v$.webhookUrl.$error
? $t('INBOX_MGMT.ADD.WEBSITE_CHANNEL.CHANNEL_WEBHOOK_URL.ERROR')
: ''
"
@blur="$v.webhookUrl.$touch"
@blur="v$.webhookUrl.$touch"
/>
<woot-input
v-if="isAWebWidgetInbox"
@@ -383,7 +383,7 @@
<woot-submit-button
v-if="isAPIInbox"
type="submit"
:disabled="$v.webhookUrl.$invalid"
:disabled="v$.webhookUrl.$invalid"
:button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
:loading="uiFlags.isUpdating"
@click="updateInbox"
@@ -391,7 +391,7 @@
<woot-submit-button
v-else
type="submit"
:disabled="$v.$invalid"
:disabled="v$.$invalid"
:button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
:loading="uiFlags.isUpdating"
@click="updateInbox"
app/javascript/dashboard/routes/dashboard/settings/inbox/SmtpSettings.vue
+16 -12
View File
@@ -17,45 +17,45 @@
<div v-if="isSMTPEnabled" class="smtp-details-wrap">
<woot-input
v-model.trim="address"
:class="{ error: $v.address.$error }"
:class="{ error: v$.address.$error }"
class="medium-9 columns"
:label="$t('INBOX_MGMT.SMTP.ADDRESS.LABEL')"
:placeholder="$t('INBOX_MGMT.SMTP.ADDRESS.PLACE_HOLDER')"
@blur="$v.address.$touch"
@blur="v$.address.$touch"
/>
<woot-input
v-model="port"
type="number"
:class="{ error: $v.port.$error }"
:class="{ error: v$.port.$error }"
class="medium-9 columns"
:label="$t('INBOX_MGMT.SMTP.PORT.LABEL')"
:placeholder="$t('INBOX_MGMT.SMTP.PORT.PLACE_HOLDER')"
@blur="$v.port.$touch"
@blur="v$.port.$touch"
/>
<woot-input
v-model="login"
:class="{ error: $v.login.$error }"
:class="{ error: v$.login.$error }"
class="medium-9 columns"
:label="$t('INBOX_MGMT.SMTP.LOGIN.LABEL')"
:placeholder="$t('INBOX_MGMT.SMTP.LOGIN.PLACE_HOLDER')"
@blur="$v.login.$touch"
@blur="v$.login.$touch"
/>
<woot-input
v-model="password"
:class="{ error: $v.password.$error }"
:class="{ error: v$.password.$error }"
class="medium-9 columns"
:label="$t('INBOX_MGMT.SMTP.PASSWORD.LABEL')"
:placeholder="$t('INBOX_MGMT.SMTP.PASSWORD.PLACE_HOLDER')"
type="password"
@blur="$v.password.$touch"
@blur="v$.password.$touch"
/>
<woot-input
v-model.trim="domain"
:class="{ error: $v.domain.$error }"
:class="{ error: v$.domain.$error }"
class="medium-9 columns"
:label="$t('INBOX_MGMT.SMTP.DOMAIN.LABEL')"
:placeholder="$t('INBOX_MGMT.SMTP.DOMAIN.PLACE_HOLDER')"
@blur="$v.domain.$touch"
@blur="v$.domain.$touch"
/>
<input-radio-group
:label="$t('INBOX_MGMT.SMTP.ENCRYPTION')"
@@ -80,7 +80,7 @@
<woot-submit-button
:button-text="$t('INBOX_MGMT.SMTP.UPDATE')"
:loading="uiFlags.isUpdatingSMTP"
:disabled="($v.$invalid && isSMTPEnabled) || uiFlags.isUpdatingSMTP"
:disabled="(v$.$invalid && isSMTPEnabled) || uiFlags.isUpdatingSMTP"
/>
</form>
</settings-section>
@@ -91,9 +91,10 @@
import { mapGetters } from 'vuex';
import alertMixin from 'shared/mixins/alertMixin';
import SettingsSection from 'dashboard/components/SettingsSection.vue';
import { required, minLength } from 'vuelidate/lib/validators';
import { required, minLength } from '@vuelidate/validators';
import InputRadioGroup from './components/InputRadioGroup.vue';
import SingleSelectDropdown from './components/SingleSelectDropdown.vue';
import { useVuelidate } from '@vuelidate/core';
export default {
components: {
@@ -108,6 +109,9 @@ export default {
default: () => ({}),
},
},
setup() {
return { v$: useVuelidate() };
},
data() {
return {
isSMTPEnabled: false,
app/javascript/dashboard/routes/dashboard/settings/inbox/WidgetBuilder.vue
+11 -5
View File
@@ -15,7 +15,7 @@
/>
<woot-input
v-model.trim="websiteName"
:class="{ error: $v.websiteName.$error }"
:class="{ error: v$.websiteName.$error }"
:label="
$t(
'INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WEBSITE_NAME.LABEL'
@@ -27,7 +27,7 @@
)
"
:error="websiteNameValidationErrorMsg"
@blur="$v.websiteName.$touch"
@blur="v$.websiteName.$touch"
/>
<woot-input
v-model.trim="welcomeHeading"
@@ -118,7 +118,7 @@
)
"
:loading="uiFlags.isUpdating"
:disabled="$v.$invalid || uiFlags.isUpdating"
:disabled="v$.$invalid || uiFlags.isUpdating"
/>
</form>
</div>
@@ -157,9 +157,10 @@ import { mapGetters } from 'vuex';
import Widget from 'dashboard/modules/widget-preview/components/Widget.vue';
import InputRadioGroup from './components/InputRadioGroup.vue';
import alertMixin from 'shared/mixins/alertMixin';
import { required } from 'vuelidate/lib/validators';
import { required } from '@vuelidate/validators';
import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
import { LocalStorage } from 'shared/helpers/localStorage';
import { useVuelidate } from '@vuelidate/core';
export default {
components: {
@@ -173,6 +174,9 @@ export default {
default: () => {},
},
},
setup() {
return { v$: useVuelidate() };
},
data() {
return {
isWidgetPreview: true,
@@ -288,7 +292,7 @@ export default {
];
},
websiteNameValidationErrorMsg() {
return this.$v.websiteName.$error
return this.v$.websiteName.$error
? this.$t('INBOX_MGMT.WIDGET_BUILDER.WIDGET_OPTIONS.WEBSITE_NAME.ERROR')
: '';
},
@@ -422,6 +426,7 @@ export default {
display: flex;
flex-direction: row;
padding: var(--space-one);
@include breakpoint(900px down) {
flex-direction: column;
}
@@ -454,6 +459,7 @@ export default {
background: none;
}
}
.widget-script {
@apply mx-5 p-2.5 bg-slate-50 dark:bg-slate-700;
}
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/360DialogWhatsapp.vue
+16 -12
View File
@@ -1,37 +1,37 @@
<template>
<form class="mx-0 flex flex-wrap" @submit.prevent="createChannel()">
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<label :class="{ error: $v.inboxName.$error }">
<label :class="{ error: v$.inboxName.$error }">
{{ $t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.LABEL') }}
<input
v-model.trim="inboxName"
type="text"
:placeholder="$t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.PLACEHOLDER')"
@blur="$v.inboxName.$touch"
@blur="v$.inboxName.$touch"
/>
<span v-if="$v.inboxName.$error" class="message">
<span v-if="v$.inboxName.$error" class="message">
{{ $t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.ERROR') }}
</span>
</label>
</div>
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<label :class="{ error: $v.phoneNumber.$error }">
<label :class="{ error: v$.phoneNumber.$error }">
{{ $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER.LABEL') }}
<input
v-model.trim="phoneNumber"
type="text"
:placeholder="$t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER.PLACEHOLDER')"
@blur="$v.phoneNumber.$touch"
@blur="v$.phoneNumber.$touch"
/>
<span v-if="$v.phoneNumber.$error" class="message">
<span v-if="v$.phoneNumber.$error" class="message">
{{ $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER.ERROR') }}
</span>
</label>
</div>
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<label :class="{ error: $v.apiKey.$error }">
<label :class="{ error: v$.apiKey.$error }">
<span>
{{ $t('INBOX_MGMT.ADD.WHATSAPP.API_KEY.LABEL') }}
</span>
@@ -39,9 +39,9 @@
v-model.trim="apiKey"
type="text"
:placeholder="$t('INBOX_MGMT.ADD.WHATSAPP.API_KEY.PLACEHOLDER')"
@blur="$v.apiKey.$touch"
@blur="v$.apiKey.$touch"
/>
<span v-if="$v.apiKey.$error" class="message">
<span v-if="v$.apiKey.$error" class="message">
{{ $t('INBOX_MGMT.ADD.WHATSAPP.API_KEY.ERROR') }}
</span>
</label>
@@ -59,13 +59,17 @@
<script>
import { mapGetters } from 'vuex';
import alertMixin from 'shared/mixins/alertMixin';
import { required } from 'vuelidate/lib/validators';
import { required } from '@vuelidate/validators';
import router from '../../../../index';
import { isPhoneE164OrEmpty } from 'shared/helpers/Validators';
import { useVuelidate } from '@vuelidate/core';
export default {
mixins: [alertMixin],
setup() {
return { v$: useVuelidate() };
},
data() {
return {
inboxName: '',
@@ -83,8 +87,8 @@ export default {
},
methods: {
async createChannel() {
this.$v.$touch();
if (this.$v.$invalid) {
this.v$.$touch();
if (this.v$.$invalid) {
return;
}
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Api.vue
+12 -8
View File
@@ -6,7 +6,7 @@
/>
<form class="mx-0 flex flex-wrap" @submit.prevent="createChannel()">
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<label :class="{ error: $v.channelName.$error }">
<label :class="{ error: v$.channelName.$error }">
{{ $t('INBOX_MGMT.ADD.API_CHANNEL.CHANNEL_NAME.LABEL') }}
<input
v-model.trim="channelName"
@@ -14,16 +14,16 @@
:placeholder="
$t('INBOX_MGMT.ADD.API_CHANNEL.CHANNEL_NAME.PLACEHOLDER')
"
@blur="$v.channelName.$touch"
@blur="v$.channelName.$touch"
/>
<span v-if="$v.channelName.$error" class="message">{{
<span v-if="v$.channelName.$error" class="message">{{
$t('INBOX_MGMT.ADD.API_CHANNEL.CHANNEL_NAME.ERROR')
}}</span>
</label>
</div>
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<label :class="{ error: $v.webhookUrl.$error }">
<label :class="{ error: v$.webhookUrl.$error }">
{{ $t('INBOX_MGMT.ADD.API_CHANNEL.WEBHOOK_URL.LABEL') }}
<input
v-model.trim="webhookUrl"
@@ -31,7 +31,7 @@
:placeholder="
$t('INBOX_MGMT.ADD.API_CHANNEL.WEBHOOK_URL.PLACEHOLDER')
"
@blur="$v.webhookUrl.$touch"
@blur="v$.webhookUrl.$touch"
/>
</label>
<p class="help-text">
@@ -52,9 +52,10 @@
<script>
import { mapGetters } from 'vuex';
import alertMixin from 'shared/mixins/alertMixin';
import { required } from 'vuelidate/lib/validators';
import { required } from '@vuelidate/validators';
import router from '../../../../index';
import PageHeader from '../../SettingsSubPageHeader.vue';
import { useVuelidate } from '@vuelidate/core';
const shouldBeWebhookUrl = (value = '') =>
value ? value.startsWith('http') : true;
@@ -64,6 +65,9 @@ export default {
PageHeader,
},
mixins: [alertMixin],
setup() {
return { v$: useVuelidate() };
},
data() {
return {
channelName: '',
@@ -81,8 +85,8 @@ export default {
},
methods: {
async createChannel() {
this.$v.$touch();
if (this.$v.$invalid) {
this.v$.$touch();
if (this.v$.$invalid) {
return;
}
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/BandwidthSms.vue
+25 -21
View File
@@ -1,7 +1,7 @@
<template>
<form class="mx-0 flex flex-wrap" @submit.prevent="createChannel()">
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<label :class="{ error: $v.inboxName.$error }">
<label :class="{ error: v$.inboxName.$error }">
{{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.INBOX_NAME.LABEL') }}
<input
v-model.trim="inboxName"
@@ -9,16 +9,16 @@
:placeholder="
$t('INBOX_MGMT.ADD.SMS.BANDWIDTH.INBOX_NAME.PLACEHOLDER')
"
@blur="$v.inboxName.$touch"
@blur="v$.inboxName.$touch"
/>
<span v-if="$v.inboxName.$error" class="message">{{
<span v-if="v$.inboxName.$error" class="message">{{
$t('INBOX_MGMT.ADD.SMS.BANDWIDTH.INBOX_NAME.ERROR')
}}</span>
</label>
</div>
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<label :class="{ error: $v.phoneNumber.$error }">
<label :class="{ error: v$.phoneNumber.$error }">
{{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.PHONE_NUMBER.LABEL') }}
<input
v-model.trim="phoneNumber"
@@ -26,16 +26,16 @@
:placeholder="
$t('INBOX_MGMT.ADD.SMS.BANDWIDTH.PHONE_NUMBER.PLACEHOLDER')
"
@blur="$v.phoneNumber.$touch"
@blur="v$.phoneNumber.$touch"
/>
<span v-if="$v.phoneNumber.$error" class="message">{{
<span v-if="v$.phoneNumber.$error" class="message">{{
$t('INBOX_MGMT.ADD.SMS.BANDWIDTH.PHONE_NUMBER.ERROR')
}}</span>
</label>
</div>
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<label :class="{ error: $v.accountId.$error }">
<label :class="{ error: v$.accountId.$error }">
{{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.ACCOUNT_ID.LABEL') }}
<input
v-model.trim="accountId"
@@ -43,16 +43,16 @@
:placeholder="
$t('INBOX_MGMT.ADD.SMS.BANDWIDTH.ACCOUNT_ID.PLACEHOLDER')
"
@blur="$v.accountId.$touch"
@blur="v$.accountId.$touch"
/>
<span v-if="$v.accountId.$error" class="message">{{
<span v-if="v$.accountId.$error" class="message">{{
$t('INBOX_MGMT.ADD.SMS.BANDWIDTH.ACCOUNT_ID.ERROR')
}}</span>
</label>
</div>
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<label :class="{ error: $v.applicationId.$error }">
<label :class="{ error: v$.applicationId.$error }">
{{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.APPLICATION_ID.LABEL') }}
<input
v-model.trim="applicationId"
@@ -60,31 +60,31 @@
:placeholder="
$t('INBOX_MGMT.ADD.SMS.BANDWIDTH.APPLICATION_ID.PLACEHOLDER')
"
@blur="$v.applicationId.$touch"
@blur="v$.applicationId.$touch"
/>
<span v-if="$v.applicationId.$error" class="message">{{
<span v-if="v$.applicationId.$error" class="message">{{
$t('INBOX_MGMT.ADD.SMS.BANDWIDTH.APPLICATION_ID.ERROR')
}}</span>
</label>
</div>
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<label :class="{ error: $v.apiKey.$error }">
<label :class="{ error: v$.apiKey.$error }">
{{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.API_KEY.LABEL') }}
<input
v-model.trim="apiKey"
type="text"
:placeholder="$t('INBOX_MGMT.ADD.SMS.BANDWIDTH.API_KEY.PLACEHOLDER')"
@blur="$v.apiKey.$touch"
@blur="v$.apiKey.$touch"
/>
<span v-if="$v.apiKey.$error" class="message">{{
<span v-if="v$.apiKey.$error" class="message">{{
$t('INBOX_MGMT.ADD.SMS.BANDWIDTH.API_KEY.ERROR')
}}</span>
</label>
</div>
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<label :class="{ error: $v.apiSecret.$error }">
<label :class="{ error: v$.apiSecret.$error }">
{{ $t('INBOX_MGMT.ADD.SMS.BANDWIDTH.API_SECRET.LABEL') }}
<input
v-model.trim="apiSecret"
@@ -92,9 +92,9 @@
:placeholder="
$t('INBOX_MGMT.ADD.SMS.BANDWIDTH.API_SECRET.PLACEHOLDER')
"
@blur="$v.apiSecret.$touch"
@blur="v$.apiSecret.$touch"
/>
<span v-if="$v.apiSecret.$error" class="message">{{
<span v-if="v$.apiSecret.$error" class="message">{{
$t('INBOX_MGMT.ADD.SMS.BANDWIDTH.API_SECRET.ERROR')
}}</span>
</label>
@@ -112,13 +112,17 @@
<script>
import { mapGetters } from 'vuex';
import alertMixin from 'shared/mixins/alertMixin';
import { required } from 'vuelidate/lib/validators';
import { required } from '@vuelidate/validators';
import router from '../../../../index';
const shouldStartWithPlusSign = (value = '') => value.startsWith('+');
import { useVuelidate } from '@vuelidate/core';
export default {
mixins: [alertMixin],
setup() {
return { v$: useVuelidate() };
},
data() {
return {
accountId: '',
@@ -145,8 +149,8 @@ export default {
},
methods: {
async createChannel() {
this.$v.$touch();
if (this.$v.$invalid) {
this.v$.$touch();
if (this.v$.$invalid) {
return;
}
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/CloudWhatsapp.vue
+22 -18
View File
@@ -1,37 +1,37 @@
<template>
<form class="mx-0 flex flex-wrap" @submit.prevent="createChannel()">
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<label :class="{ error: $v.inboxName.$error }">
<label :class="{ error: v$.inboxName.$error }">
{{ $t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.LABEL') }}
<input
v-model.trim="inboxName"
type="text"
:placeholder="$t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.PLACEHOLDER')"
@blur="$v.inboxName.$touch"
@blur="v$.inboxName.$touch"
/>
<span v-if="$v.inboxName.$error" class="message">
<span v-if="v$.inboxName.$error" class="message">
{{ $t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.ERROR') }}
</span>
</label>
</div>
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<label :class="{ error: $v.phoneNumber.$error }">
<label :class="{ error: v$.phoneNumber.$error }">
{{ $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER.LABEL') }}
<input
v-model.trim="phoneNumber"
type="text"
:placeholder="$t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER.PLACEHOLDER')"
@blur="$v.phoneNumber.$touch"
@blur="v$.phoneNumber.$touch"
/>
<span v-if="$v.phoneNumber.$error" class="message">
<span v-if="v$.phoneNumber.$error" class="message">
{{ $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER.ERROR') }}
</span>
</label>
</div>
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<label :class="{ error: $v.phoneNumberId.$error }">
<label :class="{ error: v$.phoneNumberId.$error }">
<span>
{{ $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER_ID.LABEL') }}
</span>
@@ -41,16 +41,16 @@
:placeholder="
$t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER_ID.PLACEHOLDER')
"
@blur="$v.phoneNumberId.$touch"
@blur="v$.phoneNumberId.$touch"
/>
<span v-if="$v.phoneNumberId.$error" class="message">
<span v-if="v$.phoneNumberId.$error" class="message">
{{ $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER_ID.ERROR') }}
</span>
</label>
</div>
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<label :class="{ error: $v.businessAccountId.$error }">
<label :class="{ error: v$.businessAccountId.$error }">
<span>
{{ $t('INBOX_MGMT.ADD.WHATSAPP.BUSINESS_ACCOUNT_ID.LABEL') }}
</span>
@@ -60,16 +60,16 @@
:placeholder="
$t('INBOX_MGMT.ADD.WHATSAPP.BUSINESS_ACCOUNT_ID.PLACEHOLDER')
"
@blur="$v.businessAccountId.$touch"
@blur="v$.businessAccountId.$touch"
/>
<span v-if="$v.businessAccountId.$error" class="message">
<span v-if="v$.businessAccountId.$error" class="message">
{{ $t('INBOX_MGMT.ADD.WHATSAPP.BUSINESS_ACCOUNT_ID.ERROR') }}
</span>
</label>
</div>
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<label :class="{ error: $v.apiKey.$error }">
<label :class="{ error: v$.apiKey.$error }">
<span>
{{ $t('INBOX_MGMT.ADD.WHATSAPP.API_KEY.LABEL') }}
</span>
@@ -77,9 +77,9 @@
v-model.trim="apiKey"
type="text"
:placeholder="$t('INBOX_MGMT.ADD.WHATSAPP.API_KEY.PLACEHOLDER')"
@blur="$v.apiKey.$touch"
@blur="v$.apiKey.$touch"
/>
<span v-if="$v.apiKey.$error" class="message">
<span v-if="v$.apiKey.$error" class="message">
{{ $t('INBOX_MGMT.ADD.WHATSAPP.API_KEY.ERROR') }}
</span>
</label>
@@ -97,12 +97,16 @@
<script>
import { mapGetters } from 'vuex';
import alertMixin from 'shared/mixins/alertMixin';
import { required } from 'vuelidate/lib/validators';
import { required } from '@vuelidate/validators';
import router from '../../../../index';
import { isPhoneE164OrEmpty, isNumber } from 'shared/helpers/Validators';
import { useVuelidate } from '@vuelidate/core';
export default {
mixins: [alertMixin],
setup() {
return { v$: useVuelidate() };
},
data() {
return {
inboxName: '',
@@ -124,8 +128,8 @@ export default {
},
methods: {
async createChannel() {
this.$v.$touch();
if (this.$v.$invalid) {
this.v$.$touch();
if (this.v$.$invalid) {
return;
}
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
+13 -9
View File
@@ -43,7 +43,7 @@
</div>
<div class="w-[60%]">
<div class="w-full">
<div class="input-wrap" :class="{ error: $v.selectedPage.$error }">
<div class="input-wrap" :class="{ error: v$.selectedPage.$error }">
{{ $t('INBOX_MGMT.ADD.FB.CHOOSE_PAGE') }}
<multiselect
v-model.trim="selectedPage"
@@ -58,21 +58,21 @@
selected-label
@select="setPageName"
/>
<span v-if="$v.selectedPage.$error" class="message">
<span v-if="v$.selectedPage.$error" class="message">
{{ $t('INBOX_MGMT.ADD.FB.CHOOSE_PLACEHOLDER') }}
</span>
</div>
</div>
<div class="w-full">
<label :class="{ error: $v.pageName.$error }">
<label :class="{ error: v$.pageName.$error }">
{{ $t('INBOX_MGMT.ADD.FB.INBOX_NAME') }}
<input
v-model.trim="pageName"
type="text"
:placeholder="$t('INBOX_MGMT.ADD.FB.PICK_NAME')"
@input="$v.pageName.$touch"
@input="v$.pageName.$touch"
/>
<span v-if="$v.pageName.$error" class="message">
<span v-if="v$.pageName.$error" class="message">
{{ $t('INBOX_MGMT.ADD.FB.ADD_NAME') }}
</span>
</label>
@@ -88,7 +88,7 @@
<script>
/* eslint-env browser */
/* global FB */
import { required } from 'vuelidate/lib/validators';
import { required } from '@vuelidate/validators';
import LoadingState from 'dashboard/components/widgets/LoadingState.vue';
import { mapGetters } from 'vuex';
import ChannelApi from '../../../../../api/channels';
@@ -96,6 +96,7 @@ import PageHeader from '../../SettingsSubPageHeader.vue';
import router from '../../../../index';
import globalConfigMixin from 'shared/mixins/globalConfigMixin';
import accountMixin from '../../../../../mixins/account';
import { useVuelidate } from '@vuelidate/core';
export default {
components: {
@@ -103,6 +104,9 @@ export default {
PageHeader,
},
mixins: [globalConfigMixin, accountMixin],
setup() {
return { v$: useVuelidate() };
},
data() {
return {
isCreating: false,
@@ -161,7 +165,7 @@ export default {
},
setPageName({ name }) {
this.$v.selectedPage.$touch();
this.v$.selectedPage.$touch();
this.pageName = name;
},
@@ -263,8 +267,8 @@ export default {
},
createChannel() {
this.$v.$touch();
if (!this.$v.$error) {
this.v$.$touch();
if (!this.v$.$error) {
this.emptyStateMessage = this.$t('INBOX_MGMT.DETAILS.CREATING_CHANNEL');
this.isCreating = true;
this.$store
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Line.vue
+16 -12
View File
@@ -6,7 +6,7 @@
/>
<form class="mx-0 flex flex-wrap" @submit.prevent="createChannel()">
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<label :class="{ error: $v.channelName.$error }">
<label :class="{ error: v$.channelName.$error }">
{{ $t('INBOX_MGMT.ADD.LINE_CHANNEL.CHANNEL_NAME.LABEL') }}
<input
v-model.trim="channelName"
@@ -14,16 +14,16 @@
:placeholder="
$t('INBOX_MGMT.ADD.LINE_CHANNEL.CHANNEL_NAME.PLACEHOLDER')
"
@blur="$v.channelName.$touch"
@blur="v$.channelName.$touch"
/>
<span v-if="$v.channelName.$error" class="message">{{
<span v-if="v$.channelName.$error" class="message">{{
$t('INBOX_MGMT.ADD.LINE_CHANNEL.CHANNEL_NAME.ERROR')
}}</span>
</label>
</div>
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<label :class="{ error: $v.lineChannelId.$error }">
<label :class="{ error: v$.lineChannelId.$error }">
{{ $t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_ID.LABEL') }}
<input
v-model.trim="lineChannelId"
@@ -31,13 +31,13 @@
:placeholder="
$t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_ID.PLACEHOLDER')
"
@blur="$v.lineChannelId.$touch"
@blur="v$.lineChannelId.$touch"
/>
</label>
</div>
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<label :class="{ error: $v.lineChannelSecret.$error }">
<label :class="{ error: v$.lineChannelSecret.$error }">
{{ $t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_SECRET.LABEL') }}
<input
v-model.trim="lineChannelSecret"
@@ -45,13 +45,13 @@
:placeholder="
$t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_SECRET.PLACEHOLDER')
"
@blur="$v.lineChannelSecret.$touch"
@blur="v$.lineChannelSecret.$touch"
/>
</label>
</div>
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<label :class="{ error: $v.lineChannelToken.$error }">
<label :class="{ error: v$.lineChannelToken.$error }">
{{ $t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_TOKEN.LABEL') }}
<input
v-model.trim="lineChannelToken"
@@ -59,7 +59,7 @@
:placeholder="
$t('INBOX_MGMT.ADD.LINE_CHANNEL.LINE_CHANNEL_TOKEN.PLACEHOLDER')
"
@blur="$v.lineChannelToken.$touch"
@blur="v$.lineChannelToken.$touch"
/>
</label>
</div>
@@ -77,15 +77,19 @@
<script>
import { mapGetters } from 'vuex';
import alertMixin from 'shared/mixins/alertMixin';
import { required } from 'vuelidate/lib/validators';
import { required } from '@vuelidate/validators';
import router from '../../../../index';
import PageHeader from '../../SettingsSubPageHeader.vue';
import { useVuelidate } from '@vuelidate/core';
export default {
components: {
PageHeader,
},
mixins: [alertMixin],
setup() {
return { v$: useVuelidate() };
},
data() {
return {
channelName: '',
@@ -107,8 +111,8 @@ export default {
},
methods: {
async createChannel() {
this.$v.$touch();
if (this.$v.$invalid) {
this.v$.$touch();
if (this.v$.$invalid) {
return;
}
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Telegram.vue
+9 -5
View File
@@ -6,7 +6,7 @@
/>
<form class="mx-0 flex flex-wrap" @submit.prevent="createChannel()">
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<label :class="{ error: $v.botToken.$error }">
<label :class="{ error: v$.botToken.$error }">
{{ $t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.BOT_TOKEN.LABEL') }}
<input
v-model.trim="botToken"
@@ -14,7 +14,7 @@
:placeholder="
$t('INBOX_MGMT.ADD.TELEGRAM_CHANNEL.BOT_TOKEN.PLACEHOLDER')
"
@blur="$v.botToken.$touch"
@blur="v$.botToken.$touch"
/>
</label>
<p class="help-text">
@@ -35,15 +35,19 @@
<script>
import { mapGetters } from 'vuex';
import alertMixin from 'shared/mixins/alertMixin';
import { required } from 'vuelidate/lib/validators';
import { required } from '@vuelidate/validators';
import router from '../../../../index';
import PageHeader from '../../SettingsSubPageHeader.vue';
import { useVuelidate } from '@vuelidate/core';
export default {
components: {
PageHeader,
},
mixins: [alertMixin],
setup() {
return { v$: useVuelidate() };
},
data() {
return {
botToken: '',
@@ -59,8 +63,8 @@ export default {
},
methods: {
async createChannel() {
this.$v.$touch();
if (this.$v.$invalid) {
this.v$.$touch();
if (this.v$.$invalid) {
return;
}
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Twilio.vue
+25 -21
View File
@@ -2,15 +2,15 @@
<template>
<form class="mx-0 flex flex-wrap" @submit.prevent="createChannel()">
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<label :class="{ error: $v.channelName.$error }">
<label :class="{ error: v$.channelName.$error }">
{{ $t('INBOX_MGMT.ADD.TWILIO.CHANNEL_NAME.LABEL') }}
<input
v-model.trim="channelName"
type="text"
:placeholder="$t('INBOX_MGMT.ADD.TWILIO.CHANNEL_NAME.PLACEHOLDER')"
@blur="$v.channelName.$touch"
@blur="v$.channelName.$touch"
/>
<span v-if="$v.channelName.$error" class="message">{{
<span v-if="v$.channelName.$error" class="message">{{
$t('INBOX_MGMT.ADD.TWILIO.CHANNEL_NAME.ERROR')
}}</span>
</label>
@@ -19,7 +19,7 @@
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<label
v-if="useMessagingService"
:class="{ error: $v.messagingServiceSID.$error }"
:class="{ error: v$.messagingServiceSID.$error }"
>
{{ $t('INBOX_MGMT.ADD.TWILIO.MESSAGING_SERVICE_SID.LABEL') }}
<input
@@ -28,9 +28,9 @@
:placeholder="
$t('INBOX_MGMT.ADD.TWILIO.MESSAGING_SERVICE_SID.PLACEHOLDER')
"
@blur="$v.messagingServiceSID.$touch"
@blur="v$.messagingServiceSID.$touch"
/>
<span v-if="$v.messagingServiceSID.$error" class="message">{{
<span v-if="v$.messagingServiceSID.$error" class="message">{{
$t('INBOX_MGMT.ADD.TWILIO.MESSAGING_SERVICE_SID.ERROR')
}}</span>
</label>
@@ -40,15 +40,15 @@
v-if="!useMessagingService"
class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]"
>
<label :class="{ error: $v.phoneNumber.$error }">
<label :class="{ error: v$.phoneNumber.$error }">
{{ $t('INBOX_MGMT.ADD.TWILIO.PHONE_NUMBER.LABEL') }}
<input
v-model.trim="phoneNumber"
type="text"
:placeholder="$t('INBOX_MGMT.ADD.TWILIO.PHONE_NUMBER.PLACEHOLDER')"
@blur="$v.phoneNumber.$touch"
@blur="v$.phoneNumber.$touch"
/>
<span v-if="$v.phoneNumber.$error" class="message">{{
<span v-if="v$.phoneNumber.$error" class="message">{{
$t('INBOX_MGMT.ADD.TWILIO.PHONE_NUMBER.ERROR')
}}</span>
</label>
@@ -71,15 +71,15 @@
</div>
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<label :class="{ error: $v.accountSID.$error }">
<label :class="{ error: v$.accountSID.$error }">
{{ $t('INBOX_MGMT.ADD.TWILIO.ACCOUNT_SID.LABEL') }}
<input
v-model.trim="accountSID"
type="text"
:placeholder="$t('INBOX_MGMT.ADD.TWILIO.ACCOUNT_SID.PLACEHOLDER')"
@blur="$v.accountSID.$touch"
@blur="v$.accountSID.$touch"
/>
<span v-if="$v.accountSID.$error" class="message">{{
<span v-if="v$.accountSID.$error" class="message">{{
$t('INBOX_MGMT.ADD.TWILIO.ACCOUNT_SID.ERROR')
}}</span>
</label>
@@ -96,21 +96,21 @@
</label>
</div>
<div v-if="useAPIKey" class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<label :class="{ error: $v.apiKeySID.$error }">
<label :class="{ error: v$.apiKeySID.$error }">
{{ $t('INBOX_MGMT.ADD.TWILIO.API_KEY.LABEL') }}
<input
v-model.trim="apiKeySID"
type="text"
:placeholder="$t('INBOX_MGMT.ADD.TWILIO.API_KEY.PLACEHOLDER')"
@blur="$v.apiKeySID.$touch"
@blur="v$.apiKeySID.$touch"
/>
<span v-if="$v.apiKeySID.$error" class="message">{{
<span v-if="v$.apiKeySID.$error" class="message">{{
$t('INBOX_MGMT.ADD.TWILIO.API_KEY.ERROR')
}}</span>
</label>
</div>
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<label :class="{ error: $v.authToken.$error }">
<label :class="{ error: v$.authToken.$error }">
{{ $t(`INBOX_MGMT.ADD.TWILIO.${authTokeni18nKey}.LABEL`) }}
<input
v-model.trim="authToken"
@@ -118,9 +118,9 @@
:placeholder="
$t(`INBOX_MGMT.ADD.TWILIO.${authTokeni18nKey}.PLACEHOLDER`)
"
@blur="$v.authToken.$touch"
@blur="v$.authToken.$touch"
/>
<span v-if="$v.authToken.$error" class="message">
<span v-if="v$.authToken.$error" class="message">
{{ $t(`INBOX_MGMT.ADD.TWILIO.${authTokeni18nKey}.ERROR`) }}
</span>
</label>
@@ -138,9 +138,10 @@
<script>
import { mapGetters } from 'vuex';
import alertMixin from 'shared/mixins/alertMixin';
import { required } from 'vuelidate/lib/validators';
import { required } from '@vuelidate/validators';
import router from '../../../../index';
import { isPhoneE164OrEmpty } from 'shared/helpers/Validators';
import { useVuelidate } from '@vuelidate/core';
export default {
mixins: [alertMixin],
@@ -150,6 +151,9 @@ export default {
required: true,
},
},
setup() {
return { v$: useVuelidate() };
},
data() {
return {
accountSID: '',
@@ -203,8 +207,8 @@ export default {
},
methods: {
async createChannel() {
this.$v.$touch();
if (this.$v.$invalid) {
this.v$.$touch();
if (this.v$.$invalid) {
return;
}
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/ForwardToOption.vue
+12 -8
View File
@@ -6,7 +6,7 @@
/>
<form class="mx-0 flex flex-wrap" @submit.prevent="createChannel()">
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<label :class="{ error: $v.channelName.$error }">
<label :class="{ error: v$.channelName.$error }">
{{ $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.CHANNEL_NAME.LABEL') }}
<input
v-model.trim="channelName"
@@ -14,22 +14,22 @@
:placeholder="
$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.CHANNEL_NAME.PLACEHOLDER')
"
@blur="$v.channelName.$touch"
@blur="v$.channelName.$touch"
/>
<span v-if="$v.channelName.$error" class="message">{{
<span v-if="v$.channelName.$error" class="message">{{
$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.CHANNEL_NAME.ERROR')
}}</span>
</label>
</div>
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<label :class="{ error: $v.email.$error }">
<label :class="{ error: v$.email.$error }">
{{ $t('INBOX_MGMT.ADD.EMAIL_CHANNEL.EMAIL.LABEL') }}
<input
v-model.trim="email"
type="text"
:placeholder="$t('INBOX_MGMT.ADD.EMAIL_CHANNEL.EMAIL.PLACEHOLDER')"
@blur="$v.email.$touch"
@blur="v$.email.$touch"
/>
</label>
<p class="help-text">
@@ -50,15 +50,19 @@
<script>
import { mapGetters } from 'vuex';
import alertMixin from 'shared/mixins/alertMixin';
import { required, email } from 'vuelidate/lib/validators';
import { required, email } from '@vuelidate/validators';
import router from '../../../../../index';
import PageHeader from '../../../SettingsSubPageHeader.vue';
import { useVuelidate } from '@vuelidate/core';
export default {
components: {
PageHeader,
},
mixins: [alertMixin],
setup() {
return { v$: useVuelidate() };
},
data() {
return {
channelName: '',
@@ -77,8 +81,8 @@ export default {
},
methods: {
async createChannel() {
this.$v.$touch();
if (this.$v.$invalid) {
this.v$.$touch();
if (this.v$.$invalid) {
return;
}
app/javascript/dashboard/routes/dashboard/settings/inbox/channels/emailChannels/Microsoft.vue
+8 -4
View File
@@ -12,7 +12,7 @@
v-model.trim="email"
type="text"
:placeholder="$t('INBOX_MGMT.ADD.MICROSOFT.EMAIL_PLACEHOLDER')"
@blur="$v.email.$touch"
@blur="v$.email.$touch"
/>
<woot-submit-button
icon="brand-twitter"
@@ -27,11 +27,15 @@
import alertMixin from 'shared/mixins/alertMixin';
import microsoftClient from 'dashboard/api/channel/microsoftClient';
import SettingsSubPageHeader from '../../../SettingsSubPageHeader.vue';
import { required, email } from 'vuelidate/lib/validators';
import { required, email } from '@vuelidate/validators';
import { useVuelidate } from '@vuelidate/core';
export default {
components: { SettingsSubPageHeader },
mixins: [alertMixin],
setup() {
return { v$: useVuelidate() };
},
data() {
return { email: '', isRequestingAuthorization: false };
},
@@ -41,8 +45,8 @@ export default {
methods: {
async requestAuthorization() {
try {
this.$v.$touch();
if (this.$v.$invalid) return;
this.v$.$touch();
if (this.v$.$invalid) return;
this.isRequestingAuthorization = true;
const response = await microsoftClient.generateAuthorization({
app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CollaboratorsPage.vue
+10 -6
View File
@@ -17,7 +17,7 @@
selected-label
:select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
:deselect-label="$t('FORMS.MULTISELECT.ENTER_TO_REMOVE')"
@select="$v.selectedAgents.$touch"
@select="v$.selectedAgents.$touch"
/>
<woot-submit-button
@@ -56,10 +56,10 @@
<woot-input
v-model.trim="maxAssignmentLimit"
type="number"
:class="{ error: $v.maxAssignmentLimit.$error }"
:class="{ error: v$.maxAssignmentLimit.$error }"
:error="maxAssignmentLimitErrors"
:label="$t('INBOX_MGMT.AUTO_ASSIGNMENT.MAX_ASSIGNMENT_LIMIT')"
@blur="$v.maxAssignmentLimit.$touch"
@blur="v$.maxAssignmentLimit.$touch"
/>
<p class="pb-1 text-sm not-italic text-slate-600 dark:text-slate-400">
@@ -68,7 +68,7 @@
<woot-submit-button
:button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
:disabled="$v.maxAssignmentLimit.$invalid"
:disabled="v$.maxAssignmentLimit.$invalid"
@click="updateInbox"
/>
</div>
@@ -78,10 +78,11 @@
<script>
import { mapGetters } from 'vuex';
import { minValue } from 'vuelidate/lib/validators';
import { minValue } from '@vuelidate/validators';
import alertMixin from 'shared/mixins/alertMixin';
import configMixin from 'shared/mixins/configMixin';
import SettingsSection from '../../../../../components/SettingsSection.vue';
import { useVuelidate } from '@vuelidate/core';
export default {
components: {
@@ -94,6 +95,9 @@ export default {
default: () => ({}),
},
},
setup() {
return { v$: useVuelidate() };
},
data() {
return {
selectedAgents: [],
@@ -107,7 +111,7 @@ export default {
agentList: 'agents/getAgents',
}),
maxAssignmentLimitErrors() {
if (this.$v.maxAssignmentLimit.$error) {
if (this.v$.maxAssignmentLimit.$error) {
return this.$t(
'INBOX_MGMT.AUTO_ASSIGNMENT.MAX_ASSIGNMENT_LIMIT_RANGE_ERROR'
);
app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue
+7 -2
View File
@@ -141,7 +141,7 @@
"
/>
<woot-button
:disabled="$v.whatsAppInboxAPIKey.$invalid"
:disabled="v$.whatsAppInboxAPIKey.$invalid"
@click="updateWhatsAppInboxAPIKey"
>
{{ $t('INBOX_MGMT.SETTINGS_POPUP.WHATSAPP_SECTION_UPDATE_BUTTON') }}
@@ -159,7 +159,8 @@ import SettingsSection from '../../../../../components/SettingsSection.vue';
import ImapSettings from '../ImapSettings.vue';
import SmtpSettings from '../SmtpSettings.vue';
import MicrosoftReauthorize from '../channels/microsoft/Reauthorize.vue';
import { required } from 'vuelidate/lib/validators';
import { required } from '@vuelidate/validators';
import { useVuelidate } from '@vuelidate/core';
export default {
components: {
@@ -175,6 +176,9 @@ export default {
default: () => ({}),
},
},
setup() {
return { v$: useVuelidate() };
},
data() {
return {
hmacMandatory: false,
@@ -247,6 +251,7 @@ export default {
.input {
flex: 1;
margin-right: var(--space-small);
::v-deep input {
margin-bottom: 0;
}
app/javascript/dashboard/routes/dashboard/settings/integrations/DashboardApps/DashboardAppModal.vue
+14 -10
View File
@@ -6,40 +6,40 @@
<form class="mx-0 flex flex-wrap" @submit.prevent="submit">
<woot-input
v-model.trim="app.title"
:class="{ error: $v.app.title.$error }"
:class="{ error: v$.app.title.$error }"
class="w-full"
:label="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.FORM.TITLE_LABEL')"
:placeholder="
$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.FORM.TITLE_PLACEHOLDER')
"
:error="
$v.app.title.$error
v$.app.title.$error
? $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.FORM.TITLE_ERROR')
: null
"
data-testid="app-title"
@input="$v.app.title.$touch"
@input="v$.app.title.$touch"
/>
<woot-input
v-model.trim="app.content.url"
:class="{ error: $v.app.content.url.$error }"
:class="{ error: v$.app.content.url.$error }"
class="w-full"
:label="$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.FORM.URL_LABEL')"
:placeholder="
$t('INTEGRATION_SETTINGS.DASHBOARD_APPS.FORM.URL_PLACEHOLDER')
"
:error="
$v.app.content.url.$error
v$.app.content.url.$error
? $t('INTEGRATION_SETTINGS.DASHBOARD_APPS.FORM.URL_ERROR')
: null
"
data-testid="app-url"
@input="$v.app.content.url.$touch"
@input="v$.app.content.url.$touch"
/>
<div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
<woot-button
:is-loading="isLoading"
:is-disabled="$v.$invalid"
:is-disabled="v$.$invalid"
data-testid="label-submit"
>
{{ submitButtonLabel }}
@@ -54,8 +54,9 @@
</template>
<script>
import { required, url } from 'vuelidate/lib/validators';
import { required, url } from '@vuelidate/validators';
import alertMixin from 'shared/mixins/alertMixin';
import { useVuelidate } from '@vuelidate/core';
export default {
mixins: [alertMixin],
@@ -73,6 +74,9 @@ export default {
default: () => ({}),
},
},
setup() {
return { v$: useVuelidate() };
},
validations: {
app: {
title: { required },
@@ -121,8 +125,8 @@ export default {
},
async submit() {
try {
this.$v.$touch();
if (this.$v.$invalid) {
this.v$.$touch();
if (this.v$.$invalid) {
return;
}
app/javascript/dashboard/routes/dashboard/settings/integrations/Webhooks/WebhookForm.vue
+10 -6
View File
@@ -1,20 +1,20 @@
<template>
<form class="flex flex-col w-full" @submit.prevent="onSubmit">
<div class="w-full">
<label :class="{ error: $v.url.$error }">
<label :class="{ error: v$.url.$error }">
{{ $t('INTEGRATION_SETTINGS.WEBHOOK.FORM.END_POINT.LABEL') }}
<input
v-model.trim="url"
type="text"
name="url"
:placeholder="webhookURLInputPlaceholder"
@input="$v.url.$touch"
@input="v$.url.$touch"
/>
<span v-if="$v.url.$error" class="message">
<span v-if="v$.url.$error" class="message">
{{ $t('INTEGRATION_SETTINGS.WEBHOOK.FORM.END_POINT.ERROR') }}
</span>
</label>
<label :class="{ error: $v.url.$error }" class="mb-2">
<label :class="{ error: v$.url.$error }" class="mb-2">
{{ $t('INTEGRATION_SETTINGS.WEBHOOK.FORM.SUBSCRIPTIONS.LABEL') }}
</label>
<div v-for="event in supportedWebhookEvents" :key="event">
@@ -35,7 +35,7 @@
<div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
<div class="w-full">
<woot-button
:disabled="$v.$invalid || isSubmitting"
:disabled="v$.$invalid || isSubmitting"
:is-loading="isSubmitting"
>
{{ submitLabel }}
@@ -49,9 +49,10 @@
</template>
<script>
import { required, url, minLength } from 'vuelidate/lib/validators';
import { required, url, minLength } from '@vuelidate/validators';
import webhookMixin from './webhookMixin';
import wootConstants from 'dashboard/constants/globals';
import { useVuelidate } from '@vuelidate/core';
const { EXAMPLE_WEBHOOK_URL } = wootConstants;
@@ -82,6 +83,9 @@ export default {
required: true,
},
},
setup() {
return { v$: useVuelidate() };
},
validations: {
url: {
required,
app/javascript/dashboard/routes/dashboard/settings/labels/AddLabel.vue
+5 -5
View File
@@ -7,23 +7,23 @@
<form class="mx-0 flex flex-wrap" @submit.prevent="addLabel">
<woot-input
v-model.trim="title"
:class="{ error: $v.title.$error }"
:class="{ error: v$.title.$error }"
class="w-full label-name--input"
:label="$t('LABEL_MGMT.FORM.NAME.LABEL')"
:placeholder="$t('LABEL_MGMT.FORM.NAME.PLACEHOLDER')"
:error="getLabelTitleErrorMessage"
data-testid="label-title"
@input="$v.title.$touch"
@input="v$.title.$touch"
/>
<woot-input
v-model.trim="description"
:class="{ error: $v.description.$error }"
:class="{ error: v$.description.$error }"
class="w-full"
:label="$t('LABEL_MGMT.FORM.DESCRIPTION.LABEL')"
:placeholder="$t('LABEL_MGMT.FORM.DESCRIPTION.PLACEHOLDER')"
data-testid="label-description"
@input="$v.description.$touch"
@input="v$.description.$touch"
/>
<div class="w-full">
@@ -40,7 +40,7 @@
</div>
<div class="flex justify-end items-center py-2 px-0 gap-2 w-full">
<woot-button
:is-disabled="$v.title.$invalid || uiFlags.isCreating"
:is-disabled="v$.title.$invalid || uiFlags.isCreating"
:is-loading="uiFlags.isCreating"
data-testid="label-submit"
>
app/javascript/dashboard/routes/dashboard/settings/labels/EditLabel.vue
+5 -5
View File
@@ -4,20 +4,20 @@
<form class="mx-0 flex flex-wrap" @submit.prevent="editLabel">
<woot-input
v-model.trim="title"
:class="{ error: $v.title.$error }"
:class="{ error: v$.title.$error }"
class="w-full label-name--input"
:label="$t('LABEL_MGMT.FORM.NAME.LABEL')"
:placeholder="$t('LABEL_MGMT.FORM.NAME.PLACEHOLDER')"
:error="getLabelTitleErrorMessage"
@input="$v.title.$touch"
@input="v$.title.$touch"
/>
<woot-input
v-model.trim="description"
:class="{ error: $v.description.$error }"
:class="{ error: v$.description.$error }"
class="w-full"
:label="$t('LABEL_MGMT.FORM.DESCRIPTION.LABEL')"
:placeholder="$t('LABEL_MGMT.FORM.DESCRIPTION.PLACEHOLDER')"
@input="$v.description.$touch"
@input="v$.description.$touch"
/>
<div class="w-full">
@@ -34,7 +34,7 @@
</div>
<div class="flex justify-end items-center py-2 px-0 gap-2 w-full">
<woot-button
:is-disabled="$v.title.$invalid || uiFlags.isUpdating"
:is-disabled="v$.title.$invalid || uiFlags.isUpdating"
:is-loading="uiFlags.isUpdating"
>
{{ $t('LABEL_MGMT.FORM.EDIT') }}
app/javascript/dashboard/routes/dashboard/settings/labels/specs/validationMixin.spec.js
+4 -6
View File
@@ -1,6 +1,5 @@
import { shallowMount, createLocalVue } from '@vue/test-utils';
import VueI18n from 'vue-i18n';
import Vuelidate from 'vuelidate';
import validationMixin from '../validationMixin';
import validations from '../validations';
@@ -8,7 +7,6 @@ import i18n from 'dashboard/i18n';
const localVue = createLocalVue();
localVue.use(VueI18n);
localVue.use(Vuelidate);
const i18nConfig = new VueI18n({
locale: 'en',
messages: i18n,
@@ -29,7 +27,7 @@ describe('validationMixin', () => {
return { title: 'sales' };
},
});
wrapper.vm.$v.$touch();
wrapper.vm.v$.$touch();
expect(wrapper.vm.getLabelTitleErrorMessage).toBe('');
});
it('it should return label required error message if empty name is passed', async () => {
@@ -40,7 +38,7 @@ describe('validationMixin', () => {
return { title: '' };
},
});
wrapper.vm.$v.$touch();
wrapper.vm.v$.$touch();
expect(wrapper.vm.getLabelTitleErrorMessage).toBe('Label name is required');
});
it('it should return label minimum length error message if one charceter label name is passed', async () => {
@@ -51,7 +49,7 @@ describe('validationMixin', () => {
return { title: 's' };
},
});
wrapper.vm.$v.$touch();
wrapper.vm.v$.$touch();
expect(wrapper.vm.getLabelTitleErrorMessage).toBe(
'Minimum length 2 is required'
);
@@ -64,7 +62,7 @@ describe('validationMixin', () => {
return { title: 'sales enquiry' };
},
});
wrapper.vm.$v.$touch();
wrapper.vm.v$.$touch();
expect(wrapper.vm.getLabelTitleErrorMessage).toBe(
'Only Alphabets, Numbers, Hyphen and Underscore are allowed'
);
app/javascript/dashboard/routes/dashboard/settings/labels/validationMixin.js
+4 -4
View File
@@ -2,13 +2,13 @@ export default {
computed: {
getLabelTitleErrorMessage() {
let errorMessage = '';
if (!this.$v.title.$error) {
if (!this.v$.title.$error) {
errorMessage = '';
} else if (!this.$v.title.required) {
} else if (!this.v$.title.required) {
errorMessage = this.$t('LABEL_MGMT.FORM.NAME.REQUIRED_ERROR');
} else if (!this.$v.title.minLength) {
} else if (!this.v$.title.minLength) {
errorMessage = this.$t('LABEL_MGMT.FORM.NAME.MINIMUM_LENGTH_ERROR');
} else if (!this.$v.title.validLabelCharacters) {
} else if (!this.v$.title.validLabelCharacters) {
errorMessage = this.$t('LABEL_MGMT.FORM.NAME.VALID_ERROR');
}
return errorMessage;
app/javascript/dashboard/routes/dashboard/settings/labels/validations.js
+1 -1
View File
@@ -1,4 +1,4 @@
import { required, minLength } from 'vuelidate/lib/validators';
import { required, minLength } from '@vuelidate/validators';
export const validLabelCharacters = (str = '') => !!str && !str.includes(' ');
app/javascript/dashboard/routes/dashboard/settings/macros/MacroForm.vue
+12 -5
View File
@@ -26,7 +26,8 @@
<script>
import MacroNodes from './MacroNodes.vue';
import MacroProperties from './MacroProperties.vue';
import { required, requiredIf } from 'vuelidate/lib/validators';
import { required, requiredIf } from '@vuelidate/validators';
import { useVuelidate } from '@vuelidate/core';
export default {
components: {
@@ -44,6 +45,9 @@ export default {
default: () => ({}),
},
},
setup() {
return { v$: useVuelidate() };
},
data() {
return {
macro: this.macroData,
@@ -112,16 +116,16 @@ export default {
this.macro.actions.splice(index, 1);
},
submit() {
this.$v.$touch();
if (this.$v.$invalid) return;
this.v$.$touch();
if (this.v$.$invalid) return;
this.$emit('submit', this.macro);
},
resetNode(index) {
this.$v.macro.actions.$each[index].$reset();
this.v$.macro.actions.$each[index].$reset();
this.macro.actions[index].action_params = [];
},
resetValidation() {
this.$v.$reset();
this.v$.$reset();
},
},
};
@@ -129,13 +133,16 @@ export default {
<style scoped>
@tailwind components;
@layer components {
.macro-gradient-radial {
background-image: radial-gradient(#ebf0f5 1.2px, transparent 0);
}
.macro-dark-gradient-radial {
background-image: radial-gradient(#293f51 1.2px, transparent 0);
}
.macro-gradient-radial-size {
background-size: 1rem 1rem;
}
app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue
+7 -2
View File
@@ -11,7 +11,7 @@
<div
class="macro__node-action-item"
:class="{
'has-error': hasError($v.macro.actions.$each[index]),
'has-error': hasError(v$.macro.actions.$each[index]),
}"
>
<action-input
@@ -21,7 +21,7 @@
:show-action-input="showActionInput"
:show-remove-button="false"
:is-macro="true"
:v="$v.macro.actions.$each[index]"
:v="v$.macro.actions.$each[index]"
:initial-file-name="fileName"
@resetAction="$emit('resetAction')"
/>
@@ -108,6 +108,7 @@ export default {
.macros__node-drag-handle {
@apply cursor-move -left-8 absolute;
}
.macro__node-action-container {
@apply w-full min-w-0 basis-full items-center flex relative;
@@ -125,15 +126,19 @@ export default {
0% {
transform: translateX(0);
}
25% {
transform: translateX(0.234375rem);
}
50% {
transform: translateX(-0.234375rem);
}
75% {
transform: translateX(0.234375rem);
}
100% {
transform: translateX(0);
}
app/javascript/dashboard/routes/dashboard/settings/macros/MacroProperties.vue
+2 -2
View File
@@ -7,8 +7,8 @@
:value="macroName"
:label="$t('MACROS.ADD.FORM.NAME.LABEL')"
:placeholder="$t('MACROS.ADD.FORM.NAME.PLACEHOLDER')"
:error="$v.macro.name.$error ? $t('MACROS.ADD.FORM.NAME.ERROR') : null"
:class="{ error: $v.macro.name.$error }"
:error="v$.macro.name.$error ? $t('MACROS.ADD.FORM.NAME.ERROR') : null"
:class="{ error: v$.macro.name.$error }"
@input="onUpdateName($event)"
/>
</div>
app/javascript/dashboard/routes/dashboard/settings/profile/ChangePassword.vue
+17 -13
View File
@@ -11,45 +11,45 @@
<woot-input
v-model="currentPassword"
type="password"
:class="{ error: $v.currentPassword.$error }"
:class="{ error: v$.currentPassword.$error }"
:label="$t('PROFILE_SETTINGS.FORM.CURRENT_PASSWORD.LABEL')"
:placeholder="
$t('PROFILE_SETTINGS.FORM.CURRENT_PASSWORD.PLACEHOLDER')
"
:error="
$v.currentPassword.$error
v$.currentPassword.$error
? $t('PROFILE_SETTINGS.FORM.CURRENT_PASSWORD.ERROR')
: ''
"
@blur="$v.currentPassword.$touch"
@blur="v$.currentPassword.$touch"
/>
<woot-input
v-model="password"
type="password"
:class="{ error: $v.password.$error }"
:class="{ error: v$.password.$error }"
:label="$t('PROFILE_SETTINGS.FORM.PASSWORD.LABEL')"
:placeholder="$t('PROFILE_SETTINGS.FORM.PASSWORD.PLACEHOLDER')"
:error="
$v.password.$error ? $t('PROFILE_SETTINGS.FORM.PASSWORD.ERROR') : ''
v$.password.$error ? $t('PROFILE_SETTINGS.FORM.PASSWORD.ERROR') : ''
"
@blur="$v.password.$touch"
@blur="v$.password.$touch"
/>
<woot-input
v-model="passwordConfirmation"
type="password"
:class="{ error: $v.passwordConfirmation.$error }"
:class="{ error: v$.passwordConfirmation.$error }"
:label="$t('PROFILE_SETTINGS.FORM.PASSWORD_CONFIRMATION.LABEL')"
:placeholder="
$t('PROFILE_SETTINGS.FORM.PASSWORD_CONFIRMATION.PLACEHOLDER')
"
:error="
$v.passwordConfirmation.$error
v$.passwordConfirmation.$error
? $t('PROFILE_SETTINGS.FORM.PASSWORD_CONFIRMATION.ERROR')
: ''
"
@blur="$v.passwordConfirmation.$touch"
@blur="v$.passwordConfirmation.$touch"
/>
<woot-button
@@ -58,7 +58,7 @@
:disabled="
!currentPassword ||
!passwordConfirmation ||
!$v.passwordConfirmation.isEqPassword
!v$.passwordConfirmation.isEqPassword
"
>
{{ $t('PROFILE_SETTINGS.FORM.PASSWORD_SECTION.BTN_TEXT') }}
@@ -69,12 +69,16 @@
</template>
<script>
import { required, minLength } from 'vuelidate/lib/validators';
import { required, minLength } from '@vuelidate/validators';
import { mapGetters } from 'vuex';
import alertMixin from 'shared/mixins/alertMixin';
import { useVuelidate } from '@vuelidate/core';
export default {
mixins: [alertMixin],
setup() {
return { v$: useVuelidate() };
},
data() {
return {
currentPassword: '',
@@ -109,8 +113,8 @@ export default {
},
methods: {
async changePassword() {
this.$v.$touch();
if (this.$v.$invalid) {
this.v$.$touch();
if (this.v$.$invalid) {
this.showAlert(this.$t('PROFILE_SETTINGS.FORM.ERROR'));
return;
}
app/javascript/dashboard/routes/dashboard/settings/profile/Index.vue
+16 -11
View File
@@ -27,19 +27,19 @@
{{ $t('PROFILE_SETTINGS.DELETE_AVATAR') }}
</woot-button>
</div>
<label :class="{ error: $v.name.$error }">
<label :class="{ error: v$.name.$error }">
{{ $t('PROFILE_SETTINGS.FORM.NAME.LABEL') }}
<input
v-model="name"
type="text"
:placeholder="$t('PROFILE_SETTINGS.FORM.NAME.PLACEHOLDER')"
@input="$v.name.$touch"
@input="v$.name.$touch"
/>
<span v-if="$v.name.$error" class="message">
<span v-if="v$.name.$error" class="message">
{{ $t('PROFILE_SETTINGS.FORM.NAME.ERROR') }}
</span>
</label>
<label :class="{ error: $v.displayName.$error }">
<label :class="{ error: v$.displayName.$error }">
{{ $t('PROFILE_SETTINGS.FORM.DISPLAY_NAME.LABEL') }}
<input
v-model="displayName"
@@ -47,21 +47,21 @@
:placeholder="
$t('PROFILE_SETTINGS.FORM.DISPLAY_NAME.PLACEHOLDER')
"
@input="$v.displayName.$touch"
@input="v$.displayName.$touch"
/>
</label>
<label
v-if="!globalConfig.disableUserProfileUpdate"
:class="{ error: $v.email.$error }"
:class="{ error: v$.email.$error }"
>
{{ $t('PROFILE_SETTINGS.FORM.EMAIL.LABEL') }}
<input
v-model.trim="email"
type="email"
:placeholder="$t('PROFILE_SETTINGS.FORM.EMAIL.PLACEHOLDER')"
@input="$v.email.$touch"
@input="v$.email.$touch"
/>
<span v-if="$v.email.$error" class="message">
<span v-if="v$.email.$error" class="message">
{{ $t('PROFILE_SETTINGS.FORM.EMAIL.ERROR') }}
</span>
</label>
@@ -125,7 +125,9 @@
</template>
<script>
import { required, minLength, email } from 'vuelidate/lib/validators';
import { required, minLength, email } from '@vuelidate/validators';
import { useVuelidate } from '@vuelidate/core';
import { mapGetters } from 'vuex';
import { clearCookiesOnLogout } from '../../../../store/utils/api';
import { hasValidAvatarUrl } from 'dashboard/helper/URLHelper';
@@ -149,6 +151,9 @@ export default {
MaskedText,
},
mixins: [alertMixin, globalConfigMixin, uiSettingsMixin],
setup() {
return { v$: useVuelidate() };
},
data() {
return {
avatarFile: '',
@@ -224,8 +229,8 @@ export default {
},
isEditorHotKeyEnabled,
async updateUser() {
this.$v.$touch();
if (this.$v.$invalid) {
this.v$.$touch();
if (this.v$.$invalid) {
this.showAlert(this.$t('PROFILE_SETTINGS.FORM.ERROR'));
return;
}
app/javascript/dashboard/routes/dashboard/settings/teams/Create/AddAgents.vue
+2 -2
View File
@@ -11,7 +11,7 @@
</div>
<div class="w-full">
<div v-if="$v.selectedAgents.$error">
<div v-if="v$.selectedAgents.$error">
<p class="error-message">
{{ $t('TEAMS_SETTINGS.ADD.AGENT_VALIDATION_ERROR') }}
</p>
@@ -87,7 +87,7 @@ export default {
methods: {
updateSelectedAgents(newAgentList) {
this.$v.selectedAgents.$touch();
this.v$.selectedAgents.$touch();
this.selectedAgents = [...newAgentList];
},
selectAllAgents() {
app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditAgents.vue
+2 -2
View File
@@ -9,7 +9,7 @@
</div>
<div class="w-full">
<div v-if="$v.selectedAgents.$error">
<div v-if="v$.selectedAgents.$error">
<p class="error-message">
{{ $t('TEAMS_SETTINGS.ADD.AGENT_VALIDATION_ERROR') }}
</p>
@@ -110,7 +110,7 @@ export default {
methods: {
updateSelectedAgents(newAgentList) {
this.$v.selectedAgents.$touch();
this.v$.selectedAgents.$touch();
this.selectedAgents = [...newAgentList];
},
async addAgents() {
app/javascript/dashboard/routes/dashboard/settings/teams/TeamForm.vue
+7 -7
View File
@@ -4,20 +4,20 @@
<form class="mx-0 flex flex-wrap" @submit.prevent="handleSubmit">
<woot-input
v-model.trim="title"
:class="{ error: $v.title.$error }"
:class="{ error: v$.title.$error }"
class="w-full"
:label="$t('TEAMS_SETTINGS.FORM.NAME.LABEL')"
:placeholder="$t('TEAMS_SETTINGS.FORM.NAME.PLACEHOLDER')"
@input="$v.title.$touch"
@input="v$.title.$touch"
/>
<woot-input
v-model.trim="description"
:class="{ error: $v.description.$error }"
:class="{ error: v$.description.$error }"
class="w-full"
:label="$t('TEAMS_SETTINGS.FORM.DESCRIPTION.LABEL')"
:placeholder="$t('TEAMS_SETTINGS.FORM.DESCRIPTION.PLACEHOLDER')"
@input="$v.description.$touch"
@input="v$.description.$touch"
/>
<div class="w-full">
@@ -29,7 +29,7 @@
<div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
<div class="w-full">
<woot-submit-button
:disabled="$v.title.$invalid || submitInProgress"
:disabled="v$.title.$invalid || submitInProgress"
:button-text="submitButtonText"
:loading="submitInProgress"
/>
@@ -84,8 +84,8 @@ export default {
validations,
methods: {
handleSubmit() {
this.$v.$touch();
if (this.$v.$invalid) {
this.v$.$touch();
if (this.v$.$invalid) {
return;
}
this.onSubmit({
app/javascript/dashboard/routes/dashboard/settings/teams/helpers/validations.js
+1 -1
View File
@@ -1,4 +1,4 @@
import { required, minLength } from 'vuelidate/lib/validators';
import { required, minLength } from '@vuelidate/validators';
export default {
title: {
app/javascript/entrypoints/application.js
-2
View File
@@ -9,7 +9,6 @@ import VueFormulate from '@braid/vue-formulate';
import WootSwitch from 'components/ui/Switch.vue';
import WootWizard from 'components/ui/Wizard.vue';
import { sync } from 'vuex-router-sync';
import Vuelidate from 'vuelidate';
import VTooltip from 'v-tooltip';
import WootUiKit from '../dashboard/components';
import App from '../dashboard/App.vue';
@@ -61,7 +60,6 @@ Vue.use(VueDOMPurifyHTML, domPurifyConfig);
Vue.use(VueRouter);
Vue.use(VueI18n);
Vue.use(WootUiKit);
Vue.use(Vuelidate);
Vue.use(VueFormulate, {
rules: {
JSON: ({ value }) => isJSONValid(value),
app/javascript/entrypoints/survey.js
-2
View File
@@ -1,12 +1,10 @@
import Vue from 'vue';
import Vuelidate from 'vuelidate';
import VueI18n from 'vue-i18n';
import App from '../survey/App.vue';
import i18n from '../survey/i18n';
import store from '../survey/store';
Vue.use(VueI18n);
Vue.use(Vuelidate);
const i18nConfig = new VueI18n({
locale: 'en',
app/javascript/entrypoints/v3app.js
-2
View File
@@ -1,7 +1,6 @@
import Vue from 'vue';
import VueI18n from 'vue-i18n';
import VueRouter from 'vue-router';
import Vuelidate from 'vuelidate';
import i18n from 'dashboard/i18n';
import * as Sentry from '@sentry/vue';
import { Integrations } from '@sentry/tracing';
@@ -43,7 +42,6 @@ if (window.errorLoggingConfig) {
Vue.use(VueRouter);
Vue.use(VueI18n);
Vue.use(Vuelidate);
Vue.use(AnalyticsPlugin);
Vue.component('fluent-icon', FluentIcon);
app/javascript/entrypoints/widget.js
-2
View File
@@ -1,5 +1,4 @@
import Vue from 'vue';
import Vuelidate from 'vuelidate';
import VueI18n from 'vue-i18n';
import VueDOMPurifyHTML from 'vue-dompurify-html';
import VueFormulate from '@braid/vue-formulate';
@@ -16,7 +15,6 @@ import { domPurifyConfig } from '../shared/helpers/HTMLSanitizer';
const PhoneInput = () => import('../widget/components/Form/PhoneInput');
Vue.use(VueI18n);
Vue.use(Vuelidate);
Vue.use(VueDOMPurifyHTML, domPurifyConfig);
const i18nConfig = new VueI18n({
app/javascript/shared/mixins/specs/automationMixin.spec.js
-4
View File
@@ -28,10 +28,6 @@ import Vuex from 'vuex';
const localVue = createLocalVue();
localVue.use(Vuex);
// Vuelidate required to test submit method
import Vuelidate from 'vuelidate';
Vue.use(Vuelidate);
const createComponent = (
mixins,
data,
app/javascript/shared/mixins/specs/whatsappTemplates/whatsappTemplates.spec.js
-2
View File
@@ -3,11 +3,9 @@ import { shallowMount, createLocalVue } from '@vue/test-utils';
import { templates } from './fixtures';
const localVue = createLocalVue();
import VueI18n from 'vue-i18n';
import Vuelidate from 'vuelidate';
import i18n from 'dashboard/i18n';
localVue.use(VueI18n);
localVue.use(Vuelidate);
const i18nConfig = new VueI18n({ locale: 'en', messages: i18n });
const config = {
app/javascript/v3/views/auth/password/Edit.vue
+12 -7
View File
@@ -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,9 @@
</template>
<script>
import { required, minLength } from 'vuelidate/lib/validators';
import { useVuelidate } from '@vuelidate/core';
import { required, minLength } from '@vuelidate/validators';
import FormInput from '../../../components/Form/Input.vue';
import SubmitButton from '../../../components/Button/SubmitButton.vue';
import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
@@ -64,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
app/javascript/v3/views/auth/reset/password/Index.vue
+9 -4
View File
@@ -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,7 +47,9 @@
</template>
<script>
import { required, minLength, email } from 'vuelidate/lib/validators';
import { useVuelidate } from '@vuelidate/core';
import { required, minLength, email } from '@vuelidate/validators';
import globalConfigMixin from 'shared/mixins/globalConfigMixin';
import { mapGetters } from 'vuex';
import FormInput from '../../../../components/Form/Input.vue';
@@ -57,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: '' },
app/javascript/v3/views/auth/signup/components/Signup/Form.vue
+21 -16
View File
@@ -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,9 @@
</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 globalConfigMixin from 'shared/mixins/globalConfigMixin';
import alertMixin from 'shared/mixins/alertMixin';
@@ -100,6 +102,9 @@ export default {
VueHcaptcha,
},
mixins: [globalConfigMixin, alertMixin],
setup() {
return { v$: useVuelidate() };
},
data() {
return {
credentials: {
@@ -155,7 +160,7 @@ export default {
return true;
},
passwordErrorText() {
const { password } = this.$v.credentials;
const { password } = this.v$.credentials;
if (!password.$error) {
return '';
}
@@ -173,8 +178,8 @@ export default {
},
methods: {
async submit() {
this.$v.$touch();
if (this.$v.$invalid) {
this.v$.$touch();
if (this.v$.$invalid) {
this.resetCaptcha();
return;
}
app/javascript/v3/views/login/Index.vue
+12 -6
View File
@@ -49,8 +49,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"
@@ -60,8 +60,8 @@
required
: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 to="auth/reset/password" class="text-link">
@@ -84,7 +84,9 @@
</template>
<script>
import { required, email } from 'vuelidate/lib/validators';
import { useVuelidate } from '@vuelidate/core';
import { required, email } from '@vuelidate/validators';
import globalConfigMixin from 'shared/mixins/globalConfigMixin';
import SubmitButton from '../../components/Button/SubmitButton.vue';
import { mapGetters } from 'vuex';
@@ -93,6 +95,7 @@ import GoogleOAuthButton from '../../components/GoogleOauth/Button.vue';
import FormInput from '../../components/Form/Input.vue';
import { login } from '../../api/auth';
import Spinner from 'shared/components/Spinner.vue';
const ERROR_MESSAGES = {
'no-account-found': 'LOGIN.OAUTH.NO_ACCOUNT_FOUND',
'business-account-only': 'LOGIN.OAUTH.BUSINESS_ACCOUNTS_ONLY',
@@ -114,6 +117,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
@@ -173,7 +179,7 @@ export default {
bus.$emit('newToastMessage', this.loginApi.message);
},
submitLogin() {
if (this.$v.credentials.email.$invalid && !this.email) {
if (this.v$.credentials.email.$invalid && !this.email) {
this.showAlert(this.$t('LOGIN.EMAIL.ERROR'));
return;
}
app/javascript/widget/components/template/EmailInput.vue
+9 -5
View File
@@ -10,12 +10,12 @@
class="form-input"
:placeholder="$t('EMAIL_PLACEHOLDER')"
:class="inputHasError"
@input="$v.email.$touch"
@input="v$.email.$touch"
@keydown.enter="onSubmit"
/>
<button
class="button small"
:disabled="$v.email.$invalid"
:disabled="v$.email.$invalid"
:style="{
background: widgetColor,
borderColor: widgetColor,
@@ -31,8 +31,9 @@
<script>
import { mapGetters } from 'vuex';
import { required, email } from 'vuelidate/lib/validators';
import { required, email } from '@vuelidate/validators';
import { getContrastingTextColor } from '@chatwoot/utils';
import { useVuelidate } from '@vuelidate/core';
import FluentIcon from 'shared/components/FluentIcon/Index.vue';
import Spinner from 'shared/components/Spinner.vue';
@@ -54,6 +55,9 @@ export default {
default: () => {},
},
},
setup() {
return { v$: useVuelidate() };
},
data() {
return {
email: '',
@@ -79,7 +83,7 @@ export default {
${this.$dm('border-black-200', 'dark:border-black-500')}`;
},
inputHasError() {
return this.$v.email.$error
return this.v$.email.$error
? `${this.inputColor} error`
: `${this.inputColor}`;
},
@@ -92,7 +96,7 @@ export default {
},
methods: {
async onSubmit() {
if (this.$v.$invalid) {
if (this.v$.$invalid) {
return;
}
this.isUpdating = true;