KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Chore: Add validation for contact phone field (#2105)

Browse source
This commit is contained in:
Nithin David Thomas 2021-04-16 18:48:13 +05:30 • committed by GitHub
parent ce4ce3c86c
commit 98bfef026e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 31 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

4
app/javascript/dashboard/i18n/locale/en/contact.json
View file

@ -71,7 +71,9 @@
}, },
"PHONE_NUMBER": { "PHONE_NUMBER": {
"PLACEHOLDER": "Enter the phone number of the contact", "PLACEHOLDER": "Enter the phone number of the contact",
"LABEL": "Phone Number" "LABEL": "Phone Number",
"HELP": "Phone number should be of E.164 format eg: +1415555555 [+][country code][area code][local phone number]",
"ERROR": "Phone number should be either empty or of E.164 format"
}, },
"LOCATION": { "LOCATION": {
"PLACEHOLDER": "Enter the location of the contact", "PLACEHOLDER": "Enter the location of the contact",

33
app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
View file

@ -35,12 +35,26 @@
</label> </label>
</div> </div>
<div class="row"> <div class="row">
<woot-input <div class="medium-12 columns">
v-model.trim="phoneNumber" <label :class="{ error: $v.phoneNumber.$error }">
class="columns" {{ $t('CONTACT_FORM.FORM.PHONE_NUMBER.LABEL') }}
:label="$t('CONTACT_FORM.FORM.PHONE_NUMBER.LABEL')" <input
:placeholder="$t('CONTACT_FORM.FORM.PHONE_NUMBER.PLACEHOLDER')" v-model.trim="phoneNumber"
/> type="text"
:placeholder="$t('CONTACT_FORM.FORM.PHONE_NUMBER.PLACEHOLDER')"
@input="$v.phoneNumber.$touch"
/>
<span v-if="$v.phoneNumber.$error" class="message">
{{ $t('CONTACT_FORM.FORM.PHONE_NUMBER.ERROR') }}
</span>
</label>
<div
v-if="$v.phoneNumber.$error || !phoneNumber"
class="callout small warning"
>
{{ $t('CONTACT_FORM.FORM.PHONE_NUMBER.HELP') }}
</div>
</div>
</div> </div>
<woot-input <woot-input
v-model.trim="companyName" v-model.trim="companyName"
@ -87,6 +101,8 @@ import {
} from 'shared/helpers/CustomErrors'; } from 'shared/helpers/CustomErrors';
import { required } from 'vuelidate/lib/validators'; import { required } from 'vuelidate/lib/validators';
import { isPhoneE164OrEmpty } from 'shared/helpers/Validators';
export default { export default {
mixins: [alertMixin], mixins: [alertMixin],
props: { props: {
@ -131,7 +147,9 @@ export default {
description: {}, description: {},
email: {}, email: {},
companyName: {}, companyName: {},
phoneNumber: {}, phoneNumber: {
isPhoneE164OrEmpty,
},
bio: {}, bio: {},
}, },
@ -190,6 +208,7 @@ export default {
async handleSubmit() { async handleSubmit() {
this.resetDuplicate(); this.resetDuplicate();
this.$v.$touch(); this.$v.$touch();
if (this.$v.$invalid) { if (this.$v.$invalid) {
return; return;
} }

2
app/javascript/shared/helpers/Validators.js Normal file
View file

@ -0,0 +1,2 @@
export const isPhoneE164 = value => !!value.match(/^\+[1-9]\d{1,14}$/);
export const isPhoneE164OrEmpty = value => isPhoneE164(value) || value === '';