92 lines
3.9 KiB
HTML
92 lines
3.9 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}{{ t.login_heading }} | {{ t.site_name }}{% endblock title %}
|
|
|
|
{% block head_extra %}
|
|
<script src="https://telegram.org/js/telegram-web-app.js"></script>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { font-family: system-ui, -apple-system, sans-serif; background: #f5f5f5; color: #333; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
|
|
.login-card { background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.12); padding: 2rem 2.5rem; width: 100%; max-width: 400px; }
|
|
.login-card h1 { margin-bottom: 1.5rem; font-size: 1.5rem; text-align: center; }
|
|
.login-card label { display: block; margin-bottom: .25rem; font-weight: 600; font-size: .9rem; }
|
|
.login-card input[type="text"],
|
|
.login-card input[type="password"] { width: 100%; padding: .5rem .7rem; margin-bottom: 1rem; border: 1px solid #ccc; border-radius: 4px; font-size: .95rem; }
|
|
.login-card button,
|
|
.login-card .sso-btn { display: block; width: 100%; padding: .6rem; border: none; border-radius: 4px; font-size: 1rem; cursor: pointer; text-align: center; text-decoration: none; }
|
|
.login-card button { background: #1a1a2e; color: #fff; }
|
|
.login-card button:hover { background: #16213e; }
|
|
.login-card .sso-btn { background: #4a90d9; color: #fff; margin-top: .75rem; }
|
|
.login-card .sso-btn:hover { background: #357abd; }
|
|
.login-card .divider { text-align: center; margin: 1rem 0; color: #999; font-size: .85rem; }
|
|
.login-card .message { text-align: center; color: #666; margin-bottom: 1rem; }
|
|
.login-card .flash { color: #856404; background: #fff3cd; padding: .5rem .75rem; border-radius: 4px; margin-bottom: 1rem; text-align: center; font-size: .9rem; }
|
|
</style>
|
|
{% endblock head_extra %}
|
|
|
|
{% block body %}
|
|
<div class="login-card">
|
|
<h1>{{ t.login_heading }}</h1>
|
|
|
|
{% if !message.is_empty() %}
|
|
<div class="flash">{{ message }}</div>
|
|
{% endif %}
|
|
<div id="telegram-login-flash" class="flash" style="display: none;"></div>
|
|
|
|
{% if !auth_password_enabled && !auth_sso_enabled %}
|
|
<p class="message">{{ t.login_disabled }}</p>
|
|
{% endif %}
|
|
|
|
{% if auth_password_enabled %}
|
|
<form method="post" action="/login">
|
|
<label for="username">{{ t.login_username }}</label>
|
|
<input type="text" name="username" id="username" required>
|
|
<label for="password">{{ t.login_password }}</label>
|
|
<input type="password" name="password" id="password" required>
|
|
<button type="submit">{{ t.login_submit }}</button>
|
|
</form>
|
|
{% endif %}
|
|
|
|
{% if auth_password_enabled && auth_sso_enabled %}
|
|
<div class="divider">— or —</div>
|
|
{% endif %}
|
|
|
|
{% if auth_sso_enabled %}
|
|
<a class="sso-btn" href="/auth/oidc/start">{{ oidc_button_text }}</a>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<script>
|
|
(async () => {
|
|
const webApp = window.Telegram && window.Telegram.WebApp;
|
|
if (!webApp || !webApp.initData) return;
|
|
|
|
try {
|
|
webApp.ready();
|
|
webApp.expand();
|
|
} catch (_) {}
|
|
|
|
try {
|
|
const response = await fetch('/api/telegram-login/webapp', {
|
|
method: 'POST',
|
|
credentials: 'same-origin',
|
|
headers: { 'content-type': 'application/json' },
|
|
body: JSON.stringify({ init_data: webApp.initData }),
|
|
});
|
|
const data = await response.json().catch(() => ({}));
|
|
if (response.ok) {
|
|
window.location.replace(data.redirect_to || '/configs');
|
|
return;
|
|
}
|
|
const flash = document.getElementById('telegram-login-flash');
|
|
flash.textContent = data.error || data.detail || '{{ t.login_telegram_failed }}';
|
|
flash.style.display = 'block';
|
|
} catch (_) {
|
|
const flash = document.getElementById('telegram-login-flash');
|
|
flash.textContent = '{{ t.login_telegram_failed }}';
|
|
flash.style.display = 'block';
|
|
}
|
|
})();
|
|
</script>
|
|
{% endblock body %}
|