dxw · danlivings-dxw · Jan 2, 2025
diff --git a/index.js b/index.js
@@ -13,6 +13,11 @@ nunjucks.configure({
 const httpServer = express();
 httpServer.use(handleWebhooks);
 
+httpServer.engine("njk", nunjucks.render);
+
+httpServer.set("views", "./views");
+httpServer.set("view engine", "njk");
+
 httpServer.get("/", (request, response) => {
   const db = new TowtruckDatabase();
   const persistedRepoData = db.getAllRepositories();
@@ -22,14 +27,16 @@ httpServer.get("/", (request, response) => {
 
   const { sortDirection, sortBy } = request.query;
 
-  const template = nunjucks.render("index.njk", {
+  return response.render("org-dashboard", {
     sortBy,
     sortDirection,
     ...reposForUi,
     repos: sortByType(reposForUi.repos, sortDirection, sortBy),
   });
+});
 
-  return response.end(template);
+httpServer.all("*path", (request, response) => {
+  return response.status(404).render("404", { url: request.path });
 });
 
 const PORT = process.env.PORT || 3000;

diff --git a/index.njk b/index.njk
diff --git a/views/404.njk b/views/404.njk
@@ -0,0 +1,11 @@
+{% extends "./_base.njk" %}
+
+{% block content %}
+<div class="bg-stone-50 dark:bg-stone-700 rounded-lg border-b-4 border-stone-200 dark:border-stone-900 p-12 space-y-4 m-auto mt-32">
+  <div class="text-center">The requested page <strong>{{ url }}</strong> could not be found.</div>
+  <hr />
+  <div class="text-center">
+    <a class="inline-block text-base text-sky-600 dark:text-sky-500 hover:underline" href="/">Return to the home page.</a>
+  </div>
+</div>
+{% endblock %}
diff --git a/views/_base.njk b/views/_base.njk
@@ -0,0 +1,30 @@
+{% import "./_macros.njk" as macros %}
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>Towtruck</title>
+    <meta name="description" content="" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="bg-stone-100 text-stone-800 dark:bg-stone-800 dark:text-stone-200">
+    <header class="bg-white dark:bg-stone-600">
+      <nav class="w-full flex items-baseline p-6 border-b-4 border-stone-200 dark:border-stone-900">
+        <h1 class="inline-block text-3xl"><a href="/" class="hover:underline">Towtruck</a></h1>
+        <div class="grow leading-9">&zwj;</div>
+        {% if loggedIn %}
+        <div class="leading-9"><a href="/logout" class="hover:underline">Logout</a></div>
+        {% endif %}
+      </nav>
+    </header>
+
+    <div class="container mx-auto flex flex-col mt-6 space-y-6">
+      {% block content %}
+      {% endblock %}
+    </div>
+  </body>
+</html>
diff --git a/macros.njk → views/_macros.njk b/macros.njk → views/_macros.njk
@@ -29,7 +29,7 @@
 
 
 
-<th class="py-2 pl-2" scope="col" aria-sort="{{ariaSort}}"><a href="/{{linkParams}}"> {{name}}
+<th class="py-2 pl-2" scope="col" aria-sort="{{ariaSort}}"><a href="{{linkParams}}"> {{name}}
 
     <span class="text-xs ml-1 whitespace-nowrap">
         {% if sortDirection === "asc" and sortingOnThisParam %}

diff --git a/views/index.njk b/views/index.njk
@@ -0,0 +1,26 @@
+{% extends "./_base.njk" %}
+
+{% block content %}
+<div class="bg-stone-50 dark:bg-stone-700 rounded-lg border-b-4 border-stone-200 dark:border-stone-900 space-y-4">
+  <h2 class="bg-white dark:bg-stone-600 rounded-t-lg border-b-2 border-stone-100 dark:border-stone-800 text-xl font-bold p-4">Organisations</h2>
+  {% if orgs.length %}
+  <p class="mx-4">
+    {% if orgs.length === 1 %}
+    There is <span class="font-bold">1</span> organisation
+    {% else %} 
+    There are <span class="font-bold">{{ orgs.length }}</span> organisations
+    {% endif %}
+    using Towtruck that you are a member of.
+  </p>
+  <ul class="mx-4 pb-4 space-y-2">
+    {% for org in orgs %}
+    <li><a class="inline-block text-base text-sky-600 dark:text-sky-500 hover:underline" href="/{{ org }}">{{ org }}</a></li>
+    {% endfor %}
+  </ul>
+  {% else %}
+  <p class="mx-4 pb-4">
+    You are not a member of any organisations that are using Towtruck.
+  </p>
+  {% endif %}
+</div>
+{% endblock %}
diff --git a/views/login.njk b/views/login.njk
@@ -0,0 +1,28 @@
+{% extends "./_base.njk" %}
+
+{% block content %}
+<div class="bg-stone-50 dark:bg-stone-700 rounded-lg border-b-4 border-stone-200 dark:border-stone-900 p-12 space-y-4 m-auto mt-32">
+  <div class="text-center">To use Towtruck, you must login.</div>
+  {% if loginMethods.github %}
+  <hr />
+  <div class="text-center">
+    <a href="/api/github/oauth/login" role="button" class="px-2 py-1 text-sm bg-stone-500 text-white rounded-lg">
+      <i class="align-[-1px] pr-1 bx bxl-github"></i>
+      Login with GitHub
+    </a>
+  </div>
+  {% endif %}
+  {% if loginMethods.usernamePassword %}
+  <hr />
+  <div class="text-center">
+    <form action="/login" method="post" class="space-y-2 m-auto">
+        <label for="username" class="block">Username</label>
+        <input type="text" id="username" class="block w-full px-2 py-1 text-sm border border-stone-500 rounded-lg">
+        <label for="password" class="block">Password</label>
+        <input type="password" id="password" class="block w-full px-2 py-1 text-sm border border-stone-500 rounded-lg">
+        <input type="submit" class="inline-block px-2 py-1 text-sm bg-stone-500 text-white rounded-lg" value="Login">
+    </form>
+  </div>
+  {% endif %}
+</div>
+{% endblock %}