make user's job/role also a dropdown option

Author: RMCrean

packages/divbase-api/src/divbase_api/api_constants.py

@@ -2,7 +2,7 @@
 DivBase API constants.
 """
 
-# List of Swedish universities for the dropdown in the registration form.
+# List of Swedish universities for the dropdown in the registration/update profile form.
 SWEDISH_UNIVERSITIES = [
     "Blekinge Institute of Technology",
     "Chalmers University of Technology",
@@ -35,3 +35,18 @@
     "Uppsala University",
     "Örebro University",
 ]
+
+# List of known job roles for the dropdown in the registration/update profile form.
+KNOWN_JOB_ROLES = [
+    "Bachelor's Student",
+    "Bioinformatician",
+    "Infrastructure Support Staff",
+    "Master's Student",
+    "PhD Candidate",
+    "Postdoctoral Researcher",
+    "Principal Investigator",
+    "Research Associate",
+    "Researcher",
+    "Scientist",
+    "Technician",
+]

packages/divbase-api/src/divbase_api/crud/users.py

@@ -119,3 +119,18 @@ async def update_user_profile(db: AsyncSession, user_data: UserUpdate, user_id:
     await db.commit()
     await db.refresh(user)
     return user
+
+
+def resolve_dropdown_form_input(dropdown_value: str, other_value: str | None) -> str | None:
+    """
+    Helper to resolve "Other" fields in registration/profile update forms.
+    These fields have a dropdown with predefined options and an "Other" option that reveals a text input.
+    If "Other" selected, we take the value from the text input instead. If the text input is empty or too short, we return None to indicate an error (e.g. in the registration/profile update endpoint), otherwise we return the resolved value. If "Other" is not selected, we just return the original value.
+
+    If non-resolvable, returns None, so calling function can return an error response.
+    """
+    if dropdown_value != "Other":
+        return dropdown_value.strip()
+    if not other_value or len(other_value.strip()) < 3:
+        return None
+    return other_value.strip()

packages/divbase-api/src/divbase_api/frontend_routes/auth.py

@@ -10,7 +10,7 @@
 from sqlalchemy.ext.asyncio import AsyncSession
 
 from divbase_api.api_config import settings
-from divbase_api.api_constants import SWEDISH_UNIVERSITIES
+from divbase_api.api_constants import KNOWN_JOB_ROLES, SWEDISH_UNIVERSITIES
 from divbase_api.crud.auth import (
     authenticate_user,
     check_user_email_verified,
@@ -19,7 +19,7 @@
     update_user_password,
 )
 from divbase_api.crud.revoked_tokens import revoke_token_on_logout, revoke_used_password_reset_token, token_is_revoked
-from divbase_api.crud.users import create_user, get_user_by_email, get_user_by_id_or_raise
+from divbase_api.crud.users import create_user, get_user_by_email, get_user_by_id_or_raise, resolve_dropdown_form_input
 from divbase_api.db import get_db
 from divbase_api.deps import get_current_user_from_cookie_optional
 from divbase_api.exceptions import AuthenticationError
@@ -132,7 +132,11 @@ async def get_register(request: Request, current_user: UserDB | None = Depends(g
     return templates.TemplateResponse(
         request=request,
         name="auth_pages/register.html",
-        context={"current_user": None, "swedish_universities": SWEDISH_UNIVERSITIES},
+        context={
+            "current_user": None,
+            "swedish_universities": SWEDISH_UNIVERSITIES,
+            "known_job_roles": KNOWN_JOB_ROLES,
+        },
     )
 
 
@@ -144,7 +148,8 @@ async def post_register(
     email: str = Form(...),
     organisation: str = Form(...),
     organisation_other: str | None = Form(None),
-    organisation_role: str = Form(...),
+    role: str = Form(...),
+    role_other: str | None = Form(None),
     password: str = Form(...),
     confirm_password: str = Form(...),
     db: AsyncSession = Depends(get_db),
@@ -162,16 +167,20 @@ def registration_failed_response(error_message: str):
                 "email": email,
                 "organisation": organisation,
                 "organisation_other": organisation_other,
-                "organisation_role": organisation_role,
+                "role": role,
+                "role_other": role_other,
                 "swedish_universities": SWEDISH_UNIVERSITIES,
+                "known_job_roles": KNOWN_JOB_ROLES,
             },
         )
 
-    if organisation == "Other":
-        if not organisation_other or len(organisation_other.strip()) < 3:
-            return registration_failed_response("Please specify your organisation")
-        else:
-            organisation = organisation_other.strip()
+    resolved_organisation = resolve_dropdown_form_input(dropdown_value=organisation, other_value=organisation_other)
+    if not resolved_organisation:
+        return registration_failed_response("Please specify your organisation, it must be at least 3 characters long.")
+
+    resolved_role = resolve_dropdown_form_input(dropdown_value=role, other_value=role_other)
+    if not resolved_role:
+        return registration_failed_response("Please specify your role, it must be at least 3 characters long.")
 
     existing_user = await get_user_by_email(db=db, email=email.strip())
     if existing_user:  # Not recommended to specify why failed, just say failed.
@@ -182,8 +191,8 @@ def registration_failed_response(error_message: str):
         user_data = UserCreate(
             name=name.strip(),
             email=email.strip(),
-            organisation=organisation.strip(),
-            organisation_role=organisation_role.strip(),
+            organisation=resolved_organisation.strip(),
+            organisation_role=resolved_role.strip(),
             confirm_password=SecretStr(confirm_password),
             password=SecretStr(password),
         )

packages/divbase-api/src/divbase_api/frontend_routes/profile.py

@@ -11,9 +11,9 @@
 from pydantic import ValidationError
 from sqlalchemy.ext.asyncio import AsyncSession
 
-from divbase_api.api_constants import SWEDISH_UNIVERSITIES
+from divbase_api.api_constants import KNOWN_JOB_ROLES, SWEDISH_UNIVERSITIES
 from divbase_api.crud.projects import create_user_project_responses, get_user_projects_with_roles
-from divbase_api.crud.users import update_user_profile
+from divbase_api.crud.users import resolve_dropdown_form_input, update_user_profile
 from divbase_api.db import get_db
 from divbase_api.deps import get_current_user_from_cookie
 from divbase_api.frontend_routes.core import templates
@@ -52,25 +52,32 @@ async def get_edit_user_profile_endpoint(
     current_user: UserDB = Depends(get_current_user_from_cookie),
 ):
     """Render the edit user's profile page."""
-
+    # little awkward, but this logic is needed to handle the "Other" option for
+    # organisation and roles, and pre-fill each field appropriately on page load.
     organisation_other = None
     organisation = current_user.organisation
     if current_user.organisation not in SWEDISH_UNIVERSITIES:
         organisation_other = current_user.organisation
         organisation = "Other"
 
+    role_other = None
+    role = current_user.organisation_role
+    if current_user.organisation_role not in KNOWN_JOB_ROLES:
+        role_other = current_user.organisation_role
+        role = "Other"
+
     return templates.TemplateResponse(
         request=request,
         name="profile_pages/edit_profile.html",
         context={
             "request": request,
             "current_user": current_user,
             "swedish_universities": SWEDISH_UNIVERSITIES,
-            # Pre-fill the form with the user's current information.
-            # little awkward, but this logic is needed to handle the "Other" option for organisation.
+            "known_job_roles": KNOWN_JOB_ROLES,
             "organisation": organisation,
             "organisation_other": organisation_other,
-            "organisation_role": current_user.organisation_role,
+            "role": role,
+            "role_other": role_other,
         },
     )
 
@@ -82,7 +89,8 @@ async def post_edit_user_profile_endpoint(
     current_user: UserDB = Depends(get_current_user_from_cookie),
     organisation: str = Form(...),
     organisation_other: str | None = Form(None),
-    organisation_role: str = Form(...),
+    role: str = Form(...),
+    role_other: str | None = Form(None),
     db: AsyncSession = Depends(get_db),
 ):
     """
@@ -106,30 +114,33 @@ def edit_profile_failed_response(error_message: str):
                 "name": name,
                 "organisation": organisation,
                 "organisation_other": organisation_other,
-                "organisation_role": organisation_role,
+                "role": role,
+                "role_other": role_other,
             },
         )
 
-    if organisation == "Other":
-        if not organisation_other or len(organisation_other.strip()) < 3:
-            return edit_profile_failed_response(
-                "Please specify your organisation, it must be at least 3 characters long."
-            )
-        else:
-            organisation = organisation_other.strip()
+    resolved_organisation = resolve_dropdown_form_input(dropdown_value=organisation, other_value=organisation_other)
+    if not resolved_organisation:
+        return edit_profile_failed_response("Please specify your organisation, it must be at least 3 characters long.")
+
+    resolved_role = resolve_dropdown_form_input(dropdown_value=role, other_value=role_other)
+    if not resolved_role:
+        return edit_profile_failed_response("Please specify your role, it must be at least 3 characters long.")
 
     try:
         user_data = UserUpdate(
             name=name.strip(),
-            organisation=organisation.strip(),
-            organisation_role=organisation_role.strip(),
+            organisation=resolved_organisation.strip(),
+            organisation_role=resolved_role.strip(),
         )
     except ValidationError as e:
         # This "should" not have happened, either:
         # Some mismatch in backend vs frontend validation logic or
         # someone bypassing client side validation (could be accidently or intentionally).
         logger.warning(f"User profile update failed backend validation for user_id: {current_user.id} - {e.errors()}")
-        return edit_profile_failed_response("Invalid input, please check your data and try again.")
+        return edit_profile_failed_response(
+            "Invalid input, please check your inputs match the required formats and try again."
+        )
 
     _ = await update_user_profile(db=db, user_id=current_user.id, user_data=user_data)
     return RedirectResponse(url="/profile", status_code=status.HTTP_303_SEE_OTHER)

packages/divbase-api/src/divbase_api/static/js/organisation_dropdown.js

@@ -0,0 +1,106 @@
+/*  
+For both the organisation and role dropdowns in the registration and edit profile forms, 
+we want to allow users to select "Other" and then specify their organisation/role if it's not listed.
+
+This handles toggling the new text input for the organisation when "Other" is selected in the organisation dropdown,
+and the new text input for the role when "Other" is selected in the role dropdown.
+
+Alongside validation of the inputs on the client side. (Pydantic used for server side validation.)
+*/
+
+document.addEventListener("DOMContentLoaded", function () {
+  const organisationDropdown = document.getElementById("organisation_dropdown");
+  const otherOrganisationDiv = document.getElementById("other_organisation_div");
+  const otherOrganisationInput = document.getElementById("organisation_other");
+
+  const roleDropdown = document.getElementById("role_dropdown");
+  const otherRoleDiv = document.getElementById("role_other_div");
+  const otherRoleInput = document.getElementById("role_other");
+
+  const form = document.getElementById("registerForm") || document.getElementById("editProfileForm");
+  if (!form) {
+    return;
+  }
+
+  // Generic validator for "Other" fields
+  function validateOtherInput(dropdown, input, message) {
+    const value = input.value.trim();
+    if (dropdown.value === "Other" && value.length < 3) {
+      input.setCustomValidity(message);
+    } else {
+      input.setCustomValidity("");
+    }
+  }
+
+  // Specific validator for organisation
+  function validateOtherOrganisationInput() {
+    validateOtherInput(
+      organisationDropdown,
+      otherOrganisationInput,
+      "Please specify your organisation (at least 3 characters)."
+    );
+  }
+
+  // Specific validator for role
+  function validateOtherRoleInput() {
+    validateOtherInput(
+      roleDropdown,
+      otherRoleInput,
+      "Please specify your role (at least 3 characters)."
+    );
+  }
+
+  // listners for organisation dropdown
+  organisationDropdown.addEventListener("change", function () {
+    if (this.value === "Other") {
+      otherOrganisationDiv.style.display = "block";
+      otherOrganisationInput.required = true;
+    } else {
+      otherOrganisationDiv.style.display = "none";
+      otherOrganisationInput.required = false;
+      otherOrganisationInput.value = "";
+      otherOrganisationInput.setCustomValidity("");
+    }
+    validateOtherOrganisationInput();
+  });
+
+  otherOrganisationInput.addEventListener("input", function () {
+    validateOtherOrganisationInput();
+  });
+
+  // listners for role dropdown
+  roleDropdown.addEventListener("change", function () {
+    if (this.value === "Other") {
+      otherRoleDiv.style.display = "block";
+      otherRoleInput.required = true;
+    } else {
+      otherRoleDiv.style.display = "none";
+      otherRoleInput.required = false;
+      otherRoleInput.value = "";
+      otherRoleInput.setCustomValidity("");
+    }
+    validateOtherRoleInput();
+  });
+
+  otherRoleInput.addEventListener("input", function () {
+    validateOtherRoleInput();
+  });
+
+
+  // Form submission, prevent submission if any validation failures. 
+  form.addEventListener("submit", function (event) {
+    validateOtherOrganisationInput();
+    validateOtherRoleInput();
+
+    if (!form.checkValidity()) {
+      form.reportValidity();
+      event.preventDefault();
+    }
+  });
+
+  // Run on page load to ensure form is in correct state if form submission fails 
+  // and page/form is re-rendered with previous values.
+  // e.g. password don't match etc... 
+  organisationDropdown.dispatchEvent(new Event("change"));
+  roleDropdown.dispatchEvent(new Event("change"));
+});