Bug fixes and start work on edit page

open-domains · Apr 3, 2024 · 16d538b · 16d538b
1 parent eda9c1e
commit 16d538b
Show file tree

Hide file tree

Showing 6 changed files with 223 additions and 9 deletions.
diff --git a/routes/domains.js b/routes/domains.js
@@ -1,7 +1,10 @@
+const e = require("express");
+
 const ENDPOINT = process.env.ENDPOINT;
 module.exports = async (req, res) => {
     const user = req.user;
     const token = req.cookies.token;
+    const code = req.query.code;
     let data = await fetch(ENDPOINT + `/domains` , {
         method: 'GET',
         headers: {
@@ -10,6 +13,24 @@ module.exports = async (req, res) => {
         },
     });
     data = await data.json();
-    res.render("domain", {user: user, domains: data})
+
+    if (code){
+        if (code == 1){
+            return res.render("domain", {user: user, domains: data, message: "System error, please try again later"});
+        }
+        if (code == 2){
+            return res.render("domain", {user: user, domains: data, message: "Domain not found"});
+        }
+        if (code == 3){
+            return res.render("domain", {user: user, domains: data, message: "Domain already exists"});
+        }
+        if (code == 4){
+            return res.render("domain", {user: user, domains: data, message: "You do not have permission to edit this domain"});
+        }
+    } else {
+        return res.render("domain", {user: user, domains: data, message: ""});
+    }
+
+
 }
 
diff --git a/routes/edit.js b/routes/edit.js
@@ -0,0 +1,25 @@
+const ENDPOINT = process.env.ENDPOINT;
+module.exports = async (req, res) => {
+    const domain = req.query.domain;
+    const user = req.user;
+    const token = req.cookies.token;
+    let data = await fetch(ENDPOINT + `/domains` , {
+        method: 'GET',
+        headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `${token}`
+        },
+    });
+    data = await data.json();
+    // check if user is the owner of the domain
+    let owner = false;
+    for (let i = 0; i < data.length; i++){
+        if (data[i]._id == domain){
+            owner = true;
+        }
+    }
+    if (!owner){
+        return res.redirect("/domains?code=4");
+    }
+    res.render("edit", {user: user, domain: domain, message: ""});
+}
diff --git a/util/router.js b/util/router.js
@@ -63,5 +63,9 @@ router.post("/password", authenticateToken, upload.any(), (req, res) => {
     routes.password(req, res);
 });
 
+router.get("/edit/", authenticateToken, (req, res) => {
+    routes.edit(req, res);
+});
+
 
 module.exports = router;
diff --git a/util/routes.js b/util/routes.js
@@ -8,6 +8,7 @@ const logout = require("../routes/logout");
 const staff = require("../routes/staff");
 const mfa = require("../routes/mfa");
 const password = require("../routes/password");
+const edit = require("../routes/edit");
 
 
 module.exports = {
@@ -20,5 +21,6 @@ module.exports = {
     logout,
     staff,
     mfa,
-    password
+    password,
+    edit
 }
diff --git a/views/domain.ejs b/views/domain.ejs
@@ -59,8 +59,7 @@
                 -->
                 <div class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none hidden" role="menu" id="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
                   <!-- 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="/settings/" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</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>
@@ -90,7 +89,7 @@
           <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
           <a href="#" class="bg-gray-900 text-white block rounded-md px-3 py-2 text-base font-medium" aria-current="page">My domains</a>
           <% if (user.staffMember) { %>
-              <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium">Staff</a>
+              <a href="/staff/" class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium">Staff</a>
           <% } %>    
           <a href="https://www.buymeacoffee.com/andrewstech" class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium">Donate</a>
         </div>
@@ -112,14 +111,19 @@
             </button>
           </div>
           <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="/settings/" 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="/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>
     </nav>
-
+
+    <% 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>
+    <% } %>
     <header class="bg-white shadow">
       <div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
         <h1 class="text-3xl font-bold tracking-tight text-gray-900">Hello <%= user.username %></h1>
@@ -147,7 +151,7 @@
                               <td class="py-2 px-4 border border-gray-300"><%= domain._id %></td>
                               <td class="py-2 px-4 border border-gray-300"><%= domain.status %></td>
                               <td class="py-2 px-4 border border-gray-300">
-                                  <a href="/edit/<%= domain._id %>/" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded focus:outline-none focus:shadow-outline">Edit</a>
+                                  <a href="/edit?domain=<%= domain._id %>" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded focus:outline-none focus:shadow-outline">Edit</a>
                               </td>
                           </tr>
                       <% }) %>

diff --git a/views/edit.ejs b/views/edit.ejs
@@ -0,0 +1,158 @@
+<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" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+
+</head>
+<div class="min-h-full">
+    <nav class="bg-gray-800">
+      <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div class="flex h-16 items-center justify-between">
+          <div class="flex items-center">
+            <div class="flex-shrink-0">
+              <img class="h-8 w-8" src="https://raw.githubusercontent.com/open-domains/open-domains.github.io/main/assets/logo.png" alt="Open Domains">
+            </div>
+            <div class="hidden md:block">
+              <div class="ml-10 flex items-baseline space-x-4">
+                <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
+                <a href="/domains/" class="bg-gray-900 text-white rounded-md px-3 py-2 text-sm font-medium" aria-current="page">My Domains</a>
+                <% if (user.staffMember) { %>
+                  <a href="/staff/" class="text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium">Staff</a>
+                <% } %>
+                <a href="https://www.buymeacoffee.com/andrewstech" class="text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium">Donate</a>
+
+              </div>
+            </div>
+          </div>
+          <div class="hidden md:block">
+            <div class="ml-4 flex items-center md:ml-6">
+              <button type="button" class="relative rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
+                <span class="absolute -inset-1.5"></span>
+                <span class="sr-only">View notifications</span>
+                <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
+                </svg>
+              </button>
+
+              <!-- Profile dropdown -->
+              <div class="relative ml-3">
+                <div>
+                  <button type="button" class="relative flex max-w-xs items-center rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
+                    <span class="absolute -inset-1.5"></span>
+                    <span class="sr-only">Open user menu</span>
+                    <img class="h-8 w-8 rounded-full" src="https:<%= user.gravatar %>" alt="">
+                  </button>
+                </div>
+
+                <!--
+                  Dropdown menu, show/hide based on menu state.
+  
+                  Entering: "transition ease-out duration-100"
+                    From: "transform opacity-0 scale-95"
+                    To: "transform opacity-100 scale-100"
+                  Leaving: "transition ease-in duration-75"
+                    From: "transform opacity-100 scale-100"
+                    To: "transform opacity-0 scale-95"
+                -->
+                <div class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none hidden" role="menu" id="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
+                  <!-- Active: "bg-gray-100", Not Active: "" -->
+                  <a href="/settings/" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</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>
+          </div>
+          <div class="-mr-2 flex md:hidden">
+            <!-- Mobile menu button -->
+            <button type="button" class="relative inline-flex items-center justify-center rounded-md bg-gray-800 p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800" aria-controls="mobile-menu" aria-expanded="false">
+              <span class="absolute -inset-0.5"></span>
+              <span class="sr-only">Open main menu</span>
+              <!-- Menu open: "hidden", Menu closed: "block" -->
+              <svg class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+              </svg>
+              <!-- Menu open: "block", Menu closed: "hidden" -->
+              <svg class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Mobile menu, show/hide based on menu state. -->
+      <div class="md:hidden hidden" id="mobile-menu">
+        <div class="space-y-1 px-2 pb-3 pt-2 sm:px-3">
+          <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
+          <a href="/domains/" class="bg-gray-900 text-white block rounded-md px-3 py-2 text-base font-medium" aria-current="page">My domains</a>
+          <% if (user.staffMember) { %>
+              <a href="/staff/" class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium">Staff</a>
+          <% } %>    
+          <a href="https://www.buymeacoffee.com/andrewstech" class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-3 py-2 text-base font-medium">Donate</a>
+        </div>
+        <div class="border-t border-gray-700 pb-3 pt-4">
+          <div class="flex items-center px-5">
+            <div class="flex-shrink-0">
+              <img class="h-10 w-10 rounded-full" src="https:<%= user.gravatar %>" alt="">
+            </div>
+            <div class="ml-3">
+              <div class="text-base font-medium leading-none text-white"><%= user.username %></div>
+              <div class="text-sm font-medium leading-none text-gray-400"><%= user.email %></div>
+            </div>
+            <button type="button" class="relative ml-auto flex-shrink-0 rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
+              <span class="absolute -inset-1.5"></span>
+              <span class="sr-only">View notifications</span>
+              <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
+              </svg>
+            </button>
+          </div>
+          <div class="mt-3 space-y-1 px-2">
+            <a href="/settings/" 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="/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>
+    </nav>
+
+    <% 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>
+    <% } %>
+    <header class="bg-white shadow">
+      <div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
+        <h1 class="text-3xl font-bold tracking-tight text-gray-900">Editing <%= domain %></h1>
+      </div>
+    </header>
+    <main>
+      <div class="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8">
+        <!-- Your content -->
+
+
+      </div>
+    </main>
+  </div>
+  <script>
+    document.addEventListener('DOMContentLoaded', function() {
+      const menuButton = document.querySelector('[aria-controls="mobile-menu"]');
+      const mobileMenu = document.getElementById('mobile-menu');
+      const desktopMenuToggle = document.getElementById('user-menu-button');
+      const desktopMenu = document.getElementById('menu');
+  
+      menuButton.addEventListener('click', function() {
+        const isOpen = mobileMenu.classList.contains('hidden');
+        mobileMenu.classList.toggle('hidden', !isOpen);
+        menuButton.setAttribute('aria-expanded', !isOpen);
+      });
+
+      desktopMenuToggle.addEventListener('click', function() {
+        const isOpen = desktopMenu.classList.contains('hidden');
+        desktopMenu.classList.toggle('hidden', !isOpen);
+      });
+    });
+  </script>