diff --git a/public/pages/login/login.css b/public/pages/login/login.css new file mode 100644 index 0000000..ded027e --- /dev/null +++ b/public/pages/login/login.css @@ -0,0 +1,6 @@ +main { + display: flex; + flex-direction: column; + + align-items: center; +} \ No newline at end of file diff --git a/public/pages/login/login.ejs b/public/pages/login/login.ejs new file mode 100644 index 0000000..51a05f7 --- /dev/null +++ b/public/pages/login/login.ejs @@ -0,0 +1,44 @@ + + + + + + + + + + + Pokedex Registration + + + +
+ <%- include('../_partials/navbar') %> +
+

Login into your account

+ +
+ <%- include('../_partials/footer') %> +
+ + + + + \ No newline at end of file diff --git a/public/pages/login/login.js b/public/pages/login/login.js new file mode 100644 index 0000000..971ac66 --- /dev/null +++ b/public/pages/login/login.js @@ -0,0 +1,39 @@ +(async () => { + const { query } = window.pokedex; + + const sendLoginRequest = (username, password) => query('/api/v2/user/login', { + method: 'post', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + username: username.trim(), + password: password.trim(), + }), + }); + + const usernameField = document.querySelector('input[name=\'username\']'); + const passwordField = document.querySelector('input[name=\'password\']'); + const alertDialogue = document.querySelector('p.form__alert'); + const loginBtn = document.querySelector('input[type=\'submit\']'); + let lastTimeout = null; + + loginBtn.onclick = e => { + e.preventDefault(); + + sendLoginRequest(usernameField.value, passwordField.value) + .then(results => { + if (!results.success) { + clearTimeout(lastTimeout); + alertDialogue.textContent = results.data.msg; + alertDialogue.removeAttribute('data-hidden'); + + lastTimeout = setTimeout(() => { + alertDialogue.setAttribute('data-hidden', true); + }, 3e3); + } else { + window.location.href = '/'; + } + }); + }; +})(); diff --git a/src/server/routes/views.js b/src/server/routes/views.js index dbc2b59..d6b9d91 100644 --- a/src/server/routes/views.js +++ b/src/server/routes/views.js @@ -27,6 +27,10 @@ const createViewRouter = () => { res.render('pages/register/register'); }); + router.get('/login', (req, res) => { + res.render('pages/login/login'); + }); + return router; };