changed "Online Store" to "Dashboard"
This commit is contained in:
chark1es
parent
7af88c424d
commit
43fe443c52
6 changed files with 111 additions and 167 deletions
|
|
@ -1,60 +1,67 @@
|
|||
import PocketBase from "pocketbase";
|
||||
|
||||
export class RedirectHandler {
|
||||
private pb: PocketBase;
|
||||
private contentEl: HTMLElement;
|
||||
private params: URLSearchParams;
|
||||
private provider: any;
|
||||
private pb: PocketBase;
|
||||
private contentEl: HTMLElement;
|
||||
private params: URLSearchParams;
|
||||
private provider: any;
|
||||
|
||||
constructor() {
|
||||
this.pb = new PocketBase("https://pocketbase.ieeeucsd.org");
|
||||
this.contentEl = this.getContentElement();
|
||||
this.params = new URLSearchParams(window.location.search);
|
||||
this.provider = this.getStoredProvider();
|
||||
this.handleRedirect();
|
||||
constructor() {
|
||||
this.pb = new PocketBase("https://pocketbase.ieeeucsd.org");
|
||||
this.contentEl = this.getContentElement();
|
||||
this.params = new URLSearchParams(window.location.search);
|
||||
this.provider = this.getStoredProvider();
|
||||
this.handleRedirect();
|
||||
}
|
||||
|
||||
private getContentElement(): HTMLElement {
|
||||
const contentEl = document.getElementById("content");
|
||||
if (!contentEl) {
|
||||
throw new Error("Content element not found");
|
||||
}
|
||||
return contentEl;
|
||||
}
|
||||
|
||||
private getStoredProvider() {
|
||||
return JSON.parse(localStorage.getItem("provider") || "{}");
|
||||
}
|
||||
|
||||
private showError(message: string) {
|
||||
this.contentEl.innerHTML = `
|
||||
<p class='text-red-500 text-2xl font-medium mb-4'>${message}</p>
|
||||
<a href="/" class="btn btn-primary">
|
||||
Return to Home
|
||||
</a>
|
||||
`;
|
||||
}
|
||||
|
||||
private async handleRedirect() {
|
||||
const code = this.params.get("code");
|
||||
const state = this.params.get("state");
|
||||
|
||||
if (!code) {
|
||||
this.showError("No authorization code found in URL.");
|
||||
return;
|
||||
}
|
||||
|
||||
private getContentElement(): HTMLElement {
|
||||
const contentEl = document.getElementById("content");
|
||||
if (!contentEl) {
|
||||
throw new Error("Content element not found");
|
||||
}
|
||||
return contentEl;
|
||||
if (state !== this.provider.state) {
|
||||
this.showError("Invalid state parameter.");
|
||||
return;
|
||||
}
|
||||
|
||||
private getStoredProvider() {
|
||||
return JSON.parse(localStorage.getItem("provider") || "{}");
|
||||
}
|
||||
try {
|
||||
const authData = await this.pb
|
||||
.collection("users")
|
||||
.authWithOAuth2Code(
|
||||
"oidc",
|
||||
code,
|
||||
this.provider.codeVerifier,
|
||||
window.location.origin + "/oauth2-redirect",
|
||||
{ emailVisibility: false },
|
||||
);
|
||||
|
||||
private showError(message: string) {
|
||||
this.contentEl.innerHTML = `<p class='text-red-500'>${message}</p>`;
|
||||
}
|
||||
|
||||
private async handleRedirect() {
|
||||
const code = this.params.get("code");
|
||||
const state = this.params.get("state");
|
||||
|
||||
if (!code) {
|
||||
this.showError("No authorization code found in URL.");
|
||||
return;
|
||||
}
|
||||
|
||||
if (state !== this.provider.state) {
|
||||
this.showError("Invalid state parameter.");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const authData = await this.pb.collection("users").authWithOAuth2Code(
|
||||
"oidc",
|
||||
code,
|
||||
this.provider.codeVerifier,
|
||||
window.location.origin + "/oauth2-redirect",
|
||||
{ emailVisibility: false }
|
||||
);
|
||||
|
||||
console.log("Auth successful:", authData);
|
||||
this.contentEl.innerHTML = `
|
||||
console.log("Auth successful:", authData);
|
||||
this.contentEl.innerHTML = `
|
||||
<p class="text-3xl font-bold text-green-500 mb-4">Authentication Successful!</p>
|
||||
<p class="text-2xl font-medium">Redirecting to store...</p>
|
||||
<div class="mt-4">
|
||||
|
|
@ -62,24 +69,24 @@ export class RedirectHandler {
|
|||
</div>
|
||||
`;
|
||||
|
||||
try {
|
||||
// Update last login before redirecting
|
||||
await this.pb.collection("users").update(authData.record.id, {
|
||||
last_login: new Date().toISOString()
|
||||
});
|
||||
try {
|
||||
// Update last login before redirecting
|
||||
await this.pb.collection("users").update(authData.record.id, {
|
||||
last_login: new Date().toISOString(),
|
||||
});
|
||||
|
||||
// Clean up and redirect
|
||||
localStorage.removeItem("provider");
|
||||
window.location.href = "/online-store";
|
||||
} catch (err) {
|
||||
console.error("Failed to update last login:", err);
|
||||
// Still redirect even if last_login update fails
|
||||
localStorage.removeItem("provider");
|
||||
window.location.href = "/online-store";
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.error("Auth error:", err);
|
||||
this.showError(`Failed to complete authentication: ${err.message}`);
|
||||
}
|
||||
// Clean up and redirect
|
||||
localStorage.removeItem("provider");
|
||||
window.location.href = "/dashboard";
|
||||
} catch (err) {
|
||||
console.error("Failed to update last login:", err);
|
||||
// Still redirect even if last_login update fails
|
||||
localStorage.removeItem("provider");
|
||||
window.location.href = "/dashboard";
|
||||
}
|
||||
} catch (err: any) {
|
||||
console.error("Auth error:", err);
|
||||
this.showError(`Failed to complete authentication: ${err.message}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -29,7 +29,7 @@ import pages from "../../data/pages.json";
|
|||
href={page.path}
|
||||
class={`uppercase rounded-full duration-300 px-[1.5vw] py-[0.2vw] text-[1.2vw] text-nowrap
|
||||
${
|
||||
page.name === "Online Store"
|
||||
page.name === "Dashboard"
|
||||
? "bg-ieee-yellow text-black hover:opacity-70"
|
||||
: "text-white border-white hover:opacity-50 border-[0.1vw] font-light"
|
||||
}`}
|
||||
|
|
|
|||
|
|
@ -1,23 +0,0 @@
|
|||
<div id="storeItemsGrid" class="h-full">
|
||||
<div
|
||||
class="card bg-base-200 shadow-xl h-full flex items-center justify-center min-h-[400px]"
|
||||
>
|
||||
<div
|
||||
class="card-body flex flex-col items-center justify-center h-full w-full max-w-2xl mx-auto"
|
||||
>
|
||||
<div class="text-center w-full">
|
||||
<h2 class="card-title text-3xl justify-center mb-6">
|
||||
Store Coming Soon!
|
||||
</h2>
|
||||
<div class="space-y-4">
|
||||
<p class="text-base-content/70 text-lg">
|
||||
Our store is currently under development. Check back
|
||||
later for IEEE UCSD merchandise! In the meantime, please
|
||||
make sure your profile is up to date with your IEEE
|
||||
Member ID and resume.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
---
|
||||
interface Props {
|
||||
name: string;
|
||||
description: string;
|
||||
price: number;
|
||||
imageUrl: string;
|
||||
}
|
||||
|
||||
const {
|
||||
name,
|
||||
description,
|
||||
price,
|
||||
imageUrl = "https://placehold.co/400x300",
|
||||
} = Astro.props;
|
||||
---
|
||||
|
||||
<div class="card bg-base-200 shadow-xl">
|
||||
<figure class="px-6 pt-6">
|
||||
<div class="relative w-full">
|
||||
<div class="skeleton w-full aspect-[4/3] rounded-xl"></div>
|
||||
<img
|
||||
src={imageUrl}
|
||||
alt={name}
|
||||
class="rounded-xl absolute inset-0 w-full h-full object-cover opacity-0 transition-opacity duration-300"
|
||||
onload="this.classList.remove('opacity-0')"
|
||||
/>
|
||||
</div>
|
||||
</figure>
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">{name}</h2>
|
||||
<p>{description}</p>
|
||||
<div class="card-actions justify-between items-center mt-2">
|
||||
<span class="text-xl font-semibold">${price.toFixed(2)}</span>
|
||||
<button class="btn btn-primary">Add to Cart</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,26 +1,26 @@
|
|||
[
|
||||
{
|
||||
"name": "Join",
|
||||
"path": "/join"
|
||||
},
|
||||
{
|
||||
"name": "Events",
|
||||
"path": "/events"
|
||||
},
|
||||
{
|
||||
"name": "Projects",
|
||||
"path": "/projects"
|
||||
},
|
||||
{
|
||||
"name": "Board",
|
||||
"path": "/board"
|
||||
},
|
||||
{
|
||||
"name": "Find Us",
|
||||
"path": "/find"
|
||||
},
|
||||
{
|
||||
"name": "Online Store",
|
||||
"path": "/online-store"
|
||||
}
|
||||
{
|
||||
"name": "Join",
|
||||
"path": "/join"
|
||||
},
|
||||
{
|
||||
"name": "Events",
|
||||
"path": "/events"
|
||||
},
|
||||
{
|
||||
"name": "Projects",
|
||||
"path": "/projects"
|
||||
},
|
||||
{
|
||||
"name": "Board",
|
||||
"path": "/board"
|
||||
},
|
||||
{
|
||||
"name": "Find Us",
|
||||
"path": "/find"
|
||||
},
|
||||
{
|
||||
"name": "Dashboard",
|
||||
"path": "/dashboard"
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -3,18 +3,15 @@ import Layout from "../layouts/Layout.astro";
|
|||
const title = "Authenticating...";
|
||||
---
|
||||
|
||||
<Layout {title}>
|
||||
<main class="min-h-screen flex items-center justify-center">
|
||||
<div id="content" class="text-center">
|
||||
<p class="text-2xl font-medium">Redirecting to store...</p>
|
||||
<div class="mt-4">
|
||||
<div class="loading loading-spinner loading-lg"></div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
|
||||
<main class="min-h-screen flex items-center justify-center">
|
||||
<div id="content" class="text-center">
|
||||
<p class="text-2xl font-medium">Redirecting to dashboard...</p>
|
||||
<div class="mt-4">
|
||||
<div class="loading loading-spinner loading-lg"></div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
import { RedirectHandler } from "../components/auth/RedirectHandler";
|
||||
new RedirectHandler();
|
||||
import { RedirectHandler } from "../components/auth/RedirectHandler";
|
||||
new RedirectHandler();
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue