disable button when not logged in
This commit is contained in:
chark1es
parent
5fbcc7e2a0
commit
50960f6939
2 changed files with 290 additions and 239 deletions
|
|
@ -284,9 +284,17 @@ export class StoreAuth {
|
|||
if (this.pb.authStore.isValid && this.pb.authStore.model) {
|
||||
// Update all the user information first
|
||||
const user = this.pb.authStore.model;
|
||||
|
||||
userName.textContent = user.name || "Name not provided";
|
||||
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
|
||||
if (user.verified) {
|
||||
// Check and update member_type if not set
|
||||
|
|
@ -398,9 +406,15 @@ export class StoreAuth {
|
|||
memberStatus.classList.add("badge-neutral");
|
||||
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
|
||||
memberIdInput.value = "";
|
||||
memberIdInput.disabled = true;
|
||||
this.isEditingMemberId = false;
|
||||
this.updateMemberIdState();
|
||||
|
||||
|
|
|
|||
|
|
@ -1,257 +1,294 @@
|
|||
<div>
|
||||
<!-- Loading Skeleton (shown by default) -->
|
||||
<div id="loadingSkeleton" class="card bg-base-200 shadow-xl">
|
||||
<div class="card-body p-0">
|
||||
<div class="px-6 pt-6">
|
||||
<!-- Title -->
|
||||
<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>
|
||||
<!-- Loading Skeleton (shown by default) -->
|
||||
<div id="loadingSkeleton" class="card bg-base-200 shadow-xl">
|
||||
<div class="card-body p-0">
|
||||
<div class="px-6 pt-6">
|
||||
<!-- Title -->
|
||||
<h2 class="skeleton h-8 w-40 card-title"></h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider my-0.5"></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>
|
||||
|
||||
<!-- Last Login -->
|
||||
<div class="space-y-1">
|
||||
<div class="skeleton h-3 w-20 opacity-70"></div>
|
||||
<div class="skeleton h-[1.25rem] w-32"></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>
|
||||
|
||||
<!-- Resume -->
|
||||
<div class="space-y-1">
|
||||
<div class="skeleton h-3 w-16 opacity-70"></div>
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="skeleton h-[1.25rem] flex-1"></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>
|
||||
<!-- 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>
|
||||
|
||||
<!-- Auth Button -->
|
||||
<div class="pt-2">
|
||||
<div class="skeleton h-10 w-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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 class="divider my-0.5"></div>
|
||||
|
||||
<!-- Actual Content (hidden by default) -->
|
||||
<div id="userInfo" class="card bg-base-200 shadow-xl opacity-0 hidden">
|
||||
<div class="card-body p-0">
|
||||
<div class="px-6 pt-6">
|
||||
<h2 class="card-title text-2xl">User Profile</h2>
|
||||
</div>
|
||||
<div class="px-6 pb-6">
|
||||
<div class="space-y-3">
|
||||
<div class="space-y-1">
|
||||
<label class="text-sm opacity-70">Name</label>
|
||||
<p id="userName" class="h-[1.75rem] font-medium">Not signed in</p>
|
||||
</div>
|
||||
<div class="divider my-0.5"></div>
|
||||
<div class="space-y-1">
|
||||
<label class="text-sm opacity-70">Email</label>
|
||||
<p id="userEmail" class="h-[1.75rem] font-medium">Not signed in</p>
|
||||
</div>
|
||||
<div class="divider my-0.5"></div>
|
||||
<div class="space-y-1">
|
||||
<label class="text-sm opacity-70">Member Status</label>
|
||||
<div class="flex h-[1.75rem] items-center">
|
||||
<div id="memberStatus" class="badge badge-neutral">
|
||||
Not verified
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="officerViewToggle" class="hidden">
|
||||
<label
|
||||
class="flex items-center justify-between w-full px-1 bg-base-200 rounded-lg"
|
||||
>
|
||||
<span class="text-sm">Officer View</span>
|
||||
<input type="checkbox" class="toggle toggle-primary" />
|
||||
</label>
|
||||
</div>
|
||||
<div class="divider my-0.5"></div>
|
||||
<div class="space-y-1">
|
||||
<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"
|
||||
/>
|
||||
<button id="saveMemberId" class="btn btn-primary h-8 min-h-[2rem]"
|
||||
>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
|
||||
>
|
||||
<!-- Last Login -->
|
||||
<div class="space-y-1">
|
||||
<div class="skeleton h-3 w-20 opacity-70"></div>
|
||||
<div class="skeleton h-[1.25rem] w-32"></div>
|
||||
</div>
|
||||
<div class="divider my-0.5"></div>
|
||||
|
||||
<!-- Resume -->
|
||||
<div class="space-y-1">
|
||||
<div class="skeleton h-3 w-16 opacity-70"></div>
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="skeleton h-[1.25rem] flex-1"></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 -->
|
||||
<div class="pt-2">
|
||||
<div class="skeleton h-10 w-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actual Content (hidden by default) -->
|
||||
<div id="userInfo" class="card bg-base-200 shadow-xl opacity-0 hidden">
|
||||
<div class="card-body p-0">
|
||||
<div class="px-6 pt-6">
|
||||
<h2 class="card-title text-2xl">User Profile</h2>
|
||||
</div>
|
||||
<div class="px-6 pb-6">
|
||||
<div class="space-y-3">
|
||||
<div class="space-y-1">
|
||||
<label class="text-sm opacity-70">Name</label>
|
||||
<p id="userName" class="h-[1.75rem] font-medium">
|
||||
Not signed in
|
||||
</p>
|
||||
</div>
|
||||
<div class="divider my-0.5"></div>
|
||||
<div class="space-y-1">
|
||||
<label class="text-sm opacity-70">Email</label>
|
||||
<p id="userEmail" class="h-[1.75rem] font-medium">
|
||||
Not signed in
|
||||
</p>
|
||||
</div>
|
||||
<div class="divider my-0.5"></div>
|
||||
<div class="space-y-1">
|
||||
<label class="text-sm opacity-70">Member Status</label>
|
||||
<div class="flex h-[1.75rem] items-center">
|
||||
<div id="memberStatus" class="badge badge-neutral">
|
||||
Not verified
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="officerViewToggle" class="hidden">
|
||||
<label
|
||||
class="flex items-center justify-between w-full px-1 bg-base-200 rounded-lg"
|
||||
>
|
||||
<span class="text-sm">Officer View</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="toggle toggle-primary"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div class="divider my-0.5"></div>
|
||||
<div class="space-y-1">
|
||||
<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 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 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>
|
||||
|
||||
<!-- Profile Editor Dialog -->
|
||||
<dialog id="profileEditor" class="modal">
|
||||
<div class="modal-box">
|
||||
<h3 class="font-bold text-lg mb-4">Edit Profile</h3>
|
||||
<form class="space-y-4" onsubmit="return false" novalidate>
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">Name</span>
|
||||
</label>
|
||||
<input type="text" id="editorName" class="input input-bordered" />
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">Email</span>
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="editorEmail"
|
||||
class="input input-bordered"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">IEEE Member ID</span>
|
||||
</label>
|
||||
<input type="text" id="editorMemberId" class="input input-bordered" />
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">Loyalty Points</span>
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="editorPoints"
|
||||
min="0"
|
||||
class="input input-bordered"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">Resume</span>
|
||||
</label>
|
||||
<div class="flex flex-col gap-2">
|
||||
<p id="editorCurrentResume" class="text-sm opacity-70">
|
||||
No resume uploaded
|
||||
</p>
|
||||
<input
|
||||
type="file"
|
||||
id="editorResume"
|
||||
accept=".pdf,.doc,.docx"
|
||||
class="file-input file-input-bordered file-input-sm w-full"
|
||||
/>
|
||||
</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>
|
||||
<div class="modal-box">
|
||||
<h3 class="font-bold text-lg mb-4">Edit Profile</h3>
|
||||
<form class="space-y-4" onsubmit="return false" novalidate>
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">Name</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="editorName"
|
||||
class="input input-bordered"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">Email</span>
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="editorEmail"
|
||||
class="input input-bordered"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">IEEE Member ID</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="editorMemberId"
|
||||
class="input input-bordered"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">Loyalty Points</span>
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
id="editorPoints"
|
||||
min="0"
|
||||
class="input input-bordered"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">Resume</span>
|
||||
</label>
|
||||
<div class="flex flex-col gap-2">
|
||||
<p id="editorCurrentResume" class="text-sm opacity-70">
|
||||
No resume uploaded
|
||||
</p>
|
||||
<input
|
||||
type="file"
|
||||
id="editorResume"
|
||||
accept=".pdf,.doc,.docx"
|
||||
class="file-input file-input-bordered file-input-sm w-full"
|
||||
/>
|
||||
</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>
|
||||
</div>
|
||||
<form method="dialog" class="modal-backdrop">
|
||||
<button>close</button>
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
<style>
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
#userInfo {
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
.modal {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.modal::backdrop {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
#userInfo {
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
.modal {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.modal::backdrop {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue