3 files changed, 96 insertions, 0 deletions
diff --git a/frontend/src/index.html b/frontend/src/index.html
new file mode 100644
index 0000000..f3e9d0e
--- /dev/null
+++ b/frontend/src/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>PostgREST demo</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <div>
+      <span>
+        <a href="/index.html">Index</a>
+        <a href="/login.html">Login</a>
+        <a id="logout" href="">Logout</a>
+      </span>
+    </div>
+    <button id="fetchTodosBtn">Fetch TODOs</button>
+    <div id="todos"></div>
+    <script src="./main.js"></script>
+  </body>
+</html>
+\ No newline at end of file
diff --git a/frontend/src/login.html b/frontend/src/login.html
new file mode 100644
index 0000000..abae4f8
--- /dev/null
+++ b/frontend/src/login.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>PostgREST demo</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <div>
+      <span>
+        <a href="/index.html">Index</a>
+        <a href="/login.html">Login</a>
+        <a id="logout" href="">Logout</a>
+      </span>
+    </div>
+    <form id="loginForm">
+      <label>Username
+        <input type="text" name="username" id="username">
+      </label>
+      <label>Password
+        <input type="password" name="password" id="password">
+      </label>
+      <button role="submit">Log in</button>
+    </form>
+    <script src="./main.js"></script>
+  </body>
+</html>
+\ No newline at end of file
diff --git a/frontend/src/main.js b/frontend/src/main.js
new file mode 100644
index 0000000..79ed47e
--- /dev/null
+++ b/frontend/src/main.js
@@ -0,0 +1,51 @@
+import 'regenerator-runtime/runtime';
+import axios from 'axios';
+import $ from 'jquery';
+import cookie from 'js-cookie';
+
+const LOGIN_API_URL = 'http://localhost:4000';
+const POSTGREST_API_URL = 'http://localhost:3000';
+
+$('a#logout').click(function(event) {
+  event.preventDefault();
+  cookie.remove('jwt');
+  alert('Logged out.');
+});
+
+// fetch data from postgrest
+$('button#fetchTodosBtn').click(async function() {
+  $('div#todos').html('');
+  const jwt = cookie.get('jwt');
+  try {
+    const resp = await axios.get(`${POSTGREST_API_URL}/todos`, {
+      headers: { Authorization: `Bearer ${jwt}` },
+    });
+    const todos = resp.data;
+    if (todos.length === 0) {
+      $('div#todos').html('No TODOs.');
+    } else {
+      todos.forEach(todo => {
+        $('div#todos').append(`<div>id: ${todo.id}, task: ${todo.task}</div>`);
+      });
+    }
+  } catch (err) {
+    $('div#todos').html(String(err));
+    alert(err);
+  }
+});
+
+$('form#loginForm').submit(async function(event) {
+  event.preventDefault();
+  const username = $(this).find('input#username').val();
+  const password = $(this).find('input#password').val();
+  try {
+    const resp = await axios.post(`${LOGIN_API_URL}/login`, { username, password });
+    const payload = resp.data;
+    const jwt = payload.jwt;
+    cookie.set('jwt', jwt);
+    alert(`Logged in as ${username}.`);
+  } catch (err) {
+    cookie.remove('jwt');
+    alert(err);
+  }
+});