Add contact modal, success messages, form reset on open
This commit is contained in:
+178
-2
@@ -74,7 +74,7 @@
|
||||
<button type="button" class="login-request-btn" id="btn-request-access" data-open-access-modal="1">Запросить доступ</button>
|
||||
</div>
|
||||
<footer class="login-footer">
|
||||
<a href="mailto:rgalyaviev@mont.com" class="login-footer-link">Made by Galyaviev</a>
|
||||
<button type="button" class="login-footer-link" id="btn-contact-ruslan">Made by Galyaviev</button>
|
||||
</footer>
|
||||
</main>
|
||||
</div>
|
||||
@@ -130,7 +130,31 @@
|
||||
const errEl = document.getElementById('am-error');
|
||||
let productsLoaded = false;
|
||||
|
||||
function resetAccessForm() {
|
||||
if (!document.getElementById('am-name')) {
|
||||
document.querySelector('.access-modal-body').innerHTML = `
|
||||
<div class="access-field"><label>Имя и фамилия <span class="req">*</span></label><input id="am-name" type="text" placeholder="Иван Иванов" /></div>
|
||||
<div class="access-field"><label>Название компании <span class="req">*</span></label><input id="am-company" type="text" placeholder="ООО Компания" /></div>
|
||||
<div class="access-field"><label>Email <span class="req">*</span></label><input id="am-email" type="email" placeholder="ivan@company.ru" /></div>
|
||||
<div class="access-field"><label>Телефон <span class="req">*</span></label><input id="am-phone" type="tel" placeholder="+7 (999) 000-00-00" /></div>
|
||||
<div class="access-field"><label>Ваш менеджер в МОНТ</label><input id="am-manager" type="text" placeholder="Если известно — укажите имя" /></div>
|
||||
<div class="access-field"><label>Интересующие продукты</label><div id="am-products" class="access-products-wrap"><div class="access-products-loading">Загрузка...</div></div></div>
|
||||
<div id="am-error" class="access-modal-error" style="display:none"></div>`;
|
||||
document.querySelector('.access-modal-footer').innerHTML = `<button type="button" class="access-btn-cancel" id="am-cancel">Отмена</button><button type="button" class="access-btn-submit" id="am-submit">Запросить доступ</button>`;
|
||||
document.getElementById('am-cancel').addEventListener('click', closeModal);
|
||||
document.getElementById('am-submit').addEventListener('click', submitForm);
|
||||
document.querySelectorAll('#am-name,#am-company,#am-email,#am-phone').forEach(function(el){ el.addEventListener('input', function(){ el.classList.remove('am-invalid'); }); });
|
||||
productsLoaded = false;
|
||||
} else {
|
||||
['am-name','am-company','am-email','am-phone','am-manager'].forEach(function(id){ var el=document.getElementById(id); if(el){el.value='';el.classList.remove('am-invalid');} });
|
||||
document.querySelectorAll('#am-products input[type=checkbox]').forEach(function(cb){ cb.checked=false; });
|
||||
var err=document.getElementById('am-error'); if(err) err.style.display='none';
|
||||
var btn=document.getElementById('am-submit'); if(btn){btn.disabled=false;btn.textContent='Запросить доступ';}
|
||||
}
|
||||
}
|
||||
|
||||
function openModal() {
|
||||
resetAccessForm();
|
||||
overlay.style.display = 'flex';
|
||||
document.body.style.overflow = 'hidden';
|
||||
if (!productsLoaded) loadProducts();
|
||||
@@ -217,7 +241,15 @@
|
||||
throw new Error(d.detail || 'Ошибка отправки');
|
||||
}
|
||||
btnSubmit.textContent = 'Отправлено!';
|
||||
setTimeout(closeModal, 1500);
|
||||
// Show success message
|
||||
const body = document.querySelector('.access-modal-body');
|
||||
const footer = document.querySelector('.access-modal-footer');
|
||||
body.innerHTML = '<div class="am-success-msg">' +
|
||||
'<div class="am-success-icon">✓</div>' +
|
||||
'<div class="am-success-title">Запрос отправлен</div>' +
|
||||
'<div class="am-success-sub">После утверждения доступы придут на электронную почту <strong>' + email + '</strong></div>' +
|
||||
'</div>';
|
||||
footer.innerHTML = '<button type="button" class="access-btn-cancel" onclick="this.closest('.access-modal-overlay').style.display=\'none\';document.body.style.overflow=\'\';productsLoaded=false;">Закрыть</button>';
|
||||
} catch(e) {
|
||||
errEl.textContent = e.message || 'Ошибка отправки, попробуйте позже';
|
||||
errEl.style.display = 'block';
|
||||
@@ -249,5 +281,149 @@
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!-- Contact Ruslan Modal -->
|
||||
<div id="contact-modal" class="access-modal-overlay" style="display:none" aria-modal="true" role="dialog">
|
||||
<div class="access-modal">
|
||||
<div class="access-modal-header">
|
||||
<div class="access-modal-title">Связаться с Русланом</div>
|
||||
<div class="access-modal-sub">Напишите — отвечу в ближайшее время</div>
|
||||
</div>
|
||||
<div class="access-modal-body" id="cm-body">
|
||||
<div class="access-field">
|
||||
<label>Ваше имя <span class="req">*</span></label>
|
||||
<input id="cm-name" type="text" placeholder="Иван Иванов" />
|
||||
</div>
|
||||
<div class="access-field">
|
||||
<label>Email <span class="req">*</span></label>
|
||||
<input id="cm-email" type="email" placeholder="ivan@company.ru" />
|
||||
</div>
|
||||
<div class="access-field">
|
||||
<label>Телефон <span class="req">*</span></label>
|
||||
<input id="cm-phone" type="tel" placeholder="+7 (999) 000-00-00" />
|
||||
</div>
|
||||
<div class="access-field">
|
||||
<label>Сообщение <span class="req">*</span></label>
|
||||
<textarea id="cm-text" class="access-textarea" placeholder="Ваш вопрос или предложение..." rows="4"></textarea>
|
||||
</div>
|
||||
<div id="cm-error" class="access-modal-error" style="display:none"></div>
|
||||
</div>
|
||||
<div class="access-modal-footer" id="cm-footer">
|
||||
<button type="button" class="access-btn-cancel" id="cm-cancel">Отмена</button>
|
||||
<button type="button" class="access-btn-submit" id="cm-submit">Отправить</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const overlay = document.getElementById('contact-modal');
|
||||
const btnCancel = document.getElementById('cm-cancel');
|
||||
const btnSubmit = document.getElementById('cm-submit');
|
||||
const errEl = document.getElementById('cm-error');
|
||||
|
||||
function resetContactForm() {
|
||||
if (!document.getElementById('cm-name')) {
|
||||
document.getElementById('cm-body').innerHTML = `
|
||||
<div class="access-field"><label>Ваше имя <span class="req">*</span></label><input id="cm-name" type="text" placeholder="Иван Иванов" /></div>
|
||||
<div class="access-field"><label>Email <span class="req">*</span></label><input id="cm-email" type="email" placeholder="ivan@company.ru" /></div>
|
||||
<div class="access-field"><label>Телефон <span class="req">*</span></label><input id="cm-phone" type="tel" placeholder="+7 (999) 000-00-00" /></div>
|
||||
<div class="access-field"><label>Сообщение <span class="req">*</span></label><textarea id="cm-text" class="access-textarea" placeholder="Ваш вопрос или предложение..." rows="4"></textarea></div>
|
||||
<div id="cm-error" class="access-modal-error" style="display:none"></div>`;
|
||||
document.getElementById('cm-footer').innerHTML = `<button type="button" class="access-btn-cancel" id="cm-cancel">Отмена</button><button type="button" class="access-btn-submit" id="cm-submit">Отправить</button>`;
|
||||
document.getElementById('cm-cancel').addEventListener('click', closeContact);
|
||||
document.getElementById('cm-submit').addEventListener('click', submitContact);
|
||||
document.querySelectorAll('#cm-name,#cm-email,#cm-phone,#cm-text').forEach(function(el){ el.addEventListener('input', function(){ el.classList.remove('am-invalid'); }); });
|
||||
} else {
|
||||
['cm-name','cm-email','cm-phone','cm-text'].forEach(function(id){ var el=document.getElementById(id); if(el){el.value='';el.classList.remove('am-invalid');} });
|
||||
var err=document.getElementById('cm-error'); if(err) err.style.display='none';
|
||||
var btn=document.getElementById('cm-submit'); if(btn){btn.disabled=false;btn.textContent='Отправить';}
|
||||
}
|
||||
}
|
||||
|
||||
function openContact() {
|
||||
resetContactForm();
|
||||
overlay.style.display = 'flex';
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
function closeContact() {
|
||||
overlay.style.display = 'none';
|
||||
document.body.style.overflow = '';
|
||||
errEl.style.display = 'none';
|
||||
document.querySelectorAll('#contact-modal .am-invalid').forEach(el => el.classList.remove('am-invalid'));
|
||||
}
|
||||
|
||||
async function submitContact() {
|
||||
const name = document.getElementById('cm-name').value.trim();
|
||||
const email = document.getElementById('cm-email').value.trim();
|
||||
const phone = document.getElementById('cm-phone').value.trim();
|
||||
const text = document.getElementById('cm-text').value.trim();
|
||||
|
||||
const emailRe = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
const phoneRe = /^[\+\d][\d\s\-\(\)]{6,18}$/;
|
||||
|
||||
const fields = [
|
||||
{ el: document.getElementById('cm-name'), check: () => !!name, msg: 'Введите имя' },
|
||||
{ el: document.getElementById('cm-email'), check: () => emailRe.test(email), msg: 'Введите корректный email' },
|
||||
{ el: document.getElementById('cm-phone'), check: () => phoneRe.test(phone), msg: 'Введите корректный номер телефона' },
|
||||
{ el: document.getElementById('cm-text'), check: () => !!text, msg: 'Введите сообщение' },
|
||||
];
|
||||
|
||||
const errors = [];
|
||||
fields.forEach(f => {
|
||||
if (!f.check()) { f.el.classList.add('am-invalid'); errors.push(f.msg); }
|
||||
else f.el.classList.remove('am-invalid');
|
||||
});
|
||||
if (errors.length) {
|
||||
errEl.textContent = errors.join(' • ');
|
||||
errEl.style.display = 'block';
|
||||
return;
|
||||
}
|
||||
|
||||
btnSubmit.disabled = true;
|
||||
btnSubmit.textContent = 'Отправка...';
|
||||
errEl.style.display = 'none';
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/contact', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({name, email, phone, text}),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const d = await res.json().catch(() => ({}));
|
||||
throw new Error(d.detail || 'Ошибка отправки');
|
||||
}
|
||||
document.getElementById('cm-body').innerHTML =
|
||||
'<div class="am-success-msg">' +
|
||||
'<div class="am-success-icon">✓</div>' +
|
||||
'<div class="am-success-title">Отправлено</div>' +
|
||||
'<div class="am-success-sub">Сообщение получено — свяжемся с вами в ближайшее время</div>' +
|
||||
'</div>';
|
||||
document.getElementById('cm-footer').innerHTML =
|
||||
'<button type="button" class="access-btn-cancel" onclick="document.getElementById('contact-modal').style.display='none';document.body.style.overflow='';">Закрыть</button>';
|
||||
} catch(e) {
|
||||
errEl.textContent = e.message || 'Ошибка отправки, попробуйте позже';
|
||||
errEl.style.display = 'block';
|
||||
btnSubmit.disabled = false;
|
||||
btnSubmit.textContent = 'Отправить';
|
||||
}
|
||||
}
|
||||
|
||||
document.querySelectorAll('#cm-name,#cm-email,#cm-phone,#cm-text').forEach(el => {
|
||||
el.addEventListener('input', () => el.classList.remove('am-invalid'));
|
||||
});
|
||||
|
||||
document.getElementById('btn-contact-ruslan').addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
openContact();
|
||||
});
|
||||
btnCancel.addEventListener('click', closeContact);
|
||||
btnSubmit.addEventListener('click', submitContact);
|
||||
overlay.addEventListener('click', function(e) { if (e.target === overlay) closeContact(); });
|
||||
document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && overlay.style.display !== 'none') closeContact(); });
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user