Banging head against a wall

backend/.dockerignore

@@ -0,0 +1,6 @@
+node_modules/
+.git/
+.gitignore
+.npm/
+*.log
+*.env

backend/.env

@@ -2,4 +2,4 @@ MONGODB_URI='mongodb://localhost:27017'
 MONGODB_NAME='docucenter'
 NODE_ENV='development' #If set to production it will require https to function
 JWT_SECRET='IjkAORBx^cLYpSb6Btz@te&vAJ3Pt*$z'
-
+FRONTEND_URL='http://localhost:3001'

backend/server.js

@@ -9,13 +9,16 @@ const documentRoutes = require('./src/routes/documentRoutes');
 
 const app = express();
 
+const corsUrl = process.env.FRONTEND_URL;
+
 app.use(express.urlencoded({ extended: true })); // Parses form data
 app.use(express.json()); // Parses JSON data
 
 // Configure CORS to allow specific origins
 const allowedOrigins = [
   'https://docucenter.mpe.ca', // Production frontend
-  'http://localhost:5173',    // Development frontend
+  'http://localhost:5173', 
+  corsUrl   // Development frontend
 ];
 
 const corsOptions = {

backend/src/utils/database.js

@@ -1,6 +1,7 @@
 const mongoose = require('mongoose');
 
 const connectDB = async () => {
+  console.log("Trying to connect to " + process.env.MONGODB_URI);
   try {
     await mongoose.connect(process.env.MONGODB_URI+'/'+ process.env.MONGODB_NAME, {
       useNewUrlParser: true,

frontend/package-lock.json

@@ -26,6 +26,7 @@
         "@tiptap/pm": "^2.10.3",
         "@tiptap/starter-kit": "^2.10.3",
         "dotenv": "^16.4.7",
+        "dotenv-flow": "^4.1.0",
         "tippy.js": "^6.3.7"
       },
       "devDependencies": {
@@ -2058,6 +2059,17 @@
         "url": "https://dotenvx.com"
       }
     },
+    "node_modules/dotenv-flow": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/dotenv-flow/-/dotenv-flow-4.1.0.tgz",
+      "integrity": "sha512-0cwP9jpQBQfyHwvE0cRhraZMkdV45TQedA8AAUZMsFzvmLcQyc1HPv+oX0OOYwLFjIlvgVepQ+WuQHbqDaHJZg==",
+      "dependencies": {
+        "dotenv": "^16.0.0"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      }
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",

frontend/package.json

@@ -52,6 +52,7 @@
     "@tiptap/pm": "^2.10.3",
     "@tiptap/starter-kit": "^2.10.3",
     "dotenv": "^16.4.7",
+    "dotenv-flow": "^4.1.0",
     "tippy.js": "^6.3.7"
   }
 }

frontend/src/mpe_theme.ts

@@ -26,7 +26,7 @@ export const mpe_theme: CustomThemeConfig = {
 		"--color-primary-200": "195 238 224", // #c3eee0
 		"--color-primary-300": "159 227 205", // #9fe3cd
 		"--color-primary-400": "87 207 167", // #57cfa7
-		"--color-primary-500": "15 186 129", // #0FBA81
+		"--color-primary-500": "36 88 164", // #0FBA81
 		"--color-primary-600": "14 167 116", // #0ea774
 		"--color-primary-700": "11 140 97", // #0b8c61
 		"--color-primary-800": "9 112 77", // #09704d
@@ -88,7 +88,7 @@ export const mpe_theme: CustomThemeConfig = {
 		"--color-error-900": "104 12 58", // #680c3a
 		// surface | #495a8f 
 		"--color-surface-50": "228 230 238", // #e4e6ee
-		"--color-surface-100": "219 222 233", // #dbdee9
+		"--color-surface-100": "36 88 164", // #dbdee9
 		"--color-surface-200": "210 214 227", // #d2d6e3
 		"--color-surface-300": "182 189 210", // #b6bdd2
 		"--color-surface-400": "128 140 177", // #808cb1

frontend/src/routes/+layout.svelte

@@ -37,24 +37,28 @@
 
 		{#if dropDown}
 		<!-- Dropdown menu -->
-		<div class="absolute right-0 mt-2 bg-white shadow-lg rounded-md p-4 z-50 text-nowrap">
+		<div class="absolute right-0 mt-2 bg-white shadow-lg rounded-md z-50 text-nowrap">
 			{#if $page.data.user.name}
-				<span class="signedInText block mb-2 text-sm">
+				<span class="signedInText block mb-2 text-sm pl-2 pr-2 pt-2">
 					<small>Signed in as</small><br/>
-					<b>{$page.data.user.name}</b>
+					<b>{$page.data.user.name}</b><br>
 				</span>
-				
+				<a href="/settings" class="font-roboto w-full text-lg">
-				<form action="/logout" method="POST">
+					<button class="w-full hover:bg-slate-200 pt-2 pb-2">Settings</button>
+				</a><br>
+				<form action="/logout" method="POST" class="w-full p-3">
 					<button class="bg-blue-500 text-white px-4 py-2 rounded-3xl hover:bg-blue-400 text-nowrap w-full">Sign Out</button>
 				</form>
 			{:else}
-                <a href="/login" on:click={() => {dropDown = false;}}>
+			<div class="w-full p-2"> 
+				<a href="/login" on:click={() => {dropDown = false;}}>
                     <button 
                         class="bg-blue-500 text-white px-4 py-2 rounded-3xl hover:bg-blue-400 text-nowrap w-full"
                         >
                         Sign In
                     </button>
                 </a>
+			</div>
 			{/if}
 		</div>
 		{/if}

frontend/src/routes/edit/+page.svelte

@@ -55,7 +55,6 @@
         const urlParams = new URLSearchParams(window.location.search);
         const id = urlParams.get('id'); // Get the `id` from the query string
         const url = `${PUBLIC_BASE_URL}/api/document/`+id;
-        console.log("Title value:", title);
 
         const edited_by = $page.data.user?.name;
         const token = $page.data.user?.token;

frontend/src/routes/home/+page.svelte

@@ -1,7 +1,9 @@
 <script>
   import { onMount } from 'svelte';
   import { page } from "$app/stores"
-  import { PUBLIC_BASE_URL } from '$env/static/public';
+  //import { PUBLIC_BASE_URL } from '$env/static/public';
+  //import { PUBLIC_BASE_URL } from '$env/dynamic/private'
+
 
   let query = false;
   let searchQuery = "";
@@ -24,7 +26,7 @@
   // Function to simulate search API call
   async function searchDocuments(query) {
     try {
-      const res = await fetch(`${PUBLIC_BASE_URL}/api/document/search?query=${query}`);
+      const res = await fetch(`http://localhost:3010/api/document/search?query=${query}`);
       const data = await res.json();
 
       if (data.length > 0) {
@@ -41,7 +43,7 @@
   // Function to fetch all documents from the API
   async function getAllDocuments() {
     try {
-      const res = await fetch(`${PUBLIC_BASE_URL}/api/document`);
+      const res = await fetch(`http://localhost:3010/api/document`);
       
       if (!res.ok) {
         throw new Error(`Failed to fetch documents: ${res.statusText}`);
@@ -55,8 +57,6 @@
     }
   }
 
-
-  
     // Function to truncate the body text to 100 words
     function truncateBody(body) {
       const words = body.split(' ');
@@ -69,7 +69,6 @@
   // Fetch all documents on component mount
   onMount(async () => {
     documents = await getAllDocuments();
-    console.log("Fetched documents:", documents);
   });
 
   let message = "Hello";