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
new file mode 100644
index 00000000..ef2d91c1
--- /dev/null
+++ b/slowcord/public/login.html
@@ -0,0 +1,93 @@
+<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>Glad to see you <3 </p>
+ <a href="/register">Wait, I'm new!</a>
+ </div>
+
+ <p id="failure">Login failed</p>
+ </div>
+
+
+ <form action="javascript:void(0);">
+ <label for="email">Email</label>
+ <input type="email" name="email" />
+
+ <label for="password">Password</label>
+ <input type="password" name="password" />
+
+ <input type="submit" value="Login" />
+
+ <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>
+ /* https://stackoverflow.com/questions/5639346/what-is-the-shortest-function-for-reading-a-cookie-by-name-in-javascript */
+ const getCookieValue = (name) => (
+ document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)')?.pop() || ''
+ );
+
+ let token = getCookieValue("token");
+ 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=/"); });
+ window.localStorage.setItem("token", `"${token}"`);
+ window.location.href = "/app";
+ }
+
+ token = window.localStorage.getItem("token");
+ if (token) window.location.href = "/app";
+
+ document.forms[0].addEventListener("submit", async (e) => {
+ const data = new FormData(e.target);
+ const email = data.get("email");
+ const password = data.get("password");
+
+ const response = await fetch("/api/v9/auth/login", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({
+ login: email,
+ password: password,
+ })
+ });
+
+ 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/public/register.html b/slowcord/public/register.html
new file mode 100644
index 00000000..5843649c
--- /dev/null
+++ b/slowcord/public/register.html
@@ -0,0 +1,87 @@
+<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({
+ consent: true,
+ 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
|
