|
|
@@ -10,13 +10,16 @@
|
|
|
<body>
|
|
|
<div class="header"></div>
|
|
|
<div class="container">
|
|
|
- <div class="errors"></div>
|
|
|
+ <div class="alerts"></div>
|
|
|
<div class="container-form"></div>
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
- let errors = [];
|
|
|
+ let alerts = [];
|
|
|
let exchangeRate = {};
|
|
|
+ const _alert = (el) => `
|
|
|
+ <div class="alert ${el.type}">${el.text}</div>
|
|
|
+ `;
|
|
|
const exchangeForm = `
|
|
|
<form action="" class="form" onsubmit="calculate(event)">
|
|
|
<div class="form-body">
|
|
|
@@ -46,14 +49,6 @@
|
|
|
</form>
|
|
|
`;
|
|
|
|
|
|
- const error = (text = "") => {
|
|
|
- return `
|
|
|
- <div class="errors">
|
|
|
- <div class="error">${text}</div>
|
|
|
- </div>
|
|
|
- `;
|
|
|
- };
|
|
|
-
|
|
|
const btnLogout = `
|
|
|
<button class="btn btn-logout" onclick="logout()">Logout</button>
|
|
|
`;
|
|
|
@@ -76,18 +71,18 @@
|
|
|
if (isAuth === true) {
|
|
|
document.querySelector("div.header").innerHTML = btnLogout;
|
|
|
document.querySelector("div.container-form").innerHTML = exchangeForm;
|
|
|
- removeError();
|
|
|
+ removeAlert("", "error");
|
|
|
} else {
|
|
|
document.querySelector("div.container-form").innerHTML = authForm;
|
|
|
document.querySelector("div.header").innerHTML = "";
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- function updateErrors() {
|
|
|
- let errors_block = document.querySelector("div.errors");
|
|
|
- errors_block.innerHTML = "";
|
|
|
- errors.forEach((err) => {
|
|
|
- errors_block.insertAdjacentHTML("beforeend", error(err));
|
|
|
+ function updateAlerts() {
|
|
|
+ let alerts_block = document.querySelector("div.alerts");
|
|
|
+ alerts_block.innerHTML = "";
|
|
|
+ alerts.forEach((el) => {
|
|
|
+ alerts_block.insertAdjacentHTML("beforeend", _alert(el));
|
|
|
});
|
|
|
}
|
|
|
|
|
|
@@ -96,40 +91,54 @@
|
|
|
let login = e.target.elements.login.value;
|
|
|
let password = e.target.elements.password.value;
|
|
|
|
|
|
- login ? removeError("Login is required") : addError("Login is required");
|
|
|
- password ? removeError("Password is required") : addError("Password is required");
|
|
|
+ login ? removeAlert("Login is required", "error") : addAlert("Login is required", "error");
|
|
|
+ password ? removeAlert("Password is required", "error") : removeAlert("Password is required", "error");
|
|
|
|
|
|
if (credentials.login !== login || credentials.password !== password) {
|
|
|
localStorage.setItem("isAuth", false);
|
|
|
- addError("The username or password is incorrect");
|
|
|
+ addAlert("The username or password is incorrect", "error");
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
localStorage.setItem("isAuth", true);
|
|
|
checkIsAuth();
|
|
|
+ addAlert("Successfull auth", (type = "success"), 5000);
|
|
|
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
- function addError(text = "") {
|
|
|
- !errors.includes(text) ? errors.push(text) : null;
|
|
|
- updateErrors();
|
|
|
+ function addAlert(text, type, timeout) {
|
|
|
+ !alerts.some((el) => el.text === text && el.type === type)
|
|
|
+ ? alerts.push({ text: text, type: type })
|
|
|
+ : null;
|
|
|
+ updateAlerts();
|
|
|
+ if (timeout) {
|
|
|
+ setTimeout(() => removeAlert(text, type), timeout);
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- function removeError(text = "") {
|
|
|
- if (text === "") {
|
|
|
- errors = [];
|
|
|
- } else {
|
|
|
- errors = errors.filter((el) => el !== text);
|
|
|
+ function removeAlert(text = "", type = "") {
|
|
|
+ if (text === "" && type === "") {
|
|
|
+ alerts = [];
|
|
|
+ }
|
|
|
+ if (text === "" && type !== "") {
|
|
|
+ alerts = alerts.filter((el) => el.type !== type);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (text !== "" && type === "") {
|
|
|
+ alerts = alerts.filter((el) => el.text !== text);
|
|
|
+ }
|
|
|
+ if (text !== "" && type !== "") {
|
|
|
+ alerts = alerts.filter((el) => el.text !== text || el.type !== type);
|
|
|
}
|
|
|
|
|
|
- updateErrors();
|
|
|
+ updateAlerts();
|
|
|
}
|
|
|
|
|
|
function logout() {
|
|
|
localStorage.setItem("isAuth", false);
|
|
|
isAuth = false;
|
|
|
- removeError();
|
|
|
+ removeAlert();
|
|
|
checkIsAuth();
|
|
|
}
|
|
|
|
|
|
@@ -139,11 +148,11 @@
|
|
|
let amount = +e.target.elements.amount?.value ?? 0;
|
|
|
|
|
|
if (amount < 0) {
|
|
|
- addError("Amount field value should be greater than 0!");
|
|
|
+ addAlert("Amount field value should be greater than 0!", "error");
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
- removeError("Amount field value should be greater than 0!");
|
|
|
+ removeAlert("Amount field value should be greater than 0!", "error");
|
|
|
|
|
|
document.querySelector('input[name="USD"]').value = (amount / +exchangeRates[currency]).toFixed(3);
|
|
|
}
|
ilya_shyian