217 lines
7.7 KiB
Text
217 lines
7.7 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 EmailRequestSettings from "./SettingsSection/EmailRequestSettings";
|
|
|
|
// 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-base-100 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 table-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-base-100 shadow-xl border border-base-200 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="badge badge-primary p-3">
|
|
<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="divider"></div>
|
|
<UserProfileSettings client:load logtoApiEndpoint={logtoApiEndpoint} />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Resume Settings Card -->
|
|
<div
|
|
id="resume-management-section"
|
|
class="card bg-base-100 shadow-xl border border-base-200 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="badge badge-primary p-3">
|
|
<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="divider"></div>
|
|
<ResumeSettings client:load />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- IEEE Email Request 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 mb-6"
|
|
>
|
|
<div class="card-body">
|
|
<h3 class="card-title flex items-center gap-3">
|
|
<div class="badge badge-primary p-3">
|
|
<Icon name="heroicons:envelope" class="h-5 w-5" />
|
|
</div>
|
|
IEEE Email Address
|
|
</h3>
|
|
<p class="text-sm opacity-70 mb-4">
|
|
Request an official IEEE UCSD email address (officers only)
|
|
</p>
|
|
<div class="divider"></div>
|
|
<EmailRequestSettings client:load />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Account Security 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 mb-6"
|
|
>
|
|
<div class="card-body">
|
|
<h3 class="card-title flex items-center gap-3">
|
|
<div class="badge badge-primary p-3">
|
|
<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="divider"></div>
|
|
<AccountSecuritySettings
|
|
client:load
|
|
logtoAppId={safeLogtoAppId}
|
|
logtoAppSecret={safeLogtoAppSecret}
|
|
logtoEndpoint={safeLogtoEndpoint}
|
|
logtoTokenEndpoint={safeLogtoTokenEndpoint}
|
|
logtoApiEndpoint={safeLogtoApiEndpoint}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Notification 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 mb-6 relative group"
|
|
>
|
|
<!-- Coming Soon Overlay -->
|
|
<div
|
|
class="absolute inset-0 bg-base-300 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="badge badge-primary p-3">
|
|
<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="divider"></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>
|
|
<DisplaySettings client:load />
|
|
</div>
|
|
</div>
|
|
</div>
|