3 files changed, 46 insertions, 38 deletions
diff --git a/frontend/src/index.html b/frontend/src/index.html
index f3e9d0e..7ffb08f 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -6,14 +6,23 @@
   </head>
   <body>
     <div>
-      <span>
-        <a href="/index.html">Index</a>
-        <a href="/login.html">Login</a>
-        <a id="logout" href="">Logout</a>
-      </span>
+      <button id="logout">Logout</button>
+    </div>
+    <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>
+      <button id="google-login">Login with Google</button>
     </div>
     <button id="fetchTodosBtn">Fetch TODOs</button>
     <div id="todos"></div>
     <script src="./main.js"></script>
+    <script src="https://apis.google.com/js/platform.js?onload=gapiInit" async defer></script>
   </body>
 </html>
 \ No newline at end of file
diff --git a/frontend/src/login.html b/frontend/src/login.html
deleted file mode 100644
index abae4f8..0000000
--- a/frontend/src/login.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<!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
index 79ed47e..3deeda3 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -3,10 +3,11 @@ 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';
+const LOGIN_API_URL = process.env.LOGIN_API_URL;
+const POSTGREST_API_URL = process.env.POSTGREST_API_URL;
+const GOOGLE_OAUTH_ID = process.env.GOOGLE_OAUTH_ID;
 
-$('a#logout').click(function(event) {
+$('button#logout').click(function(event) {
   event.preventDefault();
   cookie.remove('jwt');
   alert('Logged out.');
@@ -29,8 +30,8 @@ $('button#fetchTodosBtn').click(async function() {
       });
     }
   } catch (err) {
+    console.error(err);
     $('div#todos').html(String(err));
-    alert(err);
   }
 });
 
@@ -39,13 +40,37 @@ $('form#loginForm').submit(async function(event) {
   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 resp = await axios.post(`${LOGIN_API_URL}/login/userpass`, { username, password });
     const payload = resp.data;
-    const jwt = payload.jwt;
+    const { jwt, displayName } = payload;
     cookie.set('jwt', jwt);
-    alert(`Logged in as ${username}.`);
+    alert(`Logged in as ${displayName}.`);
   } catch (err) {
     cookie.remove('jwt');
     alert(err);
   }
 });
+
+$('button#google-login').click(async function() {
+  const GoogleAuth = gapi.auth2.getAuthInstance();
+  try {
+    const user = await GoogleAuth.signIn();
+    const authResponse = user.getAuthResponse(true);
+    const resp = await axios.post(`${LOGIN_API_URL}/login/google`, { accessToken: authResponse.access_token });
+    const payload = resp.data;
+    const { jwt, displayName } = payload;
+    cookie.set('jwt', jwt);
+    alert(`Logged in as ${displayName}.`);
+  } catch (err) {
+    console.error(err);
+  }
+});
+
+window.gapiInit = () => {
+  console.log('gapiInit');
+  gapi.load('auth2', function() {
+    gapi.auth2.init({
+      client_id: GOOGLE_OAUTH_ID,
+    });
+  });
+};