1 files changed, 37 insertions, 14 deletions

diff --git a/frontend/src/main.js b/frontend/src/main.js
index 3deeda3..f7ccc30 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -7,10 +7,23 @@ 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;
 
+$(document).ready(function() {
+  const displayName = cookie.get('displayName');
+  if (!displayName) {
+    // not logged in
+    $('button#logout').css('display', 'none');
+    $('div#loginWidgets').css('display', 'initial');
+    $('span#displayName').text('');
+  } else {
+    // logged in
+    $('button#logout').css('display', 'initial');
+    $('span#displayName').text(`Logged in as ${displayName}`);
+  }
+});
+
 $('button#logout').click(function(event) {
   event.preventDefault();
-  cookie.remove('jwt');
-  alert('Logged out.');
+  logout();
 });
 
 // fetch data from postgrest
@@ -35,18 +48,29 @@ $('button#fetchTodosBtn').click(async function() {
   }
 });
 
+const finalizeLogin = user => {
+  const { jwt, displayName } = user;
+  cookie.set('jwt', jwt);
+  cookie.set('displayName', displayName);
+  window.location.reload();
+};
+
+const logout = () => {
+  cookie.remove('jwt');
+  cookie.remove('displayName');
+  window.location.reload();
+};
+
 $('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/userpass`, { username, password });
-    const payload = resp.data;
-    const { jwt, displayName } = payload;
-    cookie.set('jwt', jwt);
-    alert(`Logged in as ${displayName}.`);
+    const user = resp.data;
+    finalizeLogin(user);
   } catch (err) {
-    cookie.remove('jwt');
+    logout();
     alert(err);
   }
 });
@@ -54,15 +78,14 @@ $('form#loginForm').submit(async function(event) {
 $('button#google-login').click(async function() {
   const GoogleAuth = gapi.auth2.getAuthInstance();
   try {
-    const user = await GoogleAuth.signIn();
-    const authResponse = user.getAuthResponse(true);
+    const googleUser = await GoogleAuth.signIn();
+    const authResponse = googleUser.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}.`);
+    const user = resp.data;
+    finalizeLogin(user);
   } catch (err) {
-    console.error(err);
+    logout();
+    alert(err);
   }
 });