Main UI

open-domains · Mar 15, 2024 · bbc72aa · bbc72aa
1 parent 46f5121
commit bbc72aa
Show file tree

Hide file tree

Showing 8 changed files with 261 additions and 54 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -0,0 +1,42 @@
+name: Docker
+
+on:
+    push: {}
+    workflow_dispatch: {}
+
+env:
+    REGISTRY: ghcr.io
+    IMAGE_NAME: ${{ github.repository }}
+
+jobs:
+    build-and-push:
+        name: Build and Push
+        runs-on: ubuntu-latest
+
+        permissions:
+            contents: read
+            packages: write
+
+        steps:
+            - uses: actions/checkout@v3
+
+            - name: Registry Login
+              uses: docker/login-action@65b78e6e13532edd9afa3aa52ac7964289d1a9c1
+              with:
+                  registry: ${{ env.REGISTRY }}
+                  username: ${{ github.actor }}
+                  password: ${{ secrets.GITHUB_TOKEN }}
+
+            - name: Extract Metadata
+              id: meta
+              uses: docker/metadata-action@9ec57ed1fcdbf14dcef7dfbe97b2010124a938b7
+              with:
+                  images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+
+            - name: Build and Push Image
+              uses: docker/build-push-action@f2a1d5e99d037542a71f64918e516c093c6f3fc4
+              with:
+                  context: .
+                  push: true
+                  tags: ${{ steps.meta.outputs.tags }}
+                  labels: ${{ steps.meta.outputs.labels }}
diff --git a/Dockerfile b/Dockerfile
@@ -0,0 +1,22 @@
+FROM node:latest
+
+# Create the directory!
+RUN mkdir -p /usr/src/bot
+WORKDIR /usr/src/bot
+
+# Copy and Install our bot
+COPY package.json /usr/src/bot
+RUN npm install
+
+# For Debugging
+#RUN apt-get update && apt-get install -y \
+#    nano \
+#    curl \
+#    git \
+#    && rm -rf /var/lib/apt/lists/*
+
+# Our precious bot
+COPY . /usr/src/bot
+
+# Start me!
+CMD ["node", "."]
diff --git a/routes/domains.js b/routes/domains.js
@@ -10,6 +10,7 @@ module.exports = async (req, res) => {
         },
     });
     data = await data.json();
+    console.log(user)
     res.render("domain", {user: user, domains: data})
 }
 
diff --git a/routes/login.js b/routes/login.js
@@ -1,3 +1,25 @@
-module.exports = (req, res) => {
-    res.render("login");
+module.exports = async (req, res) => {
+    const username = req.body.username;
+    const password = req.body.password;
+
+    if (!username || !password) {
+        return res.render("login", { message: "Missing username or password." });
+    }
+    const data = {
+        "username": username,
+        "password": password,
+    };
+    const response = await fetch("https://api.open-domains.net/login", {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify(data),
+    });
+    const authd = await response.json();
+    if (authd.message) {
+        return res.render("login", { message: authd.message });
+    }
+    res.cookie("token", authd.accessToken, { httpsOnly: true });
+    return res.redirect("/domains");
 }
diff --git a/util/jwt.js b/util/jwt.js
@@ -19,7 +19,9 @@ async function authenticateToken(req, res, next) {
     if (response.status !== 200) {
         return res.sendStatus(403); // Forbidden if token is invalid
     } else {
-        const user = await response.json();
+        let user = await response.json();
+        // make the first letter of the username uppercase
+        user.username = user.username.charAt(0).toUpperCase() + user.username.slice(1);
         req.user = user;
         next();
     }

diff --git a/util/router.js b/util/router.js
@@ -20,7 +20,11 @@ router.get("/profile", authenticateToken, (req, res) => {
 
 
 router.get("/login", (req, res) => {
-    res.render("login");
+    res.render("login", { message: '' });
+});
+
+router.post("/login", upload.any(), (req, res) => {
+    routes.login(req, res);
 });
 
 router.get("/register", (req, res) => {

diff --git a/views/domain.ejs b/views/domain.ejs
@@ -1,54 +1,164 @@
-<!DOCTYPE html>
-<html lang="en">
+<!--
+  This example requires updating your template:
+
+  ```
+  <html class="h-full bg-gray-100">
+  <body class="h-full">
+  ```
+-->
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>User Profile</title>
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
-</head>
-<body class="bg-gray-100">
-
-<div class="container mx-auto px-4 py-8">
-    <img src="https:<%= user.gravatar %>" alt="Profile Picture" class="w-16 h-16 rounded-full absolute top-4 right-4">
-
-    <div class="max-w-lg mx-auto bg-white rounded-lg overflow-hidden shadow-md">
 
-        <div class="p-4">
-            <h1 class="text-2xl font-bold mb-2">Hello <%= user.username %></h1>
-
-            <!-- Domain List -->
-            <div class="mt-8">
-                <h2 class="text-xl font-bold mb-4">Domain List</h2>
-                <% if (domains.length === 0) { %>
-                    <p class="text-gray-600">You have no domains.</p>
-                <% } else { %>
-                    <table class="w-full border-collapse border border-gray-300">
-                        <thead>
-                            <tr>
-                                <th class="py-2 px-4 bg-gray-200 text-left">Domain Name</th>
-                                <th class="py-2 px-4 bg-gray-200 text-left">Status</th>
-                                <th class="py-2 px-4 bg-gray-200"></th> <!-- Empty header for Edit button -->
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <% domains.forEach(domain => { %>
-                                <tr>
-                                    <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>
-                                    </td>
-                                </tr>
-                            <% }) %>
-                        </tbody>
-                    </table>
+</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="#" 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="#" 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" role="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="#" 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>
-
-</div>
-
-</body>
-</html>
+      </div>
+
+      <!-- Mobile menu, show/hide based on menu state. -->
+      <div class="md: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="#" 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="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="#" 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>
+          </div>
+        </div>
+      </div>
+    </nav>
+
+    <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>
+      </div>
+    </header>
+    <main>
+      <div class="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8">
+        <!-- Your content -->
+        <div class="mt-8">
+          <h2 class="text-xl font-bold mb-4">Domain List</h2>
+          <% if (domains.length === 0) { %>
+              <p class="text-gray-600">You have no domains.</p>
+          <% } else { %>
+              <table class="w-full border-collapse border border-gray-300">
+                  <thead>
+                      <tr>
+                          <th class="py-2 px-4 bg-gray-200 text-left">Domain Name</th>
+                          <th class="py-2 px-4 bg-gray-200 text-left">Status</th>
+                          <th class="py-2 px-4 bg-gray-200"></th> <!-- Empty header for Edit button -->
+                      </tr>
+                  </thead>
+                  <tbody>
+                      <% domains.forEach(domain => { %>
+                          <tr>
+                              <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>
+                              </td>
+                          </tr>
+                      <% }) %>
+                  </tbody>
+              </table>
+          <% } %>
+      </div>
+      </div>
+    </main>
+  </div>
+
diff --git a/views/login.ejs b/views/login.ejs
@@ -33,9 +33,13 @@
     <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> Login</h1>
 
-        <% if (message.length > 0) { %>
-            <div class="alert alert-info"><%= message %></div>
+        <% 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="/login/" method="post">