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
Show stats 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": {
"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": {
"PLACEHOLDER": "Enter the location of the contact",

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

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