Add request access modal on login page with Telegram notification
- Modal form: name, company, email, phone (required), manager (optional), product checkboxes - Products loaded from DB via GET /api/public/services-by-category (public route) - POST /api/request-access sends styled Telegram message with divider and emojis - Dark-themed modal matching login page design - CSS: overlay, card, fields, checkbox list, error, footer buttons
This commit is contained in:
+88
@@ -18,11 +18,15 @@ from sqlalchemy import delete, select, text, update
|
||||
from sqlalchemy.orm import Session
|
||||
from starlette.responses import HTMLResponse as _HR
|
||||
|
||||
import urllib.request as _urllib_request
|
||||
import urllib.parse as _urllib_parse
|
||||
import json as _json
|
||||
from config import (
|
||||
COOKIE_NAME, CSRF_COOKIE, GO_POOL_LOCK_TIMEOUT_SECONDS,
|
||||
GO_USER_LOCK_TIMEOUT_SECONDS, LOG_LEVEL, LOG_SLOW_REQUEST_MS,
|
||||
MAX_ACTIVE_SERVICES_PER_USER, PUBLIC_HOST, SESSION_IDLE_SECONDS,
|
||||
WEB_POOL_BUFFER, WEB_POOL_SIZE,
|
||||
TELEGRAM_BOT_TOKEN, TELEGRAM_CHAT_ID, TELEGRAM_API_URL,
|
||||
)
|
||||
from database import get_db
|
||||
from models import (
|
||||
@@ -394,6 +398,90 @@ def admin_page(request: Request, admin: User = Depends(require_admin), db: Sessi
|
||||
)
|
||||
|
||||
|
||||
|
||||
@app.get("/api/public/services-by-category")
|
||||
def public_services_by_category(db: Session = Depends(get_db)):
|
||||
services = db.execute(
|
||||
select(Service).where(Service.active == True).order_by(Service.name)
|
||||
).scalars().all()
|
||||
categories = db.execute(select(Category).order_by(Category.name)).scalars().all()
|
||||
cat_map = {c.id: c.name for c in categories}
|
||||
|
||||
svc_cats: dict[int, list[str]] = {}
|
||||
links = db.execute(select(ServiceCategory)).scalars().all()
|
||||
for lnk in links:
|
||||
svc_cats.setdefault(lnk.service_id, []).append(cat_map.get(lnk.category_id, ""))
|
||||
|
||||
result: dict[str, list[dict]] = {"Без категории": []}
|
||||
for svc in services:
|
||||
cats = svc_cats.get(svc.id, [])
|
||||
entry = {"id": svc.id, "name": svc.name}
|
||||
if cats:
|
||||
for cat in cats:
|
||||
result.setdefault(cat, []).append(entry)
|
||||
else:
|
||||
result["Без категории"].append(entry)
|
||||
if not result["Без категории"]:
|
||||
del result["Без категории"]
|
||||
return result
|
||||
|
||||
|
||||
@app.post("/api/request-access")
|
||||
async def request_access(request: Request, db: Session = Depends(get_db)):
|
||||
try:
|
||||
data = await request.json()
|
||||
except Exception:
|
||||
raise HTTPException(status_code=400, detail="Invalid JSON")
|
||||
|
||||
name = str(data.get("name", "")).strip()
|
||||
company = str(data.get("company", "")).strip()
|
||||
email = str(data.get("email", "")).strip()
|
||||
phone = str(data.get("phone", "")).strip()
|
||||
manager = str(data.get("manager", "")).strip()
|
||||
products = data.get("products", [])
|
||||
|
||||
if not name or not company or not email or not phone:
|
||||
raise HTTPException(status_code=422, detail="Заполните все обязательные поля")
|
||||
|
||||
products_text = ""
|
||||
if products:
|
||||
items = "\n".join(f" • {p}" for p in products)
|
||||
products_text = f"\n\n🖥 *Интересующие продукты:*\n{items}"
|
||||
|
||||
divider = "━━━━━━━━━━━━━━━━━━━━━━"
|
||||
manager_text = f"\n🤝 *Менеджер МОНТ:* {manager}" if manager else ""
|
||||
text = (
|
||||
f"🔔 *Новый запрос доступа к полигону МОНТ*\n"
|
||||
f"{divider}\n\n"
|
||||
f"👤 *Имя:* {name}\n"
|
||||
f"🏢 *Компания:* {company}\n"
|
||||
f"📧 *Email:* {email}\n"
|
||||
f"📱 *Телефон:* {phone}"
|
||||
f"{manager_text}"
|
||||
f"{products_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": text,
|
||||
"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,
|
||||
|
||||
@@ -1328,3 +1328,188 @@ button {
|
||||
color: #6bbfff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ========== Request Access Modal ========== */
|
||||
.access-modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(3, 8, 18, 0.82);
|
||||
backdrop-filter: blur(6px);
|
||||
z-index: 9000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.access-modal {
|
||||
background: linear-gradient(150deg, #0b1a2e 0%, #0d2040 100%);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 24px 80px rgba(0,0,0,0.65), 0 0 0 1px rgba(42,130,210,0.15);
|
||||
width: 100%;
|
||||
max-width: 520px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(42,130,210,0.3) transparent;
|
||||
}
|
||||
|
||||
.access-modal-header {
|
||||
padding: 1.75rem 1.75rem 0;
|
||||
}
|
||||
.access-modal-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: #e0f0ff;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
.access-modal-sub {
|
||||
font-size: 0.85rem;
|
||||
color: rgba(160,205,238,0.65);
|
||||
}
|
||||
|
||||
.access-modal-body {
|
||||
padding: 1.25rem 1.75rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.access-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
.access-field label {
|
||||
font-size: 0.82rem;
|
||||
font-weight: 600;
|
||||
color: rgba(160,205,238,0.8);
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.access-field .req {
|
||||
color: #5aadee;
|
||||
}
|
||||
.access-field input[type=text],
|
||||
.access-field input[type=email],
|
||||
.access-field input[type=tel] {
|
||||
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;
|
||||
outline: none;
|
||||
transition: border-color 0.15s, box-shadow 0.15s;
|
||||
}
|
||||
.access-field input[type=text]::placeholder,
|
||||
.access-field input[type=email]::placeholder,
|
||||
.access-field input[type=tel]::placeholder {
|
||||
color: rgba(120,170,210,0.35);
|
||||
}
|
||||
.access-field input[type=text]:focus,
|
||||
.access-field input[type=email]:focus,
|
||||
.access-field input[type=tel]:focus {
|
||||
border-color: rgba(42,130,210,0.55);
|
||||
box-shadow: 0 0 0 3px rgba(42,130,210,0.12);
|
||||
}
|
||||
|
||||
.access-products-wrap {
|
||||
background: rgba(255,255,255,0.03);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(42,130,210,0.3) transparent;
|
||||
}
|
||||
.access-products-loading {
|
||||
color: rgba(140,190,228,0.55);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.access-products-group {
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
.access-products-group:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.access-products-cat {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: rgba(100,165,215,0.6);
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
.access-product-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.2rem 0;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
color: rgba(200,228,255,0.8);
|
||||
}
|
||||
.access-product-item input[type=checkbox] {
|
||||
accent-color: #1e7dc8;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.access-product-item:hover span {
|
||||
color: #daeeff;
|
||||
}
|
||||
|
||||
.access-modal-error {
|
||||
background: rgba(220,60,60,0.12);
|
||||
border: 1px solid rgba(220,60,60,0.3);
|
||||
border-radius: 6px;
|
||||
padding: 0.55rem 0.85rem;
|
||||
color: #f08080;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.access-modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.75rem;
|
||||
padding: 0 1.75rem 1.5rem;
|
||||
}
|
||||
|
||||
.access-btn-cancel {
|
||||
background: rgba(255,255,255,0.05);
|
||||
border: 1px solid rgba(255,255,255,0.12);
|
||||
border-radius: 8px;
|
||||
padding: 0.6rem 1.25rem;
|
||||
color: rgba(180,215,240,0.75);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, border-color 0.15s;
|
||||
}
|
||||
.access-btn-cancel:hover {
|
||||
background: rgba(255,255,255,0.09);
|
||||
border-color: rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
.access-btn-submit {
|
||||
background: linear-gradient(135deg, #1e7dc8 0%, #1360a0 100%);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 0.6rem 1.5rem;
|
||||
color: #fff;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s, box-shadow 0.15s;
|
||||
box-shadow: 0 2px 12px rgba(20,96,160,0.4);
|
||||
}
|
||||
.access-btn-submit:hover:not(:disabled) {
|
||||
opacity: 0.9;
|
||||
box-shadow: 0 4px 18px rgba(20,96,160,0.55);
|
||||
}
|
||||
.access-btn-submit:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
+146
-1
@@ -71,12 +71,157 @@
|
||||
</div>
|
||||
<button type="submit" class="login-submit">Войти</button>
|
||||
</form>
|
||||
<a class="login-request-btn" href="mailto:rgalyaviev@mont.com?subject=%D0%94%D0%BE%D1%81%D1%82%D1%83%D0%BF%20%D0%BA%20%D0%BF%D0%BE%D0%BB%D0%B8%D0%B3%D0%BE%D0%BD%D1%83">Запросить доступ</a>
|
||||
<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>
|
||||
</footer>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Request Access Modal -->
|
||||
<div id="access-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">
|
||||
<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>
|
||||
</div>
|
||||
<div class="access-modal-footer">
|
||||
<button type="button" class="access-btn-cancel" id="am-cancel">Отмена</button>
|
||||
<button type="button" class="access-btn-submit" id="am-submit">Запросить доступ</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const overlay = document.getElementById('access-modal');
|
||||
const btnCancel = document.getElementById('am-cancel');
|
||||
const btnSubmit = document.getElementById('am-submit');
|
||||
const errEl = document.getElementById('am-error');
|
||||
let productsLoaded = false;
|
||||
|
||||
function openModal() {
|
||||
overlay.style.display = 'flex';
|
||||
document.body.style.overflow = 'hidden';
|
||||
if (!productsLoaded) loadProducts();
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
overlay.style.display = 'none';
|
||||
document.body.style.overflow = '';
|
||||
errEl.style.display = 'none';
|
||||
}
|
||||
|
||||
async function loadProducts() {
|
||||
const wrap = document.getElementById('am-products');
|
||||
try {
|
||||
const res = await fetch('/api/public/services-by-category');
|
||||
const data = await res.json();
|
||||
wrap.innerHTML = '';
|
||||
for (const [cat, svcs] of Object.entries(data)) {
|
||||
const group = document.createElement('div');
|
||||
group.className = 'access-products-group';
|
||||
group.innerHTML = '<div class="access-products-cat">' + cat + '</div>';
|
||||
for (const svc of svcs) {
|
||||
const lbl = document.createElement('label');
|
||||
lbl.className = 'access-product-item';
|
||||
lbl.innerHTML = '<input type="checkbox" value="' + svc.name.replace(/"/g, '"') + '" /><span>' + svc.name + '</span>';
|
||||
group.appendChild(lbl);
|
||||
}
|
||||
wrap.appendChild(group);
|
||||
}
|
||||
productsLoaded = true;
|
||||
} catch(e) {
|
||||
wrap.innerHTML = '<div class="access-products-loading">Не удалось загрузить список</div>';
|
||||
}
|
||||
}
|
||||
|
||||
async function submitForm() {
|
||||
const name = document.getElementById('am-name').value.trim();
|
||||
const company = document.getElementById('am-company').value.trim();
|
||||
const email = document.getElementById('am-email').value.trim();
|
||||
const phone = document.getElementById('am-phone').value.trim();
|
||||
const manager = document.getElementById('am-manager').value.trim();
|
||||
const checked = [...document.querySelectorAll('#am-products input[type=checkbox]:checked')];
|
||||
const products = checked.map(c => c.value);
|
||||
|
||||
if (!name || !company || !email || !phone) {
|
||||
errEl.textContent = 'Пожалуйста, заполните все обязательные поля';
|
||||
errEl.style.display = 'block';
|
||||
return;
|
||||
}
|
||||
|
||||
btnSubmit.disabled = true;
|
||||
btnSubmit.textContent = 'Отправка...';
|
||||
errEl.style.display = 'none';
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/request-access', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({name, company, email, phone, manager, products}),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const d = await res.json().catch(() => ({}));
|
||||
throw new Error(d.detail || 'Ошибка отправки');
|
||||
}
|
||||
btnSubmit.textContent = 'Отправлено!';
|
||||
setTimeout(closeModal, 1500);
|
||||
} catch(e) {
|
||||
errEl.textContent = e.message || 'Ошибка отправки, попробуйте позже';
|
||||
errEl.style.display = 'block';
|
||||
btnSubmit.disabled = false;
|
||||
btnSubmit.textContent = 'Запросить доступ';
|
||||
}
|
||||
}
|
||||
|
||||
// Wire up request-access button
|
||||
document.querySelectorAll('.login-request-btn, [data-open-access-modal]').forEach(el => {
|
||||
el.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
openModal();
|
||||
});
|
||||
});
|
||||
|
||||
btnCancel.addEventListener('click', closeModal);
|
||||
btnSubmit.addEventListener('click', submitForm);
|
||||
overlay.addEventListener('click', function(e) {
|
||||
if (e.target === overlay) closeModal();
|
||||
});
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape') closeModal();
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user