new Vue({
el: '#app',
data: {
status: 100,
isFirstnameRequired: false,
isLastnameRequired: false,
form: {
'PKeyName': '',
'PKey':'',
'g-recaptcha-response': '',
'contact_is_company':'',
'contact_bank_accounts':'',
'contact_comm_lastname':'',
'contact_comm_firstname':'',
'contact_fiscal_street3':'',
'contact_street_number':'',
'contact_postal_box':'',
'contact_zip':'',
'contact_city':'',
'contact_email':'',
'contact_national_number':'',
'contact_phone':'',
'contact_company_name':'',
'contact_company_number':'',
'contact_company_legal_status':'',
'contact_language':'',
'form_submitted':'1'
},
endpoint: ''
},
mounted: function() {
// reCAPTCHA
setTimeout(this.grecaptchaRender, 1000);
// bet form handler url
this.endpoint = this.$refs.form.getAttribute('action');
//force hidden input values in form
this.form.contact_language = this.$refs.LanguageInput.value
// PKey
this.form.PKeyName = this.$refs.PKeyNameInput.value
this.form.PKey = this.$refs.PKeyInput.value
},
methods: {
showHidden(isCompany) {
this.status = isCompany ? 102 : 101;
this.isFirstnameRequired = !isCompany;
this.isLastnameRequired = !isCompany;
},
validateNationalNumber(event) {
const elem = event.target;
let national_number = this.form.contact_national_number.replace(/\D/g, "");
if (!national_number || national_number.length !== 11) {
elem.setCustomValidity(' ');
} else {
const yearPart = parseInt(national_number.substring(0, 2), 10);
const currentYear = new Date().getFullYear();
let isValidChecksum;
const baseNumber = parseInt(national_number.substring(0, 9), 10);
const checksum = parseInt(national_number.substring(9, 11), 10);
if (yearPart >= 0 && yearPart < (currentYear % 100)) {
isValidChecksum = (97 - ((2000000000 + baseNumber) % 97)) === checksum;
} else {
isValidChecksum = (97 - (baseNumber % 97)) === checksum;
}
if (!isValidChecksum) {
elem.setCustomValidity(' ');
} else {
elem.setCustomValidity('');
}
}
},
formatNationalNumber() {
let value = this.form.contact_national_number.replace(/\D/g, "");
if (value.length > 2) value = value.slice(0, 2) + "." + value.slice(2);
if (value.length > 5) value = value.slice(0, 5) + "." + value.slice(5);
if (value.length > 8) value = value.slice(0, 8) + "-" + value.slice(8);
if (value.length > 12) value = value.slice(0, 12) + "." + value.slice(12, 14);
this.form.contact_national_number = value;
},
formatCompanyNumber() {
let value = this.form.contact_company_number.replace(/\D/g, "");
if (value.length > 4) value = value.slice(0, 4) + "." + value.slice(4);
if (value.length > 8) value = value.slice(0, 8) + "." + value.slice(8);
this.form.contact_company_number = value;
},
sendFormData: function() {
// status 150 : display loader
this.status = 150;
var $this = this;
// Send form data to the Form Handler with axios
axios({
method: 'POST',
url: this.endpoint,
data: this.form,
headers: {
'Content-Type': 'application/json; charset=UTF-8',
},
validateStatus: function() { return true }
}).then(function(result) {
// status 200 : display confirmation msg
$this.status = result.status;
if(result.data.Status != 'OK') {
// status 500 : display error msg
$this.status = 500;
console.error(result.data.Message);
}
}).catch(function(error) {
console.error(result);
});
},
validateForm: function() {
// show form validation messages
this.$refs.form.classList.add('was-validated');
for (key in this.form) {
this.form[key] = this.form[key].trim()
if (key == "contact_email") {this.form[key] = this.form[key].toLowerCase();}
if (key == "contact_city" || key == "contact_bank_accounts") {this.form[key] = this.form[key].toUpperCase();}
}
//console.log(this.form)
// execute reCAPTCHA if valid form
if (this.$refs.form.checkValidity() !== false) this.grecaptchaExecute();
},
grecaptchaRender: function() {
// display reCAPTCHA badge
grecaptcha.render(this.$refs.recaptcha, {
'sitekey' : '6LeehzsqAAAAAFb2Q8kemR8_T82zxQ1a0N4pePsd',
'callback' : this.grecaptchaCallback,
'size': 'invisible'
});
},
grecaptchaExecute: function() {
// trigger reCAPTCHA validation
grecaptcha.execute();
},
grecaptchaCallback: function() {
// reCAPTCHA sends request for token
var $this = this;
return new Promise(function (resolve, reject) {
if (grecaptcha.getResponse() !== "") {
// store reCAPTCHA token
$this.form['g-recaptcha-response'] = grecaptcha.getResponse();
// send data to form handler
$this.sendFormData();
}
grecaptcha.reset();
});
}
}
})