Add contact modal, success messages, form reset on open

2026-05-14 06:42:09 +00:00
parent ba8f3cf753
commit b36b3f6325
3 changed files with 299 additions and 2 deletions
@@ -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;
+}
@@ -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>