register route

index.js

@@ -9,11 +9,14 @@ const cookieParser = require("cookie-parser");
 const cors = require("cors");
 const ejs = require("ejs");
 const multer = require('multer');
+const path = require("path");
 
 const port = process.env.PORT || 3000;
 app.use(cookieParser());
 app.set("view engine", "ejs");
 
+app.use(express.static(path.join(__dirname, 'static')));
+
 Sentry.init({
     dsn: process.env.SENTRY_DSN,
     integrations: [

package.json

@@ -17,6 +17,7 @@
     "dotenv": "^16.4.5",
     "ejs": "^3.1.9",
     "express": "^4.18.3",
-    "multer": "^1.4.5-lts.1"
+    "multer": "^1.4.5-lts.1",
+    "path": "^0.12.7"
   }
 }

routes/login.js

@@ -4,7 +4,7 @@ module.exports = async (req, res) => {
     const redirect = req.query.redirect;
 
     if (!username || !password) {
-        return res.render("login", { message: "Missing username or password." });
+        return res.render("login", { message: "Missing username or password.", redirect });
     }
     const data = {
         "username": username,
@@ -19,7 +19,7 @@ module.exports = async (req, res) => {
     });
     const authd = await response.json();
     if (authd.message) {
-        return res.render("login", { message: authd.message });
+        return res.render("login", { message: authd.message, redirect });
     }
     res.cookie("token", authd.accessToken, { httpsOnly: true });
     if (redirect) {

routes/logout.js

@@ -0,0 +1,4 @@
+module.exports = async (req, res) => {
+    res.clearCookie("token");
+    res.redirect("/login");
+}

routes/register.js

@@ -1,3 +1,45 @@
-module.exports = (req, res) => {
-    res.render("register");
+module.exports = async (req, res) => {
+    const username = req.body.username;
+    const password = req.body.password;
+    const confirmPassword = req.body.cpassword;
+    const email = req.body.email;
+
+    if (!username || !password || !confirmPassword || !email) {
+        return res.render("register", { message: "Missing username, email, or password." });
+    }
+
+    if (password !== confirmPassword) {
+        return res.render("register", { message: "Passwords do not match." });
+    }
+
+    const data = {
+        "username": username,
+        "password": password,
+        "email": email,
+    };
+
+    const response = await fetch("https://api.open-domains.net/register", {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify(data),
+    });
+
+    if (response) {
+        if (response.status === 409) {
+            return res.render("register", { message: "Username or email already exists." });
+        }
+        if (response.status === 400) {
+            return res.render("register", { message: "Invalid username, password, or email." });
+        }
+        if (response.status === 500) {
+            return res.render("register", { message: "Internal server error." });
+        }
+        if (response.status === 200) {
+            return res.render("registered");
+        }
+    } else {
+        return res.render("register", { message: "Internal server error." });
+    }
 }

util/jwt.js

@@ -4,8 +4,6 @@ async function authenticateToken(req, res, next) {
     const token = req.cookies['token'];
 
     if (token == null) {
-        //redirect the user
-        // get the current url
         let redirect = req.originalUrl;
         return res.redirect(`/login?redirect=${redirect}`);
     }
@@ -20,7 +18,8 @@ async function authenticateToken(req, res, next) {
     });
 
     if (response.status !== 200) {
-        return res.sendStatus(403); // Forbidden if token is invalid
+        let redirect = req.originalUrl;
+        return res.redirect(`/login?redirect=${redirect}`);
     } else {
         let user = await response.json();
         // make the first letter of the username uppercase

util/router.js

@@ -28,7 +28,11 @@ router.post("/login", upload.any(), (req, res) => {
 });
 
 router.get("/register", (req, res) => {
-    res.render("register");
+    res.render("register", { message: "" });
+});
+
+router.post("/register", upload.any(), (req, res) => {
+    routes.register(req, res);
 });
 
 router.get("/domains", authenticateToken, (req, res) => {
@@ -39,5 +43,9 @@ router.get("/verify", (req, res) => {
     routes.verify(req, res);
 });
 
+router.get("/logout", (req, res) => {
+    routes.logout(req, res);
+});
+
 
 module.exports = router;

util/routes.js

@@ -4,6 +4,7 @@ const loginRedirect = require("../routes/loginRedirect");
 const register = require("../routes/register");
 const domain = require("../routes/domains");
 const verify = require("../routes/verify");
+const logout = require("../routes/logout");
 
 
 module.exports = {
@@ -12,5 +13,6 @@ module.exports = {
     loginRedirect,
     register,
     domain,
-    verify
+    verify,
+    logout
 }

views/404.ejs

@@ -9,7 +9,9 @@
     <title>404 - Page Not Found</title>
 
     <!-- Favicon -->
-    <link rel="shortcut icon" href="/assets/logo.png" type="image/x-icon">
+    <link rel="icon" 
+      type="image/png" 
+      href="/assets/logo.png" />
 
     <!-- Inline Styles -->
     <style>

views/domain.ejs

@@ -1,5 +1,8 @@
 <head>
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
+    <link rel="icon" 
+      type="image/png" 
+      href="/assets/logo.png" />
 
 </head>
 <div class="min-h-full">
@@ -56,7 +59,7 @@
                   <!-- Active: "bg-gray-100", Not Active: "" -->
                   <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
                   <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
-                  <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
+                  <a href="/logout/" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
                 </div>
               </div>
             </div>
@@ -109,7 +112,7 @@
           <div class="mt-3 space-y-1 px-2">
             <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-400 hover:bg-gray-700 hover:text-white">Your Profile</a>
             <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-400 hover:bg-gray-700 hover:text-white">Settings</a>
-            <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-400 hover:bg-gray-700 hover:text-white">Sign out</a>
+            <a href="/logout/" class="block rounded-md px-3 py-2 text-base font-medium text-gray-400 hover:bg-gray-700 hover:text-white">Sign out</a>
           </div>
         </div>
       </div>

views/index.ejs

@@ -23,7 +23,9 @@
         <meta name="theme-color" content="#111827">
 
         <!-- Favicon -->
-        <link rel="shortcut icon" href="/assets/logo.png" type="image/x-icon">
+        <link rel="icon" 
+      type="image/png" 
+      href="/assets/logo.png" />
 
         <!-- Scripts -->
         <script src="https://cdn.tailwindcss.com"></script>

views/login.ejs

@@ -6,6 +6,9 @@
     <title>Open-Domains Authentication</title>
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
     <script src="https://www.google.com/recaptcha/api.js" async defer></script>
+    <link rel="icon" 
+      type="image/png" 
+      href="/assets/logo.png" />
     <style>
         
 
@@ -55,7 +58,7 @@
                 <div class="g-recaptcha" data-sitekey="6LdvAnwpAAAAAEjOh8Kb_Zj3uDHkPgAyYoeR7rXt" required></div>
             </div>
 
-            <button type="submit" class="bg-yellow-500 text-white px-4 py-2 rounded-md focus:outline-none focus:shadow-outline">Login</button>
+            <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-md focus:outline-none focus:shadow-outline">Login</button>
         </form>
 
         <hr class="my-6">

views/register.ejs

@@ -6,6 +6,9 @@
     <title>Open-Domains Register</title>
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
     <script src="https://www.google.com/recaptcha/api.js" async defer></script>
+    <link rel="icon" 
+      type="image/png" 
+      href="/assets/logo.png" />
     <style>
         
 
@@ -33,25 +36,36 @@
     <div class="bg-white p-8 rounded-lg shadow-md w-full max-w-md">
         <h1 class="text-3xl mb-6 flex items-center justify-center"><span class="fa fa-sign-in mr-2"></span> Register</h1>
 
+        <% if (message && message.length > 0) { %>
+            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
+                <strong class="font-bold">Error!</strong>
+                <span class="block sm:inline"><%= message %></span>
+            </div>
+        <% } %>
+
         <!-- LOGIN FORM -->
         <form action="/register/" method="post">
             <div class="mb-4">
                 <label class="block text-gray-700 text-sm font-bold mb-2" for="username">Username</label>
                 <input type="text" id="username" name="username" class="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required>
             </div>
+            <div class="mb-4">
+                <label class="block text-gray-700 text-sm font-bold mb-2" for="email">email</label>
+                <input type="text" id="email" name="email" class="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required>
+            </div>
             <div class="mb-4">
                 <label class="block text-gray-700 text-sm font-bold mb-2" for="password">Password</label>
                 <input type="password" id="password" name="password" class="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required>
             </div>
             <div class="mb-4">
                 <label class="block text-gray-700 text-sm font-bold mb-2" for="password">Confirm Password</label>
-                <input type="password" id="cpassword" name="password" class="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required>
+                <input type="password" id="cpassword" name="cpassword" class="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required>
             </div>
             <div class="mb-4">
                 <div class="g-recaptcha" data-sitekey="6LdvAnwpAAAAAEjOh8Kb_Zj3uDHkPgAyYoeR7rXt" required></div>
             </div>
 
-            <button type="submit" class="bg-yellow-500 text-white px-4 py-2 rounded-md focus:outline-none focus:shadow-outline">Login</button>
+            <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-md focus:outline-none focus:shadow-outline">Register</button>
         </form>
 
         <hr class="my-6">

views/registered.ejs

@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Email Verification</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
+    <link rel="icon" 
+      type="image/png" 
+      href="/assets/logo.png" />
+</head>
+<body>
+<div class="min-h-screen bg-gray-900 flex justify-center items-center">
+    <div class="bg-white p-8 rounded-lg shadow-md w-full max-w-md text-center">
+            <h1 class="text-3xl mb-6 flex items-center justify-center">
+                <span class="fas fa-exclamation-triangle text-red-500 mr-2"></span> Registration Complete
+            </h1>
+
+            <p class="text-gray-700">Please Confirm your email by clicking the link we just sent you.</p>
+
+            <hr class="my-6">
+
+            <p class="text-gray-700">Want to <a href="/register/" class="text-blue-500">Register</a>?</p>
+    </div>
+</div>
+</body>
+</html>

views/verify.ejs

@@ -5,6 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Email Verification</title>
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
+    <link rel="icon" 
+      type="image/png" 
+      href="/assets/logo.png" />
 </head>
 <body>
 <div class="min-h-screen bg-gray-900 flex justify-center items-center">