From c1aaf53f75168e4c23a53c5fd66cfec392b23106 Mon Sep 17 00:00:00 2001
From: unknown <cbplepel@gmail.com>
Date: Wed, 9 Sep 2020 21:24:08 -0500
Subject: [PATCH 1/5] add login page Marko template

---
 server.js              |  5 +++++
 src/views/log-in.marko | 37 +++++++++++++++++++++++++++++++++++++
 2 files changed, 42 insertions(+)
 create mode 100644 src/views/log-in.marko

diff --git a/server.js b/server.js
index 69c0f5a..6a28cf7 100644
--- a/server.js
+++ b/server.js
@@ -7,6 +7,7 @@ const apiRouter = require("./api/api");
 const {serveStatic} = require("lasso/middleware");
 require("marko/node-require").install();
 const signup = require("./src/views/sign-up.marko");
+const login = require("./src/views/log-in.marko");
 
 require("lasso").configure({
 	plugins: ["lasso-marko"]
@@ -20,6 +21,10 @@ app.get("/sign-up", (req, res) => {
 	signup.render({}, res);
 });
 
+app.get("/log-in", (req, res) => {
+	login.render({}, res);
+});
+
 if(process.env.NODE_ENV !== "test"){
 	app.listen(process.env.PORT, () => console.log(`Listening on port ${process.env.PORT}`));
 }
diff --git a/src/views/log-in.marko b/src/views/log-in.marko
new file mode 100644
index 0000000..a85372a
--- /dev/null
+++ b/src/views/log-in.marko
@@ -0,0 +1,37 @@
+<base-outline title="Log In | Quiz Game">
+	<@body>
+		<div class="card">
+			<h2>Log In</h2>
+			<input type="text" placeholder="Username" /><br/>
+			<input type="password" placeholder="Password" /><br/>
+			<input type="button" value="Log In" />
+		</div>
+	</@body>
+</base-outline>
+
+style {
+	.card {
+		width: 50%;
+		margin-left: 50%;
+		transform: translate(-50%, 0);
+		box-shadow: 0px 1px 8px rgba(0,0,0,0.3);
+		text-align: center;
+		overflow: auto;
+	}
+	.card input {
+		padding: 8px;
+		margin: 0.5em;
+		border-radius: 8px;
+		border: 1px solid #ccc;
+		outline: none;
+	}
+	.card input:focus {
+		border: 1px solid black;
+	}
+	.card input[type="button" i] {
+		background-color: white;
+	}
+	.card input[type="button" i]:hover {
+		background-color: #ccc;
+	}
+}
\ No newline at end of file

From a0064af62b4273ae82820c2518ca38fc67c38051 Mon Sep 17 00:00:00 2001
From: unknown <cbplepel@gmail.com>
Date: Thu, 10 Sep 2020 21:51:44 -0500
Subject: [PATCH 2/5] add login functionality to login page

---
 src/views/log-in.marko | 39 ++++++++++++++++++++++++++++++++++++---
 1 file changed, 36 insertions(+), 3 deletions(-)

diff --git a/src/views/log-in.marko b/src/views/log-in.marko
index a85372a..a5724b5 100644
--- a/src/views/log-in.marko
+++ b/src/views/log-in.marko
@@ -1,10 +1,43 @@
+class {
+	onCreate(){
+		this.state = {error: ""};
+	}
+	submit(){
+		fetch("/api/v1/login", {
+			method: "POST",
+			headers: {"Content-Type": "application/json"},
+			body: JSON.stringify({
+				username: this.getEl("un").value,
+				password: this.getEl("pwd").value
+			})
+		}).then(res => {
+			console.log(res);
+			if(res.status === 200){
+				window.sessionStorage.setItem("jwt", res.body.token);
+				return window.location.assign("/");
+			}
+			res.json().then(body => {
+				this.state.error = body.error ||
+					"An error occurred creating a new user";
+				console.log(this.state.error);
+			}).catch(e => {
+				console.error(e);
+				this.state.error = "An error occurred creating a new user";
+			});
+		}).catch(e => {
+			console.error(e);
+			this.state.error = "An error occurred creating a new user";
+		});
+	}
+}
+
 <base-outline title="Log In | Quiz Game">
 	<@body>
 		<div class="card">
 			<h2>Log In</h2>
-			<input type="text" placeholder="Username" /><br/>
-			<input type="password" placeholder="Password" /><br/>
-			<input type="button" value="Log In" />
+			<input type="text" placeholder="Username" key="un" /><br/>
+			<input type="password" placeholder="Password" key="pwd" /><br/>
+			<input type="button" value="Log In" on-click("submit") />
 		</div>
 	</@body>
 </base-outline>

From 8bb7094c26344aa4bd670a9e226544d9160e27b9 Mon Sep 17 00:00:00 2001
From: unknown <cbplepel@gmail.com>
Date: Fri, 11 Sep 2020 23:03:52 -0500
Subject: [PATCH 3/5] add feedback on login error

---
 src/views/log-in.marko | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/views/log-in.marko b/src/views/log-in.marko
index a5724b5..9d3b3b5 100644
--- a/src/views/log-in.marko
+++ b/src/views/log-in.marko
@@ -38,6 +38,9 @@ class {
 			<input type="text" placeholder="Username" key="un" /><br/>
 			<input type="password" placeholder="Password" key="pwd" /><br/>
 			<input type="button" value="Log In" on-click("submit") />
+			<if(state.error)>
+				<div class="error-box">${state.error}</div>
+			</if>
 		</div>
 	</@body>
 </base-outline>
@@ -67,4 +70,9 @@ style {
 	.card input[type="button" i]:hover {
 		background-color: #ccc;
 	}
+	.error-box {
+		background-color: #ffc0c0;
+		border: 1px solid red;
+		border-radius: 8px;
+	}
 }
\ No newline at end of file

From 43ec84f4e02a5259e92d2782e0d3bd4a7ade249b Mon Sep 17 00:00:00 2001
From: unknown <cbplepel@gmail.com>
Date: Fri, 11 Sep 2020 23:11:26 -0500
Subject: [PATCH 4/5] change login url to integrate with sign-up page

---
 server.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server.js b/server.js
index 6a28cf7..f9ca757 100644
--- a/server.js
+++ b/server.js
@@ -21,7 +21,7 @@ app.get("/sign-up", (req, res) => {
 	signup.render({}, res);
 });
 
-app.get("/log-in", (req, res) => {
+app.get("/login", (req, res) => {
 	login.render({}, res);
 });
 

From 00839f11df359532ecb2ab09c58b3306ccba42d4 Mon Sep 17 00:00:00 2001
From: unknown <cbplepel@gmail.com>
Date: Sat, 12 Sep 2020 22:48:55 -0500
Subject: [PATCH 5/5] add auto-redirect on successful login

---
 src/views/log-in.marko | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/views/log-in.marko b/src/views/log-in.marko
index 9d3b3b5..f19d27c 100644
--- a/src/views/log-in.marko
+++ b/src/views/log-in.marko
@@ -12,11 +12,12 @@ class {
 			})
 		}).then(res => {
 			console.log(res);
-			if(res.status === 200){
-				window.sessionStorage.setItem("jwt", res.body.token);
-				return window.location.assign("/");
-			}
 			res.json().then(body => {
+				if(res.status === 200){
+					sessionStorage.setItem("jwt", body.token);
+					let rdr = (new URLSearchParams(location.search)).get("rdr");
+					return location.assign(rdr || "/");
+				}
 				this.state.error = body.error ||
 					"An error occurred creating a new user";
 				console.log(this.state.error);