Add authentication #17

Manually merged
Webmaster merged 225 commits from auth into main 2025-03-08 10:37:06 +00:00
2 changed files with 282 additions and 230 deletions
Showing only changes of commit ba1cfea557 - Show all commits

View file

@ -31,7 +31,7 @@ if (auth.isAuthenticated()) {
userEventRequests = await get.getAll<EventRequest>( userEventRequests = await get.getAll<EventRequest>(
Collections.EVENT_REQUESTS, Collections.EVENT_REQUESTS,
`requested_user="${userId}"`, `requested_user="${userId}"`,
"-created", "-created"
); );
} }
} catch (err) { } catch (err) {
@ -46,8 +46,8 @@ if (auth.isAuthenticated()) {
<h1 class="text-3xl font-bold text-white mb-2">Event Request Form</h1> <h1 class="text-3xl font-bold text-white mb-2">Event Request Form</h1>
<p class="text-gray-300 mb-4"> <p class="text-gray-300 mb-4">
Submit your event request at least 6 weeks before your event. After Submit your event request at least 6 weeks before your event. After
submitting, please notify PR and/or Coordinators in the #-events Slack submitting, please notify PR and/or Coordinators in the #-events
channel. Slack channel.
</p> </p>
<div class="bg-base-300/50 p-4 rounded-lg text-sm text-gray-300"> <div class="bg-base-300/50 p-4 rounded-lg text-sm text-gray-300">
<p class="font-medium mb-2">This form includes sections for:</p> <p class="font-medium mb-2">This form includes sections for:</p>
@ -109,7 +109,10 @@ if (auth.isAuthenticated()) {
{ {
!error && ( !error && (
<UserEventRequests client:load eventRequests={userEventRequests} /> <UserEventRequests
client:load
eventRequests={userEventRequests}
/>
) )
} }
</div> </div>
@ -122,9 +125,12 @@ if (auth.isAuthenticated()) {
position: fixed !important; position: fixed !important;
top: 0 !important; top: 0 !important;
left: 0 !important; left: 0 !important;
width: 100% !important; width: 100vw !important;
height: 100% !important; height: 100vh !important;
z-index: 99999 !important; z-index: 99999 !important;
overflow: auto !important;
margin: 0 !important;
padding: 0 !important;
} }
/* Style for the modal backdrop */ /* Style for the modal backdrop */
@ -137,12 +143,21 @@ if (auth.isAuthenticated()) {
z-index: 99999 !important; z-index: 99999 !important;
background-color: rgba(0, 0, 0, 0.8) !important; background-color: rgba(0, 0, 0, 0.8) !important;
backdrop-filter: blur(8px) !important; backdrop-filter: blur(8px) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: auto !important;
} }
/* Style for the modal content */ /* Style for the modal content */
#event-request-preview-modal-container > div > div > div { #event-request-preview-modal-container > div > div > div {
z-index: 100000 !important; z-index: 100000 !important;
position: relative !important; position: relative !important;
max-width: 90vw !important;
width: 100% !important;
max-height: 90vh !important;
overflow: auto !important;
margin: 2rem !important;
} }
</style> </style>
@ -158,7 +173,7 @@ if (auth.isAuthenticated()) {
window.showEventRequestFormPreview = function (formData) { window.showEventRequestFormPreview = function (formData) {
console.log( console.log(
"Global showEventRequestFormPreview called with data", "Global showEventRequestFormPreview called with data",
formData, formData
); );
// Remove any elements that might be obstructing the view // Remove any elements that might be obstructing the view
@ -194,15 +209,32 @@ if (auth.isAuthenticated()) {
// Ensure modal container is visible // Ensure modal container is visible
setTimeout(() => { setTimeout(() => {
const modalContainer = document.getElementById( const modalContainer = document.getElementById(
"event-request-preview-modal-container", "event-request-preview-modal-container"
); );
if (modalContainer) { if (modalContainer) {
modalContainer.style.zIndex = "99999"; modalContainer.style.zIndex = "99999";
modalContainer.style.position = "fixed"; modalContainer.style.position = "fixed";
modalContainer.style.top = "0"; modalContainer.style.top = "0";
modalContainer.style.left = "0"; modalContainer.style.left = "0";
modalContainer.style.width = "100%"; modalContainer.style.width = "100vw";
modalContainer.style.height = "100%"; modalContainer.style.height = "100vh";
modalContainer.style.overflow = "auto";
modalContainer.style.margin = "0";
modalContainer.style.padding = "0";
// Force body to allow scrolling
document.body.style.overflow = "auto";
// Ensure the modal content is properly sized
const modalContent =
modalContainer.querySelector("div > div > div");
if (modalContent) {
modalContent.style.maxWidth = "90vw";
modalContent.style.width = "100%";
modalContent.style.maxHeight = "90vh";
modalContent.style.overflow = "auto";
modalContent.style.margin = "2rem";
}
} }
}, 100); }, 100);
}; };
@ -229,9 +261,11 @@ if (auth.isAuthenticated()) {
await dataSync.syncCollection( await dataSync.syncCollection(
Collections.EVENT_REQUESTS, Collections.EVENT_REQUESTS,
`requested_user="${userId}"`, `requested_user="${userId}"`,
"-created", "-created"
);
console.log(
"Initial data sync complete for user event requests"
); );
console.log("Initial data sync complete for user event requests");
} }
} catch (err) { } catch (err) {
console.error("Error during initial data sync:", err); console.error("Error during initial data sync:", err);
@ -241,14 +275,16 @@ if (auth.isAuthenticated()) {
const formTab = document.getElementById("form-tab"); const formTab = document.getElementById("form-tab");
const submissionsTab = document.getElementById("submissions-tab"); const submissionsTab = document.getElementById("submissions-tab");
const formContent = document.getElementById("form-content"); const formContent = document.getElementById("form-content");
const submissionsContent = document.getElementById("submissions-content"); const submissionsContent = document.getElementById(
"submissions-content"
);
// Function to switch tabs // Function to switch tabs
const switchTab = ( const switchTab = (
activeTab: HTMLElement, activeTab: HTMLElement,
activeContent: HTMLElement, activeContent: HTMLElement,
inactiveTab: HTMLElement, inactiveTab: HTMLElement,
inactiveContent: HTMLElement, inactiveContent: HTMLElement
) => { ) => {
// Update tab classes // Update tab classes
activeTab.classList.add("tab-active"); activeTab.classList.add("tab-active");
@ -269,14 +305,24 @@ if (auth.isAuthenticated()) {
formTab?.addEventListener("click", (e) => { formTab?.addEventListener("click", (e) => {
e.preventDefault(); e.preventDefault();
if (formContent && submissionsContent && submissionsTab) { if (formContent && submissionsContent && submissionsTab) {
switchTab(formTab, formContent, submissionsTab, submissionsContent); switchTab(
formTab,
formContent,
submissionsTab,
submissionsContent
);
} }
}); });
submissionsTab?.addEventListener("click", (e) => { submissionsTab?.addEventListener("click", (e) => {
e.preventDefault(); e.preventDefault();
if (formContent && submissionsContent && formTab) { if (formContent && submissionsContent && formTab) {
switchTab(submissionsTab, submissionsContent, formTab, formContent); switchTab(
submissionsTab,
submissionsContent,
formTab,
formContent
);
} }
}); });

View file

@ -70,10 +70,13 @@ export const EventRequestFormPreviewModal: React.FC = () => {
position: 'fixed', position: 'fixed',
top: 0, top: 0,
left: 0, left: 0,
width: '100%', width: '100vw',
height: '100%', height: '100vh',
zIndex: 99999, zIndex: 99999,
pointerEvents: isOpen ? 'auto' : 'none' pointerEvents: isOpen ? 'auto' : 'none',
overflow: 'auto',
margin: 0,
padding: 0
}} }}
> >
<EventRequestFormPreview <EventRequestFormPreview
@ -454,7 +457,8 @@ const EventRequestFormPreview: React.FC<EventRequestFormPreviewProps> = ({
width: '100vw', width: '100vw',
height: '100vh', height: '100vh',
margin: 0, margin: 0,
padding: 0 padding: 0,
overflow: 'auto'
}} }}
> >
<motion.div <motion.div
@ -466,7 +470,9 @@ const EventRequestFormPreview: React.FC<EventRequestFormPreviewProps> = ({
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
style={{ style={{
position: 'relative', position: 'relative',
zIndex: 100000 zIndex: 100000,
maxWidth: '90vw',
width: '100%'
}} }}
> >
<div className="sticky top-0 z-10 bg-base-100 px-6 py-4 border-b border-base-300 flex justify-between items-center"> <div className="sticky top-0 z-10 bg-base-100 px-6 py-4 border-b border-base-300 flex justify-between items-center">