235 lines
9.8 KiB
Text
235 lines
9.8 KiB
Text
---
|
|
import { Icon } from "astro-icon/components";
|
|
import UserProfileSettings from "./SettingsSection/UserProfileSettings";
|
|
import AccountSecuritySettings from "./SettingsSection/AccountSecuritySettings";
|
|
import NotificationSettings from "./SettingsSection/NotificationSettings";
|
|
import DisplaySettings from "./SettingsSection/DisplaySettings";
|
|
import ResumeSettings from "./SettingsSection/ResumeSettings";
|
|
import ThemeToggle from "./universal/ThemeToggle";
|
|
|
|
// Import environment variables
|
|
const logtoAppId = import.meta.env.LOGTO_APP_ID;
|
|
const logtoAppSecret = import.meta.env.LOGTO_APP_SECRET;
|
|
const logtoEndpoint = import.meta.env.LOGTO_ENDPOINT;
|
|
const logtoTokenEndpoint = import.meta.env.LOGTO_TOKEN_ENDPOINT;
|
|
const logtoApiEndpoint = import.meta.env.LOGTO_API_ENDPOINT;
|
|
|
|
// Define fallback values if environment variables are not set
|
|
const safeLogtoAppId = logtoAppId || "missing_app_id";
|
|
const safeLogtoAppSecret = logtoAppSecret || "missing_app_secret";
|
|
const safeLogtoEndpoint = logtoEndpoint || "https://auth.ieeeucsd.org";
|
|
const safeLogtoTokenEndpoint =
|
|
logtoTokenEndpoint || "https://auth.ieeeucsd.org/oidc/token";
|
|
const safeLogtoApiEndpoint = logtoApiEndpoint || "";
|
|
---
|
|
|
|
<div id="settings-section" class="">
|
|
<div class="mb-6">
|
|
<h2 class="text-2xl font-bold">Settings</h2>
|
|
<p class="opacity-70">Manage your account settings and preferences</p>
|
|
</div>
|
|
|
|
<!-- Debug Environment Variables (Only visible in development) -->
|
|
{
|
|
import.meta.env.DEV && (
|
|
<div class="card bg-card shadow-xl border border-warning mb-6 p-4">
|
|
<h3 class="text-lg font-bold text-warning">
|
|
Debug Environment Variables
|
|
</h3>
|
|
<p class="text-sm mb-2">
|
|
This section is only visible in development mode
|
|
</p>
|
|
<div class="overflow-x-auto">
|
|
<table class="table-auto w-full text-xs">
|
|
<thead>
|
|
<tr>
|
|
<th>Variable</th>
|
|
<th>Value</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>LOGTO_APP_ID</td>
|
|
<td>{logtoAppId ? "********" : "Not set"}</td>
|
|
<td>{logtoAppId ? "✅" : "❌"}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>LOGTO_APP_SECRET</td>
|
|
<td>
|
|
{logtoAppSecret ? "********" : "Not set"}
|
|
</td>
|
|
<td>{logtoAppSecret ? "✅" : "❌"}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>LOGTO_ENDPOINT</td>
|
|
<td>{logtoEndpoint || "Not set"}</td>
|
|
<td>{logtoEndpoint ? "✅" : "❌"}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>LOGTO_TOKEN_ENDPOINT</td>
|
|
<td>{logtoTokenEndpoint || "Not set"}</td>
|
|
<td>{logtoTokenEndpoint ? "✅" : "❌"}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>LOGTO_API_ENDPOINT</td>
|
|
<td>{logtoApiEndpoint || "Not set"}</td>
|
|
<td>{logtoApiEndpoint ? "✅" : "❌"}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
<!-- Profile Settings Card -->
|
|
<div
|
|
class="card bg-card shadow-xl border border-border hover:border-primary transition-all duration-300 hover:-translate-y-1 transform mb-6"
|
|
>
|
|
<div class="card-body">
|
|
<h3 class="card-title flex items-center gap-3">
|
|
<div
|
|
class="inline-flex items-center justify-center p-3 rounded-full bg-primary text-primary-foreground"
|
|
>
|
|
<Icon name="heroicons:user" class="h-5 w-5" />
|
|
</div>
|
|
Profile Information
|
|
</h3>
|
|
<p class="text-sm opacity-70 mb-4">
|
|
Update your personal information and profile details
|
|
</p>
|
|
<div class="h-px w-full bg-border my-4"></div>
|
|
<UserProfileSettings
|
|
client:load
|
|
logtoApiEndpoint={logtoApiEndpoint}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Resume Settings Card -->
|
|
<div
|
|
id="resume-management-section"
|
|
class="card bg-card shadow-xl border border-border hover:border-primary transition-all duration-300 hover:-translate-y-1 transform mb-6"
|
|
>
|
|
<div class="card-body">
|
|
<h3 class="card-title flex items-center gap-3">
|
|
<div
|
|
class="inline-flex items-center justify-center p-3 rounded-full bg-primary text-primary-foreground"
|
|
>
|
|
<Icon name="heroicons:document-text" class="h-5 w-5" />
|
|
</div>
|
|
Resume Management
|
|
</h3>
|
|
<p class="text-sm opacity-70 mb-4">
|
|
Upload and manage your resume for recruiters and career
|
|
opportunities
|
|
</p>
|
|
<div class="h-px w-full bg-border my-4"></div>
|
|
<ResumeSettings client:load />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Account Security Settings Card -->
|
|
<div
|
|
class="card bg-card shadow-xl border border-border hover:border-primary transition-all duration-300 hover:-translate-y-1 transform mb-6"
|
|
>
|
|
<div class="card-body">
|
|
<h3 class="card-title flex items-center gap-3">
|
|
<div
|
|
class="inline-flex items-center justify-center p-3 rounded-full bg-primary text-primary-foreground"
|
|
>
|
|
<Icon name="heroicons:lock-closed" class="h-5 w-5" />
|
|
</div>
|
|
Account Security
|
|
</h3>
|
|
<p class="text-sm opacity-70 mb-4">
|
|
Manage your account security settings and authentication options
|
|
</p>
|
|
<div class="h-px w-full bg-border my-4"></div>
|
|
<AccountSecuritySettings
|
|
client:load
|
|
logtoAppId={safeLogtoAppId}
|
|
logtoAppSecret={safeLogtoAppSecret}
|
|
logtoEndpoint={safeLogtoEndpoint}
|
|
logtoTokenEndpoint={safeLogtoTokenEndpoint}
|
|
logtoApiEndpoint={safeLogtoApiEndpoint}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Notification Settings Card -->
|
|
<div
|
|
class="card bg-card shadow-xl border border-border hover:border-primary transition-all duration-300 hover:-translate-y-1 transform mb-6 relative group"
|
|
>
|
|
<!-- Coming Soon Overlay -->
|
|
<div
|
|
class="absolute inset-0 bg-muted bg-opacity-90 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-10 rounded-xl"
|
|
>
|
|
<div class="text-center">
|
|
<h4 class="text-xl font-bold">Coming Soon</h4>
|
|
<p class="text-sm opacity-70">
|
|
Notification settings will be available in a future update
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<h3 class="card-title flex items-center gap-3">
|
|
<div
|
|
class="inline-flex items-center justify-center p-3 rounded-full bg-primary text-primary-foreground"
|
|
>
|
|
<Icon name="heroicons:bell" class="h-5 w-5" />
|
|
</div>
|
|
Notification Preferences
|
|
</h3>
|
|
<p class="text-sm opacity-70 mb-4">
|
|
Customize how and when you receive notifications
|
|
</p>
|
|
<div class="h-px w-full bg-border my-4"></div>
|
|
<NotificationSettings client:load />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Display Settings Card -->
|
|
<div
|
|
class="card bg-base-100 shadow-xl border border-base-200 hover:border-primary transition-all duration-300 hover:-translate-y-1 transform"
|
|
>
|
|
<div class="card-body">
|
|
<h3 class="card-title flex items-center gap-3">
|
|
<div class="badge badge-primary p-3">
|
|
<Icon name="heroicons:computer-desktop" class="h-5 w-5" />
|
|
</div>
|
|
Display Settings
|
|
</h3>
|
|
<p class="text-sm opacity-70 mb-4">
|
|
Customize your dashboard appearance and display preferences
|
|
</p>
|
|
<div class="divider"></div>
|
|
|
|
<div class="alert alert-warning mb-4">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="stroke-current shrink-0 h-6 w-6"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
><path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
|
|
></path></svg
|
|
>
|
|
<div>
|
|
<h3 class="font-bold">Light Mode Experimental</h3>
|
|
<p class="text-sm">
|
|
Light mode is still experimental and some UI elements
|
|
may not display correctly.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<DisplaySettings client:load />
|
|
</div>
|
|
</div>
|
|
</div>
|