e57f76bd4c
- Separated the components for pocketbase - Removed the entire profile page temporarily and only added back basic user profile - Fixed many components dependencies
93 lines
3.6 KiB
Text
93 lines
3.6 KiB
Text
---
|
|
import Layout from "../layouts/Layout.astro";
|
|
import UserProfile from "../components/auth/UserProfile.astro";
|
|
import DefaultStoreView from "../components/store/DefaultStoreView.astro";
|
|
import OfficerStoreView from "../components/profile/OfficerView.astro";
|
|
const title = "IEEE Online Store";
|
|
---
|
|
|
|
<Layout {title}>
|
|
<main class="mx-auto pb-12 md:pt-[5vh] pt-[5vw] min-h-screen">
|
|
<h1 class="text-4xl font-bold mb-12">IEEE UCSD Store</h1>
|
|
<div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
|
|
<!-- Left Column - User Info -->
|
|
<div class="lg:col-span-2 2xl:col-span-1 h-fit">
|
|
<UserProfile />
|
|
</div>
|
|
|
|
<!-- Right Column - Store Items -->
|
|
<div id="storeContent" class="lg:col-span-2 2xl:col-span-3">
|
|
<DefaultStoreView />
|
|
<OfficerStoreView />
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</Layout>
|
|
|
|
<script>
|
|
import { Authentication } from "../components/pocketbase/Authentication";
|
|
const auth = Authentication.getInstance();
|
|
|
|
// Initialize page state
|
|
const pageLoadingState = document.getElementById("pageLoadingState");
|
|
const pageErrorState = document.getElementById("pageErrorState");
|
|
const notAuthenticatedState = document.getElementById(
|
|
"notAuthenticatedState"
|
|
);
|
|
const mainContent = document.getElementById("mainContent");
|
|
|
|
// Initialize page
|
|
const initializePage = async () => {
|
|
try {
|
|
// Show loading state
|
|
if (pageLoadingState) pageLoadingState.classList.remove("hidden");
|
|
if (pageErrorState) pageErrorState.classList.add("hidden");
|
|
if (notAuthenticatedState)
|
|
notAuthenticatedState.classList.add("hidden");
|
|
if (mainContent) mainContent.classList.add("hidden");
|
|
|
|
// Check auth state
|
|
if (!auth.isAuthenticated()) {
|
|
// Show not authenticated state
|
|
if (pageLoadingState) pageLoadingState.classList.add("hidden");
|
|
if (notAuthenticatedState)
|
|
notAuthenticatedState.classList.remove("hidden");
|
|
return;
|
|
}
|
|
|
|
// Hide loading state and show content
|
|
if (pageLoadingState) pageLoadingState.classList.add("hidden");
|
|
if (mainContent) mainContent.classList.remove("hidden");
|
|
} catch (error) {
|
|
console.error("Failed to initialize page:", error);
|
|
if (pageLoadingState) pageLoadingState.classList.add("hidden");
|
|
if (pageErrorState) pageErrorState.classList.remove("hidden");
|
|
if (mainContent) mainContent.classList.add("hidden");
|
|
}
|
|
};
|
|
|
|
// Check on load and auth changes
|
|
initializePage();
|
|
auth.onAuthStateChange(() => {
|
|
initializePage();
|
|
});
|
|
|
|
// Add login button event listener
|
|
const loginButtons = document.querySelectorAll(".login-button");
|
|
loginButtons.forEach((button) => {
|
|
button.addEventListener("click", () => {
|
|
// Show loading state while authentication is in progress
|
|
if (pageLoadingState) pageLoadingState.classList.remove("hidden");
|
|
if (notAuthenticatedState)
|
|
notAuthenticatedState.classList.add("hidden");
|
|
|
|
// Call the login method
|
|
auth.login().catch((error) => {
|
|
console.error("Login error:", error);
|
|
// Show error state if login fails
|
|
if (pageLoadingState) pageLoadingState.classList.add("hidden");
|
|
if (pageErrorState) pageErrorState.classList.remove("hidden");
|
|
});
|
|
});
|
|
});
|
|
</script>
|