Fovway
8fd529302f
- Добавлены функции для переключения между темной и светлой темами с использованием localStorage. - Обновлены стили для поддержки темной темы, включая цвета фона, текста и иконок. - Добавлены кнопки для переключения темы на страницах входа, профиля, заметок и настроек. - Оптимизирован код для предотвращения мерцания темы при загрузке страницы.
120 lines
4.0 KiB
JavaScript
120 lines
4.0 KiB
JavaScript
// Логика переключения темы
|
||
function initThemeToggle() {
|
||
const themeToggleBtn = document.getElementById("theme-toggle-btn");
|
||
|
||
if (!themeToggleBtn) return;
|
||
|
||
// Загружаем сохраненную тему или используем системную
|
||
const savedTheme = localStorage.getItem("theme");
|
||
const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
|
||
? "dark"
|
||
: "light";
|
||
const currentTheme = savedTheme || systemTheme;
|
||
|
||
// Применяем тему
|
||
applyTheme(currentTheme);
|
||
|
||
// Обработчик клика на переключатель
|
||
themeToggleBtn.addEventListener("click", () => {
|
||
const currentTheme = document.documentElement.getAttribute("data-theme");
|
||
const newTheme = currentTheme === "dark" ? "light" : "dark";
|
||
applyTheme(newTheme);
|
||
localStorage.setItem("theme", newTheme);
|
||
});
|
||
|
||
// Слушаем изменения системной темы
|
||
window
|
||
.matchMedia("(prefers-color-scheme: dark)")
|
||
.addEventListener("change", (e) => {
|
||
if (!localStorage.getItem("theme")) {
|
||
applyTheme(e.matches ? "dark" : "light");
|
||
}
|
||
});
|
||
}
|
||
|
||
function applyTheme(theme) {
|
||
document.documentElement.setAttribute("data-theme", theme);
|
||
|
||
// Обновляем meta теги для PWA
|
||
const themeColorMeta = document.querySelector('meta[name="theme-color"]');
|
||
if (themeColorMeta) {
|
||
themeColorMeta.setAttribute(
|
||
"content",
|
||
theme === "dark" ? "#1a1a1a" : "#007bff"
|
||
);
|
||
}
|
||
|
||
// Обновляем иконку переключателя
|
||
const themeToggleBtn = document.getElementById("theme-toggle-btn");
|
||
if (themeToggleBtn) {
|
||
const icon = themeToggleBtn.querySelector(".iconify");
|
||
if (icon) {
|
||
icon.setAttribute(
|
||
"data-icon",
|
||
theme === "dark" ? "mdi:weather-sunny" : "mdi:weather-night"
|
||
);
|
||
}
|
||
}
|
||
}
|
||
|
||
// Инициализируем переключатель темы при загрузке страницы
|
||
document.addEventListener("DOMContentLoaded", initThemeToggle);
|
||
|
||
// Проверяем, не авторизован ли уже пользователь
|
||
if (localStorage.getItem("isAuthenticated") === "true") {
|
||
window.location.href = "/notes";
|
||
}
|
||
|
||
// Проверяем наличие ошибки в URL
|
||
const urlParams = new URLSearchParams(window.location.search);
|
||
if (urlParams.get("error") === "invalid_password") {
|
||
document.getElementById("errorMessage").style.display = "block";
|
||
document.getElementById("errorMessage").textContent = "Неверный пароль!";
|
||
}
|
||
|
||
// Обработка формы входа
|
||
const loginForm = document.getElementById("loginForm");
|
||
const errorMessage = document.getElementById("errorMessage");
|
||
|
||
if (loginForm) {
|
||
loginForm.addEventListener("submit", async (e) => {
|
||
e.preventDefault();
|
||
|
||
const username = document.getElementById("username").value.trim();
|
||
const password = document.getElementById("password").value;
|
||
|
||
if (!username || !password) {
|
||
errorMessage.textContent = "Логин и пароль обязательны";
|
||
errorMessage.style.display = "block";
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const response = await fetch("/api/login", {
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
body: JSON.stringify({ username, password }),
|
||
});
|
||
|
||
const data = await response.json();
|
||
|
||
if (response.ok) {
|
||
// Успешный вход - сохраняем состояние аутентификации
|
||
localStorage.setItem("isAuthenticated", "true");
|
||
localStorage.setItem("username", username);
|
||
window.location.href = "/notes";
|
||
} else {
|
||
// Ошибка входа
|
||
errorMessage.textContent = data.error || "Ошибка входа";
|
||
errorMessage.style.display = "block";
|
||
}
|
||
} catch (err) {
|
||
console.error("Ошибка:", err);
|
||
errorMessage.textContent = "Ошибка соединения с сервером";
|
||
errorMessage.style.display = "block";
|
||
}
|
||
});
|
||
}
|