Add authentication #17
2 changed files with 282 additions and 230 deletions
|
@ -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
|
||||||
|
);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -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">
|
||||||
|
|
Loading…
Reference in a new issue