Slowcord custom register page

4 files changed, 202 insertions, 104 deletions

diff --git a/slowcord/public/css/index.css b/slowcord/public/css/index.css
new file mode 100644
index 00000000..1fa76966
--- /dev/null
+++ b/slowcord/public/css/index.css
@@ -0,0 +1,106 @@
+/* Can you tell I like flexbox? */
+
+html {
+	--background-primary: rgb(22, 23, 25);
+	--background-secondary: rgb(15, 16, 18);
+	--foreground-primary: rgb(200, 200, 200);
+	--background-login-discord: #5865F2;
+
+	background: url("https://slowcord.maddy.k.vu/assets/background.png");
+	background-size: 100% 100%;
+	background-repeat: no-repeat;
+
+	font-family: 'Montserrat', sans-serif;
+
+	color: var(--foreground-primary);
+}
+
+* {
+	margin: 0;
+	padding: 0;
+}
+
+.content {
+	display: flex;
+	width: 100vw;
+	height: 100vh;
+	justify-content: flex-start;
+	align-items: center;
+}
+
+.login {
+	height: 100%;
+	width: 25%;
+	min-width: 400px;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+
+	background-color: var(--background-primary);
+
+	padding: 0 50px 0 50px;
+}
+
+.header {
+	margin: 40px;
+	width: 100%;
+	text-align: center;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}
+
+.header-subtext {
+	text-align: center;
+}
+
+.header-subtext a, .header-subtext p {
+	display: inline-block;
+	margin: 0 10px 0 10px;
+}
+
+a {
+	color: var(--foreground-primary);
+}
+
+form {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	width: 100%;
+	min-height: 50%;
+}
+
+input,
+form a {
+	background-color: var(--background-secondary);
+	padding: 10px;
+	margin: 5px 0 5px 0;
+	outline: none;
+	border: 1px solid grey;
+	color: var(--foreground-primary);
+	text-decoration: none;
+	cursor: pointer;
+}
+
+form a {
+	text-align: center;
+}
+
+label {
+	text-transform: uppercase;
+	font-size: 0.75rem;
+	font-weight: bold;
+}
+
+#loginDiscord {
+	background-color: var(--background-login-discord);
+}
+
+#failure {
+	width: 100%;
+	margin-top: 10px;
+	color: rgb(200, 20, 20);
+	display: none;
+}
\ No newline at end of file
diff --git a/slowcord/public/login.html b/slowcord/public/login.html
index 586e7c61..ef2d91c1 100644
--- a/slowcord/public/login.html
+++ b/slowcord/public/login.html
@@ -10,93 +10,7 @@
 	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 	<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
 
-	<style>
-		html {
-			--background-primary: rgb(22, 23, 25);
-			--background-secondary: rgb(15, 16, 18);
-			--foreground-primary: rgb(200, 200, 200);
-			--background-login-discord: #5865F2;
-
-			background: url("https://slowcord.maddy.k.vu/assets/background.png");
-			background-size: 100% 100%;
-			background-repeat: no-repeat;
-
-			font-family: 'Montserrat', sans-serif;
-
-			color: var(--foreground-primary);
-		}
-
-		* {
-			margin: 0;
-			padding: 0;
-		}
-
-		.content {
-			display: flex;
-			width: 100vw;
-			height: 100vh;
-			justify-content: flex-start;
-			align-items: center;
-		}
-
-		.login {
-			height: 100%;
-			width: 25%;
-			min-width: 400px;
-			display: flex;
-			flex-direction: column;
-			justify-content: center;
-			align-items: center;
-
-			background-color: var(--background-primary);
-
-			padding: 0 50px 0 50px;
-		}
-
-		.header {
-			margin: 40px;
-			width: 100%;
-		}
-
-		form {
-			display: flex;
-			flex-direction: column;
-			width: 100%;
-		}
-
-		input,
-		form a {
-			background-color: var(--background-secondary);
-			padding: 10px;
-			margin: 5px 0 5px 0;
-			outline: none;
-			border: 1px solid grey;
-			color: var(--foreground-primary);
-			text-decoration: none;
-			cursor: pointer;
-		}
-
-		form a {
-			text-align: center;
-		}
-
-		label {
-			text-transform: uppercase;
-			font-size: 0.75rem;
-			font-weight: bold;
-		}
-
-		#loginDiscord {
-			background-color: var(--background-login-discord);
-		}
-
-		#failure {
-			width: 100%;
-			margin-top: 10px;
-			color: rgb(200, 20, 20);
-			display: none;
-		}
-	</style>
+	<link rel="stylesheet" href="./css/index.css">
 </head>
 
 <body>
@@ -104,7 +18,10 @@
 		<div class="login">
 			<div class="header">
 				<h1>Welcome to Slowcord</h1>
-				<p>Glad to see you &lt;3 </p>
+				<div class="header-subtext">
+					<p>Glad to see you &lt;3 </p>
+					<a href="/register">Wait, I'm new!</a>
+				</div>
 
 				<p id="failure">Login failed</p>
 			</div>
@@ -116,12 +33,10 @@
 
 				<label for="password">Password</label>
 				<input type="password" name="password" />
-				
+
 				<input type="submit" value="Login" />
 
-				<a
-					id="loginDiscord"
-					class="oauth"
+				<a id="loginDiscord" class="oauth"
 					href="https://discord.com/api/oauth2/authorize?client_id=991688571415175198&redirect_uri=https%3A%2F%2Fslowcord.maddy.k.vu%2Foauth%2Fdiscord&response_type=code&scope=identify%20email">
 					Login with Discord
 				</a>
@@ -139,7 +54,7 @@
 		if (token.trim().length) {
 			/* https://stackoverflow.com/a/27374365 */
 			// why is clearing cookies so weird? wtf
-			document.cookie.split(";").forEach(function(c) { document.cookie = c.replace(/^ +/, "").replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/"); });
+			document.cookie.split(";").forEach(function (c) { document.cookie = c.replace(/^ +/, "").replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/"); });
 			window.localStorage.setItem("token", `"${token}"`);
 			window.location.href = "/app";
 		}
diff --git a/slowcord/public/register.html b/slowcord/public/register.html
new file mode 100644
index 00000000..d660394c
--- /dev/null
+++ b/slowcord/public/register.html
@@ -0,0 +1,86 @@
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Slowcord</title>
+
+	<link rel="preconnect" href="https://fonts.googleapis.com">
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+	<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
+
+	<link rel="stylesheet" href="./css/index.css">
+</head>
+
+<body>
+	<div class="content">
+		<div class="login">
+			<div class="header">
+				<h1>Welcome to Slowcord</h1>
+				<div class="header-subtext">
+					<p>You're new?</p>
+					<a href="/login">Actually, I'm not!</a>
+				</div>
+
+				<p id="failure">Register failed</p>
+			</div>
+
+
+			<form action="javascript:void(0);">
+				<label for="email">Email</label>
+				<input type="email" name="email" />
+
+				<label for="username">Username</label>
+				<input type="username" name="username" />
+
+				<label for="password">Password</label>
+				<input type="password" name="password" />
+
+				<label for="dob">Date of Birth</label>
+				<input type="date" name="dob" />
+
+				<input type="submit" value="Register" />
+
+				<a id="loginDiscord" class="oauth"
+					href="https://discord.com/api/oauth2/authorize?client_id=991688571415175198&redirect_uri=https%3A%2F%2Fslowcord.maddy.k.vu%2Foauth%2Fdiscord&response_type=code&scope=identify%20email">
+					Login with Discord
+				</a>
+			</form>
+		</div>
+	</div>
+
+	<script>
+		document.forms[0].addEventListener("submit", async (e) => {
+			const data = new FormData(e.target);
+			const email = data.get("email");
+			const username = data.get("username");
+			const password = data.get("password");
+			const dob = data.get("dob");
+
+			const response = await fetch("/api/v9/auth/register", {
+				method: "POST",
+				headers: {
+					"Content-Type": "application/json",
+				},
+				body: JSON.stringify({
+					email: email,
+					username: username,
+					password: password,
+					date_of_birth: dob,
+				})
+			});
+
+			const json = await response.json();
+			if (json.token) {
+				window.localStorage.setItem("token", `"${json.token}"`);
+				window.location.href = "/app";
+				return;
+			}
+
+			document.getElementById("failure").style.display = "block";
+		})
+	</script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/slowcord/src/index.ts b/slowcord/src/index.ts
index 20f0aee7..45fbea7d 100644
--- a/slowcord/src/index.ts
+++ b/slowcord/src/index.ts
@@ -79,7 +79,7 @@ const handlers: { [key: string]: any; } = {
 	"discord": Discord,
 };
 
-app.use((req, res, next) => {
+app.get("/oauth/:type", async (req, res) => {
 	requestsThisSecond++;
 	if (requestsThisSecond > allowedRequestsPerSecond)
 		return res.sendStatus(429);
@@ -98,10 +98,6 @@ app.use((req, res, next) => {
 		delete rateLimits[ip];
 	}
 
-	next();
-});
-
-app.get("/oauth/:type", async (req, res) => {
 	const { type } = req.params;
 	const handler = handlers[type];
 	if (!type || !handler) return res.sendStatus(400);
@@ -128,12 +124,7 @@ app.get("/oauth/:type", async (req, res) => {
 	res.sendFile(path.join(__dirname, "../public/login.html"));
 });
 
-// not actually needed but whatever
-app.get("/app", (req, res) => res.sendStatus(200));
-
-app.get("*", (req, res) => {
-	res.sendFile(path.join(__dirname, "../public/login.html"));
-});
+app.use(express.static("public", { extensions: ["html"] }));
 
 (async () => {
 	await initDatabase();