feat: implement a login page

Closes #117
FoRVaiS · May 22, 2022 · 39ab52c · 39ab52c
2 parents 7bf77b8 + 1025031
commit 39ab52c
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 0 deletions.
diff --git a/public/pages/login/login.css b/public/pages/login/login.css
@@ -0,0 +1,6 @@
+main {
+  display: flex;
+  flex-direction: column;
+
+  align-items: center;
+}
diff --git a/public/pages/login/login.ejs b/public/pages/login/login.ejs
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css" integrity="sha384-ejwKkLla8gPP8t2u0eQyL0Q/4ItcnyveF505U0NIobD/SMsNyXrLti6CWaD0L52l" crossorigin="anonymous">
+  <link rel="stylesheet" href="/styles/styles.css">
+  <link rel="stylesheet" href="/pages/login/login.css">
+  <title>Pokedex Registration</title>
+</head>
+
+<body>
+  <div class="container">
+    <%- include('../_partials/navbar') %>
+    <main>
+      <h2>Login into your account</h2>
+      <div class="login panel">
+        <form class="form">
+          <p class="form__alert" data-hidden></p>
+          <div class="form__group">
+            <span class="form__item">
+              <label class="form__label" for="in-username">Username</label>
+              <input id="in-username" class="form__field" type="text" name="username">
+            </span>
+            <div class="form__item">
+              <label for="in-password" class="form__label">Password</label>
+              <input id="in-password" class="form__field"type="password" name="password">
+            </div>
+          </div>
+          <div class="form__item">
+            <input id="id-login" class="form__button btn btn--primary" type="submit" value="Login">
+          </div>
+        </form>
+      </div>
+    </main>
+    <%- include('../_partials/footer') %>
+  </div>
+  <script src="/global.js"></script>
+  <script src="/pages/login/login.js"></script>
+</body>
+
+</html>
diff --git a/public/pages/login/login.js 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
@@ -27,6 +27,10 @@ const createViewRouter = () => {
     res.render('pages/register/register');
   });
 
+  router.get('/login', (req, res) => {
+    res.render('pages/login/login');
+  });
+
   return router;
 };