disable button when not logged in

src/components/auth/StoreAuth.ts

@@ -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();
 

src/components/auth/UserProfile.astro

@@ -79,12 +79,16 @@
                 <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>
+                        <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>
+                        <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">
@@ -100,7 +104,10 @@
                             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" />
+                            <input
+                                type="checkbox"
+                                class="toggle toggle-primary"
+                            />
                         </label>
                     </div>
                     <div class="divider my-0.5"></div>
@@ -112,24 +119,36 @@
                                 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 btn-primary h-8 min-h-[2rem]"
+                            <button
-                >Save</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>
+                        <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>
+                        <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">
+                                <p
+                                    id="resumeName"
+                                    class="text-sm truncate flex-1"
+                                >
                                     No resume uploaded
                                 </p>
                                 <div id="resumeActions" class="flex gap-2">
@@ -141,7 +160,8 @@
                                     >
                                     <button
                                         id="deleteResume"
-                    class="btn btn-ghost btn-xs text-error">Delete</button
+                                        class="btn btn-ghost btn-xs text-error"
+                                        >Delete</button
                                     >
                                 </div>
                             </div>
@@ -150,9 +170,14 @@
                                     type="file"
                                     id="resumeUpload"
                                     accept=".pdf,.doc,.docx"
-                  class="file-input file-input-bordered file-input-sm w-full"
+                                    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>
+                                <p
+                                    id="uploadStatus"
+                                    class="text-xs mt-1 opacity-70"
+                                >
+                                </p>
                             </div>
                         </div>
                     </div>
@@ -180,7 +205,11 @@
                 <label class="label">
                     <span class="label-text">Name</span>
                 </label>
-        <input type="text" id="editorName" class="input input-bordered" />
+                <input
+                    type="text"
+                    id="editorName"
+                    class="input input-bordered"
+                />
             </div>
             <div class="form-control">
                 <label class="label">
@@ -197,7 +226,11 @@
                 <label class="label">
                     <span class="label-text">IEEE Member ID</span>
                 </label>
-        <input type="text" id="editorMemberId" class="input input-bordered" />
+                <input
+                    type="text"
+                    id="editorMemberId"
+                    class="input input-bordered"
+                />
             </div>
             <div class="form-control">
                 <label class="label">
@@ -227,11 +260,15 @@
                 </div>
             </div>
             <div class="modal-action">
-        <button type="button" id="saveProfileButton" class="btn btn-primary"
+                <button
-          >Save Changes</button
+                    type="button"
+                    id="saveProfileButton"
+                    class="btn btn-primary">Save Changes</button
                 >
-        <button type="button" class="btn" onclick="profileEditor.close()"
+                <button
-          >Cancel</button
+                    type="button"
+                    class="btn"
+                    onclick="profileEditor.close()">Cancel</button
                 >
             </div>
         </form>