TODOs

+ +

- - -

- -

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; +} -- cgit v1.3