223 lines
7.7 KiB
HTML
223 lines
7.7 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>
|
|
// Показать форму регистрации
|
|
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';
|
|
}
|
|
|
|
// Функция регистрации
|
|
function registerUser() {
|
|
// Собираем данные из формы
|
|
var name = document.getElementById('nameReg').value;
|
|
var email = document.getElementById('emailReg').value;
|
|
var password = document.getElementById('passwordReg').value;
|
|
var phone = document.getElementById('phoneReg').value || null;
|
|
|
|
// Подготавливаем данные для отправки
|
|
var data = {
|
|
name: name,
|
|
email: email,
|
|
password: password,
|
|
phone: phone
|
|
};
|
|
|
|
// Отправляем POST-запрос на сервер
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open("POST", "/api/register", true);
|
|
xhr.setRequestHeader("Content-Type", "application/json");
|
|
|
|
xhr.onreadystatechange = function () {
|
|
if (xhr.readyState === 4) {
|
|
var resultDiv = document.getElementById('registerResult');
|
|
if (xhr.status === 200 || xhr.status === 201) {
|
|
resultDiv.className = "message success";
|
|
resultDiv.innerHTML = "Регистрация прошла успешно! Теперь войдите.";
|
|
// Через 2 секунды переключим на форму входа
|
|
setTimeout(function() {
|
|
showLoginForm();
|
|
resultDiv.innerHTML = "";
|
|
}, 2000);
|
|
} else {
|
|
resultDiv.className = "message error";
|
|
try {
|
|
var response = JSON.parse(xhr.responseText);
|
|
resultDiv.innerHTML = response.message || "Ошибка при регистрации";
|
|
} catch (e) {
|
|
resultDiv.innerHTML = "Неизвестная ошибка сервера";
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
xhr.send(JSON.stringify(data));
|
|
}
|
|
|
|
// Функция входа
|
|
function loginUser() {
|
|
var email = document.getElementById('emailLogin').value;
|
|
var password = document.getElementById('passwordLogin').value;
|
|
|
|
var data = {
|
|
email: email,
|
|
password: password
|
|
};
|
|
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open("POST", "/api/login", true);
|
|
xhr.setRequestHeader("Content-Type", "application/json");
|
|
|
|
xhr.onreadystatechange = function () {
|
|
if (xhr.readyState === 4) {
|
|
var resultDiv = document.getElementById('loginResult');
|
|
if (xhr.status === 200) {
|
|
resultDiv.className = "message success";
|
|
resultDiv.innerHTML = "Вход выполнен!";
|
|
// Сохраняем токен в localStorage (чтобы потом использовать)
|
|
var response = JSON.parse(xhr.responseText);
|
|
localStorage.setItem('auth_token', response.token);
|
|
// Перенаправляем на главную
|
|
setTimeout(function() {
|
|
window.location.href = "/";
|
|
}, 1000);
|
|
} else {
|
|
resultDiv.className = "message error";
|
|
try {
|
|
var response = JSON.parse(xhr.responseText);
|
|
resultDiv.innerHTML = response.message || "Неверный email или пароль";
|
|
} catch (e) {
|
|
resultDiv.innerHTML = "Ошибка при входе";
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
xhr.send(JSON.stringify(data));
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html> |