feat: support for postgres + new login/registration webform style(#22)

authcompanion · Apr 3, 2024 · acced69 · acced69
1 parent e621f4e
commit acced69
Show file tree

Hide file tree

Showing 71 changed files with 3,244 additions and 4,320 deletions.
diff --git a/.github/public/admin_dashboard.png b/.github/public/admin_dashboard.png
diff --git a/.github/public/login.png b/.github/public/login.png
diff --git a/.github/public/register.png b/.github/public/register.png
diff --git a/README.md b/README.md
@@ -17,7 +17,7 @@
      <img alt="GitHub stars" src="https://img.shields.io/github/stars/authcompanion/authcompanion2">
    </a>
    <a href="https://nodejs.org/en/">
-     <img src="https://img.shields.io/badge/node-v18.13.0-green?logo=node.js"/>
+     <img src="https://img.shields.io/badge/node-v20.11.0-green?logo=node.js"/>
    </a>
       <a href="https://github.com/authcompanion/authcompanion2/tags">
      <img src="https://img.shields.io/github/v/release/authcompanion/authcompanion2?color=purple&include_prereleases&style=flat-square"/>
@@ -31,8 +31,9 @@
 ---
 
 ## Hot topics
-- A Refresh of the Admin Dashboard Design - [#21](https://github.com/authcompanion/authcompanion2/pull/21) [Done]
 
+- New Support for Postgres + New Login & Registration Web Form Style - [#22](https://github.com/authcompanion/authcompanion2/pull/22) [Done]
+- A Refresh of the Admin Dashboard Design - [#21](https://github.com/authcompanion/authcompanion2/pull/21) [Done]
 
 ## Introduction
 

diff --git a/app.js b/app.js
@@ -2,39 +2,33 @@ import Fastify from "fastify";
 import authRoutes from "./routes/auth.routes.js";
 import adminRoutes from "./routes/admin.routes.js";
 import webRoutes from "./routes/ui.routes.js";
-import sqlite3 from "./plugins/db/db.js";
-import serverkey from "./plugins/key/server.key.js";
-import adminkey from "./plugins/key/admin.key.js";
+import dbPlugin from "./db/db.js";
+import serverkey from "./key/server.key.js";
+import adminkey from "./key/admin.key.js";
 import pkg from "./package.json" assert { type: "json" };
 
 const appVersion = pkg.version;
 
-const buildApp = async (serverOptions) => {
+export const buildApp = async (serverOptions) => {
   const app = Fastify(serverOptions);
-
   try {
-    // Register the default authc plugins and routes
+    //Register the default authc plugins and routes
     await app
-      .register(sqlite3)
+      .register(dbPlugin)
       .register(serverkey)
       .register(adminkey)
       .register(adminRoutes, { prefix: "/v1/admin" })
       .register(authRoutes, { prefix: "/v1/auth" })
       .register(webRoutes, { prefix: "/v1/web" })
       .register(async (fastify, opts) => {
         fastify.get("/", async (req, reply) => {
-          return `Welcome and hello 👋 - AuthCompanion is serving requests!      
+          return `Welcome and hello 👋 - AuthCompanion is serving requests!
           Version: ${appVersion}`;
         });
       });
-
     await app.ready();
-
     return app;
   } catch (err) {
-    console.log("Error building the app:", err);
-    throw err; // Rethrow the error to indicate app initialization failure
+    throw err;
   }
 };
-
-export default buildApp;
diff --git a/client/admin/dashboardPage.html b/client/admin/dashboardPage.html
@@ -4,9 +4,9 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>Admin Dashboard</title>
-    <!-- CSS files -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/core@1.0.0-beta20/dist/css/tabler.min.css" />
+    <title>Admin Panel</title>
+    <!-- <script src="https://cdn.jsdelivr.net/npm/@tabler/core@1.0.0-beta20/dist/js/tabler.min.js"></script> -->
+    <link href="https://cdn.jsdelivr.net/npm/@tabler/core@1.0.0-beta20/dist/css/tabler.min.css" rel="stylesheet" />
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/core@1.0.0-beta20/dist/css/demo.min.css" />
 
     <style>
@@ -25,6 +25,7 @@
   </head>
   <body id="app">
     <script src="https://cdn.jsdelivr.net/npm/@tabler/core@1.0.0-beta20/dist/js/demo-theme.js"></script>
+
     <div class="page">
       <!-- Navbar -->
       <header class="navbar navbar-expand-md d-print-none">
@@ -200,12 +201,13 @@ <h3 class="card-title">Last updates</h3>
                 </div>
               </a>
               <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
+                <p class="dropdown-item" @click="logout()">logout</p>
                 <!-- <a href="#" class="dropdown-item">Status</a>
                 <a href="./profile.html" class="dropdown-item">Profile</a>
                 <a href="#" class="dropdown-item">Feedback</a>
                 <div class="dropdown-divider"></div>
                 <a href="./settings.html" class="dropdown-item">Settings</a> -->
-                <a href="" class="dropdown-item" @click="logout()">Logout</a>
+                <!-- <a href="./login" class="dropdown-item" @click="logout()">Logout</a> -->
               </div>
             </div>
           </div>
@@ -249,7 +251,7 @@ <h3 class="card-title">Last updates</h3>
             <div class="row g-2 align-items-center">
               <div class="col">
                 <!-- Page pre-title -->
-                <div class="page-pretitle">Admin Dashboard</div>
+                <div class="page-pretitle">Admin Panel</div>
                 <h2 class="page-title">User Management</h2>
               </div>
               <!-- Page title actions -->
@@ -336,6 +338,7 @@ <h3 class="card-title">Accounts</h3>
                           <th>Name</th>
                           <th>Email</th>
                           <th>Status</th>
+                          <th>Admin</th>
                           <th>Created At</th>
                           <th>Updated At</th>
 
@@ -347,7 +350,8 @@ <h3 class="card-title">Accounts</h3>
                           <td class="">{{ user.id }}</td>
                           <td class="text-muted">{{ user.attributes.name }}</td>
                           <td class="text-muted">{{ user.attributes.email }}</td>
-                          <td class="text-muted">{{ user.attributes.active == 1 ? 'Activated' : 'Deactivated' }}</td>
+                          <td class="text-muted">{{ user.attributes.active == 1 ? 'Active' : 'Deactive' }}</td>
+                          <td class="text-muted">{{ user.attributes.isAdmin == 1 ? 'Yes' : 'No' }}</td>
                           <td class="text-muted">{{ user.attributes.created }}</td>
                           <td class="text-muted">{{ user.attributes.updated }}</td>
                           <td class="text-muted">
@@ -563,6 +567,18 @@ <h5 class="modal-title">{{ showEditPanel ? 'Update User Account' : 'New User Acc
                   <option value="0">Deactivated</option>
                 </select>
               </div>
+              <div class="mb-3">
+                <div class="form-label">Admin</div>
+                <select
+                  class="form-select"
+                  @input="event => userRecord.data.attributes.isAdmin = event.target.value"
+                  :value="showEditPanel ? selectedUser.attributes.isAdmin : ''"
+                >
+                  <option selected>Choose Status</option>
+                  <option value="1">Yes</option>
+                  <option value="0">No</option>
+                </select>
+              </div>
               <div v-if="showEditPanel" class="mb-3">
                 <label class="form-label">Created At</label>
                 <input
@@ -740,22 +756,26 @@ <h5 class="modal-title">{{ showEditPanel ? 'Update User Account' : 'New User Acc
           // Function to logout the user, remove the token from cookies and redirect to the login page
           const logout = async () => {
             try {
-              let response = await fetch(`/v1/admin/logout`, {
+              let response = await fetch(`/v1/admin/logout/${claims.userid}`, {
                 method: "DELETE",
                 headers: {
                   "Content-type": "application/json",
+                  Authorization: `Bearer ${token}`,
                 },
               });
-              const data = await response.json();
+
+              if (response.ok) {
+                // Response status is within the range 200-299, indicating success
+                localStorage.removeItem("ACCESS_TOKEN");
+                window.location.href = "/v1/admin/login";
+              }
 
               // if the response is not ok, throw an error
               if (!response.ok) {
                 showNotificationMessage(data.message, true);
                 return;
               }
               // remove the token from the local storage
-              localStorage.removeItem("ACCESS_TOKEN");
-              window.location.href = "/v1/admin/login";
             } catch (e) {
               console.log("Logout User Failed");
               console.log(e);