Finish implementing login

- Templated main page to show user and profile image
- Added logout
- Handle user rejecting Twitch authorization flow

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",

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",

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;

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}`);

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>