From e8d7d6362b213885d0d340e178bfad6ef05c657c Mon Sep 17 00:00:00 2001
From: Dessa Simpson <dxs@k7dxs.net>
Date: Sun, 5 Jul 2020 14:15:30 -0700
Subject: [PATCH] Finish implementing login

- Templated main page to show user and profile image
- Added logout
- Handle user rejecting Twitch authorization flow
---
 package-lock.json                   |  5 +++++
 package.json                        |  1 +
 public/style.css                    | 12 ++++++++++++
 src/app.ts                          | 18 +++++++++++++++++-
 public/index.html => views/main.eta |  6 ++++++
 5 files changed, 41 insertions(+), 1 deletion(-)
 rename public/index.html => views/main.eta (76%)

diff --git a/package-lock.json b/package-lock.json
index f798792..d5f1776 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -594,6 +594,11 @@
       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
       "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
     },
+    "eta": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/eta/-/eta-1.2.2.tgz",
+      "integrity": "sha512-8H+zm3HfY2ELz5P4zzR3uJ1LQLnhTAe5gb0vR9ziKZGCLhQrRtqwIyzsOkf7pdBnH7gFPLRAaKZdv2nj9vu9cw=="
+    },
     "etag": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
diff --git a/package.json b/package.json
index b91dfb1..a3d59b5 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   "license": "MIT",
   "dependencies": {
     "connect-pg-simple": "^6.1.0",
+    "eta": "^1.2.2",
     "express": "^4.17.1",
     "express-session": "^1.17.1",
     "node-fetch": "^3.0.0-beta.7",
diff --git a/public/style.css b/public/style.css
index b8c0417..74ab80a 100644
--- a/public/style.css
+++ b/public/style.css
@@ -46,6 +46,18 @@ div#nav-login {
 	margin-left: auto;
 }
 
+div#nav-userpic {
+	margin-left: auto;
+	margin-right: -5px;
+	height: 2.5em;
+}
+
+#nav-userpic img {
+	height: 80%;
+	margin-top: 0.25em;
+	margin-bottom: 0.25em;
+}
+
 #main {
 	margin: 0.5em;
 	padding: 0.5em;
diff --git a/src/app.ts b/src/app.ts
index 14d8719..e998ede 100644
--- a/src/app.ts
+++ b/src/app.ts
@@ -7,6 +7,7 @@ import express from "express";
 import session from "express-session";
 import pgSessionStore from "connect-pg-simple";
 import fetch, { Response as FetchResponse } from "node-fetch";
+import * as eta from "eta";
 import db from "./db";
 import errorHandler from "./errors";
 
@@ -109,6 +110,7 @@ app.post("/api/deleteRequest", async (request, response) => {
 
 // Twitch callback
 app.get("/callback", async (request, response) => {
+	if (request.query.error) response.redirect(307, '/');
 	var authcode = request.query.code as string;
 	var tokenResponse = await fetch("https://id.twitch.tv/oauth2/token", { method: "POST", body: new URLSearchParams({
 		client_id: config.twitchClientId,
@@ -125,7 +127,21 @@ app.get("/callback", async (request, response) => {
 	response.redirect(307, '/');
 });
 
-//app.get("/session", (request, response) => { response.send(request.session); });
+// Frontend templates
+app.get("/", async (request, response) => {
+	if (!request.session) {
+		throw new Error ("Missing request.session")
+	}
+	if (!request.session.user) {
+		response.render('main.eta', { loggedIn: false });
+	} else {
+		response.render('main.eta', { loggedIn: true, userName: request.session.user.display_name, userProfilePicture: request.session.user.profile_image_url });
+	}
+});
+
+// Logout
+app.get ("/logout", async (request, response) => request.session!.destroy((err) => response.redirect(307, '/')));
+
 
 const server = app.listen(config.port, () => {
   console.log(`Listening on port ${config.port}`);
diff --git a/public/index.html b/views/main.eta
similarity index 76%
rename from public/index.html
rename to views/main.eta
index 5a4a3af..9e92915 100644
--- a/public/index.html
+++ b/views/main.eta
@@ -9,7 +9,13 @@
 		<div id="topbar">
 			<div id="logo">Learn Request Queue</div>
 			<div id="nav-requests"><a href="/">Requests</a></div>
+			<%- if (it.userName) { // Logged in -%>
+			<div id="nav-userpic"><img src="<%= it.userProfilePicture %>" /></div>
+			<div id="nav-username"><%= it.userName %></div>
+			<div id="nav-logout"><a href="/logout">Logout</a></div>
+			<%- } else { // Not logged in -%>
 			<div id="nav-login"><a href="https://id.twitch.tv/oauth2/authorize?client_id=di37tc1dr9rhvmpvzgn8rkmi7bdhkk&redirect_uri=https://localhost/callback&response_type=code">Login</a></div>
+			<%- } %>
 		</div>
 		<div id="main">
 			<div id="requests"></div><br>