190 lines
5.8 KiB
HTML
190 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Вход и регистрация</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
background-color: #f4f4f4;
|
|
padding: 20px;
|
|
}
|
|
.container {
|
|
max-width: 500px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 0 10px rgba(0,0,0,0.1);
|
|
}
|
|
h2 {
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
color: #333;
|
|
}
|
|
.form-group {
|
|
margin-bottom: 15px;
|
|
}
|
|
label {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
font-weight: bold;
|
|
}
|
|
input {
|
|
width: 100%;
|
|
padding: 8px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
box-sizing: border-box;
|
|
}
|
|
button {
|
|
width: 100%;
|
|
padding: 10px;
|
|
background-color: #667eea;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
button:hover {
|
|
background-color: #5a67d8;
|
|
}
|
|
.message {
|
|
padding: 10px;
|
|
margin: 10px 0;
|
|
border-radius: 4px;
|
|
}
|
|
.error {
|
|
background-color: #ffebee;
|
|
color: #c62828;
|
|
}
|
|
.success {
|
|
background-color: #e8f5e9;
|
|
color: #2e7d32;
|
|
}
|
|
.toggle {
|
|
text-align: center;
|
|
margin-top: 15px;
|
|
color: #667eea;
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container">
|
|
<div id="loginSection">
|
|
<h2>Вход</h2>
|
|
<div id="loginResult"></div>
|
|
<div class="form-group">
|
|
<label for="emailLogin">Email:</label>
|
|
<input type="email" id="emailLogin" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="passwordLogin">Пароль:</label>
|
|
<input type="password" id="passwordLogin" required>
|
|
</div>
|
|
<button onclick="loginUser()">Войти</button>
|
|
<div class="toggle" onclick="showRegisterForm()">Нет аккаунта? Зарегистрироваться</div>
|
|
</div>
|
|
|
|
<div id="registerSection" style="display: none;">
|
|
<h2>Регистрация</h2>
|
|
<div id="registerResult"></div>
|
|
<div class="form-group">
|
|
<label for="nameReg">Имя:</label>
|
|
<input type="text" id="nameReg" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="emailReg">Email:</label>
|
|
<input type="email" id="emailReg" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="passwordReg">Пароль:</label>
|
|
<input type="password" id="passwordReg" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="phoneReg">Телефон (не обязательно):</label>
|
|
<input type="tel" id="phoneReg">
|
|
</div>
|
|
<button onclick="registerUser()">Зарегистрироваться</button>
|
|
<div class="toggle" onclick="showLoginForm()">Уже есть аккаунт? Войти</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let token = localStorage.getItem('token');
|
|
|
|
// Проверка авторизации
|
|
if (token) {
|
|
window.location.href = 'index.html'; // ← ИСПРАВЛЕНО!
|
|
}
|
|
|
|
// Регистрация
|
|
async function registerUser() {
|
|
const name = document.getElementById('nameReg').value;
|
|
const email = document.getElementById('emailReg').value;
|
|
const password = document.getElementById('passwordReg').value;
|
|
const phone = document.getElementById('phoneReg').value || null;
|
|
|
|
try {
|
|
const res = await fetch('/api/register', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ name, email, password, phone })
|
|
});
|
|
|
|
const data = await res.json();
|
|
|
|
if (res.ok) {
|
|
alert('Регистрация успешна!');
|
|
showLoginForm();
|
|
} else {
|
|
alert(data.message || 'Ошибка регистрации');
|
|
}
|
|
} catch (err) {
|
|
alert('Ошибка сети');
|
|
}
|
|
}
|
|
|
|
// Вход
|
|
async function loginUser() {
|
|
const email = document.getElementById('emailLogin').value;
|
|
const password = document.getElementById('passwordLogin').value;
|
|
|
|
try {
|
|
const res = await fetch('/api/login', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ email, password })
|
|
});
|
|
|
|
const data = await res.json();
|
|
|
|
if (res.ok) {
|
|
localStorage.setItem('token', data.access_token);
|
|
window.location.href = 'index.html'; // ← ИСПРАВЛЕНО!
|
|
} else {
|
|
alert(data.message || 'Неверный email или пароль');
|
|
}
|
|
} catch (err) {
|
|
alert('Ошибка сети');
|
|
}
|
|
}
|
|
|
|
// Переключение форм
|
|
function showRegisterForm() {
|
|
document.getElementById('loginSection').style.display = 'none';
|
|
document.getElementById('registerSection').style.display = 'block';
|
|
}
|
|
|
|
function showLoginForm() {
|
|
document.getElementById('registerSection').style.display = 'none';
|
|
document.getElementById('loginSection').style.display = 'block';
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html> |