mirror of
https://github.com/hasura/graphql-engine.git
synced 2024-12-24 07:52:14 +03:00
120 lines
3.7 KiB
JavaScript
120 lines
3.7 KiB
JavaScript
|
const mysql_email_input = document.getElementById('mysql-EMAIL');
|
||
|
const mysql_submit_btn = document.getElementById('mysql-embedded-subscribe');
|
||
|
const mysql_success_status = document.getElementById('mysql-success-response');
|
||
|
const mysql_status_error = document.getElementById('mysql-error-response');
|
||
|
|
||
|
mysql_email_input.addEventListener('input', function() {
|
||
|
mysql_submit_btn.value = 'Subscribe';
|
||
|
mysql_submit_btn.disabled = false;
|
||
|
|
||
|
mysql_status_error.innerHTML = '';
|
||
|
mysql_status_error.classList.add('hide');
|
||
|
});
|
||
|
|
||
|
const showMySQLErrorMsg = () => {
|
||
|
mysql_submit_btn.value = 'Subscribe';
|
||
|
mysql_submit_btn.disabled = false;
|
||
|
mysql_status_error.innerHTML = 'Please enter a valid email';
|
||
|
mysql_status_error.classList.remove('hide');
|
||
|
clearMySQLMsg();
|
||
|
};
|
||
|
|
||
|
const clearMySQLMsg = () => {
|
||
|
setTimeout(function(){
|
||
|
mysql_success_status.innerHTML = '';
|
||
|
mysql_status_error.innerHTML = '';
|
||
|
|
||
|
mysql_success_status.classList.add('hide');
|
||
|
mysql_status_error.classList.add('hide');
|
||
|
mysql_submit_btn.disabled = true;
|
||
|
//reset input
|
||
|
mysql_email_input.value = '';
|
||
|
}, 3000);
|
||
|
}
|
||
|
|
||
|
const submitMySQLForm = function (form) {
|
||
|
|
||
|
let gqlEndpoint = 'https://graphql-engine-website.hasura.io/v1/graphql';
|
||
|
if(window.location.host !== "hasura.io") {
|
||
|
gqlEndpoint = 'https://graphql-engine-website.hasura-stg.hasura-app.io/v1/graphql';
|
||
|
}
|
||
|
// change button state
|
||
|
mysql_submit_btn.value = 'Subscribing...';
|
||
|
mysql_submit_btn.disabled = true;
|
||
|
|
||
|
const email = form.elements["EMAIL"].value;
|
||
|
|
||
|
const hbs_context = {
|
||
|
"hutk": readCookie("hubspotutk"), // include this parameter and set it to the hubspotutk cookie value to enable cookie tracking on your submission
|
||
|
"pageUri": window.location.host + window.location.pathname,
|
||
|
"pageName": document.title,
|
||
|
};
|
||
|
|
||
|
const gqlMutation = `mutation notifyDatabaseSupport($object: databaseSupportInput!) {
|
||
|
notifyDatabaseSupport(object: $object) {
|
||
|
id
|
||
|
}
|
||
|
}`;
|
||
|
|
||
|
const object = {
|
||
|
"category": "docs",
|
||
|
"database": "MySQL",
|
||
|
"email": email,
|
||
|
"hbs_context": hbs_context
|
||
|
};
|
||
|
|
||
|
fetch(gqlEndpoint, {
|
||
|
method: 'POST',
|
||
|
body: JSON.stringify({
|
||
|
query: gqlMutation,
|
||
|
variables: { object: object }
|
||
|
}),
|
||
|
})
|
||
|
.then(response => response.json())
|
||
|
.then(data => {
|
||
|
// change button state
|
||
|
mysql_submit_btn.value = 'Subscribe';
|
||
|
mysql_submit_btn.disabled = false;
|
||
|
if (data && data.data && data.data.notifyDatabaseSupport.id) {
|
||
|
mysql_success_status.innerHTML = 'Subscribed!';
|
||
|
mysql_success_status.classList.remove('hide');
|
||
|
} else {
|
||
|
if(data.errors && data.errors[0].message.includes('Uniqueness violation')) {
|
||
|
mysql_status_error.innerHTML = 'You have already subscribed';
|
||
|
} else {
|
||
|
mysql_status_error.innerHTML = 'Something went wrong';
|
||
|
}
|
||
|
mysql_status_error.classList.remove('hide');
|
||
|
}
|
||
|
clearMySQLMsg();
|
||
|
})
|
||
|
.catch((error) => {
|
||
|
console.error('Error:', error);
|
||
|
mysql_submit_btn.value = 'Subscribe';
|
||
|
mysql_submit_btn.disabled = false;
|
||
|
});
|
||
|
|
||
|
};
|
||
|
|
||
|
document.addEventListener('submit', function (event) {
|
||
|
|
||
|
// Only run on forms flagged for mysql-subscribe-form validation
|
||
|
if (!event.target.classList.contains('mysql-subscribe-form')) return;
|
||
|
|
||
|
// Prevent form from submitting
|
||
|
event.preventDefault();
|
||
|
|
||
|
// email validation
|
||
|
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||
|
|
||
|
if(!emailPattern.test(mysql_email_input.value)) {
|
||
|
showMySQLErrorMsg();
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
// Otherwise, let the form submit normally
|
||
|
submitMySQLForm(event.target);
|
||
|
|
||
|
|
||
|
}, false);
|