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 <3 </p>
+ <div class="header-subtext">
+ <p>Glad to see you <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();
|
