Webmaster/ieeeucsd-org
3
1
Fork 0
Code Issues 11 Pull requests Projects Releases Packages Wiki Activity Actions

disable button when not logged in

Browse source
This commit is contained in:
chark1es 2025-01-28 02:39:55 -08:00
parent 5fbcc7e2a0
commit 50960f6939
2 changed files with 290 additions and 239 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/components/auth/StoreAuth.ts
View file

@ -284,9 +284,17 @@ export class StoreAuth {
if (this.pb.authStore.isValid && this.pb.authStore.model) { if (this.pb.authStore.isValid && this.pb.authStore.model) {
// Update all the user information first // Update all the user information first
const user = this.pb.authStore.model; const user = this.pb.authStore.model;
userName.textContent = user.name || "Name not provided"; userName.textContent = user.name || "Name not provided";
userEmail.textContent = user.email || "Email not available"; userEmail.textContent = user.email || "Email not available";
// Enable member ID input and save button
memberIdInput.disabled = false;
saveMemberId.disabled = false;
// Enable resume upload
resumeUpload.disabled = false;
// Update member status // Update member status
if (user.verified) { if (user.verified) {
// Check and update member_type if not set // Check and update member_type if not set
@ -398,9 +406,15 @@ export class StoreAuth {
memberStatus.classList.add("badge-neutral"); memberStatus.classList.add("badge-neutral");
lastLogin.textContent = "Never"; lastLogin.textContent = "Never";
// Disable member ID input and save button
memberIdInput.disabled = true;
saveMemberId.disabled = true;
// Disable resume upload
resumeUpload.disabled = true;
// Reset member ID // Reset member ID
memberIdInput.value = ""; memberIdInput.value = "";
memberIdInput.disabled = true;
this.isEditingMemberId = false; this.isEditingMemberId = false;
this.updateMemberIdState(); this.updateMemberIdState();

513
src/components/auth/UserProfile.astro
View file

@ -1,257 +1,294 @@
<div> <div>
<!-- Loading Skeleton (shown by default) --> <!-- Loading Skeleton (shown by default) -->
<div id="loadingSkeleton" class="card bg-base-200 shadow-xl"> <div id="loadingSkeleton" class="card bg-base-200 shadow-xl">
<div class="card-body p-0"> <div class="card-body p-0">
<div class="px-6 pt-6"> <div class="px-6 pt-6">
<!-- Title --> <!-- Title -->
<h2 class="skeleton h-8 w-40 card-title"></h2> <h2 class="skeleton h-8 w-40 card-title"></h2>
</div>
<!-- Content -->
<div class="px-6 pb-6">
<div class="space-y-3">
<!-- Name -->
<div class="space-y-1">
<div class="skeleton h-3 w-16 opacity-70"></div>
<div class="skeleton h-[1.75rem] w-48"></div>
</div>
<div class="divider my-0.5"></div>
<!-- Email -->
<div class="space-y-1">
<div class="skeleton h-3 w-16 opacity-70"></div>
<div class="skeleton h-[1.75rem] w-64"></div>
</div>
<div class="divider my-0.5"></div>
<!-- Member Status -->
<div class="space-y-1">
<div class="skeleton h-3 w-24 opacity-70"></div>
<div class="skeleton h-[1.75rem] w-32"></div>
</div>
<div class="divider my-0.5"></div>
<!-- Member ID -->
<div class="space-y-1">
<div class="skeleton h-3 w-20 opacity-70"></div>
<div class="flex items-center gap-2">
<div class="skeleton h-8 flex-1"></div>
<div class="skeleton h-8 w-16"></div>
</div> </div>
</div> <!-- Content -->
<div class="divider my-0.5"></div> <div class="px-6 pb-6">
<div class="space-y-3">
<!-- Name -->
<div class="space-y-1">
<div class="skeleton h-3 w-16 opacity-70"></div>
<div class="skeleton h-[1.75rem] w-48"></div>
</div>
<div class="divider my-0.5"></div>
<!-- Last Login --> <!-- Email -->
<div class="space-y-1"> <div class="space-y-1">
<div class="skeleton h-3 w-20 opacity-70"></div> <div class="skeleton h-3 w-16 opacity-70"></div>
<div class="skeleton h-[1.25rem] w-32"></div> <div class="skeleton h-[1.75rem] w-64"></div>
</div> </div>
<div class="divider my-0.5"></div> <div class="divider my-0.5"></div>
<!-- Resume --> <!-- Member Status -->
<div class="space-y-1"> <div class="space-y-1">
<div class="skeleton h-3 w-16 opacity-70"></div> <div class="skeleton h-3 w-24 opacity-70"></div>
<div class="space-y-2"> <div class="skeleton h-[1.75rem] w-32"></div>
<div class="flex items-center gap-2"> </div>
<div class="skeleton h-[1.25rem] flex-1"></div> <div class="divider my-0.5"></div>
<div class="skeleton h-[1.25rem] w-24"></div>
</div>
<div class="skeleton h-8 w-full"></div>
</div>
</div>
<div class="divider my-0.5"></div>
<!-- Auth Button --> <!-- Member ID -->
<div class="pt-2"> <div class="space-y-1">
<div class="skeleton h-10 w-full"></div> <div class="skeleton h-3 w-20 opacity-70"></div>
</div> <div class="flex items-center gap-2">
</div> <div class="skeleton h-8 flex-1"></div>
</div> <div class="skeleton h-8 w-16"></div>
</div> </div>
</div> </div>
<div class="divider my-0.5"></div>
<!-- Actual Content (hidden by default) --> <!-- Last Login -->
<div id="userInfo" class="card bg-base-200 shadow-xl opacity-0 hidden"> <div class="space-y-1">
<div class="card-body p-0"> <div class="skeleton h-3 w-20 opacity-70"></div>
<div class="px-6 pt-6"> <div class="skeleton h-[1.25rem] w-32"></div>
<h2 class="card-title text-2xl">User Profile</h2> </div>
</div> <div class="divider my-0.5"></div>
<div class="px-6 pb-6">
<div class="space-y-3"> <!-- Resume -->
<div class="space-y-1"> <div class="space-y-1">
<label class="text-sm opacity-70">Name</label> <div class="skeleton h-3 w-16 opacity-70"></div>
<p id="userName" class="h-[1.75rem] font-medium">Not signed in</p> <div class="space-y-2">
</div> <div class="flex items-center gap-2">
<div class="divider my-0.5"></div> <div class="skeleton h-[1.25rem] flex-1"></div>
<div class="space-y-1"> <div class="skeleton h-[1.25rem] w-24"></div>
<label class="text-sm opacity-70">Email</label> </div>
<p id="userEmail" class="h-[1.75rem] font-medium">Not signed in</p> <div class="skeleton h-8 w-full"></div>
</div> </div>
<div class="divider my-0.5"></div> </div>
<div class="space-y-1"> <div class="divider my-0.5"></div>
<label class="text-sm opacity-70">Member Status</label>
<div class="flex h-[1.75rem] items-center"> <!-- Auth Button -->
<div id="memberStatus" class="badge badge-neutral"> <div class="pt-2">
Not verified <div class="skeleton h-10 w-full"></div>
</div> </div>
</div> </div>
</div> </div>
<div id="officerViewToggle" class="hidden"> </div>
<label </div>
class="flex items-center justify-between w-full px-1 bg-base-200 rounded-lg"
> <!-- Actual Content (hidden by default) -->
<span class="text-sm">Officer View</span> <div id="userInfo" class="card bg-base-200 shadow-xl opacity-0 hidden">
<input type="checkbox" class="toggle toggle-primary" /> <div class="card-body p-0">
</label> <div class="px-6 pt-6">
</div> <h2 class="card-title text-2xl">User Profile</h2>
<div class="divider my-0.5"></div> </div>
<div class="space-y-1"> <div class="px-6 pb-6">
<label class="text-sm opacity-70">IEEE Member ID</label> <div class="space-y-3">
<div class="flex items-center gap-2 h-8"> <div class="space-y-1">
<input <label class="text-sm opacity-70">Name</label>
type="text" <p id="userName" class="h-[1.75rem] font-medium">
id="memberIdInput" Not signed in
placeholder="Enter your IEEE Member ID" </p>
class="input input-bordered w-full h-8 min-h-[2rem] disabled:bg-base-300 disabled:border-2 disabled:border-opacity-50 disabled:cursor-not-allowed" </div>
/> <div class="divider my-0.5"></div>
<button id="saveMemberId" class="btn btn-primary h-8 min-h-[2rem]" <div class="space-y-1">
>Save</button <label class="text-sm opacity-70">Email</label>
> <p id="userEmail" class="h-[1.75rem] font-medium">
</div> Not signed in
<p id="memberIdStatus" class="text-xs mt-1 opacity-70"></p> </p>
</div> </div>
<div class="divider my-0.5"></div> <div class="divider my-0.5"></div>
<div class="space-y-1"> <div class="space-y-1">
<label class="text-sm opacity-70">Last Login</label> <label class="text-sm opacity-70">Member Status</label>
<p id="lastLogin" class="text-sm h-[1.25rem] opacity-80">Never</p> <div class="flex h-[1.75rem] items-center">
</div> <div id="memberStatus" class="badge badge-neutral">
<div class="divider my-0.5"></div> Not verified
<div class="space-y-2"> </div>
<label class="text-sm opacity-70">Resume</label> </div>
<div id="resumeSection" class="space-y-2"> </div>
<div class="flex items-center gap-2 h-[1.25rem]"> <div id="officerViewToggle" class="hidden">
<p id="resumeName" class="text-sm truncate flex-1"> <label
No resume uploaded class="flex items-center justify-between w-full px-1 bg-base-200 rounded-lg"
</p> >
<div id="resumeActions" class="flex gap-2"> <span class="text-sm">Officer View</span>
<a <input
id="resumeDownload" type="checkbox"
href="#" class="toggle toggle-primary"
target="_blank" />
class="btn btn-ghost btn-xs">View</a </label>
> </div>
<button <div class="divider my-0.5"></div>
id="deleteResume" <div class="space-y-1">
class="btn btn-ghost btn-xs text-error">Delete</button <label class="text-sm opacity-70">IEEE Member ID</label>
> <div class="flex items-center gap-2 h-8">
<input
type="text"
id="memberIdInput"
placeholder="Enter your IEEE Member ID"
class="input input-bordered w-full h-8 min-h-[2rem] disabled:bg-base-300 disabled:border-2 disabled:border-opacity-50 disabled:cursor-not-allowed"
disabled
/>
<button
id="saveMemberId"
class="btn h-8 min-h-[2rem] disabled:bg-base-300 disabled:border-2 disabled:border-opacity-50 disabled:cursor-not-allowed enabled:btn-primary"
disabled>Save</button
>
</div>
<p id="memberIdStatus" class="text-xs mt-1 opacity-70">
</p>
</div>
<div class="divider my-0.5"></div>
<div class="space-y-1">
<label class="text-sm opacity-70">Last Login</label>
<p
id="lastLogin"
class="text-sm h-[1.25rem] opacity-80"
>
Never
</p>
</div>
<div class="divider my-0.5"></div>
<div class="space-y-2">
<label class="text-sm opacity-70">Resume</label>
<div id="resumeSection" class="space-y-2">
<div class="flex items-center gap-2 h-[1.25rem]">
<p
id="resumeName"
class="text-sm truncate flex-1"
>
No resume uploaded
</p>
<div id="resumeActions" class="flex gap-2">
<a
id="resumeDownload"
href="#"
target="_blank"
class="btn btn-ghost btn-xs">View</a
>
<button
id="deleteResume"
class="btn btn-ghost btn-xs text-error"
>Delete</button
>
</div>
</div>
<div id="uploadSection">
<input
type="file"
id="resumeUpload"
accept=".pdf,.doc,.docx"
class="file-input file-input-bordered file-input-sm w-full disabled:bg-base-300 disabled:border-2 disabled:border-opacity-50 disabled:cursor-not-allowed"
disabled
/>
<p
id="uploadStatus"
class="text-xs mt-1 opacity-70"
>
</p>
</div>
</div>
</div>
<div class="divider my-0.5"></div>
<div class="pt-2">
<button id="loginButton" class="btn btn-primary w-full"
>Sign in with IEEEUCSD SSO</button
>
<button id="logoutButton" class="btn btn-error w-full"
>Sign Out</button
>
</div>
</div> </div>
</div>
<div id="uploadSection">
<input
type="file"
id="resumeUpload"
accept=".pdf,.doc,.docx"
class="file-input file-input-bordered file-input-sm w-full"
/>
<p id="uploadStatus" class="text-xs mt-1 opacity-70"></p>
</div>
</div> </div>
</div>
<div class="divider my-0.5"></div>
<div class="pt-2">
<button id="loginButton" class="btn btn-primary w-full"
>Sign in with IEEEUCSD SSO</button
>
<button id="logoutButton" class="btn btn-error w-full"
>Sign Out</button
>
</div>
</div> </div>
</div>
</div> </div>
</div>
</div> </div>
<!-- Profile Editor Dialog --> <!-- Profile Editor Dialog -->
<dialog id="profileEditor" class="modal"> <dialog id="profileEditor" class="modal">
<div class="modal-box"> <div class="modal-box">
<h3 class="font-bold text-lg mb-4">Edit Profile</h3> <h3 class="font-bold text-lg mb-4">Edit Profile</h3>
<form class="space-y-4" onsubmit="return false" novalidate> <form class="space-y-4" onsubmit="return false" novalidate>
<div class="form-control"> <div class="form-control">
<label class="label"> <label class="label">
<span class="label-text">Name</span> <span class="label-text">Name</span>
</label> </label>
<input type="text" id="editorName" class="input input-bordered" /> <input
</div> type="text"
<div class="form-control"> id="editorName"
<label class="label"> class="input input-bordered"
<span class="label-text">Email</span> />
</label> </div>
<input <div class="form-control">
type="email" <label class="label">
id="editorEmail" <span class="label-text">Email</span>
class="input input-bordered" </label>
disabled <input
/> type="email"
</div> id="editorEmail"
<div class="form-control"> class="input input-bordered"
<label class="label"> disabled
<span class="label-text">IEEE Member ID</span> />
</label> </div>
<input type="text" id="editorMemberId" class="input input-bordered" /> <div class="form-control">
</div> <label class="label">
<div class="form-control"> <span class="label-text">IEEE Member ID</span>
<label class="label"> </label>
<span class="label-text">Loyalty Points</span> <input
</label> type="text"
<input id="editorMemberId"
type="number" class="input input-bordered"
id="editorPoints" />
min="0" </div>
class="input input-bordered" <div class="form-control">
/> <label class="label">
</div> <span class="label-text">Loyalty Points</span>
<div class="form-control"> </label>
<label class="label"> <input
<span class="label-text">Resume</span> type="number"
</label> id="editorPoints"
<div class="flex flex-col gap-2"> min="0"
<p id="editorCurrentResume" class="text-sm opacity-70"> class="input input-bordered"
No resume uploaded />
</p> </div>
<input <div class="form-control">
type="file" <label class="label">
id="editorResume" <span class="label-text">Resume</span>
accept=".pdf,.doc,.docx" </label>
class="file-input file-input-bordered file-input-sm w-full" <div class="flex flex-col gap-2">
/> <p id="editorCurrentResume" class="text-sm opacity-70">
</div> No resume uploaded
</div> </p>
<div class="modal-action"> <input
<button type="button" id="saveProfileButton" class="btn btn-primary" type="file"
>Save Changes</button id="editorResume"
> accept=".pdf,.doc,.docx"
<button type="button" class="btn" onclick="profileEditor.close()" class="file-input file-input-bordered file-input-sm w-full"
>Cancel</button />
> </div>
</div> </div>
<div class="modal-action">
<button
type="button"
id="saveProfileButton"
class="btn btn-primary">Save Changes</button
>
<button
type="button"
class="btn"
onclick="profileEditor.close()">Cancel</button
>
</div>
</form>
</div>
<form method="dialog" class="modal-backdrop">
<button>close</button>
</form> </form>
</div>
<form method="dialog" class="modal-backdrop">
<button>close</button>
</form>
</dialog> </dialog>
<style> <style>
.hidden { .hidden {
display: none; display: none;
} }
#userInfo { #userInfo {
transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out;
} }
.modal { .modal {
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);
} }
.modal::backdrop { .modal::backdrop {
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);
} }
</style> </style>