script.js

const AUTH_USER = {
  username: "user",
  password: "1234",
  displayName: "Гость форума",
};

const $authCard = document.getElementById("auth-card");
const $forum = document.getElementById("forum");
const $error = document.getElementById("error-message");
const $welcome = document.getElementById("welcome-text");
const $posts = document.getElementById("posts");

const loginForm = document.getElementById("login-form");
const postForm = document.getElementById("post-form");
const logoutButton = document.getElementById("logout-button");

const demoPosts = [
  {
    title: "Давайте знакомиться",
    body: "Поделитесь, чем занимаетесь и какие проекты делаете.",
    author: "Администратор",
    createdAt: new Date("2024-11-01T09:30:00"),
  },
  {
    title: "Что почитать по вебу?",
    body: "У кого есть свежие подборки статей по фронтенду?",
    author: "Алексей",
    createdAt: new Date("2024-11-02T18:15:00"),
  },
];

function formatDate(date) {
  return date.toLocaleString("ru-RU", {
    day: "2-digit",
    month: "2-digit",
    year: "numeric",
    hour: "2-digit",
    minute: "2-digit",
  });
}

function renderPosts(posts) {
  if (!posts.length) {
    $posts.innerHTML =
      '<p class="hint">Пока нет публикаций. Будьте первым!</p>';
    return;
  }

  $posts.innerHTML = "";

  posts.forEach((post) => {
    const article = document.createElement("article");
    article.className = "post";

    const title = document.createElement("h4");
    title.className = "post__title";
    title.textContent = post.title;

    const body = document.createElement("p");
    body.className = "post__body";
    body.textContent = post.body;

    const meta = document.createElement("p");
    meta.className = "post__meta";
    meta.textContent = `Автор: ${post.author} · ${formatDate(post.createdAt)}`;

    article.append(title, body, meta);
    $posts.append(article);
  });
}

function saveSession(username) {
  window.sessionStorage.setItem("forumUser", username);
}

function restoreSession() {
  return window.sessionStorage.getItem("forumUser");
}

function clearSession() {
  window.sessionStorage.removeItem("forumUser");
}

function showForum(username) {
  $authCard.classList.add("hidden");
  $forum.classList.remove("hidden");
  $welcome.textContent = `Приятно видеть вас, ${username}!`;
  renderPosts(demoPosts);
}

function showAuth() {
  $authCard.classList.remove("hidden");
  $forum.classList.add("hidden");
  $error.textContent = "";
  loginForm.reset();
  clearSession();
}

loginForm.addEventListener("submit", (event) => {
  event.preventDefault();
  const username = document.getElementById("username").value.trim();
  const password = document.getElementById("password").value.trim();

  const isValid =
    username === AUTH_USER.username && password === AUTH_USER.password;

  if (!isValid) {
    $error.textContent = "Неверный логин или пароль. Попробуйте снова.";
    return;
  }

  const displayName = username || AUTH_USER.displayName;
  $error.textContent = "";
  saveSession(displayName);
  showForum(displayName);
});

postForm.addEventListener("submit", (event) => {
  event.preventDefault();

  const title = document.getElementById("post-title").value.trim();
  const body = document.getElementById("post-body").value.trim();

  if (!title || !body) {
    return;
  }

  demoPosts.unshift({
    title,
    body,
    author: restoreSession() || AUTH_USER.displayName,
    createdAt: new Date(),
  });

  renderPosts(demoPosts);
  postForm.reset();
});

logoutButton.addEventListener("click", showAuth);

document.addEventListener("DOMContentLoaded", () => {
  const storedUser = restoreSession();
  if (storedUser) {
    showForum(storedUser);
  } else {
    showAuth();
  }
});