Add authentication #17

Manually merged
Webmaster merged 225 commits from auth into main 2025-03-08 10:37:06 +00:00
3 changed files with 417 additions and 393 deletions
Showing only changes of commit 15660161a7 - Show all commits

View file

@ -221,10 +221,10 @@ import FilePreview from "./Officer_EventManagement/FilePreview";
</dialog> </dialog>
<script> <script>
import { Get } from "../pocketbase/Get"; import { Get } from "../../scripts/pocketbase/Get";
import { Authentication } from "../pocketbase/Authentication"; import { Authentication } from "../../scripts/pocketbase/Authentication";
import { Update } from "../pocketbase/Update"; import { Update } from "../../scripts/pocketbase/Update";
import { SendLog } from "../pocketbase/SendLog"; import { SendLog } from "../../scripts/pocketbase/SendLog";
import JSZip from "jszip"; import JSZip from "jszip";
// Toast management system // Toast management system

View file

@ -723,11 +723,11 @@ const currentPage = eventResponse.page;
</dialog> </dialog>
<script> <script>
import { Get } from "../pocketbase/Get"; import { Get } from "../../scripts/pocketbase/Get";
import { Authentication } from "../pocketbase/Authentication"; import { Authentication } from "../../scripts/pocketbase/Authentication";
import { Update } from "../pocketbase/Update"; import { Update } from "../../scripts/pocketbase/Update";
import { FileManager } from "../pocketbase/FileManager"; import { FileManager } from "../../scripts/pocketbase/FileManager";
import { SendLog } from "../pocketbase/SendLog"; import { SendLog } from "../../scripts/pocketbase/SendLog";
import FilePreview from "./Officer_EventManagement/FilePreview"; import FilePreview from "./Officer_EventManagement/FilePreview";
// Add file storage // Add file storage

View file

@ -35,7 +35,10 @@ const title = "Dashboard";
<!-- User Profile --> <!-- User Profile -->
<div class="p-6 border-b border-base-200"> <div class="p-6 border-b border-base-200">
<div class="flex items-center gap-4" id="userProfileSummary"> <div
class="flex items-center gap-4"
id="userProfileSummary"
>
<div class="avatar flex items-center justify-center"> <div class="avatar flex items-center justify-center">
<div <div
class="w-12 h-12 rounded-xl bg-[#06659d] text-white ring ring-base-200 ring-offset-base-100 ring-offset-2 inline-flex items-center justify-center" class="w-12 h-12 rounded-xl bg-[#06659d] text-white ring ring-base-200 ring-offset-base-100 ring-offset-2 inline-flex items-center justify-center"
@ -47,7 +50,9 @@ const title = "Dashboard";
</div> </div>
</div> </div>
<div> <div>
<h3 class="font-medium text-lg" id="userName">Loading...</h3> <h3 class="font-medium text-lg" id="userName">
Loading...
</h3>
<div <div
class="badge badge-outline mt-1 border-[#06659d] text-[#06659d]" class="badge badge-outline mt-1 border-[#06659d] text-[#06659d]"
id="userRole" id="userRole"
@ -82,7 +87,10 @@ const title = "Dashboard";
class="dashboard-nav-btn gap-4 transition-all duration-200 outline-none focus:outline-none hover:bg-opacity-5" class="dashboard-nav-btn gap-4 transition-all duration-200 outline-none focus:outline-none hover:bg-opacity-5"
data-section="events" data-section="events"
> >
<Icon name="heroicons:calendar" class="h-5 w-5" /> <Icon
name="heroicons:calendar"
class="h-5 w-5"
/>
Events Events
</button> </button>
</li> </li>
@ -91,7 +99,10 @@ const title = "Dashboard";
class="dashboard-nav-btn gap-4 transition-all duration-200 outline-none focus:outline-none hover:bg-opacity-5" class="dashboard-nav-btn gap-4 transition-all duration-200 outline-none focus:outline-none hover:bg-opacity-5"
data-section="reimbursement" data-section="reimbursement"
> >
<Icon name="heroicons:credit-card" class="h-5 w-5" /> <Icon
name="heroicons:credit-card"
class="h-5 w-5"
/>
Reimbursement Reimbursement
</button> </button>
</li> </li>
@ -117,7 +128,10 @@ const title = "Dashboard";
class="dashboard-nav-btn gap-4 transition-all duration-200 outline-none focus:outline-none hover:bg-opacity-5" class="dashboard-nav-btn gap-4 transition-all duration-200 outline-none focus:outline-none hover:bg-opacity-5"
data-section="settings" data-section="settings"
> >
<Icon name="heroicons:cog-6-tooth" class="h-5 w-5" /> <Icon
name="heroicons:cog-6-tooth"
class="h-5 w-5"
/>
Settings Settings
</button> </button>
</li> </li>
@ -143,7 +157,10 @@ const title = "Dashboard";
<header class="bg-base-100 p-4 shadow-md lg:hidden"> <header class="bg-base-100 p-4 shadow-md lg:hidden">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<button id="mobileSidebarToggle" class="btn btn-square btn-ghost"> <button
id="mobileSidebarToggle"
class="btn btn-square btn-ghost"
>
<Icon name="heroicons:bars-3" class="h-6 w-6" /> <Icon name="heroicons:bars-3" class="h-6 w-6" />
</button> </button>
<h1 class="text-xl font-bold">IEEE UCSD</h1> <h1 class="text-xl font-bold">IEEE UCSD</h1>
@ -155,8 +172,11 @@ const title = "Dashboard";
<div class="p-6 max-w-[1600px] mx-auto"> <div class="p-6 max-w-[1600px] mx-auto">
<!-- Loading State --> <!-- Loading State -->
<div id="pageLoadingState" class="w-full"> <div id="pageLoadingState" class="w-full">
<div class="flex flex-col items-center justify-center p-8"> <div
<div class="loading loading-spinner loading-lg"></div> class="flex flex-col items-center justify-center p-8"
>
<div class="loading loading-spinner loading-lg">
</div>
<p class="mt-4 opacity-70">Loading dashboard...</p> <p class="mt-4 opacity-70">Loading dashboard...</p>
</div> </div>
</div> </div>
@ -200,10 +220,12 @@ const title = "Dashboard";
Sign in to Access Dashboard Sign in to Access Dashboard
</h2> </h2>
<p class="opacity-70 mb-6"> <p class="opacity-70 mb-6">
Please sign in with your IEEE UCSD account to access the Please sign in with your IEEE UCSD account
dashboard. to access the dashboard.
</p> </p>
<button class="login-button btn btn-primary btn-lg gap-2"> <button
class="login-button btn btn-primary btn-lg gap-2"
>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5" class="h-5 w-5"
@ -236,9 +258,9 @@ const title = "Dashboard";
</html> </html>
<script> <script>
import { Authentication } from "../components/pocketbase/Authentication"; import { Authentication } from "../scripts/pocketbase/Authentication";
import { Get } from "../components/pocketbase/Get"; import { Get } from "../scripts/pocketbase/Get";
import { SendLog } from "../components/pocketbase/SendLog"; import { SendLog } from "../scripts/pocketbase/SendLog";
const auth = Authentication.getInstance(); const auth = Authentication.getInstance();
const get = Get.getInstance(); const get = Get.getInstance();
@ -248,7 +270,7 @@ const title = "Dashboard";
const pageLoadingState = document.getElementById("pageLoadingState"); const pageLoadingState = document.getElementById("pageLoadingState");
const pageErrorState = document.getElementById("pageErrorState"); const pageErrorState = document.getElementById("pageErrorState");
const notAuthenticatedState = document.getElementById( const notAuthenticatedState = document.getElementById(
"notAuthenticatedState", "notAuthenticatedState"
); );
const mainContent = document.getElementById("mainContent"); const mainContent = document.getElementById("mainContent");
const sidebar = document.querySelector("aside"); const sidebar = document.querySelector("aside");
@ -310,7 +332,7 @@ const title = "Dashboard";
button.addEventListener("click", () => { button.addEventListener("click", () => {
// Remove active class from all buttons // Remove active class from all buttons
navButtons.forEach((btn) => navButtons.forEach((btn) =>
btn.classList.remove("active", "bg-base-200"), btn.classList.remove("active", "bg-base-200")
); );
// Add active class to clicked button // Add active class to clicked button
button.classList.add("active", "bg-base-200"); button.classList.add("active", "bg-base-200");
@ -334,7 +356,8 @@ const title = "Dashboard";
try { try {
if (pageLoadingState) pageLoadingState.classList.remove("hidden"); if (pageLoadingState) pageLoadingState.classList.remove("hidden");
if (pageErrorState) pageErrorState.classList.add("hidden"); if (pageErrorState) pageErrorState.classList.add("hidden");
if (notAuthenticatedState) notAuthenticatedState.classList.add("hidden"); if (notAuthenticatedState)
notAuthenticatedState.classList.add("hidden");
if (mainContent) mainContent.classList.add("hidden"); if (mainContent) mainContent.classList.add("hidden");
// Check authentication // Check authentication
@ -369,7 +392,8 @@ const title = "Dashboard";
.querySelector(".login-button") .querySelector(".login-button")
?.addEventListener("click", async () => { ?.addEventListener("click", async () => {
try { try {
if (pageLoadingState) pageLoadingState.classList.remove("hidden"); if (pageLoadingState)
pageLoadingState.classList.remove("hidden");
if (notAuthenticatedState) if (notAuthenticatedState)
notAuthenticatedState.classList.add("hidden"); notAuthenticatedState.classList.add("hidden");
await auth.login(); await auth.login();
@ -402,7 +426,7 @@ const title = "Dashboard";
"fixed", "fixed",
"lg:relative", "lg:relative",
"h-full", "h-full",
"z-50", "z-50"
); );
} }
</script> </script>