139 lines
3.7 KiB
Vue
139 lines
3.7 KiB
Vue
<script setup>
|
||
import { ref, onMounted, onUnmounted, watch } from "vue";
|
||
import axios from "axios";
|
||
|
||
// Получение props
|
||
const props = defineProps({
|
||
currentPage: String,
|
||
});
|
||
|
||
// Объявление события для обновления страницы
|
||
const emit = defineEmits(["update"]);
|
||
|
||
const login = ref("");
|
||
const password = ref("");
|
||
const authError = ref(false);
|
||
const isLoggedIn = ref(false);
|
||
|
||
// Показать badge reCAPTCHA
|
||
const showRecaptchaBadge = () => {
|
||
setTimeout(() => {
|
||
const badge = document.querySelector(".grecaptcha-badge");
|
||
if (badge) {
|
||
badge.style.display = "block";
|
||
}
|
||
}, 100);
|
||
};
|
||
|
||
// Скрыть badge reCAPTCHA
|
||
const hideRecaptchaBadge = () => {
|
||
const badge = document.querySelector(".grecaptcha-badge");
|
||
if (badge) {
|
||
badge.style.display = "none";
|
||
}
|
||
};
|
||
|
||
// Функция авторизации
|
||
const auth_my = async () => {
|
||
try {
|
||
// Получение токена reCAPTCHA
|
||
const recaptchaToken = await grecaptcha.execute(
|
||
"6LdfSo8sAAAAAGGhbgIGO51nHgMUALYjcAMOxnOg",
|
||
{ action: "login" },
|
||
);
|
||
|
||
const response = await axios.post("http://127.0.0.1:8004/login", {
|
||
username: login.value,
|
||
password: password.value,
|
||
recaptcha_token: recaptchaToken,
|
||
});
|
||
if (response.data.message === "Login successful") {
|
||
authError.value = false;
|
||
isLoggedIn.value = true;
|
||
hideRecaptchaBadge();
|
||
emit("update", "rezylt");
|
||
} else {
|
||
authError.value = true;
|
||
}
|
||
} catch (err) {
|
||
authError.value = true;
|
||
console.log(err);
|
||
}
|
||
};
|
||
|
||
// Обработка глобального нажатия Enter
|
||
const handleKeyDown = (event) => {
|
||
if (event.key === "Enter") {
|
||
auth_my();
|
||
}
|
||
};
|
||
|
||
// Добавляем глобальный слушатель при монтировании
|
||
onMounted(() => {
|
||
window.addEventListener("keydown", handleKeyDown);
|
||
// Показываем badge reCAPTCHA при монтировании
|
||
showRecaptchaBadge();
|
||
});
|
||
|
||
// Удаляем при размонтировании
|
||
onUnmounted(() => {
|
||
window.removeEventListener("keydown", handleKeyDown);
|
||
});
|
||
|
||
// Переход на стартовую страницу (сброс данных)
|
||
function showStartPage() {
|
||
emit("update", "admin-panel");
|
||
login.value = "";
|
||
password.value = "";
|
||
authError.value = false;
|
||
isLoggedIn.value = false;
|
||
// Показываем badge reCAPTCHA
|
||
showRecaptchaBadge();
|
||
}
|
||
|
||
// Отслеживание перехода на страницу admin-panel
|
||
watch(() => props.currentPage, (newPage) => {
|
||
if (newPage === 'admin-panel' && !isLoggedIn.value) {
|
||
showRecaptchaBadge();
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<div
|
||
v-if="props.currentPage === 'admin-panel'"
|
||
class="p-4 bg-white rounded shadow max-w-md mx-auto mt-10 dark:bg-gray-800 dark:text-neutral-300"
|
||
>
|
||
<h2>Вход для администратора</h2>
|
||
<div class="mb-2">
|
||
<label>Логин:</label>
|
||
<input v-model="login" type="text" class="border p-1 w-full" />
|
||
</div>
|
||
<div class="mb-2">
|
||
<label>Пароль:</label>
|
||
<input v-model="password" type="password" class="border p-1 w-full" />
|
||
</div>
|
||
<button
|
||
@click="auth_my"
|
||
class="mr-2 bg-teal-600 hover:bg-teal-800 text-white px-4 py-2 rounded cursor-pointer"
|
||
>
|
||
Войти
|
||
</button>
|
||
<button
|
||
@click="showStartPage"
|
||
class="dark:bg-gray-600 dark:hover:bg-gray-700 bg-gray-500 hover:bg-gray-600 px-4 py-2 rounded cursor-pointer"
|
||
>
|
||
Отмена
|
||
</button>
|
||
<div v-if="authError" class="mt-2 text-red-600">
|
||
Неверный логин или пароль
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.grecaptcha-badge {
|
||
display: block !important;
|
||
}
|
||
</style>
|