Если имэйл и пароль пользователя совпадают, при сабмите сохраняй данные с формы в локальное хранилище и меняй кнопку login на logout и делай поля ввода недоступными для изменения.
При перезагрузке страницы, если пользователь залогинен, мы должны видеть logout-кнопку и недоступные для изменения поля с данными пользователя. Клик по кнопке logout возвращает все в первоначальный вид и удаляет данные пользователя с локального хранилища.
Если введенные данные не совпадают с нужными данными, вызывать аlert и уведомлять об ошибке.
const USER_DATA = {
email: "[email protected]",
password: "secret",
};
const refs = {
form: document.querySelector("#login-form"),
emailInput: document.querySelector("input[name='email']"),
passwordInput: document.querySelector('input[name="password"]'),
submitBtn: document.querySelector('button[type="submit"]'),
};
// Check if user is already logged in and update UI accordingly
if (localStorage.getItem("user")) {
const user = JSON.parse(localStorage.getItem("user"));
refs.emailInput.value = user.email;
refs.passwordInput.value = user.password;
refs.emailInput.disabled = true;
refs.passwordInput.disabled = true;
refs.submitBtn.textContent = "Logout";
}
refs.form.addEventListener("submit", (evt) => {
evt.preventDefault();
const email = refs.emailInput.value;
const password = refs.passwordInput.value;
if (email === USER_DATA.email && password === USER_DATA.password) {
// Save user data to localStorage
localStorage.setItem("user", JSON.stringify({ email, password }));
// Disable form fields and change submit button text
refs.emailInput.disabled = true;
refs.passwordInput.disabled = true;
refs.submitBtn.textContent = "Logout";
form.reset();
} else {
alert("Incorrect email or password");
}
});
refs.submitBtn.addEventListener("click", (evt) => {
evt.preventDefault();
if (localStorage.getItem("user")) {
// Remove user data from localStorage
localStorage.removeItem("user");
// Enable form fields and change submit button text
refs.emailInput.disabled = false;
refs.passwordInput.disabled = false;
refs.submitBtn.textContent = "Login";
} else {
// If user is not logged in, submit the form
refs.form.submit();
}
});