Project Documentation

Backend (Python - API)

File: api/main.py

This module serves as the main entry point and contains all backend logic for the FastAPI application. It initializes the FastAPI app, configures middleware (CORS), mounts static files, defines all API endpoints, handles database initialization, and manages authentication. The original modular structure using api/core/ and api/routers/ has been consolidated into this single file.

Key Components within api/main.py:

1. Firestore Initialization (Previously api/core/firebase_config.py)

   • Purpose: Initializes the connection to Google Firestore using serviceAccountKey.json. Provides the get_db() dependency function.
   • Functionality: Loads credentials, creates the global AsyncClient instance (db), and handles initialization errors. The get_db() function returns this client instance or raises a RuntimeError if initialization failed.

2. Security / Authentication (Previously api/core/security.py)

   • Purpose: Handles user authentication by insecurely decoding Firebase ID tokens from the Authorization header. Provides get_current_user() and get_current_user_optional() dependency functions.
   • Functionality: Defines oauth2_scheme (HTTPBearer). The get_unverified_token_data function extracts UID/email from the token payload without signature verification. get_current_user uses this data to return a User object for protected routes, raising 401 if the token is invalid or missing UID. get_current_user_optional allows routes to proceed without authentication if no valid token is provided.
   • Security Note: Token processing remains insecure (no signature verification).

3. FastAPI App Setup

   • Initializes the FastAPI app instance.
   • Configures CORS middleware to allow all origins (*).
   • Mounts the /js path to serve static files from the js directory.

4. Board Endpoints (Previously api/routers/boards.py)

   • All endpoints related to boards are defined here using @app.post, @app.get, @app.put, @app.delete decorators with the full path prefix (e.g., /api/boards, /api/boards/{board_id}).
   • create_board: POST /api/boards - Creates a new board.
   • list_user_boards: GET /api/boards - Lists boards for the current user.
   • get_board: GET /api/boards/{board_id} - Gets details of a specific board.
   • update_board: PUT /api/boards/{board_id} - Updates a board (owner only).
   • delete_board: DELETE /api/boards/{board_id} - Deletes a board (owner only, checks for members/tasks).
   • add_member_to_board: PUT /api/boards/{board_id}/members - Adds a member to a board (owner only).
   • remove_member_from_board: DELETE /api/boards/{board_id}/members/{member_uid} - Removes a member and updates their tasks (owner only, uses transaction).

5. Task Endpoints (Previously api/routers/tasks.py)

   • All endpoints related to tasks are defined here using @app. decorators with the full path prefix (e.g., /api/boards/{board_id}/tasks, /api/boards/{board_id}/tasks/{task_id}).
   • The helper function _check_board_membership is now defined globally within main.py.
   • create_task: POST /api/boards/{board_id}/tasks - Creates a task within a board.
   • list_tasks_in_board: GET /api/boards/{board_id}/tasks - Lists tasks for a specific board.
   • get_task: GET /api/boards/{board_id}/tasks/{task_id} - Gets details of a specific task.
   • update_task: PUT /api/boards/{board_id}/tasks/{task_id} - Updates a task.
   • update_task_completion: PUT /api/boards/{board_id}/tasks/{task_id}/complete - Updates task completion status.
   • delete_task: DELETE /api/boards/{board_id}/tasks/{task_id} - Deletes a task.

6. User Endpoints (Previously api/routers/users.py)

   • Endpoints related to users are defined here using @app. decorators.
   • get_user_details_batch: POST /api/users/details - Returns a list of UIDs provided in the request (email fetching was removed due to constraints).

7. Page Serving Endpoints (Original api/main.py routes)

   • read_index: GET / - Serves index.html.
   • read_auth: GET /auth - Serves auth.html.
   • read_board_detail: GET /board - Serves board.html.
   • (Note: Health check and favicon routes were removed in the consolidation but could be added back if needed).

Frontend (JavaScript)

File: js/firebase-login.js

This module serves as the central point for Firebase initialization and authentication logic on the frontend. It initializes the Firebase app, authentication, and Firestore services, and provides wrapper functions for common authentication actions (sign up, sign in, sign out) and utility functions for managing user details in local storage.

Global Initialization:

• Purpose: Initializes the Firebase application using the provided configuration object (firebaseConfig). It then gets instances of the Firebase Authentication (auth) and Firestore (db) services.
• Key Variables:
  • app: The initialized Firebase app instance.
  • auth: The Firebase Authentication service instance.
  • db: The Firestore database service instance.

Exported Functions:

• signUpUser(email, password)

  • Purpose: Handles the user sign-up process using Firebase Authentication.
  • Functionality: Calls Firebase's createUserWithEmailAndPassword function. On success, it saves the user's email and UID to local storage and returns the userCredential. On failure, it calls handleError and re-throws the error.

• signInUser(email, password)

  • Purpose: Handles the user sign-in process using Firebase Authentication.
  • Functionality: Calls Firebase's signInWithEmailAndPassword function. On success, it saves the user's email and UID to local storage and returns the userCredential. On failure, it calls handleError and re-throws the error.

• signOutUser()

  • Purpose: Handles the user sign-out process.
  • Functionality: Clears the user's email and UID from local storage. Calls Firebase's signOut function. On failure, it calls handleError and re-throws the error.

• saveEmailToLocalStorage(email)

  • Purpose: Saves the user's email address to the browser's local storage.
  • Functionality: Uses localStorage.setItem with the key userEmail.

• getEmailFromLocalStorage()

  • Purpose: Retrieves the user's email address from local storage.
  • Functionality: Uses localStorage.getItem with the key userEmail.

• clearEmailFromLocalStorage()

  • Purpose: Removes the user's email address from local storage.
  • Functionality: Uses localStorage.removeItem with the key userEmail.

• setUidInLocalStorage(uid)

  • Purpose: Saves the user's Firebase UID to local storage.
  • Functionality: Uses localStorage.setItem with the key userUid.

• getUidFromLocalStorage()

  • Purpose: Retrieves the user's Firebase UID from local storage.
  • Functionality: Uses localStorage.getItem with the key userUid.

• clearUidFromLocalStorage()

  • Purpose: Removes the user's Firebase UID from local storage.
  • Functionality: Uses localStorage.removeItem with the key userUid.

Internal Helper Functions:

• handleError(error)
  • Purpose: Provides basic error handling and logging for Firebase Authentication errors.
  • Functionality: Logs the error code and message to the console. Uses a switch statement to log more specific details for common authentication error codes (e.g., invalid email, user not found, wrong password, email already in use).

File: js/auth-app.js

This module manages the user interface and logic for the authentication page (auth.html), handling both login and sign-up processes. It interacts with the firebase-login.js module for actual Firebase authentication calls and also interacts with Firestore to ensure a user document exists after authentication.

Global Variables:

• References to various DOM elements (tabs, input fields, buttons, error/status divs).
• usersCollectionRef: A Firestore CollectionReference pointing to the "users" collection.

Functions:

• switchTab(tabName)

  • Purpose: Controls the visibility of the login and sign-up forms based on which tab (login or signup) is clicked.
  • Functionality: Toggles CSS classes (active) on the tab buttons and content divs to show the selected form and hide the other. It also hides any previous error messages.

• getOrCreateUserDocument(user)

  • Purpose: Ensures that a corresponding user document exists in the Firestore "users" collection after a successful authentication. If it doesn't exist, it creates one.
  • Functionality: Takes the Firebase user object as input. Constructs a DocumentReference using the user's UID within the usersCollectionRef. Attempts to getDoc. If the document exists, it returns the data. If it doesn't exist, it creates a new document using setDoc with the user's UID, email, display name (if available), and a server timestamp for created_at. Handles potential Firestore errors during the get/set process and displays them in the authErrorDiv.

• onAuthSuccess(user)

  • Purpose: Callback function executed upon successful login or sign-up.
  • Functionality: Updates the UI (authStatusDiv) to show a success message. Calls getOrCreateUserDocument to ensure the user profile exists in Firestore. After a short delay (setTimeout), redirects the user to the main application page (/index.html).

• onAuthError(error)

  • Purpose: Callback function executed when a login or sign-up attempt fails.
  • Functionality: Logs the error to the console. Updates the UI (authErrorDiv) to display the error message. Clears any status messages. Re-enables the login/signup submit buttons.

Event Listeners:

• Login/Signup Tab Buttons (tab-login-btn, tab-signup-btn)

  • Purpose: Trigger the switchTab function when the corresponding tab button is clicked.

• Login Submit Button (login-button-submit)

  • Purpose: Initiates the login process when clicked.
  • Functionality: Reads email and password from input fields. Performs basic validation (checks if fields are empty). Updates UI to show "Attempting login..." and disables the button. Dynamically imports and calls the signInUser function from firebase-login.js. Calls onAuthSuccess on success or onAuthError on failure.

• Signup Submit Button (signup-button-submit)

  • Purpose: Initiates the sign-up process when clicked.
  • Functionality: Reads email and password. Performs validation (checks for empty fields, minimum password length). Updates UI to show "Attempting signup..." and disables the button. Dynamically imports and calls the signUpUser function from firebase-login.js. Calls onAuthSuccess on success or onAuthError on failure.

• onAuthStateChanged Listener (Firebase Auth)

  • Purpose: Checks the user's authentication state when the page loads or the state changes.
  • Functionality: If a user is detected (already logged in), it immediately redirects them to /index.html. If no user is logged in, it updates the status message (authStatusDiv) to prompt for login or sign-up.

File: js/app.js

This module controls the main application page (index.html), which primarily displays the list of the user's task boards and allows for the creation of new boards. It handles user authentication state, fetches board data from the backend API, and manages the user navigation menu.

Global Variables:

• References to various DOM elements (navigation menu, board list, creation form, loader, etc.).
• currentUser: Stores the currently authenticated Firebase user object.
• API_BASE_URL: The base URL for the backend API.

Functions:

• showLoader() / hideLoader()

  • Purpose: Controls the visibility of the global loading overlay.
  • Functionality: Adds or removes the loader-hidden CSS class from the globalLoader element.

• getIdToken()

  • Purpose: Retrieves the current user's Firebase ID token for authenticating API requests.
  • Functionality: Checks if a user is logged in via auth.currentUser. If so, calls auth.currentUser.getIdToken(). Handles potential errors, including token expiration, by alerting the user and redirecting to the login page (/auth.html). Returns the token string or null on failure.

• fetchUserBoardsFromAPI()

  • Purpose: Fetches the list of boards (owned and member) associated with the current user from the backend API.
  • Functionality: Shows the loader. Gets the ID token using getIdToken(). Makes a GET request to the /api/boards endpoint with the token in the Authorization header. Handles potential 401 errors by redirecting to login. Parses the JSON response. Updates the board list UI with an error message on failure. Hides the loader. Returns the array of board objects on success or an empty array on failure.

• createNewBoardAPI(boardName)

  • Purpose: Sends a request to the backend API to create a new task board.
  • Functionality: Gets the ID token using getIdToken(). Makes a POST request to the /api/boards endpoint with the token and the new board name in the request body. Handles potential 401 errors. Parses the JSON response containing the newly created board data. Returns the new board object on success or throws an error on failure.

• toggleUserMenu()

  • Purpose: Toggles the visibility of the user dropdown menu in the navigation bar.
  • Functionality: Toggles the hidden CSS class on the userMenuDropdown element.

• copyUidToClipboard()

  • Purpose: Copies the current user's Firebase UID to the clipboard.
  • Functionality: Retrieves the UID from the currentUser object or local storage. Uses the navigator.clipboard.writeText API to copy the UID. Shows an alert message on success or failure. Toggles the user menu closed after copying.

• updateNavAuthUI(user)

  • Purpose: Updates the navigation bar UI elements based on the user's authentication state.
  • Functionality: If a user object is provided, it hides the loading indicator, shows the user menu container, displays the user's email, and ensures the dropdown is hidden. If user is null, it hides the user menu container and shows the "Logged out" status indicator.

• updateUIForLoggedInUser(user)

  • Purpose: Updates the overall page UI when a user is confirmed to be logged in.
  • Functionality: Calls updateNavAuthUI to update the navigation bar. Shows the main content area of the page.

• updateUIForLoggedOutUser()

  • Purpose: Updates the overall page UI when a user is confirmed to be logged out.
  • Functionality: Calls updateNavAuthUI to update the navigation bar. Hides the main content area. Displays a "Please log in" message in the task board list area.

• displayTaskBoards(boards)

  • Purpose: Renders the list of task boards into the designated DOM element (taskBoardListDiv).
  • Functionality: Clears the existing content of the list div. If the boards array is empty or null, displays a "No task boards found" message. Otherwise, maps over the boards array, generating HTML for each board. The HTML includes the board name, a marker indicating "Owner" or "Member" based on the is_owner flag, appropriate background colors, and an onclick handler to navigate to the specific board page (/board.html?id=...). Sets the generated HTML as the innerHTML of the list div.

• handleCreateBoardClick()

  • Purpose: Handles the logic when the "Create Board" button is clicked.
  • Functionality: Clears any previous error messages. Gets the trimmed board name from the input field. Performs validation (checks for empty name, checks if user is logged in). Shows the loader and disables the button. Calls createNewBoardAPI to create the board via the backend. On success, clears the input field, calls fetchUserBoardsFromAPI to refresh the board list, and calls displayTaskBoards to render the updated list. On failure, displays an error message and hides the loader. Re-enables the button in the finally block.

• handleLogoutMenuClick()

  • Purpose: Handles the logic when the "Logout" option in the user menu is clicked.
  • Functionality: Shows the loader and disables the logout button visually. Calls the signOutUser function from firebase-login.js. Logs success or failure. Hides the loader (note: redirection on successful logout is handled by the onAuthStateChanged listener).

Event Listeners:

• onAuthStateChanged Listener (Firebase Auth)

  • Purpose: Monitors the user's authentication state globally for the application.
  • Functionality: When the state changes (login/logout), it updates the currentUser variable. If a user logs in, it calls updateUIForLoggedInUser and then fetches and displays the user's boards (fetchUserBoardsFromAPI, displayTaskBoards). If a user logs out, it calls updateUIForLoggedOutUser, hides the loader, and redirects to the authentication page (/auth.html) if not already there.

• User Menu Button (user-menu-button)

  • Purpose: Toggles the user dropdown menu when clicked.
  • Functionality: Calls toggleUserMenu.

• Copy UID Button (copy-uid-button)

  • Purpose: Copies the user's UID when clicked.
  • Functionality: Calls copyUidToClipboard.

• Logout Menu Button (logout-menu-button)

  • Purpose: Initiates the logout process when clicked.
  • Functionality: Calls handleLogoutMenuClick.

• Document Click Listener

  • Purpose: Closes the user dropdown menu if a click occurs anywhere outside the menu container.
  • Functionality: Checks if the click target is outside the userMenuContainer. If so, hides the userMenuDropdown.

• Create Board Button (create-board-button)

  • Purpose: Initiates the board creation process when clicked.
  • Functionality: Calls handleCreateBoardClick.

File: js/board-app.js

This module manages the user interface and logic for the individual board page (board.html). It handles fetching board details and tasks, displaying them, and enabling user interactions like adding/editing/deleting tasks, managing board members, renaming/deleting the board, and updating task completion status. It relies heavily on API calls to the backend.

Global Variables:

• References to numerous DOM elements (board name, task list, modals, forms, buttons, menus, loader, etc.).
• currentBoardId: Stores the ID of the board currently being viewed, extracted from the URL.
• currentUser: Stores the currently authenticated Firebase user object.
• currentBoardData: Stores the fetched data for the current board (including member list, owner ID, etc.).
• API_BASE_URL: The base URL for the backend API.

Helper Functions:

• showLoader() / hideLoader() / showActionLoader() / hideActionLoader()

  • Purpose: Controls the visibility of the global loading overlay. show/hideActionLoader are aliases for clarity in specific contexts.
  • Functionality: Adds or removes the loader-hidden CSS class from the globalLoader element.

• getIdToken()

  • Purpose: Retrieves the current user's Firebase ID token for authenticating API requests.
  • Functionality: (Identical to the one in js/app.js) Checks login status, calls auth.currentUser.getIdToken(), handles errors (including token expiration), and returns the token or null.

• getBoardIdFromUrl()

  • Purpose: Extracts the board ID from the URL's query parameters (e.g., ?id=BOARD_ID).
  • Functionality: Uses URLSearchParams to get the value of the id parameter. If not found, logs an error and calls displayBoardError. Returns the extracted board ID or null.

• displayBoardError(message)

  • Purpose: Displays an error state on the page when loading or interacting with the board fails.
  • Functionality: Shows the main content area, sets the board title to "Error", displays the error message in the boardErrorDiv, clears the task list and counters, and hides action buttons and the member list.

• displayMemberList(boardData, currentUserUid)

  • Purpose: Renders the list of board members (excluding the owner) in the designated section, visible only to the board owner.
  • Functionality: Checks if the current user is the owner. If not, hides the section. Clears previous content and errors. Filters the member_ids from boardData to exclude the owner. If no other members exist, displays a message. Otherwise, maps over the non-owner member UIDs, creating HTML for each member (displaying their UID) and a "Remove" button. Attaches event listeners (handleRemoveMemberClickUI) to the remove buttons.

• populateAssigneeCheckboxes(listDiv, boardData, namePrefix, preSelectedUids = new Set())

  • Purpose: Dynamically generates and populates a list of checkboxes representing board members, used for assigning tasks in modals.
  • Functionality: Takes the target DOM element (listDiv), board data, a prefix for input names/IDs, and an optional Set of UIDs to pre-select. Clears the listDiv. If no members exist, displays a message. Otherwise, maps over all member_ids from boardData, creating an input checkbox and label for each member (displaying their UID). Checks the box if the member's UID is in preSelectedUids. Sets the generated HTML as the innerHTML of the listDiv.

• displayBoardDetails(boardData)

  • Purpose: Updates the UI with the general details of the loaded board (name, owner-specific actions).
  • Functionality: Stores the fetched boardData globally. Sets the board name (boardNameH1) and the page title. Checks if the current user (currentUser) is the owner (boardData.is_owner). If owner, shows the board action buttons (rename, add member, delete) and calls displayMemberList. If not owner, hides these actions and the member list section.

• displayTasks(tasks)

  • Purpose: Renders the list of tasks for the current board into the taskListDiv.
  • Functionality: Calculates and displays task counters (Total, Active, Completed). If no tasks exist, displays a message. Otherwise, maps over the tasks array, generating HTML for each task item. The HTML includes:
    • A checkbox for completion status (.task-complete-checkbox).
    • Task title (with line-through if complete).
    • Formatted due date (if available).
    • List of assigned user UIDs.
    • Completion timestamp (if complete).
    • An "Unassigned" marker if is_unassigned is true.
    • "Edit" and "Delete" buttons (.edit-task-btn, .delete-task-btn).
    • Appropriate background styling based on completion/unassigned status.
  • Attaches event listeners (handleTaskCompletionChange) to the completion checkboxes. Uses event delegation on taskListDiv for edit/delete buttons.

• closeAddTaskConfirmModal() / closeEditTaskModal()

  • Purpose: Hides the respective modal dialogs and clears any error messages within them.
  • Functionality: Adds the hidden CSS class to the modal's main element and its error div.

• openEditTaskModal(taskId)

  • Purpose: Fetches the details of a specific task and populates/opens the "Edit Task" modal.
  • Functionality: Shows the loader. Makes a GET request to the API endpoint for the specific task (/api/boards/{boardId}/tasks/{taskId}). On success, populates the modal's input fields (ID, title, due date) with the fetched task data. Calls populateAssigneeCheckboxes to render the member list with the task's current assignees pre-selected. Shows the modal. Handles errors during the fetch. Hides the loader.

• updateNavAuthUI(user)

  • Purpose: Updates the navigation bar UI based on authentication state (similar to js/app.js, potentially redundant but included here). Includes fallback to local storage email if user object isn't fully loaded yet.
  • Functionality: Shows/hides user menu, updates email display, hides loading state based on user object or stored email.

• toggleUserMenu() / copyUidToClipboard()

  • Purpose: Handle user menu toggle and UID copying.
  • Functionality: (Identical to functions in js/app.js).

API Call Wrapper Functions:

• fetchBoardDetailsAPI(boardId): Wraps GET /api/boards/{boardId}.
• fetchTasksForBoardAPI(boardId): Wraps GET /api/boards/{boardId}/tasks. Parses date strings into Date objects.
• addTaskToBoardAPI(boardId, taskData): Wraps POST /api/boards/{boardId}/tasks. Shows/hides loader.
• updateTaskCompletionAPI(boardId, taskId, isComplete): Wraps PUT /api/boards/{boardId}/tasks/{taskId}/complete. Shows/hides loader.
• updateTaskAPI(boardId, taskId, updateData): Wraps PUT /api/boards/{boardId}/tasks/{taskId}. Shows/hides loader.
• deleteTaskAPI(boardId, taskId): Wraps DELETE /api/boards/{boardId}/tasks/{taskId}. Shows/hides loader.
• renameBoardAPI(boardId, newName): Wraps PUT /api/boards/{boardId} (for renaming). Shows/hides loader.
• addMemberAPI(boardId, memberUid): Wraps PUT /api/boards/{boardId}/members. Shows/hides loader.
• removeMemberAPI(boardId, memberUidToRemove): Wraps DELETE /api/boards/{boardId}/members/{memberUid}. Shows/hides loader.
• deleteBoardAPI(boardId): Wraps DELETE /api/boards/{boardId}. Shows/hides loader.
  • Common Functionality: All these functions get the ID token, make the corresponding fetch call with appropriate method, headers (including Authorization), and body, handle 401 errors by redirecting, check for non-OK responses, parse JSON or handle errors, and return the result or throw an error. Most show/hide the global loader.

Event Handler Functions:

• handleDeleteTaskClick(button)

  • Purpose: Handles the click event for a task's delete button.
  • Functionality: Gets task ID and title from the button's dataset. Confirms deletion with the user. Disables the button. Calls deleteTaskAPI. On success, refreshes the task list by calling fetchTasksForBoardAPI and displayTasks. Handles errors by showing an alert and re-enabling the button if possible. Hides the loader.

• handleTaskCompletionChange(event)

  • Purpose: Handles the change event for a task's completion checkbox.
  • Functionality: Gets task ID and completion state from the checkbox. Disables the checkbox. Calls updateTaskCompletionAPI. On success, refreshes the task list (fetchTasksForBoardAPI, displayTasks). On failure, shows an alert and reverts the checkbox state. Re-enables the checkbox after a short delay. Hides the loader.

• handleAddTaskClick()

  • Purpose: Handles the initial click on the "Add Task" button (Step 1: Open confirmation modal).
  • Functionality: Clears errors. Gets title and due date from the main form inputs. Validates title. Populates the confirmation modal's title/date fields. Calls populateAssigneeCheckboxes to fill the assignee list in the modal. Shows the addTaskConfirmModal.

• confirmAndAddTask(assignMembers)

  • Purpose: Handles the confirmation step after the "Add Task" modal is shown (triggered by "Confirm Add" or "Skip Assign").
  • Functionality: Gets title and date from the modal's inputs. If assignMembers is true, gets selected UIDs from the modal's checkboxes. Disables modal buttons and shows loader. Calls addTaskToBoardAPI with the task data. On success, clears the main form inputs, closes the modal, and refreshes the task list (fetchTasksForBoardAPI, displayTasks). Handles errors by displaying them in the modal's error div. Re-enables modal buttons and hides loader in the finally block.

• handleAddMemberClick()

  • Purpose: Handles the click on the "Add Member" button (owner only).
  • Functionality: Clears errors/success messages in the add member section. Clears the input field. Shows the addMemberSection UI and focuses the input field.

• handleCancelAddMemberClick()

  • Purpose: Handles the click on the "Cancel" button in the add member section.
  • Functionality: Hides the addMemberSection and clears any related error/success messages.

• handleSubmitAddMemberClick()

  • Purpose: Handles the click on the "Submit" button in the add member section.
  • Functionality: Gets the member UID from the input field and validates it. Disables buttons and shows loader. Calls addMemberAPI. On success, displays a success message, updates the locally stored currentBoardData, refreshes the displayed member list (displayMemberList), and clears the input field. On failure, displays an error message. Re-enables buttons and hides loader in the finally block.

• handleRemoveMemberClickUI(event)

  • Purpose: Handles the click event for the "Remove" button next to a member's UID in the list.
  • Functionality: Gets the member UID from the button's dataset. Performs checks (is current user the owner? is it trying to remove self?). Confirms removal with the user. Disables the button and shows loader. Calls removeMemberAPI. On success, shows an alert, updates currentBoardData, and refreshes both board details (displayBoardDetails) and the task list (fetchTasksForBoardAPI, displayTasks) to reflect potential task reassignments. Handles errors by displaying them and re-enabling the button. Hides loader.

• handleSaveEditTaskClick()

  • Purpose: Handles the click on the "Save Changes" button in the "Edit Task" modal.
  • Functionality: Gets task ID, title, due date, and selected assignee UIDs from the modal inputs. Performs validation (non-empty title, valid date format). Disables modal buttons and shows loader. Calls updateTaskAPI with the update data. On success, closes the modal and refreshes the task list (fetchTasksForBoardAPI, displayTasks). Handles errors by displaying them in the modal's error div. Re-enables buttons and hides loader in the finally block.

• handleLogoutMenuClick()

  • Purpose: Handles the click on the "Logout" menu item.
  • Functionality: (Identical to the one in js/app.js) Shows loader, calls signOutUser, handles errors.

• handleDeleteBoardClick()

  • Purpose: Handles the click on the "Delete Board" button (owner only).
  • Functionality: Performs owner check. Confirms deletion with the user. Disables button and shows loader. Calls deleteBoardAPI. On success, shows an alert and redirects the user to the main page (/). Handles errors by showing an alert and re-enabling the button. Hides loader.

• handleRenameBoardClick()

  • Purpose: Handles the click on the "Rename Board" button (owner only).
  • Functionality: Performs owner check. Uses prompt() to get the new name from the user. Validates the new name (non-empty, different from current). Disables button and shows loader. Calls renameBoardAPI. On success, updates the board title (boardNameH1), page title, updates currentBoardData, and shows an alert. Handles errors by showing an alert. Re-enables button and hides loader in the finally block.

• loadBoardPage()

  • Purpose: The main function to initialize and load all data for the board page.
  • Functionality: Checks if a user is logged in. Gets the board ID from the URL using getBoardIdFromUrl(). Shows the loader and hides the main content initially. Clears previous board/task content. Uses Promise.all to concurrently fetch board details (fetchBoardDetailsAPI) and tasks (fetchTasksForBoardAPI). On success, calls displayBoardDetails and displayTasks to render the fetched data. Sets a default value for the "new task due date" input. Handles errors during fetching by calling displayBoardError. Hides the loader and shows the main content area in the finally block.

Event Listeners:

• onAuthStateChanged Listener (Firebase Auth)

  • Purpose: Monitors the user's authentication state for the board page.
  • Functionality: Updates currentUser. If a user is authenticated, calls loadBoardPage to fetch and display board data. If the user is not authenticated, redirects to the login page (/auth.html) or displays an error if already on the auth page (though unlikely for board.html). Clears local board state (currentBoardId, currentBoardData).

• Add Task Button (addTaskButton)

  • Purpose: Opens the add task confirmation modal.
  • Functionality: Calls handleAddTaskClick.

• Add Task Confirm Modal Buttons (confirmAddTaskButton, skipAssignAddTaskButton, cancelAddTaskConfirmButton)

  • Purpose: Handle actions within the add task confirmation modal.
  • Functionality: Call confirmAndAddTask(true), confirmAndAddTask(false), or closeAddTaskConfirmModal respectively.

• Add Member Form Buttons (addMemberBtn, submitAddMemberBtn, cancelAddMemberBtn)

  • Purpose: Handle interactions with the add member section.
  • Functionality: Call handleAddMemberClick, handleSubmitAddMemberClick, or handleCancelAddMemberClick respectively.

• Other Board Action Buttons (renameBoardBtn, deleteBoardBtn)

  • Purpose: Handle board renaming and deletion.
  • Functionality: Call handleRenameBoardClick or handleDeleteBoardClick respectively.

• Nav Menu Buttons (userMenuButton, copyUidButton, logoutMenuButton)

  • Purpose: Handle navigation menu interactions.
  • Functionality: Call toggleUserMenu, copyUidToClipboard, or handleLogoutMenuClick respectively.

• Document Click Listener

  • Purpose: Closes the user dropdown menu if clicked outside.
  • Functionality: (Identical to the one in js/app.js).

• Task List Click Listener (Event Delegation on taskListDiv)

  • Purpose: Handles clicks on "Edit" and "Delete" buttons within the dynamically generated task list.
  • Functionality: Checks if the clicked element or its parent is an edit or delete button. If it's an edit button, gets the taskId and calls openEditTaskModal. If it's a delete button, calls handleDeleteTaskClick with the button element.

• Edit Task Modal Buttons (cancelEditTaskButton, saveEditTaskButton)

  • Purpose: Handle actions within the edit task modal.
  • Functionality: Call closeEditTaskModal or handleSaveEditTaskClick respectively.