Add some style and fix bugs

author: Jan Tuomi <jan.tuomi@eficode.com> 2020-04-26 19:54:24 +0300
committer: Jan Tuomi <jan.tuomi@eficode.com> 2020-04-26 19:54:24 +0300
commit: 2687ad8b7337c4bd9517430ad08ec1bbc8f4f4ba (patch)
tree: bad1a6ec868101ef5d3b979ebe3c202057e99c3b /frontend
parent: 7e057c8a56b51bdd7e95b3919d013ac0edd481e9 (diff)
3 files changed, 359 insertions, 30 deletions
diff --git a/frontend/src/index.html b/frontend/src/index.html
index 7ffb08f..0873f70 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -3,25 +3,30 @@
   <head>
     <title>PostgREST demo</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="./style.css">
   </head>
   <body>
-    <div>
-      <button id="logout">Logout</button>
+    <div class="container">
+      <div>
+        <span id="displayName"></span>
+        <button id="logout" style="display: none">Logout</button>
+      </div>
+      <div id="loginWidgets" style="display: none">
+        <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>
+      <h1>TODOs</h1>
+      <button id="fetchTodosBtn">Fetch TODOs</button>
+      <div id="todos"></div>
     </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>
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);
   }
 });
 
diff --git a/frontend/src/style.css b/frontend/src/style.css
new file mode 100644
index 0000000..3821eb6
--- /dev/null
+++ b/frontend/src/style.css
@@ -0,0 +1,301 @@
+/* Start of https://thebestmotherfucking.website CSS */
+html {
+  background-color: #fefefe;
+}
+body {
+  font-family: Open Sans, Arial;
+  color: #454545;
+  font-size: 16px;
+  margin: 2em auto;
+  max-width: 800px;
+  padding: 1em;
+  line-height: 1.4;
+  text-align: justify;
+}
+html.contrast body {
+  color: #050505;
+}
+html.contrast blockquote {
+  color: #11151a;
+}
+html.contrast blockquote:before {
+  color: #262626;
+}
+html.contrast a {
+  color: #0051c9;
+}
+html.contrast a:visited {
+  color: #7d013e;
+}
+html.contrast span.wr {
+  color: #800;
+}
+html.contrast span.mfw {
+  color: #4d0000;
+}
+html.inverted {
+  background-color: #010101;
+}
+html.inverted body {
+  color: #bababa;
+}
+html.inverted div#contrast,
+html.inverted div#invmode {
+  color: #fff;
+  background-color: #000;
+}
+html.inverted blockquote {
+  color: #dad0c7;
+}
+html.inverted blockquote:before {
+  color: #bfbfbf;
+}
+html.inverted a {
+  color: #07a;
+}
+html.inverted a:visited {
+  color: #ac5a82;
+}
+html.inverted span.wr {
+  color: #c0392b;
+}
+html.inverted span.mfw {
+  color: #8a0000;
+}
+html.inverted.contrast {
+  background-color: #010101;
+}
+html.inverted.contrast body {
+  color: #fff;
+}
+html.inverted.contrast div#contrast,
+html.inverted.contrast div#invmode {
+  color: #fff;
+  background-color: #000;
+}
+html.inverted.contrast blockquote {
+  color: #f8f6f5;
+}
+html.inverted.contrast blockquote:before {
+  color: #e5e5e5;
+}
+html.inverted.contrast a {
+  color: #07a;
+}
+html.inverted.contrast a:visited {
+  color: #ac5a82;
+}
+html.inverted.contrast span.wr {
+  color: #c0392b;
+}
+html.inverted.contrast span.mfw {
+  color: #a10000;
+}
+a {
+  color: #07a;
+}
+a:visited {
+  color: #941352;
+}
+.noselect {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+span.citneed {
+  vertical-align: top;
+  font-size: .7em;
+  padding-left: .3em;
+}
+small {
+  font-size: .4em;
+}
+p.st {
+  margin-top: -1em;
+}
+div.fancyPositioning div.picture-left {
+  float: left;
+  width: 40%;
+  overflow: hidden;
+  margin-right: 1em;
+}
+div.fancyPositioning div.picture-left img {
+  width: 100%;
+}
+div.fancyPositioning div.picture-left p.caption {
+  font-size: .7em;
+}
+div.fancyPositioning div.tleft {
+  float: left;
+  width: 55%;
+}
+div.fancyPositioning div.tleft p:first-child {
+  margin-top: 0;
+}
+div.fancyPositioning:after {
+  display: block;
+  content: "";
+  clear: both;
+}
+ul li img {
+  height: 1em;
+}
+blockquote {
+  color: #456;
+  margin-left: 0;
+  margin-top: 2em;
+  margin-bottom: 2em;
+}
+blockquote span {
+  float: left;
+  margin-left: 1rem;
+  padding-top: 1rem;
+}
+blockquote author {
+  display: block;
+  clear: both;
+  font-size: .6em;
+  margin-left: 2.4rem;
+  font-style: oblique;
+}
+blockquote author:before {
+  content: "- ";
+  margin-right: 1em;
+}
+blockquote:before {
+  font-family: Times New Roman, Times, Arial;
+  color: #666;
+  content: open-quote;
+  font-size: 2.2em;
+  font-weight: 600;
+  float: left;
+  margin-top: 0;
+  margin-right: .2rem;
+  width: 1.2rem;
+}
+blockquote:after {
+  content: "";
+  display: block;
+  clear: both;
+}
+@media screen and (max-width: 500px) {
+  body {
+    text-align: left;
+  }
+  div.fancyPositioning div.picture-left,
+  div.fancyPositioning div.tleft {
+    float: none;
+    width: inherit;
+  }
+  blockquote span {
+    width: 80%;
+  }
+  blockquote author {
+    padding-top: 1em;
+    width: 80%;
+    margin-left: 15%;
+  }
+  blockquote author:before {
+    content: "";
+    margin-right: inherit;
+  }
+}
+span.visited {
+  color: #941352;
+}
+span.visited-maroon {
+  color: #85144b;
+}
+span.wr {
+  color: #c0392b;
+  font-weight: 600;
+  text-decoration: underline;
+}
+div#contrast {
+  color: #000;
+  top: 10px;
+}
+div#contrast,
+div#invmode {
+  cursor: pointer;
+  position: absolute;
+  right: 10px;
+  font-size: .8em;
+  text-decoration: underline;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+div#invmode {
+  color: #fff;
+  background-color: #000;
+  top: 34px;
+  padding: 2px 5px;
+}
+span.sb {
+  color: #00e;
+}
+span.sb,
+span.sv {
+  cursor: not-allowed;
+}
+span.sv {
+  color: #551a8b;
+}
+span.foufoufou {
+  color: #444;
+  font-weight: 700;
+}
+span.foufoufou:before {
+  content: "";
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  margin-left: .2em;
+  margin-right: .2em;
+  background-color: #444;
+}
+span.foufivfoufivfoufiv {
+  color: #454545;
+  font-weight: 700;
+}
+span.foufivfoufivfoufiv:before {
+  content: "";
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  margin-left: .2em;
+  margin-right: .2em;
+  background-color: #454545;
+}
+span.mfw {
+  color: #730000;
+}
+a.kopimi,
+a.kopimi img.kopimi {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+a.kopimi img.kopimi {
+  height: 2em;
+}
+p.fakepre {
+  font-family: monospace;
+  font-size: .9em;
+}
+/* End of https://thebestmotherfucking.website CSS */
+
+button {
+  padding: 8px;
+}
+
+form input {
+  display: inline-block;
+}
author	Jan Tuomi <jan.tuomi@eficode.com>	2020-04-26 19:54:24 +0300
committer	Jan Tuomi <jan.tuomi@eficode.com>	2020-04-26 19:54:24 +0300
commit	2687ad8b7337c4bd9517430ad08ec1bbc8f4f4ba (patch)
tree	bad1a6ec868101ef5d3b979ebe3c202057e99c3b /frontend
parent	7e057c8a56b51bdd7e95b3919d013ac0edd481e9 (diff)