Implement logging in with Discord

.env.template

@@ -7,4 +7,9 @@ GOOGLE_APP_ID=
 
 DB_USERNAME=
 DB_PASSWORD=
-DB_NAME=
+DB_NAME=
+
+BOT_CLIENT_ID=
+BOT_CLIENT_SECRET=
+
+ADMIN_URL=

web/package.json

@@ -12,15 +12,20 @@
     "test": "run-p --race dev cy:run"
   },
   "dependencies": {
+    "@types/btoa": "^1.2.3",
     "@types/compression": "0.0.36",
     "@types/dotenv": "^6.1.1",
     "@types/express": "^4.17.0",
+    "@types/request-promise-native": "^1.0.16",
+    "btoa": "^1.2.1",
     "bulma": "^0.7.5",
     "compression": "^1.7.1",
     "dotenv": "^8.0.0",
     "express": "^4.17.1",
     "pg": "^7.11.0",
     "polka": "^0.5.0",
+    "request": "^2.88.0",
+    "request-promise-native": "^1.0.7",
     "sirv": "^0.4.0",
     "typeorm": "^0.2.18"
   },

web/src/routes/_layout.svelte

@@ -8,7 +8,7 @@
 	@import "style/main.scss";
 </style>
 
-<Nav {segment}/>
+<!-- <Nav {segment}/> -->
 
 <main>
 	<slot></slot>

web/src/routes/index.svelte

@@ -1,20 +1,37 @@
-<svelte:head>
-	<title>Sapper project template</title>
-</svelte:head>
+<style lang="scss">
+  #login-box {
+    height: 100vh;
+    align-items: center;
+  }
 
-<h1>Great success!11!</h1>
+  #login-form {
+    border-radius: 3px;
+    box-shadow: 3px 3px 10px -1px rgba(0, 0, 0, 0.75);
+  }
 
- <section class="section">
-    <div class="container">
-      <h1 class="title">
-        Hello World
-      </h1>
-      <p class="subtitle">
-        My first website with <strong>Bulma</strong>!
-      </p>
-    </div>
-  </section>
+  .discord-bg {
+    background-color: #7289da;
+    border: none;
+  }
+</style>
 
-<a class="button is-primary">
-  Button
-</a>
+<svelte:head>
+  <title>Sapper project template</title>
+</svelte:head>
+<div class="content">
+  <div id="login-box" class="columns">
+    <div id="login-form" class="column is-offset-4 is-4 has-background-black">
+      <h1 class="has-text-centered">NoctBot panel</h1>
+      <div class="columns is-mobile is-centered">
+        <div class="column is-narrow">
+          <a class="button discord-bg" href="/login/discord/do">
+            <span class="icon">
+              <i class="fab fa-discord" />
+            </span>
+            <span>Login with Discord</span>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

web/src/routes/login/discord/callback.ts

@@ -0,0 +1,24 @@
+import { Request, Response, NextFunction } from "express";
+import request from "request-promise-native";
+import { Response as Res } from "request";
+
+export async function get(req : Request, res : Response, next: NextFunction) {
+    const CALLBACK_URL = encodeURIComponent(`${process.env.ADMIN_URL}/login/discord/callback`);
+
+    if(!req.query.code)
+        throw new Error("NoCodeProvided");
+
+    let code = req.query.code;
+    let response = await request(`https://discordapp.com/api/oauth2/token?grant_type=authorization_code&code=${code}&redirect_uri=${CALLBACK_URL}`, {
+        method: "POST",
+        auth: {
+            user: process.env.BOT_CLIENT_ID,
+            pass: process.env.BOT_CLIENT_SECRET,
+            sendImmediately: true
+        },
+        resolveWithFullResponse: true
+    }) as Res;
+
+    //TODO: Saving the tokens with horses and stuff
+    console.log(response.toJSON());
+};

web/src/routes/login/discord/do.ts

@@ -0,0 +1,8 @@
+import {Request, Response, NextFunction } from "express";
+
+export async function get(req : Request, res : Response, next : NextFunction) {
+    const CALLBACK_URL = encodeURIComponent(`${process.env.ADMIN_URL}/login/discord/callback`);
+    const SCOPE = encodeURIComponent("identify guilds");
+
+    res.redirect(`https://discordapp.com/api/oauth2/authorize?client_id=${process.env.BOT_CLIENT_ID}&scope=${SCOPE}&response_type=code&redirect_uri=${CALLBACK_URL}`);
+};

web/static/global.css

@@ -1,36 +0,0 @@
-body {
-	margin: 0;
-	font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-	font-size: 14px;
-	line-height: 1.5;
-	color: #333;
-}
-
-h1, h2, h3, h4, h5, h6 {
-	margin: 0 0 0.5em 0;
-	font-weight: 400;
-	line-height: 1.2;
-}
-
-h1 {
-	font-size: 2em;
-}
-
-a {
-	color: inherit;
-}
-
-code {
-	font-family: menlo, inconsolata, monospace;
-	font-size: calc(1em - 2px);
-	color: #555;
-	background-color: #f0f0f0;
-	padding: 0.2em 0.4em;
-	border-radius: 2px;
-}
-
-@media (min-width: 400px) {
-	body {
-		font-size: 16px;
-	}
-}