Здравствуйте! Работаю над регистрацией. Хочу сделать, чтобы не перезагружая страницу, отображать ошибку, если нужно. Вроде бы все получилось, ну, почти. Если произошла ошибка на стороне сервера, показывается надпись под формой "Произошла внутренняя ошибка сервера. Попробуйте позже.". Если пользователь, допустим, не заполнил какое-то поле, или неправильно его заполнил, то показывается надпись "Вы неверно заполнили форму, проверьте.". Но если все правильно было написано в форме, сервер принимает данные, отправляет письмо с кодом. В конце POST-а на
/register должен быть редирект на email-verification. Но это не происходит, потому что я запретил поведение формы по умолчанию, чтобы я мог получать статус запроса и отображать ошибки, если нужно. Иначе, сбрасывается страница и пишет: Internal Error, или Bad Request. Как можно это пофиксить? Также буду рад советам по улучшению кода.
P.S. Хотелось бы знать, как сделать надпись что допустим, с таким адресом почты пользователь зарегистрирован. Нужного статуса кода HTTP не нашел, как это сделать?
Код сервера
app.get('/register', (req, res) => {
res.render('register')
});
app.post("/register", async (req, res, next) => {
console.log(req.body)
const {
name,
email,
password
} = req.body;
if(!name || !email || !password) {
res.sendStatus(400)
return;
}
const [users] = await dbConnection.query(
"SELECT * FROM `users` WHERE `email`=?", [email]
);
if (users > 0) {
res.send("Введённая электронная почта уже зарегистрирована");
return;
}
const code = makeCode(6);
try {
await transporter.sendMail({
from: '"Verification email" <support@galaktika-sluha.ml>',
to: `${email}`,
subject: 'Подтвердите свой E-mail',
html: `<h1>Ваш код:<h1> <h3>${code}</h3>`,
})
} catch (error) {
console.log(error)
res.sendStatus(500)
}
req.app.locals = {
name,
email,
password,
code
}
res.redirect('/email-verification')
next();
});
app.get('/email-verification', (req, res) => {
res.render('verification-email')
})
app.post('/email-verification', async(req, res) => {
console.log(app.locals.code)
if (req.body.code === app.locals.code) {
bcrypt.genSalt(saltRounds, (err, salt) => {
bcrypt.hash(req.app.locals.password, salt, async(err, hash) => {
// Store hash in database here
console.log(hash) // debug
let post = {
name: `${req.app.locals.name}`,
email: `${req.app.locals.email}`,
password: `${hash}`
} // Структура данных для сервера
let sql = "INSERT INTO users SET ?" // Writing data to the DB
try {
let query = await dbConnection.query(sql, post => {
});
} catch (err) {
res.sendStatus(500)
}
});
});
res.send(200)
} else {
res.send('вы ввели неверный код')
}
})
Код на стороне клиента
<!DOCTYPE html>
<html lang="ru">
<%- include('head') %>
<body class="page">
<%- include('header') %>
<form method="post" id="post">
<input name="username" id="name" type="text" placeholder="Имя" required>
<input name="email" id="email" type="email" placeholder="Электронная почта" required>
<input name="password" id="password" type="password" placeholder="Пароль" required>
<button value="Зарегистрироваться" class="form__button" onclick="return false"></button>
<p class="form__error"></p>
</form>
<%- include('nav') %>
<script src="js/script.js"></script>
<script>
const textForError = document.querySelector('.form__error')
const button = document.querySelector('.form__button');
function textOfError(text) {
textForError.classList.add('form__error_block')
textForError.textContent = text;
}
async function request() {
const password = document.querySelector("#password").value
const name = document.querySelector('#name').value
const email = document.querySelector('#email').value
const data = {
name, email, password
}
if (/^\d+$/.test(password)) {
textOfError("Пароль слишком простой. Добавьте буквы")
return;
}
const response = await fetch('/register', {
method: 'POST', // *GET, POST, PUT, DELETE, etc.
mode: 'same-origin', // no-cors, *cors, same-origin
cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
credentials: 'same-origin', // include, *same-origin, omit
headers: {
'Content-Type': 'application/json'
// 'Content-Type': 'application/x-www-form-urlencoded',
},
redirect: 'follow', // manual, *follow, error
body: JSON.stringify(data) // body data type must match "Content-Type" header
});
switch(response.status) {
case 400: {
textOfError("Вы неверно заполнили форму, проверьте");
break;
}
case 500: {
textOfError("Произошла внутренняя ошибка сервера. Попробуйте позже.")
}
}
}
button.addEventListener("click", request)
</script>
<style>
.form__error {
display: none;
color: red;
}
.form__error_block {
display: block;
}
</style>
</body>
</html>
Средний