This commit is contained in:
2026-01-03 15:46:06 +02:00
parent 6ce7edd194
commit d64645599d
9 changed files with 643 additions and 307 deletions

View File

@@ -12,7 +12,7 @@ async function UserLogin() {
const p = document.getElementById("password").value;
try {
const r = await fetch("/api/users/login", {
const r = await fetch("/api/auth/login", {
method: "POST",
credentials: "include",
headers: { "Content-Type": "application/json" },
@@ -35,7 +35,7 @@ async function UserLogin() {
async function UserLogout() {
try {
await fetch("/api/users/logout", { method: "POST", credentials: "include" });
await fetch("/api/auth/logout", { method: "POST", credentials: "include" });
accessToken = "";
alert("logged out");
} catch (err) {

View File

@@ -0,0 +1,19 @@
<div class="form1" id="login_block">
# Вход в систему
Пожалуйста, введите ваши данные для входа.
<div class="grid-block">
<label for="username">Имя пользователя</label>
<input type="text" id="username" name="username" required>
<label for="password">Пароль</label>
<input type="password" id="password" name="password" required>
<button type="submit" id="login_btn">Войти</button>
</div>
</div>
<div class="form1" id="user_block">
<p id="user_info"></p>
<button id="logout_btn">Выйти</button>
</div>

View File

@@ -0,0 +1,67 @@
async function initUser() {
try {
// Если нет токена, делаем refresh
if (!accessToken) {
await refreshAccess ();
}
// Проверяем, получили ли токен
if (!accessToken) throw new Error("no token");
// выводим имя пользователя
user_info.innerHTML = `Вы зашли как: ${user.name}. </br> Ваш ID:${user.id}`;
// Показываем блок пользователя
showUser()
} catch (e) {
// Показываем блок логина
showLogin()
console.error(e);
}
}
function showLogin() {
login_block.classList.remove("hiden_block");
user_block.classList.add("hiden_block");
}
function showUser() {
login_block.classList.add("hiden_block");
user_block.classList.remove("hiden_block");
}
initUser();
/* --------------------------- Логин ------------------------------- */
async function onLoginClick() {
try {
const { accessToken: token } = await userLogin(
username.value.trim(),
password.value
);
accessToken = token;
// UIComponents.showAlert("Вы успешно вошли как "+user.name+".</br> Ваш ID:"+user.id);
username.value = "";
password.value = "";
} catch (e) {
switch (e.message) {
case "INVALID_CREDENTIALS":
UIComponents.showAlert("Неверный логин или пароль");
break;
case "BAD_REQUEST":
UIComponents.showAlert("Некорректный запрос");
break;
default:
UIComponents.showAlert("Ошибка при логине");
}
}
initUser();
}
/* ------------------- Кнопки ------------------- */
logout_btn.onclick = async () => {
await userLogout(); // вызываем существующую функцию
initUser(); // делаем своё
};
login_btn.onclick = onLoginClick;

View File

@@ -0,0 +1,78 @@
.hiden_block{
display:none;
}
.form1 {
background: #fff;
padding: 10px;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
/*max-width: 250px;
width: 100%;*/
width: 250px;
}
.form1 h1 {
margin-top: 0;
text-align: center;
font-size: 26px;
color: #333;
}
.form1 p {
text-align: center;
color: #666;
margin-bottom: 25px;
}
.form1 .grid-block h3 {
margin-bottom: 15px;
color: #444;
text-align: center;
}
.form1 form {
display: flex;
flex-direction: column;
gap: 14px;
}
.form1 label {
font-size: 15px;
color: #555;
}
.form1 input {
padding: 10px 12px;
font-size: 15px;
border-radius: 8px;
border: 1px solid #ccc;
transition: border 0.2s, box-shadow 0.2s;
}
.form1 input:focus {
border-color: #7f57ff;
box-shadow: 0 0 0 2px rgba(127, 87, 255, 0.2);
outline: none;
}
.form1 button {
width: 100%;
padding: 10px 12px;
font-size: 16px;
background:#e4e4e4;
/* color: white; */
border: 1px solid #ccc;
border-radius: 8px;
cursor: pointer;
margin-top: 10px;
transition: background 0.25s, transform 0.1s;
}
.form1 button:hover {
background: #aa92f8;
}
.form1 button:active {
transform: scale(0.98);
}

View File

@@ -12,14 +12,14 @@ btn_prot.onclick = async () => {
async function UserLogout() {
accessToken = "";
await fetch("/api/users/logout", { method: "POST", credentials: "include" });
await fetch("/api/auth/logout", { method: "POST", credentials: "include"});
};
async function UserLogin() {
const u = log_user.value,
p = log_pass.value;
const r = await fetch("/api/users/login", {
const r = await fetch("/api/auth/login", {
method: "POST",
credentials: "include",
headers: { "Content-Type": "application/json" },