0

Если имэйл и пароль пользователя совпадают, при сабмите сохраняй данные с формы в локальное хранилище и меняй кнопку 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();
  }
});

1 ответ 1

0

Мне ваш код выглядит верным. Как варианты:

  1. Запускайте скрипт на сервере, а не как локальный файл. Для работы с localStorage требуется домен, протокол и порт, который совпадает со страницей, на которой запускается скрипт. Попробуйте запустить его на локальном сервере).
  2. Убедитесь, что вы не блокируете localStorage в браузере.
1
  • Не работает условие При перезагрузке страницы, если пользователь залогинен, мы должны видеть logout-кнопку и недоступные для изменения поля с данными пользователя. Клик по кнопке logout возвращает все в первоначальный вид и удаляет данные пользователя с локального хранилища. 13 мар в 18:14

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.