<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>登录 - 数据中台</title>
		<link href="{{ url_for('static', filename='bootstrap/bootstrap.css') }}" rel="stylesheet" />
		<style>
			body {
				background-color: #f8f9fa;
				height: 100vh;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.container {
				width: 100%;
				display: flex;
				justify-content: center;
			}
			.login-container {
				background-color: white;
				padding: 2rem;
				border-radius: 10px;
				box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
				width: 100%;
				max-width: 400px;
			}
			.login-title {
				text-align: center;
				color: #333;
				margin-bottom: 2rem;
			}
			.form-floating {
				margin-bottom: 1rem;
			}
			.btn-login {
				width: 100%;
				padding: 0.8rem;
				font-size: 1.1rem;
				background-color: #0d6efd;
				border: none;
			}
			.btn-login:hover {
				background-color: #0b5ed7;
			}
			.alert {
				margin-bottom: 1rem;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="login-container">
				<h2 class="login-title">数据转换推送系统</h2>
				{% with messages = get_flashed_messages(with_categories=true) %} {% if messages %} {% for category, message in messages %}
				<div class="alert alert-{{ category if category != 'error' else 'danger' }} alert-dismissible fade show" role="alert">
					{{ message }}
					<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
				</div>
				{% endfor %} {% endif %} {% endwith %}
				<form method="POST" action="{{ url_for('auth.login') }}" class="needs-validation" novalidate>
					<div class="form-floating">
						<input type="text" class="form-control" id="keyword" name="keyword" placeholder="用户名/邮箱/手机号" required />
						<label for="keyword">用户名/邮箱/手机号</label>
						<div class="invalid-feedback">请输入用户名、邮箱或手机号</div>
					</div>
					<div class="form-floating">
						<input type="password" class="form-control" id="password" name="password" placeholder="密码" required />
						<label for="password">密码</label>
						<div class="invalid-feedback">请输入密码</div>
					</div>
					<button type="submit" class="btn btn-primary btn-login mt-3">登录</button>
				</form>
			</div>
		</div>

		<script src="{{ url_for('static', filename='jquery/jquery.js') }}"></script>
		<script src="{{ url_for('static', filename='bootstrap/bootstrap.js') }}"></script>
		<script>
			// 表单验证和提交
			;(function () {
				'use strict'
				const forms = document.querySelectorAll('.needs-validation')
				Array.prototype.slice.call(forms).forEach(function (form) {
					form.addEventListener('submit', async function (event) {
						event.preventDefault()
						if (!form.checkValidity()) {
							event.stopPropagation()
							form.classList.add('was-validated')
							return
						}

						const formData = new FormData(form)
						try {
							const response = await fetch(form.action, {
								method: 'POST',
								body: formData,
							})
							const data = await response.json()
							if (data.success) {
								const urlParams = new URLSearchParams(window.location.search)
								const nextUrl = urlParams.get('next') || '/'
								window.location.href = nextUrl
							} else {
								const alertDiv = document.createElement('div')
								alertDiv.className = 'alert alert-danger alert-dismissible fade show'
								alertDiv.setAttribute('role', 'alert')
								alertDiv.innerHTML = `
                                ${data.message || '登录失败，请检查用户名和密码'}
                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                            `
								form.insertBefore(alertDiv, form.firstChild)
							}
						} catch (error) {
							console.error('登录请求失败:', error)
							const alertDiv = document.createElement('div')
							alertDiv.className = 'alert alert-danger alert-dismissible fade show'
							alertDiv.setAttribute('role', 'alert')
							alertDiv.innerHTML = `
                            网络错误，请稍后重试
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        `
							form.insertBefore(alertDiv, form.firstChild)
						}
					})
				})
			})()
		</script>
	</body>
</html>
