diff --git a/frontend/static/css/accounts/login.css b/frontend/static/css/accounts/login.css new file mode 100644 index 0000000..72e58a9 --- /dev/null +++ b/frontend/static/css/accounts/login.css @@ -0,0 +1,16 @@ +#app .form { + background-color: red; + width: 300px; + height: 300px; + display: grid; + grid-template-columns: repeat(1, 1fr); + grid-gap: 10px; + margin-left: auto; + margin-right: auto; + margin-top: 90px; + border: 1px black solid; +} + +#app { + background-color: green; +} \ No newline at end of file diff --git a/frontend/static/js/views/accounts/LoginView.js b/frontend/static/js/views/accounts/LoginView.js index 1f83d90..3484610 100644 --- a/frontend/static/js/views/accounts/LoginView.js +++ b/frontend/static/js/views/accounts/LoginView.js @@ -7,10 +7,18 @@ async function login() let password = document.getElementById("password").value; let response = await client.login(username, password); - let errors = await response.json(); + let response_data = await response.json(); + + ["username", "user", "password"].forEach(error_field => { + let error_display = document.getElementById(`error_${error_field}`); + if (error_display != null) + error_display.innerHTML = ""; + }); - errors.user.forEach(error => { - console.log(error) + Object.keys(response_data).forEach(error_field => { + let error_display = document.getElementById(`error_${error_field}`); + if (error_display != null) + error_display.innerHTML = response_data[error_field]; }); } @@ -21,18 +29,22 @@ export default class extends AbstractView { document.body.addEventListener("click", e => { e.preventDefault(); if (e.target.type == "button") - { login(); - } }); } async getHtml() { return ` - - - - +