Add contact modal, success messages, form reset on open
This commit is contained in:
+52
@@ -487,6 +487,58 @@ async def request_access(request: Request, db: Session = Depends(get_db)):
|
||||
return {"ok": True}
|
||||
|
||||
|
||||
|
||||
|
||||
@app.post("/api/contact")
|
||||
async def contact_ruslan(request: Request):
|
||||
import re as _re
|
||||
try:
|
||||
data = await request.json()
|
||||
except Exception:
|
||||
raise HTTPException(status_code=400, detail="Invalid JSON")
|
||||
|
||||
name = str(data.get("name", "")).strip()
|
||||
email = str(data.get("email", "")).strip()
|
||||
phone = str(data.get("phone", "")).strip()
|
||||
text = str(data.get("text", "")).strip()
|
||||
|
||||
if not name or not email or not phone or not text:
|
||||
raise HTTPException(status_code=422, detail="Заполните все обязательные поля")
|
||||
if not _re.match(r"^[^\s@]+@[^\s@]+\.[^\s@]+$", email):
|
||||
raise HTTPException(status_code=422, detail="Некорректный email")
|
||||
if not _re.match(r"^[\+\d][\d\s\-\(\)]{6,18}$", phone):
|
||||
raise HTTPException(status_code=422, detail="Некорректный номер телефона")
|
||||
|
||||
divider = "━━━━━━━━━━━━━━━━━━━━━━"
|
||||
msg = (
|
||||
f"🔔 *Сообщение через форму полигона*\n"
|
||||
f"{divider}\n\n"
|
||||
f"👤 *Имя:* {name}\n"
|
||||
f"📧 *Email:* {email}\n"
|
||||
f"📱 *Телефон:* {phone}\n\n"
|
||||
f"💬 *Сообщение:*\n{text}"
|
||||
)
|
||||
|
||||
if not TELEGRAM_BOT_TOKEN or not TELEGRAM_CHAT_ID:
|
||||
log_event("telegram_not_configured")
|
||||
return {"ok": True}
|
||||
|
||||
try:
|
||||
payload = _json.dumps({
|
||||
"chat_id": TELEGRAM_CHAT_ID,
|
||||
"text": msg,
|
||||
"parse_mode": "Markdown",
|
||||
}).encode()
|
||||
url = f"{TELEGRAM_API_URL}{TELEGRAM_BOT_TOKEN}/sendMessage"
|
||||
req = _urllib_request.Request(url, data=payload, headers={"Content-Type": "application/json"})
|
||||
with _urllib_request.urlopen(req, timeout=10) as resp:
|
||||
resp.read()
|
||||
except Exception as e:
|
||||
log_event("telegram_send_error", error=str(e))
|
||||
raise HTTPException(status_code=502, detail="Ошибка отправки")
|
||||
|
||||
return {"ok": True}
|
||||
|
||||
@app.post("/login")
|
||||
def login(
|
||||
request: Request,
|
||||
|
||||
@@ -1523,3 +1523,72 @@ button {
|
||||
box-shadow: 0 0 0 3px rgba(220, 70, 70, 0.15) !important;
|
||||
background: rgba(220, 70, 70, 0.05) !important;
|
||||
}
|
||||
|
||||
/* Access modal success state */
|
||||
.am-success-msg {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
padding: 1.5rem 0.5rem 0.5rem;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
.am-success-icon {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #1e7dc8, #1360a0);
|
||||
color: #fff;
|
||||
font-size: 1.6rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 18px rgba(20, 96, 160, 0.4);
|
||||
}
|
||||
.am-success-title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: #e0f0ff;
|
||||
}
|
||||
.am-success-sub {
|
||||
font-size: 0.88rem;
|
||||
color: rgba(160, 205, 238, 0.75);
|
||||
line-height: 1.5;
|
||||
}
|
||||
.am-success-sub strong {
|
||||
color: rgba(200, 230, 255, 0.9);
|
||||
}
|
||||
|
||||
/* Textarea in access modal */
|
||||
.access-textarea {
|
||||
background: rgba(255,255,255,0.05);
|
||||
border: 1px solid rgba(255,255,255,0.12);
|
||||
border-radius: 8px;
|
||||
padding: 0.6rem 0.85rem;
|
||||
color: #daeeff;
|
||||
font-size: 0.92rem;
|
||||
font-family: inherit;
|
||||
outline: none;
|
||||
resize: vertical;
|
||||
min-height: 90px;
|
||||
transition: border-color 0.15s, box-shadow 0.15s;
|
||||
}
|
||||
.access-textarea::placeholder {
|
||||
color: rgba(120,170,210,0.35);
|
||||
}
|
||||
.access-textarea:focus {
|
||||
border-color: rgba(42,130,210,0.55);
|
||||
box-shadow: 0 0 0 3px rgba(42,130,210,0.12);
|
||||
}
|
||||
.access-textarea.am-invalid {
|
||||
border-color: rgba(220, 70, 70, 0.7) !important;
|
||||
box-shadow: 0 0 0 3px rgba(220, 70, 70, 0.15) !important;
|
||||
background: rgba(220, 70, 70, 0.05) !important;
|
||||
}
|
||||
|
||||
/* Footer link as button */
|
||||
.login-footer-link {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
+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