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;
};