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

chore: Migrate all instances of old vuelidate to new v2 syntax

Browse Source
This commit is contained in:
Fayaz Ahmed
2024-06-10 15:15:14 +05:30
parent 20b2dc8c6f
commit e0ddeb4ee6
47 changed files with 588 additions and 405 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/v3/views/auth/password/Edit.vue
+10 -6
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,6 +48,7 @@
</template>
<script>
import { useVuelidate } from '@vuelidate/core';
import { required, minLength } from 'vuelidate/lib/validators';
import FormInput from '../../../components/Form/Input.vue';
import SubmitButton from '../../../components/Button/SubmitButton.vue';
@@ -66,6 +67,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
+7 -3
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,6 +47,7 @@
</template>
<script>
import { useVuelidate } from '@vuelidate/core';
import { required, minLength, email } from 'vuelidate/lib/validators';
import globalConfigMixin from 'shared/mixins/globalConfigMixin';
import { mapGetters } from 'vuex';
@@ -58,6 +59,9 @@ import alertMixin from 'shared/mixins/alertMixin';
export default {
components: { FormInput, SubmitButton },
mixins: [globalConfigMixin, alertMixin],
setup() {
return { v$: useVuelidate() };
},
data() {
return {
credentials: { email: '' },
app/javascript/v3/views/auth/signup/components/Signup/Form.vue
+19 -15
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,6 +79,7 @@
</template>
<script>
import { useVuelidate } from '@vuelidate/core';
import { required, minLength, email } from 'vuelidate/lib/validators';
import { mapGetters } from 'vuex';
import globalConfigMixin from 'shared/mixins/globalConfigMixin';
@@ -100,6 +101,9 @@ export default {
VueHcaptcha,
},
mixins: [globalConfigMixin, alertMixin],
setup() {
return { v$: useVuelidate() };
},
data() {
return {
credentials: {
@@ -155,7 +159,7 @@ export default {
return true;
},
passwordErrorText() {
const { password } = this.$v.credentials;
const { password } = this.v$.credentials;
if (!password.$error) {
return '';
}
@@ -173,8 +177,8 @@ export default {
},
methods: {
async submit() {
this.$v.$touch();
if (this.$v.$invalid) {
this.v$.$touch();
if (this.v$.$invalid) {
this.resetCaptcha();
return;
}
app/javascript/v3/views/login/Index.vue
+10 -6
View File
@@ -50,8 +50,8 @@
required
:label="$t('LOGIN.EMAIL.LABEL')"
:placeholder="$t('LOGIN.EMAIL.PLACEHOLDER')"
:has-error="$v.credentials.email.$error"
@input="$v.credentials.email.$touch"
:has-error="v$.credentials.email.$error"
@input="v$.credentials.email.$touch"
/>
<form-input
v-model.trim="credentials.password"
@@ -62,8 +62,8 @@
:tabindex="2"
:label="$t('LOGIN.PASSWORD.LABEL')"
:placeholder="$t('LOGIN.PASSWORD.PLACEHOLDER')"
:has-error="$v.credentials.password.$error"
@input="$v.credentials.password.$touch"
:has-error="v$.credentials.password.$error"
@input="v$.credentials.password.$touch"
>
<p v-if="!globalConfig.disableUserProfileUpdate">
<router-link
@@ -91,7 +91,8 @@
</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';
@@ -122,6 +123,9 @@ export default {
email: { type: String, default: '' },
authError: { type: String, default: '' },
},
setup() {
return { v$: useVuelidate() };
},
data() {
return {
// We need to initialize the component with any
@@ -194,7 +198,7 @@ export default {
this.showAlert(this.loginApi.message);
},
submitLogin() {
if (this.$v.credentials.email.$invalid && !this.email) {
if (this.v$.credentials.email.$invalid && !this.email) {
this.showAlertMessage(this.$t('LOGIN.EMAIL.ERROR'));
return;
}