1 files changed, 51 insertions, 0 deletions
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);
+  }
+});